/* ==========================================================================
   column.css
   コラム一覧と記事詳細。サイドバー・目次・記事カードを含む。
   ========================================================================== */

/* ---------- パンくず（記事）（出典 preview/column-single.html） ---------- */
.crumbs{border-bottom:var(--rule);background:var(--c-paper)}
.crumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs);
  padding-block:var(--space-xs);font-size:var(--text-xs);color:var(--c-ink-3)}
.crumbs__list a{color:var(--c-ink-3);text-decoration:none;white-space:nowrap}
.crumbs__list a:hover{color:var(--c-navy);text-decoration:underline}
.crumbs__sep{color:var(--c-paper-3)}
.crumbs__current{color:var(--c-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22em}

/* ---------- 記事ヘッダー（出典 preview/column-single.html） ---------- */
.entry{padding-block:var(--space-xl) var(--space-4xl)}
.entry__head{max-width:var(--w-prose);margin-bottom:var(--space-xl)}
.entry__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}
.tag{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;
  color:var(--c-brass);border:1px solid rgba(140,109,31,.4);border-radius:var(--radius-sm);
  padding:3px var(--space-2xs);line-height:1.4;text-decoration:none;white-space:nowrap}
.tag:hover{background:rgba(140,109,31,.08);color:var(--c-brass)}
.entry__dates{display:flex;gap:var(--space-sm);font-size:var(--text-xs);color:var(--c-ink-3)}
.entry__title{font-size:var(--text-3xl)}
.entry__lead{margin-top:var(--space-md);color:var(--c-ink-2);font-size:var(--text-lg);line-height:1.85}

/* ---------- 本文＋サイドバー（出典 preview/column-single.html） ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--space-2xl);align-items:start}
/* 1100px未満で1カラム。1024pxで切ると本文が1行34文字まで詰まり、日本語では読みにくくなる */
@media (max-width:1100px){.layout{grid-template-columns:minmax(0,1fr);gap:var(--space-2xl)}}

/* ---------- 目次（出典 preview/column-single.html） ---------- */
.toc-m{border:var(--rule);border-radius:var(--radius-md);background:#fdfefe;margin-bottom:var(--space-xl)}
.toc-m__btn{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
  width:100%;min-height:52px;padding:0 var(--space-md);background:transparent;border:0;cursor:pointer;
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:700;color:var(--c-ink);line-height:1}
.toc-m__btn svg{width:18px;height:18px;flex:none;color:var(--c-ink-3)}
.toc-m__btn[aria-expanded=true] svg{transform:rotate(180deg)}
.toc-m__body{padding:0 var(--space-md) var(--space-md)}
.toc-m__btn[aria-expanded=false]+.toc-m__body{display:none}
.toc-m ol{counter-reset:t}
.toc-m li+li{margin-top:var(--space-2xs)}
.toc-m a{display:block;font-size:var(--text-sm);color:var(--c-ink-2);text-decoration:none;line-height:1.65}
.toc-m a:hover{color:var(--c-navy);text-decoration:underline}
@media (min-width:1101px){.toc-m{display:none}}

/* ---------- サイドバー（出典 preview/column-single.html） ---------- */
.side{display:grid;gap:var(--space-lg);position:sticky;top:calc(var(--header-h) + var(--space-md));z-index:var(--z-sticky)}
@media (max-width:1100px){.side{position:static;max-width:var(--w-prose)}}
.widget{border:var(--rule);border-radius:var(--radius-md);background:#fdfefe;padding:var(--space-md)}
.widget__title{font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-brass);
  padding-bottom:var(--space-2xs);border-bottom:var(--rule);margin-bottom:var(--space-sm)}
/* 追従目次（デスクトップのみ） */
.toc-d{max-height:calc(100vh - var(--header-h) - 220px);overflow-y:auto}
.toc-d li+li{margin-top:2px}
.toc-d a{display:block;font-size:var(--text-sm);line-height:1.55;color:var(--c-ink-3);text-decoration:none;
  padding:6px 0 6px var(--space-xs);border-left:2px solid var(--c-paper-3);
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.toc-d a:hover{color:var(--c-navy)}
.toc-d a[aria-current=true]{color:var(--c-navy-900);font-weight:700;border-left-color:var(--c-brass)}
@media (max-width:1100px){.toc-d{display:none}}
.wpost li+li{margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:var(--rule)}
.wpost a{display:block;font-family:var(--font-display);font-size:var(--text-sm);line-height:1.65;color:var(--c-ink);text-decoration:none;font-weight:700}
.wpost a:hover{color:var(--c-navy)}
.wpost__cat{display:block;font-size:var(--text-xs);color:var(--c-brass);font-weight:700;margin-bottom:2px}
.wcat li+li{margin-top:var(--space-2xs)}
.wcat a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2xs);
  font-size:var(--text-sm);color:var(--c-ink-2);text-decoration:none;line-height:1.6}
