/* method — 「データについて」の4枚（/method/ /faq/ /optout/ /disclaimer/）。 ⚠ `/method/detect/`（なぜ検知できるのか）は 2026-10-08 に `/method/` へ畳んだ。 一緒に消したのは `.chtabs*`（`:target` で検知面を切り替えるタブ）と `.pf*`（1件の検出の根拠を4段で見せる `proof()`）と `.det__lede` / `.det__steps` / `.det__load` / `.det__conf`。**「いつか使うから」で残さない** —— 残すと `/method/` を触る人が「どこかで効いている」と思って避けるようになる。 ⚠ 2026-10-09 に `/method/` を 305行 → 約200行に削ったとき、一緒に消したのは `.use__lede` / `.use__list` / `.use__note`（「何に使えるか」の3本の導線。 同じ行き先がヘッダとフッタに在る）、`.spots*` と `.det__h`（実物のレコードを 並べる `spots()`。**実装の語で書いてあるのが読みづらい**という指摘そのもの）、 `.det__dl`（「確からしさは2つある」。**`link_confidence` は画面のどこにも 出していない**ので説明だけ残すと問い合わせを自分で作る）、`.src__note` （検知面の但し書き。1行の説明と二重だった）。**復活させるなら先に画面の枚数を数えること。** ⚠⚠ 2026-10-09 の**2回目**（「まだまだ微妙。スライド2枚で」）で、`/method/` を 5節 → 2枚に畳み、フロー図（`.art--flow` / `.flow-*` / `.fig-alt` / `.fig-scroll`）を 消した。**図の出来が悪かったからではない** —— `.fig-alt`（図の文字起こし）を **目に見える形で**置いていたので、図と散文が同じことを2回言うのに 330px 使っていたのが理由。`.src-own`（「当て方は完全一致・後方一致…」。実装の語）と `.more-detail`（負荷と取得の作法の `
`。**`/faq/#load` が同じ中身を全文で 持つ**）も同時に消した。**この2つは戻していない。** ⚠⚠ 2026-10-09 の**3回目**（「**イラストレーティブにして。文字が多すぎたのが問題です、 さっきの図はよかったです**」）で、節を**データの情報源 / データの特性**の2つに 作り直し、**図を2枚入れた**（`flow()` と `asym()`）。2回目の轍を踏まないために: ・図の文字起こしは `
`（`app.css` の視覚的非表示）。 **目に出さない。** ⚠ `.fig-alt` は戻していない。 ・`.src-list` / `.src__*`（検知面の3行の HTML 一覧）は**消した**。同じ中身を `flow()` の図が持っているので、両方置くと「同じことを2回」に戻る。 ・`.read` は3枚 → **2枚**（「検出できなかった ≠ 使っていない」「見えなくなった ≠ 解約」。日付＝初観測は `/faq/#not-adoption-date` へ出した）。 ⚠ **画面を足すなら、先に 1440×900 の `scrollHeight` を測ること** （実測 2,349px → 1,712px → **1,707px**（4回目）。上限は2画面＝約1,800px）。 ⚠⚠ 2026-10-09 の**4回目**（「**画像がダサすぎる。文字のサイズとか、イラストとかも っとシンプルに。トップページのクオリティが高いから、そのレベルにしてほしい**」）で、 **図版だけ**を作り直した（節と本文はそのまま）。直したのは2点: ・**SVG の中の `` を全部 HTML に出した。** SVG の `font-size` は user unit なので、3回目は図の中だけで 9.5 / 10 / 11 / 11.5 / 12px の5種を持ち、 主役が `--fs-xs`（11.5px＝可読性の下限）を**下回っていた**。 いまは `--fs-md` と `--fs-xs` の**2段だけ**で、390px でも 1440px でも 実測 11.5 / 14.0px（HTML なので描画幅に依らない）。 ・**箱と矢印をやめた**（`.flow-box` / `.flow-arrow` / `.flow-feed` / `.flow-lane` / `.flow-track` / `.flow-fill` / `.flow-key` / `.asym__card` / `.asym__out` を削除）。1枚目は**合流する曲線**、2枚目は**同心円2つ**。 ⚠ **戻さないこと** —— 「ダサい」の正体は、トップ（ソナー・地図・1色の横棒）と 語彙が違う角丸の箱そのものだった。 ⚠ この面の CSS は**ここだけ**。`app.css` はトークンと共通部品なので触らない。 ⚠ 新しい色は作らない。使うのは `--series-*` `--step-*` `--tint-1` と `--text-*` `--baseline` だけ（`--gridline` は箱と矢印と一緒に落ちた）。 */ /* ⚠ **ここから下は `app.css` から移したもの。** この画面でしか使わないのに * 共有ファイルに置いてあり、`app.css` を読む人に「全ページで効く」と * 誤解させていた。**移し先の先頭**に置くのは、`app.css` が STYLESHEETS の * 1番目だから —— 末尾に足すと、このファイルの既存の上書きより後ろに回って * カスケードが逆転する。 */ /* ------------------------------------------------------------- タブ / FAQ */ .tabs { display: flex; gap: var(--gap-1); margin: 0 0 22px; border-bottom: 1px solid var(--border); } .tabs__t { font-size: var(--fs-md); text-decoration: none; color: var(--text-secondary); padding: 9px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs__t:hover { color: var(--text-primary); } .tabs__t.is-on { color: var(--text-primary); font-weight: var(--fw-semibold); border-bottom-color: var(--series-1); } .qa details { background: var(--glass-strong); border: 1px solid var(--glass-edge); border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 8px; } .qa summary { font-size: var(--fs-md); font-weight: var(--fw-semibold); cursor: pointer; } .qa summary::marker { color: var(--text-muted); } /* 回答本文。 ⚠ **`max-width: none` を落とさない（2026-10-09）。** `app.css` の散文向けの既定 `p { max-width: 72ch }`（≈582px）がここにも乗り、**カードは 1,030px あるのに 本文が左半分で折り返していた**（「faq も左によってるね。右までないの」）。 器（`
`）が既に幅を決めているので、本文側で重ねて切らない。 */ .qa details p { margin: 10px 0 0; max-width: none; font-size: var(--fs-md); color: var(--text-secondary); } /* ⚠⚠ **指で触る端末の当たり判定。幅で決めない（2026-10-10）。** `docs/design/responsive.md` §1.1 / §4.2。`@media (max-width: …)` は **何列か・畳むか**だけを決める段で、44px は**入力機器の話**。幅で代用すると iPad 横（1024px・指）で外し、窓を狭めた PC（マウス）でも無駄に太る。 ⚠ **`is_mobile` / `has_touch` を渡す `web/tools/qa_mobile.py` があるので、 「`hover: none` は検証しにくい」はもう理由にならない。** 機械で見られる。 実測（2026-10-10・9画面×10面、`out/mobile_before.json`）: ・`summary` … **24px**（`--fs-md` 14px × 行間 1.7 ＝ 23.8）。 WCAG 2.2 の 2.5.8 (AA) の必須ライン 24px ちょうどで、**44px の推奨は割っている** ・`a.tabs__t` … 9px + 23.8 + 9px + 下線 2px ＝ **43.8px**。 `qa_mobile` の丸めで 44 になり**報告から漏れていた**だけで、実寸は足りていない ⚠ **`summary` に `display: flex` を当てない。** 開閉の三角（`::marker`）が 消える —— すぐ上で `.qa summary::marker` に色を当てているのが無意味になる。 **縦の `padding` で伸ばす**（`responsive.md` §4.2 の「文字は大きくしない」）。 ⚠ **本文中のインラインリンクはここに入れない**（WCAG 2.5.8 も除外している）。 `.read__b` / `.clause__b` / `.optout-note p` の「詳しく」「なぜ」は **文の途中**なので、44px にすると行間が壊れる。**この面は文章の面なので、 この除外がいちばん効く。** 入れてよいのは「押すために並べてあるもの」だけ。 */ @media (pointer: coarse) { .tabs__t { min-height: 44px; } .qa summary { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } } /* ⚠ **`.tl-more` は消した。** 「履歴の続きを `
` で開く」の後継は * `static/company.css` の `.log-more` で、そちらが焼いた HTML に出ている。 * `tl-more` という文字列はリポジトリのどこにも残っていない。 */ /* ============================================================== 図版（1枚） `parts/_art.html` の `flow()` に当てる。**JS ゼロ・CSS だけ。** 左（見ている面）→ 中（独自ロジック）→ 右（検出できたプロダクト）のフロー図で、 粒が左から右へ流れる。 ⚠⚠ **SVG の中に文字を置かない**（2026-10-09 の4回目に実測で得た線。5回目でも そのまま）。SVG の `font-size` は user unit なので**描画幅に比例して伸び縮み する** —— 実測で 390px のとき 10.3px（`--fs-xs` ＝ 11.5px ＝ 可読性の下限を 割る。`docs/design/web_design.md` §7.3）、1440px のとき 16.9px。 **`--fs-*` のどの段とも一致しない。** → 文字は全部 HTML にして図の左右・中央に置き、**`--fs-md` と `--fs-xs` の 2段だけ**にした。SVG は形（曲線）だけを持つ。 ⚠ **トップも同じ作り。** `parts/_sonar.html` の探知点は ``、`parts/_map.html` の吹き出しは `
`。 ⚠ **`.fig-scroll` を戻さない。** 前任は viewBox 幅 720 の図を横スクロールさせて 文字の潰れから逃げていた。文字が SVG の外に出たいま、逃げる理由が無い。 ⚠⚠ **縦の位置合わせは「同じ等分の式」だけで持っている。** 左右の `
    ` は `grid-auto-rows: 1fr` の N 等分、SVG は viewBox の高さ 120 を同じ N で等分 （`(i + 0.5) / n`）。**どちらも行の数で決まる**ので、面が増えても線が揃う。 ⚠ `.flw` に `row-gap` / `.flw__src` に `margin` を足さない —— 足した瞬間に 行の中心がずれて、線が点の横から生える。 ⚠ **`preserveAspectRatio="none"` で引き伸ばしている。** 列の幅は画面幅で変わる ので、縦横比を保つと行の中心と合わなくなる。代わりに線の太さは `vector-effect: non-scaling-stroke` が守る（これが無いと、横に伸びた比率の ぶんだけ線が太って見える）。 ⚠ 色は `--step-*` `--tint-1` と `--text-*` だけ。 ⚠ **色だけで意味を伝えない。** 左→中→右の順は**位置**が、流れの向きは **動く粒の向き**が持つ。色は1系統しか使っていない。 */ /* ⚠ **幅の上限はここ**（`.art-fig` が `--art-w` を配り、下の `.flw` が読む）。 `.art-fig` 自身には掛けない —— `
    ` も内側にいる。 */ /* ⚠ **450px → 560px → 620px と広げてきた。** 文字が SVG の外に出てからは **広げても字は太らない**（3回目までは `--art-w` がそのまま文字の倍率だった）。 横に長いフロー図なので、狭いと左右のラベルが詰まって線が短くなる。 ⚠ **上限は画面の高さ。** 1440×900 の `scrollHeight` を測ってから動かすこと （上限は2画面＝約 1,800px）。 */ .art-fig { --art-w: 620px; margin: 18px 0 0; } /* ⚠ **狭い画面では図をパネルの内側余白ぶん外に出す。** 図が広いほど線が長く取れる。 ⚠ 外に出すのは図だけ（本文は読みやすさのために余白を保つ）。 ⚠ `overflow-x` を作らない。22px は `.panel` の padding ぶん（`--pad-panel: 18px 22px`） なので、はみ出さない。 ⚠ **620px → 899px に寄せた（2026-10-10）。** 段は 599 / 899 の2つだけ （`docs/design/responsive.md` §2 / `tests/web/test_responsive.py`）。**599 ではなく 899。** 図が `--art-w`（620px）いっぱいに取れなくなるのは **620 + 44（`.panel` の左右）+ 左右の `--gutter`** を画面が割ったときなので、 境目は 700px 前後 —— つまり **medium（600〜899）の中**にある。599 に寄せると 600〜700px で図だけが 44px 痩せたまま残る。 ⚠ 899 まで広げても広い画面では何も動かない —— 中の `.flw` が `max-width: var(--art-w); margin: 0 auto` で止まるので、器が 44px 広がっても 図は同じ幅で中央に居るだけ。 */ @media (max-width: 899px) { .art-fig { margin-left: -22px; margin-right: -22px; } } /* ⚠⚠ **compact では外へ出さない（2026-10-10・指摘「アニメーションが変な位置」）。** 上の段は「図が広いほど線が長く取れる」ための負マージンだが、390px では **右のラベルがパネルの端に余白ゼロで貼り付いていた**（実測: `.flw__hits` の right=369 に対しパネルの right=370）。「Adobe Marketo Engage」のような長い名前が 器から飛び出して見えるのはこれ。 ⚠ **線が短くなるのは承知のうえ。** 350px の画面で 44px を取り返しても、 中央のソナーと左右のラベルが詰まるだけで、**読めなくなるほうが損**。 ⚠ `margin: 0` ではなく**打ち消し**で書く（上の段の値を2箇所に持たない）。 */ @media (max-width: 599px) { .art-fig { margin-left: 0; margin-right: 0; } } /* 図の本体（HTML のラベル＋2枚の SVG）。**5列**: 検知面 → 合流の線 → 独自ロジック → 分配の線 → 検出できたプロダクト ⚠ **列と列のあいだに `gap` を置かない。** 線は列の端から端まで引いてあるので、 隙間を空けると**点と線が繋がって見えなくなる。** ⚠ **左右の列は `minmax(0, max-content)`。** 製品名が長い回に `max-content` の ままだと列が伸びて線が消えるので、0 まで縮めて折り返させる。 */ .flw { max-width: var(--art-w); margin: 0 auto; /* 行の高さ。⚠ **中身（4行 × 16px ＝ 64px）では線が寝て「流れ」に見えない。** ⚠⚠ **実際の高さは2つのうち大きいほう**で、広い画面では後者が勝つ: ・この `min-height` ・**線の SVG の縦横比**（viewBox 64×120）—— 列が定まっていない向きの `height: 100%` は indefinite なので、Chrome は viewBox の比で高さを出す。 実測 1440px で線の列が 167px 幅 → 167 × 120/64 ＝ **315px**。 つまり**画面が広いほど図が縦にも伸びる**（線が寝ない）。狭い画面では比の ほうが小さくなるので `min-height` が受ける。**どちらでも行の等分と viewBox の 等分は一致する**ので、線の端は必ず点に着く。 ⚠ 高さを固定したくなったら `grid-template-rows` を置くこと —— ただし 1440px では曲線がかなり平たくなる（いちど測ってから決める）。 */ min-height: 184px; display: grid; align-items: stretch; /* ⚠⚠ **左右のラベル列は同じ幅にする（2026-10-10・指摘「独自ロジックが * 中央によってない」）。** * * 以前は左右とも `minmax(0, max-content)` で、**中身の長さがそのまま列幅**に * なっていた。左は「DNS / HTTP / GTM / ほか」で 47px、右は製品名で 117〜151px。 * **差の半分だけ中央列が左へ寄る** —— 実測（2026-10-10）: * * 390px 図の中心 195 / ロジックの中心 160 （-35px） * 768px 図の中心 384 / ロジックの中心 332 （-52px） * 1280px 図の中心 633 / ロジックの中心 580 （-53px） * * **狭い画面だけの話ではない。全幅でずれていた。** * * ⚠ **`1fr` と書かない。`minmax(0, 1fr)`。** `1fr` は `minmax(auto, 1fr)` の * 略で中身の min-content より縮まないので、長い製品名があると**また * 左右で幅が変わる**（直したいことが直らない）。 * ⚠ **ラベル列と線の列の比は 2:1。** 等分にすると 390px でラベルが 54px まで * 痩せて、製品名が3行以上に折れる。線は 26px あれば流れとして読める。 * ⚠ 中央列は `max-content` のまま —— ここを `fr` にすると盤面（ソナー）の * 大きさが画面幅で踊る。 */ grid-template-columns: minmax(0, 2fr) minmax(26px, 1fr) minmax(0, max-content) minmax(26px, 1fr) minmax(0, 2fr); } /* SVG は形だけを持つ。⚠ **`` を置かない**（上の注記）。 `height: 100%` で列の高さいっぱいに伸びる —— 行の等分と viewBox の等分が 一致するのはこれが前提。 */ .art--wire { display: block; width: 100%; height: 100%; } /* ------------------------------------------------------- 左右のラベルの列 */ /* ⚠ **`1fr` の等分。** `parts/_art.html` の `y`（`120 * (i + 0.5) / n`）と 同じ式なので、行が何本でも線の端と中心が揃う。 */ .flw__srcs, .flw__hits { display: grid; grid-auto-rows: 1fr; margin: 0; padding: 0; list-style: none; /* ⚠ **`max-width: none` が要る。** `app.css` の散文向けの既定 `ul { max-width: 72ch }`（≈582px）がここにも乗る。 詳しくは `tests/web/test_stylesheet.py` の `test_a_list_used_as_layout_opts_out_of_the_prose_width`。 */ max-width: none; } /* ⚠ **`--fs-sm` より小さくしない（2026-10-09 に `--fs-xs` から上げた）。** この図は `/method/` の主役で、図の中の文字が本文より小さいと 「添え書き」に見える（「文字大きくして」と言われた）。 */ .flw__src, .flw__hit { display: flex; align-items: center; gap: var(--gap-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.45; overflow-wrap: anywhere; } .flw__src { justify-content: flex-end; text-align: right; color: var(--text-secondary); } /* 右は「独自ロジックを通ったあと」なので、左より1段濃い（**色ではなく濃さ**）。 */ .flw__hit { color: var(--text-primary); } /* 最後の1行（「ほか N プロダクト」）。⚠ **大きさは他の行と揃える**。 例そのものではないので、色と太さだけ落とす。 */ .flw__hit--more { color: var(--text-muted); font-weight: var(--fw-medium); } /* 線の端の点。⚠ **SVG ではなく CSS で描く。** `preserveAspectRatio="none"` で 引き伸ばしている SVG の中に `` を置くと、**楕円に潰れる。** */ /* ⚠ **塗りつぶしに戻さない（2026-10-09）。** 「もっと白に枠線って感じで」と 言われた。塗りつぶしの丸は**線より重く見えて、線の流れを止めていた** —— ここは「端ここ」の印であって、図の主役ではない。 ⚠ 地は `--surface-1`（白）。**`transparent` にしない** —— 線の端が丸の中を 通って見え、点が汚れる。 ⚠ 左右で大きさを変えない。変えるのは**枠線の色だけ**。 */ .flw__src::after, .flw__hit::before { content: ""; flex: none; width: 9px; height: 9px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--surface-1); border: 2px solid var(--step-2); } /* ⚠⚠ **左（入力側）は無彩色。** 「まだ何も判定していない生の観測」なので、 色が付いていると**もう検出できているように読める**（2026-10-09 の指摘）。 色は「独自ロジックを通った後」の印。 */ .flw__src::after { border-color: var(--text-muted); } /* --------------------------------------------------------- 中央のノード */ /* ⚠⚠ **トップのソナーと同じ語彙**（指摘「**もっと AI っぽい感じで。sonar の animation っぽい感じかな**」）。直前は角丸の長方形で、図の中でそこだけが 「ただの箱」だった。 ⚠ **`home.css` の `.sonar*` を使い回していない。** あのシートは `/method/` に 配られていない（`web/emit/render.STYLESHEETS`）。**形だけ同じ**にしてある。 ⚠ `position: relative` は名前（`.flw__name`）を盤面の真下に吊るすため。 **高さは盤面だけ**なので、`align-self: center` で盤面の中心＝行の中心になり、 左右の線（viewBox の y=60）とちょうど合う。 */ .flw__core { align-self: center; position: relative; margin: 0; width: clamp(88px, 13vw, 128px); aspect-ratio: 1; } .art--dish { display: block; width: 100%; height: 100%; } /* 盤面。⚠ **線だけで「面」を作ろうとしない**（トップで実測した知見）。 */ .dish__face { fill: url(#flw-face); } .dish__face-a { stop-color: var(--series-1); stop-opacity: 0.14; } .dish__face-b { stop-color: var(--series-1); stop-opacity: 0.03; } /* 目盛り。**静止していても「レーダーの画面」に見える骨格。** */ .dish__grid { fill: none; stroke: var(--series-1); stroke-opacity: 0.34; stroke-width: 1.1; } .dish__grid path { stroke-opacity: 0.2; } /* 外へ広がる輪。3本を時間差で出す。 ⚠ SVG は `transform-box` を明示しないと、拡大の中心が要素の箱ではなく **ユーザー空間の原点**になる（＝左上へ飛ぶ）。 */ .dish__ping { fill: none; stroke: var(--series-1); stroke-width: 1.4; transform-box: view-box; transform-origin: 60px 60px; /* ⚠⚠ **`backwards` を落とさない。** 遅延中の要素は既定で **アニメーション前の姿（＝`r=58` の輪が等倍・不透明）**で描かれる。 */ animation: flwPing 4.8s ease-out infinite backwards; } /* ⚠⚠ **遅延は負の値。正にしない（2026-10-09 に直した）。** 正の `1.6s` / `3.2s` だと、その間 2本目と3本目が**等倍・不透明の輪のまま 盤面の縁に重なる** —— 開いた瞬間だけ枠線が太く見え、数秒で細くなる。 実際に「最初の枠線だけなんで太いの？時間たったら薄くなるんだけど」と言われた。 負の遅延なら**最初の1フレームから週期の途中**で始まるので、待ち時間が消える。 ⚠ 上の `backwards` も保険として残す（遅延を正に戻した人への受け皿）。 */ .dish__ping--2 { animation-delay: -1.6s; } .dish__ping--3 { animation-delay: -3.2s; } @keyframes flwPing { 0% { transform: scale(0.1); opacity: 0; } 12% { opacity: 0.8; } 100% { transform: scale(1); opacity: 0; } } /* 掃引。**線ではなく扇形のグラデーション**にすると残光に見える。 */ .dish__sweep { transform-box: view-box; transform-origin: 60px 60px; animation: flwSweep 4.8s linear infinite; } @keyframes flwSweep { to { transform: rotate(360deg); } } /* ⚠ `stop-color` は属性に `var()` を書いても効かない。**CSS 側で指定する。** */ .dish__stop-a { stop-color: var(--series-1); stop-opacity: 0; } .dish__stop-b { stop-color: var(--series-1); stop-opacity: 0.4; } /* 名前。**図の中で唯一の「見出し」段**（`--fs-md`）。盤面の真下に吊るす。 ⚠ 盤面の中に置かない —— 同心円と掃引の上に字を重ねると、どちらも読めなくなる。 */ .flw__name { position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); white-space: nowrap; /* ⚠ **青字（2026-10-09、指示）。** 地の文と同じ色だと、図の中で 「ここが中核」ということを文字側から言えていなかった。 ⚠ 左（無彩色）→ 中央（青）→ 右（青）の流れと揃う。 */ font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--link); } /* ------------------------------------------------------------------- 線 */ /* 下地の線。**止めても残る側。** */ .flw-wires path { fill: none; stroke: var(--step-1); stroke-width: 1.4; vector-effect: non-scaling-stroke; } /* ⚠⚠ **左（入力側）だけ無彩色**（上の `.flw__src::after` と同じ理由）。 */ .art--wire--raw .flw-wires path { stroke: var(--baseline); } .art--wire--raw .flw-dashes path { stroke: var(--text-muted); } /* 流れている粒。⚠⚠ **`` を飛ばさない。** 粒そのものを動かすと `prefers-reduced-motion` で止めたときに**全部が始点に重なって**、図の意味が 壊れる（4回目の知見）。`stroke-dasharray` の長さ 0 の破線＋丸い線端で粒を作り、 `stroke-dashoffset` を動かす。止めた姿は**線に沿って等間隔に並んだ粒**になる。 ⚠ `vector-effect` があるので、間隔（26）も太さ（3.4）も**画面のピクセル**。 左右で引き伸ばし率が違っても、粒の大きさと間隔は揃う。 */ .flw-dashes path { fill: none; stroke: var(--step-3); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 0.1 26; vector-effect: non-scaling-stroke; animation: flowRun 2.6s linear infinite; } /* ⚠ **線ごとにずらす。** 揃っていると「4本の流れ」ではなく「1枚の縞」に見える。 */ .flw-dashes path:nth-child(2) { animation-delay: -0.43s; } .flw-dashes path:nth-child(3) { animation-delay: -0.86s; } .flw-dashes path:nth-child(4) { animation-delay: -1.29s; } .flw-dashes path:nth-child(5) { animation-delay: -1.72s; } .flw-dashes path:nth-child(6) { animation-delay: -2.15s; } /* 始点 → 終点の向き。**`from` を大きくする**と粒が進行方向へ動く。 */ @keyframes flowRun { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { /* `app.css` が `*` に `animation: none !important` を当てているので実質二重。 それでもここに書くのは、**この図は「止めても読めること」が要件**だから。 ⚠ **止めた姿で何も消さない。** 下地の線も、等間隔に並んだ粒も、ノードの輪も そのまま残る —— 動きは「流れている感じ」を足しているだけで、図の意味は 止まった状態が全部持っている。 ⚠⚠ **この枝を幅の段（599 / 899）に移さない（2026-10-10）。** `docs/design/responsive.md` §4.5。**狭い画面で止めるのではなく、 止めてほしい人のときだけ止める** —— 別の話で、混ぜると 「スマホだけアニメーションが消える」に化ける（`home.css` の `.sonar` が 620px で `display: none` になっていたのと同じ間違い）。 `prefers-*` は幅ではないので `test_responsive.py` も段として数えない。 */ .flw-dashes path { animation: none; stroke-dashoffset: 0; } /* ⚠ **止めた位置を線ごとにずらす。** 分配の6本は**始点が同じ**なので、 全部を 0 で止めると粒が1か所に積み重なる（動いているときは `animation-delay` がずらしている）。間隔 26 を本数で割った値を置く。 */ .flw-dashes path:nth-child(2) { stroke-dashoffset: 4.3; } .flw-dashes path:nth-child(3) { stroke-dashoffset: 8.6; } .flw-dashes path:nth-child(4) { stroke-dashoffset: 13; } .flw-dashes path:nth-child(5) { stroke-dashoffset: 17.3; } .flw-dashes path:nth-child(6) { stroke-dashoffset: 21.6; } /* 盤面。⚠ **止めた姿でも「同心円 + 輪」として成立させる**（トップと同じ作法）。 輪は3本とも見えるところに置き直す —— 消すと盤面が目盛りだけになる。 */ .dish__ping, .dish__sweep { animation: none; } .dish__ping { opacity: 0.3; } .dish__ping--2 { transform: scale(0.66); } .dish__ping--3 { transform: scale(0.34); } } /* 狭い画面。⚠ **文字の段は増やさない**（`--fs-md` / `--fs-xs` の2つのまま）。 縮めるのは行の高さだけ（盤面は `clamp()` が自分で縮む）。 ⚠ **460px → 599px に寄せた（2026-10-10）。** 460 も 599 も**スマホ縦の中**で、 区別が画面に出ていない（`docs/design/responsive.md` §1 の表）。 上の図の bleed と段が違うのは**中身が違う**から —— あちらは図の幅、 こちらは「指で1列に見るときの行の高さ」で、compact の話。 */ @media (max-width: 599px) { /* ⚠⚠ **この節はベースの `.flw` より後ろに置くこと（2026-10-10 に踏んだ）。** 同じ詳細度なので、前に書くと**ベースの `grid-template-columns` が勝って 1行も効かない**（実測: 390px で `72px 36px 88px 36px 72px` のままだった）。 ⚠ 線の取り分をさらに削って、ラベルに回す。2:1 のままだとラベル列が 72px しか無く、**「Anthropi / c」と単語の途中で折れた** （`.flw__hit` は `overflow-wrap: anywhere` なので、入らなければ語を割る）。 ⚠ **`overflow-wrap: anywhere` を外して解かない。** 無いと入らない語が列を 押し広げ、**左右の対称が崩れて中央がまた寄る**（直した当のものが戻る）。 */ .flw { min-height: 168px; grid-template-columns: minmax(0, 3fr) minmax(26px, 1fr) minmax(0, max-content) minmax(26px, 1fr) minmax(0, 3fr); } /* ⚠⚠ **タブ帯を1行に戻す（2026-10-10・指摘「サービスについてのページ群が * ぐちゃぐちゃ」）。** * * 実測: 390px で `.tabs` が **115px**（768px では 44px）。5本が 350px に * 押し込まれ、**各タブが3行に折り返していた**（「この/データ/について」）。 * 日本語は1文字ずつ折り返せるので、`flex` が縮めた幅でそのまま縦に伸びる。 * * ⚠ **折り返させない。横に流す。** 5本 × 約110px ＝ 550px は * どう詰めても 350px には入らない（`docs/design/responsive.md` §5.1 と * 同じ結論 —— 入らないものを押し込むと壊れる）。 * * ⚠⚠ **下線の重ね合わせ（`margin-bottom: -1px`）をここでやめる。** * `overflow-x` を持つ器の中では、帯の罫に 1px 重ねた下線が**クリップされて * 消える**（共有部品の担当が指摘していた罠）。狭い画面では * **現在地を塗り（ピル）で示す** —— 下線は広い画面のまま。 * ⚠ スクロールバーは出さない（指で払う前提。高さを食わせない）。 * ⚠ `--gutter` ぶん外へ出して**画面の端まで流す**。途中で切れていると * 「まだ続きがある」が伝わらない。 */ .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--gap-2); border-bottom: 0; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .tabs::-webkit-scrollbar { display: none; } .tabs__t { flex: none; white-space: nowrap; border-bottom: 0; margin-bottom: 0; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-1); padding: 10px 14px; } .tabs__t.is-on { border-color: var(--series-1); background: var(--tint-1); color: var(--text-primary); } } /* 本文。⚠ **リードは3文まで**（図が流れを持っているので、散文で言い直さない）。 ⚠ **`--fs-md`（2026-10-09 に `--fs-lede` から下げた）。** 「上の部分の文字のサイズ小さくした方がいいのでは」と言われた。 このパネルの主役は**図**で、リードはその前置き。17px だと図と重さが並ぶ。 ⚠ `.lede`（`app.css`、見出しの下の1文）とは別物。**あちらは下げない** —— あれはページの要約で、図と競る相手がいない。 */ .m-lede { margin: 0; font-size: var(--fs-md); line-height: 1.75; } /* ⚠⚠ **`max-width: none` が要る。** `app.css` の散文向けの既定 `p { max-width: 72ch }` （≈582px）がここにも乗り、パネルが 1,030px あっても**565px で折り返して右半分が 空いていた**（2026-10-09 の指摘「変なところで折り返してない？右まで行ってないよね」）。 ⚠ **`width: 100%` では直らない**（`max-width` が勝つ）。 ⚠ **伸ばすのは「パネルの中で1行として見せているもの」だけ。** すぐ下の `.muted.fine` や `.read__b` は読み物の段落なので 72ch のままが正しい。 */ .m-fact { margin: 14px 0 0; max-width: none; font-size: var(--fs-md); } /* 関連FAQ。**節ごとに1本**（指定どおり）。 ⚠ 行き先は `pages/faq.html` の `qa` に**実在する id だけ**。素片のリンク切れは 404 にならないので `tests/web/test_links.py` が別に見ている。 ⚠ **`max-width: none`。** 散文ではなく**リンクを並べた1本の列**なので、72ch で 折り返すと3行になる（上の `.m-fact` と同じ罠）。 */ .faq-rel { margin: 14px 0 0; max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gap-1) var(--gap-3); font-size: var(--fs-sm); } .faq-rel__k { color: var(--text-muted); font-weight: var(--fw-semibold); } .faq-rel a { color: var(--text-secondary); } /* ⚠ **ここは「文の途中のリンク」ではない。** `.faq-rel` は `display: flex` の **押すために並べた列**なので、`qa_mobile.py` の判定（親に地の文があるか）でも インライン除外に当たらず、素の `a` として数えられている。 実測（2026-10-10）: `--fs-sm`（12.5px）× 行間 1.7 ＝ **21px** —— WCAG 2.2 の 2.5.8 (AA) の必須ライン 24px を割っている。 ⚠ **文字を大きくして直さない。** `--fs-sm` は「注記の段」で、ここは注記 （上の注記にあるとおり、このパネルで使ってよいのは3段だけ）。縦の `padding` で伸ばす。 ⚠ **`align-items: baseline` を外さない。** 縦の padding を足しても文字の ベースラインは動かないので、「関連FAQ」のラベルと行が揃ったまま高さだけ増える。 */ @media (pointer: coarse) { .faq-rel a { min-height: 44px; padding-top: 11px; padding-bottom: 11px; } } /* ============================================== 読み方（旧「データの特性」） `.read` の2枚は**法務の線**（検出できなかった ≠ 使っていない / 見えなくなった ≠ 解約。README §原則1）。 ⚠ **枚数を増やす前に画面の高さを測ること。** 3枚目（日付＝初観測）は `/faq/#not-adoption-date` へ出した。 ⚠⚠ **左の縦線（`border-left`）を戻さない。** 同じ形が**3回**差し戻されている: 「免責事項のオレンジの線が本当に微妙」「左の枠線だけ乗ってるのとかが超ダサい」 「これとかは左線いる？もっとスマートにしてほしいな」（2026-10-09）。 却下されているのは色でも太さでもなく**左線という形そのもの**。 ⚠ **新しい見た目を作らない。** いまは「薄い面 + 1px の縁 + 角丸」で、 `/faq/` の `
    `（`.qa details`）と同じ作り。 ⚠⚠ **2枚の重みを変えない。** かつて2枚目だけ `--series-2` の左線を着けていたが、 どちらが重いかは本文の語（≠ の両側）が持っている。 **色で「こっちが大事」と言わない。** ⚠ **文字の段を増やさない**（2026-10-09 の指摘「文字のサイズがバラバラすぎて微妙」）。 このパネルの中で使ってよいのは3段だけ: `--fs-lede` … リード文（`.m-lede`）1本だけ `--fs-md` … 本文（`.m-fact` / `.read__k` / `.read__b`） `--fs-sm` … 注記（`.muted.fine` / `.faq-rel`） **結論と理由の差は大きさではなく `--fw-*` と `--text-*` が持つ。** 以前は `.read__k` だけ `--fs-lede` の太字（17px）で、しかも 720px 以下で `--fs-base`（15px）に落ちていた —— **同じ役割が画面幅で段を変えていた。** */ /* ⚠⚠ **囲みをやめた（2026-10-09）。**「余白多すぎるね。普通に箇条書きっぽく したらいいのでは？」。パネルの中に面をもう1枚重ねると、**中身は2行なのに 縦を 120px 使う**。この2枚は法務の線であって、カードとして押すものではない。 ⚠ **左の縦線も復活させない**（3回差し戻されている形）。 ⚠ **行頭のマーカーも出さない。** 結論の行が `≠` を含むので、点を打つと 記号が2種並んで読みにくい。区切りは**罫線1本**。 */ .reads { margin-top: 10px; } /* ⚠ **行間を詰める（2026-10-09、「もうちょいぎゅっと書きたいね」）。** 結論の行と理由の行は**1つのかたまり**なので、中は詰めて、 枚と枚のあいだだけを罫線で切る。 */ .read { padding: 8px 0; border-top: 1px solid var(--gridline); } .read:first-child { border-top: 0; padding-top: 0; } .read__k { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); } .read__b { margin: 1px 0 0; font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.6; } /* 掲載停止の窓口。**個票の実名公開より先に要る**ので、導線を弱くしない */ .optout-note { border-left: 3px solid var(--critical); padding-left: 16px; margin: 14px 0 0; } .optout-note p { margin: 0; font-size: var(--fs-md); } /* 2本目以降（送り先・FAQ への導線）。⚠ 全部 `margin: 0` だと行が詰まって1段落に見える。 */ .optout-note p + p { margin-top: 8px; } /* ========================================= 免責の条項（`pages/disclaimer.html`） ⚠⚠ **2026-10-09。指摘は「免責事項だけとてもダサい。書いてあることはいいけど、 もっと他のデザインと平仄を合わせて」。** 直前は `sec-head` + `ul.plain` が **素のまま4枚ぶら下がっているだけ**で、形は揃っていたが、この1枚だけ 「面（ガラス）の上に文字を置く」というサイトの約束から外れていた。 ⚠ **新しい見た目を作っていない。** 使っているのは全部よそに在る部品: ・面は `.panel` + `.glass`（`app.css`）…`/method/` の1枚目・トップと同じ ・条項の列は `ul.plain`（`app.css`）…罫だけで区切る既存の一覧 ・「結論 → 理由」の組は `.read__k` / `.read__b` と同じ作り ・先頭の節だけ色を変えるのは `.read--key` と同じ約束 ⚠ **`.read*` を直接着せていないのは、あれが `/method/` の2枚目の持ち物だから。** 向こうは17px太字の3枚（スライドの中の1枚）で、こちらは14〜15pxの条項が14本。 **同じ見た目を共有すると、どちらかを直した日にもう片方が崩れる。** ⚠ 逆に、ここを触るときも `.read*` には手を出さないこと。 ⚠ **余白で読ませる。** 条項が読み飛ばされないために効くのは囲みではなく 「結論の1行が太く、理由が1段落、罫で切れている」こと。**色を足さない。** */ /* 面の中なので、`ul.plain` の既定（上下 6px）より広く取る。 ⚠ 先頭と末尾は詰める —— `.panel` が自前で上下の余白を持っている。 */ .clauses ul.plain li { padding: 14px 0; } .clauses ul.plain li:first-child { padding-top: 0; } .clauses ul.plain li:last-child { padding-bottom: 0; } /* 結論。⚠ **1行で言い切る。** 2行に伸びた時点で一覧性が消える。 */ .clause__k { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-primary); line-height: 1.6; } /* 理由。⚠ **`--text-secondary`。** 結論と同じ濃さにすると、どちらが結論か読めない。 ⚠⚠ **`max-width: none`（2026-10-09）。** `72ch` は半角 `0` の幅なので **日本語の行長を測れていない** —— パネルは 1,180px あるのに本文が 730px で折れ、 右が丸ごと空いていた（「左によりすぎじゃない？右はなぜ使わないの？」）。 器（`.clauses` パネル）がすでに幅を決めているので、本文側で重ねて切らない。 */ .clause__b { margin: 5px 0 0; font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.75; max-width: none; } /* ⚠⚠ **左のオレンジの縦線をやめた（2026-10-09。2回指摘された）。** 「読み違えないでください」＝誤読したときの実害が最大の節（README §原則1）なので 重く見せたかったが、**面の左に色の棒を貼るのは、重みではなく装飾に見えた**。 このサイトの他の面（トップのパネル・個票の節・`/method/` のカード）に **色の縦線を使っているものは1つも無く、ここだけ語彙が違っていた**のが正体。 ⚠ **重みは見出しが持つ。** この節には `

    読み違えないでください

    ` が既にあり、 それが「ここは他と違う」を言っている。**同じことを色でもう一度言わない。** ⚠ **色の棒を別の色で戻さない。** 問題は色ではなく「棒を貼ること」のほう。 ⚠ `.read--key`（`/method/`）も同じ形だったが、あちらは節の統合で作り直し中。 */ /* ====================================== 依頼のひな形（`pages/optout.html`） ⚠⚠ **「そのままコピーして使える形」が要件（2026-10-09）。** 散文の箇条書きでは 何をどう書けばよいか分からない、という指摘。文面は `pages/optout.html` の `form_subject` / `form_lines` が持ち、ここは枠だけ。 ⚠ **JS を足さない（コピーボタンを作らない）。** 枠が `pre` なら、スクリプトが 死んでいても読めるし、選択してコピーできる。 ⚠⚠ **折り返しを外さない。** `pre` の既定（`white-space: pre`）のままだと 390px で**ページごと横スクロールする**。日本語は既定で任意の位置で折れるので、 `pre-wrap` だけで足りる（`overflow-wrap` は長い URL を貼られたときの保険）。 */ .form-tmpl { margin: 14px 0 0; padding: 14px 16px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: var(--fs-md); line-height: 1.9; color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }