@charset "UTF-8";

/* ============================================================
   ヒーロー ／ 確定案（案A-2）
   hero-a.css ＋ hero-a2.css を1枚に統合したもの。index.html はこれを読む。
   比較用の hero-a*.css / hero-b.css / hero-c.css は残してあるが、
   本体はこのファイルだけを見ればよい。

   構成
   ・IMG-01 を全面に敷き、その上に文字を直接置く
   ・置く文字は「目次ラベル・キャッチ・寸法線」の3つだけ。
     リード文は次セクションへ送り、写真そのものに語らせる
   ・目次ラベルをヘッダー直下へ、キャッチと寸法線を下端へ置き、
     画面の高さ全体を使って縦に分散させる
   ・ヘッダーは反転（白）→ スクロール80px超で通常配色に戻る
   ・ヒーロー内にボタンは置かない
   ・IMG-02 は右下に差し込み、上端を寸法線と同じ高さに合わせたうえで、
     ヒーロー下端をまたいで紙面へ落とす
   ============================================================ */

.hero-a {
  --pad-b: clamp(72px, 10vw, 140px);   /* IMG-02 の位置合わせと共有する */
  position: relative;
  display: flex;
  align-items: stretch;
  /* 画面いっぱいに見開く。上限を掛けると縦長のディスプレイで下に白が余るため、
     ビューポート高そのものを使う。svh はモバイルのURLバー分を含めない単位で、
     アドレスバーの出入りで高さが跳ねるのを防ぐ */
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + clamp(40px, 5vw, 72px)) 0 var(--pad-b);
  background: var(--ink);
}

/* 全面の写真。ID は右肩に逃がす（ヒーローの文字は常に左のため） */
.hero-a__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  aspect-ratio: auto;
  border: 0;
  padding-top: calc(var(--header-h) + var(--s-2));
}

.hero-a__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ラベルだけ上端に置き、残りを下端へ送る */
.hero-a .hero__index {
  margin-bottom: auto;
  font-size: 12px;
  letter-spacing: 0.18em;
}

.hero-a .hero__catch {
  margin-top: 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.hero-a .hero__catch-2 { padding-left: 0.6em; }

.hero-a__dim {
  margin-top: clamp(48px, 6vw, 88px);
  max-width: min(640px, 100%);
}

/* 右下の差し込み。1024px 未満では出さない */
.hero-a__inset { display: none; }

@media (min-width: 1024px) {
  /* 上端を寸法線と同じ高さに合わせる。
     ニアミスの数pxズレが一番だらしなく見えるので、計算で一致させる */
  .hero-a__inset {
    display: flex;
    position: absolute;
    z-index: 2;
    right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
    top: calc(100% - var(--pad-b) - 10px);
    bottom: auto;
    width: clamp(220px, 24vw, 320px);
  }
}

/* 濃い面のあとに白が来るので、継ぎ目は少し離す */
.hero__seam { margin-top: clamp(80px, 11vw, 152px); }