/* products-page-v1 — products.html の配置。products-parts-v1.css の後に読む。2026-09-28。
オーナー「メニューは全てページ遷移で、LIVEもPRODUCTもそれぞれ今回新規ページとしてちゃんとしたクオリティのもの実装してくれ」
構成：冒頭の帯（下層ページ共通の枠 sp-frame-v1.css、夜空・高さ 280）に立涌 → STUDIO の帯（名乗りと機能 → タイムスタンプ → テンプレート）
→ HUB の帯（名乗りと機能 → チケット → 日程調整 → カレンダー）→ フッター。
余白（docs/DESIGN-DETAIL-STANDARD.md、下層ページの役割の値）
ヘッダー → 題字のインク 64（スマホ 24）、題字 56／48／40：sp-frame-v1.css のまま。題字 → 目次 24（16）
文字 → 立涌の最も近い弧 ≥ 32（スマホ ≥ 16）：products-page-v1.js が文字の塊の実際の位置から柱の高さを決める
帯の端 → 最初の文字 96、最後の中身 → 帯の端 96（スマホ 64）。帯の中の章と章の間 96（スマホ 64）、章の中 48（32）
色：冒頭は契約の夜空 #0d0724 と青海波の線の3色（和の線、線画）、金は #d8b66a を 0.5（和紋の金の一筆）。
深紫の面（#250d5a）は .pp-mast--filled を付けたときだけ（比較用の選択肢）。
帯の中は各製品の値（products-parts-v1.css）。 */
body.pp-page { background-color: #08090e; }
/* ヘッダーの帯の地を冒頭の夜空と同じにする（境目を作らない） */
body.pp-page .s55-masthead { background: #0d0724; }
/* HUB の帯の端 → フッターの字面 96（スマホ 64）。フッターの内余白 16 に、字面までの差を足す */
body.pp-page .edition-footer.edition-footer { padding-top: 77.5px; }
@media (max-width: 767px) { body.pp-page .edition-footer.edition-footer { padding-top: 44.8px; } }
/* study16.css の「#main の子は幅 1168」を外す（製品の帯は全幅）。冒頭の帯は sp-frame-v1.css が全幅にする */
body.pp-page #main > .pv-band { width: 100%; max-width: none; margin-inline: 0; }
/* ================= 冒頭：共通の枠（sp-frame-v1.css の .sp-opener：夜空、ヘッダーの下 280、題字はインクで 64）の中に立涌 ================= */
.pp-tw { display: block; }
.pp-tw-fill { fill: none; stroke: none; } /* 既定は線画（主指揮の和紋の共通方針 2026-09-28「青海波と同じ和の線で、線画として描く」） */
.pp-mast--filled .pp-tw-fill { fill: #250d5a; } /* 選択肢：ホームの青海波の面と同じ深紫で塗る（オーナー裁定 #250d5a） */
.pp-tw-line, .pp-tw-g { fill: none; stroke-linecap: butt; stroke-linejoin: round; }
.pp-tw-line.pp-tw-t0 { stroke: #8c6be0; stroke-width: 1.5; } /* 青海波の線：外 */
.pp-tw-line.pp-tw-t1 { stroke: #6e50c6; stroke-width: 1.2; } /* 中 */
.pp-tw-line.pp-tw-t2 { stroke: #5a3fb0; stroke-width: 1; } /* 内 */
.pp-tw-g { stroke: #d8b66a; }
.pp-tw-g.pp-tw-t0 { stroke-width: 1.5; }
.pp-tw-g.pp-tw-t1 { stroke-width: 1.2; }
.pp-tw-g.pp-tw-t2 { stroke-width: 1; }
.pp-tw-gold { opacity: 0.5; } /* 和紋の金の一筆：#d8b66a を 0.5（契約 §2 の例外） */
.pp-tw-under { opacity: 0; } /* 金に置き換えた柱の紫（動きの中でだけ見える） */
/* 副情報の行＝このページの目次（2 つの製品へ）。操作リンクの型（.u）。題字の字面 → 目次の字面 24（スマホ 16）：押せる箱 48 は上へ伸びる */
.pp-index { display: flex; flex-wrap: wrap; gap: 0 32px; margin: -11px 0 0; }
.pp-u {
display: inline-flex; align-items: flex-end; gap: 10px; min-height: 48px; padding: 0 0 6px;
border-bottom: 1px solid currentColor; color: rgba(243, 236, 220, 0.78);
font: 600 13px/13px "Barlow Condensed", sans-serif; letter-spacing: 0.2em; text-decoration: none; white-space: nowrap;
}
.pp-u .ui-icon { flex: none; width: 12px; height: 12px; }
.pp-u:hover { color: #f3ecdc; }
.pp-u:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 1023px) { .pp-index { margin-top: -10.2px; } } /* 題字 48（sp-frame）：箱の下の 0.1em が 0.8 小さい */
/* ================= 帯の中の格子 ================= */
.pp-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 32px;
row-gap: 96px; /* 章と章の間 */
align-items: start;
}
.pp-grid > .pv-id { grid-column: 1; }
.pp-feats { grid-column: 2 / 4; }
.pp-chapter-text { grid-column: 1; }
.pp-ts { grid-column: 2 / 4; align-self: stretch; display: flex; flex-direction: column; } /* 章の文の列と同じ高さに（隙間を作らない） */
.pp-ts > .pv-ts { flex: 1 1 auto; }
.pp-tpl, .pp-kb-fig, .pp-flow { grid-column: 1 / -1; }
/* 章と章の境目をインクで 96（スマホ 64）に：直前の最後の字面と次の見出しの字面の、行の箱の差を境目ごとに引く（実測） */
.pp-grid > .pp-chapter-text { margin-top: -2px; }
.pp-tpl { margin-top: -3.5px; } /* タイムスタンプの注記（段の下端）→ テンプレートの見出し 96（実測） */
.pp-kb-fig { margin-top: -6px; }
.pp-flow { margin-top: -3px; } /* チケットの注記 → 見出しの行の最も上のインク（凡例の枠）96（実測） */
.pp-band .pv-id .pv-name { font-size: 48px; line-height: 56px; } /* ページの主役なので、ホームの予告（40）より一段大きく */
.pp-band .pv-id .pv-body { margin-top: 24px; max-width: 30em; }
.pp-band .pv-id { padding-bottom: 2px; margin-bottom: -2px; } /* 下線を箱の中に（格子の行の高さは変えない） */
/* 機能の一覧（2 × 2） */
.pp-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; margin: 0; padding: 0; list-style: none; }
.pp-feats li { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-content: start; margin: 0; }
.pp-feats .pp-no, .pp-feats .pp-en { font: 600 13px/16px "Barlow Condensed", sans-serif; letter-spacing: 0.04em; color: var(--pv-kicker); }
.pp-feats b { grid-column: 1 / -1; margin-top: 8px; font: 700 18px/28px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.04em; color: var(--pv-ink); }
.pp-feats p { grid-column: 1 / -1; margin: 8px 0 0; font: 500 14px/24px "Zen Kaku Gothic New", sans-serif; color: var(--pv-ink-2); }
/* 章の文 */
.pp-h3 span { display: block; }
.pp-h3 { margin: 16px 0 0; font: 500 24px/36px "Zen Kaku Gothic New", sans-serif; letter-spacing: 0.02em; color: var(--pv-ink); }
.pp-p { margin: 16px 0 0; font: 500 15px/26px "Zen Kaku Gothic New", sans-serif; color: var(--pv-ink-2); }
.pp-points { display: grid; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.pp-points li { display: flex; align-items: baseline; gap: 16px; font: 500 14px/24px "Zen Kaku Gothic New", sans-serif; color: var(--pv-ink); }
.pp-points li span { flex: none; font: 600 13px/24px "Barlow Condensed", sans-serif; letter-spacing: 0.04em; color: var(--pv-kicker); }
.pp-figcap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin: 0 0 16px; }
.pp-figcap .pv-fig-label { margin: 0; }
.pp-figdesc { font: 500 14px/24px "Zen Kaku Gothic New", sans-serif; color: var(--pv-ink-2); }
/* STUDIO の画面は、ページでは少し大きな文字で（行の高さと余白を同じ比で） */
.pp-ts .pv-ts-card { padding: 16px; }
.pp-ts .pv-ts-rows li { padding: 10px 12px; }
.pp-ts .pv-ts-cap, .pp-ts .pv-ts-ch li { font-size: 14px; }
.pp-ts .pv-ts-time { font-size: 14px; }
/* HUB（オーナー 2026-09-28「HUBのほうもパーツの配置が悪すぎて隙間だらけ」）
チケットの章：全幅のボード。高さを決め、列は製品と同じくスクロールする領域として画面の下端で切れる（空の列を作らない）。
予定・日程調整の章：見出しの行（見出し・説明・○△× の凡例）→ カレンダー（2/3）＋ 日程調整（1/3）を同じ高さに → 注記。 */
.pp-kb-fig .pv-kb-screen { height: 368px; }
.pp-kb-fig > .pp-figcap { margin-bottom: 12px; } /* 見出しの行の最も下の字面（説明）→ 画面 16 */
.pp-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 16px; align-items: stretch; } /* 見出しの行（凡例の下端）→ 画面 16 */
.pp-flow > .pp-flow-cap { grid-column: 1 / -1; margin: 0; }
.pp-flow > .pp-cal-fig { grid-column: 1 / 3; }
.pp-flow > .pp-poll { grid-column: 3; }
.pp-flow > figure { display: flex; flex-direction: column; min-width: 0; }
.pp-flow > figure > .pv-screen { flex: 1 1 auto; }
.pp-flow > .pp-flow-note { grid-column: 1 / -1; margin-top: -11px; } /* 画面 → 注記の字面 8（行の間 16 を打ち消す） */
.pp-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pp-legend span { /* 回答の 3 ボタンの「選択中」の色（SchedulePollCard.tsx:184-198） */
/* 凡例は押せる部品ではない。見出しの行（説明の行の高さ 24）に収まる大きさにして、見出しを押し下げない（章の間を幅によらず 96 に） */
display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid; border-radius: 3px;
font: 600 12px/1 "Zen Kaku Gothic New", sans-serif;
}
.pp-legend [data-a="yes"] { border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.15); color: #a7f3d0; }
.pp-legend [data-a="maybe"] { border-color: rgba(212, 179, 85, 0.5); background: rgba(212, 179, 85, 0.15); color: #e8cf7a; }
.pp-legend [data-a="no"] { border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.15); color: #fecaca; }
.pp-drawer { padding: 16px; }
/* ---------- 1100 未満：左の列の文をそれぞれの画面の上へ ---------- */
@media (max-width: 1099px) {
.pp-grid > .pv-id, .pp-feats, .pp-chapter-text, .pp-ts { grid-column: 1 / -1; }
.pp-grid { row-gap: 96px; } /* 章と章は 96 のまま（スマホだけ 64） */
.pp-feats { margin-top: -52px; } /* 名乗り → 機能の一覧は章の中：インクで 48 */
.pp-chapter-text + .pp-ts { margin-top: -69.5px; } /* 章の文 → 画面：インクで 32 */
.pp-grid > .pp-chapter-text { margin-top: -6.5px; } /* インクで 96（実測） */
.pp-tpl { margin-top: -3.5px; }
.pp-kb-fig { margin-top: -11px; }
}
/* ---------- タブレット：カレンダーと日程調整を上下に（日程調整の表が 1/3 の幅に入らないため） ----------
上下に積むときは、原因（日程調整で確定）→ 結果（カレンダーに入る）の順に読めるよう、日程調整を先にする（審査 p10 の 5） */
@media (max-width: 1023px) {
.pp-flow { margin-top: -9px; } /* 見出しの行が折れる幅：見出しの字面から 96（実測） */
.pp-flow > .pp-cal-fig, .pp-flow > .pp-poll { grid-column: 1 / -1; }
.pp-flow > .pp-flow-cap { grid-row: 1; }
.pp-flow > .pp-poll { grid-row: 2; }
.pp-flow > .pp-cal-fig { grid-row: 3; margin-top: 32px; } /* 行の間 16 ＋ 32 → 章の中の 48 */
.pp-flow > .pp-flow-note { grid-row: 4; }
}
/* ---------- スマホ ---------- */
@media (max-width: 767px) {
.pp-index { gap: 0 24px; margin-top: -13px; } /* 題字の字面 → 目次の字面 16 */
.pp-u { min-height: 44px; }
.pp-grid { row-gap: 64px; }
.pp-feats { margin-top: -36px; } /* 名乗り → 機能の一覧：インクで 32 */
.pp-chapter-text + .pp-ts { margin-top: -45.5px; } /* 章の文 → 画面：インクで 24 */
.pp-grid > .pp-chapter-text { margin-top: -7px; }
.pp-tpl { margin-top: -4px; }
.pp-kb-fig { margin-top: -8px; }
.pp-flow { margin-top: -4px; }
.pp-band .pv-id .pv-name { font-size: 32px; line-height: 40px; gap: 12px; }
.pp-band .pv-id .pv-name img { width: 40px; height: 40px; }
.pp-band .pv-id .pv-lead { margin-top: 16px; font-size: 18px; line-height: 28px; }
.pp-band .pv-id .pv-body { margin-top: 16px; }
.pp-band .pv-id .pv-u { margin-top: 16px; }
.pp-feats { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.pp-h3 { font-size: 20px; line-height: 32px; }
.pv-ts { grid-template-columns: minmax(0, 1fr); }
.pp-kb-fig .pv-kb-screen { height: 420px; } /* 状態のタブ ＋ 進行中の列（製品のスマホの表示） */
.pp-flow > .pp-cal-fig { margin-top: 16px; } /* 行の間 16 ＋ 16 → 章の中の 32 */
.pp-drawer { padding: 12px; }
}
/* ================= 審査 p10 への対応 ================= */
/* 7：本文を読点・句点までの節（.pp-ph、組み立てで包む）に分け、スマホでは節の途中で折らない（「配信前の／画像づくりまで。」を防ぐ）。
節が 1 行より長いときだけ、節の中で折れる（inline-block の幅は行の幅まで） */
.pp-band .pv-body .pp-ph, .pp-band .pp-ph { display: inline; }
@media (max-width: 767px) {
.pp-band .pv-body .pp-ph, .pp-band .pp-ph { display: inline-block; }
}
/* 8：HUB の棒と丸が、灰色一色だと読み込み中の骨組みに見える。チップ・ボードの色の系統を控えめに混ぜる
（紙色の低い不透明度 × 製品の色。カードの色はボードの点の色 --c、予定の色はその予定のアクセント --acc）。文字は増やさない */
.pp-band .pv-tk { --c: #94a3b8; }
.pp-band .pv-tk .pv-tk-title .pv-bar { background: color-mix(in srgb, var(--c) 36%, rgb(243 236 220 / 0.5)); }
.pp-band .pv-tk .pv-bar--sub { background: color-mix(in srgb, var(--c) 32%, rgb(148 163 184 / 0.34)); }
.pp-band .pv-tk .pv-tk-tag { background: color-mix(in srgb, var(--c) 12%, rgb(255 255 255 / 0.04)); }
.pp-band .pv-tk .pv-tk-tag .pv-bar { background: color-mix(in srgb, var(--c) 44%, rgb(148 163 184 / 0.4)); }
.pp-band .pv-tk .pv-av { background: color-mix(in srgb, var(--c) 30%, #1b1e27); }
.pp-band .pv-tk .pv-av--rv { background: color-mix(in srgb, #8b5cf6 28%, #1b1e27); }
.pp-band .pv-ev[data-c="purple"] { --acc: rgb(168, 148, 239); }
.pp-band .pv-ev[data-c="cyan"] { --acc: rgb(14, 184, 214); }
.pp-band .pv-ev[data-c="blue"] { --acc: rgb(115, 165, 245); }
.pp-band .pv-ev[data-c="emerald"] { --acc: rgb(70, 190, 140); }
.pp-band .pv-ev[data-c="rose"] { --acc: rgb(227, 128, 170); }
.pp-band .pv-ev[data-c="gold"] { --acc: rgb(193, 161, 66); }
.pp-band .pv-ev[data-c="due"] { --acc: rgb(193, 161, 66); }
.pp-band .pv-ev .pv-bar { background: color-mix(in srgb, var(--acc, #f3ecdc) 50%, rgb(243 236 220 / 0.8)); }
.pp-band .pv-ev[data-c="due"] .pv-bar { background: color-mix(in srgb, var(--acc) 55%, rgb(243 236 220 / 0.35)); }
.pp-band .pv-ev .pv-av { background: color-mix(in srgb, var(--acc, #94a3b8) 40%, #0b0c0f); border-color: color-mix(in srgb, var(--acc, #94a3b8) 55%, transparent); }
.pp-band .pv-poll-top .pv-bar { background: color-mix(in srgb, #a78bfa 24%, rgb(243 236 220 / 0.55)); }
.pp-band .pv-poll-t tbody th .pv-bar { background: color-mix(in srgb, #e8cf7a 28%, rgb(243 236 220 / 0.45)); } /* 候補の日時（候補の金の系統） */
.pp-band .pv-poll-t tbody th .pv-bar--sub { background: color-mix(in srgb, #e8cf7a 18%, rgb(148 163 184 / 0.34)); }
.pp-band .pv-avs .pv-av:nth-child(4n + 1) { background: color-mix(in srgb, #3b82f6 34%, #1b1e27); }
.pp-band .pv-avs .pv-av:nth-child(4n + 2) { background: color-mix(in srgb, #ec4899 30%, #1b1e27); }
.pp-band .pv-avs .pv-av:nth-child(4n + 3) { background: color-mix(in srgb, #10b981 30%, #1b1e27); }
.pp-band .pv-avs .pv-av:nth-child(4n + 4) { background: color-mix(in srgb, #d4b355 30%, #1b1e27); }
.pp-band .pv-poll-final .pv-bar { opacity: 0.7; }
/* 1：カンバンの移動中のカード（products-motion-v1.js がボードの上の層に写しを置いて動かす） */
.pv-kb-fly { position: absolute; z-index: 5; margin: 0; pointer-events: none; will-change: transform;
background: #101217; } /* 製品のカードの地 rgba(20,22,29,.6) を画面の地 #0b0c0f に重ねた色。写しは他のカードの上を渡るので不透明に（透けさせない） */