@charset "utf-8";

/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body {
    margin: 0px;
    padding: 0px;
    color: #333;    /*全体の文字色*/
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;    /*フォント種類*/
    font-size: 16px;    /*文字サイズ*/
    line-height: 2;        /*行間*/
    background: #fff;    /*背景色*/
    -webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
video {max-width: 100%;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
    color: #333;        /*リンクテキストの色*/
    transition: 0.2s;    /*マウスオン時の移り変わるまでの時間設定。0.2秒。*/
}
a:hover {
    color: #ff0909;            /*マウスオン時の文字色*/
    text-decoration: none;    /*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*inner
---------------------------------------------------------------------------*/
.inner {
    max-width: 1400px;    /*サイトの最大幅*/
    margin: 0 auto;
    padding-left: 2%;
    padding-right: 2%;
}

.inner-information {
    max-width: 880px;
    margin: 0 auto;
    padding-left: 2%;
    padding-right: 2%;
}

/*パンくず
---------------------------------------------------------------------------*/
.breadcrumb-wrap {
    position: relative;
    background-color: #f8f8f8;
    background-image: none;
    z-index: 10;
}

.breadcrumb {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    list-style: none;
    border-radius: 0.25rem;
}

.breadcrumb-item+.breadcrumb-item {
    padding-left: 0.5rem;
}

.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    color: #6c757d;
    content: "/";
}

/*アニメーション設定
---------------------------------------------------------------------------*/
/*opa1（透明から着色状態に）*/
@keyframes opa1 {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/*opa2（透明から着色状態に＆下からフェードイン）*/
@keyframes opa2 {
    0% {opacity: 0;top: 10px;}
    100% {opacity: 1;top: 0px;}
}

/*Google Fontsの設定
---------------------------------------------------------------------------*/
i.material-icons { display: block;}
/* アイコンのサイズを変更するためのルール */
.md-10 { font-size: 10px; }
.md-18 { font-size: 18px; }
.md-24 { font-size: 24px; }
.md-36 { font-size: 36px; }
.md-48 { font-size: 48px; }

/* 明るい背景の場合に黒色でアイコンを表示するためのルール */
.md-dark { color: rgba(0, 0, 0, 0.54); }
.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* 暗い背景の場合に白色でアイコンを表示するためのルール */
.md-light { color: rgba(255, 255, 255, 1); }
.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/*共通設定*/
.red {color: red;}
.blue {color: blue;}
.green { color: green;}
.bold { font-weight: bold;}
.mb-100{ margin-bottom: 100px;}

/*ヘッダー
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
    position: relative;
    padding: 50px;    /*ヘッダー内の余白*/
}

/*ヘッダーブロック（トップページへの追加設定）*/
.home header {
    padding: 0px;    /*余白をなしに*/
    max-height: 900px;
    overflow: hidden;
}


/*ロゴ画像（トップページへの追加設定）*/
.is-fixed-menu #logo img {display: none;}
.home #logo img {
    position: fixed;
    left: 10%;
    top: 50px;
    z-index: 3;
    width: 250px;
    animation-name: opa1;        /*keyframes.cssで使う@keyframesの指定*/
    animation-fill-mode: both;
    animation-duration: 0.8S;    /*アニメーションを実行する時間。「s」は秒の事。*/
    animation-delay: 0.5s;        /*出現するタイミング（秒後）*/
}

header p#logo img {
    position: fixed;
    top: 10px;
    left: 10px;
    left:calc(50% - 250px/2);
    z-index: 1;
    width: 250px;
    animation-name: opa1;        /*keyframes.cssで使う@keyframesの指定*/
    animation-fill-mode: both;
    animation-duration: 0.8S;    /*アニメーションを実行する時間。「s」は秒の事。*/
    animation-delay: 0.5s;        /*出現するタイミング（秒後）*/
}

.is-fixed-menu .logo_little {
    display: block !important;
    float:left;
}

.is-fixed-menu .menu_home {
    display: none;
}

.logo_little  {
    display: none;
}

.is-fixed-menu .logo_little img {
    height: 45px;
}



/*メインメニューのブロック
---------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar {
    position: relative;z-index: 11;
    text-align: center;    /*文字を中央に*/
    background: #fff;    /*背景色*/
    border-top: 1px solid #ccc;        /*上の線の幅、線種、色*/
    border-bottom: 1px solid #ccc;    /*下の線の幅、線種、色*/
    font-family: 'Questrial', sans-serif;    /*冒頭で読み込んだGoogle Fontsを適用する指定*/
    height: 105px;    /*高さ。「#menubar ul li a」や「fixmenu」とも連動するので変更の際は注意。説明はこの下の「#menubar ul li a」で書いています。*/
}
/*メニュー１個あたりの設定*/
#menubar ul li {
    float: left;    /*左に回り込み*/
    width: 16%;        /*幅。今回は５個なので、100÷5=20。*/
    font-size: 20px;    /*文字サイズ*/
}
#menubar ul li a {
    text-decoration: none;display: block;
    height: 85px;        /*メニューブロックの高さ。ここの「85」と、下の行の「20」を合計した「105」の数字と、上の「#menubar」の「height」および下のfixmenu設定に２箇所ある「margin-top」の数字を合わせて下さい。*/
    padding-top: 10px;    /*メニューブロックの高さプラス、上に空ける余白。メニューテキストの上下の配置バランスをここで調整して下さい。※変更の際は、上の行の注意書きもしっかり読んで下さい。*/
}
/*飾り文字*/
#menubar ul li span {
    display: block;
    color: #757575;        /*文字色*/
    letter-spacing: 0.2em;    /*文字間隔を少し広くとる設定*/
}
/*スマホ用メニューを表示させない*/
#menubar-s, #menubar-s2 {display: none;}

