@charset "UTF-8";
/* ================================================================
   20-chrome — ヘッダー / ナビ / パンくず / フッター
   正本 tokens.css §3・§14 をそのまま置き、キャンバスにしかない要素
   (タグライン・SPドロワー・フッター3列・広告表記)を素の値で足す。
   ================================================================ */

/* ---------- 3. HEADER / NAV ---------- */
.bk-header{ background: var(--bk-surface); border-bottom: 1px solid var(--bk-line); }
.bk-header__inner{
  max-width: 1120px; margin: 0 auto; padding: 0 var(--bk-gutter);
  height: 72px; display: flex; align-items: center; justify-content: space-between;
}
.bk-logo{ font-size: 22px; font-weight: 700; letter-spacing: .02em; color: var(--bk-ink); }
.bk-nav{ display: flex; align-items: center; gap: 26px; font-size: 14.5px; }
.bk-nav a{ color: var(--bk-ink); }
.bk-nav a[aria-current="page"]{
  color: var(--bk-brand); font-weight: 700;
  border-bottom: 2px solid var(--bk-brand); padding-bottom: 3px;
}

/* ロゴ + タグライン(キャンバス: baseline揃え・gap 12px・12px --ink-3) */
.bk-brandline{ display: flex; align-items: baseline; gap: var(--bk-s3); min-width: 0; }
.bk-logo a{ color: inherit; }
.bk-logo a:hover{ color: var(--bk-brand); text-decoration: none; }
.bk-tagline{ font-size: 12px; color: var(--bk-ink-3); white-space: nowrap; }

/* ナビ末尾の「編集部について」だけ枠付きチップ(キャンバス トップPC) */
.bk-nav .bk-nav__about{
  font-size: 13px; color: var(--bk-ink-2);
  border: 1px solid var(--bk-line); padding: 7px 13px; border-radius: var(--bk-r1);
}
.bk-nav .bk-nav__about:hover{ border-color: var(--bk-brand); color: var(--bk-brand); text-decoration: none; }

/* SPドロワー(チェックボックス方式・JSなし)。PCでは完全に出さない */
.bk-drawer__state{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bk-burger{ display: none; flex-direction: column; gap: 5px; padding: 8px 4px; cursor: pointer; }
.bk-burger span{ display: block; width: 22px; height: 1.5px; background: var(--bk-ink); }
.bk-drawer{ display: none; }
/* サブナビは SP 専用部品(キャンバス トップ/SP)。既定は出さない。
   ※ この宣言は下の @media より前に置くこと(後ろだと全幅で勝ってしまう) */
.bk-subnav{ display: none; }

@media (max-width: 782px){
  .bk-header__inner{ height: 56px; }
  .bk-logo{ font-size: 19px; }
  .bk-nav{ display: none; }
  /* SP はロゴ下に横スクロールのカテゴリ帯 */
  .bk-subnav{
    display: flex; gap: 18px; padding: 0 var(--bk-gutter);
    background: var(--bk-surface); border-bottom: 1px solid var(--bk-line);
    overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 14px;
  }
  .bk-subnav a{ padding: 13px 0; white-space: nowrap; color: var(--bk-ink-2); }
  .bk-subnav a[aria-current="page"]{
    color: var(--bk-ink); font-weight: 700; border-bottom: 2px solid var(--bk-brand);
  }
}

@media (max-width: 782px){
  .bk-burger{ display: flex; }
  .bk-tagline{ display: none; }
  .bk-drawer{
    display: block; max-height: 0; overflow: hidden;
    background: var(--bk-surface); border-bottom: 0 solid var(--bk-line);
    transition: max-height .18s ease;
  }
  .bk-drawer__state:checked ~ .bk-drawer{ max-height: 480px; border-bottom-width: 1px; }
  .bk-drawer__list{ display: flex; flex-direction: column; padding: 4px var(--bk-gutter) 12px; }
  .bk-drawer__list a{
    padding: 12px 0; font-size: 15px; color: var(--bk-ink);
    border-bottom: 1px solid var(--bk-line-soft);
  }
  .bk-drawer__list a:last-child{ border-bottom: 0; }
}

/* ---------- パンくず(Xwriteネイティブ ul.breadcrumbs をキャンバスへ寄せる) ---------- */
.bk-breadcrumb .breadcrumbs,
.breadcrumbs{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--bk-s2);
  margin: 0; padding: 0; list-style: none;
  font-size: var(--bk-fs-micro); line-height: 1.7; color: var(--bk-ink-3);
}
.breadcrumbs > li{ font-size: var(--bk-fs-micro); color: var(--bk-ink-3); }
.breadcrumbs > li a{ color: var(--bk-ink-3); }
.breadcrumbs > li a:hover{ color: var(--bk-brand); }
/* 親の回転四角セパレータを外して「／」に替える */
.breadcrumbs > li::before{
  content: "／"; display: inline; width: auto; height: auto;
  border: 0; transform: none; margin: 0 var(--bk-s2) 0 0; color: var(--bk-ink-3);
}
.breadcrumbs > li:first-of-type::before{ display: none; }
.breadcrumbs i, .breadcrumbs svg{ display: none; }

