/* =========================================================
   電話帳ナビコラム 共通CSS（v2.32）
   配置：/column/css/column.css
   各記事は master.css の後に `<link rel="stylesheet" href="/column/css/column.css">` で読み込みます。
   ※ :root のカスタムプロパティで文字サイズ・配色を一元管理。
      `--body-size` を一行変えるだけで全記事の本文サイズに反映できます。

   === 改訂履歴 ===
   v2.32 (2026-09-01) Task#209：800px以下で editorCard を1カラムに切り替え、
                      アバターを float させて見出しと肩書きを横並びに、
                      本文以降を左端から全幅で流すようにした。
                      text-align を left で上書きし、アバターは box-sizing を
                      border-box として占有を80pxに揃えた。
   v2.31 (2026-08-29) Task#201：見出しの番号バッジに margin-bottom を追加し、
                      1行の見出しでバッジ下の余白が0になる状態を解消した。
                      heroCardText の word-break を keep-all から auto-phrase へ置換し、
                      heroCard に min-width を追加して1024px帯の切り取りを解消した。
   v2.30 (2026-08-24) Task#190：compareTable のモバイル・カード型表示で
                      td::before の content を空文字から attr(data-label) へ変更し、
                      HTML側の td に付与した列見出しを表示するようにした。
                      ラベル色は var(--c-primary) から #555555 へ変更。
                      リンク色と混同されないよう無彩色を採用（対白 7.46:1）。
                      thead の th が2個かつ tbody に th を持つ50表は対象外とし、
                      当該表は data-label を持たないため attr() が空文字を返し従来と同一描画
   v2.29 (2026-08-24) Task#186：.keyPoint b の前景色を #A00000 に変更し
                      コントラスト比を 4.32〜4.58 から 7.5 以上に改善。
                      .categoryIntro p strong の黄色マーカー帯を廃止し
                      4.27:1 を 4.86:1 に改善
   v2.28 (2026-08-23) Task#178：compareTable のモバイル表示で
                      td::before に固定文字列「対応の目安」が出力されていた不具合を
                      修正。content を空文字にした
   v2.27 (2026-08-05) Task#122：v2.26繰り越し5件のCSS4件（naviiNoteリンク定義/お知らせ枠margin のTOP文脈限定CSS化・focus-visibleリング拡張）、
                      colPulse静的化（装飾アニメ削除）、レガシー緑バッジ宣言（トップレベル faqQ/faqA ::before）削除、
                      flowNode.ok背景・flowSplitArrows .toGreen文字色・同::before縦線を #1e7d4a に濃色化・統一（白文字5.14:1・--c-green本体は不変）。
   v2.3 (2026-05-29)  初版（既存30記事＋カテゴリページ用 .column* 系）
   v2.4 (2026-05-30)  カテゴリTOP・記事用の統一デザイン統合（.columnCategory / .columnArticle 系）
                      濃紺グラデーションヒーロー、Kickerラベル、FAQ Q/Aバッジ等
   v2.5 (2026-05-30)  コラムTOP統合（.col-* 系・約880行）。
                      これにより 全ページが column.css 1本のみを参照する単一CSS体制となる。
                      sample-v2.html のインラインCSS は本ファイルに統合済み。
   v2.6 (2026-05-30)  Phase 2対応：カテゴリTOP・記事ヘッダーへのSVGアイコン配置用CSSを追加
                      (.categoryHeroIcon / .articleHeaderIcon)。
                      Kicker ラベル汎用クラス (.sectionKicker) を追加（.col-* の外でも使用可）。
   v2.7 (2026-05-30)  アイコン配置CSSを廃止（実機モバイルで長いカテゴリ名と重なる問題のため）。
                      .categoryHeroIcon / .articleHeaderIcon の各ルールを削除。
                      Kickerラベル (.sectionKicker) はそのまま継続使用。
                      対応してHTMLからも該当divを取り除く方針（Cowork作業対象）。
   v2.8 (2026-05-31)  フェーズB：表示幅の統一。カテゴリTOP(.columnCategory)・記事(.columnArticle)の
                      コンテンツ幅を、コラムTOP(.col-container)と同じ最大幅 --col-max(1180px) に揃え
                      センタリング（width:min(calc(100% - 32px), var(--col-max))）。
                      フェーズA：全HTMLのKickerクラスを .sectionKicker に名寄せ（col-section-kicker は
                      HTMLから全廃。CSSの .col-section-kicker 定義は .sectionKicker と同一のため残置・無害）。
   v2.9  (2026-05-31) 記事の見た目修正：まず結論カードの .ccLabel を円形→横長ピル化、
                      目次 .tocList li::before の番号を content:none に（青番号 .tocList a::before に一本化）。
   v2.10 (2026-05-31) 表示幅の統一対象に /about/ 系を追加。.boxTy1.aboutPage / .boxTy1.editorialPage を
                      幅統一ルールのセレクタに追加し、コラムTOP・カテゴリ・記事・about の4系統で
                      PC最大幅 min(calc(100% - 32px), var(--col-max,1180px)) を統一。両aboutページの
                      head/footer も SSI→直書き（GA/Clarity/Cloudflareビーコン）に統一済み。
   v2.11 (2026-05-31) about・editorial のヒーローを column.css の共通クラス .pageHero に一元化。
                      両HTMLの inline ヒーローCSS（.editorialHero* / .aboutHero* 等）を撤去。
   v2.12 (2026-05-31) 背景をコラムTOP(.col-main)の薄いグラデーションに統一。body/#myStatus に
                      同グラデーションを適用し、.strWrapper・.boxTy1 を透過化（master.css は非編集）。
   v2.13 (2026-06-02) ruleList(手順)の見出しを h3/h4 両対応に変更（.ruleList／.columnArticle .ruleList > li）。
                      記事テンプレの見出し階層を h2→h3 に是正したことに伴う対応。既存記事の h4 もそのまま有効。
   v2.14 (2026-07-10) 全ページ種別の左右・上部余白統一。
                      補強1：#myStatus .strWrapper の padding/margin をゼロ化（!important）。
                      幅制御は .boxTy1 側の width:min() に一本化。コラムTOP無影響。
                      補強2：480px以下で .boxTy1.columnCategory / .columnArticle / .aboutPage /
                      .editorialPage のガターを 10px (calc(100% - 20px)) に統一（TOPと一致）。
                      .rk（ランキング）はインラインstyle幅指定を持つため !important 付きで同ガター化。
                      補強3：モバイル(760px以下)のパンくず margin-top を .strWrapper .breadcrumb で
                      一括 16px に統一。boxTy1配下（記事・カテゴリ・レポート・about系）と .rk配下
                      （ランキング）の両方をカバー。
   v2.15 (2026-07-10) master.css の .boxTy1 { padding: 15px } を無効化。
                      v2.14 の .strWrapper ゼロ化と併せて、コラムTOPと完全に同じ
                      コンテンツ配置に揃える。負マージン依存クラス（.hdgTy2 /
                      .hdgTy4 / .boxBa / .boxItem 系）の boxTy1 内使用を全HTMLで
                      Grep 確認済み・0件のため副作用なし。
   v2.16 (2026-07-11) editorCard 内の編集者ミニプロフィール（Y.Fukutoku / S.Tachibana）を
                      全記事で表示するためのスタイル定義追加。円形アバター(44px)＋氏名＋
                      肩書1行の横並び2名構成、モバイル(480px以下)で縦積み。
                      全記事のeditorCard内に .editorMembers ブロックを追加する。
   v2.17 (2026-07-13) editorCard 内の編集者プロフィールをカード2枚横並びに再設計。
                      editorProfiles / editorProfileCard 系を新設（PC 2カラム、
                      760px以下で縦積み）。全セレクタを .editorInfo 配下にスコープ
                      限定し /about/editorial/ への影響を遮断。v2.16 の
                      editorMembers 系はHTMLから除去済みのため以降未使用。
   v2.18 (2026-07-14) PSI 2026-07-14 モバイル指摘への対応（2件）：
                      (A) referenceLinks 内 strong（#9110／188／110／119）のコントラスト
                      不足解消。従来 var(--col-red-600) = #d92d20 は背景 #f4f9fd に
                      対し約4.51:1 で WCAG AA 境界。referenceLinks スコープに
                      限定して #A00000（対 #f4f9fd 約 7.84:1、AA/AAA 両クリア）へ
                      引き上げ。他箇所（col-ref/警告表示等）の col-red-600 参照は
                      維持のため変数値ではなく該当セレクタで直接上書き。
                      (B) LCP レンダリング遅延 2,430ms 対策として
                      .columnArticle > * のフェードインアニメーション（fadeUp）
                      を撤去。@keyframes fadeUp 定義も併せて削除。
                      prefers-reduced-motion 内の transition:none は他要素分のみ
                      残置。他の transition ホバー効果には影響なし。
   v2.19 (2026-07-14) 静的監査 audit_report.md／audit_supplement.md 対応：
                      非記事系ページのコントラスト是正（PSI指摘の col-ref スコープ
                      および監査新規発見2件）。
                      (A) .breadcrumbSep 初期定義色を #bcd7ea → #54718C
                      （対白 5.10:1 AA）。.boxTy1 配下では従来通り
                      var(--col-text-muted)=#4a5764 で上書きされるため
                      記事・カテゴリTOPの表示は不変、コラムTOP・レポート・
                      ランキング等 .boxTy1 外での色のみ改善。
                      (B) .articleListMeta 初期定義色を #9aa5b1 → #52616D
                      （var(--c-sub) と同値、対白 6.38:1 AA）。
                      .columnCategory 配下では var(--col-text-muted) で
                      上書きされ影響なし。
                      (C) .col-ref .red と .col-ref a（非 .info-link）を
                      var(--col-red-600)=#d92d20（対 #eaf2fb 4.28:1 未達）
                      → #A00000（対 #eaf2fb 7.45:1 AA/AAA両クリア）。
                      col-ref スコープに限定し、他所の --col-red-600 参照は
                      維持。.col-ref a.info-link は現状維持（5.16:1 AA）。
                      (D) audit_supplement.md 第2章の再検証で監査時の分類誤り
                      2件（.col-ref span.red／.col-ref a を誤検知として除外）
                      を訂正し、真の未達として本v2.19で対応。
   v2.20 (2026-07-14) PSI v2.19 再計測で残った3種の取りこぼしを是正
                      （column.css 変更なし・HTML内style修正のみで解決）：
                      (A) コラムTOP col-ref スコープ：column/index.html の
                      HTML内styleに column.css と同名の .col-ref .red /
                      .col-ref a 宣言（var(--col-red-600)）が残置しており、
                      後読みで v2.19 の #A00000 を上書きしていた事象を
                      HTML内style側で #A00000 に修正し解消。
                      (B) ranking個別 badge 系：.rk .cat-estate color を
                      #8a6a1f → #7C5F1C（対 #f3ecdd 5.09:1 AA）、
                      .rk .st-mobile color を #b96a09 → #9D5A08
                      （対 #fdeede 4.73:1 AA）、.rk .t3rk default background を
                      #6b7d92 → #5F7085（白文字 5.07:1 AA）。
                      いずれもHTML内style修正のみ、column.css は据え置き。
                      (C) rankingTOP mTag 全文脈：既に v2.19 で全3文脈が
                      AA達成済み（4.55〜7.22:1）を実測確認、CSS変更なし。
                      本件を機に「HTML内style と column.css の重複セレクタ
                      チェック」を恒久ルール7として運用開始。
   v2.24 (2026-07-16) naviiNote 系セレクタのスコープを .columnArticle 配下から
                      トップレベル（.naviiNote 系）に緩和。宣言内容は一切変更なし、
                      対象は 6セレクタ×2箇所（デフォルト＋@media 480px 上書き）＝
                      12実定義。目的：コラムTOP（.col-main）・編集部ページ
                      （.editorialPage）でも naviiNote 有効化するため。
                      how-to-search 記事の既存 2箇所 naviiNote は緩和後も表示同一
                      （宣言内容不変・特異性緩和のみ）。
                      特異性緩和(0,2,0)→(0,1,0)のためHTML内style競合の事前チェック
                      を作業冒頭で実施（0件確認）。
   v2.23 (2026-07-15) ナビィ吹き出しコンポーネント（naviiNote）新設。
                      案内・補助専用、.columnArticle配下スコープ限定、
                      アニメーションなし、コントラストAA設計。試験導入として
                      how-to-search 1記事のみに2箇所配置。keyPoint（信頼性領域・
                      青系）とnaviiNote（案内領域・暖色系）の役割分担を確立。
                      挿入位置は.keyPoint直後（末尾追記はルール10により不使用）。
   v2.22 (2026-07-14) v2.18修正(A)の復元：referenceLinksList li strong の
                      #A00000 引き上げ宣言が、末尾切断→v2.21復元時の取りこぼしで
                      欠落していた（改訂履歴のみ残存する「先祖返り」状態）ことが
                      PSI再計測（ユーザー補助100→96）で発覚。本v2.22で該当ルールを
                      直接編集方式で修正（末尾追記は不使用）。宣言変更は本1箇所のみ。
                      併せて恒久ルール9（改訂履歴と実体のGrep照合）を新設。
   v2.21 (2026-07-14) コラムTOPインラインstyle統合完了：
                      column/index.html の HTML内 <style> ブロック
                      （約28KB／215ルール／211ユニークセレクタ）を全削除し、
                      v2.5 で意図されたCSS一本化（col-* 系の column.css 集約）
                      をようやく完成。フェーズ1（inline_unification_plan.md）
                      の値diff調査で完全一致209件・乖離1件（.sectionKicker
                      letter-spacing の 0.06em vs .06em の表記差、視覚同一）・
                      HTML片側プロパティ0件と確定していたため、
                      **column.cssへの宣言変更0件**で削除実施可能と判断。
                      本v2.21改訂はcolumn.css自体の宣言は変更せず、
                      3点セット更新（版数記録）＋CSS参照バージョン更新
                      （?v=2.19 → ?v=2.21）による全ページのキャッシュ
                      整合のためのマーカー版数。
                      削除対象styleブロックは rollback-inline-style.md に
                      完全保全（30日保管後アーカイブ）。
                      本v2.21で恒久ルール7の潜在リスク（HTML内style後勝ち
                      による column.css 修正の無効化）が column/index.html
                      について根本解消。
   ========================================================= */

:root {
    --c-primary:#0b67a3;
    --c-navy:#163b56;
    --c-green:#27a05e;
    --c-green-dark:#1c7d49;
    --c-warn-bg:#fff8ed;
    --c-warn-bd:#f1d6aa;
    --c-warn-tx:#9b5b00;
    --c-text:#1f2d3a;
    --c-sub:#4d5c67;
    --c-border:#dcebf7;
    --c-border2:#e1e8ef;
    --c-soft:#f4f9fd;
    /* 高齢者可読性を重視した文字サイズ（従来より大きめ） */
    --body-size:18px;
    --body-line:2.0;
    --lead-size:20px;
    --h2-size:27px;
    --h3-size:21px;
    --radius:16px;
}

/* ---- 記事本文の基本 ---- */
.columnArticle { color:var(--c-text); font-size:var(--body-size); counter-reset:sec; }
.columnArticle a { color:var(--c-primary); text-decoration:none; font-weight:600; }
.columnArticle a:hover { text-decoration:underline; }
.columnArticle p { line-height:var(--body-line); margin:0 0 22px; font-size:var(--body-size); }

