html,body{margin:0;background:#ffffff}
:root{--bg:#ffffff;--ink:#141414;--muted:#6f6f6f;--ink-a05:rgba(20,20,20,0.04);--ink-a22:rgba(20,20,20,0.22);--ink-a45:rgba(20,20,20,0.45);--ink-a60:rgba(20,20,20,0.62);--veil:rgba(255,255,255,0.22);--glow:radial-gradient(720px 520px at 74% 26%, rgba(110,110,110,0.9), rgba(110,110,110,0) 70%), radial-gradient(980px 760px at 20% 86%, rgba(60,60,60,0.8), rgba(60,60,60,0) 72%), radial-gradient(560px 460px at 92% 64%, rgba(160,160,160,0.7), rgba(160,160,160,0) 70%);--wipe-bg:#141414;--alt-ink:#f2f2f2;--alt-muted:#9c9c9c;--alt-a80:rgba(242,242,242,0.8);--alt-a30:rgba(242,242,242,0.3);--alt-a18:rgba(242,242,242,0.18);--alt-a14:rgba(242,242,242,0.14);--alt-a11:rgba(242,242,242,0.11);--s7-bg:#141414;--s8-bg:#262626;--seq:#313131;--carve:#4f4f4f;--glass:rgba(24,24,24,0.5);--smoke:radial-gradient(60% 45% at 22% 28%, rgba(210,210,210,0.35), transparent 70%), radial-gradient(55% 50% at 80% 70%, rgba(210,210,210,0.28), transparent 70%);--smoke-blend:screen;--hud:#cfcfcf;--hud-a35:rgba(207,207,207,0.35);--hud-a40:rgba(207,207,207,0.4)}
.th-cream{--bg:#f6f2e6;--ink:#2b2620;--muted:#8a8171;--ink-a05:rgba(43,38,32,0.05);--ink-a22:rgba(43,38,32,0.22);--ink-a45:rgba(43,38,32,0.45);--ink-a60:rgba(43,38,32,0.62);--veil:rgba(246,242,230,0.25);--glow:radial-gradient(720px 520px at 74% 26%, rgba(150,138,116,0.9), rgba(150,138,116,0) 70%), radial-gradient(980px 760px at 20% 86%, rgba(110,98,78,0.8), rgba(110,98,78,0) 72%), radial-gradient(560px 460px at 92% 64%, rgba(176,164,140,0.7), rgba(176,164,140,0) 70%);--wipe-bg:#2b2117;--alt-ink:#efe9dc;--alt-muted:#a89a86;--alt-a80:rgba(239,233,220,0.8);--alt-a30:rgba(239,233,220,0.3);--alt-a18:rgba(239,233,220,0.18);--alt-a14:rgba(239,233,220,0.14);--alt-a11:rgba(239,233,220,0.11);--s7-bg:#352a1b;--s8-bg:#41331f;--seq:#4d3d26;--carve:#67522f;--glass:rgba(46,36,23,0.5);--smoke:radial-gradient(60% 45% at 22% 28%, rgba(196,180,148,0.3), transparent 70%), radial-gradient(55% 50% at 80% 70%, rgba(196,180,148,0.24), transparent 70%);--smoke-blend:screen;--hud:var(--muted);--hud-a35:var(--hud-a35);--hud-a40:var(--hud-a40)}
.th-black{--bg:#161616;--ink:#f2f2f2;--muted:#a3a3a3;--ink-a05:rgba(242,242,242,0.05);--ink-a22:rgba(242,242,242,0.22);--ink-a45:rgba(242,242,242,0.45);--ink-a60:rgba(242,242,242,0.6);--veil:rgba(8,8,8,0.25);--glow:radial-gradient(720px 520px at 74% 26%, rgba(215,215,215,0.9), rgba(215,215,215,0) 70%), radial-gradient(980px 760px at 20% 86%, rgba(150,150,150,0.8), rgba(150,150,150,0) 72%), radial-gradient(560px 460px at 92% 64%, rgba(235,235,235,0.7), rgba(235,235,235,0) 70%);--wipe-bg:#f4f4f4;--alt-ink:#1a1a1a;--alt-muted:#6f6f6f;--alt-a80:rgba(26,26,26,0.8);--alt-a30:rgba(26,26,26,0.3);--alt-a18:rgba(26,26,26,0.18);--alt-a14:rgba(26,26,26,0.14);--alt-a11:rgba(26,26,26,0.11);--s7-bg:#efefef;--s8-bg:#e3e3e3;--seq:#d6d6d6;--carve:#bdbdbd;--glass:rgba(246,246,246,0.5);--smoke:radial-gradient(60% 45% at 22% 28%, rgba(105,105,105,0.5), transparent 70%), radial-gradient(55% 50% at 80% 70%, rgba(105,105,105,0.4), transparent 70%);--smoke-blend:multiply;--hud:#c9c9c9;--hud-a35:rgba(201,201,201,0.35);--hud-a40:rgba(201,201,201,0.4)}
body{font-family:'Instrument Sans','Noto Sans JP',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{opacity:.85}
.fbd-cta:hover{opacity:1}
.fbd-cta:hover .fbd-arw{transform:translateX(4px)}
@keyframes fbdSpin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@keyframes fbdReveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fbdFade{from{opacity:0}to{opacity:1}}
@keyframes fbdMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.hdr-l .hlogo{color:var(--alt-ink) !important}
.hdr-l .hnav a{color:var(--alt-ink) !important}
.hdr-l .hmenu{color:var(--alt-ink) !important;border-color:var(--alt-a30) !important}
/* ★★2026-09-02: #69 のヘッダー暗転（#hdr.hdr-d）は撤去。FACT の地が透明になり、
72px 線に暗面が掛かる場面が無くなった（判定していた #fvWipe の帯も同時に消えた）。 */
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}
@media (max-width:1200px){.fbd-badge{display:none !important}}
@media (max-width:1023px){.g2{display:block !important}.g2 > *{position:static !important}.g2 .fbd-right{margin-top:48px}.facts-row{flex-wrap:wrap !important}.hnav{display:none !important}}
/* ==== 以下 BUILD.md による追記（hover/active の書き下し・動画フォールバック） ==== */
.hnav a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
/* ★#65（2026-08-26）: ピルの色・地・枠は inline から外してここに置く。
inline の background/color は :hover に必ず勝つ（詳細度 1,0,0,0）ので、
hover は「動くだけで真っ黒のまま」「.story-pill は地も文字も ink＝文字が消える」だった。
font-size 等の寸法は inline に残す（SP の文字スケールが [style*="font-size:…"] で見ている）。 */
.hright{display:flex;align-items:center}
@media (min-width:1024px){.hright{display:none}}
.cta-round{background:var(--ink);color:var(--bg);border:1px solid var(--ink)}
.story-pill{border:1px solid var(--ink-a22);color:var(--ink)}
/* .hpill:active / .cta-round:active の translateY(1px) は撤去（MO-10・2026-08-25）。
押し心地は Animate UI Button（src/components/Press.tsx）が transform を inline で持つ。CSS 側に transform を残すと取り合う */
/* .hmenu:hover は撤去（👤 2026-08-12 ハンバーガー削除）。要素そのものが無くなった */
.fbd-cta:active{transform:translateY(1px)}
.cta-round:hover{background:rgba(216,216,216,0);color:var(--ink)}
.story-pill:hover{background:var(--ink);color:var(--bg)}
.story-pill:hover .fbd-arw{transform:translateX(4px)}
.fx-fallback{display:none}
.s7-static-sec,.s8-static-sec,.facts-static-sec,.fbd-foot-static{display:none}
/* ★項目35（2026-09-16）: S-07 左下のリード文（TOP-19）の改行を PC / SP で出し分ける。
PC＝2行（改行が読点と一致して「事業やブランドの／Web・システムの」の助詞切りが消える）
＋2行目の頭を全角スペース1つ（20px）ぶん字下げ ／ SP＝4行のまま。
★
を display:none にして「改行させない」形。
style 属性に書くと項目34 の罠1（site.css がインライン style の文字列一致で掴んでいる）と
同じ壊れ方をするので、必ず class で当てる。
★打ち消しは @media (max-width:767px) の中（.s7-lead と同じブロック・下記）。
★写しは2か所 —— index.astro の動く版とその静的版（RM）。片方だけ直すと RM で崩れる。 */
.s7-sp{display:none}
.s7-pc{display:inline}
/* ★項目36（2026-09-16）: S-07 のカードを押せるようにする（飛び先は S7Tilt.tsx の href）。
★★リンクは「着地している間だけ」出す。site.css 190〜193行で #light は none →
#s7S だけ auto に戻しており、カードの層はその中 ＝ **既定で押せてしまう**。
9枚は全部 top:1770px の同じ位置に重なっているので、出しっぱなしにすると
飛来前・退場後・着地しない i6〜i8 が原点で click を食う。
S-08 の MO-09（site.js 790〜796行）と同じ「見えている間だけ／値が変わるときだけ」。
★消し方は display:none。pointer-events:none だと **Tab では拾えてしまい**、
見えないリンク6本がキーボードのタブ順に残る（4.1.2 ではなく 2.4.3 の問題）。
★opacity では判定できない —— site.js 629行が毎フレーム el.style.opacity = 1 を書く。
data-on を立てる条件の正は site.js 696〜697行 ＝ **整列しきった（e > 0.9）かつ
カードがビューポートに収まっているとき**（項目40 の原因①。
e だけで見ていた頃は、まだ画面の外を飛んでいるカードにリンクが出ていた）。
★★data-on が立つだけでは押せない（項目40 の原因②）—— 板 .s7-face は Tilt（S7Tilt.tsx・
maxTilt 6°）でマウスに追従して傾き、右下隅のピルが指の下から逃げる。そこで
** は Tilt ルートの直下（＝傾かない層）に置き、板には
pointer-events:none を与えて当たりを へ通してある**。**この構造を崩すと、
見えているのに押せない状態に戻る。**下の border-radius:8px は、板の overflow:hidden の
外へ出た のグラデの角を、板の角丸に合わせるためのもの。
★地色は9枚バラバラ（#f2f2f2 の明るい板から #3a3a3a の暗い板まで）なので、
文字の下に暗いグラデを敷いて白文字の可読性を地色から切り離す。 */
/* ★この2行は .s7-card に限定する —— 静的版（.s7-static-sec の6枚）は site.js が触らず
data-on が永久に付かないので、.s7-link 全体を隠すと RM で「詳細へ」が出なくなる。 */
.s7-card .s7-link,.s7-card .s7-veil{display:none}
.s7-card[data-on="1"] .s7-link{display:flex}
.s7-card[data-on="1"] .s7-veil{display:block}
.s7-link{position:absolute;inset:0;z-index:2;border-radius:8px;display:flex;align-items:flex-end;justify-content:flex-end;
padding:20px;text-decoration:none;color:#f2f2f2;
background:linear-gradient(to top,rgba(20,20,20,0.52),rgba(20,20,20,0) 46%)}
/* ★★動く版だけ、地のグラデを から板の中の .s7-veil へ移す —— は傾かない層に居るので、
グラデを に敷いたままだと**傾いた板とズレて三角形にはみ出す**（2026-09-16 のスクショで確認）。
グラデは面積が大きいのでズレが目立つ。板の中へ入れれば板と一緒に傾いてズレない。
★ピルは の中に残す（＝傾かない）。小面積なのでズレは目立たず、当たりと同じ層に居るぶん
「見えている所を押せる」が崩れない。**ピルまで板へ入れると当たりが傾いて逃げ、項目40 に戻る。**
★静的版（.s7-static-sec の6枚）は Tilt が無く傾かないので、.s7-link にグラデを残したままでよい。
だから打ち消しは .s7-card に限定する。 */
.s7-card .s7-link{background:none}
.s7-veil{position:absolute;inset:0;z-index:1;border-radius:8px;
background:linear-gradient(to top,rgba(20,20,20,0.52),rgba(20,20,20,0) 46%)}
/* ★SP に hover は無いので常時表示（罠5。s7Wide は site.js 118行で常に true ＝ SP も動く版） */
.s7-more{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
border:1px solid rgba(242,242,242,0.45);border-radius:9999px;background:rgba(20,20,20,0.34);
font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:0.08em;
line-height:1;white-space:nowrap;transition:background 200ms ease,border-color 200ms ease,color 200ms ease}
.s7-arw{display:inline-block;transition:transform 150ms ease-out}
/* hover / active は .fbd-cta（9〜10・40行）と同じ挙動に揃える —— 矢印が右へ 4px、押すと 1px 沈む */
.s7-link:hover .s7-more,.s7-link:focus-visible .s7-more{background:rgba(242,242,242,0.94);border-color:rgba(242,242,242,0.94);color:#141414}
.s7-link:hover .s7-arw,.s7-link:focus-visible .s7-arw{transform:translateX(4px)}
.s7-link:active .s7-more{transform:translateY(1px)}
.s7-link:focus-visible{outline:2px solid #f2f2f2;outline-offset:-4px}
@media (prefers-reduced-motion: reduce){
video[data-fx]{display:none !important}
.fx-fallback{display:block !important}
.s7-anim-sec,.s8-anim-sec{display:none !important}
.s7-static-sec,.s8-static-sec{display:block !important}
.facts-static-sec{display:block !important}
.fbd-foot-static{display:block !important}
#factsO{display:none !important}
#fvO{height:100svh !important}
}
/* ==== S-07 をライトテーマへ（👤 2026-08-09「S-07 を明るい面に転換する」）====
背景素材を「暗い宇宙」→「白＋ゴールドの光」(AdobeStock 1848823256) に差し替えたため、
opacity で沈める旧方式ではコントラストが作れなくなった（実測: 旧設定 0.55 のままだと
白文字 #f2f2f2 に対し最悪 2.68・中央値 3.42 ＝ 12px も 28px も AA 不合格）。
★明面に転換したうえで文字を #141414 に反転すると、同じ素材で最悪 4.98・中央値 14.4 になる
（opacity 0.8・地 #ffffff で全ピクセル総当たり実測）。素材を沈めるより余裕が大きい。
★書き方は下の S-08 と同じ「セクションスコープで変数を上書き」。--s7-bg は S-08 でも
上書きされているグローバル変数なので、値そのものを書き換えず必ずスコープで当てる */
#s7O, .s7-static-sec{
--s7-bg:#ffffff;
--alt-ink:#141414; --alt-muted:#6f6f6f;
--alt-a80:rgba(20,20,20,0.8); --alt-a30:rgba(20,20,20,0.3); --alt-a18:rgba(20,20,20,0.18);
--alt-a14:rgba(20,20,20,0.14); --alt-a11:rgba(20,20,20,0.11);
}
/* ==== S-08 をライトテーマへ（👤 2026-08-06「ファイバー通過後は白背景ベース」）====
CSS変数をセクションスコープで上書き */
#s8O, .s8-static-sec{
--s7-bg:#ffffff; --s8-bg:#e9e9e9; --seq:#d6d6d6; --carve:#bdbdbd;
/* ★0.55 →（08-12 第一手）0.92 → **不透明 #ffffff**（👤 2026-08-12「カードをもっと濃くして、
イラストとカードの境目がわかりやすすぎる」）。
★半透明をやめたのは「濃く」のためだけではない ―― **アイコンの四角い縁の正体がこの alpha だった。**
カードの地が 0.92 だと、その上に置いた動画（不透明・白地）だけが 100% 白になり、
**周りのカードより明るい 132px の長方形**が浮く（実測: 画面で白い箱がはっきり見えていた）。
地を 1.0 にすると multiply の白＝恒等変換になり、**縁は構造的に消える。**
★連動: ここを下げ直すと縁が戻る。**濃さを触るなら白の alpha ではなく色そのものを変える。**
もっと暗いカードにしたい場合は `--glass` を暗色にするだけでは足りない
―― アイコンは黒線なので、素材を「黒地に白線」で焼き直して blend を screen に替える必要がある。
★backdrop-filter:blur(12px) はこの変更で無意味になったので外した（→ 下の anim_cards）。
不透明な地の後ろをぼかしても1px も見えないのに、**動くカード6枚ぶんの再サンプルだけが残る。** */
--glass:#ffffff;
--alt-ink:#141414; --alt-muted:#6f6f6f;
--alt-a80:rgba(20,20,20,0.8); --alt-a30:rgba(20,20,20,0.3); --alt-a18:rgba(20,20,20,0.18);
--alt-a14:rgba(20,20,20,0.14); --alt-a11:rgba(20,20,20,0.11);
--smoke:radial-gradient(60% 45% at 22% 28%, rgba(105,105,105,0.35), transparent 70%), radial-gradient(55% 50% at 80% 70%, rgba(105,105,105,0.28), transparent 70%);
--smoke-blend:multiply;
}
/* ==== M-38 サービスカードのアイコン動画（👤 2026-08-12）====
h264 にアルファは無いので、素材は「白地に黒線」で焼き、mix-blend-mode:multiply で地を抜く。
★相手はカードの地（--glass）。**地は不透明でなければならない**（半透明だと動画の白だけが
100% 白になり、132px の長方形が周りより明るく浮く ―― 👤 2026-08-12「境目がわかりやすすぎる」）。
★SP（<768px）:
① 見出し行を column-reverse にしてアイコンを上へ逃がす。row のままだと
本文の取り分が (cw-72) - 132 - 24 ＝ 320px 幅の端末で 99px しか残らない。
② アイコンを 96px に落とす。
③ CAPABILITIES 3行（.s8-caps）は畳む。カード高は cw 比で決まるのに中身は
端末幅で伸びるので、狭い端末ほど溢れる側に振れる。SP は「番号・見出し・一言・絵」まで。
★★2026-09-20（項目82・👤「この文字のカラーくらい薄くしてほしい」）: opacity:0.565 を足した。
狙いは同じカードの中にある3行（収支・資金計画の策定／投資対効果の分析／KPI・管理指標の設計）の
色 ＝ --alt-muted ＝ #6f6f6f。multiply は「地 ×（1-α + α×素材）」なので、素材が黒（0）の線は
地 ×（1-α）。α=0.565 で 0.435×地 ＝ #6f6f6f（地が #fff のとき 0.435*255 = 111 = 0x6f）。
★★2026-09-20（項目83・👤「サービスカードをもう少しだけ濃くして欲しい」）: 0.565 → 0.63 へ一段。
0.37×255 = 94 ＝ #5e5e5e。リスト文字（#6f6f6f）より 17 濃い。戻すなら 0.565、さらに濃くするなら 0.65（89 ＝ #595959）。
白い余白側は multiply で恒等なので影響を受けない ＝ 線だけが薄くなる。
★素材を焼き直して薄くする手は採らなかった —— M-38-4（technology・#1926890778）が
Adobe Stock から消えており（項目81）、焼き直すと6本中1本だけ濃いまま残るため。
CSS なら6本に同時に効き、1行で覆せる。覆すなら下の opacity を消す。 */
.s8-icon{flex:none;width:132px;height:132px;object-fit:contain;mix-blend-mode:multiply;opacity:0.63;border-radius:4px}
@media (max-width:767px){
.s8-icon{width:96px;height:96px}
.s8-head{flex-direction:column-reverse;align-items:flex-start;gap:14px}
.s8-caps{display:none}
}
/* ==== SP の最終画面 CTA とヘッダーの重なり（👤 2026-08-14・修正リスト 項目20）====
★被っていたのは CTA の中身どうしではなく、`position:fixed` の #hdr（実測）。
#hdr は背景 rgba(0,0,0,0) ＝ 完全に透明で、#ctaOv（白・z-index:50）の上に
ロゴ（黒文字 y41→65）とピル（黒の不透明 y32→75）が乗ったまま残る。
H2「お話をきかせてください。」は y55→144 なので、ロゴと 10px・ピルと 20px 重なる。
★①（BUSINESS ENQUIRY を消す）と②（重なりを解く）は逆方向に働く ――
ENQUIRY を消すと H2 が 39px 上がってロゴに完全に飲み込まれる。だから2つ同時に入れる。
★中身を下げる案は採らなかった: CTA の中身は 780px（フッター相当を含む）で、
ヘッダー 75px を避けて使えるのは 737px。①で 39px 減っても 741px ＝ 4px 足りない。
★ヘッダーの器（#hdr）は消さない ―― 項目13 の SP ハンバーガーがここに入る。
★★ハンバーガー（.hmenu）も一緒に畳む（2026-08-14 実測で追加）。
ENQUIRY を消して中身が上がったあと、H2 の1行目は **x36→324 / y47→93**、
ハンバーガーは **x280→324 / y32→76** で、**ロゴとピルを消してもまだ被る**。
中身を下げて避ける案はここでも足りない: 中身は 764px・器は 812px なので
ヘッダー 76px の下から始めると 840px 必要＝ **28px 溢れる**。
★畳まれる区間は **CTA が出ている間だけ**（実測: S-08 ピンの p=0.73 で ON。
ページ全体 20,090px のうち最後の約 3,350px ＝ ピン中なので画面は止まったまま）。
上へ戻して CTA が消えればボタンは戻る（cta-on は sp2>0 のスクラブ）。
★この区間で他ページへ行く導線は CTA 自身が持つ mailto と about.html の2本だけになる。
（about.html は ✦ ピルの行き先。もとは story.html だったが 👤 2026-08-14 に
/story を廃止し、ピルは残して行き先だけ振り替えた＝本数は2本のまま）
**ハンバーガーを残したまま重なりを解く案は寸法上できない**（上の 28px 不足）。
「最下部でも常にメニューを出したい」なら CTA の中身を 28px 以上詰めるしかない。
★display ではなく opacity で畳む: ヘッダーは flex なので display:none だと
残る要素が動く（項目13 のボタン位置が CTA の到達で変わってしまう）。 */
@media (max-width:767px){
/* ★!important が要る。この div は `style="display:flex;…"` を**インラインで**持っていて
（CTA のマークアップは gen_build 側で組み立てている）、インラインは詳細度に関係なく
スタイルシートに勝つ。付け忘れると **display:flex のまま消えない**（2026-08-14 実測） */
.cta-enq{display:none!important}
#hdr .hlogo,#hdr .hmenu{transition:opacity 0.22s linear}
#hdr.cta-on .hlogo,#hdr.cta-on .hmenu{opacity:0;pointer-events:none}
}
/* ==== S-05 Key facts の当たり判定を透明な器から取り戻す（幅を問わず適用）====
（SP: 修正リスト 項目14 で SP 限定として入れた ／ PC: 項目21 で全幅へ広げた 2026-08-15）
★★これが無いと SP の ‹ › も PC のカード内ピルも**一度も押せない**
（2026-08-14 SP／2026-08-15 PC・どちらも elementFromPoint の実測）。
#factsO（PC 1920×820 実測 y820→3116）の上に、兄弟の
**#light（y1410→20263・position:relative）** が丸ごと重なっている。
DOM で後ろ＋positioned なので当たり判定はこちらが総取りで、FACTS のピン区間は
**ボタンもリンクも一切届かない**。中の #s7O.s7-anim-sec（y1410→7803・透明の器）も同じ。
★PC の実測（1920×820・scrollY 900〜1800 を 150px 刻み・ピル3枚の中心）:
900〜1500 → **section#s7O.s7-anim-sec** ／ 1650 → 弧の線レイヤーの div ／
1800 → **header#hdr** ／ 1950〜 → 画面外。**3枚ともどこでも自分に当たらない。**
★透明な**器**から当たり判定を外し、中身へ戻す。S-07 の見た目は #s7S（sticky）が全部で、
clip-path:inset(100% 0 0) で隠れている間はヒットテストにも掛からない
（clip-path は当たり判定も切る）＝ S-07 が出ている間の操作性は変わらない。
★★PC へ広げてよい根拠（項目21 の「広げる前に PC 側の当たり判定を実測する」への答え）:
**#s7O の中で押せる要素は `VIEW ALL WORKS→` の1本だけで、それは #s7S の中にいる**
（実測: querySelectorAll('a,button,[role=button]') → 1件・#s7S.contains = true）。
つまり `.s7-anim-sec #s7S{auto}` で全部戻る。**PC 固有の取りこぼしは無い。**
★#light > .s7-anim-sec と書くのは詳細度のため。`.s7-anim-sec` だけだと
`#light > *`（ID を含む＝1,0,0）に負けて auto へ戻る。
★#factsO{z-index:1} は採らない —— #factsOv の背景が不透明で、
受け渡しの間 S-07 が隠れる（項目14 の実装時に検討して捨てた）。
★★#s8O も同じ処置に入れた（修正リスト 項目40・2026-08-15）。
以前は「FACTS と重ならないので触らない」と書いていたが、**重なる相手は FACTS ではなく S-07 だった。**
#s8O は y4683→20263 ＝ ドキュメント末尾までの透明な器で、DOM で #s7O より後ろにいる。
実測（1920×640・`#s7S a`＝`VIEW ALL WORKS→` の中心を elementsFromPoint）:
scrollY 3600 → OK ／ **3800〜6400（2,600px）→ 見えているのに click=NG**
（奪っているのは section#s8O.s8-anim-sec）／ 6600 以降 → S-08 が実際に塗っていて正常。
＝ **`/work` へ行く唯一の導線が 2,600px ぶん死んでいた。**
★戻し先が #s8S だけでよい根拠（実測）: #s8O の中で #s8S の外にいる要素は
**1個だけ（div・position:absolute・非対話）**、対話要素は **0個**
（'a,button,[role=button]' ＋ cursor:pointer ＋ onclick の総当たり）。
★CTA とフッターも #s8S の中（#ctaOv は #s8S の直接の子）なので一緒に戻る。
ただし **CTA が押せない件は原因が別**（JS が自分で none を書いている）。→ 項目41・2380行 */
#light{pointer-events:none}
#light > *{pointer-events:auto}
#light > .s7-anim-sec{pointer-events:none}
.s7-anim-sec #s7S{pointer-events:auto}
#light > .s8-anim-sec{pointer-events:none}
.s8-anim-sec #s8S{pointer-events:auto}
/* ==== SP の Key facts カルーセル（👤 2026-08-14・修正リスト 項目14）====
PC（768px〜）は横一列3枚のまま。SP だけ「1枚ずつ ‹ › で送る」に組み替える。
なぜ要るか: #factsOv は 375px しか無いのに #factsRow の最小幅が 1218px
（390×3 + gap24×2）で、overflow:hidden に食われて **✦01 と ✦03 が画面の外**にいた
（中央の ✦02 だけが見えている状態＝ 👤「fact カード3枚見れていない」）。
★★カードの寸法は 1px も変えない。`_fact_pan` の translate が 194px・388px と
**px で焼いてある**ので、幅を縮めると3枚とも写真の注視点がずれる（_C1 のコメント）。
代わりに **#factsRow ごと scale して** 画面幅に収める（倍率は JS が実測して入れる）。
★#factsIn に min-width:0 が要る。flex アイテムの自動最小サイズ（min-width:auto）は
min-content ＝ 1218px なので、これが width:100% を上書きして縮まなくなる。
★.facts-item は flex:0 0 390px。既定の flex-shrink:1 のままだとブラウザが
3枚を画面幅へ押し込もうとして、カードの実幅が 390 でなくなる（＝上の焼き込みが崩れる）。
★★!important が要る理由: #factsOv / #factsIn / #factsRow の padding・max-width・
align-items・justify-content は **インライン style**（FACTS_OV）にある。
インラインはセレクタの詳細度に関係なく勝つので、!important 以外では上書きできない。
★.facts-nav / .facts-arw は JS が SP のときだけ作る（PC の DOM は変わらない）。 */
@media (max-width:767px){
#factsOv{padding:16px!important}
#factsIn{width:100%!important;max-width:100%!important;min-width:0;align-items:stretch!important}
#factsRow{min-width:0;justify-content:flex-start!important;transform-origin:0 0;will-change:transform}
#factsRow > .facts-item{flex:0 0 390px}
.facts-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:20px}
.facts-arw{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
padding:0;border:1px solid var(--ink-a22);border-radius:999px;background:transparent;color:var(--ink);
font-family:'Archivo',sans-serif;font-size:22px;line-height:1;cursor:pointer;
-webkit-tap-highlight-color:transparent}
.facts-ct{font-family:'Archivo',sans-serif;font-size:12px;letter-spacing:0.08em;color:var(--muted)}
/* ---- 項目24: S-07 の巨大文字 SELECTED / WORKS を要素ごと消す ----------------
👤「スマホ版ではこの演出を無くしましょう」→「文字もなくしてください」（2026-08-14・SP のみ）。
★どちらも font-size:132px 固定で SP でも縮んでいない（.s7-gA = SELECTED 656×106 ／
.s7-gB = WORKS 470×106）＝ **画面から 300px はみ出している**（docW 360 なので
横スクロールにはならず、親が切っているだけ）。
★JS には手を入れない。非表示要素への style.transform 代入はレイアウトを起こさないので、
site.js の毎フレーム2行（xA / xB）はそのままでよい。
★★代償（受ける）: offsetWidth が 0 になり、site.js が読む wA/wB が実測 656/470 では
なくフォールバックの 600/400 になる。**SP で読み込んでから PC 幅へ広げると文字の着地が
56/70px ずれる** —— 項目17 の既知の制約（幅を変えたらリロードが要る）の範囲内。
`opacity:0` なら幅は保たれるが DOM とスクリーンリーダーに残る ＝「文字もなくす」に反する。
★セクションが無名にはならない —— 別に ✦ SELECTED WORK の 12px ラベルがある（下の .s7-fg）。
★prefers-reduced-motion の静的グリッド側は無傷（そちらの SELECTED / WORKS はクラスを
持たず font-size:clamp(64px,9.2vw,132px) のインライン ＝ このセレクタに当たらない）。
★position:absolute なので、消しても他の要素の位置は 1px も動かない。 */
.s7-gA,.s7-gB{display:none}
/* ---- 項目25: ✦ SELECTED WORK ラベルをカードの弧より背面へ --------------------
👤「中央の星マークに SELECTED WORKS があるよね？それは帯演出よりも背面に移動して」。
★層（.s7-fg）を z-index:auto にすると **stacking context を作らなくなる**ので、
子の順位が #s7S の土俵で評価される —— ラベル（z 指定なし）はカード z:2 の背面へ落ち、
z:4 を当てた ②コピー ③VIEW ALL WORKS だけが最前面に残る。依頼の前後関係が1手で揃う。
★②③ はどちらも position:absolute（実測）＝ z-index がそのまま効く。
static だと z-index は効かないので、DOM が変わったらここを疑う。
★s7Frame（site.js の initS7）が掴んでいるのは gA/gB/hair/lnA/lnB/cards/grid だけで、
ラベル・コピー・CTA は毎フレームの演出に載っていない ＝ 前後を入れ替えても同期は壊れない。
★★2026-09-22 に PC へも広げた（👤「トップのselected worksの中央の⭐️selected worksの表記をカードの後ろにして」）。
★★!important が要る（2026-08-14 実測で踏んだ）。層の z-index:3 は**インライン style**
なので、`.s7-fg{z-index:auto}` では勝てず computed が "3" のままだった。
子の p / a はインラインに z 指定が無いので、そちらは !important 不要。 */
/* ★規則は全幅へ移した（修正リスト 項目95・下の「S-07 ラベルの前後」）。ここには書かない */
/* ---- 項目28-d ②: S-08 サービスカードの本文が「PC 用の内側余白」に削られている ----
実測（375×812）: カード 255px に対し本文 181px ＝ **画面の 48%**。14px の説明文が
6枚とも2〜4行に折れていた。padding:32px 36px の左右 72px が原因。
★SP だけ 20px に詰めると本文は 215px（＋34px）になる。カードの外寸は変えない
―― 外側の .s8-card{padding:24px} は隣のカードとの間隔で、項目19 で詰めたばかり。
★アニメ版と静的版（reduced-motion 用）の両方に同じクラスを付けてある。
★!important が要るのは相手がインライン style だから（#factsOv 群と同じ理由）。 */
.s8-inner{padding:24px 20px !important}
/* ★MO-09 差し替え（2026-08-26）: アニメ版の .s8-inner は BorderGlow の器になり、余白は
中の .border-glow-inner が持つ（上の MO-09 ブロック）。器の側は 0 に戻す。
静的版（reduced-motion 用）はインライン style のままなので上の行が引き続き効く。 */
.s8-inner.border-glow-card{padding:0 !important}
.s8-inner.border-glow-card > .border-glow-inner{padding:24px 20px}
}
/* ---- S-07 ラベルの前後（修正リスト 項目95 ← SP の項目25 を全幅へ）------------------
✦ SELECTED WORK ラベルだけをカード（層 z:2）の背面へ。② コピーと ③ VIEW ALL WORKS は前面に残す
（CTA まで背面にするとカードに隠れて押せない瞬間が出る）。仕組みは上の SP ブロックのコメントのとおり。
★PC でも ②③ は position:absolute（インライン・2026-09-22 実測）＝ z-index:4 が効く。 */
.s7-fg{z-index:auto !important}
.s7-fg > p,.s7-fg > a{z-index:4}
/* ==== ローダー ★撤去（👤 2026-08-08 の渦削除に伴う必然）====
このローダーは「FV動画（shot01_fv_ink.mp4 = 30.2MB）を読み終わるまで FV を隠し、
読了と同時に文字のリビール(fbdReveal)を頭から再生する」ためだけに存在していた。
渦を消した時点で FV は白地＋文字だけ＝**待つべきバイトが1つも無い**ので、
ローダーを残すと「何も読んでいないのに出る目隠し」になる。よって全廃した。
★副産物: 初回表示が 30.2MB のダウンロード待ちから解放される（今までは FV が出るまで
必ずこの1本を待っていた）。残り5本のスクラブ用動画は従来どおり裏で blob 先読みするだけ。
復元するなら #ldr の CSS・markup・boot 側の ldrDone/fetchBlob ゲートの3か所を戻す。 */
/* ==== M-02 FV背景動画（インク／白黒・★自走再生・👤 2026-08-09）====
スクロール連動スクラブ（2026-08-08）→ 自動再生に変更。1回だけ頭から流れ、終端で止まる。
素材は「暗い地に明るいインク」。明るいテーマ（既定の白・クリーム）にそのまま敷くと
画面が暗く沈んで黒文字が読めなくなるので、invert で極性を反転させ「白地に墨が落ちる」にする。
.th-black だけは地が暗いので反転せず素のまま＝「黒地に煙が立つ」。
★blur や mix-blend-mode は使わない: FV は position:sticky で独立したスタッキング文脈になり、
その内側の背景は透明＝乗算の相手がいないため、ブレンドだと真っ黒に落ちる（実測）。
旧 shot01_fv_ink.mp4（30.2MB）と違い 6.7MB なので、ローダーは戻さず poster で繋ぐ。
reduced-motion では site.js が読込も hook もしない＝ poster のまま静止する（さらに薄く敷く）。 */
/* ★★2026-09-19（項目77）: 2本目（#fvVideo2）と同時に流すので、単独の濃さ 0.34 → 0.19 に下げた。
白地に 0.19 を2枚重ねると非白成分のウェイトは 0.19 + 0.19×0.81 = 0.344 ＝ 1枚のときの 0.34 と同じ。
.th-black は 0.5 → 0.28（0.28 + 0.28×0.72 = 0.482）。★「今より濃くならない」が条件（項目77 論点1）。
★reduced-motion の 0.22 は下の @media が上書きする（2本目が出ない回なので単独の濃さのまま）。 */
#fvVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0;
filter:grayscale(1) invert(1) contrast(1.06);opacity:0.19}
.th-black #fvVideo{filter:grayscale(1) contrast(1.06);opacity:0.28}
@media (prefers-reduced-motion: reduce){#fvVideo{opacity:0.22}}
/* ★終端で白へ抜く（👤 2026-08-09「映像が最後まで行ったらそのままフェードアウトして真っ白の背景に」）。
transition をこの規則の中だけに置く＝ fv-done が付いた瞬間にしか効かない（他の opacity 操作に干渉しない）。
.th-black より後ろに書く: 両者とも詳細度 (1,1,0) で同点なので、勝敗はソース順で決まる。 */
#fvVideo.fv-done{opacity:0;transition:opacity 1200ms ease-out}
/* ★★2026-09-19（👤「煙と新しいこの素材を同時に流して欲しい」＝修正リスト 項目77。項目76 の直列を差し替え）:
FV背景の2本目（M-48・煙と同じ 26.600秒に切り直してある）。上の #fvVideo と同じ器。
★★2026-09-20（項目78・👤「B で採用します」）: filter を外して素材そのままの色にした。
S-08（our service）の地が同じ素材（#838649531）を filter 無し・opacity:0.30 で敷いているので、
トーンを揃えた（👤「FV の彫刻の素材をトーンを our service と同じ状態にして欲しい」）。
★濃さ 0.19 は変えない（＝A/B/C の B。C＝0.30 は採らなかった）。煙との2枚重ねの計算〔上のコメント〕が
そのまま生きる ＝「今より濃くならない」（項目77 論点1）を壊さない。
★.th-black 側は grayscale(1) contrast(1.06) のまま残す —— 黒テーマに対応する S-08 の面が無く、
指示の射程外。煙側（.th-black #fvVideo）が grayscale を保っているので、2本目だけ色が乗ると浮く。
覆すなら下の .th-black #fvVideo2 の1行を消す。
初期は opacity:0 で、site.js が src を差して play() できた時点で .fv2-on を付け 1200ms でフェードインする
（頭は揃えない＝遅れて始まった回でもパッと出ずに馴染む・項目77 論点3）。
★.fv2-done は「両方が終わってから」site.js が2本同時に付ける（👤「終わるタイミングを同時にして欲しい」）。
★★詳細度に注意: .th-black #fvVideo2.fv2-on は (1,2,0) なので、白へ抜く側も .th-black 版を並べて書く。
#fvVideo の .fv-done は相手が (1,1,0) だったのでソース順だけで勝てたが、こちらは同じ手が使えない。
★reduced-motion では site.js が読込も play もしない ＝ .fv2-on が付かず opacity:0 のまま何も出ない
（poster も見えない）。煙側だけが poster で静止する従来の挙動は変わらない。 */
#fvVideo2{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:0;
opacity:0}
.th-black #fvVideo2{filter:grayscale(1) contrast(1.06)}
#fvVideo2.fv2-on{opacity:0.19;transition:opacity 1200ms ease-out}
.th-black #fvVideo2.fv2-on{opacity:0.28}
#fvVideo2.fv2-done,.th-black #fvVideo2.fv2-done{opacity:0;transition:opacity 1200ms ease-out}
/* ★★2026-09-02（👤「星の演出もなくします」）: S-05 の流れ星（#factsMet / .fmet）は撤去した。
黒い筋は 👤 2026-08-14 の指定（濃さ 0.5・太さ 2.5px・「かなり引く」尾）で、
薄いほうへ戻したのではなく演出ごと無くしている。経緯は git log と 改訂履歴.md。 */
/* ==== SP の文字スケール（sp_type.py が正。トップ・下層で共有）====
本文 14px / 注釈・ラベル 12px / 行間 1.9。見出しは触らない。 */
@media (max-width:767px){
/* ① 確定物のインライン style（85箇所）を値ごと掴んで下げる */
[style*="font-size:18px"],[style*="font-size:17px"],
[style*="font-size:16px"],[style*="font-size:15px"]{font-size:14px !important}
[style*="font-size:13px"]{font-size:12px !important}
/* ★2026-09-16 項目34: S-07 左下のリード文は PC 20px へ上げた（index.astro のインライン）。
上の①は**インライン style の文字列一致**なので 20px は掴めず、放置すると SP も 20px になる。
SP は 18px に戻す —— 20px だと右下の CTA（VIEW ALL WORKS）まで 8px しか空かない（390×844 実測）。
★数値をまた動かすときは、SP で「リードの右端」と「CTA の左端」の隙間を必ず測り直す
（14px→58px ／ 18px→25px ／ 20px→8px ／ 22px→−9px ＝ 重なる）。 */
.s7-lead{font-size:18px !important;line-height:1.9 !important}
/* ★2026-09-16 項目35: SP は4行のまま（👤「SPは四行でいいです」）。
PC 用の字下げ（全角スペース）を消し、PC で殺していた
を戻す。
実測（390×844）: 4行・全行 左36・右端 186 ＝ CTA との隙間 25px で、いまと1pxも変わらない。 */
.s7-sp{display:inline}
.s7-pc{display:none}
/* ★項目36: SP はカードが小さいので「詳細へ」も縮める（余白 20→12px・文字 12→10px） */
.s7-link{padding:12px}
.s7-more{padding:6px 12px;font-size:10px;gap:6px}
/* ② 行間は本文要素だけ（ のピル・ボタンの高さを変えないため） */
p[style*="font-size:18px"],p[style*="font-size:17px"],p[style*="font-size:16px"],
p[style*="font-size:15px"],p[style*="font-size:14px"],
li[style*="font-size:18px"],li[style*="font-size:17px"],li[style*="font-size:16px"],
li[style*="font-size:15px"],li[style*="font-size:14px"],
dd[style*="font-size:18px"],dd[style*="font-size:14px"]{line-height:1.9 !important}
/* ③