/* hikouki-tenimotsu (project-05-01) 固有スタイル
   ★ 06-02(desk-kankyou-8jouken)の style.css をそのまま複製し、末尾に「05-01 固有」を足した
     (設計01 §9: 複製元を 06-01 → 06-02 に変えた。06-02 は fieldset の min-width・44px のラジオ・
     flex の min-width を初見走行 ID711 の後の形で持っている)。
   design-tokens.css (バンドル内コピー) の上に載せる。
   外部フォント・CDN・外部画像は使わない(完成基準11)。 */
@import url("../design-tokens.css");

/* ★★ `hidden` を、クラスの display より強くする(ID662 の型・09-01/07-01/04-03 と同じ1行)★★
   `hidden` を効かせているのは UA の `[hidden]{display:none}` で、作者のクラス規則より弱い。
   このツールは行の追加・削除と「国際線だけの欄」で hidden を多く使うので、**生まれた時から塞ぐ**。
   入れる前に数えた: このツールの CSS/JS に `display:…!important` は0件、`style.display` への代入も0件。 */
[hidden] { display: none !important; }

/* design-tokens.css の body に word-break 指定が無いため、狭い画面幅で日本語の禁則が崩れる。
   line-break: strict で行頭禁則を維持し、word-break: keep-all でカタカナ語の途中改行を防ぎ、
   overflow-wrap: break-word を安全弁に置く(04-01/04-02/04-03 と同じ三点セット)。 */
body {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.page-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-2) var(--space-4);
}

/* ===== 画面切替 =====

   ★ 入場演出で opacity を使わない。動かすのは位置だけにする。

   04-03 は「opacity:0 から始める演出」で2回、結果画面が真っ白になった。
   **演出が止まった時に何が残るかで設計を決める。**
   opacity を 0 から始める演出は、止まると「見えない」に落ちる。
   位置(transform)だけなら、止まっても「12px ずれた場所にちゃんと見える」で済む。
   **中身が読めなくなる演出は、演出として釣り合っていない。** */
.screen {
  transform: none;
}

.screen:not([hidden]) {
  animation: coffee-screen-in var(--duration-base, 0.24s) var(--ease, ease) 1;
}

@keyframes coffee-screen-in {
  from { transform: translateY(12px); }
  to { transform: none; }
}

.screen[hidden] { display: none; }

/* ===== 入口 =====
   ★ 04-02 では hero が 320×568 で 413px=画面の7割強を占め、道具本体を毎回画面外へ
     押し出していた(2026-08-26 実測)。ここは2行に抑え、症状の選択肢と同居させる。 */
.hero {
  padding: var(--space-2) 0 var(--space-1);
}

.hero[hidden] { display: none; }

.hero__title {
  margin: 0;
  font-size: clamp(1.15rem, 5.2vw, 1.6rem);
  line-height: 1.45;
}

/* ===== 画面の枠 ===== */

.hd { padding: var(--space-2) 0 var(--space-1); }

/* ★ 2026-08-29 実描画で見つけた見落とし:
   design-tokens.css の `h2` は**「小さく追跡させたラベル」**として定義されていて、
   `font-size: 0.8rem / letter-spacing: 0.25em / color: --color-text-muted` が付いている。
   こちらは h2 を**画面の見出し**として使っているのに font-size と line-height しか
   上書きしておらず、**letter-spacing 0.25em(実測 4.2px)と muted 色がそのまま残っていた**
   ——「先 に 分 け て か ら 、」と1文字ずつ離れて出ていた。
   **共通部品を別の役割で使う時は、その部品が持っている指定を全部見て打ち消す。**
   font-size を上書きしたことで letter-spacing の em 値が実寸で増えてもいた(0.8rem→1.05rem)。 */
.hd h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.45;
  color: var(--color-text);
}

.lead {
  margin: 4px 0 0;
  font-size: var(--fs-sm, 0.82rem);
  color: var(--color-text-muted);
}

.note {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ===== 収益導線 =====
   ★ 10分プランを開いた後にだけ出る(手を動かす前に物を売らない)。
     開示は導線の**直前**に置く——04-02 ID242 で、開示とリンクが 518px 離れていて
     320×568 では同一画面に入らなかった(是正後 101px)。 */
.offer__pr {
  display: block;
  margin-bottom: 5px;
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

/* ===== ボタン =====
   ★ 高さは 44px を割らない。04-01/04-02 では .btn--ghost が 320px 幅でだけ 39px になり、
     375px 以上では届いていた——**1つの幅だけ見ると存在しない欠陥に見える形**だった
     (ID261/ID263)。最初から min-height で押さえる。 */
.btn {
  display: block;
  width: 100%;
  min-height: 44px;
}

.btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-sm, 0.85rem);
  font-weight: 600;
  text-decoration: none;
  padding: 0.5em 1.1em;
  border: 1px solid var(--color-border);
  border-bottom: 3px solid var(--color-border);
  cursor: pointer;
  transition: border-color var(--duration-fast, 0.15s) var(--ease, ease),
              color var(--duration-fast, 0.15s) var(--ease, ease);
}

