/* ══════════════════════════════════════════════════════════════════════════
   一画面目の「ふつうの型」（2026-10-08）
   ★トップ以外のページの見せ場は、この型で作ります。
       ・止まる作りは CSS の sticky（.stpin）。GSAP の pin は使いません。
       ・送り代（.strun）の高さは CSS で先に決めます。動きの位置は、その高さを
         測ってから assets/stage.js が決めます。
       ・見出しは、送らなくても **1.5 秒以内に読める**形で出します。
         文字が飛ぶ演出はトップだけです。
   ★使っている所 … system.html（白黒の仕事に色が戻る・動画）
                    flow.html（画面からサイトが飛び出す・パラパラマンガ）
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 入れ物 ── */
/* ★地は site.css の --ground-lit（ネイビーグレー）が正本です。ここに色を書かないこと。 */
.sthero{position:relative;background:var(--ground-lit,#16203a);color:#fff}
/* 止まる台。送り代（.strun）のぶんだけ、ここが画面に貼り付きます */
/* ★高さは site.css の --stageh（＝ lvh）です。svh にすると、スマホで
     ブラウザのつまみが隠れたときに**台の下に地がのぞきます**（2026-10-09・その48）。
     決まりの全文は site.css の --stageh のところ。ここに数字を書かないこと。 */
.stpin{position:sticky;top:0;height:var(--stageh,100vh);overflow:hidden;isolation:isolate}
/* 送り代。中身は空で、高さだけを持ちます。
   ★高さは CSS で先に決めます（動きの位置は、この高さを測ってから JS が決めます）。
   ★pointer-events:none … 透明な板が上にかぶさって、下の物が押せなくなるのを防ぎます。 */
.strun{position:relative;pointer-events:none}
.strun.r2{height:200vh}        /* 画面 2 枚ぶん（system.html） */
.strun.r3{height:300vh}        /* 画面 3 枚ぶん（flow.html） */

/* ── 地の絵（動画 ／ パラパラマンガ）── */
.stmedia{position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate;
  background:var(--ground-deep,#0E1424);will-change:transform,opacity}
.stmedia .stposter{position:absolute;inset:0;display:block}
.stmedia .stposter img,.stmedia video{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.stmedia video{opacity:0;transition:opacity .45s linear}
.stmedia video.playing{opacity:1}
/* パラパラマンガの canvas。大きさは CSS、中の目盛りは flip.js（devicePixelRatio ぶん） */
.stmedia .fbcv{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity .3s linear}
.stmedia .fbcv.shown{opacity:1}
/* 彩度を消す層。1＝白黒、0＝そのままの色。
   ★mix-blend-mode は毎こま計算するので、色が戻りきったら層ごと外します（.graygone）。 */
.stmedia .stgray{position:absolute;inset:0;display:block;pointer-events:none;
  background:#808080;mix-blend-mode:saturation;will-change:opacity}
.stmedia.graygone .stgray{display:none}
/* 文字が乗る側を暗くする膜（白い字が 4.5:1 を超えるために要ります） */
.stmedia .stveil{position:absolute;inset:0;display:block;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(2,7,24,.90) 0%,rgba(2,7,24,.84) 28%,rgba(2,7,24,.62) 52%,rgba(2,7,24,.30) 76%,rgba(2,7,24,.14) 100%),
    linear-gradient(180deg,rgba(2,7,24,.74) 0%,rgba(2,7,24,.22) 20%,rgba(2,7,24,0) 46%)}
@media (max-width:900px){
  .stmedia .stveil{background:
    linear-gradient(180deg,rgba(2,7,24,.92) 0%,rgba(2,7,24,.86) 34%,rgba(2,7,24,.52) 54%,
      rgba(2,7,24,.22) 72%,rgba(2,7,24,.44) 100%)}
}
/* 最後に、絵を沈めて地（ネイビーグレー）を出す層。
   ★色は site.css の --ground-lit です。下の .sthero と同じ地に溶けます。 */
.stmedia .stdim{position:absolute;inset:0;display:block;pointer-events:none;
  opacity:0;background:var(--ground-lit,#16203a);will-change:opacity}

/* ── 見出し ── 送らなくても読める形で、はじめから出ています ── */
.sthead{position:absolute;z-index:3;left:0;right:0;top:0;height:100%;
  display:flex;align-items:center;pointer-events:none;will-change:transform,opacity}
/* ★.wrap の幅は site.css が決めます（min(--w, 100% - 48px)）。
     ここで width を書くと、文字が画面の左端にはみ出します（2026-10-08 に実際に出ました）。 */
.sthead .kicker{color:#7FB4FF}
.sthead h1{font-weight:900;letter-spacing:-.045em;line-height:1.1;margin-top:.24em;
  font-size:clamp(30px,5.4vw,72px);max-width:16em}
.sthead h1 .nb{white-space:nowrap;display:block}
.sthead .lead{margin-top:1.4em;max-width:34em;color:#CFD8EA;
  font-size:clamp(14px,1.25vw,16.5px);line-height:1.95}
.sthead .btn{pointer-events:auto}
/* 上に寄せる型（進め方 … 飛び出したカードと重ねないため） */
.sthero.top .sthead{align-items:flex-start;padding-top:clamp(92px,13vh,150px)}
@media (max-width:900px){
  .sthero.top .sthead{padding-top:clamp(84px,11vh,120px)}
  .sthead h1{font-size:clamp(27px,7.6vw,40px)}
}

/* ══ 大きく出る一行（トップの「見えるようになる。」と同じ組み方）════════
   ★ここが正本です。トップの `.sgline` も、この `.bigline` を使います
     （同じ決まりを 2 か所に書かないため。place は top.css が持ちます）。
       小さく 1 行目 → 大きく 2 行目。2 行目の語に、見出しと同じ青い線。
   ★四角い帯は使いません。字の後ろだけを、ふちのぼけた楕円でぼんやり暗くします。
     ★この暗がりは動かしません。動かすのは文字の opacity と y だけです。 */
.bigline{font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  font-weight:900;color:#fff;letter-spacing:-.01em}
.bigline::before{content:"";position:absolute;left:50%;top:50%;
  width:min(1480px,112vw);height:400px;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(3,9,26,.86) 0%,rgba(3,9,26,.74) 42%,rgba(3,9,26,.40) 68%,rgba(3,9,26,.12) 85%,rgba(3,9,26,0) 100%)}
.bigline .l1{display:block;font-size:clamp(15px,1.55vw,23px);line-height:1.5;
  color:#DCE6F8;letter-spacing:.01em;will-change:transform,opacity}
.bigline .l2{display:block;margin-top:.18em;font-size:clamp(28px,4.3vw,62px);
  line-height:1.12;letter-spacing:-.03em;will-change:transform,opacity}
.bigline .hl{position:relative;display:inline-block}
.bigline .hl .ln{position:absolute;left:0;right:0;bottom:-.04em;height:.085em;
  display:block;border-radius:.05em;background:linear-gradient(90deg,#2F6FD6,#7FB4FF);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}
@media (max-width:900px){
  .bigline::before{height:330px;width:152vw}
  .bigline .l1{font-size:clamp(14px,4vw,19px)}
  .bigline .l2{font-size:clamp(26px,8.4vw,38px)}
}
/* ふつうの型での置き場所（トップは top.css の .sgline が持ちます） */
.stline{position:absolute;z-index:4;left:0;right:0;top:50%;margin:0;
  transform:translateY(-50%);text-align:center;opacity:0;pointer-events:none;
  will-change:opacity}
/* ★★楕円の暗がりは出しません（2026-10-09・その48）。
     トップ（.sgline）では 2026-10-08 に外しましたが、システム力と進め方は
     そのままでした。絵が地（ネイビーグレー）に沈みきったあと、
     **字の後ろだけが黒いしみ**に見えます。
     字の読みやすさは、絵の側の膜（.stmedia .stveil）と、
     沈んだあとの地（--ground-lit。いちばん明るい所でも白い字と 5.4：1）で
     足りています。トップと同じ直し方です。 */
.stline.bigline::before{display:none}

/* ══ 入れ替わる短い一文（進め方の ①②③）══════════════════════════════
   ★3 つとも同じ場所・同じ大きさです。前の文が上へ消え、次の文が下から出ます。
   ★重なって置くので、入れ物の高さは中でいちばん高い文に合わせます（grid）。 */
.stnote{position:absolute;z-index:4;left:0;right:0;bottom:clamp(44px,9vh,96px);
  pointer-events:none}
.stnote .wrap{display:grid}
.stnote .nt{grid-area:1/1;display:flex;align-items:center;gap:14px;
  opacity:0;will-change:transform,opacity}
.stnote .nt em{flex:0 0 auto;display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;background:var(--blue,#2F6FD6);color:#fff;
  font-style:normal;font-family:var(--latin);font-weight:900;font-size:15px}
.stnote .nt b{font-weight:900;letter-spacing:-.02em;
  font-size:clamp(19px,2.6vw,32px);line-height:1.3;
  text-shadow:0 2px 18px rgba(3,9,26,.75),0 0 40px rgba(3,9,26,.55)}
@media (max-width:900px){
  .stnote{bottom:clamp(36px,7vh,72px)}
  .stnote .nt{gap:11px}
  .stnote .nt em{width:32px;height:32px;font-size:13px}
}

/* ══ 動きを減らす設定・通信を節約する設定 ═══════════════════════════════
   ★めくりません・動かしません。**最後のコマ（色付き）を 1 枚**置き、
     見出しも一行も一文も、はじめから出ている形にします。
   ★止めるのもやめます（sticky を外し、ふつうの段にします）。 */
.sthero.nomo .stpin{position:relative;height:auto;overflow:visible;
  padding:clamp(96px,14vh,170px) 0 clamp(64px,9vh,110px)}
.sthero.nomo .strun{display:none}
.sthero.nomo .stmedia{position:relative;inset:auto;height:min(52vh,420px);
  margin:0 0 30px;border-radius:14px}
.sthero.nomo .stmedia video{display:none}
.sthero.nomo .stmedia .stgray{opacity:0}
.sthero.nomo .stmedia .stdim{opacity:0}
.sthero.nomo .stmedia .stveil{opacity:.45;border-radius:14px}
.sthero.nomo .sthead{position:relative;height:auto;display:block;padding-top:0}
.sthero.nomo .stline{position:relative;top:auto;transform:none;opacity:1;
  margin:30px 0 0;text-align:left}
.sthero.nomo .stline::before{display:none}
.sthero.nomo .stline .l1,.sthero.nomo .stline .l2{opacity:1;transform:none}
.sthero.nomo .stline .hl .ln{transform:scaleX(1)}
.sthero.nomo .stnote{position:relative;bottom:auto;margin-top:26px}
.sthero.nomo .stnote .wrap{display:block}
.sthero.nomo .stnote .nt{opacity:1;transform:none;margin-top:14px}
.sthero.nomo .stnote .nt b{text-shadow:none;font-size:clamp(17px,2.2vw,22px)}