/* アイドルの母（仮題）ティザーサイト — 2026-10-12 draft／2026-10-16 横長の画面に横長の画／2026-10-16（2回目）最初の画面の文字を PC もスマホも横書きに
   ／2026-10-16（3回目）Introduction の4文に合わせて背景の画を場面1〜4に切り替える（「場面」の節。直す前は tmp/abura-poster/site-pre1016c/）
   （横長の画面＝資料の表紙の考え方で左の暗い壁に左揃え、縦長の画面＝ポスター A の考え方でコピーは上・タイトルと主演は下。直す前は tmp/abura-poster/site-pre1016b/）
   縦の画（kv.webp 1024×1536）: 画像の座標（%）は元画像の位置。リングの中心 (582,540)・外径 179px、画面の顔の中心 (612,640)
   横の画（kv-yoko.webp 1536×1024）: 画面が横長（幅 ＞ 高さ＝orientation:landscape）のときだけ使う。座標はファイル末尾の横長の節 */

:root{
  --bg:#06070a;
  --ink:rgba(240,242,248,.93);
  --ink-2:rgba(228,232,242,.70);
  --ink-3:rgba(214,222,236,.50);
  --accent:rgba(186,204,226,.82);
  --vw:1vw;
  --vh:1vh;
  --svh:1vh;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  /* 縦長の画面のタイトルの字の大きさ（下の --tb の計算にも使う） */
  --ts-p:clamp(38px, 10.6vw, 68px);
}
@supports (height:1lvh){ :root{ --vh:1lvh; --svh:1svh; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
p,h1,h2,dl,dd{ margin:0; }
img,picture{ display:block; }
.stage--base picture{ width:100%; height:100%; }

/* ---------- 背景の部屋 ---------- */
.room{
  position:fixed; left:0; top:0; width:100%;
  height:100vh; height:100lvh;
  overflow:hidden; z-index:0; pointer-events:none; background:var(--bg);
}
.stage{
  /* スマホ: 画面を覆う（左右を切る）。顔とリングが入るよう、横は元画像の 46% の位置を中心に
     2026-10-16（2回目）: 画の下の暗いところにタイトル・主演を横書きで置く（ポスター A の考え方）。
     人物の下端（元画像の 75.8%。開幕の寄り 1.06 倍で画の高さの 77.95% の位置）が、文字の帯（--tb）より上に来るよう、
     画面が縦に短いとき（ツールバーが出ているスマホ・小さいスマホ）だけ画を少し小さくする。そのとき画の下は暗がりに溶かす */
  --tb:calc(var(--svh) * 1.8 + 46px + var(--ts-p) + clamp(14px, 2.2vh, 24px) + clamp(19px, 5.3vw, 26px) * 1.4 + clamp(8px, 1.3vh, 14px) + 17px + 8px);
  --w:max(calc(var(--vw) * 100), min(calc(var(--vh) * 66.6667), calc((var(--svh) * 100 - var(--tb)) / 1.1693)));
  position:absolute;
  width:var(--w); height:calc(var(--w) * 1.5);
  left:clamp(calc(var(--vw) * 100 - var(--w)), calc(var(--vw) * 50 - var(--w) * .46), 0px);
  top:min(0px, calc((var(--vh) * 100 - var(--w) * 1.5) * .5));
  transform-origin:60% 40%;
  transform:scale(1.06);
  will-change:transform;
}
.kv{ width:100%; height:100%; object-fit:cover; }
.stage--base .kv{
  -webkit-mask-image:linear-gradient(to bottom, #000 90%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 90%, transparent 100%);
}
.ambient{ display:none; }

.face-glow{
  position:absolute; left:59.77%; top:41.67%; width:24%; aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(255,255,255,.97), rgba(242,245,255,.80) 34%, rgba(226,233,255,.30) 64%, rgba(226,233,255,0) 100%);
  mix-blend-mode:screen;
}
.breath-dim{ position:absolute; inset:0; background:#000; opacity:0; }
.shade{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.50) 0%, rgba(0,0,0,0) 17%),
    linear-gradient(to bottom, rgba(0,0,0,0) 64%, rgba(0,0,0,.58) 79%, rgba(0,0,0,.92) 100%);
}
.veil{ position:absolute; inset:0; background:#040508; opacity:0; --veil-max:.85; --ring-min:.42; }
.lights-off{ position:absolute; inset:0; background:#000; opacity:0; }

/* リングライトの層: 部屋が暗くなっても光が残る（screen で重ねる） */
.stage--top{ mix-blend-mode:screen; }
.ring-wrap,.ring-breath{ position:absolute; inset:0; }
.ring{ position:absolute; left:37.109%; top:22.135%; width:40.039%; height:auto; }
.halo{
  position:absolute; left:56.836%; top:35.156%; width:46%; aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(214,226,255,0) 57%, rgba(214,226,255,.40) 69%, rgba(214,226,255,.14) 82%, rgba(214,226,255,0) 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 41%, transparent 53%);
          mask-image:linear-gradient(to bottom, #000 41%, transparent 53%);
}
.wallglow{
  position:absolute; left:56.836%; top:31%; width:120%; aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(200,214,255,.13), rgba(200,214,255,.05) 45%, rgba(200,214,255,0) 72%);
}

/* ---------- 場面（2026-10-16・3回目）: Introduction の4文に合わせて、部屋の画の上に重ねて切り替える ----------
   切り替えは site.js（各文の上端が画面の中ほどを越えたら）。新しい場面を上に重ねて 1.1 秒でフェードインし、出きったら下の画を消す。
   画は、横長の画面＝横の画（3:2・左 40% が暗い）、縦長の画面＝縦の画（2:3・全体を暗め）。index.html の <picture> と同じ orientation の条件。
   文字の下の暗さは場面ごとに --dim（全体）と --col（文字の列）で決める。文字の列は、横長の広い画面（1240px 以上）＝左の列、それ以外＝中央の列 */
.scenes{ position:absolute; inset:0; isolation:isolate; }
.scene{
  position:absolute; inset:0; overflow:hidden;
  opacity:0; visibility:hidden;
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1), visibility 0s linear 1.1s;
  --dim:.2; --col:.4; --pos:50% 50%; --org:50% 50%; --zoom:1.06;
}
.scene.is-on{ opacity:1; visibility:visible; transition:opacity 1.1s cubic-bezier(.4,0,.2,1), visibility 0s; }
.scene.is-under,.scene.is-under img{ transition:none; }
.scene picture{ width:100%; height:100%; }
.scene img{
  width:100%; height:100%; object-fit:cover; object-position:var(--pos);
  transform-origin:var(--org); transform:scale(1);
  transition:transform 0s linear 1.2s;          /* 消えきってから元の大きさに戻す */
}
.scene.is-on img{ transform:scale(var(--zoom)); transition:transform 16s cubic-bezier(.25,.1,.3,1); }   /* 出ているあいだ、ゆっくり寄る（--zoom 倍まで） */
.scene::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 18%),
    linear-gradient(to bottom, rgba(0,0,0,0) 62%, rgba(0,0,0,.55) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,var(--col)) 16%, rgba(0,0,0,var(--col)) 84%, rgba(0,0,0,0) 100%),
    rgba(0,0,0,var(--dim));
}
/* 場面が出ているあいだは、リングライトの層（部屋の画に合わせた光）を消す。部屋に戻ると元の位置のまま戻る */
.ring-breath > *{ transition:opacity 1.1s cubic-bezier(.4,0,.2,1); }
.in-scene .ring-breath > *{ opacity:0; }

