:root {
  --sp-hero-top: 150px;
  /* KV-01〜04.jpg（2400×1350 = 16:9）の実比率 */
  --hero-poster-ratio: calc(1350 / 2400);
  --h-hero-poster: calc(100vw * var(--hero-poster-ratio));
  --h-hero-banner: 24px;
}

.hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: calc(var(--sp-hero-top) + var(--h-hero-poster) + var(--h-hero-banner));
  padding-top: var(--sp-hero-top);
  overflow: hidden;
}

.hero__poster-frame {
  position: relative;
  width: 100%;
  height: var(--h-hero-poster);
  overflow: hidden;
  background: var(--c-bg);
}

/* 3枚フェード切替カルーセル（hero-carousel.js が is-active を回す） */
.hero__carousel {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.hero__slide.is-active {
  opacity: 1;
}

/* ヒーロー直下の3つの菱形＝カルーセルのスライドインジケータ（旧 banner-unger-sign.svg 相当） */
.hero__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  height: var(--h-hero-banner);
}

.hero__dot {
  width: 13px;
  height: 4px;
  padding: 0;
  border: 0;
  background: var(--c-slate);
  transform: skewX(-28deg);
  cursor: pointer;
  transition: background 220ms ease;
}

.hero__dot.is-active {
  background: var(--c-accent-mid);
}

@media (hover: hover) {
  .hero__dot:hover {
    background: var(--c-accent-mid);
  }
}

/* カルーセル上に重ねるキャッチ＋タイトル（写真の上でも読めるよう淡いスクリム） */
.hero__text-layer {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 24px;
  color: #fff;
  text-align: center;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.34) 100%);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.hero__tagline {
  font-family: var(--font-serif);
  font-size: var(--fs-21);
  font-weight: 500;
  letter-spacing: 0.24em;
  font-feature-settings: "palt";
}

.hero__title {
  font-family: var(--font-serif);
  font-size: var(--fs-36);
  font-weight: 500;
  letter-spacing: 0.14em;
  font-feature-settings: "palt";
}

@media (max-width: 1024px) {
  :root {
    --sp-hero-top: 150px;
    --h-hero-poster: calc(100vw * var(--hero-poster-ratio));
    --h-hero-banner: 24px;
  }
}

/* ≤700px は縦長のスマホ版 KV（1080×1350 = 4:5）に切り替わる（index.html の <picture> と同じ境界） */
@media (max-width: 700px) {
  :root {
    --hero-poster-ratio: calc(1350 / 1080);
  }
}

@media (max-width: 560px) {
  :root {
    --sp-hero-top: 150px;
    --h-hero-poster: calc(100vw * var(--hero-poster-ratio));
    --h-hero-banner: 24px;
  }

  .hero__slide {
    object-position: center;
  }

  .hero__text-layer {
    gap: 8px;
  }

  .hero__tagline {
    font-size: var(--fs-14);
    letter-spacing: 0.18em;
  }

  .hero__title {
    font-size: var(--fs-26);
  }

  /* 005: スマホにもカルーセル指標（菱形ドット）を表示。旧・左寄せ橙ストライプは廃止 */
  .hero__dots {
    display: flex;
    gap: 20px;
  }
}