/* =========================================================
   クラベル content：比較ページ・記事ページ・固定ページ（全ページで読み込み）
   パンくず・ページ見出し・本文・条件タブ・広告表記・空表示・一覧
   ========================================================= */

.kb-container { max-width: calc(var(--kb-measure) + 2 * var(--kb-gutter)); margin: 0 auto; padding: 0 var(--kb-gutter); }
.kb-wide .kb-container { max-width: var(--kb-max); }
.kb-wide .kb-prose > *:not(.kb-compare):not(.kb-ad-notice):not(.kb-empty):not(.alignwide):not(.alignfull) { max-width: var(--kb-measure); }

/* パンくず */
.kb-breadcrumbs { margin: var(--kb-s4) 0 0; font-size: var(--kb-fs-xs); color: var(--kb-ink-muted); }
.kb-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; }
.kb-breadcrumbs li:not(:last-child)::after { content: "›"; margin: 0 8px; color: var(--kb-ink-muted); }
.kb-breadcrumbs a { color: var(--kb-ink-muted); }
.kb-breadcrumbs a:hover { color: var(--kb-blue); }

/* ページ見出し */
.kb-article__header { padding: var(--kb-s4) 0 var(--kb-s2); }
.kb-article__title { font-size: var(--kb-fs-h1); line-height: 1.4; margin: 0; }
.kb-article__meta { margin: var(--kb-s2) 0 0; font-size: var(--kb-fs-sm); color: var(--kb-ink-muted); }
.kb-article__thumb { margin: var(--kb-s4) 0 0; }
.kb-article__thumb img { border-radius: var(--kb-radius); }

