@charset "UTF-8";
/* ================================================================
   50-parts — 記事4型の固有部品(正本 tokens.css §17〜§23 を逐語移植)
   部品カタログ PC/SP アートボードの全部品がここに載る。
   ================================================================ */

/* ================================================================
   TYPE 01: 講座比較型
   ================================================================ */

/* ---------- 17. 読者条件分岐の結論ボックス ---------- */
/* 冒頭の結論カプセル（.bk-capsule）の直後に置く */
.bk-branch{
  background: var(--bk-surface); border: 1px solid var(--bk-line);
  border-radius: var(--bk-r3); overflow: hidden; margin: var(--bk-s5) 0 var(--bk-s6);
}
.bk-branch__head{
  background: var(--bk-surface-alt); border-bottom: 1px solid #DAD4C8;
  padding: 14px 24px; display: flex; justify-content: space-between;
  align-items: baseline; gap: var(--bk-s4);
}
.bk-branch__title{ font-size: 15px; font-weight: 700; }
.bk-branch__meta{ font-size: var(--bk-fs-micro); color: var(--bk-ink-3); }
.bk-branch__grid{ display: grid; grid-template-columns: 1fr 1fr; }
.bk-branch__item{
  display: grid; grid-template-columns: 150px minmax(0,1fr); gap: var(--bk-s4);
  padding: 18px 24px; border-bottom: 1px solid var(--bk-line-soft);
  border-right: 1px solid var(--bk-line-soft); align-items: start;
}
.bk-branch__item:nth-child(2n){ border-right: 0; }
.bk-branch__item:nth-last-child(-n+2){ border-bottom: 0; }
.bk-branch__cond{
  font-size: 13px; font-weight: 700; text-align: center;
  color: var(--bk-accent); background: var(--bk-accent-tint);
  padding: 6px 10px; border-radius: var(--bk-r1);
}
.bk-branch__pick{ font-size: 16px; font-weight: 700; color: var(--bk-brand); margin: 0 0 6px; }
.bk-branch__why{ font-size: 13.5px; line-height: 1.8; color: var(--bk-ink-2); margin: 0; }
.bk-branch__source{
  border-top: 1px solid var(--bk-line); background: var(--bk-surface-zebra);
  padding: 12px 24px; font-size: var(--bk-fs-micro); line-height: 1.7; color: var(--bk-ink-3);
}
@media (max-width: 782px){
  .bk-branch__grid{ grid-template-columns: minmax(0,1fr); }
  .bk-branch__item{
    grid-template-columns: minmax(0,1fr); gap: 7px;
    padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--bk-line-soft);
  }
  .bk-branch__item:last-of-type{ border-bottom: 0; }
  .bk-branch__cond{ justify-self: start; font-size: 12px; }
  .bk-branch__pick{ font-size: 15px; }
  .bk-branch__why{ font-size: 12.5px; }
  .bk-branch__source{ padding: 11px 16px; font-size: 11.5px; }
}

/* ---------- 18. 多列スペック比較表（4講座 × 6〜8項目） ---------- */
/* <table class="bk-table bk-table--spec"> 1列目=項目名、以降=講座 */
.bk-table--spec th:first-child{ width: 180px; font-size: 12.5px; color: var(--bk-ink-3); }
.bk-table--spec tbody th{
  background: var(--bk-surface-zebra); font-size: 13.5px;
  font-weight: 700; color: var(--bk-ink-2); border-bottom: 1px solid var(--bk-line-soft);
}
.bk-table--spec td{ font-size: 14px; }
.bk-table--spec .is-none{ color: var(--bk-ink-3); }   /* 公表なし = 「—」 */
/* SP: 主要3項目に畳む。details/summary で全項目を展開 */
@media (max-width: 782px){
  .bk-table--spec{ min-width: 480px; }
  .bk-table--spec .is-sub{ display: none; }            /* 主要3項目以外を隠す */
  .bk-spec-more[open] .bk-table--spec .is-sub{ display: table-row; }
  .bk-spec-more > summary{
    list-style: none; cursor: pointer;
    border: 1px solid var(--bk-line); border-top: 0;
    border-radius: 0 0 var(--bk-r2) var(--bk-r2);
    background: var(--bk-surface); color: var(--bk-brand);
    font-size: 13px; font-weight: 700; text-align: center; padding: 12px;
  }
  .bk-spec-more > summary::-webkit-details-marker{ display: none; }
}

