@charset "UTF-8";

/*  BASE
==========================================================*/
html:has(.z-junyaIto) {
  scroll-behavior: smooth;
}

.z-junyaIto {
  font-size: clamp(1.4rem, calc(16 / 1865 * 100vw), 16rem);
  /* font-size: 1.4rem; */
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: 0;
  font-feature-settings: "palt";
  color: #4c4948;
  margin-bottom: 10rem;
  background-color: #fefdfd;
  font-family: "Noto Sans JP", sans-serif;
  /* font-family: 'Helvetica Neue', Helvetica, Arial, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", YuGothic, -apple-system, BlinkMacSystemFont, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif; */
}
.z-inner--1585 {
  width: 158.5rem;
  max-width: 85%;
  margin: 0 auto;
}
.z-inner--1780 {
  width: 178rem;
  max-width: 90%;
  margin: 0 auto;
}

.fn-en {
  font-family: "jaf-mashine", sans-serif;
  font-weight: 600;
}

.z-visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}



@media print, screen and (max-width: 750px) {
  .z-junyaIto {
    margin-bottom: 7.6rem;
  }
}



.z-overflow-hidden{ overflow: hidden;}


/* aos */
[data-aos=fade-up]{transform:translate(0,60px)}
[data-aos=fade-left]{transform: translate3d(20px,0,0);}
[data-aos=fade-right]{transform: translate3d(20px,0,0);}
[data-aos=zoom-out]{transform:scale(1.05)}


[data-aos="slidein-up"],
[data-aos="slidein-down"],
[data-aos="slidein-left"]{position:relative;overflow:hidden}

[data-aos="slidein-up"]:after,
[data-aos="slidein-up"]:before,
[data-aos="slidein-down"]:after,
[data-aos="slidein-down"]:before,
[data-aos="slidein-left"]:after,
[data-aos="slidein-left"]:before{content:'';position:absolute;display:inline-block;top:0;left:0;width:100%;height:100%}
[data-aos="slidein-up"]:before,
[data-aos="slidein-down"]:before,
[data-aos="slidein-left"]:before{z-index:3;background:#FFF}
[data-aos="slidein-up"]:after,
[data-aos="slidein-down"]:after,
[data-aos="slidein-left"]:after{z-index:2;background-color:#00008e}

[data-aos="slidein-up"].aos-animate:after{animation-name:slidein-upplay;animation-duration:1s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.8,0,.5,1)}
[data-aos="slidein-up"].aos-animate:before{animation-name:slidein-up-maskOut;animation-duration:.6s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.8,0,.5,1)}

[data-aos="slidein-down"].aos-animate:after{animation-name:slidein-downplay;animation-duration:1s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.8,0,.5,1)}
[data-aos="slidein-down"].aos-animate:before{animation-name:slidein-down-maskOut;animation-duration:.6s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.8,0,.5,1)}

.z-fv__imgFrame--01 [data-aos="slidein-down"].aos-animate:after{}
.z-fv__imgFrame--01 [data-aos="slidein-down"].aos-animate:before{}

.z-fv__imgFrame--02 [data-aos="slidein-up"].aos-animate:after{animation-delay: 0.2s;}
.z-fv__imgFrame--02 [data-aos="slidein-up"].aos-animate:before{animation-delay: 0.2s;}

.z-fv__imgFrame--03 [data-aos="slidein-down"].aos-animate:after{animation-delay: 0.4s;}
.z-fv__imgFrame--03 [data-aos="slidein-down"].aos-animate:before{animation-delay: 0.4s;}


[data-aos="slidein-left"].aos-animate:after{animation-name:slidein-leftplay;animation-duration:1s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.8,0,.5,1)}
[data-aos="slidein-left"].aos-animate:before{animation-name:slidein-left-maskOut;animation-duration:.6s;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.8,0,.5,1)}
.z-bgBlack [data-aos="slidein-left"]:before{z-index:3;background-color: #090709;}



@keyframes slidein-upplay {
0%{transform:translateY(101%);opacity:1}
50%{transform:translateY(0);opacity:1}
100%{transform:translateY(-120%);opacity:1}
}
@keyframes slidein-up-maskOut {
0%{transform:translateY(0)}
50%{transform:translateY(0)}
100%{transform:translateY(-120%)}
}

@keyframes slidein-downplay {
0%{transform:translateY(-101%);opacity:1}
50%{transform:translateY(0);opacity:1}
100%{transform:translateY(120%);opacity:1}
}
@keyframes slidein-down-maskOut {
0%{transform:translateY(0)}
50%{transform:translateY(0)}
100%{transform:translateY(120%)}
}

@keyframes slidein-leftplay {
0%{transform:translateX(-101%);opacity:1}
50%{transform:translateX(0);opacity:1}
100%{transform:translateX(120%);opacity:1}
}
@keyframes slidein-left-maskOut {
0%{transform:translateX(0)}
50%{transform:translateX(0)}
100%{transform:translateX(120%)}
}



.aos-mask-wrap {
  overflow: hidden;
}

/* AOSで動かす本体 */
[data-aos="ttl-slide-up"] {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); 
}
[data-aos="ttl-slide-up"].aos-animate {
  transform: translateY(0);
  opacity: 1;
}