.btn--ghost:hover {
  border-color: var(--color-accent-strong);
  color: var(--color-accent-strong);
}

.btn--small { font-size: var(--fs-xs, 0.76rem); }

.offer__link { width: 100%; }

.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 2px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--fs-sm, 0.82rem);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.back:hover { color: var(--color-accent-hover); }

/* ===== 版表示 =====
   ★ 04-01 ID258: ユーザーテストで「是正が効いていない」ように見えた時、
     **キャッシュで古い版が動いていたのか、直っていないのか**を切り分ける手段が無かった。
     テストのたびに「どの版を触ったか」を確定できるようにする。 */
.build-stamp {
  margin: var(--space-3) 0 0;
  font-size: 0.66rem;
  color: var(--color-text-muted);
  text-align: right;
}

/* ===== 日本語組版(完成基準9) ===== */

/* カタカナ複合語を途中で折らない。分割は app-state.js splitKatakanaSegments が行う */
.no-break-katakana { white-space: nowrap; }

/* 地の文は通常の改行点を使わせる(禁則を効かせるため)。
   カタカナ語の保護は上の .no-break-katakana が個別に担う
   (04-02 ID148 と同じ考え方: CSSの全面適用ではなくトークン単位で守る)。 */
.hero__title, .hd h2, .lead, .note, /* ★ 2026-09-03(project-06-01)で足した枠。
   `body` の `word-break: keep-all` + `overflow-wrap: break-word` のままだと、
   日本語のひとつながりが「切れない語」として扱われ、**溢れた時に禁則を飛ばして折り返す**
   ——実測(320px)で `.source-note` の「…世論調査です。」の**句点だけが行頭に落ちた**。
   `word-break: normal` に戻すと `line-break: strict` の禁則が効く。
   **新しい表示枠を足したら、この一覧にも足すこと。** */
.move, .source-section, .source-note,
.src-box, .cmp, .row, .sec, .route, .calc, .err, .cap-note{
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ハブ復帰導線のタップ対象については、このファイルには何も置かない。
   ★ 2026-08-29(ID271)に 90×18 / 112×24 / 54×16 を検出して**ツールの中だけ**を
     暫定で上書きしていたが、**原因は design-tokens.css(正本)側で全ツール共通**だった。
     ID275 で正本が直った(--hub-tap-min: 44px)ため、**この上書きは削除した**(ID276)。
     暫定の上書きを残すと、正本が直ったことに誰も気づかないまま二重管理になる。
   ★ 2026-09-03(project-06-01): この注記は、付いていた規則(.act)を未使用として
     削除した後も**決定として生きている**ので残す。 */

/* ===== 完成基準7: prefers-reduced-motion で動きを止める =====
   design-tokens.css 側にも一括対応(*, *::before, *::after)があるが、
   **依存を前提にしない。**このファイルで新設した動きをここでも明示して止める。

   ★ 04-03 ID249 の教訓: 自分の点検が `animation` だけを数えていて `transition` を
     見落とし、`.quiz-opt` が漏れていた。**animation と transition の両方**を数えること。
     このファイルで動きを持つのは:
       animation … .screen:not([hidden])
       transition … .btn--ghost
     の**2つ**。ここに2つとも書く。
     ★ 2026-09-24(project-05-01): 06-02 から複製した後、未使用の `.opt`(transition を持っていた)を
       規則ごと消したので 3 → 2 になった。**数を書いたコメントは、規則を消した時に一緒に嘘になる。**
     ★ 2026-09-03(project-06-01)で数え直した。09-03 では5つだったが、
       未使用CSSの削除で `.check__btn`(手順のチェック)と `.time__fill`(10分プランの経過)が
       **規則ごと消えた**ので3つになった。
       **数を書いたコメントは、規則を消した時に一緒に嘘になる。**削除の後は必ず数え直すこと。
       なお `.offer__link` は `.btn--ghost` を付けているので、この3つに含まれている。 */
@media (prefers-reduced-motion: reduce) {
  .screen:not([hidden]) {
    animation: none;
  }
  .btn--ghost{
    transition-duration: 0.01ms;
  }
}

/* ハブフッターの3つ目の子(プライバシーの1行)。
   .hub-footer は flex なので、そのままだとブランド・ナビと同じ行に並ぼうとする。
   幅いっぱいで折り返して、独立した1行にする。 */
.hub-footer__privacy {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--fs-xs, 0.75rem);
}

