@charset "utf-8";

/* *****************************************************************************

  main visual style

***************************************************************************** */

.kv-block {
  --kv-img-delay-base: 0.2s;
  --kv-img-delay01: 2s;
  --kv-img-delay02: calc(var(--kv-img-delay01) + var(--kv-img-delay-base) * 1);
  --kv-img-delay03: calc(var(--kv-img-delay01) + var(--kv-img-delay-base) * 2);
  --kv-img-delay04: calc(var(--kv-img-delay01) + var(--kv-img-delay-base) * 3);
  --kv-img-delay05: calc(var(--kv-img-delay01) + var(--kv-img-delay-base) * 4);
  --kv-img-delay06: calc(var(--kv-img-delay01) + var(--kv-img-delay-base) * 5);
  --kv-img-delay07: calc(var(--kv-img-delay01) + var(--kv-img-delay-base) * 6);
  --kv-img-delay08: calc(var(--kv-img-delay01) + var(--kv-img-delay-base) * 7);
  --kv-img-delay09: calc(var(--kv-img-delay01) + var(--kv-img-delay-base) * 8);
  --kv-img-delay10: calc(var(--kv-img-delay01) + var(--kv-img-delay-base) * 9);
  --kv-img-delay11: calc(var(--kv-img-delay01) + var(--kv-img-delay-base) * 10);
  --kv-img-delay-color: calc(var(--kv-img-delay01) + var(--kv-img-delay-base) * 12);
  --kv-img-delay-text01: calc(var(--kv-img-delay01) + var(--kv-img-delay-base) * 12 + 2s);
  --kv-img-delay-text02: calc(var(--kv-img-delay01) + var(--kv-img-delay-base) * 12 + 2.75s);
  --kv-img-delay-text03: calc(var(--kv-img-delay01) + var(--kv-img-delay-base) * 12 + 3.5s);
  --kv-img-delay-scroll: calc(var(--kv-img-delay01) + var(--kv-img-delay-base) * 12 + 4.5s);

  .kv {
    aspect-ratio: 1440 / 870;
    margin: auto;
    max-width: 1440px;
    position: relative;

    @media print, screen and (max-width: 760px){
      aspect-ratio: auto;
    }
  }

  .kv-120th {
    z-index: 1;

    & > img {
      max-width: 83.33%;
    }
  }

  .kv-catch{
    display: flex;
    flex-direction: column;
    gap: 2.76%;
    transform: translateX(-0.56%) translateY(-4.83%);
    z-index: 2;

    @media print, screen and (max-width: 760px){
      gap: 3.47vw;
      position: relative;
      padding-top: calc(72vw + 4rem);
      transform: translate(0, 0);
    }

    & > img {
      opacity: 0;
      max-width: 36.18%;
      transition: opacity 1.5s ease;

      @media print, screen and (max-width: 760px){
        max-width: 80%;
      }

      &:nth-child(1) {
        transition-delay: var(--kv-img-delay-text01);
      }

      &:nth-child(2) {
        transition-delay: var(--kv-img-delay-text02);
      }

      &:nth-child(3) {
        transition-delay: var(--kv-img-delay-text03);
      }
    }
  }

  .kv-img {
    @media print, screen and (max-width: 760px){
      aspect-ratio: 750 / 540;
      height: auto;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }

    .-item {
      opacity: 0;
      position: absolute;
      transition: opacity 0.4s ease;

      img {
        filter: grayscale(1);
        transition: filter 2s ease;
        width: 100%;
        transition-delay: var(--kv-img-delay-color);
      }

      &.-item01 {
        height: 22.99%;
        inset: 0 auto auto 0;
        width: 10.14%;
        transition-delay: var(--kv-img-delay01);

        @media print, screen and (max-width: 760px){
          height: 23.33%;
          inset: 0 auto auto 0;
          width: 10.13%;
        }
      }

      &.-item02 {
        height: 11.72%;
        inset: 0 auto auto 10.42%;
        width: 19.1%;
        transition-delay: var(--kv-img-delay10);

        @media print, screen and (max-width: 760px){
          height: 12.22%;
          inset: 0 auto auto 10.4%;
          width: 19.07%;
        }
      }

      &.-item03 {
        height: 22.99%;
        inset: 0 auto auto 29.79%;
        width: 21.32%;
        transition-delay: var(--kv-img-delay06);

        @media print, screen and (max-width: 760px){
          height: 23.33%;
          inset: 0 auto auto 29.73%;
          width: 21.6%;
        }
      }

      &.-item04 {
        height: 22.99%;
        inset: 0 auto auto 51.39%;
        width: 25.56%;
        transition-delay: var(--kv-img-delay04);

        @media print, screen and (max-width: 760px){
          height: 23.33%;
          inset: 0 auto auto 51.6%;
          width: 25.33%;
        }
      }

      &.-item05 {
        height: 13.22%;
        inset: 0 auto auto 77.22%;
        width: 11.18%;
        transition-delay: var(--kv-img-delay07);

        @media print, screen and (max-width: 760px){
          height: 18.15%;
          inset: 0 auto auto 77.2%;
          width: 11.2%;
        }
      }

      &.-item06 {
        height: 13.22%;
        inset: 0 0 auto auto;
        width: 11.32%;
        transition-delay: var(--kv-img-delay03);

        @media print, screen and (max-width: 760px){
          height: 18.15%;
          inset: 0 0 auto auto;
          width: 11.3%;
        }
      }

      &.-item07 {
        height: 10.8%;
        inset: 12.18% auto auto 10.42%;
        width: 19.1%;
        transition-delay: var(--kv-img-delay02);

        @media print, screen and (max-width: 760px){
          height: 10.74%;
          inset: 12.59% auto auto 10.4%;
          width: 19.07%;
        }
      }

      &.-item08 {
        height: 27.01%;
        inset: 13.68% 0 auto auto;
        width: 22.78%;
        transition-delay: var(--kv-img-delay11);

        @media print, screen and (max-width: 760px){
          height: 27.59%;
          inset: 18.52% 0 auto auto;
          width: 22.8%;
        }
      }

      &.-item09 {
        height: 28.39%;
        inset: 23.45% auto auto 0;
        width: 10.14%;
        transition-delay: var(--kv-img-delay09);

        @media print, screen and (max-width: 760px){
          height: 29.63%;
          inset: 23.7% auto auto 0;
          width: 10.13%;
        }
      }

      &.-item10 {
        height: 28.39%;
        inset: 23.45% auto auto 10.42%;
        width: 8.61%;
        transition-delay: var(--kv-img-delay06);

        @media print, screen and (max-width: 760px){
          height: 29.63%;
          inset: 23.7% auto auto 10.4%;
          width: 8.8%;
        }
      }

      &.-item11 {
        height: 28.39%;
        inset: 23.45% auto auto 19.31%;
        width: 12.08%;
        transition-delay: var(--kv-img-delay11);

        @media print, screen and (max-width: 760px){
          height: 29.63%;
          inset: 23.7% auto auto 19.47%;
          width: 12.13%;
        }
      }

      &.-item12 {
        height: 28.39%;
        inset: 23.45% auto auto 31.67%;
        width: 22.99%;
        transition-delay: var(--kv-img-delay05);

        @media print, screen and (max-width: 760px){
          height: 29.63%;
          inset: 23.7% auto auto 31.87%;
          width: 19.47%;
        }
      }

      &.-item13 {
        height: 28.39%;
        inset: 23.45% auto auto 54.93%;
        width: 22.01%;
        transition-delay: var(--kv-img-delay07);

        @media print, screen and (max-width: 760px){
          height: 29.63%;
          inset: 23.7% auto auto 51.60%;
          width: 25.33%;
        }
      }

      &.-item14 {
        height: 18.28%;
        inset: 41.15% auto auto 77.22%;
        width: 9.1%;
        transition-delay: var(--kv-img-delay05);

        @media print, screen and (max-width: 760px){
          height: 15.37%;
          inset: 46.48% auto auto 77.2%;
          width: 9.2%;
        }
      }

      &.-item15 {
        height: 18.28%;
        inset: 41.15% 0 auto auto;
        width: 13.4%;
        transition-delay: var(--kv-img-delay04);

        @media print, screen and (max-width: 760px){
          height: 15.37%;
          inset: 46.48% 0 auto auto;
          width: 13.33%;
        }
      }

      &.-item16 {
        height: 18.39%;
        inset: 52.3% auto auto 0;
        width: 10.14%;
        transition-delay: var(--kv-img-delay03);

        @media print, screen and (max-width: 760px){
          height: 17.59%;
          inset: 53.7% auto auto 0;
          width: 10.13%;
        }
      }

      &.-item17 {
        height: 18.39%;
        inset: 52.3% auto auto 10.42%;
        width: 11.25%;
        transition-delay: var(--kv-img-delay01);

        @media print, screen and (max-width: 760px){
          height: 17.59%;
          inset: 53.7% auto auto 10.4%;
          width: 11.33%;
        }
      }

      &.-item18 {
        height: 18.39%;
        inset: 52.3% auto auto 21.94%;
        width: 9.44%;
        transition-delay: var(--kv-img-delay03);

        @media print, screen and (max-width: 760px){
          height: 17.59%;
          inset: 53.7% auto auto 22%;
          width: 9.6%;
        }
      }

      &.-item19 {
        height: 18.28%;
        inset: 52.3% auto auto 31.67%;
        width: 11.39%;
        transition-delay: var(--kv-img-delay10);

        @media print, screen and (max-width: 760px){
          height: 27.96%;
          inset: 53.7% auto auto 31.87%;
          width: 11.2%;
        }
      }

      &.-item20 {
        height: 18.28%;
        inset: 52.3% auto auto 43.33%;
        width: 11.32%;
        transition-delay: var(--kv-img-delay01);

        @media print, screen and (max-width: 760px){
          height: 10.56%;
          inset: 53.7% auto auto 43.33%;
          width: 11.33%;
        }
      }

      &.-item21 {
        height: 18.28%;
        inset: 52.3% auto auto 54.93%;
        width: 7.99%;
        transition-delay: var(--kv-img-delay06);

        @media print, screen and (max-width: 760px){
          height: 24.07%;
          inset: 53.7% auto auto 54.93%;
          width: 8%;
        }
      }

      &.-item22 {
        height: 18.28%;
        inset: 52.3% auto auto 63.19%;
        width: 13.75%;
        transition-delay: var(--kv-img-delay10);

        @media print, screen and (max-width: 760px){
          height: 13.33%;
          inset: 53.7% auto auto 63.2%;
          width: 13.73%;
        }
      }

      &.-item23 {
        height: 18.28%;
        inset: 59.89% auto auto 77.22%;
        width: 9.1%;
        transition-delay: var(--kv-img-delay02);

        @media print, screen and (max-width: 760px){
          height: 16.85%;
          inset: 62.22% auto auto 77.2%;
          width: 9.2%;
        }
      }

      &.-item24 {
        height: 18.28%;
        inset: 59.89% 0 auto auto;
        width: 13.4%;
        transition-delay: var(--kv-img-delay08);

        @media print, screen and (max-width: 760px){
          height: 16.85%;
          inset: 62.22% auto auto 86.67%;
          width: 13.33%;
        }
      }

      &.-item25 {
        height: 28.85%;
        inset: 71.15% auto auto 0;
        width: 21.67%;
        transition-delay: var(--kv-img-delay08);

        @media print, screen and (max-width: 760px){
          height: 28.33%;
          inset: 71.67% auto auto 0;
          width: 21.73%;
        }
      }

      &.-item26 {
        height: 14.37%;
        inset: 71.15% auto auto 21.94%;
        width: 9.44%;
        transition-delay: var(--kv-img-delay02);
        z-index: 2;

        @media print, screen and (max-width: 760px){
          height: 13.7%;
          inset: 71.67% auto auto 22%;
          width: 9.6%;
        }
      }

      &.-item27 {
        height: 17.24%;
        inset: 65.63% auto auto 43.33%;
        width: 11.32%;
        transition-delay: var(--kv-img-delay09);

        @media print, screen and (max-width: 760px){
          height: 17.04%;
          inset: 64.63% auto auto 43.33%;
          width: 11.33%;
        }
      }

      &.-item28 {
        height: 11.72%;
        inset: 71.15% auto auto 63.19%;
        width: 13.75%;
        transition-delay: var(--kv-img-delay05);

        @media print, screen and (max-width: 760px){
          height: 10.37%;
          inset: 67.41% auto auto 63.2%;
          width: 13.73%;
        }
      }

      &.-item29 {
        height: 14.02%;
        inset: auto auto 0 21.94%;
        width: 9.44%;
        transition-delay: var(--kv-img-delay11);

        @media print, screen and (max-width: 760px){
          height: 17.96%;
          inset: 82.04% auto auto 22%;
          width: 9.6%;
        }
      }

      &.-item30 {
        height: 16.67%;
        inset: auto auto 0 31.67%;
        width: 9.24%;
        transition-delay: var(--kv-img-delay07);

        @media print, screen and (max-width: 760px){
          height: 17.96%;
          inset: 82.04% auto auto 31.87%;
          width: 9.33%;
        }
      }

      &.-item31 {
        height: 16.67%;
        inset: auto auto 0 41.18%;
        width: 13.47%;
        transition-delay: var(--kv-img-delay04);

        @media print, screen and (max-width: 760px){
          height: 17.96%;
          inset: 82.04% auto auto 41.47%;
          width: 13.2%;
        }
      }

      &.-item32 {
        height: 16.67%;
        inset: auto auto 0 54.93%;
        width: 7.99%;
        transition-delay: var(--kv-img-delay11);

        @media print, screen and (max-width: 760px){
          height: 21.85%;
          inset: 78.15% auto auto 54.93%;
          width: 8%;
        }
      }

      &.-item33 {
        height: 16.67%;
        inset: auto auto 0 63.19%;
        width: 13.68%;
        transition-delay: var(--kv-img-delay08);

        @media print, screen and (max-width: 760px){
          height: 21.85%;
          inset: 78.15% auto auto 63.2%;
          width: 13.73%;
        }
      }

      &.-item34 {
        height: 22.18%;
        inset: auto 0 0 auto;
        width: 22.78%;
        transition-delay: var(--kv-img-delay09);

        @media print, screen and (max-width: 760px){
          height: 20.56%;
          inset: 79.44% 0 auto auto;
          width: 22.8%;
        }
      }
    }
  }


  .kv-scroll {
    opacity: 0;
    transition: opacity 1s ease;
    transition-delay: var(--kv-img-delay-scroll);
  }

  &.-show {
    .kv-catch{
      & > img {
        opacity: 1;
      }
    }

    .kv-img {
      .-item {
        opacity: 1;

        img {
          filter: grayscale(0);
        }
      }
    }

    .kv-scroll{
      opacity: 1;
    }
  }
}

.site-loading {
  background-color: #ebe7dd;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 10;
  width: 100%;

  .element {
    margin: auto;

    img {
      animation: loadingFader 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
      width: 135px;
    }
  }
}


@keyframes loadingFader {
    0% {
      opacity: 0
    }
    50% {
      opacity: 1
    }
    100% {
      opacity: 0
    }
}