@media print, screen and (max-width: 750px) {
  [data-aos=sp-fade]{opacity: 0;}
  [data-aos="sp-fade"].aos-animate {
    opacity: 1;
  }
}


/* HACK */
.h_wrap:not(.h_fixed){ 
  margin-top: -120px;
}
@media print, screen and (max-width:1110px) {
  .h_wrap:not(.h_fixed){ margin-top: -81px;
  }
}

@media print, screen and (max-width:750px) {
  .h_wrap:not(.h_fixed){ margin-top: -16vw;}
}





/* modal */
.z-modalContents {
  height: 73svh;
  background-color: #090709;
}
.z-fv__modalMovie iframe,.z-fv__modalMovie {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
}
.modaal-container:has(.z-fv__modalMovie) {
background-color: unset;
}
.z-modal {
  display: none;
 }
 .modaal-wrapper:has(.z-modalContents){
  height: 90dvh;
  top: 5%;
 }
.modaal-container:has(.z-modalContents){
  width: 1200px ;
  max-width: 90vw;
  color: #fff;
  font-size: clamp(1.3rem, calc(14 / 1200 * 100vw), 1.4rem);
  line-height: 2;
  letter-spacing: 0;
  font-feature-settings: "palt";
  font-family: 'Helvetica Neue', Helvetica, Arial, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", YuGothic, -apple-system, BlinkMacSystemFont, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif;
 }
 .modaal-container:has(.z-modalContents--movie){
  max-width: 80vw;
 }

.modaal-inner-wrapper:has(.z-modalContents) {
  padding: 0;
 }
 .modaal-content-container:has(.z-modalContents) {
  padding: 0;
 }
 /* closeボタン */
 .modaal-wrapper:has(.z-modalContents) .modaal-close{
  position: fixed;
  right: 5%;
  top: 5%;
  background: url(../../../img/special/tao100/icon_close.svg) no-repeat center center/contain;
  width: 40px;  /* 画像の幅を設定 */
  height: 40px; /* 画像の高さを設定 */
  border: none; /* ボタンのデフォルトの枠線を消去 */
  text-indent: -9999px; /* テキストを画面外に隠す */
  overflow: hidden; /* テキストのはみ出しを防ぐ */
  cursor: pointer; /* マウスポインターを変更 */
  z-index: 100;
}
  .z-modalContents--movie {
  height: fit-content;
  }
  @media print, screen and (min-width:1024px) {
  .modaal-container:has(.z-modalContents){
      font-size: clamp(1.25rem, calc(14 / 1280 * 100vw), 1.4rem);
  }
  }
@media print, screen and (max-width:750px) {
   .modaal-container:has(.z-modalContents--movie){
    max-width: 90vw ;
    background-color: unset !important;
   }

}

