/* 4627203001001 記事CSS ＝ 共通テーマ + 記事固有（.bn-s-* に名前空間化済み） */
/* --- 共通テーマ（bessnews-theme.css を畳み込み。本番に共有CSSを増やさないため） --- */
/* ============================================================
   BESSNEWS Theme Layer  v1.0 / 2026-07-11 (Phase 1)
   正本: 001_BESSNEWS/90_design_system/bessnews-website-design-system.md
   方針: 既存 style.css の直後に読み込み、固定パレット(§2)・
         radius/余白トークン(§4)へ段階的に統一するオーバーレイ層。
         情報設計・レイアウト骨格は変えない(外科的変更)。
   ============================================================ */

:root{
  /* --- 地 (60%) --- */
  --bn-bg:#ffffff; --bn-tint:#f4f6f8; --bn-tint2:#f5f7fb;
  /* --- 主・構造 (30% 青系) --- */
  --bn-navy:#0c2a4d; --bn-blue:#1f6fd0; --bn-teal:#0f7d80;
  /* --- アクセント (10%) --- */
  --bn-accent:#ef8516; --bn-accent-ink:#c2680b;
  /* --- 中立 --- */
  --bn-ink:#16181c; --bn-sub:#5a6270; --bn-border:#e2e5e8;
  /* --- レベル色 (記事系のみ・セマンティック) --- */
  --bn-lv-beginner:#43a546; --bn-lv-standard:#1f6fd0; --bn-lv-advanced:#b80000;
  /* --- radius 3段階 --- */
  --bn-r-sm:6px; --bn-r-md:12px; --bn-r-pill:999px;
}

/* ---- カラー統一: 旧ハードコード青 → ブランド青 --------------- */
/* 迷い色(パレット外)の是正: 紫#734db9 → ティール / 非ブランド橙#ffa50b → ブランド橙 */
.bkpurple{ background:var(--bn-teal) !important; }      /* 紫は撤去(パレット外) */
.bkorange01{ background:var(--bn-accent) !important; }  /* #ffa50b → #ef8516 */
.bkblue01{ background:var(--bn-navy) !important; }      /* #226caf → navy 濃 */
.bkblue02{ background:var(--bn-blue) !important; }      /* #0462d4 → blue */
.bkblue03, .bkgray{ background:var(--bn-tint) !important; }
.bkred01{ background:var(--bn-lv-advanced) !important; }   /* レベル上級(存続) */
.bkgreen01{ background:var(--bn-lv-beginner) !important; } /* レベル初級(存続) */

/* ---- 共通部品: ヘッダ ------------------------------------- */
.header_nav{ border-radius:var(--bn-r-sm); }             /* 5px → 6px */
.header_nav:hover, .header_nav.is-current{ background:var(--bn-blue); color:#fff; }
.header_link .header_button{ background:var(--bn-blue); border-radius:var(--bn-r-pill); }

/* ---- 共通部品: フッタ ------------------------------------- */
.footer_nav a:hover{ color:var(--bn-blue); }

/* ---- リンク色の統一 (本文リンク=ブルー / hover=ネイビー) ---- */
main a:not(.header_nav):not(.header_button):hover{ color:var(--bn-navy); }

/* ---- カード/バッジの角丸を12px/6pxトークンへ寄せる --------- */
.card, .thumb, [class*="_card"], [class*="card_"]{ border-radius:var(--bn-r-md); }
[class*="badge"], [class*="_tag"], [class*="tag_"]{ border-radius:var(--bn-r-sm); }

/* ---- アクセント橙を文字に使う箇所は可読性のため濃橙へ ------- */
/* (淡地の橙文字は低コントラスト=記事LP§17-8。背景橙はブランド色のまま) */
.accent-text, .fc-orange{ color:var(--bn-accent-ink); }

/* ============================================================
   Round 1 採点フィードバック反映（2026-07-11 Session2）
   安全（CSS単独・DOM非改変・検証済み）な修正のみ。
   重い改修（カード等高/JSON-LD/semantic再タグ/H1再構成/パンくず）は
   round-01_director.md の Round 2 計画へ。
   ============================================================ */

/* [色残] 旧ハードコード青 #016dd9 が残るヘッダのお問い合わせボタン → ブランド青
   （designer減点4・§2-2 移行対応表） */
.header_link .header_button{ background:var(--bn-blue) !important; }
.header_link .header_button:hover{ background:var(--bn-navy) !important; }

/* [タイポ] 日付・数字の .en が等幅 ProtoMono でレシート風＝ニュースの
   トーンから外れる（designer減点2・§4-1 数字はBarlow）。等幅を廃し
   比例サンセリフ（Barlow があれば優先／無ければシステム比例フォント）へ。 */
.en{ font-family:"Barlow","Noto Sans JP",-apple-system,"Segoe UI",Arial,sans-serif !important;
     font-feature-settings:"tnum" 1; letter-spacing:.01em; }

/* [フォーカス可視] 全インタラクティブ要素にフォーカスリング（§4-4・WCAG）。
   既存に無ければ付与（キーボード操作時のみ） */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--bn-navy); outline-offset:2px; }