/*３本バーアイコンを表示させない*/
#menubar_hdr {display: none;}

/*ドロップダウンメニューの親メニュー*/
#menubar a.cursor-default {
    cursor: default;    /*マウスオーバー時に通常のカーソルになるように*/
    color: #333;        /*文字色*/
}

/*ドロップダウンメニュー用
----------------------------------------------------------------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar ul.ddmenu {
    position:absolute;visibility: hidden;z-index: 10;
    left: 0px;
    width: 94%;
    padding: 50px 3%;
    background: #000;    /*背景色。古いブラウザ用。*/
    background: rgba(0,0,0,0.85);    /*背景色。0,0,0は黒のことで0.85は色が85%出た状態のこと。*/
    text-align: center;    /*テキストをセンタリング*/
    border-bottom: 1px solid #fff;    /*境界が見辛いので、下線の設定。*/
}
/*ドロップダウンメニューの出現アニメーション*/
#menubar li:hover ul.ddmenu {
    animation-name: opa1;        /*keyframes.cssで使う@keyframesの指定*/
    animation-fill-mode: both;
    animation-duration: 0.8S;    /*アニメーションを実行する時間。「s」は秒の事。*/
    animation-delay: 0.1s;        /*出現するタイミング（秒後）*/
}
/*メニュー１個あたりの設定*/
#menubar ul.ddmenu li {
    float: none;
    width: auto;
    display: inline-block;
    font-size: 85%;    /*文字サイズ*/
}
#menubar ul.ddmenu li a {
    height: auto;
    padding: 20px;    /*メニューテキスト同士の余白*/
    color: #fff;    /*文字色*/
    opacity: 0.7;    /*透明度。70%色がついた状態。*/
}
/*マウスオン時*/
#menubar ul.ddmenu li a:hover {
    opacity: 1;        /*透明度。色が100%出た状態。*/
}

/*fixmenu設定（メニューが画面上部に到達した際のスタイル）
---------------------------------------------------------------------------*/
/*上部固定メニュー用fixmenu設定*/
body.is-fixed-menu #menubar.nav-fix-pos {
    position: fixed;width: 100%;top: 0px;
    height: 60px;    /*メニューの高さを少し狭くする*/
    animation-name: opa1;        /*keyframes.cssで使う@keyframesの指定*/
    animation-fill-mode: both;
    animation-duration: 0.8S;    /*アニメーションを実行する時間。「s」は秒の事。*/
    animation-delay: 0.2s;        /*出現するタイミング（秒後）*/
}
body.is-fixed-menu {
    margin-top: 105px;    /*※上の「#menubar ul li a」の注意書きにある数字を指定します。*/
}
/*※以下の２ブロックのスタイルの「中身」は、上の２ブロックのスタイルと単純に合わせておいて下さい。*/
body.is-fixed #menubar.nav-fix-pos {
    position: fixed;width: 100%;top: 0px;
}
body.is-fixed .contents {
    margin-top: 105px;    /*※上の「#menubar ul li a」の注意書きにある数字を指定します。*/
}

/* アイコンを横並びにする */
body.is-fixed-menu #menubar ul li i {
    display:inline;
    margin: 5px 5px 0 0;
    vertical-align: text-bottom;
}

/*装飾文字を非表示にする*/
body.is-fixed-menu #menubar ul li span {
    display: none;
}
/*メニューテキストの上下バランスを調整しなおす。２つの数字の合計と、「body.is-fixed-menu #menubar.nav-fix-pos」の「height: 60px;」の数字が合うようにして下さい。*/
body.is-fixed-menu #menubar ul li a {
    height: 50px;
    padding-top: 10px;
}
/*ドロップダウンメニューへの再設定*/
body.is-fixed-menu #menubar ul.ddmenu li a {
    padding: 20px;
    height: auto;
}

/*コンテンツ
---------------------------------------------------------------------------*/
.contents {
    padding: 50px 0 50px !important;    /*上、左右、下へのコンテンツ内の余白*/
    position: relative;
    animation-name: opa2;    /*keyframes.cssで使う@keyframesの指定*/
    animation-duration: 0.5S;    /*アニメーションの実行時間*/
    animation-delay: 0.5s;        /*出現するタイミング（秒後）*/
    animation-fill-mode: both;
    background-color: #fafafa;
    background-image: url(/images/bg_web.png);
    background-size:  cover;
    z-index: 10;
    overflow: hidden;
}

