@charset "UTF-8";

.home_strength_row{

}

@media (max-width:1199px){
  .home_strength_row.dmy{
    height: 0;
    min-height: 0;
    padding: 0;
  }
  .home_strength_row + .home_strength_row{
    margin-top: 15px;
  }
}
@media (min-width:1024px){
  .pg_home .section.sec3{
    padding-top: calc(50vh - 400px);
    padding-bottom: calc(50vh - 400px);
    height: 100vh;
    overflow: hidden;
    overflow: visible;
  }

  /* パネルを重ねる親 */
  .home_strength{
    position: relative;
    height: 800px;
    /* overflow: hidden; どっちでもOK。sec3がhiddenなら不要なことも多い */
  }

  .home_strength_row{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 800px;
    margin: 0;
  }

  /* 背景画像レイヤー */
  .home_strength_img{
    position: absolute;
    top: 0;             /* ここは固定でOK。GSAPが上書きします */
    left: 0;
    width: 100%;
    height: 800px;      /* 初期はパネル高 */
    overflow: hidden;
    z-index: 0;
    transform-origin: center center;
    will-change: transform, height, top;
  }

  /* 文字が上に来るように */
  .home_strength_box1,
  .home_strength_bn{
    position: relative;
    z-index: 2;
  }
  .home_strength_bn{
    right: 0;
  }

  /* 画像の cover 
  .home_strength_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    will-change: transform;
  }*/


  /* 下のセクションほど前に出す */
  .pg_home .section{
    position: relative;
    background-color: #eaebef;
    will-change: transform;
  }
  .pg_home .sec1 {
    z-index: 1;
  }
  .pg_home .sec2 {
    z-index: 2;
    margin-bottom: 50px;
  }
  .pg_home .sec3 {
    z-index: 3;
  }
  .pg_home .sec4 {
    z-index: 4;
  }
  .pg_home .sec5 {
    z-index: 5;
  }
  .pg_home .sec6 {
    z-index: 6;
  }
  .pg_home .sec7 {
    z-index: 7;
  }
}


@media (min-width:1470px){
  .home_strength_row{
    /*left: -100px;*/
    /*right: -100px;*/
    height: 600px;
  }
}
@media (min-width:1720px){
  .home_strength_row{
    left: -100px;
    right: -100px;
    height: 800px;
  }

}


/*******************************
* ABOUTパネル
********************************/

@media (max-width:1199px){
  .about_support_box2_item + .about_support_box2_item{
    margin-top: 15px;
  }
}
@media (min-width:1200px){

  .about_support_box.second {
    padding-top: 80px;
  }

  /* PCのみで使う想定：ピン中にパネルを重ねる */
  .about_support_box2_items{
    position: relative;
    will-change: transform;
    height: 600px;
  }

  /* パネルは重ねる */
  .about_support_box2_item{
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(30px);
    opacity: 0.15;
    transition: opacity .2s ease;
  }

  /* アクティブだけ触れる */
  .about_support_box2_item.is-active{
    pointer-events: auto;
    opacity: 1;
  }

  /* 画像などがはみ出す場合の保険 */
  .about_support_box2_items{
    overflow: hidden;
  }

  /* GSAP有効時だけ重ねる */
  .about_support_box.second.is-gsap-panels .about_support_box2_items{
    position: relative;
    overflow: hidden;
  }

  /* パネルを重ねる（pin中だけ） */
  .about_support_box.second.is-gsap-panels .about_support_box2_item{
    position: absolute;
    inset: 0;
    width: 100%;
  }
}

/*******************************
* ABOUTパネル
********************************/

@media (min-width:1200px){
  /* GSAP有効時だけ重ねる */
  .service_contents_rows.is-gsap-panels{
    position: relative;
    /*overflow: hidden;*/
  }

  /* パネルを重ねる（pin中だけ） */
  .service_contents_rows.is-gsap-panels .service_contents_row{
    position: absolute;
    inset: 0;
    width: 100%;
  }
}

@media (min-width:1200px){

  /* 計測用：一時的に通常フローに戻す */
  .about_merit_items.panel-js.is-measuring{
    height: auto !important;
    overflow: visible !important;
  }
  .about_merit_items.panel-js.is-measuring .about_merit_item{
    position: relative !important;
    inset: auto !important;
    height: auto !important;
  }

  /* GSAP有効時：ステージ＆パネルは高さを持つ */
  .about_merit_items.panel-js.is-gsap-panels{
    position: relative;
    overflow: hidden;
    margin: 0 auto !important;
  }
  .about_merit_items.panel-js.is-gsap-panels .about_merit_item{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%; /* ★これ重要 */
  }

  /* 100%の連鎖を成立させる */
  .about_merit_box1_inner,
  .about_merit_box1_img.img_fit{
    height: 100%;
  }
}

/*******************************
* テキスト背景
********************************/
.txt_bg_js{
  transition: 0.8s all;
  transition-delay: 0.2s;
}
.txt_bg_js:not(.on){
  box-shadow:none;
}
/*.gjs-dashed .home_haken_head_ja,
.home_haken_head_ja.on{
  box-shadow: inset 0 1.9em 0 #FFF;
}*/

/*******************************
* テキスト背景2
********************************/
.txt_bg_js2{
  transition: 0.8s all;
  transition-delay: 0.2s;
}
.txt_bg_js2:not(.on){
  background-color: transparent;
  background-image:none;
}
/*.txt_bg_js2.gr:not(.on){
  background-color: #eaebef;
  background-image:none;
}*/
.txt_bg_js2.bk:not(.on){
  background-color: #000;
  background-image:none;
}
.txt_bg_js2.bk2:not(.on){
  background-color: #1c1c1c;
  background-image:none;
}

