@charset "UTF-8";

#contents {
  display: block!important;
}

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

.z-yutaWatanabe {
  /* font-size: clamp(1.4rem, calc(15 / 1200 * 100vw), 1.5rem); */
  font-size: 1.4rem;
  line-height: 1.8;
  letter-spacing: 0.12em;
  font-feature-settings: "palt";
  color: #1e1e1e;
  margin-bottom: 10rem;
  background-color: #fefdfd;
}
.z-inner--970 {
  width: 97rem;
  max-width: 85%;
  margin: 0 auto;
}
@media print, screen and (max-width: 750px) {
  .z-yutaWatanabe {
    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-left"]{position:relative;overflow:hidden}


[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-left"]:before{z-index:3;background:#FFF}
[data-aos="slidein-left"]:after{z-index:2;background-color:#cf121b}
[data-aos="slidein-left"].aos-animate:after{animation-name:slidein-leftplay;animation-duration:1.4s;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:1s;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: #1e1e1e;}


@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){ 
  /* transform: translateY(-120px); */
  margin-top: -120px;
}
.h_wrap{ 
  /* transform: translateY(-120px); */
  margin-top: -120px !important;
}
/* html:has(.z-yutaWatanabe) .h_wrap.h_fixed{
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
html:has(.z-yutaWatanabe) .h_wrap .h_pc, html:has(.z-yutaWatanabe) .h_slidedown_menu{
  background-color: unset;
  transition: 0.2s;
}
html:has(.z-yutaWatanabe) .h_wrap.viewed .h_pc, html:has(.z-yutaWatanabe) .viewed .h_slidedown_menu{
  background-color: #fefdfd;
} */

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




/* modal */
.z-fv__modalMovie iframe,
.z-allMovieList__modalMovie iframe{
  width: 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;
 }
 .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/yuta_watanabe/icon_close.svg) no-repeat center center/contain;
  width: 40px;  /* 画像の幅を設定 */
  height: 40px; /* 画像の高さを設定 */
  border: none; /* ボタンのデフォルトの枠線を消去 */
  text-indent: -9999px; /* テキストを画面外に隠す */
  overflow: hidden; /* テキストのはみ出しを防ぐ */
  cursor: pointer; /* マウスポインターを変更 */
  z-index: 100;
}
@media print, screen and (max-width:750px) {
   .modaal-container:has(.z-modalContents--movie){
    max-width: 90vw ;
   }
}

/*  COMMON
==========================================================*/
.z-fv__logo {
  position: absolute;
  top: 2.2rem;
  left: 2.2rem;
  z-index: 3;
}
.z-fv__logoImg {
  width: 150px;
  height: auto;
  aspect-ratio: 116/32;
}
@media print, screen and (max-width:750px) {
  .z-fv__logo {
  top: 1rem;
  left: 1rem;
  }
  .z-fv__logoImg {
    width: 116px;
  }
}

.z-headingL {
  font-family: "abolition", sans-serif;
  font-weight: 400;
  font-size: 23.5rem;
  line-height: 1;
  font-size: clamp(8rem, calc(235 / 1728 * 100vw), 23.5rem);
  letter-spacing: 0;
  color: #cf121b;
  text-align: center;
  margin-bottom: calc(-43em/235);
  position: relative;
  z-index: 2;
}
.z-headingL span.zvatop {
  font-size: 0.85em;
  vertical-align: top;
}
.z-title2 {
  font-size: 4.4rem;
  font-size: clamp(2.4rem, calc(44 / 1200 * 100vw), 4.4rem);
  line-height: 1.2;
  letter-spacing: 0.16em;
  font-weight: bold;
}
.z-enTitle {
  font-family: "abolition", sans-serif;
  display: block;
  text-align: center;
  width: calc(247em/25);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: calc(34/25);
  font-size: 2.5rem;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(-90deg);
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  transform-origin: 50% 0;
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  color: #fff;
  mix-blend-mode: difference;
  z-index: 2;
}
.z-heading2 {
  text-align: center;
}
.z-heading2__en {
  font-family: "abolition", sans-serif;
  font-weight: 400;
  font-size: clamp(4rem, calc(70 / 1300 * 100vw), 7rem);
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.z-heading2__ja {
  font-family: "abolition", sans-serif;
  font-weight: 400;
  font-size: clamp(1.4rem, calc(16 / 1300 * 100vw), 1.6rem);
  letter-spacing: 0.12em;
  line-height: calc(34em/16);
  font-weight: bold;
}

.z-txt {
  font-weight: bold;
  color: #5a5a5a;
  text-align: justify;
}
.z-bgBlack {
  background-color: #1e1e1e;
  color: #fff;
}
.z-bgBlack .z-txt {
  color: #fff;
}
.z-btn {
  width: fit-content;
  max-width: 100%;
  margin-top: 3rem;
}
.z-btn__link {
  position: relative;
  width: 35rem;
  max-width: 100%;
  border-radius: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7rem;  
  font-family: "abolition", sans-serif;
  font-weight: 400;
  text-align: center;
  font-size: 2.4rem;
  background-color: #1e1e1e;
  color: #fff;
  overflow: hidden;
  z-index: 1;
}
.z-btn__link::after {
  content: "";
  display: block;
  width: calc(8em/24);
  aspect-ratio: 8/19;
  height: auto;
  background: url(../../../img/special/yuta_watanabe/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--white {
  background-color: #fff;
  color: #1e1e1e;
}
@media print, screen and (max-height: 750px) {
  .z-btn__link {
    height: 6rem;  
  }
}

/* hoverアニメーション */
.z-expand::before {
  background-color: #cf121b;
  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/yuta_watanabe/icon-arrow_white.svg) no-repeat center center / contain;
}
.z-btn__link--white::after {
    background: url(../../../img/special/yuta_watanabe/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: 1400px) {
  .z-enTitle {
    left: -9rem;
  }
}
@media print, screen and (max-width: 991px) {
  .z-tabHide {
    display: none;
  }
  .z-tabShow {
   display: block !important;
  }
  .z-btn {
    margin: 3rem auto 0;
  }
   .z-enTitle {
   font-size: 2rem;
  }
}
@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;
  }
  .z-enTitle {
    width: 100%;
    position: relative;
    left: 0;
    margin: 0 auto 2rem;
    transform: unset;
    -webkit-transform: unset;
    -ms-transform: unset;

}
}


/*  GO WITH COLANTOTTE
==========================================================*/
.z-movieBtn {
  width: fit-content;
  max-width: 100%;
  position: absolute;
  right: 5rem;
  bottom: 5rem;
  z-index: 3;
}
.z-movieBtn__link {
  position: relative;
  width: calc(250em/18);
  max-width: 100%;
  border-radius: 2.5rem;
  padding: 0 calc(8em/18) 0 calc(25em/18);
  display: flex;
  gap: calc(14em/18);
  align-items: center;
  height: calc(50em/18);  
  font-family: "abolition", sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  color: #1e1e1e;
  background-color: #fff;
  overflow: hidden;
  z-index: 1;
}
.z-movieBtn__link::after {
  content: "";
  display: block;
  width: calc(35em/18);
  aspect-ratio: 1/1;
  background: url(../../../img/special/yuta_watanabe/icon-play-movie.svg) no-repeat center center / contain;
  background-color: #1e1e1e;
  border-radius: 50%;
  position: absolute;
  right: calc(8em/18);
  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(11em/18);
  font-weight: bold
}
.z-fv {
  height: 100vh;
  height: 100svh;
  width: 100%;
  margin-top: -100vh;
}
.z-fv__video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background-color: #000;
}

.z-kv {
  position: relative;
  z-index: 1;
  height: 100vh;
  min-height: 100vh;
}
.z-kv__block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
}
.z-kv__block02 {
 /* opacity: 0;
  z-index: 2; */
  z-index: 1;
}
.z-kv__block01 {
  /*z-index: 1;*/
  z-index: 2;
}


.z-kv__img {
  height: 100vh;
  width: 100%;
  object-position:  center 15% ;
}
.z-kv__txt {
  position: absolute;
  font-family: "abolition", sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: calc(25em/17);
  font-size: 1.7rem;
}
.z-kv__txt--01 {
  top: calc(525/1300 *100vh);
  /*right: calc(210/1728 *100vw);*/
  left: calc(1430/1728 *100vw);
}
.z-kv__txt--02 {
  bottom: calc(170/1300 *100vh);
  left: calc(150/1728 *100vw);
}

.z-goWith__mainCopy {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 2;
}
.z-goWith__mainCopy span{ }
.z-goWith__mainCopyImg {
  max-height: 62vh;
}


.z-sc_effect {
  overflow: hidden;
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.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 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));
}

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