.contents-header {
    padding: 100px 0 50px;    /*上、左右、下へのコンテンツ内の余白*/
    position: relative;
    animation-name: opa2;    /*keyframes.cssで使う@keyframesの指定*/
    animation-duration: 0.5S;    /*アニメーションの実行時間*/
    animation-delay: 0.5s;        /*出現するタイミング（秒後）*/
    animation-fill-mode: both;
    background-color: #fafafa;
    background-image: url(/images/bg_web.png);
    background-size:  cover;
    z-index: 10;
    overflow: hidden;
}

/*h1タグ*/
.contents h1,
.contents-header h1 {
    clear: both;
    margin-bottom: 100px;
    font-size: 300%;    /*文字サイズ*/
    text-align: center;    /*文字をセンタリング*/
    letter-spacing: 0.2em;    /*文字間隔を少し広めにとる指定。通常がいいならこの１行削除。*/
    border-bottom: solid 1px #000;
}
/*h1タグ内のspanタグ（装飾文字）*/
.contents h1 span {
    display: block;
    font-size: 30%;    /*文字サイズ*/
    color: #999;        /*文字色*/
}
/*h2タグ*/
.contents h2 {
    clear: both;
    margin-bottom: 100px;
    font-size: 300%;    /*文字サイズ*/
    text-align: center;    /*文字をセンタリング*/
    letter-spacing: 0.2em;    /*文字間隔を少し広めにとる指定。通常がいいならこの１行削除。*/
    border-bottom: solid 1px #000;
}
/*h2タグ内のspanタグ（装飾文字）*/
.contents h2 span {
    display: block;
    font-size: 30%;    /*文字サイズ*/
    color: #999;        /*文字色*/
}
/*h3タグ*/
.contents h3 {
    clear: both;
    margin-bottom: 30px;
    font-size: 150%;    /*文字サイズ*/
    border-bottom: 1px solid #ccc;    /*下線の幅、線種、色*/
    padding-left: 3%;        /*左側に空ける余白*/
    letter-spacing: 0.1em;    /*文字間隔を少し広めにとる指定。通常がいいならこの１行削除。*/
}
/*段落タグ*/
.contents p {
    padding: 0 3% 30px;    /*上、左右、下への余白*/
}
.contents h2 + p,
.contents h3 + p {
    margin-top: -5px;
}
.contents p + p {
    margin-top: -10px;
}
.contents section + section {
    margin-top: 100px;
}

/*list（worksページで使っている横長ブロック）
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.contents .list {
    position: relative;
    border-radius: 5px;                /*角丸の指定。ほんの少し角が丸くなります。*/
    overflow: hidden;                /*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
    display: flex;
    align-items: center;            /*中のブロックの縦並びの揃え方*/
    background: #000;        /*背景色*/
    color: #fff;            /*文字色*/
    margin: 0 3% 30px;        /*ボックスの下に空けるスペース。上、左右、下への順番。*/
}
/*リンクテキストの文字色*/
.contents .list a {
    color: #fff;
}
/*ボックス内のh4（見出し）タグ*/
.contents .list h4 {
    margin-bottom: 20px;    /*下のテキストとの間に空けるスペース*/
    font-size: 140%;        /*文字サイズ*/
}

/*ボックス内のp（段落）タグ*/
.contents .list p {
    padding: 0;        /*余白のリセット*/
}
/*ボックス内のfigure画像*/
.contents .list figure {
    width: 50%;        /*画像の幅*/
}
/*「class="text"」を指定したブロック。テキストブロック。*/
.contents .list .text {
    width: 40%;        /*ブロックの幅。下のpaddingの5%とも連動するので変更の際は注意して下さい。*/
    padding: 2% 5%;    /*上下、左右へのブロック内の余白*/
}

/*偶数目のブロックの設定（画像とテキストブロックが左右交互に入れ替わる設定です。全部同じむきがよければこのブロックを削除します。）*/
.contents .list:nth-of-type(even) .text {
    order: 1;
}

/*装飾文字の設定（共通）*/
.contents .list::before {
    font-size: 10vw;
    line-height: 1;
    position: absolute;
    color: rgba(255,255,255,0.15);    /*文字色。255,255,255は白のことで、0.15は色が15%出た状態のこと。*/
    font-family: 'Tangerine', cursive;    /*冒頭で読み込んだGoogle Fontsを適用する指定*/
}
/*奇数番目のブロックの文字の配置場所指定*/
.contents .list:nth-of-type(odd)::before {
    left: -60px;
    top: -40px;
}
/*偶数番目のブロックの文字の配置場所指定*/
.contents .list:nth-of-type(even)::before {
    right: 0px;
    top: -40px;
}
/*１つ目ブロックに表示させるテキスト*/
.contents .list:nth-of-type(1)::before {
    content: "Works1";
}
/*２つ目ブロックに表示させるテキスト*/
.contents .list:nth-of-type(2)::before {
    content: "Works2";
}
/*３つ目ブロックに表示させるテキスト*/
.contents .list:nth-of-type(3)::before {
    content: "Works3";
}

