/* === (30) chrome(ヘッダー / フッター / サイドバー)========================
   出所: Cocoon版 parts/f-chrome.css + i-sidebar.css。
   Cocoon版にあった「純正chromeを display:none にする」打ち消し
   (#header-container / #navi / .footer)は**移していない** —— Xwriteでは
   header.php / footer.php / sidebar.php を上書きして最初から1本しか出さないため
   打ち消す相手が存在しない(解析§1でテンプレ上書きが効くと確定)。
   サイドバーのセレクタは #sidebar → .side(解析§3の実クラス)へ改名。
   ========================================================================== */

/* --- ヘッダー -------------------------------------------------------------
   実寸はモック(オーソドックス): 高さ66px・内寸1256px・padding 0 22px・gap 30px */
.site-header{ font-family:var(--font-body); }
.site-header .sh-bar{ background:#fff; border-bottom:1px solid var(--line); }
.site-header .sh-in{ max-width:1256px; margin:0 auto; display:flex; align-items:center;
  gap:30px; padding:0 22px; height:66px; }
.site-header .sh-logo{ margin:0; font-size:inherit; font-weight:inherit; line-height:1.2; }
.site-header .sh-logo a{ display:flex; align-items:center; text-decoration:none; }
.site-header .sh-txt{ display:flex; flex-direction:column; gap:1px; }
.site-header .sh-name{ font-family:var(--font-head); font-weight:900; font-size:18px;
  color:var(--navy); line-height:1.15; white-space:nowrap; }
.site-header .sh-sub{ font-family:var(--font-body); font-size:10.5px; color:var(--sub);
  letter-spacing:.02em; white-space:nowrap; }
/* ナビは本文書体の500(見出し書体700で組むのはモックと不一致) */
.site-header .sh-nav{ display:flex; align-items:center; gap:24px;
  font-family:var(--font-body); font-weight:500; font-size:14px; }
.site-header .sh-nav a{ color:#3c4654; font-weight:500; text-decoration:none;
  padding-bottom:3px; white-space:nowrap; }
.site-header .sh-nav a:hover{ color:var(--navy); }
.site-header .sh-nav a.active{ color:var(--navy); font-weight:700; border-bottom:2px solid var(--navy); }
/* 検索: 実働する form。見た目はモックのピル(アイコン+プレースホルダ・ボタンなし)。送信はEnter */
.site-header .sh-search{ margin-left:auto; display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:20px; padding:8px 14px; width:190px;
  background:transparent; color:#8a939f; font-size:13px; }
.site-header .sh-search:focus-within{ border-color:var(--navy); }
.site-header .sh-search .ic{ position:relative; display:inline-block; width:12px; height:12px;
  border:2px solid #8a939f; border-radius:50%; flex:0 0 auto; }
.site-header .sh-search .ic::after{ content:""; position:absolute; right:-3px; bottom:-2px;
  width:6px; height:2px; background:#8a939f; transform:rotate(45deg); }
.site-header .sh-search input[type="search"]{ border:0; outline:0; background:transparent;
  font-family:var(--font-body); font-size:13px; color:var(--ink); width:100%; min-height:0; padding:0; }
.site-header .sh-search input[type="search"]::placeholder{ color:#8a939f; }
/* SPメニューの開閉状態(チェックボックス)。PCではボタンごと隠す */
.site-header .bk-menu-state{ position:absolute; opacity:0; pointer-events:none; }
.site-header .bk-menu-btn{ display:none; font-size:16px; color:var(--sub); cursor:pointer;
  line-height:1; user-select:none; }

/* --- フッター -------------------------------------------------------------- */
.site-footer{ font-family:var(--font-body); background:var(--navy-dk); color:#cfd8e3; }
.site-footer .sf-in{ max-width:1256px; margin:0 auto; padding:22px 40px 14px;
  display:flex; gap:40px; flex-wrap:wrap; }
.site-footer .sf-brand{ flex:1.4; min-width:240px; }
.site-footer .sf-logo{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.site-footer .sf-name{ font-family:var(--font-head); font-weight:900; font-size:16px; color:#fff; }
.site-footer .sf-desc{ font-size:12px; line-height:1.8; color:#9fb0c4; max-width:300px; }
.site-footer .sf-col{ flex:1; min-width:140px; }
.site-footer .sf-ct{ font-family:var(--font-head); font-weight:700; font-size:13px; color:#fff; margin-bottom:12px; }
.site-footer .sf-list{ display:flex; flex-direction:column; gap:9px; font-size:12px; }
.site-footer .sf-list a{ color:#9fb0c4; text-decoration:none; }
.site-footer .sf-list a:hover{ color:#fff; }
.site-footer .sf-bottom{ border-top:1px solid #1e4368; }
.site-footer .sf-bottom-in{ max-width:1256px; margin:0 auto; padding:12px 40px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:11px; color:#7f93aa; }

/* --- サイドバー ------------------------------------------------------------
   色はすべてトークン経由(旧版は #1890ff/#52c41a/#f5222d をインライン直書きしており
   「緑は .aff-cta だけ」の決定に反していた)。 */
.side .side-card,
.side .side-cta{ background:#fff; border:1px solid var(--line); border-radius:var(--r-2);
  margin-bottom:14px; overflow:hidden; padding:14px 16px; }
.side .sc-h{ font-family:var(--font-head); font-size:14px; font-weight:700; color:var(--navy);
  border-bottom:1px solid var(--line2); padding:0 0 8px; margin-bottom:4px; }

/* カテゴリ(件数つき) / 主要比較ナビ */
.side .side-cats,
.side .side-nav-list{ display:flex; flex-direction:column; padding:0; }
.side .side-cats a,
.side .side-nav-list a{ display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; padding:8px 0; border-bottom:1px solid var(--line2);
  font-size:13.5px; text-decoration:none !important; }
.side .side-cats a:last-child,
.side .side-nav-list a:last-child{ border-bottom:0; }
.side .side-cats a{ color:#3c4654 !important; }
.side .side-cats a b{ font-family:var(--font-head); font-size:12px; font-weight:700;
  color:var(--sub); font-variant-numeric:tabular-nums; }
.side .side-cats a b::before{ content:"（"; }
.side .side-cats a b::after{ content:"）"; }
.side .side-nav-list a{ color:var(--navy) !important; font-weight:700; }
.side .side-cats a:hover,
.side .side-nav-list a:hover{ text-decoration:underline !important; }

/* 制度対応スケジュール —— バッジはブランド内の2色だけ */
.side .side-sched{ display:flex; flex-direction:column; gap:14px; padding:8px 0 0; }
.side .side-sched .item{ display:flex; flex-direction:column; gap:3px; }
.side .side-sched .tag{ align-self:flex-start; font-family:var(--font-head);
  font-size:11px; font-weight:700; border-radius:var(--r-1); padding:2px 7px; }
.side .side-sched .tag-invoice{ background:var(--evid-bg); color:var(--evid-ink);
  border:1px solid var(--evid-line); }
.side .side-sched .tag-denchoho{ background:var(--navy-tint); color:var(--navy);
  border:1px solid #c3d5e8; }
.side .side-sched .t{ font-size:13px; font-weight:700; color:var(--ink); line-height:1.6; }
.side .side-sched .d{ font-size:12px; color:var(--sub); line-height:1.6; }

/* 運営者情報 */
.side .side-about{ display:flex; flex-direction:column; gap:6px; padding:8px 0 0; }
.side .side-about .n{ font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--ink); }
.side .side-about .d{ font-size:12.5px; line-height:1.75; color:#3c4654; }
.side .side-about .d b{ color:var(--evid-ink); }

/* 広告枠 */
.side .side-cta{ display:flex; flex-direction:column; gap:7px; }
.side .side-cta .k{ font-size:11px; color:var(--sub); line-height:1.5; }
.side .side-cta .n{ font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--navy); line-height:1.45; }
.side .side-cta .d{ font-size:12.5px; color:#3c4654; line-height:1.7; }
.side .side-cta .aff-cta{ margin-top:3px; font-size:13.5px; min-height:42px; }
.side .side-cta .pr{ font-size:var(--fs-label); color:var(--sub); }