/* === (40) トップ / カテゴリ / 一覧 / 404 ==================================
   出所: Cocoon版 parts/h-toppage.css の書き起こし。
   **一覧カードは機械変換できない** —— Cocoonの .entry-card 系と Xwriteの
   .articleList / .xw-article-media 系は DOM が別物のため(解析§3)、
   同じ「行リスト」の見た目を Xwrite のクラスで組み直した。
   ========================================================================== */

/* --- ヒーロー(ヘッダー直下の全幅バンド)------------------------------------
   モック実測: 地#f4f7fb・中央寄せ・padding 26px 40px・内寸1256px */
.bk-heroband{ background:var(--tint); }
.bk-hero{ max-width:1256px; margin:0 auto; padding:26px 40px;
  display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; }
.bk-hero .t,
.bk-hero h1{ font-family:var(--font-head); font-size:26px; font-weight:800;
  color:var(--navy); line-height:1.5; margin:0; }
.bk-hero p{ margin:0; font-size:14.5px; line-height:1.85; color:#3c4654; max-width:64ch; }
.bk-hero p b{ color:var(--ink); }

/* --- セクションの器(モック: 白カード・padding 22/26・見出し19px+2px罫)------ */
.bk-sec{ background:#fff; border:1px solid var(--line); border-radius:var(--r-2);
  padding:22px 26px; margin:0 0 18px; }
.bk-sec > .h{ display:flex; align-items:baseline; gap:12px;
  border-bottom:2px solid var(--navy); padding-bottom:8px; margin:0 0 6px; }
.bk-sec > .h span{ font-family:var(--font-head); font-size:19px; font-weight:700; color:var(--navy); }
.bk-sec > .h small{ font-size:12.5px; color:var(--sub); }

/* --- まず読まれている比較記事(モック: grid 30px 1fr 210px・番号バッジ)------ */
.bk-pillars{ display:flex; flex-direction:column; }
.bk-pillar{ display:grid; grid-template-columns:30px 1fr 210px; gap:14px; align-items:center;
  padding:13px 0; border-bottom:1px solid var(--line2); text-decoration:none !important; }
.bk-pillar:last-child{ border-bottom:0; }
.bk-pillar:hover .ttl{ text-decoration:underline; }
.bk-pillar .no{ width:24px; height:24px; border-radius:50%; background:var(--sub); color:#fff;
  font-family:var(--font-head); font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; }
.bk-pillar:first-child .no{ background:var(--navy); }
.bk-pillar .ttl{ font-family:var(--font-head); font-size:16.5px; font-weight:700;
  color:var(--navy); line-height:1.5; }
.bk-pillar .meta{ font-size:12.5px; color:var(--sub); text-align:right;
  font-variant-numeric:tabular-nums; }

/* --- 記事一覧(Xwrite の .articleList を v2 の行リストへ)---------------------
   Cocoon版は .entry-card を grid("title meta"/"snippet meta")で行化していた。
   XwriteのDOMは articleList__item > a.xw-article-media > figure + __body(--title/--text/--extra)。
   サムネ(figure)は画像ゼロ則で隠してあるので、body側を2段組にして同じ見た目にする。 */
.bk-latest{ margin-bottom:0; border-bottom:0; border-radius:var(--r-2) var(--r-2) 0 0; padding-bottom:0; }
.bk-latest > .h{ margin-bottom:0; }
.articleListContainer{ background:#fff; border:1px solid var(--line); border-top:0;
  border-radius:0 0 var(--r-2) var(--r-2); padding:4px 24px 10px; margin-top:0; }
/* カテゴリ・検索・アーカイブは見出し行が無いので四辺の枠を持つ */
.archive .articleListContainer,
.search .articleListContainer{ border-top:1px solid var(--line); border-radius:var(--r-2); }

.articleList{ display:flex; flex-direction:column; gap:0; }
.articleList__item{ padding:0; border:0; background:transparent; }
.articleList__item .xw-article-media{ display:grid; grid-template-columns:1fr 150px;
  grid-template-areas:"title meta" "text meta"; gap:4px 16px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--line2); text-decoration:none !important; }
.articleList__item:last-child .xw-article-media{ border-bottom:0; }
.xw-article-media__body{ display:contents; }
.xw-article-media__body--title{ grid-area:title; font-family:var(--font-head); font-size:16px;
  font-weight:700; color:var(--navy); line-height:1.55; margin:0; }