/*ボックス内のボタン（共通）*/
.btn1 a {
    display: block;
    text-decoration: none;
    border: 1px solid #000;        /*枠線の幅、線種、色*/
    border-top: 1px solid #fff;
    text-align: center;            /*テキストをセンタリング*/
    padding: 10px 30px;            /*上下、左右へのボタン内の余白*/
    margin: 40px auto 0;        /*上、左右、下へのボックスの外側への余白*/
    background-color: #000;
}
/*ボタンのマウスオン時（共通）*/
.btn1 a:hover {
    background: #fff;    /*背景色*/
    color: #000 !important;        /*文字色*/
}

/*list-column（トップページで使っている３列ブロック）
---------------------------------------------------------------------------*/
/*カラムブロック全体を囲むボックス*/
.contents .list-column-container {
    display: flex;
    justify-content: space-between;    /*中のブロックの横並びの揃え方*/
    flex-wrap: wrap;                /*中のブロックを自動で折り返す*/
    margin: 0 3%;
}
/*１カラムあたりの設定*/
.contents .list-column {
    display: flex;
    flex-direction: column;            /*中のブロックを並べる向きの指定。これは縦に並べる意味。*/
    width: 32%;                        /*ブロック幅*/
    margin-bottom: 20px;            /*ブロックの下に空ける余白*/
    background: #222;                /*背景色*/
    color: #fff;                    /*文字色*/
    border-radius: 5px;                /*角丸の指定。ほんの少し角が丸くなります。*/
    overflow: hidden;                /*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
}
/*リンクテキストの文字色*/
.contents .list-column a {
    color: #fff;
}
/*ボックス内のh4（見出し）タグ*/
.contents .list-column h4 {
    margin-bottom: 20px;    /*下のテキストとの間に空けるスペース*/
    font-size: 140%;        /*文字サイズ*/
}
/*ボックス内のp（段落）タグ*/
.contents .list-column p {
    padding: 0;        /*余白のリセット*/
}

/*「class="text"」を指定したブロック。テキストブロック。*/
.contents .list-column .text {
    padding: 5%;            /*ブロック内の余白*/
    flex: 1 0 auto;
}
/*IEバグ対応*/
.contents .list-column figure {
    min-height: 0%;
}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
    clear: both;position: relative;z-index: 1;
    font-size: 80%;    /*文字サイズ*/
    background: #222;    /*背景色*/
    color: #ccc;        /*文字色*/
    text-align: center;
}
footer a {color: #ccc;}
footer a:hover {color: #fff;}
footer .pr {display: block;font-size: 80%;}

/*フッターメニュー
---------------------------------------------------------------------------*/
/*ボックス全体*/
#footermenu {
    overflow: hidden;
    padding: 50px 0;    /*上下、左右へのボックス内の余白*/
    background: url(../images/arg_logo.svg) no-repeat left bottom / 10%;    /*背景画像の読み込み。*/
}
/*リンクテキスト*/
#footermenu li a {
    text-decoration: none;
    opacity: 0.7;    /*透明度。70%の色がついた状態。*/
}
/*マウスオン時*/
#footermenu li a:hover {
    opacity: 1;        /*透明度。100%色がついた状態。*/
}
/*１行分の設定*/
#footermenu ul {
    float: left;    /*左に回り込み*/
    width: 14%;        /*幅*/
    padding-right: 1%;
    padding-left: 1%;
    text-align: left;
}
/*見出し*/
#footermenu li.title, #footermenu li.title a {
    opacity: 1;    /*透明度。100%色がついた状態。*/
}

/*コピーライト
---------------------------------------------------------------------------*/
#copyright {
    clear: both;
    text-align: center;
    background: #000;    /*背景色*/
    padding: 20px 0;    /*上下、左右へのボックス内の余白*/
}
#copyright a {text-decoration: none;}

/*facebookやtwitterなどのアイコン
---------------------------------------------------------------------------*/
/*アイコン全体を囲むブロック*/
ul.icon {
    margin-bottom: 20px;
}
/*アイコン１個あたりの設定*/
ul.icon li {
    display: inline-block;    /*横並びにさせる指定*/
}
/*アイコン画像の設定*/
ul.icon img {
    width: 30px;        /*画像の幅*/
}
ul.icon img:hover {
    opacity: 0.8;
}

/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*見出しを含まないお知らせブロック*/
#new dl {
    padding: 0px 20px;        /*上下、左右へのブロック内の余白*/
}
/*日付設定*/
#new dt {
    float: left;
    width: 9em;        /*幅*/
    letter-spacing: 0.1em;
}
/*記事設定*/
#new dd {
    padding-left: 9em;
}