/* 本文（長文は 17px・行間 1.9） */
.kb-prose { font-size: 1.0625rem; line-height: 1.9; }
.kb-prose > * { margin-top: 0; margin-bottom: 1.3em; }
.kb-prose h2 { font-size: var(--kb-fs-h2); margin-top: 2.2em; padding-bottom: 0.35em; border-bottom: 2px solid var(--kb-navy); }
.kb-prose h3 { font-size: var(--kb-fs-h3); margin-top: 1.8em; padding-left: 12px; border-left: 4px solid var(--kb-blue); }
.kb-prose h4 { font-size: 1.0625rem; margin-top: 1.6em; }
.kb-prose ul, .kb-prose ol { padding-left: 1.4em; }
.kb-prose li + li { margin-top: 0.3em; }
.kb-prose blockquote { margin-left: 0; padding: var(--kb-s3) var(--kb-s4); border-left: 4px solid var(--kb-line-strong); background: var(--kb-surface); color: var(--kb-ink-muted); }
.kb-prose table:not(.kb-table) { width: 100%; border-collapse: collapse; font-size: 0.9375rem; background: var(--kb-surface); }
.kb-prose table:not(.kb-table) th, .kb-prose table:not(.kb-table) td { border: 1px solid var(--kb-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.kb-prose table:not(.kb-table) th { background: var(--kb-surface-alt); width: 30%; color: var(--kb-navy); }
.kb-prose figure { margin-left: 0; margin-right: 0; }
.kb-prose img { border-radius: var(--kb-radius-sm); }

/* 広告表記（比較表の直前などに常に表示） */
.kb-ad-notice {
	margin: 0 0 var(--kb-s3); padding: var(--kb-s2) var(--kb-s3);
	background: var(--kb-surface); border: 1px solid var(--kb-line); border-radius: var(--kb-radius-sm);
	font-size: var(--kb-fs-sm); line-height: 1.7; color: var(--kb-ink-muted);
}
.kb-ad-notice__label { display: inline-block; margin-right: var(--kb-s2); padding: 0 8px; border: 1px solid var(--kb-ink-muted); border-radius: var(--kb-radius-sm); font-size: var(--kb-fs-xs); font-weight: 700; color: var(--kb-ink); background: var(--kb-surface); }

/* 空表示 */
.kb-empty { margin: var(--kb-s5) 0; padding: var(--kb-s5); background: var(--kb-surface); border: 1px dashed var(--kb-line-strong); border-radius: var(--kb-radius); }
.kb-empty p { margin: 0 0 var(--kb-s2); }

/* 記事一覧 */
.kb-list { list-style: none; margin: var(--kb-s4) 0 0; padding: 0; display: grid; gap: var(--kb-s3); }
.kb-list__item { padding: var(--kb-s4) var(--kb-s5); background: var(--kb-surface); border: 1px solid var(--kb-line); border-radius: var(--kb-radius); }
.kb-list__title { font-size: var(--kb-fs-lg); margin: 0; }
.kb-list__meta { margin: var(--kb-s1) 0 0; font-size: var(--kb-fs-xs); color: var(--kb-ink-muted); }
.kb-list__excerpt { margin: var(--kb-s2) 0 0; font-size: 0.9375rem; }

.nav-links { display: flex; gap: var(--kb-s3); flex-wrap: wrap; margin: var(--kb-s6) 0; }
.nav-links .page-numbers, .nav-links a { display: inline-flex; align-items: center; min-height: var(--kb-tap); padding: 6px 14px; border: 1px solid var(--kb-line-strong); background: var(--kb-surface); border-radius: var(--kb-radius-sm); text-decoration: none; }
.nav-links .current { background: var(--kb-navy); color: #fff; border-color: var(--kb-navy); }
.post-navigation .nav-links { flex-direction: column; }

.search-form { display: flex; gap: var(--kb-s2); flex-wrap: wrap; }
.search-form label { flex: 1 1 220px; display: flex; }
.search-form .search-field { min-height: var(--kb-control); padding: 6px 12px; border: 1px solid var(--kb-line-strong); border-radius: var(--kb-radius-sm); font: inherit; flex: 1 1 200px; background: var(--kb-surface); }
.search-form .search-submit { min-height: var(--kb-control); padding: 6px 20px; border: 1px solid var(--kb-blue); background: var(--kb-blue); color: #fff; border-radius: var(--kb-radius-sm); font: inherit; font-weight: 700; cursor: pointer; }
.search-form .search-submit:hover { background: var(--kb-blue-dark); }

/* 条件タブ（総合／料金／質問サポート…。公開中のページだけ表示）。押せることが分かるよう枠つきのボタン型 */
.kb-subnav { margin: var(--kb-s4) 0 var(--kb-s5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--kb-s2) var(--kb-s3); }
.kb-subnav__label { margin: 0; font-size: var(--kb-fs-sm); font-weight: 700; color: var(--kb-ink); }
.kb-subnav ul { list-style: none; margin: 0; padding: 4px; display: flex; gap: 4px; background: var(--kb-surface); border: 1px solid var(--kb-line-strong); border-radius: var(--kb-radius); overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.kb-subnav a {
	display: flex; align-items: center; min-height: 40px; padding: 0 var(--kb-s4); white-space: nowrap; text-decoration: none;
	color: var(--kb-ink); font-size: 0.9375rem; font-weight: 700; border-radius: var(--kb-radius-sm);
}
.kb-subnav a:hover { color: var(--kb-blue); background: var(--kb-blue-tint); }
.kb-subnav a[aria-current="page"] { color: #fff; background: var(--kb-navy); }

/* 404 */
.kb-notfound__links { list-style: none; margin: 0 0 var(--kb-s5); padding: 0; display: grid; gap: var(--kb-s2); max-width: 420px; }

@media (max-width: 640px) {
	/* パンくずは1行に収め、長い現在ページ名は省略表示 */
	.kb-breadcrumbs ol { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
	.kb-breadcrumbs li { flex: none; }
	.kb-breadcrumbs li:last-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
	.kb-subnav { display: block; }
	.kb-subnav__label { margin-bottom: var(--kb-s2); }
	.kb-subnav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
	.kb-subnav a { justify-content: center; white-space: normal; text-align: center; min-height: var(--kb-tap); padding: 4px 8px; line-height: 1.4; }
	.kb-list__item { padding: var(--kb-s4); }
}