.main.before-shipping.before-shipping [class*="part"] p, .main.before-shipping.before-shipping .connection-note2{ overflow-wrap:break-word; word-break:normal; }
/* 泣き別れ(最終行1-2字孤立)・ブランド語中割れ の個別補正用（該当箇所に <span class="nowrap"> を付す＝auto-phrase/text-wrap 禁止） */
.main.before-shipping.before-shipping .nowrap{ white-space:nowrap; }
/* line-title span 内に置いた nowrap は theme .line-title span 装飾(border-left 2px/padding-left 7px/inline-block)を
   子span も受けて二重適用（帯分裂/罫混入＝ledger#26③）→ 入れ子 nowrap のみ装飾を打ち消す guard（border0/padding0/inline）。 */
.main.before-shipping.before-shipping .line-title span span.nowrap{ border-left:0; padding-left:0; display:inline; }
/* 泣き別れ orphan fix: .dt / .point .pt は display:flex（badge ＋本文）。本文末尾に <span class="nowrap"> を直付けすると
   nowrap 自体が別 flex item 化し gap 付きで別位置へ飛ぶ→本文全体を単一 flex item(.dt-t / .pt-t)に包み、trailing nowrap は
   その内側の inline に置く（1 flex item 内なので散らず、最終行が nowrap 節分の文字数で纏まる）。 */
.main.before-shipping.before-shipping .dt>.dt-t,
.main.before-shipping.before-shipping .point .pt>.pt-t{ flex:1 1 auto; min-width:0; }

/* connection-note2（中間CTA） / cta connection-note（締めCTA白地） 共通部品。
   §1-B: 色地の上に置く note/CTA帯は白地(#fff)＋淡罫で埋もれさせない。 */
