/* ============================================================================
   build/_shared/components.css — 共通部品CSSの【単一実体】（2026-07-03 新設・v=sc24）
   ※2026-08-31: sc24 ＝ ページ extra.css に同値複製されていた photo-band（枠/クリップ/薄膜）と ci-ic svg（充填）を
   　単一実体へ昇格（複製136宣言のうち26ページ分119を撤去・全31頁×390/1280 の computed+矩形が完全一致を実測）。
   　★昇格の機械条件に「ページ側 @media(min-width:751px) が同じ (セレクタ,プロパティ) を上書きしていないこと」を追加。
   　SP 段だけを昇格すると PC でページ側が必ず勝って _shared の宣言が死ぬ（shared-dead-rule 非0・台帳#73）。
   　dp-stats / dp-cred / compare-note はこの条件で不合格＝PC 値の採用が割れている（ドリフト）ため昇格せず報告。
   ※2026-08-30: sc19 ＝ 表セル内の素リンク（.compare-table td a:not([class])）を canon 化。
   ※2026-08-28: sc18 ＝ reason .point-list 4枚時の PC 4カラム（原典は3枚前提）。
   ※2026-08-28: sc17 ＝ パンくず非リンク段の区切り「>」。
   ※2026-08-28: sc16 ＝ 本文内リンク canon（qa-item-body/br-a/line-content/point p/-lead の a＝navy+下線+bold）。
   ※2026-08-27: sc15 ＝ compare-table の広表対応（`.compare-table-scroll[class*="wide"]` で列幅auto）＋行見出し `tbody th` を canon 化。
   　これで「同じ .compare-table なのに canon系14頁 / grid系14頁で実装が2種類」を1実体に畳む（user 指示「見やすい表に統一・スクロールヒントあり」）。
   ※2026-07-26: ヘッダ表記が sc11 のまま採用ページ(corporate)は sc12 を参照していた（表記drift）。実変更(.connection.divided 追加)に合わせ sc14 へ統一。
   なぜ: 全ページ同じサイト＝共通部品は構造も computed 値も全ページ一致必須
   （正本 refer/shared-component-library.md・後の WordPress/Liquid 動的化で CSS 共通化）。
   従来はページごとに .main.<page> スコープで複製 → drift・修正漏れ・二重管理の温床
   （ユーザー指摘 2026-07-03「同じサイトなのにCSS共通化を無視」）。本ファイルがその是正。

   ■ 使い方（新規/移行ページ共通）
     <link rel="stylesheet" href="../../refer/linxas-sp-0407/css/style.css?v=…">
     <link rel="stylesheet" href="../_shared/components.css?v=sc●">   ← テーマの後・extra.css の前
     <link rel="stylesheet" href="extra.css?v=…">
   ■ ルール
     - 値の出典 = テーマ原典 refer/linxas-sp-0407/css/style.css（行番号）→ theme-golden-values.md → gold airpods/aquos。
     - ページ extra.css に本ファイルと同じ部品ルールを【複製しない】（コンテキスト差分=背景の出し分け・
       min-width・節固有 margin だけをページ側に書く）。
     - セレクタは .main スコープ（ページ名を含めない）＝ theme とのタイ勝ち（後読み）・ページ側の
       .main.<page> 系（0,3,0）が必要な箇所だけ上書き。
     - 変更したら v= を bump し、全採用ページで cross-page-consistency-gate を回す。
   ■ 背景の出し分け（本ファイルでは決めない＝コンテキスト依存・ページ側で指定）
     - note: 白節=transparent+border var(--color7) ／ 色節=#fff（borderなし）／（airpods系白節=color10 も既存許容）
     - .di : 白節=var(--color10) ／ 色節=#fff（既定は color10＝白節安全側）
   ============================================================================ */

/* ---- nowrap 実体＋line-title 入れ子guard（出典 gold aquos extra.css:632-634。theme `.line-title span` の
        罫/padding が入れ子 .nowrap にも当たり「見出し語中の縦罫・折返し行頭の二重罫」を出す既知欠陥の防止。
        金型・兄弟9ページに実在した修正の共通化＝log-regression-s3 指摘2で corporate 欠落が発覚→昇格） ---- */
.main .nowrap{ white-space:nowrap; }
.main a .nowrap{ display:inline; }/* sc22 2026-08-30 ledger#80: テーマ原典 style.css:3578 の .nowrap{display:inline-block} は atomic inline のため、
   <a> のテキストがこの中にあると text-decoration が伝播せず**下線が描画されない**（getComputedStyle は underline を返すので宣言値では気づけない）。
   実測: 8ページ58本が下線欠け・うち23本は完全無下線（mac #selector は同じ表の中で「最新手順」に下線あり／「旧機種手順」に下線なし）。
   white-space:nowrap は inline でも効くので改行防止の目的は保たれる。CSS注入検証で 375/390/768/1280 とも 59→0・折り返し発生 0。 */
