@charset "UTF-8";
/* ================================================================
   30-components — 共通部品(正本 tokens.css §5〜§13 を逐語移植)
   各節の @media(max-width:782px) は正本どおり節内に置く(順序を崩さない)。
   節の末尾に「キャンバスにしかない値」を .bk-*__… で追記する。
   ================================================================ */

/* ---------- 5. 記事メタ（公開日・更新日・著者） ---------- */
.bk-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--bk-s2) var(--bk-s5);
  font-size: 13px; color: var(--bk-ink-2);
  border-top: 1px solid var(--bk-line); border-bottom: 1px solid var(--bk-line);
  padding: 14px 0; margin: var(--bk-s4) 0 0;
}
.bk-meta time{ font-family: var(--bk-font-num); font-variant-numeric: tabular-nums; }
.bk-meta .is-updated{ color: var(--bk-ink); font-weight: 700; }
.bk-meta__sep{ width: 1px; height: 13px; background: var(--bk-line); }
@media (max-width: 782px){ .bk-meta{ font-size: 12px; gap: 6px 14px; } .bk-meta__sep{ display: none; } }

/* ---------- 6. 結論カプセル（120〜150字） ---------- */
.bk-capsule{
  background: var(--bk-brand-tint);
  border: 1px solid var(--bk-brand-line);
  border-radius: var(--bk-r3);
  padding: 24px 26px;
  margin: var(--bk-s6) 0;
}
.bk-capsule__label{
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--bk-brand); margin-bottom: var(--bk-s3);
}
.bk-capsule p{ margin: 0; font-size: 16.5px; line-height: 1.95; text-wrap: pretty; }
@media (max-width: 782px){ .bk-capsule{ padding: 18px; } .bk-capsule p{ font-size: 15px; } }

/* 本文側ブロック(wp:group class="bk-capsule")で書かれた場合の受け皿。
   PHPで本文をラップしない(ネイティブ目次の //body/* を壊さないため)。
   最初の見出し/段落を自動でラベル・本文として扱う。 */
.articleBody .bk-capsule > :first-child{
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--bk-brand); margin: 0 0 var(--bk-s3);
}
.articleBody .bk-capsule > :last-child{ margin-bottom: 0; }
@media (max-width: 782px){ .articleBody .bk-capsule > :first-child{ font-size: 11.5px; } }

/* ---------- 7. 比較表（横罫のみ・数値は等幅右揃え） ---------- */
.bk-table-wrap{ margin: var(--bk-s6) 0 var(--bk-s3); }
.bk-table{
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--bk-surface);
  border: 1px solid var(--bk-line); border-radius: var(--bk-r2);
  overflow: hidden;
}
.bk-table th{
  background: var(--bk-surface-alt); color: var(--bk-ink-2);
  font-size: 13px; font-weight: 700; text-align: left;
  padding: 13px 18px; border-bottom: 1px solid #DAD4C8;
}
.bk-table td{
  padding: 15px 18px; font-size: 14.5px; line-height: 1.75;
  border-bottom: 1px solid var(--bk-line-soft); vertical-align: top;
}
.bk-table tbody tr:nth-child(even) td{ background: var(--bk-surface-zebra); }
.bk-table tbody tr:last-child td{ border-bottom: 0; }
.bk-table th:first-child, .bk-table td:first-child{ font-weight: 700; }
.bk-table .is-num, .bk-table th.is-num{
  font-family: var(--bk-font-num); font-variant-numeric: tabular-nums; text-align: right;
}
/* 調査日：表の直下・数値の隣の小表記 */
.bk-asof{
  font-size: var(--bk-fs-micro); line-height: 1.7; color: var(--bk-ink-3);
  margin: 0 0 var(--bk-s6);
}
.bk-asof--inline{ font-size: var(--bk-fs-micro); color: var(--bk-ink-3); }
/* SP：横スクロール＋1列目 sticky */
@media (max-width: 782px){
  .bk-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bk-table{ min-width: 560px; }
  .bk-table th, .bk-table td{ padding: 11px 12px; font-size: 13.5px; }
  .bk-table th:first-child, .bk-table td:first-child{
    position: sticky; left: 0; background: var(--bk-surface); z-index: 1;
  }
  .bk-table tbody tr:nth-child(even) td:first-child{ background: var(--bk-surface-zebra); }
}

