@charset "utf-8";
/* =========================================================
 * 弁護士相談広場 リニューアル 専用CSS (bh2026.css)
 * デザイン方向: B案「信頼・クレイン」
 *   - 濃紺 × オレンジ / 細い情報帯・濃紺ボーダー・直線基調
 *   - オレンジの縦罫見出し・枠線/区切りを効かせた構造的なかっちり感
 *
 * このCSSは新デザインのページでのみ読み込まれる(既存style.cssは読まない)。
 * 全体を .bh で囲い、スタイルは原則 .bh 配下に限定する。
 * ========================================================= */

/* ---------- リセット(最小限・スコープ内) ---------- */
/* bh2026ページは base.css を読まないため、body標準余白(8px)が残る。
   header-bh.php が付与する body#topPage / body#page を狙ってリセットし、
   ヘッダー上・サイド・フッター下の余白を除去する。 */
body#topPage, body#page { margin: 0; padding: 0; }
.bh, .bh * { box-sizing: border-box; }
.bh { margin: 0; }
.bh img { max-width: 100%; height: auto; display: block; }
.bh a { text-decoration: none; }
.bh button { font-family: inherit; cursor: pointer; }
.bh ul, .bh ol { margin: 0; padding: 0; list-style: none; }

/* ---------- デザイントークン ---------- */
:root {
  --bh-navy: #0a3d6e;
  --bh-navy-deep: #072a4f;
  --bh-ink: #16263a;
  --bh-sub: #5d7186;
  --bh-cta: #e8730c;
  --bh-line: #dde4ec;
  --bh-line-strong: #c5d0db;
  --bh-bg: #f2f5f8;
  --bh-gold: #b8862b;
  --bh-gold-bg: #fdf6e8;

  /* 分野アクセント(デフォルト=交通事故シアン)。.bh--{field}で上書き */
  --bh-acc: #0e7490;
  --bh-tint: #e2f2f6;

  --bh-pad: 20px;
  --bh-font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Segoe UI", Roboto, sans-serif;
}

