/* =========================================================
   クラベル front：トップページ（黒×シャンパンゴールド）
   最初の画面＝見出し＋ジャンル選択。装飾は王冠ロゴと金の罫線に限定する。
   ========================================================= */

.kb-front { background: var(--kb-black); color: var(--kb-on-black); }
.kb-front a { color: var(--kb-gold-light); }

/* ---------- 最初の画面 ---------- */
.kb-hero { border-bottom: 1px solid var(--kb-black-line); }
.kb-hero__inner {
	max-width: var(--kb-max); margin: 0 auto;
	padding: clamp(24px, 4.5vw, 56px) var(--kb-gutter) clamp(36px, 6vw, 72px);
}
.kb-hero__title {
	font-family: var(--kb-serif); font-weight: 600;
	font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.35; letter-spacing: 0.04em;
	margin: 0; color: var(--kb-on-black); text-wrap: balance;
}
.kb-hero__lead { max-width: 36em; margin: 16px 0 0; color: var(--kb-on-black-muted); font-size: 1rem; line-height: 1.9; }

/* ジャンル選択 */
.kb-pick { margin-top: clamp(28px, 4vw, 44px); scroll-margin-top: 12px; }
.kb-pick__title {
	font-size: 0.95rem; font-weight: 700; letter-spacing: 0.06em; color: var(--kb-gold);
	margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--kb-gold);
}
.kb-pick__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px;
}
.kb-pick__card {
	display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 44px;
	padding: 20px 22px 18px; border: 1px solid var(--kb-gold); border-radius: var(--kb-radius);
	background: var(--kb-black-raised); text-decoration: none;
}
.kb-front .kb-pick__card { color: var(--kb-on-black); }
.kb-pick__card:hover { background: #221f17; }
.kb-pick__card:hover .kb-pick__action { text-decoration: underline; }
.kb-pick__card:focus-visible { outline: 3px solid var(--kb-gold-light); outline-offset: 2px; }
.kb-pick__name { font-family: var(--kb-serif); font-size: clamp(1.4rem, 2.6vw, 1.7rem); font-weight: 600; letter-spacing: 0.08em; color: var(--kb-gold-light); }
.kb-pick__desc { font-size: 0.9rem; line-height: 1.75; color: var(--kb-on-black-muted); }
.kb-pick__foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--kb-black-line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }
.kb-pick__count { font-size: 0.85rem; color: var(--kb-on-black-muted); }
.kb-pick__action { font-weight: 700; color: var(--kb-gold-light); }
.kb-pick__action::after { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-left: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); vertical-align: 0.1em; }
.kb-pick__soon { margin: 14px 0 0; font-size: 0.88rem; color: var(--kb-on-black-muted); }

/* ---------- 条件を決めて比較する ---------- */
.kb-section { border-bottom: 1px solid var(--kb-black-line); }
.kb-section__inner { max-width: var(--kb-max); margin: 0 auto; padding: clamp(36px, 5vw, 64px) var(--kb-gutter); }
.kb-section__title {
	font-family: var(--kb-serif); font-weight: 600; font-size: clamp(1.35rem, 2.6vw, 1.75rem);
	letter-spacing: 0.08em; color: var(--kb-on-black); margin: 0 0 16px;
}
.kb-shortcuts__list { margin: 0; border-top: 1px solid var(--kb-black-line); }
.kb-shortcuts__row { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--kb-black-line); }
.kb-shortcuts__row dt { font-family: var(--kb-serif); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.06em; color: var(--kb-gold-light); }
.kb-shortcuts__row dd { margin: 0; }
.kb-shortcuts__row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.kb-shortcuts__row a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
	border: 1px solid var(--kb-black-line); border-radius: var(--kb-radius); text-decoration: none; font-size: 0.95rem;
}
.kb-shortcuts__row a:hover { border-color: var(--kb-gold); text-decoration: underline; }

.kb-front-content .kb-prose { color: var(--kb-on-black); max-width: var(--kb-measure); }

@media (max-width: 640px) {
	.kb-shortcuts__row { grid-template-columns: 1fr; }
	.kb-shortcuts__row a { flex: 1 1 calc(50% - 10px); justify-content: center; }
	.kb-pick__card { padding: 16px 16px 14px; }
}

/* ---------- 掲載中の講座 ---------- */
.kb-courses__group + .kb-courses__group { margin-top: clamp(28px, 4vw, 40px); }
.kb-courses__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--kb-gold); }
.kb-courses__genre { margin: 0; font-family: var(--kb-serif); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.06em; color: var(--kb-gold-light); }
.kb-courses__count { margin-left: 10px; font-family: inherit; font-size: 0.85rem; font-weight: 400; letter-spacing: 0; color: var(--kb-on-black-muted); }
.kb-courses__compare { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.kb-courses__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.kb-course-card {
	display: flex; flex-direction: column; gap: 6px; height: 100%;
	padding: 16px 18px; border: 1px solid var(--kb-black-line); border-radius: var(--kb-radius);
	background: var(--kb-black-raised); text-decoration: none;
}
.kb-front .kb-course-card { color: var(--kb-on-black); }
.kb-course-card:hover { border-color: var(--kb-gold); background: #221f17; }
.kb-course-card:hover .kb-course-card__action { text-decoration: underline; }
.kb-course-card:focus-visible { outline: 3px solid var(--kb-gold-light); outline-offset: 2px; }
.kb-course-card__name { font-size: 1.05rem; font-weight: 700; line-height: 1.5; color: var(--kb-on-black); }
.kb-course-card__provider { font-size: 0.82rem; color: var(--kb-on-black-muted); }
.kb-course-card__facts { margin: 6px 0 0; display: grid; gap: 4px; }
.kb-course-card__facts div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 8px; align-items: baseline; }
.kb-course-card__facts dt { font-size: 0.8rem; color: var(--kb-on-black-muted); }
.kb-course-card__facts dd { margin: 0; font-size: 0.92rem; }
.kb-course-card__facts strong { font-size: 1.05rem; color: var(--kb-gold-light); }
.kb-course-card__tax { font-size: 0.78rem; color: var(--kb-on-black-muted); }
.kb-course-card .kb-state--unknown { color: var(--kb-on-black-muted); }
.kb-course-card__plan { font-size: 0.8rem; line-height: 1.6; color: var(--kb-on-black-muted); }
.kb-course-card__action { margin-top: auto; padding-top: 8px; font-size: 0.9rem; font-weight: 700; color: var(--kb-gold-light); }
.kb-course-card__action::after { content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin-left: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); vertical-align: 0.1em; }