/* ===== コラム記事詳細 =====
   デザインの正 ＝ 支給カンプ コラム/セクション１〜3.png（2026-08-25 受領） */
.kb-article{
  /* カンプ実測(1440px)：カード x=80..1380 → 1300px。本文インセット 左142 / 右150 */
  --kb-a-max:var(--kb-page-max);
  --kb-a-inset:clamp(1.25rem, 10vw, 145px);  /* カンプ実測 */
  /* カンプ実測：1440px 時にカード枠が x=83..1377（幅約1294）。左右マージン約5.5vw */
  /* Astra の .ast-container が flex のため、width:100% が無いと中身の幅に縮む */
  width:100%;
  max-width:calc(var(--kb-a-max) + 2 * var(--kb-gutter));
  margin:0 auto;
  padding:clamp(1.5rem,4vw,2.5rem) var(--kb-gutter) clamp(4rem,8vw,7rem);
  font-family:var(--kb-font-jp);
  color:var(--kb-text);
}

/* パンくず */
.kb-article__crumbs{
  font-size:.72rem; letter-spacing:.08em; color:var(--kb-text-soft);
  margin-bottom:clamp(1.5rem,4vw,2.75rem);
}
.kb-article__crumbs a{ color:inherit; text-decoration:none; }
.kb-article__crumbs a:hover{ color:var(--kb-link); }
.kb-article__sep{ margin:0 .5em; color:var(--kb-text-mute); }
.kb-article__crumb-current{ color:var(--kb-text-mute); }

/* 日付＋カテゴリ／タイトル */
.kb-article__head{ text-align:center; margin-bottom:clamp(2rem,5vw,3.25rem); }
.kb-article__meta{
  display:flex; align-items:center; justify-content:center;
  gap:1.25rem; margin-bottom:1.1rem; flex-wrap:wrap;
}
.kb-article__date{ font-size:.82rem; letter-spacing:.14em; color:var(--kb-text-soft); font-variant-numeric:tabular-nums; }
.kb-article__pill{
  display:inline-block; border:1px solid var(--kb-rule); border-radius:999px;
  padding:.35em 1.35em; font-size:.72rem; letter-spacing:.16em;
  color:var(--kb-text-soft); text-decoration:none; transition:border-color .3s ease, color .3s ease;
}
.kb-article__pill:hover{ border-color:var(--kb-link); color:var(--kb-link); }
.kb-article__title{
  font-size:clamp(1.5rem,3.4vw,2.1rem); font-weight:500;
  letter-spacing:.1em; line-height:1.7; margin:0;
}

/* 本文カード */
.kb-article__card{ border:1px solid var(--kb-rule); background:transparent; }
.kb-article__body{
  padding:clamp(2.5rem,7vw,6.5rem) var(--kb-a-inset);
  font-size:.94rem; line-height:2.5; letter-spacing:.05em; color:var(--kb-text-soft);
}
.kb-article__body > *:first-child{ margin-top:0; }
.kb-article__body > *:last-child{ margin-bottom:0; }
.kb-article__body p{ margin:0 0 1.9em; }
.kb-article__body h2,
.kb-article__body h3{
  color:var(--kb-text); font-weight:500; letter-spacing:.1em; line-height:1.8;
  margin:3em 0 1.2em;
}
.kb-article__body h2{ font-size:1.25rem; }
.kb-article__body h3{ font-size:1.08rem; }
.kb-article__body img{ display:block; max-width:100%; height:auto; }
.kb-article__body figure{ margin:2.6em 0; }
.kb-article__body figcaption{ font-size:.72rem; color:var(--kb-text-mute); margin-top:.8em; letter-spacing:.06em; }
.kb-article__body a{ color:var(--kb-link); }