.main .line-title .nowrap{ border-left:0; padding-left:0; display:inline; line-height:inherit; }

/* ---- 汎用 note（canon: 11px・color3・影なし・白丸チップ。背景はページ側） ---- */
.main .note{ position:relative; margin-top:18px; border-radius:5px; padding:12px 14px 12px 44px; font-size:11px; line-height:1.3; color:var(--color3); font-weight:500; box-shadow:none; }
.main .note .n-i{ position:absolute; left:13px; top:10px; width:20px; height:20px; background:#fff; border:1px solid var(--color7); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.main .note .n-i svg{ width:100%; height:100%; display:block; }
.main .note .kw, .main .note strong{ color:var(--color9); font-weight:700; }
.main .note a{ color:var(--color9); font-weight:bold; text-decoration:underline; }

/* ---- connection 内 p の文字色 canon（ledger#36・2026-07-10）: theme `.connection p{color:#DE4A9B}`(style.css:5470 ピンク) は
        gold canon で全打ち消し＝navy #14355D が正（corporate extra.css:160 corp-clone3 と同手本・検出器= page-qa-audit.js K_palette） ---- */
.main .connection p{ color:#14355D; }

/* ---- CTA帯 connection.partbg（canon: full-bleed 白・padding30・margin0。border/隣接余白はページ側） ---- */
.main .connection.partbg{ background:#fff !important; border:0 !important; padding-top:30px !important; padding-bottom:30px !important; margin:0 !important; }

/* ---- CTA帯の自己区切り派生 `.connection.divided`（2026-07-26 新設・sc12） ----
   何: 白節の直後に置かれた非 partbg の CTA（＝ページ末尾 closing CTA）は白×白で境目が消えるため上罫が要る
       （spacing-divider-craft-rules §1・線色は節区切りの var(--color7)。※.line-title の左罫 #8DB0D0 とは別物）。
       罫を引いたら「呼吸」(padding-top:30px) を必ずセットで持つ＝罫だけ足すと帯先頭が線にびた付く。
   なぜ派生クラスにするか: 2026-06-30 に border-top だけを7ページへ複製し padding は gold airpods にしか入れなかった結果、
       6ページ(ipad/mac/pixel/galaxy/android-machine/apple-machine)で「帯先頭が区切り線と密着 gap=1px」を量産した
       （harness D_spacing・ledger#26⑤／2026-07-26 実測で確認）。罫と呼吸を1クラスに溶接すれば取りこぼしが構造的に起きない。
   出典: gold build/airpods-reset/extra.css:882(border-top) ＋ :885(padding-top:30px) の2行を単一実体へ統合。
   使い方: <section class="part connection divided" id="cta">。直前が色節で色差が付くページ(aquos/xperia)には付けない＝罫不要。
   !important の理由（テーマ原典で裏取り・推測でない）: テーマ SP 段に `.connection:not(.partbg){ padding:0 !important }`
   （refer/linxas-sp-0407/css/style.css:5592-5594）があり、通常宣言では SP(375/390) で必ず負けて呼吸が消える
   ＝gold airpods が :885 で `!important` を使っていたのはこのため。padding-bottom はテーマの 0 のまま（gold 実測 padBottom:0）。 */
.main .connection.divided{ border-top:1px solid var(--color7); padding-top:30px !important; }
/* 帯注記（canon: connection-note／note2 とも白箱+淡罫。sc9: 裸 note は user 指摘 2026-07-03「枠内がない」で白箱へ再較正
   ＝user-validated canon・ledger#26②。旧: padding:0 0 0 44px 裸・cn-i top:-2px） */
.main .connection .connection-note{ position:relative; max-width:600px; margin:14px auto 0; background:#fff; border:1px solid var(--color7); border-radius:5px; padding:12px 14px 12px 44px; color:#14355D; font-size:11px; line-height:1.6; font-weight:500; text-align:left; box-shadow:none; }
.main .connection .connection-note .cn-i{ position:absolute; left:13px; top:10px; width:20px; height:20px; }
.main .connection .connection-note .cn-i svg{ width:100%; height:100%; display:block; }
.main .connection .connection-note strong{ color:var(--color9); font-weight:700; }
.main .connection .connection-note2{ position:relative; max-width:600px; margin:14px auto 0; background:#fff; border:1px solid var(--color7); border-radius:5px; padding:12px 14px 12px 44px; text-align:left; font-size:11px; line-height:1.6; color:#14355D; font-weight:500; box-shadow:none; }
.main .connection .connection-note2 .cn-i{ position:absolute; left:13px; top:11px; width:20px; height:20px; }
.main .connection .connection-note2 .cn-i svg{ width:100%; height:100%; display:block; }
.main .connection .connection-note2 strong, .main .connection .connection-note2 b{ color:var(--color9); font-weight:700; }

/* ---- deflist（番号付き定義カード列・出典 aquos extra.css:214-224） ---- */
.main .deflist{ display:flex; flex-direction:column; gap:14px; margin:24px 0 0; }
.main .di{ background:var(--color10); border-radius:5px; padding:15px 16px; }
.main .dt{ display:flex; align-items:flex-start; gap:10px; font-size:15px; font-weight:700; color:var(--color4); line-height:1.3; }
.main .dt .n{ flex:0 0 auto; font-size:12px; font-weight:800; color:#fff; background:var(--color9); border-radius:4px; padding:3px 9px; line-height:1.2; white-space:nowrap; }
.main .dt .dt-t{ flex:1 1 auto; min-width:0; }
.main .dd{ font-size:12px; line-height:1.6; color:#333; margin-top:8px; }
.main .dd strong{ color:var(--color9); }
.main .dd a{ color:var(--color9); font-weight:bold; text-decoration:underline; white-space:nowrap; }
/* ---- 本文内リンクの canon（2026-08-28 sc16・critic ipad r2 A2「足したリンクがリンクに見えない」）----
   何: 本文コンテキスト（FAQ回答・状況カード本文・節リード・point本文）の <a> は navy(color9)＋下線＋bold＝「リンクと分かる」。
   なぜ canon 化するか: gold aquos は `.qa-item-body a` をページ側で持ち FAQ リンク15本が navy/下線/700。ipad は同じ器で
     10本足したのに親と同色(#333/none/500)＝導線として機能していなかった。`.note a` `.dd a` は既に canon にあり、
     残りのコンテキストだけがページ任せ＝「ページによってリンクの見え方が違う」ドリフトの温床。
   出典: gold aquos-reset/extra.css:51（qa-item-body a）＝ canon `.note a`(:38) と同値。テーマ原典は本文 a に装飾を持たない
     （style.css）が、build では「リンクは navy+下線」が全ページ合意（_HANDOFF 0-A「リンク=navy(color9)+下線・疑似矢印なし」）。
   除外: CTA/ボタン系（.button/.linktouch/[class*="btn"]）・関連リンク一覧（.related-links）・パンくず＝別作法。 */
/* ---- 表セル内の本文リンク（2026-08-30 sc19・applewatch critic r2 §5「死んだ委譲」）----
   何: `.compare-table td` の中の素の <a> が本文と同色（#333・下線なし）でリンクに見えない。
   実測: 素の a は 11ページ 66本（applewatch 19 / mac 13 / pixel 12 / kaitori-hitsuyou-mono 6 / aquos 5 …）。
   なぜ canon か: aquos-reset/extra.css:186 は「canon へ委譲」とコメントしていたが `_shared` に規則が無く
     委譲先が存在しなかった（＝死んだ委譲）。結果 applewatch=下線 / airpods=.jump-btn チップ / aquos=黒 の3分裂。
   除外: class 付きの a（airpods の `.jump-btn` 6本＝専用列のチップ UI）は対象外＝`:not([class])` で限定。 */
.main .compare-table td a:not([class]){ color:var(--color9); font-weight:700; text-decoration:underline; }

.main .qa-item-body a,
.main .br-a a,
.main .line-content a,
.main .line-bcontent a,
.main .point p a,
.main .reason .point a,
.main .lock-lead a,
.main [class*="-lead"] a{ color:var(--color9); font-weight:bold; text-decoration:underline; }

/* ---- パンくずの非リンク段（2026-08-28 sc17・Codex r4 B）----
   テーマは `.topbreadcrumb a` にだけ display:flex と区切り「>」（style.css:1881-1901）を持つ。
   build では「ハブURLが本番に無い中間段」と「現在地」を <span> にしたため、その後ろの「>」が消えていた。
   a と同じ配置・区切りを span にも与える（色はテーマの継承色のまま＝リンクでないことは色で区別）。 */
.topbreadcrumb li span{ display:flex; align-items:center; position:relative; }
.topbreadcrumb li:not(:last-child) span:after{ content:">"; display:block; margin:0 7px; font-weight:700; }

/* ---- reason .point-list が4枚のときの PC 組み（2026-08-28 sc18・completion-gate F-1 の復元で顕在化）----
   テーマ原典 style.css:6570-6580 は li を 33.33% × flex-wrap（3枚前提）。4枚だと4枚目が1枚目の直下に row-gap なしで潜り込み
   POINT04 の見出しが1枚目の底に衝突する（金型 airpods-reset も同症状＝金型ドリフト）。4枚のときだけ 25% の1行に組む
   （テーマの「1行に並ぶ」リズムを維持。文字は原典の ≤1100px 値 14px を流用）。3枚以下は原典のまま。 */
@media (min-width:851px){
  .reason .reason-point .point-list ul li:first-child:nth-last-child(4),
  .reason .reason-point .point-list ul li:first-child:nth-last-child(4) ~ li{ width:calc(25% - 15px); }
  .reason .reason-point .point-list ul li:first-child:nth-last-child(4) .point,
  .reason .reason-point .point-list ul li:first-child:nth-last-child(4) ~ li .point{ font-size:14px; }
}

/* ---- compare-table + scroll-hint（canon: th13>td12・wrap=.compare-table-scroll>.cts-inner.swipe-hint・
        theme scroll-hint.js 必須。min-width はページ側・出典 airpods extra.css:454-461/678-685/791-845） ---- */
.main .compare-table{ width:100%; border-collapse:separate; border-spacing:0; margin:18px 0 0; background:#fff; border-radius:5px; overflow:hidden; box-shadow:0 0 5px rgba(18,77,137,.16); font-size:12px; table-layout:fixed; }
.main .compare-table th:first-child{ width:34%; }
.main .compare-table th{ background:var(--color9); color:#fff; font-weight:700; text-align:left; padding:11px 14px; line-height:1.5; font-size:13px; }
.main .compare-table td{ padding:11px 14px; line-height:1.7; color:#333; vertical-align:top; word-break:break-word; }
.main .compare-table tr:nth-child(even) td{ background:var(--color10); }
.main .compare-table td.lbl{ font-weight:700; color:var(--color4); }
/* 可否マーク（○/△/×・「買取可」等）のセル。判定を色と太さで読ませる共通クラスで、実測17ページが使用。
   正値の出典: 唯一「証拠付き DONE」の beginners-guide extra.css:373（color:#224995 + font-weight:700）。
   ※多数派（色のみ12ページ）でなく DONE ページを正本にする（[[majority-vote-is-not-canon-check-wireframe-first]]）。 */
.main .compare-table td.ok{ color:var(--color9); font-weight:700; }
/* セル内の強調は color9 一色（完了ゲート V-1「明地の strong/b/.kw は #224995 一色」）。
   2026-08-27: `b` と `.kw` を追加。旧 canon は `strong` だけで、`<td><b>…</b></td>`（実例 android-machine:450）が
   ページ側の混在ルール撤去後に #333 へ戻り harness I_craft 強調色が発火した。役割は同じなので canon 側で3つとも持つ。 */
.main .compare-table td strong, .main .compare-table td b, .main .compare-table td .kw{ color:var(--color9); font-weight:700; }
.main .compare-table, .main .compare-table th, .main .compare-table td{ border:0; }
.main .compare-table td{ border-top:1px dashed var(--color7); }
.main .compare-table td:not(:first-child){ border-left:1px dashed var(--color7); }

/* ---- compare-table 派生 `.kaitori`（比較表の「推奨列＝買取列」を公平に強調・2026-08-27 canon 化 sc15） ----
   何: 列塗りで対立列を貶めるのでなく、**左辺の内側罫（inset shadow）＋強調文字の navy** で優位を示す作法。
   出典: gold build/airpods-reset/extra.css:675-677（th=#9DB8E6 2px / td=color9 2px / td strong=color9）。
   ※font-weight は 800 でなく 700（galaxy gxr07 の是正＝一般 strong と同じ inline navy に揃える）。
   ※クラス名は gold の `.kaitori` に統一（shitadori-vs-kaitori だけ `.kai` という別名だったので改名・2026-08-27）。 */
.main .compare-table th.kaitori{ box-shadow:inset 2px 0 0 #9DB8E6; }
.main .compare-table td.kaitori{ box-shadow:inset 2px 0 0 var(--color9); }
.main .compare-table td.kaitori strong{ font-weight:700; color:var(--color9); }

/* ---- compare-table 派生: 広い表は列幅を内容に合わせる（2026-08-27 sc15・user「見やすい表に統一・スクロールヒントあり」） ----
   なぜ要るか: canon 基底は2〜3列の比較表向けで `table-layout:fixed` ＋ `th:first-child{width:34%}`。
     5列の一覧に当てると全列が等分され、実測（kaitori-state-grade 5列 @390）で列 190/92/92/92/92 に潰れ、
     「筐体（フレーム・背面）」が3行に折返して表高 399px（現行 360px）。ledger#61 の実証スクショも参照。
   なぜ**新しいクラスを作らず `wideN` に掛けるか**: `wide2/wide5` は既に「この表は min-width を持つ＝広い表」を
     宣言している実在の規約（HTML 実測 35箇所・すべて `.compare-table-scroll` 直上でのみ使用）。
     ★当初 `.compare-table.matrix` を新設しかけたが、**`.matrix` は別部品「やること順番早見表」として13ページの
     extra.css に実在**し（例 guide-broken/extra.css:447-486）、extra は _shared より後読み＝同詳細度で必ず勝つため、
     付けた瞬間 legacy 早見表の `thead th:last-child{width:52px}`/collapse/実線 が発火して表が崩壊する
     （実測: kaitori-state-grade の5列表が表高 436→1317px）。**既存規約に寄せる＝名前衝突を構造的に避ける。**
   実測（canon＋本ルール適用時 @390）: 列 159/99/111/99/93 ＝ 現行 grid（148/101/116/101/93）とほぼ同一配分。
     行高は canon の padding(11px 14px) 分 +5px。装飾（紺の列見出し・破線区切り・偶数行ゼブラ・角丸＋影）は canon のまま。 */
.main .compare-table-scroll[class*="wide"] .compare-table{ table-layout:auto; }
.main .compare-table-scroll[class*="wide"] .compare-table th:first-child{ width:auto; }
/* 行見出し（＝canon の `td.lbl` と同じ役割）。**`scope="row"` を明示した th だけ**に当てる。
   なぜ scope 必須にするか（2026-08-27 実測で判明）: build には**列見出しの行を `<thead>` に入れず `<tbody><tr><th>` で
   持っているページがある**（実例 ipad-reset #model / #highsell・aquos-reset も thead=0）。素の `tbody th` セレクタだと、
   その**列見出しが行見出しの装飾に化ける**。`scope` で役割を宣言してもらう方が HTML としても正しく（列=col・行=row）、
   セレクタも役割に一致する＝「見た目のためのクラス」でなく「構造の宣言」で分岐できる。
   ⚠️ 本ルールは**マークアップ正常化（thead/scope 付与）とセットでのみ有効**。scope を付けずに CSS だけ入れると
     行見出しは基底の `.compare-table th`（紺地・白文字）のままになる（2026-08-27 時点で build 全31頁の scope="row" は0件）。
   font-size は golden の th=13（_INDEX §3）。折返し禁止は行見出しが縦に伸びるのを防ぐため（溢れは横スクロールで解決）。
   ※`tr:first-child th{border-top:0}` は入れない＝thead 直下で行見出し列だけ破線が途切れ、罫が1列分欠ける（Fable5 レビュー指摘）。 */
.main .compare-table tbody th[scope="row"]{ background:var(--color10); color:var(--color4); font-weight:700; text-align:left; padding:11px 14px; line-height:1.5; font-size:13px; white-space:nowrap; border-top:1px dashed var(--color7); }

.main .compare-table-scroll{ position:relative; margin-top:18px; background:#fff; border-radius:5px; box-shadow:0 0 5px rgba(18,77,137,.2); }
.main .compare-table-scroll .cts-inner{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:5px; }
.main .compare-table-scroll .cts-inner::-webkit-scrollbar{ height:6px; }
.main .compare-table-scroll .cts-inner::-webkit-scrollbar-track{ background:var(--color10); border-radius:3px; }
.main .compare-table-scroll .cts-inner::-webkit-scrollbar-thumb{ background:var(--color7); border-radius:3px; }
.main .compare-table-scroll .compare-table{ margin:0; box-shadow:none; }
.main .compare-table-scroll .scroll-hint-shadow-wrap{ position:relative; font-size:10px; color:#FFF; display:block; }
.main .compare-table-scroll .scroll-hint-icon-wrap{ position:absolute; top:0; left:0; width:100%; height:100%; max-height:100%; pointer-events:none; display:block; }
.main .compare-table-scroll .scroll-hint-icon-wrap.is-active .scroll-hint-icon{ opacity:.8; }
.main .compare-table-scroll .scroll-hint-icon-wrap.is-active .scroll-hint-icon:before{ animation:scroll-hint-appear 1.2s linear; animation-iteration-count:2; }
.main .compare-table-scroll .scroll-hint-icon-wrap.is-active .scroll-hint-icon:after{ opacity:1; }
.main .compare-table-scroll .scroll-hint-icon{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); box-sizing:border-box; width:120px; height:auto; border-radius:5px; transition:opacity .3s; opacity:0; background:rgba(0,0,0,.7); text-align:center; padding:20px 10px 10px; }
.main .compare-table-scroll .scroll-hint-icon .scroll-hint-text{ margin-top:5px; color:#fff; }
.main .compare-table-scroll .scroll-hint-icon:before{ display:inline-block; width:28px; height:40px; vertical-align:middle; content:""; background:url(../images/renewal-compat/icon/pointer.svg) center/contain no-repeat; }
.main .compare-table-scroll .scroll-hint-icon:after{ content:""; width:34px; height:14px; display:block; position:absolute; top:10px; left:50%; margin-left:-20px; background:url(../images/renewal-compat/icon/pointer1.svg) center/contain no-repeat; opacity:0; transition-delay:2.4s; }
@keyframes scroll-hint-appear{ 0%{ transform:translateX(40px); opacity:0; } 10%{ opacity:1; } 50%,100%{ transform:translateX(-40px); opacity:0; } }

/* ---- trust-grid（信頼カード・出典 airpods extra.css:508-515/749-761） ---- */
.main .why-extra .trust-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.main .why-extra .tc{ background:var(--color10); border-radius:5px; padding:18px 8px 14px; text-align:center; }
.main .why-extra .trust-note{ position:relative; margin-top:14px; background:var(--color10); border-radius:5px; padding:12px 14px 12px 44px; font-size:12px; line-height:1.3; color:#14355D; font-weight:500; }
.main .why-extra .trust-note .n-i{ position:absolute; left:13px; top:10px; width:20px; height:20px; background:#fff; border:1px solid var(--color7); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.main .why-extra .trust-note .n-i svg{ width:100%; height:100%; display:block; }
.main .why-extra.trust .trust-grid{ grid-template-columns:1fr 1fr; gap:10px; }
.main .why-extra.trust .tc{ text-align:left; padding:14px; }
.main .why-extra.trust .tc .tl{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--color4); line-height:1.35; margin:0 0 7px; }
.main .why-extra.trust .tc .tl .tl-ck{ flex:0 0 auto; width:18px; height:18px; background:#16AEB1; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.main .why-extra.trust .tc .tl .tl-ck svg{ width:11px; height:11px; display:block; }
.main .why-extra.trust .tc .tn-s{ font-size:12px; color:#333; line-height:1.6; font-weight:500; }
.main .why-extra.trust .tc .tn-s strong{ color:var(--color9); font-weight:700; }

/* ---- sec-photo（節内写真・図版作法=角丸5px・figcaption 11px color3）
        高さは横長帯にクロップ（user 2026-07-03「画像とか高さありすぎ」＝3:2素のままだとSP237px/PC427pxで重い→
        SP16:9≒200px・PC2:1=帯状。object-fit:cover 中央クロップ） ---- */
.main .sec-photo{ margin:20px 0 0; }
.main .sec-photo img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:5px; }
.main .sec-photo figcaption{ font-size:11px; color:var(--color3); line-height:1.6; margin-top:8px; }

/* ---- fig-flow（概念フロー図解・白円+navy3トーン語彙・ラベル12px。白節では .on-white で円に淡罫） ---- */
.main .fig-flow{ display:flex; align-items:flex-start; justify-content:center; gap:6px; margin:24px 0 0; }
.main .fig-flow .ff-step{ flex:1 1 0; max-width:104px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.main .fig-flow .ff-ic{ width:64px; height:64px; }
.main .fig-flow .ff-ic svg{ width:100%; height:100%; display:block; }
.main .fig-flow .ff-t{ font-size:12px; font-weight:700; color:var(--color4); line-height:1.4; }
.main .fig-flow .ff-arrow{ flex:0 0 auto; width:16px; height:16px; margin-top:24px; }
.main .fig-flow .ff-arrow svg{ width:100%; height:100%; display:block; }
.main .fig-flow.on-white .ff-ic svg circle:first-child{ stroke:var(--color7); stroke-width:2; }

/* ---- fig-vs（2枚対比カード図解: ✗ムート vs ✓teal・trust-grid 作法。天秤SVGの後継＝critic 2026-07-03） ---- */
.main .fig-vs{ display:flex; flex-direction:column; gap:10px; margin:24px 0 0; }
.main .fig-vs .vs-card{ background:var(--color10); border-radius:5px; padding:14px; }
.main .fig-vs .vs-card.vs-ok{ background:#fff; border:2px solid var(--color9); box-shadow:0 0 10px rgba(18,77,137,.16); }  /* critique-s14 手6: 勝ちカードに glow（テーマ影2系統内）。s23 手5: 390 で勝ち/負け差が弱い→枠2px（connection-title 下線と同ウェイト・トークン内） */
.main .fig-vs .vs-t{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--color4); margin:0 0 8px; line-height:1.35; }
.main .fig-vs .vs-card.vs-ok .vs-t{ color:var(--color9); }
.main .fig-vs .vs-ic{ flex:0 0 auto; width:18px; height:18px; display:inline-flex; }
.main .fig-vs .vs-ic svg{ width:100%; height:100%; display:block; }
.main .fig-vs ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.main .fig-vs li{ position:relative; font-size:12px; line-height:1.6; color:#333; padding-left:14px; }
.main .fig-vs li:before{ content:""; position:absolute; left:2px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--color7); }
.main .fig-vs .vs-ok li:before{ background:#16AEB1; }

/* （fig-balance は 2026-07-03 critic 指摘で fig-vs に置換＝dead CSS を除去済み・log-regression/critic s3 残り手5） */

/* ---- PC（≥751）本文拡大 tier（テーマ body clamp と同方向・[[pc-typography-bespoke-scaling-golden]]） ---- */
@media (min-width:751px){
  .main .dd, .main .why-extra.trust .tc .tn-s{ font-size:15px; }
  .main .note, .main .connection .connection-note, .main .connection .connection-note2, .main .why-extra .trust-note{ font-size:13px; }
  .main .compare-table td{ font-size:14px; }
  .main .compare-table th{ font-size:15px; }
  .main .dt{ font-size:16px; }
  .main .why-extra.trust .tc .tl{ font-size:14px; }
  .main .why-extra.trust .trust-grid{ grid-template-columns:1fr 1fr 1fr; }
  .main .compare-table-scroll .compare-table{ min-width:0; width:100%; }
  .main .compare-table-scroll .scroll-hint-icon-wrap{ display:none; }
  .main .sec-photo{ max-width:640px; margin-left:auto; margin-right:auto; }
  .main .sec-photo img{ aspect-ratio:2/1; }
  .main .sec-photo figcaption{ font-size:13px; }
  .main .fig-flow{ gap:14px; }
  .main .fig-flow .ff-step{ max-width:150px; }
  .main .fig-flow .ff-ic{ width:80px; height:80px; }
  .main .fig-flow .ff-arrow{ margin-top:32px; }
  .main .fig-flow .ff-t{ font-size:14px; }
  .main .fig-vs{ flex-direction:row; gap:14px; }
  .main .fig-vs .vs-card{ flex:1 1 0; padding:16px 18px; }
  .main .fig-vs .vs-t{ font-size:15px; }
  .main .fig-vs li{ font-size:14px; }
}

/* ---- 強調一色（サイト共通 ledger#7）: 明地 line-content/lead の strong は color9 ---- */
.main .line-content strong{ color:var(--color9); font-weight:700; }

/* ---- related-links（一覧リンク列・出典 gold airpods extra.css:184-200 verbatim。
        spacing-round2 P1-4: corporate の float"›"再発明（矢印がカード右下の独自行に落ちる）を是正し共通化。
        P2-1: 帯(.connection)内でも左寄せが canon → text-align:left を明示 ---- */
.main .related-links{ list-style:none; margin:0; padding:0; }
.main .related-links li{ border-bottom:1px dashed var(--color7); }
.main .related-links li:last-child{ border-bottom:none; }
.main .related-links a{ display:block; padding:13px 40px 13px 4px; text-decoration:none; position:relative; text-align:left; }
.main .related-links a:after{ content:""; position:absolute; right:4px; top:50%; transform:translateY(-50%) rotate(-90deg); width:24px; height:24px; border-radius:50%; background:#fff url(../images/renewal-compat/icon/select.svg) center/10px auto no-repeat; }
.main .related-links a b{ display:block; color:var(--color9); font-size:14px; font-weight:700; line-height:1.5; }
.main .related-links a > span{ display:block; color:#333; font-size:12px; line-height:1.6; margin-top:3px; }/* sc20 2026-08-30 ledger#77: 子孫セレクタだと b 内の .nowrap（見出しの折返し制御）まで 12px/#333/block で描画され、見出し後半が説明文の見た目で必ず改行した（galaxy 3本・apple-machine 1本）。説明文は全31ページとも a の直下子（実測 125/125）なので直下子に限定 */
/* sc26 2026-09-11（ASTRA-20260911-FV-PUBLISH-03 項目2③）: 未裁定先への補助リンクを外した項目の型。
   リンクを外すと <li> 直下の b/span に当たる規則が無く、b が地の #333 に落ちて
   「明地の strong/b/.kw は color9 一色」（ledger#7・page-qa-audit I_craft）に違反した（11ページ18件で実測）。
   字面はリンク時と同値（b=color9/14px/700、説明=#333/12px）。矢印 :after と押下域の右padding は付けない＝リンクでないため。 */
.main .related-links li > b{ display:block; color:var(--color9); font-size:14px; font-weight:700; line-height:1.5; padding:13px 4px 0; text-align:left; }
.main .related-links li > span{ display:block; color:#333; font-size:12px; line-height:1.6; margin-top:3px; padding:0 4px 13px; text-align:left; }
@media (min-width:751px){
  /* P3-3 gold PC tier。s21 audit fail#3: 上の共通PCブロック内に置くと後方の基底 14px（同詳細度）に後勝ちされ死ぬ→基底より後段に配置 */
  .main .related-links a b{ font-size:16px; }
  .main .related-links li > b{ font-size:16px; }
}

/* ============================================================================
   2026-08-31 sc24 ＝ ページ extra.css に同値で複製されていた共通部品を単一実体へ昇格
   （正本 refer/shared-component-library.md 冒頭・鉄則「共通部品の実体は本ファイルが唯一」）。
   昇格条件（全て満たすものだけ）: ①その部品を HTML で使う全ページが宣言している ②値が全ページ同一
   ③昇格前後で全31ページ×390/1280 の computed・矩形が完全一致（実測）。1つでも欠けるものは昇格せず据置。
   ============================================================================ */

/* ---- photo-band（節内 帯写真・21:9 クロップ＋navy薄膜オーバーレイ）2026-08-31 sc24 昇格 ----
   実体はこれまで 11ページの extra.css に同値でコピーされていた（airpods/apple-machine/applewatch/before-shipping/
   beginners-guide/delivery-purchase/galaxy/ipad/mac/pixel/xperia）。全ページ同値だった宣言だけを canon 化する。
   ページ側に残すのは【コンテキスト差分】= margin（節ごとの上下余白）・aspect-ratio/img の object-fit/object-position
   （写真ごとの見せ場が違う）・PC の max-width（採用は8ページのみ＝ドリフト。台帳の報告対象）。 */
.main .photo-band{ border:1px solid var(--color7); border-radius:5px; overflow:hidden; position:relative; }
.main .photo-band img{ display:block; width:100%; }
.main .photo-band:after{ background:rgba(34,73,149,.08); content:""; inset:0; pointer-events:none; position:absolute; }

/* ---- ci-ic（概念アイコンの器）の svg 充填 2026-08-31 sc24 昇格 ----
   器のサイズ（38/30・PC 42/34）はページ間でドリフトしているため昇格しない＝svg の充填だけを canon 化。 */
.main .ci-ic svg{ display:block; height:100%; width:100%; }

/* ---- 死にUI の一旦非表示 2026-08-31 sc25（台帳#118・検出器 _work/qa-runner/dead-ui-scan.mjs） ----
   なぜ: テーマから verbatim 流用した相場検索ウィジェット（select の option が全て value 空・<form> の外の
   submit ボタン）と、送信先の無い申込フォームが「操作できるように見えて何も起きない」状態だった。
   ユーザー判断（2026-08-31）=「機能させるか一旦非表示とかで対応して」／申込フォーム=「入力欄を隠し CTA だけ残す」。
   機種別買取価格の DB もフォーム送信先も手元に無く、作れば捏造になる（鉄則6）ため非表示を選択。
   戻し方: 対象要素の data-dead-ui / data-dead-ui-block 属性を外すだけ。テキストは HTML に残してある。
   data-dead-ui-block = 「見出し＋直後の説明文＋その次のリスト」がまとめて隠したいウィジェット手順書のとき。 */
[data-dead-ui]{ display: none !important; }
[data-dead-ui-block],
[data-dead-ui-block] + p,
[data-dead-ui-block] + p + .price-deflist{ display: none !important; }


/* ============================================================================
   [S-143] 2026-09-07 共通部品ラウンド — ページ内アンカー先が固定タブ帯に食い込む（台帳#143・全ページ）
   実測（android-machine・scratchpad probe-header-h）: アンカー遷移（location.hash）後に上部を覆う固定要素は section.topnav（position:sticky）だけ
   ＝下端 SP 40px（≤750）／PC 50px（≥751）。テーマ header は position:relative でスクロールで流れる（function.js:111 の headerheight は
   .header+.topnav だが、これはタブ帯の click ハンドラ（animate）専用で、hash 遷移・FV/本文の a[href^=#] には効かない＝台帳#143 の穴）。
   処方: main 内の id 付き要素に scroll-margin-top = タブ帯の実高（目分量でなく実測値）。JS の animate には無関係（scrollTo は scroll-margin を見ない）。
   ============================================================================ */
.main [id]{ scroll-margin-top: 40px; }
@media (min-width:751px){
  .main [id]{ scroll-margin-top: 50px; }
}

/* ============================================================================
   [S-146] 2026-09-07 共通部品ラウンド — 共通フッター（テーマ verbatim・32 ページ複製）のリンク題「iPhone買取前確認ポイント」が 1440 だけ
   「ポイン／ト」と語中で 2 行に割れる（log-regression aquos r142-4 の引き継ぎ）。列幅 155px（1440）に 12px×12 字＋矢印 6px が収まらない。
   HTML 32 本に nowrap を入れず CSS 側で: keep-all（CJK 文字間の改行を禁止＝この題は 1 語扱い）。
   実測（scratchpad probe-footer-links・aquos）: 1024/1280/1440/1920 でフッター 26 リンクの複数行 0・溢れ 0（padding-right:0 案は矢印が溢れて不採用）。
   SP（≤1023）はテーマのまま（列幅 calc(50%-15px) で折返しが自然）。
   ============================================================================ */
@media (min-width:1024px){
  .footer .footer-menu .menu-content .content-wrapper .content-submenu > a{ word-break: keep-all; }
}