/* =========================================================
   クラベル compare：比較表・講座ページ
   - 料金を最初に見つけられるよう、価格は大きく・ネイビーで表示
   - 見出し行と講座名の列を固定し、行・列の境界線で対応関係を明確にする
   - スマートフォンでは 1講座＝1枚のカードに切り替える（情報は欠落させない）
   ========================================================= */

.kb-compare { margin: var(--kb-s2) 0 var(--kb-s6); }
.kb-compare__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kb-s2) var(--kb-s4); margin: 0 0 var(--kb-s3); }
.kb-compare__count { margin: 0; font-size: var(--kb-fs-sm); color: var(--kb-ink-muted); }
.kb-compare__count strong { font-size: var(--kb-fs-md); color: var(--kb-ink); }
/* 横スクロールの案内：実際にはみ出しているとき（nav.js が is-scrollable を付与）だけ表示する */
.kb-compare__hint { display: none; margin: 0 0 var(--kb-s2); font-size: var(--kb-fs-sm); color: var(--kb-ink-muted); }
.kb-compare__hint::after { content: " →"; }
.kb-compare.is-scrollable .kb-compare__hint { display: block; }

/* 表の見方（必要な人だけ開く） */
.kb-legend { font-size: var(--kb-fs-sm); }
.kb-legend summary {
	display: inline-flex; align-items: center; gap: var(--kb-s2); min-height: var(--kb-tap); padding: 0 var(--kb-s4); cursor: pointer;
	border: 1px solid var(--kb-line-strong); border-radius: var(--kb-radius-sm); background: var(--kb-surface); color: var(--kb-blue); font-weight: 700; list-style: none;
}
.kb-legend summary:hover { background: var(--kb-blue-tint); }
.kb-legend summary::-webkit-details-marker { display: none; }
.kb-legend summary::before { content: "?"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 0.75rem; line-height: 1; }
.kb-legend__body { max-width: 36em; margin-top: var(--kb-s2); padding: var(--kb-s3) var(--kb-s4); background: var(--kb-surface); border: 1px solid var(--kb-line-strong); border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); }
.kb-legend__list { margin: 0 0 var(--kb-s2); }
.kb-legend__list > div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: var(--kb-s2); padding: 6px 0; border-bottom: 1px solid var(--kb-line); align-items: baseline; }
.kb-legend__list dd { margin: 0; }
.kb-legend__body p { margin: var(--kb-s2) 0 0; line-height: 1.7; }

/* ---------- 比較表（PC・タブレット） ---------- */
.kb-table-scroll {
	position: relative; /* 視覚的に隠したテキスト（position:absolute）もこの中でクリップする */
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	background: var(--kb-surface); border: 1px solid var(--kb-line-strong); border-radius: var(--kb-radius); box-shadow: var(--kb-shadow);
}
.kb-table-scroll:focus-visible { outline-offset: 2px; }