/* 場面ごとの暗さと位置（縦の画・中央の列）。--pos は縦の画の横の切り位置（スマホは画の幅の約 7 割しか映らない）。横長の画面の値はファイル末尾の横長の節 */
.scene--1{ --dim:.10; --col:.40; --pos:62% 50%; --org:50% 45%; --zoom:1.02; }   /* 5人が全員入るよう、寄りは小さく */
.scene--2{ --dim:.06; --col:.28; --pos:74% 50%; --org:50% 55%; }                  /* 元が暗い */
.scene--3{ --dim:.16; --col:.45; --pos:58% 50%; --org:50% 50%; }                  /* 白いシーツの上に文字が乗る */
.scene--4{ --dim:.20; --col:.50; --pos:75% 50%; --org:50% 42%; }                  /* 明るいモニターの上に文字が乗る */

/* ---------- 開幕: 暗闇でリングライトが点き、部屋が浮かぶ ---------- */
.js .lights-off{ opacity:1; }
.js .ring-wrap{ opacity:0; }
.js.is-ready .lights-off{ opacity:0; transition:opacity 2.3s cubic-bezier(.45,0,.2,1) .6s; }
.js.is-ready .ring-wrap{ animation:ring-on 1s linear .15s both; }
.js.is-ready .ring-breath{ animation:breathe 3.8s ease-in-out 1.4s infinite alternate both; }
.js.is-ready .breath-dim{ animation:breathe-dim 3.8s ease-in-out 1.4s infinite alternate both; }
@keyframes ring-on{
  0%{opacity:0} 14%{opacity:.75} 22%{opacity:.18} 34%{opacity:.9} 42%{opacity:.55} 60%,100%{opacity:1}
}
@keyframes breathe{ from{opacity:.70} to{opacity:1} }
@keyframes breathe-dim{ from{opacity:.13} to{opacity:0} }