/* ---- パンくず ---- */
.breadcrumb { font-size:14px; color:var(--c-sub); margin:0 0 22px; line-height:1.7; }
.breadcrumb a { color:var(--c-sub); font-weight:500; }
.breadcrumb a:hover { color:var(--c-primary); }
.breadcrumbSep { margin:0 8px; color:#54718C; }

/* ---- 記事ヘッダー ---- */
.articleHeader { padding:0 0 26px; margin:0 0 30px; position:relative; }
.articleHeader::after { content:""; display:block; position:absolute; left:0; bottom:0; width:96px; height:5px; border-radius:5px; background:linear-gradient(90deg,var(--c-primary),var(--c-green)); }
.articleCategoryLabel { display:inline-flex; align-items:center; gap:7px; padding:6px 16px; border-radius:999px; background:var(--c-navy); color:#fff; font-size:13px; font-weight:bold; margin:0 0 16px; letter-spacing:.02em; }
.articleCategoryLabel::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--c-green); }
.articleTitle { font-size:33px; line-height:1.42; margin:0 0 18px; color:var(--c-navy); font-weight:800; letter-spacing:.01em; }
.articleTitle .titleSub { display:block; font-size:21px; color:var(--c-primary); margin-top:8px; font-weight:700; }
.articleMeta { font-size:14px; color:var(--c-sub); display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }
.articleMeta time, .articleMeta .author { display:inline-flex; align-items:center; gap:6px; }
.articleMeta .authorLink { color:var(--c-sub); text-decoration:none; font-weight:600; }
.articleMeta .authorLink:hover { color:var(--c-primary); text-decoration:underline; }