.wcat a:hover{color:var(--c-navy)}
.wcat .count{font-size:var(--text-xs);color:var(--c-ink-3);font-variant-numeric:tabular-nums}
.wbanner{border-radius:var(--radius-md);padding:var(--space-md);background:var(--c-navy-900);color:var(--c-paper)}
.wbanner__label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-brass-bright)}
.wbanner__title{margin-top:var(--space-3xs);font-family:var(--font-display);font-size:var(--text-lg);line-height:1.45}
.wbanner__desc{margin-top:var(--space-2xs);font-size:var(--text-xs);color:#c2d3e2;line-height:1.75}
.wbanner .btn{margin-top:var(--space-sm)}

/* ---------- 一覧：ページヘッダー（出典 preview/column-archive.html） ---------- */
.phead{padding-block:var(--space-xl) var(--space-lg)}
.eyebrow{display:block;font-size:var(--text-sm);font-weight:700;letter-spacing:.14em;
  color:var(--c-brass);margin-bottom:var(--space-2xs)}
.phead__title{font-size:var(--text-3xl)}
.phead__lead{margin-top:var(--space-md);max-width:62ch;color:var(--c-ink-2)}

/* ---------- 一覧：カテゴリチップ（出典 preview/column-archive.html） ---------- */
.cats{border-bottom:var(--rule)}
/* 横スクロールにすると画面外のカテゴリが存在に気づかれない。折り返しで全部見せる */
.cats__list{display:flex;flex-wrap:wrap;gap:var(--space-2xs);padding-block:var(--space-sm)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 var(--space-xs);
  font-size:var(--text-sm);font-weight:500;color:var(--c-ink-2);text-decoration:none;
  white-space:nowrap;line-height:1;border:1px solid var(--c-paper-3);border-radius:var(--radius-sm);
  background:#fdfefe;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.chip:hover{color:var(--c-navy);border-color:var(--c-navy-600)}
.chip[aria-current=page]{background:var(--c-navy);color:var(--c-accent-ink);border-color:var(--c-navy);font-weight:700}
.chip .n{font-size:var(--text-xs);color:var(--c-ink-3);font-variant-numeric:tabular-nums}
.chip[aria-current=page] .n{color:#c2d3e2}

/* ---------- 一覧：本体（出典 preview/column-archive.html） ---------- */
.body{padding-block:var(--space-xl) var(--space-4xl)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--space-2xl);align-items:start}
@media (max-width:1100px){.layout{grid-template-columns:minmax(0,1fr)}}

/* ---------- 一覧：注目記事（出典 preview/column-archive.html） ---------- */
.feature{border:var(--rule);border-top:2px solid var(--c-brass);border-radius:var(--radius-md);
  background:#fdfefe;padding:var(--space-lg);margin-bottom:var(--space-xl);
  transition:border-color var(--dur-base) var(--ease-out)}
.feature:hover{border-color:var(--c-navy-600);border-top-color:var(--c-brass)}
.feature__label{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:700;
  letter-spacing:.1em;color:var(--c-brass);margin-bottom:var(--space-sm)}
.feature__title{font-size:var(--text-2xl);margin-top:var(--space-2xs)}
.feature__title a{color:var(--c-ink);text-decoration:none}
.feature:hover .feature__title a{color:var(--c-navy)}
.feature__excerpt{margin-top:var(--space-sm);color:var(--c-ink-2);font-size:var(--text-sm);line-height:1.85}
.feature__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);margin-top:var(--space-md)}

.tag{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;
  color:var(--c-brass);border:1px solid rgba(140,109,31,.4);border-radius:var(--radius-sm);
  padding:3px var(--space-2xs);line-height:1.4;text-decoration:none;white-space:nowrap}
.tag:hover{background:rgba(140,109,31,.08);color:var(--c-brass)}
.date{font-size:var(--text-xs);color:var(--c-ink-3);font-variant-numeric:tabular-nums}

/* ---------- 一覧：記事カード（出典 preview/column-archive.html） ---------- */
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--space-md)}
.pcard{display:flex;flex-direction:column;gap:var(--space-2xs);
  border:var(--rule);border-radius:var(--radius-md);background:#fdfefe;padding:var(--space-md);
  transition:border-color var(--dur-base) var(--ease-out)}
