@charset "utf-8";

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');

/*keyframes.cssの読み込み
---------------------------------------------------------------------------*/

@import url("keyframes.css");

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


/*全体の設定
---------------------------------------------------------------------------*/

body {
    margin: 0px;
    padding: 0px;
    color: #333;
    /*全体の文字色*/
    font-size: 16px;
    /*文字サイズ*/
    line-height: 2;
    /*行間*/
    background: #fafafa;
    /*背景色*/
    -webkit-text-size-adjust: none;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
    letter-spacing: 0.1em;
}

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%;
}

b,
strong,
.bold {
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif;
}


/* IEだけに適応 */

_:lang(x)::-ms-backdrop,
.selector {
    font-family: "Segoe UI", Meiryo, sans-serif;
}


/*リンク（全般）設定
---------------------------------------------------------------------------*/

a {
    color: #333;
    /*リンクテキストの色*/
    transition: 0.2s;
    /*マウスオン時の移り変わるまでの時間設定。0.2秒。*/
}

a:hover {
    color: #1d2087;
    /*マウスオン時の文字色*/
    text-decoration: none;
    /*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}


/*inner
---------------------------------------------------------------------------*/

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


/*ヘッダー
---------------------------------------------------------------------------*/


/*ヘッダーブロック*/

header {
    position: relative;
    padding: 20px;
    /*ヘッダー内の余白*/
}


/*ヘッダーブロック（トップページへの追加設定）*/

.home header {
    padding: 0px;
    /*余白をなしに*/
}


/*ロゴ画像*/

header #logo {
    width: 200px;
    /*画像幅*/
    margin: 0 auto;
    /*中央配置*/
}


/*ロゴ画像（トップページへの追加設定）*/

.home header #logo {
    display: none;
    /*スライドショーの邪魔なので非表示に*/
}


/*メインメニューのブロック
---------------------------------------------------------------------------*/


/*メニューブロック*/

#menubar {
    position: relative;
    z-index: 10;
    text-align: center;
    /*文字を中央に*/
    background: #fff;
    /*背景色*/
    border-top: 1px solid #ccc;
    /*上の線の幅、線種、色*/
    border-bottom: 1px solid #ccc;
    /*下の線の幅、線種、色*/
    height: 105px;
    /*高さ。「#menubar ul li a」や「fixmenu」とも連動するので変更の際は注意。説明はこの下の「#menubar ul li a」で書いています。*/
}


/*メニュー１個あたりの設定*/

#menubar ul li {
    float: left;
    /*左に回り込み*/
    width: 14.28%;
    /*幅。今回は５個なので、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: 20px;
    /*メニューブロックの高さプラス、上に空ける余白。メニューテキストの上下の配置バランスをここで調整して下さい。※変更の際は、上の行の注意書きもしっかり読んで下さい。*/
}

#menubar ul li a:hover {
    font-weight: bold;
}


/*飾り文字*/

#menubar ul li span {
    display: block;
    font-size: 10px;
    /*文字サイズ*/
    color: #999;
    /*文字色*/
    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;
    /*メニューの高さを少し狭くする*/
}

body.is-fixed-menu #contents {
    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 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: 100px 0 50px;
    /*上、左右、下へのコンテンツ内の余白*/
    position: relative;
    animation-name: opa2;
    /*keyframes.cssで使う@keyframesの指定*/
    animation-duration: 0.5S;
    /*アニメーションの実行時間*/
    animation-delay: 0.5s;
    /*出現するタイミング（秒後）*/
    animation-fill-mode: both;
}


/*h2タグ*/

#contents h2 {
    clear: both;
    margin-bottom: 80px;
    font-size: 250%;
    /*文字サイズ*/
    text-align: center;
    /*文字をセンタリング*/
    letter-spacing: 0.2em;
    /*文字間隔を少し広めにとる指定。通常がいいならこの１行削除。*/
}


/*h2タグ内のspanタグ（装飾文字）*/

#contents h2 span {
    display: block;
    font-size: 30%;
    /*文字サイズ*/
    color: #999;
    /*文字色*/
}


/*h3タグ*/

#contents h3 {
    clear: both;
    margin-bottom: 30px;
    font-size: 180%;
    /*文字サイズ*/
    border-bottom: 1px solid #ccc;
    /*下線の幅、線種、色*/
    letter-spacing: 0.1em;
    /*文字間隔を少し広めにとる指定。通常がいいならこの１行削除。*/
    text-align: center;
    padding-bottom: 30px;
    color: #c9252c;
}

#contents h4 {
    font-size: 130%;
    color: #fff;
    font-weight: bold;
    line-height: 1.6;
    position: relative;
    /* display: inline-block; */
    padding: 10px 80px;
    margin: 20px 0;
    text-align: center;
    border-bottom: 1px #fff solid;
}

#contents h4 span {
    display: block;
    font-size: 70%;
    color: #999;
}

#contents h5 {
    font-size: 140%;
    color: #1d2087;
    font-weight: bold;
    line-height: 1.6;
    position: relative;
    /* display: inline-block; */
    padding: 20px 80px;
    margin: 30px 0;
    text-align: center;
    border-bottom: 1px #1d2087 solid;
}

#contents h5 span {
    display: block;
    font-size: 70%;
    color: #999;
}


/*段落タグ*/

#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;
    display: inline-block;
}


/*list（worksページで使っている横長ブロック）
---------------------------------------------------------------------------*/


/*ボックスの設定*/

#contents .list {
    position: relative;
    border-radius: 5px;
    /*角丸の指定。ほんの少し角が丸くなります。*/
    overflow: hidden;
    /*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
    display: flex;
    align-items: center;
    /*中のブロックの縦並びの揃え方*/
    background: #313131;
    /*背景色*/
    color: #fff;
    /*文字色*/
    /*ボックスの下に空けるスペース。上、左右、下への順番。*/
}