/* ---- ヒーロー ---- */
.articleHero { padding:22px; border-radius:22px; background:linear-gradient(135deg,#eef7ff 0%,#ffffff 55%,#fff7e8 100%); border:1px solid var(--c-border); margin:0 0 14px; box-shadow:0 10px 30px rgba(20,54,82,.06); }
.articleHero svg { display:block; width:100%; height:auto; max-height:300px; }

/* ---- リード ---- */
.lead { font-size:var(--lead-size); line-height:1.95; padding:26px 30px; background:#fff; border:1px solid var(--c-border); border-left:6px solid var(--c-primary); border-radius:0 14px 14px 0; margin:30px 0 40px; color:var(--c-text); box-shadow:0 6px 20px rgba(20,54,82,.05); }

/* ---- 見出し（番号バッジ付き） ---- */
.columnArticle h2 { counter-increment:sec; scroll-margin-top:20px; font-size:var(--h2-size); line-height:1.5; color:var(--c-navy); margin:54px 0 22px; font-weight:800; display:flex; align-items:flex-start; gap:16px; }
.columnArticle h2::before { content:counter(sec,decimal-leading-zero); flex:0 0 auto; font-size:18px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--c-primary),var(--c-navy)); width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; box-shadow:0 5px 14px rgba(11,103,163,.3); margin-top:2px; margin-bottom:2px; }
.columnArticle h3 { font-size:var(--h3-size); line-height:1.55; color:var(--c-navy); margin:34px 0 14px; padding:0 0 8px 0; border-bottom:2px solid var(--c-border); font-weight:bold; }
/* 装飾的なh2（まず結論／アプリ／参考情報／関連記事）は番号バッジを付けない */
.conclusion h2, .appPromo h2, .columnArticle .referenceLinksTitle, .columnArticle .relatedTitle { counter-increment:none; }
.appPromo h2::before, .columnArticle .referenceLinksTitle::before, .columnArticle .relatedTitle::before { display:none !important; content:none !important; }

/* ---- HTML/CSS フロー図（レスポンシブ・縦積み） ---- */
.flowBox { background:linear-gradient(160deg,#f4f9fd,#ffffff); border:1px solid var(--c-border); border-radius:var(--radius); padding:30px 24px; margin:28px 0; }
.flowChart { display:flex; flex-direction:column; align-items:center; gap:0; }
.flowNode { width:100%; max-width:460px; text-align:center; border-radius:14px; padding:18px 20px; box-sizing:border-box; }
.flowNode .fnTitle { font-size:18px; font-weight:800; line-height:1.4; }
.flowNode .fnSub { font-size:15px; margin-top:5px; opacity:.92; }
.flowNode.start { background:var(--c-primary); color:#fff; }
.flowNode.step { background:#fff; color:var(--c-navy); border:2px solid var(--c-primary); }
.flowNode.check { background:var(--c-warn-bg); color:var(--c-warn-tx); border:2px solid var(--c-warn-bd); }
.flowArrow { width:3px; height:30px; background:var(--c-primary); position:relative; margin:6px 0; }
.flowArrow::after { content:""; position:absolute; left:50%; bottom:-2px; transform:translateX(-50%); border-left:7px solid transparent; border-right:7px solid transparent; border-top:9px solid var(--c-primary); }
.flowSplit { display:flex; gap:16px; width:100%; max-width:560px; margin-top:8px; }
.flowSplit .flowNode { max-width:none; flex:1; }
.flowSplitArrows { display:flex; gap:16px; width:100%; max-width:560px; }
.flowSplitArrows span { flex:1; height:26px; position:relative; }
.flowSplitArrows span::after { content:""; position:absolute; left:50%; bottom:-2px; transform:translateX(-50%); border-left:7px solid transparent; border-right:7px solid transparent; border-top:9px solid currentColor; }
.flowSplitArrows .toGreen { color:#1e7d4a; } /* v2.27: 5.14:1 */
.flowSplitArrows .toGreen::before { content:""; position:absolute; left:50%; top:0; width:3px; height:100%; background:#1e7d4a; transform:translateX(-50%); } /* v2.27: 縦線色も統一 */
.flowSplitArrows .toNavy { color:var(--c-navy); }
.flowSplitArrows .toNavy::before { content:""; position:absolute; left:50%; top:0; width:3px; height:100%; background:var(--c-navy); transform:translateX(-50%); }
.flowNode.ok { background:#1e7d4a; color:#fff; } /* v2.27: 5.14:1 */
.flowNode.ng { background:var(--c-navy); color:#fff; }
.flowCaption { text-align:center; font-size:14px; color:var(--c-sub); margin-top:18px; }

/* ---- やってはいけない3か条（強調カード・番号バッジ赤） ---- */
.ruleList { list-style:none; counter-reset:rule; padding:0; margin:26px 0; display:grid; gap:16px; }
.ruleList > li { counter-increment:rule; position:relative; padding:22px 24px 22px 78px; background:#fff; border:1px solid var(--c-border2); border-radius:14px; box-shadow:0 4px 14px rgba(20,54,82,.05); transition:transform .18s, box-shadow .18s; }
.ruleList > li:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(20,54,82,.1); }
.ruleList > li::before { content:counter(rule); position:absolute; left:20px; top:22px; width:42px; height:42px; background:linear-gradient(135deg,#d34b4b,#b13636); color:#fff; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px; box-shadow:0 5px 12px rgba(179,54,54,.3); }
.ruleList h3, .ruleList h4 { margin:0 0 9px; font-size:18px; color:var(--c-navy); font-weight:800; }
.ruleList p { margin:0; font-size:16px; line-height:1.85; }

/* ---- 独自データボックス ---- */
.dataBox { position:relative; background:linear-gradient(135deg,#fffaf2,#fff8ed); border:1px solid var(--c-warn-bd); border-radius:var(--radius); padding:26px 28px 26px 30px; margin:30px 0; overflow:hidden; }
.dataBox::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(180deg,#d99c3b,var(--c-warn-tx)); }
.dataBoxTitle { display:flex; align-items:center; gap:10px; font-weight:800; color:var(--c-warn-tx); margin-bottom:14px; font-size:18px; }
.dataBoxTitle svg { flex:0 0 auto; }
.dataBox p { margin:0 0 12px; line-height:1.9; font-size:16px; }
.dataBox p:last-child { margin-bottom:0; }
.dataStats { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 16px; }
.dataStat { flex:1; min-width:140px; background:#fff; border:1px solid var(--c-warn-bd); border-radius:12px; padding:14px 16px; text-align:center; }
.dataStat b { display:block; font-size:24px; color:var(--c-warn-tx); font-weight:800; line-height:1.2; }
.dataStat span { display:block; font-size:13px; color:var(--c-sub); margin-top:4px; }

/* ---- 番号検索CTA ---- */
.ctaInline { position:relative; background:linear-gradient(135deg,#163b56,#0b3a5c); color:#fff; border-radius:20px; padding:34px 28px; margin:38px 0; text-align:center; overflow:hidden; box-shadow:0 14px 36px rgba(11,58,92,.28); }
.ctaInline::after { content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%; background:rgba(39,160,94,.18); }
.ctaInline::before { content:""; position:absolute; left:-30px; bottom:-50px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.06); }
.ctaInline h3 { color:#fff; font-size:23px; margin:0 0 12px; padding:0; border:0; font-weight:800; position:relative; }
.ctaInline p { margin:0 0 22px; line-height:1.75; color:#d8e0ea; font-size:16px; position:relative; }
.ctaInline a { position:relative; display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,#fff,#eef7ff); color:var(--c-primary) !important; padding:16px 38px; border-radius:999px; font-weight:800; font-size:17px; box-shadow:0 8px 20px rgba(0,0,0,.18); transition:transform .18s; }
.ctaInline a:hover { transform:translateY(-2px); text-decoration:none; }

/* ---- 比較表（PC=テーブル／モバイル=カード） ---- */
.compareWrap { margin:24px 0; }
.compareTable { width:100%; border-collapse:separate; border-spacing:0; font-size:16px; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 5px 18px rgba(20,54,82,.07); }
.compareTable thead th { background:linear-gradient(135deg,var(--c-primary),var(--c-navy)); color:#fff; font-weight:bold; padding:15px 14px; text-align:center; }
.compareTable tbody th { background:var(--c-soft); color:var(--c-navy); font-weight:bold; padding:15px 16px; text-align:left; border-bottom:1px solid var(--c-border2); width:42%; vertical-align:top; }
.compareTable tbody td { padding:15px 16px; border-bottom:1px solid var(--c-border2); text-align:left; vertical-align:top; }
.compareTable tbody tr:last-child th, .compareTable tbody tr:last-child td { border-bottom:0; }

/* ---- FAQ ---- */
.faqList { margin:22px 0; display:grid; gap:14px; }
.faqItem { background:#fff; border:1px solid var(--c-border2); border-radius:14px; padding:22px 24px; }
.faqQ { font-weight:800; color:var(--c-navy); font-size:17px; margin:0 0 12px; padding-left:38px; position:relative; line-height:1.6; }
.faqA { padding-left:38px; position:relative; line-height:1.9; margin:0; font-size:16px; }

/* ---- まとめ ---- */
.summary { background:linear-gradient(135deg,#eef7ff,#f8fbfe); border:1px solid var(--c-border); border-radius:var(--radius); padding:28px 30px; margin:38px 0; }
.summary h3 { margin:0 0 16px; font-size:20px; color:var(--c-navy); padding:0 0 0 16px; border:0; border-left:5px solid var(--c-primary); font-weight:800; }
.summary ul { margin:0; padding:0; list-style:none; }
.summary li { position:relative; padding:0 0 0 32px; margin-bottom:13px; line-height:1.85; font-size:16px; }
.summary li:last-child { margin-bottom:0; }
.summary li::before { content:""; position:absolute; left:4px; top:7px; width:11px; height:11px; border-radius:50%; background:var(--c-green); box-shadow:0 0 0 4px rgba(39,160,94,.16); }

/* ---- 編集者カード ---- */
.editorCard { display:grid; grid-template-columns:92px 1fr; gap:20px; background:var(--c-soft); border:1px solid var(--c-border); border-radius:var(--radius); padding:26px; margin:40px 0 0; }
.editorAvatar { width:84px; height:84px; border-radius:20px; background:linear-gradient(135deg,#1f7acc 0%,#0a5a9c 100%); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:bold; font-size:13px; line-height:1.35; text-align:center; padding:8px; box-shadow:0 6px 14px rgba(11,103,163,.28); }
.editorInfo h3 { margin:0 0 6px; font-size:18px; color:var(--c-navy); padding:0; border:0; font-weight:800; }
.editorInfo .editorSubtitle { font-size:13px; color:var(--c-primary); font-weight:bold; margin:0 0 10px; }
.editorInfo p { margin:0 0 12px; line-height:1.85; font-size:15px; color:var(--c-text); }
.editorInfo .editorLink { display:inline-block; font-weight:800; color:var(--c-primary) !important; font-size:14px; }

/* ---- 参考情報・公式相談窓口 ---- */
.referenceLinks { background:var(--c-soft); border:1px solid var(--c-border); border-radius:var(--radius); padding:26px 28px; margin:40px 0 0; }
.referenceLinksTitle { font-size:20px; color:var(--c-navy); margin:0 0 14px; font-weight:800; padding-left:15px; border-left:5px solid var(--c-primary); display:block; }
.referenceLinks p { font-size:16px; line-height:1.85; }
.referenceLinksList { margin:14px 0 12px; padding-left:1.4em; line-height:2.05; font-size:16px; }
.referenceLinksList a { color:var(--c-primary); }
.referenceLinksNote { font-size:13px; color:var(--c-sub); margin:14px 0 0; line-height:1.7; }

/* ---- アプリ動線 ---- */
.appPromo { background:linear-gradient(135deg,#f0f8ff,#fff7e8); border:1px solid var(--c-border); border-radius:var(--radius); padding:28px; margin:24px 0 0; }
.appPromo h2 { font-size:20px; color:var(--c-navy); margin:0 0 12px; font-weight:800; display:block; }
.appPromo h2::before { display:none; }
.appPromo p { font-size:16px; line-height:1.85; margin:0 0 18px; }

/* ---- 関連記事 ---- */
.relatedSection { margin-top:50px; padding-top:34px; border-top:2px solid var(--c-border); }
.relatedTitle { font-size:21px; color:var(--c-navy); margin:0 0 20px; font-weight:800; padding-left:15px; border-left:5px solid var(--c-primary); display:block; }
.relatedGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.relatedCard { border:1px solid var(--c-border2); border-radius:14px; padding:20px; background:#fff; display:block; text-decoration:none; color:var(--c-text); transition:box-shadow .2s, transform .2s, border-color .2s; }
.relatedCard:hover { box-shadow:0 10px 24px rgba(20,54,82,.13); transform:translateY(-3px); border-color:var(--c-primary); text-decoration:none; }
.relatedCardTag { display:inline-block; font-size:12px; background:#eef7ff; color:var(--c-primary); padding:4px 11px; border-radius:999px; margin-bottom:11px; font-weight:bold; }
.relatedCardTitle { font-size:16px; line-height:1.55; margin:0; color:var(--c-navy); font-weight:bold; }

/* ---- まず結論ボックス ---- */
.conclusion { background:linear-gradient(140deg,#163b56 0%,#0e2d44 100%); color:#fff; border-radius:22px; padding:34px 32px; margin:30px 0 26px; box-shadow:0 16px 40px rgba(14,45,68,.22); position:relative; overflow:hidden; }
.conclusion::after { content:""; position:absolute; right:-50px; top:-50px; width:200px; height:200px; border-radius:50%; background:rgba(39,160,94,.14); }
.conclusionTag { position:relative; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.13); color:#fff; font-size:13px; font-weight:bold; padding:6px 16px; border-radius:999px; margin-bottom:16px; }
.conclusionTag::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--c-green); }
.conclusion h2 { color:#fff; font-size:30px; line-height:1.48; margin:0 0 14px; font-weight:800; display:block; position:relative; }
.conclusion h2::before { display:none; content:none; }
.conclusion .conclusionLead { font-size:16px; line-height:1.9; color:#dce6f0; margin:0 0 24px; position:relative; }
.conclusionCards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; position:relative; }
.conclusionCard { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:14px; padding:18px 18px; }
.conclusionCard .ccLabel { font-size:12px; color:#9fc7e6; font-weight:bold; margin-bottom:8px; letter-spacing:.03em; }
.conclusionCard .ccTitle { font-size:18px; font-weight:800; color:#fff; margin:0 0 8px; }
.conclusionCard p { font-size:14px; line-height:1.72; color:#cdd9e5; margin:0; }

/* ---- 目次 ---- */
.toc { background:#fff; border:1px solid var(--c-border); border-radius:var(--radius); padding:24px 28px; margin:0 0 40px; box-shadow:0 5px 18px rgba(20,54,82,.05); }
.tocTitle { font-size:17px; font-weight:800; color:var(--c-navy); margin:0 0 16px; display:flex; align-items:center; gap:10px; }
.tocTitle::before { content:""; width:5px; height:20px; background:var(--c-primary); border-radius:3px; }
.tocList { list-style:none; counter-reset:toc; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:0; }
.tocList li { counter-increment:toc; }
.tocList a { display:flex; gap:11px; align-items:baseline; color:var(--c-text); font-size:16px; font-weight:600; padding:11px 0; border-bottom:1px solid #eef3f8; }
.tocList li:last-child a { border-bottom:0; }
.tocList a::before { content:counter(toc); flex:0 0 auto; color:var(--c-primary); font-weight:800; font-size:14px; min-width:18px; }
.tocList a:hover { color:var(--c-primary); text-decoration:none; }

/* ---- 要点ボックス ---- */
.keyPoint { background:#f1f8fd; border:1px solid var(--c-border); border-left:5px solid var(--c-primary); border-radius:0 12px 12px 0; padding:18px 22px; margin:0 0 26px; font-size:16px; line-height:1.85; color:var(--c-text); }
.keyPoint b { color:var(--c-navy); }

/* ---- ナビィのワンポイント（案内・補助専用。注意喚起・実績数値セクションでは使用しない） ---- */
.naviiNote {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: start;
  background: #fffdf2;
  border: 1px solid #f0e2b6;
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 26px;
}
.naviiNote .naviiNoteFace {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(20, 54, 82, .12);
}
.naviiNote .naviiNoteBody {
  position: relative;
}
.naviiNote .naviiNoteBody::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 22px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid #fff;
}
.naviiNote .naviiNoteLabel {
  font-size: 13px;
  font-weight: 800;
  color: #8a6d1f;
  margin: 0 0 6px;
  letter-spacing: .03em;
}
.naviiNote .naviiNoteText {
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-text);
  margin: 0;
  background: #fff;
  border: 1px solid #f0e2b6;
  border-radius: 12px;
  padding: 12px 16px;
}
@media (max-width: 480px) {
  .naviiNote {
    grid-template-columns: 48px 1fr;
    gap: 12px;
    padding: 16px;
  }
  .naviiNote .naviiNoteFace {
    width: 48px;
    height: 48px;
  }
  .naviiNote .naviiNoteText {
    font-size: 14px;
  }
}

/* ---- v2.18でページロードのフェードインを削除（LCP改善） ----
   従来 .columnArticle > * に animation:fadeUp .5s ease both を適用し、
   初期状態 opacity:0 → 1 のフェードインを行っていたが、
   PSI 2026-07-14 ラボ計測で LCP レンダリング遅延 2,430ms の主因と判明したため削除。
   H1 は .columnArticle の外側（<h1 class="hdgBa">）だが、articleHeader/articleHero/
   conclusion 等 FV領域の全要素がフェードイン中は非表示のため、
   結果として LCP 検出が大幅に遅延していた。CrUXフィールド値 LCP 1.3秒は
   本アニメーションが実ユーザー体験では既に問題化していなかったが、
   ラボスコア改善のためアニメーション自体を撤去する。
   他要素の transition ホバー効果（.ruleList > li, .relatedCard 等）は維持し、
   ユーザー設定 prefers-reduced-motion 尊重の transition:none は残す。 */
@media (prefers-reduced-motion: reduce) {
    .ruleList > li, .relatedCard, .ctaInline a { transition:none !important; }
}

/* =========================================================
   カテゴリページ用クラス（v2.3 共通）
   /column/{cat}/index.html・/column/index.html で使用。
   :root 変数を継承して文字サイズ・配色を一元管理。
   ========================================================= */

.columnCategory, .columnTop { color:var(--c-text); font-size:var(--body-size); }
.columnCategory a, .columnTop a { color:var(--c-primary); text-decoration:none; font-weight:600; }
.columnCategory a:hover, .columnTop a:hover { text-decoration:underline; }

/* ---- カテゴリヒーロー ---- */
.categoryHero { padding:32px; border-radius:22px; background:linear-gradient(135deg,#eef7ff 0%,#ffffff 55%,#fff7e8 100%); border:1px solid var(--c-border); margin:0 0 30px; box-shadow:0 10px 30px rgba(20,54,82,.06); }
/* master.css 側の `#myStatus p` 等（ID+要素＝詳細度 1,0,1）や
   `.strWrapper p`・`.boxTy1 p`（0,1,1）に確実に勝つため、
   セレクタを `.categoryHero .categoryLeadLabel`（0,2,0）に強化し、
   さらに文字色は !important を併用して上書きを確実に防ぐ。
   `.aboutHero` も `.categoryHero` を併用しているため同セレクタで網羅される。 */
.categoryHero .categoryLeadLabel { display:inline-flex; align-items:center; gap:7px; padding:6px 16px; border-radius:999px; background:var(--c-navy); color:#fff !important; font-size:13px; font-weight:bold; margin:0 0 16px; letter-spacing:.02em; }
.categoryHero .categoryLeadLabel::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--c-green); }
/* v2.3.1 実機修正：上記でも実機ブラウザで青文字が残るケース（master.css 側に
   `#myStatus .boxTy1 p` 等の !important 付きルールが存在する想定）を確実に
   上書きするため、ID `#myStatus` を含むより高い詳細度のルールを追加する。
   詳細度は (1,2,1)+!important となり、master.css の通常ルールに加え
   多くの !important ルールにも勝てる。span 等の子要素まで含めて白に固定。 */
#myStatus .categoryHero .categoryLeadLabel,
#myStatus .categoryHero p.categoryLeadLabel,
#myStatus .aboutHero .categoryLeadLabel,
#myStatus .aboutHero p.categoryLeadLabel { color:#ffffff !important; background:var(--c-navy) !important; }
#myStatus .categoryHero .categoryLeadLabel *,
#myStatus .aboutHero .categoryLeadLabel * { color:#ffffff !important; }
/* 親条件を外した広域フォールバック（同名クラスを記事本文等で再利用された場合の保険）。
   詳細度 (0,1,1)+!important のみだが、ID指定の上記ルールと併せて二重防御。 */
p.categoryLeadLabel { color:#ffffff !important; }
.categoryHero h2 { font-size:30px; line-height:1.45; margin:0 0 16px; color:var(--c-navy); font-weight:800; }
.categoryHero p { font-size:17px; line-height:1.95; margin:0; color:var(--c-text); }

/* ---- 番号検索ボックス（カテゴリ・コラムTOP共通） ---- */
.columnSearchBox { background:#fff; border:1px solid var(--c-border); border-radius:var(--radius); padding:26px 28px; margin:0 0 30px; box-shadow:0 5px 18px rgba(20,54,82,.05); }
.columnSearchBox h2 { margin:0 0 10px; font-size:20px; color:var(--c-navy); border:0; padding:0; font-weight:800; }
.columnSearchBox .columnSectionIntro { font-size:15px; line-height:1.85; margin:0 0 16px; color:var(--c-sub); }
.columnSearchForm { display:flex; gap:10px; margin-top:14px; }
.columnSearchForm input { flex:1; padding:13px 16px; border:1px solid #bfcbd6; border-radius:10px; font-size:16px; }
.columnSearchForm button { padding:13px 24px; border:0; border-radius:10px; background:linear-gradient(135deg,var(--c-primary),var(--c-navy)); color:#fff; font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 5px 14px rgba(11,103,163,.25); }

/* ---- まず読みたい記事3本（カテゴリ・コラムTOP共通） ---- */
.pickup3Section { margin:0 0 36px; }
.pickup3Title { font-size:22px; color:var(--c-navy); margin:0 0 18px; font-weight:800; padding-left:15px; border-left:5px solid var(--c-primary); }
.pickup3Grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.pickup3Card { border:1px solid var(--c-border2); border-radius:14px; padding:22px; background:#fff; display:block; text-decoration:none; color:var(--c-text); transition:box-shadow .2s, transform .2s, border-color .2s; box-shadow:0 4px 14px rgba(20,54,82,.05); }
.pickup3Card:hover { box-shadow:0 10px 24px rgba(20,54,82,.13); transform:translateY(-3px); border-color:var(--c-primary); text-decoration:none; }
.pickup3Tag { display:inline-block; font-size:12px; background:#eef7ff; color:var(--c-primary); padding:4px 11px; border-radius:999px; margin-bottom:11px; font-weight:bold; }
.pickup3CardTitle { font-size:17px; line-height:1.55; margin:0 0 8px; color:var(--c-navy); font-weight:800; }
.pickup3CardLead { font-size:14px; line-height:1.7; margin:0; color:var(--c-sub); }

/* ---- カテゴリ解説本文 ---- */
.categoryIntro { margin:0 0 36px; background:var(--c-soft); border:1px solid var(--c-border); border-radius:var(--radius); padding:28px 30px; }
.categoryIntro h2 { font-size:23px; color:var(--c-navy); border-left:5px solid var(--c-primary); padding:6px 0 6px 14px; margin:0 0 18px; font-weight:800; }
.categoryIntro h3 { font-size:18px; color:var(--c-navy); margin:24px 0 10px; font-weight:bold; }
.categoryIntro p { font-size:16px; line-height:1.95; margin:0 0 16px; color:var(--c-text); }
.categoryIntro ul, .categoryIntro ol { font-size:16px; line-height:1.95; margin:14px 0; padding-left:1.4em; }

/* ---- 全記事リスト ---- */
.columnSection { margin:36px 0 0; }
.columnSection > h2 { font-size:22px; color:var(--c-navy); border-left:5px solid var(--c-primary); padding-left:14px; margin:0 0 18px; font-weight:800; }
.columnSectionIntro { font-size:15px; line-height:1.85; margin:0 0 20px; color:var(--c-sub); }
.articleList { display:flex; flex-direction:column; gap:18px; }
.articleListItem { border:1px solid var(--c-border2); border-radius:14px; background:#fff; padding:24px; transition:box-shadow .2s, transform .2s; }
.articleListItem:hover { box-shadow:0 8px 22px rgba(20,54,82,.10); transform:translateY(-2px); }
.articleListItem h3 { margin:0 0 10px; font-size:19px; line-height:1.55; color:var(--c-navy); font-weight:800; }
.articleListItem h3 a { color:var(--c-navy); }
.articleListItem h3 a:hover { color:var(--c-primary); }
.articleListItem p { margin:0 0 8px; line-height:1.85; color:var(--c-sub); font-size:15px; }
.articleListMeta { font-size:13px; color:#52616D; }
.articleListTag { display:inline-block; font-size:12px; background:#eef7ff; color:var(--c-primary); padding:4px 11px; border-radius:999px; font-weight:bold; margin-right:8px; }

/* ---- 末尾CTA（カテゴリ・コラムTOP共通） ---- */
.columnCta { margin-top:38px; border-radius:20px; background:linear-gradient(135deg,#163b56,#0b3a5c); color:#fff; padding:32px 30px; display:flex; align-items:center; justify-content:space-between; gap:24px; box-shadow:0 14px 36px rgba(11,58,92,.28); position:relative; overflow:hidden; }
.columnCta::after { content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%; background:rgba(39,160,94,.18); pointer-events:none; }
.columnCta h2 { margin:0 0 10px; font-size:22px; color:#fff; border:0; padding:0; font-weight:800; position:relative; }
.columnCta p { margin:0; line-height:1.8; color:#d8e0ea; font-size:15px; position:relative; }
.columnCta a { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,#fff,#eef7ff); color:var(--c-primary) !important; padding:14px 28px; border-radius:999px; font-weight:800; white-space:nowrap; font-size:16px; box-shadow:0 8px 20px rgba(0,0,0,.18); transition:transform .18s; position:relative; }
.columnCta a:hover { transform:translateY(-2px); text-decoration:none; }

/* ---- カテゴリページ用ヒーロー図（SVGラッパー） ---- */
.categoryHeroFig { background:#fff; border:1px solid var(--c-border); border-radius:14px; padding:20px; margin:0 0 30px; box-shadow:0 5px 18px rgba(20,54,82,.05); }
.categoryHeroFig svg { display:block; width:100%; height:auto; max-height:260px; }

/* ---- コラムTOP用：カテゴリカード一覧 ---- */
.categoryGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.categoryCard { border:1px solid var(--c-border2); border-radius:14px; background:#fff; padding:22px; box-shadow:0 4px 14px rgba(20,54,82,.05); transition:box-shadow .2s, transform .2s; }
.categoryCard:hover { box-shadow:0 10px 24px rgba(20,54,82,.13); transform:translateY(-2px); }
.categoryCard h3 { margin:0 0 10px; font-size:19px; color:var(--c-navy); font-weight:800; }
.categoryCard h3 a { color:var(--c-navy); }
.categoryCard h3 a:hover { color:var(--c-primary); }
.categoryCard p { margin:0 0 14px; line-height:1.8; color:var(--c-sub); font-size:15px; }
.categoryCard ul { margin:0; padding-left:1.2em; line-height:1.95; font-size:15px; }

/* ---- コラムTOP用：FAQ・ガイド ---- */
.columnGuide { background:linear-gradient(135deg,#fff8ed,#fffaf2); border:1px solid var(--c-warn-bd); border-radius:var(--radius); padding:26px 28px; }
.columnGuide h2 { font-size:22px; color:var(--c-warn-tx); border-left:5px solid var(--c-warn-tx); padding-left:14px; margin:0 0 14px; font-weight:800; }
.columnGuide p { font-size:15px; line-height:1.85; margin:0 0 14px; }
.columnGuide ol { margin:14px 0 0; padding-left:1.6em; font-size:15px; line-height:2.0; }

/* ===================== モバイル（800px以下） ===================== */
@media screen and (max-width: 800px) {
    :root { --body-size:17px; --lead-size:18px; --h2-size:22px; --h3-size:19px; }
    .articleTitle { font-size:25px; }
    .articleTitle .titleSub { font-size:18px; }
    .lead { padding:22px 20px; }
    .columnArticle h2 { gap:12px; }
    .columnArticle h2::before { width:38px; height:38px; font-size:16px; border-radius:11px; }
    .flowSplit { flex-direction:column; gap:0; }
    .flowSplit .flowNode { max-width:460px; margin:0 auto; }
    .flowSplitArrows { display:none; }
    .flowSplit .flowNode + .flowNode { margin-top:14px; }
    .flowSplit .flowNode.ok::after { content:"または"; display:block; text-align:center; color:var(--c-sub); font-size:13px; margin:14px 0 0; font-weight:600; }
    .dataStats { flex-direction:column; }
    /* 比較表をモバイルではカード型に */
    .compareTable, .compareTable tbody, .compareTable tr { display:block; width:100%; }
    .compareTable thead { display:none; }
    .compareTable tbody tr { background:#fff; border:1px solid var(--c-border2); border-radius:12px; margin-bottom:12px; box-shadow:0 4px 12px rgba(20,54,82,.06); overflow:hidden; }
    .compareTable tbody th { display:block; width:auto; background:var(--c-navy); color:#fff; border:0; font-size:15px; }
    .compareTable tbody td { display:block; border:0; font-size:15px; }
    .compareTable tbody td::before { content:attr(data-label); display:block; font-size:12px; color:#555555; font-weight:bold; margin-bottom:5px; }
    .relatedGrid { grid-template-columns:1fr; }
    .conclusion { padding:26px 20px; }
    .conclusion h2 { font-size:23px; }
    .conclusionCards { grid-template-columns:1fr; }
    .toc { padding:22px 20px; }
    .ctaInline { padding:28px 20px; }
    .editorCard { grid-template-columns:1fr; text-align:center; }
    .editorAvatar { margin:0 auto; }
    .articleHero svg { max-height:220px; }

    /* カテゴリページ用モバイル */
    .categoryHero { padding:22px; }
    .categoryHero h2 { font-size:23px; }
    .categoryHero p { font-size:16px; }
    .columnSearchBox { padding:22px 20px; }
    .columnSearchForm { flex-direction:column; }
    .pickup3Grid { grid-template-columns:1fr; }
    .categoryIntro { padding:22px 20px; }
    .categoryIntro h2 { font-size:20px; }
    .columnCta { display:block; padding:26px 22px; }
    .columnCta a { display:inline-block; margin-top:14px; }
    .articleListItem { padding:22px 20px; }
    .categoryGrid { grid-template-columns:1fr; }
    .columnGuide { padding:22px 20px; }
}

/* ===================================================== */
/* 統一デザイン追記分 (2026-05-30 v2.4統合)               */
/* ===================================================== */
/* =====================================================
   電話帳ナビコラム 統一デザインCSS (column-v2.css)
   
   読み込み順:
   1. /common/css/master.css   (サイト共通)
   2. /column/css/column.css   (コラム既存)
   3. /column/css/column-v2.css  ← 本ファイル(最後に読み込み)
   
   対象: カテゴリTOP(.columnCategory) + 記事(.columnArticle)
   方針: 既存HTMLは触らず、CSSのみで TOPページの雰囲気を継承
   ===================================================== */

/* ========== 1. デザイントークン ========== */
:root {
  --col-navy-950: #061d2f;
  --col-navy-900: #0a2940;
  --col-navy-800: #103b5d;
  --col-navy-700: #15527e;
  --col-blue-600: #176aa0;
  --col-blue-500: #1c7dbb;
  --col-teal-700: #0d7377;
  --col-teal-600: #11959a;
  --col-yellow-500: #ffd61a;
  --col-yellow-400: #ffe066;
  --col-orange-500: #f39c12;
  --col-red-600: #d92d20;
  --col-text-main: #1a2733;
  --col-text-body: #1a2733;
  --col-text-muted: #4a5764;
  --col-text-strong: #061d2f;
  --col-line: #dce8f2;
  --col-line-strong: #bfd4e6;
  --col-shadow-sm: 0 8px 24px rgba(8, 35, 55, .08);
  --col-shadow-md: 0 18px 50px rgba(8, 35, 55, .14);
  --col-shadow-lg: 0 26px 70px rgba(8, 35, 55, .18);

  /* コラムTOP統合(v2.5)で追加 */
  --col-surface: #ffffff;
  --col-surface-2: #f5f9fc;
  --col-radius-md: 18px;
  --col-radius-lg: 28px;
  --col-radius-xl: 36px;
  --col-max: 1180px;
  --col-focus: 0 0 0 4px rgba(255, 214, 26, .45);
}

/* ========== 2. 共通: パンくず ========== */
.boxTy1 .breadcrumb {
  font-size: 14px;
  color: var(--col-text-muted);
  margin: 20px 0 18px;
}
.boxTy1 .breadcrumb a {
  color: var(--col-blue-600);
  font-weight: 700;
  text-decoration: none;
}
.boxTy1 .breadcrumb a:hover { text-decoration: underline; }
.boxTy1 .breadcrumb .breadcrumbSep {
  margin: 0 6px;
  color: var(--col-text-muted);
}

/* ========== 3. カテゴリTOP用 ========== */

/* カテゴリヒーロー(ドラマチックなグラデーション) */
.columnCategory .categoryHero {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: clamp(32px, 5vw, 56px);
  margin: 0 0 32px;
  background:
    linear-gradient(135deg, rgba(6, 29, 47, .98), rgba(16, 59, 93, .97) 48%, rgba(13, 115, 119, .94)),
    #082033;
  color: #fff;
  box-shadow: var(--col-shadow-lg);
  isolation: isolate;
}
.columnCategory .categoryHero::before,
.columnCategory .categoryHero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  z-index: -1;
  pointer-events: none;
}
.columnCategory .categoryHero::before {
  width: 460px; height: 460px;
  right: -160px; top: -200px;
  background: radial-gradient(circle, rgba(255, 214, 26, .34), rgba(255, 214, 26, .12) 40%, transparent 72%);
}
.columnCategory .categoryHero::after {
  width: 400px; height: 400px;
  left: -160px; bottom: -200px;
  background: radial-gradient(circle, rgba(23, 170, 169, .36), transparent 70%);
}
.columnCategory .categoryHero .categoryLeadLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .04em;
  margin: 0 0 32px;
  width: fit-content;
}
.columnCategory .categoryHero .categoryLeadLabel::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--col-yellow-500);
  box-shadow: 0 0 0 6px rgba(255, 214, 26, .16);
}
.columnCategory .categoryHero h2 {
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.32;
  font-weight: 900;
  margin: 0 0 20px;
  color: #fff;
  letter-spacing: .01em;
}
.columnCategory .categoryHero p {
  color: rgba(255, 255, 255, .94);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.9;
  margin: 0;
  max-width: 820px;
}

/* カテゴリTOPの検索ボックス */
.columnCategory .columnSearchBox {
  background: #fff;
  border: 1px solid var(--col-line);
  border-radius: 24px;
  padding: clamp(24px, 3.5vw, 32px);
  box-shadow: var(--col-shadow-sm);
  margin: 0 0 36px;
}
.columnCategory .columnSearchBox h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 10px;
  line-height: 1.4;
}
.columnCategory .columnSearchBox .columnSectionIntro {
  font-size: 16px;
  line-height: 1.85;
  color: var(--col-text-body);
  margin: 0 0 20px;
}
.columnCategory .columnSearchForm {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
}
.columnCategory .columnSearchForm input {
  min-height: 56px;
  border: 1.5px solid var(--col-line-strong);
  border-radius: 14px;
  padding: 0 20px;
  font-size: 16px;
  color: var(--col-text-main);
  background: #fff;
  outline: none;
}
.columnCategory .columnSearchForm input:focus {
  border-color: var(--col-yellow-500);
  box-shadow: 0 0 0 4px rgba(255, 214, 26, .25);
}
.columnCategory .columnSearchForm button {
  min-height: 56px;
  border: 0;
  border-radius: 14px;
  padding: 0 28px;
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  background: var(--col-navy-800);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(16, 59, 93, .25);
  transition: background .2s ease, transform .2s ease;
}
.columnCategory .columnSearchForm button:hover {
  background: var(--col-navy-900);
  transform: translateY(-1px);
}

/* セクション見出しの Kicker 風装飾 */
.columnCategory .pickup3Title::before,
.columnCategory .columnSection > h2:first-child::before,
.columnCategory .categoryIntro > h2:first-child::before,
.columnArticle .conclusion h2::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: var(--col-yellow-500);
  vertical-align: middle;
  margin-right: 12px;
  transform: translateY(-4px);
}

/* まず読みたい記事3本 */
.columnCategory .pickup3Section { margin: 0 0 48px; }
.columnCategory .pickup3Title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 22px;
  line-height: 1.4;
}
.columnCategory .pickup3Grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.columnCategory .pickup3Card {
  display: block;
  position: relative;
  background: #fff;
  border: 1px solid var(--col-line);
  border-radius: 24px;
  padding: 26px;
  box-shadow: var(--col-shadow-sm);
  color: var(--col-text-main);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
.columnCategory .pickup3Card::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -60px;
  top: -60px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(23, 170, 169, .14), transparent 68%);
  pointer-events: none;
}
.columnCategory .pickup3Card:hover {
  transform: translateY(-2px);
  box-shadow: var(--col-shadow-md);
  border-color: rgba(23, 170, 169, .42);
}
.columnCategory .pickup3Tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eaf5ff;
  color: var(--col-blue-600);
  font-size: 12px;
  font-weight: 900;
  margin: 0 0 12px;
}
.columnCategory .pickup3CardTitle {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 12px;
}
.columnCategory .pickup3Card:hover .pickup3CardTitle {
  color: var(--col-blue-600);
}
.columnCategory .pickup3CardLead {
  font-size: 14px;
  line-height: 1.8;
  color: var(--col-text-body);
  margin: 0;
}

/* カテゴリ説明文 */
.columnCategory .categoryIntro { margin: 0 0 48px; }
.columnCategory .categoryIntro h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 18px;
  line-height: 1.4;
}
.columnCategory .categoryIntro h3 {
  font-size: 19px;
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 32px 0 14px;
  padding-left: 14px;
  border-left: 5px solid var(--col-yellow-500);
  line-height: 1.5;
}
.columnCategory .categoryIntro p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--col-text-body);
  margin: 0 0 14px;
}
.columnCategory .categoryIntro p strong {
  font-weight: 900;
}
.columnCategory .categoryIntro a {
  color: var(--col-blue-600);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.columnCategory .categoryIntro ul {
  background: #f5f9fc;
  border-left: 5px solid var(--col-blue-600);
  border-radius: 4px;
  padding: 18px 18px 18px 36px;
  margin: 0 0 14px;
}
.columnCategory .categoryIntro ul li {
  font-size: 15px;
  line-height: 1.9;
  color: var(--col-text-body);
  margin-bottom: 6px;
}

/* カテゴリ記事一覧 */
.columnCategory .columnSection { margin: 0 0 48px; }
.columnCategory .columnSection > h2:first-child {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 12px;
  line-height: 1.4;
}
.columnCategory .columnSection .columnSectionIntro {
  font-size: 16px;
  line-height: 1.85;
  color: var(--col-text-body);
  margin: 0 0 24px;
}
.columnCategory .articleList { display: grid; gap: 16px; }
.columnCategory .articleListItem {
  background: #fff;
  border: 1px solid var(--col-line);
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: var(--col-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.columnCategory .articleListItem:hover {
  transform: translateY(-2px);
  box-shadow: var(--col-shadow-md);
  border-color: rgba(23, 170, 169, .42);
}
.columnCategory .articleListMeta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--col-text-muted);
  margin: 0 0 10px;
}
.columnCategory .articleListTag {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: #eaf5ff;
  color: var(--col-blue-600);
  font-size: 12px;
  font-weight: 900;
}
.columnCategory .articleListItem h3 {
  font-size: 19px;
  line-height: 1.5;
  font-weight: 900;
  margin: 0 0 10px;
}
.columnCategory .articleListItem h3 a {
  color: var(--col-text-strong);
  text-decoration: none;
}
.columnCategory .articleListItem:hover h3 a {
  color: var(--col-blue-600);
}
.columnCategory .articleListItem p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--col-text-body);
  margin: 0;
}

/* カテゴリTOPのCTA(濃紺グラデ + 黄色文字ボタン) */
.columnCategory .columnCta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: clamp(28px, 4vw, 40px);
  border-radius: 32px;
  background: linear-gradient(135deg, var(--col-navy-900), var(--col-teal-700));
  color: #fff;
  box-shadow: var(--col-shadow-lg);
  margin: 0 0 48px;
}
.columnCategory .columnCta h2 {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 900;
  margin: 0 0 8px;
  color: #fff;
  line-height: 1.4;
}
.columnCategory .columnCta p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
  margin: 0;
}
.columnCategory .columnCta > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--col-navy-950) !important;
  color: #ffffff !important;
  border: 2px solid var(--col-yellow-500);
  font-weight: 900;
  font-size: 16px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease;
}
.columnCategory .columnCta > a:hover {
  transform: translateY(-2px);
  background: #051a30;
}

/* ========== 4. 記事ページ用 ========== */

/* 記事ヘッダー(小型ヒーロー化) */
.columnArticle .articleHeader {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: clamp(28px, 4vw, 44px);
  margin: 0 0 28px;
  background:
    linear-gradient(135deg, rgba(6, 29, 47, .98), rgba(16, 59, 93, .97) 48%, rgba(13, 115, 119, .94)),
    #082033;
  color: #fff;
  box-shadow: var(--col-shadow-lg);
  isolation: isolate;
}
.columnArticle .articleHeader::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  right: -140px;
  top: -180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 214, 26, .30), transparent 72%);
  z-index: -1;
  pointer-events: none;
}
.columnArticle .articleHeader::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  left: -140px;
  bottom: -180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(23, 170, 169, .32), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.columnArticle .articleCategoryLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .04em;
  margin: 0 0 18px;
}
.columnArticle .articleCategoryLabel::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--col-yellow-500);
  box-shadow: 0 0 0 6px rgba(255, 214, 26, .16);
}
.columnArticle .articleHeader .articleTitle {
  font-size: clamp(22px, 3.4vw, 38px);
  line-height: 1.32;
  font-weight: 900;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: .01em;
}
.columnArticle .articleHeader .titleSub {
  display: block;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  color: var(--col-yellow-500);
  margin-top: 8px;
  letter-spacing: .02em;
}
.columnArticle .articleHeader .articleMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
  margin: 0;
}
.columnArticle .articleHeader .articleMeta time { color: rgba(255, 255, 255, .82); }
.columnArticle .articleHeader .articleMeta .authorLink {
  color: var(--col-yellow-500);
  font-weight: 800;
  text-decoration: none;
}
.columnArticle .articleHeader .articleMeta .authorLink:hover {
  text-decoration: underline;
}

/* 記事ヒーロー画像 */
.columnArticle .articleHero {
  border-radius: 24px;
  overflow: hidden;
  margin: 0 0 28px;
  box-shadow: var(--col-shadow-sm);
}
.columnArticle .articleHero svg { display: block; }

/* 結論セクション */
.columnArticle .conclusion {
  position: relative;
  background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 58%, #fff9e6 100%);
  border: 1px solid var(--col-line);
  border-radius: 24px;
  padding: clamp(26px, 3.5vw, 36px);
  margin: 0 0 32px;
  box-shadow: var(--col-shadow-sm);
}
.columnArticle .conclusionTag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--col-yellow-500), var(--col-yellow-400));
  color: var(--col-navy-950);
  font-weight: 900;
  font-size: 13px;
  margin: 0 0 16px;
}
.columnArticle .conclusion h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 16px;
  line-height: 1.4;
}
.columnArticle .conclusionLead {
  font-size: 17px;
  line-height: 1.95;
  color: var(--col-text-body);
  margin: 0 0 22px;
}
.columnArticle .conclusionCards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.columnArticle .conclusionCard {
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--col-line);
  border-radius: 18px;
  padding: 20px;
}
.columnArticle .conclusionCard .ccLabel {
  display: inline-block;
  width: auto;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--col-blue-600);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  margin: 0 0 12px;
}
.columnArticle .conclusionCard .ccTitle {
  font-size: 17px;
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 8px;
}
.columnArticle .conclusionCard p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--col-text-body);
  margin: 0;
}

/* 目次 */
.columnArticle .toc {
  background: #f5f9fc;
  border: 1px solid var(--col-line);
  border-radius: 18px;
  padding: 22px 26px;
  margin: 0 0 36px;
}
.columnArticle .tocTitle {
  font-size: 17px;
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 12px;
}
.columnArticle .tocList { margin: 0; padding: 0; list-style: none; }
.columnArticle .tocList li {
  position: relative;
  padding-left: 0;
  font-size: 15px;
  line-height: 1.9;
}
/* v2.9: 目次の番号は .tocList a::before（青い連番）を正とする。
   黄色丸も、v2.9で一時追加した counter(toc) "." の重複番号も出力しない。 */
.columnArticle .tocList li::before {
  content: none;
}
.columnArticle .tocList a {
  color: var(--col-blue-600);
  font-weight: 700;
  text-decoration: none;
}
.columnArticle .tocList a:hover { text-decoration: underline; }

/* 本文の見出し */
.columnArticle .boxTy1 > h2,
.columnArticle .columnArticle > h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 44px 0 18px;
  padding: 0 0 0 18px;
  border-left: 6px solid var(--col-yellow-500);
  line-height: 1.4;
}
.columnArticle h3 {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 28px 0 14px;
  line-height: 1.5;
}
.columnArticle p {
  font-size: 16px;
  line-height: 1.95;
  color: var(--col-text-body);
}
.columnArticle a {
  color: var(--col-blue-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}

/* KeyPoint */
.columnArticle .keyPoint {
  background: rgba(255, 214, 26, .14);
  border-left: 5px solid var(--col-yellow-500);
  border-radius: 4px 16px 16px 4px;
  padding: 18px 22px;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--col-text-body);
}
/* keyPoint内の強調は赤太字
   v2.29 (2026-08-24): var(--col-red-600)=#d92d20 は .keyPoint の実効背景
   #f6f3dc〜#fff9df に対し 4.32〜4.58:1 でAA境界のため #A00000（7.53〜7.98:1、
   AA/AAA両クリア）へ直接編集で引き上げ。他所の --col-red-600 参照は維持する。 */
.columnArticle .keyPoint b {
  color: #A00000;
  font-weight: 900;
}

/* FlowBox */
.columnArticle .flowBox {
  background: #fff;
  border: 1px solid var(--col-line);
  border-radius: 24px;
  padding: clamp(20px, 3vw, 28px);
  margin: 24px 0;
  box-shadow: var(--col-shadow-sm);
}
.columnArticle .flowCaption {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--col-text-muted);
  margin: 12px 0 0;
}

/* 比較テーブル */
.columnArticle .compareWrap {
  overflow-x: auto;
  margin: 0 0 24px;
  border-radius: 16px;
  border: 1px solid var(--col-line);
  background: #fff;
  box-shadow: var(--col-shadow-sm);
}
.columnArticle .compareTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.columnArticle .compareTable thead th {
  background: var(--col-navy-900);
  color: #fff;
  font-weight: 900;
  padding: 14px 16px;
  text-align: left;
  line-height: 1.5;
}
.columnArticle .compareTable tbody th {
  background: #f5f9fc;
  color: var(--col-text-strong);
  font-weight: 900;
  padding: 14px 16px;
  text-align: left;
  border-top: 1px solid var(--col-line);
  white-space: nowrap;
  line-height: 1.6;
}
.columnArticle .compareTable tbody td {
  padding: 14px 16px;
  color: var(--col-text-body);
  border-top: 1px solid var(--col-line);
  line-height: 1.7;
}

/* データボックス(実績訴求) */
.columnArticle .dataBox {
  background: linear-gradient(135deg, #fff8db, #ffffff 60%, #f5fbff);
  border: 1px solid #f2cf8a;
  border-radius: 24px;
  padding: clamp(22px, 3.5vw, 32px);
  margin: 0 0 28px;
  box-shadow: var(--col-shadow-sm);
}
.columnArticle .dataBoxTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 18px;
  line-height: 1.5;
}
.columnArticle .dataStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.columnArticle .dataStat {
  background: #fff;
  border: 1px solid var(--col-line);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}
.columnArticle .dataStat b {
  display: block;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 900;
  color: var(--col-navy-900);
  line-height: 1.2;
  margin: 0 0 4px;
}
.columnArticle .dataStat span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--col-text-muted);
}
.columnArticle .dataBox p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--col-text-body);
  margin: 0 0 12px;
}
.columnArticle .dataBox p:last-child { margin-bottom: 0; }

/* インラインCTA(濃紺グラデ + 黄色ボタン) */
.columnArticle .ctaInline {
  display: grid;
  gap: 16px;
  padding: clamp(24px, 3.5vw, 32px);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--col-navy-900), var(--col-teal-700));
  color: #fff;
  margin: 32px 0;
  box-shadow: var(--col-shadow-lg);
  text-align: center;
}
.columnArticle .ctaInline h3 {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 900;
  color: #fff;
  margin: 0;
  line-height: 1.45;
}
.columnArticle .ctaInline p {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .92);
  margin: 0;
}
.columnArticle .ctaInline a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--col-navy-950) !important;
  color: #ffffff !important;
  border: 2px solid var(--col-yellow-500);
  font-weight: 900;
  font-size: 16px;
  text-decoration: none !important;
  transition: transform .2s ease, background .2s ease;
}
.columnArticle .ctaInline a:hover {
  transform: translateY(-2px);
  background: #051a30;
}

/* ruleList(手順番号) */
.columnArticle .ruleList {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  counter-reset: rule;
}
.columnArticle .ruleList > li {
  counter-increment: rule;
  position: relative;
  background: #fff;
  border: 1px solid var(--col-line);
  border-radius: 18px;
  padding: 22px 22px 22px 78px;
  margin: 0 0 14px;
  box-shadow: var(--col-shadow-sm);
}
.columnArticle .ruleList > li::before {
  content: counter(rule);
  position: absolute;
  left: 20px;
  top: 22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--col-blue-600);
  color: #fff;
  font-weight: 900;
  font-size: 19px;
}
.columnArticle .ruleList > li h3, .columnArticle .ruleList > li h4 {
  font-size: 17px;
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 8px;
  line-height: 1.5;
}
.columnArticle .ruleList > li p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--col-text-body);
  margin: 0;
}

/* FAQ(Q/Aバッジ) */
.columnArticle .faqList {
  display: grid;
  gap: 16px;
  margin: 0 0 28px;
}
.columnArticle .faqItem {
  background: #fff;
  border: 1px solid var(--col-line);
  border-radius: 18px;
  padding: 22px 26px;
  box-shadow: var(--col-shadow-sm);
}
.columnArticle .faqItem .faqQ {
  position: relative;
  padding-left: 40px;
  font-size: 17px;
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 12px;
  line-height: 1.55;
}
.columnArticle .faqItem .faqQ::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--col-teal-700);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}
.columnArticle .faqItem .faqA {
  position: relative;
  padding-left: 40px;
  font-size: 16px;
  line-height: 1.95;
  color: var(--col-text-body);
  margin: 0;
}
.columnArticle .faqItem .faqA::before {
  content: "A";
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--col-yellow-500);
  color: var(--col-navy-950);
  font-size: 14px;
  font-weight: 900;
}

/* まとめ */
.columnArticle .summary {
  background: linear-gradient(135deg, #f5f9fc, #ffffff);
  border: 1px solid var(--col-line);
  border-radius: 24px;
  padding: clamp(22px, 3.5vw, 30px);
  margin: 0 0 28px;
  box-shadow: var(--col-shadow-sm);
}
.columnArticle .summary h3 {
  font-size: 19px;
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 5px solid var(--col-yellow-500);
  line-height: 1.5;
}
.columnArticle .summary ul {
  margin: 0;
  padding: 0 0 0 22px;
}
.columnArticle .summary li {
  font-size: 15px;
  line-height: 1.95;
  color: var(--col-text-body);
  margin-bottom: 8px;
}

/* 編集者カード */
.columnArticle .editorCard {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 22px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--col-line);
  border-radius: 24px;
  padding: 24px;
  margin: 0 0 28px;
  box-shadow: var(--col-shadow-sm);
}
.columnArticle .editorAvatar {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--col-navy-900), var(--col-teal-700));
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  text-align: center;
  line-height: 1.4;
}
.columnArticle .editorInfo h3 {
  font-size: 18px;
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 4px;
  line-height: 1.5;
}
.columnArticle .editorSubtitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--col-teal-700);
  margin: 0 0 10px;
}
.columnArticle .editorInfo p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--col-text-body);
  margin: 0 0 10px;
}
.columnArticle .editorInfo .editorLink {
  display: inline-block;
  color: var(--col-blue-600);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
}
.columnArticle .editorInfo .editorLink:hover {
  text-decoration: underline;
}

/* アプリ紹介 */
.columnArticle .appPromo {
  background: linear-gradient(135deg, #fff8db, #ffffff 60%, #f5fbff);
  border: 1px solid #f2cf8a;
  border-radius: 24px;
  padding: clamp(24px, 3.5vw, 32px);
  margin: 0 0 28px;
  box-shadow: var(--col-shadow-md);
}
.columnArticle .appPromo h2 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 14px;
  padding: 0;
  border-left: 0;
  line-height: 1.4;
}
.columnArticle .appPromo p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--col-text-body);
  margin: 0 0 18px;
}

