/* hero-fullbleed-center-overlay — 全面写真 + スクリム + 中央テキスト
 * 出典: Figma「sitemeister_module」main6。
 * ★スクリムは common.css の .hero-overlay を使う(契約C5/C9 の対象クラス)。
 *   独自クラスで作り直すとスクリム検査に引っかからず、可読性の担保が効かなくなる。
 * ★写真の上のテキストは #fff 固定でよい(common.css .hero-content と同じ扱い)。
 *   写真の明るさは案件ごとに変わるため、スクリムで下地を作ってから白を乗せる。 */

.hero-fullbleed-center-overlay {
  position: relative;
  min-height: min(80vh, 650px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-fullbleed-center-overlay__media {
  position: absolute;
  inset: 0;
}

.hero-fullbleed-center-overlay__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 複数枚の自動スライドショー ─────────────────────────────
   .hero-fig-slideshow 配下に複数の <img class="hero-fig-slideshow__img"> を重ねて置き、
   .is-active だけを表示するクロスフェード方式。JS(インラインscript)が5秒ごとに
   is-active を次の画像へ付け替える。prefers-reduced-motion時はJS側で自動切替を止め、
   最初の1枚が静止画として表示され続ける(全画像がposition:absoluteで重なっているため)。 */
.hero-fig-slideshow {
  position: absolute;
  inset: 0;
}
.hero-fig-slideshow__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-fig-slideshow__img.is-active {
  opacity: 1;
}

/* 元デザインは一様な 50% の黒。common.css 既定のグラデーションより平坦にする。
   ★濃さを 0.5 → 0.6 に上げた。写真の輝度 L に対して白文字のコントラストは
     1.05 ÷ ((1−α)L + 0.05) なので、4.5:1 を満たすには (1−α)L ≤ 0.1833 が必要。
     受領時(α=0.5)は同梱写真のテキスト領域(平均輝度 0.428)で実測 3.97:1 と基準未達だった。
     α=0.6 で 4.75:1 になる。
     ★これ以上濃くしない。真っ白な写真まで保証するには α=0.82 が要るが、それでは
       写真が沈んで「写真そのものが主役」というこの部品の存在理由が消える。
       任意の写真での保証は原理的に不可能なので、計画ファイルの「先方への指摘事項」に回した。
   ★クラスは差し替えない(契約C5/C9 の対象)。濃さの上書きのみ。 */
.hero-fullbleed-center-overlay .hero-overlay {
  background: rgba(0, 0, 0, 0.6);
}

.hero-fullbleed-center-overlay__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ★--space-sm は TECH_STACK に「24px」と載っているが common.css の :root に定義が無く、
     var() が無効値になって gap が normal(=0) に落ちていた。受領時は見出し・リード・CTA の
     間隔が全てゼロだった(実測)。TECH_STACK の記載値をフォールバックとして補う。
     ※根治は先方側。計画ファイルの「先方への指摘事項」を参照。 */
  gap: var(--space-sm, 24px);
  text-align: center;
  /* ★受領時は 630px 固定。--fs-hero-lg は画面幅に応じて 48→60px と伸びるのに器が固定なので、
     広いほど1行に入る字数が減り、1440〜1920px で見出しが4行に割れていた(実測)。
     「れる」「す」が単独行になり、中央寄せなので余計に目立つ。
     器を可変にして、最大サイズ(60px)でも 1行11字が収まる幅を確保する
     (11字 × 60px × 1.04 ≒ 686px + 左右padding 40px)。
     ★広げすぎない。README の「1行≈14字目安」を超えると中央寄せが読みにくくなる。 */
  max-width: min(880px, 100%);
  padding: clamp(24px, 4vw, 40px) 20px;
  /* 主役の動きは1種類だけ。transform のみで opacity は触らない
     (opacity:0 起点にすると、何かの拍子に文字が消えたまま残るリスクがある＝原則7)。 */
  animation: hero-fullbleed-center-overlay-rise 600ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* keyframes 名はグローバル空間なのでモジュール名を前置する。 */
@keyframes hero-fullbleed-center-overlay-rise {
  from { transform: translateY(12px); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fullbleed-center-overlay__content { animation: none; }
}

.hero-fullbleed-center-overlay__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0;
}

.hero-fullbleed-center-overlay__light { font-weight: 300; }

.hero-fullbleed-center-overlay__lead {
  font-size: var(--fs-lead);
  line-height: 1.9;
  color: #fff;
  margin: 0;
}

/* 暗いスクリムの上なので、ボタンは反転(白地 + 濃いインク)にして最も目立たせる。
   CTA は「読ませる文章」ではなく「押させる操作」なので、リードと同じ間隔だと
   文章の続きに見える。一段深い余白で切り離す(gap 24px + 24px = 48px)。 */
.hero-fullbleed-center-overlay__cta {
  margin-top: var(--space-sm, 24px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  border-radius: var(--radius-btn);
  background: #D4AF37;
  color: #1a1a1a;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

.hero-fullbleed-center-overlay__cta:hover {
  background: #c19b2e;
  color: #1a1a1a;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.45);
}

@media (max-width: 768px) {
  .hero-fullbleed-center-overlay { min-height: min(70vh, 500px); }
  /* design.md No.5: モバイル h1 は固定的に絞る */
  .hero-fullbleed-center-overlay__heading { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .hero-fullbleed-center-overlay__lead { font-size: var(--fs-body); }
  /* SP は全幅CTAで既に塊として分離して見えるので、PC ほど深くは取らない。 */
  .hero-fullbleed-center-overlay__cta { width: 100%; margin-top: 8px; }
}