/* 開示の中の法令リンク。地の文の中のリンクなので、文の流れを壊さない
   (44px の下限は、独立した操作要素に掛ける指標であって、文中のリンクには掛けない)。 */
.offer__pr a {
  color: var(--color-accent-hover);
}

/* ===== この手順のもとになった記事(ID288 ③)=====
   ★ 記事リンクは「導線」ではなく**結論の出どころ**として出す(04-03 と同型)。
     静的HTMLに置いてあるので、リンクグラフの実測にも検索側にも出る。 */
.source-section {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.source-section__title {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--color-text);
}

.source-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.source-list li {
  font-size: var(--fs-sm, 0.82rem);
  line-height: 1.55;
}

.source-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.source-note {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs, 0.72rem);
  color: var(--color-text-muted);
}

/* ===================================================================
   09-03 固有(09-02 から複製した土台の上に載せる)

   ★ 土台には 09-02 用のセレクタ(.steps / .notice / .timebar / .tells 等)も
     含まれている。**このツールでは使っていない。**
     消さずに残しているのは、**共通部品の書き方をコピーする(標準A1)方針の下で、
     次に同型のツールを作る人が同じ土台から始められるようにするため。**
     ただし「使っていないものが載っている」ことは事実なので、ここに書いておく
     ——**黙って残さない。**総合監査で不要と判定されたら削る。
   =================================================================== */

/* ===== 次の1杯で試す1手(このツールの主役)===== */
.move {
  margin: 8px 0 0;
  padding: 10px 11px;
  background: var(--color-bg);
  border: 2px solid var(--color-accent-strong);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
}

/* ===== この手順のもとになった記事(標準B1)=====
   ★ リンクは静的HTMLに置いてある。JS は印を付けるだけで、リンクは作らない
     ——JS が動かなくても2本のリンクは残る。 */
.source-section {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.source-section__title {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--color-text);
}

.source-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.source-list li {
  padding: 6px 0;
  border-bottom: 1px dotted var(--color-border);
  font-size: var(--fs-sm, 0.82rem);
  line-height: 1.55;
}

.source-list li:last-child { border-bottom: 0; }

.source-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.source-note {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs, 0.72rem);
  color: var(--color-text-muted);
}

/* ===== 法令導線のタップ対象(ID303。ID300 監査の条件)=====
   ★ 地の文の中に置いたままでは 44px にできない(縦に広げると行が重なる)。
     **文と分けて独立した行に出し**、そのうえで 44px を確保する。
   ★ それまでは「文中のリンクには 44px を掛けない」という扱いを status.md に書いていたが、
     **監査の判断で、法令導線は独立した操作要素として扱うことになった**(2026-08-29)。 */
.offer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 2px;
}

.offer__pr a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent-hover);
}

/* ★★ 防御(2026-09-03 maker)★★
   `.no-break-katakana` は**カタカナ語の途中改行を防ぐためだけ**のラッパーで、
   見た目を持つ意図は無い。ところが element セレクタ(`.move span` `.quiz-opt__text span`
   `.tell span` 等)は**このラッパーにも当たる。**
   実測(2026-09-03): 公開中の 09-03 で `.move span { display: block }` が
   「次の1杯:豆の量を増やす(**コーヒー**:水 = …)」の「コーヒー」に当たり、
   1つの文が**3行に割れて**いた(小さい灰色の別行になっていた)。06-01 でも同じ形が出ていた。
   → **改行のためだけの入れ物は、他のスタイルを受け取らない**ようにここで固定する。
   セレクタを `span.no-break-katakana`(0,1,1)にして、`.xxx span`(0,1,1)と同点にしたうえで
   **ファイル末尾に置いて後勝ちにしている。**位置を動かすと効かなくなる。
   ★★ **ただし、親が flex / grid の時は、この規則は位置に関係なく効かない**(2026-09-20 / ID699)。★★
     フレックスアイテム・グリッドアイテムの `display` は**カスケードの後にブロック化される**ので、
     `display: inline` と書いても計算値は `block` になる。**後勝ちにしても勝てない。**
     実測(06-01 / 2026-09-20): `.offer__pr a { display: inline-flex }` の中のこのラッパーは `block` だった。
     **見た目が壊れているかは別である**——06-01 の 390px では3断片が横一列(リンクは 334×44)で崩れていない。
     直す必要が出たら、**包む側(`appendText()`)で「親が flex/grid なら包まない」**にする
     ——CSS の後勝ち合戦を続けても、flex を使う箇所が増えるたびに同じ穴が開く。
   ★ ID699 では「読み上げの名前が欠ける」とも疑ったが、**それは測定器(read_page)の性質**で、
     このブロック化とは無関係だった(対照4本で確認。`shared/knowledge-base.md` の該当項)。 */
