/* stylelint-disable no-descending-specificity
html {
  height: initial;
}

@media screen and (min-width:768px) and (max-width:2100px){
  html {
    font-size: calc(10* (100vw / 2100)) !important;
  }
} */

header{
  display: none;
}

#Contents,
.main-area{
  padding-top: 0;
}

footer{
  display: none;
  pointer-events: none;
}

#Wrap{
  padding-top: 0;
}

#issue213 {
  --color-white: #fff;
  --color-black: #000;
  --color-bg-gray: #EFEFEF;
  --color-green: #AEC6BE;
  --font-times: "Times-New-Roman", serif;
  --font-commons: "TT-Commons-Medium", sans-serif;
  --font-pragmatica: "pragmatica", sans-serif;
  --font-cezanne: "fot-cezanne-pron", sans-serif;
  --pc-width: 1280; /*PCデザイン幅*/
  --sp-width: 375; /*SPデザイン幅*/
  --pc-artboard-width: 375; /*SP共通デザイン幅*/
  --sp-artboard-width: 375; /*PC共通デザイン幅*/
  --formula: calc(var(--variable) * var(--ratio)); /*SP→PC 可変設定*/
  --formula_pc: calc(var(--variable) * 1); /*PC 1400以上は固定*/

  font-family: var(--font-cezanne);
  font-weight: 500;
  font-style: normal;
  color: var(--color-black);
  background-color: var(--color-white);
  /* overflow-x: clip; */
}

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1401px) {
  #issue213 {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --variable: 1px; /* 固定値（可変しない） */
  }
}

/* PC画面幅 768～1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  #issue213 {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}

/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  #issue213 {
    --ratio: 1; /* 比率は1（変わらない） */
    --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}

@font-face {
  font-family: "Times-New-Roman";
  src: url("../font/Times-New-Roman.woff") format("woff");
}

@font-face {
  font-family: "TT-Commons-Medium";
  src: url("../font/TT-Commons-Medium.woff") format("woff");
}


.landingPage * {
  box-sizing: border-box;
  font-feature-settings: 'palt';
}

.landingPage img,
.landingPage picture {
  display: block;
}

.landingPage a {
  display: inline-block;
}

.landingPage img,
.landingPage svg {
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}


/* 
.landingPage .product {
  position: relative;
  background-color: var(--color-white);
} */

/* =======  background for PC ======= */

@media (min-width: 768px) {
  #issue213{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../img/bg-pc.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
  }

  .landingPage{
    /* position: fixed; */
    height: calc(650 * var(--formula));
    /* height: 650px; */
    max-width: calc(375 * var(--formula));
    /* max-width: 375px; */
    background: #fff;
    z-index: 1 !important;

    /* top: calc((100vh - calc(650 * var(--formula))) / 2);
    left: calc((100vw - calc(375 * var(--formula))) / 2); */
    /* top: 50%;
    left: 50%; */
    /* transform: translate(-50%, -50%) translateZ(0); */
    /* will-change: transform, height, max-width;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; */

  }

  /* Chrome, Safari, Edge (WebKit系ブラウザ) のスクロールバーのつまみを非表示にする */
  &::-webkit-scrollbar-thumb {
    background-color: transparent; /* つまみの色を透明にする */
    /* または display: none; */
  }


  .landingPage__inner{
    width: 100%;
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* will-change: scroll-position; */

    &::-webkit-scrollbar {
      display: none!important;
      width: 0!important;
      height: 0!important;
      background-color: transparent;
     }

    &::-webkit-scrollbar-thumb {
      background-color: transparent; /* つまみの色を透明に */
      border-radius: 0;              /* つまみの角丸も消す (念のため) */
    }
    scrollbar-width: none;
    -ms-overflow-style: none;
    scrollbar-color: transparent transparent;
  }

  .hidden-mobile{
    display: block;
  }
  
  .hidden-desktop{
    display: none;
  }

}


@media screen and (max-width: 767px) {
  html {
    scroll-padding-top: 60px;
  }

  #dialogue-sec,
  #product-sec {
    scroll-margin-top: 60px;
  }

  .hidden-mobile{
    display: none;
  }

  .hidden-desktop{
    display: block;
  }

}

/* ======= text ======= */