/* ---------- 分野別アクセント(11分野) ---------- */
.bh--traffic-accident { --bh-acc:#0e7490; --bh-tint:#e2f2f6; }
.bh--inheritance      { --bh-acc:#1f7a52; --bh-tint:#e7f4ee; }
.bh--divorce          { --bh-acc:#b14a6b; --bh-tint:#fbecf1; }
.bh--debt             { --bh-acc:#0f766e; --bh-tint:#e0f2f0; }
.bh--criminal-case    { --bh-acc:#9b3838; --bh-tint:#f8e9e9; }
.bh--labor-problems   { --bh-acc:#b45309; --bh-tint:#fbefe0; }
.bh--corporate        { --bh-acc:#3b4e8c; --bh-tint:#e9ecf7; }
.bh--real-estate      { --bh-acc:#6b6130; --bh-tint:#f4f1e3; }
.bh--debt-collection  { --bh-acc:#7a5295; --bh-tint:#f1eaf6; }
.bh--consumer-damage  { --bh-acc:#a14d2a; --bh-tint:#f8ece4; }
.bh--internet         { --bh-acc:#3f6699; --bh-tint:#e8eef6; }

/* ---------- ベース ---------- */
.bh {
  font-family: var(--bh-font);
  color: var(--bh-ink);
  background: var(--bh-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.bh__container { max-width: 480px; margin: 0 auto; background: var(--bh-bg); }
/* 記事ページは白背景の方が見やすいので、記事ページのみ白地にする */
.bh--article, .bh--article .bh__container { background: #fff; }
.bh--article .mainWrap.under { background: #fff; }

/* ---------- 情報帯(最上部の細い帯) ---------- */
.bh-topbar {
  background: var(--bh-navy-deep);
  padding: 7px var(--bh-pad);
  text-align: center;
}
.bh-topbar__text { font-size: 10px; color: #bcd0e4; letter-spacing: .06em; }

/* ---------- ヘッダー ---------- */
.bh-header {
  display: flex; flex-direction: column; align-items: stretch;
  background: #fff;
  border-bottom: 2px solid var(--bh-navy);
}
.bh-header__brand { display: flex; align-items: center; gap: 9px; }
.bh-header__logo { height: 32px; width: auto; flex-shrink: 0; }
.bh-header__name { font-size: 18px; font-weight: 700; color: var(--bh-navy); letter-spacing: .02em; line-height: 1.1; }
.bh-header__tagline { display: block; font-size: 9px; color: var(--bh-sub); letter-spacing: 0; margin-top: 1px; line-height: 1.2; }

/* ---------- ヒーロー ---------- */
.bh-hero { position: relative; }
.bh-hero__img { width: 100%; height: 250px; object-fit: cover; }
.bh-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,42,79,.82), rgba(7,42,79,.76));
}
.bh-hero__body {
  position: absolute; inset: 0; padding: 30px 22px;
  display: flex; flex-direction: column; justify-content: center;
}
.bh-hero__rule { width: 36px; height: 3px; background: var(--bh-cta); margin-bottom: 18px; }
.bh-hero__title { font-size: 24px; line-height: 1.5; font-weight: 700; color: #fff; margin: 0 0 12px; letter-spacing: .03em; }
.bh-hero__lead { font-size: 13.5px; line-height: 1.85; color: #cfdcea; margin: 0; }

/* 安心バッジ帯 */
.bh-trustbar { display: flex; background: linear-gradient(135deg, #c0392b, #a93226); }
.bh-trustbar__item {
  flex: 1; text-align: center; padding: 11px 4px;
  border-right: 1px solid rgba(255,255,255,.12);
  font-size: 10.5px; color: #dce8f4;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.bh-trustbar__item:last-child { border-right: none; }

/* ---------- セクション共通 ---------- */
.bh-section { padding: 24px var(--bh-pad); }
.bh-section--white { background: #fff; border-bottom: 1px solid var(--bh-line); }
.bh-section--bg { background: var(--bh-bg); }

/* セクション見出し(オレンジ縦罫) */
.bh-sectitle {
  position: relative;
  font-size: 23px; font-weight: 700; color: var(--bh-ink);
  margin: 0; padding-left: 17px;
  letter-spacing: .01em; line-height: 1.4;
}
.bh-sectitle:before {
  content: ""; position: absolute; left: 0; top: .1em;
  width: 6px; height: 1.05em; border-radius: 3px;
  background: linear-gradient(180deg, var(--bh-cta) 0%, #c95f0a 100%);
}
.bh-sectitle__sub { font-size: 12.5px; color: var(--bh-sub); margin: 9px 0 0; padding-left: 15px; line-height: 1.7; }
/* 見出しのアクセント版(分野色・ゴールド・濃紺) */
.bh-sectitle--acc:before { background: linear-gradient(180deg, var(--bh-acc) 0%, #0a5f73 100%); }
.bh-sectitle--gold:before { background: linear-gradient(180deg, var(--bh-gold) 0%, #b8941f 100%); }
.bh-sectitle--navy:before { background: linear-gradient(180deg, var(--bh-navy) 0%, var(--bh-navy-deep) 100%); }

/* バッジ(無料・登録不要 等) */
.bh-badge {
  display: inline-block; background: var(--bh-cta); color: #fff;
  font-size: 10px; font-weight: 700; padding: 4px 10px;
  letter-spacing: .06em; margin-bottom: 12px;
}

/* ---------- ボタン ---------- */
.bh-btn { display: flex; align-items: center; justify-content: center; gap: 8px; border: none; font-weight: 700; text-align: center; }
.bh-btn--cta { background: var(--bh-cta); color: #fff; padding: 16px; font-size: 15px; letter-spacing: .04em; }
.bh-btn--acc { background: var(--bh-acc); color: #fff; padding: 14px; font-size: 13.5px; }
.bh-btn--outline { background: #fff; color: var(--bh-navy); border: 1px solid var(--bh-navy); padding: 13px; font-size: 13px; }

/* ---------- 検索フォーム ---------- */
.bh-search__field {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border: 1px solid var(--bh-line-strong); background: #fafbfc;
  font-size: 13.5px; color: var(--bh-sub); margin-bottom: 10px;
}
.bh-search__field-label { display: flex; align-items: center; gap: 9px; }

/* ---------- 診断ツールカード ---------- */
.bh-tool {
  display: flex; align-items: center; gap: 14px; padding: 17px 16px;
  background: #fff; border: 1px solid var(--bh-line);
  border-left: 4px solid var(--bh-cta); margin-bottom: 11px; border-radius: 6px;
}
.bh-tool__icon {
  flex-shrink: 0; width: 48px; height: 48px;
  background: linear-gradient(135deg, #eaf1f8 0%, #dde9f4 100%);
  border: 1px solid #cfe0f0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.bh-tool__icon img { width: 28px; height: 28px; }
.bh-tool__body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.bh-tool__name { font-size: 15.5px; font-weight: 700; color: var(--bh-ink); line-height: 1.4; }
.bh-tool__desc { font-size: 12.5px; color: var(--bh-sub); line-height: 1.5; }

/* ---------- 分野グリッド ---------- */
.bh-fieldgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.bh-fieldgrid__item {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 6px; background: #fff; border: 1px solid var(--bh-line);
}
.bh-fieldgrid__icon { width: 32px; height: 32px; }
.bh-fieldgrid__label { font-size: 11.5px; color: var(--bh-ink); font-weight: 600; text-align: center; }

/* ---------- 分野アイコン(共通: SVG表示) ---------- */
.bh-ficon { display: inline-block; vertical-align: middle; }
.bh-ficon svg { display: block; }

/* ---------- チップ(分野×エリア等) ---------- */
.bh-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--bh-navy);
  border: 1px solid var(--bh-line-strong); padding: 7px 11px;
  background: #fafbfc; white-space: nowrap;
}
.bh-chiprow { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---------- カード枠 ---------- */
.bh-card { background: #fff; border: 1px solid var(--bh-line); }
.bh-card--acctop { border-top: 3px solid var(--bh-cta); }
.bh-card--goldtop { border: 1px solid var(--bh-gold); border-top: 3px solid var(--bh-gold); }

/* ---------- 都道府県グリッド ---------- */
.bh-prefgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.bh-prefgrid__item {
  text-align: center; padding: 13px 4px; background: #fff;
  border: 1px solid var(--bh-line); font-size: 12px; color: var(--bh-ink); font-weight: 600;
}

/* ---------- 統計ボックス ---------- */
.bh-stats { display: flex; border: 1px solid var(--bh-line); }
.bh-stats__item { flex: 1; text-align: center; padding: 18px 8px; border-right: 1px solid var(--bh-line); }
.bh-stats__item:last-child { border-right: none; }
.bh-stats__label { font-size: 11px; color: var(--bh-sub); margin: 0 0 4px; }
.bh-stats__num { font-size: 22px; font-weight: 700; color: var(--bh-navy); margin: 0; }
.bh-stats__num small { font-size: 12px; }

/* ---------- 本文(SEO等) ---------- */
.bh-prose p { font-size: 14px; color: #33445a; line-height: 2.0; margin: 0 0 14px; }
.bh-prose .bh-prose__h {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 800; color: var(--bh-navy); letter-spacing: .01em;
  margin: 30px 0 12px; padding: 0 0 9px; border-bottom: 1px solid var(--bh-line);
}
.bh-prose__h:before {
  content: ""; flex-shrink: 0;
  width: 5px; height: 19px; border-radius: 3px;
  background: linear-gradient(180deg, var(--bh-acc) 0%, #c95f0a 100%);
}
.bh-prose__h:first-child { margin-top: 0; }

/* ---------- フッター ---------- */
.bh-footer-cta { background: var(--bh-navy); padding: 14px var(--bh-pad); }
.bh-footer-cta__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--bh-cta); border: none;
  color: #fff; padding: 16px; font-size: 15px; font-weight: 700; letter-spacing: .04em;
  transition: background-color .2s, box-shadow .2s;
}
.bh-footer-cta__btn:hover { background: #cf6109; box-shadow: 0 4px 14px rgba(232,115,12,.35); }
.bh-footer { background: var(--bh-navy-deep); padding: 24px var(--bh-pad); }
.bh-footer__heading {
  font-size: 12px; font-weight: 700; color: #fff; margin: 0 0 4px;
  padding-bottom: 10px; border-bottom: 2px solid rgba(255,255,255,.18); letter-spacing: .04em;
}
.bh-footer__links { display: flex; flex-direction: column; margin-bottom: 22px; }
.bh-footer__link {
  font-size: 12px; color: #cfdcea; padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 9px;
}
.bh-footer__brand-wrap { border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; }
.bh-footer__brand { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.bh-footer__logo { height: 17px; width: auto; flex-shrink: 0; }
.bh-footer__name { font-size: 15px; font-weight: 700; color: #fff; margin: 0; letter-spacing: .05em; }
.bh-footer__tagline { font-size: 10.5px; color: #8ba6c4; margin: 0 0 16px; letter-spacing: .03em; }
.bh-footer__nav { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.bh-footer__nav a { font-size: 11.5px; color: #9fb6cd; }
.bh-footer__copy { font-size: 10.5px; color: #6f8aa8; margin: 0; }
/* 士業グループメディア(姉妹サイト) */
.bh-footer__heading--sub { margin-top: 26px; }
.bh-footer__group { list-style: none; margin: 14px 0 22px; padding: 0; display: flex; flex-direction: column; }
.bh-footer__group li { list-style: none; }
.bh-footer__group a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: #cfdcea; padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.bh-footer__group a:before {
  content: ""; flex-shrink: 0;
  width: 5px; height: 5px; border-radius: 50%; background: #9fc0e4;
}
.bh-footer__group a:hover { color: #fff; }

/* ---------- 記事/詳細ページ用 ---------- */
/* パンくず */
.bh-breadcrumb {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 5px;
  padding: 11px var(--bh-pad); background: #fff;
  border-bottom: 1px solid var(--bh-line); font-size: 11px; color: var(--bh-sub);
  list-style: none; margin: 0;
  white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.bh-breadcrumb::-webkit-scrollbar { display: none; }
/* 実HTMLは <nav class="bh-breadcrumb"> 直下に裸の <li>。インライン化＋区切り「›」を付与 */
.bh-breadcrumb li { list-style: none; display: inline-flex; align-items: center; flex-shrink: 0; }
.bh-breadcrumb li:not(:first-child)::before {
  content: "›"; margin: 0 7px 0 2px; color: var(--bh-line-strong); font-size: 12px;
}
.bh-breadcrumb a { color: var(--bh-sub); text-decoration: none; }
.bh-breadcrumb a:hover { color: var(--bh-acc); text-decoration: underline; }
/* 最終(現在ページ)。実HTMLは li.pc > span */
.bh-breadcrumb li:last-child span,
.bh-breadcrumb .is-current { color: var(--bh-ink); font-weight: 600; }

/* 記事見出し(融合: 背景番号+下線) */
.bh-h2 { position: relative; margin: 30px var(--bh-pad) 16px; }
.bh-h2__num {
  position: absolute; top: -12px; left: -2px;
  font-size: 46px; font-weight: 800; color: var(--bh-tint); line-height: 1; z-index: 0;
}
.bh-h2__text {
  position: relative; z-index: 1;
  font-size: 18px; font-weight: 700; color: var(--bh-ink);
  margin: 0; padding: 6px 0 11px 14px;
  border-bottom: 2px solid var(--bh-acc); letter-spacing: .03em; line-height: 1.45;
}
.bh-h3 {
  font-size: 14.5px; font-weight: 700; color: var(--bh-acc);
  margin: 22px var(--bh-pad) 9px; padding-left: 11px;
  border-left: 3px solid var(--bh-acc); letter-spacing: .02em;
}
.bh-body-p { font-size: 13.5px; color: #33445a; line-height: 2.0; margin: 0 var(--bh-pad) 14px; }

/* 情報ボックス */
.bh-infobox { margin: 18px var(--bh-pad); border: 1px solid var(--bh-line); }
.bh-infobox__label {
  display: flex; align-items: center; gap: 7px; padding: 9px 13px;
  background: var(--bh-tint); border-bottom: 1px solid var(--bh-line);
  font-size: 12px; font-weight: 700; color: var(--bh-ink); letter-spacing: .03em;
}
.bh-infobox__text { font-size: 13.5px; color: #445468; line-height: 1.9; margin: 0; padding: 13px; }
/* 注意ボックス(オレンジ) */
.bh-alertbox { margin: 18px var(--bh-pad); border: 1px solid #f0d9c0; }
.bh-alertbox__label {
  display: flex; align-items: center; gap: 7px; padding: 9px 13px;
  background: #fcf2e7; border-bottom: 1px solid #f0d9c0;
  font-size: 12px; font-weight: 700; color: #9a5510; letter-spacing: .03em;
}
.bh-alertbox__text { font-size: 13.5px; color: #6b4a25; line-height: 1.9; margin: 0; padding: 13px; }

/* テーブル */
.bh-table-wrap { margin: 16px var(--bh-pad); border: 1px solid var(--bh-line); overflow-x: auto; }
.bh-table { width: 100%; border-collapse: collapse; min-width: 300px; }
.bh-table thead tr { background: var(--bh-navy); }
.bh-table th {
  padding: 10px 12px; font-size: 11px; color: #fff; text-align: left;
  border-right: 1px solid rgba(255,255,255,.15);
}
.bh-table th:last-child { border-right: none; }
.bh-table td {
  padding: 11px 12px; font-size: 12px; color: #445468;
  border-bottom: 1px solid var(--bh-line); border-right: 1px solid var(--bh-line);
}
.bh-table td:last-child { border-right: none; }
.bh-table tbody tr:nth-child(odd) { background: #fff; }
.bh-table tbody tr:nth-child(even) { background: #f6fafb; }
.bh-table td.is-key { color: var(--bh-ink); font-weight: 700; }
.bh-table__note { font-size: 10px; color: #8595a5; margin: 8px var(--bh-pad) 0; }

/* 追従CTA(下固定) */
.bh-sticky {
  position: sticky; bottom: 0; display: flex; gap: 8px;
  padding: 9px 14px; background: rgba(255,255,255,.97);
  border-top: 1px solid var(--bh-line); box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}

/* ---------- 事務所詳細: 問い合わせ・在籍弁護士 等 ---------- */
.bh-contact { background: #fff; border: 1px solid var(--bh-acc); }
.bh-contact__head { background: var(--bh-acc); padding: 8px; text-align: center; font-size: 11px; font-weight: 700; color: #fff; letter-spacing: .06em; }
.bh-contact__tel { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 4px 0; }
.bh-contact__tel-num { font-size: 25px; font-weight: 700; color: var(--bh-ink); letter-spacing: .02em; }

.bh-pagenav { padding: 14px var(--bh-pad); background: var(--bh-bg); border-bottom: 1px solid var(--bh-line); overflow-x: auto; }
.bh-pagenav__row { display: flex; gap: 8px; }
.bh-pagenav__item { font-size: 11.5px; color: var(--bh-navy); border: 1px solid var(--bh-line); padding: 8px 13px; background: #fff; white-space: nowrap; }

.bh-secttl-block {
  font-size: 17px; font-weight: 700; color: var(--bh-ink); margin: 0;
  padding: 14px var(--bh-pad) 12px; border-left: 4px solid var(--bh-cta);
  background: #fff; letter-spacing: .04em;
}

/* レスポンシブ: 余白の微調整 */
@media (max-width: 360px) {
  :root { --bh-pad: 16px; }
  .bh-hero__title { font-size: 21px; }
}

/* アクセシビリティ: フォーカス可視化 */
.bh a:focus-visible, .bh button:focus-visible { outline: 2px solid var(--bh-cta); outline-offset: 2px; }
/* モーション軽減 */
@media (prefers-reduced-motion: reduce) { .bh * { transition: none !important; animation: none !important; } }

/* =========================================================
 * 分野×エリア一覧ページ専用(archive-lawyer / page_area_st)
 *   実コードの3パターン表示に対応:
 *   - premium  : client_number有=注目枠(ゴールド・画像・電話/メール・リンク)
 *   - standard : lawyer_flag有=リンク・画像あり
 *   - basic    : フラグなし=情報のみ(リンク・画像なし)
 * ========================================================= */

/* 分野切替チップ(上部の横スクロール) */
.bh-catselect { padding: 14px var(--bh-pad); background: var(--bh-bg); border-bottom: 1px solid var(--bh-line); overflow-x: auto; }
.bh-catselect__row { display: flex; gap: 8px; }
.bh-catselect__item {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 11.5px; color: var(--bh-navy); font-weight: 600;
  border: 1px solid var(--bh-line-strong); padding: 8px 12px;
  background: #fff; white-space: nowrap;
}
.bh-catselect__item.is-active { background: var(--bh-acc); color: #fff; border-color: var(--bh-acc); }
.bh-catselect__item.is-active svg { stroke: #fff; }

/* 市区町村ナビ / 市区町村ページの分野ナビ(県トップ page_area_bh 用) */
.bh-citynav { padding: 14px var(--bh-pad); background: #fff; border-bottom: 1px solid var(--bh-line); }
.bh-citynav__label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--bh-navy); margin: 0 0 10px;
}
.bh-citynav__row { display: flex; flex-wrap: wrap; gap: 8px; }
.bh-citynav__item {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--bh-navy); font-weight: 600;
  border: 1px solid var(--bh-line-strong); padding: 8px 11px;
  background: #fff; white-space: nowrap; line-height: 1.3;
}
.bh-citynav__item svg { flex-shrink: 0; }

/* 一覧の検索/絞り込みヘッダ */
.bh-listhead { padding: 22px var(--bh-pad); background: #fff; border-bottom: 1px solid var(--bh-line); }
.bh-listhead__badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bh-acc); color: #fff; font-size: 11px; font-weight: 700;
  padding: 5px 11px; margin-bottom: 13px; letter-spacing: .03em;
}
.bh-listhead__title { font-size: 28px; font-weight: 700; color: var(--bh-ink); margin: 0 0 10px; line-height: 1.4; letter-spacing: .01em; }
.bh-listhead__lead { font-size: 13.5px; color: var(--bh-sub); line-height: 1.9; margin: 0; }

/* 件数表示 */
.bh-listcount { font-size: 11px; color: var(--bh-sub); margin: 0 0 14px; padding-left: 11px; }

/* 事務所リスト */
.bh-officelist { display: flex; flex-direction: column; gap: 12px; }

/* --- premium(注目枠) --- */
.bh-office--premium { border: 1px solid var(--bh-gold); border-top: 3px solid var(--bh-gold); background: #fff; }
.bh-office--premium .bh-office__pr {
  background: var(--bh-gold-bg); padding: 7px 14px;
  display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #eadcc0;
  font-size: 10.5px; font-weight: 700; color: #8a6518; letter-spacing: .04em;
}
.bh-office__inner { padding: 16px; }
.bh-office__top { display: flex; gap: 13px; margin-bottom: 9px; }
.bh-office__thumb { flex-shrink: 0; width: 76px; height: 96px; object-fit: cover; border: 1px solid var(--bh-line); background: #eef3f8; }
.bh-office--premium .bh-office__thumb { width: 96px; height: 120px; }
.bh-office__catch { font-size: 12px; color: var(--bh-acc); font-weight: 600; line-height: 1.5; margin: 0 0 4px; }
.bh-office__name { font-size: 17px; font-weight: 700; color: var(--bh-ink); margin: 0 0 5px; line-height: 1.4; }
.bh-office__name a { color: var(--bh-ink); }
.bh-office__meta { font-size: 11px; color: var(--bh-sub); margin: 0; display: flex; align-items: center; gap: 5px; }
.bh-office__tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.bh-office__tag { font-size: 9.5px; color: var(--bh-navy); background: #eef3f8; padding: 3px 8px; font-weight: 600; border: 1px solid #d3e0ec; }
.bh-office__fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.bh-office--premium .bh-office__fields { margin-bottom: 6px; }
.bh-office__fields .bh-ficon { display: inline-flex; }
/* 「対応分野」ラベルは独立した行に(タグは次の行へ折り返す) */
.bh-office__fields-label { font-size: 11.5px; font-weight: 700; color: var(--bh-navy); margin: 0; white-space: nowrap; }
.bh-fieldtag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--bh-ink); background: var(--bh-tint); border: 1px solid var(--bh-line); border-radius: 5px; padding: 4px 9px; line-height: 1.3; }
.bh-fieldtag .bh-ficon svg { width: 15px; height: 15px; }
/* 無料枠の対応分野タグはグレースケール(色を付けず地味に) */
/* 注目枠(premium)以外=標準枠+無料枠の対応分野タグはグレースケール(色を付けず地味に) */
.bh-office--standard .bh-fieldtag,
.bh-office--basic .bh-fieldtag { background: #f1f4f7; border-color: var(--bh-line); color: var(--bh-sub); }
.bh-office--standard .bh-fieldtag .bh-ficon svg,
.bh-office--basic .bh-fieldtag .bh-ficon svg { filter: grayscale(1); opacity: .65; }
.bh-office--standard .bh-office__fields-label,
.bh-office--basic .bh-office__fields-label { color: var(--bh-sub); }
.bh-office__text { font-size: 13px; color: #445468; line-height: 1.85; margin: 0 0 13px; }
/* 紹介文 3行クランプ＋「続きを見る／閉じる」 */
.introExpand { margin: 0 0 13px; }
.introExpand__text { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.introExpand__text.is-clamped { -webkit-line-clamp: 3; }
.introExpand__text:not(.is-clamped) { -webkit-line-clamp: unset; overflow: visible; }
.introExpand__btn {
  display: inline-block; margin-top: 4px;
  color: var(--bh-acc); font-weight: 700; font-size: 11.5px;
  white-space: nowrap; cursor: pointer; text-decoration: none;
}
.introExpand__btn:hover { text-decoration: underline; }
.introExpand__btn[hidden] { display: none; }
.bh-office__cta { margin: 0; }
.bh-office__btns { display: flex; align-items: stretch; gap: 8px; }
.bh-office__btns .bh-btn { flex: 1; }
.bh-office__btns .bh-office__tel { flex: 1; }
.bh-office__btns .bh-btn--cta { display: flex; align-items: center; justify-content: center; }
.bh-office__tel {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--bh-acc); color: var(--bh-acc);
  padding: 12px; font-size: 13px; font-weight: 700;
}
/* #11 有料枠(premium)内の電話ボックスは金系で統一(カード枠・PR帯に合わせる) */
.bh-office--premium .bh-office__tel { border-color: #c9a227; color: #b8862b; }
.bh-office__detaillink {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 8px; padding: 10px; background: #fafbfc; border: 1px solid var(--bh-line);
  color: var(--bh-navy); font-size: 12px; font-weight: 600;
}

/* --- standard(リンク・画像あり) --- */
.bh-office--standard { border: 1px solid var(--bh-line); background: #fff; }
.bh-office--standard .bh-office__name a { color: var(--bh-navy); }
.bh-office--standard .bh-office__name { font-size: 19px; }

/* --- basic(情報のみ) --- */
.bh-office--basic { border: 1px solid var(--bh-line); background: #fff; padding: 15px; }
.bh-office--basic .bh-office__name { font-size: 15.5px; color: var(--bh-ink); }
/* 無料枠は要素が少ないので、最後の要素の余分な下余白を詰める(住所下の空き対策) */
.bh-office--basic .bh-office__text { margin-bottom: 0; }
.bh-office--basic > *:last-child { margin-bottom: 0; }

/* 見つからなかった時 */
.bh-office--empty { border: 1px solid var(--bh-line); background: #fff; padding: 20px; text-align: center; }
.bh-office--empty__ttl { font-size: 14px; font-weight: 700; color: var(--bh-ink); margin: 0 0 6px; }
.bh-office--empty__txt { font-size: 12px; color: var(--bh-sub); line-height: 1.8; margin: 0; }

/* ページネーション */
.bh-pager { display: flex; justify-content: center; gap: 6px; padding: 8px var(--bh-pad) 22px; }
.bh-pager__item {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--bh-navy); border: 1px solid var(--bh-line); background: #fff;
}
.bh-pager__item.is-current { color: #fff; background: var(--bh-navy); border-color: var(--bh-navy); font-weight: 700; }

/* =========================================================
 * PC対応で追加した構造クラスの「スマホ用」定義
 *   PCレイアウト(後述のmin-width:1024px)で使うラッパ類は、
 *   スマホでは「素通し(余白だけ継承)」または「非表示」にする。
 *   これがないとスマホで崩れる。
 * ========================================================= */

/* ヘッダー: スマホではbarが従来のヘッダー見た目を担う */
.bh-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; width: 100%;
}
/* PC用グローバルナビは、スマホではアコーディオン開閉(L1729〜で max-height 制御)。
   旧 display:none は max-height 開閉と衝突しハンバーガーが開かないため削除。 */

/* trustbarの内側ラッパ: スマホでは中身をそのまま流す */
.bh-trustbar__inner { display: flex; width: 100%; }

/* セクション内側ラッパ: スマホでは余白を持たせず素通し
   (左右余白は親 .bh-section の padding で既に確保されている) */
.bh-section__inner { width: 100%; }

/* 検索フォーム: スマホでは縦積み(従来通り) */
.bh-search__form { display: block; margin-top: 14px; }
/* スマホ: 検索ボタンを中央寄せ(横いっぱいでなく適度な幅で中央配置) */
.bh-search__form .bh-btn--cta { width: auto; max-width: 340px; margin-left: auto; margin-right: auto; }

/* 診断ツールグリッド: スマホでは縦1列(従来通り) */
.bh-tool-grid { display: block; margin-top: 14px; }

/* 厳選事務所グリッド: スマホでは縦1列 */
.bh-pickup-grid { display: block; margin-top: 14px; }

/* フッター内側ラッパ・カラム: スマホでは素通し */
.bh-footer__inner { width: 100%; }
.bh-footer__cols { display: block; }

/* ヘッダーのスマホ用ハンバーガー(barの中のsvg)はスマホで表示 */
.bh-header__bar > svg { display: block; }
/* =========================================================
 * PC専用レイアウト(bh2026 — PC拡張)
 *   1024px以上でPC用レイアウトを適用。スマホ用は据え置き。
 *   方針: 最大1120px中央寄せ / ナビ横展開 / 主要セクション横並び
 * ========================================================= */

@media (min-width: 1024px) {

  /* コンテナをPC幅に解放 */
  .bh__container { max-width: 100%; }

  /* セクション内側を中央1120pxに */
  .bh-topbar { padding: 9px 0; }
  .bh-topbar__text { display: block; max-width: 1120px; margin: 0 auto; padding: 0 24px; text-align: right; }

  /* ===== ヘッダー: ナビ横展開 ===== */
  .bh-header {
    max-width: none; padding: 0;
    flex-direction: column; align-items: stretch;
  }
  .bh-header__bar {
    max-width: 1120px; width: 100%; margin: 0 auto; padding: 16px 24px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .bh-header__logo { height: 44px; }
  .bh-header__name { font-size: 26px; letter-spacing: .05em; }
  .bh-header__tagline { font-size: 11px; }
  .bh-header__tagline { font-size: 10px; }
  /* スマホのハンバーガーはPCで隠す */
  .bh-header > svg, .bh-header__burger, .bh-header__toggle { display: none; }
  /* PCナビ(横並びメニュー) */
  .bh-gnav { border-top: 1px solid var(--bh-line); background: var(--bh-navy); max-height: none; overflow: visible; }
  .bh-gnav__inner {
    max-width: 1120px; margin: 0 auto; padding: 0 24px;
    display: flex; flex-direction: row; align-items: stretch;
  }
  .bh-gnav__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 12px 6px; color: #dce8f4; font-size: 12px; font-weight: 600;
    border-right: 1px solid rgba(255,255,255,.12); text-decoration: none;
  }
  .bh-gnav__item:last-child { border-right: none; }
  .bh-gnav__item:hover { background: rgba(255,255,255,.08); }
  .bh-gnav__item svg { display: block; }

  /* ===== ヒーロー: 横長で大きく ===== */
  .bh-hero__img { height: 340px; max-height: 42vh; }
  .bh-hero__body {
    max-width: 1120px; margin: 0 auto; padding: 0 24px;
    left: 0; right: 0;
  }
  .bh-hero__title { font-size: 38px; }
  .bh-hero__lead { font-size: 16px; }
  .bh-hero__rule { width: 48px; height: 4px; }
  .bh-trustbar { }
  .bh-trustbar__inner {
    max-width: 1120px; margin: 0 auto; display: flex;
  }
  .bh-trustbar__item { padding: 14px; font-size: 13px; }

  /* ===== セクション共通: 中央1120px ===== */
  .bh-section { padding: 48px 0; }
  .bh-section__inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
  .bh-sectitle { font-size: 28px; padding-left: 19px; }
  .bh-sectitle__sub { font-size: 15px; padding-left: 19px; }

  /* 検索フォーム: 横並び(地域・内容・ボタンを1行に) */
  .bh-search__form { display: flex; gap: 12px; align-items: stretch; margin-top: 20px; }
  .bh-search__field { flex: 1; margin-bottom: 0; padding: 18px 20px; font-size: 15px; }
  .bh-search__form .bh-btn--cta { width: auto; padding: 0 40px; white-space: nowrap; }

  /* 診断ツール: 横4列 */
  .bh-tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
  .bh-tool { margin-bottom: 0; flex-direction: column; align-items: flex-start; padding: 26px 22px; gap: 14px; border-left: 1px solid var(--bh-line); border-top: 4px solid var(--bh-cta); }
  .bh-tool__icon { width: 58px; height: 58px; }
  .bh-tool__icon img { width: 34px; height: 34px; }
  .bh-tool__name { font-size: 17px; }
  .bh-tool__desc { font-size: 13px; line-height: 1.6; }
  .bh-tool > svg:last-child { display: none; } /* PCでは矢印を省略 */

  /* 分野グリッド: 掲載のある7分野を横一列に */
  .bh-fieldgrid { grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 20px; }
  .bh-fieldgrid__item { padding: 26px 8px; gap: 12px; }
  .bh-fieldgrid__icon, .bh-fieldgrid .bh-ficon svg { width: 42px !important; height: 42px !important; }
  .bh-fieldgrid__label { font-size: 12.5px; }

  /* 地域×分野: チップ大きく横ゆったり */
  .bh-card { padding: 28px !important; }
  .bh-chip { font-size: 13px; padding: 10px 16px; }

  /* 都道府県グリッド: 6列 */
  .bh-prefgrid { grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 20px; }
  .bh-prefgrid__item { padding: 16px 8px; font-size: 13px; }

  /* 厳選事務所: 2カラム想定 */
  .bh-pickup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }

  /* 統計: 大きく */
  .bh-stats__num { font-size: 32px; }
  .bh-stats__num small { font-size: 15px; }

  /* SEO本文: 読みやすい幅に */
  .bh-prose p { font-size: 16px; }
  .bh-prose .bh-prose__h { font-size: 18px; }

  /* ボタン全般: PC幅で中央寄せ・適正幅 */
  .bh-btn--outline { max-width: 360px; margin-left: auto; margin-right: auto; }

  /* ===== フッター: 横展開 ===== */
  .bh-footer-cta { padding: 20px 0; }
  .bh-footer-cta__btn { max-width: 400px; margin: 0 auto; }
  .bh-footer { padding: 48px 0 32px; }
  .bh-footer__inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
  .bh-footer__links {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 24px;
    margin-bottom: 32px;
  }
  .bh-footer__group {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px;
    margin-bottom: 32px;
  }
  .bh-footer__cols { display: flex; justify-content: space-between; align-items: flex-end; }

  /* PC幅では各セクションの内側ラッパに余白制御を委ねる */
  .bh-section--white > *, .bh-section--bg > * { } /* placeholder */
}

/* 中間幅(タブレット 768-1023px): 2列程度に */
@media (min-width: 768px) and (max-width: 1023px) {
  .bh__container { max-width: 720px; }
  .bh-tool-grid, .bh-tool { }
  .bh-fieldgrid { grid-template-columns: repeat(4, 1fr); }
  .bh-prefgrid { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
 * 分野×エリア一覧: ページ枠組み(追加分)
 * ========================================================= */

/* 分野ガイドへの導線ボタン */
.bh-listhead__guide {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 13px;
  font-size: 12px; font-weight: 600; color: var(--bh-navy);
  border: 1px solid var(--bh-line-strong); background: #fff; padding: 8px 14px;
}

/* 本文+サイドの構造(スマホ:縦1列) */
.bh-listbody { padding: 0 16px; }
.bh-listbody__main { width: 100%; }

/* サイドバー(スマホ:本文の下) */
.bh-sidebar { padding: 0 var(--bh-pad) 8px; }
.bh-sidebar__inner { width: 100%; }

/* サイドバー内の既存セクション(sideSec--blue等)をbh風に整える
   ※既存クラスを活かしつつ最低限の体裁を当てる */
.bh-sidebar .sideSec--blue,
.bh-sidebar section {
  background: #fff; border: 1px solid var(--bh-line);
  margin-bottom: 14px; overflow: hidden;
}
.bh-sidebar .sideSec--blue__ttl,
.bh-sidebar h5 {
  background: var(--bh-navy); color: #fff; font-size: 13px; font-weight: 700;
  padding: 11px 14px; margin: 0; letter-spacing: .02em;
}
.bh-sidebar .catList,
.bh-sidebar .pref { padding: 12px 14px; margin: 0; list-style: none; }
.bh-sidebar .catList__item { list-style: none; border-bottom: 1px solid var(--bh-line); }
.bh-sidebar .catList__item:last-child { border-bottom: none; }
.bh-sidebar .catList__item a {
  display: block; padding: 10px 4px; font-size: 12.5px; color: var(--bh-ink);
  position: relative;
}
.bh-sidebar .catList__item a:hover { color: var(--bh-acc); }
.bh-sidebar .pref__ttl { font-size: 11.5px; font-weight: 700; color: var(--bh-navy); margin: 14px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--bh-line); }
.bh-sidebar .pref__ttl:first-child { margin-top: 0; }
/* 都道府県リストを折り返すチップ状にして選びやすくする(縦長の解消) */
.bh-sidebar .pref dd,
.bh-sidebar .prefWrap { margin: 0 0 4px; }
.bh-sidebar .prefList { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bh-sidebar .prefList__item { list-style: none; }
@supports not (gap: 1px) { .bh-sidebar .prefList__item { margin: 0 6px 6px 0; } }
.bh-sidebar .prefList__item a {
  display: inline-block; font-size: 11.5px; color: var(--bh-navy); line-height: 1.2;
  border: 1px solid var(--bh-line-strong); border-radius: 4px; padding: 5px 9px; background: #fff;
  transition: background .15s, color .15s, border-color .15s;
}
.bh-sidebar .prefList__item a:hover { background: var(--bh-navy); color: #fff; border-color: var(--bh-navy); }

/* ページャー(bh風) */
.bh-listbody__main .pager { padding: 18px 0 8px; }
.bh-listbody__main .pagerList { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; list-style: none; padding: 0; margin: 0; }
.bh-listbody__main .pagerList li { list-style: none; }
.bh-listbody__main .pagerList a,
.bh-listbody__main .pagerList span {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 8px;
  font-size: 13px; border: 1px solid var(--bh-line); background: #fff; color: var(--bh-navy);
}
.bh-listbody__main .pagerList .current {
  background: var(--bh-navy); color: #fff; border-color: var(--bh-navy); font-weight: 700;
}
.bh-listbody__main .output { text-align: center; font-size: 11px; color: var(--bh-sub); margin-top: 8px; }

/* ===== PC: 本文+サイドを2カラムに ===== */
@media (min-width: 1024px) {
  .bh-listbody { max-width: 1120px; margin: 0 auto; padding: 36px 24px 48px; display: flex; gap: 32px; align-items: flex-start; }
  .bh-listbody__main { flex: 1; min-width: 0; }
  .bh-sidebar { width: 300px; flex-shrink: 0; padding: 0; position: sticky; top: 20px; }
  .bh-listhead { padding: 28px 24px 22px; }
  .bh-listhead, .bh-catselect, .bh-citynav, .bh-breadcrumb { max-width: 1120px; margin-left: auto; margin-right: auto; }
  /* アーカイブ(分野トップ)はコンテンツ幅1000pxに合わせる(パンくずが左に寄りすぎる問題の解消) */
  .archive .bh-breadcrumb { max-width: 1000px; }
  .bh-catselect { padding-left: 24px; padding-right: 24px; }
  .bh-citynav { padding-left: 24px; padding-right: 24px; }
  .bh-breadcrumb { padding-left: 24px; padding-right: 24px; }
  /* 注目枠: PCでは電話とメール相談を横並びにする(縦積みより収まりが良い) */
  .bh-office--premium .bh-office__btns { gap: 10px; }
  /* 注目枠: 事務所名・キャッチを少し大きく */
  .bh-office--premium .bh-office__catch { font-size: 13px; }
  .bh-office--premium .bh-office__name { font-size: 20px; }
}

/* =========================================================
 * 注目枠(premium)強調: 複合A(フル装備・リボンあり)
 *   濃紺帯(PR明示)+ゴールド下線+左ライン+影+右上リボン
 * ========================================================= */
.bh-office--premium {
  border: 1px solid #c9a227;
  border-left: 5px solid #c9a227;
  box-shadow: 0 5px 18px rgba(201,162,39,.20);
  position: relative;
  overflow: visible;
  background: #fff;
}
/* PR帯(濃紺+ゴールド下線+PRバッジ+掲載スポンサー) */
.bh-office__pr {
  background: #0a3d6e;
  color: #fff;
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 700;
  padding: 11px 14px; border-bottom: 3px solid #c9a227;
  letter-spacing: .04em;
}
.bh-office__pr-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #c9a227; color: #fff; font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 2px; flex-shrink: 0;
}
.bh-office__pr-sub { margin-left: auto; font-size: 10px; font-weight: 400; color: #bcd0e4; flex-shrink: 0; }
/* 右上リボン */
.bh-office__ribbon {
  position: absolute; top: -1px; right: 14px; z-index: 2;
  background: #c9a227; color: #fff; font-size: 11px; font-weight: 700;
  padding: 7px 12px 9px; display: flex; align-items: center; gap: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); letter-spacing: .05em;
}
.bh-office__ribbon:after {
  content: ""; position: absolute; bottom: -6px; left: 0; right: 0; height: 6px;
  background: #a8851c; clip-path: polygon(0 0, 50% 100%, 100% 0);
}

/* =========================================================
 * 電話受付時間の表示 + 時間内/時間外のグレーアウト
 * ========================================================= */
.bh-office__telopen {
  font-size: 10.5px; color: var(--bh-sub); display: flex; align-items: center; gap: 4px;
  margin: 7px 0 0;
}
.bh-office__telopen-status {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
}
/* 受付中(緑) */
.is-tel-open .bh-office__telopen-status { background: #e3f4ea; color: #1f7a52; }
.is-tel-open .bh-office__telopen-status:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #28a745; display: inline-block; }
/* 時間外(グレー) */
.is-tel-closed .bh-office__telopen-status { background: #eef1f4; color: #8a96a5; }
.is-tel-closed .bh-office__telopen-status:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #aab6c4; display: inline-block; }

/* 時間外: 電話ボタンをグレーアウト */
.is-tel-closed .bh-office__tel {
  border-color: #cbd3dc; color: #9aa6b2; pointer-events: none; background: #f7f9fb;
}
.is-tel-closed .bh-office__tel svg { stroke: #9aa6b2 !important; }

/* =========================================================
 * 事務所詳細(single-lawyer)
 * ========================================================= */

/* 詳細ヘッダー(事務所名・キャッチ・注力分野) */
.bh-detailhead { padding: 22px var(--bh-pad) 20px; background: #fff; border-bottom: 1px solid var(--bh-line); }
.bh-detailhead__catch { font-size: 13px; color: var(--bh-acc); font-weight: 600; margin: 0 0 7px; line-height: 1.6; }
.bh-detailhead__title { font-size: 22px; font-weight: 700; color: var(--bh-ink); margin: 0 0 6px; line-height: 1.45; }
.bh-detailhead__sub { font-size: 13.5px; color: var(--bh-sub); margin: 0 0 14px; line-height: 1.7; }
.bh-detailhead__fields { margin-top: 16px; }
.bh-detailhead__fields-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--bh-navy); margin-bottom: 10px; letter-spacing: .04em; }
.bh-detailhead__fields-list { display: flex; flex-wrap: wrap; gap: 10px; }
/* リッチな注力分野タグ: 分野色のアイコン丸 + 淡い背景 + 分野色の枠 */
.bh-detailhead__field {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; color: var(--bh-navy);
  border: 1.5px solid var(--bh-acc); background: var(--bh-tint);
  padding: 8px 14px 8px 8px; border-radius: 24px;
  transition: transform .15s, box-shadow .2s;
}
.bh-detailhead__field-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--bh-acc);
  flex-shrink: 0;
}
.bh-detailhead__field:hover { transform: translateY(-2px); box-shadow: 0 4px 12px color-mix(in srgb, var(--bh-acc) 30%, transparent); }
@supports not (background: color-mix(in srgb, red, blue)) {
  .bh-detailhead__field:hover { box-shadow: 0 4px 12px rgba(10,61,110,.2); }
}

/* PC: 詳細ヘッダーを中央に */
@media (min-width: 1024px) {
  .bh-detailhead { padding: 32px 0 26px; }
  .bh-detailhead, .bh--lawyer-detail .bh-breadcrumb { max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
  .bh-detailhead__title { font-size: 28px; }
}

/* =========================================================
 * 事務所詳細(single-lawyer) 本体セクション
 * ========================================================= */

/* 目次(TOC) */
.bh-toc { background: #fff; border: 1px solid var(--bh-line); border-top: 3px solid var(--bh-acc); margin: 0 0 20px; }
.bh-toc__heading { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--bh-navy); padding: 13px 16px; margin: 0; border-bottom: 1px solid var(--bh-line); background: var(--bh-bg); letter-spacing: .03em; }
.bh-toc__list { list-style: none; margin: 0; padding: 6px 16px; counter-reset: bh-toc-num; }
.bh-toc__item { list-style: none; border-bottom: 1px solid var(--bh-line); }
.bh-toc__item:last-child { border-bottom: none; }
/* 親項目: 連番付き */
.bh-toc__item > a { display: flex; align-items: center; gap: 10px; padding: 12px 4px; font-size: 14.5px; font-weight: 600; color: var(--bh-ink); position: relative; }
.bh-toc__item > a:before { content: counter(bh-toc-num); counter-increment: bh-toc-num; flex-shrink: 0; width: 22px; height: 22px; background: var(--bh-acc); color: #fff; font-size: 11px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.bh-toc__item > a:hover { color: var(--bh-acc); }
/* 子項目: 親からぶら下がるガイドライン付き */
.bh-toc__child { list-style: none; margin: 0 0 8px; padding: 0; position: relative; }
.bh-toc__child:before { content: ""; position: absolute; left: 10px; top: 0; bottom: 12px; width: 1.5px; background: var(--bh-line-strong); }
.bh-toc__child-item { list-style: none; position: relative; }
.bh-toc__child-item a { display: block; padding: 7px 4px 7px 28px; font-size: 13px; color: var(--bh-sub); position: relative; }
.bh-toc__child-item a:before { content: ""; position: absolute; left: 10px; top: 50%; width: 11px; height: 1.5px; background: var(--bh-line-strong); }
.bh-toc__child-item a:after { content: ""; position: absolute; left: 19px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--bh-acc); opacity: .6; }
.bh-toc__child-item a:hover { color: var(--bh-acc); }
.bh-toc__child-item a:hover { color: var(--bh-acc); }

/* 詳細本体の2カラム枠 */
.bh-detail-body { padding: 0 var(--bh-pad); }
.bh-detail-body__main { width: 100%; }
/* スマホ: ギャラリー → 連絡先カード → 本文 の順にする(反響重視でCVを上に)。
   __main を display:contents にして中の2セクションを直接の並び替え対象にする。 */
@media (max-width: 1023px) {
  .bh-detail-body { display: flex; flex-direction: column; }
  .bh-detail-body__main { display: contents; }
  .bh-detail-body__main > .bh-detail-sec:first-child { order: 1; } /* ギャラリー */
  .bh-detail-cv { order: 2; }
  .bh-detail-body__main > .bh-detail-sec:last-child { order: 3; }   /* 本文 */
}

/* 詳細セクション共通 */
.bh-detail-sections { padding: 0 var(--bh-pad); }
.bh-detail-sec { margin-bottom: 18px; }
.bh-detail-sec--boxed { background: #fff; border: 1px solid var(--bh-line); border-radius: 10px; padding: 0; overflow: hidden; box-shadow: 0 4px 16px rgba(16,38,58,.06); }
/* 見出し: ベタ塗り帯をやめ、白背景＋細いアクセント下線で上品に */
.bh-detail-sec--boxed > .bh-detail-sec__title {
  margin: 0; padding: 18px 22px 14px; background: #fff;
  border-left: none; border-bottom: 1px solid var(--bh-line);
  font-size: 22px; font-weight: 700; color: var(--bh-ink); letter-spacing: .02em;
  position: relative; line-height: 1.4;
}
.bh-detail-sec--boxed > .bh-detail-sec__title:before {
  content: ""; position: absolute; left: 22px; bottom: -1px;
  width: 46px; height: 2px; background: var(--bh-acc); border-radius: 0; top: auto; transform: none;
}
/* 箱の中身に余白 */
.bh-detail-sec--boxed > *:not(.bh-detail-sec__title) { padding-left: 22px; padding-right: 22px; }
.bh-detail-sec--boxed > *:not(.bh-detail-sec__title):last-child { padding-bottom: 22px; }
.bh-detail-sec--boxed > .bh-detail-sec__title + * { padding-top: 20px; }
.bh-detail-sec__title {
  font-size: 22px; font-weight: 700; color: var(--bh-ink); margin: 0 0 14px;
  padding-left: 12px; border-left: 4px solid var(--bh-acc); line-height: 1.4;
}
/* セクション見出しの上に小さなラベル(英字)を表示して上品さを出す */
.bh-detail-sec--boxed > .bh-detail-sec__title { padding-top: 28px; }
.bh-detail-sec--boxed > .bh-detail-sec__title:after {
  content: attr(data-eyebrow); position: absolute; left: 22px; top: 13px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; color: var(--bh-acc); text-transform: uppercase;
}

/* ギャラリー(メイン画像+サブ) */
.bh-detail-gallery { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bh-detail-gallery__main { width: 100%; }
/* メイン写真は切り抜かず、元の比率のまま全体表示(人物の頭が切れない) */
.bh-detail-gallery__main img { width: 100%; height: auto; border: 1px solid var(--bh-line); border-radius: 8px; display: block; }
.bh-detail-gallery__sub { width: calc(33.333% - 6px); }
.bh-detail-gallery__sub img { width: 100%; height: 76px; object-fit: cover; border: 1px solid var(--bh-line); border-radius: 5px; display: block; }

/* CV(連絡先カード) */
/* ===== 問い合わせカード(CV) ─ 反響重視の目立つデザイン ===== */
.bh-detail-cv { background: #fff; border: 1px solid var(--bh-line); border-top: 3px solid var(--bh-acc); border-radius: 10px; padding: 0; margin-bottom: 16px; overflow: hidden; box-shadow: 0 3px 14px rgba(16,38,58,.07); }
.bh-detail-cv__head { margin: 0; background: linear-gradient(135deg,var(--bh-navy),var(--bh-navy-deep)); color: #fff; padding: 13px 16px; font-size: 13px; font-weight: 700; text-align: center; letter-spacing: .03em; }
.bh-detail-cv__inner { padding: 16px; }
.bh-detail-cv__tel-block { text-align: center; margin-bottom: 12px; padding: 14px 10px; background: var(--bh-tint); border-radius: 8px; }
.bh-detail-cv__label { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--bh-sub); font-weight: 600; margin-bottom: 3px; }
.bh-detail-cv__tel { display: inline-flex; align-items: center; gap: 8px; font-size: 27px; font-weight: 800; color: var(--bh-navy); letter-spacing: .01em; line-height: 1.15; }
.bh-detail-cv__tel:before { content: ""; flex-shrink: 0; width: 22px; height: 22px; background: var(--bh-acc); border-radius: 50%; -webkit-mask: center/13px no-repeat; mask: center/13px no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.3 1l-2.2 2.2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.3 1l-2.2 2.2z'/%3E%3C/svg%3E"); }
.bh-detail-cv__telopen { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11.5px; color: var(--bh-sub); margin: 7px 0 0; }
.bh-detail-cv__holiday { font-size: 11px; color: var(--bh-sub); text-align: center; margin: 3px 0 0; }
/* 詳細CVの時間外グレーアウト */
.is-tel-closed .bh-detail-cv__tel { color: #9aa6b2; }
.is-tel-closed .bh-detail-cv__tel:before { background: #aab6c4; }
/* CTAボタン(メール相談)。電話とメールの2導線を強調 */
.bh-detail-cv__mail { width: 100%; }
.bh-detail-cv__more { margin-top: 16px; border-top: 1px solid var(--bh-line); padding-top: 14px; }
.bh-detail-cv__more-item { margin: 0 0 14px; }
.bh-detail-cv__more-item:last-child { margin-bottom: 0; }
.bh-detail-cv__more-item dt { font-size: 12px; font-weight: 700; color: var(--bh-navy); margin-bottom: 7px; padding-left: 9px; border-left: 3px solid var(--bh-acc); }
.bh-detail-cv__more-item dd { margin: 0; }
.bh-detail-arealist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bh-detail-arealist li { list-style: none; }
.bh-detail-arealist a { display: inline-block; font-size: 12px; color: var(--bh-navy); border: 1px solid var(--bh-line-strong); border-radius: 4px; padding: 5px 11px; background: #fff; transition: all .15s; }
.bh-detail-arealist a:hover { border-color: var(--bh-acc); color: #fff; background: var(--bh-acc); }
.bh-detail-features { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px 14px; }
.bh-detail-features li { list-style: none; display: flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--bh-ink); }

/* 本文プロース */
.bh-detail-prose { font-size: 14.5px; line-height: 1.95; color: var(--bh-ink); }
.bh-detail-prose p { margin: 0 0 1.2em; }
/* 見出しh2: 背景+左アクセントボーダー(記事ページと統一) */
.bh-detail-prose h2 { font-size: 19px; font-weight: 700; color: var(--bh-ink); margin: 1.8em 0 .8em; padding: 11px 14px; background: var(--bh-tint); border-left: 4px solid var(--bh-acc); line-height: 1.5; }
.bh-detail-prose h2:first-child { margin-top: 0; }
/* 見出しh3: 下線+左に小さなアクセント */
.bh-detail-prose h3 { position: relative; font-size: 16px; font-weight: 700; color: var(--bh-navy); margin: 1.6em 0 .6em; padding: 0 0 7px 14px; border-bottom: 2px solid var(--bh-line-strong); line-height: 1.5; }
.bh-detail-prose h3:before { content: ""; position: absolute; left: 0; top: 2px; bottom: 9px; width: 4px; background: var(--bh-acc); border-radius: 2px; }
/* 見出しh4 */
.bh-detail-prose h4 { font-size: 14.5px; font-weight: 700; color: var(--bh-navy); margin: 1.4em 0 .5em; padding-left: 10px; border-left: 3px solid var(--bh-line-strong); }
.bh-detail-prose a { color: var(--bh-acc); text-decoration: underline; }
.bh-detail-prose strong { color: var(--bh-navy); font-weight: 700; }
.bh-detail-prose img { max-width: 100%; height: auto; margin: .5em 0; }
.bh-detail-prose ul, .bh-detail-prose ol { margin: 0 0 1.2em; padding-left: 0; list-style: none; }
.bh-detail-prose ol { counter-reset: bh-prose-ol; }
/* リスト項目にアクセント */
.bh-detail-prose ul > li { position: relative; margin: 0 0 .6em; padding-left: 22px; line-height: 1.8; }
.bh-detail-prose ul > li:before { content: ""; position: absolute; left: 4px; top: .65em; width: 7px; height: 7px; background: var(--bh-acc); border-radius: 50%; }
.bh-detail-prose ol > li { position: relative; margin: 0 0 .6em; padding-left: 30px; line-height: 1.8; counter-increment: bh-prose-ol; }
.bh-detail-prose ol > li:before { content: counter(bh-prose-ol); position: absolute; left: 0; top: .1em; width: 21px; height: 21px; background: var(--bh-acc); color: #fff; font-size: 12px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
/* 本文中のテーブル */
.bh-detail-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 13px; }
.bh-detail-prose th, .bh-detail-prose td { border: 1px solid var(--bh-line); padding: 9px 12px; text-align: left; vertical-align: top; }
.bh-detail-prose th { background: var(--bh-tint); color: var(--bh-navy); font-weight: 700; }
/* 見出し行(thead)は紺で引き締め */
.bh-detail-prose thead th { background: var(--bh-navy); color: #fff; border-color: var(--bh-navy); }
/* blockquote(引用・補足ボックス) */
.bh-detail-prose blockquote { margin: 0 0 1.2em; padding: 14px 16px; background: var(--bh-bg); border-left: 4px solid var(--bh-line-strong); color: #445468; font-size: 13.5px; }

/* ===== 料金表セクション(#a03)の整形 =====
   料金は author入力のフリーテキスト(h4+br)。
   h4を分野ヘッダー帯にし、本文を読みやすく整える。 */
#a03 .bh-detail-prose { font-size: 13.5px; line-height: 2.05; }
#a03 .bh-detail-prose h4 {
  display: block; margin: 1.2em 0 .6em; padding: 9px 14px;
  background: var(--bh-navy); color: #fff; border-left: none; border-radius: 6px;
  font-size: 14px; font-weight: 700;
}
#a03 .bh-detail-prose h4:first-child { margin-top: 0; }
#a03 .bh-detail-prose br { line-height: 2.2; }

/* 強み */
.bh-detail-strong { list-style: none; margin: 0; padding: 0; }
.bh-detail-strong__item { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px dashed var(--bh-line-strong); }
.bh-detail-strong__item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
/* 注力分野名(交通事故 等)はカテゴリ見出しとして明確に区別する。
   内側の小見出し(prose h4)と同じ縦ラインだと見分けがつかないため、
   淡色背景＋左アクセントの「ラベル」にして階層を明確化。 */
.bh-detail-strong__ttl { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; color: var(--bh-navy); margin: 0 0 14px; padding: 9px 14px; background: var(--bh-tint); border-left: 4px solid var(--bh-acc); border-radius: 0 5px 5px 0; letter-spacing: .02em; line-height: 1.4; }
.bh-detail-strong__ttl:before { display: none; }

/* 所属弁護士 */
.bh-detail-memberlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bh-detail-member { list-style: none; border: 1px solid var(--bh-line); border-radius: 8px; padding: 16px; background: #fff; }
.bh-detail-member__head { display: flex; gap: 16px; align-items: center; }
.bh-detail-member__img { flex-shrink: 0; }
.bh-detail-member__img img { width: 84px; height: 84px; object-fit: cover; border-radius: 50%; border: 1px solid var(--bh-line); display: block; }
.bh-detail-member__body { flex: 1; min-width: 0; }
.bh-detail-member__name { font-size: 16px; font-weight: 700; color: var(--bh-ink); margin: 0 0 8px; }
.bh-detail-member__aff { display: flex; flex-direction: column; gap: 4px; }
.bh-detail-member__aff > span { font-size: 12px; color: var(--bh-sub); }
.bh-detail-member__aff-label { display: inline-block; min-width: 64px; font-weight: 600; color: var(--bh-navy); }

/* 地図 */
.bh-detail-map { margin-bottom: 14px; }
.bh-detail-map img, .bh-detail-map iframe { max-width: 100%; border: 1px solid var(--bh-line); }

/* 概要・アクセスのテーブル */
.bh-detail-table-wrap { overflow-x: auto; }
.bh-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bh-detail-table th, .bh-detail-table td { border: 1px solid var(--bh-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.bh-detail-table th { background: var(--bh-bg); color: var(--bh-navy); font-weight: 700; white-space: nowrap; width: 30%; }
.bh-detail-table td { color: var(--bh-ink); }
.bh-detail-table a { color: var(--bh-acc); }

/* 固定CTA(画面下) */
.bh-detail-fixedcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: #fff; border-top: 1px solid var(--bh-line-strong);
  box-shadow: 0 -3px 12px rgba(0,0,0,.10); padding: 9px var(--bh-pad);
}
.bh-detail-fixedcta__inner { display: flex; flex-direction: column; gap: 5px; max-width: 700px; margin: 0 auto; }
.bh-detail-fixedcta__name { font-size: 12.5px; font-weight: 700; color: var(--bh-ink); margin: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-detail-fixedcta__hours { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 10.5px; color: var(--bh-sub); margin: 0; }
.bh-detail-fixedcta__hours svg { flex-shrink: 0; }
.bh-detail-fixedcta__btns { display: flex; gap: 8px; }
.bh-detail-fixedcta__tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1; min-width: 0;
  background: var(--bh-navy); color: #fff; font-weight: 700; font-size: 14.5px;
  padding: 11px 10px; border-radius: 5px; white-space: nowrap;
}
.bh-detail-fixedcta__tel svg { flex-shrink: 0; }
.bh-detail-fixedcta__tel span { letter-spacing: 0; white-space: nowrap; }
.bh-detail-fixedcta__mail {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1;
  background: var(--bh-cta); color: #fff; font-weight: 700; font-size: 14px;
  padding: 11px 16px; border-radius: 5px; white-space: nowrap;
}
.bh-detail-fixedcta__mail:hover { filter: brightness(1.07); }
/* 固定CTAの時間外グレーアウト(電話のみ。メールは常時有効) */
.is-tel-closed .bh-detail-fixedcta__tel { background: #aab6c4; pointer-events: none; }

/* 詳細ページは固定CTA分の余白を確保(縦3段構成のため広めに) */
.bh--lawyer-detail { padding-bottom: 128px; }

/* ===== PC: 詳細を中央寄せ・2カラム ===== */
@media (min-width: 1024px) {
  .bh-detail-body { max-width: 1120px; margin: 0 auto; padding: 28px 24px 0; display: flex; gap: 32px; align-items: flex-start; flex-direction: row; }
  .bh-detail-body__main { flex: 1; min-width: 0; }
  .bh-detail-cv { width: 330px; flex-shrink: 0; position: sticky; top: 20px; margin-bottom: 0; }
  .bh-detail-sections { max-width: 1120px; margin: 0 auto; padding: 0 24px 40px; }
  .bh-toc { max-width: 1120px; margin-left: auto; margin-right: auto; }
  .bh-detail-gallery__main { width: 100%; }
  .bh-detail-fixedcta { display: none; } /* PCではサイドのCVがあるので固定CTA不要 */
  .bh--lawyer-detail { padding-bottom: 0; }
}

/* =========================================================
 * 記事(single) ページ
 * ========================================================= */
.bh-article { padding: 0 var(--bh-pad); }
.bh-article__main { width: 100%; }
.bh-article__head { padding: 18px 0 14px; }
.bh-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.bh-article__cat { font-size: 11.5px; font-weight: 700; color: #fff; background: var(--bh-navy); padding: 4px 11px; }
.bh-article__date, .bh-article__view { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--bh-sub); }
.bh-article__title { font-size: 28px; font-weight: 700; color: var(--bh-ink); line-height: 1.4; margin: 0; letter-spacing: .01em; }
.bh-article__mv { margin: 0 0 18px; }
.bh-article__mv img { width: 100%; height: auto; border: 1px solid var(--bh-line); display: block; }

/* この記事で分かること */
.bh-article__understand { background: var(--bh-bg); border: 1px solid var(--bh-line); padding: 16px 18px; margin: 0 0 20px; }
.bh-article__understand-ttl { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--bh-navy); margin: 0 0 10px; }
.bh-article__understand-list { list-style: none; margin: 0 0 10px; padding: 0; }
.bh-article__understand-list li { position: relative; padding: 5px 0 5px 22px; font-size: 14.5px; color: var(--bh-ink); line-height: 1.6; }
.bh-article__understand-list li:before { content: ""; position: absolute; left: 4px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--bh-acc); }
.bh-article__understand-text { font-size: 14px; color: var(--bh-sub); margin: 0; line-height: 1.8; }

/* 記事CTA */
.bh-article__cta { margin: 0 0 24px; }
.bh-article__cta--bottom { margin: 28px 0; }
.bh-article__cta .bh-btn { width: 100%; }

/* 本文プロース(詳細と共通だが念のため)
   士業の長文記事に合わせ、本文16px(SP15.5px)・字間0.02em・行間1.9で可読性を確保 */
.bh-article__body { font-size: 16px; line-height: 1.9; letter-spacing: .02em; color: var(--bh-ink); }
.bh-article__body p { margin: 0 0 1.3em; }
/* 見出し */
/* H2: セクション番号(自動採番)＋分野色の下線。記事の節を辿りやすくCV前の離脱を抑える */
.bh-article__body { counter-reset: bh-h2; }
.bh-article__body h2 { counter-increment: bh-h2; font-size: 22px; font-weight: 700; color: var(--bh-ink); margin: 1.8em 0 .8em; padding: 0 0 10px; line-height: 1.45; display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--bh-acc); background: none; border-left: none; }
.bh-article__body h2:first-child { margin-top: 0; }
.bh-article__body h2:before { content: counter(bh-h2, decimal-leading-zero); flex: none; font-size: 14px; font-weight: 700; color: #fff; background: var(--bh-acc); min-width: 32px; height: 32px; padding: 0 7px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; }
.bh-article__body h3 { position: relative; font-size: 18px; font-weight: 700; color: var(--bh-navy); margin: 1.6em 0 .6em; padding: 0 0 7px 14px; border-bottom: 2px solid var(--bh-line-strong); line-height: 1.5; }
.bh-article__body h3:before { content: ""; position: absolute; left: 0; top: 2px; bottom: 9px; width: 4px; background: var(--bh-acc); border-radius: 2px; }
.bh-article__body h4 { font-size: 16px; font-weight: 700; color: var(--bh-navy); margin: 1.4em 0 .5em; padding-left: 10px; border-left: 3px solid var(--bh-line-strong); }
.bh-article__body a { color: var(--bh-acc); text-decoration: underline; }
/* #22 記事内に挿入された簡易診断ショートコードのCTAボタンは、
   記事本文の a 色上書き(オレンジ＋下線)を受けず白文字を維持する。
   ボタン本体の背景(青グラデ)は活かし、strong の文字ハイライト背景のみ打ち消す。 */
.bh-article__body .isharyo-calc-cta-btn,
.bh-article__body .rikon-calc-cta-btn,
.bh-article__body .saimu-calc-cta-btn,
.bh-article__body .souzoku-calc-cta-btn,
.bh-article__body .isharyo-calc-cta-btn strong,
.bh-article__body .rikon-calc-cta-btn strong,
.bh-article__body .saimu-calc-cta-btn strong,
.bh-article__body .souzoku-calc-cta-btn strong {
  color: #fff;
  text-decoration: none;
}
.bh-article__body .isharyo-calc-cta-btn strong,
.bh-article__body .rikon-calc-cta-btn strong,
.bh-article__body .saimu-calc-cta-btn strong,
.bh-article__body .souzoku-calc-cta-btn strong {
  background: none;
}
.bh-article__body strong { color: var(--bh-navy); font-weight: 700; background: linear-gradient(transparent 60%, color-mix(in srgb, var(--bh-acc) 22%, transparent) 60%); }
@supports not (background: color-mix(in srgb, red, blue)) { .bh-article__body strong { background: none; } }
.bh-article__body img { max-width: 100%; height: auto; margin: .5em 0; border-radius: 4px; }
/* リスト: カスタムマーカー */
.bh-article__body ul, .bh-article__body ol { margin: 0 0 1.2em; padding-left: 0; list-style: none; }
.bh-article__body ol:not(.tocList) { counter-reset: bh-art-ol; }
.bh-article__body ul:not(.tocList) > li { position: relative; margin: 0 0 .6em; padding-left: 24px; line-height: 1.8; }
.bh-article__body ul:not(.tocList) > li:before { content: ""; position: absolute; left: 5px; top: .62em; width: 8px; height: 8px; background: var(--bh-acc); border-radius: 50%; }
.bh-article__body ol:not(.tocList) > li { position: relative; margin: 0 0 .6em; padding-left: 32px; line-height: 1.8; counter-increment: bh-art-ol; }
.bh-article__body ol:not(.tocList) > li:before { content: counter(bh-art-ol); position: absolute; left: 0; top: .05em; width: 22px; height: 22px; background: var(--bh-acc); color: #fff; font-size: 12px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
/* テーブル */
.bh-article__body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; margin: 0 0 1.2em; font-size: 14.5px; }
.bh-article__body th, .bh-article__body td { border: 1px solid var(--bh-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.bh-article__body th { background: var(--bh-tint); color: var(--bh-navy); font-weight: 700; }
.bh-article__body thead th { background: var(--bh-navy); color: #fff; }
/* 引用 */
.bh-article__body blockquote { margin: 0 0 1.2em; padding: 14px 16px; background: var(--bh-bg); border-left: 4px solid var(--bh-line-strong); color: #445468; font-size: 14.5px; }
.bh-article__body blockquote p:last-child { margin-bottom: 0; }

/* スマートフォン: 本文・見出しをわずかに下げ、一画面の情報量を確保(モバイル最優先) */
@media (max-width: 767px) {
  .bh-article__body { font-size: 15.5px; }
  .bh-article__body h2 { font-size: 20px; }
  .bh-article__body h2:before { font-size: 13px; min-width: 28px; height: 28px; }
  .bh-article__body h3 { font-size: 17px; }
  .bh-article__body h4 { font-size: 15.5px; }
  .bh-article__body table, .bh-article__body blockquote { font-size: 14px; }
}
/* =========================================================
   目次(tocBox) ※プラグイン出力 .tocBox / .tocBox__ttl / .tocList
   ========================================================= */
.bh-article__body .tocBox {
  margin: 0 0 1.8em; border: 1px solid var(--bh-line-strong); border-radius: 8px;
  background: var(--bh-bg); overflow: hidden;
}
.bh-article__body .tocBox__ttl {
  margin: 0; padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--bh-navy);
  background: #fff; border-bottom: 1px solid var(--bh-line); display: flex; align-items: center; gap: 8px;
}
.bh-article__body .tocBox__ttl:before {
  content: ""; flex-shrink: 0; width: 16px; height: 16px;
  background:
    linear-gradient(var(--bh-acc),var(--bh-acc)) left 1px/4px 4px no-repeat,
    linear-gradient(var(--bh-acc),var(--bh-acc)) left 7px/4px 4px no-repeat,
    linear-gradient(var(--bh-acc),var(--bh-acc)) left 13px/4px 4px no-repeat,
    linear-gradient(var(--bh-acc),var(--bh-acc)) 7px 1px/9px 4px no-repeat,
    linear-gradient(var(--bh-acc),var(--bh-acc)) 7px 7px/9px 4px no-repeat,
    linear-gradient(var(--bh-acc),var(--bh-acc)) 7px 13px/9px 4px no-repeat;
}
.bh-article__body .tocBox .toc_toggle { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--bh-acc); cursor: pointer; }
/* 目次リスト本体。番号は自前カウンターを使わず、リスト項目側の表示に任せる。
   余計な番号の二重表示を避けるため、独自の ::before カウンターは付けない。 */
.bh-article__body ol.tocList,
.bh-article__body .tocList {
  margin: 0; padding: 12px 16px 12px 16px; list-style: none;
  counter-reset: bhtoc;
}
.bh-article__body .tocList__item {
  list-style: none; margin: 0; counter-increment: bhtoc;
  position: relative; padding-left: 32px;
}
.bh-article__body .tocList__item::before {
  content: counter(bhtoc); position: absolute; left: 0; top: 7px;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  background: var(--bh-acc); color: #fff; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1;
}
.bh-article__body .tocList__item a {
  display: block; padding: 7px 0;
  color: var(--bh-navy); text-decoration: none; font-size: 13.5px; line-height: 1.6;
  border-bottom: 1px dashed var(--bh-line);
}
.bh-article__body .tocList__item:last-child > a { border-bottom: none; }
.bh-article__body .tocList__item a:hover { color: var(--bh-acc); }
/* PCでは目次を2カラムにしてコンパクトに(縦の場所を取りすぎない) */
@media (min-width: 768px) {
  .bh-article__body ol.tocList,
  .bh-article__body .tocList { columns: 2; column-gap: 28px; }
  .bh-article__body .tocList__item { break-inside: avoid; }
  .bh-article__body .tocList__item:nth-last-child(2) > a { border-bottom: none; }
}
/* 入れ子の子目次 */
.bh-article__body .tocList .tocList { padding: 4px 0 4px 12px; counter-reset: bhtocsub; }
.bh-article__body .tocList .tocList .tocList__item { counter-increment: bhtocsub; padding-left: 28px; }
.bh-article__body .tocList .tocList .tocList__item::before { content: counter(bhtocsub); width: 18px; height: 18px; font-size: 10px; background: var(--bh-sub); }

/* ワンポイントアドバイス等のボックス(WPで class指定 or 自動装飾) */
.bh-article__body .bh-box, .bh-article__body .point, .bh-article__body .advice, .bh-article__body .note, .bh-article__body .caution {
  position: relative; margin: 1.4em 0; padding: 16px 16px 16px 18px; border-radius: 6px; font-size: 13.5px; line-height: 1.85;
}
/* ワンポイントアドバイス(緑系・電球) */
.bh-article__body .bh-box, .bh-article__body .point, .bh-article__body .advice {
  background: var(--bh-tint); border: 1px solid var(--bh-acc);
}
.bh-article__body .bh-box:before, .bh-article__body .point:before, .bh-article__body .advice:before {
  content: "POINT"; display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: var(--bh-acc); padding: 3px 10px; border-radius: 3px; margin-bottom: 8px; letter-spacing: .06em;
}
.bh-article__body .bh-box > :last-child, .bh-article__body .point > :last-child, .bh-article__body .advice > :last-child { margin-bottom: 0; }
/* 注意ボックス(赤系) */
.bh-article__body .caution, .bh-article__body .warning {
  background: #fbecec; border: 1px solid #d99; 
}
.bh-article__body .caution:before, .bh-article__body .warning:before {
  content: "注意"; display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: #c0392b; padding: 3px 10px; border-radius: 3px; margin-bottom: 8px; letter-spacing: .06em;
}
/* 補足ボックス(グレー系) */
.bh-article__body .note, .bh-article__body .memo {
  background: var(--bh-bg); border: 1px solid var(--bh-line-strong);
}
.bh-article__body .note:before, .bh-article__body .memo:before {
  content: "MEMO"; display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: var(--bh-sub); padding: 3px 10px; border-radius: 3px; margin-bottom: 8px; letter-spacing: .06em;
}
/* =========================================================
   タイトル付きボックス（.point-ttl / .point-bx 構造）
   使い方:
   <div class="point"><div class="point-ttl">タイトル</div><div class="point-bx">本文</div></div>
   種類: point(緑/POINT) / caution(赤/注意) / note(グレー/MEMO)
        / check(紺/チェック) / good(青緑/OK) / bad(赤茶/NG)
   ========================================================= */
.bh-article__body [class$="-ttl"] { /* 内部タイトルがある場合は :before ラベルを消す */ }
.bh-article__body .point:has(.point-ttl):before,
.bh-article__body .advice:has(.point-ttl):before,
.bh-article__body .bh-box:has(.point-ttl):before,
.bh-article__body .caution:has(.point-ttl):before,
.bh-article__body .note:has(.point-ttl):before { content: none; }

/* 共通: タイトル付きボックスの外枠 */
.bh-article__body .bh-tbox {
  position: relative; margin: 1.6em 0; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--_bd, var(--bh-line-strong));
  background: var(--_bg, #fff);
  font-size: 13.5px; line-height: 1.85;
}
/* タイトル帯 */
.bh-article__body .point-ttl,
.bh-article__body .bh-tbox__ttl {
  display: flex; align-items: center; gap: 7px;
  margin: 0; padding: 9px 14px;
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: var(--_main, var(--bh-acc)); letter-spacing: .02em;
}
.bh-article__body .point-ttl:before,
.bh-article__body .bh-tbox__ttl:before {
  content: var(--_ico, "\1F4A1"); font-size: 14px; line-height: 1;
}
/* 本文 */
.bh-article__body .point-bx,
.bh-article__body .bh-tbox__bx {
  margin: 0; padding: 13px 15px; color: var(--bh-ink);
  font-size: 16px; line-height: 1.9;
}
/* タイトル無しボックス(.point/.bh-box/.advice/.caution/.note 直下に本文)も
   本文サイズを通常本文に合わせる。タイトル帯(__ttl/-ttl)は対象外で従来サイズ維持。 */
.bh-article__body .bh-box, .bh-article__body .point, .bh-article__body .advice,
.bh-article__body .note, .bh-article__body .caution, .bh-article__body .memo,
.bh-article__body .warning {
  font-size: 16px;
}
/* スマホでは通常本文(15.5px)に合わせる。タイトル帯(__ttl/-ttl)は対象外。
   この位置(PC用16px指定の後)に置くことで、行順で確実に適用させる。 */
@media (max-width: 767px) {
  .bh-article__body .point-bx, .bh-article__body .bh-tbox__bx,
  .bh-article__body .bh-box, .bh-article__body .point, .bh-article__body .advice,
  .bh-article__body .note, .bh-article__body .caution, .bh-article__body .memo,
  .bh-article__body .warning {
    font-size: 15.5px;
  }
}
.bh-article__body .point-bx > :last-child,
.bh-article__body .bh-tbox__bx > :last-child { margin-bottom: 0; }
.bh-article__body .point-bx > :first-child,
.bh-article__body .bh-tbox__bx > :first-child { margin-top: 0; }

/* --- ワンポイントアドバイス（緑・電球）--- */
.bh-article__body .point {
  --_main: var(--bh-acc); --_bg: var(--bh-tint); --_bd: var(--bh-acc); --_ico: "\1F4A1";
  position: relative; margin: 1.6em 0; border-radius: 8px; overflow: hidden;
  padding: 0; border: 1px solid var(--bh-acc); background: var(--bh-tint);
  font-size: 13.5px; line-height: 1.85;
}
.bh-article__body .point:before { content: none; } /* 旧ラベル無効化 */

/* --- 注意（赤）--- */
.bh-article__body .bh-tbox.is-caution,
.bh-article__body .caution.has-ttl {
  --_main: #c0392b; --_bg: #fbecec; --_bd: #e0a9a9; --_ico: "\26A0";
}
/* --- 補足/メモ（グレー）--- */
.bh-article__body .bh-tbox.is-note,
.bh-article__body .note.has-ttl {
  --_main: var(--bh-sub); --_bg: #f4f6f8; --_bd: var(--bh-line-strong); --_ico: "\1F4DD";
}
/* --- チェック/手順（紺）--- */
.bh-article__body .bh-tbox.is-check {
  --_main: var(--bh-navy); --_bg: #eaf1f8; --_bd: #b9cde0; --_ico: "\2714";
}
/* --- できる/OK（青緑）--- */
.bh-article__body .bh-tbox.is-good {
  --_main: #1f7a52; --_bg: #e7f4ee; --_bd: #a9d4bf; --_ico: "\2B55";
}
/* --- できない/NG（赤茶）--- */
.bh-article__body .bh-tbox.is-bad {
  --_main: #9b3838; --_bg: #f8e9e9; --_bd: #d8aeae; --_ico: "\274C";
}
/* --- 豆知識/コラム（ゴールド）--- */
.bh-article__body .bh-tbox.is-tips {
  --_main: var(--bh-gold); --_bg: var(--bh-gold-bg); --_bd: #e3cfa0; --_ico: "\1F4A1";
}
/* タイトル帯のアイコンを各種別ごとに上書き */
.bh-article__body .bh-tbox.is-caution .bh-tbox__ttl:before,
.bh-article__body .caution.has-ttl .point-ttl:before { content: var(--_ico); }

/* =========================================================
   関連リンク / 内部リンクボックス（回遊導線・分野×エリアへ）
   <div class="bh-linkbox"><a href="...">テキスト</a></div>
   ========================================================= */
.bh-article__body .bh-linkbox {
  margin: 1.4em 0; padding: 0; border: 1px solid var(--bh-line-strong);
  border-left: 4px solid var(--bh-acc); border-radius: 6px; background: #fff;
}
.bh-article__body .bh-linkbox > a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px; color: var(--bh-navy); font-weight: 700;
  font-size: 14px; text-decoration: none; line-height: 1.5;
}
.bh-article__body .bh-linkbox > a:after {
  content: ""; flex-shrink: 0; width: 8px; height: 8px;
  border-top: 2px solid var(--bh-acc); border-right: 2px solid var(--bh-acc);
  transform: rotate(45deg);
}
.bh-article__body .bh-linkbox > a:hover { background: var(--bh-tint); }

/* =========================================================
   [link ids=...] ショートコード出力（.link-bx）のbh2026装飾
   出力HTML: <div class="link-bx"> <a href="...">記事タイトル</a></div>
   既存テーマでは .articleDetail .link-bx で装飾していたが、
   bh2026記事ページは style.css を読まないため、ここで単独装飾を当てる。
   右上の「関連記事」ラベル＋分野アクセント枠。
   ========================================================= */
.bh-article__body .link-bx {
  position: relative; margin: 1.8em 0 1.4em; padding: 0;
  border: 1px solid var(--bh-acc); border-radius: 6px; background: #fff;
  overflow: visible;
}
.bh-article__body .link-bx:before {
  content: "関連記事"; position: absolute; top: -11px; left: 12px; z-index: 1;
  padding: 3px 10px; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--bh-acc); border-radius: 3px; letter-spacing: .04em; line-height: 1.4;
}
.bh-article__body .link-bx a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 14px 14px; background: var(--bh-tint);
  color: var(--bh-navy); font-weight: 700; font-size: 14px; line-height: 1.6;
  text-decoration: none; border-radius: 6px;
}
.bh-article__body .link-bx a:after {
  content: ""; flex-shrink: 0; width: 8px; height: 8px; margin-left: 4px;
  border-top: 2px solid var(--bh-acc); border-right: 2px solid var(--bh-acc);
  transform: rotate(45deg);
}
.bh-article__body .link-bx a:hover { background: #fff; }

/* =========================================================
   チェックボックスリスト（既存 .check-bx 互換 / bh2026トーン）
   <ul class="check-bx"><li>...</li></ul>
   ========================================================= */
.bh-article__body .check-bx {
  margin: 1.6em 0; padding: 14px 16px; list-style: none;
  border: 1px solid var(--bh-acc); border-radius: 6px; background: var(--bh-tint);
}
.bh-article__body .check-bx li {
  position: relative; padding: 7px 0 7px 28px; font-weight: 600;
  color: var(--bh-ink); font-size: 13.5px; line-height: 1.7;
}
.bh-article__body .check-bx li:before {
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 14px; height: 8px; border-left: 2.5px solid var(--bh-acc);
  border-bottom: 2.5px solid var(--bh-acc); transform: rotate(-45deg);
}

/* =========================================================
   定義・用語ボックス（Q&A以外の補足語義）
   <div class="bh-def"><dl><dt>用語</dt><dd>説明</dd></dl></div>
   ========================================================= */
.bh-article__body .bh-def { margin: 1.4em 0; border: 1px solid var(--bh-line); border-radius: 6px; overflow: hidden; }
.bh-article__body .bh-def dl { margin: 0; }
.bh-article__body .bh-def dt {
  padding: 9px 14px; background: var(--bh-bg); font-weight: 700; color: var(--bh-navy);
  font-size: 13.5px; border-bottom: 1px solid var(--bh-line);
}
.bh-article__body .bh-def dd { margin: 0; padding: 12px 14px; font-size: 13.5px; line-height: 1.85; color: var(--bh-ink); }
.bh-article__body .bh-def dd + dt { border-top: 1px solid var(--bh-line); }

/* =========================================================
   費用相場・数値の強調インラインボックス
   <p class="bh-figure"><span class="bh-figure__label">相場</span><span class="bh-figure__val">30〜60万円</span></p>
   ========================================================= */
.bh-article__body .bh-figure {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 1.2em 0; padding: 12px 14px; background: var(--bh-tint);
  border-radius: 6px; border: 1px dashed var(--bh-acc);
}
.bh-article__body .bh-figure__label { font-size: 12px; font-weight: 700; color: var(--bh-acc); }
.bh-article__body .bh-figure__val { font-size: 19px; font-weight: 800; color: var(--bh-navy); line-height: 1.2; }

/* =========================================================
   ステップ（手順）リスト
   <ol class="bh-steps"><li>...</li></ol>
   ========================================================= */
.bh-article__body .bh-steps { list-style: none; counter-reset: bhstep; margin: 1.4em 0; padding: 0; }
.bh-article__body .bh-steps > li {
  position: relative; counter-increment: bhstep;
  margin: 0 0 10px; padding: 12px 14px 12px 50px;
  background: #fff; border: 1px solid var(--bh-line-strong); border-radius: 6px;
  font-size: 13.5px; line-height: 1.8;
}
.bh-article__body .bh-steps > li:before {
  content: counter(bhstep); position: absolute; left: 12px; top: 12px;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  background: var(--bh-navy); color: #fff; border-radius: 50%; font-size: 13px; font-weight: 700;
}
.bh-article__body .bh-steps > li:last-child { margin-bottom: 0; }

/* 区切り線 */
.bh-article__body hr { border: none; border-top: 1px solid var(--bh-line); margin: 2em 0; }

/* 関連記事 */
.bh-article__related { margin-top: 32px; }
.bh-article__related-ttl { font-size: 17px; font-weight: 700; color: var(--bh-ink); margin: 0 0 14px; padding-left: 12px; border-left: 4px solid var(--bh-acc); }
.bh-article__related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bh-article__related-item { list-style: none; }
.bh-article__related-link { display: flex; gap: 12px; align-items: center; border: 1px solid var(--bh-line); padding: 10px; background: #fff; }
.bh-article__related-link:hover { border-color: var(--bh-acc); }
.bh-article__related-thumb { flex-shrink: 0; width: 100px; }
.bh-article__related-thumb img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.bh-article__related-body { flex: 1; min-width: 0; }
.bh-article__related-title { display: block; font-size: 13px; font-weight: 600; color: var(--bh-ink); line-height: 1.5; margin-bottom: 6px; }
.bh-article__related-link:hover .bh-article__related-title { color: var(--bh-acc); }
.bh-article__related-info { display: flex; gap: 10px; font-size: 11px; color: var(--bh-sub); }

/* =========================================================
   記事下: 関連記事プラグイン(YARPP)出力の整形
   実出力構造:
   <div class="yarpp ..."><aside class="relatedBox">
     <h3 class="relatedBox__ttl">こちらの記事も読まれています</h3>
     <ul class="articleList--simple">
       <li class="articleList__item widelink">
         <div class="itemWrap"><div class="thumb"><img></div>
           <div class="textWrap widelink__article">
             <a class="textWrap__ttl">タイトル</a>
             <div class="info"><time class="info__date"></time><p class="info__view"></p></div>
   bh2026では未スタイルで崩れるため整える。
   ========================================================= */
.bh-article .yarpp, .bh-article__body .yarpp { margin: 0; }
.bh-article .relatedBox { margin: 2.4em 0 1.6em; }
.bh-article .relatedBox__ttl {
  font-size: 17px; font-weight: 700; color: var(--bh-navy);
  margin: 0 0 16px; padding: 0 0 9px; border-bottom: 2px solid var(--bh-acc);
}
.bh-article .articleList--simple {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
.bh-article .articleList__item { list-style: none; }
.bh-article .articleList__item .itemWrap {
  display: flex; gap: 12px; align-items: stretch;
  border: 1px solid var(--bh-line); border-radius: 6px; overflow: hidden; background: #fff;
  transition: border-color .2s;
}
.bh-article .articleList__item .itemWrap:hover { border-color: var(--bh-acc); }
.bh-article .articleList__item .thumb { flex-shrink: 0; width: 120px; background: var(--bh-bg); }
.bh-article .articleList__item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-article .articleList__item .textWrap { padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.bh-article .articleList__item .textWrap__ttl {
  font-size: 13.5px; font-weight: 600; color: var(--bh-ink); line-height: 1.55;
  text-decoration: none; display: block;
}
.bh-article .articleList__item .itemWrap:hover .textWrap__ttl { color: var(--bh-acc); }
.bh-article .articleList__item .info { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.bh-article .articleList__item .info__date,
.bh-article .articleList__item .info__view { font-size: 11px; color: var(--bh-sub); margin: 0; }
/* widelink(カード全体リンク)対応 */
.bh-article .widelink { position: relative; }
.bh-article .widelink .widelink__article > a:first-child::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
}

/* =========================================================
   記事下: pushBox（CTA＋47都道府県リンク）のbh2026整形
   実構造: .pushBox > .pushBox__ttl / .pushBox__list / .band
           / .pref(.pref__block + .resright: dl>dt.prefTtl+dd.prefWrap>ul.prefList)
           / .pushBtn
   bh2026では未スタイルで崩れるため整える。
   ========================================================= */
.bh-article .pushBox {
  margin: 2.4em 0 1.6em; border: 1px solid var(--bh-navy);
  border-radius: 8px; overflow: hidden; background: #fff;
}
.bh-article .pushBox__ttl {
  background: var(--bh-navy); color: #fff; text-align: center;
  font-size: 21px; font-weight: 700; line-height: 1.55; padding: 19px 16px;
}
.bh-article .pushBox__list { list-style: none; margin: 0; padding: 16px; }
.bh-article .pushBox__list__item {
  position: relative; padding: 11px 0 11px 32px; font-size: 18px; color: var(--bh-ink); line-height: 1.7;
  font-weight: 600; border-bottom: 1px dashed var(--bh-line);
}
.bh-article .pushBox__list__item:last-child { border-bottom: none; }
.bh-article .pushBox__list__item:before {
  content: ""; position: absolute; left: 6px; top: 16px;
  width: 16px; height: 10px; border-left: 3px solid var(--bh-cta);
  border-bottom: 3px solid var(--bh-cta); transform: rotate(-45deg);
}
.bh-article .pushBox .band {
  background: var(--bh-cta); color: #fff; text-align: center;
  font-size: 16px; font-weight: 700; padding: 13px 16px;
}
.bh-article .pushBox .pref { padding: 18px 16px; display: grid; grid-template-columns: 1fr; gap: 0; }
.bh-article .pushBox .pref__block,
.bh-article .pushBox .resright { margin: 0; }
.bh-article .pushBox .prefTtl {
  font-size: 13px; font-weight: 700; color: var(--bh-navy);
  margin: 14px 0 8px; padding-left: 10px; border-left: 3px solid var(--bh-acc);
}
.bh-article .pushBox .pref__block > .prefTtl:first-child,
.bh-article .pushBox .resright > .prefTtl:first-child { margin-top: 0; }
.bh-article .pushBox .prefWrap { margin: 0 0 6px; }
.bh-article .pushBox .prefList { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.bh-article .pushBox .prefList__item { list-style: none; margin: 0; padding-left: 0; }
/* 記事本文用リストの丸ドット(.bh-article__body ul>li:before)がチップに漏れるのを打ち消す */
.bh-article .pushBox .prefList__item:before { content: none; display: none; }
.bh-article .pushBox .prefList__item a {
  display: inline-block; font-size: 12.5px; color: var(--bh-navy);
  background: var(--bh-bg); border: 1px solid var(--bh-line); border-radius: 4px;
  padding: 5px 11px; text-decoration: none; transition: all .15s;
}
.bh-article .pushBox .prefList__item a:hover { background: var(--bh-acc); color: #fff; border-color: var(--bh-acc); }
.bh-article .pushBox .pushBtn { padding: 4px 16px 20px; text-align: center; }
.bh-article .pushBox .pushBtn a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--bh-navy); color: #fff; font-weight: 700; font-size: 15px;
  padding: 14px 34px; border-radius: 8px; text-decoration: none;
  box-shadow: 0 3px 10px rgba(10,61,110,.22); transition: all .15s;
  width: 100%; max-width: 420px;
}
.bh-article .pushBox .pushBtn a:hover { background: var(--bh-navy-deep); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(10,61,110,.3); }

/* --- リッチ化: 信頼バッジ帯 --- */
.bh-article .pushBox__trust { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 14px 16px; background: linear-gradient(180deg,#f7fafd,#fff); border-bottom: 1px solid var(--bh-line); }
.bh-article .pushBox__trust-item { display: inline-flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 700; color: var(--bh-navy); background: #fff; border: 1px solid var(--bh-line-strong); border-radius: 24px; padding: 9px 17px; }
.bh-article .pushBox__trust-item .ic { color: var(--bh-cta); display: inline-flex; }
.bh-article .pushBox__trust-item .num { color: var(--bh-cta); font-size: 18px; }

/* --- リッチ化: 相談の流れ3ステップ --- */
.bh-article .pushBox__flow { padding: 4px 16px 18px; }
.bh-article .pushBox__flow-ttl { font-size: 13.5px; font-weight: 700; color: var(--bh-sub); text-align: center; margin: 12px 0 14px; letter-spacing: .04em; }
.bh-article .pushBox__steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 0; max-width: 470px; margin: 0 auto; }
.bh-article .pushBox__step { text-align: center; }
.bh-article .pushBox__step-num { width: 38px; height: 38px; margin: 0 auto 8px; border-radius: 50%; background: var(--bh-acc); color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bh-article .pushBox__step-txt { font-size: 13px; color: var(--bh-ink); font-weight: 600; line-height: 1.5; }
.bh-article .pushBox__step-arrow { align-self: center; color: var(--bh-line-strong); padding: 0 4px; margin-top: -16px; }

/* --- リッチ化: エリアチップのホバー強化(分野色) --- */
.bh-article .pushBox .prefList__item a:hover { transform: translateY(-1px); box-shadow: 0 2px 6px color-mix(in srgb, var(--bh-acc) 30%, transparent); }

/* =========================================================
 * カテゴリ(archive) ページ
 * ========================================================= */
.bh-arc-hero { position: relative; overflow: hidden; min-height: 330px; background: linear-gradient(135deg, color-mix(in srgb, var(--bh-acc) 55%, #06121f), color-mix(in srgb, var(--bh-acc) 72%, #0a2238)); }
@supports not (background: color-mix(in srgb, red, blue)) {
  .bh-arc-hero { background: linear-gradient(135deg, var(--bh-navy-deep), var(--bh-navy)); }
}
/* 画像はヒーロー下部に配置(下端に向かって見える) */
.bh-arc-hero__img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; object-fit: cover; object-position: center 45%; z-index: 0; }
/* 一本のなめらかグラデーション(上=濃紺で塗り→下=画像が透ける) */
.bh-arc-hero__veil { position: absolute; inset: 0; z-index: 1;
  /* 分野アクセント色を黒で暗色化した「ディープ分野色」をベースに、上=塗り→下=画像が透ける */
  --bh-hero-deep: color-mix(in srgb, var(--bh-acc) 62%, #06121f);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bh-hero-deep) 100%, transparent) 0%,
    color-mix(in srgb, var(--bh-hero-deep) 100%, transparent) 42%,
    color-mix(in srgb, var(--bh-hero-deep) 78%, transparent) 60%,
    color-mix(in srgb, var(--bh-hero-deep) 45%, transparent) 76%,
    color-mix(in srgb, var(--bh-hero-deep) 18%, transparent) 90%,
    color-mix(in srgb, var(--bh-hero-deep) 4%, transparent) 100%);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .bh-arc-hero__veil {
    background: linear-gradient(to bottom,
      rgba(7,42,79,1) 0%, rgba(7,42,79,1) 42%, rgba(7,42,79,.78) 60%,
      rgba(7,42,79,.45) 76%, rgba(7,42,79,.18) 90%, rgba(7,42,79,.04) 100%);
  }
}
/* 分野アクセントの左帯 */
.bh-arc-hero__accent { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--bh-acc); z-index: 2; }
/* 下端の分野色アクセント帯(濁らせず分野色を主張) */
.bh-arc-hero:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--bh-acc); z-index: 2; }
/* コンテンツ(縦並び) */
.bh-arc-hero__inner { position: relative; z-index: 3; min-height: 330px; padding: 22px var(--bh-pad) 22px; color: #fff; display: flex; flex-direction: column; }
.bh-arc-hero__head { margin-bottom: auto; }
.bh-arc-hero__visual-body { position: relative; margin-top: 22px;
  /* 白背景パネルで囲み、紹介文を濃色にして視認性を上げる(背景写真の上でもくっきり) */
  background: rgba(255,255,255,.96);
  border-left: 4px solid var(--bh-acc);
  border-radius: 0 8px 8px 0;
  padding: 18px 18px 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
  .bh-arc-hero__visual-body { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
}
.bh-arc-hero__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; background: var(--bh-acc); padding: 6px 14px; margin-bottom: 11px; border-radius: 3px; }
.bh-arc-hero__title { font-size: 22px; font-weight: 700; line-height: 1.45; margin: 0 0 8px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.25); }
.bh-arc-hero__sub { font-size: 13px; color: #d7e3f0; margin: 0; line-height: 1.6; }
/* 白背景パネル内の紹介文: 濃紺文字でくっきり。重要語が映えるよう行間広め。 */
.bh-arc-hero__lead { font-size: 13.5px; color: var(--bh-ink); margin: 0 0 16px; line-height: 1.9; text-shadow: none; font-weight: 500; }
.bh-arc-hero__cta { width: 100%; }

/* コンテンツラッパ */
.bh-arc-cont { padding: 24px var(--bh-pad) 0; }
.bh-arc-cont__inner { width: 100%; }
.bh-arc-sectitle { font-size: 19px; font-weight: 700; color: var(--bh-ink); text-align: center; margin: 0 0 18px; line-height: 1.5; }
.bh-arc-sectitle br { display: none; }

/* メリット */
.bh-arc-merit { margin-bottom: 36px; }
.bh-arc-merit__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: bh-merit; }
/* 3merit テンプレートが出力する要素を最低限整える */
.bh-arc-merit__list li { position: relative; list-style: none; background: #fff; border: 1px solid var(--bh-line); padding: 16px 16px 16px 18px; overflow: hidden; counter-increment: bh-merit; }
/* 背景の薄い大きな番号(1.2.3) */
.bh-arc-merit__list li:before {
  content: counter(bh-merit);
  position: absolute; right: -6px; bottom: -22px; z-index: 0;
  font-size: 110px; font-weight: 800; line-height: 1;
  color: var(--bh-acc); opacity: .08;
  font-family: Georgia, "Times New Roman", serif;
  pointer-events: none;
}
/* 中身を番号より前面に */
.bh-arc-merit__list li > * { position: relative; z-index: 1; }

/* 都道府県×分野ナビ(最重要動線) */
.bh-arc-pref { margin-bottom: 36px; }
.bh-arc-pref__wrap { display: flex; flex-direction: column; gap: 16px; }
.bh-arc-pref__block { margin: 0; background: #fff; border: 1px solid var(--bh-line); overflow: hidden; }
.bh-arc-pref__region { background: var(--bh-navy); color: #fff; font-size: 14.5px; font-weight: 700; padding: 11px 15px; margin: 0; }
.bh-arc-pref__list { list-style: none; margin: 0; padding: 12px 14px; }
.bh-arc-pref__list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bh-arc-pref__item { list-style: none; }
.bh-arc-pref__item a { display: inline-block; font-size: 14px; color: var(--bh-navy); border: 1px solid var(--bh-line-strong); padding: 8px 15px; background: #fff; }
.bh-arc-pref__item a:hover { border-color: var(--bh-acc); color: var(--bh-acc); background: var(--bh-bg); }

/* お役立ちコンテンツ(記事一覧) */
.bh-arc-articlelist { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* コラム一覧セクションは幅制約が無く全幅に広がっていたので、コンテンツ幅に収める */
.catConArticle { padding: 48px var(--bh-pad); }
.catConArticle__inner { max-width: 1000px; margin: 0 auto; }
.bh-arc-article { list-style: none; }
.bh-arc-article__link { display: flex; gap: 14px; align-items: center; border: 1px solid var(--bh-line); border-radius: 8px; padding: 12px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.bh-arc-article__link:hover { border-color: var(--bh-acc); box-shadow: 0 3px 12px rgba(10,61,110,.08); }
.bh-arc-article__thumb { flex-shrink: 0; width: 132px; }
.bh-arc-article__thumb img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 5px; display: block; }
.bh-arc-article__body { flex: 1; min-width: 0; }
.bh-arc-article__title { display: block; font-size: 14px; font-weight: 600; color: var(--bh-ink); line-height: 1.55; margin-bottom: 8px; }
.bh-arc-article__link:hover .bh-arc-article__title { color: var(--bh-acc); }
.bh-arc-article__info { display: flex; gap: 10px; font-size: 11px; color: var(--bh-sub); }
.bh-arc-more { text-align: center; margin: 8px 0 0; padding-bottom: 48px; }
.bh-arc-more .bh-btn { display: inline-flex; min-width: 220px; justify-content: center; }
.bh-arc-more .bh-btn.is-busy { opacity: .55; cursor: default; }

/* カテゴリ内の旧インラインstyleセクション(費用相場・選び方・FAQ)を最低限整える */
.bh-arc-cont .catFees, .bh-arc-cont .catChoose, .bh-arc-cont .catFaq { margin-bottom: 36px; }

/* ===== PC: 記事・カテゴリを中央寄せ ===== */
@media (min-width: 1024px) {
  .bh-article { max-width: 1120px; margin: 0 auto; padding: 32px 24px 48px; }
  .bh-article__title { font-size: 34px; }
  .bh-article__related-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  /* 本文・understand・目次・CTAはすべて記事幅(1120px)に統一。絞り込みは行わない */
  /* YARPP関連記事をPCで2カラム */
  .bh-article .articleList--simple { grid-template-columns: 1fr 1fr; gap: 14px; }
  /* pushBoxの都道府県をPCで2カラム(左ブロック/右ブロック横並び) */
  .bh-article .pushBox .pref { grid-template-columns: 1fr 1fr; gap: 0 28px; }

  .bh-arc-hero__inner { padding: 40px 24px 38px; }
  /* head自体を1000px中央寄せにして、バッジ・タイトル・サブの左端を揃える */
  .bh-arc-hero__head { margin-bottom: 40px; max-width: 1000px; margin-left: auto; margin-right: auto; width: 100%; }
  .bh-arc-hero__title { font-size: 30px; }
  /* パネルは1000px帯の中で左寄せ。幅を絞り、左の空きを「意図した余白」に見せる */
  .bh-arc-hero__visual-body { max-width: 1000px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; padding: 24px 28px 26px; }
  .bh-arc-hero__lead { font-size: 15px; max-width: none; margin-bottom: 18px; }
  /* CTAはパネル内で中央寄せ */
  .bh-arc-hero__cta { width: auto; display: inline-flex; padding-left: 40px; padding-right: 40px; }
  .bh-arc-hero__cta-wrap { text-align: center; }
  .bh-arc-cont { max-width: 1000px; margin: 0 auto; padding: 40px 24px 0; }
  .bh-arc-merit__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .bh-arc-pref__list ul { gap: 9px; }
  .bh-arc-articlelist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* =========================================================
 * エリア単独ページ(archive-lawyer / 例:/tokyo) 固有
 * ========================================================= */

/* 事案絞り込みフィルタ(アコーディオン) */
.bh-casefilter { background: #fff; border: 1px solid var(--bh-line); margin-bottom: 16px; }
.bh-casefilter__btn {
  position: relative; font-size: 13px; font-weight: 700; color: var(--bh-navy);
  padding: 13px 40px 13px 16px; margin: 0; cursor: pointer; background: var(--bh-bg);
  border-bottom: 1px solid var(--bh-line); user-select: none;
}
.bh-casefilter__btn:after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--bh-navy); border-bottom: 2px solid var(--bh-navy);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.bh-casefilter__btn:last-of-type { border-bottom: none; }
.bh-casefilter__list { list-style: none; margin: 0; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--bh-line); }
.bh-casefilter__list:last-child { border-bottom: none; }
.bh-casefilter__item { list-style: none; }
.bh-casefilter__item a {
  display: inline-block; font-size: 12.5px; color: var(--bh-navy);
  border: 1px solid var(--bh-line-strong); padding: 6px 13px; background: #fff;
}
.bh-casefilter__item a:hover { border-color: var(--bh-acc); color: var(--bh-acc); background: var(--bh-bg); }

/* basic カードの事務所名(リンクなし) */
.bh-office__name--plain { color: var(--bh-ink); }

/* empty(該当なし) */
.bh-office--empty { background: #fff; border: 1px dashed var(--bh-line-strong); padding: 28px 20px; text-align: center; }
.bh-office__empty-title { font-size: 15px; font-weight: 700; color: var(--bh-ink); margin: 0 0 8px; }
.bh-office__empty-text { font-size: 13px; color: var(--bh-sub); margin: 0; line-height: 1.7; }

/* サイドバー事案リスト */
.bh-sidebar-catlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bh-sidebar-catitem { list-style: none; }
.bh-sidebar-catitem a { display: inline-block; font-size: 12px; color: var(--bh-navy); border: 1px solid var(--bh-line-strong); padding: 5px 11px; background: #fff; }
.bh-sidebar-catitem a:hover { border-color: var(--bh-acc); color: var(--bh-acc); }

/* SEO本文(ページ下部の長文) */
.bh-arc-seotext { padding: 32px var(--bh-pad) 40px; background: var(--bh-bg); margin-top: 8px; }
.bh-arc-seotext .strong { max-width: 1120px; margin: 0 auto; }
.bh-arc-seotext .strongList { list-style: none; margin: 0; padding: 0; }
.bh-arc-seotext .strongList__item { list-style: none; }
.bh-arc-seotext .strongList__item__inner { background: #fff; border: 1px solid var(--bh-line); padding: 20px 18px; }
.bh-arc-seotext .strongTtl { font-size: 17px; font-weight: 700; color: var(--bh-ink); margin: 0 0 14px; padding-left: 12px; border-left: 4px solid var(--bh-acc); }
.bh-arc-seotext .strongTtl__inner { display: inline; }
/* 項目1: 県トップ下部SEO本文の見出し。素のh2で間延びしていたため締まったデザインに。
   ハードコードの<br>はinlineで詰め、左アクセントバー付きの見出しに統一。 */
.bh-pref-seotext .strongTtl { font-size: 19px; font-weight: 700; color: var(--bh-ink); margin: 0 0 16px; padding: 2px 0 2px 13px; border-left: 4px solid var(--bh-acc); line-height: 1.4; }
.bh-pref-seotext .strongTtl br { display: none; }
.bh-pref-seotext .strongTtl__inner { display: inline; }
.bh-arc-seotext .strongCont { font-size: 13.5px; line-height: 1.9; color: var(--bh-ink); }
.bh-arc-seotext .strongCont p { margin: 0 0 1em; }
.bh-arc-seotext .strongCont h3 { font-size: 15px; font-weight: 700; color: var(--bh-navy); margin: 1.4em 0 .6em; }
.bh-arc-seotext .strongCont a { color: var(--bh-acc); text-decoration: underline; }

/* ===== PC: エリア単独も2カラム ===== */
@media (min-width: 1024px) {
  .bh-arc-seotext { padding: 40px 24px 48px; }
}

/* =========================================================
 * 分野×エリアページ下部の SEO本文(メリット/よくある質問/費用の目安)
 * section.strong が .bh-listbody__main 内にあり未装飾だったので整える
 * ========================================================= */
.bh-listbody__main .strong, .bh-pref-seotext .strong { margin: 28px 0 0; }
/* #下部SEO本文: .bh-listbody の外にあるため幅制限がなく全幅になっていた。
   メインコンテナと同じ max-width・中央寄せ・左右余白を与えて横幅を揃える。 */
.bh-pref-seotext { padding: 0 16px 8px; }
@media (min-width: 768px) { .bh-pref-seotext { max-width: 1120px; margin: 0 auto; padding: 0 24px 16px; } }
.bh-listbody__main .strongList, .bh-pref-seotext .strongList { list-style: none; margin: 0; padding: 0; }
.bh-listbody__main .strongList__item, .bh-pref-seotext .strongList__item { list-style: none; }
.bh-listbody__main .strongList__item__inner, .bh-pref-seotext .strongList__item__inner { background: #fff; border: 1px solid var(--bh-line); border-radius: 8px; padding: 22px 22px 24px; }
.bh-listbody__main .strongCont, .bh-pref-seotext .strongCont { font-size: 13.5px; line-height: 1.95; color: var(--bh-ink); }
/* 見出し(メリット/よくある質問/費用の目安) */
.bh-listbody__main .strongCont h2, .bh-pref-seotext .strongCont h2 { font-size: 18px; font-weight: 700; color: var(--bh-ink); margin: 1.6em 0 .8em; padding-bottom: 10px; border-bottom: 2px solid var(--bh-line); position: relative; }
.bh-listbody__main .strongCont h2:first-child, .bh-pref-seotext .strongCont h2:first-child { margin-top: 0; }
.bh-listbody__main .strongCont h2:after, .bh-pref-seotext .strongCont h2:after { content: ""; position: absolute; left: 0; bottom: -2px; width: 56px; height: 2px; background: var(--bh-acc); }
/* FAQの質問(Q)・小見出し */
.bh-listbody__main .strongCont h3, .bh-pref-seotext .strongCont h3 { font-size: 14.5px; font-weight: 700; color: var(--bh-navy); margin: 1.5em 0 .5em; padding-left: 11px; border-left: 3px solid var(--bh-acc); line-height: 1.55; }
.bh-listbody__main .strongCont p, .bh-pref-seotext .strongCont p { margin: 0 0 1em; }
.bh-listbody__main .strongCont a, .bh-pref-seotext .strongCont a { color: var(--bh-acc); text-decoration: underline; }
/* 費用の目安テーブル */
.bh-listbody__main .strongCont table, .bh-pref-seotext .strongCont table { width: 100%; border-collapse: collapse; margin: .4em 0 1.2em; font-size: 13px; border: 1px solid var(--bh-line); }
.bh-listbody__main .strongCont thead th, .bh-pref-seotext .strongCont thead th { background: var(--bh-navy); color: #fff; font-weight: 700; text-align: left; padding: 11px 14px; }
.bh-listbody__main .strongCont tbody th, .bh-pref-seotext .strongCont tbody th { background: var(--bh-bg); color: var(--bh-ink); font-weight: 700; text-align: left; padding: 11px 14px; width: 42%; border-top: 1px solid var(--bh-line); }
.bh-listbody__main .strongCont tbody td, .bh-pref-seotext .strongCont tbody td { padding: 11px 14px; color: var(--bh-ink); border-top: 1px solid var(--bh-line); }

/* =========================================================
 * 【改修 2026.06】UI動作・デザイン性向上
 * ========================================================= */

/* --- トラストバー: 完全な白テキスト --- */
.bh-trustbar__item { color: #ffffff !important; font-weight: 600; }

/* --- ハンバーガーメニュー(トグルボタン)。display はスマホ限定(PCでは L549 で非表示) --- */
@media (max-width: 1023px) {
  .bh-header__toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; background: none; border: none;
    cursor: pointer; flex-shrink: 0;
  }
}
.bh-header__toggle-bar {
  display: block; width: 100%; height: 2px; background: var(--bh-navy);
  border-radius: 2px; transition: transform .25s, opacity .2s;
}
.bh-header__toggle.is-active .bh-header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bh-header__toggle.is-active .bh-header__toggle-bar:nth-child(2) { opacity: 0; }
.bh-header__toggle.is-active .bh-header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.bh-header__brand-link { display: flex; align-items: center; gap: 7px; text-decoration: none; }
.bh-header__brand-text { display: flex; flex-direction: column; }

/* --- スマホ: ナビは開閉式(デフォルト閉じ)。PC(1024px〜)を上書きしないよう max-width でガード --- */
@media (max-width: 1023px) {
  .bh-gnav { max-height: 0; overflow: hidden; transition: max-height .3s ease; background: var(--bh-navy-deep); }
  .bh-gnav.is-open { max-height: 600px; }
  .bh-gnav__inner { display: flex; flex-direction: column; padding: 8px 0; }
  .bh-gnav__item {
    display: flex; align-items: center; gap: 10px; padding: 13px var(--bh-pad);
    color: #fff; font-size: 14px; font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .bh-gnav__item:last-child { border-bottom: none; }
  .bh-gnav__item:hover { background: rgba(255,255,255,.06); }
}

/* --- 検索フォーム: 実select --- */
.bh-search__field { position: relative; display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--bh-line-strong); border-radius: 6px; padding: 0 16px; transition: border-color .2s, box-shadow .2s; }
.bh-search__field:hover { border-color: var(--bh-acc); }
.bh-search__field:focus-within { border-color: var(--bh-navy); box-shadow: 0 0 0 3px rgba(10,61,110,.10); }
.bh-search__field > svg { flex-shrink: 0; }
.bh-search__select {
  flex: 1; width: 100%; border: none; background: transparent; padding: 16px 28px 16px 0;
  font-size: 15px; font-weight: 600; color: var(--bh-ink); cursor: pointer; -webkit-appearance: none; appearance: none;
  font-family: inherit;
}
.bh-search__select:invalid, .bh-search__select option[value=""] { color: var(--bh-sub); font-weight: 400; }
.bh-search__select:focus { outline: none; }
.bh-search__field:after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--bh-navy); border-bottom: 2px solid var(--bh-navy);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

/* --- ボタン: ホバー効果 --- */
.bh-btn { transition: background-color .2s, box-shadow .2s, transform .1s; cursor: pointer; }
.bh-btn--cta:hover { background: #cf6109; box-shadow: 0 4px 12px rgba(232,115,12,.3); }
.bh-btn--cta:active { transform: translateY(1px); }
.bh-btn--acc:hover { background: #0a5f73; }
.bh-btn--outline:hover { background: var(--bh-navy); color: #fff; }

/* --- 診断ツール: 背景の色を外して白基調に、カードにアクセント --- */
.bh-section--bg { background: #fff; }
/* 診断ツールだけは識別できるよう、薄い区切りと専用見出しアクセント */
.bh-tool {
  position: relative; overflow: hidden;
  background: #fff;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.bh-tool:hover { border-color: var(--bh-acc); box-shadow: 0 6px 18px rgba(10,61,110,.12); transform: translateY(-3px); }
.bh-tool:hover .bh-tool__icon { background: linear-gradient(135deg, #dce8f5 0%, #cadcf0 100%); border-color: var(--bh-acc); }

/* =========================================================
 * セクションのデザイン性(斜めライン・交互背景で単調さ解消)
 * ========================================================= */

/* セクション見出しにアクセント番号風の演出を付ける土台 */
.bh-section { position: relative; }

/* 斜めの区切りライン(セクション境界に動き) */
.bh-section--slant { position: relative; }
.bh-section--slant:before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 40px;
  background: inherit; clip-path: polygon(0 0, 100% 40px, 100% 100%, 0 100%);
  display: none;
}

/* 交互の背景色で「同じものが並ぶ」印象を解消 */
.bh-section--tint { background: linear-gradient(180deg, #f2f5f8 0%, #eef3f8 100%); }
.bh-section--deep { background: var(--bh-navy-deep); }
.bh-section--deep .bh-sectitle { color: #fff; }
.bh-section--deep .bh-sectitle:before { background: var(--bh-acc); }

/* セクション見出しを少しリッチに(左の縦バー + 細い下線) */
.bh-sectitle {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 18px;
}
.bh-sectitle:after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--bh-line-strong) 0%, transparent 60%);
}

/* 分野グリッド・診断・地域: カードのホバーを統一して操作感を出す */
.bh-fieldgrid__item, .bh-prefgrid__item {
  transition: border-color .2s, box-shadow .2s, transform .15s, background-color .2s;
}
.bh-fieldgrid__item:hover, .bh-prefgrid__item:hover {
  border-color: var(--bh-acc); box-shadow: 0 4px 14px rgba(10,61,110,.10);
  transform: translateY(-2px); background: #fff;
}

@media (min-width: 1024px) {
  .bh-section--slant:before { display: block; }
}

/* deep(濃紺)セクション内のテキスト色調整 */
.bh-section--deep .bh-sectitle { color: #fff; }
.bh-section--deep .bh-sectitle__sub { color: #b9cde2; }
.bh-section--deep .bh-card { background: #fff; }
/* deepセクションの白カードは通常色のまま見やすい */

/* --- 新着コラムリスト(トップ) --- */
.bh-newslist { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bh-newslist__item { list-style: none; }
.bh-newslist__link { display: flex; gap: 12px; align-items: center; border: 1px solid var(--bh-line); padding: 10px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.bh-newslist__link:hover { border-color: var(--bh-acc); box-shadow: 0 3px 10px rgba(10,61,110,.08); }
.bh-newslist__thumb { flex-shrink: 0; width: 72px; height: 72px; }
.bh-newslist__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-newslist__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.bh-newslist__cat { align-self: flex-start; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--bh-navy); padding: 2px 9px; }
.bh-newslist__title { font-size: 13.5px; font-weight: 600; color: var(--bh-ink); line-height: 1.5; }
.bh-newslist__link:hover .bh-newslist__title { color: var(--bh-acc); }
.bh-newslist__date { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--bh-sub); }

@media (min-width: 1024px) {
  .bh-newslist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* =========================================================
 * 【最優先・干渉対策】元CSS(base.css/style.css)の要素セレクタが
 * bh内の要素に効くのを確実に上書き(.bh スコープで詳細度を上げる)
 * ========================================================= */
.bh .bh-header__name,
.bh-header .bh-header__name { font-size: 18px !important; font-weight: 800 !important; color: #003b70 !important; line-height: 1.15 !important; letter-spacing: .02em !important; }
.bh .bh-header__tagline,
.bh-header .bh-header__tagline { font-size: 9px !important; font-weight: 500 !important; color: #333 !important; line-height: 1.2 !important; letter-spacing: .04em !important; }
.bh .bh-header__logo { height: 32px !important; width: auto !important; }
.bh .bh-footer__logo { height: 17px !important; width: auto !important; }
.bh .bh-footer__name { font-size: 15px !important; }

/* PC: ヘッダー文字をしっかり大きく(干渉に負けないよう!important) */
@media (min-width: 1024px) {
  .bh .bh-header__name,
  .bh-header .bh-header__name { font-size: 26px !important; }
  .bh .bh-header__tagline,
  .bh-header .bh-header__tagline { font-size: 11px !important; }
  .bh .bh-header__logo { height: 44px !important; }
}

/* 元CSSの h1〜h4 が bh 見出しに干渉するのを防ぐ(font-sizeは各bhクラスで制御) */
.bh h1, .bh h2, .bh h3, .bh h4 { font-family: inherit; }

/* --- 注目の弁護士事務所リスト(トップ) --- */
.bh-featlist { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bh-featlist__item { list-style: none; }
.bh-featlist__link { display: flex; gap: 14px; align-items: stretch; border: 1px solid var(--bh-line); padding: 12px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.bh-featlist__link:hover { border-color: var(--bh-acc); box-shadow: 0 3px 12px rgba(10,61,110,.10); }
.bh-featlist__thumb { flex-shrink: 0; width: 110px; }
.bh-featlist__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-featlist__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bh-featlist__name { font-size: 14.5px; font-weight: 700; color: var(--bh-ink); line-height: 1.4; }
.bh-featlist__link:hover .bh-featlist__name { color: var(--bh-acc); }
.bh-featlist__catch { font-size: 12px; color: var(--bh-sub); line-height: 1.6; }
.bh-featlist__area { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--bh-sub); margin-top: auto; }

/* --- 分野別解説(SEO本文内) --- */
.bh-fielddesc { margin: 16px 0 0; }
.bh-fielddesc dt { margin-top: 14px; }
.bh-fielddesc dt:first-child { margin-top: 0; }
.bh-fielddesc dt a { font-size: 14px; font-weight: 700; color: var(--bh-navy); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.bh-fielddesc dt a:before { content: "▸"; color: var(--bh-acc); }
.bh-fielddesc dt a:hover { color: var(--bh-acc); text-decoration: underline; }
.bh-fielddesc dd { margin: 4px 0 0 16px; font-size: 12.5px; color: #445468; line-height: 1.85; }

@media (min-width: 1024px) {
  .bh-featlist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .bh-fielddesc { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; }
  .bh-fielddesc dt { margin-top: 12px; }
}

/* =========================================================
 * 【改修2 2026.06】分野グリッド柄・地域×分野導線・統計・モーダル
 * ========================================================= */

/* --- 分野グリッドに柄(各分野アクセントカラー) --- */
.bh-fieldgrid__item { position: relative; overflow: hidden; }
.bh-fieldgrid__pattern { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5; }
/* 右上の斜め装飾 + 薄いドット柄 */
.bh-fieldgrid__pattern:before {
  content: ""; position: absolute; top: -20px; right: -20px; width: 56px; height: 56px;
  border-radius: 50%; background: currentColor; opacity: .08;
}
.bh-fieldgrid__pattern:after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px;
  background: currentColor; opacity: .35;
}
.bh-fieldgrid__item > * { position: relative; z-index: 1; }
/* 分野ごとのアクセントカラー(柄に反映) */
.bh-fieldgrid__item[data-field="traffic-accident"] .bh-fieldgrid__pattern { color: #0e7490; }
.bh-fieldgrid__item[data-field="divorce"] .bh-fieldgrid__pattern { color: #b14a6b; }
.bh-fieldgrid__item[data-field="inheritance"] .bh-fieldgrid__pattern { color: #1f7a52; }
.bh-fieldgrid__item[data-field="debt"] .bh-fieldgrid__pattern { color: #0f766e; }
.bh-fieldgrid__item[data-field="criminal-case"] .bh-fieldgrid__pattern { color: #9b3838; }
.bh-fieldgrid__item[data-field="labor-problems"] .bh-fieldgrid__pattern { color: #b45309; }
.bh-fieldgrid__item[data-field="corporate"] .bh-fieldgrid__pattern { color: #3b4e8c; }
.bh-fieldgrid__item[data-field="real-estate"] .bh-fieldgrid__pattern { color: #6b6130; }
.bh-fieldgrid__item[data-field="debt-collection"] .bh-fieldgrid__pattern { color: #7a5295; }
.bh-fieldgrid__item[data-field="consumer-damage"] .bh-fieldgrid__pattern { color: #a14d2a; }
.bh-fieldgrid__item[data-field="internet"] .bh-fieldgrid__pattern { color: #3f6699; }
/* ホバーで柄を少し濃く */
.bh-fieldgrid__item:hover .bh-fieldgrid__pattern { opacity: .8; }

/* --- 地域×分野: 人気の組み合わせ導線 --- */
.bh-combo__heading { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #fff; margin: 18px 0 12px; }
.bh-combo { display: flex; flex-direction: column; gap: 9px; }
.bh-combo__item {
  display: flex; align-items: center; gap: 10px; background: #fff; padding: 14px 16px;
  border-radius: 6px; transition: transform .15s, box-shadow .2s;
}
.bh-combo__item:hover { transform: translateX(3px); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.bh-combo__pref { font-size: 13.5px; font-weight: 700; color: var(--bh-navy); white-space: nowrap; }
.bh-combo__x { font-size: 12px; color: var(--bh-sub); font-weight: 700; }
.bh-combo__field { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--bh-navy); padding: 5px 12px; border-radius: 4px; }
.bh-combo__item > svg:last-child { margin-left: auto; }
.bh-combo__note { font-size: 12px; color: #c5d6e8; margin: 16px 0 0; line-height: 1.7; }
.bh-combo__note a { color: #fff; text-decoration: underline; font-weight: 600; }

/* --- 統計を目立たせる --- */
.bh-stats { display: flex; border: none; gap: 12px; background: none; }
.bh-stats__item {
  flex: 1; text-align: center; padding: 22px 12px; border: 1px solid var(--bh-line);
  border-radius: 8px; background: linear-gradient(160deg, #fff 0%, var(--bh-bg) 100%);
  border-top: 3px solid var(--bh-navy);
}
.bh-stats__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #fff; border: 1px solid var(--bh-line); border-radius: 50%; margin-bottom: 10px; }
.bh-stats__label { font-size: 12px; color: var(--bh-sub); margin: 0 0 6px; font-weight: 600; }
.bh-stats__num { font-size: 30px; font-weight: 700; color: var(--bh-navy); margin: 0; line-height: 1; letter-spacing: .01em; }
.bh-stats__num small { font-size: 14px; margin-left: 2px; }

/* --- 分野別解説: カード化して整える --- */
.bh-fielddesc { margin: 18px 0 0; }
.bh-fielddesc__item { display: block; margin-bottom: 10px; background: #fff; border: 1px solid var(--bh-line); border-radius: 8px; padding: 16px 18px; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.bh-fielddesc__item:last-child { margin-bottom: 0; }
.bh-fielddesc__item:hover { border-color: var(--bh-acc); box-shadow: 0 4px 14px rgba(10,61,110,.08); transform: translateY(-1px); }
.bh-fielddesc__ttl { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; color: var(--bh-navy); }
.bh-fielddesc__ttl:before { content: ""; width: 4px; height: 16px; background: var(--bh-acc); border-radius: 2px; flex-shrink: 0; }
.bh-fielddesc__ttl svg { margin-left: auto; flex-shrink: 0; transition: transform .2s; }
.bh-fielddesc__item:hover .bh-fielddesc__ttl { color: var(--bh-acc); }
.bh-fielddesc__item:hover .bh-fielddesc__ttl svg { transform: translateX(3px); }
.bh-fielddesc__txt { display: block; margin: 8px 0 0; font-size: 12.5px; color: #56697d; line-height: 1.8; }

/* --- モーダル(47都道府県) --- */
.bh-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.bh-modal.is-open { display: block; }
.bh-modal__overlay { position: absolute; inset: 0; background: rgba(8,20,35,.6); animation: bhFade .2s ease; }
.bh-modal__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(100% - 32px); max-width: 720px; max-height: 85vh; overflow-y: auto;
  background: #fff; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: bhPop .22s ease;
}
@keyframes bhFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bhPop { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.bh-modal__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: #fff; border-bottom: 1px solid var(--bh-line); }
.bh-modal__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--bh-ink); margin: 0; }
.bh-modal__close { width: 36px; height: 36px; border: none; background: var(--bh-bg); border-radius: 50%; font-size: 22px; line-height: 1; color: var(--bh-sub); cursor: pointer; transition: background-color .2s; }
.bh-modal__close:hover { background: var(--bh-line); color: var(--bh-ink); }
.bh-modal__body { padding: 18px 20px 24px; }
.bh-modal__region { margin-bottom: 18px; }
.bh-modal__region:last-child { margin-bottom: 0; }
.bh-modal__region-ttl { font-size: 12.5px; font-weight: 700; color: #fff; background: var(--bh-navy); padding: 7px 12px; margin: 0 0 10px; border-radius: 4px; }
.bh-modal__preflist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; grid-auto-rows: minmax(0, auto); align-items: stretch; }
.bh-modal__preflist li { list-style: none; min-height: 0; }
.bh-modal__preflist a { display: block; height: 100%; box-sizing: border-box; text-align: center; font-size: 13px; color: var(--bh-navy); border: 1px solid var(--bh-line-strong); padding: 9px 4px; border-radius: 4px; background: #fff; transition: border-color .2s, background-color .2s; }
.bh-modal__preflist a:hover { border-color: var(--bh-acc); color: var(--bh-acc); background: var(--bh-bg); }

@media (min-width: 1024px) {
  .bh-combo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .bh-stats__num { font-size: 38px; }
  .bh-stats__num small { font-size: 16px; }
  .bh-fielddesc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .bh-fielddesc__item { margin-bottom: 0; }
  .bh-modal__preflist { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
 * 【改修3 2026.06】カテゴリトップ:崩れ修正+分野別色味
 * ========================================================= */

/* --- 都道府県ナビの崩れ修正(flex強制・元CSS干渉対策) ---
   HTML構造が dd.bh-arc-pref__list > ul > li.bh-arc-pref__item のため、
   flexコンテナは中間の ul に当てる(dd直下にflexしてもliに効かず重なる)。 */
.bh .bh-arc-pref__list {
  list-style: none !important; margin: 0 !important; padding: 12px 14px !important;
}
.bh .bh-arc-pref__list ul {
  display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
  list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.bh .bh-arc-pref__item {
  list-style: none !important; width: auto !important; flex: 0 0 auto !important;
  display: inline-block !important; margin: 0 !important;
}
.bh .bh-arc-pref__item a {
  display: inline-block !important; width: auto !important;
  font-size: 14px !important; color: var(--bh-navy) !important;
  border: 1px solid var(--bh-line-strong) !important; padding: 8px 15px !important;
  background: #fff !important; white-space: nowrap !important;
}
.bh .bh-arc-pref__item a:hover { border-color: var(--bh-acc) !important; color: var(--bh-acc) !important; background: var(--bh-tint) !important; }

/* --- 分野別の色味を各所に反映 --- */
/* 都道府県ナビの地域見出しを分野アクセント色に */
.bh-arc-pref__region { background: var(--bh-acc) !important; }
/* セクション見出しの下に分野アクセントのライン */
.bh-arc-sectitle { position: relative; padding-bottom: 14px; }
.bh-arc-sectitle:after { content: ""; display: block; width: 48px; height: 3px; background: var(--bh-acc); margin: 12px auto 0; }
/* メリットカードの上端を分野色に */
.bh-arc-merit__list li { border-top: 3px solid var(--bh-acc) !important; }
/* CTAボタンは分野色(オレンジのままにせず分野アクセントで統一する場合) → オレンジ維持しつつ補助に分野色 */
/* 費用相場テーブルの見出し・選び方の番号などに分野色 */
.bh-arc-cont .catFees th, .bh-arc-cont table th { background: var(--bh-acc) !important; color: #fff !important; }

/* === インラインstyleセクション(catFees/catSelection/catFaq)の色味と幅を統一 ===
   元はインラインで紫(#5a4e7c)・max-width 980/880px とサイト基準からズレていたので上書き。 */
/* テーブル見出し行(thead tr の紫) */
.bh-arc-cont .catFees thead tr { background: var(--bh-navy) !important; }
.bh-arc-cont .catFees thead th { background: var(--bh-navy) !important; }
/* 金額の紫文字 → 分野アクセント */
.bh-arc-cont .catFees td[style*="5a4e7c"] { color: var(--bh-acc) !important; }
/* 選び方カードの左ボーダー紫 → 分野アクセント */
.bh-arc-cont .catSelection li[style*="5a4e7c"] { border-left-color: var(--bh-acc) !important; }
/* FAQのQバッジ紫・▼紫 → 分野アクセント */
.bh-arc-cont .catFaq span[style*="background:#5a4e7c"] { background: var(--bh-acc) !important; }
.bh-arc-cont .catFaq span[style*="color:#5a4e7c"] { color: var(--bh-acc) !important; }
/* 内側sectionの最大幅をコンテンツ幅に合わせる(広がりすぎ/バラつきの解消) */
.bh-arc-cont .catFees > section,
.bh-arc-cont .catSelection > section,
.bh-arc-cont .catFaq > section { max-width: 1000px !important; }
/* 見出し contTtl をサイトの見出しトーンに寄せる */
.bh-arc-cont .contTtl { font-size: 22px; font-weight: 700; color: var(--bh-ink); letter-spacing: .02em; }

/* 注目弁護士リスト(bh化) */
.bh-arc-featured { background: var(--bh-tint); padding: 32px var(--bh-pad); margin-bottom: 0; }
.bh-arc-featured .bh-arc-cont__inner { width: 100%; }
.bh-arc-featured__date { display: flex; align-items: center; gap: 5px; justify-content: center; font-size: 12px; color: var(--bh-sub); margin: 0 0 18px; }
.bh-arc-featured__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bh-arc-featured__item { list-style: none; }
.bh-arc-featured__link { display: flex; gap: 14px; align-items: stretch; background: #fff; border: 1px solid var(--bh-line); padding: 14px; transition: border-color .2s, box-shadow .2s; }
.bh-arc-featured__link:hover { border-color: var(--bh-acc); box-shadow: 0 4px 14px rgba(10,61,110,.10); }
.bh-arc-featured__thumb { flex-shrink: 0; width: 130px; }
.bh-arc-featured__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-arc-featured__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.bh-arc-featured__name { font-size: 15px; font-weight: 700; color: var(--bh-ink); line-height: 1.4; }
.bh-arc-featured__link:hover .bh-arc-featured__name { color: var(--bh-acc); }
.bh-arc-featured__catch { font-size: 12.5px; color: var(--bh-sub); line-height: 1.6; }
.bh-arc-featured__area { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--bh-sub); margin-top: auto; }
.bh-arc-sectitle.bh-arc-sectitle--onwhite { color: var(--bh-ink); }

/* 「※表示順について」ツールチップ(bh化。元は無装飾でテキストが裸で出ていた) */
/* 「※表示順について」ツールチップ(bh化)。分野トップ・分野×エリア両方で使用 */
.bh .tooltipWrap { text-align: center; margin: 0 0 14px; }
.bh .js--tooltipTarget { display: inline-block; font-size: 11.5px; color: var(--bh-sub); cursor: pointer; border-bottom: 1px dotted var(--bh-line-strong); padding-bottom: 1px; }
.bh .js--tooltipTarget:hover { color: var(--bh-acc); border-color: var(--bh-acc); }
.bh .js--tooltipItem { display: none; max-width: 560px; margin: 10px auto 0; text-align: left; background: #fff; border: 1px solid var(--bh-line); border-radius: 8px; padding: 14px 16px; font-size: 12px; color: var(--bh-ink); line-height: 1.9; box-shadow: 0 3px 12px rgba(16,38,58,.08); }
.bh .js--tooltipItem p { margin: 0 0 6px; font-weight: 700; color: var(--bh-navy); font-size: 12.5px; }
.bh .tooltipWrap.is-open .js--tooltipItem,
.bh .tooltipWrap:hover .js--tooltipItem { display: block; }
/* 分野×エリアページではリスト左寄せで表示 */
.bh-listbody__main .tooltipWrap { text-align: left; }
.bh-listbody__main .js--tooltipItem { margin-left: 0; }

@media (min-width: 1024px) {
  .bh-arc-featured { padding: 40px 24px; }
  .bh-arc-featured .bh-arc-cont__inner { max-width: 1000px; margin: 0 auto; }
  .bh-arc-featured__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .bh-arc-hero__img { object-position: center 40%; }
}

/* =========================================================
 * 固定ページ(page-bh.php) — 会社概要/運営方針/プライバシー/利用規約/お問い合わせ等
 * ========================================================= */
.bh--page .bh-page { padding: 8px 16px 50px; display: grid; grid-template-columns: 1fr; gap: 32px; }
.bh-page__head { margin: 0 0 28px; padding: 0 0 20px; border-bottom: 2px solid var(--bh-line-strong); position: relative; }
.bh-page__head:after { content: ""; position: absolute; left: 0; bottom: -2px; width: 64px; height: 2px; background: var(--bh-cta); }
.bh-page__title { font-size: 23px; font-weight: 700; color: var(--bh-ink); margin: 0; line-height: 1.4; letter-spacing: .01em; }
.bh-page__lead { font-size: 14.5px; color: var(--bh-sub); margin: 12px 0 0; line-height: 1.85; }
.bh-page__updated { font-size: 12px; color: var(--bh-sub); margin: 10px 0 0; display: inline-flex; align-items: center; gap: 5px; }
.bh-page__body { font-size: 15.5px; line-height: 1.9; letter-spacing: .02em; color: var(--bh-ink); }
.bh-page__body h2 { font-size: 20px; font-weight: 700; color: var(--bh-ink); margin: 2em 0 .8em; padding: 0 0 9px 14px; position: relative; border-bottom: 2px solid var(--bh-line-strong); line-height: 1.5; }
.bh-page__body h2:before { content: ""; position: absolute; left: 0; top: 2px; bottom: 11px; width: 5px; background: var(--bh-navy); border-radius: 2px; }
.bh-page__body h2:first-child { margin-top: 0; }
.bh-page__body h3 { font-size: 17px; font-weight: 700; color: var(--bh-navy); margin: 1.6em 0 .5em; }
.bh-page__body p { margin: 0 0 1.3em; }
.bh-page__body a { color: var(--bh-cta); text-decoration: underline; }
.bh-page__body ul, .bh-page__body ol { margin: 0 0 1.3em; padding-left: 0; list-style: none; }
.bh-page__body ul > li { position: relative; padding-left: 22px; margin: 0 0 .5em; line-height: 1.85; }
.bh-page__body ul > li:before { content: ""; position: absolute; left: 5px; top: .7em; width: 7px; height: 7px; background: var(--bh-navy); border-radius: 50%; }
.bh-page__body ol { counter-reset: bh-page-ol; }
.bh-page__body ol > li { position: relative; padding-left: 30px; margin: 0 0 .5em; line-height: 1.85; counter-increment: bh-page-ol; }
.bh-page__body ol > li:before { content: counter(bh-page-ol); position: absolute; left: 0; top: .1em; width: 22px; height: 22px; background: var(--bh-navy); color: #fff; font-size: 12px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.bh-page__table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: 15px; }
.bh-page__table th, .bh-page__table td { border: 1px solid var(--bh-line); padding: 13px 16px; text-align: left; vertical-align: top; line-height: 1.8; }
.bh-page__table th { background: #e3eaf0; color: var(--bh-navy); font-weight: 700; white-space: nowrap; width: 30%; }
.bh-page__side { display: flex; flex-direction: column; gap: 18px; }
.bh-side-card { border: 1px solid var(--bh-line); border-radius: 8px; overflow: hidden; background: #fff; }
.bh-side-card__ttl { background: var(--bh-navy); color: #fff; font-size: 13px; font-weight: 700; padding: 12px 16px; letter-spacing: .03em; }
.bh-side-card__body { padding: 14px 16px; }
.bh-side-nav { list-style: none; margin: 0; padding: 0; }
.bh-side-nav li { border-bottom: 1px solid var(--bh-line); }
.bh-side-nav li:last-child { border-bottom: none; }
.bh-side-nav a { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; font-size: 13.5px; color: var(--bh-ink); text-decoration: none; font-weight: 600; }
.bh-side-nav a:hover { color: var(--bh-navy); }
.bh-side-cta { display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--bh-cta); color: #fff; text-align: center; font-weight: 700; font-size: 14.5px; padding: 15px; border-radius: 8px; text-decoration: none; box-shadow: 0 3px 10px rgba(232,115,12,.3); transition: all .15s; }
.bh-side-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
@media (min-width: 900px) {
  /* 本文(1fr)+サイド(280px)の2カラム。
     1024px以上で .bh__container が画面幅まで開くため、固定ページは
     他ページ(一覧/記事)と同じく最大1120px・中央寄せ・左右padding24pxに収め、
     本文1行が長くなりすぎないようにする。 */
  .bh--page .bh-page {
    grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start;
    max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px;
  }
}
@media (min-width: 1024px) {
  .bh-page__title { font-size: 28px; }
  .bh-page__body { font-size: 16px; line-height: 1.95; }
  .bh-page__body h2 { font-size: 21px; }
  .bh-page__body h3 { font-size: 18px; }
}
@media (max-width: 600px) {
  .bh-page__table th { width: 34%; font-size: 14px; }
  .bh-page__table td { font-size: 14px; }
}

/* =========================================================
 * 固定ページ本文の追加要素（運営方針 about 等で使用）
 * h4 / 本文汎用table / 数字ブロック(stats) / 囲みボックス / リード帯
 * ========================================================= */
.bh-page__body h4 { font-size: 15.5px; font-weight: 700; color: var(--bh-navy); margin: 1.4em 0 .4em; }
/* 英字サブ見出し（H2内の小さな英語ラベル） */
.bh-page__body h2 .en { display: block; font-size: 12px; font-weight: 500; color: var(--bh-sub); letter-spacing: .06em; margin-top: 4px; text-transform: uppercase; }
/* 本文中の汎用テーブル（.bh-page__table指定が無いtable）も整形 */
.bh-page__body table:not(.bh-page__table) { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: 15px; }
.bh-page__body table:not(.bh-page__table) th,
.bh-page__body table:not(.bh-page__table) td { border: 1px solid var(--bh-line); padding: 12px 15px; text-align: left; vertical-align: top; line-height: 1.8; }
.bh-page__body table:not(.bh-page__table) th { background: #e3eaf0; color: var(--bh-navy); font-weight: 700; white-space: nowrap; width: 30%; }
/* リード帯（ページ冒頭の導入文。淡い紺背景＋左バー） */
.bh-page__intro { background: var(--bh-bg); border-left: 4px solid var(--bh-navy); padding: 16px 18px; margin: 0 0 1.6em; font-size: 15px; line-height: 1.95; color: var(--bh-ink); border-radius: 0 6px 6px 0; }
/* 強調囲みボックス（運営方針の前提条件など） */
.bh-page__callout { border: 1px solid var(--bh-line-strong); background: #fff; border-top: 3px solid var(--bh-cta); padding: 16px 18px; margin: 0 0 1.6em; font-size: 14.5px; line-height: 1.95; color: var(--bh-ink); }
/* 注意書き（個別相談はお受けできません 等） */
.bh-page__notice { background: #fff7ef; border: 1px solid #f0d4b4; border-radius: 6px; padding: 13px 15px; margin: 0 0 1.6em; font-size: 13.5px; line-height: 1.85; color: #6b4a25; }
.bh-page__notice strong { color: #a85a18; }
/* 数字で見る（stats） */
.bh-page__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 1.6em; }
.bh-page__stat { border: 1px solid var(--bh-line); border-radius: 8px; background: var(--bh-bg); text-align: center; padding: 20px 8px; }
.bh-page__stat-num { font-size: 30px; font-weight: 800; color: var(--bh-navy); line-height: 1; letter-spacing: .01em; }
.bh-page__stat-num small { font-size: 13px; font-weight: 700; margin-left: 2px; }
.bh-page__stat-label { font-size: 9.5px; font-weight: 600; color: var(--bh-sub); letter-spacing: .05em; margin-top: 8px; text-transform: uppercase; }
@media (max-width: 480px) {
  .bh-page__stats { gap: 8px; }
  .bh-page__stat { padding: 16px 4px; }
  .bh-page__stat-num { font-size: 24px; }
  .bh-page__stat-label { font-size: 8.5px; }
}

/* =========================================================
 * お問い合わせフォーム（MW WP Form プラグイン出力）の整形
 * 実マークアップ: .mw_wp_form 内の table / input / textarea /
 * .his(必須バッジ) / .confirmingTxt(同意) / .btn-kit01(送信)
 * ========================================================= */
.bh-page__body .mw_wp_form table { width: 100%; border-collapse: collapse; margin: 0 0 20px; border: none; }
.bh-page__body .mw_wp_form table th,
.bh-page__body .mw_wp_form table td { display: block; width: 100%; border: none; padding: 0; text-align: left; }
.bh-page__body .mw_wp_form table tr { display: block; margin: 0 0 18px; }
.bh-page__body .mw_wp_form th { font-size: 13.5px; font-weight: 700; color: var(--bh-ink); margin: 0 0 7px; }
.bh-page__body .mw_wp_form .his { display: inline-block; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--bh-cta); border-radius: 3px; padding: 1px 7px; margin-left: 8px; letter-spacing: .04em; vertical-align: middle; }
.bh-page__body .mw_wp_form input[type="text"],
.bh-page__body .mw_wp_form input[type="email"],
.bh-page__body .mw_wp_form input[type="tel"],
.bh-page__body .mw_wp_form textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--bh-line-strong); border-radius: 6px;
  padding: 12px 13px; font-size: 15px; font-family: inherit; color: var(--bh-ink); background: #fff;
}
.bh-page__body .mw_wp_form input::placeholder,
.bh-page__body .mw_wp_form textarea::placeholder { color: #aeb9c6; }
.bh-page__body .mw_wp_form input[type="text"]:focus,
.bh-page__body .mw_wp_form input[type="email"]:focus,
.bh-page__body .mw_wp_form textarea:focus { outline: none; border-color: var(--bh-navy); box-shadow: 0 0 0 3px rgba(10,61,110,.12); }
.bh-page__body .mw_wp_form textarea { min-height: 150px; resize: vertical; line-height: 1.7; }
/* 入力例などの補足テキスト */
.bh-page__body .mw_wp_form td > span { display: inline-block; font-size: 11.5px; color: var(--bh-sub); margin-top: 5px; line-height: 1.6; }
/* 同意チェック行 */
.bh-page__body .mw_wp_form .confirmingTxt { background: var(--bh-bg); border: 1px solid var(--bh-line); border-radius: 8px; padding: 13px 15px; margin: 0 0 18px; font-size: 13px; line-height: 1.7; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.bh-page__body .mw_wp_form .confirmingTxt a { color: var(--bh-cta); text-decoration: underline; }
.bh-page__body .mw_wp_form .mwform-checkbox-field { margin: 0; }
.bh-page__body .mw_wp_form .mwform-checkbox-field label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
/* 送信・確認ボタン */
.bh-page__body .mw_wp_form .submit,
.bh-page__body .mw_wp_form .btn-arw02 { text-align: center; margin: 0; }
.bh-page__body .mw_wp_form input[type="submit"],
.bh-page__body .mw_wp_form .btn-kit01 {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 360px; border: none; border-radius: 8px;
  background: var(--bh-cta); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .04em;
  padding: 16px 20px; box-shadow: 0 3px 12px rgba(232,115,12,.32); transition: filter .15s, transform .15s;
}
.bh-page__body .mw_wp_form input[type="submit"]:hover,
.bh-page__body .mw_wp_form .btn-kit01:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* =========================================================
 * トップ: 地域×分野の面的ナビ(bh-areagrid)
 * 主要県ごとに、弁護士一覧が存在する7分野へのリンクを面で展開。
 * 初期は主要県のみ表示、残りは「もっと見る」で展開(JS: bh2026-ui.js)。
 * ========================================================= */
.bh-areagrid { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.bh-areagrid__group { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 14px 14px 16px; }
.bh-areagrid__pref { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: #fff; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.14); }
.bh-areagrid__count { font-size: 10.5px; font-weight: 700; color: #9fc0e4; background: rgba(159,192,228,.16); border-radius: 999px; padding: 2px 9px; }
.bh-areagrid__chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bh-areagrid__chip { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 7px; padding: 9px 10px; text-decoration: none; transition: transform .12s, box-shadow .12s; }
.bh-areagrid__chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.bh-areagrid__ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0; }
.bh-areagrid__ic svg { display: block; }
.bh-areagrid__lb { font-size: 13px; font-weight: 700; color: var(--bh-ink); line-height: 1.2; }
/* 「もっと見る」で展開する県(初期は非表示) */
.bh-areagrid__more { display: none; }
.bh-areagrid.is-expanded .bh-areagrid__more { display: block; }
/* もっと見るボタン */
.bh-areagrid__toggle { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 13px; font-weight: 700; padding: 13px; border-radius: 8px; cursor: pointer; transition: background-color .15s; }
.bh-areagrid__toggle:hover { background: rgba(255,255,255,.14); }
.bh-areagrid__toggle svg { transition: transform .2s; }
.bh-areagrid.is-expanded .bh-areagrid__toggle svg { transform: rotate(180deg); }
.bh-areagrid__toggle .lbl-more { display: inline; }
.bh-areagrid__toggle .lbl-less { display: none; }
.bh-areagrid.is-expanded .bh-areagrid__toggle .lbl-more { display: none; }
.bh-areagrid.is-expanded .bh-areagrid__toggle .lbl-less { display: inline; }
@media (min-width: 768px) {
  .bh-areagrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
  /* もっと見るボタンはグリッド全幅 */
  .bh-areagrid__toggle { grid-column: 1 / -1; }
}

/* =========================================================
 * トップ: よくあるご質問(FAQ) アコーディオン
 * <details>/<summary> ベース(JS不要)。FAQ Schema(JSON-LD)併用。
 * ========================================================= */
.bh-faq { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.bh-faq__item { background: #fff; border: 1px solid var(--bh-line); border-radius: 8px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.bh-faq__item[open] { border-color: var(--bh-line-strong); box-shadow: 0 3px 12px rgba(10,61,110,.06); }
.bh-faq__q {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 16px 18px; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 700; color: var(--bh-ink); line-height: 1.6;
}
.bh-faq__q::-webkit-details-marker { display: none; }
.bh-faq__q-mark {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bh-navy); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.bh-faq__q-text { flex: 1; padding-top: 2px; }
.bh-faq__q-icon { flex-shrink: 0; display: flex; align-items: center; padding-top: 3px; transition: transform .25s; }
.bh-faq__item[open] .bh-faq__q-icon { transform: rotate(180deg); }
.bh-faq__q:hover { background: var(--bh-bg); }
.bh-faq__a {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 0 18px 18px; border-top: 1px solid var(--bh-line);
  margin-top: -1px; padding-top: 16px;
}
.bh-faq__a-mark {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bh-cta); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.bh-faq__a-text { flex: 1; margin: 0; padding-top: 3px; font-size: 13.5px; color: #445468; line-height: 1.95; }
@media (min-width: 1024px) {
  .bh-faq__q { font-size: 16px; }
  .bh-faq__a-text { font-size: 14.5px; }
}

/* =========================================================
 * 上へ戻るボタン(全ページ共通・JSで動的生成)
 * スクロール量320px超で出現、クリックで最上部へスムーズスクロール。
 * ========================================================= */
.bh-pagetop {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  width: 48px; height: 48px; padding: 0; border: none; border-radius: 50%;
  background: var(--bh-navy); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(8,20,35,.28);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s, visibility .25s, transform .25s, background-color .2s;
}
.bh-pagetop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.bh-pagetop:hover { background: var(--bh-cta); box-shadow: 0 6px 18px rgba(232,115,12,.34); }
.bh-pagetop svg { display: block; }
/* 記事詳細などsticky CTAバーがある画面では、重ならないよう少し上げる */
.bh--article .bh-pagetop { bottom: 78px; }
@media (min-width: 1024px) {
  .bh-pagetop { right: 28px; bottom: 28px; width: 52px; height: 52px; }
  .bh--article .bh-pagetop { bottom: 28px; } /* PCはCTAバーが被らないので通常位置 */
}

/* =========================================================
 * 弁護士への問い合わせフォーム(page-form-bh.php / accept)
 * リアルバリデーションのエラー表示・補足通知・事務所サイド。
 * フォーム本体(table/input等)は既存の .bh-page__body .mw_wp_form 系を流用。
 * ========================================================= */
/* エラー表示 */
.bh-form-err { font-size: 12.5px; color: #c0392b; margin: 6px 0 0; line-height: 1.5; display: none; }
.bh-form-err.is-shown { display: block; }
.bh-page__body .mw_wp_form input.is-invalid,
.bh-page__body .mw_wp_form textarea.is-invalid {
  border-color: #d9534f !important; background: #fdf6f6;
  box-shadow: 0 0 0 3px rgba(217,83,79,.10);
}
/* 入力前の補足通知 */
.bh-form-notice { background: #f2f8fb; border: 1px solid #cfe6f0; border-radius: 8px; padding: 14px 16px; margin: 0 0 22px; }
.bh-form-notice__item { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--bh-ink); line-height: 1.6; margin: 0 0 7px; }
.bh-form-notice__item svg { flex-shrink: 0; margin-top: 2px; }
.bh-form-notice__item:last-of-type { margin-bottom: 0; }
.bh-form-notice__note { font-size: 12px; color: var(--bh-sub); margin: 10px 0 0; line-height: 1.6; }
/* 事務所サイド */
.bh-form-side__card { background: #fff; border: 1px solid var(--bh-line); border-top: 3px solid var(--bh-navy); border-radius: 8px; padding: 18px; }
.bh-form-side__label { font-size: 11.5px; font-weight: 700; color: var(--bh-sub); margin: 0 0 6px; letter-spacing: .04em; }
.bh-form-side__office { font-size: 16px; font-weight: 700; color: var(--bh-ink); line-height: 1.5; margin: 0 0 12px; }
.bh-form-side__back { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--bh-navy); text-decoration: none; }
.bh-form-side__back:hover { color: var(--bh-cta); text-decoration: underline; }
/* #12 事務所情報サイド: 写真・住所・対応エリア・電話誘導 */
.bh-form-side__photo { margin: 0 0 12px; border-radius: 6px; overflow: hidden; border: 1px solid var(--bh-line); }
.bh-form-side__photo img { display: block; width: 100%; height: auto; }
.bh-form-side__row { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 12px; font-size: 12.5px; color: var(--bh-ink); line-height: 1.6; }
.bh-form-side__row svg { flex-shrink: 0; margin-top: 2px; }
.bh-form-side__area { margin: 0 0 12px; }
.bh-form-side__area-ttl { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--bh-sub); margin: 0 0 6px; }
.bh-form-side__arealist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bh-form-side__arealist li { list-style: none; }
.bh-form-side__arealist a { display: inline-block; font-size: 12px; color: var(--bh-navy); background: var(--bh-bg); border: 1px solid var(--bh-line); border-radius: 4px; padding: 3px 9px; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s; }
.bh-form-side__arealist a:hover { background: var(--bh-navy); color: #fff; border-color: var(--bh-navy); }
.bh-form-side__tel-wrap { margin: 0 0 14px; padding: 12px; background: var(--bh-bg); border-radius: 6px; }
.bh-form-side__tel { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 17px; font-weight: 700; color: var(--bh-navy); text-decoration: none; letter-spacing: .02em; }
.bh-form-side__telopen { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: var(--bh-sub); margin: 5px 0 0; }
/* フォームページの左右余白(SP)。.bh--page .bh-page の padding ショートハンド
   (左右0)に勝つよう詳細度を上げる。 */
.bh--page .bh-form-page { padding-left: var(--bh-pad); padding-right: var(--bh-pad); padding-top: 24px; }
/* 送信ボタンを大きめに(フォームの主CTA) */
.bh-page__body .mw_wp_form .btn-kit01 { font-size: 16px; padding: 16px 28px; }
@media (min-width: 900px) {
  .bh--page .bh-form-page { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 32px; align-items: start; max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; padding-top: 28px; }
}

/* =========================================================
 * #25 記事ページ「上へ戻る」ボタン
 *  - position:fixed で右下固定。初期は非表示(.is-visibleで表示)。
 *  - 記事は縦に長いため、一定量スクロールしたらJSで表示する。
 * ========================================================= */
.bh-totop {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--bh-navy); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(10,61,110,.35);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, transform .25s, visibility .25s, background-color .15s;
}
.bh-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.bh-totop:hover { background: var(--bh-acc); }
.bh-totop svg { display: block; }
@media (min-width: 900px) {
  .bh-totop { right: 28px; bottom: 28px; width: 52px; height: 52px; }
}

/* =========================================================
 * #30 記事フィルタ(カテゴリ記事一覧)
 *  article_topic 値を件数降順でボタン表示。横スクロール、件数バッジ、
 *  選択中ハイライト。JS(bh2026-ui.js)で data-topic に応じて即時絞り込み。
 * ========================================================= */
.bh-arc-filter {
  display: flex; gap: 8px; margin: 0 0 18px; padding: 2px 0 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bh-arc-filter::-webkit-scrollbar { display: none; }
.bh-arc-filter__btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--bh-line-strong); border-radius: 100px;
  background: #fff; color: var(--bh-ink); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s;
}
.bh-arc-filter__btn:hover { border-color: var(--bh-acc); color: var(--bh-acc); }
.bh-arc-filter__btn.is-active { background: var(--bh-navy); border-color: var(--bh-navy); color: #fff; }
.bh-arc-filter__count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px;
  padding: 0 5px; border-radius: 100px; background: var(--bh-bg); color: var(--bh-sub);
  font-size: 11px; font-weight: 700;
}
.bh-arc-filter__btn.is-active .bh-arc-filter__count { background: rgba(255,255,255,.25); color: #fff; }
.bh-arc-filter__empty { text-align: center; font-size: 13.5px; color: var(--bh-sub); padding: 28px 12px; margin: 0; }
.bh-arc-article[hidden] { display: none; }

/* =========================================================
 * 県×分野ページ下部の本文(the_content)スタイル
 *  the_content は <article.articleDetail><section.articleDetail__in> 内に
 *  素のh2/h3/p等で出力されCSS未適用だったため、SEOテキスト相当の
 *  読みやすいスタイルを当てる(.strongCont と同トーン)。
 * ========================================================= */
.bh-listbody__main .articleDetail { margin: 28px 0 0; }
.bh-listbody__main .articleDetail__in { font-size: 13.5px; line-height: 1.95; color: var(--bh-ink); background: #fff; border: 1px solid var(--bh-line); border-radius: 8px; padding: 22px 22px 24px; }
.bh-listbody__main .articleDetail__in > *:first-child { margin-top: 0; }
.bh-listbody__main .articleDetail__in h2 { font-size: 18px; font-weight: 700; color: var(--bh-ink); margin: 1.6em 0 .8em; padding-bottom: 10px; border-bottom: 2px solid var(--bh-line); position: relative; }
.bh-listbody__main .articleDetail__in h2:first-child { margin-top: 0; }
.bh-listbody__main .articleDetail__in h2:after { content: ""; position: absolute; left: 0; bottom: -2px; width: 56px; height: 2px; background: var(--bh-acc); }
.bh-listbody__main .articleDetail__in h3 { font-size: 14.5px; font-weight: 700; color: var(--bh-navy); margin: 1.5em 0 .5em; padding-left: 11px; border-left: 3px solid var(--bh-acc); line-height: 1.55; }
.bh-listbody__main .articleDetail__in h4 { font-size: 13.5px; font-weight: 700; color: var(--bh-ink); margin: 1.3em 0 .5em; }
.bh-listbody__main .articleDetail__in p { margin: 0 0 1em; }
.bh-listbody__main .articleDetail__in ul, .bh-listbody__main .articleDetail__in ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.bh-listbody__main .articleDetail__in li { margin: 0 0 .5em; line-height: 1.85; }
.bh-listbody__main .articleDetail__in a { color: var(--bh-acc); text-decoration: underline; }
.bh-listbody__main .articleDetail__in table { width: 100%; border-collapse: collapse; margin: .4em 0 1.2em; font-size: 13px; border: 1px solid var(--bh-line); }
.bh-listbody__main .articleDetail__in thead th { background: var(--bh-navy); color: #fff; font-weight: 700; text-align: left; padding: 11px 14px; }
.bh-listbody__main .articleDetail__in tbody th { background: var(--bh-bg); color: var(--bh-ink); font-weight: 700; text-align: left; padding: 11px 14px; border-top: 1px solid var(--bh-line); }
.bh-listbody__main .articleDetail__in tbody td { padding: 11px 14px; color: var(--bh-ink); border-top: 1px solid var(--bh-line); }

/* ============================================================
   404 ページ(bh2026)
   ============================================================ */
.bh-404 { max-width: 880px; margin: 0 auto; padding: 8px 16px 48px; }
.bh-404__hero { text-align: center; padding: 24px 0 8px; }
.bh-404__code { font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: .04em; color: var(--bh-navy); margin: 0; opacity: .14; }
.bh-404__title { font-size: 20px; font-weight: 700; color: var(--bh-ink); margin: 8px 0 12px; }
.bh-404__text { font-size: 13.5px; line-height: 1.9; color: var(--bh-sub); margin: 0 auto 22px; max-width: 560px; }
.bh-404__actions { display: flex; justify-content: center; }
.bh-404__home { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 14px 32px; }

.bh-404__section { margin-top: 32px; }
.bh-404__sectitle { font-size: 15px; font-weight: 700; color: var(--bh-navy); margin: 0 0 14px; padding-left: 11px; border-left: 4px solid var(--bh-acc); }
.bh-404__fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bh-404__field {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--bh-line-strong); border-radius: 8px;
  padding: 14px 16px; font-size: 14px; font-weight: 700; color: var(--bh-navy);
  transition: border-color .15s, background .15s;
}
.bh-404__field:hover { border-color: var(--bh-acc); background: var(--bh-bg); }
.bh-404__field svg { flex-shrink: 0; }

.bh-404__prefs { display: flex; flex-wrap: wrap; gap: 9px; }
.bh-404__pref {
  display: inline-block; background: #fff; border: 1px solid var(--bh-line-strong);
  border-radius: 6px; padding: 9px 18px; font-size: 14px; color: var(--bh-navy); font-weight: 600;
  transition: border-color .15s, color .15s, background .15s;
}
.bh-404__pref:hover { border-color: var(--bh-acc); color: var(--bh-acc); background: var(--bh-bg); }

@media (min-width: 768px) {
  .bh-404__code { font-size: 96px; }
  .bh-404__title { font-size: 24px; }
  .bh-404__fields { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   検索結果なし(事務所0件)— 404_2.php 用
   ============================================================ */
.bh-office--empty__actions { display: flex; justify-content: center; margin-top: 16px; }
.bh-office--empty__btn { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 13px 28px; }

.bh-emptynav { margin-top: 28px; }
.bh-emptynav__ttl { font-size: 15px; font-weight: 700; color: var(--bh-navy); margin: 0 0 14px; padding-left: 11px; border-left: 4px solid var(--bh-acc); }
.bh-emptynav__fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bh-emptynav__field {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--bh-line-strong); border-radius: 8px;
  padding: 13px 16px; font-size: 14px; font-weight: 700; color: var(--bh-navy);
  transition: border-color .15s, background .15s;
}
.bh-emptynav__field:hover { border-color: var(--bh-acc); background: var(--bh-bg); }
.bh-emptynav__field svg { flex-shrink: 0; }
@media (min-width: 768px) {
  .bh-emptynav__fields { grid-template-columns: repeat(3, 1fr); }
}