/* ============================================================
   Round 2 反映（2026-07-11 Session2）
   見出し階層の是正（apply_round2_dom.js）に伴うCSS補償＋色トークン完了。
   ============================================================ */

/* [見出しH1化] 本文セクションを h4→h2 に是正（h1タイトル→h2セクションでスキップ解消）。
   旧 h4::before の青左罫を、#main_colum の h2.bbgray に復元。div.left(サイドバーSR専用h2)には出さない。 */
#main_colum h2.bbgray{ position:relative; margin-bottom:8px; font-weight:700; }
#main_colum h2.bbgray::before{
  content:""; position:absolute; left:0; top:0; width:3px; height:34px;
  border-radius:3px; background:var(--bn-blue); }

/* [色トークン完了] 残る旧青 #0462d4 のセクション左罫を全てブランド青へ（designer減点4・§2-2） */
h4::before{ background:var(--bn-blue) !important; }

/* [可視パンくず] apply_round2_seo.js が #main_colum 先頭へ注入（seo/sales・§6可視パンくず必須） */
.bn-breadcrumb{ margin:0 0 4px; font-size:13px; }
.bn-breadcrumb ol{ list-style:none; display:flex; flex-wrap:wrap; align-items:center;
  gap:2px 6px; margin:0; padding:12px 16px 0; }
.bn-breadcrumb li{ display:flex; align-items:center; color:var(--bn-sub); }
.bn-breadcrumb li:not(:last-child)::after{ content:"›"; margin-left:6px; color:var(--bn-sub); }
.bn-breadcrumb a{ color:var(--bn-blue); text-decoration:none; }
.bn-breadcrumb a:hover{ text-decoration:underline; color:var(--bn-navy); }
.bn-breadcrumb [aria-current]{ color:var(--bn-sub); }

/* [モバイル横スクロール防止] 出典の長いURL等を折返す（sales・§6横スクロールゼロ） */
#main_colum{ overflow-wrap:break-word; }
#main_colum a{ overflow-wrap:anywhere; }

/* [色トークン完了・仕上げ] Round2デザイナー実測で残っていた旧青#016dd9を根絶（§2-2）:
   一覧カードのカテゴリチップ・「最上部へ戻る」ボタン → ブランド青 */
.column_time_category{ background:var(--bn-blue) !important; }
.left_button{ background:var(--bn-blue) !important; }

/* [radius3段階厳守] お問い合わせボタンの 50px → pillトークン（§4-3） */
.header_link .header_button{ border-radius:var(--bn-r-pill) !important; }

/* [色トークン完了・仕上げ2] 既存の高詳細度(id付き)セレクタに残る #016dd9 を一掃（§2-2）:
   アクティブなカテゴリチップ(is-current)・pickup/見出しのhover色 → ブランド青 */
header div#nav .header_nav.is-current{ background:var(--bn-blue) !important; color:#fff !important; }
#spNavi a.left_pickUp:hover h3,
div.left a.left_pickUp:hover h3,
#main_colum a:hover h3{ color:var(--bn-blue) !important; }

/* [色トークン完了・仕上げ3] Round3デザイナー実測の残存5セレクタ（:hover系の#016dd9）＋
   本文常時表示の旧青#0462d4＋radius3段階違反を一掃（§2-2・§4-3） */