/* 文字の出方（横書き）: 上の行から順に、少し下から浮かぶ。タイトルだけはピントが合うように（ぼけ→くっきり） */
.js .fade{ opacity:0; transform:translateY(10px); animation:failsafe 0s 5s forwards; }
.js .title.fade{ filter:blur(7px); }
.js.is-ready .fade{ opacity:1; transform:none; filter:none; transition:opacity 1.8s ease var(--d,0s), transform 1.8s cubic-bezier(.2,.6,.2,1) var(--d,0s), filter 2.4s cubic-bezier(.3,.1,.2,1) var(--d,0s); }
@keyframes failsafe{ to{ opacity:1; transform:none; filter:none; } }

/* ---------- ファーストビュー ---------- */
.hero{
  position:relative; z-index:1;
  height:100vh; height:100svh; min-height:540px;
  overflow-x:clip;   /* 2026-10-16（3回目）: タイトルの後ろの暗がり（幅 150%）が左右にはみ出し、スマホでページ幅が 489px に広がって縮小表示になっていたのを止める（画面の外の分を切るだけで、見た目は変わらない） */
}
/* 縦長の画面（縦の画）: ポスター A の考え方。コピーは画の上の暗い壁（カレンダーより上）、タイトル・主演は画の下の暗いところ。
   文字の帯の高さは .stage の --tb と対応させている（帯の中身を変えたら --tb も見直す） */
.hero__copy{
  position:absolute; left:0; right:0;
  top:calc(5.6vh + env(safe-area-inset-top)); top:calc(5.6svh + env(safe-area-inset-top));
  text-align:center;
  font-size:clamp(17px, 4.7vw, 24px); letter-spacing:.14em; padding-left:.14em;
  color:rgba(255,255,255,.92);
  text-shadow:0 0 18px rgba(0,0,0,.8), 0 0 2px rgba(0,0,0,.55);
  font-feature-settings:"palt";
}
.hero__credit{
  position:absolute; left:0; right:0;
  bottom:calc(1.8vh + 46px + env(safe-area-inset-bottom)); bottom:calc(1.8svh + 46px + env(safe-area-inset-bottom));
  text-align:center;
  text-shadow:0 0 22px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.5);
}
/* タイトルの後ろに薄い暗がり（画の下のぼけた机の明るい帯を抑えて、細い字を読みやすく）。文字と一緒に現れる */
.hero__credit::before{
  content:""; position:absolute; left:50%; top:50%; z-index:-1; pointer-events:none;
  width:min(150%, 640px); height:240%; transform:translate(-50%,-46%);
  background:radial-gradient(closest-side, rgba(0,0,0,.42), rgba(0,0,0,.2) 55%, rgba(0,0,0,0));
}
.js .hero__credit::before{ opacity:0; }
.js.is-ready .hero__credit::before{ opacity:1; transition:opacity 2.4s ease 1.6s; }
.title{
  font-weight:200; line-height:1;
  font-size:var(--ts-p);
  letter-spacing:.16em; padding-left:.16em;
  white-space:nowrap; color:#fff;
  font-feature-settings:"palt";
}
.title .kari{
  font-weight:400; font-size:max(11.5px, .29em); letter-spacing:.06em;
  vertical-align:.8em; margin-left:-.05em; color:rgba(255,255,255,.78);
}
.star{
  margin-top:clamp(14px, 2.2vh, 24px);
  font-size:clamp(19px, 5.3vw, 26px); line-height:1.4; letter-spacing:.4em; padding-left:.4em;
  color:rgba(255,255,255,.96);
}
.star small{ font-size:max(11.5px, .52em); letter-spacing:.24em; margin-right:.6em; vertical-align:.2em; color:rgba(255,255,255,.82); }
.unit{
  margin-top:clamp(8px, 1.3vh, 14px);
  font-size:12px; line-height:1.4; letter-spacing:.3em; padding-left:.3em; color:rgba(255,255,255,.7);
}
.cue{
  position:absolute; left:50%;
  bottom:calc(1.8vh + env(safe-area-inset-bottom)); bottom:calc(1.8svh + env(safe-area-inset-bottom));
  width:1px; height:34px; overflow:hidden; background:rgba(255,255,255,.16);
}
.cue::after{
  content:""; position:absolute; left:0; top:-45%; width:1px; height:45%;
  background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.9));
  animation:cue 2.8s cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes cue{ to{ top:100%; } }