/*  COMMON
==========================================================*/
.z-txt {
  font-size: clamp(1.8rem, calc(21 / 1865 * 100vw), 21rem);
  text-align: justify;
}
.z-bottomBorder:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  background-color: #0068b7;
  height: 3px;
  width: 94%;
  margin: 0 auto;
  z-index: 2;
}
sup.z-sup {
  font-size: 70%;
  top: -.3em;
}
.z-bgBlack {
  background-color: #090709;
  color: #fff;
}
.z-bgGray {
background-color: #dbdbdb;
}
.z-bgGradation {
  background: linear-gradient(90deg, #000053 0%, #0077fc 100%);
  color: #fff;
}
.z-cMain {
  color: #00008e;
}
.z-cResno {
  color: #0088a6;
}
.z-cWhite {
  color: #fff;
}
.z-bgMain {
  background-color: #00008e;
  color: #fff;
}
.z-bgBlack .z-txt {
  color: #fff;
}

/* ボタン */
.z-btn {
  width: fit-content;
  max-width: 100%;
  margin-top: 3rem;
  font-size: calc(38em/16);

}
.z-btn__link {
  position: relative;
  width: calc(520em/38);
  max-width: 100%;
  border-radius: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(70em/38);  
  font-family: "jaf-mashine", sans-serif;
  font-weight: 600;
  text-align: center;
  font-size: 2.4rem;
  background-color: #090709;
  color: #fff;
  overflow: hidden;
  z-index: 1;
  border: 3px solid #0068b7;
}
/* .z-btn__link::after {
  content: "";
  display: block;
  width: calc(8em/24);
  aspect-ratio: 8/19;
  height: auto;
  background: url(../../../img/special/junya_ito/icon-arrow_white.svg) no-repeat center center / contain;
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transition: .2s;
} */
.z-btn__link--resno {
  border: 1px solid #0088a6;
  color: #0088a6;
  background-color: unset;
}

.z-movieBtn {
  width: fit-content;
  max-width: 100%;
  position: absolute;
  right: 5rem;
  bottom: 5rem;
  z-index: 3;
}
.z-movieBtn__link {
  position: relative;
  width: calc(405em/23);
  max-width: 100%;
  border-radius: 2.7rem;
  padding: 0 calc(8em/23) 0 calc(20em/23);
  display: flex;
  gap: calc(24em/23);
  align-items: center;
  height: calc(55em/23);  
  font-family: "jaf-mashine", sans-serif;
  font-weight: 600;
  font-size: 2.3rem;
  color: #fff;
  background-color: #00008e;
  overflow: hidden;
  z-index: 1;
}

.z-movieBtn__link--resno {
  background-color: #0088a6;
}
.z-movieBtn__link::after {
  content: "";
  display: block;
  width: calc(38em/23);
  aspect-ratio: 1/1;
  background: url(../../../img/special/junya_ito/icon-play-movie.svg?02) no-repeat center center / contain;
  position: absolute;
  right: calc(8em/23);
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transition: .2s;
}
.z-movieBtn__link--ja {
  font-family: initial;
  font-size: calc(16em/23);
  font-weight: 400;

}

.z-profileBtn {
  width: fit-content;
  max-width: 100%;
  margin-top: 4.3rem;
}
.z-movieBtn__link--profile {
  padding-inline: calc(24em/23);
}
.z-movieBtn__link--profile.z-movieBtn__link::after{ display: none;}

@media print, screen and (max-width: 991px) {
  .z-movieBtn__link { 
    font-size: 1.8rem;
  }
}
@media print, screen and (max-width: 750px) {
  .z-txt {
    font-size: clamp(1.5rem, calc(18 / 768 * 100vw), 1.8rem);
  }
  .z-btn {
    margin-inline:auto;
  }
  .z-btn__link {
    height: 6rem;  
  }

  .z-movieBtn {
    width: 100%;
    right: auto;
    bottom: 3rem;
    
  }
  .z-movieBtn__link {
    font-size: 1.7rem;
    margin-inline: auto;
  }
  .z-movie .z-movieBtn { bottom: 7.5rem;}
  .z-movie .z-expand{color: #fff;opacity: 1 !important;}
  .z-movie .z-expand::before {
  opacity: 1;transform: translateY(-50%) scale(1.1);}
}

/* hoverアニメーション */
.z-expand::before {
  background-color: #00008e;
  border-radius: 50%;
  content: "";
  display: block;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: 100%;
  height: 0;
  z-index: -1;
  transform: translateY(-50%) scale(0.1);
  transition: opacity .25s, transform 0s;
  transition-delay: 0s, .2s;
}
.z-expand:hover {
  color: #fff;
  opacity: 1 !important;
}
.z-expand:hover::before {
   opacity: 1;
  transform: translateY(-50%) scale(1.1);
  transition-delay: 0s;
  transition: opacity .3s, transform .3s ease-in-out;
}
.z-btn__link:hover::after {
  background: url(../../../img/special/junya_ito/icon-arrow_white.svg) no-repeat center center / contain;
}
.z-btn__link--resno::after {
    background: url(../../../img/special/junya_ito/icon-arrow.svg) no-repeat center center / contain;
}

.z-pore {
  position: relative;
}
.z-obf {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.z-tabHide {
  display: block;
}
.z-tabShow {
  display: none !important;
}
.z-spHide {
  display: block;
}
.z-spShow {
  display: none !important;
}




@media print, screen and (max-width: 991px) {
  .z-tabHide {
    display: none;
  }
  .z-tabShow {
   display: block !important;
  }
 
}
@media print, screen and (max-width: 750px) {
  
  .z-title2 {
  text-align: center;
  }
  .z-spHide {
    display: none !important;
  }
  .z-spShow {
    display: block !important;
  }
  .z-btn__link {
  height: 6rem;
  font-size: 2rem;
  width: 30rem;
  }

}
@media print, screen and (max-width: 600px) {
.z-600Hide {
  display: none;
}
}


.z-sc_effect {
  overflow: hidden;
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
[data-aos="aos-sc_effect"].aos-animate .z-sc_effect,
.z-sc_effect.z-active {
  --skewX: 0deg;
  --x: 0;
}

.z-sc_effect .zelm1,
.z-sc_effect .zelm2,
.z-sc_effect .zelm3 {
  transition: transform 0.4s 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.z-fv__mainCopy .z-sc_effect .zelm1,
.z-fv__mainCopy .z-sc_effect .zelm2,
.z-fv__mainCopy .z-sc_effect .zelm3 {
transition: transform 0.4s .9s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.z-sc_effect .zelm2,
.z-sc_effect .zelm3 {
  position: absolute;
}

.z-sc_effect .zelm1 {
  mask-image: linear-gradient(
    to bottom, 
    #000 33.3%, 
    transparent 33.3%
  );
  transform: translateX(var(--x, -110%)) skewX(var(--skewX, 40deg));
}

.z-sc_effect .zelm2 {
  mask-image: linear-gradient(
    to bottom,
    transparent 33.3%,
    #000 33.3%,
    #000 66.6%,
    transparent 66.6%
  );
  transform: translateX(var(--x, 110%)) skewX(var(--skewX, -40deg));
}

.z-sc_effect .zelm3 {
  mask-image: linear-gradient(
    to bottom, 
    transparent 66.6%, 
    #000 66.6%
  );
  transform: translateX(var(--x, -110%)) skewX(var(--skewX, 40deg));
}


/* ---------------------------------
  文字ねじれアニメーション
--------------------------------- */

[data-split] {
  display: inline-block;
}

[data-split] .z-split-inner {
  display: block;
  position: relative;
  overflow: hidden;
}

[data-split] .z-split-front,
[data-split] .z-split-back {
  display: block;
}

[data-split] .z-split-back {
  position: absolute;
  inset: 0;
}

[data-split] .z-split-char {
  opacity: 0;
  display: inline-block;
  transition:
    opacity 0.4s cubic-bezier(0.2, 0.63, 0.4, 1.02),
    transform 0.4s cubic-bezier(0.2, 0.63, 0.4, 1.02);

  transition-delay: calc(0.015s * var(--index));
}
.z-off [data-split] .z-split-char {
  transition:
    opacity 1s cubic-bezier(0.2, 0.63, 0.4, 1.02),
    transform 1s cubic-bezier(0.2, 0.63, 0.4, 1.02);
}


/* 入ってくる文字 */
[data-split] .z-split-back .z-split-char {
  opacity: 0;
  transform: translateY(101%) skewX(55deg);
}



    /* アニメーション後 */
    /*[data-split].z-split-active .z-split-back .z-split-char */
    [data-aos="aos-sc_effect"].aos-animate [data-split] .z-split-back .z-split-char,
    .z-active [data-split] .z-split-back .z-split-char
    {
      opacity: 1;
      transform: none;
    }

    /* 元の文字 */
    /*[data-split].z-split-active .z-split-front .z-split-char*/
    [data-aos="aos-sc_effect"].aos-animate [data-split] .z-split-front .z-split-char,
    .z-active [data-split] .z-split-front .z-split-char
    {
      opacity: 0;
      transform: translateY(-101%) skewX(-55deg);
    }



/* ---------------------------------
  SC連動
--------------------------------- */
@media print, screen and (min-width: 751px) {
[class*="z-sc__item"] .z-sc__fade {
  transition: opacity .8s ease 0s;
  opacity: 0;
}
[class*="z-sc__item"].z-active .z-sc__fade {
  transition: opacity .8s ease 0.4s;
  opacity: 1;
}

[class*="z-sc__item"] .z-sc__fadeup {
  transition: all .8s ease 0s;
  opacity: 0;
  transform: translateY(15px);
}
[class*="z-sc__item"].z-active .z-sc__fadeup {
  transition: all .8s ease 0.4s;
  opacity: 1;
  transform: translateY(0px);
}

}

/* 初期CSS */
.container {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3c3c3c;
}

/* FV
==========================================================*/
.z-fv {
  /*height: 100vh;*/
  height: auto;
  aspect-ratio: 16 / 9;
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media print, screen and (max-width: 750px) {
  .z-fv {
    height: 100svh;
    aspect-ratio: auto;
  }
}
.z-fv__imgs {
  display: flex;
  gap: 1.1rem;
  flex: 1 1 0;
  min-height: 0;
  justify-content: flex-end;
  line-height: 0;
}
.z-fv__img {
  height: fit-content;
  width: 100%;
  object-fit: cover;
}
.z-fv__imgs p{ display: inline-block;}

.z-fv__imgFrame--01 {
  aspect-ratio: 740/734;
  width: calc(740 / 1920 * 100%);
  margin-top: auto;
}
.z-fv__imgFrame--02 {
  aspect-ratio: 487/762;
  width: calc(487 / 1920 * 100%);
  margin-bottom: 4%;
}
.z-fv__imgFrame--03 {
  aspect-ratio: 583/496;
  width: calc(583 / 1920 * 100%);
  margin-top: auto;
  margin-bottom: 2%;
}

.z-fv__mainCopy {
  flex: 0 0 auto;
  display: block;
  margin: -2px auto calc(42/1080 *100svh);
  aspect-ratio: 1237/182;
  /* width: calc(1237 / 1920 * 100%); */
  width: min(90rem,calc(1237 / 1920 * 100%));
  height: auto;
}
.z-fv__mainCopy img {
  height: auto;
}

@media print, screen and (max-width: 750px) {
.z-fv__mainCopy {
  margin: calc(42/1080 *100svh) auto calc(42/1080 *100svh);
  margin: 0 auto calc(50/1080 *100svh);
  width: 90%; 
}
.z-fv__imgFrame--02 {
  margin-bottom: 6%;
}
.z-fv__imgFrame--03 {
  margin-bottom: 6%;
}


}

.z-fv__logo {
  position: absolute;
  width: calc(362/1920 *100vw);
  bottom: calc(530/496 *100%);
  right: calc(50/1920 *100vw);
  aspect-ratio: 362 / 100;
  height: auto;
}


.z-movie{ 
 width: 100%;
 aspect-ratio: 16/9;
 overflow: hidden;
}
.z-movie__video {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}


@media (max-aspect-ratio: 5/4) {
  .z-fv__img {
    height: 100%;
  }
  .z-fv__imgFrame--01 {
    height: calc(734 / 855 * 100%);
  }
  .z-fv__imgFrame--01 .z-fv__img{object-position: 57% center;}
  .z-fv__imgFrame--02 {
    height: calc(762 / 855 * 100%);
  }
  .z-fv__imgFrame--03 {
    height: calc(496 / 855 * 100%);
  }
  .z-fv__imgs p{ height: 100%;}
}

@media print, screen and (max-width: 750px) {
  .z-movie{ 
   padding-bottom: 15rem;
   }

    .z-movie{ 
    aspect-ratio:unset;
    overflow:unset;
    }
   .z-fv__logo {
    width: calc(140 / 750 * 100vw);
    padding-inline: 0 5%;
    aspect-ratio:unset;
    
   }
}


/* PROFILE
==========================================================*/

.z-profile { margin-bottom: -1px;
  background: linear-gradient(to right, #0077fc 0%, #00008e 100%);
  background: url(../../../img/special/junya_ito/bg-profile.webp) no-repeat 72% center / cover;

}

.z-profile__contents {
  min-height: 100vh;
  height: fit-content;
  padding-block: 7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 1100px) and (min-width: 750px) {
  .z-profile__contents {
    min-height: 137vh;
  }
  .z-profile__team {
    font-size: 2.3vw!important;
  }
  .z-profile__txt {
    font-size: 2.1vw;
  }
}
.z-profileName {
  font-size: min(calc(85 / 1560 * 100vw),calc(85em/16));
  /* font-size: clamp(5rem, calc(85 / 1865 * 100vw), 8.5rem); */
}
.z-profileName__en {
  font-family: "jaf-mashine", sans-serif;
  font-weight: 600;
  line-height: 1.2;
}
.z-profileName__ja {
  font-weight: bold;  
  font-size: calc(32em/85);
  line-height: 1.5;
  margin-top: 0.3em;
}
.z-profile__team {
  display: block;
  font-weight: bold;
  line-height: 1.5;
  font-size: calc(25em/16);
}
.z-profile__txt  {
  margin-top: 1.5em;
}

@media (max-aspect-ratio: 4/5) { 

  .z-profile__contents {
    background: url(../../../img/special/junya_ito/bg-profile_tab.webp) no-repeat right 50% bottom / contain;
    min-height: fit-content;
    padding-block: 20rem 6rem;
  }
  /*
  .z-profile__bottomImg {
    display: block;
    width: 100%;
    min-height: 400px;
    object-fit: cover;
    object-position: 70%;
  }*/
  .z-profile { position: relative; overflow: hidden;
    background: linear-gradient(to right, #0077fc 0%, #00008e 100%);}
  .z-profile .z-inner--1585{position: relative; z-index:2;}
  .z-profile::before{
    content: ""; position: absolute; width: 100%; height: 110%; left: 0; bottom:0;
    background: url(../../../img/special/junya_ito/profile-bottom.webp) no-repeat 63% bottom / cover;
    z-index: 1; opacity: .5;

  }
}
@media (max-aspect-ratio: 1/2) {
  .z-profile__contents {
    background: url(../../../img/special/junya_ito/bg-profile_tab.webp) no-repeat right -7% bottom / contain;
  }

}
@media print, screen and (max-width: 768px) {
  .z-profileName {
    font-size: clamp(4rem, calc( 46/ 375 * 100vw), 6rem);
  }
  .z-profileName__ja {
    font-size: calc(21em/46);
  }
  .z-profile__team {
    font-size: calc(17em/14);
  }
}

/* SCENE
==========================================================*/
.z-off-wrap{min-height: 100svh;}
.z-scene {
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.z-scene__bgTxt {
  position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 font-family: "jaf-mashine", sans-serif;
 font-weight: 600;
 font-size: clamp(38rem,calc(564/1920 *100vw),56.4rem);
 line-height: 1.2;
 opacity: 0.27; 
  white-space: nowrap;
  z-index: 0;
}
.z-scene__ttl {
  font-size: clamp(8rem,calc(124/1920 *100vw),12.4rem);
  line-height: 1.46; line-height: 1.2;
  font-weight: 800;
  margin-bottom: 0.45em;
}
.z-scene__txtFrame {
  padding:11.5rem calc(240/1920 *100vw);
  position: relative;
  z-index: 4;
}

.z-scene__img {
  z-index: 1;
  aspect-ratio: 690/930;
  width: 69rem;
  /* width: max(30rem,calc(690/1920 *100vw)); */
  height: auto;
  position: absolute;
  bottom: 0;
  right: 0;
}
.z-scene__logo {
 margin-top: calc(60em/16);
 aspect-ratio: 370/102;
 width: calc(370em/16);
}
@media print, screen and (max-width: 1200px) {
  .z-scene__txtFrame {
    padding:11.5rem 7%;
  }
}
@media print, screen and (max-width: 991px) {
  .z-scene__bgTxt {
    font-size: min(calc(380/991 *100vw),38rem);
   top: 20%;
  }
  .z-scene__img {
    position: unset;
  }
  .z-scene { 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  .z-scene__txtFrame  {
    padding-bottom: 0;
  }
  .z-scene:after {
    height: 2px;
  }
  
}
@media print, screen and (max-width: 750px) {
  .z-scene {min-height: none;}

  .z-scene__txtFrame  {
    padding-block: 7rem 0;
  }
  .z-scene__ttl {
    font-size: clamp(5rem,calc(80/820 *100vw),8rem);
  }
  .z-scene__logo {
    margin-top: 3rem;
    width: 24rem;
  }
  .z-scene:after {
    height: 1px;
  }
  .z-scene__img { margin-top: -10%; }
  
}

.z-on.z-bottomBorder:after{
background-color: #FFF; background: none;
}
/* OFF
==========================================================*/

.z-scene__img--off {
  aspect-ratio: 880/930;
  width: 88rem;
}



/* FEATURE
==========================================================*/

.z-feature { margin-bottom: -1px;
  padding-block: 12rem 14rem;
}
@media print, screen and (max-width: 750px) {
  .z-feature {
    padding-block: 6rem 7rem;
  }
}
.z-feature__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
  background-color: #000;
}


.z-feature__contents {
  padding: 15rem 0; background-color: #fff;
}
.z-featureHead {
  font-size: clamp(4rem, calc(83 / 1865 * 100vw), 8.3rem);
  margin-bottom: calc(90em/83);
}
.z-featureHead__en {
  font-family: "jaf-mashine", sans-serif;
  font-weight: 600;
  font-size: calc(32em/83);
  @media print, screen and (max-width: 750px) {
    font-size: calc(30em/83);
  }
  line-height: 1.7;
}

.z-featureHead__ja {
  line-height: 1.4;
  font-weight: 400;
  margin-top: 0.15em;
}

.z-featureList {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6rem calc(110/1865 * 100%) ;
}
.z-featureList__img {
  width: 100%;
  height: auto;
  aspect-ratio: 455/337;
  background-color: #000;
  display: grid;
place-content: center;
}
.z-featureList__img video {
  aspect-ratio: 16/9;
  width: 100%;
}
.z-featureList__imgWrap {
display: grid;
}
.z-featureList__imgWrap img {
  grid-area: 1/1;
}
.z-featureList__img--force {
  width: 100%;
  height: 100%;
}
.z-featureList__title{
  font-weight: bold;
  font-size: clamp(2.1rem, calc(37 / 1865 * 100vw), 7.7rem);
  line-height: calc(57 / 37);
  letter-spacing: 0.04em;
  margin-block: 0.8em 0.5em;
}
.z-featureList__txt {
  font-size: clamp(1.5rem, calc(21 / 1865 * 100vw), 21rem);
  text-align: justify;
  /* font-size: clamp(1.2rem, calc(13 / 1200 * 100vw), 1.3rem); */
  line-height: calc(36 / 21); 
}


@media print, screen and (max-width: 750px) {
  .z-feature__contents {
    padding: calc(7.5rem + 80px) 0 11rem;
  }
  .z-feature__head{
    flex-direction: column;
  }
  .z-title2--reason{
    text-align: center;
  }
  .z-featureList {
    grid-template-columns: 1fr;
    margin-top: 4.5rem;
    max-width: 45.5rem;
    margin-inline: auto;
    gap: 4rem;
  }
  .z-feature__txt {
    width: 100%;
  }
 
}

/*  ABOUT COLANTOTTE
==========================================================*/
.z-aboutUs__contents {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem calc(46 / 970 * 100%);
}
.z-aboutUs__txt {
  line-height: 2;
}
.z-aboutUs .z-title2 {
  margin-bottom: calc(28em/44);
}



/*  SELECT
==========================================================*/
/* end: "+=150%" の個数と連動 */
@media print, screen and (min-width: 751px) {
.z-bgBlack .z-selectList { min-height: calc(250vh*3);}
.z-select--resno .z-selectList { min-height: 250vh;}
}


.z-selectList__item {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.z-selectList__bg{
  width: 100%;
  height: auto;
  height: 100%;
  /* height: 100vh; */
  /*position: sticky;*/
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  transform-origin: left center;
}
.z-selectList__item02 .z-selectList__bg {
  transform-origin: right top;
}
.z-selectList__bgImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% 40%;
}
.z-selectList__item02 .z-selectList__bgImg {
  object-position: 72% 20%;
}

.z-selectList__contents {
  position: relative;
  position: sticky;
  right: 0;
  top: 81px;
  width: calc(1020/1728 * 100%);
  margin-left: auto;
  padding-bottom: 7rem;
}
.z-selectList__contents--02 {
  margin-left: calc(40/1728 * 100%);
  right: auto;
}
.z-selectList__img {
  position: relative;
  width: 100%;
  max-height: 42vh;
  aspect-ratio: 1020/520;
}
.z-selectList__img img {
position:absolute;
top:0 ;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
}
.z-selectList__item02 .z-selectList__contents { right: auto;}
.z-selectList__item03 .z-selectList__contents {     
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  padding:7rem 0;
}
.z-selectList__item03 .z-selectList__imgwrap{ position: relative;}
.z-selectList__item03 .z-selectList__img{
  position: absolute;
  width:calc(533/1920 *100vw);
  max-width: 530px;
  /* max-height: 58vh; */
  aspect-ratio: 533/635;
  transform: translateX(-40%);
}
.z-selectList__item03 .z-selectList__txtFrame{
  margin-right: calc(150/1920 *100vw);
  
}


@media print, screen and (max-width: 1024px) {
  .z-selectList__item03 .z-selectList__img{
    position: unset;
    transform: unset;
  }
  .z-selectList__item03 .z-selectList__contents {     
    position: sticky;
    transform: unset;
    top: 7rem;
  }
}

/*
.z-selectList__img--kage01 {
  position: relative;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  max-height: 42vh;
  aspect-ratio: 1020/520;
  background: url(../../../img/special/junya_ito/product01_kage.jpg?a) no-repeat center bottom / contain;
  mix-blend-mode: multiply;
}
.z-selectList__img--kage02  {
  position: relative;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  max-height: 42vh;
  aspect-ratio: 1020/520;
  background: url(../../../img/special/junya_ito/product02_kage.jpg?a) no-repeat center bottom / contain;
  mix-blend-mode: multiply;
}
*/

.z-selectList__txtFrame {
  width: fit-content;
  max-width: 85%;
  margin: 0 auto;
}

.z-selectList__title {
  font-size: 2.5rem;
  line-height: calc(34em/25);
  margin-bottom: calc(27em/25);
  font-weight: bold;
  padding-top: .5em;
}
.z-selectList__txt {
  font-weight: bold;
}

.z-selectList__info {
    font-weight: bold;
  font-size: 1.3rem;
  margin-top: calc(20em/13);
}

@media screen and (min-width: 751px) and (max-height: 760px) {
  .z-selectList__img {
    max-height: 38vh;
  }

  .z-selectList__title {
    padding-top: .1em;
  }
}




.z-prodctsInfo__txt{  margin-bottom:2rem;}
dl.z-prodctsInfo__info {
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.z-prodctsInfo__info dt {
  width: calc(140em/16);
}
.z-prodctsInfo__info dd {
  width: calc(100% - calc(140em/16));
}

/* Animation */
[class*="z-selectList__item"] .z-selectList__bg{
  transition: transform 0.5s ease 0.5s;
  transform: scale(1.5) translate(0vw, 0vh);
}
[class*="z-selectList__item"].z-active .z-selectList__bg{
  transition: transform 0.5s ease 0s;
  transform: scale(1.0) translate(0vw, 0vh);
}

[class*="z-selectList__item"] .z-selectList__img img,
[class*="z-selectList__item"] .z-selectList__img [class*="z-selectList__img--kage"]{
  transition: opacity 1s ease 0s;
  opacity: 0;
 }
[class*="z-selectList__item"].z-active .z-selectList__img img,
[class*="z-selectList__item"].z-active .z-selectList__img [class*="z-selectList__img--kage"]{
  transition: opacity 1s ease 0.5s;
  opacity: 1;
}
[class*="z-selectList__item"] .z-selectList__txtFrame {
  transition: all 1s ease 0s;
  opacity: 0;
  transform: translateY(15px);
}
[class*="z-selectList__item"].z-active .z-selectList__txtFrame {
  transition: all 1s ease 0.75s;
  opacity: 1;
  transform: translateY(0px);
}


@media print, screen and (max-width: 750px) {
  /* .z-select {
  margin-top: 2.9rem;
} */
 .z-selectList__txtFrame {
  width: auto;
}
.z-selectList__title{ text-align: center;}

  .z-selectList__contents {
    /* position: sticky;
    top: 0; */
    top: 0;
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
  .z-selectList__bg {
    position: unset;
    height: auto;
    transform-origin: center center;
    position: relative;
    z-index: 1;
  }
  /* .z-selectList__item02 .z-selectList__bg {
    transform-origin: center center;
  } */
  .z-selectList__item02 .z-selectList__bgImg,
  .z-selectList__item03 .z-selectList__bgImg {
    object-position: center center;
  }
  .z-selectList__item03 .z-selectList__contents {
    position: unset;
    padding-top: 0;
  }
  .z-selectList__item {
  min-height: unset;
  height: fit-content;
  }
  .z-selectList__title {
    font-size: 1.8rem;
    font-size: clamp(2rem, calc(18 / 375 * 100vw), 2.5rem);
    margin-top: 2rem;
  }
  .z-selectList__txtFrame.z-spShow .z-selectList__title{ padding-bottom: 2em;}
  .z-selectList__txt{ padding-top: .6em;}

.z-selectList__img  {
  /*min-height: 20rem;*/
  margin-top: -8vw;
}
 .z-selectList__img img {
  /*min-height: 20rem;*/
  object-fit: cover;
}

.z-selectList__item03 .z-selectList__img{max-height: 80vw; width: auto;}
.z-selectList__item03 .z-selectList__img img {
  object-fit: contain;
}

.z-selectList__img--kage01,
.z-selectList__img--kage02 {
  background-size: cover;
} 
.z-selectList__img--kage02  { display: none;}
[class*="z-selectList__item"] .z-selectList__bg{
  transform: scale(1.0) ;
  aspect-ratio: 1/1.3;
}
[class*="z-selectList__item"] .z-selectList__img{ z-index: 0;}
[class*="z-selectList__item"] .z-selectList__img img,
[class*="z-selectList__item"] .z-selectList__img [class*="z-selectList__img--kage"],
[class*="z-selectList__item"] .z-selectList__txtFrame{
  opacity: 1;
 }
[class*="z-selectList__item"] .z-selectList__txtFrame {
  transform: translateY(0px);
 }

}




/*  SELECT RESNO MAGNE
==========================================================*/
@media print, screen and (min-width: 751px) {
.z-selectList__item--resno { display: flex;align-items: center;}
}
.z-selectList__item--resno .z-selectList__bg {
  transform-origin: right top;
}
.z-selectList__item--resno .z-selectList__bgImg {
  object-position: 75% 20%;
}
.z-selectList__item--resno .z-selectList__img {
  aspect-ratio: 490/450;
  width:max(49rem, calc(490/550 *100%));
  max-width: 100%;
  max-height: calc(50vh - 12rem);
}
.z-selectList__item--resno .z-selectList__img img {
  object-position: left bottom;
}
.z-selectList__item--resno .z-selectList__txtFrame {
  width: 100%;
  max-width: 100%;
}
/*
.z-selectList__contents--resno {
  mix-blend-mode: darken;
  webkit-mix-blend-mode: darken;
  width: calc(550 / 1728 * 100%);
  margin-left: calc(150/1728 * 100%);
  right: auto;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
*/
.z-selectList__contents--resno {
  mix-blend-mode: darken;
  webkit-mix-blend-mode: darken;
  right: auto;
  margin-left: calc(150/1728 * 100%);
}
@media print, screen and (max-width: 750px) {
  .z-selectList__item--resno .z-selectList__txtFrame {
    margin-right: auto;
    max-width: 85%;
  }
  .z-selectList__contents--resno {
    width: 100%;
    transform: unset;
    position: unset;
    margin-inline: auto;
  }
  .z-selectList__item--resno .z-selectList__img {
    max-height: 75vw;
  }
  .z-selectList__item--resno .z-selectList__img img {
    object-position: center bottom;
    object-fit: contain;
  }
  
}



/*  SUPPORT
==========================================================*/

.z-support  { }
.z-support img{ max-width: 100%; height: auto;}
.z-support-col{ display: flex;}
.z-support__txts{ width: 65.3%; box-sizing: border-box; padding-block: 22rem 0rem;}
.z-support__txtFrame{ width: 80%; max-width: 1000px; margin-inline: auto;  display: flex; flex-direction: column; align-items: center;   }
  .z-support__mainCopy{ margin-bottom: 9rem;}
  .z-support__subCopy{font-size: calc(38em/16); line-height: 2.2; font-weight: bold; letter-spacing: .1em;}

.z-support__imgs{}
.z-support__imgFrame{ width: 34.7%; display: flex; flex-direction: column;}
  .z-support__imgFrame--01{ width: 67.9%;}
  .z-support__imgFrame--02{ margin-left: 45.4%; width: 44.9%;  margin-top: -11%;}
  .z-support__imgFrame--03{ width: 53.7%;  margin-top: -12%;}

.z-ball--support{  
   width: calc(380/1000 *100%);
  height: auto;
  aspect-ratio: 380/312;
}
.z-ball--support img{ 
  transform: translate(-100%, -25%);
}
@media print, screen and (max-width: 1280px) {
  .z-ball--support img{ 
  transform: translate(-100%, 10%);
}
}
@media print, screen and (max-width: 991px) {
  .z-support-col{   
   flex-direction: column-reverse;
  }
  .z-support__txtFrame {
  width: 100%;
  max-width: 85%;
  }
  .z-support__txts {
    width: 100%;
    padding-block: 10rem;
  }

}
@media print, screen and (max-width: 750px) {
  .z-ball--support img{ 
    transform: translate(-100%, 20%);
  }
  .z-support__imgFrame--01{ }
  .z-support__imgFrame--02{ margin-left: 55.1%; margin-top: -30%;}
  .z-support__imgFrame--03{margin-left: 4.7%; width: 58%;  margin-top: -24%;}

  .z-support__mainCopy{ margin-bottom: 5rem;}
   .z-support__subCopy{font-size: calc(28em/16); }
}