/* ===========================================================
   苺咲べりぃ 官網 2026 改版 — Hero（首頁の一番上）。index.html <style> から
   切り出し（admin/preview.js も tokens.css → site.css → hero.css の順で読む）。
   色は tokens.css の語意層（--hero-bg / --hero-ink / --hero-scrim …）だけ参照。
   markup は index.html の <section class="hero">（.hero-art > .hero-img--cut|
   --cover ／ .hero-body > .hero-logo .hero-tagline .hero-cta）。
   =========================================================== */

/* ===========================================================
   1. Hero（2 案切替。素材は KV 1264x1790 の一枚絵。data/site.json の
   hero_style で選択、?hero=cut|cover で上書き可）
     A 案 html[data-hero="cut"]   … rembg 去背 → hero-cut-*.webp。左に人物、右に文字。
     B 案 html[data-hero="cover"] … KV を全幅（object-fit:cover）、文字は右 30%
                                    （人物のいない時計・薔薇の帯）に重ねる（既定）。
   出さないほうの <img> は display:none（loading="lazy" なので通信も起きない）。
   スマホはどちらも「画像が上／文字は下の色ブロック」。
   =========================================================== */
.hero {
  position: relative;
  /* 1-A5／1-D の z-index を .hero 内だけで完結させる（isolation が無いと
     外の要素の z-index と混ざる） */
  isolation: isolate;
  background: var(--hero-bg);
  overflow: hidden;
  color: var(--hero-ink);
  /* 視窗より高くしない（header 分を引く）。第一屏を視窗いっぱいに近づけるため上限 1100px。 */
  min-height: min(calc(100vh - var(--header-h)), 1100px);
  min-height: min(calc(100svh - var(--header-h)), 1100px);
}
.hero-img { display: none; width: 100%; height: 100%; object-fit: cover; }

.hero-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  padding: 60px clamp(24px, 6vw, 96px) 60px clamp(24px, 4.5vw, 72px);
}

.hero-logo {
  width: min(475px, 100%);
  height: auto;
}

.hero-tagline {
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  line-height: 1.7;
  color: var(--hero-ink);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  min-height: 52px;   /* JS が入るまでの跳ねを防ぐ */
}

/* --- A 案：去背（cut） ------------------------------------- */
html[data-hero="cut"] .hero {
  display: grid;
  grid-template-columns: minmax(0, clamp(380px, 48%, 620px)) minmax(0, 1fr);
  align-items: stretch;
}
/* 人物。左端まで出血させるので padding は持たせない */
html[data-hero="cut"] .hero-art { position: relative; overflow: hidden; }
html[data-hero="cut"] .hero-img--cut {
  display: block;
  position: absolute;
  inset: 0;
  object-position: 54% 0;   /* 頭を上端に合わせ、脚は hero の下縁で裁つ */
}

/* --- B 案：KV 全幅・文字は右の非人物帯（cover） -------------- */
/* object-fit:cover は幅基準で拡縮（KV は縦長・hero は横長なので橫は切れない）。
   object-position の縦 0 で原画の頭〜胸元を出す（これ以上余白は作れない）。
   文字は grid 2 列目（30%）のみ＝人物は左〜中央、右は時計・薔薇で顔に乗らない。
   --hero-scrim は右の文字区だけを軽く曇らせる帯（絵は塗り潰さない）。 */