.pcard:hover{border-color:var(--c-navy-600)}
.pcard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs)}
.pcard__title{font-size:var(--text-base);margin-top:var(--space-3xs)}
.pcard__title a{color:var(--c-ink);text-decoration:none}
.pcard:hover .pcard__title a{color:var(--c-navy)}
.pcard__excerpt{font-size:var(--text-sm);color:var(--c-ink-3);line-height:1.8;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.pcard__more{margin-top:auto;padding-top:var(--space-sm)}

/* ---------- 一覧：ページ送り（出典 preview/column-archive.html） ---------- */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2xs);
  margin-top:var(--space-2xl)}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 var(--space-xs);font-size:var(--text-sm);font-weight:700;
  line-height:1;border:1px solid var(--c-paper-3);border-radius:var(--radius-sm);
  background:#fdfefe;color:var(--c-ink-2);text-decoration:none;font-variant-numeric:tabular-nums;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.pager a:hover{color:var(--c-navy);border-color:var(--c-navy-600)}
.pager [aria-current=page]{background:var(--c-navy);color:var(--c-accent-ink);border-color:var(--c-navy)}
.pager .dots{border:0;background:transparent;color:var(--c-ink-3);min-width:24px}

/* ---------- 一覧：サイドバー（出典 preview/column-archive.html） ---------- */
.side{display:grid;gap:var(--space-lg);position:sticky;top:calc(var(--header-h) + var(--space-md));z-index:var(--z-sticky)}
@media (max-width:1100px){.side{position:static;max-width:var(--w-prose)}}
.widget{border:var(--rule);border-radius:var(--radius-md);background:#fdfefe;padding:var(--space-md)}
.widget__title{font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-brass);
  padding-bottom:var(--space-2xs);border-bottom:var(--rule);margin-bottom:var(--space-sm)}
.wpost li+li{margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:var(--rule)}
.wpost a{display:block;font-family:var(--font-display);font-size:var(--text-sm);line-height:1.65;
  color:var(--c-ink);text-decoration:none;font-weight:700}
.wpost a:hover{color:var(--c-navy)}
.wpost__cat{display:block;font-family:var(--font-body);font-size:var(--text-xs);color:var(--c-brass);font-weight:700;margin-bottom:2px}
.wcat li+li{margin-top:var(--space-2xs)}
.wcat a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2xs);
  font-size:var(--text-sm);color:var(--c-ink-2);text-decoration:none;line-height:1.6}
.wcat a:hover{color:var(--c-navy)}
.wcat .count{font-size:var(--text-xs);color:var(--c-ink-3);font-variant-numeric:tabular-nums}
.wbanner{border-radius:var(--radius-md);padding:var(--space-md);background:var(--c-navy-900);color:var(--c-paper)}
.wbanner__label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--c-brass-bright)}
.wbanner__title{margin-top:var(--space-3xs);font-family:var(--font-display);font-size:var(--text-lg);line-height:1.45}
.wbanner__desc{margin-top:var(--space-2xs);font-size:var(--text-xs);color:#c2d3e2;line-height:1.75}
.wbanner .btn{margin-top:var(--space-sm)}

/* ---------- 目次の階層 ----------
   h2 と h3 の2階層まで。h3 は字下げして親子を示す。
   クラス名を .toc__ にしないのは、資料請求ページの .toc（資料の目次）と
   ぶつかって読み違えるのを避けるため。 */
.toclv2{ padding-left:0 }
.toclv3{ padding-left:var(--space-md) }
.toclv3 > a{ font-size:var(--text-xs); color:var(--c-ink-3) }

/* ---------- サイドバーの無料相談バナー ----------
   資料請求バナー（.wbanner）は紺地。こちらは紙地にして主従を付ける。 */
.wbanner--contact{ background:var(--c-paper-2); color:var(--c-ink); border:var(--rule) }
.wbanner--contact .wbanner__label{ color:var(--c-brass) }
.wbanner--contact .wbanner__title{ color:var(--c-navy-900) }
.wbanner--contact .wbanner__desc{ color:var(--c-ink-2) }

/* ---------- WordPress のページ送りが出す入れ物 ----------
   the_posts_pagination() は .navigation.pagination で包んで出すため、
   プレビューで作った .pager の見た目をこちらにも当てる。 */
.navigation.pagination{ margin-top:var(--space-2xl) }
.navigation.pagination .nav-links{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2xs) }
.navigation.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding-inline:var(--space-2xs);
  font-size:var(--text-sm); font-variant-numeric:tabular-nums;
  color:var(--c-ink-2); text-decoration:none;
  border:1px solid var(--c-paper-3); border-radius:var(--radius-sm);
  background:var(--c-surface);
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.navigation.pagination a.page-numbers:hover{ color:var(--c-navy); border-color:var(--c-navy) }
.navigation.pagination .page-numbers.current{ color:var(--c-accent-ink); background:var(--c-navy); border-color:var(--c-navy) }
.navigation.pagination .page-numbers.dots{ border-color:transparent; background:transparent; min-width:24px }