/*ta1設定
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption, .ta2 caption {
    border: 1px solid #ccc;    /*テーブルの枠線の幅、線種、色*/
    border-bottom: none;    /*下線だけ消す*/
    text-align: left;        /*文字を左寄せ*/
    background: #eeece4;    /*背景色*/
    font-weight: bold;        /*太字に*/
    padding: 10px;    /*ボックス内の余白*/
}
/*ta1テーブル*/
.ta1 {
    width: 94%;
    table-layout: fixed;
    margin: 0 3% 30px;
    background: #fff;    /*背景色*/
}
.ta1, .ta1 td, .ta1 th {
    border: 1px solid #ccc;    /*テーブルの枠線の幅、線種、色*/
    padding: 10px;    /*ボックス内の余白*/
    word-break: break-all;
}
/*左側ボックス*/
.ta1 th {
    width: 150px;    /*幅*/
    text-align: center;    /*センタリング*/
    font-weight: normal;
}

/*inputボタン
---------------------------------------------------------------------------*/
.contents input[type="submit"].btn,
.contents input[type="button"].btn,
.contents input[type="reset"].btn {
    -webkit-appearance: none;
    outline: none;
    padding: 5px 20px;        /*上下、左右へのボックス内の余白*/
    border: 1px solid #333;    /*枠線の幅、線種、色*/
    font-size: 130%;        /*文字サイズ*/
    border-radius: 3px;        /*角丸のサイズ*/
    background: #333;        /*背景色*/
    color: #fff;            /*文字色*/
}
/*マウスオン時の設定*/
.contents input[type="submit"].btn:hover,
.contents input[type="button"].btn:hover,
.contents input[type="reset"].btn:hover {
    border: 1px solid #333;    /*枠線の幅、線種、色*/
    background: #fff;        /*背景色*/
    color: #333;            /*文字色*/
}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
    background: #F00;    /*背景色*/
    color: #FFF;        /*文字色*/
    font-size: 70%;        /*文字サイズ*/
    line-height: 1.5;
    padding: 2px 5px;
    border-radius: 2px;
    margin: 0px 5px;
    vertical-align: text-top;
}

/*ヘッダーにメニューが固定される分、リンク先が隠れるのを防ぐ為のスタイル。※ページ内へのリンクで使う。
---------------------------------------------------------------------------*/
.link {
    display: block;
    margin-top: -120px;
    padding-top: 120px;
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
/*通常時のボタンは非表示*/
body .nav-fix-pos-pagetop a {display: none;}
/*fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
    display: block;text-decoration: none;text-align: center;
    width: 50px;        /*幅*/
    line-height: 50px;    /*高さ*/
    z-index: 1;
    position: fixed;
    bottom: 20px;    /*下から20pxの場所に配置*/
    right: 3%;        /*右から3%の場所に配置*/
    background: #666;    /*背景色（古いブラウザ用）*/
    background: rgba(0,0,0,0.6);    /*背景色。0,0,0は黒の事。0.6は60%色がついた状態。*/
    color: #fff;    /*文字色*/
    border: 1px solid #fff;    /*枠線の幅、線種、色*/
    animation-name: opa1;    /*keyframes.cssで使う@keyframesの指定*/
    animation-duration: 1S;    /*アニメーションの実行時間*/
    animation-fill-mode: both;    /*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
}
/*マウスオン時*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
    background: #999;    /*背景色*/
}