.fv-txt,
.subject,
.dialogue,
.p-txt,
.profile-txt{
  font-size: calc(12 * var(--formula));
  width: calc(308 * var(--formula));
  line-height: 1.9166666667;
  font-weight: 500;
  text-align: left;
}

.subttl01,
.subttl02,
.txt-on-img,
.additional-txt,
.c-ttl,
.p-ttl{
  font-family: var(--font-commons);
  color: var(--color-white);
  letter-spacing: 0.01em;
  text-align: center;
  /* line-height: 0.06551724138; */
}

.additional-txt{
  font-size: calc(10 * var(--formula));
  color: #939393;
}

.txt-on-img{
  font-size: calc(20 * var(--formula));
}

.c-ttl{
  font-size: calc(20 * var(--formula));
  color: var(--color-black);
}

.p-ttl{
  font-size: calc(20 * var(--formula));
  color: var(--color-black);
}

/* =======================================
    mv-sec
======================================= */
.mv-sec{
  position: relative;
  z-index: 1;
}

/* .mv__cont{
  position: relative;
  width: 100%;
} */

/* .logo_img{
  position: absolute;
  top: calc(297.4 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  width: calc(238.74 * var(--formula));
} */

.ttl__cont{
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  bottom: calc(119 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  height: calc(175 * var(--formula));
  width: calc(280 * var(--formula));
  text-align: center;
}

.subttl01{
  font-size: calc(20 * var(--formula));
}

.subttl02{
  font-size: calc(13 * var(--formula));
  /* line-height: 0.06551724138; */
}

.arrow_img{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(49.5 * var(--formula));
  width: calc(8 * var(--formula));
  height: calc(29 * var(--formula));

  -webkit-animation-name: a;
  animation-name: a;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-duration: .6s;
  animation-duration: .6s;
  -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  /* animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); */
}

@keyframes a {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}

/* =======================================
    fv-sec
======================================= */
/* .fv-sec{
  height: calc(1593 * var(--formula));
} */

.fv-txt{
  text-align: left;
  letter-spacing: 0.095em;
  margin: calc(78 * var(--formula)) auto calc(78 * var(--formula));
}

.fv-img01__cont{
  position: relative;
  z-index: 1;
  margin-bottom: calc(94 * var(--formula));
}

.fv-img01__cont .txt-on-img{
  align-items: center;
  position: absolute;
  z-index: 10;
  bottom: calc(221 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  /* filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.5)); */
}

.fv-img02__cont{
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(308 * var(--formula));
  height: calc(460 * var(--formula));
  background-image: url(../img/fv-img02_bg.jpg);
  margin:0 auto calc(35 * var(--formula));
}

.fv-img02{
  width: calc(222 * var(--formula));
}

.ci-btn{
  width: calc(308 * var(--formula));
  margin: 0 auto calc(100 * var(--formula));
}

.btn a{
  pointer-events: all;
  width: 100%;
}

.fv-sec .ci-btn{
  position: relative;
}

.fv-sec .arrow_img{
  left: calc(224.5 * var(--formula));
  top: 40%;
}

/* =======================================
    dialogue-sec
======================================= */

.dialogue-sec{
  position: sticky;
  height: calc(9713 * var(--formula));
  top: calc(-9100 * var(--formula));
  z-index: 1;
}

.d-img01{
  position: relative;
  z-index: 1;
}

.d-img01 .txt-on-img{
  position: absolute;
  top: calc(240 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.d-img01_2 .txt-on-img {
  width: 100%;
}

.d-txt__wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: calc(63 * var(--formula)) auto;
}

.subject{
  letter-spacing: 0.1em;
  margin-bottom: calc(28 * var(--formula));
  -webkit-font-smoothing: auto;
}

.subject span{
  position: relative;
  padding-left: calc(30 * var(--formula));
}

.subject span::after{
  content: "";
  position: absolute;
  height: 1px;
  width: calc(20 * var(--formula));
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  background-color: #707070;
  display: block;
  width: calc(20 * var(--formula));
}

.dialogue{
  letter-spacing: 0.08em;
  text-align: justify;
}

.dialogue span{
  letter-spacing: 0.02em;
}

.d-img__wrapper{
  display: flex;
  flex-direction: column;
  row-gap: calc(44 * var(--formula));
  width: calc(345 * var(--formula));
  margin: 0 auto;
}

.c-widget__parallax{
  width: 100%;
}



/* .c-parallax__img{
  object-fit: cover;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
} */

/* .c-parallax img{
  object-fit: cover;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
} */

.c-parallax__img-wrap{
  height: calc(420 * var(--formula));
  clip-path: inset(0);
}

.c-parallax img{
  object-fit: cover;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-width: 768px) {
  .c-parallax img{
    object-fit: contain;
  }
}

/* 
@media (min-width: 768px) {
  .c-parallax img{
    display: none;
  }

  .c-parallax__img-wrap{
    background-attachment:fixed;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center top;
    min-height: calc(420 * var(--formula));
  }

  .d-img05.c-parallax__img-wrap{
    background-image: url(../img/d-img05.jpg);
  }

  .d-img10.c-parallax__img-wrap{
    background-image: url(../img/d-img10.jpg);
  }

  .d-img15.c-parallax__img-wrap{
    background-image: url(../img/d-img15.jpg);
  }

} */
/* ------------------- .--01 */
.d-img__wrapper.--01{
  margin-bottom: calc(70 * var(--formula));
}

.img-txt__wrapper.--01 {
  width: calc(345 * var(--formula));
  margin: 0 auto;
}

.d-img11{
  margin-bottom: calc(15 * var(--formula));
}

/* ------------------- .--02 */
.d-txt__wrapper.--02 .dialogue{
  letter-spacing: 0.061em;
}

.c-widget__parallax.--02{
  margin-bottom: calc(80 * var(--formula));
}
/* ------------------- .--03 */
.c-widget__parallax.--03{
  margin-bottom: calc(67 * var(--formula));
}

/* ------------------- .--04 */
.d-img__wrapper.--04{
  margin: calc(46 * var(--formula)) auto calc(68 * var(--formula));
}

/* ------------------- .--05 */
.d-txt__wrapper.--05{
  margin: calc(60 * var(--formula)) auto calc(65 * var(--formula));
}

/* ------------------- .--06 */
.d-txt__wrapper.--06{
  margin-bottom: calc(90 * var(--formula));
}


/* =======================================
    product-sec
======================================= */

.product-sec{
  position: relative;
  z-index: 10;
  width: 100%;
  /* height: calc(12448 * var(--formula)); */
  background-color: var(--color-bg-gray);
}

.p-txt{
  width: calc(308 * var(--formula));
  margin: 0 auto;
}

.p-sec .p-txt__wrapper{
  width: calc(308 * var(--formula));
  margin: calc(46 * var(--formula)) auto 0;
  padding-bottom: calc(110 * var(--formula));
}

.product-sec .txt-on-img{
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-black);
  width: 100%;
}

/* ======================== .introduction-sec */
/* @media (max-width: 767px) {
  .introduction-sec{
    padding: calc(50 * var(--formula)) 0 calc(calc(885 * var(--formula)) - 100vh);
  }
} */

/* @media (min-width: 768px) {
  .introduction-sec{
    padding: calc(50 * var(--formula)) 0 calc(885 * var(--formula));
  }
} */

.intro-ttl__wrapper{
  padding-top: calc(79 * var(--formula));
  margin-bottom: calc(46 * var(--formula));
}

.introduction-sec .scroll-img__container {
  width: calc(308 * var(--formula));
  height: calc(300 * var(--formula));
  margin: 0 auto;
}

.introduction-sec .p-txt{
  letter-spacing: 0.09em;
  text-align: justify;
  padding-top: calc(40 * var(--formula));
  margin-bottom: calc(72 * var(--formula));
}


/* ======================== .p-sec */
.p-sec .p-txt{
  letter-spacing: 0.045em;
  text-align: left;
}

.p-sec .image-index{
  bottom: calc(20 * var(--formula));
  right: calc(23 * var(--formula));
}

.p-sec h4{
  font-family: var(--font-times);
  font-size: calc(17 * var(--formula));
  letter-spacing: 0.01em;
  font-style: italic;
  line-height: 1.2352941176;
}

.p-sec .scroll-img__container{
  height: calc(600 * var(--formula))!important;
}

.p-sec .buy-btn{
  margin: calc(35 * var(--formula)) auto calc(28 * var(--formula));
}

.p-sec .p-credit{
  font-family: var(--font-commons);
  font-size: calc(11 * var(--formula));
  color: var(--color-green);
  text-align: left;
  line-height: 1;
  letter-spacing: 0.01em;
}

.p-img__cont{
  position: relative;
  width: 100%;
  height: calc(600 * var(--formula));
  background-color: #fff;
}

.p-img__cont .p-img{
  width: calc(324 * var(--formula));
  margin: 0 auto;
  padding-top: calc(41 * var(--formula));
}

.p-sec .p-ttl.--02{
  border-top: 1.5px solid #8B8B8B;
  padding-top: calc(84.5 * var(--formula));
  margin: 0 auto calc(48 * var(--formula));
}

.p-sec .img-txt__wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  height: calc(600 * var(--formula));
  padding-top: calc(41 * var(--formula));
}

.p-img__wrapper{
  position: relative;
  width: calc(324 * var(--formula));
  height: calc(518 * var(--formula));
}

.p-sec .img-txt__wrapper .additional-txt {
  position: relative;
  padding-top: calc(9 * var(--formula));
  z-index: 10;
}

/* ------------------- .--01 */
.p-img04__cont .txt-on-img{
  top: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 0.01em;
}

/* ------------------- .--02 */
.p-img06 {
  position: absolute;
  top: calc(213 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
}

.p-img06__cont .p-img{
  padding-top: 0;
}

.p-img06__cont .txt-on-img{
 top: calc(142 * var(--formula));
}

.p-sec .p-txt__wrapper.--02 {
  margin: calc(47 * var(--formula)) auto 0;
}


/* ------------------- .--03 */
.p-txt__wrapper.--03 .p-txt{
  letter-spacing: 0.078em;
}

.p-img08__cont .txt-on-img{
  top: calc(270 * var(--formula));
}


/* ------------------- .--04 */
.p-img12__wrapper .txt-on-img{
  top: 50%;
  transform: translate(-50%, -50%);
}


.p-sec .p-img12__cont .slick-dots {
  display: none !important;
}

/* ------------------- .--05 */


.p-img14__wrapper .txt-on-img{
  top: 50%;
  transform: translate(-50%, -50%);
}

/* ------------------- .--06 */


.p-img13__cont .p-txt {
  letter-spacing: 0.05em;
}

.txt__wrapper.--06{
  width: 100%;
  height: calc(100 * var(--formula));
  background: #fff;
  padding-top: calc(27 * var(--formula));
}

/* ------------------- .--07 */

.p-img15__cont .p-txt {
  letter-spacing: 0.076em;
}

/* ------------------- .--08 */
.p-sec.p-img16__cont{
  position: sticky;
  height: calc(960 * var(--formula));
  top: calc(-308 * var(--formula));
  z-index: 10;
  background-color: var(--color-bg-gray);
}

@media (max-width: 767px) {

  .p-sec.--08{
    position: relative;
    z-index: 10;
    /* top: 0; */
    width: 100%;
    background-color: var(--color-bg-gray);
  }
}

@media (min-width: 768px) {
  .p-sec.--08{
    position: sticky;
    z-index: 10;
    top: 0;
    width: 100%;
    padding-top: calc(45 * var(--formula));
    margin: 0;
    background-color: var(--color-bg-gray);
    height: calc(350 * var(--formula));
  }

  .p-sec.--08 .p-txt__wrapper {
    margin-top: 0;
    padding-bottom: calc(85 * var(--formula));
  }
}

.p-img16__cont .p-txt {
  letter-spacing: 0.0663em;
}

.p-sec .p-img16__cont .p-txt__wrapper {
  padding-bottom: calc(84 * var(--formula));
}


/* =======================================
    profile-sec
======================================= */
.profile-sec{
  position: relative;
  z-index: 100;
  background-color: var(--color-green);
  width: 100%;
}

.profile-sec .sec__inner{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(308 * var(--formula));
  margin: 0 auto;
  padding: calc(106 * var(--formula)) 0 calc(55 * var(--formula));
}

.profile_pic{
  width: calc(220 * var(--formula));
}

.p-name{
  font-family: var(--font-commons);
  font-size: calc(14 * var(--formula));
  text-align: center;
  line-height: 1;
  letter-spacing: 0.013em;
  color: #fff;
  padding-top: calc(40 * var(--formula));
}

.profile-txt{
  font-family: var(--font-cezanne);
  font-size: calc(10 * var(--formula));
  color: #fff;
  line-height: 1.8;
  letter-spacing: 0.05987em;
  padding: calc(17 * var(--formula)) 0 calc(100 * var(--formula));
}

.btd-btn{
  width: 100%;
}

.logo-pic{
  width: calc(288.51 * var(--formula));
  margin: calc(58 * var(--formula)) auto calc(18 * var(--formula));
}

.subttl03{
  font-family: var(--font-commons);
  font-size: calc(16 * var(--formula));
  text-align: center;
}


.lp-footer{
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  background: #fff;
  width: 100%;
  height: calc(36 * var(--formula));
  padding-top: calc(10 * var(--formula));
}

.f-txt{
  font-family: var(--font-commons);
  font-size: calc(10 * var(--formula));
  text-align: center;
  line-height: 1;
}


/* =======================================
    animation
======================================= */

.delay05 {
  transition-delay: 0.5s;
}

/* ------------------- .js-show */
.js-show {
  -webkit-transition: opacity 0.5s ease, transform 0.5s ease;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ------------------- .js-show.blur */
.js-show.blur {
  opacity: 0;
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.js-show.blur.inview {
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: .4s;
}

@keyframes imageBlur {
  0% {
    opacity: 0;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    -o-filter: blur(5px);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}

/* ------------------- .js-show.showUp */
.js-show.showUp {
  opacity: 0;
  transform: translate(0px, 100px);

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: none;
}

.js-show.showUp.inview {
  opacity: 1;
  transform: translate(0px, 0px);
  pointer-events: auto;
}


/* ------------------- .js-show.slideUp */
.txt-hidden{
  overflow: hidden;
}

.js-show.slideUp{
  display: block;
  transform: translate(0%, 90%);
}

.js-show.slideUp.inview{
  transform: translate(0px, 0px);
}

/* ------------------- slick pagination */
.js-slide{
  will-change: opacity;
}

.img__cont.js-slide{
  position: relative;
}

.slick-dots li{
  margin: 0;
}

.slick-dots li button{
  font-size: calc(11 * var(--formula))!important;
  font-family: var(--font-commons);
  width: auto;
  height: auto;
  border-radius: inherit;
  border: none;
  font-size: initial;
  color: initial;
  background: initial!important;
  color: #939393;
}

.p-sec .slick-dots li button,
.product-sec .slick-dots li button{
  color: #939393;
}


.slick-dots li button:before{
  content: none;
}

.slick-dots li.slick-active button{
  color: var(--color-white);
}

.p-sec .slick-dots li.slick-active button,
.product-sec .slick-dots li.slick-active button{
  color: var(--color-black);
}

ul.slick-dots{
  display: flex !important;
  position: absolute;
  z-index: 1000;
  column-gap: calc(5 * var(--formula));
  right: calc(25 * var(--formula));
  bottom: calc(18 * var(--formula));
  margin: 0;
}

.introduction-sec ul.slick-dots{
  right: calc(15 * var(--formula));
  bottom: calc(16 * var(--formula));
}

.p-sec ul.slick-dots,
.product-sec ul.slick-dots{
  right: calc(26 * var(--formula));
  bottom: calc(18 * var(--formula));
}


@media (min-width: 768px) {
  .slick-dots li button {
    width: 8px;
    height: 8px;
  }


  ul.slick-dots{
    column-gap: calc(2 * var(--formula));
    right: calc(24 * var(--formula));
    bottom: calc(22 * var(--formula));
  }

  .p-sec ul.slick-dots{
    right: calc(24 * var(--formula));
    bottom: calc(21 * var(--formula));
  }
  
}


/* ------------------- gsap */
/* .scroll-img__section {
  position: relative;
  height: 100vh;
}

.scroll-img__container {
  position: relative;
}

.scroll-img__wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  opacity: 0;

}

.image.active {
  opacity: 1;

  pointer-events: auto;
  transform: translateZ(0);
}

.image-index{
  position: absolute;
  bottom: calc(16 * var(--formula));
  right: calc(13 * var(--formula));

  font-size: calc(11 * var(--formula));
  font-family: var(--font-commons);
  color: #000;
}

.index-num {
  margin: calc(1.5 * var(--formula));
  color: #939393;
  transition: transform 0.3s;
}

.index-num.active {
  color:var(--color-black);
}

.scroll-img__wrapper a{
  width: 100%;
  height: 100%;
} */