.kb-table { width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 0; font-size: 0.875rem; line-height: 1.65; }
.kb-table th, .kb-table td { padding: var(--kb-s3) 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--kb-line); }
.kb-table td + td, .kb-table th + th, .kb-table th + td { border-left: 1px solid var(--kb-line); }
.kb-table thead th {
	background: var(--kb-surface-alt); color: var(--kb-navy); font-size: var(--kb-fs-xs); font-weight: 700; white-space: nowrap;
	border-bottom: 2px solid var(--kb-line-strong); padding-top: 10px; padding-bottom: 10px;
}
.kb-table tbody tr:hover > * { background: #fbfcfe; }
.kb-table tbody tr:last-child > * { border-bottom: 0; }

/* 1列目（講座名）を固定 */
.kb-table .kb-table__course {
	position: sticky; left: 0; z-index: 1; background: var(--kb-surface); min-width: 150px; max-width: 190px;
	border-right: 2px solid var(--kb-line-strong);
}
.kb-table tbody tr:hover > .kb-table__course { background: #fbfcfe; }
.kb-table thead .kb-table__course { background: var(--kb-surface-alt); z-index: 2; }
.kb-table__name { display: block; font-size: 0.9375rem; font-weight: 700; line-height: 1.5; color: var(--kb-navy); }
.kb-table__name:hover { color: var(--kb-blue); }
.kb-table__provider { display: block; margin-top: 2px; font-size: var(--kb-fs-xs); font-weight: 400; color: var(--kb-ink-muted); }
.kb-table__checked { display: block; margin-top: var(--kb-s2); font-size: var(--kb-fs-xs); font-weight: 400; color: var(--kb-ink-muted); }

.kb-table td { min-width: 92px; }
.kb-table time { white-space: nowrap; }
.kb-table .kb-col-plan { min-width: 128px; }
.kb-table .kb-col-price, .kb-table .kb-col-regular { min-width: 124px; }
.kb-table .kb-col-study { min-width: 160px; }
.kb-table .kb-col-questions, .kb-table .kb-col-benefits, .kb-table .kb-col-conditions, .kb-table .kb-col-campaign, .kb-table .kb-col-documents { min-width: 136px; }
.kb-table .kb-col-cta { min-width: 140px; }
.kb-table .kb-col-cta .kb-cta-wrap, .kb-table .kb-col-cta .kb-cta { width: 100%; }

/* 料金：最初に目に入るよう大きく */
.kb-price { display: block; }
.kb-price + .kb-price { margin-top: var(--kb-s2); padding-top: var(--kb-s2); border-top: 1px dashed var(--kb-line-strong); }
.kb-price__label { display: block; font-size: var(--kb-fs-xs); color: var(--kb-ink-muted); }
.kb-price strong { display: inline-block; font-size: 1.1875rem; line-height: 1.35; color: var(--kb-navy); white-space: nowrap; }
.kb-price__tax { display: inline-block; margin-left: 4px; font-size: var(--kb-fs-xs); color: var(--kb-ink-muted); }
.kb-price--campaign .kb-price__label { display: inline-block; white-space: nowrap; padding: 0 6px; border-radius: var(--kb-radius-sm); background: var(--kb-blue-tint); color: var(--kb-blue); font-weight: 700; }
.kb-price--campaign strong { display: block; color: var(--kb-blue); }

.kb-cell-text { display: block; }
.kb-cell-strong { display: block; margin-top: var(--kb-s1); font-weight: 700; color: var(--kb-ink); }
.kb-cell-note { display: block; margin-top: var(--kb-s1); font-size: var(--kb-fs-xs); color: var(--kb-ink-muted); line-height: 1.6; }
.kb-pair { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.kb-pair + .kb-cell-note + .kb-pair, .kb-pair + .kb-pair { margin-top: var(--kb-s2); }
.kb-pair__key { font-size: var(--kb-fs-xs); color: var(--kb-ink-muted); }
.kb-pair--block { display: block; }
.kb-pair--block + .kb-pair--block { margin-top: var(--kb-s2); }
.kb-pair--block .kb-pair__key { display: block; }
.kb-detail-link { display: flex; align-items: center; justify-content: center; min-height: var(--kb-tap); margin-top: var(--kb-s1); font-size: var(--kb-fs-sm); font-weight: 700; }
.kb-source { font-size: var(--kb-fs-sm); word-break: break-all; }

/* ---------- スマートフォン：1講座＝1枚のカード ---------- */
@media (max-width: 640px) {
	.kb-compare.is-scrollable .kb-compare__hint { display: none; }
	.kb-table-scroll { overflow: visible; background: transparent; border: 0; box-shadow: none; }
	.kb-table, .kb-table tbody, .kb-table tr, .kb-table th, .kb-table td { display: block; width: auto; }
	.kb-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.kb-table tbody tr { margin: 0 0 var(--kb-s4); background: var(--kb-surface); border: 1px solid var(--kb-line-strong); border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); overflow: hidden; }
	.kb-table tbody tr:hover > * { background: transparent; }
	.kb-table td + td, .kb-table th + td { border-left: 0; }
	.kb-table .kb-table__course { position: static; max-width: none; min-width: 0; border-right: 0; padding: var(--kb-s4) var(--kb-s4) var(--kb-s3); background: var(--kb-surface-alt); border-bottom: 1px solid var(--kb-line); }
	.kb-table tbody tr:hover > .kb-table__course { background: var(--kb-surface-alt); }
	.kb-table__name { font-size: var(--kb-fs-lg); }
	.kb-table td[data-label] { min-width: 0; display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 2px var(--kb-s3); padding: var(--kb-s3) var(--kb-s4); }
	.kb-table td[data-label]::before { grid-row: 1 / span 9; }
	.kb-table td::before { content: attr(data-label); font-size: var(--kb-fs-xs); font-weight: 700; color: var(--kb-ink-muted); line-height: 1.6; }
	.kb-table td > * { grid-column: 2; justify-self: start; }
	.kb-table td.kb-col-cta { display: block; padding: var(--kb-s4); background: var(--kb-surface); }
	.kb-table td.kb-col-cta::before { content: none; }
	.kb-table .kb-col-cta .kb-cta { min-height: var(--kb-control); font-size: var(--kb-fs-md); }
	.kb-table .kb-col-cta .kb-cta-wrap { display: flex; }
	.kb-table .kb-col-cta .kb-detail-link { width: 100%; border: 1px solid var(--kb-blue); border-radius: var(--kb-radius-sm); margin-top: var(--kb-s2); text-decoration: none; }
	.kb-table tbody tr:last-child > * { border-bottom: 1px solid var(--kb-line); }
	.kb-table tbody tr > :last-child { border-bottom: 0; }
	.kb-price strong { font-size: 1.3125rem; }
}

/* ---------- 講座ページ ---------- */
.kb-backlink { margin: var(--kb-s2) 0 0; }
.kb-backlink a { display: inline-flex; align-items: center; gap: var(--kb-s2); min-height: var(--kb-tap); font-size: var(--kb-fs-sm); font-weight: 700; }
.kb-backlink a::before { content: ""; width: 0.45em; height: 0.45em; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }

.kb-course__header {
	display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "heading summary" "index summary" "intro summary";
	grid-template-rows: auto auto 1fr;
	gap: var(--kb-s4) var(--kb-s6); padding: var(--kb-s3) 0 var(--kb-s5); align-items: start;
}
.kb-course__heading { grid-area: heading; }
.kb-course__summary { grid-area: summary; }
.kb-course__intro { grid-area: intro; margin: 0; }
.kb-course__index { grid-area: index; }
.kb-course__index-title { margin: 0 0 var(--kb-s2); font-weight: 700; color: var(--kb-navy); }
.kb-course__index-note { margin: var(--kb-s2) 0 0; font-size: var(--kb-fs-xs); color: var(--kb-ink-muted); }
.kb-plan-index { overflow-x: auto; background: var(--kb-surface); border: 1px solid var(--kb-line-strong); border-radius: var(--kb-radius); }
.kb-plan-index__table { width: 100%; border-collapse: collapse; font-size: var(--kb-fs-sm); line-height: 1.6; }
.kb-plan-index__table th, .kb-plan-index__table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--kb-line); }
.kb-plan-index__table thead th { background: var(--kb-surface-alt); color: var(--kb-navy); font-size: var(--kb-fs-xs); white-space: nowrap; border-bottom: 2px solid var(--kb-line-strong); }
.kb-plan-index__table tbody tr:last-child > * { border-bottom: 0; }
.kb-plan-index__table tbody th { font-weight: 700; min-width: 10em; }
.kb-plan-index__table td:last-child { white-space: nowrap; }
.kb-plan-index__table strong { font-size: 1.0625rem; color: var(--kb-navy); }
.kb-plan-index__tax { display: block; font-size: var(--kb-fs-xs); color: var(--kb-ink-muted); }
.kb-course__provider { margin: var(--kb-s2) 0 0; color: var(--kb-ink-muted); font-size: var(--kb-fs-sm); }
.kb-course__summary { background: var(--kb-surface); border: 1px solid var(--kb-line); border-top: 4px solid var(--kb-blue); border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); padding: var(--kb-s3) var(--kb-s5) var(--kb-s5); }
.kb-summary { margin: 0 0 var(--kb-s4); }
.kb-summary > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: var(--kb-s2); padding: 10px 0; border-bottom: 1px solid var(--kb-line); align-items: baseline; }
.kb-summary dt { font-size: var(--kb-fs-xs); font-weight: 700; color: var(--kb-ink-muted); }
.kb-summary dd { margin: 0; }
.kb-summary .kb-price strong { font-size: 1.5rem; }
.kb-summary__note { margin: var(--kb-s3) 0 0; font-size: var(--kb-fs-xs); color: var(--kb-ink-muted); }
.kb-course__summary .kb-ad-notice { margin: 0 0 var(--kb-s3); }