.txt_bg_js2.gra:not(.on) > *:after{
  /*bottom: 100%;*/
  right: 100%;
}

/**/
.txt_bg_js3{
  position: relative;
  z-index: 1;
  color: transparent;
  
  animation-duration: 2.0s;
  animation-delay: 0.1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
.gjs-dashed .txt_bg_js3{
  color: #1c1c1c;
}
.txt_bg_js3.on{
  animation-name: txt_bg_js3_anime;
}
.txt_bg_js3:after{
  /*content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  right: 100%;
  background: #1c1c1c;
  animation-duration: 1.5s;
  animation-delay: 0.1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;*/
}
.txt_bg_js3.on:after{
  /*animation-name: txt_bg_js3_anime_bg;*/
}



@keyframes txt_bg_js3_anime{
  0%   { color: transparent; }
  50%  {  }
  100% { color: #1c1c1c;}
}
@keyframes txt_bg_js3_anime_bg{
  0%   { right: 100%; }
  50%  { right: 0; }
  100% { right: 0; left: 100%;}
}

.home_thought_item_box1_img{
  transform:scale(0);
  animation-duration: 0.6s;
  animation-delay: 0.1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}
.home_thought_item_box1_img.on{
  animation-name: img_scaleup_anime;
}

.gjs-dashed .home_thought_item_box1_img{
  transform:scale(1);
}

@keyframes img_scaleup_anime{
  0%   { transform:scale(0); }
  100%   { transform:scale(1); }
}


/*******************************
*　REASONパネル
********************************/
.staffing_reason_item_inner{
  position: relative;
  z-index: 1;
}
.staffing_reason_item_inner:before{
  content: "";
  background: #FFF;
  position: absolute;
  z-index: 2;
  inset: 0;
  transition: 0.5s all;
}
.gjs-dashed .staffing_reason_item_inner:before{
  display: none;
  top: 0;
}
.staffing_reason_item_inner.visible:before{
  top: 100%;
}


@media (min-width:768px){

}
@media (min-width:1024px){

}
@media (min-width:1200px){


}
@media (min-width:1470px){

}
@media (min-width:1720px){

}


/*******************************
*　円グラフ
********************************/

.staffing_data_items{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 1050px;
  max-width: 100%;
  margin: 50px auto;
}
.staffing_data_item{
  width: 100%;
}
.staffing_data_item:nth-child(n+2){
  margin-top: 30px;
}

.staffing_pie{
  width: 200px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;

  /* JSで制御するCSS変数 */
  --p: 0;                /* 0〜100 */
  --th: 18px;            /* 円の太さ */
  --blue: #0b5fa5;
  --bg: #ffffff;

  /* 白下地 + 青進捗 */
  background: conic-gradient(
    var(--blue) calc(var(--p) * 1%),
    var(--bg) 0
    );

  display: grid;
  place-items: center;

  color: #fff;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

/* 中央の黒い円 */
.staffing_pie::before{
  content: "";
  position: absolute;
  inset: calc(var(--th) + 18px);
  border-radius: 50%;
  background: #111;
  z-index: -1;
}

/* 数字を前面へ */
.staffing_pie{
  z-index: 1;
}
.staffing_pie > *{
  position: relative;
  z-index: 1;
}
.staffing_pie{
  font-size: 30px;
  font-weight: 700;
  font-family: var(--font-en);
  letter-spacing: 0;
  line-height: 1;
}
.staffing_pie span{
  font-size: 0.6em;
}

/* ラベル */
.staffing_pie-label{
  margin-top: 12px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.staffing_pie-label p{
  letter-spacing: 0;
}

.staffing_pie.is-full{
  background: var(--blue) !important;
}

@media (min-width:768px){
  .staffing_data_items{
    margin: 50px auto;
    padding: 0 20px;
  }
  .staffing_data_item{
    width: auto;
  }
  .staffing_data_item:nth-child(n+2){
    margin-top: 0;
  }
  .staffing_data_item:nth-child(n+4){
    margin-top: 30px;
  }

  .staffing_pie{
    width: 180px;
    font-size: 30px;
  }
  .staffing_pie-label{
    font-size: 18px;
  }

  /* 中央の黒い円 */
  .staffing_pie::before{
    inset: calc(var(--th) + 18px);
  }
}
@media (min-width:1024px){
  .staffing_pie{
    width: 242px;
  }
}
@media (min-width:1200px){
  .staffing_data_items{
    margin: 87px auto;
    padding: 0;
  }
  .staffing_pie{
    width: 242px;
    font-size: 40px;
  }
  .staffing_pie-label{
    font-size: 24px;
  }


  /* 中央の黒い円 */
  .staffing_pie::before{
    inset: calc(var(--th) + 44px);
  }

}
@media (min-width:1470px){

}
@media (min-width:1720px){

}

.sec-scale-js{
  transition: 0.3s all;
}
/*.sec-scale-js{
  transform: scale(0.2) translateY(0);
  transform-origin: top center;
  transition: 0.3s all;
}
.gjs-dashed .sec-scale-js,
.sec-scale-js.on{
  transform: none;
}*/

.sec-scale-js2{
  transition: 1.0s all;
  clip-path: inset(0 0 100% 0);
  
}
.gjs-dashed .sec-scale-js2,
.sec-scale-js2.on{
  clip-path: inset(0 0 0 0);
}