/* 関連記事 */
.columnArticle .relatedSection { margin: 0 0 28px; }
.columnArticle .relatedTitle {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 18px;
  padding: 0 0 0 18px;
  border-left: 6px solid var(--col-yellow-500);
  line-height: 1.4;
}
.columnArticle .relatedGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.columnArticle .relatedCard {
  display: block;
  background: #fff;
  border: 1px solid var(--col-line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--col-shadow-sm);
  text-decoration: none;
  color: var(--col-text-main);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.columnArticle .relatedCard:hover {
  transform: translateY(-2px);
  box-shadow: var(--col-shadow-md);
  border-color: rgba(23, 170, 169, .42);
}
.columnArticle .relatedCardTag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eaf5ff;
  color: var(--col-blue-600);
  font-size: 12px;
  font-weight: 900;
  margin: 0 0 12px;
}
.columnArticle .relatedCardTitle {
  font-size: 16px;
  line-height: 1.55;
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0;
}
.columnArticle .relatedCard:hover .relatedCardTitle {
  color: var(--col-blue-600);
}

/* ========== 5. 共通: 参考情報セクション ========== */
.columnCategory .referenceLinks,
.columnArticle .referenceLinks {
  background: #eaf2fb;
  border-left: 5px solid var(--col-blue-600);
  border-radius: 4px;
  padding: clamp(22px, 3.5vw, 30px);
  margin: 0 0 28px;
}
.columnCategory .referenceLinksTitle,
.columnArticle .referenceLinksTitle {
  font-size: 19px;
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 14px;
  line-height: 1.5;
}
.columnCategory .referenceLinks > p,
.columnArticle .referenceLinks > p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--col-text-body);
  margin: 0 0 12px;
}
.columnCategory .referenceLinksList,
.columnArticle .referenceLinksList {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.columnCategory .referenceLinksList li,
.columnArticle .referenceLinksList li {
  font-size: 16px;
  line-height: 2;
  color: var(--col-text-body);
}
/* アクションリンク(#9110, 188, 110, 119)は赤太字
   v2.22 (2026-07-14): v2.18(A)の再適用。var(--col-red-600)=#d92d20 は
   背景 #eaf2fb に対し約4.27:1でAA未達のため #A00000（約7.45:1、AA/AAA両クリア）
   へ直接編集で引き上げ。末尾追記方式は切断リスクのため使用しない。 */
.columnCategory .referenceLinksList li strong,
.columnArticle .referenceLinksList li strong {
  color: #A00000;
  font-weight: 900;
}
/* 情報リンク(国民生活センター・消費者庁)は青色 */
.columnCategory .referenceLinksList li a,
.columnArticle .referenceLinksList li a {
  color: var(--col-blue-600);
  font-weight: 900;
  text-decoration: none;
}
.columnCategory .referenceLinksList li a:hover,
.columnArticle .referenceLinksList li a:hover {
  text-decoration: underline;
}
.columnCategory .referenceLinksNote,
.columnArticle .referenceLinksNote {
  font-size: 13px;
  line-height: 1.8;
  color: var(--col-text-muted);
  margin: 14px 0 0;
}

/* ========== 6. レスポンシブ ========== */
@media (max-width: 980px) {
  .columnCategory .pickup3Grid,
  .columnArticle .conclusionCards,
  .columnArticle .dataStats,
  .columnArticle .relatedGrid {
    grid-template-columns: 1fr;
  }
  .columnCategory .columnCta {
    grid-template-columns: 1fr;
  }
  .columnArticle .editorCard {
    grid-template-columns: 80px 1fr;
    gap: 16px;
  }
}

@media (max-width: 800px) {
  .columnArticle .editorCard {
    display: block;
    text-align: left;
  }
  .columnArticle .editorAvatar {
    float: left;
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    margin: 0 14px 8px 0;
  }
  .columnArticle .editorInfo > p:not(.editorSubtitle),
  .columnArticle .editorInfo > .editorProfiles,
  .columnArticle .editorInfo > .editorLink {
    clear: left;
  }
}

@media (max-width: 760px) {
  .columnCategory .categoryHero,
  .columnArticle .articleHeader {
    border-radius: 22px;
    padding: 24px 20px;
  }
  .columnCategory .categoryHero h2,
  .columnArticle .articleHeader .articleTitle {
    font-size: clamp(20px, 6vw, 28px);
  }
  .columnCategory .columnSearchForm,
  .columnArticle .ruleList > li {
    grid-template-columns: 1fr;
  }
  .columnArticle .ruleList > li {
    padding: 60px 20px 20px;
  }
  .columnArticle .ruleList > li::before {
    top: 18px;
    left: 18px;
    width: 38px;
    height: 38px;
    font-size: 17px;
  }
  .columnArticle .boxTy1 > h2,
  .columnCategory .categoryIntro h2,
  .columnArticle .conclusion h2 {
    font-size: clamp(20px, 4.5vw, 26px);
  }
}

@media (max-width: 480px) {
  .columnArticle .faqItem .faqQ,
  .columnArticle .faqItem .faqA {
    padding-left: 36px;
  }
  .columnArticle .faqItem .faqQ::before,
  .columnArticle .faqItem .faqA::before {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
}

/* ===================================================== */
/* コラムTOP統合分 (2026-05-30 v2.5)                      */
/* sample-v2.html インラインCSS → 外部CSS統合             */
/* 名前空間: .col-*                                       */
/* ===================================================== */

.col-container { width: min(calc(100% - 32px), var(--col-max)); margin-inline: auto; }

.col-main {
  color: var(--col-text-main);
  font-size: 18px;
  line-height: 1.9;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 214, 26, .10) 0, transparent 34rem),
    radial-gradient(circle at 88% 8%, rgba(23, 170, 169, .12) 0, transparent 32rem),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 56%, #f4f8fb 100%);
  padding-bottom: 40px;
}

