/* B案(キービジュアルをトップ画像に据える)専用の追加スタイル。
   本体の css/style.css には手を入れず、このページからだけ読み込む。
   採用が決まったら style.css へ取り込み、このファイルと public/preview/ ごと削除すること。

   ▼ 構成の経緯
   最初は絵を全幅に敷いたが「いかにも埋め込み」に見えた。
   原因は縁の処理ではなく**大きさ**で、4:3の絵を全幅に置くと1440px幅で高さ1069pxになり、
   画像だけで1画面を超えていた。1画面に収まらないものはページの一部には見えない。
   次に絵を1画面に収めてぼかした背景を敷いたが、今度は左右に余白の層が余った。

   いまは **絵を1枚の板として置き、その横に文字を並べる**。
   4:3の絵を縦いっぱいに置くと横が余るので、そこが文字の置き場としてちょうど噛み合う。
   サイトの他の写真(.concept-pop-image など)と同じ角丸10pxにしてあるのも、
   「このサイトの写真」に見せるため。枠の言語を揃えると貼り付け感が消える。 */

/* A案の全面写真用の指定(高さ固定・flex・膜)を打ち消してから組み直す */
.hero-kv {
  display: block;
  height: auto;
  min-height: 0;
  padding: 48px 0 56px;
  background: var(--tint);
  overflow: visible;
}

/* ▼ .container は使わない。max-width:1080px だと絵が592pxまで縮み、
   焼き込み文字が9.8pxになって読めなくなる。画面幅を使い切る。 */
.hero-kv-inner {
  display: grid;
  /* 横に置くのは初回オファーとボタンだけなので、絵に幅を回す。
     文字列は 300px を下回らせない(初回価格の行が2段に割れる) */
  grid-template-columns: minmax(0, 2.4fr) minmax(300px, 1fr);
  gap: 48px;
  align-items: center;
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 40px;
}

.hero-kv-visual { position: relative; }

/* ▼ object-fit: cover を使わないこと。
   上下左右が欠けた瞬間に、焼き込まれた文言が読めなくなる。
   角丸10px と 1px の罫線は、サイトの他の写真と揃えるためのもの。 */
.hero-kv-image {
  display: block;
  width: 100%;
  /* ▼ 画面が低いときの上限。
     絵は4:3なので、横幅を決めると高さが決まる。縦に収めたいので、
     使える高さ(100svh から ヘッダー114px と セクション余白104px を引いた値)から
     逆算した横幅を上限にする。1画面に収まらないとヒーローとして成立しない。
     ここを消すと、1440x900 でヒーローが 807px になり21pxはみ出す(実測)。 */
  max-width: calc((100svh - 240px) * 4 / 3);
  height: auto;
  /* サイトの他の写真(.concept-pop-image など)と同じ枠の言語にする。
     色や余白より、枠の扱いを揃える方が「このサイトの写真」に見える */
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* 画面からは外すが、読み上げと検索には残す見出し。
   ▼ display:none や visibility:hidden にしないこと。どちらも読み上げから消える。 */
.kv-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 画面が狭いと絵も文字列も潰れるので、2カラムは1180px以上でだけ使う */
@media (max-width: 1179px) {
  .hero-kv-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    max-width: 1080px;
    padding: 0 24px;
  }
}

@media (max-width: 860px) {
  .hero-kv { padding: 0 0 44px; }
  .hero-kv-inner { gap: 0; padding: 0; max-width: none; }

  /* ▼ スマホでは絵を全幅にする。
     16pxの余白を空けて角丸を付けると、絵が小さくなって焼き込み文字が
     6.2px → 5.7px まで落ちるうえ、ページに貼ったカードに見える。
     幅いっぱいに断ち落とした方が、絵としても素直に見える。 */
  .hero-kv-visual { margin-bottom: 22px; }
  /* 幅で決まる画面なので、縦から逆算した上限は外す
     (横向きの低い画面で絵が不必要に縮むのを防ぐ) */
  .hero-kv-image { max-width: none; border-radius: 0; border-left: 0; border-right: 0; }

  /* 並べ替えは要らない。絵の下は初回オファーとボタンだけで、
     この順のままファーストビューに収まる(A案は説明文があるので並べ替えが要る) */
  .hero-kv-body { padding: 0 16px; }

  /* A案と揃える: 画面下の追従予約バーと重複するので、ヒーローの予約ボタンは隠す */
  .hero-kv-body .btn-row .btn-primary { display: none; }
  .hero-kv-body .btn-row { display: block; }
  .hero-kv-body .btn-row .btn-outline { display: block; width: 100%; text-align: center; }
}