/* hero-wide-v1 — 横長の画面のヒーロー（案C）。2026-09-28。site-width-v1.css（--site-max）の後に読み込む。
   オーナー：「横長な画面だとヒーローの要素が真ん中に寄り過ぎてていまいちだな」「横長の場合はもっとヒーローの高さを大きく
   とっていいと思う」。
   原因：PC のヒーローは 1440 幅（1u = 1px）で組まれ、それより広い画面では u = 1px で止まっていた。ステージ 1440px・高さ 596px の
   まま中央に残り、1920 で画面の幅の 66%、2560 で 49% しか使わず、高さは画面の 41〜66% だった。

   規則（1441px 以上だけに効く。1440 以下は 1 つも値を変えない）
   1. 倍率は 2 つ。
      - 列の倍率 uw = --site-max ÷ 1168：横の位置を決める（題字はガター、右端の名札と一時停止ボタンは列の右端）。
      - 絵の倍率 u = min(uw, 使える高さ ÷ 596)：大きさと縦の位置を決める（ステージ 1440u × 596u、キャスト・題字・名札・波の格子）。
      画面の高さに余裕があれば u = uw で、構図は 1440 と同じ比率のまま大きくなる。縦の短い画面では u だけが下がる。
   2. 縦の短い画面でも左右両端の関係を保つ（独立レビュー：2560×900 などで右端の名札が列の右端より 50〜100px 内側に寄り、
      題字とキャストの間が 136〜179u に広がっていた）。
      - ステージの左端を「列の左ガター − 136u」に置く（中央寄せをやめる）。題字 → 最初の絵は 1440 と同じ 71u のまま。
      - キャストの横の位置を、最初の枠（x = 490u）を起点に係数 k で広げる。k = 1 + (uw ÷ u − 1) × 1168 ÷ 648。
        648u は最初の枠と最後の枠の間（490 → 1138）、1168 は列の幅。最後の枠の右端と列の右端の関係が 1440 と同じになる。
        広がった分だけ 4 人の間が開く（オーナー「4人に余白」の方向）。
      - 横にずらした分だけ、波の格子の傾き 0.12（0.6R ÷ 5R、右上がりの潮の傾き）で持ち上げ、潮の上に立つ関係を保つ。
      - 画面に高さの余裕があるとき（u = uw）は k = 1、ステージの左端 = 中央寄せと同じ位置で、今の見え方と同じ。
   3. LIVE の帯が細く覗かないようにする（独立レビュー：1920×900 で 10px、2133×1012 で 34px の黒い線が覗くのが中途半端）。
      - この既定の版（「画面の下端に合わせる」）：帯が 0 より大きく --hw-snap（96px）より小さく見えるときは、ヒーローの高さを
        画面の下端まで伸ばす。伸ばした分はステージの上（ヘッダーと名札の間の夜空）に入り、構図は下端に付いたまま動かない
        （波の下に無地を足さない。オーナーは波の下の広い無地を嫌う）。
      - もう一方の版（「帯を 96px 以上見せる」）は hero-wide-v1-reveal.css を後に読み込む。
      - 96px の理由：LIVE の帯の最初の中身（見出し）は帯の端から 96px（帯の規則）。帯が 96px より狭く見えると、見出しの
        見えない黒い線になる。主指揮の案の 64px にするなら --hw-snap を 64px にする。
   4. 下限 1px：縦の短い横長の画面でも、今の 1440 の構図より小さくしない（今の見え方と同じ）。

   ページ上部の帯（--hw-chrome）：ヘッダー 64px（--hs-bar）＋ 試作の注記バー（.study-bar があるときだけ 31px。実測の高さ。
   本番には無いので自動で 0）。--hw-screen は画面の高さ。撮影でページ全体を撮るときだけ、スクリプトが px の値で固定する。 */
@media (min-width: 1441px) {
  body.hs.eh-study.s55 {
    --hw-screen: 100svh;
    --hw-studybar: 0px;
    --hw-chrome: calc(var(--hs-bar, 64px) + var(--hw-studybar));
    --hw-avail: calc(var(--hw-screen) - var(--hw-chrome));
    --hw-uw: calc(var(--site-max, 1168px) / 1168);
    --hw-snap: 96px;
    --hw-u: max(1px, min(var(--hw-uw), calc(var(--hw-avail) / 596)));
    /* ヒーローの高さ：596u。ただし、帯の見える幅（使える高さ − 596uw）が 0〜96px のときは、使える高さいっぱい。
       1000 × max(0, 96 − 見える幅) は「96px 未満なら十分大きい値」を作るための係数（条件分岐の代わり）。 */
    --hw-hero: max(calc(596 * var(--hw-u)), min(var(--hw-avail), calc(596 * var(--hw-uw) + 1000 * max(0px, var(--hw-snap) - (var(--hw-avail) - 596 * var(--hw-uw))))));
  }
  body.hs.eh-study.s55:has(> .study-bar) {
    --hw-studybar: 31px;
  }
}
@container (min-width: 1441px) {
  .ensemble-stage.ik .ens-poster {
    --u: var(--hw-u, 1px);
    /* k × u（長さ）。k = 1 + (uw ÷ u − 1) × 1168 ÷ 648 に u を掛けた形なので、CSS の長さの計算だけで書ける */
    --hw-kx: calc(var(--u) + (var(--hw-uw, var(--u)) - var(--u)) * 1168 / 648);
    height: var(--hw-hero, calc(596 * var(--u)));
  }
  .ensemble-stage.ik .ens-stage-inner {
    top: calc(var(--hw-hero, calc(596 * var(--u))) - 596 * var(--u));
    height: calc(596 * var(--u));
    left: calc((100cqw - var(--site-max, 1168px)) / 2 - 136 * var(--u));
    transform: none;
  }
  /* 題字とリード：LIVE の列の左端（--edge、ensemble-stage.js が実測）に立つ。ステージの左端からの距離に直す */
  .ensemble-stage.ik .wm.s55-mark,
  .ensemble-stage.ik .copy {
    left: calc(var(--edge) - (100cqw - var(--site-max, 1168px)) / 2 + 136 * var(--u));
  }
  /* キャスト：--x / --y は枠の CSS（rising-v6.css）でも、人数が 4 人未満のとき hero-rotation-v2.js が書く値でも同じ単位 */
  .ensemble-stage.ik .pf {
    left: calc(490 * var(--u) + (var(--x) - 490) * var(--hw-kx));
    top: calc(var(--y) * var(--u) - 0.12 * (var(--x) - 490) * (var(--hw-kx) - var(--u)) + var(--dy));
  }
  /* 名札の上の LIVE の印：名前（max(13px, 14u)）と一緒に大きくする。12px 固定のままだと、u = 1.5 で名前 21px に対して印が
     12px になり、1440 での比率（12 : 14）から外れる。内側の余白（4px）と位置（left: −4px で文字の左端を名前にそろえる、
     rising-v9b-title.css）は px のままなので、揃えは変わらない。 */
  .ensemble-stage.ik .tag .s13-live-badge.s55-live-badge:not([hidden]) {
    font-size: max(12px, calc(12 * var(--u)));
  }
}