header div#nav .header_nav:hover{ background:var(--bn-blue) !important; color:#fff !important; }
footer div.footer_nav a:hover{ color:var(--bn-blue) !important; }
div.left a.left_cayegory:hover{ color:var(--bn-blue) !important; }
header p#drawerBt:hover{ color:var(--bn-blue) !important; }
div#spNavi a.sp_cayegory:hover{ color:var(--bn-blue) !important; }
.blu01, .blutxt{ color:var(--bn-blue) !important; }
.atxt{ background:var(--bn-blue) !important; }
.area{ border-color:var(--bn-blue) !important; }
.level, .column_time_category, .left_button{ border-radius:var(--bn-r-sm) !important; }

/* [一覧カード等高] splideカルーセルを壊さず、カード内テキストの行数を揃えて
   カード高のばらつきを抑える（designer・§7-1）。タイトル2行・抜粋3行でクランプ。 */
.columnBox_txtBox h3{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; }
.columnBox_txt{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; }

/* [レベルバッジのセマンティック色] apply_round2_level.js が付与する data-lv により
   初級=緑 / 中級=青 / 上級=赤（§2-1 レベル色）。テキスト＋サムネと冗長で可読性は既存担保。 */
.level[data-lv="beginner"]{ background:var(--bn-lv-beginner) !important; }
.level[data-lv="standard"]{ background:var(--bn-lv-standard) !important; }
.level[data-lv="advanced"]{ background:var(--bn-lv-advanced) !important; }


/* ---- ヘッダーロゴの中央揃え (2026-08-12) ------------------------
   .header_center はflex縦積みでコピーはtext-align:centerだが、
   ロゴアンカー(.logopc/.logosp 幅指定あり)は左寄せのままズレていた。 */
header div.in_box.header_top .header_center-logo{ text-align:center; }
header div.in_box.header_top .header_center-logo .logopc,
header div.in_box.header_top .header_center-logo .logosp{ margin-left:auto; margin-right:auto; }

