/* ============================================================
   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; }