.col-main a { color: inherit; text-decoration: none; }
.col-main img, .col-main svg { max-width: 100%; }
.col-main button, .col-main input { font: inherit; }
.col-main :focus-visible { outline: none; box-shadow: var(--col-focus); border-radius: 10px; }
.col-main h1, .col-main h2, .col-main h3, .col-main p { margin-top: 0; }

.col-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  color: var(--col-text-muted); font-size: 14px;
  margin: 20px 0 14px;
}
.col-breadcrumb a { color: var(--col-blue-600); font-weight: 700; }

/* ============ ヒーロー ============ */
.col-hero {
  position: relative; overflow: hidden;
  border-radius: var(--col-radius-xl);
  background:
    linear-gradient(135deg, rgba(6, 29, 47, .98), rgba(16, 59, 93, .97) 48%, rgba(13, 115, 119, .94)),
    #082033;
  color: #fff;
  box-shadow: var(--col-shadow-lg);
  isolation: isolate;
}
.col-hero::before, .col-hero::after {
  content: ""; position: absolute; border-radius: 999px;
  z-index: -1; pointer-events: none;
}
.col-hero::before {
  width: 520px; height: 520px; right: -160px; top: -220px;
  background: radial-gradient(circle, rgba(255, 214, 26, .34) 0, rgba(255, 214, 26, .12) 40%, transparent 72%);
}
.col-hero::after {
  width: 460px; height: 460px; left: -180px; bottom: -220px;
  background: radial-gradient(circle, rgba(23, 170, 169, .36) 0, rgba(23, 170, 169, .12) 42%, transparent 70%);
}

.col-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .75fr);
  gap: 34px; align-items: center;
  padding: clamp(32px, 6vw, 68px);
}

.col-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content; padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.95);
  font-weight: 900; font-size: 14px; letter-spacing: .04em;
}
.col-eyebrow::before {
  content: ""; width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--col-yellow-500);
  box-shadow: 0 0 0 6px rgba(255, 214, 26, .16);
  /* v2.27: colPulse装飾アニメを削除し終端状態（上記box-shadow）で固定 */
}

.col-hero h1 {
  margin: 18px 0 18px;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.18; letter-spacing: .01em; font-weight: 900;
  color: #fff;
}
.col-hero h1 span {
  color: var(--col-yellow-500);
  text-decoration: underline;
  text-decoration-color: rgba(255, 214, 26, .38);
  text-decoration-thickness: .25em;
  text-underline-offset: -.12em;
}

.col-hero-lead {
  color: rgba(255,255,255,.95);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.9; max-width: 720px;
  margin-bottom: 28px;
}

.col-hero-actions {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-bottom: 28px;
}

/* 高コントラストCTA(暗色・黄色文字でハッキリと) */
.col-cta-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 0 28px;
  border-radius: 999px;
  background: #0a2540;             /* 濃紺(ヒーロー背景より暗い) */
  color: var(--col-yellow-500);    /* 明るい黄色文字 */
  border: 2px solid var(--col-yellow-500);
  font-weight: 900; font-size: 17px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .35);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  cursor: pointer;
}
.col-cta-button:hover {
  transform: translateY(-2px);
  background: #051a30;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.col-cta-button.secondary {
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: none;
}
.col-cta-button.secondary:hover {
  background: rgba(255,255,255,.22);
}

.col-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; max-width: 740px;
}
.col-stat-pill {
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.10);
}
.col-stat-pill strong {
  display: block;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.2; color: #fff;
  letter-spacing: .01em; font-weight: 900;
}
.col-stat-pill span {
  display: block; margin-top: 4px;
  color: rgba(255,255,255,.82);
  font-size: 13px; font-weight: 700;
}