/* ---------- 14. フッター（広告表記を常設） ---------- */
.bk-footer{ background: var(--bk-footer-bg); padding: 44px var(--bk-gutter) 30px; }
.bk-footer__inner{ max-width: 1120px; margin: 0 auto; }
.bk-footer a{ color: var(--bk-footer-ink); }
.bk-footer a:hover{ color: #fff; }
.bk-footer__brand{ font-size: 18px; font-weight: 700; color: var(--bk-bg); }
.bk-footer__lead{ font-size: 13px; line-height: 1.85; color: var(--bk-footer-mute); max-width: 340px; }
.bk-ad-disclosure{
  border-top: 1px solid var(--bk-footer-line); margin-top: var(--bk-s5); padding-top: 20px;
  font-size: var(--bk-fs-micro); line-height: 1.85; color: var(--bk-footer-mute); max-width: 840px;
}
.bk-copyright{ font-family: var(--bk-font-num); font-size: 11.5px; color: var(--bk-ink-3); margin-top: var(--bk-s3); }

/* --- フッターの内部構造(キャンバス トップPC = 全部入り / 記事・カテゴリ = 1行版) --- */
.bk-footer__top{ display: flex; justify-content: space-between; gap: var(--bk-s7); }
.bk-footer__brandcol{ display: flex; flex-direction: column; gap: 10px; }
.bk-footer__cols{ display: flex; gap: 56px; font-size: 13.5px; color: var(--bk-footer-ink); line-height: 2; }
.bk-footer__col{ display: flex; flex-direction: column; }
.bk-footer__ct{ color: var(--bk-ink-3); font-size: 12px; margin-bottom: 6px; }
.bk-footer__row{ display: flex; flex-wrap: wrap; gap: 36px; font-size: 13.5px; color: var(--bk-footer-ink); }
.bk-footer__row .bk-footer__brand{ font-size: 13.5px; }
.bk-footer__bottom{ display: block; }   /* 罫と余白は .bk-ad-disclosure / .bk-copyright が持つ */
.bk-ad-disclosure p{ margin: 0; }
.bk-ad-disclosure__std{ margin-top: 6px !important; }

@media (max-width: 782px){
  .bk-footer{ padding: 28px var(--bk-gutter); }
  .bk-footer__top{ flex-direction: column; gap: 18px; }
  .bk-footer__cols{ flex-wrap: wrap; gap: var(--bk-s2) 18px; line-height: 1.9; font-size: 13px; }
  .bk-footer__col{ flex-direction: row; flex-wrap: wrap; gap: var(--bk-s2) 18px; }
  .bk-footer__ct{ display: none; }
  .bk-footer__row{ gap: var(--bk-s2) 18px; font-size: 13px; }
  .bk-footer__lead{ max-width: none; }
  .bk-ad-disclosure{ font-size: 11.5px; padding-top: 16px; margin-top: var(--bk-s4); }
  .bk-copyright{ font-size: 11px; }
}