/* ============================================================
   article.css ?v=col06  ── column 記事テンプレCSS（全 SEO記事で使い回す）
   col03: x-buzz の UI構造のみ参照し「縦TOC・節ごと図解スロット(hero含む)・✓×2カラム・
          コールアウト注意バリアント」を追加。色/フォント/サイズはテーマ golden に完全準拠（新色なし）。
   col04: (A) 実画像フィギュア .fig-img を追加（Adobe Stock 写真＝必ず横長バナー: width100%＋
          aspect-ratio 16:9 / hero 3:2 ＋object-fit cover＋max-height で縦長化を禁止。角丸5px・控えめglow）。
          (B) 見出しの階層を明確化＝h2(.line-title)は連番＋全幅下罫の「章の顔」据置／h3(.line-btitle)は
          テーマの下線(border-bottom＋二重下線::after)をやめ navy 縦バー(border-left 4px)へ刷新（番号なし・16px）。
          色/サイズはテーマトークン・golden のまま（新色なし）。
   col06: 最終仕上げ（iphone-oto-denai 承認後の抑制的磨き・大改造はしない）。
          (A) CTA泣り別れ対策＝主CTAボタン white-space:nowrap で1行固定／connection-title・sub は theme .nowrap で
              意味単位を保持し mid-word break・1字孤立を解消（text-wrap:balance / auto-phrase は不使用＝§G）。
          (B) 目次を <details>/<summary> アコーディオン化（JSなし・open既定・chevron は navy currentColor 線SVG）。
          (C) 図解プレースホルダ(.fig-ph)を上品化＝枠を細い淡色(color7)点線＋小ぶりな図解チップ/アイコンへ（工事中感を抑制）。
          (D) 要所のみ(#diag/#summary)に淡色(color10)フローティング帯 .is-tint で図地変化（全節はやらない・色面padding/白節margin準拠・色↔白は線なし）。
          (E) コールアウト種別を控えめに差別化（procedure=navy / tip=color3 / warn=coral・ラベル帯の色のみ）。
   namespace: .main.column （各記事 <main class="main column <slug>">）
   方針: テーマ css/style.css（line-title/line-btitle/line-content/qa-item/connection/
         board/button/faq-menu）を流用し、記事固有UI（記事ヘッダー/E-E-A-Tバー/
         リードコールアウト/症状ジャンプ/図解枠/比較表/note/コールアウト/比較オプション/
         引用/関連/監修フッター）だけをここに隔離する。
   トークン（theme-golden-values.md / style.css :root 1082-1094）のみ:
     --color3 #527694 / --color4 #14355D / --color7 #C8D4E4 / --color9 #224995 /
     --color10 #EBF0F6 / --color11 #7994AA / --color13 #5A7386 / --border #F1F8FF
   寸法はテーマSP実効値: 本文12px(line-content 3710) / h2=17 / h3=16 / note=11 /
     角丸5px(箱)・999px(ピル) / 影=glow 0 0 Npx rgba(18,77,137,.2) / 節間 .part margin30。
   PC（min-width:751px）は memory pc-typography に従い本文12→15・カードタイトル16・補足/表13-15へ拡大。
   独自色/独自角丸/汎用影/別フォント/.wf ワイヤーCSS は持ち込まない。
   ============================================================ */

/* ---- 0. 本文の基礎（強調=color9太字・下線なし / 文中リンク=color9・通常太さ・下線あり・矢印なし）
   強調とリンクが同色で紛らわしい問題を、太さ(強調700/リンク通常)＋下線(リンクのみ)で区別。文中リンクの疑似矢印は撤去。 ---- */