.col-hero-visual {
  position: relative; min-height: 360px;
  display: grid; place-items: center;
}
.col-hero-visual > svg {
  filter: drop-shadow(0 28px 45px rgba(0,0,0,.26));
  animation: colFloatPhone 6s ease-in-out infinite;
}
@keyframes colFloatPhone {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.col-floating-card {
  position: absolute;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 18px;
  background: rgba(255,255,255,.96);
  color: var(--col-navy-900);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
  font-weight: 900; font-size: 14px;
  animation: colFloatY 5s ease-in-out infinite;
}
.col-floating-card svg { filter: none; width: 24px; height: 24px; color: var(--col-teal-700); }
.col-floating-card.card-a { left: 0; top: 58px; }
.col-floating-card.card-b { right: 0; bottom: 70px; animation-delay: -1.2s; }
.col-floating-card.card-c { left: 30px; bottom: 32px; animation-delay: -2.2s; }
@keyframes colFloatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ============ アプリ紹介セクション(ヒーロー直下) ============ */
.col-app-intro {
  position: relative; z-index: 2;
  margin-top: -30px;
  background: linear-gradient(135deg, #fff8db, #ffffff 60%, #f5fbff);
  border: 1px solid rgba(242, 207, 138, .8);
  border-radius: var(--col-radius-lg);
  box-shadow: var(--col-shadow-md);
  padding: clamp(24px, 3.5vw, 36px);
}
.col-app-intro h2 {
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.4;
  color: var(--col-text-strong);
  font-weight: 900;
  margin-bottom: 14px;
}
.col-app-intro p {
  font-size: 17px;
  line-height: 1.9;
  color: var(--col-text-body);
  margin-bottom: 20px;
}

/* ストアバッジ(画像ベース) */
.col-store-badges {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
  padding-left: 5px;
  margin-top: 8px;
}
.col-store-link {
  display: block;
  width: 150px;
  transition: transform .2s ease;
}
.col-store-link:hover { transform: translateY(-2px); }
.col-store-image {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 4px;
  border-radius: 10px;
}
.col-store-label {
  display: block;
  font-size: 14px;
  color: #555;
  text-align: center;
  font-weight: 700;
}

/* ============ セクション共通 ============ */
.col-section { padding: clamp(48px, 6vw, 80px) 0 0; }

.col-section-heading {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px; align-items: end;
  margin-bottom: 28px;
}

/* v2.8: HTMLは全て .sectionKicker に統一済み。.col-section-kicker は後方互換のため併記で残置（スタイルは同一）。 */
.sectionKicker,
.col-section-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--col-teal-700);
  font-weight: 900; font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sectionKicker::before,
.col-section-kicker::before {
  content: ""; width: 22px; height: 4px;
  border-radius: 999px; background: var(--col-yellow-500);
}

.col-section-title {
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.32; margin: 0;
  color: var(--col-text-strong);
  letter-spacing: .01em; font-weight: 900;
}

.col-view-all {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--col-line);
  border-radius: 999px;
  color: var(--col-navy-800); background: #fff;
  font-weight: 900;
  box-shadow: var(--col-shadow-sm);
  white-space: nowrap; font-size: 15px;
}

/* ============ Popular(全体クリッカブル) ============ */
.col-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.col-feature-card-link {
  display: block;
  position: relative;
  border-radius: var(--col-radius-lg);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.col-feature-card-link:hover { transform: translateY(-2px); }
.col-feature-card-link:hover .col-feature-card {
  box-shadow: var(--col-shadow-md);
  border-color: rgba(23, 170, 169, .5);
}
.col-feature-card-link:hover h3 { color: var(--col-blue-600); }

.col-feature-card {
  position: relative; min-height: 280px; overflow: hidden;
  border: 1px solid var(--col-line);
  border-radius: var(--col-radius-lg);
  background: #fff;
  box-shadow: var(--col-shadow-sm);
  padding: 28px;
  transition: box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.col-feature-card::after {
  content: ""; position: absolute;
  width: 180px; height: 180px; right: -70px; top: -70px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(23, 170, 169, .14), transparent 68%);
  pointer-events: none;
}
.col-feature-icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, #e6f7f7, #fff7cd);
  color: var(--col-teal-700);
}
.col-feature-icon svg { width: 38px; height: 38px; }

.col-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eaf5ff; color: var(--col-blue-600);
  font-size: 13px; font-weight: 900;
  margin-bottom: 12px;
  width: fit-content;
}

.col-feature-card h3 {
  margin-bottom: 14px;
  color: var(--col-text-strong);
  font-size: 22px; line-height: 1.5; font-weight: 900;
  transition: color .2s ease;
}
.col-feature-card p {
  margin-bottom: 18px;
  color: var(--col-text-body);
  font-size: 16px; line-height: 1.8;
  flex-grow: 1;
}
.col-article-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--col-blue-600); font-weight: 900; font-size: 15px;
}

/* ============ 電話帳ナビコラムの目的 ============ */
.col-purpose-card {
  position: relative; overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 34px; align-items: center;
  border: 1px solid rgba(191, 212, 230, .95);
  border-radius: var(--col-radius-xl);
  background: linear-gradient(135deg, #f0f8ff, #ffffff 58%, #fff9e6);
  box-shadow: var(--col-shadow-sm);
  padding: clamp(28px, 4vw, 44px);
}
.col-purpose-card h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.34;
  margin-bottom: 18px;
  color: var(--col-text-strong); font-weight: 900;
}
.col-purpose-card p {
  color: var(--col-text-body);
  font-size: 18px; line-height: 1.95;
  margin-bottom: 18px;
}

.col-trust-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0 26px;
}
.col-trust-item {
  padding: 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--col-line);
}
.col-trust-item strong {
  display: block;
  color: var(--col-red-600);
  margin-bottom: 8px;
  font-size: 16px; font-weight: 900;
}
.col-trust-item span {
  display: block;
  color: var(--col-text-body);
  font-size: 15px; line-height: 1.8;
}

.col-purpose-visual { display: grid; place-items: center; }
.col-purpose-visual svg {
  animation: colFloatPhone 7s ease-in-out infinite;
  animation-delay: -1s;
}

.col-app-shift {
  margin-top: 20px;
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(255, 214, 26, .14);
  border-left: 5px solid var(--col-yellow-500);
  font-size: 16px; line-height: 1.9;
  color: var(--col-text-body);
}
.col-app-shift strong { color: var(--col-text-strong); font-weight: 900; }

/* ============ カテゴリ(文字サイズUP) ============ */
.col-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.col-category-card {
  position: relative; overflow: hidden;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  min-height: 240px;
  border: 1px solid var(--col-line);
  border-radius: var(--col-radius-lg);
  background: #fff;
  padding: 26px;
  box-shadow: var(--col-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.col-category-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--col-shadow-md);
  border-color: rgba(23, 170, 169, .42);
}
.col-category-card::before {
  content: ""; position: absolute;
  inset: auto -80px -100px auto;
  width: 210px; height: 210px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 214, 26, .16), transparent 70%);
  pointer-events: none;
}
.col-category-icon {
  width: 76px; height: 76px;
  display: grid; place-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, #eef8ff, #ecfbf7);
  color: var(--col-blue-600);
}
.col-category-icon svg { width: 42px; height: 42px; }

.col-category-card h3 {
  margin: 0 0 10px;
  font-size: 22px; line-height: 1.4;
  color: var(--col-text-strong); font-weight: 900;
}
.col-category-card h3 a:hover { color: var(--col-blue-600); }
.col-category-card p {
  margin-bottom: 16px;
  color: var(--col-text-body);
  font-size: 16px; line-height: 1.8;
}

/* コラム見出し(各カテゴリ内の記事リンク)を大きく */
.col-category-links {
  display: grid; gap: 10px; margin: 0; padding: 0;
  list-style: none;
}
.col-category-links a {
  position: relative; display: inline-flex; align-items: baseline; gap: 10px;
  width: fit-content;
  color: var(--col-blue-600);
  font-weight: 800; font-size: 17px; line-height: 1.65;
}
.col-category-links a:hover { color: var(--col-navy-800); text-decoration: underline; }
.col-category-links a::before {
  content: ""; width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--col-yellow-500);
  flex: 0 0 7px; margin-top: .65em;
}

/* ============ 電話帳ナビの使い方ガイド(従来形式) ============ */
.col-guide {
  background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 58%, #fff9e6 100%);
  border: 1px solid var(--col-line);
  border-radius: var(--col-radius-lg);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--col-shadow-sm);
}
.col-guide h2 {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.34;
  color: var(--col-text-strong);
  font-weight: 900;
  margin-bottom: 14px;
}
.col-guide-lead {
  font-size: 17px;
  line-height: 1.9;
  color: var(--col-text-body);
  margin-bottom: 28px;
}
.col-guide-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  counter-reset: guidestep;
}
.col-guide-steps li {
  counter-increment: guidestep;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--col-line);
  font-size: 17px;
  line-height: 1.9;
  color: var(--col-text-body);
}
.col-guide-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.col-guide-steps li::before {
  content: counter(guidestep);
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--col-blue-600);
  color: #fff;
  font-weight: 900; font-size: 19px;
}

/* ============ FAQ(従来形式・静的) ============ */
.col-faq h2 {
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.34;
  color: var(--col-text-strong);
  font-weight: 900;
  margin-bottom: 24px;
}
.col-faq-list {
  display: grid;
  gap: 16px;
}
.col-faq-item {
  background: #fff;
  border: 1px solid var(--col-line);
  border-radius: 16px;
  padding: 22px 26px;
  box-shadow: var(--col-shadow-sm);
}
.col-faq-item h3 {
  font-size: 19px;
  line-height: 1.55;
  color: var(--col-text-strong);
  font-weight: 900;
  margin: 0 0 12px;
  padding-left: 36px;
  position: relative;
}
.col-faq-item h3::before {
  content: "Q";
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--col-teal-700);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}
.col-faq-item p {
  margin: 0;
  font-size: 17px;
  line-height: 1.95;
  color: var(--col-text-body);
  padding-left: 36px;
  position: relative;
}
.col-faq-item p::before {
  content: "A";
  position: absolute;
  left: 0; top: 2px;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--col-yellow-500);
  color: var(--col-navy-950);
  font-size: 14px;
  font-weight: 900;
}

/* ============ 検索パネル(参考情報の前) ============ */
.col-search-panel {
  background: #fff;
  border: 1px solid var(--col-line);
  border-radius: var(--col-radius-lg);
  padding: clamp(24px, 3.5vw, 32px);
  box-shadow: var(--col-shadow-sm);
}
.col-search-panel h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.4;
  color: var(--col-text-strong);
  font-weight: 900;
  margin-bottom: 10px;
}
.col-search-panel p {
  color: var(--col-text-body);
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 20px;
}
.col-search-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
}
.col-search-form input {
  min-height: 58px;
  border-radius: 14px;
  border: 1.5px solid var(--col-line-strong);
  padding: 0 20px;
  color: var(--col-text-main);
  background: #fff;
  outline: none;
  font-size: 17px;
}
.col-search-form input:focus {
  box-shadow: var(--col-focus);
  border-color: var(--col-yellow-500);
}
.col-search-form button {
  min-height: 58px;
  border: 0;
  border-radius: 14px;
  padding: 0 28px;
  color: #fff;
  background: var(--col-navy-800);
  font-weight: 900;
  font-size: 17px;
  box-shadow: 0 8px 22px rgba(16, 59, 93, .25);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.col-search-form button:hover {
  background: var(--col-navy-900);
  transform: translateY(-1px);
}

/* ============ 参考情報 ============ */
.col-ref {
  margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px) 24px;
  border-left: 5px solid var(--col-blue-600);
  background: #eaf2fb;
  border-radius: 4px;
}
.col-ref h2 {
  font-size: 21px;
  font-weight: 900;
  color: var(--col-text-strong);
  margin: 0 0 14px;
  line-height: 1.5;
}
.col-ref > p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--col-text-body);
  margin: 0 0 12px;
}
.col-ref ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.col-ref li {
  font-size: 17px;
  line-height: 2.0;
  color: var(--col-text-body);
}
/* v2.19 (2026-07-14): PSI指摘対応。col-ref スコープに限定して
   赤字を #A00000 に統一（対 col-ref 背景 #eaf2fb で 7.45:1、AA/AAA両クリア）。
   他所の var(--col-red-600) 参照は現状維持のため、変数値ではなく
   セレクタ単位で直接色指定。 */
.col-ref .red {
  color: #A00000;
  font-weight: 900;
}
/* 警察#9110・消費者188などのアクションリンクは赤色 */
.col-ref a {
  color: #A00000;
  font-weight: 900;
  text-decoration: none;
}
/* 国民生活センター・消費者庁などの情報リンクは青色 */
.col-ref a.info-link {
  color: var(--col-blue-600);
}
.col-ref a:hover { text-decoration: underline; }
.col-ref .note {
  font-size: 14px;
  line-height: 1.8;
  color: var(--col-text-muted);
  margin: 14px 0 0;
}

/* ============ レスポンシブ完全対応 ============ */
/* 全要素の横はみ出し防止 */
html, body { overflow-x: hidden; }
.col-main img, .col-main svg { max-width: 100%; height: auto; }
.col-main * { box-sizing: border-box; }

/* タブレット縦・大型スマホ(980px以下) */
@media (max-width: 980px) {
  .col-hero-grid { grid-template-columns: 1fr; padding-bottom: 40px; }
  .col-hero-visual { min-height: 300px; order: -1; }
  .col-floating-card.card-a { left: 8%; top: 30px; }
  .col-floating-card.card-b { right: 8%; bottom: 54px; }
  .col-floating-card.card-c { left: 18%; bottom: 10px; }
  .col-purpose-card { grid-template-columns: 1fr; }
  .col-purpose-visual { order: -1; }
  .col-feature-grid { grid-template-columns: 1fr; }
  .col-category-grid { grid-template-columns: 1fr; }
  .col-trust-list { grid-template-columns: 1fr; }
  .col-hero h1 { font-size: clamp(28px, 5.5vw, 48px); }
  .col-section-title { font-size: clamp(22px, 3.4vw, 32px); }
}