/*リンクテキストの文字色*/

#contents .list a {
    color: #1d2087;
}


/*ボックス内の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: 14vw;
    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: "Vision";
}


/*２つ目ブロックに表示させるテキスト*/

#contents .list:nth-of-type(2)::before {
    content: "Mission";
}


/*３つ目ブロックに表示させるテキスト*/

#contents .list:nth-of-type(3)::before {
    content: "Recruit";
}


/*ボックスの設定*/

#contents .list2 {
    position: relative;
    border-radius: 5px;
    /*角丸の指定。ほんの少し角が丸くなります。*/
    overflow: hidden;
    /*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
    display: flex;
    align-items: center;
    /*中のブロックの縦並びの揃え方*/
    background: #313131;
    /*背景色*/
    color: #fff;
    /*文字色*/
    margin-top: 70px;
    /*ボックスの下に空けるスペース。上、左右、下への順番。*/
}


/*リンクテキストの文字色*/

#contents .list2 a {
    color: #1d2087;
}


/*ボックス内のh4（見出し）タグ*/

#contents .list2 h4 {
    margin-bottom: 20px;
    /*下のテキストとの間に空けるスペース*/
    font-size: 140%;
    /*文字サイズ*/
}


/*ボックス内のp（段落）タグ*/

#contents .list2 p {
    padding: 0;
    /*余白のリセット*/
}


/*ボックス内のfigure画像*/

#contents .list2 figure {
    width: 50%;
    /*画像の幅*/
}


/*「class="text"」を指定したブロック。テキストブロック。*/

#contents .list2 .text {
    width: 50%;
    /*ブロックの幅。下のpaddingの5%とも連動するので変更の際は注意して下さい。*/
    padding: 2% 5%;
    /*上下、左右へのブロック内の余白*/
}


/*偶数目のブロックの設定（画像とテキストブロックが左右交互に入れ替わる設定です。全部同じむきがよければこのブロックを削除します。）*/

#contents .list2:nth-of-type(even) .text {
    order: 1;
}


/*装飾文字の設定（共通）*/

#contents .list2::before {
    font-size: 18vw;
    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 .list2:nth-of-type(odd)::before {
    left: -60px;
    top: -40px;
}


/*偶数番目のブロックの文字の配置場所指定*/

#contents .list2:nth-of-type(even)::before {
    right: 0px;
    top: -40px;
}


/*ブロックに表示させるテキスト*/

#contents .list2:nth-of-type(2)::before {
    content: "Recruit";
}


/*ボックス内のボタン（共通）*/

.btn2 a {
    display: block;
    text-decoration: none;
    /* border: 1px solid #1d2087; */
    text-align: center;
    padding: 10px 30px;
    margin: 20px auto 0;
    background-color: #ddd;
    color: #1d2087;
    margin-bottom: 10px;
}


/*ボタンのマウスオン時（共通）*/

.btn2 a:hover {
    background: #fff;
    /*背景色*/
    color: #000 !important;
    /*文字色*/
}


/*ボックス内のボタン（共通）*/

.btn1 a {
    display: block;
    text-decoration: none;
    /* border: 1px solid #1d2087; */
    text-align: center;
    padding: 10px 30px;
    margin: 40px auto 0;
    background-color: #ddd;
    color: #1d2087;
    /*上、左右、下へのボックスの外側への余白*/
}


/*ボタンのマウスオン時（共通）*/

.btn1 a:hover {
    background: #fff;
    /*背景色*/
    color: #000 !important;
    /*文字色*/
}


/*list-column（トップページで使っている３列ブロック）
---------------------------------------------------------------------------*/


/*カラムブロック全体を囲むボックス*/

#contents .list-column-container {
    display: flex;
    justify-content: space-between;
    /*中のブロックの横並びの揃え方*/
    flex-wrap: wrap;
    /*中のブロックを自動で折り返す*/
    margin-top: 70px;
}


/*１カラムあたりの設定*/

#contents .list-column {
    display: flex;
    flex-direction: column;
    /*中のブロックを並べる向きの指定。これは縦に並べる意味。*/
    width: 100%;
    /*ブロック幅*/
    margin-bottom: 20px;
    /*ブロックの下に空ける余白*/
    /*background: #1d2087;				背景色*/
    color: #333;
    /*文字色*/
    border-radius: 5px;
    /*角丸の指定。ほんの少し角が丸くなります。*/
    overflow: hidden;
    /*角丸から内容が飛び出ないよう、飛び出た部分を非表示にする指定*/
    background-color: #fff;
}


/*リンクテキストの文字色*/

#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: 1% 5% 5%;
    /*ブロック内の余白*/
    flex: 1 0 auto;
}


/*IEバグ対応*/

#contents .list-column figure {
    min-height: 0%;
}


/*１カラムあたりの設定*/

#contents .list-column2 {
    display: flex;
    flex-direction: column;
    width: 32%;
    margin-bottom: 20px;
    background: #1e2187;
    color: #fff;
    overflow: hidden;
}


/*リンクテキストの文字色*/

#contents .list-column2 a {
    color: #1d2087;
}


/*ボックス内のh4（見出し）タグ*/

#contents .list-column h4 {
    margin-bottom: 20px;
    /*下のテキストとの間に空けるスペース*/
    font-size: 140%;
    /*文字サイズ*/
}


/*ボックス内のp（段落）タグ*/

#contents .list-column2 p {
    padding: 0;
    /*余白のリセット*/
}


/*「class="text"」を指定したブロック。テキストブロック。*/

