@charset "UTF-8";
/* ================================================================
   40-front — トップ / 記事 / カテゴリ の面組み
   数値はすべて canvas-final.dc.html の実値(インラインstyle)から転記。
   ================================================================ */

/* ---------------------------------------------------------------
   版面メトリクス(キャンバス実測)
     トップ・カテゴリ・検索・404 : 内枠 1120 / 左右 80
     記事・固定ページ            : 内枠 1140 / 左右 70
   ヘッダー・フッターの内枠もページ側に合わせる(キャンバスがそうしている)。
   --------------------------------------------------------------- */
@media (min-width: 783px){
  .bk-wrap,
  .bk-header__inner,
  .bk-footer__inner{ max-width: 1120px; padding-left: 80px; padding-right: 80px; }
  body.single .bk-wrap,
  body.single .bk-header__inner,
  body.single .bk-footer__inner,
  body.page:not(.home) .bk-wrap,
  body.page:not(.home) .bk-header__inner,
  body.page:not(.home) .bk-footer__inner{ max-width: 1140px; padding-left: var(--bk-gutter); padding-right: var(--bk-gutter); }
}

/* 親テーマの .contents 既定余白を殺す(自前の帯で持つ) */
.contents{ padding-top: 0; padding-bottom: 0; overflow: visible; }

/* ================= トップ ================= */
.bk-band{ border-bottom: 1px solid var(--bk-line); }
.bk-band--paper{ background: var(--bk-surface); }

.bk-hero__inner{
  padding: var(--bk-s8) 80px 56px;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center;
}
.bk-hero__body{ display: flex; flex-direction: column; gap: 20px; }
.bk-hero__eyebrow{ font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: var(--bk-accent); }
.bk-hero__title{ font-size: 36px; font-weight: 700; line-height: 1.45; letter-spacing: .005em; text-wrap: pretty; margin: 0; }
.bk-hero__lead{ font-size: 16.5px; line-height: 1.95; color: var(--bk-ink-2); max-width: 560px; text-wrap: pretty; margin: 0; }
.bk-hero__chips{ display: flex; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--bk-ink-3); }
.bk-hero__chips span{ border: 1px solid var(--bk-line); padding: 5px 11px; border-radius: var(--bk-r1); background: var(--bk-surface); }
.bk-hero__fig{
  height: 230px; border: 1px solid var(--bk-line); border-radius: var(--bk-r2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.bk-hero__fig img{ width: 100%; height: 100%; object-fit: cover; }
.bk-hero__fignote{
  font-family: var(--bk-font-num); font-size: 12px; color: var(--bk-ink-3);
  background: var(--bk-bg); border: 1px solid var(--bk-line); padding: 8px 12px;
}

.bk-sechead{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; gap: var(--bk-s4); }
.bk-sechead__title{ font-size: 21px; font-weight: 700; margin: 0; }
.bk-sechead__note{ font-size: 13px; color: var(--bk-ink-3); }

.bk-entries__inner{ padding: 52px 80px; }
.bk-latest__inner{
  padding: 56px 80px;
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start;
}
.bk-latest__col{ display: flex; flex-direction: column; gap: 20px; }
.bk-latest__head{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--bk-s4); }
.bk-latest__head .bk-sechead__title{ font-size: 21px; }
.bk-latest__more{ font-size: 13px; color: var(--bk-brand); font-weight: 700; }
.bk-aside{ display: flex; flex-direction: column; gap: var(--bk-s5); }

/* データで見る簿記検定 */
.bk-data{ background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: var(--bk-r2); padding: var(--bk-s5); }
.bk-data__title{ font-size: 16px; font-weight: 700; margin: 0 0 14px; }
.bk-data__list{ display: flex; flex-direction: column; }
.bk-data__row{
  display: flex; justify-content: space-between; gap: var(--bk-s3);
  padding: 11px 0; border-bottom: 1px solid var(--bk-line-soft); font-size: 13.5px;
}
.bk-data__row:last-child{ border-bottom: 0; }
.bk-data__k{ color: var(--bk-ink-2); }
.bk-data__v{ font-family: var(--bk-font-num); font-weight: 700; font-variant-numeric: tabular-nums; }
.bk-data__note{ font-size: 12px; line-height: 1.7; color: var(--bk-ink-3); margin: var(--bk-s3) 0 0; }

/* 講座比較ハブ誘導 / 編集部の方針 */
.bk-promo{
  background: var(--bk-surface-alt); border: 1px solid var(--bk-line); border-radius: var(--bk-r2);
  padding: var(--bk-s5); display: flex; flex-direction: column; gap: var(--bk-s3);
}
.bk-promo--paper{ background: var(--bk-surface); }
.bk-promo__title{ font-size: 16px; font-weight: 700; }
.bk-promo__lead{ font-size: 13.5px; line-height: 1.85; color: var(--bk-ink-2); margin: 0; }
.bk-promo__more{ font-size: 13.5px; font-weight: 700; color: var(--bk-brand); }

/* ================= 記事 ================= */
.bk-article{ display: flex; flex-direction: column; gap: 28px; }
.bk-arthead{ display: flex; flex-direction: column; gap: 18px; }
.bk-arthead__title{
  font-size: var(--bk-fs-h1); font-weight: 700; line-height: var(--bk-lh-head);
  letter-spacing: .005em; text-wrap: pretty; margin: 0;
}
.bk-arthead .bk-meta{ margin-top: 0; }

.bk-related{ border-top: 1px solid var(--bk-line); padding-top: 26px; display: flex; flex-direction: column; gap: var(--bk-s4); }
.bk-related__title{ font-size: 20px; font-weight: 700; margin: 0; }
.bk-related__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--bk-s4); }
.bk-relcard{
  background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: var(--bk-r2);
  padding: 18px; display: flex; flex-direction: column; gap: var(--bk-s2);
}
.bk-relcard__cat{ font-size: 11.5px; font-weight: 700; color: var(--bk-brand); }
.bk-relcard__cat--accent{ color: var(--bk-accent); }
.bk-relcard__title{ font-size: 15px; font-weight: 700; line-height: 1.65; }
.bk-relcard__title a{ color: var(--bk-ink); }
.bk-relcard__title a:hover{ color: var(--bk-brand); text-decoration: none; }
.bk-relcard__date{ font-family: var(--bk-font-num); font-size: 11.5px; color: var(--bk-ink-3); }