.articleList__item a:hover .xw-article-media__body--title{ text-decoration:underline; }
.xw-article-media__body--text{ grid-area:text; font-size:13px; line-height:1.8; color:#3c4654; margin:0; }
.xw-article-media__body--extra,
.xw-article-media__body--main{ grid-area:meta; align-self:start; margin:0;
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  text-align:right; font-size:12px; color:var(--sub); line-height:1.9; }
.article-meta,
.article-date{ font-size:12px; color:var(--sub); }
/* 複数カテゴリが区切りなく連結して1語に見える事故(SP-08)の再発防止 */
.xw-article-media__body--extra .article-category,
.article-meta{ display:flex; flex-wrap:wrap; gap:8px; }

.bk-more{ display:inline-block; margin:14px 0 0; font-family:var(--font-head);
  font-size:14px; font-weight:700; color:var(--navy) !important; }

/* --- 記事メタ行(H1直下の1行)------------------------------------------------ */
.bk-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  font-size:12.5px; color:var(--sub);
  border-bottom:1px solid var(--line2); padding:0 0 12px; margin:0 0 var(--sp-5); }
.bk-meta .c{ background:var(--tint); border-radius:var(--r-1); padding:3px 9px;
  color:var(--navy) !important; font-weight:700; text-decoration:none !important; }
.bk-meta .aff-pr{ background:transparent; border:1px dashed var(--evid-line);
  border-radius:var(--r-1); padding:3px 8px; color:var(--evid-ink);
  font-size:12px; font-weight:700; margin:0 0 0 auto; text-align:left; }
/* Xwriteネイティブの記事メタ(日付・著者)は自前のメタ行に統合したので出さない */
.articleHeader__info{ display:none; }

/* --- カテゴリ一覧の冒頭(説明 + ピラー3本)-----------------------------------
   ネイティブの div.term-description(header.contentsHeader 内)へ流し込む。 */
.term-description{ margin:0; }
.bk-cathead{ background:#fff; border:1px solid var(--line); border-radius:var(--r-2);
  padding:18px 24px; margin:0 0 14px; }
.bk-cathead .d{ margin:0; font-size:14.5px; line-height:1.9; color:#3c4654; }
.bk-cathead .plinks{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.bk-cathead .plinks a{ display:inline-block; background:var(--navy-tint); color:var(--navy) !important;
  border:1px solid #c3d5e8; border-radius:20px; padding:6px 14px;
  font-family:var(--font-head); font-size:13px; font-weight:700; text-decoration:none !important; }
.bk-cathead .plinks a:hover{ background:var(--navy); color:#fff !important; }

/* --- 404(復帰導線)---------------------------------------------------------
   Cocoon版は 404-page ウィジェットエリアへ custom_html を投入していた。
   Xwriteでは 404.php に直書きしたので、その分の見た目をここで持つ。 */
.bk-404 .notfound__body--column .title{ font-family:var(--font-head); font-size:var(--fs-h1);
  font-weight:700; color:var(--navy); }
.bk-404 .notfound__body--column .desc{ font-size:var(--fs-body); color:var(--ink); margin-top:8px; }
.bk-404-nav{ margin-top:18px; border:1px solid var(--line); border-radius:var(--r-3);
  background:#fbfcfd; padding:18px 20px; }
.bk-404-h{ margin:0 0 10px; font-family:var(--font-head); font-weight:700; color:var(--navy); }
.bk-404-list{ margin:0 0 14px; padding-left:1.2em; color:var(--ink); }
.bk-404-list li{ margin:4px 0; }
.bk-404-list a{ color:var(--navy); }
.bk-404-search{ display:flex; gap:8px; margin:0 0 10px; }
.bk-404-search input{ flex:1; border:1px solid var(--line); border-radius:var(--r-2);
  padding:8px 12px; font-size:14px; background:#fff; color:var(--ink); }
.bk-404-search button{ border:0; border-radius:var(--r-2); padding:8px 16px;
  background:var(--navy); color:#fff; font-size:14px; cursor:pointer; }
.bk-404-home{ margin:0; font-size:13px; }
.bk-404-home a{ color:var(--sub); }