/*  Loading
==========================================================*/
#zloading-screen{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100svh; 
  z-index: 1000; background-color: #000; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center;}
#zloading-screen p{
    width: 80px;
    animation:zloadingblink 1s linear infinite;
}
#zloading-screen svg path { fill: #fff;}
@keyframes zloadingblink{
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}



@media print, screen and (max-width:1100px) and (min-width:750px) {
 .z-goWith {
  margin-top: 3.9rem;
}
}

@media print, screen and (max-width: 991px) {
  .z-kv__img--02 {
    object-position: 20% center;
  }
}

@media print, screen and (max-width: 750px) {
  .z-kv__img--01 {
    object-position: 60% center;
  }
  .z-kv__img--02 {
    object-position: 30% center;
  }
  .z-movieBtn {
    width: 100%;
    right: auto;
    bottom: 3rem;
  }
  .z-reason__movie .z-movieBtn { bottom: -80px;}
  .z-reason__movie .z-expand{color: #fff;opacity: 1 !important;}
  .z-reason__movie .z-expand::before {
  opacity: 1;transform: translateY(-50%) scale(1.1);}


  .z-movieBtn__link {
  font-size: 1.7rem;
  margin-inline: auto;
  }
  .z-kv__txt {
  font-size: 1.4rem;
  }
  .z-kv__txt--01 {
    top: calc(290 / 667 * 100vh);
    /*right: 5%;*/
    left: 68%;
    margin-right: -8%;
  }
  .z-goWith__mainCopyImg {
    max-width: 55%;
  }
}
/* YUTA’S REASON
==========================================================*/

.z-reason {
  margin-top: 9.4rem;
}
.z-reason__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
  background-color: #000;
}