/* ---------- 本文 ---------- */
main,.foot{ position:relative; z-index:1; }
.intro,.credits{
  width:min(100%, 40rem); margin:0 auto;
  padding:0 26px; text-align:center;
  text-shadow:0 0 14px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.6);
}
.intro{ padding-top:34vh; padding-bottom:20vh; }
.credits{ padding-top:8vh; padding-bottom:6vh; }

.label{
  font-weight:400; font-size:11px; letter-spacing:.42em; padding-left:.42em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:clamp(36px, 6vh, 56px);
}
.label::before{
  content:""; display:block; width:1px; height:44px; margin:0 auto 20px;
  background:linear-gradient(rgba(186,204,226,0), rgba(186,204,226,.6));
}
.intro__body p{
  font-size:clamp(15px, 4vw, 18px); line-height:2.25; letter-spacing:.07em;
  color:var(--ink); line-break:strict;
}
.intro__body p + p{ margin-top:1.9em; }
.intro__body .quote{
  font-size:clamp(17px, 4.6vw, 21px); letter-spacing:.12em; color:#fff;
  margin-top:2.2em; margin-bottom:.3em;
}
.intro__body .quote + p{ margin-top:2.2em; }
/* 1文＝1場面（2026-10-16・3回目）: 文と文の間をあけ、1つの場面のあいだに読む文が1つになるようにする。
   site.js が場面の切り替えを始めたとき（.has-scenes）だけ。動かないときは場面も出ないので、元の詰めた組みのまま */
.has-scenes .intro__body p + p,
.has-scenes .intro__body .quote,
.has-scenes .intro__body .quote + p{ margin-top:60vh; margin-top:60svh; }
.has-scenes .intro__body .quote{ margin-bottom:0; }
.has-scenes .intro .status{ margin-top:66vh; margin-top:66svh; }
.status{
  margin-top:clamp(56px, 10vh, 96px);
  font-size:12px; letter-spacing:.5em; color:var(--ink-2);
}
.status span{ display:inline-flex; align-items:center; gap:1.4em; padding-left:.5em; }
.status span::before,.status span::after{
  content:""; width:28px; height:1px; background:rgba(214,222,236,.35);
}

.credit-list{ display:grid; gap:clamp(26px, 4.4vh, 40px); }
.credit-list dt{ font-size:11px; letter-spacing:.32em; padding-left:.32em; color:var(--ink-2); margin-bottom:.8em; text-shadow:0 0 10px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.9); }
.credit-list dd{ font-size:clamp(20px, 5.4vw, 25px); letter-spacing:.4em; padding-left:.4em; color:var(--ink); }
.unit-note{
  margin:clamp(64px, 11vh, 110px) auto 0; max-width:25em;
  font-size:13px; line-height:2.05; letter-spacing:.05em; color:var(--ink-2);
  text-align:left; word-break:auto-phrase; text-wrap:pretty;
}
.unit-note__name{
  text-align:center; font-size:12px; letter-spacing:.3em; color:var(--ink);
  margin-bottom:1.3em;
}