span.no-break-katakana {
  display: inline;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
}

/* ===== 06-02 固有(2026-09-22 ID711)=====
   ★ 色は1つも新設しない。すべて design-tokens.css のトークンを参照する。
   ★ タップ対象は 44px 以上(標準C1)。ラジオ・チェックボックスの**ラベルごと**当たり判定にする
     ——ID269(04-02 のラベル14個が26px)と同型の穴を、最初から塞ぐ。 */

.q {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--space-2);
  margin: 0 0 var(--space-2);
  background: var(--color-surface);
  /* ★★ `fieldset` は UA 既定で `min-width: min-content` を持つ。★★
     指定しないと**親より縮まず、320px で 306px のまま外へはみ出す**
     (2026-09-22 実測: 親 288px に対して right=322)。`box-sizing` では直らない。 */
  min-width: 0;
}
/* ★ `legend` も UA 既定で縮まない(fieldset の min-width と同じ理由で 320px を超える)。
   実測 2026-09-22: 親 256px に対して right=328。`max-width: 100%` で親に収める。 */
.q__legend { font-weight: 700; padding: 0 4px; max-width: 100%; box-sizing: border-box; }

/* ★ ラベル全体を押せるようにし、高さを 44px 以上にする */
.q__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 6px;
  cursor: pointer;
}

/* ★★ 操作子そのものを 44px にする(2026-09-22 実測で 13x13 だった)★★
   ラベルを 44px にしても、**`input` の実体は 13px のまま**である。
   標準C1 の対象集合は `input` 類を含むので、**ラベルだけ大きくしても満たさない。**
   ID269(04-02 のラベル14個が26px)と同じ穴を、**操作子の側で**塞ぐ。
   → `appearance: none` で UA の描画を外し、**44x44 の箱に丸を描く**。 */
.q__opt input[type="radio"],
.q__opt input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.q__opt input[type="radio"]::before,
.q__opt input[type="checkbox"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  box-sizing: border-box;
}
.q__opt input[type="radio"]::before { border-radius: 50%; }
.q__opt input[type="checkbox"]::before { border-radius: 3px; }
.q__opt input:checked::before {
  border-color: var(--color-accent);
  background: var(--color-accent);
}
.q__opt input:focus-visible::before {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.q__optlabel { line-height: 1.4; }


.move { margin: var(--space-2) 0; }
.move__t { font-weight: 700; }



.offer__lead { color: var(--color-text-muted); font-size: 0.9rem; }
.restart-row { margin-top: var(--space-2); }

/* ===== 05-01 固有(2026-09-24 ID719)=====
   ★ 色は1つも新設しない。すべて design-tokens.css のトークンを参照する。
   ★ タップ対象は 44px 以上(標準C1)。選択は 06-02 の `.q__opt`(44x44 の箱に丸)をそのまま使う。
   ★ 動き(animation / transition)は足していない=reduced-motion の数(3つ)は変わらない。 */

/* 第0問のボタン2つ(入口)。押すと measure へ */
.route-btns { margin: var(--space-2) 0 0; }
.route-btns .btn + .btn { margin-top: 10px; }
.route-q { margin: var(--space-2) 0 0; font-weight: 700; }

/* measure の上に出す「いま選んでいる路線」 */
.route { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 4px 0 0; font-size: 0.9rem; }
.route__v { font-weight: 700; }

.sec { margin: var(--space-3) 0 0; }
.sec__t {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.45;
  color: var(--color-text);
}

/* 1行=1つの容器 / 1個のモバイルバッテリー */
.row {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 8px 12px 4px;
  margin: 0 0 var(--space-2);
  background: var(--color-surface);
  min-width: 0;
}
.row__no { margin: 0; font-weight: 700; font-size: 0.9rem; }
/* ★ `for` を持つラベルは押すと入力に飛ぶ=当たり判定がある。44px に揃える(06-02 の .q__numlabel と同じ) */
.row__lab { display: flex; align-items: center; min-height: 44px; font-size: 0.85rem; color: var(--color-text-muted); }
.row__sel, .row__num {
  min-height: 44px;
  font-size: 1rem;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  color: var(--color-text);
  box-sizing: border-box;
  max-width: 100%;
}
.row__sel { width: 100%; }
.row__num { width: 9em; }
.row__line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 12px; }
.row__field { display: flex; flex-direction: column; min-width: 0; }
/* ★ `fieldset` / `legend` は UA 既定で縮まない(06-02 の .q と同じ穴)。min-width:0 / max-width:100% */
.chips { display: flex; flex-wrap: wrap; gap: 0 4px; border: 0; padding: 0; margin: 0; min-width: 0; }
.chips__lg { padding: 0; margin: 4px 0 0; font-size: 0.85rem; color: var(--color-text-muted); max-width: 100%; }
.q__opt.chip { padding: 0 8px 0 0; }
.add { margin: 0 0 4px; }
.cap-note, .err { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.5; }
.cap-note { color: var(--color-text-muted); }
.err { color: var(--color-warning); font-weight: 700; }