.z-reason__contents {
  padding: 15rem 0; background-color: #fff;
}
.z-reason__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.z-reason__txt {
  width: calc(390em/14);
}
.z-reasonList {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 4rem calc(40/970 * 100%) ;
  margin-top: 9rem;
}
.z-reasonList__img {
  width: 100%;
  height: auto;
}
.z-reasonList__title{
  font-weight: bold;
  font-size: 2rem;
  font-size: clamp(1.8rem, calc(20 / 1200 * 100vw), 2rem);
  line-height: calc(24 / 20);
  letter-spacing: 0.2em;
  margin-top: 1em;
}
.z-reasonList__txt {
  font-size: 1.3rem;
  /* font-size: clamp(1.2rem, calc(13 / 1200 * 100vw), 1.3rem); */
  line-height: calc(20 / 13);
  letter-spacing: 0.08em;
  margin-top: calc(9em/13);    
}

/*.z-reason__contents::after,
.z-support::before,*/
.z-ball {
  position: absolute;
  bottom: -11rem;
  width: clamp(12rem, calc(350 / 1728 * 100vw), 46rem);
  /* height: 44rem; */
  aspect-ratio: 350/440;
  z-index: 2;
  right:0;
}
.z-ball span{ position: relative; display: block; width: 100%; aspect-ratio: 350/440;}
/*.z-reason__contents::after, 
.z-support::before*/
.z-ball span::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../../../img/special/yuta_watanabe/ball_kage.jpg) no-repeat left top / contain;
  mix-blend-mode: multiply;
  z-index: 1;
}
.z-ball.z-ball--reason span::after{ display: none;}
.z-ball__img {
  width: 100%;
  /*height: 100%;*/
  object-position: left;
  object-fit: cover;
  position:absolute;
  z-index: 2;
}
.z-ball--reason {
  right: 0;
}
.z-ball--support{left: 0; }
/*
.z-support::before{
  left: 0;
}
.z-support::before {
  background-position: right center;
}
  */
.z-ball__img--support {
   object-position: right;
}

@media print, screen and (max-width: 750px) {
  .z-reason__contents {
    padding: calc(7.5rem + 80px) 0 11rem;
  }
  .z-reason__head{
    flex-direction: column;
  }
  .z-title2--reason{
    text-align: center;
  }
  .z-reasonList {
    grid-template-columns: 1fr;
    margin-top: 4.5rem;
  }
  .z-reason__txt {
    width: 100%;
  }
  /*.z-reason__contents::after,.z-support::before , */
  .z-ball span,
  .z-ball { 
     aspect-ratio: 330/440;
  }
  .z-reason__movie{ aspect-ratio: 16/11;}
}

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

/* MANAGED */
.z-managed {
  padding: 11.6rem 0;
}
.z-managed__img {
  width: calc(354 / 970 * 100%);
  max-width: 100%;
}
.z-managed__img img {
  height: auto;
  width: 100%;
  aspect-ratio: 354/270;
}

@media print, screen and (max-width: 991px) {
  .z-managed__txtFrame {
    width: calc(100% - calc( 433/ 970 * 100%));
  }
}
@media print, screen and (max-width: 750px) {
  .z-aboutUs__contents {
    flex-direction: column;
    align-items: center;
  }
  .z-managed__txtFrame {
  width: 100%;
  }
 .z-managed__img {
    width: 35.3rem;
    max-width: 80%;
  }
  .z-managed__img img {
    width: 100%;
    height: auto;
  }
  .z-managed {
    padding: 6.6rem 0;
  }
}