/* ---------- 19. 記事末CTA帯 ---------- */
.bk-cta--end{
  background: var(--bk-surface-alt); border: 1px solid #DAD4C8;
  border-radius: var(--bk-r2); padding: 22px 24px; margin: var(--bk-s7) 0 var(--bk-s5);
}
.bk-cta--end .bk-cta__title{ font-size: 16px; margin-bottom: var(--bk-s4); }
.bk-cta--end .bk-cta__row{ gap: var(--bk-s3); }
.bk-btn--ghost{
  display: inline-block; background: var(--bk-surface); color: var(--bk-brand) !important;
  border: 1px solid var(--bk-brand); font-size: 14.5px; font-weight: 700;
  padding: 13px 22px; border-radius: var(--bk-r1); text-decoration: none !important;
}
.bk-btn--ghost:hover{ background: var(--bk-brand-tint); }
@media (max-width: 782px){
  .bk-cta--end{ padding: 18px; }
  .bk-cta--end .bk-cta__row{ flex-direction: column; align-items: stretch; }
  .bk-btn--ghost{ display: block; text-align: center; padding: 14px; }
}

/* ================================================================
   TYPE 02: 勉強法型
   ================================================================ */

/* ---------- 20. 学習時間の実算表（前提条件つき） ---------- */
.bk-calc{
  background: var(--bk-surface); border: 1px solid var(--bk-line);
  border-radius: var(--bk-r2); overflow: hidden; margin: var(--bk-s6) 0 var(--bk-s3);
}
.bk-calc__premise{
  background: var(--bk-brand-tint); border-bottom: 1px solid var(--bk-brand-line);
  padding: 16px 20px;
}
.bk-calc__premise-label{
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: var(--bk-brand); margin-bottom: var(--bk-s2);
}
.bk-calc__premise ul{ display: flex; flex-wrap: wrap; gap: var(--bk-s2) 10px; margin: 0; padding: 0; list-style: none; }
.bk-calc__premise li{
  font-size: 12.5px; background: var(--bk-surface);
  border: 1px solid var(--bk-brand-line); padding: 5px 10px; border-radius: var(--bk-r1);
}
.bk-calc .bk-table{ border: 0; border-radius: 0; }
.bk-calc tfoot td, .bk-calc tfoot th{
  background: var(--bk-surface-alt); border-top: 1px solid #DAD4C8;
  font-weight: 700; font-size: 15px;
}