.main.column .line-content strong,
.main.column.column p strong,
.main.column.column .a-ul strong,
.main.column.column .a-ol strong,
.main.column.column .line-content b,
.main.column.column p b{ color:var(--color9); font-weight:700; text-decoration:none; }
.main.column.column .line-content a,
.main.column.column p a,
.main.column.column .a-ul a,
.main.column.column .a-ol a,
.main.column.column .qbox a,
.main.column.column .note a{ color:var(--color9); font-weight:400; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.main.column.column .line-content a strong,
.main.column.column p a strong{ font-weight:400; }
/* 文中リンクの疑似矢印(›)は撤去（ユーザー指示）。CTAボタン/カードの矢印は .button/.item-btn 側で別途保持。 */
/* 泣き別れ抑制はテーマ準拠（break-word のみ）。auto-phrase/balance は使わない（design-fundamentals §G） */
.main.column .part p,
.main.column.column .a-ul li,
.main.column.column .a-ol li,
.main.column.column .article-lead{ overflow-wrap:break-word; word-break:normal; }
/* ---- 0b. 見出し刷新（番号なし・h2とh3を「サイズ＋装飾」で明確に区別） ----
   テーマ .line-title 帯（bg=color4塗り/白字/span左罫）を .main.column 限定で上書き。番号は付けない。
   h2＝大きめ(SP20/PC24)・濃紺・全幅下罫＋左の太い navy アクセント罫（横）。
   h3＝小さめ(SP15/PC16)・左 navy 縦バー（下罫なし）。→ 大小＋横罫/縦バーで一目で階層が違う。
   色はトークン(color4/color7/color9)のみ・本文地は白。 */
/* fix1（2026-09-14・統括 68「固定ページの金型値へ寄せる」）: h2 の独自上書き（下罫型・SP20/PC24）を撤去し、
   テーマ原典の .line-title 帯（color4 塗り・白字・SP17px・span 左罫 #8DB0D0＝theme-golden-values §3）に戻す。
   白節どうしの境目は濃紺 h2 帯が自己区切りする（spacing-divider-craft-rules L36＝白×白は原則線なし）。 */
/* h3 ＝ 左の navy 縦バー型（下罫なし・番号なし・SP15/PC16）。
   h2(大20・全幅下罫＋横アクセント) と h3(小15・左縦バー) で、サイズも装飾も明確に違う。色はトークンのみ。 */
.main.column .line-btitle{
  border-bottom:none; border-radius:0;
  padding:1px 0 1px 11px; border-left:4px solid var(--color9);
  color:var(--color4); font-size:16px; font-weight:700; line-height:1.45;
}
.main.column.column .line-btitle::after{ content:none; display:none; }

/* ---- 1. 記事ヘッダー（カテゴリ eyebrow ＋ h1 ＋ E-E-A-Tバー ＋ リードコールアウト） ---- */
.main.column .article-head{ margin:24px auto 0; }
.main.column.column .article-cat{ font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--color9); margin:0 0 10px; display:flex; align-items:center; gap:7px; }
.main.column.column .article-cat:before{ content:""; width:18px; height:2px; background:var(--color9); display:inline-block; border-radius:2px; }
.main.column.column .article-title{ font-size:22px; font-weight:700; color:var(--color4); line-height:1.4; margin:0; }
.main.column.column .article-meta{ display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; margin:14px 0 0; padding:11px 14px; background:var(--color10); border-radius:5px; }
.main.column.column .article-meta .am-item{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:var(--color13); line-height:1.4; }
.main.column.column .article-meta .am-item .am-ic{ flex:0 0 16px; width:16px; height:16px; }
.main.column.column .article-meta .am-item .am-ic svg{ width:100%; height:100%; display:block; }
.main.column.column .article-meta .am-item b{ color:var(--color9); font-weight:700; }
/* リードコールアウト（結論先出しの要約・color10地＋navy左罫） */
.main.column .article-lead{ position:relative; margin:18px 0 0; background:var(--color10); border-left:4px solid var(--color9); border-radius:5px; padding:16px 16px 16px 18px; }
.main.column.column .article-lead p{ font-size:12px; line-height:1.8; color:#333; margin:0; }
.main.column.column .article-lead p + p{ margin-top:10px; }
.main.column.column .article-lead strong{ color:var(--color9); font-weight:700; }

/* ---- 2. 本文の汎用リスト（箇条書き / 手順番号） ---- */
.main.column .a-ul{ list-style:none; margin:18px 0 0; padding:0; }
.main.column.column .a-ul li{ position:relative; padding:0 0 0 20px; font-size:12px; line-height:1.6; color:#333; }
.main.column.column .a-ul li + li{ margin-top:9px; }
.main.column.column .a-ul li:before{ content:""; position:absolute; left:3px; top:.62em; width:7px; height:7px; border-radius:2px; background:var(--color9); }
.main.column.column .a-ol{ list-style:none; margin:18px 0 0; padding:0; counter-reset:aol; }
.main.column.column .a-ol > li{ position:relative; padding:2px 0 0 38px; font-size:12px; line-height:1.6; color:#333; min-height:26px; }
.main.column.column .a-ol > li + li{ margin-top:13px; }
.main.column.column .a-ol > li:before{ counter-increment:aol; content:counter(aol); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; background:var(--color9); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1; }
/* fix1: 明地の強調は color9 一色（完了ゲート V-1・harness I_craft 強調色） */
.main.column .a-ol > li b{ color:var(--color9); font-weight:700; }
.main.column.column .a-ul li b{ color:var(--color9); font-weight:700; }

/* ---- 3. 症状別クイック診断（タップでページ内ジャンプするカードUI） ---- */
.main.column .sym-grid{ display:grid; grid-template-columns:1fr; gap:10px; margin:18px 0 0; }
.main.column.column .sym-card{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--color7); border-radius:5px; padding:13px 14px; text-decoration:none; box-shadow:0 0 5px rgba(18,77,137,.12); }
.main.column.column .sym-card .sym-ic{ flex:0 0 38px; width:38px; height:38px; border-radius:50%; background:var(--color10); display:flex; align-items:center; justify-content:center; }
.main.column.column .sym-card .sym-ic svg{ width:21px; height:21px; display:block; }
.main.column.column .sym-card .sym-tx{ min-width:0; flex:1; }
.main.column.column .sym-card .sym-q{ display:block; font-size:13px; font-weight:700; color:var(--color4); line-height:1.45; }
.main.column.column .sym-card .sym-a{ display:block; font-size:11px; color:var(--color13); line-height:1.5; margin-top:2px; }
.main.column.column .sym-card .sym-go{ flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:#fff url(../images/column/theme/icon/select.svg) center/10px auto no-repeat; border:1px solid var(--color7); transform:rotate(-90deg); }

/* ---- 4. 図解プレースホルダ枠（後日 Adobe 画像差替）── 上品化（col06）:
   工事中感を抑え「これから図解が入る控えめな枠」に。淡色(color10)地＋細い淡色(color7)点線＋
   小ぶりな図解チップ（白地navy字の outline）＋小さめアイコン＋キャプション。数が多いので煩く見せない。 ---- */
.main.column .fig-ph{ margin:20px 0 0; border:1px dashed var(--color7); border-radius:5px; background:var(--color10); padding:14px 16px 16px; text-align:center; }
.main.column.column .fig-ph .fig-badge{ display:inline-flex; align-items:center; gap:5px; background:#fff; color:var(--color9); border:1px solid var(--color7); font-size:10px; font-weight:700; border-radius:999px; padding:2px 10px; letter-spacing:.06em; }
.main.column.column .fig-ph .fig-badge svg{ width:11px; height:11px; display:block; }
/* HTML 側 badge アイコンは stroke/fill="#fff" 焼き込み → 白地チップ用に CSS で navy へ上書き */
.main.column .fig-ph .fig-badge svg rect,
.main.column.column .fig-ph .fig-badge svg path{ stroke:var(--color9); }
.main.column.column .fig-ph .fig-badge svg circle{ fill:var(--color9); }
.main.column.column .fig-ph .fig-frame{ margin:10px auto 0; max-width:240px; aspect-ratio:16/9; border:1px solid var(--color7); border-radius:5px; background:#fff; display:flex; align-items:center; justify-content:center; }
.main.column.column .fig-ph .fig-frame svg{ width:40px; height:40px; display:block; opacity:.7; }
.main.column.column .fig-ph .fig-desc{ font-size:11px; color:var(--color13); line-height:1.6; margin:9px 0 0; }

/* ===== 図解コンポーネント（完成図・HTML/CSS・実テキストで可読・レスポンシブ／.fig-ph の差込予定枠を置換） ===== */
.main.column figure.fig-dia{ margin:20px 0 0; }
.main.column.column .fig-dia .fig-badge{ display:inline-flex; align-items:center; gap:5px; background:#fff; color:var(--color9); border:1px solid var(--color7); font-size:10px; font-weight:700; border-radius:999px; padding:2px 10px; letter-spacing:.06em; }
.main.column.column .fig-dia .fig-badge svg{ width:11px; height:11px; display:block; }
.main.column.column .fig-dia .fig-badge svg rect, .main.column.column .fig-dia .fig-badge svg path{ stroke:var(--color9); }
.main.column.column .fig-dia .fig-badge svg circle{ fill:var(--color9); }
.main.column.column .fig-dia .dia-box{ margin:10px 0 0; border:1px solid var(--color7); border-radius:8px; background:#fff; padding:15px 13px; box-shadow:0 0 6px rgba(18,77,137,.08); }
.main.column.column .fig-dia .fig-desc{ font-size:11px; color:var(--color13); line-height:1.6; margin:9px 0 0; }
.main.column.column .fig-dia .dia-ttl{ font-size:13px; font-weight:700; color:var(--color4); text-align:center; margin:0 0 11px; }
/* 縦フロー（手順・分岐の連鎖） */
.main.column .dia-flow{ display:flex; flex-direction:column; align-items:stretch; gap:0; }
.main.column.column .dia-step{ background:var(--color10); border:1px solid var(--color7); border-radius:6px; padding:9px 12px; font-size:13px; line-height:1.5; color:var(--color4); }
.main.column.column .dia-step b{ color:var(--color9); font-weight:700; }
.main.column.column .dia-step .s-sub{ display:block; font-size:11px; color:var(--color13); margin-top:2px; }
.main.column.column .dia-step.is-key{ background:var(--color9); border-color:var(--color9); color:#fff; }
.main.column.column .dia-step.is-key b, .main.column.column .dia-step.is-key .s-sub{ color:#fff; }
.main.column.column .dia-arw{ align-self:center; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:7px solid var(--color11); margin:6px 0; }
/* 比較カラム（2〜3択・条件→結論） */
.main.column .dia-cols{ display:grid; grid-template-columns:1fr; gap:10px; }
@media(min-width:600px){ .main.column.column .dia-cols{ grid-template-columns:repeat(3,1fr); } .main.column.column .dia-cols.is-2{ grid-template-columns:repeat(2,1fr); } }
.main.column.column .dia-col{ display:flex; flex-direction:column; gap:6px; text-align:center; }
.main.column.column .dia-cond{ background:var(--color10); border:1px solid var(--color7); border-radius:6px; padding:9px 10px; font-size:12px; line-height:1.45; color:var(--color4); }
.main.column.column .dia-out{ background:var(--color9); color:#fff; border-radius:6px; padding:10px; font-size:14px; font-weight:700; line-height:1.4; }
.main.column.column .dia-out span{ display:block; font-size:11px; font-weight:400; opacity:.92; margin-top:3px; }
.main.column.column .dia-col .dia-arw{ margin:1px auto; }
/* アイコン凡例（ステータスバー等の一覧） */
.main.column .dia-legend{ display:grid; grid-template-columns:1fr; gap:8px; }
@media(min-width:600px){ .main.column.column .dia-legend{ grid-template-columns:1fr 1fr; } }
.main.column.column .dia-li{ display:flex; align-items:center; gap:10px; background:var(--color10); border:1px solid var(--color7); border-radius:6px; padding:8px 10px; font-size:12px; color:var(--color4); line-height:1.45; text-align:left; }
.main.column.column .dia-li .dia-ic{ flex:0 0 30px; width:30px; height:30px; border-radius:6px; background:#fff; border:1px solid var(--color7); display:flex; align-items:center; justify-content:center; color:var(--color9); font-weight:700; font-size:12px; }
.main.column.column .dia-li b{ color:var(--color9); font-weight:700; }
/* ヒーロー/アイキャッチ枠（タイトル直下・本文より大きく・全幅） */
.main.column .fig-ph.hero{ margin:18px 0 0; padding:18px 16px 20px; }
.main.column.column .fig-ph.hero .fig-frame{ max-width:none; width:100%; aspect-ratio:16/9; }
.main.column.column .fig-ph.hero .fig-frame svg{ width:54px; height:54px; }

/* ---- 4b. 実画像フィギュア（Adobe Stock 写真／★必ず横長バナー＝縦長厳禁） ----
   width:100% ＋ aspect-ratio（16:9・ヒーローは3:2）＋ object-fit:cover ＋ max-height で、
   モバイルでも縦に伸びない横長表示に固定。角丸5px・控えめ glow 影・中央寄せ。トークンのみ。 */
.main.column .fig-img{ margin:20px 0 0; text-align:center; }
.main.column.column .fig-img img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover; object-position:center 35%;
  max-height:210px; border-radius:5px;
  box-shadow:0 0 6px rgba(18,77,137,.16); background:var(--color10);
}
.main.column.column .fig-img.is-hero{ margin:18px 0 0; }
.main.column.column .fig-img.is-hero img{ aspect-ratio:3/2; max-height:230px; }
.main.column.column .fig-img .fig-cap{ font-size:11px; color:var(--color13); line-height:1.6; margin:8px 0 0; }

/* ---- 5. 比較表（テーマ compare-table 作法：th=navy白字 / td=zebra / th≧td） ---- */
.main.column .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); table-layout:fixed; }
.main.column.column .compare-table th{ background:var(--color9); color:#fff; font-weight:700; text-align:left; padding:10px 13px; line-height:1.5; font-size:13px; }
.main.column.column .compare-table th + th{ border-left:1px solid rgba(255,255,255,.25); }
.main.column.column .compare-table td{ padding:11px 13px; line-height:1.7; color:#333; font-size:12px; border-top:1px solid var(--border); vertical-align:top; }
.main.column.column .compare-table td + td{ border-left:1px solid var(--border); }
/* 多列(4列)比較表の狭セルで長い英字トークン(AppleCare+等)が overflow:hidden で切れないよう、必要時のみ折返す（短セルの2列表は不変） */
.main.column .compare-table th,
.main.column.column .compare-table td{ overflow-wrap:break-word; word-break:normal; }
.main.column.column .compare-table tr:nth-child(even) td{ background:var(--color10); }
/* fix1: 表は .compare-table-scroll > .cts-inner.swipe-hint で包む（components.css canon・theme scroll-hint）。包んだときは外箱が角丸・影を持つ */
.main.column .compare-table-scroll .compare-table{ margin:0; box-shadow:none; }
.main.column.column .compare-table td strong{ color:var(--color9); }

/* ---- 6. note（補足・メモ。テーマ準拠＝11px / color3 / 影なし。白地節=透明＋color7枠で可視化） ---- */
.main.column .note{ position:relative; margin:18px 0 0; background:transparent; border:1px solid var(--color7); border-radius:5px; padding:11px 13px 11px 40px; font-size:11px; line-height:1.6; color:var(--color3); }
.main.column.column .note .n-i{ position:absolute; left:11px; top:11px; width:20px; height:20px; background:#fff; border:1px solid var(--color7); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.main.column.column .note .n-i svg{ width:12px; height:12px; display:block; }
.main.column.column .note strong{ color:var(--color9); font-weight:700; }
/* 色地（color10）の節に置く note は白背景・枠なしで分離（埋もれ回避） */
.main.column .partbg-soft .note{ background:#fff; border:none; }

/* ---- 7. コールアウト（「まずこの順で」等の強調ボックス。color10地＋左上navyラベル帯） ---- */
.main.column .callout{ position:relative; background:var(--color10); border-radius:5px; padding:46px 16px 16px; margin:20px 0 0; overflow:hidden; }
.main.column.column .callout .co-tag{ position:absolute; left:0; top:0; background:var(--color9); color:#fff; font-size:14px; font-weight:700; border-bottom-right-radius:5px; padding:6px 16px; line-height:1.4; }
.main.column.column .callout p{ font-size:12px; line-height:1.8; color:#333; margin:0; }
.main.column.column .callout p strong{ color:var(--color9); }
/* 横並びの簡易フロー（4ステップ等・折返し可） */
.main.column .flow-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 4px; margin:0; }
.main.column.column .flow-chips .fc{ background:#fff; border:1px solid var(--color7); border-radius:999px; padding:6px 13px; font-size:12px; font-weight:700; color:var(--color4); line-height:1.3; box-shadow:0 0 5px rgba(18,77,137,.12); }
.main.column.column .flow-chips .fc-arrow{ width:13px; height:11px; flex:0 0 13px; color:var(--color9); }
.main.column.column .flow-chips .fc-arrow svg{ width:100%; height:100%; display:block; }

/* ---- 7b. テーマ connection（CTA）の記事内利用の微調整 ---- */
/* 中間CTA帯を本文から離す（テーマ .connection SP=padding0 のため margin で間隔） */
.main.column .cta-mid{ margin-top:24px; }
.main.column.column .callout .co-foot{ margin:12px 0 0; font-size:12px; line-height:1.8; color:#333; }
/* connection-title の左右矢印が2行折返しで広がるのを抑える（build/airpods-reset 既知fix流用） */
.main.column .connection .connection-title:before,
.main.column.column .connection .connection-title:after{ margin:2px 9px 0; width:15px; height:15px; }
/* col06: CTA見出し/サブの泣り別れ対策＝CJKの自動行分割を抑え(keep-all)、HTML側 <wbr> の意味単位だけで改行。
   .nowrap inline-block は flex item の折返しを壊し1行overflowになるため不可→keep-all+<wbr>（balance/auto-phrase不使用）。 */
.main.column .connection .connection-title,
.main.column.column .connection .connection-title-sub{ word-break:keep-all; overflow-wrap:break-word; }
/* CTA遷移ボタン（.item-btn > a.button.full）＝中央寄せ＋上余白（左寄せ/上詰まりの修正・ユーザー指摘）。
   col06: ラベルは原則1行＝white-space:nowrap で泣り別れ（矢印やラベル末尾の孤立行）を恒久的に防ぐ。
   矢印 i は theme .button i{margin-left} が間隔を持つため独自 gap は付けない（二重スペース回避）。 */
.main.column .connection .item-btn{ margin-top:20px; text-align:center; }
.main.column.column .connection .item-btn .button.full{ display:flex; align-items:center; justify-content:center; width:100%; max-width:420px; margin:0 auto; white-space:nowrap; }
/* connection-note（色地でない記事上の白注記＝info円バッジ＋小字。白地に白box埋もれ回避で枠線付与） */
.main.column .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; text-align:left; font-size:11px; line-height:1.6; color:var(--color3); font-weight:500; }
.main.column.column .connection .connection-note .cn-i{ position:absolute; left:13px; top:13px; width:20px; height:20px; }
.main.column.column .connection .connection-note .cn-i svg{ width:100%; height:100%; display:block; }
.main.column.column .connection .connection-note strong{ color:var(--color9); font-weight:700; }

/* ---- 8. 修理 vs 買取 の比較オプション（買取ブリッジ） ---- */
.main.column .opt-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin:18px 0 0; }
.main.column.column .opt{ background:#fff; border:1px solid var(--color7); border-radius:5px; padding:15px 15px 16px; box-shadow:0 0 6px rgba(18,77,137,.14); }
.main.column.column .opt .opt-h{ display:flex; align-items:center; gap:10px; padding-bottom:11px; border-bottom:2px solid var(--color10); }
.main.column.column .opt .opt-no{ flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:var(--color9); color:#fff; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1; }
.main.column.column .opt .opt-t{ font-size:15px; font-weight:700; color:var(--color4); line-height:1.4; }
.main.column.column .opt .opt-d{ font-size:12px; line-height:1.6; color:#333; margin:11px 0 0; }
.main.column.column .opt .opt-d strong{ color:var(--color9); }
.main.column.column .opt.opt-sell{ border-color:var(--color9); }
.main.column.column .opt.opt-sell .opt-h{ border-bottom-color:var(--color9); }

/* ---- 9. 引用/現場の声ボックス（淡色カード＋大きなネイビー引用符。買取現場の一次情報トーン・クリーン） ---- */
.main.column .qbox{ position:relative; background:var(--color10); border-left:4px solid var(--color9); border-radius:5px; padding:14px 16px 16px 18px; margin:18px 0 0; overflow:hidden; }
.main.column.column .qbox .q-label{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--color9); letter-spacing:.04em; margin:0 0 7px; }
.main.column.column .qbox .q-label .q-ic{ width:15px; height:15px; flex:0 0 15px; }
.main.column.column .qbox .q-label .q-ic svg{ width:100%; height:100%; display:block; }
.main.column.column .qbox .q-mark{ position:absolute; right:12px; top:-6px; font-size:62px; line-height:1; font-weight:800; color:var(--color9); opacity:.12; font-family:Georgia,"Times New Roman",serif; pointer-events:none; }
.main.column.column .qbox p{ position:relative; font-size:12px; line-height:1.8; margin:0; color:#333; }
.main.column.column .qbox p strong{ color:var(--color9); font-weight:700; }
.main.column.column .qbox a{ color:var(--color9); }

/* ---- 10. 関連ページ（テーマ board / related-links 語彙） ---- */
.main.column .related-links{ list-style:none; margin:0; padding:0; }
.main.column.column .related-links li{ border-bottom:1px dashed var(--color7); }
.main.column.column .related-links li:last-child{ border-bottom:none; }
.main.column.column .related-links a{ display:block; padding:13px 40px 13px 4px; text-decoration:none; position:relative; }
.main.column.column .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/column/theme/icon/select.svg) center/10px auto no-repeat; }
.main.column.column .related-links a b{ display:block; color:var(--color9); font-size:14px; font-weight:700; line-height:1.5; }
.main.column.column .related-links a span{ display:block; color:#333; font-size:12px; line-height:1.6; margin-top:3px; }
.main.column.column .related .line-btitle{ margin-top:20px; }
.main.column.column .related .board{ padding:6px 16px; margin-top:14px; }
/* ---- 11. まとめ（要点リスト） ---- */
.main.column .summary-points{ list-style:none; margin:18px 0 0; padding:16px; background:var(--color10); border-radius:5px; }
.main.column.column .summary-points li{ position:relative; padding:0 0 0 26px; font-size:12px; line-height:1.6; color:#333; }
.main.column.column .summary-points li + li{ margin-top:10px; }
.main.column.column .summary-points li:before{ content:""; position:absolute; left:0; top:.2em; width:18px; height:18px; border-radius:50%; background:var(--color9) url(../images/column/theme/icon/select.svg) center/9px auto no-repeat; }
.main.column.column .summary-points li b{ color:var(--color9); font-weight:700; }

/* ---- 12. 監修・E-E-A-T フッターボックス ---- */
.main.column .author-box{ display:flex; gap:13px; align-items:flex-start; background:var(--color10); border-radius:5px; padding:15px 16px; margin:18px 0 0; }
.main.column.column .author-box .au-ic{ flex:0 0 42px; width:42px; height:42px; border-radius:50%; background:var(--color9); display:flex; align-items:center; justify-content:center; }
.main.column.column .author-box .au-ic svg{ width:24px; height:24px; display:block; }
.main.column.column .author-box .au-tx{ min-width:0; }
.main.column.column .author-box .au-role{ font-size:11px; font-weight:700; color:var(--color9); margin:0; }
.main.column.column .author-box .au-name{ font-size:14px; font-weight:700; color:var(--color4); margin:2px 0 0; }
.main.column.column .author-box .au-note{ font-size:11px; color:var(--color13); line-height:1.6; margin:7px 0 0; }

/* ---- 13. セクション内の見出し下リード・h3 余白（階層差: h2は .part margin30で上を厚め／h3はやや詰める） ---- */
.main.column .part .line-btitle{ margin-top:20px; }
.main.column.column .part .line-btitle:first-child{ margin-top:0; }

/* ---- 14. 目次（縦TOC・x-buzz の UI構造を参照＝控えめボックス。色/サイズはテーマトークン・golden値） ----
   既存 topnav（横スワイプ）は残し、リード直下に「h2連番＋h3階層」の縦目次を追加。
   見出しと同じ decimal-leading-zero 連番（toc カウンタ）。地=color10／罫=color7／リンク=color9。
   font: 親リンク13(nav/リスト見出しレベル)→PC15・子リンク12(本文)→PC14。新色・別フォントは持ち込まない。 */
.main.column .toc{ background:var(--color10); border:1px solid var(--color7); border-radius:5px; padding:15px 16px 16px; }
/* col06: 目次を <details>/<summary> でアコーディオン化（JSなし）。summary=toc-head。
   見出し帯は閉じている間は罫線なしの素のタップ行／開いている間だけ下罫＋余白で本文と分離。
   font-size 等は .toc .toc-head（type限定なし）に置き、PC媒体クエリの上書き(15px)が効くようにする。 */
.main.column .toc .toc-head{ display:flex; align-items:center; gap:8px; margin:0; padding:0; font-size:13px; font-weight:700; color:var(--color4); line-height:1.4; cursor:pointer; list-style:none; }
.main.column.column .toc summary.toc-head::-webkit-details-marker{ display:none; }
.main.column.column .toc summary.toc-head::marker{ content:""; }
.main.column.column .toc-acc[open] .toc-head{ margin-bottom:11px; padding-bottom:10px; border-bottom:1px solid var(--color7); }
.main.column.column .toc .toc-head .toc-head-tx{ flex:1 1 auto; }
.main.column.column .toc .toc-head .toc-chev{ flex:0 0 16px; width:16px; height:16px; color:var(--color9); transition:transform .25s ease; }
.main.column.column .toc .toc-head .toc-chev svg{ width:100%; height:100%; display:block; }
.main.column.column .toc-acc[open] .toc-head .toc-chev{ transform:rotate(180deg); }
.main.column.column .toc .toc-head .toc-ic{ flex:0 0 16px; width:16px; height:16px; }
.main.column.column .toc .toc-head .toc-ic svg{ width:100%; height:100%; display:block; }
.main.column.column .toc-list{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.main.column.column .toc-list > li{ counter-increment:toc; }
.main.column.column .toc-list > li + li{ margin-top:3px; }
.main.column.column .toc-list > li > a{ display:flex; gap:9px; align-items:baseline; padding:6px 2px; text-decoration:none; font-size:13px; font-weight:700; color:var(--color9); line-height:1.5; }
.main.column.column .toc-list > li > a::before{ content:""; flex:0 0 auto; align-self:center; width:6px; height:6px; border-radius:2px; background:var(--color9); opacity:.85; }
.main.column.column .toc-list > li > a > span{ flex:1 1 auto; }
.main.column.column .toc-list > li > a:hover > span{ text-decoration:underline; }
.main.column.column .toc-sub{ list-style:none; margin:1px 0 6px; padding:0 0 0 27px; }
.main.column.column .toc-sub li + li{ margin-top:1px; }
.main.column.column .toc-sub a{ position:relative; display:block; padding:4px 2px 4px 13px; text-decoration:none; font-size:12px; font-weight:500; color:var(--color13); line-height:1.5; }
.main.column.column .toc-sub a::before{ content:""; position:absolute; left:0; top:.85em; width:7px; height:1px; background:var(--color11); }
.main.column.column .toc-sub a:hover{ color:var(--color9); text-decoration:underline; }

/* ---- 7c. コールアウト種別（ラベル帯の色だけで控えめに差別化・過剰装飾なし） ----
   procedure(既定「まずこの順で」)=navy（最も強い・今すぐの手順）／ tip(ヒント)=muted navy(color3・補足）／
   warn(注意)=coral。地・本文・角丸は共通、co-tag の色のみ変える。本文の強調は全て color9 のまま。 */
.main.column .callout.is-tip .co-tag{ background:var(--color3); }
.main.column.column .callout.is-warn .co-tag{ background:#E94F4F; }

/* ---- 15. ✓× 2カラム比較（やってよい／NG 等の対比。do=navyチェック・dont=控えめコーラル✕。本文12px・トークンのみ） ---- */
.main.column .do-dont{ display:grid; grid-template-columns:1fr; gap:10px; margin:18px 0 0; }
.main.column.column .dd-col{ background:#fff; border:1px solid var(--color7); border-radius:5px; padding:13px 14px 14px; box-shadow:0 0 5px rgba(18,77,137,.12); }
.main.column.column .dd-col .dd-h{ display:flex; align-items:center; gap:8px; margin:0 0 9px; padding-bottom:9px; border-bottom:1px solid var(--color7); font-size:13px; font-weight:700; color:var(--color4); line-height:1.5; }
.main.column.column .dd-col .dd-badge{ flex:0 0 20px; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.main.column.column .dd-col .dd-badge svg{ width:12px; height:12px; display:block; }
.main.column.column .dd-col.is-do .dd-badge{ background:var(--color9); }
.main.column.column .dd-col.is-dont .dd-badge{ background:#E94F4F; }
.main.column.column .dd-col ul{ list-style:none; margin:0; padding:0; }
.main.column.column .dd-col li{ position:relative; padding:0 0 0 16px; font-size:12px; line-height:1.65; color:#333; }
.main.column.column .dd-col li + li{ margin-top:7px; }
.main.column.column .dd-col.is-do li::before{ content:""; position:absolute; left:0; top:.58em; width:7px; height:7px; border-radius:2px; background:var(--color9); }
.main.column.column .dd-col.is-dont li::before{ content:""; position:absolute; left:0; top:.58em; width:7px; height:7px; border-radius:2px; background:#E94F4F; }

/* ---- 16. 要所の図地変化（col06・抑制的）── 淡色(color10)フローティング帯 .is-tint ----
   前後の白い節とは .part の上下 margin（白）で分離＝色↔白は線なし（spacing-divider 準拠）。
   帯の内側は上下 padding 30px で content に余白を確保（色面 padding30・張り付き禁止）。
   帯内の color10 ボックス（callout / summary-points）は白カードへ反転し図地を保つ（同色埋もれ回避）。
   付与は #diag（診断ハブ）と #summary（まとめ）だけ＝全節はやらない・単調回避の要所のみ。 */
/* fix1: 色面は padding30 のみ・margin 0（色面 padding+margin 二重禁止＝spacing-divider-craft-rules。前後の白節の margin30 が間隔を作る） */
.main.column .part.is-tint{ background:var(--color10); padding:30px 0; margin-top:0; margin-bottom:0; }
.main.column.column .part.is-tint > .thisinner > :last-child{ margin-bottom:0; }
.main.column.column .part.is-tint .callout{ background:#fff; }
.main.column.column .part.is-tint .summary-points{ background:#fff; border:1px solid var(--color7); }

/* ============================================================
   PC（min-width:751px）: 本文 12→15 / カードタイトル 16 / 補足・表 13-15 へ拡大
   （memory pc-typography＝bespoke 12px固定のままだと PC で割れ＋間延び）
   ============================================================ */
@media (min-width:751px){
  .main.column.column .article-title{ font-size:30px; }
  .main.column.column .article-cat{ font-size:15px; }
  .main.column.column .callout .co-foot{ font-size:15px; }
  .main.column.column .fig-dia .fig-desc{ font-size:13px; }
  .main.column.column .article-meta .am-item{ font-size:13px; }
  .main.column.column .article-lead p{ font-size:15px; }
  .main.column.column .line-btitle{ font-size:16px; }
  .main.column.column .a-ul li,
  .main.column.column .a-ol > li,
  .main.column.column .callout p,
  .main.column.column .opt .opt-d,
  .main.column.column .qbox p,
  .main.column.column .summary-points li{ font-size:15px; }
  .main.column.column .sym-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .main.column.column .sym-card .sym-q{ font-size:15px; }
  .main.column.column .sym-card .sym-a{ font-size:13px; }
  .main.column.column .compare-table th{ font-size:15px; }
  .main.column.column .compare-table td{ font-size:14px; }
  .main.column.column .note{ font-size:13px; }
  .main.column.column .fig-ph .fig-desc{ font-size:13px; }
  .main.column.column .fig-ph .fig-frame{ max-width:320px; }
  .main.column.column .fig-img img{ max-height:360px; }
  .main.column.column .fig-img.is-hero img{ max-height:420px; }
  .main.column.column .fig-img .fig-cap{ font-size:13px; }
  .main.column.column .callout .co-tag{ font-size:16px; }
  .main.column.column .opt-grid{ grid-template-columns:1fr 1fr; }
  .main.column.column .opt .opt-t{ font-size:16px; }
  .main.column.column .related-links a b{ font-size:16px; }
  .main.column.column .related-links a span{ font-size:14px; }
  .main.column.column .author-box .au-name{ font-size:16px; }
  .main.column.column .author-box .au-role,
  .main.column.column .author-box .au-note{ font-size:13px; }
  .main.column.column .toc .toc-head{ font-size:15px; }
  .main.column.column .toc-list > li > a{ font-size:15px; }
  .main.column.column .toc-list > li > a::before{ font-size:13px; }
  .main.column.column .toc-sub a{ font-size:14px; }
  .main.column.column .do-dont{ grid-template-columns:1fr 1fr; gap:14px; }
  .main.column.column .dd-col .dd-h{ font-size:15px; }
  .main.column.column .dd-col li{ font-size:14px; }
}


/* ==== WP統合(port_column.py 自動追加) ==== */
.main.column{ background:#fff; }
/* column 記事は自前の記事見出しを持つので、テーマ自動FV(page-bg)とタイトル帯(.pages)を隠す。無スコープだが mu-plugin の column 判定（親が column の固定ページ）でのみ読込 */
.page-bg.bg-photo, .pages{ display:none !important; }