#contents .list-column2 .text {
    padding: 1% 5% 5%;
    /*ブロック内の余白*/
    flex: 1 0 auto;
}


/*IEバグ対応*/

#contents .list-column2 figure {
    min-height: 0%;
}


/*フッター設定
---------------------------------------------------------------------------*/

footer {
    clear: both;
    position: relative;
    z-index: 1;
    font-size: 80%;
    /*文字サイズ*/
    background: #222;
    /*背景色*/
    color: #ccc;
    /*文字色*/
    text-align: center;
    margin-bottom: 65px;
}

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/footer_logo.png) no-repeat right center / 20%;
    /*背景画像の読み込み。*/
}


/*リンクテキスト*/

#footermenu li a {
    text-decoration: none;
    opacity: 0.7;
    /*透明度。70%の色がついた状態。*/
}


/*マウスオン時*/

#footermenu li a:hover {
    opacity: 1;
    /*透明度。100%色がついた状態。*/
}


/*１行分の設定*/

#footermenu ul {
    float: left;
    /*左に回り込み*/
    width: 18%;
    /*幅*/
    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: #313131;
    /*背景色*/
    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: 20px;
    /*ボックス内の余白*/
    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: 80px;
    /*下から20pxの場所に配置*/
    right: 1%;
    /*右から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: #1e2187;
    /*背景色*/
}


/*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;
}


/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:800px) {
    /*全体の設定
---------------------------------------------------------------------------*/
    body {
        font-size: 3vw;
        /*文字サイズ*/
        letter-spacing: 0em;
    }
    /*ヘッダー
---------------------------------------------------------------------------*/
    /*ヘッダーブロック*/
    header {
        border-bottom: 1px solid #ccc;
    }
    /*ヘッダーブロック（トップページへの追加設定）*/
    .home header {
        border: none;
    }
    /*メインメニュー
---------------------------------------------------------------------------*/
    /*スマホ用メニューブロック全体*/
    #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 20px;
        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: 10px;
        /*上からの配置場所*/
        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: 50px 0;
        /*上下、左右へのコンテンツ内の余白*/
    }
    /*h2タグ*/
    #contents h2 {
        margin-bottom: 50px;
        margin-bottom: 50px;
        letter-spacing: 0.1em;
        line-height: 1.6em;
        font-size: 230%!important;
    }
    /*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;
    }
    .btn-border {
        width: 90%!important;
        text-align: center!important;
        margin: 0 auto;
        margin-bottom: 10px!important;
    }
    .c {
        text-align: center !important;
        margin-top: 15px!important;
    }
    #contents p {
        padding: 20px 5% 30px!important;
        /*上、左右、下への余白*/
    }
    #contents h4 {
        padding: 0px 0px 20px!important;
        margin: 0px 30px 0px!important;
        font-size: 180%!important;
    }
    #contents .list {
        margin-bottom: 10px!important;
        /*ボックスの下に空けるスペース。上、左右、下への順番。*/
    }
    .txt {
        margin: 30px 0!important;
    }
    #contents .list-column2 {
        width: 100%!important;
    }
    #contents .list-column-container {
        margin-top: 0px!important;
    }
    #contents .list-column2 .text {
        padding: 8% 5% 0%!important;
    }
    .btn1 a,
    .btn2 a {
        padding: 20px 10px;
        margin: 40px!important;
        font-size: 140%!important;
    }
    footer img {
        width: 20%!important;
    }
    img {
        width: 100%!important;
    }
    #contents .list2 {
        width: 100%!important;
        display: inline-block!important;
    }
    #contents .list2 .text {
        width: 100%;
        padding: 0!important;
        margin-top: 30px;
    }
    #contents .list2 figure {
        width: 100%;
    }
    #contents .list2 p {
        padding: 20px 20px 0px!important;
    }
    #company {
        margin-top: 0px!important;
        padding-top: 70px;
    }
    #contents h3 {
        font-size: 200%;
        letter-spacing: 0.1em;
        text-align: center;
        line-height: 1.8em;
    }
    p.example01 {
        font-size: 120%!important;
        margin-bottom: 0px!important;
        letter-spacing: 0.1em;
    }
    p.example02 {
        font-size: 130%!important;
    }
    p.example03 {
        font-size: 130%!important;
        text-align: justify;
        text-justify: inter-ideograph;
        line-height: 1.8em!important;
    }
    #contents .list {
        margin-top: 20px;
    }
    #contents .list:nth-of-type(odd)::before {
        left: 0px;
        top: 0px;
    }
    #contents .list:nth-of-type(even)::before {
        right: 0px;
        top: 0px;
    }
    #contents h5 {
        font-size: 180%;
    }
    h1 img {
        width: 10%!important;
        padding-right: 10px;
    }
    .companyoverview-te {
        font-size: 120%!important;
    }
    .btn-border {
        width: 90%!important;
        text-align: center!important;
        margin: 0 auto;
        margin-bottom: 10px!important;
    }
    #contents .list2 {
        margin-top: 0px!important;
        /*ボックスの下に空けるスペース。上、左右、下への順番。*/
    }
    input[type=text] {
        font-size: 16px!important;
    }
    p.example04 {
        font-size: 130%!important;
    }
    mawarikomi {
        float: none!important;
        margin: 0!important;
        width: 100%!important;
    }
    p.example06 {
        font-size: 130%!important;
    }
    .point {
        margin: 20px 0 40px!important;
    }
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:480px) {
    /*全体の設定
---------------------------------------------------------------------------*/
    body {
        font-size: 3vw;
    }
    /*コンテンツ
---------------------------------------------------------------------------*/
    /*h2タグ*/
    #contents h2 {
        margin-bottom: 30px;
    }
    /*h3タグ*/
    #contents h3 {
        margin-bottom: 20px;
    }
    #contents section+section {
        margin-top: 30px;
    }
    /*list（worksページで使っている横長ブロック）
---------------------------------------------------------------------------*/
    /*ボックス内のボタン（共通）*/
    /*テーブル（ta1）
---------------------------------------------------------------------------*/
    /*ta1設定*/
    .ta1,
    .ta1 td,
    .ta1 th {
        padding: 5px;
        /*ボックス内の余白*/
    }
    /*ta1の左側ボックス*/
    .ta1 th {
        width: 100px;
    }
    /*その他
---------------------------------------------------------------------------*/
    .ws,
    .wl {
        width: 100%;
        padding: 15px;
        table-layout: fixed;
        box-sizing: border-box;
    }
    .fl {
        float: none;
    }
    .fr {
        float: none;
    }
    .big1 {
        font-size: 16px;
    }
    .sh {
        display: block;
    }
    .pc {
        display: none;
    }
    /*テーブル（ta1）
---------------------------------------------------------------------------*/
    /*テーブル１行目に入った見出し部分（※caption）*/
    .ta1 caption,
    .ta2 caption {
        padding: 5px;
        /*ボックス内の余白*/
    }
    /*ta1,ta2共通設定*/
    .ta1,
    .ta2 {
        width: 100%!important;
        margin: 0 0 30px;
    }
    /*ta1の左側ボックス*/
    .ta1 th,
    .ta1 tr,
    .ta1 tbody {
        width: 100%!important;
        display: block;
    }
    .ta1,
    .ta1 td,
    .ta1 th,
    .ta2,
    .ta2 td,
    .ta2 th {
        display: block;
        margin: 0px auto!important;
        border-top: none;
        font-size: 120%!important;
        table-layout: fixed;
        box-sizing: border-box;
        border: 0px solid #ddd!important;
    }
    .ta1,
    .ta1 td,
    .ta1 th,
    .ta2,
    .ta2 td,
    .ta2 th {
        border: 0px solid #ddd;
    }
    #contents p {
        padding: 20px 3% 0px!important;
        /*上、左右、下への余白*/
    }
    p.example01 {
        margin-bottom: 30px!important;
    }
    #contents h5 {
        margin: 0px 0 0px!important;
    }
    .btn1 a,
    .btn2 a {
        margin: 10px 10px 25px!important;
    }
    .ttl_h3_1 span {
        font-size: 2rem!important;
        padding-top: 30px!important;
    }
    .ttl_h3_1 {
        padding: 1rem 1rem 1rem 110px!important;
        line-height: 1.4em!important;
        letter-spacing: 0em!important;
        font-size: 180%!important;
    }
    .ttl_h3_2 span {
        font-size: 2rem!important;
        padding-top: 15px!important;
    }
    .ttl_h3_2 {
        padding: 1rem 1rem 1rem 110px!important;
        line-height: 1.4em!important;
        letter-spacing: 0em!important;
        font-size: 180%!important;
    }
    /*----------------------------------------------------
  会社概要　テーブル
----------------------------------------------------*/
    .companyoverview-te th,
    .companyoverview-te td {
        width: 100%!important;
        display: block;
        border-top: none;
        font-size: 120%!important;
        table-layout: fixed;
        box-sizing: border-box;
    }
    .table_box {
        padding: 0 10px!important;
        height: 320px!important;
        background: url(../images/agenda_back.png) no-repeat right bottom!important;
        background-color: rgba(255, 255, 255, 0.6)!important;
        background-blend-mode: lighten;
    }
}