.kb-course__section { margin-top: var(--kb-s6); scroll-margin-top: var(--kb-s3); }
.kb-plan { scroll-margin-top: var(--kb-s4); }
/* 行見出しに「通常価格」とあるため、値の側の同じ見出しは出さない */
.kb-facts .kb-price:not(.kb-price--campaign) > .kb-price__label { display: none; }
.kb-course__section > h2,
.kb-course__section-head h2 { font-size: var(--kb-fs-h2); margin: 0; }
.kb-course__section > h2 { padding-bottom: 0.35em; border-bottom: 2px solid var(--kb-navy); margin-bottom: var(--kb-s4); }
.kb-course__section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--kb-s2) var(--kb-s4); padding-bottom: var(--kb-s2); border-bottom: 2px solid var(--kb-navy); }
.kb-section-label { display: block; margin: 0 0 var(--kb-s1); font-size: var(--kb-fs-xs); font-weight: 700; color: var(--kb-ink-muted); letter-spacing: 0.04em; }
.kb-course__lead { margin: var(--kb-s3) 0 0; font-size: var(--kb-fs-sm); color: var(--kb-ink-muted); }

.kb-plan { margin-top: var(--kb-s5); padding: var(--kb-s5); background: var(--kb-surface); border: 1px solid var(--kb-line); border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); }
.kb-plan__title { font-size: var(--kb-fs-h3); margin: 0; display: flex; flex-wrap: wrap; gap: var(--kb-s1) var(--kb-s3); align-items: center; }
.kb-plan__badge { display: inline-block; padding: 0 8px; border: 1px solid #b7cdf0; border-radius: var(--kb-radius-sm); background: var(--kb-blue-tint); color: var(--kb-blue); font-size: var(--kb-fs-xs); font-weight: 700; line-height: 1.8; }
.kb-plan__meta { margin: var(--kb-s2) 0 0; font-size: var(--kb-fs-sm); color: var(--kb-ink-muted); }
.kb-plan__groups { columns: 2; column-gap: var(--kb-s6); margin-top: var(--kb-s2); }
.kb-plan__group { break-inside: avoid; }
.kb-plan__group:first-child h4 { margin-top: var(--kb-s3); }
.kb-plan__group h4 { margin: var(--kb-s4) 0 var(--kb-s1); font-size: var(--kb-fs-md); padding-left: 10px; border-left: 4px solid var(--kb-blue); }
.kb-plan__sources { margin: var(--kb-s4) 0 0; padding-top: var(--kb-s3); border-top: 1px solid var(--kb-line); font-size: var(--kb-fs-sm); display: flex; flex-wrap: wrap; gap: var(--kb-s1) var(--kb-s4); }

.kb-facts { margin: 0; }
.kb-facts > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: var(--kb-s3); padding: 10px 0; border-bottom: 1px solid var(--kb-line); }
.kb-facts dt { font-size: var(--kb-fs-sm); color: var(--kb-ink-muted); }
.kb-facts dd { margin: 0; font-size: 0.9375rem; }
.kb-source-list { margin: 0; padding-left: 1.2em; }

