.hero-section {
  isolation: isolate;
}

.hero-section__overlay {
  z-index: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.22) 0%,
      rgba(0, 0, 0, 0.10) 38%,
      rgba(0, 0, 0, 0.00) 72%
    );
  opacity: 0;
  animation: heroOverlayIn 1.2s ease-out 0.1s both;
}

.hero_home_base {
  opacity: 0;
  transform: scale(1.08);
  transform-origin: center center;
  filter: blur(10px) saturate(1.12);
  animation: heroBaseIn 1.8s cubic-bezier(.22, .61, .36, 1) 0s both;
}

.hero_home_char {
  opacity: 0;
  transform: translate3d(3.5vw, 1vw, 0) scale(1.04);
  transform-origin: 55% 55%;
  filter: blur(12px) saturate(1.08);
  animation: heroCharIn 1.35s cubic-bezier(.16, 1, .3, 1) 0.28s both;
}

.hero-title {
/*
  opacity: 0;
  animation: heroTitleIn 0.95s cubic-bezier(.16, 1, .3, 1) 0.72s both;
*/
}

.eyebrow {
  opacity: 0;
  animation: heroEyebrowIn 0.85s cubic-bezier(.16, 1, .3, 1) 0.95s both;
}

@keyframes heroBaseIn {
  0% {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(10px) saturate(1.12);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) saturate(1);
  }
}

@keyframes heroCharIn {
  0% {
    opacity: 0;
    transform: translate3d(3.5vw, 1vw, 0) scale(1.04);
    filter: blur(12px) saturate(1.08);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0) saturate(1);
  }
}

@keyframes heroOverlayIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes heroTitleIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 1.5vw, 0) skew(-8deg) scale(0.98);
    letter-spacing: 0.16em;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) skew(-8deg) scale(1);
    letter-spacing: 0.08em;
  }
}

@keyframes heroEyebrowIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 1vw, 0);
    letter-spacing: 0.26em;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    letter-spacing: 0.18em;
  }
}

@media (max-width: 900px) {
  .hero_home_base {
    animation-duration: 1.5s;
  }

  .hero_home_char {
    transform: translate3d(5vw, 1.6vw, 0) scale(1.035);
    animation-duration: 1.15s;
    animation-delay: 0.22s;
  }

  .hero-title {
    animation-delay: 0.58s;
  }

  .eyebrow {
    animation-delay: 0.8s;
  }

  @keyframes heroCharIn {
    0% {
      opacity: 0;
      transform: translate3d(5vw, 1.6vw, 0) scale(1.035);
      filter: blur(10px) saturate(1.08);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0) saturate(1);
    }
  }

  @keyframes heroTitleIn {
    0% {
      opacity: 0;
      transform: translate3d(0, 3vw, 0) skew(-8deg) scale(0.985);
      letter-spacing: 0.13em;
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) skew(-8deg) scale(1);
      letter-spacing: 0.08em;
    }
  }

  @keyframes heroEyebrowIn {
    0% {
      opacity: 0;
      transform: translate3d(0, 2vw, 0);
      letter-spacing: 0.22em;
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      letter-spacing: 0.18em;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-section__overlay,
  .hero_home_base,
  .hero_home_char,
/*
  .hero-title,
*/
  .eyebrow {
    animation: none;
    opacity: 1;
    filter: none;
  }

  .hero_home_base,
  .hero_home_char,
  .eyebrow {
    transform: none;
  }

  .hero-title {
    transform: skew(-8deg);
  }
}











/* 追加 */
.hero-title-wrap {
  opacity: 0;
/*
  animation: heroTitleIn 0.95s cubic-bezier(.16, 1, .3, 1) 0.72s both;
*/
  animation: heroTitleInWrapper 0.95s cubic-bezier(.16, 1, .3, 1) 0.72s both;

/*
  animation: heroTitleWrapIn 0.85s cubic-bezier(.18, 1.1, .28, 1) 0.55s both;
*/
}

/* 既存の hero-title に animation / opacity / transform のアニメーション指定があるなら削除し、
   skew はそのまま残す */
.hero-title {
  opacity: 1;
}
/*
@keyframes heroTitleWrapIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 2.2vw, 0) scale(0.92);
  }
  68% {
    opacity: 1;
    transform: translate3d(0, -0.18vw, 0) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 900px) {
  .hero-title-wrap {
    animation-name: heroTitleWrapInSp;
  }

  @keyframes heroTitleWrapInSp {
    0% {
      opacity: 0;
      transform: translate3d(0, 3vw, 0) scale(0.92);
    }
    68% {
      opacity: 1;
      transform: translate3d(0, -0.3vw, 0) scale(1.035);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }
}
*/



/* wrapper用に安全化した keyframes */
@keyframes heroTitleInWrapper {
  0% {
    opacity: 0;
/*
    transform: translate3d(0, 1.5vw, 0) scale(0.98);
*/
    transform: translate3d(0, 1.5vw, 0) scale(0.98);

  }
/*
  68% {
    opacity: 1;
    transform: translate3d(0, -0.12vw, 0) scale(1.015);
  }
*/
  100% {
    opacity: 1;
/*
    transform: translate3d(0, 0, 0) scale(1);
*/
    transform: translate3d(0, 0, 0) scale(1);

  }
}

@media (max-width: 900px) {
  @keyframes heroTitleInWrapper {
    0% {
      opacity: 0;
      transform: translate3d(0, 2.2vw, 0) scale(0.98);
    }
/*
    68% {
      opacity: 1;
      transform: translate3d(0, -0.18vw, 0) scale(1.012);
    }
*/
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }
}