/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul.disc {
    list-style: disc;
    padding: 0 3% 20px 6%;
}
ol {
    padding: 0 3% 20px 6%;
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #fff;border: 1px solid #ccc;display: inline-block;padding: 0px 10px !important;border-radius: 4px;}
p.look {margin: 0 3%;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb50 {margin-bottom: 50px !important;}
.clear {clear: both;}
.color1, .color1 a {color: #ff0909 !important;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.l {text-align: left !important;}
.fl {float: left;}
.fr {float: right;}
.big1 {font-size: 30px;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.sh {display: none;}

blockquote {
    position: relative;
    padding: 35px 15px 10px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #f5f5f5;
    color: #777777;
    border-left: 4px solid #9dd4ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 3px;
    content: "“";
    font-family: sans-serif;
    color: #9dd4ff;
    font-size: 90px;
    line-height: 1;
}

blockquote p {
    padding: 0;
    margin: 7px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}


.alternate-bg-m {
    background-color: #f4f6f9;
    background-image: url(/images/bg_detective.png);
    background-size:  cover;
}
.alternate-bg-c {
    background-color: #ffffff;
    background-image: url(/images/bg_cms.png);
    background-size:  cover;
}
.alternate-bg-b {
    background-color: #ffffff;
    background-image: url(/images/bg_blue.png);
    background-size:  cover;
}
.alternate-bg-w {
    background-color: #ffffff;
    background-image: none;
}

.alternate-bg-g {
    background-color: #f8f8f8;
    background-image: none;
}

.more {
    padding: 0 30px 20px 0;
    text-align: right;
}

.btn-type01 {
    display: inline-block;
    min-width: 220px;
    vertical-align: top;
    text-align: center;
    font-weight: normal;
    color: #fff;
    background-color: #2a3539;
    padding: 10px 30px 10px 40px;
    border: 0;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    text-decoration: none;
    box-sizing: border-box;
}

.btn-type01 i.material-icons  {display: inline !important;vertical-align: middle;}

pre {
  word-wrap: break-word;
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 4px;
  font-size: 16px;
  overflow: auto;
}

/*お知らせの設定
---------------------------------------------------------------------------*/
.inner-information li {
    border-bottom: 1px solid #aaa;
    padding: 10px 0;
}

.inner-information li time {
    margin-right: 20px;
}

.company-information {
    width: 72%;
    margin: 50px auto 80px;
}

.company-information h3 {
    font-weight: bold;
    font-size: 140%;
    border-bottom: none;
    margin-bottom: 0;
    padding: 0;
}

.company-information strong {
    font-weight: bold;
    font-size: 120%;
}

table {
    width: 100%;
    border-collapse: collapse;
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    border-color: grey;
}

.tbl-general-01 {
    margin-bottom: 40px;
}

.tbl-general-01 th {
    width: 25%;
    text-align: left;
    font-weight: 400;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
}

.tbl-general-01 td {
    padding: 10px;
}
.tbl-general-01 td, .tbl-general-01 th {
    border-bottom: 1px solid #aaa;
}

/*お問い合わせの設定
---------------------------------------------------------------------------*/
#formWrap {
	width:800px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:100%;
}

#formWrap h4 {
	margin-bottom :30px;
}

.contact-form  input[type="text"] ,
.contact-form select ,
.contact-form  textarea{
    padding: 12px;
    width: 100%;
    border: 1px solid #aaa;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1) inset;
}

table.formTable{
	width:100%;
	margin:0 auto 30px;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}

.contact-form .required {
    font-size: 80%;
    color: red;
}

/*採用情報の設定
---------------------------------------------------------------------------*/
.recruit .recruit_wrap {
    margin: 0 auto 30px;
    width: 80%;
}


/*事業内容の設定
---------------------------------------------------------------------------*/
.service {
    margin: 0 auto;
}
.website {
    margin: 0 auto;
    width: 80%;
}
.service h2,
.website h2 {
    margin-bottom: 40px;
    font-size: 140%;
}

.website h3 {
        background: linear-gradient(135deg, #fff, #ccc);
}

.service ul,
.website ul{
  list-style: none;
  padding: 0 30px;
  position: relative;
}

.service ul li,
.website ul li
{
 font-size: 16px;
 font-weight: bold;
 align-items: center;
 margin-bottom: 20px;
}

.service ul li ul,
.website ul li ul,
{
 padding: 0 20px;
}

.service ul li ul li, 
.website ul li ul li, 
{
 font-weight: normal;
 margin-left: 10px;
 margin-bottom: 0px;
}

.service ul li ul li:before,
.website ul li ul li:before{
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: gray; /*アイコン色*/
  font-weight: 900;
}

.sec_func_grid {
    display: -ms-flexbox;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    padding: 40px 0;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
}

.sec_func_block {
    padding: 0 13px;
    border-right: 2px dotted #fff;
    -ms-flex: 1 1 0px;
    flex: 1 0 30%;
    margin-bottom: 50px;
}

.sec_func_block2 {
    padding: 0 13px;
    border-right: 2px dotted #fff;
    -ms-flex: 1 1 0px;
    flex: 1 0 45%;
    margin-bottom: 50px;
}
.sec_func_img {
    margin-bottom: 25px;
    text-align: center;
}

.sec_func_img img {
    margin: auto;
}

.sec_func_box {
    min-height: 500px;
    margin-bottom: 10px;
    padding: 25px;
    border-radius: 8px;
    background-color: #fff;
}

.sec_func_box2 {
    min-height: 300px;
    margin-bottom: 10px;
    padding: 25px;
    border-radius: 8px;
    background-color: #fff;
}

.c-heading {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    color: #1772ba;
    line-height: normal;
}

.c-heading::after {
    display: block;
    width: 90%;
    height: 2px;
    margin: 20px auto 0;
    content: '';
    background-color: #1f92ee;
}

section :last-child {
    margin-bottom: 0;
}
.sec_func_text {
    font-size: 1rem;
    margin-top: 15px;
}

/*カテゴリーページ
---------------------------------------------------------------------------*/
ul.entrylist {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.entrylist li {
  padding: 1em 0.5em;
  border-bottom: 1px dotted #161616;
  display: block;
  overflow: hidden;
}

span.date {
  display: inline-block;
  width: 140px;
}

/*コラムの設定
---------------------------------------------------------------------------*/
h1.column {
  margin-bottom: 20px;
  letter-spacing: 0;
  font-size: 250%;
}

div#column h2 {
  position: relative;
  background: #62a6aa;
  font-size: 2rem;
  padding: 20px 30px 20px 40px;
  border-radius: 20px;
  text-align: left;
  letter-spacing: 0;
  border-bottom: none;
  margin: 30px 0 10px;
  color: #fff;
}

div#column h2:before {
  position: absolute;
  top: 25%;
  left: 20px;
  width: 6px;
  height: 50%;
  content: '';
  opacity: .2;
  -ms-filter: "alpha(opacity=20)";
  border-radius: 3px;
  background: #5f7276;
}

div#column {
  width: calc(80% - 40px);
  float: left;
  line-height: 1.5;
  padding: 0 20px;
}

div#column img {
  margin: 0 auto 40px;
  border: 5px solid #fff;
  box-shadow: 0 0 5px #999;
}