/* ---------- 21. 週間時間割 ---------- */
.bk-week{
  background: var(--bk-surface); border: 1px solid var(--bk-line);
  border-radius: var(--bk-r2); padding: 18px; margin: var(--bk-s5) 0 var(--bk-s3);
}
.bk-week__grid{ display: grid; grid-template-columns: 64px repeat(7, minmax(0,1fr)); gap: 4px; align-items: center; }
.bk-week__dow{ font-size: 11.5px; font-weight: 700; color: var(--bk-ink-2); text-align: center; }
.bk-week__dow.is-weekend{ color: var(--bk-accent); }
.bk-week__row-label{ font-size: 11.5px; color: var(--bk-ink-3); }
.bk-week__cell{
  height: 34px; border-radius: var(--bk-r1);
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; line-height: 1;
}
.bk-week__cell--gap{  background: var(--bk-brand-tint); border: 1px solid var(--bk-brand-line); color: var(--bk-brand); }
.bk-week__cell--desk{ background: #DCE6F0; border: 1px solid var(--bk-brand-line); color: var(--bk-brand-dark); }
.bk-week__cell--long{ background: var(--bk-accent-tint); border: 1px solid var(--bk-accent-line); color: var(--bk-accent); }
.bk-week__cell--free{ background: #F7F4EE; border: 1px solid var(--bk-line-soft); color: var(--bk-ink-3); }
.bk-week__total{ font-family: var(--bk-font-num); font-size: 11px; color: var(--bk-ink-3); text-align: center; }
.bk-week__legend{
  display: flex; flex-wrap: wrap; gap: var(--bk-s4);
  margin-top: var(--bk-s4); padding-top: 14px; border-top: 1px solid var(--bk-line-soft);
  font-size: 11.5px; color: var(--bk-ink-2);
}
.bk-week__legend span{ display: flex; align-items: center; gap: 6px; }
.bk-week__swatch{ width: 12px; height: 12px; border-radius: 2px; }
/* SP: 曜日を行に転置（列 = 通勤 / 夜） */
@media (max-width: 782px){
  .bk-week{ padding: 14px; }
  .bk-week__grid{ grid-template-columns: 34px repeat(2, minmax(0,1fr)); }
  .bk-week__cell{ height: 28px; font-size: 10px; }
  .bk-week__total{ display: none; }
}

/* ================================================================
   TYPE 03: 転職ノウハウ型（画像を使わない集計表現）
   ================================================================ */

/* ---------- 22. 帯グラフ / 構成比の帯 ---------- */
.bk-bars{
  background: var(--bk-surface); border: 1px solid var(--bk-line);
  border-radius: var(--bk-r2); padding: 22px 24px; margin: var(--bk-s6) 0 var(--bk-s3);
}
.bk-bars__head{ display: flex; justify-content: space-between; align-items: baseline; gap: var(--bk-s4); margin-bottom: 18px; }
.bk-bars__title{ font-size: 15.5px; font-weight: 700; }
.bk-bars__n{ font-family: var(--bk-font-num); font-size: 11.5px; color: var(--bk-ink-3); }
.bk-bars__list{ display: flex; flex-direction: column; gap: 14px; }
.bk-bar__label{ display: flex; justify-content: space-between; gap: var(--bk-s3); font-size: 13.5px; margin-bottom: 6px; }
.bk-bar__val{ font-family: var(--bk-font-num); font-variant-numeric: tabular-nums; color: var(--bk-ink-2); }
.bk-bar__track{ height: 10px; background: var(--bk-line-soft); border-radius: 999px; overflow: hidden; }
.bk-bar__fill{ height: 100%; background: var(--bk-brand); }
.bk-bar__fill--sub{ background: #7B96B4; }   /* 下位項目は明度を落とす（別色は使わない） */
.bk-bars__source{
  border-top: 1px solid var(--bk-line-soft); margin-top: 18px; padding-top: 12px;
  font-size: 12px; line-height: 1.75; color: var(--bk-ink-3);
}
/* 構成比の1本帯 */
.bk-stack{ display: flex; height: 28px; border: 1px solid var(--bk-brand-line); border-radius: var(--bk-r1); overflow: hidden; }
.bk-stack__seg{ display: flex; align-items: center; justify-content: center; font-size: 11.5px; white-space: nowrap; }
.bk-stack__seg--1{ background: var(--bk-brand); color: #fff; font-weight: 700; }
.bk-stack__seg--2{ background: #5C7FA3; color: #fff; }
.bk-stack__seg--3{ background: #9DB2C9; color: var(--bk-ink); }
.bk-stack__seg--4{ background: #D5DFE9; color: var(--bk-ink); }
.bk-legend li{ display: flex; justify-content: space-between; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--bk-line-soft); }
.bk-legend li:last-child{ border-bottom: 0; }
.bk-legend__swatch{ width: 10px; height: 10px; border-radius: 2px; margin-right: var(--bk-s2); display: inline-block; }
@media (max-width: 782px){
  .bk-bars{ padding: 18px; }
  .bk-bar__label{ font-size: 12.5px; }
  .bk-stack__seg{ font-size: 10.5px; }
}

/* ---------- 23. ふきだし（Xwrite ふきだしの調律・自作時も同じ見た目） ---------- */
.bk-balloon{ display: flex; gap: var(--bk-s3); align-items: flex-start; margin: var(--bk-s5) 0; }
.bk-balloon__who{ width: 44px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bk-balloon__avatar{
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bk-surface-alt); border: 1px solid var(--bk-line);
}
.bk-balloon__name{ font-size: 9.5px; color: var(--bk-ink-3); text-align: center; line-height: 1.4; }
.bk-balloon__body{
  background: var(--bk-surface); border: 1px solid var(--bk-line);
  border-radius: var(--bk-r2); padding: 14px 16px;
  font-size: 13.5px; line-height: 1.85;
}
.bk-balloon--reader .bk-balloon__avatar{ background: var(--bk-brand-tint); border-color: var(--bk-brand-line); }
.bk-balloon--reader .bk-balloon__body{ background: var(--bk-surface-alt); color: var(--bk-ink-2); }

/* 編集部アバターは布目、読者アバターは Q(キャンバス Xwriteブロック調律) */
.bk-balloon--editor .bk-balloon__avatar{
  background: repeating-linear-gradient(45deg, var(--bk-line-soft) 0 5px, #F7F4EE 5px 10px);
}
.bk-balloon--reader .bk-balloon__avatar{
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--bk-brand);
}

/* ---------- 型04: 合格率推移表(既存 .bk-table の適用例・新部品なし) ---------- */
.bk-table--rate td:first-child,
.bk-table--rate th:first-child{ font-family: var(--bk-font-num); }
.bk-table--rate tfoot th, .bk-table--rate tfoot td{
  background: var(--bk-surface-alt); border-top: 1px solid #DAD4C8; font-weight: 700; font-size: 15px;
}

/* ---------- CHECK: 文言のコンプライアンス基準(部品カタログ末尾) ---------- */
.bk-compliance{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bk-compliance__card{ background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: var(--bk-r2); overflow: hidden; }
.bk-compliance__head{ background: var(--bk-surface-alt); border-bottom: 1px solid #DAD4C8; padding: 12px 18px; font-size: 13px; font-weight: 700; color: var(--bk-ink-2); }
.bk-compliance__card--ok .bk-compliance__head{ background: var(--bk-brand-tint); border-bottom-color: var(--bk-brand-line); color: var(--bk-brand); }
.bk-compliance__body{ padding: 8px 18px 14px; display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.85; color: var(--bk-ink-2); }
.bk-compliance__body > div{ padding: 9px 0; border-bottom: 1px solid var(--bk-line-soft); }
.bk-compliance__body > div:last-child{ border-bottom: 0; }
@media (max-width: 782px){ .bk-compliance{ grid-template-columns: minmax(0,1fr); } }