@charset "utf-8";

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

  main visual style

***************************************************************************** */
/* home.css の記述をリセット。home.cssから該当コードを削除したら不要。 */
.key-visual{
  background: transparent;
  background-size: auto auto;
  height: auto;
}
.key-visual > img{
  display: inline;
}

@media print, screen and (max-width: 760px){
  /* key-visual */
  .key-visual{
    background-image: none;
    height: auto;
  }
  .key-visual > img{
    display: inline;
    width: auto;
  }
}

.key-visual {
  aspect-ratio: 1440 / 852;
  overflow: hidden;
  padding-bottom: 300px;
  position: relative;

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

.key-visual-text {
  /* display: flex;
  gap: max(3rem, 3.19vw);
  justify-content: center; */
  margin: auto;
  position: absolute;
  inset: 53.52% auto auto 9.03%;
  z-index: 3;

  @media print, screen and (max-width: 760px){
    /* flex-direction: column;
    gap: 9.33vw; */
    inset: 54.4vw auto auto 8vw;
  }

  & > .-title {
    /* order: 2; */
    img {
      height: auto;
      width: 28.89vw;
    }
    @media print, screen and (max-width: 760px){
      /* order: 0; */
      img {
        width: 44.53vw;
      }
    }
  }
  /* & > .-lead {
    img {
      height: auto;
      width: max(7.5rem, 8.06vw);
    }
    @media print, screen and (max-width: 760px){
      img {
        width: 36vw;
      }
    }
  } */
}

.key-visual-background {
  & > .-item {
    border-radius: 10px;
    line-height: 0;
    overflow: hidden;
    position: absolute;

    &.-item01 {
      aspect-ratio: 700 / 400;
      inset: 2.35% auto auto -3.47%;
      width: 48.61%;

      @media print, screen and (max-width: 760px){
        inset: 5.33vw auto auto -9.87vw;
        width: 67.2vw;
      }
    }

    &.-item02 {
      aspect-ratio: 450 / 600;
      inset: -4.69% auto auto 48.96%;
      width: 31.25%;

      @media print, screen and (max-width: 760px){
        inset: -6.4vw -5.87vw auto auto;
        width: 43.2vw;
      }
    }

    &.-item03 {
      aspect-ratio: 380 / 234;
      inset: -4.69% -9.03% auto auto;
      width: 26.39%;

      @media print, screen and (max-width: 760px){
        inset: 56vw -2.67vw auto auto;
        width: 40vw;
      }
    }

    &.-item04 {
      aspect-ratio: 380 / 234;
      inset: 67.37% auto auto -0.28%;
      width: 26.39%;

      @media print, screen and (max-width: 760px){
        inset: 86.93vw auto auto -5.33vw;
        width: 43.73vw;
      }
    }

    &.-item05 {
      aspect-ratio: 234 / 234;
      inset: 67.37% auto auto 28.89%;
      width: 16.25%;

      @media print, screen and (max-width: 760px){
        inset: 86.93vw auto auto 43.73vw;
        width: 26.93vw;
      }
    }

    &.-item06 {
      aspect-ratio: 380 / 180;
      inset: 70.42% 24.65% auto auto;
      width: 26.39%;

      @media print, screen and (max-width: 760px){
        display: none;
        /* inset: 49.6vw auto auto -8.27vw;
        width: 65.6vw; */
      }
    }

    &.-item07 {
      aspect-ratio: 382 / 432;
      inset: 27.93% -9.17% auto auto;
      width: 26.53%;

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

    img {
      height: auto;
      position: absolute;
      inset: 0 auto auto 0;
      width: 100%;
    }

    & > .image {
      opacity: 0;
      transition-property: opacity, transform;
      transition-duration: 2s;
      transition-timing-function: ease;
      transition-delay: 0s;

      &.-show {
        opacity: 1;
      }
    }
  }
}

.key-visual-button {
  aspect-ratio: 1 / 1;
  cursor: pointer;
  position: absolute;
  inset: auto 6.94% 23.74% auto;
  width: clamp(12rem, 12.5vw, 18rem);
  z-index: 3;

  @media print, screen and (max-width: 760px){
    inset: auto 2.67vw 2.67vw auto;
    width: 29.33vw;
  }

  img {
    height: auto;
    width: 100%;
  }

  & > .-text {
    aspect-ratio: 128 / 149;
    animation: rotatePlayButton 15s linear 0s infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 71.11%;
  }
  & > .-base {
    aspect-ratio: 1 / 1;
    position: relative;
    z-index: 1;
  }
}

@keyframes rotatePlayButton {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}