/* ---------- 8. 文脈内CTA（バナー風装飾は作らない） ---------- */
.bk-cta{
  background: var(--bk-surface); border: 1px solid var(--bk-line);
  border-radius: var(--bk-r2); padding: 24px 26px; margin: var(--bk-s6) 0;
}
.bk-cta__title{ font-size: 16.5px; font-weight: 700; line-height: 1.7; margin: 0 0 var(--bk-s3); }
.bk-cta__lead{ font-size: var(--bk-fs-small); line-height: 1.85; color: var(--bk-ink-2); margin: 0 0 var(--bk-s4); }
.bk-cta__row{ display: flex; align-items: center; gap: var(--bk-s4); flex-wrap: wrap; }
.bk-btn{
  display: inline-block; background: var(--bk-brand); color: #fff !important;
  font-size: 15px; font-weight: 700; padding: 14px 26px;
  border-radius: var(--bk-r1); text-decoration: none !important;
  transition: background .15s ease;
}
.bk-btn:hover{ background: var(--bk-brand-dark); }
.bk-cta__note{ font-size: var(--bk-fs-micro); line-height: 1.7; color: var(--bk-ink-3); }
@media (max-width: 782px){
  .bk-cta{ padding: 18px; }
  .bk-btn{ display: block; text-align: center; padding: 15px 20px; }
}

/* ---------- 9. 編集部注 / タグ ---------- */
.bk-note{
  border-left: 2px solid var(--bk-accent); padding-left: var(--bk-s4);
  font-size: 14.5px; line-height: 1.9; color: var(--bk-ink-2); margin: var(--bk-s6) 0;
}
.bk-tag{
  display: inline-block; font-size: 12.5px; font-weight: 700;
  color: var(--bk-brand); background: var(--bk-brand-tint);
  padding: 5px 11px; border-radius: var(--bk-r1);
}
.bk-tag--accent{ color: var(--bk-accent); background: var(--bk-accent-tint); }
.bk-tag--plain{ color: var(--bk-ink-2); background: none; border: 1px solid var(--bk-line); font-weight: 400; }

.bk-tags{ display: flex; flex-wrap: wrap; gap: var(--bk-s2); }
.bk-tag:hover{ text-decoration: none; opacity: .85; }
@media (max-width: 782px){
  .bk-tags{ gap: 6px; }
  .bk-tag{ font-size: 11.5px; padding: 4px 9px; }
}