.foot{
  padding:10vh 24px calc(5vh + env(safe-area-inset-bottom));
  text-align:center; text-shadow:0 0 12px rgba(0,0,0,.9);
}
.foot__title{ font-weight:200; font-size:22px; letter-spacing:.3em; padding-left:.3em; color:var(--ink); font-feature-settings:"palt"; }
.foot__title span{ font-weight:400; font-size:10px; letter-spacing:.06em; margin-left:.2em; color:var(--ink-2); }
.foot__copy{ margin-top:28px; font-size:11px; letter-spacing:.24em; color:var(--ink-2); }
.foot__note{ margin:14px auto 0; max-width:30em; word-break:auto-phrase; font-size:10.5px; line-height:1.9; letter-spacing:.04em; color:var(--ink-3); }

/* スクロールで現れる（site.js が .io を付けたときだけ隠す。読み込みに失敗しても文字は出る） */
.io .reveal{ opacity:0; transform:translateY(14px); transition:opacity 1.6s ease, transform 1.6s cubic-bezier(.2,.6,.2,1); }
.io .reveal.is-in{ opacity:1; transform:none; }

/* ---------- PC・横長の画面: 縦長の画を高さいっぱいに置き、左右の暗がりへ溶かす ---------- */
@media (min-aspect-ratio:5/6){
  .stage{
    --w:calc(var(--vh) * 66.6667);
    left:max(0px, calc(var(--vw) * 40 - var(--w) / 2));
    top:0;
  }
  .stage--base .kv{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.25) 4%, rgba(0,0,0,.65) 9%, #000 15%, #000 66%, rgba(0,0,0,.82) 74%, rgba(0,0,0,.52) 83%, rgba(0,0,0,.22) 92%, rgba(0,0,0,.06) 97%, transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.25) 4%, rgba(0,0,0,.65) 9%, #000 15%, #000 66%, rgba(0,0,0,.82) 74%, rgba(0,0,0,.52) 83%, rgba(0,0,0,.22) 92%, rgba(0,0,0,.06) 97%, transparent 100%);
  }
  .ambient{
    display:block; position:absolute; inset:0;
    background:radial-gradient(ellipse 46% 58% at 40% 36%, rgba(150,165,200,.10), rgba(150,165,200,0) 72%);
  }
  .shade{
    background:
      radial-gradient(ellipse 70% 90% at 40% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%),
      linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 15%),
      linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,.6) 100%);
  }

  .hero{ min-height:600px; }
  .cue{ left:calc(var(--vw) * 40); }

  .intro__body p{ font-size:18px; }
  .intro__body .quote{ font-size:22px; }
}

/* 正方形に近い縦長の画面（幅:高さ 5:6〜1:1。縦の画を高さいっぱいに、画面の 40% の位置を中心に置く）:
   文字はポスター A の考え方で、画の中心にそろえる。タイトル・主演は人物の下端（画面の高さの 77.95%。開幕の寄りを含む）より下から置く */
@media (min-aspect-ratio:5/6) and (orientation:portrait){
  :root{ --ts-p:clamp(38px, 6.2vh, 68px); }
  .shade{
    background:
      radial-gradient(ellipse 70% 90% at 40% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%),
      linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 15%),
      linear-gradient(to bottom, rgba(0,0,0,0) 64%, rgba(0,0,0,.58) 79%, rgba(0,0,0,.92) 100%);
  }
  .hero__copy{ right:auto; width:calc(var(--vw) * 80); }
  .hero__credit{ right:auto; width:calc(var(--vw) * 80); bottom:auto; top:calc(var(--vh) * 77.95 + 8px); }
  .star{ margin-top:clamp(12px, 1.8vh, 20px); font-size:clamp(16px, 2.6vh, 26px); }
}

/* 横に余裕のある PC: 本文は画の右の暗がりに置き、左の部屋（リングライト）を見せたまま読ませる */
@media (min-aspect-ratio:5/6) and (min-width:1240px){
  main,.foot{ padding-left:calc(var(--vw) * 40 + 33.333vh); }
  .intro,.credits{ width:min(100%, 34rem); }
  .veil{ --veil-max:.66; --ring-min:.78; }
}