/*画面幅400px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:400px) {
    p.example01 {
        letter-spacing: 0em!important;
    }
}

@media only screen and (min-width: 1000px) {
    .txt,
    .bg {
        width: 50%;
        float: left;
        display: table;
        background: #1d2087;
        padding: 0!important;
    }
    .sec02_02 .txt,
    .sec02_02 .bg {
        float: right;
    }
    .vMid {
        display: table-cell;
        padding: 0 50px;
        vertical-align: middle;
    }
}

@media only screen and (min-width:1025px) {
    .txt {
        margin-top: 30px;
    }
    .vMid {
        display: table-cell;
        padding: 0 50px;
        vertical-align: middle;
    }
}

@media only screen and (max-width:1024px) {}

@media (max-width: 1000px) and (min-width: 481px) {
    .table_box {
        padding: 0 0px!important;
        height: 450px!important;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .vMid {
        padding: 0 20px;
    }
    p.example02 {
        font-size: 100%!important;
    }
    #menubar ul li {
        font-size: 16px!important;
    }
    p.example01 {
        font-size: 105%!important;
    }
    #contents h4 {
        padding: 10px!important;
    }
    .btn1 a {
        padding: 10px 0px!important;
    }
}

@media (max-width: 1024px) and (min-width: 1024px) {
    .table_box {
        padding: 0 60px!important;
    }
}

@media (max-width: 1023px) and (min-width: 801px) {
    p.example02 {
        font-size: 100%!important;
        padding: 0px!important;
        line-height: 1.6em!important;
    }
    #contents .list h4 {
        margin-bottom: 10px!important;
    }
    .txt {
        margin-bottom: 30px!important;
    }
}

@media screen and (max-width:800px) {
    .pc {
        display: none;
    }
}

@media screen and (min-width:801px) {
    .sp {
        display: none;
    }
}

p.example01 {
    font-size: 115%;
    text-align: center;
    line-height: 2.5;
    letter-spacing: 0.1em;
    margin-bottom: 50px;
}

p.example02 {
    font-size: 110%;
    text-align: center;
    line-height: 2;
    letter-spacing: 0em;
    /* background-color: #fff; */
    padding-top: 10px!important;
    /* display: inline-block; */
    color: #fff;
}