/* 締めCTA(#cta=.part.connection 非partbg・白地節)の note は白地＋淡罫 */
.main.before-shipping.before-shipping .connection .connection-note .kw{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .connection .connection-note a{ color:var(--color9); font-weight:bold; text-decoration:underline; }
.main.before-shipping.before-shipping .connection .connection-note2 .kw{ color:var(--color9); font-weight:700; }

/* §1-B: 中間/中盤CTA帯 connection.partbg（白域内）＝白地透明＋上の区切り線のみ＋上下30 breathing。
   背景色塗りは外し、区切り線 #8DB0D0、padding 上下30。 */
.main.before-shipping.before-shipping .connection.partbg{ background:#fff !important;/* 2026-08-27: 実測で親が白＝描画は既に白。canon（components.css:43「帯は白」）と宣言も一致させて cross-page drift を解消（見た目の変化なし） */ border:0 !important; border-top:1px solid var(--color7) !important; padding-top:30px !important; padding-bottom:30px !important; margin:0 !important; }

/* connection-title 左右の矢印疑似要素を縮小（泣き別れ時の余白暴れ抑制） */
.main.before-shipping.before-shipping .connection .connection-title:before,
.main.before-shipping.before-shipping .connection .connection-title:after{ margin:2px 9px 0; width:15px; height:15px; }

/* mr1 強調色統一: 明地の本文中インライン強調（strong/b/.kw）は color9(#224995) 一色。
   FV(濃紺地)の淡青強調は各FVルールが高spec@で保持（#9DB8E6）＝ここでは上書きしない（specificity）。
   block/flex 化したカードタイトル(.dt/.pt/.board-head 等 <b>/<strong> 不使用の見出し色)は color4 のまま＝対象外。 */
.main.before-shipping.before-shipping .thisinner strong,
.main.before-shipping.before-shipping .thisinner b,
.main.before-shipping.before-shipping .thisinner .kw{ color:var(--color9); }

/* ============================================================
   [A-2] related（✅ テーマ board / 矢印アイコンへ翻訳）
   ============================================================ */
.main.before-shipping.before-shipping .related .board{ padding: 6px 16px; margin-top: 14px; }
/* related 導入文（h2直下・golden section-lead 12px／PCは [G] で15） */
.main.before-shipping.before-shipping .related .rel-lead{ font-size:12px; line-height:1.6; color:#333; margin:20px 0 0; }
.main.before-shipping.before-shipping .related .rel-lead .kw{ color:var(--color9); font-weight:700; }

/* ============================================================
   [B] 共有部品（複数sectionで使う最小語彙）
   thisinner幅・note・compare-table・deflist・simple3・point・promise
   ============================================================ */
/* B-1 thisinner（テーマ素 .thisinner と完全一致＝広画面1080pxまで／SP実効ガター15px=計30px） */
.main.before-shipping.before-shipping .why .thisinner,
.main.before-shipping.before-shipping .flow .thisinner,
.main.before-shipping.before-shipping .reason .thisinner,
.main.before-shipping.before-shipping .quickref .thisinner,
.main.before-shipping.before-shipping .checklist .thisinner,
.main.before-shipping.before-shipping .trouble .thisinner,
.main.before-shipping.before-shipping .erasure .thisinner,
.main.before-shipping.before-shipping .broken .thisinner,
.main.before-shipping.before-shipping .caution .thisinner,
.main.before-shipping.before-shipping .voice .thisinner,
.main.before-shipping.before-shipping .related .thisinner{ width:calc(100% - 40px); max-width:clamp(1000px, 600px + 25vw, 1080px); margin:0 auto; }
@media (max-width:750px){
  /* SP実効ガター: テーマ .thisinner SP は calc(100% - 30px)(style.css:1186-1187)。bespoke節も15px×2=30へ統一 */
  .main.before-shipping.before-shipping .why .thisinner,
  .main.before-shipping.before-shipping .flow .thisinner,
  .main.before-shipping.before-shipping .reason .thisinner,
  .main.before-shipping.before-shipping .quickref .thisinner,
  .main.before-shipping.before-shipping .checklist .thisinner,
  .main.before-shipping.before-shipping .trouble .thisinner,
  .main.before-shipping.before-shipping .erasure .thisinner,
  .main.before-shipping.before-shipping .broken .thisinner,
  .main.before-shipping.before-shipping .caution .thisinner,
  .main.before-shipping.before-shipping .voice .thisinner,
  .main.before-shipping.before-shipping .related .thisinner{ width:calc(100% - 30px); }
}
@media (min-width:751px){
  .main.before-shipping.before-shipping .why .thisinner,
  .main.before-shipping.before-shipping .flow .thisinner,
  .main.before-shipping.before-shipping .reason .thisinner,
  .main.before-shipping.before-shipping .quickref .thisinner,
  .main.before-shipping.before-shipping .checklist .thisinner,
  .main.before-shipping.before-shipping .trouble .thisinner,
  .main.before-shipping.before-shipping .erasure .thisinner,
  .main.before-shipping.before-shipping .broken .thisinner,
  .main.before-shipping.before-shipping .caution .thisinner,
  .main.before-shipping.before-shipping .voice .thisinner,
  .main.before-shipping.before-shipping .related .thisinner{ max-width:1000px; }
}

/* B-2 note（情報注記・白円infoチップ）。
   mr1: 図地は「背景色」で分離（golden §6: .note は drop-shadow なし）。
   白地節=var(--border)（#F1F8FF on 白＝canonical pair・埋もれ非該当）／色地節=白(#fff on color10)。 */
.main.before-shipping.before-shipping .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; }
.main.before-shipping.before-shipping .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.before-shipping.before-shipping .note .n-i svg{ width:100%; height:100%; display:block; }
.main.before-shipping.before-shipping .note a{ color:var(--color9); font-weight:bold; text-decoration:underline; }
.main.before-shipping.before-shipping .note .kw{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .note strong{ color:var(--color9); }
/* 白地節（reason/checklist/broken）上の淡地note→背景色で分離（drop-shadow なし） */
.main.before-shipping.before-shipping .reason .note,
.main.before-shipping.before-shipping .checklist .note,
.main.before-shipping.before-shipping .broken .note{ background:var(--border); }
/* 色地節（quickref/erasure/flow/caution/trouble）上の白note→白地で分離（drop-shadow なし）
   ※2026-08-31 r2 手3: flow と caution を色節に変えたので、この2つを白note側へ移動（§2.6 埋もれ回避）
   ※2026-08-31 r3 手3: trouble を色節に変えたので同様に白note側へ移動（color10 on color10＝埋もれ を作らない） */
.main.before-shipping.before-shipping .quickref .note,
.main.before-shipping.before-shipping .erasure .note,
.main.before-shipping.before-shipping .flow .note,
.main.before-shipping.before-shipping .trouble .note,
.main.before-shipping.before-shipping .caution .note{ background:#fff; }

/* B-3 compare-table（th navy / zebra / cell破線）
   mr1: golden §5 th=13/td=12（PCは [G] で th15/td14 に拡大）。word-break は break-word（auto-phrase禁止）。
   scroll-hint 作法は [J] ブロックで .compare-table-scroll>.cts-inner.swipe-hint に包む（影は wrapper 側）。 */.main.before-shipping.before-shipping .compare-table{ width:100%; margin:18px 0 0; table-layout:fixed; }
/* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table,
.main.before-shipping .compare-table th,
.main.before-shipping .compare-table td */
.main.before-shipping.before-shipping .compare-table th:first-child,
.main.before-shipping.before-shipping .compare-table td:first-child{ width:30%; }/* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table th *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table td *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table td:not(:first-child) *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table tr:nth-child(even) td *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table td.lbl *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table td strong *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table .todo *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table td a */
/* quickref(早見表)は3列＝1列目幅30%（やること/ゴール/できない場合）。trouble(2列)は1列目を広めに（症状ラベルが長い） */
.main.before-shipping.before-shipping .trouble .compare-table th:first-child,
.main.before-shipping.before-shipping .trouble .compare-table td:first-child{ width:40%; }

/* B-4 deflist（番号付き定義リスト・checklist / trouble / broken / caution で使用。白節では color10 カード・色節では白カード＝§2.6）
   mr1: .di は drop-shadow なし＝図地は背景色で分離（golden §6/§7）。本ページ deflist は全て白節→ color10 カードで地分離。 */
.main.before-shipping.before-shipping .deflist{ display:flex; flex-direction:column; gap:14px; margin:24px 0 0; }
.main.before-shipping.before-shipping .di{ background:var(--color10); border-radius:5px; padding:15px 16px; }
.main.before-shipping.before-shipping .dt{ display:flex; align-items:baseline; gap:10px; font-size:15px; font-weight:700; color:var(--color4); line-height:1.5; }
.main.before-shipping.before-shipping .dt .n{ flex:0 0 auto; align-self:flex-start; font-size:12px; font-weight:800; color:#fff; background:var(--color9); border-radius:4px; padding:3px 9px; line-height:1.2; margin-top:2px; }
.main.before-shipping.before-shipping .dd{ font-size:12px; line-height:1.6; color:#333; margin-top:8px; }
.main.before-shipping.before-shipping .dd strong, .main.before-shipping.before-shipping .dd b{ color:var(--color9); }
.main.before-shipping.before-shipping .dd a{ color:var(--color9); font-weight:bold; text-decoration:underline; }
.main.before-shipping.before-shipping .dd .micro{ display:block; margin-top:8px; font-size:11px; line-height:1.6; color:var(--color13); }
.main.before-shipping.before-shipping .dd .micro a{ font-weight:bold; }
@media (min-width:751px){
  /* 2026-08-31 r2: 2列 grid → 2段組（multi-column）。
     理由: r2 で手順2が .sub-steps ×3 を持って一気に高くなり、grid の行揃えだと **同じ行の手順1 の下に約450px の空洞**ができた（@1280 実測）。
     grid は「行の高さ＝その行で最も高いカード」で揃うので、高さが不揃いなカード列には向かない。段組なら各段が自動で均される。
     ・読み順は 1→2→3…（左段を上から、次に右段）で昇順のまま。番号バッジ .n があるので取り違えない。
     ・.di は break-inside:avoid でカードが段をまたいで割れないようにする（段組の必須作法）。
     ・旧 :last-child{grid-column:1/-1}（7枚目の孤立セル対策）は grid 専用なので撤去。 */
  .main.before-shipping.before-shipping .checklist .deflist{ display:block; columns:2; column-gap:18px; }
  .main.before-shipping.before-shipping .checklist .deflist .di{ break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 14px; }
  /* 2026-08-31 r3 手5（critic r2 D4「左段末に 263〜292px の空洞」）: 末尾の実写真を段組の均衡対象から外し、2段をまたぐ1本の帯にする。
     手順カードは高さが不揃い（手順2 が .sub-steps ×3 で 586-744px＝突出）で、**全7通りの分割を実測しても現行 [1-3]|[4-7] が最小差**だった＝
     並び替えでは解けない。写真（約200px）を span させると、その分だけ段の総量が減って左右段の下端差が縮む。
     column-span:all は multicol の標準作法。写真は最後の要素なので、span 以降に本文が続かない＝段の再開は起きない。 */
  /* PC は段の末尾で .di の margin-bottom が段箱に吸収され、実測で「.di↓.photo-band=0px」（箱の密着）になる＝
     カード列と同じ 14px を span 側の margin-top で明示する（harness D_spacing「独立した箱同士は≥8px」）。 */
  .main.before-shipping.before-shipping .checklist .deflist > .photo-band{ -webkit-column-span:all; column-span:all; margin-top:14px; }
}
/* SP: .deflist 直下に出した写真の上余白は 0（.deflist の gap:14px が間隔＝二重にしない）。
   ★必ず max-width:750px でスコープする。unscoped で書くと**同一詳細度でソース順が後ろ**になり、上の PC 14px を殺す
   （＝本ラウンド 手1 で直した「死に宣言」と同じ形を自分で再生産した。computed で 0px と実測して発覚・台帳#33/#99）。 */
@media (max-width:750px){
  .main.before-shipping.before-shipping .checklist .deflist > .photo-band{ margin-top:0; }
}

/* B-5 simple3（3ステップ横並び・番号食い込み丸・flow で使用） */
.main.before-shipping.before-shipping .simple3{ display:flex; align-items:stretch; gap:0; margin:24px 0 0; }
.main.before-shipping.before-shipping .simple3 .s{ position:relative; flex:1; min-width:0; background:#fff; border-radius:5px; box-shadow:0 0 5px rgba(18,77,137,.2); padding:24px 8px 14px; text-align:center; }
.main.before-shipping.before-shipping .simple3 .s .n{ position:absolute; left:50%; top:0; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:var(--color9); color:#fff; font-size:16px; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1; box-shadow:0 0 6px rgba(18,77,137,.3); }
.main.before-shipping.before-shipping .simple3 .s .t{ display:block; font-size:13px; font-weight:700; color:var(--color4); line-height:1.45; }
.main.before-shipping.before-shipping .simple3 .s .d{ display:block; font-size:11px; color:#5A7386; line-height:1.45; margin-top:4px; }
.main.before-shipping.before-shipping .simple3 .arrow{ flex:0 0 16px; align-self:center; height:13px; background:url(../images/before-shipping/icon/select.svg) center/contain no-repeat; transform:rotate(-90deg); }
@media (max-width:750px){
  .main.before-shipping.before-shipping .simple3 .s{ padding:22px 4px 12px; }
  .main.before-shipping.before-shipping .simple3 .s .t{ font-size:12px; }
  .main.before-shipping.before-shipping .simple3 .s .n{ font-size:14px; }
  .main.before-shipping.before-shipping .simple3 .arrow{ flex-basis:12px; }
}
@media (min-width:751px){
  .main.before-shipping.before-shipping .simple3{ max-width:720px; margin-left:auto; margin-right:auto; }
}

/* B-7 point / point.danger（左罫の注意/特長ボックス）＝bespoke。reason の4つの安心・erasure の3つの安心に使用
   mr1: .pd 本文=12px（golden §5・PCは [G] で15px）。text-wrap 撤去。 */
.main.before-shipping.before-shipping .point{ position:relative; background:#fff; border-radius:5px; padding:15px 16px; margin-top:18px; box-shadow:0 0 5px rgba(18,77,137,.16); border-left:4px solid var(--color9); }
.main.before-shipping.before-shipping .point .pt{ display:flex; align-items:baseline; gap:8px; font-size:14px; font-weight:700; color:var(--color4); line-height:1.5; }
.main.before-shipping.before-shipping .point .pt .pn{ flex:0 0 auto; align-self:flex-start; font-size:11px; font-weight:700; color:#fff; background:var(--color9); border-radius:4px; padding:2px 8px; line-height:1.4; }
.main.before-shipping.before-shipping .point .pd{ font-size:12px; line-height:1.6; color:#333; margin-top:7px; }
.main.before-shipping.before-shipping .point .pd strong, .main.before-shipping.before-shipping .point .pd b{ color:var(--color9); }
.main.before-shipping.before-shipping .point .pd .kw{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .point .pd a{ color:var(--color9); font-weight:bold; text-decoration:underline; }

/* ============================================================
   §1-B 節地色・余白・区切り線（ID個別指定）
   ── 白節: margin:30px auto; padding:0（テーマ標準）。
   ── 色節: background:var(--color10); margin:0。padding/border-top は下記 ID で個別。
   ── 同色隣接境界のみ border-top:1px solid var(--color7) ＋上下30。色↔白は線なし。
   ── 色/CTA直後の白節は margin-top:0 で二重(60)回避。
   ── 節順(wfc): fv(色grad) why(白) flow(白) reason(白) → quickref(色) → checklist(白)
        → [中間CTA partbg(透明帯)] → trouble(色) → erasure(色) → broken(白) caution(色)  ※r2/r3 で flow/caution/related/trouble を色節化
        → [中盤CTA partbg(透明帯)] → voice(白) → related(白) → 締めCTA connection(非partbg) → faq(白)
   ============================================================ */
/* 白節（テーマ標準）— why/reason/checklist/broken/voice/faq は
   .part{margin:30px auto}(style.css:4521) に委ねる。
   color/CTA→white 直後の白節のみ margin-top:0（前帯/前色節の padding-bottom30 が breathing） */
.main.before-shipping.before-shipping #why{ margin-top:0; }         /* prev=trust(色・padding-bottom30) design-craft手4 */
.main.before-shipping.before-shipping #checklist{ margin-top:0; }   /* prev=quickref(色・padding-bottom30) */
/* 2026-08-31 r3 手3: #trouble は色節へ移した（下の色節ブロック参照）＝白節リストから除外 */
.main.before-shipping.before-shipping #broken{ margin-top:0; }      /* prev=erasure(色・padding-bottom30) */
.main.before-shipping.before-shipping #voice{ margin-top:0; }       /* prev=中盤CTA partbg（透明帯・padding-bottom30） */
.main.before-shipping.before-shipping #reason{ margin-top:0; }      /* 2026-08-31 r2: prev=flow(色・padding-bottom30) */
/* 2026-08-31 r2: prev が色節になった CTA帯／締めCTA は「色→白」＝色差で境目が見える＝区切り線なし（spacing-divider-craft-rules §1）。
   併せて margin-top を 0 にして「色節 padding30 ＋ 白節 padding30 = 60」に収める（30+30+30=90 の余白過剰を作らない）。 */
.main.before-shipping.before-shipping #cta-mid2{ border-top:0 !important; }

/* 色節（全面 color10）。共通=連続色 margin:0。padding/区切り線は各IDで個別。 */
.main.before-shipping.before-shipping .trust,
.main.before-shipping.before-shipping .quickref,
.main.before-shipping.before-shipping .trouble,
.main.before-shipping.before-shipping .erasure,
.main.before-shipping.before-shipping .flow,
.main.before-shipping.before-shipping .caution,
.main.before-shipping.before-shipping .related{ background:var(--color10); margin:0; }

.main.before-shipping.before-shipping #trust{ padding:30px 0; }     /* design-craft手4: prev=fv(濃紺)→色差で区切れる＝線なし。上下30 breathing。下30=次の白節 why が margin-top:0 で受ける */
.main.before-shipping.before-shipping #quickref{ padding:30px 0; }  /* prev=reason(白)→色差で区切れる＝線なし。上下30 breathing。下30=次の白節 checklist が margin-top:0 で受ける */
/* 2026-08-31 r3 手3（critic r2 D5「白の最長連続 4,546px＝ページ高の29%」／金型 kaitoriten 12%・mac 13%・galaxy 20%）:
   #trouble（1,410px）を色節にして checklist→cta-mid1→trouble の白連続を割る。**地色を変えたので前後2つの境界を再判定した（台帳#94）**:
   ── 上の境界 cta-mid1(白 full-bleed CTA帯) → #trouble(色): **白↔色＝色差で境目が見える＝区切り線なし**（現状どおり trouble に border-top を付けない）。
      余白は「白帯の padding-bottom:30 ＋ 色節の padding-top:30 = 60」。旧（白節・margin-top:0）は 30 だったが、
      60 は他の色節と同値（fv→trust 60／why→flow 60／reason→quickref 60／trouble→erasure 60／broken→caution 60／voice→related 60）＝ページ内で揃う。
   ── 下の境界 #trouble(色) → #erasure(色): **同色が接する＝区切り線が要る**（無いと color10 が繋がって一枚パネルに見える）。
      #trouble の末尾は inset の .note（full-bleed の白帯ではない）＝色域は連続するので線は省けない。線は「同色が接する側」＝#erasure の border-top。
      線の上下の breathing は trouble の padding-bottom:30 と erasure の padding-top:30 が作る。 */
.main.before-shipping.before-shipping #trouble{ padding:30px 0; }
.main.before-shipping.before-shipping #erasure{ padding:30px 0; border-top:1px solid var(--color7); }   /* prev=trouble(色)→同色隣接＝区切り線 1px var(--color7)。下30=次の白節 broken が margin-top:0 で受ける */
/* 2026-08-31 r2 手3（critic r1 P4-1/4-2「色節 3/16・broken→faq が白7節連続」）: flow / caution / related を色節にして
   白→色→白→色…の交互リズムへ。隣り合う色節は無し（同色境界＝区切り線が要るケースは発生しない）。
   ── #flow:    prev=why(白)→色差で線なし。上下30 breathing。下30=次の白節 reason が margin-top:0 で受ける。
   ── #caution: prev=broken(白)→色差で線なし。下は中盤CTA帯(白 partbg)＝色差なので **cta-mid2 の border-top は外す**。
   ── #related: prev=voice(白)→色差で線なし。下は締めCTA #cta(白)＝色差なので **#cta の border-top も外す**。 */
.main.before-shipping.before-shipping #flow{ padding:30px 0; }
.main.before-shipping.before-shipping #caution{ padding:30px 0; }
.main.before-shipping.before-shipping #related{ padding:30px 0; }
/* 色節の中の box は白で分離（§2.6・埋もれ禁止）: caution / trouble の deflist カード／related の board。
   ※2026-08-31 r3 手3: trouble を色節にしたので .di も白へ（color10 on color10＝境界が消える）。compare-table は canon 側が既に #fff（components.css:184）。 */
.main.before-shipping.before-shipping .caution .di,
.main.before-shipping.before-shipping .trouble .di{ background:#fff; }
.main.before-shipping.before-shipping .related .board{ background:#fff; }
/* 群見出し（h3.line-btitle）の上余白＝golden「h3 上 margin は実効 ≤20px」 */
.main.before-shipping.before-shipping .related .line-btitle{ margin:20px 0 0; line-height:1.3; word-break:break-word; }/* h3 上余白=20（テーマ .line-content SP style.css:3711）・line-height=1.3（見出しtier／gold build/galaxy-reset/extra.css:108,117 と同値） */

/* 締めCTA #cta（.connection 非partbg・白節）: prev=related(白)→白×白で境目消失回避＝border-top(区切り線)。
   §1-B 白×白は自己区切りする濃紺h2バンドが無い節境界に border-top:1px var(--color7)（A_divider是正）。
   テーマSP .connection:not(.partbg) は padding:0 !important（style.css:5592）＝border-top が本文に密着（D_spacing「帯先頭が区切り線と密着」）→
   padding-top:30px !important で区切り線下に breathing を確保（PCはテーマが 30px 0 20px＝一致）。 */
.main.before-shipping.before-shipping #cta{ margin-top:0; padding-top:30px !important; }/* 2026-08-31 r2: prev=related が色節になった＝色→白は色差で区切れる→border-top 撤去（旧: 白×白のため区切り線を引いていた） */

/* ============================================================
   [C] why（不安提示→チェックリスト着地）※aquos worry 器を .why に流用
   ============================================================ */
.main.before-shipping.before-shipping .why .worry-board{ position:relative; background:transparent; padding:0; margin-top:20px; }
.main.before-shipping.before-shipping .board-head{ margin:0; }
/* mr1: board-head line-height=見出しtier(≤1.55)。旧=body継承1.60で見出しtier逸脱 */
.main.before-shipping.before-shipping .why .worry-board .board-head{ text-align:center; color:var(--color4); font-size:17px; font-weight:bold; line-height:1.4; padding:0 0 16px; }
.main.before-shipping.before-shipping .why .worry-board .wl{ display:flex; flex-direction:column; gap:16px; }
.main.before-shipping.before-shipping .why .worry-board .wi{ position:relative; width:88%; background:#fff; border-radius:5px; padding:12px 16px 12px 12px; display:flex; align-items:center; gap:11px; font-size:14px; line-height:1.6; color:#333; box-shadow:0 0 10px rgba(18,77,137,.16); }
.main.before-shipping.before-shipping .why .worry-board .wi:after{ content:""; position:absolute; bottom:-5px; left:30px; width:12px; height:12px; background:#fff; transform:rotate(45deg); box-shadow:5px 5px 7px -3px rgba(18,77,137,.12); }
.main.before-shipping.before-shipping .why .worry-board .wi:nth-child(even){ margin-left:auto; }
.main.before-shipping.before-shipping .why .worry-board .wi:nth-child(even):after{ left:auto; right:30px; }
.main.before-shipping.before-shipping .why .worry-board .wi .wic{ width:42px; min-width:42px; height:42px; }
.main.before-shipping.before-shipping .why .worry-board .wi .wic svg{ width:100%; height:100%; display:block; }
.main.before-shipping.before-shipping .why .worry-board .wi .wi-t{ min-width:0; }
.main.before-shipping.before-shipping .why .worry-board .wi .wi-t strong{ color:var(--color9); }
.main.before-shipping.before-shipping .why .worry-lead{ font-size:12px; line-height:1.6; color:#333; margin:24px 0 0; }
.main.before-shipping.before-shipping .why .worry-lead strong{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .why .worry-lead .kw{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .why .worry-lead a{ color:var(--color9); font-weight:bold; text-decoration:underline; }
.main.before-shipping.before-shipping .why .lead-why{ font-size:12px; line-height:1.6; color:#333; margin:20px 0 0; }
.main.before-shipping.before-shipping .why .lead-why strong{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .why .lead-why .kw{ color:var(--color9); font-weight:700; }
@media (max-width:750px){
  .main.before-shipping.before-shipping .why .worry-board{ padding:0; }
  .main.before-shipping.before-shipping .why .worry-board .board-head{ font-size:16px; padding:0 0 14px; text-align:center; }
  .main.before-shipping.before-shipping .why .worry-board .wi{ font-size:13px; }
  .main.before-shipping.before-shipping .why .worry-board .wi .wic{ width:38px; min-width:38px; height:38px; }
}
@media (min-width:751px){
  .main.before-shipping.before-shipping .why .worry-board .wl{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
  .main.before-shipping.before-shipping .why .worry-board .wi{ width:auto; }
  .main.before-shipping.before-shipping .why .worry-board .wi:nth-child(even){ margin-left:0; }
  .main.before-shipping.before-shipping .why .worry-lead{ max-width:780px; }
}

/* ============================================================
   [D] flow（最短3STEP・申込→発送→入金）＝simple3＋note
   ============================================================ */
.main.before-shipping.before-shipping .flow .quick-lead{ font-size:12px; line-height:1.6; color:#333; margin:20px 0 0; }
.main.before-shipping.before-shipping .flow .quick-lead strong{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .flow .quick-lead .kw{ color:var(--color9); font-weight:700; }
@media (min-width:751px){
  .main.before-shipping.before-shipping .flow .quick-lead{ max-width:780px; }
}

/* ============================================================
   [E] reason（発送前の不安に4つの安心）＝bespoke point×4 ＋ promise（safe 由来）。白節。
   ============================================================ */
.main.before-shipping.before-shipping .reason .reason-lead{ font-size:12px; line-height:1.6; color:#333; margin:20px 0 0; }
.main.before-shipping.before-shipping .reason .reason-lead strong{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .reason .reason-lead .kw{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .reason .reason-points{ margin-top:6px; }
@media (min-width:751px){
  .main.before-shipping.before-shipping .reason .reason-lead{ max-width:780px; }
}
/* promise（左上隅navy帯＋teal .ck＝aquos safe .promise 由来。白節上＝白カード）
   mr1: 項目本文を .pd に分離（title/body未分離是正）＝.px b(タイトル・color9) と .px .pd(本文) を display:block で2段分離。 */
.main.before-shipping.before-shipping .reason .promise{ position:relative; background:#fff; border-radius:5px; padding:60px 18px 20px; margin:26px 0 0; overflow:hidden; box-shadow:0 0 5px rgba(18,77,137,.16); }
.main.before-shipping.before-shipping .reason .promise .pm-t{ position:absolute; left:0; top:0; background:var(--color9); color:#fff; font-size:16px; font-weight:bold; border-bottom-right-radius:5px; padding:6px 20px; line-height:1.4; }
.main.before-shipping.before-shipping .reason .pl{ display:flex; flex-direction:column; gap:14px; }
.main.before-shipping.before-shipping .reason .pi{ position:relative; background:var(--color10); border-radius:5px; padding:15px 16px 15px 50px; }
.main.before-shipping.before-shipping .reason .pi .ck{ position:absolute; left:13px; top:15px; width:26px; height:26px; border-radius:50%; background:#16AEB1; display:flex; align-items:center; justify-content:center; }
.main.before-shipping.before-shipping .reason .pi .ck svg{ width:14px; height:14px; display:block; }
.main.before-shipping.before-shipping .reason .pi .px{ font-size:13px; line-height:1.6; color:#333; }
.main.before-shipping.before-shipping .reason .pi .px b{ display:block; font-size:14px; color:var(--color9); font-weight:700; line-height:1.4; margin-bottom:3px; }
.main.before-shipping.before-shipping .reason .pi .px .pd{ display:block; font-size:12px; line-height:1.6; color:#333; margin-top:0; }
@media (max-width:750px){
  .main.before-shipping.before-shipping .reason .promise{ padding:58px 12px 16px; }
  .main.before-shipping.before-shipping .reason .promise .pm-t{ font-size:14px; padding:6px 16px; }
}
@media (min-width:751px){
  .main.before-shipping.before-shipping .reason .pl{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
}

/* ============================================================
   [F] quickref（発送前やること早見表）＝色節＋compare-table（7×3）
   ============================================================ */
.main.before-shipping.before-shipping .quickref .quick-lead{ font-size:12px; line-height:1.6; color:#333; margin:20px 0 0; }
.main.before-shipping.before-shipping .quickref .quick-lead strong{ color:var(--color9); font-weight:700; }
@media (min-width:751px){
  .main.before-shipping.before-shipping .quickref .quick-lead{ max-width:780px; }
}

/* ============================================================
   [G] checklist（発送前チェックリスト本体）＝白節＋deflist×7＋note
   ============================================================ */
.main.before-shipping.before-shipping .checklist .check-lead{ font-size:12px; line-height:1.6; color:#333; margin:20px 0 0; }
.main.before-shipping.before-shipping .checklist .check-lead strong{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .checklist .check-lead .kw{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .checklist .check-body{ font-size:12px; line-height:1.6; color:#333; margin:14px 0 0; }/* 2026-08-31 r2 P5-1: 1.8→1.6（テーマ既定 style.css:71。1.8 の典拠は .voice .item-body:6873 のみ＝節導入文には当てない） */
.main.before-shipping.before-shipping .checklist .check-body .kw{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .checklist .check-body a{ color:var(--color9); font-weight:bold; text-decoration:underline; }
@media (min-width:751px){
  .main.before-shipping.before-shipping .checklist .check-lead,
  .main.before-shipping.before-shipping .checklist .check-body{ max-width:780px; }
}

/* ============================================================
   [H] trouble（トラブル別対処）＝色節（r3 手3）＋compare-table(5×2)＋deflist×3
   ============================================================ */
.main.before-shipping.before-shipping .trouble .trouble-lead{ font-size:12px; line-height:1.6; color:#333; margin:20px 0 0; }
.main.before-shipping.before-shipping .trouble .trouble-lead strong{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .trouble .trouble-lead a{ color:var(--color9); font-weight:bold; text-decoration:underline; }
.main.before-shipping.before-shipping .trouble .trouble-body{ font-size:12px; line-height:1.6; color:#333; margin:14px 0 0; }/* 2026-08-31 r2 P5-1: 1.8→1.6（テーマ既定 style.css:71。1.8 の典拠は .voice .item-body:6873 のみ＝節導入文には当てない） */
.main.before-shipping.before-shipping .trouble .trouble-body a{ color:var(--color9); font-weight:bold; text-decoration:underline; }
@media (min-width:751px){
  .main.before-shipping.before-shipping .trouble .trouble-lead,
  .main.before-shipping.before-shipping .trouble .trouble-body{ max-width:780px; }
}

/* ============================================================
   [I] erasure（データ消去の安心）＝色節＋bespoke point×3＋note
   ============================================================ */
.main.before-shipping.before-shipping .erasure .erasure-lead{ font-size:12px; line-height:1.6; color:#333; margin:20px 0 0; }
.main.before-shipping.before-shipping .erasure .erasure-lead strong{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .erasure .erasure-lead .kw{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .erasure .erasure-body{ font-size:12px; line-height:1.6; color:#333; margin:14px 0 0; }/* 2026-08-31 r2 P5-1: 1.8→1.6（テーマ既定 style.css:71。1.8 の典拠は .voice .item-body:6873 のみ＝節導入文には当てない） */
.main.before-shipping.before-shipping .erasure .erasure-body a{ color:var(--color9); font-weight:bold; text-decoration:underline; }
.main.before-shipping.before-shipping .erasure .erasure-points{ margin-top:6px; }
/* 色節内なので point は白カードで地分離（B-7 で #fff 指定済） */
@media (min-width:751px){
  .main.before-shipping.before-shipping .erasure .erasure-lead,
  .main.before-shipping.before-shipping .erasure .erasure-body{ max-width:780px; }
}

/* ============================================================
   [J] broken（壊れたスマホも発送・買取OK）＝白節＋deflist×3＋note 相談導線
   ============================================================ */
.main.before-shipping.before-shipping .broken .broken-lead{ font-size:12px; line-height:1.6; color:#333; margin:20px 0 0; }
.main.before-shipping.before-shipping .broken .broken-lead strong{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .broken .broken-lead .kw{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .broken .broken-body{ font-size:12px; line-height:1.6; color:#333; margin:14px 0 0; }/* 2026-08-31 r2 P5-1: 1.8→1.6（テーマ既定 style.css:71。1.8 の典拠は .voice .item-body:6873 のみ＝節導入文には当てない） */
.main.before-shipping.before-shipping .broken .broken-body strong{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .broken .broken-body a{ color:var(--color9); font-weight:bold; text-decoration:underline; }
@media (min-width:751px){
  .main.before-shipping.before-shipping .broken .broken-lead,
  .main.before-shipping.before-shipping .broken .broken-body{ max-width:780px; }
}

/* ============================================================
   [K] caution（発送前の注意）＝白節＋deflist×3＋note
   ============================================================ */
.main.before-shipping.before-shipping .caution .caution-lead{ font-size:12px; line-height:1.6; color:#333; margin:20px 0 0; }
.main.before-shipping.before-shipping .caution .caution-lead strong{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .caution .caution-lead .kw{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .caution .caution-body{ font-size:12px; line-height:1.6; color:#333; margin:14px 0 0; }/* 2026-08-31 r2 P5-1: 1.8→1.6（テーマ既定 style.css:71。1.8 の典拠は .voice .item-body:6873 のみ＝節導入文には当てない） */
.main.before-shipping.before-shipping .caution .caution-body .kw{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .caution .caution-body a{ color:var(--color9); font-weight:bold; text-decoration:underline; }
@media (min-width:751px){
  .main.before-shipping.before-shipping .caution .caution-lead,
  .main.before-shipping.before-shipping .caution .caution-body{ max-width:780px; }
}

/* ============================================================
   [L] voice（お客様の声・買取実績）＝白節。❌実口コミ/実績値は同梱データに無い＝捏造禁止（鉄則6）。
   ── 実 h2＋誠実な「掲載予定/確認が取れたもののみ掲載」コピー（構成案 wfc:578-580,617 の清書）で content-fidelity(voice h2網羅)を満たしつつ、
      ダミー口コミ・要確認数値は出さない。Review/AggregateRating schema 非出力（head 参照）。実値確定後にデザイン段でカード投入。
   ============================================================ */
.main.before-shipping.before-shipping .voice .voice-lead{ font-size:12px; line-height:1.6; color:#333; margin:20px 0 0; }
.main.before-shipping.before-shipping .voice .voice-lead strong{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .voice .voice-lead .kw{ color:var(--color9); font-weight:700; }
/* 2026-09-02 台帳#122: .voice-body（旧ダミー声の閉じ段落）は撤去済みHTMLで実体が無いため撤去（trust-note が閉じの役割を担う） */
@media (min-width:751px){
  .main.before-shipping.before-shipping .voice .voice-lead{ max-width:780px; }
}

/* ============================================================
   [C-trust] trust（信頼バッジ帯・simple3 3枠＋micro・色地節）design-craft手4
   ── reuse: build/kaitoriten-erabikata/extra.css:410-414 を rescope（base simple3 は B-5 で共有・gap:0で3枠密着＝各枠 白+glow+角丸で分離）。
   ============================================================ */
.main.before-shipping.before-shipping .trust .trust-micro{ font-size:12px; color:var(--color13); line-height:1.6; text-align:center; margin:14px 0 0; }
.main.before-shipping.before-shipping .trust .trust-micro strong{ color:var(--color9); font-weight:700; }
/* trust の simple3 番号丸はラベル文字（許/消/0）＝navy */
.main.before-shipping.before-shipping .trust .simple3 .s .n{ font-size:15px; }
.main.before-shipping.before-shipping .trust .simple3{ margin-top:14px; }

/* ============================================================
   [MV-proof]（2026-09-02 台帳#122 是正）── #voice「安心してお任せいただくための、リンクサスの運営情報」
   捏造実績数値（旧 dp-stats 92,000件/4,300機種/★4.6）＋属性・日付つきダミーレビュー2枚を全撤去し、
   検証可能な事実のみの proof-cert＋trust-grid へ置換（手本= build/mac-reset/extra.css の同ブロック／原設計= build/applewatch-reset/extra.css:687-691,868-874）。
   trust-grid／.tc／.tl／.tn-s／.trust-note は _shared/components.css:208-219 の実体をそのまま使用（複製しない）。
   proof-cert／.pc-i／.pc-t／.tl-ic は _shared 未収録（dp-stats/dp-cred 同様に他ページとの値ドリフト未検証のため
   sc25 時点では昇格対象外＝components.css:7 参照）＝applewatch-reset と同値を .main.before-shipping へ rescope。
   旧 dp-band/dp-stats/dp-cred/dp-dummy-note/carousel .rating 非表示ルールは HTML 実体が無くなったため撤去
   （ipad-reset 教訓: 同名セレクタの死にコード残置は新コンポーネントを壊す）。
   ★衝突是正（audit-sweep B_buried で発覚）: 本ページは裸の `.trust` クラスを「全面色節マーカー」として既に使っている
   （extra.css:268 `.main.before-shipping .trust, .quickref, ...{background:var(--color10); margin:0}`）。
   このルールは class 属性の中身に関係なく「trust というクラスを持つ要素」全てに一致するため、trust-grid 2列化のために
   付けた `.why-extra.trust` ラッパー div にも波及し、ラッパー自体が color10 化＝中の .tc/.trust-note（同じ color10）が
   埋もれる。ラッパーの背景だけを白地へ引き戻す（.why-extra.trust は4クラス=0,4,0 specificity で衝突ルール0,3,0に勝つ）。 */
.main.before-shipping.before-shipping .why-extra.trust{ background:none; margin:0; }
.main.before-shipping.before-shipping .why-extra .proof-cert{ display:flex; align-items:flex-start; gap:12px; background:#fff; border:1px solid var(--color7); border-radius:5px; padding:15px 16px; margin:22px 0 0; box-shadow:0 0 5px rgba(18,77,137,.16); }
.main.before-shipping.before-shipping .why-extra .proof-cert .pc-i{ flex:0 0 36px; width:36px; height:36px; }
.main.before-shipping.before-shipping .why-extra .proof-cert .pc-i svg{ width:100%; height:100%; display:block; }
.main.before-shipping.before-shipping .why-extra .proof-cert .pc-t{ font-size:12px; line-height:1.6; color:#333; }
.main.before-shipping.before-shipping .why-extra .proof-cert .pc-t b{ display:block; font-size:15px; color:var(--color4); line-height:1.3; margin-bottom:3px; }
.main.before-shipping.before-shipping .why-extra.trust .trust-grid{ margin:14px 0 0; }
.main.before-shipping.before-shipping .why-extra.trust .tc .tl .tl-ic{ flex:0 0 auto; width:40px; height:40px; margin-right:3px; }
.main.before-shipping.before-shipping .why-extra.trust .tc .tl .tl-ic svg{ width:100%; height:100%; display:block; }

@media (min-width:751px){
  .main.before-shipping.before-shipping .why-extra .proof-cert .pc-t{ font-size:15px; }
  .main.before-shipping.before-shipping .why-extra .proof-cert .pc-t b{ font-size:16px; }
  .main.before-shipping.before-shipping .why-extra.trust .tc .tl .tl-ic{ width:48px; height:48px; }
}

/* ============================================================
   [K-ci] design-craft手2 概念アイコン ci-ic（.pt/.dt 先頭・白円+navy3トーンの塗りのみ）
   ── reuse: build/kaitoriten-erabikata/extra.css:575-578,600-601 を rescope。全カード列
      （checklist/reason/erasure/broken/caution/trouble の .dt/.pt）へ横展開＝#voice の dp-stat-ic 語彙の再利用（発明でなくトークン再利用）。
   ── 線画0（塗りのみ・ledger#34）: 各SVGは outer白円(r=51.5・fill#fff)＋内側 navy3トーン(#224995/#72A2CE/#9DB8E6/#E2EFFF)の塗り shape を必ず1つ以上持つ。
   ── flex orphan 両立: .dt/.pt は既に flex（B-4/B-7）＋本文は .dt-t/.pt-t（[A]で flex:1 1 auto;min-width:0）。ci-ic は先頭 flex item（align-self:flex-start）。
   ── ★2026-08-31 r2 手4-c（critic r1 P3-5「白円の縁あり/なしが同一ページに同居」＋ checklist 減点4「30px の .ci-ic は薄すぎてアンカーとして効いていない」）:
      **縁（stroke #C8D4E4）を撤去し、サイズを 30→38px（PC 34→42px）へ**。この2つはセットで動かす必要がある（片方だけだと白カード上で輪郭が消えて弱くなる）。
      根拠は build 全31ページの静的実測（HTMLコメント除外・ledger#85 の教訓どおり描画実装だけを数えた）:
        ・`.wic` = 25ページ 147個すべて縁なし（例外0）＝白円の canon は縁なし。
        ・`.ci-ic` を使うのは4ページだけで **2つの流儀**に割れていた ―
            「縁なし＋38px」= beginners-guide 25個（唯一 critic 91＋ゲート成果物を再発行済の genre 姉妹）
            「縁あり＋30px」= data-erasure-security 18個 / kaitoriten-erabikata 34個
        ・before-shipping は 30px のまま縁だけ外すと**両流儀のいいとこ取りにならない**（実スクショで #reason/#erasure の
          アイコンが白カード上でほぼ消えた）。→ 証拠つき DONE の beginners-guide 側（縁なし＋38/42px）に丸ごと揃える。 */
.main.before-shipping.before-shipping .pt>.ci-ic,
.main.before-shipping.before-shipping .dt>.ci-ic{ flex:0 0 auto; align-self:flex-start; width:38px; height:38px; margin-top:-2px; }
/* 2026-08-31 _shared 昇格: .main.before-shipping .ci-ic svg { width; height; display } は build/_shared/components.css（ci-ic canon）へ移動＝ここでは複製しない */
@media (min-width:751px){
  .main.before-shipping.before-shipping .pt>.ci-ic,
  .main.before-shipping.before-shipping .dt>.ci-ic{ width:42px; height:42px; }
}

/* ============================================================
   [A-1] fv（🔶→.fv-todo プレースホルダ・作り込まない）
   ============================================================ */
.main.before-shipping.before-shipping .topbanner.fv-todo{
  background: linear-gradient(160deg, #0E2440 0%, #14355D 60%, #224995 100%);
  padding: 28px 0 30px;
}
.main.before-shipping.before-shipping .topbanner.fv-todo .fv-todo-inner{ max-width: 720px; margin: 0 auto; }
/* FV中央のスマホ本体アイコン。濃紺面 → #9DB8E6（icon-baked-fill-gotcha 準拠・currentColor継承） */
.main.before-shipping.before-shipping .topbanner.fv-todo .fv-device{
  display: block; width: 56px; height: 90px; margin: 0 auto 14px; color: #9DB8E6;
}
.main.before-shipping.before-shipping .topbanner.fv-todo .fv-device svg{ width: 100%; height: 100%; display: block; fill: currentColor; }
.main.before-shipping.before-shipping .topbanner.fv-todo .fv-eyebrow{
  font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #9DB8E6; margin: 0 0 8px;
}
.main.before-shipping.before-shipping .topbanner.fv-todo .fv-headline{
  font-size: 22px; font-weight: 700; color: #fff; line-height: 1.4; margin: 0 0 12px;
}
.main.before-shipping.before-shipping .topbanner.fv-todo .fv-headline strong{ color: #9DB8E6; }
.main.before-shipping.before-shipping .topbanner.fv-todo .fv-sub{
  font-size: 13px; color: #F1EFE8; line-height: 1.6; margin: 0 0 12px;
}
.main.before-shipping.before-shipping .topbanner.fv-todo .fv-sub strong{ color: #9DB8E6; font-weight: 700; }
.main.before-shipping.before-shipping .topbanner.fv-todo .fv-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px; }
.main.before-shipping.before-shipping .topbanner.fv-todo .fv-chips span{
  font-size:11px; font-weight:600; color:#F1EFE8; background:rgba(255,255,255,.08);
  border:1px solid rgba(157,184,230,.40); border-radius:999px; padding:5px 11px; line-height:1.4;
}
.main.before-shipping.before-shipping .topbanner.fv-todo .fv-cta{
  display: flex; flex-direction: column; gap: 10px; align-items: center; margin-bottom: 16px;
}
/* .fv-todo-note は撤去（可視 dev注記削除・自立紺ヒーロー化）＝死にCSS掃除（code-review Minor）。 */
@media (min-width: 751px){
  .main.before-shipping.before-shipping .topbanner.fv-todo .fv-headline{ font-size: 26px; }
}

/* ============================================================
   [J-scroll] compare-table を theme scroll-hint 作法へ（J_structure/G_scrollHint 是正）
   ── 金型 aquos-reset:637-657（airpods 複製）を rescope。bespoke .compare-table は separation を影で担うため
      影/角丸は wrapper(.compare-table-scroll)側に持たせ、table 側は margin:0＋角丸のみ＝二重box化しない。
   ── head で scroll-hint.js＋new ScrollHint('.main.before-shipping .swipe-hint') を読む（is-scrollable 時のみヒント）。
      本頁の表は table-layout:fixed;width:100% で全幅に収まる＝実スクロールは発生しないが金型構造は必須（J-2）。
   ============================================================ */.main.before-shipping.before-shipping .compare-table-scroll{ margin-top:18px; }
/* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table-scroll *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table-scroll .cts-inner *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table-scroll .cts-inner::-webkit-scrollbar *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table-scroll .cts-inner::-webkit-scrollbar-track *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table-scroll .cts-inner::-webkit-scrollbar-thumb */.main.before-shipping.before-shipping .compare-table-scroll .compare-table{ margin:0; }
/* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table-scroll .compare-table */
@keyframes scroll-hint-appear{ 0%{ transform:translateX(40px); opacity:0; } 10%{ opacity:1; } 50%,100%{ transform:translateX(-40px); opacity:0; } }/* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table-scroll .scroll-hint-shadow-wrap */.main.before-shipping.before-shipping .compare-table-scroll .scroll-hint-icon-wrap{ width:100%; }
/* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table-scroll .scroll-hint-icon-wrap *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table-scroll .scroll-hint-icon-wrap.is-active .scroll-hint-icon *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table-scroll .scroll-hint-icon-wrap.is-active .scroll-hint-icon:before *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table-scroll .scroll-hint-icon-wrap.is-active .scroll-hint-icon:after */.main.before-shipping.before-shipping .compare-table-scroll .scroll-hint-icon{ width:120px; }
/* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table-scroll .scroll-hint-icon */.main.before-shipping.before-shipping .compare-table-scroll .scroll-hint-icon .scroll-hint-text{ margin-top:5px; }
/* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table-scroll .scroll-hint-icon .scroll-hint-text */.main.before-shipping.before-shipping .compare-table-scroll .scroll-hint-icon:before{ width:28px; }
/* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table-scroll .scroll-hint-icon:before */.main.before-shipping.before-shipping .compare-table-scroll .scroll-hint-icon:after{ width:34px; }
/* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table-scroll .scroll-hint-icon:after */
@media (min-width:751px){
  .main.before-shipping.before-shipping .compare-table-scroll .compare-table{ min-width:0; width:100%; }/* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table-scroll .scroll-hint-icon-wrap */
}

/* ============================================================
   [G-pc] PC本文拡大（@media min-width:751px・store で確立）
   ── テーマは本文を PC で ~15px に拡大する設計（body clamp style.css:1130）。bespoke 本文/lead/表セルは
      SP値をメディア外固定にすると PC据置＝本文が12px↔15.45px(.line-content)で割れ＋間延び（harness D「PC本文未拡大」）。
   ── SP390/375 は各base（12/13・th13/td12）不変＝PC(≥751)のみ拡大（computed 裏取り必須）。
   ============================================================ */
@media (min-width:751px){
  /* 本文/lead/body → 15（SPルールと同じ節スコープ＝specificity一致で @media が後勝ち。unscoped だと SP(.why .lead-why)に負けPC据置） */
  .main.before-shipping.before-shipping .why .lead-why,
  .main.before-shipping.before-shipping .why .worry-lead,
  .main.before-shipping.before-shipping .flow .quick-lead,
  .main.before-shipping.before-shipping .reason .reason-lead,
  .main.before-shipping.before-shipping .quickref .quick-lead,
  .main.before-shipping.before-shipping .checklist .check-lead,
  .main.before-shipping.before-shipping .checklist .check-body,
  .main.before-shipping.before-shipping .trouble .trouble-lead,
  .main.before-shipping.before-shipping .trouble .trouble-body,
  .main.before-shipping.before-shipping .erasure .erasure-lead,
  .main.before-shipping.before-shipping .erasure .erasure-body,
  .main.before-shipping.before-shipping .broken .broken-lead,
  .main.before-shipping.before-shipping .broken .broken-body,
  .main.before-shipping.before-shipping .caution .caution-lead,
  .main.before-shipping.before-shipping .caution .caution-body,
  .main.before-shipping.before-shipping .voice .voice-lead,
  .main.before-shipping.before-shipping .related .rel-lead,
  .main.before-shipping.before-shipping .dd,
  .main.before-shipping.before-shipping .sub-steps dd,
  .main.before-shipping.before-shipping .point .pd,
  .main.before-shipping.before-shipping .reason .pi .px .pd,
  .main.before-shipping.before-shipping .qa-item-body{ font-size:15px; }
  /* カードタイトル → 16 */
  .main.before-shipping.before-shipping .dt,
  .main.before-shipping.before-shipping .point .pt,
  .main.before-shipping.before-shipping .simple3 .s .t,
  .main.before-shipping.before-shipping .reason .pi .px b{ font-size:16px; }
  /* 表 → th15/td14 *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table th *//* 2026-08-27 canon へ委譲（build/_shared/components.css が唯一の実体）: .main.before-shipping .compare-table td */
  /* 補足 → 13 */
  .main.before-shipping.before-shipping .note,
  .main.before-shipping.before-shipping .dd .micro,
  .main.before-shipping.before-shipping .di > .micro,
  .main.before-shipping.before-shipping .connection .cta-fine,
  .main.before-shipping.before-shipping .simple3 .s .d{ font-size:13px; }/* 2026-08-28 ledger#73 修復: 閉じルール（connection-note 複製）撤去で宙に浮いたセレクタ列を独立させた */
  /* trust-micro（caption）→ 14（kaitoriten trust と同） */
  .main.before-shipping.before-shipping .trust .trust-micro{ font-size:14px; }
  /* why 吹き出し（gold aquos-reset:598/627 verbatim）→ 本文.wi15・board-head20（PC専用・log-regression F-1/F-2 是正＝ledger#33 backstop 捕捉。SP不変=13/17） */
  .main.before-shipping.before-shipping .why .worry-board .wi{ font-size:15px; }
  .main.before-shipping.before-shipping .why .worry-board .board-head{ font-size:20px; }
}
/* 2026-08-30 台帳#82: 本文 line-height を 1.7 → 1.6 へ（テーマ既定 style.css:71 `font:...14px/1.6`）。
   原典に line-height:1.7 は2箇所しか無く、本文系は `.reason .reason-point .point-list .point p{font-size:15px;line-height:1.7}`(6633-6635) のみ＝それ以外は典拠なしのドリフト。
   金型は本文が例外ゼロで 1.6（ipad 59/59・aquos 68/68・apple-machine 78/78 実測）。`.point .pd` も金型4本は 1.6。 */

/* ============================================================
   [R2] 2026-08-31 design-quality-critic r1（66.0点）への対応で追加した部品
   ── いずれも「同genre の DONE 姉妹／テーマ原典」から値を写経したもので、新色・新角丸・新フォントは持ち込んでいない。
   ── build/_shared/components.css は 1バイトも触っていない（reset系9ページ・凍結中の ipad-reset のゲート成果物を stale 化させないため）。
   ============================================================ */

/* [R2-1] .sub-steps — 段落中にインラインで埋まっていた列挙を「行」に割るための番号付き行カード（手1）。
   器の値の出典（verbatim）: build/beginners-guide/extra.css:399-403 の .imei-list
     （grid gap:10px ／ 行 = #fff・1px solid #C8D4E4・radius 5px・padding 13px 14px ／ 番号円 24px・navy・12px/700）。
   行内の並び（番号バッジ＋本文の flex 行）は build/galaxy-reset/extra.css:563-567 の .op に接地。
   置き場所は .di（var(--color10)）の中＝白カード on 色地で §2.6（埋もれ禁止）を満たす。 */
.main.before-shipping.before-shipping .sub-steps{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px; }
.main.before-shipping.before-shipping .sub-steps dl{ display:flex; align-items:flex-start; gap:9px; margin:0; background:#fff; border:1px solid var(--color7); border-radius:5px; padding:13px 14px; }
.main.before-shipping.before-shipping .sub-steps dt{ flex:0 0 auto; margin:0; }
.main.before-shipping.before-shipping .sub-steps .ss-n{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--color9); color:#fff; font-size:12px; font-weight:700; line-height:1; }
/* 2026-08-31 r3 手1（critic r2 D1・台帳#33「PCタイポの死に宣言」の再発）:
   ここに font-size:12px を素で書いていたため、上の [G-pc] ブロック（:623 `@media(min-width:751px){… .sub-steps dd{font-size:15px}}`）と
   **同一詳細度(0,3,1)でソース順が後ろ**＝PC でも 12px が勝ち、宣言はあるのに効いていなかった（computed @751/768/1024/1280 とも 12px）。
   SP スコープ（max-width:750px）へ移して PC の 15px を生かす。SP は 12px のまま不変（golden §5 カード本文 SP12/PC15）。 */
.main.before-shipping.before-shipping .sub-steps dd{ flex:1 1 auto; min-width:0; margin:0; line-height:1.6; color:#333; }
@media (max-width:750px){
  .main.before-shipping.before-shipping .sub-steps dd{ font-size:12px; }
}
.main.before-shipping.before-shipping .sub-steps dd strong, .main.before-shipping.before-shipping .sub-steps dd b{ color:var(--color9); font-weight:700; }
.main.before-shipping.before-shipping .sub-steps dd a{ color:var(--color9); font-weight:bold; text-decoration:underline; }

/* [R2-1b] .dd の外へ出した補足行（旧 .dd > span.micro）。値は上の .dd .micro と同一。 */
.main.before-shipping.before-shipping .di > .micro{ display:block; margin:8px 0 0; font-size:11px; line-height:1.6; color:var(--color13); }
.main.before-shipping.before-shipping .di > .micro a{ color:var(--color9); font-weight:bold; text-decoration:underline; }

/* [R2-2] 判定記号（○/△/×）の色分け（手5-A）。出典= build/kaitoriten-erabikata/extra.css:534-538（.jm/.jm-ok/.jm-mid/.jm-bad）。
   ◯=#16AEB1（theme-golden-values.md §9「可否の◯判定マーク」の公認拡張色）／△=var(--color13)（同 canon の muted）／
   ×=#E94F4F（同 §9 コーラル＝「不可」の1意味）。マークだけ色を付け本文は据置＝kaitoriten と同じ作法。 */
.main.before-shipping.before-shipping .jm{ font-weight:700; }
.main.before-shipping.before-shipping .jm-ok{ color:#16AEB1; }
.main.before-shipping.before-shipping .jm-mid{ color:var(--color13); }
.main.before-shipping.before-shipping .jm-bad{ color:#E94F4F; }

/* [R2-3] 実写真の器 .photo-band（手2）。値の出典（verbatim）: build/apple-machine/extra.css:448-450
   （＝ipad-reset:940-946／galaxy-reset:737-744 と同値。21:9・var(--color7) 罫・rgba(34,73,149,.08) オーバーレイ）。
   ledger#88: 実写の器の canon は .photo-band（9ページで使用中）。撤去済みの .ipr-photo/.ph-cap/.hs-photo-card は復活させない。
   ※ .photo-band は _shared に無く9ページに複製されている（canon 負債として台帳#88 に記録済み）。_shared へ移すと
     DONE 9ページのゲート成果物が一斉に stale 失効するため、r2 ではページ scope の写経に留める。 */
/* 2026-08-31 _shared 昇格: position/border/border-radius/overflow は _shared（photo-band canon）へ移動 */
.main.before-shipping.before-shipping .photo-band{ margin:20px 0 0; aspect-ratio:21/9; }
/* 2026-08-31 _shared 昇格: .main.before-shipping .photo-band:after { content; position; inset; background; pointer-events } は build/_shared/components.css（photo-band canon）へ移動＝ここでは複製しない */
/* 2026-08-31 _shared 昇格: width/display は _shared（photo-band canon）へ移動 */
.main.before-shipping.before-shipping .photo-band img{ height:100%; object-fit:cover; object-position:center; }
/* [R3] 2026-08-31 r3 手2（critic r2 D3）: #broken の素材を flow-step3.jpg(350x281) → flow-store-pic.jpg(**735x266**) へ差替。
   素材が 2.76:1 の横長なので cover の切り取りは横方向のみ＝object-position の縦指定は不要（旧 `center 38%` は 350x281 素材専用だったので撤去）。 */
@media (min-width:751px){
  .main.before-shipping.before-shipping .photo-band{ max-width:760px; margin-left:auto; margin-right:auto; }/* apple-machine/extra.css:769 と同作法＝PC で帯を 760px に制限し拡大率を抑える */
  /* [R3] #broken だけ 735px 上限＝素材の実解像度（735px）に合わせて **拡大率を 1.00 以下**にする（旧: 758px 描画で 2.17倍アップスケール＝ボケ）。
     金型 galaxy の .photo-band は 960x270 素材を 758px に縮小して使う＝「素材幅 ≥ 描画幅」が canon。本ページは素材幅が 735px なので上限側を合わせる。 */
  .main.before-shipping.before-shipping .broken .photo-band{ max-width:735px; }
}

/* [R2-4] #flow の工程実写（手2）。テーマ実部品 .flow .flow-step（style.css:5945-6001／SP :6415-6447）を素で使う。
   theme は4列(25%)設計＝本節は3ステップなので PC のみ 33.333% へ（写経元 build/kaitoriten-erabikata/extra.css:562-566）。
   .ttl は theme clamp(16-18px) → 本ページ golden のカードタイトル tier（SP15 / PC16）へ pin。本文は theme の SP12/PC13-15＝golden 一致で据置。 */
.main.before-shipping.before-shipping .flow .flow-step .step-block .ttl{ font-size:15px; }
@media (min-width:751px){
  .main.before-shipping.before-shipping .flow .flow-step .step-block{ width:calc(33.333% - 20px); }
  .main.before-shipping.before-shipping .flow .flow-step .step-block .ttl{ font-size:16px; }
}

/* [R2-5] FAQ の長い回答を2ブロックに割ったときの連結（手1）。theme .qa-item-body は白箱なので、素直に2枚置くと箱が2つに見える。
   上箱の下 padding と下側角丸／下箱の上 margin を落として「1枚の白箱の中の段落の間」に見せる（間隔は下箱の padding-top が作る）。
   値の接地: style.css:7250-7256（PC padding 15px 20px・margin-top 15px）／:7318-7322（SP padding 10px・margin-top 12px）。
   theme function.js:169 は $(this).siblings('.qa-item-body').slideToggle() ＝2枚とも同時に開閉する。 */
.main.before-shipping.before-shipping .faq .qa-item-body.qa-a{ padding-bottom:0; border-radius:5px 5px 0 0; }
.main.before-shipping.before-shipping .faq .qa-item-body.qa-b{ margin-top:0; border-radius:0 0 5px 5px; }

/* [R2-6] 締めCTA の細字フッター行（申込導線＋古物商許可番号）。221字の note を本文と細字に分けたときの受け皿（手1）。
   _shared/components.css:69 の .connection-note から「箱（背景/罫/padding）」だけ外した派生＝max-width 600 / 11px / line-height 1.6 / color #14355D は同値。 */
.main.before-shipping.before-shipping .connection .cta-fine{ max-width:600px; margin:10px auto 0; font-size:11px; line-height:1.6; color:#14355D; font-weight:500; text-align:left; }
.main.before-shipping.before-shipping .connection .cta-fine a{ color:var(--color9); font-weight:bold; text-decoration:underline; }

/* [R2-7] 新規部品の PC 拡大（@media 外の SP 値が後勝ちしないよう、ファイル末尾で上書き）。
   .micro / .cta-fine は「補足」ロール＝golden PC 13px（既存 .dd .micro と同値）。 */
@media (min-width:751px){
  .main.before-shipping.before-shipping .di > .micro,
  .main.before-shipping.before-shipping .connection .cta-fine{ font-size:13px; }
}

/* [R2-8] FAQ タブのラベルを単一 flex item に包む（ledger#77 (b) の処方＝.dt-t 作法）。
   theme の .faq-menu-title は display:flex + justify-content:space-between（style.css:7158-7169）なので、
   ラベル内に置いた <span class="nowrap"> がそのまま別 flex item になり、space-between で右へ引き離される
   （本ラウンドで実際に発生。harness の #77 検出器は「column-gap>0」条件のため column-gap:normal のこの型を拾えない＝台帳へ回した）。 */
.main.before-shipping.before-shipping .faq .faq-menu-title .fmt-t{ flex:1 1 auto; min-width:0; }


/* ==== WP統合(port_page.py 自動追加) ==== */
.main.before-shipping{ background:#fff; }
/* 自前FVがあるためテーマ自動FV(page-bg)とタイトル帯(.pages)を隠す。無スコープだが mu-plugin の is_page() ゲートでこのページのみ読込 */
.page-bg.bg-photo, .pages{ display:none !important; }