div#column p {
  padding: 0;
  margin: 0 0 10px 0;
}

div#column table{
  width: 100%;
  border-spacing: 0;
  margin: 20px 0 40px;
}

div#column table th{
  border-bottom: solid 2px #fb5144;
  padding: 10px;
}

div#column table td{
  border-bottom: solid 2px #ddd;
  text-align: left;
  padding: 10px;
}

div#column ul { list-style-type: disc; }
div#column ul,
div#column ol {
  color: #1e366a;
  padding: 0.5em 0 1em 1.5em;
}

div#column ul li,
div#column ol li {
  line-height: 1.5;
  padding: 0;
}

div#column ul.entrylist li {
    line-height: 1.5;
    padding: 10px;
}

/*サイドカラムの設定
---------------------------------------------------------------------------*/
div#side_column {
  float: left;
  width: 20%;
}

div#side_column h3 {
  margin: 0 0 10px 0;
  background: #f8f8f8;
}

div#side_column ul {
  margin: 0 0 40px 0;
}

div#side_column ul li {
  border-bottom: dotted 1px #ccc;
}



/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
○ 画面幅1050px以下の設定
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:1050px){
.home #logo img {
    top: 15px !important;
    left: 5px !important;
    width: 150px !important;
}

.sec_func_block {
    padding: 0 13px;
    border-right: 2px dotted #fff;
    -ms-flex: 1 1 0px;
    flex: 1 0 45%;
    margin-bottom: 50px;
}
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
○ 画面幅800px以下の設定
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:800px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
    font-size: 2vw;    /*文字サイズ*/
}

/*ヘッダー
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
    border-bottom: 1px solid #ccc;
}
/*ヘッダーブロック（トップページへの追加設定）*/
.home header {
    border: none;
}

.contents-header {
    padding: 30px 0;
}

.contents-header h1 {
    clear: both;
    margin-bottom: 0px;
    font-size: 5vw;
}

header p#logo img {
    top: 15px !important;
    left: 5px !important;
    width: 50%;
}

.home #logo img {
    top: 15px !important;
    left: 5px !important;
    width: 80px !important;
}

.is-fixed-menu #logo img {
    display: block;
}

.is-fixed-menu .logo_little {
    display: none !important;
}

.is-fixed-menu .logo_little img {
    display: none;
}

.more {
    text-align: center;
    padding: 0 0 20px 0;
}

/*メインメニュー
---------------------------------------------------------------------------*/
/*スマホ用メニューブロック全体*/
#menubar-s {
    overflow: auto;height: 100%;
    position: fixed;z-index: 100;
    top: 0px;
    width: 100%;
    background: rgba(0,0,0,0.8);    /*背景色*/
    border-top: 1px solid #fff;        /*上の線の幅、線種、色*/
    animation-name: frame1;        /*冒頭のkeyframesの名前*/
    animation-duration: 0.5s;    /*アニメーションの実行時間。0.5秒。*/
    animation-fill-mode: both;    /*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
    font-size: 16px;            /*文字サイズ*/
}
#menubar-s li span {
    margin-left: 20px;
    font-size: 80%;
}
/*メニュー１個あたりの設定と、子メニューの見出し。*/
#menubar-s ul li a,#menubar_hdr2 {
    display: block;text-decoration: none;
    padding: 30px 20px 30px 60px;
    border-bottom: 1px solid #fff;    /*下の線の幅、線種、色*/
    color: #fff;        /*文字色*/
}
/*PC用メニューを非表示にする*/
#menubar {display: none;}

/*子メニュー
---------------------------------------------------------------------------*/
/*子メニューの見出しの追加。基本は上のブロックで設定しています。*/
#menubar_hdr2 {
    padding-left: 60px;    /*上にある「メニュー１個あたりの設定と、子メニューの見出し」の最後の数字（４つ目）に合わせる。*/
}
/*子メニューメニューブロック全体*/
#menubar-s2 {
    display: block;
    margin-top: 10px;
    border-radius: 5px;
    background: rgba(0,0,0,0.3);
    border: 1px solid #fff;
}
/*「＞」アイコン設定*/
#menubar_hdr2.close {
    background: url(../images/arrow2.png) no-repeat 20px 35px / 18px;
}
/*「＾」アイコン設定*/
#menubar_hdr2.open {
    background: url(../images/arrow3.png) no-repeat 20px 35px / auto 18px;
}
/*子メニュー１個あたりの設定*/
#menubar-s2 li a {
    border-bottom: 1px solid #fff !important;
    padding: 10px 20px !important;
}
#menubar-s2 li:last-child a {
    border-bottom: none !important;
}

