/* Key visual: keep the artwork, logo and MEDIA control independent. */
.hero.hero-keyvisual {
  /* Fixed SNS bar + navigation end at 116px; keep an 8px gap. */
  margin-top: 124px;
  height: clamp(520px, 56.25vw, 1080px);
  max-height: calc(100vh - 124px);
  max-height: calc(100svh - 124px);
  isolation: isolate;
}
.hero-keyvisual .hero-main-image {
  display: block;
  object-fit: cover;
  object-position: 50% 0%;
  filter: none;
}
.hero-keyvisual::after {
  z-index: 1;
  background: linear-gradient(to bottom, transparent 60%, rgba(2,4,10,.35));
}
.hero-keyvisual .hero-logo {
  position: absolute;
  z-index: 2;
  top: 6%;
  right: 4%;
  width: clamp(220px, 24vw, 360px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.85));
}
.hero-keyvisual .hero-media-link {
  z-index: 3;
  top: auto;
  right: 5%;
  bottom: 7%;
}
.hero-keyvisual .hero-media-btn {
  width: clamp(90px, 8vw, 120px);
}
.hero-keyvisual .hero-media-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
}
@media (max-width: 768px) {
  .hero.hero-keyvisual {
    height: clamp(460px, 130vw, 620px);
  }
  .hero-keyvisual .hero-main-image {
    object-position: 64% 50%;
  }
  .hero-keyvisual::after {
    background: linear-gradient(to bottom, transparent 55%, rgba(2,4,10,.75));
  }
  .hero-keyvisual .hero-logo {
    top: auto;
    right: auto;
    left: 16px;
    bottom: 24px;
    width: min(calc(100% - 126px), 340px);
  }
  .hero-keyvisual .hero-media-link {
    top: auto;
    right: 14px;
    bottom: 24px;
  }
  .hero-keyvisual .hero-media-btn { width: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-keyvisual .hero-main-image { transition: none; }
  .hero-keyvisual.flash-react .hero-main-image { transform: none; }
  .hero-keyvisual .hero-media-btn { animation: none; }
}