/* 記事送り */
.kb-article__nav{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1.5rem; margin-top:clamp(2.5rem,6vw,4.5rem);
}
.kb-article__nav-side{ display:flex; align-items:center; gap:1.1rem; min-width:0; }
.kb-article__nav-side--next{ justify-content:flex-end; }
/* 丸ボタンは kurobo-tokens.css の .kb-round に統合（テンプレート側のクラス名も変更済み） */
.kb-article__nav-title{
  font-size:.8rem; letter-spacing:.08em; color:var(--kb-text-soft); text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kb-article__nav-title:hover{ color:var(--kb-link); }
.kb-article__nav-index{
  font-size:.82rem; letter-spacing:.12em; color:var(--kb-text-soft); text-decoration:none; white-space:nowrap;
}
.kb-article__nav-index:hover{ color:var(--kb-link); }

/* 共有 */
.kb-share{ margin-top:clamp(2.5rem,6vw,4rem); text-align:center; }
.kb-share__head{ display:flex; align-items:center; justify-content:center; gap:1.4rem; margin-bottom:1.6rem; }
.kb-share__head::before,
.kb-share__head::after{ content:""; width:3.4rem; height:1px; background:var(--kb-rule); }
.kb-share__head span{ font-size:.78rem; letter-spacing:.16em; color:var(--kb-text-soft); }
.kb-share__btns{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.9rem; }
.kb-share__btn{
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid var(--kb-rule); border-radius:999px; background:transparent;
  padding:.7em 1.6em; font-family:inherit; font-size:.78rem; letter-spacing:.1em;
  color:var(--kb-text-soft); text-decoration:none; cursor:pointer;
  transition:border-color .3s ease, color .3s ease;
}
.kb-share__btn:hover{ border-color:var(--kb-link); color:var(--kb-link); }
.kb-share__btn svg{ width:1.15rem; height:1.15rem; flex:none; }
.kb-share__copy.is-copied span{ color:var(--kb-link); }

@media (max-width:767px){
  .kb-article__nav{ grid-template-columns:1fr; justify-items:center; gap:1.1rem; text-align:center; }
  .kb-article__nav-side--next{ justify-content:center; }
  .kb-article__nav-title{ max-width:60vw; }
  .kb-share__btns{ gap:.6rem; }
  .kb-share__btn{ padding:.7em 1.15em; }
}

/* 本文内のカラム（ブロックエディタ）。コア CSS が無い場合の保険も兼ねる */
.kb-article__body .wp-block-columns{
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,5vw,4.5rem); margin:2.8em 0; align-items:flex-start;
}
.kb-article__body .wp-block-column{ flex:1 1 0; min-width:0; }
.kb-article__body .wp-block-columns p:last-child{ margin-bottom:0; }
.kb-article__body .wp-block-columns figure{ margin:0; }
@media (max-width:781px){
  /* flex を解除して block に戻す。こうすればインラインの flex-basis は無効化され、
     !important でインライン指定と殴り合う必要がない。 */
  .kb-article__body .wp-block-columns{ display:block; }
  .kb-article__body .wp-block-column + .wp-block-column{ margin-top:clamp(1.5rem,5vw,2.5rem); }
}

/* ===== コラム一覧 =====
   ※一覧のカンプは未支給。TOPの承認済み「黒紡ぎ」カードの型を流用している。 */
.kb-archive{
  /* 記事詳細（.kb-article）と同じ寸法基準に揃える */
  --kb-a-max:var(--kb-page-max);
  width:100%;
  max-width:calc(var(--kb-a-max) + 2 * var(--kb-gutter));
  margin:0 auto;
  padding:clamp(1.5rem,4vw,2.5rem) var(--kb-gutter) clamp(4rem,8vw,7rem);
  font-family:var(--kb-font-jp); color:var(--kb-text);
}
.kb-archive__head{ margin-bottom:clamp(2rem,5vw,3.25rem); }
.kb-archive__title{
  margin:0; font-weight:700; font-size:clamp(1.15rem,2.4vw,1.5rem);
  letter-spacing:.3em; line-height:1.6;
  display:flex; align-items:center; gap:1.5rem;
}
.kb-archive__title::after{ content:""; flex:1; height:1px; background:var(--kb-rule); }
.kb-archive__eyebrow{
  display:block; margin-top:.75rem;
  font-size:.62rem; letter-spacing:.4em; text-transform:uppercase; color:var(--kb-text-mute);
}
.kb-archive__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.5rem,4vw,3rem);
}
.kb-acard{
  display:flex; gap:1.25rem; align-items:flex-start;
  padding:1.4rem .1rem; border-bottom:1px solid var(--kb-rule);
  text-decoration:none; color:inherit;
}
.kb-acard__thumb{
  flex:none; width:clamp(96px,11vw,140px); aspect-ratio:4 / 3;
  overflow:hidden; border-radius:2px; display:block;
}
.kb-acard__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.kb-acard:hover .kb-acard__thumb img{ transform:scale(1.05); }
.kb-acard__body{ min-width:0; display:block; }
.kb-acard__cat{
  display:inline-block; margin-bottom:.6rem; padding:.2em .8em;
  border:1px solid var(--kb-chip-border); font-size:.62rem; letter-spacing:.14em; color:var(--kb-link);
}
.kb-acard__title{
  display:block; font-size:.92rem; line-height:1.8; letter-spacing:.05em;
  transition:color .3s ease;
}
.kb-acard:hover .kb-acard__title{ color:var(--kb-link); }
.kb-acard__date{ display:block; margin-top:.6rem; font-size:.68rem; letter-spacing:.14em; color:var(--kb-text-mute); }
.kb-archive__empty{ font-size:.85rem; color:var(--kb-text-mute); }

