/* -----------------------
  jikkan
----------------------- */
.jikkan {
  margin-top: max(-13.59vw, -106px);
  padding-bottom: min(37.44vw, 292px);
  position: relative;
  display: grid;
}
.jikkan .bg-box {
  width: 100%;
  height: min(161.15vw, 1257px);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.jikkan .bg-box.trigger img {
  transform: scale(1.2);
  transform-origin: 50% 50%;
  transition: all 2s 0s ease-in-out;
}
.jikkan .bg-box.trigger.move img {
  transform: scale(1);
}

.jikkan .ttl-box {
  display: block;
}
.jikkan .ttl-box .ttl-sub, 
.jikkan .ttl-box .ttl-main {
  display: block;
}
.jikkan .ttl-box .ttl-sub {
  position: relative;
  z-index: 3;
}
.jikkan .ttl-box .ttl-main img {
  transform: translateY(-40%) rotate(10.91deg);
  opacity: 0;
}
.jikkan .ttl-box .ttl-main.trigger.move img {
  animation: fadeInTopRotate 1.6s ease forwards;
}

@keyframes fadeInTopRotate {
  0% {
    transform: translateY(-40%) rotate(10.91deg);
    opacity: 0;
  }
  80% {
    transform: translateY(0) rotate(10.91deg);
    opacity: 1;
  }
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}

.jikkan .arrow-box {
  width: min(42.82vw, 334px);
  height: min(56.15vw, 438px);
  position: absolute;
  left: 0;
  bottom: min(37.95vw, 296px);
  clip-path: inset(100% 0 0 0);
  transition: all 0.8s 0s ease-in-out;
  transition-delay: .5s;
}
.jikkan .arrow-box.trigger.move {
  clip-path: inset(0);
}

.jikkan-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 84.23%;
  max-width: 657px;
  position: absolute;
  bottom: max(-26.28vw, -205px);
  left: min(7.82vw, 61px);
  z-index: 3;
}
.jikkan-list li:first-child {
  transition-delay: .5s;
}
.jikkan-list li:last-child {
  transition-delay: 0s;
}