/* ---------- 横長の画面（幅 ＞ 高さ）: 横長の画を全面に。文字は左の暗い壁に置く ----------
   index.html の <picture> と同じ条件（orientation:landscape）。画と組みが食い違わないよう、条件は必ずそろえる。
   横の画の座標（元画像 1536×1024 の px → %）:
     リングの中心 (1142.3,344.7)・帯の半径 117.6〜142.4（中心 130.2）・モニター上端 y=322
     画面の顔の光（元画像の白い塊の中心は (1154,436)。縦の画と同じく目の側へ少し上げて (1154,432) に置く）／左の何もない壁 x=100〜550（6.5〜35.8%）・y=0〜740
     ring-yoko.webp は元画像の (976,184)〜(1308,332) をリングの帯だけ残して切り出したもの */
@media (orientation:landscape){
  :root{
    /* 画の幅: 画面を覆う。ただし正方形に近い画面では横の切り落としを 125vw までに抑え、上に暗がりを残す */
    --kw:max(calc(var(--vw) * 100), min(calc(var(--vh) * 150), calc(var(--vw) * 125)));
    --kh:calc(var(--kw) / 1.5);
    /* 横位置: 左端から見せる。画面が狭いときだけ左を切り、元画像の 88%（モニターと三脚の先）までは必ず入れる */
    --kx:min(0px, calc(var(--vw) * 100 - var(--kw) * .88));
    /* 縦位置: はみ出す分は上 35%・下 65% で切る。足りないとき（正方形に近い画面）は下にそろえる */
    --ky:max(calc((var(--vh) * 100 - var(--kh)) * .35), calc(var(--vh) * 100 - var(--kh)));
    /* 文字の列（左の暗い壁）: 左端は元画像の 6%（狭い画面でも画面の左から 30px は空ける）、右端は元画像の 33.5%。
       壁は元画像の x 6.5〜35.8%。開幕の寄り（1.06 倍・顔が中心）では 35.8% が 33.4% まで寄るので、右端を 33.5% にして本棚の柱に届かせない */
    --cl:max(calc(30px + env(safe-area-inset-left)), calc(var(--kx) + var(--kw) * .06));
    --cw:calc(var(--kx) + var(--kw) * .335 - var(--cl));
    /* タイトルの字の大きさ: 列の幅いっぱい（実測で 6字＋字間＝字の大きさの 5.86 倍）。高さの低い画面では高さでも抑える */
    --ts:min(112px, calc(var(--cw) / 5.9), calc(var(--vh) * 11));
    /* 縦の基準: 画面の顔の光の高さ（元画像の 41.8%。開幕の寄りの中心なので、寄っても動かない） */
    --cy:calc(var(--ky) + var(--kh) * .418);
  }
  .stage{
    width:var(--kw); height:var(--kh);
    left:var(--kx); top:var(--ky);
    transform-origin:75.13% 41.8%;
  }
  .stage--base .kv{ -webkit-mask-image:none; mask-image:none; }
  .ambient{ display:none; }

  /* 光の層（横の画の位置） */
  .ring{ left:63.5417%; top:17.9688%; width:21.6146%; }
  .halo{ left:74.368%; top:33.662%; width:26.43%; }
  .wallglow{ left:74.368%; top:29.8%; width:68.75%; }
  .face-glow{ left:75.13%; top:42.19%; width:13.4%; }

  .shade{
    background:
      linear-gradient(to right, rgba(0,0,0,.40) 0%, rgba(0,0,0,.24) 20%, rgba(0,0,0,0) 38%),
      radial-gradient(ellipse 72% 92% at 62% 44%, rgba(0,0,0,0) 46%, rgba(0,0,0,.5) 100%),
      linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 15%),
      linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,.6) 100%);
  }

  /* ファーストビューの文字（資料の表紙の考え方）: 左の暗い壁に、上から「コピー → タイトル → 主演 → A・BU・RA 新作」を左揃えの横書きで。
     タイトルの下端を画面の顔の光の高さにそろえ、タイトルから右へ、画面の顔へ目が渡るようにする */
  .hero__copy,.hero__credit{ left:var(--cl); right:auto; text-align:left; padding-left:0; }
  .hero__credit::before{ display:none; }   /* 左の壁は暗いので、タイトルの後ろの暗がりは要らない */
  .hero__copy{
    top:calc(var(--cy) - var(--ts) * 1.94 - 1.5em);
    font-size:clamp(14px, calc(var(--ts) * .34), 30px);
    letter-spacing:.16em;
  }
  .hero__credit{ top:calc(var(--cy) - var(--ts) * .9); bottom:auto; }
  .title{
    width:fit-content; font-size:var(--ts);
    letter-spacing:.1em; padding-left:0; margin-right:-.1em;
  }
  .title .kari{
    display:block; text-align:right; vertical-align:baseline;
    font-size:max(11.5px, .21em); letter-spacing:.08em; margin:.55em -.08em 0 0;
  }
  .star{
    margin-top:calc(var(--ts) * .5);
    font-size:clamp(16px, calc(var(--ts) * .42), 34px); letter-spacing:.34em; padding-left:0;
  }
  .star small{ letter-spacing:.2em; margin-right:.75em; }
  .unit{
    margin-top:calc(var(--ts) * .22);
    font-size:clamp(11px, calc(var(--ts) * .19), 15px); letter-spacing:.3em; padding-left:0;
  }
  .cue{ left:50%; }
}
/* 正方形に近い横長（6:5 まで）: 画の上に暗がりが残るので、画の上端をぼかして溶かす */
@media (orientation:landscape) and (max-aspect-ratio:6/5){
  .stage--base .kv{
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.6) 4%, #000 10%);
            mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.6) 4%, #000 10%);
  }
}
/* 横に余裕のある横長の画面: 本文も左の壁の上で読ませ、右のリングライトとモニターを見せたままにする */
@media (orientation:landscape) and (min-width:1240px){
  main,.foot{ padding-left:0; width:calc(var(--kx) + var(--kw) * .36); }
  .intro,.credits{ width:min(100%, 34rem); }
}

