/* sp-frame-v1 — 全下層ページの共通の枠（主指揮が 2026-09-28 に採用）。下層ページ班。ページ固有のものは含まない。 従うもの：docs/RENEWAL-BRAND-SYSTEM.md（色・3 書体・共通部品）、docs/DESIGN-DETAIL-STANDARD.md（8u、インクで測る）、 docs/SUBPAGE-STRUCTURE-2026-09-28.md §2（ガター・余白の役割）。head・ヘッダー・フッターはホーム（rising-v10f.html）のまま。 読み込み：ホームの CSS 一式 → site-width-v1.css ＋ site-width-v1.js（サイト共通の列 --site-max・--site-gutter。必須）→ sp-frame-v1.css → ページ固有の CSS。冒頭の和紋は sp-opener-v1.js ＋ 柄のファイル（sp-wamon-<柄>-v1.js）。 には、ホームと同じ class に加えて "sp sp--<ページ>" を付ける。 組み方（マークアップの約束）
（ホームのヘッダー .s55-masthead）
… 和紋（sp-opener-v1.js が描く）

（金のアイコン ：ナビに同じアイコンがあるページだけ）題字

（

副情報

：任意）
最初の子のインクが帯の端から 96（スマホ 64） …
寸法（全幅で同じ。1920 まで確認） - 冒頭の帯：ヘッダーと同じ夜空 #0d0724。ホームのヒーロー（夜空＋青海波）→ 黒の帯と同じ構造。高さはヘッダーの下から 280 （= 格子の段 56 × 5）。全ページ同じ高さなので、ページを移っても題字の位置が動かない。 - ヘッダーの下端 → 題字のインク 64（スマホ 24）。題字 → 副情報 24（スマホ 16）。帯の端 → 最初の文字 96（スマホ 64）。 - 和紋は帯の端から 32 持ち上げ、文字から 32（スマホ 16）離す（--sp-lift・--sp-clear。sp-opener-v1.js が読む）。 - 中身の左右の余白はサイト共通の変数 --site-gutter（列の最大幅 --site-max。1440 以下は 1168、1440 を超えると画面に比例して上限 1752）で受ける。 読みの列 --sp-col（640）は行の長さの上限で、列が広がっても本文の行は長くしない。 値の出どころ：余白は 8u の倍数（8/16/24/32/48/64/96）。帯の高さ 280 と段 56 は格子の値（雷文の角渦 40・間 16 → ピッチ 56）。 */ body.sp { /* 中身の列の最大幅と左右の余白はサイト共通の変数（site-width-v1.css）で受ける。後ろは読み込まれていないときの予備の値だけ */ --sp-gutter: var(--site-gutter, max(var(--page-pad, 40px), calc((100vw - var(--site-max, 1168px)) / 2))); --sp-night: #0d0724; --sp-black: #08090e; --sp-paper: #f3ecdc; --sp-quiet: rgb(243 236 220 / 0.78); --sp-gold: #d8b66a; --sp-signal: rgb(184 156 255 / 0.32); --sp-ring: rgb(157 123 220 / 0.5); --sp-latin: "Barlow Condensed", "Zen Kaku Gothic New", sans-serif; --sp-jp: "Zen Kaku Gothic New", sans-serif; --sp-band: 280px; /* ヘッダーの下 → 帯の端。格子の段 56 × 5 */ --sp-title: 56px; /* 題字の大きさ（行の箱も同じ）。構成案 §2.7 */ --sp-title-ink: 64px; /* ヘッダーの下端 → 題字のインクの上端。構成案 §2.2「Header → page title top」 */ --sp-title-meta: 24px; /* 題字のインク → 副情報のインク */ --sp-edge: 96px; /* 帯の端 → 最初の文字（契約 §7-3） */ --sp-col: 640px; /* 読みの列の幅（16px で 40 字）。構成案 §8.4・§9.4 */ --sp-gap-block: 48px; /* 塊どうし（導入 → 区分、条文どうし） */ --sp-gap-section: 96px; /* 節 → 節（契約：節の間 96） */ --sp-gap-head: 32px; /* 節の見出し → 中身 */ --sp-foot: 96px; /* 最後の中身 → フッターの文字 */ --sp-clear: 32px; /* 文字 ↔ 和紋（構成案 §2.2「Text ↔ wamon patch ≥ 32」） */ --sp-lift: 32px; /* 和紋の塊を帯の端から持ち上げる量（オーナー裁定「塊を画面下端から少し持ち上げる」） */ background: var(--sp-black); } /* 和文の折り返しは文節で（「巻き込 / む」のような語の途中の折り返しを作らない。Chrome の auto-phrase、ほかのブラウザは通常の折り返し） */ body.sp .sp-body :is(p, li, dd, h2, h3) { word-break: auto-phrase; } @media (max-width: 1023px) { body.sp { --sp-title: 48px; } } @media (max-width: 767px) { body.sp { --sp-title: 40px; --sp-title-ink: 24px; /* 構成案 §2.2 スマホ 24 */ --sp-title-meta: 16px; --sp-edge: 64px; --sp-gap-block: 32px; --sp-gap-section: 64px; --sp-gap-head: 24px; --sp-foot: 64px; --sp-clear: 16px; } } /* ---- ヘッダー：ホームの部品のまま。題字の目印（.s55-mark）はページ最上端の高さ 0 の点 ---- */ body.sp .sp-anchor.s55-mark { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; pointer-events: none; } /* ON AIR の受け皿は画面にも読み上げにも出さない（#on-air に付くホームの表示規則より強く） */ body.sp #on-air.sp-live-sink[hidden] { display: none !important; } body.sp .sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---- 冒頭の帯：全幅。#main の子に付く 1168 幅の規則（study16.css）より強くする ---- */ body.sp #main > .sp-opener.sp-opener { position: relative; box-sizing: border-box; width: auto; height: var(--sp-band); margin: 0; padding: 0 var(--sp-gutter); overflow: hidden; background: var(--sp-night); isolation: isolate; } body.sp .sp-wamon { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } body.sp .sp-opener-text { position: relative; z-index: 2; /* 題字の行の箱 56 の中で、大文字のインクの上端は箱の上から 0.2 × 大きさ（Barlow Condensed：上がり 1.0・下がり 0.2・大文字の高さ 0.7 → (行の高さ − 1.2em) / 2 + 0.3em = 0.5em − 0.3em）。インクで 64（スマホ 24）にする */ padding-top: calc(var(--sp-title-ink) - 0.2 * var(--sp-title) + 1px); /* + 1：実測（1440・390）で大文字のインクが計算より 1 上に出る */ } body.sp .sp-title { display: flex; align-items: flex-start; gap: 16px; margin: 0; color: var(--sp-paper); font: 600 var(--sp-title) / var(--sp-title) var(--sp-latin); letter-spacing: 0.04em; } /* 題字の欧文の左端のインクをガターに揃える（C・A・P の左の余白 ≈ 0.04em を打ち消す。1440 で実測） */ body.sp .sp-title > span { margin-left: -0.04em; margin-right: -0.04em; } /* 金のアイコン（ナビに同じアイコンがあるページだけ。契約 §2）：大きさは大文字の高さ（0.7em）、上下は大文字のインクの中心に合わせる */ body.sp .sp-title > .ui-icon { flex: none; width: calc(0.7 * var(--sp-title)); height: calc(0.7 * var(--sp-title)); margin-top: calc(0.2 * var(--sp-title)); /* アイコンの線は箱の内側 1/10 から始まる（24 の箱で 2.4）。線の左端をガターに揃える（光学補正） */ margin-left: calc(-0.07 * var(--sp-title)); color: var(--sp-gold); } body.sp .sp-meta { margin: 0; /* 題字の箱の下端は大文字のインクの下 0.1em。副情報（13px・行の高さ 13）のインクの上端は箱の上から 0.2 × 13 = 2.6 */ padding-top: calc(var(--sp-title-meta) - 0.1 * var(--sp-title) - 2.6px + 1px); /* + 1：実測 */ color: var(--sp-quiet); font: 600 13px / 13px var(--sp-latin); letter-spacing: 0.2em; } /* ---- 黒の帯の中身 ---- */ /* 黒の帯の中身は全幅の箱に左右の余白（--site-gutter）を取る。#main の子に付く 1168 幅の規則（study16.css）は上書きする */ body.sp #main > .sp-body.sp-body { box-sizing: border-box; width: auto; margin-inline: 0; padding: 0 var(--sp-gutter) var(--sp-foot); } body.sp .sp-body > :first-child { margin-top: var(--sp-edge); } body.sp .sp-lead { max-width: var(--sp-col); margin: 0; color: var(--sp-paper); font: 400 16px / 30px var(--sp-jp); letter-spacing: 0.02em; } /* 16/30 の行の箱の中で、和文のインクは上から約 8（Zen Kaku Gothic New の実測）。帯の端 → インク 96 に合わせて箱を上げる */ body.sp .sp-body > .sp-lead:first-child, body.sp .sp-body > :first-child > .sp-lead:first-child { margin-top: calc(var(--sp-edge) - 8px); } body.sp .sp-label { margin: 0; padding: 0; color: var(--sp-quiet); font: 600 13px / 13px var(--sp-latin); letter-spacing: 0.2em; } body.sp .sp-h2 { margin: 0; color: var(--sp-paper); font: 700 24px / 32px var(--sp-jp); letter-spacing: 0.04em; } @media (max-width: 767px) { body.sp .sp-lead { font-size: 15px; line-height: 28px; } body.sp .sp-h2 { font-size: 20px; line-height: 28px; } } /* ---- 操作リンク（契約 §4 の .u の型）：Barlow Condensed 600・字間 0.2em。押せる範囲 44 の上端に文字を置き、1px の下線を大文字のインクの下 8.5 に引く （行の高さ = 大きさのとき、大文字のインクの下端は箱の上から 0.9em。1440・390 で実測）。下がりのある文字（p・g・y・@・_）を含むときは 下線を 1.8 下げる（下がりのインクの下 8.5。sp-contact-v1.css の copy・ALT LINE で実測） ---- */ body.sp .sp-u { position: relative; display: inline-flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--sp-quiet); font: 600 13px / 13px var(--sp-latin); letter-spacing: 0.2em; text-decoration: none; cursor: pointer; } body.sp .sp-u::after { content: ""; position: absolute; left: 0; right: 0.2em; top: calc(0.9em + 8.5px); height: 1px; background: currentColor; } body.sp .sp-u.sp-u--desc::after { top: calc(0.9em + 10.3px); } body.sp .sp-u:is(:hover, :focus-visible) { color: var(--sp-paper); } body.sp .sp-u .ui-icon { width: 12px; height: 12px; flex: none; } body.sp :is(a, button, input, label):focus-visible { outline: 2px solid var(--sp-paper); outline-offset: 4px; }