p.example03 {
    font-size: 110%;
    text-align: left;
    line-height: 2.5;
    letter-spacing: 0em;
    padding-top: 30px!important;
}

p.example04 {
    font-size: 110%;
    line-height: 1.8em;
    text-align: center;
    margin-bottom: 50px;
}

.mannaka {
    text-align: center;
}


/*ビジョン
---------------------------------------------------------------------------*/

section01 {
    clear: both;
}

.wrap01 {
    clear: both;
    width: 100%;
    background: #1d2087;
}

.wrap01 {
    clear: both;
    width: 100%;
    background: #1d2087;
}

.bg {
    line-height: 0;
}

img {
    max-width: 100%;
    height: auto;
}

.table_box {
    /* width: 90%; */
    margin-bottom: 10px;
    /* background-color: #eeeeee; */
    padding: 0 100px;
    background: url(../images/agenda_back.png) no-repeat right bottom;
    height: 250px;
}

.marker-animation.active {
    background-position: -100% .5em;
}

.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s ease;
    font-weight: bold;
}

.marker-animation2.active {
    background-position: -100% .5em;
}

.marker-animation2 {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(255, 250, 153) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s ease;
}

.m-blue.active {
    background-position: -100% .5em;
}

.m-blue {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
    background-image: linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s ease;
    font-weight: bold;
}

.m-green {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
    background-image: linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s ease;
}

.m-red {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
    background-image: linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s ease;
    font-weight: bold;
}

#menubar ul li span2 {
    display: block;
    font-size: 10px;
    color: #1d2089;
    letter-spacing: 0.2em;
    font-weight: bold;
}

body.is-fixed-menu #menubar ul li span2 {
    display: none;
}

#company {
    clear: both;
    overflow: hidden;
    position: relative;
    margin-top: 70px;
}


/*----------------------------------------------------
  会社概要　テーブル
----------------------------------------------------*/

.companyoverview-te {
    width: 100%;
    font-size: 100%;
}

.companyoverview-te th,
.companyoverview-te td {
    padding: 15px 20px;
    border: 1px solid #ddd;
}

.companyoverview-te th {
    width: 30%;
    text-align: center;
    background-color: #f0f0f0;
    color: #333;
    font-weight: normal;
}

.companyoverview-te td {
    width: 70%;
    text-align: left;
    background-color: #fff;
}


/*テーブル
---------------------------------------------------------------------------*/


/*テーブル１行目に入った見出し部分（※caption）*/

.ta1 caption,
.ta2 caption {
    border: 1px solid #999;
    /*テーブルの枠線の幅、線種、色*/
    border-bottom: none;
    /*下線だけ消す*/
    text-align: left;
    /*文字を左寄せ*/
    background: #cce6f6;
    /*背景色*/
    font-weight: bold;
    /*太字に*/
    padding: 10px;
    /*ボックス内の余白*/
}


/*ta1,ta2共通設定*/

.ta2 {
    width: 96%;
    table-layout: fixed;
    margin: 0 2% 30px;
}

.ta1 {
    width: 90%!important;
    table-layout: fixed;
    margin: 0 auto;
}

.ta1,
.ta1 td,
.ta1 th,
.ta2,
.ta2 td,
.ta2 th {
    border: 1px solid #ddd;
    /*テーブルの枠線の幅、線種、色*/
    line-height: 1.8;
    padding: 20px;
    /*ボックス内の余白*/
    word-break: break-all;
    margin-top: 50px;
}


/*ta1の左側ボックス*/

.ta1 th {
    width: 200px;
    /*幅*/
    text-align: center;
    /*センタリング*/
    background: #f0f0f0;
    /*背景色*/
    font-weight: normal;
}


/*ta2の左側ボックス*/

.ta2 th {
    background: #fffeba;
    /*背景色*/
}


/*ta2の右側ボックス*/

.ta2 td {
    text-align: center;
    /*センタリング*/
}


/*料金ページの追加設定（CMS用）*/

.ta1.price td {
    text-align: right;
}

.ta1.price tr.total th {
    background: #b7e0ee;
    font-size: 150%;
}

.ta1.price tr.total td {
    background: #deeff4;
    font-weight: bold;
    font-size: 150%;
}

.btn-border {
    display: inline-block;
    width: 200px;
    border: 2px solid #1e2187;
    font-size: 18px;
    color: #1e2187;
    text-decoration: none;
    padding: 16px 25px;
    transition: .4s;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
}

.btn-border:hover {
    background-color: #1e2187;
    border-color: #1e2187;
    color: #FFF;
    font-weight: bold;
}

.c {
    margin-top: 50px;
}


/*メニューをページ下部に固定*/

#sp-fixed-menu {
    position: fixed;
    width: 100%;
    bottom: 0px;
    font-size: 0;
    opacity: 0.9;
    z-index: 99;
}


/*メニューを横並びにする*/

#sp-fixed-menu ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

#sp-fixed-menu li {
    justify-content: center;
    align-items: center;
    width: 50%;
    padding: 0;
    margin: 0;
    font-size: 14px;
    border-right: 1px solid #fff;
    line-height: 1.6em;
}


/*左側メニューをブルー*/

#sp-fixed-menu li:first-child {
    background: #1e2187;
}


/*右側メニューをレッド*/

#sp-fixed-menu li:last-child {
    background: #e60012;
    border-right: 0px solid #fff;
}


/*ボタンを調整*/

#sp-fixed-menu li a {
    color: #fff;
    text-align: center;
    display: block;
    width: 100%;
    padding: 10px 0 5px;
    text-decoration: none;
    font-weight: bold;
}

#sp-fixed-menu li span i {
    padding-right: 0!important;
}