/* ================= カテゴリ / アーカイブ ================= */
.bk-archead{ background: var(--bk-surface); border-bottom: 1px solid var(--bk-line); }
.bk-archead__inner{ padding: 40px 80px 32px; display: flex; flex-direction: column; gap: var(--bk-s4); }
.bk-archead__row{ display: flex; align-items: baseline; gap: var(--bk-s4); flex-wrap: wrap; }
.bk-archead__title{ font-size: 30px; font-weight: 700; margin: 0; }
.bk-archead__count{ font-family: var(--bk-font-num); font-size: 13px; color: var(--bk-ink-3); font-variant-numeric: tabular-nums; }
.bk-archead__desc{ font-size: 16px; line-height: 1.9; color: var(--bk-ink-2); max-width: 720px; text-wrap: pretty; margin: 0; }
.bk-chips{ display: flex; gap: var(--bk-s2); flex-wrap: wrap; margin-top: 4px; }
.bk-chips a{
  font-size: 13px; color: var(--bk-ink); border: 1px solid var(--bk-line);
  background: var(--bk-surface); padding: 7px 14px; border-radius: var(--bk-r1);
}
.bk-chips a:hover{ border-color: var(--bk-brand); color: var(--bk-brand); text-decoration: none; }
.bk-chips a.is-active{ font-weight: 700; color: #fff; background: var(--bk-brand); border-color: var(--bk-brand); }

.bk-main--archive{ max-width: 1120px; padding: 36px 80px 72px; grid-template-columns: minmax(0,1fr) 300px; gap: 56px; }
.bk-toolbar{
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--bk-line); padding-bottom: 14px; gap: var(--bk-s4);
}
.bk-toolbar__count{ font-size: 13.5px; color: var(--bk-ink-3); }
.bk-sort{ display: flex; gap: var(--bk-s4); font-size: 13.5px; }
.bk-sort a{ color: var(--bk-ink-2); }
.bk-sort a.is-active{ font-weight: 700; color: var(--bk-ink); border-bottom: 2px solid var(--bk-accent); padding-bottom: 3px; }
.bk-listcol{ display: flex; flex-direction: column; gap: 20px; }

/* ================= 404 ================= */
.bk-404{ max-width: 1120px; margin: 0 auto; padding: 64px 80px 96px; }
.bk-404__title{ font-family: var(--bk-font-num); font-size: 34px; font-weight: 700; line-height: 1.3; margin: 0; }
.bk-404__desc{ font-size: var(--bk-fs-h3); font-weight: 700; margin: var(--bk-s3) 0 0; }
.bk-404__text{ font-size: var(--bk-fs-small); line-height: 1.9; color: var(--bk-ink-2); margin: var(--bk-s4) 0 var(--bk-s6); max-width: 720px; }
.bk-404__grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--bk-s4); }
.bk-404__search{ margin-top: var(--bk-s6); max-width: 520px; }
.bk-search{ display: flex; gap: var(--bk-s2); }
.bk-search input[type="search"]{
  flex: 1; min-width: 0; font-family: inherit; font-size: var(--bk-fs-small);
  padding: 12px 14px; border: 1px solid var(--bk-line); border-radius: var(--bk-r1);
  background: var(--bk-surface); color: var(--bk-ink);
}
.bk-search button{
  font-family: inherit; font-size: var(--bk-fs-small); font-weight: 700; cursor: pointer;
  padding: 12px 20px; border: 1px solid var(--bk-brand); border-radius: var(--bk-r1);
  background: var(--bk-brand); color: #fff;
}
.bk-search button:hover{ background: var(--bk-brand-dark); }
.bk-404__home{ display: inline-block; margin-top: var(--bk-s5); font-size: 13.5px; font-weight: 700; color: var(--bk-brand); }

/* ================= 検索・固定ページ ================= */
.bk-page__title{ font-size: var(--bk-fs-h1); font-weight: 700; line-height: var(--bk-lh-head); margin: 0 0 var(--bk-s5); }
.bk-noposts{ font-size: var(--bk-fs-small); line-height: 1.9; color: var(--bk-ink-2); padding: var(--bk-s6) 0; }