/* ---------- 10. 記事一覧（横罫のリスト） ---------- */
.bk-list{ display: flex; flex-direction: column; }
.bk-list__item{
  display: flex; gap: 22px; align-items: flex-start;
  padding: 22px 0; border-bottom: 1px solid var(--bk-line);
}
.bk-list__thumb{
  width: 180px; aspect-ratio: 180 / 118; flex: none;
  border: 1px solid var(--bk-line); border-radius: var(--bk-r1);
  background: var(--bk-surface-alt); object-fit: cover;
}
.bk-list__title{ font-size: 19px; font-weight: 700; line-height: 1.6; margin: 0; }
.bk-list__excerpt{
  font-size: var(--bk-fs-small); line-height: 1.85; color: var(--bk-ink-2); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-list__date{ font-family: var(--bk-font-num); font-size: 12px; color: var(--bk-ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 782px){
  .bk-list__item{ gap: 14px; padding: 18px 0; }
  .bk-list__thumb{ width: 104px; }
  .bk-list__title{ font-size: 15.5px; }
  .bk-list__excerpt{ display: none; }
}

/* 一覧の内部構造(キャンバス: チップ+日付の行 → タイトル → 抜粋) */
.bk-list__item:last-child{ border-bottom: 0; }
.bk-list__thumblink{ display: block; flex: none; line-height: 0; }
.bk-list__thumblink:hover{ opacity: .88; }
/* 日付は PC=YYYY-MM-DD / SP=MM-DD(キャンバス両アートボードの表記に合わせる) */
.bk-d-short{ display: none; }
@media (max-width: 782px){
  .bk-d-full{ display: none; }
  .bk-d-short{ display: inline; }
}
.bk-list__body{ display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.bk-list__head{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bk-list__title a{ color: var(--bk-ink); }
.bk-list__title a:hover{ color: var(--bk-brand); text-decoration: none; }
/* 布目のプレースホルダ(実写真が入るまでの画像枠) */
.bk-ph{
  display: block;
  background: repeating-linear-gradient(45deg, var(--bk-line-soft) 0 7px, #F7F4EE 7px 14px);
}
/* トップの新着リストはサムネが小さい(104×70・キャンバス トップPC) */
.bk-list--front .bk-list__item{ gap: 20px; padding: 20px 0; }
.bk-list--front .bk-list__thumb{ width: 104px; aspect-ratio: 104 / 70; }
.bk-list--front .bk-list__body{ gap: var(--bk-s2); }
.bk-list--front .bk-list__head{ gap: var(--bk-s3); }
.bk-list--front .bk-list__title{ font-size: 17px; line-height: 1.65; }
.bk-list--front .bk-list__excerpt{ font-size: 13.5px; line-height: 1.8; }
@media (max-width: 782px){
  .bk-list--front .bk-list__item{ gap: 14px; padding: 16px 0; }
  .bk-list--front .bk-list__thumb{ width: 84px; aspect-ratio: 84 / 60; }
  .bk-list--front .bk-list__body{ gap: 6px; }
  .bk-list--front .bk-list__title{ font-size: 14.5px; }
  .bk-list--front .bk-list__head{ gap: var(--bk-s2); }
  .bk-list__thumb{ aspect-ratio: 104 / 74; }
}

/* ---------- 11. 現在地カード（トップの入口） ---------- */
.bk-entry-grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--bk-s4); }
.bk-entry{
  display: flex; flex-direction: column; gap: var(--bk-s3);
  border: 1px solid var(--bk-line); border-top: 3px solid var(--bk-brand);
  border-radius: var(--bk-r2); padding: 22px 20px; min-height: 186px;
  background: var(--bk-surface);
}
.bk-entry--career{ border-top-color: var(--bk-accent); }
.bk-entry__no{ font-family: var(--bk-font-num); font-size: 11.5px; color: var(--bk-ink-3); }
.bk-entry__title{ font-size: 17px; font-weight: 700; line-height: 1.6; }
.bk-entry__lead{ font-size: 13.5px; line-height: 1.85; color: var(--bk-ink-2); }
.bk-entry__more{ margin-top: auto; font-size: 13.5px; font-weight: 700; color: var(--bk-brand); }
.bk-entry--career .bk-entry__more{ color: var(--bk-accent); }
@media (max-width: 782px){
  .bk-entry-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--bk-s3); }
  .bk-entry{ padding: 16px 14px; min-height: 118px; }
  .bk-entry__title{ font-size: 15px; }
  .bk-entry__lead{ font-size: 12.5px; }
  .bk-entry__more{ display: none; }
}
.bk-entry, .bk-entry:hover{ text-decoration: none; color: inherit; }
.bk-entry:hover{ border-color: var(--bk-brand-line); }
.bk-entry:hover .bk-entry__title{ color: var(--bk-brand); }
@media (max-width: 782px){ .bk-entry__lead{ line-height: 1.75; } }

/* ---------- 12. サイドバー ---------- */
.bk-widget{
  background: var(--bk-surface); border: 1px solid var(--bk-line);
  border-radius: var(--bk-r2); padding: 20px; margin-bottom: var(--bk-s5);
}
.bk-widget--alt{ background: var(--bk-surface-alt); }
.bk-widget__title{ font-size: 15px; font-weight: 700; margin: 0 0 var(--bk-s3); }
.bk-widget li{ display: flex; justify-content: space-between; gap: var(--bk-s3);
  padding: 9px 0; border-bottom: 1px solid var(--bk-line-soft); font-size: 13.5px; }
.bk-widget li:last-child{ border-bottom: 0; }
.bk-widget .bk-count{ font-family: var(--bk-font-num); color: var(--bk-ink-3); }

/* サイドバー内部(キャンバス 記事PC / カテゴリPC) */
.bk-side{ display: flex; flex-direction: column; }
.bk-widget ul{ list-style: none; margin: 0; padding: 0; }
.bk-widget__lead{ font-size: 13px; line-height: 1.85; color: var(--bk-ink-2); margin: 0; }
.bk-widget__more{ font-size: 13.5px; font-weight: 700; color: var(--bk-brand); margin-top: 10px; display: inline-block; }
.bk-widget--author .bk-widget__title{ font-size: 14px; margin-bottom: var(--bk-s3); }
.bk-author{ display: flex; gap: var(--bk-s3); align-items: center; margin-bottom: var(--bk-s3); }
.bk-author__avatar{
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: repeating-linear-gradient(45deg, var(--bk-line-soft) 0 5px, #F7F4EE 5px 10px);
  border: 1px solid var(--bk-line);
}
.bk-author__name{ font-size: 14.5px; font-weight: 700; }
.bk-roadmap{ display: flex; flex-direction: column; gap: var(--bk-s2); font-size: 13.5px; line-height: 1.7; color: var(--bk-brand); }
.bk-roadmap + .bk-widget__note{ font-size: var(--bk-fs-micro); line-height: 1.8; color: var(--bk-ink-3); margin: var(--bk-s3) 0 0; }
.bk-firstread{ display: flex; flex-direction: column; gap: var(--bk-s3); }
.bk-firstread__item{
  display: flex; gap: 10px; align-items: flex-start;
  border-bottom: 1px solid var(--bk-line-soft); padding-bottom: var(--bk-s3);
}
.bk-firstread__item:last-child{ border-bottom: 0; padding-bottom: 0; }
.bk-firstread__no{ font-family: var(--bk-font-num); font-size: 12px; font-weight: 700; color: var(--bk-ink-3); }
.bk-firstread__title{ font-size: 13.5px; line-height: 1.7; }
.bk-widget--roadmap .bk-widget__title{ font-size: 14px; }
.bk-widget li.is-current a{ font-weight: 700; color: var(--bk-brand); }

/* ---------- 13. ページネーション ---------- */
.bk-pager{ display: flex; justify-content: center; gap: var(--bk-s2); padding-top: var(--bk-s5); }
.bk-pager a, .bk-pager span{
  font-size: 14px; font-family: var(--bk-font-num);
  padding: 9px 15px; border-radius: var(--bk-r1);
  border: 1px solid var(--bk-line); background: var(--bk-surface); color: var(--bk-ink);
}
.bk-pager .current{ background: var(--bk-brand); border-color: var(--bk-brand); color: #fff; font-weight: 700; }
.bk-pager .next{ font-family: var(--bk-font-sans); padding: 9px 18px; }
.bk-pager .prev{ font-family: var(--bk-font-sans); padding: 9px 18px; }
.bk-pager a:hover{ border-color: var(--bk-brand); color: var(--bk-brand); text-decoration: none; }
.bk-pager .dots{ border-color: transparent; background: none; }
@media (max-width: 782px){
  .bk-pager{ padding: 22px 0 26px; }
  .bk-pager a, .bk-pager span{ padding: 10px 16px; }
  .bk-pager .next, .bk-pager .prev{ padding: 10px 18px; }
}

/* ---------- 補助 ---------- */
.screen-reader-text{
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap;
}
.bk-side{ gap: 0; }             /* 間隔は .bk-widget の margin-bottom が持つ */
.bk-side .bk-widget:last-child{ margin-bottom: 0; }
.bk-listcol > .bk-list{ margin: 0; }