.btn-animation-02 {
    display: inline-block;
    width: 100%;
    text-align: center;
    background-color: #e5831f;
    border: 2px solid #e5831f;
    color: #e5831f;
    text-decoration: none;
    padding: 10px 0px;
    border-radius: 4px;
    position: relative;
    margin-bottom: 10px;
    color: #fff!important;
    font-size: 130%;
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
    -webkit-appearance: none;
}


/*施工の流れページ*/

* {
    box-sizing: border-box;
}

ul {
    padding: 0;
}

li {
    list-style-type: none;
}

dd {
    margin-left: 0;
}

.flow {
    padding-left: 120px;
    position: relative;
    display: inline-block;
}

.flow::before {
    content: "";
    width: 15px;
    height: 100%;
    background: #eee;
    margin-left: -8px;
    display: block;
    position: absolute;
    top: 0;
    left: 130px;
}

.flow>li {
    position: relative;
}

.flow>li {
    margin-bottom: 8vh;
    display: inline-block;
    width: 100%;
}

.flow>li .icon {
    font-size: 16px;
    color: #fff;
    background: #1e2187;
    background: -moz-linear-gradient(left, #2024c1 0%, #1e2187 100%);
    background: -webkit-linear-gradient(left, #2024c1 0%, #1e2187 100%);
    background: linear-gradient(to right, #2024c1 0%, #1e2187 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2024c1', endColorstr='#1e2187', GradientType=1);
    padding: 8px 20px;
    display: block;
    position: absolute;
    top: 0;
    left: -120px;
    z-index: 100;
}

.flow>li .icon::after {
    content: "";
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent #1d2087;
    position: absolute;
    top: 50%;
    left: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.flow>li dl {
    padding-left: 70px;
    position: relative;
}

.flow>li dl::before,
.flow>li dl::after {
    content: "";
    display: block;
    position: absolute;
    top: 15px;
}

.flow>li dl::before {
    width: 7px;
    height: 7px;
    margin-top: 5px;
    background: #e60012;
    border-radius: 50%;
    left: 6px;
}

.flow>li dl::after {
    width: 50px;
    border-bottom: 1px dashed #999;
    position: absolute;
    left: 5px;
    top: 23px;
}

.flow>li dl dt {
    font-size: 20px;
    font-weight: 600;
    color: #1e2187;
    margin-bottom: 1vh;
}

p.example08 {
    font-size: 130%;
}

@media screen and (max-width:767px) {
    .flow {
        padding-left: 0px;
        display: inline-block;
        margin-bottom: 50px;
    }
    .flow::before {
        left: 10px;
    }
    .flow>li .icon {
        left: 0px;
        width: 100%;
        text-align: center;
        font-size: 20px;
    }
    .flow>li .icon::after {
        display: none;
    }
    .flow>li dl dt {
        margin-top: 70px;
        font-size: 22px;
    }
    .flow>li dl::after {
        width: 30px;
    }
    .flow>li dl {
        padding-left: 40px;
    }
    .flow>li dl dd {
        font-size: 130%;
    }
    p.example05 {
        font-size: 120%!important;
        line-height: 1.6em;
        text-align: center;
    }
    .flow img {
        max-width: 95%;
        display: inline-block;
    }
}

.point {
    margin: 20px 0;
}

.ttl_h3_1 {
    position: relative;
    overflow: hidden;
    padding: 1rem 1rem 1rem 110px!important;
    border: 1px solid #c9252c!important;
    background-color: #fff;
}

.ttl_h3_1:before {
    position: absolute;
    top: -150%;
    left: -100px;
    width: 200px;
    height: 300%;
    content: '';
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
    background: #c9252c;
    ;
}

.ttl_h3_1 span {
    font-size: 2.3rem;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    padding-top: 6px;
    padding-left: 16px;
    color: #fff;
}

.ttl_h3_2 {
    position: relative;
    overflow: hidden;
    padding: 1rem 1rem 1rem 110px!important;
    border: 1px solid #c9252c!important;
    background-color: #fff;
}

.ttl_h3_2:before {
    position: absolute;
    top: -150%;
    left: -100px;
    width: 200px;
    height: 300%;
    content: '';
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
    background: #c9252c;
    ;
}

.ttl_h3_2 span {
    font-size: 2.3rem;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    padding-top: 6px;
    padding-left: 16px;
    color: #fff;
}

mawarikomi {
    float: left;
    margin: 0 30px 60px 0;
    width: 30%;
}

mawarikomi img {
    max-width: 100%;
}

p.example06 {
    font-size: 120%;
    text-align: left;
    line-height: 2;
    letter-spacing: 0em;
    text-align: justify;
    text-justify: inter-ideograph;
}


/*------------------------------------------------------------
    施工実績
------------------------------------------------------------*/

#imageList {
    max-width: 1200px;
    overflow: hidden;
    margin-top: 20px;
}

#imageList li {
    width: 33.3333%;
    float: left;
    margin-bottom: 30px;
    padding: 0 15px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    list-style: none;
}

.img-responsive {
    width: 100%;
    height: auto;
}


/* TABLET */

@media screen and (max-width: 1024px) {
    #imageList li {
        width: 50%;
        float: left;
        padding: 0 15px;
    }
}


/* TABLET */

@media screen and (max-width: 768px) {
    #imageList li {
        width: 100%;
        float: none;
        padding: 0;
    }
}


/*------------------------------------------------------------
    よくある質問
------------------------------------------------------------*/

.faq {
    width: auto;
    font-size: 125%;
    margin-bottom: 15px;
    padding: 20px 20px 20px 25px;
    background: #fff;
    border: 1px solid #BDBEBF;
}

.faq:not(:last-child) {
    margin-bottom: 15px;
}

