/* 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(88vh, 720px);
  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;
}

/* 元デザインは一様な 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: var(--fs-hero-lg);
  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: #fff;
  color: var(--color-heading-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: var(--transition);
}

.hero-fullbleed-center-overlay__cta:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* CTAを横並びにするラッパー。電話ボタン(左)+お問い合わせ(右) */
.hero-fullbleed-center-overlay__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: var(--space-sm, 24px);
}
/* ラッパー内ではCTA個別の上マージンを外す(ラッパー側で確保済み) */
.hero-fullbleed-center-overlay__actions .hero-fullbleed-center-overlay__cta { margin-top: 0; }
/* 電話ボタン: 塗りつぶしの枠線ボタンでお問い合わせと並んでも区別できるようにする */
.hero-fullbleed-center-overlay__cta--tel {
  gap: 10px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: 2px solid var(--color-primary);
  padding: 10px 36px;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.hero-fullbleed-center-overlay__cta--tel:hover {
  background: #fff;
  border-color: #fff;
  color: var(--color-heading-ink);
}
.hero-fullbleed-center-overlay__cta--tel .hero-fullbleed-center-overlay__tel-icon {
  width: 22px;
  height: 22px;
}
.hero-fullbleed-center-overlay__tel-icon { flex: none; }

/* お問い合わせボタン: メインカラー地の丸みのあるボタン + 矢印 */
.hero-fullbleed-center-overlay__cta--contact {
  gap: 10px;
  min-height: 52px;
  padding: 12px 32px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: 2px solid var(--color-primary);
  font-size: 1.05rem;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.hero-fullbleed-center-overlay__cta--contact:hover {
  background: #fff;
  border-color: #fff;
  color: var(--color-heading-ink);
  opacity: 1;
  transform: translateY(-2px);
}
.hero-fullbleed-center-overlay__cta-arrow {
  flex: none;
  transition: transform 0.3s ease;
}
.hero-fullbleed-center-overlay__cta--contact:hover .hero-fullbleed-center-overlay__cta-arrow {
  transform: translateX(4px);
}

/* 電話アイコンボタン: LINEと同じ丸型。メインカラーで塗る */
.hero-fullbleed-center-overlay__tel {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-heading-ink);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition: var(--transition);
}
.hero-fullbleed-center-overlay__tel:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
  opacity: 1;
  transform: translateY(-2px);
}
.hero-fullbleed-center-overlay__tel .hero-fullbleed-center-overlay__tel-icon {
  width: 24px;
  height: 24px;
}

/* LINEアイコンボタン: お問い合わせボタンの右に並べる丸型。高さは隣のCTAと揃える */
.hero-fullbleed-center-overlay__line {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #06c755;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition: var(--transition);
}
.hero-fullbleed-center-overlay__line:hover {
  background: #05a648;
  color: #fff;
  opacity: 1;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .hero-fullbleed-center-overlay { min-height: min(80vh, 560px); }
  .hero-fullbleed-center-overlay__actions { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; }
  .hero-fullbleed-center-overlay__actions .hero-fullbleed-center-overlay__cta--contact { flex: 1 1 100%; max-width: 360px; }
  .hero-fullbleed-center-overlay__actions .hero-fullbleed-center-overlay__cta { margin-top: 0; }
  /* 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; }
}