/* 標準スマホ(760px以下) */
@media (max-width: 760px) {
  .col-container { width: min(calc(100% - 24px), var(--col-max)); }
  .col-main { font-size: 17px; line-height: 1.85; }
  .col-breadcrumb { margin-top: 16px; font-size: 13px; }

  /* ヒーロー */
  .col-hero { border-radius: 24px; }
  .col-hero-grid { padding: 26px 20px 30px; gap: 16px; }
  .col-hero h1 { margin-top: 14px; font-size: clamp(26px, 7vw, 38px); }
  .col-hero-lead { font-size: 16px; }
  .col-hero-actions { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .col-cta-button { width: 100%; font-size: 16px; padding: 0 22px; }
  .col-mini-stats { grid-template-columns: 1fr; }
  .col-stat-pill { padding: 14px 16px; }
  .col-hero-visual { min-height: 245px; }
  .col-hero-visual > svg { width: 100%; max-width: 320px; height: auto; }
  .col-floating-card { padding: 9px 11px; font-size: 13px; }

  /* アプリ紹介セクション */
  .col-app-intro { margin-top: 14px; padding: 20px; }
  .col-app-intro h2 { font-size: 20px; }
  .col-app-intro p { font-size: 16px; }

  /* ストアバッジ:中央寄せ */
  .col-store-badges { justify-content: center; gap: 12px; padding-left: 0; }
  .col-store-link { width: 140px; }

  /* セクション見出し */
  .col-section-heading { grid-template-columns: 1fr; align-items: start; gap: 14px; }
  .col-section-title { font-size: clamp(22px, 5vw, 28px); }
  .col-view-all { width: fit-content; font-size: 14px; }

  /* よく読まれているコラム */
  .col-feature-card { padding: 22px; min-height: auto; }
  .col-feature-card h3 { font-size: 20px; }
  .col-feature-card p { font-size: 15px; }

  /* 目的セクション */
  .col-purpose-card { padding: 24px 20px; }
  .col-purpose-card h2 { font-size: 24px; }
  .col-purpose-card p { font-size: 16px; line-height: 1.85; }
  .col-purpose-visual svg { width: 100%; max-width: 280px; height: auto; }
  .col-app-shift { padding: 16px 18px; font-size: 15px; }

  /* カテゴリ */
  .col-category-card { grid-template-columns: 1fr; min-height: auto; padding: 20px; }
  .col-category-icon { width: 64px; height: 64px; border-radius: 20px; }
  .col-category-card h3 { font-size: 20px; }
  .col-category-card p { font-size: 15px; }
  .col-category-links a { font-size: 16px; }

  /* 使い方ガイド */
  .col-guide { padding: 24px 20px; }
  .col-guide h2 { font-size: 22px; }
  .col-guide-lead { font-size: 16px; }
  .col-guide-steps li {
    grid-template-columns: 40px 1fr;
    gap: 14px; font-size: 16px;
  }
  .col-guide-steps li::before { width: 38px; height: 38px; font-size: 17px; }

  /* FAQ */
  .col-faq-item { padding: 18px 20px; }
  .col-faq-item h3 { font-size: 17px; padding-left: 34px; }
  .col-faq-item h3::before { width: 26px; height: 26px; font-size: 13px; }
  .col-faq-item p { font-size: 16px; padding-left: 34px; }
  .col-faq-item p::before { width: 26px; height: 26px; font-size: 13px; }

  /* 検索パネル */
  .col-search-panel { padding: 22px 20px; }
  .col-search-panel h2 { font-size: 20px; }
  .col-search-form { grid-template-columns: 1fr; }
  .col-search-form input, .col-search-form button { font-size: 16px; }

  /* 参考情報 */
  .col-ref { padding: 18px 18px 18px 20px; }
  .col-ref h2 { font-size: 19px; }
  .col-ref li { font-size: 16px; line-height: 1.85; }
  .col-ref .note { font-size: 13px; }
}

/* 小型スマホ(480px以下) */
@media (max-width: 480px) {
  .col-container { width: calc(100% - 20px); }
  .col-hero-grid { padding: 22px 16px 26px; }
  .col-hero h1 { font-size: clamp(24px, 8vw, 32px); }
  .col-hero-lead { font-size: 15px; line-height: 1.8; }
  .col-stat-pill strong { font-size: 22px; }
  .col-eyebrow { font-size: 12px; padding: 6px 12px; }
  .col-floating-card { padding: 7px 9px; font-size: 11px; gap: 6px; }
  .col-floating-card svg { width: 18px; height: 18px; }
  .col-store-badges { justify-content: flex-start; }
  .col-store-link { width: calc(50% - 6px); max-width: 150px; }
  .col-feature-card { padding: 20px 18px; }
  .col-section { padding: 40px 0 0; }
  .col-faq-item { padding: 16px; }
}

/* 極小スマホ(360px以下) */
@media (max-width: 360px) {
  .col-hero h1 { font-size: 24px; }
  .col-hero-grid { padding: 20px 14px 24px; }
  .col-store-link { width: 100%; max-width: 150px; }
  .col-store-badges { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}


/* ===================================================== */
/* Phase 2 対応 (2026-05-30 v2.7)                         */
/* 汎用Kickerラベル(.col-* 外でも使用可)                  */
/* ※v2.6で追加した .categoryHeroIcon / .articleHeaderIcon  */
/*   は実機モバイルでラベルテキストと重なる問題があったため */
/*   v2.7で全廃止。HTMLからも該当divは取り除く方針。       */
/* ===================================================== */

/* 汎用Kickerラベル (.col-section-kicker と同等。.col-*の外でも使用可) */
.sectionKicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--col-teal-700);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.sectionKicker::before {
  content: "";
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: var(--col-yellow-500);
}

/* レスポンシブ: モバイルでKickerを少し小さく */
@media (max-width: 760px) {
  .sectionKicker {
    font-size: 13px;
  }
}

/* =====================================================
   v2.8 フェーズB：表示幅の統一（2026-05-31）
   カテゴリTOP(.columnCategory)・記事(.columnArticle)のコンテンツ領域を、
   コラムTOP(.col-container)と同じ最大幅 --col-max(1180px) に収め、
   PCで一定幅以上に広がらないよう左右センタリングする。
   .col-container は width:min(calc(100% - 32px), var(--col-max)) のため
   同じ最大幅・左右ガターに揃える（full-bleed にはしない）。
   ヒーロー(.categoryHero / .articleHeader)も boxTy1 内のため同じ幅に収まる。
   コラムTOP(.col-*)の見た目は変更しない。末尾配置で master.css の幅指定に勝つ。
   ===================================================== */
.strWrapper > .boxTy1.columnCategory,
.strWrapper > .boxTy1.columnArticle,
.strWrapper > .boxTy1.aboutPage,
.strWrapper > .boxTy1.editorialPage {
  width: min(calc(100% - 32px), var(--col-max, 1180px));
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 760px) {
  .strWrapper > .boxTy1.columnCategory,
  .strWrapper > .boxTy1.columnArticle,
  .strWrapper > .boxTy1.aboutPage,
  .strWrapper > .boxTy1.editorialPage {
    width: min(calc(100% - 24px), var(--col-max, 1180px));
  }
}

/* =====================================================
   v2.11 /about/ 系 共通ヒーロー（2026-05-31）
   about/index.html・about/editorial/index.html のヒーローを column.css で一元管理する。
   両ページの <section class="pageHero">（子: .pageHeroBody / .pageHeroFig）に適用。
   各HTMLの inline <style> のヒーロー定義（.editorialHero* / .aboutHero* 等）は撤去する。
   ===================================================== */
.aboutPage .pageHero,
.editorialPage .pageHero {
  position:relative; overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr;
  gap:28px; align-items:center; padding:36px 34px; border-radius:22px;
  background:linear-gradient(135deg,#163b56 0%,#0e2d44 100%); border:1px solid #0b2c44;
  color:#fff; margin:0 0 32px; box-shadow:0 16px 40px rgba(14,45,68,.22);
}
.aboutPage .pageHero::after,
.editorialPage .pageHero::after {
  content:""; position:absolute; right:-50px; top:-50px; width:220px; height:220px;
  border-radius:50%; background:rgba(39,160,94,.16); pointer-events:none;
}
.aboutPage .pageHero::before,
.editorialPage .pageHero::before {
  content:""; position:absolute; left:-30px; bottom:-50px; width:180px; height:180px;
  border-radius:50%; background:rgba(255,255,255,.05); pointer-events:none;
}
.aboutPage .pageHeroBody,
.editorialPage .pageHeroBody { position:relative; }
.aboutPage .pageHeroLabel,
.editorialPage .pageHeroLabel {
  position:relative; display:inline-flex; align-items:center; gap:8px; padding:6px 16px;
  border-radius:999px; background:rgba(255,255,255,.13); color:#fff; font-size:13px;
  font-weight:bold; letter-spacing:.02em; margin:0 0 14px;
}
.aboutPage .pageHeroLabel::before,
.editorialPage .pageHeroLabel::before {
  content:""; width:8px; height:8px; border-radius:50%; background:var(--c-green);
}
.aboutPage .pageHero h2,
.editorialPage .pageHero h2 {
  position:relative; font-size:30px; line-height:1.46; margin:0 0 14px; color:#fff; font-weight:800;
}
.aboutPage .pageHeroLead,
.editorialPage .pageHeroLead {
  position:relative; font-size:16px; line-height:1.95; margin:0; color:#dce6f0;
}
.aboutPage .pageHeroFig,
.editorialPage .pageHeroFig { position:relative; }
.aboutPage .pageHeroFig svg,
.editorialPage .pageHeroFig svg { display:block; width:100%; height:auto; max-height:300px; }
@media screen and (max-width:800px) {
  .aboutPage .pageHero,
  .editorialPage .pageHero { grid-template-columns:1fr; padding:26px 22px; }
  .aboutPage .pageHero h2,
  .editorialPage .pageHero h2 { font-size:23px; }
}

/* =====================================================
   v2.12 背景の薄いグラデーション統一（2026-05-31）
   コラムTOP(.col-main)の薄いグラデーション背景を、column.css を読み込む全ページ
   （カテゴリTOP・記事・about・editorial）にも適用し、ベージュ一色を置き換えて統一する。
   ※ column.css を読み込むページにのみ効く。master.css は編集しない。
   ===================================================== */
body,
#myStatus {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,214,26,.10) 0, transparent 34rem),
    radial-gradient(circle at 88% 8%, rgba(23,170,169,.12) 0, transparent 32rem),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 56%, #f4f8fb 100%);
}
/* 中間ラッパーの不透明な背景（ベージュ等）を透過させ、上のグラデーションを全面に見せる */
#myStatus .strWrapper,
#myStatus .strWrapper > .boxTy1 {
  background:transparent;
}

/* =====================================================
   v2.14 (2026-07-10) 全ページ種別の左右・上部余白統一

   コラムTOP(.col-main配下)と、記事/カテゴリ/レポート/ランキング/about系
   (.strWrapper配下)で生じていた二重余白と、モバイルガター差、パンくず上部
   余白差を解消する。

   - 補強1：master.css で .strWrapper に定義された padding / margin を無効化
     幅制御は .boxTy1.columnCategory / .columnArticle / .aboutPage /
     .editorialPage / .rk の width:min() に一本化。詳細度(1,1,0)+!importantで
     master.css に勝つ。コラムTOPは .strWrapper を通らないため無影響。
   - 補強2：480px以下で .boxTy1.columnCategory / .columnArticle / .aboutPage /
     .editorialPage のガターを 10px (calc(100% - 20px)) に統一。
     ランキング系 .rk はインラインstyleで width 指定を持つため、!important 付きで
     同ガターに揃える。コラムTOP(.col-container)と同じガター値になる。
   - 補強3：モバイル(760px以下)のパンくず margin-top を .strWrapper .breadcrumb
     セレクタで一括 16px に統一。詳細度(0,2,0)で、boxTy1配下(記事・カテゴリ・
     レポート・about系)と .rk配下(ランキング)の両方をカバー。
     TOP(.col-breadcrumb モバイル margin-top:16px)と揃える。
   ===================================================== */
#myStatus .strWrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
}

@media (max-width: 480px) {
    .strWrapper > .boxTy1.columnCategory,
    .strWrapper > .boxTy1.columnArticle,
    .strWrapper > .boxTy1.aboutPage,
    .strWrapper > .boxTy1.editorialPage {
        width: calc(100% - 20px);
    }
    .strWrapper > .rk {
        width: calc(100% - 20px) !important;
    }
}

@media (max-width: 760px) {
    .strWrapper .breadcrumb {
        margin-top: 16px;
    }
}

/* =====================================================
   v2.15 (2026-07-10) .boxTy1 自身の内側 padding をゼロ化

   master.css の .boxTy1 { padding: 15px; } が記事系コンテンツを 15px 押し込んで
   いた問題への対処。v2.14 の .strWrapper padding/margin ゼロ化と併せて、
   コラムTOP(.col-container)と完全に同じコンテンツ配置に揃える。

   ※ master.css には .boxTy1 の padding:15px を前提にした負マージン
     （.hdgTy2 / .hdgTy4:first-child 等）があるが、コラム配下全HTMLで
     .hdgTy2 / .hdgTy4 / .boxBa / .boxItem 系の使用を Grep で全数確認済み・0件のため、副作用なしと判断。
   ===================================================== */
#myStatus .strWrapper > .boxTy1 {
    padding: 0 !important;
}

/* =====================================================
   v2.17 (2026-07-13) editorCard 内の編集者プロフィール（カード2枚横並び）
   ※ 本CSS実定義ブロックは、末尾コメント切断で欠落した状態から本v2.21で復元。
   ===================================================== */