/* --- 記事固有 --- */
:root{--bns-navy:#0c2a4d; --bns-blue:#1f6fd0; --bns-teal:#0f7d80; --bns-orange:#ef8516; --bns-orange-text:#c2680b; --bns-bg:#f5f7fa; --bns-rule:#e3e9f0; --bns-sub:#5a6672; --bns-body:#222;}
.bn-s-root, .bn-s-root *{box-sizing:border-box}
.bn-s-root{scroll-behavior:smooth}
.bn-s-root{margin:0;padding:0; font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif; color:var(--bns-body);background:#fff;line-height:1.9; font-size:16px;-webkit-text-size-adjust:100%;}
.bn-s-root a{color:var(--bns-blue);text-decoration:underline;text-underline-offset:2px}
.bn-s-root a:hover{color:var(--bns-navy)}
.bn-s-root #progress{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--bns-blue),var(--bns-orange));z-index:120}
.bn-s-site-header{position:relative;background:var(--bns-navy);color:#fff;padding:12px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;z-index:110}
.bn-s-logo{font-weight:800;font-size:18px;letter-spacing:.06em;color:#fff;text-decoration:none}
.bn-s-logo span{color:var(--bns-orange)}
.bn-s-site-nav{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;margin-left:auto}
.bn-s-site-nav a{color:#cfe0f5;text-decoration:none}
.bn-s-site-nav a:hover{color:#fff;text-decoration:underline}
.bn-s-crumbs{max-width:1080px;margin:0 auto;padding:10px 20px;font-size:12px;color:var(--bns-sub)}
.bn-s-crumbs a{color:var(--bns-sub)}
.bn-s-crumbs span{margin:0 6px;color:#b9c3cf}
.bn-s-hero{max-width:1080px;margin:0 auto;padding:8px 20px 28px}
.bn-s-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.bn-s-badge-level{background:#c0202e;color:#fff;font-weight:700;font-size:12px;padding:4px 10px;border-radius:3px;letter-spacing:.04em}
.bn-s-badge-cat{background:var(--bns-navy);color:#fff;font-size:12px;padding:4px 10px;border-radius:3px}
.bn-s-badge-tab{background:#fff;color:var(--bns-teal);border:1px solid var(--bns-teal);font-size:12px;padding:3px 10px;border-radius:3px}
.bn-s-badge-date{color:var(--bns-sub);font-size:12px}
.bn-s-root h1{font-size:30px;line-height:1.5;margin:0 0 16px;color:var(--bns-navy);font-weight:800;letter-spacing:.01em}
.bn-s-lead{font-size:17px;line-height:2;margin:0 0 20px;color:#2b3540}
.bn-s-lead strong{color:var(--bns-orange-text)}
.bn-s-hero-ph{border:2px dashed var(--bns-rule);background:var(--bns-bg);border-radius:6px;padding:26px 20px;text-align:center;color:var(--bns-sub)}
.bn-s-hero-ph .bn-s-ph-tag{display:inline-block;background:var(--bns-navy);color:#fff;font-size:11px;padding:2px 8px;border-radius:3px;margin-bottom:10px;letter-spacing:.06em}
.bn-s-hero-ph .bn-s-ph-alt{font-size:13px;line-height:1.8;max-width:760px;margin:0 auto}
.bn-s-hero-ph .bn-s-ph-cap{font-size:11px;margin-top:10px;color:#8a95a1}
.bn-s-wrap{max-width:1080px;margin:0 auto;padding:0 20px 60px;display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:start}
.bn-s-toc{position:sticky;top:20px;background:var(--bns-bg);border:1px solid var(--bns-rule);border-radius:6px;padding:16px 14px;font-size:13px}
.bn-s-toc h2{font-size:12px;letter-spacing:.1em;color:var(--bns-sub);margin:0 0 10px;font-weight:700;border:0;padding:0;background:none}
.bn-s-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.bn-s-toc li{counter-increment:toc;margin:0 0 2px}
.bn-s-toc a{display:block;padding:6px 8px 6px 26px;position:relative;color:#3a4652;text-decoration:none;border-radius:4px;line-height:1.6}
.bn-s-toc a::before{content:counter(toc);position:absolute;left:6px;top:6px;font-size:11px;color:#9aa6b2;font-weight:700}
.bn-s-toc a:hover{background:#e9eff6;color:var(--bns-navy)}
.bn-s-toc a.bn-s-active{background:var(--bns-navy);color:#fff}
.bn-s-toc a.bn-s-active::before{color:var(--bns-orange)}
.bn-s-toc-toggle{display:none}
.bn-s-root main{min-width:0}
.bn-s-root h2{font-size:22px;line-height:1.6;color:var(--bns-navy);margin:44px 0 16px;padding:0 0 10px 14px;border-left:6px solid var(--bns-orange);border-bottom:1px solid var(--bns-rule);font-weight:800}
.bn-s-root h3{font-size:17px;color:var(--bns-navy);margin:28px 0 10px;font-weight:700}
.bn-s-root p{margin:0 0 16px}
.bn-s-root strong{font-weight:700}
.bn-s-em{color:var(--bns-orange-text);font-weight:700}
.bn-s-root ul, .bn-s-root ol{margin:0 0 18px;padding-left:1.4em}
.bn-s-root li{margin-bottom:8px}
.bn-s-root table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 20px;background:#fff}
.bn-s-root th, .bn-s-root td{border:1px solid var(--bns-rule);padding:9px 11px;text-align:left;vertical-align:top;line-height:1.7}
.bn-s-root th{background:var(--bns-bg);color:var(--bns-navy);font-weight:700;white-space:nowrap}
td.bn-s-num{white-space:nowrap}
.bn-s-tbl-scroll{overflow-x:auto;margin:0 0 20px}
.bn-s-tbl-scroll table{margin:0}
.bn-s-root figure{margin:0 0 24px}
.bn-s-root figure svg{width:100%;height:auto;display:block;border:1px solid var(--bns-rule);border-radius:6px;background:#fff}
.bn-s-root figcaption{font-size:12px;color:var(--bns-sub);margin-top:8px;line-height:1.7}
.bn-s-callout{border-left:5px solid var(--bns-teal);background:#f2f8f8;padding:14px 16px;margin:0 0 20px;border-radius:0 5px 5px 0;font-size:15px}
.bn-s-callout .bn-s-ttl{font-weight:800;color:var(--bns-teal);display:block;margin-bottom:6px;font-size:13px;letter-spacing:.04em}
.bn-s-warn{border-left:5px solid var(--bns-orange);background:#fff6ec}
.bn-s-warn .bn-s-ttl{color:var(--bns-orange-text)}
.bn-s-unpub{border-left:5px solid var(--bns-navy);background:#f0f4f9}
.bn-s-unpub .bn-s-ttl{color:var(--bns-navy)}
.bn-s-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:0 0 24px}
.bn-s-kv div{border:1px solid var(--bns-rule);border-radius:6px;padding:12px 14px;background:#fff}
.bn-s-kv dt, .bn-s-kv .bn-s-k{font-size:11px;color:var(--bns-sub);letter-spacing:.06em;margin-bottom:4px}
.bn-s-kv .bn-s-v{font-size:20px;font-weight:800;color:var(--bns-navy);line-height:1.4}
.bn-s-kv .bn-s-v small{font-size:12px;font-weight:600;color:var(--bns-sub)}
.bn-s-faq details{border:1px solid var(--bns-rule);border-radius:6px;margin-bottom:10px;background:#fff}
.bn-s-faq summary{cursor:pointer;padding:14px 16px;font-weight:700;color:var(--bns-navy);list-style:none;position:relative;padding-left:44px;line-height:1.7}
.bn-s-faq summary::-webkit-details-marker{display:none}
.bn-s-faq summary::before{content:"Q";position:absolute;left:14px;top:13px;width:22px;height:22px;background:var(--bns-blue);color:#fff;border-radius:50%;font-size:12px;text-align:center;line-height:22px;font-weight:800}
.bn-s-faq .bn-s-a{padding:0 16px 16px 44px;position:relative;font-size:15px}
.bn-s-faq .bn-s-a::before{content:"A";position:absolute;left:14px;top:0;width:22px;height:22px;background:var(--bns-orange);color:#fff;border-radius:50%;font-size:12px;text-align:center;line-height:22px;font-weight:800}
.bn-s-editorial{border:2px solid var(--bns-navy);border-radius:6px;padding:18px;background:#fff}
.bn-s-editorial h3{margin-top:0;color:var(--bns-navy);font-size:15px}
.bn-s-editorial ul{margin-bottom:0;font-size:14px}
.bn-s-sources{background:var(--bns-bg);border:1px solid var(--bns-rule);border-radius:6px;padding:16px 18px 6px;font-size:14px}
.bn-s-sources ol{padding-left:1.3em}
.bn-s-sources .bn-s-note{font-size:12px;color:var(--bns-sub);padding-bottom:10px}
.bn-s-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.bn-s-related div{border:1px dashed var(--bns-rule);border-radius:6px;padding:14px;font-size:13px;color:var(--bns-sub);background:var(--bns-bg)}
.bn-s-related .bn-s-rt{color:var(--bns-navy);font-weight:700;display:block;margin-bottom:6px;line-height:1.6}
.bn-s-site-footer{background:var(--bns-navy);color:#cfe0f5;padding:26px 20px;font-size:12px;text-align:center;line-height:1.9}
.bn-s-site-footer a{color:#fff}
@media(max-width:900px){.bn-s-wrap{grid-template-columns:1fr;gap:18px}.bn-s-toc{position:relative;top:0}.bn-s-toc-toggle{display:block;width:100%;background:var(--bns-navy);color:#fff;border:0;border-radius:5px;padding:11px;font-size:13px;font-weight:700;cursor:pointer;text-align:left}.bn-s-toc-body{display:none;margin-top:10px}.bn-s-toc.bn-s-open .bn-s-toc-body{display:block}.bn-s-toc{background:transparent;border:0;padding:0}.bn-s-toc h2{display:none}.bn-s-root h1{font-size:23px}.bn-s-root h2{font-size:19px}.bn-s-lead{font-size:16px}}
.bn-s-root figure img{width:100%;height:auto;display:block;border:1px solid var(--bns-rule);border-radius:6px;background:#fff}
.bn-s-kv{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.bn-s-kv .bn-s-v{font-size:19px;overflow-wrap:anywhere}