/* NS FORCE */
.z-nsforce {
  padding: 12.5rem 0;
}
.z-nsforce__video {
  width: calc(450/970 * 100%);
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.z-nsforce__logo {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 100%;
  width: calc(110 / 474 * 100%);
}
.z-nsforce__txtFrame .z-title2{ margin-right: -0.5em;}

.z-aboutUs__desc {
  display: flex;
  gap: calc(30/474 * 100%);
  align-items: center;
}

@media print, screen and (max-width: 991px) {
  .z-nsforce__video {
     width: calc(450/970 * 100%);
  }
}
@media print, screen and (max-width: 750px) {
  .z-nsforce {
    padding: 6rem 0;
  }
  .z-nsforce__video {
    width: 100%;
  }
  .z-nsforce .z-aboutUs__contents {
    flex-direction: column-reverse;
  }
  .z-nsforce__logo {
    max-width: 50%;
  }
  .z-aboutUs__desc {
        flex-direction: column;
    gap: 10px;
  }
}

/* YUTA’S SELECT
==========================================================*/
.z-select {
  margin-top: 5.8rem;
}
.z-selectList__item {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}
.z-selectList__bg{
  width: 100%;
  height: auto;
  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: center 40%;
}
.z-selectList__item02 .z-selectList__bgImg {
  object-position: center 20%;
}

.z-selectList__contents {
  position: relative;
  position: absolute;
  right: 0;
  width: calc(1020/1728 * 100%);
  /*
  margin: -100vh 0 0 auto;
  */
  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--02 {}
.z-selectList__img img {
position:absolute;
top:0 ;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
}
.z-selectList__img--kage01 {
  position: relative;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  max-height: 42vh;
  aspect-ratio: 1020/520;
  background: url(../../../img/special/yuta_watanabe/product01_kage.webp) 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/yuta_watanabe/product02_kage.webp) 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;
  letter-spacing: 0.08em;
}

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


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

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




/* 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__contents {
    /* position: sticky;
    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__contents {
    position: relative;
  }
  .z-selectList__item {
  min-height: unset;
  }
  .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__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);
 }

}




/*  OTHER PRODUCTS
==========================================================*/
.z-other {
  padding: 12rem 0 38rem;
}

.z-btn--other {
  margin: 3rem auto 0;
}
@media print, screen and (max-width: 750px) {
 .z-other {
  padding: 6rem 0 15rem;
}
}

/*  SUPPORT
==========================================================*/
.z-support {background-color: #fff;}
.z-support__mainCopy {
  width: fit-content;
  margin: -20rem auto 0;
}
.z-support__img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  /*
  max-height: 120rem;
  aspect-ratio: 1720 / 1200;
  min-height: 46rem;
  */
}
.z-support__imgsection { overflow: hidden; height: 100vh; }
.z-support__imgsection .zelm1{position: absolute; z-index: 3; display: block;  width: 100%;  height: 100%;}
.z-support__imgsection .zelm2{ position: absolute; display: block; background-color: #cf121b; width: 100%;  height: 50%;  top: 50%; z-index: 2; left: 0;}
.z-support__imgsection .zelm3{position: relative; z-index: 1; display: block;}

.z-support__mainCopy{ position: relative;z-index: 4;}
.z-support__subCopy {
  font-weight: bold;
  font-size: 2.9rem;
  letter-spacing: 0.2em;
  margin: 4.6rem 0 0 calc(50% - 12.5rem );
}
.z-support__subCopy__accent {
  color: #cf121b;
  display: inline-block;
  transform : skewX(-10deg);  
}

@media print, screen and (max-width: 750px) {
  .z-support {
    padding-bottom: 18rem;
  }
  .z-support__mainCopy {
  width: min(calc(160/375 * 100vw),25rem);
  margin: max(calc(-130/375 * 100vw),-20rem) auto 0;
  }
  .z-support__subCopy {
      font-size: min(calc(22/375 * 100vw),2.9rem);
      width: fit-content;
     margin: 4.6rem 0 0 auto;
  }
    .z-ball--support,
    .z-support::before {
    bottom: -6rem;
  }
}

/*  symbol
==========================================================*/
.z-symbol-mark{ width: 15%; max-width: 200px ; position: fixed; right: 10%; bottom:-200px; z-index: 3; opacity: 0; transition: all .4s ease; }
.z-symbol-mark svg { transition: all 1s ease; }
.z-symbol-mark svg path { transition: all .6s ease; }

.z-symbol-mark.zstep01 { right: 10%; bottom:-25px; opacity: 1; transition: all 1s ease;  }
.z-symbol-mark.zstep02 { right: 10%; bottom:-25px; opacity: 1; }
.z-symbol-mark.zstep02 svg path { fill: #fff;}
.z-symbol-mark.zstep03 { right: calc(95% - 30px);  bottom:6%; opacity: 1; max-width: 60px ; transition: all 1s ease;  }
.z-symbol-mark.zstep03 svg path { fill: #cf121b;}
.z-symbol-mark.zstep03 svg { transform: rotate(360deg);}
.z-symbol-mark.zstep04 { right: calc(5% + 45px); bottom:0; opacity: 1; max-width: 100px ; transition: all 1s ease; mix-blend-mode: difference;  }
.z-symbol-mark.zstep04 svg { transform: rotate(0deg);}
.z-symbol-mark.zstep04 svg path { fill: #fff;}
.z-symbol-mark.zstep05 { bottom:-200px;opacity: 1; max-width: 100px ; }

@media print, screen and (max-width: 750px) {
  .z-symbol-mark.zstep01 { right: calc(10% + 35px); bottom:-12px; }
  .z-symbol-mark.zstep02 { right: calc(10% + 35px); bottom:-12px;}
  .z-symbol-mark.zstep03 { right: calc(100% - 6.5%); bottom:3%; width: 7.5%; }
  .z-symbol-mark.zstep04 { right: calc(10% + 35px); bottom:0; width: 10%; }
  .z-symbol-mark.zstep05 { right: calc(10% + 35px); bottom:-200px; width: 10%; }

  
 }