html[data-hero="cover"] .hero {
  display: grid;
  /* 文字区は 30%（470px 頭打ち＝広画面で KV 拡大に負けて logo が髪に掛かるのを防ぐ） */
  grid-template-columns: minmax(0, 1fr) clamp(300px, 30%, 470px);
  align-items: stretch;
}
/* KV は grid の列に関係なく hero 全面に敷く */
html[data-hero="cover"] .hero-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
html[data-hero="cover"] .hero-img--cover {
  display: block;
  position: absolute;
  inset: 0;
  /* --hero-focus はサイト設定「絵の見せる位置」。CMS 既定（50% 0）ならこの既定値のまま。 */
  object-position: var(--hero-focus, 50% 0);
}
/* 右の文字区の後ろだけを曇らせる帯（58% あたりから右端へ） */
html[data-hero="cover"] .hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
}
html[data-hero="cover"] .hero-body {
  grid-column: 2;
  position: relative;
  z-index: 1;
  /* 下の余白で文字塊を持ち上げ、手（hero 右下）に掛からないようにする */
  padding: 40px clamp(20px, 2.4vw, 40px) min(230px, 26vh) clamp(16px, 1.6vw, 28px);
  padding: 40px clamp(20px, 2.4vw, 40px) min(230px, 26svh) clamp(16px, 1.6vw, 28px);
  gap: 20px;
}
/* KV の上に文字が載るので薄い影で下地から浮かせる（A＝白文字は暗い影、B＝褐紅文字は白縁） */
html[data-hero="cover"] .hero-tagline {
  font-size: clamp(15px, 1.15vw, 17px);
  text-shadow: 0 1px 3px rgba(120, 30, 80, .32);
}
html[data-theme="b"][data-hero="cover"] .hero-tagline {
  /* 淡粉の帯だけでは #A85258 が KV に負けるので、B の cover だけ一段濃くして白縁を付ける */
  color: var(--ink-dark);
  text-shadow: 0 0 6px rgba(255, 255, 255, .85), 0 1px 2px rgba(255, 255, 255, .95);
}
html[data-hero="cover"] .hero-logo {
  filter: drop-shadow(0 2px 6px rgba(120, 30, 80, .25));
}

/* ===========================================================
   1-A3. 底部漸層：.hero-art 下端に「透明 → var(--bg-page)」を重ね、画像下端と
   Information のハードエッジを馴染ませる（cut／cover 共通。1361px 以上は
   --hero-art-cap に収まるので自動追従）。z-index:1（scrim より上）だが
   .hero-body も z-index:1 で DOM 順が後ろ＝文字はこの漸層に埋もれない。
   =========================================================== */
.hero-art::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: clamp(90px, 8vw, 140px);
  background: linear-gradient(to bottom, transparent, var(--bg-page));
  pointer-events: none;
}

/* ===========================================================
   1-A4. 絵師名（サイト設定 hero_images の credit）
   文字欄の反対側の上の角に小さく添える（下の角にしないのは 1-A3 の漸層と重なるため）。
   白文字＋暗い影のみ（A/B どちらの地でも読める。絵の明暗はコマごとに違うので地色に
   合わせず影だけで浮かせる）。z-index:2＝画像・scrim・底部漸層より上。pointer-events:none。
   credit が空のときは index.html の JS がこの要素ごと消す。
   =========================================================== */
.hero-credit {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 2;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 8px rgba(0, 0, 0, .38);
  pointer-events: none;
}
/* 文字欄が左のときは絵師名を右上へ */
html[data-hero-pos^="left-"] .hero-credit {
  left: auto;
  right: 24px;
}

/* ===========================================================
   1-A5. 下へスクロールの矢印。.hero-art の子＋bottom 基準＝桌機は hero 下端、
   手機は画像帯の下（fade の上）に自然に収まる。z-index:3（絵師名・底部漸層より
   前面）。浮動アニメは prefers-reduced-motion で止める。-bottom は CTA に
   近づくので右下へ逃がす。
   =========================================================== */