.editorInfo .editorProfiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 22px 0 18px;
}
.editorInfo .editorProfileCard {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 22px 20px;
    box-shadow: 0 5px 18px rgba(20, 54, 82, .06);
}
.editorInfo .editorProfileCard .editorPhoto {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--c-soft);
    margin: 0 auto 14px;
    display: block;
    box-shadow: 0 6px 16px rgba(20, 54, 82, .12);
}
.editorInfo .editorProfileCard .editorName {
    font-size: 18px;
    font-weight: 800;
    color: var(--c-navy);
    margin: 0;
    line-height: 1.45;
    text-align: center;
}
.editorInfo .editorProfileCard .editorRole {
    display: table;
    margin: 10px auto 14px;
    background: var(--c-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 16px;
    letter-spacing: .02em;
}
.editorInfo .editorProfileCard .editorLead {
    font-size: 14px;
    line-height: 1.85;
    color: var(--c-text);
    margin: 0;
    text-align: left;
}
.editorInfo .editorProfiles + .editorLink {
    display: block;
    text-align: center;
    margin-top: 4px;
}
@media (max-width: 760px) {
    .editorInfo .editorProfiles {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
@media (max-width: 480px) {
    .editorInfo .editorProfileCard {
        padding: 20px 16px;
    }
    .editorInfo .editorProfileCard .editorPhoto {
        width: 104px;
        height: 104px;
        border-width: 3px;
    }
    .editorInfo .editorProfileCard .editorName {
        font-size: 17px;
    }
    .editorInfo .editorProfileCard .editorLead {
        font-size: 14px;
        line-height: 1.8;
    }
}

/* =====================================================
   v2.20 (2026-07-14) HTML内style競合是正の記録

   コラムTOP col-ref のPSI取りこぼしはcolumn.css修正ではなく、
   column/index.html のHTML内styleの後勝ち上書きを直接修正して解消。
   ranking個別のbadge系（cat-estate/st-mobile/t3rk default）と
   rankingTOP mTag も同時に整合。column.css の宣言変更は行わず。
   ===================================================== */

/* =====================================================
   v2.21 (2026-07-14) コラムTOPインラインstyle統合完了

   column/index.html の HTML内 <style> ブロック（約28KB／215ルール／
   211ユニークセレクタ）を全削除。フェーズ1調査
   （inline_unification_plan.md）で完全一致209件・乖離1件（表記差）・
   HTML片側0件・col-* 系はTOP完全専用と確定していたため、
   column.cssへの宣言変更0件で削除実施。
   全131 column HTML + article-template.html のCSS参照 URL を
   ?v=2.19 → ?v=2.21 に統一。
   本v2.21 での column.css 自体の宣言変更はなし（マーカー版数）。
   復旧手順は rollback-inline-style.md を参照。
   ===================================================== */

/* =====================================================
   v2.22 (2026-07-14) v2.18修正(A)の復元作業記録

   本ブロックは版数トレーサビリティ確保のためのマーカー。
   v2.22 の実修正は以下のとおり：

     [1] `.columnCategory .referenceLinksList li strong`
         `.columnArticle .referenceLinksList li strong`
         の color を var(--col-red-600)=#d92d20 (4.27:1 未達)
         → #A00000 (7.45:1 AA/AAA両クリア) に**直接編集**で引き上げ。
         v2.18(A)で末尾追記方式により追加した宣言が、その後の
         末尾切断→v2.21復元時に取りこぼされ、改訂履歴のみ残存する
         「先祖返り」状態になっていたのを是正。

     [2] 末尾追記方式は将来のマルチバイト境界切断リスクがあるため、
         本v2.22 以降、referenceLinks 系のスコープ限定上書きは
         対象ルール本体を直接編集する運用に統一。

     [3] 恒久ルール9（改訂履歴と実体のGrep照合、期待ヒット数と実測
         ヒット数を完了報告に明記）を新設。本v2.22の期待ヒット数：
         A00000=3件（.col-ref .red／.col-ref a／referenceLinksList li strong）／
         editorProfileCard=8ブロック相当／fadeUp=0件／
         EOF marker v2.22=1件（ファイル最末尾）。

     [4] 恒久ルール10（column.css末尾領域はEditツール部分置換を使用せず、
         全文読込→メモリ上編集→一時ファイル書き出し→バイト数・末尾文字列
         検証→リネームの直接書き込み方式で行う）を新設。本v2.22の末尾
         復元も本方式で実施。
   ===================================================== */

/* =====================================================
   v2.23 (2026-07-15) ナビィ吹き出しコンポーネント（naviiNote）新設

   本ブロックは版数トレーサビリティ確保のためのマーカー。
   v2.23 の実修正は以下のとおり：

     [1] .columnArticle .naviiNote 系一式（.naviiNoteFace ／ .naviiNoteBody
         ／ .naviiNoteBody::before ／ .naviiNoteLabel ／ .naviiNoteText、
         および @media (max-width: 480px) 内の上書き）を追加。
         挿入位置は「要点ボックス セクションのコメント」（.keyPoint定義）の
         直後（ファイル中腹の直接編集）。末尾追記方式は不使用。

     [2] 案内・補助専用、.columnArticle 配下スコープ限定、暖色系（背景
         #fffdf2、ボーダー #f0e2b6、ラベル #8a6d1f）で信頼性領域（青系の
         keyPoint／dataBox／conclusion／referenceLinks）と役割分担。
         アニメーション・transition なし、コントラストAA設計。

     [3] 試験導入として column/phone-number-search/how-to-search/index.html
         の1記事のみに2箇所配置（目次直後・検索手順章直後）。
         article-template.html や他ページには展開しない。

     [4] 効果測定は福徳側のGA4モニタリング（デプロイ後2週間）で実施し、
         展開判断は別タスクで扱う。

     [5] 恒久ルール10・改訂版：column.cssへのすべての編集を Editツール系
         の部分置換ではなく Python 直接書き込み方式に統一（v2.23作業中に
         Editツール使用で冒頭・履歴操作時にも末尾切断が発生したため、
         部分許容を撤廃）。本v2.23 の末尾復元も本方式で実施。

     [6] 恒久ルール9期待ヒット数（本v2.23完了時）：
         naviiNote=column.css内1ブロック／HTML内 how-to-search のみ2箇所／
         A00000=3件維持／fadeUp実CSSルール=0件維持／
         editorProfileCard=v2.17実装相当の全構成要素維持／
         EOF marker v2.23=1件・ファイル最末尾。
   ===================================================== */

/* =====================================================
   v2.24 (2026-07-16) naviiNote セレクタ スコープ緩和

   本ブロックは版数トレーサビリティ確保のためのマーカー。
   v2.24 の実修正は以下のとおり：

     [1] .columnArticle .naviiNote 系 6セレクタ × 2箇所（デフォルト＋
         @media 480px 上書き）＝ 12実定義を、.naviiNote 系トップレベル
         セレクタに緩和。宣言内容は一切変更なし。

     [2] 目的：コラムTOP（.col-main 配下）および編集部ページ
         （.boxTy1 .editorialPage 配下）でも naviiNote が有効化される
         ようスコープを開放。how-to-search 記事の既存 2箇所も
         引き続き同一の見た目で表示（宣言内容不変）。

     [3] 特異性緩和 (0,2,0)→(0,1,0) に伴うHTML内style競合リスクは
         作業冒頭の Grep で 0件を確認済み（Rule 7 逆方向チェック）。

     [4] 恒久ルール9期待ヒット数（本v2.24完了時）：
         .naviiNote 系ユニークセレクタ 7種／12実定義／
         A00000=3件維持／fadeUp実CSSルール=0件維持／
         editorProfileCard=v2.17実装相当の全構成要素維持／
         EOF marker v2.24=1件・ファイル最末尾。
   ===================================================== */


/* v2.25 (2026-07-21): X follow promo (.xFollowPromo). Phase 2 unified from inline styles. v2.26 backlog: 5 items (naviiNote a display, focus ring, TOP notice link color, TOP notice margin, OGP batch). */
/* v2.25a (2026-07-21 hotfix): CSS parser diagnosis found L3041 comment ended prematurely by inner comment "*" + "/" token. Neutralized that quote and simplified this decorative comment to ASCII single-line to avoid nested-comment risks. */
/* v2.25b (2026-07-21 design): xFollowPromo h3 reset (border-bottom/padding-bottom), Icon 56->64px, grid-template-columns 56->64px. */
/* v2.25c (2026-07-21 hotfix): xFollowPromo h3 selector specificity raised (.xFollowPromo .xFollowPromoBody h3) + color:#fff !important + border/padding/background/text-shadow reset. Reason: .rk h3 (ranking pages) with same specificity was overriding via later load order. */

.xFollowPromo {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 20px;
  align-items: center;
  background-color: #0e2d44; /* v2.25 緊急追加：グラデ落ちフォールバック（背景が万一落ちても白文字が読める防御設計） */
  background: linear-gradient(135deg, #000000 0%, #163b56 60%, #0b3a5c 100%);
  color: #fff;
  border-radius: 18px;
  padding: 26px 28px;
  margin: 38px 0;
  box-shadow: 0 12px 30px rgba(11, 58, 92, .28);
}
.xFollowPromo .xFollowPromoIcon {
  width: 64px; height: 64px; /* v2.25b: 56→64px 拡大（視認性向上） */
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08);
  border-radius: 14px;
}
.xFollowPromo .xFollowPromoLabel {
  font-size: 12px; font-weight: 800; color: #9fc8ea;
  letter-spacing: .06em; margin: 0 0 4px;
}
.xFollowPromo .xFollowPromoBody h3 {
  /* v2.25c: セレクタ強化(specificity 11→21)＋防御宣言。ranking系ページの .rk h3 (var(--ink)) など、
     column.css 後に読み込まれる HTML内 <style> の h3 color 上書き対策。
     !important 併用は、将来任意ページの CSS (specificity 21相当)による再上書きへの最終防御。 */
  font-size: 17px;
  color: #fff !important; /* 防御的：ページ固有 h3 color を必ず上書き */
  margin: 0 0 6px;
  font-weight: 800;
  line-height: 1.45;
  border: none;
  padding: 0;
  background: transparent;
  text-shadow: none;
}
.xFollowPromo .xFollowPromoHandle {
  margin: 0; font-size: 14px; color: #dce6f0;
}
.xFollowPromo .xFollowPromoHandle strong {
  color: #ffd61a; font-weight: 800;
}
.xFollowBtn {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ffffff, #eef7ff);
  color: #0b67a3 !important;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 800; font-size: 15px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .20);
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .18s;
}
.xFollowBtn:hover { transform: translateY(-2px); }
@media screen and (max-width: 640px) {
  .xFollowPromo { grid-template-columns: 1fr; text-align: center; padding: 22px 20px; }
  .xFollowPromo .xFollowPromoIcon { margin: 0 auto; }
}
/* ============================================================
   Task#117-c: heroCards コンポーネント v2.26-final（v3.14再 確定・本番反映）
   規約：本一式の再利用のみ可、新規追加増殖は禁止
   詳細度統一（v3.7）：全セレクタを .columnArticle .heroCards ～ 前置（詳細度 0,3,0 以上）に統一。
     素の .heroCards / .heroCard 等は0件（v3.1恒久ルール違反の再発防止）。
   ============================================================ */
.columnArticle .heroCards.heroCards {
  --hc-primary: #1d4ed8; --hc-primary-2: #3b82f6; --hc-accent: #38bdf8; --hc-warm: #f59e0b;
  --hc-bg-a: #eef5ff; --hc-bg-b: #dcebff;
  --hc-band-a: #eaf3ff; --hc-band-b: #dbeafe;
  --hc-icon-main: var(--hc-primary);
  background: linear-gradient(135deg, var(--hc-bg-a) 0%, var(--hc-bg-b) 100%);
  border: 1px solid #cddcf3; border-radius: 20px;
  padding: 32px 30px 26px; margin: 0 0 30px; position: relative; overflow: hidden;
  box-shadow: 0 10px 30px rgba(29,78,216,.10);
}
.columnArticle .heroCards.heroCards--scam {
  --hc-primary: #b91c1c; --hc-primary-2: #ef4444; --hc-band-a: #fff5f5; --hc-band-b: #ffe4e4;
  --hc-bg-a: #fff5f5; --hc-bg-b: #ffe4e4; border-color:#f2c5c5;
}
.columnArticle .heroCards.heroCards--family {
  --hc-primary: #1d4ed8; --hc-primary-2: #3b82f6; --hc-band-a: #eaf3ff; --hc-band-b: #dbeafe;
  --hc-bg-a: #eef5ff; --hc-bg-b: #dcebff; border-color:#c9dcec;
}
.columnArticle .heroCards.heroCards--sales {
  --hc-primary: #b45309; --hc-primary-2: #f59e0b; --hc-band-a: #fffaf2; --hc-band-b: #fff0d6;
  --hc-bg-a: #fffaf2; --hc-bg-b: #fff0d6; border-color:#f1d6aa;
}
.columnArticle .heroCards.heroCards--intl {
  --hc-primary: #1d4ed8; --hc-primary-2: #3b82f6; --hc-band-a: #eaf3ff; --hc-band-b: #dbeafe;
  --hc-bg-a: #eef5ff; --hc-bg-b: #dcebff; border-color:#dcebf7;
}

/* 見出し：v3.5真因対策（display:flex継承）＋v3.6階層 */
.columnArticle .heroCards .heroCardsTitle {
  display: block; counter-increment: none; gap: 0; align-items: initial;
  margin: 0 0 40px; color: #163b56; font-size: 38px; font-weight: 800;
  line-height: 1.45; text-align: center; border: none; padding: 0; background: transparent;
}
.columnArticle .heroCards .heroCardsTitle::before,
.columnArticle .heroCards .heroCardsTitle::after { content: none; display: none; }
.columnArticle .heroCards .heroCardsTitle b { display: inline; color: var(--hc-primary); font-weight: 900; }

.columnArticle .heroCards .heroCardList {
  list-style: none; padding: 0; margin: 0 0 22px; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch;
}
/* PC矢印コネクタ v3.5：40px幅 */
@media (min-width: 768px) {
  .columnArticle .heroCards .heroCardList::before,
  .columnArticle .heroCards .heroCardList::after {
    content: ""; position: absolute; top: 50%; width: 42px; height: 34px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 34' fill='none'%3E%3Cline x1='0' y1='17' x2='24' y2='17' stroke='%233b82f6' stroke-width='3.5' stroke-linecap='round' stroke-dasharray='3 5'/%3E%3Cpath d='M 24 6 L 38 17 L 24 28' fill='none' stroke='%231d4ed8' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: contain; z-index: 2; pointer-events:none;
  }
  .columnArticle .heroCards .heroCardList::before { left: calc(33.333% - 21px); }
  .columnArticle .heroCards .heroCardList::after  { left: calc(66.666% - 21px); }
}

.columnArticle .heroCards .heroCard {
  position: relative; background: #ffffff; border: 1px solid #cddcf3;
  border-radius: 16px; padding: 59px 22px 32px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  box-shadow: 0 6px 18px rgba(29,78,216,.08);
  min-width: 0;
}
.columnArticle .heroCards .heroCardNum {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--hc-primary), var(--hc-primary-2));
  color: #ffffff; font-family: sans-serif; font-size: 30px; font-weight: 900;
  line-height: 56px; text-align: center;
  box-shadow: 0 6px 16px rgba(29,78,216,.35);
}
.columnArticle .heroCards .heroCardText {
  margin: 0; font-size: 34px; font-weight: 700; color: #163b56;
  line-height: 1.4; word-break: auto-phrase; overflow-wrap: break-word;
  min-width: 0;
}
.columnArticle .heroCards .heroCardText b { color: var(--hc-primary); font-weight: 900; }
.columnArticle .heroCards .heroCardIcon {
  width: 82px; height: 82px; color: var(--hc-primary); flex: 0 0 auto;
}

/* 帯（v3.6で見本から撤去済み・CSS残置） */
.columnArticle .heroCards .heroBand {
  margin: 8px 0 0; padding: 20px 28px; border-radius: 14px;
  background: linear-gradient(135deg, var(--hc-band-a), var(--hc-band-b));
  color: var(--hc-primary); font-size: 22px; font-weight: 800;
  line-height: 1.5; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 14px; position: relative;
  border: 1px solid #cddcf3;
  box-shadow: 0 4px 14px rgba(29,78,216,.08);
}
.columnArticle .heroCards .heroBand::after {
  content: ""; width: 26px; height: 26px; margin-left: 8px; flex: 0 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6 L15 12 L9 18' stroke='%231d4ed8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain;
}
.columnArticle .heroCards .heroBandIcon {
  width: 30px; height: 30px; color: var(--hc-primary); flex: 0 0 auto;
}

/* 背景装飾（cloud, city）－ 極薄・aria-hidden・文字直下のみ */
.columnArticle .heroCards.heroCards::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 560' fill='none'%3E%3Cellipse cx='120' cy='100' rx='45' ry='18' fill='%23ffffff'/%3E%3Cellipse cx='170' cy='90' rx='28' ry='12' fill='%23ffffff'/%3E%3Cellipse cx='1080' cy='120' rx='50' ry='20' fill='%23ffffff'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 560' fill='none'%3E%3Crect x='900' y='420' width='40' height='100' fill='%23ffffff' opacity='.55'/%3E%3Crect x='940' y='460' width='30' height='60' fill='%23ffffff' opacity='.55'/%3E%3Crect x='970' y='430' width='45' height='90' fill='%23ffffff' opacity='.55'/%3E%3Crect x='1015' y='470' width='35' height='50' fill='%23ffffff' opacity='.55'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: top left, bottom right; background-size: cover, cover;
}
.columnArticle .heroCards.heroCards > * { position: relative; z-index: 1; }

@media (max-width: 767px) {
  .columnArticle .heroCards.heroCards { padding: 22px 10px 20px; border-radius: 16px; margin: 0 0 24px; }
  .columnArticle .heroCards .heroCardsTitle {
    display: block; font-size: 24px; margin: 0 0 30px; line-height: 1.5;
  }
  .columnArticle .heroCards .heroCardList { grid-template-columns: 1fr; gap: 24px; margin-bottom: 20px; }
  .columnArticle .heroCards .heroCard {
    flex-direction: row; align-items: center; gap: 10px; padding: 22px 18px 22px 36px;
    text-align: left; position: relative;
  }
  .columnArticle .heroCards .heroCardNum {
    position: static; transform: none; margin-left: -18px;
    width: 36px; height: 36px; font-size: 20px; line-height: 36px; flex: 0 0 auto;
  }
  .columnArticle .heroCards .heroCardText {
    font-size: 22px; line-height: 1.5; flex: 1 1 auto; min-width: 0; margin: 0; text-align: left;
  }
  .columnArticle .heroCards .heroCardIcon { width: 44px; height: 44px; flex: 0 0 auto; }
  .columnArticle .heroCards .heroCard + .heroCard::before {
    content: ""; position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
    width: 32px; height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20' fill='none'%3E%3Cline x1='16' y1='0' x2='16' y2='8' stroke='%233b82f6' stroke-width='3' stroke-linecap='round' stroke-dasharray='3 4'/%3E%3Cpath d='M 6 8 L 16 19 L 26 8' fill='none' stroke='%231d4ed8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: contain;
  }
  .columnArticle .heroCards .heroBand { font-size: 17px; padding: 15px 18px; line-height: 1.55; gap: 10px; }
  .columnArticle .heroCards .heroBandIcon { width: 24px; height: 24px; }
  .columnArticle .heroCards .heroBand::after { width: 22px; height: 22px; }
  .columnArticle .heroCards .heroCardList::before,
  .columnArticle .heroCards .heroCardList::after { display: none; }
}

/* ===== v2.27 (2026-08-05 Task#122) 新設ルール =====
   [1] TOPお知らせ枠のインラインstyleのCSS化（コラムTOP文脈限定＝.col-main配下のみ。
       Step1-1判定：記事側naviiNote内に#176aa0/700相当のテキストリンクは0件のため
       記事側視覚変化防止を優先しTOP限定スコープを採用）
   [2] focus-visibleリング拡張（既存 .col-main :focus-visible と同一宣言・19.4準拠の前置） */
.col-main .naviiNote.naviiNote { margin: 32px 0 0; }
.col-main .naviiNote .naviiNoteText a { display: inline; color: var(--col-blue-600); font-weight: 700; }
.boxTy1.columnArticle a:focus-visible,
.boxTy1.columnArticle button:focus-visible,
.boxTy1.columnArticle input:focus-visible,
.boxTy1.columnCategory a:focus-visible,
.boxTy1.columnCategory button:focus-visible,
.boxTy1.columnCategory input:focus-visible { outline: none; box-shadow: var(--col-focus); border-radius: 10px; }

/* EOF marker v2.27 (Task#122 v2.27パッケージ 確定) */