.faq.selected {
    background: #E1F0FA;
}

.faq dt {
    width: auto;
    padding-left: 35px;
    background: url(../images/faq/icon-q.png) no-repeat left top;
}

.faq dt a {
    display: block;
    padding-right: 40px;
    color: #000;
    line-height: 18px;
    font-weight: bold;
    position: relative;
}

.faq dt a:after {
    display: block;
    content: "";
    width: 18px;
    height: 10px;
    background: url(../images/faq/icon-arrow.png) no-repeat 0 0;
    position: absolute;
    right: 0;
    top: 3px;
}

.faq.selected dt a:after {
    background-position: 0 -10px;
}

.faq dd {
    display: none;
    margin-top: 20px;
    color: #F50D0D;
    font-weight: bold;
    line-height: 1.5;
}

@media screen and (max-width: 768px) {
    .faq {
        font-size: 117%;
        padding: 15px 15px 15px 20px;
    }
    .faq dt {
        padding-left: 25px;
        background-size: 15px 15px;
    }
    .faq dt a:after {
        width: 14px;
        height: 8px;
        background-size: 14px 16px;
    }
    .faq.selected dt a:after {
        background-position: 0 -8px;
    }
    .faq dd {
        margin-top: 15px;
    }
}


/*------------------------------------------------------------
    TOPページ　アニメーション
------------------------------------------------------------*/

.contents-wrapper {
    overflow: hidden;
}

.TextTyping span {
    display: none;
}


/* コンテンツのスライド */

.slide-trigger {
    position: relative;
}

.slide-trigger::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fafafa;
    transition: transform 0.7s cubic-bezier(1, 0, 0, 1), -webkit-transform 0.7s cubic-bezier(1, 0, 0, 1);
    z-index: 10;
}

.slide-trigger.is-slide::after {
    transform: translateX(-100%);
}


/* テキストのスライド */

#contents .textTrigger {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    transition: transform 1.0s cubic-bezier(0.075, 0.82, 0.165, 1);
}

#contents .textTrigger.is-text {
    -webkit-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}


/* h2タイトルのアニメーション */

#contents .contents-titleHeader {
    text-align: center;
    overflow: hidden;
    margin-bottom: 80px;
}

#contents .contents-titleHeader h2.contents-h2 {
    position: relative;
    clear: both;
    margin-bottom: 0px;
    font-size: 250%;
    text-align: center;
    letter-spacing: 0.2em;
    overflow: hidden;
}

#contents .contents-titleHeader h2.contents-h2>em {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

#contents .contents-titleHeader h2.contents-h2>em>em {
    position: relative;
    display: inline-block;
    -webkit-transform: translate3d(-120%, 0, 0);
    transform: translate3d(-120%, 0, 0);
    transition: transform 1.0s cubic-bezier(0.075, 0.82, 0.165, 1);
}

#contents .contents-titleHeader h2.contents-h2>em>em::after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 110%;
    height: 110%;
    background-color: #2b2b2b;
    transition: transform 1.0s cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 10
}

#contents .contents-titleHeader h2.contents-h2.is-active>em>em {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

#contents .contents-titleHeader h2.contents-h2.is-active>em>em::after {
    -webkit-transform: translate3d(110%, 0, 0);
    transform: translate3d(110%, 0, 0);
}

#contents .contents-titleHeader span.h2-english {
    display: block;
    font-size: 12px;
    /*文字サイズ*/
    color: #999;
    /*文字色*/
    letter-spacing: 0.5em;
}

#contents em {
    font-style: normal;
}

.newLine {
    display: block;
}


/* 当社について　ビジョン・ミッション */

.top-wrap01 {
    transform-origin: left center;
    transform: translateX(100%);
    transition: transform 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.top-wrap01.is-active02 {
    transform-origin: left center;
    transform: translateX(0%);
}

.top-wrap02 {
    transform-origin: left center;
    transform: translateX(-100%);
    transition: transform 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.top-wrap02.is-active02 {
    transform-origin: right center;
    transform: translateX(0%);
}


/* h3のスタイル */

#contents.top-contents .h3-title {
    position: relative;
}

#contents.top-contents .h3-title::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    top: 100%;
    left: 0;
    background-color: #ccc;
    border-bottom: none;
    transform: scaleX(0);
}


/* h4のスタイル */

#contents.top-contents .h4-title {
    position: relative;
    margin: 20px 0;
    padding: 10px 80px;
    border-bottom: none;
    font-size: 130%;
    color: #fff;
    font-weight: bold;
    line-height: 1.6;
}

#contents.top-contents .h4-title::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    top: 100%;
    left: 0;
    background-color: #fff;
    border-bottom: none;
    transform: scaleX(0);
}


/* タイトルの下部のラインのアニメーション */

#contents.top-contents .line-title {
    position: relative;
    border-bottom: none;
}

#contents.top-contents .line-title::after {
    transform: scaleX(0);
}

#contents.top-contents .line-title.is-line-title::after {
    animation-name: line-title;
    animation-duration: 0.5s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
    transform-origin: left;
}

@keyframes line-title {
    0% {
        transform-origin: left;
        transform: scaleX(0);
    }
    100% {
        transform-origin: left;
        transform: scaleX(1);
    }
}


/* タイトル日本語箇所のスライド */

#contents.top-contents .line-titleJpn {
    opacity: 0;
}