/* ページ送り */
.kb-archive .navigation.pagination{ margin-top:clamp(2.5rem,6vw,4rem); }
.kb-archive .nav-links{ display:flex; align-items:center; justify-content:center; gap:.9rem; flex-wrap:wrap; }
.kb-archive .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.4rem; height:2.4rem; padding:0 .6rem;
  border:1px solid var(--kb-rule); text-decoration:none;
  font-size:.78rem; letter-spacing:.06em; color:var(--kb-text-soft);
  transition:border-color .3s ease, color .3s ease;
}
.kb-archive .page-numbers:hover{ border-color:var(--kb-link); color:var(--kb-link); }
.kb-archive .page-numbers.current{ border-color:var(--kb-text); color:var(--kb-text); }
.kb-archive .page-numbers.dots{ border-color:transparent; }

@media (max-width:767px){
  .kb-archive__grid{ grid-template-columns:1fr; }
}

/* ===== お知らせ一覧 =====
   ※カンプ未支給。TOPの承認済み「お知らせ」リストの型を流用。 */
.kb-archive,
.kb-article{
  /* .kb-news スコープ外でもバッジの配色トークンが解決するように */
  --kb-chip:var(--kb-chip-border);
  --kb-ink-soft:var(--kb-text-soft);
}
.kb-nlist{ list-style:none; margin:0; padding:0; }
.kb-nitem{ border-bottom:1px solid var(--kb-rule); }
.kb-nitem:first-child{ border-top:1px solid var(--kb-rule); }
.kb-nitem__link{
  display:flex; gap:clamp(1rem,3vw,2.5rem); align-items:flex-start;
  padding:clamp(1.1rem,2.4vw,1.6rem) .1rem; text-decoration:none; color:inherit;
}
.kb-nitem__meta{
  flex:none; width:7.5rem; display:flex; flex-direction:column; align-items:flex-start; gap:.55rem;
}
.kb-nitem__date{ font-size:.78rem; letter-spacing:.12em; color:var(--kb-text-soft); font-variant-numeric:tabular-nums; }
.kb-nitem__body{ display:flex; align-items:flex-start; gap:.9rem; min-width:0; }
.kb-nitem__type{ margin-top:.15rem; }
.kb-nitem__title{
  font-size:.9rem; line-height:1.9; letter-spacing:.04em; color:var(--kb-text);
  transition:color .3s ease;
}
.kb-nitem__link:hover .kb-nitem__title{ color:var(--kb-link); }
.kb-article__title--news{ font-size:clamp(1.15rem,2.6vw,1.65rem); line-height:1.9; }

@media (max-width:600px){
  .kb-nitem__link{ flex-direction:column; gap:.75rem; }
  .kb-nitem__meta{ width:auto; flex-direction:row; align-items:center; gap:.75rem; }
}

/* ===== サイトマップ =====（カンプ未支給・記事系の型を流用） */
.kb-sitemap__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(1.75rem,4vw,3rem);
}
.kb-sitemap__group{ min-width:0; }
.kb-sitemap__gtitle{
  margin:0 0 1.1rem; font-weight:500; font-size:.86rem; letter-spacing:.16em;
  padding-bottom:.7rem; border-bottom:1px solid var(--kb-rule); color:var(--kb-text);
}
.kb-sitemap__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; }
.kb-sitemap__list a{
  font-size:.82rem; letter-spacing:.06em; color:var(--kb-text-soft);
  text-decoration:none; transition:color .3s ease;
}
.kb-sitemap__list a:hover{ color:var(--kb-link); }
.kb-sitemap__soon{ font-size:.82rem; letter-spacing:.06em; color:var(--kb-text-mute); }
.kb-sitemap__soon small{
  margin-left:.7em; padding:.15em .6em; font-size:.6rem; letter-spacing:.1em;
  border:1px solid var(--kb-rule); color:var(--kb-text-mute);
}