.kb-notes p { background: var(--kb-surface); border: 1px solid var(--kb-line); border-left: 4px solid var(--kb-navy); border-radius: var(--kb-radius-sm); padding: var(--kb-s4) var(--kb-s5); margin: 0; }
.kb-course__footer { margin-top: var(--kb-s7); padding: var(--kb-s5); background: var(--kb-surface); border: 1px solid var(--kb-line); border-radius: var(--kb-radius); display: grid; gap: var(--kb-s3); justify-items: start; }

@media (max-width: 860px) {
	.kb-course__header { grid-template-columns: 1fr; grid-template-areas: "heading" "summary" "index" "intro"; grid-template-rows: none; }
	.kb-plan__groups { columns: 1; }
	.kb-cta--lg { max-width: none; }
}
@media (max-width: 480px) {
	.kb-facts > div { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
	.kb-summary > div { grid-template-columns: 4.75em minmax(0, 1fr); padding: 8px 0; }
	.kb-course__summary { padding: var(--kb-s2) var(--kb-s4) var(--kb-s4); }
	.kb-plan { padding: var(--kb-s4); }
	.kb-course__footer { padding: var(--kb-s4); }
	.kb-legend__list > div { grid-template-columns: 7.5em minmax(0, 1fr); }
	.kb-plan-index__table tbody th { min-width: 7em; }
	.kb-plan-index__table th, .kb-plan-index__table td { padding: 10px 8px; }
}