#contents.top-contents .is-line-title .line-titleJpn {
    display: inline-block;
    animation-name: titleJpn;
    animation-duration: 0.5s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes titleJpn {
    0% {
        opacity: 0;
        transform: translateX(50%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}


/* タイトル英語箇所のFadeIn */

#contents.top-contents .line-titleEng {
    opacity: 0;
}

#contents.top-contents .is-line-title .line-titleEng {
    animation-name: titleEng;
    animation-duration: 0.5s;
    animation-delay: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes titleEng {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/* 行動指針 */

.list-column-Wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.list-column-Wrapper::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fafafa;
    transition: transform 0.7s cubic-bezier(1, 0, 0, 1), -webkit-transform 0.7s cubic-bezier(1, 0, 0, 1);
    z-index: 100;
}

.list-column-Wrapper.is-list-column::before {
    transform: translateX(-100%);
}

#contents.top-contents .list-column-Wrapper .h5-title {
    font-size: 140%;
    color: #1d2087;
    font-weight: bold;
    line-height: 1.6;
    position: relative;
    /* display: inline-block; */
    padding: 20px 80px;
    margin: 30px 0;
    text-align: center;
    border-bottom: none;
}

#contents.top-contents .list-column-Wrapper .h5-title::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    top: 100%;
    left: 0;
    background-color: #2024c1;
    border-bottom: none;
}

#contents.top-contents .list-column-Wrapper .table_box {
    background-size: 0px auto;
}

#contents.top-contents .list-column-Wrapper.is-list-column .table_box {
    background-size: 450px auto;
    transition: 1s cubic-bezier(1, 0, 0, 1), -webkit-transform 1s cubic-bezier(1, 0, 0, 1);
}


/* 株式会社晃建が掲げた５つの行動指針 コンテンツ */

#contents .features-trigger01 {
    margin-top: 60px;
    margin-bottom: 0;
}

#contents .features-trigger01:first-child {
    margin-top: 0px;
}

#contents .features-titleHeader {
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 92px;
    padding: 0;
    border: 1px solid #c9252c;
}

#contents .features-titleHeader::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #c9252c;
    z-index: 11;
    transform: scale(1, 1);
    transform-origin: right center;
    transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

#contents .is-features .features-titleHeader::before {
    transform: scale(0, 1);
    transform-origin: left center;
}

#contents .features-titleText {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    clear: both;
    margin-bottom: 0px;
    padding-left: 150px;
    font-size: 180%;
    border-bottom: none;
    letter-spacing: 0.1em;
    padding-bottom: 0px;
    color: #c9252c;
}

.features-titleNumber {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 70px;
    height: 100%;
    background: #c9252c;
    font-size: 2.3rem;
    color: #fff;
    z-index: 1;
}

.features-titleNumber::after {
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100px;
    height: 100%;
    background-color: #c9252c;
    z-index: -1;
    transform: skewX(-15deg);
}

.features-wrapper {
    display: flex;
    align-items: flex-start;
    margin-top: 40px;
}

.features-image {
    display: flex;
    position: relative;
    max-width: 397px;
    width: calc(397/1325*100%);
}

.features-textBox {
    width: calc(900/1325*100%);
}

@media screen and (max-width: 768px) {
    #contents .features-trigger01 {
        margin-top: 45px;
    }
    #contents .features-titleText {
        padding-left: calc(190/768*100vw);
        text-align: left;
    }
    .features-titleNumber {
        width: calc(110/768*100vw);
        font-size: calc(46/768*100vw);
    }
    .features-titleNumber::after {
        width: calc(140/768*100vw);
    }
    .features-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 40px;
    }
    .features-image {
        max-width: none;
        width: 100%;
    }
    .features-textBox {
        width: 100%;
    }
    .sp-newLine {
        display: inline-block;
    }
}


/*職人募集*/
.table_recruit{
	width: 100%;
	border-collapse: collapse;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 80px;
	margin-left: 0px;
	overflow: hidden;
	word-break: break-all;
	word-wrap: break-word;
}
.table_recruit th{
	width: 25%;
	font-size: 100%;
	font-style: normal;
	font-weight: normal;
	color: #204378;
	background-color: #F0F0F0;
	text-align: center;
	vertical-align: middle;
	padding: 15px;
	border-bottom-width: medium;
	border-bottom-style: solid;
	border-bottom-color: #0B1F43;
	overflow: hidden;
	word-break: break-all;
	word-wrap: break-word;
}
.table_recruit td{
	color: #595960;
	background-color: #ffffff;
	text-align: left;
	vertical-align: top;
	padding: 15px;
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #8395B5;
	overflow: hidden;
	word-break: break-all;
	word-wrap: break-word;
}
@media (max-width: 768px){
.table_recruit{
	border: medium solid #E5ECF8;
}
.table_recruit th{
	width: 100%;
	display: block;
	font-size: 120%;
	background-color: #DCE9FD;
	margin: 0 auto;
	padding: 15px;
	border: none;
	border-radius: 3px;
}
.table_recruit td{
	width: 100%;
	display: list-item;
	font-size: 120%;
	padding: 15px;
	border: none !important;
}
}

/* イメージリスト */
#imageList{
	max-width: 590px;
	overflow: hidden;
	margin-top: 70px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#imageList li{
	width: 50%;
	float: left;
	padding: 0 15px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	list-style: none;
}
#imageList li a:hover{
	opacity:0.8;
}
#imageList p{
	text-align: center;
}
.img-responsive{
	width: 100%;
	height: auto;
}
@media screen and (max-width: 768px){
#imageList li{
	width: 70%;
	float: none;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	padding: 0;
}
}


/*お知らせ*/
.boxres_news001 {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.boxres_news001 img {
	width: 30%;
	padding-bottom: 30px;
}
.boxres_news001 p.txt001 {
	text-align: center;
}
.boxres_news001 p.txt002 {
	padding-bottom: 50px;
}
@media screen and (max-width: 768px) {
.boxres_news001 p.txt001 {
	width: 60%;
	margin-right: 20%;
	margin-left: 20%;
}
}