/* 国の資料の逐語(`.src-quote` の中身は1字も変えない=設計01 §2。当サイトの文ではない印でもある) */
.src-box { margin: var(--space-2) 0; }
.src-lead { margin: 0 0 4px; font-size: 0.85rem; color: var(--color-text-muted); }
.src-quote {
  margin: 0;
  border-left: 3px solid var(--color-border);
  padding-left: 10px;
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.6;
}
.src-quote + .src-quote { margin-top: 6px; }
.src-by { margin: 4px 0 0; font-size: 0.78rem; color: var(--color-text-muted); }

/* Wh の計算の行(× はここでだけ使う=設計01 §7) */
.calc { margin: 2px 0 0; font-size: 0.85rem; color: var(--color-text-muted); }

/* 並置の1件(1つの容器・袋・1個のモバイルバッテリー)。規則ごとに1行(`.cmp__line`)。
   ★ 「中にある」を緑にしない——色が「持ち込める」と読まれるため(設計01 §7 の趣旨)。 */
.cmp-list { list-style: none; margin: 0; padding: 0; }
/* ★ 各項目を枠の面(--color-surface)に載せる=面の階層(完成基準1)。背景と同じ面だと項目の切れ目が読めない */
.cmp {
  padding: 8px 10px;
  margin: 0 0 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
.cmp__what { display: block; font-weight: 700; font-size: 0.9rem; }
.cmp__line { display: block; font-size: 0.85rem; line-height: 1.55; }
.st { font-weight: 700; }
.st--over { color: var(--color-warning); }
.st--in { color: var(--color-text); }
.st--na, .st--none { color: var(--color-text-muted); }

/* 今日の1手の枠(06-02 の .move)は太字。**中の逐語は太字にしない** */
.move .src-box { font-weight: 400; margin: 6px 0 8px; }
.move .src-quote { font-size: 0.85rem; }

/* 文の途中に置く逐語(国内線の「表題」の1か所だけ) */
.src-quote--inline { display: inline; border: 0; padding: 0; font-size: inherit; }

/* 種類の見分け方(開いて読む)。★ summary は押せる物=44px(標準C1) */
.kinds-help { margin: var(--space-1) 0 var(--space-2); }
.kinds-help summary { padding: 12px 0; line-height: 20px; cursor: pointer; font-size: 0.9rem; color: var(--color-accent-hover); }

/* ★ 2026-09-27(ID804 版 27a): **footer のリンクを折り返す。**「お問い合わせ」を足して3本になり、折り返しの無い flex
   (design-tokens 正本の .hub-footer__nav)のままだと 320px で右端 348px=28px はみ出した(実測 00:4x)。09-01(ID775)と同じ1行。 */
.hub-footer__nav { flex-wrap: wrap; }

/* ★ 2026-09-27(ID785 版 27a): 商品の画面の前置きと広告の開示文が「普通の折り方」の一覧から漏れていた=body の keep-all のままで、
   07-03 の 320px で「…かを確かめてから|、足りない辺と…」の読点が行頭に落ちた(実測・HEAD 25a でも同じ)。同じ枠を持つ6本に足す。
   カタカナ語は guardStaticKatakana / App.appendText の span が守る。 */
.offer__lead, .offer__pr { word-break: normal; overflow-wrap: anywhere; }