/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
    display: block;
    position: fixed;z-index: 100;
    top: 20px;        /*上からの配置場所*/
    right: 2%;    /*右からの配置場所*/
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
    width: 50px;    /*幅*/
    height: 50px;    /*高さ*/
    border: 1px solid #fff;
}
/*三本バーアイコン*/
#menubar_hdr.close {
    background: #000 url(../images/icon_menu.png) no-repeat center top/50px;    /*背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
}
/*閉じるアイコン*/
#menubar_hdr.open {
    background: #000 url(../images/icon_menu.png) no-repeat center bottom/50px;    /*背景色、背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
}

/*fixmenu設定（メニューが画面上部に到達した際のスタイル）
---------------------------------------------------------------------------*/
/*fixmenuから折りたたみメニューになるのでリセット。*/
body.is-fixed-menu .contents {
    margin-top: 0px;
}
body.is-fixed .contents {
    margin-top: 0px;
}

/*コンテンツ
---------------------------------------------------------------------------*/
.contents {
    padding: 0;    /*上下、左右へのコンテンツ内の余白*/
}

.home .contents {
    padding: 50px 0;    /*上下、左右へのコンテンツ内の余白*/
}

/*h2タグ*/
.contents h2 {
    margin-bottom: 50px;
    font-size: 5vw;
}

.contents .list-column {
    width: 100%;                        /*ブロック幅*/
}

body.is-fixed-menu {
    margin-top: 0px;
}

/*list-column（トップページで使っている３列ブロック）
---------------------------------------------------------------------------*/
/*ボックス内のh4（見出し）タグ*/
.contents .list-column h4 {
    margin-bottom: 0px;
}

/*ヘッダーメニューが固定されなくなるので、再設定。
---------------------------------------------------------------------------*/
.link {
    margin-top: -30px;
    padding-top: 30px;
}

/*その他
---------------------------------------------------------------------------*/
body.s-n .sub,body.s-n #footermenu {display: none;}
.big1 {font-size: 20px;}

.company-information {
    width: 100%;
    margin-bottom: 0px;
}

/*採用情報の設定
---------------------------------------------------------------------------*/
div.recruit {
    margin-top: 30px;
}
.recruit .recruit_wrap {
    width: 100%;
    margin-bottom: 30px;
}

/*お問い合わせの設定
---------------------------------------------------------------------------*/
#formWrap {
    width: 100%;
    margin-bottom: 0px;
}

.tbl-general-01 {
    margin-bottom: 0px;
}

.sec_func_block {
    padding: 0 13px;
    border-right: 2px dotted #fff;
    -ms-flex: 1 1 0px;
    flex: 1 0 45%;
    margin-bottom: 50px;
}

#column {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 0 30px 0;
}

#side_column{
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
}


}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
○　画面幅480px以下の設定
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:480px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
    font-size: 3vw;
}

/*コンテンツ
---------------------------------------------------------------------------*/
.contents {
    font-size: 4vw;
}
/*h2タグ*/
.contents h2 {
    margin-bottom: 30px;
    line-height: normal;
}
/*h3タグ*/
.contents h3 {
    margin-bottom: 20px;
}
.contents section + section {
    margin-top: 30px;
}

/*list（worksページで使っている横長ブロック）
---------------------------------------------------------------------------*/
/*ボックス内のボタン（共通）*/
.btn1 a {
    padding: 5px 10px;            /*上下、左右へのボタン内の余白*/
}

/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*ta1設定*/
.ta1, .ta1 td, .ta1 th {
    padding: 5px;    /*ボックス内の余白*/
}
/*ta1の左側ボックス*/
.ta1 th {
    width: 100px;
}

/*その他
---------------------------------------------------------------------------*/
.ws,.wl {width: 94%;}
.fl {float: none;}
.fr {float: none;}
.big1 {font-size: 16px;}
.sh {display:block;}
.pc {display:none;}
.p0 {padding: 0;}

#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td,
table.tbl-general-01 th, table.tbl-general-01 td {
	width:auto;
	display:block;
}
table.formTable th,
table.tbl-general-01 th {
    margin-top:5px;
    border-bottom:0;
    background:#efefef;
}

table.tbl-general-01 td {
    border: none;
}
form input[type="text"], form textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
}
form input[type="submit"], form input[type="reset"], form input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}

.website {
    width: 100%;
}
.sec_func_block {
    padding: 0 13px;
    border: none;
    -ms-flex: 1 1 0px;
    flex: 1 0 90%;
    margin-bottom: 50px;
}



}