@charset "utf-8";

/*=======================================================
 common.css
　全ページ共通や基本設定
=======================================================*/

/*======================================================
 基本設定
========================================================*/
@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300;400;500;600;700;800;900&display=swap');

html { font-size: 62.5%; }

body { font-size: 1.4rem; font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; /*2022年版ゴシック系設定*/ color: #444; line-height: 1.3em; overflow: hidden; }



main { /*overflow: hidden;*/ position: relative; }

ul li { list-style-type: none; margin-bottom: 5px; }

dl dt { font-weight: bold; margin-bottom: 5px; }

dl dd { margin-bottom: 15px; line-height: 1.5em; }

p { font-size: 1.6rem; line-height: 1.5em; }

img { max-width: 100%; }


a, a.active { color: #444; text-decoration: none; transition: all 0.3s ease; }

/*a:hover { color: #ffcf07; }*/


a:hover { opacity: 0.8; filter: alpha(opacit80); -ms-filter: "alpha(opacity=80)"; -khtml-opacity: 0.8; -moz-opacity: 0.8; transition: all 0.5s ease; }


.flex { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }

.sub-page-ttl {
    padding-top: 150px;
    padding-bottom: 120px;
    text-align: center;
    font-weight: 500;
    font-size: 64px;
    line-height: 96px;
    letter-spacing: 0.05em;
}

.sp-br, .pc-br { display: none; }


@media screen and (min-width:768px) {
    .visible-xs { display: none !important; }
    .hidden-xs { display: block !important; }
}

@media screen and (max-width:767px) {
    .visible-xs { display: block !important; }
    .hidden-xs { display: none !important; }
}



/*----------- SP -------------*/
@media screen and (max-width: 767px) {
    .sp-br { display: block; }

    .sp-none { display: none; }
    /*スマートフォンの時だけ非表示*/

}

/*----------- PC・タブレット ------------*/

@media (min-width:768px) {
    .pc-br { display: block; }

    .pc-none { display: none; }
    /*PCタブレットの時だけ非表示*/
}



/*------- font汎用 ------*/
.font-orenge { color: #FF4B07; }
.font-yellow { color: #f79c23; }
.font-s { font-size: 1.2rem; }

/*----------------------------
 h 見出し
-----------------------------*/
/* h1はヘッターのロゴ・会社名で使用 */

.h-ttl-wrap { width: 100%; text-align: center; }

h2 { font-size: 4.0rem; font-weight: 400; line-height: 1.3em; margin-bottom: 40px; text-align: center; }

h2.top-h2 { padding-top: 10px; background: url("../images/img-h2-ttl.png") no-repeat top center; }

h2 > .h2-subttl { display: block; font-size: 1.4rem; line-height: 1.0em; }


h4 { font-size: 1.6rem; font-weight: bold; line-height: 1.3em; margin-bottom: 10px; }




/*----------- SP -------------*/
@media screen and (max-width: 767px) {

    h2, h3 { margin-bottom: 20px; }
    h4 { margin-bottom: 10px; }
}

/*----------------------------
 button
-----------------------------*/
.btn-block { width: 100%; /*padding-top: 70px;*/ }

/*----------- SP -------------*/
@media screen and (max-width: 767px) {

    .btn-block { padding-top: 10px; padding-bottom: 10px;}
    
}

a.button { display: block; padding: 25px; font-size: 1.4rem; text-align: center; margin: 0 auto; position: relative; width: 90%; max-width: 300px; }

/*-- yellowボタン --*/
a.button.button-yellow { background: #ffcf07; color: #000; border: solid 2px #ffcf07; transition: all 0.5s ease; }

a.button.button-yellow:hover { background: #FFF; }


/*-- blackボタン --*/
a.button.button-black { background: #000; color: #FFF; border: solid 2px #000; transition: all 0.5s ease; }

a.button.button-black:hover { background: #FFF; color: #000; }


/*-- 罫線枠のボタン --*/
a.button.button-line { border: solid 1px #FFF; color: #FFF; transition: all 0.5s ease; }

a.button.button-line:hover { color: #121212; background: #FFF; }


/*-- 矢印ボタン　黒 --*/
a.button.button-arrow-black { background: #121212 url("../images/ico-arrow01.svg") right 35px center no-repeat; background-size: 89px; color: #FFF; text-align: left; max-width: 1000px; transition: all 0.5s ease; }

a.button.button-arrow-black:hover { background: #121212 url("../images/ico-arrow01.svg") right 10px center no-repeat; background-size: 89px; transition: all 0.5s ease; }



/*----------- SP -------------*/
@media screen and (max-width: 767px) {

    /*-- 矢印ボタン　赤 --*/
    a.button.button-arrow-red,
    a.button.button-arrow-red:hover { background-image: none; text-align: center; }

    /*-- 矢印ボタン　黒 --*/
    a.button.button-arrow-black,
    a.button.button-arrow-black:hover { background-image: none; text-align: center; }
    .learn-more .circle { width: 3.7rem; height: 3.7rem;}
}



/*======================================================
 コンテンツ レイアウト
========================================================*/


.col2-box, .col3-box, .col4-box { justify-content: space-between; margin-bottom: 70px; }

.col2-box:last-child, .col3-box:last-child, .col4-box:last-child { margin-bottom: 0; }

.col2-box > .c-box { width: 48%; box-sizing: border-box; }

/*.col3-box > .c-box { width: 32%; box-sizing: border-box; }*/

.col3-box > .c-box { width: 10%; box-sizing: border-box; }

.col4-box > .c-box { width: 24%; box-sizing: border-box; }


.col3-box::before { /*justify-contentで最後の行を左寄せにする方法（3カラム）*/ content: ""; display: block; width: 32%; order: 1; }

.col3-box::after { /*justify-contentで最後の行を左寄せにする方法（3カラム）*/ content: ""; display: block; width: 32%; }


.col4-box::before { /*justify-contentで最後の行を左寄せにする方法（4カラム）*/ content: ""; display: block; width: 24%; order: 1; }

.col4-box::after { /*justify-contentで最後の行を左寄せにする方法（4カラム）*/ content: ""; display: block; width: 24%; }



/*--- table ---*/
table { border-collapse: collapse; border-spacing: 0; margin: 10px auto; width: 100%; }


tr { border-bottom: 10px solid #FFF; }

th { background-color: #F6F6F6; font-weight: 600; padding: 15px 2vw 15px 2vw; text-align: left; vertical-align: top; }

td { background-color: #F6F6F6; padding: 15px 2vw 15px 2vw; text-align: left; }



/*----------- SP -------------*/
@media screen and (max-width: 767px) {

    .inner-wrap { padding: 50px 0 30px 0; margin: 0 auto 30pt; }

    .col2-box .c-box, .col3-box .c-box, .col4-box .c-box { width: 100%; text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 50px; }

    .col2-box .c-box:last-child, .col3-box .c-box:last-child, .col4-box .c-box:last-child { margin-bottom: 0; }
    .c-box p { text-align: left; }
}


/*----------- タブレット ------------*/
@media screen and (min-width:768px) and ( max-width:960px) {
}

/*----------- タブレットPC ------------*/
@media screen and (min-width:768px) {
}

/*======================================================
 コンテンツの動き実装
========================================================*/
/*------------------------------------------------
スタート時は要素自体を透過0にするためのopacity:0;を指定する
-------------------------------------------------*/

.delayScroll > .box { opacity: 0; }

/*------------------------------------------------
ふわっと動かす
------------------------------------------------*/

.delayScroll .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; }

@keyframes fadeUpAnime {
    from { opacity: 0; transform: translateY(100px); }

    to { opacity: 1; transform: translateY(0); }
}









/*----------------- 960px以下の形状 -------------------*/
@media screen and (max-width:960px) {

    /*#header h1 { 
			width:60%;
			float:none;
			}*/
    #header {
        height: 60px;
    }
    #header h1 > .header-logo,
    #header h1 > .header-logo:hover {
        background-size: 80% auto;
    }
}



/*======================================================
 ナビゲーション
========================================================*/
.openbtn { display: none; }


/*----------------- 960px以下の形状 -------------------*/
@media screen and (max-width:960px) {


    .openbtn.sp { display: block; background: transparent; }
}

/*------------------------------------------------
 スマホ ナビゲーション
-------------------------------------------------*/
@media screen and (max-width:960px) {

    /*アクティブになったエリア*/
    #g-nav.panelactive { /*position:fixed;にし、z-indexの数値を大きくして前面へ*/ position: fixed; z-index: 999; top: 0; width: 100%; height: 100vh; }

    /*丸の拡大*/
    .circle-bg { position: fixed; z-index: 3; /*丸の形*/ width: 100px; height: 100px; border-radius: 50%; background: #FFCF07; /*丸のスタート位置と形状*/ transform: scale(0); /*scaleをはじめは0に*/ right: -50px; top: -50px; transition: all 1s; /*0.6秒かけてアニメーション*/ }

    .circle-bg.circleactive { transform: scale(50); /*クラスが付与されたらscaleを拡大*/ }

    /*ナビゲーションの縦スクロール*/
    #g-nav-list { display: none; /*はじめは表示なし*/ /*ナビの数が増えた場合縦スクロール*/ position: fixed; z-index: 999; width: 100%; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; }

    #g-nav.panelactive #g-nav-list { display: block; /*クラスが付与されたら出現*/ }

    /*ナビゲーション*/
    #g-nav ul { opacity: 0; /*はじめは透過0*/ /*ナビゲーション天地中央揃え*/ position: absolute; z-index: 999; top: 50%; left: 50%; transform: translate(-50%,-50%); }

    /*背景が出現後にナビゲーションを表示*/
    #g-nav.panelactive ul { opacity: 1; }


    /*リストのレイアウト設定*/
    #g-nav li { text-align: center; list-style: none; white-space: nowrap; }

    #g-nav li a { color: #000; text-decoration: none; padding: 10px; display: block; /*text-transform: uppercase; すべてのテキストを大文字にする*/ letter-spacing: 0.1em; font-weight: bold; font-size: 1.8rem; }


    /*========= ボタンのためのCSS ===============*/
    .openbtn { position: fixed; top: 7px; right: 10px; z-index: 9999; /*ボタンを最前面に*/ cursor: pointer; width: 50px; height: 50px; }

    /*×に変化*/
    .openbtn span { display: inline-block; transition: all .4s; position: absolute; left: 14px; height: 3px; border-radius: 2px; background-color: #333; width: 45%; }

    .openbtn span:nth-of-type(1) { top: 15px; }
    .openbtn span:nth-of-type(2) { top: 23px; }
    .openbtn span:nth-of-type(3) { top: 31px; }

    .openbtn.active span:nth-of-type(1) { top: 18px; left: 18px; transform: translateY(6px) rotate(-45deg); width: 30%; }

    .openbtn.active span:nth-of-type(2) { opacity: 0; }

    .openbtn.active span:nth-of-type(3) { top: 30px; left: 18px; transform: translateY(-6px) rotate(45deg); width: 30%; }
}



/*------------------------------------------------
 PCナビゲーション　
-------------------------------------------------*/
@media screen and (min-width:961px) {
    nav ul { list-style: none; display: flex; justify-content: center; position: absolute; top: 20px; right: 20px; }

    nav ul li a { display: block; text-decoration: none; color: #000; padding: 10px; transition: all 0.3s; }

    /*nav ul li a:hover { color:#888; }*/

}


/*======================================================
service レイアウト共通
========================================================*/
#service .service-block.col1-box { margin-bottom: 70px; }

#service .service-info > p { font-size: 1.4rem; }

#service .service-info > p.service-name { font-size: 1.6rem; font-weight: bold; }

#service .service-block .service-img { margin-bottom: 5px; }

#service section.service-development .btn-block { padding-top: 20px; }


/*----------- PC・タブレット ------------*/
@media (min-width:768px) {
    #service section.service-development .service-block.col1-box .btn-block > a { margin-right: 0; }
}

/*----------- スマートフォン ------------*/
@media (max-width:768px) {
    #top #service { margin: 0 0; }
    #top-info { margin: 0 0; }
    section { margin: 0 10px; }
    #service .service-block.col1-box { margin-bottom: 50px; }

    #service .service-block .service-img { text-align: center; order: 1; }

    #service .service-block .service-info { order: 2; }
}






/*----------- SP -------------*/
@media screen and (max-width: 767px) {
    #join-us { margin: 0 10px; }
    #join-us .join-wrap .join-list {
        width: calc((100% / 2) - 8px);
        margin-bottom: 15px;
        padding: 5px;
    }
    #join-us .join-wrap .join-list .ttl {
        font-size: 12px;
    }
    #join-us .join-wrap .join-list p {
        font-size: 10px;
    }
    #join-us .join-wrap .join-list:nth-child(1),
    #join-us .join-wrap .join-list:nth-child(2),
    #join-us .join-wrap .join-list:nth-child(3),
    #join-us .join-wrap .join-list:nth-child(4) {
        height: 100px;
    }
    #join-us .join-wrap .join-list:nth-child(5),
    #join-us .join-wrap .join-list:nth-child(6) {
        height: 80px;
    }
    
    #join-us .join-wrap .join-list:nth-child(4),
    #join-us .join-wrap .join-list:nth-child(5),
    #join-us .join-wrap .join-list:nth-child(6) {
        margin-bottom: 15px;
    }
}


/*======================================================
お問い合わせエリア（ページ下部）
========================================================*/
#f-contact h2 { margin-bottom: 0; font-size: 2.0rem; }

#f-contact .contact-web-block { margin-top: 40px; text-align: center; max-width: 400px; margin: 40px auto 0 auto; }

#f-contact .contact-web-block .button { width: 300px; }

#f-contact .contact-web-block .icon-line { width: 100px; }


#f-contact .contact-web-block .icon-line > a { width: 75px; height: 75px; display: block; }


#f-contact .contact-tel-block { margin-top: 20px; justify-content: space-around; }

#f-contact .contact-tel-block > div { width: 100%; }

#f-contact .contact-tel-block > .contact-tel { font-size: 1.6rem; font-weight: bold; }

#f-contact .contact-tel-block > .contact-tel > a > .tel-number { font-size: 3.6rem; }


/*----------- SP -------------*/
@media screen and (max-width: 767px) {

    #f-contact .inner-wrap { padding: 50px 0; }

    #f-contact .contact-tel-block > div { text-align: center; }
    #f-contact .contact-tel-block > .contact-tel { margin-bottom: 5px; }

    #f-contact .contact-web-block .icon-line { width: 75px; }

    #f-contact .contact-web-block .icon-line > a { margin-bottom: 50px; }
}

/*----------- PC・タブレット ------------*/

@media (min-width:768px) {

    #f-contact .contact-tel-block > div { width: 48%; }

    #f-contact .contact-tel-block > .contact-tel { text-align: right; }

    #f-contact .contact-web-block .icon-line > a { margin-left: 2vw; }
}



/*======================================================
 ページトップ
========================================================*/

.glb-footer_pagetop { width: 70px; height: 70px; position: fixed; bottom: 50px; right: 5vw; z-index: 10; }

.glb-footer_pagetop a { background: #000; display: block; width: 50px; height: 50px; text-decoration: none; position: relative; transition: all 0.5s ease; }

.glb-footer_pagetop a:hover { background: #333; }

.arrow-top { border-top: solid 2px #FFF; border-left: solid 2px #FFF; width: 15px; height: 15px; transform: rotate(45deg); position: absolute; top: 22px; left: 18px; }






/* 下からふわっと現れる */
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;    /*アニメーションの名前*/
  -webkit-animation-duration: 1s;
          animation-duration: 1s;         /*アニメーションの実行時間*/
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;  /*アニメーション後、要素が表示されたままにする*/
}
@-webkit-keyframes fadeUpAnime {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateY(100px);
            transform: translateY(100px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0);     /*元の位置*/
  }
}
@keyframes fadeUpAnime {
  0% {
    opacity: 0;                   /*非表示*/
    -webkit-transform: translateY(100px);
            transform: translateY(100px); /*縦方向に100pxずらす*/
  }
  100% {
    opacity: 1;                   /*表示*/
    -webkit-transform: translateY(0);
            transform: translateY(0);     /*元の位置*/
  }
}
.fadeUpTrigger {
  opacity: 0;                     /*非表示*/
}



/* PCでのみ表示（スマホでは非表示） */
.pc-only {
  display: block !important;          /* 通常時は表示 */
}

/* スマホでのみ表示（PCでは非表示） */
.sp-only {
  display: none !important;           /* 通常時は非表示 */
}

/* タブレット表示 - 768px〜1024px */
@media (min-width:768px) and (max-width:1024px) {
  .pc-only {
    display: none !important;        /* スマホサイズでは非表示 */
  }
  
  .sp-only {
    display: block !important;       /* スマホサイズでは表示 */
  }
}

/* スマホサイズ（768px未満）の設定 */
@media (max-width: 767px) {
  .pc-only {
    display: none !important;        /* スマホサイズでは非表示 */
  }
  
  .sp-only {
    display: block !important;       /* スマホサイズでは表示 */
  }
}