/* 場面（横の画）: 主役は画の右 60%。横を切るとき（正方形に近い横長）は右側を残す */
@media (orientation:landscape){
  /* ここの暗さは、文字が画の中央に乗る横長（1240px 未満: 横にしたスマホ・小さいノート PC など）の値 */
  .scene--1{ --dim:.14; --col:.45; --pos:72% 45%; --org:68% 42%; --zoom:1.06; }
  .scene--2{ --dim:.10; --col:.40; --pos:72% 55%; --org:68% 50%; }
  .scene--3{ --dim:.16; --col:.48; --pos:72% 50%; --org:62% 50%; }
  .scene--4{ --dim:.24; --col:.55; --pos:72% 0%; --org:70% 6%; }   /* 上のリングライトの弧を切らない（上端を基準に切り・寄る） */
}
/* 横長の広い画面: 文字は左の列（画の左 36% まで）。左を暗く、右の主役は明るいまま */
@media (orientation:landscape) and (min-width:1240px){
  .scene::after{
    background:
      linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 15%),
      linear-gradient(to bottom, rgba(0,0,0,0) 72%, rgba(0,0,0,.5) 100%),
      linear-gradient(to right, rgba(0,0,0,var(--col)) 0%, rgba(0,0,0,var(--col)) 30%, rgba(0,0,0,0) 46%),
      rgba(0,0,0,var(--dim));
  }
  .scene--1{ --dim:0;   --col:.45; }   /* 左下のペンライトが文字の列の端で光るので、左を少し深く */
  .scene--2{ --dim:0;   --col:.30; }
  .scene--3{ --dim:.05; --col:.35; }
  .scene--4{ --dim:.18; --col:.40; }   /* モニターが明るいので、ほかの場面と明るさをそろえる */
}

/* 動きを減らす設定の端末: 開幕・呼吸・寄り引きを止める */
@media (prefers-reduced-motion:reduce){
  .js .lights-off{ opacity:0; }
  .js .ring-wrap{ opacity:1; }
  .js.is-ready .ring-wrap,.js.is-ready .ring-breath,.js.is-ready .breath-dim,.cue::after{ animation:none; }
  .js .fade,.js.is-ready .fade{ opacity:1; transform:none; filter:none; transition:none; animation:none; }
  .js .hero__credit::before,.js.is-ready .hero__credit::before{ opacity:1; transition:none; }
  .io .reveal{ opacity:1; transform:none; transition:none; }
  .stage{ transform:none; }
  /* 場面: フェードと寄りなしで切り替える */
  .scene,.scene.is-on,.scene img,.scene.is-on img,.ring-breath > *{ transition:none; }
  .scene img,.scene.is-on img{ transform:none; }
}