.hero-scrolldown {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 3vw, 24px);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .35));
  animation: heroScrollDownBob 2s ease-in-out infinite;
}
.hero-scrolldown svg { width: 16px; height: 16px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero-scrolldown { animation: none; }
}
@keyframes heroScrollDownBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(5px); }
}
/* -bottom：中央下を避けて右下へ（transform 基準が変わるので keyframes も別に持つ） */
html[data-hero-pos$="-bottom"] .hero-scrolldown {
  left: auto;
  right: clamp(14px, 3vw, 24px);
  transform: none;
  animation-name: heroScrollDownBobR;
}
@keyframes heroScrollDownBobR {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@media (max-width: 900px) {
  .hero-scrolldown { width: 28px; height: 28px; bottom: 10px; }
  .hero-scrolldown svg { width: 13px; height: 13px; }
}

/* ===========================================================
   1-A2. hero_text_pos（左右 × 上中下の 6 択）。左右は接頭辞 "left-" で判定
   （列入れ替え・--hero-scrim 鏡写し・絵師名は 1-A4 の汎用規則が対応）。
   上中下は接尾辞 "-top"/"-bottom" で判定（"-middle" は無指定と同じ）：
   top は header 直下＋flex-start、bottom は下縁＋flex-end。900px 以下は
   縦積み 1 列で対象外なので @media (min-width: 901px) に閉じる。
   =========================================================== */
/* 列入れ替えは桌機だけ。900px 以下用の規則より詳細度が高いので、囲わずに書くと
   手機でも 2 列のまま＝画像が 300px の柱に潰れる。 */
@media (min-width: 901px) {
  html[data-hero-pos^="left-"][data-hero="cover"] .hero {
    grid-template-columns: clamp(300px, 30%, 470px) minmax(0, 1fr);
  }
  html[data-hero-pos^="left-"][data-hero="cover"] .hero-body {
    grid-column: 1;
  }
}
html[data-hero-pos^="left-"][data-hero="cover"] .hero-art::after {
  transform: scaleX(-1);
}
@media (min-width: 901px) {
  html[data-hero-pos$="-top"][data-hero="cover"] .hero-body {
    justify-content: flex-start;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  html[data-hero-pos$="-bottom"][data-hero="cover"] .hero-body {
    justify-content: flex-end;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  /* -bottom は文字塊が下縁 40px に貼り付き 1-A3 の底部漸層と高さが被る（z-index で
     文字層の下に隠れる設計だが、念のため隙間に見える漸層帯も薄くしておく） */
  html[data-hero-pos$="-bottom"][data-hero="cover"] .hero-art::before {
    height: 48px;
  }
}

/* ===========================================================
   1-B. cover 案・広い画面（1920 でも 1280 版と同じ見せ方：画像は左右対称に
   中央寄せ、文字は画像の右 30% に重ねる）。.hero-art は --hero-art-cap（1360px）
   で頭打ちにしつつ中央寄せ（余白は地色、縁は 160px グラデ）。.hero-body は
   無地列をやめ画像の右 30%（1360px 基準）に絶対配置で重ね、--hero-art-cap を
   親 .hero で共有。--hero-scrim を縁グラデと合成し文字側だけ曇らせる。
   1360px 以下（従来の cover 全幅表示）は変化しない。
   =========================================================== */
@media (min-width: 1361px) {
  html[data-hero="cover"] .hero {
    /* 画像・文字とも絶対配置でこの基準幅を参照するので、列定義は無効化しておく */
    --hero-art-cap: 1360px;
    grid-template-columns: none;
  }
  html[data-hero="cover"] .hero-art {
    left: calc((100% - var(--hero-art-cap)) / 2);
    right: auto;
    width: var(--hero-art-cap);
  }
  html[data-hero="cover"] .hero-art::after {
    background:
      var(--hero-scrim),
      linear-gradient(to right, var(--hero-bg) 0, transparent 160px),
      linear-gradient(to left,  var(--hero-bg) 0, transparent 160px);
  }
  html[data-hero="cover"] .hero-body {
    grid-column: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc((100% - var(--hero-art-cap)) / 2);
    width: clamp(300px, calc(var(--hero-art-cap) * .3), 470px);
  }

  /* hero_text_pos が left- 始まり：文字列を画像の左端基準に鏡写し */
  html[data-hero-pos^="left-"][data-hero="cover"] .hero-body {
    right: auto;
    left: calc((100% - var(--hero-art-cap)) / 2);
  }

  /* 1-A3 の底部漸層は .hero-art（＝画像の実幅）にしか付かないので、両側の地色
     マージンには効かない。ここだけ .hero 自体にも同じ漸層をフル幅で重ねる
     （画像の下は .hero-art::before と二重に重なるが同色なので見た目は変わらない）。
     cut 案・スマホはここに含めない（hero-body が地色を隠さない構図があるため）。 */
  html[data-hero="cover"] .hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: clamp(90px, 8vw, 140px);
    background: linear-gradient(to bottom, transparent, var(--bg-page));
    pointer-events: none;
  }
}

/* ===========================================================
   1-D. 超廣角（21:9 等）の両端：無地の代わりに同じ絵のぼかし拡大で埋める案
   （?herowide=flat|blur 切替、既定 blur＝2026-09-08 katy 決定）。1-B は
   1361px 以上で .hero-art を 1360px に収め中央寄せ、余った左右は既定では
   地色のまま（flat）。blur は絵を blur(24px)+1.1 倍拡大した層を .hero 全幅の
   .hero::after に敷き、半透明 --hero-bg を重ねて馴染ませる（isolation:isolate
   は z-index:-1 をこの ::after だけに閉じるため）。絵は JS が --hero-wide-img
   にセット（無ければ no-op）。1600px 未満・contain／split／fitwidth は対象外
   （fitwidth は常時ぼかし延伸するので 1-F 側で持つ）。
   =========================================================== */
@media (min-width: 1600px) {
  html[data-herowide="blur"][data-hero="cover"]:not([data-hero-fit="contain"]):not([data-hero-fit="split"]):not([data-hero-fit="fitwidth"]) .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(color-mix(in srgb, var(--hero-bg) 55%, transparent),
                       color-mix(in srgb, var(--hero-bg) 55%, transparent)),
      var(--hero-wide-img, none);
    background-size: cover;
    background-position: center;
    filter: blur(24px);
    transform: scale(1.1);
    pointer-events: none;
  }
}

/* ===========================================================
   1-C／1-C2. fit＝contain：顔アップの絵が cover だと広画面で顔が大きくなり
   すぎる対策。絵を等比縮小、文字欄は絵の横に並べて 1 組にし hero 水平中央へ
   寄せる。focus は効かない（絵を欠かさず見せるため常に水平中央）。901px
   以上は split（1-E）・fitwidth（1-F）と共通点が多いので同一宣言は :is() で
   まとめてある。
   =========================================================== */
html[data-hero="cover"][data-hero-fit="contain"] .hero-img--cover {
  object-fit: contain;
  object-position: center;
}
/* cover の scrim は絵に文字を重ねるためのものなので contain では不要。代わりに
   両端が地色との継ぎ目に近いときだけ馴染む淡いグラデを敷く。 */
html[data-hero="cover"][data-hero-fit="contain"] .hero-art::after {
  background:
    linear-gradient(to right, var(--hero-bg) 0, transparent 120px),
    linear-gradient(to left,  var(--hero-bg) 0, transparent 120px);
}

/* 1-C2：.hero を flex 行にし絵と文字欄を gap 付きで並べ、justify-content:center
   で組ごと中央へ。height は vh/svh の確定値にする（min-height だと中身の実寸で
   伸びる上、img の max-height:100% は祖先が確定値でないと % を解決できない
   ため）。
   2026-09 CLS 修正：fitwidth はここから外し display:grid に切替（1-F 側）。
   理由＝flex だと「.hero-body がまだ HTML パース／同期 script 実行待ちで
   DOM に無い一瞬」に .hero-art 1 個だけで justify-content:center が確定してしまい、
   直後に .hero-body が現れた瞬間もう一度中央寄せし直されて .hero-art が横に
   跳ねる（CDP の layout-shift 計測で実測。フォント読み込みとは無関係で毎回
   9ms 前後の極初期に起きる）。grid-template-columns は「今何個子要素が実在するか」
   に関係なく列幅が確定するので、この跳ねが原理的に起きない。contain は絵の幅が
   画像の実縦横比まかせ（＝そもそも子の存在に左右されない値）なのでこの不具合の
   対象外＝flex のまま。 */
@media (min-width: 901px) {
  html[data-hero="cover"][data-hero-fit="contain"] .hero {
    display: flex;
    justify-content: center;
    gap: clamp(40px, 4vw, 64px);
    height: min(calc(100vh - var(--header-h)), 1100px);
    height: min(calc(100svh - var(--header-h)), 1100px);
  }
  html[data-hero="cover"][data-hero-fit="contain"] .hero-art {
    position: relative;
    inset: auto;
    width: auto;
    height: 100%;
    flex: 0 0 auto;
  }
  /* <picture> は img のための素通しラッパー。display:block; height:100% を挟んで
     祖先の確定高さを中の img（%指定の max-height）まで通す（picture が block化
     かつ高さ明示しないとそこで途切れるという CSS の仕様のため）。 */
  html[data-hero="cover"][data-hero-fit="contain"] .hero-art > picture {
    display: block;
    height: 100%;
  }
  html[data-hero="cover"][data-hero-fit="contain"] .hero-img--cover {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    max-height: 100%;
    /* 文字欄が最小 240px まで縮んでも重ならないための頭打ち */
    max-width: calc(100vw - clamp(40px, 4vw, 64px) - 240px - 48px);
  }
  html[data-hero="cover"][data-hero-fit="contain"] .hero-body {
    grid-column: auto;
    position: static;
    inset: auto;
    width: auto;
    flex: 0 1 clamp(280px, 26vw, 420px);
    min-width: 240px;
    padding-top: 40px;
    padding-right: 0;
    padding-bottom: 40px;
    padding-left: 0;
  }
  /* 絵師名（.hero-credit）は絵の下角（文字欄の反対側）に移す。左右鏡写しは
     1-A4 の汎用規則がそのまま効くので、ここは top→bottom の入れ替えだけ。
     contain／split／fitwidth の 3 つで値が同一なので :is() でまとめている。 */
  html[data-hero="cover"]:is([data-hero-fit="contain"], [data-hero-fit="split"], [data-hero-fit="fitwidth"]) .hero-credit {
    top: auto;
    bottom: 16px;
  }
  /* hero_text_pos が left- のとき、見た目の並びだけ [文字欄][gap][絵] に鏡写し
     （DOM 順はどちらも絵→文字欄のまま。1-A2 の左右鏡写し規則とは独立。
     contain／split／fitwidth で値が同一なので :is() でまとめている）。 */
  html[data-hero-pos^="left-"][data-hero="cover"]:is([data-hero-fit="contain"], [data-hero-fit="split"], [data-hero-fit="fitwidth"]) .hero-body {
    order: -1;
  }
}
@media (max-width: 900px) {
  /* スマホは元から「絵が上・文字が下」の 1 列で表示域が狭いので、contain で
     縮小するとさらに絵が小さくなる。手機だけ cover（滿版）に戻す
     ＝桌機の cover 案スマホ表示と同じ見た目。 */
  html[data-hero="cover"][data-hero-fit="contain"] .hero-img--cover {
    object-fit: cover;
    object-position: var(--hero-focus, 50% 12%);
  }
  html[data-hero="cover"][data-hero-fit="contain"] .hero-art::after {
    background: var(--hero-scrim-sm);
  }
}

/* ===========================================================
   1-E. fit＝split：絵を片側（約 45%・上限 900px）に高さいっぱいで固定、
   反対側は無地の文字欄（分割式）。詳細度をベース規則より上げて丸ごと打ち消す。
   text_pos left/right は 1-C2 と同じ order:-1 の使い回し。上中下は 1-A2 の
   汎用規則がそのまま効くので padding-top/bottom を 40px に揃えるだけ
   （詳細度同点対策。左右 padding だけ split 独自）。境目は絵の内側だけ 120px
   を --hero-bg へ漸層。超廣角ぼかし延長（1-D）は split では出さない（除外済み）。
   =========================================================== */
@media (min-width: 901px) {
  html[data-hero="cover"][data-hero-fit="split"] .hero {
    display: flex;
    align-items: stretch;
    height: min(calc(100vh - var(--header-h)), 1100px);
    height: min(calc(100svh - var(--header-h)), 1100px);
  }
  html[data-hero="cover"][data-hero-fit="split"] .hero-art {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    flex: 0 0 clamp(420px, 45%, 900px);
    width: clamp(420px, 45%, 900px);
    height: 100%;
    /* img は自身の箱（inset:0/width:height:100%）に収まるので overflow:hidden は
       不要。visible にするのは下の矢印だけ hero 全体の中央（画像柱の外）へ
       逃がすため（画像柱は 45% しかないので .hero-art 基準の 50% だと画像側に
       寄って hero 全体の中央にならない）。 */
    overflow: visible;
  }
  /* 絵の内側（文字欄に近い側）だけ地色へ漸層。既定は文字欄が右なので絵の右端、
     left-*（文字欄が左）は絵の左端に出す。 */
  html[data-hero="cover"][data-hero-fit="split"] .hero-art::after {
    left: auto;
    right: 0;
    width: 120px;
    background: linear-gradient(to right, transparent, var(--hero-bg));
  }
  html[data-hero-pos^="left-"][data-hero="cover"][data-hero-fit="split"] .hero-art::after {
    right: auto;
    left: 0;
    background: linear-gradient(to left, transparent, var(--hero-bg));
  }
  html[data-hero="cover"][data-hero-fit="split"] .hero-body {
    grid-column: auto;
    position: static;
    inset: auto;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 40px;
    padding-right: clamp(28px, 4vw, 64px);
    padding-bottom: 40px;
    padding-left: clamp(28px, 4vw, 64px);
  }
  /* 矢印（.hero-scrolldown）は .hero-art の子なので、既定の left:50% は画像柱
     （≤45%）基準の中央にしかならない。vw は containing block の % ではなく素の
     長さなので、.hero-art の左（または右）端が hero＝ビューポート端と一致する
     ことを利用して画像柱内側の offset を打ち消し、hero 全体の水平中央に戻す。
     -bottom（文字欄が下縁）は CTA を避けて右下へ逃がす既存規則を優先するので
     対象から外す。 */
  html[data-hero="cover"][data-hero-fit="split"]:not([data-hero-pos$="-bottom"]) .hero-scrolldown {
    left: 50vw;
    transform: translateX(-50%);
  }
  html[data-hero-pos^="left-"][data-hero="cover"][data-hero-fit="split"]:not([data-hero-pos$="-bottom"]) .hero-scrolldown {
    left: auto;
    right: 50vw;
    transform: translateX(50%);
  }
}

/* ===========================================================
   1-F. fit＝fitwidth（限寬滿版）：半身アップの絵を cover のまま絵の欄の幅だけ
   max_w で頭打ちにし顔の表示サイズを一定に保つ。max_w は hero_face.py が顔の
   実測から決め、JS が --hero-max-w として立てる（無ければ 900px）。.hero 自体は
   display:grid（2026-09 CLS 修正で 1-C2 の flex 共有から独立。理由は 1-C2 の
   コメント参照）。fitwidth 固有なのは絵の中身（cover クロップ＋左右 mask
   フェード）と常時のぼかし延長（1-D と同じ仕組みだが 1600px 未満・?herowide に
   関係なく出す）だけ。scrim は不要。
   =========================================================== */
@media (min-width: 901px) {
  html[data-hero="cover"][data-hero-fit="fitwidth"] .hero {
    /* 文字欄の基準幅は 1-C2 と同じ式。絵の欄は残り幅と --hero-max-w の小さいほう。
       どちらも vw／--hero-max-w だけの計算＝子要素が実在するかに左右されない
       確定値なので、そのまま grid-template-columns に渡せる（CLS 対策）。 */
    --hero-text-col: clamp(280px, 26vw, 420px);
    --hero-art-w: min(var(--hero-max-w, 900px),
                  calc(100vw - var(--hero-text-col) - clamp(40px, 4vw, 64px) - 48px));
    /* display:flex ではなく grid＝列幅を .hero 自身の grid-template-columns で
       確定させる（1-C2 の共通コメント参照）。既定は [絵][文字欄]、左置きは
       直後の左右鏡写し規則で列そのものを入れ替える。 */
    display: grid;
    grid-template-columns: var(--hero-art-w) var(--hero-text-col);
    justify-content: center;
    column-gap: clamp(40px, 4vw, 64px);
    height: min(calc(100vh - var(--header-h)), 1100px);
    height: min(calc(100svh - var(--header-h)), 1100px);
  }
  /* .hero-art／.hero-body は auto 配置（＝「今実在する要素を先頭から詰める」）
     に任せず、どちらの列に入るかを明示指定する。1-C2 の order:-1 は auto 配置
     の並び順にしか効かず、.hero-body がまだ DOM に無い一瞬は .hero-art が
     「本来 2 列目のはずの列」に繰り上がって座ってしまう（＝結局 CLS が再発する）
     ため、grid-column を要素ごとに固定して「今 1 個しか無くても本来の列に
     居続ける」ようにする。 */
  html[data-hero="cover"][data-hero-fit="fitwidth"] .hero-art { grid-column: 1; }
  html[data-hero="cover"][data-hero-fit="fitwidth"] .hero-body { grid-column: 2; }
  /* hero_text_pos が left- のとき、列幅そのもの（[文字欄][絵]）と、どちらの
     要素がどちらの列かを両方入れ替える。 */
  html[data-hero-pos^="left-"][data-hero="cover"][data-hero-fit="fitwidth"] .hero {
    grid-template-columns: var(--hero-text-col) var(--hero-art-w);
  }
  html[data-hero-pos^="left-"][data-hero="cover"][data-hero-fit="fitwidth"] .hero-art { grid-column: 2; }
  html[data-hero-pos^="left-"][data-hero="cover"][data-hero-fit="fitwidth"] .hero-body { grid-column: 1; }
  html[data-hero="cover"][data-hero-fit="fitwidth"] .hero-art {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    width: var(--hero-art-w);
    height: 100%;
  }
  html[data-hero="cover"][data-hero-fit="fitwidth"] .hero-img--cover {
    object-fit: cover;
    object-position: var(--hero-focus, 50% 12%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 120px,
                        #000 calc(100% - 120px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 120px,
                #000 calc(100% - 120px), transparent 100%);
  }
  /* cover の scrim は「絵の上に文字を重ねる」ための帯。fitwidth では絵と文字欄が
     横並びで重ならないので出さない（1-C2 と同じ理由） */
  html[data-hero="cover"][data-hero-fit="fitwidth"] .hero-art::after {
    background: none;
  }
  /* 両側のぼかし延伸（1-D と同じレイヤーだが、こちらは常時） */
  html[data-hero="cover"][data-hero-fit="fitwidth"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(color-mix(in srgb, var(--hero-bg) 55%, transparent),
                      color-mix(in srgb, var(--hero-bg) 55%, transparent)),
      var(--hero-wide-img, none);
    background-size: cover;
    background-position: center;
    filter: blur(24px);
    transform: scale(1.1);
    pointer-events: none;
  }
  /* 底部の漸層を hero 全幅にも（1-B と同じ理屈・同じ値） */
  html[data-hero="cover"][data-hero-fit="fitwidth"] .hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: clamp(90px, 8vw, 140px);
    background: linear-gradient(to bottom, transparent, var(--bg-page));
    pointer-events: none;
  }
  html[data-hero="cover"][data-hero-fit="fitwidth"] .hero-body {
    /* grid-column は 1-C2 側で明示指定済み（既定 2 列目／left- は 1 列目）。
       幅は指定しない＝stretch が既定なのでその列の幅（--hero-text-col）に
       自動的に揃う。 */
    position: static;
    inset: auto;
    width: auto;
    min-width: 240px;
    padding-top: 40px;
    padding-right: 0;
    padding-bottom: 40px;
    padding-left: 0;
  }
}

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-body {
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 22px 18px 30px;
  }
  .hero-logo { width: min(300px, 78%); }
  /* CTA が縦積みの 2 顆になる分、読み込み前の予約を広げて CLS を防ぐ（pill--lg 2 顆 + gap） */
  .hero-cta { width: 100%; flex-direction: column; align-items: stretch; min-height: 120px; }
  .hero-cta .pill { width: 100%; }
  /* 絵師名（1-A4）。スマホは画像が上・文字が下の 1 列。文字欄と重ならない反対側の角に置く。 */
  .hero-credit { top: 10px; left: 12px; font-size: 11px; }
  html[data-hero-pos^="left-"] .hero-credit { left: auto; right: 12px; }
  /* 手機は 1 列（画像→hero-body の色ブロック）なので、画像の下にすぐ来るのは
     Information（.sec、bg-page）ではなく hero-body 自身。桌機と違いこの ::before
     の直後に bg-page は来ないので、終点を --hero-bg に替える（A 案は
     --hero-bg=--bg-page なので見た目は変わらない。B 案だけ終点が変わり、
     画像→白→淡粉のような余計な帯が出るのを防ぐ）。 */
  .hero-art::before {
    height: clamp(60px, 12vw, 90px);
    background: linear-gradient(to bottom, transparent, var(--hero-bg));
  }

  html[data-hero="cut"] .hero { grid-template-columns: minmax(0, 1fr); }
  /* 満版幅・中央。下縁で出血させるので高さは画像の縦横比より短く取る */
  html[data-hero="cut"] .hero-art { height: min(56vh, 440px); height: min(56svh, 440px); }

  /* B 案のスマホ：画像が上、文字は画像の下の色ブロック（1 列に戻す）。
     桌機で .hero-art を絶対配置にしているので、ここで通常フローに戻す。 */
  html[data-hero="cover"] .hero { grid-template-columns: minmax(0, 1fr); }
  html[data-hero="cover"] .hero-art {
    position: relative;
    inset: auto;
    height: min(54vh, 430px);
  }
  html[data-hero="cover"] .hero-img--cover { object-position: var(--hero-focus, 50% 12%); }
  html[data-hero="cover"] .hero-art::after { background: var(--hero-scrim-sm); }
  html[data-hero="cover"] .hero-body {
    grid-column: auto;
    background: var(--hero-bg);
    padding: 22px 18px 30px;
    gap: 16px;
  }
  html[data-hero="cover"] .hero-tagline { font-size: 16px; text-shadow: none; }
  html[data-theme="b"][data-hero="cover"] .hero-tagline { text-shadow: none; }
  html[data-hero="cover"] .hero-logo { filter: none; }
}