/**
 * layout.css — ページレイアウト・タイポグラフィ・コンポーネント
 *
 * BATCH 026 で作成。
 * single-card / archive-card / page-compare / page-ranking /
 * page-ranking-type / page-diagnose の inline style= を置換する。
 *
 * 全値は design-tokens.css の var(--cm-*) を参照する。
 * PHP テンプレートで style= 属性を直書きしないこと。
 *
 * source-of-truth: docs/crecamatch-layout-typography-v4.md
 */

/* =====================================================
   ページラッパー
   ===================================================== */

.k-page {
	max-width: var(--cm-max-w-card);
	margin: 0 auto;
	padding: var(--cm-space-8) var(--cm-space-4);
}

.k-page--wide {
	max-width: var(--cm-max-w-list);
}

@media (max-width: 400px) {
	.k-page {
		padding: var(--cm-space-4) var(--cm-space-3);
	}
}

/* =====================================================
   タイポグラフィ — 見出し
   ===================================================== */

.k-page-title {
	font-size: var(--cm-font-lg);
	margin: 0 0 var(--cm-space-3);
	line-height: var(--cm-leading-tight);
}

.k-page-lead {
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
	margin-bottom: var(--cm-space-6);
}

.k-section {
	margin-bottom: var(--cm-space-8);
}

/* h2 セクション見出し（左ボーダーアクセント） */
.k-section-title {
	font-size: var(--cm-font-md);
	border-left: 4px solid var(--cm-color-primary);
	padding-left: var(--cm-space-2);
	margin-bottom: var(--cm-space-4);
	line-height: var(--cm-leading-tight);
}

.k-section-title--sm {
	font-size: var(--cm-font-base);
	margin-bottom: var(--cm-space-3);
}

/* =====================================================
   タイポグラフィ — 本文・リンク
   ===================================================== */

.k-back-link {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-primary);
	text-decoration: none;
}
.k-back-link:hover { text-decoration: underline; }

.k-text-sm   { font-size: var(--cm-font-sm); }
.k-text-xs   { font-size: var(--cm-font-xs); }
.k-text-muted{ color: var(--cm-color-text-muted); }
.k-text-meta { font-size: var(--cm-font-sm); color: var(--cm-color-text-meta); }
.k-text-subtle { color: var(--cm-color-text-subtle); }

/* =====================================================
   フィルターフォーム（archive / ranking / diagnose）
   ===================================================== */

.k-filter-form {
	display: flex;
	align-items: center;
	gap: var(--cm-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--cm-space-6);
}

.k-filter-label {
	font-size: var(--cm-font-sm);
	font-weight: bold;
	white-space: nowrap;
}

.k-filter-select {
	padding: .375rem var(--cm-space-3);
	border: 1px solid var(--cm-color-border-input);
	border-radius: var(--cm-radius-sm);
	font-size: var(--cm-font-sm);
	background: var(--cm-color-white);
}
.k-filter-select:focus {
	outline: 2px solid var(--cm-color-primary);
	outline-offset: 1px;
}

.k-filter-btn {
	padding: .375rem var(--cm-space-4);
	font-size: var(--cm-font-sm);
	border: 1px solid var(--cm-color-primary);
	border-radius: var(--cm-radius-sm);
	background: var(--cm-color-white);
	color: var(--cm-color-primary);
	cursor: pointer;
}
.k-filter-btn:hover { background: var(--cm-color-primary-bg); }
.k-filter-btn:focus-visible { outline: 2px solid var(--cm-color-primary); outline-offset: 1px; }

.k-filter-reset {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-text-subtle);
	text-decoration: none;
}
.k-filter-reset:hover { text-decoration: underline; }

/* =====================================================
   診断フォーム
   ===================================================== */

.k-diag-form {
	background: var(--cm-color-bg-form);
	border: 1px solid var(--cm-color-border);
	border-radius: var(--cm-radius-md);
	padding: var(--cm-space-5);
	margin-bottom: var(--cm-space-8);
}

.k-diag-form-lead {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-text-muted);
	margin: 0 0 var(--cm-space-4);
}

.k-diag-grid {
	display: grid;
	gap: var(--cm-space-4);
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.k-diag-field-label {
	display: block;
	font-size: var(--cm-font-sm);
	font-weight: bold;
	margin-bottom: var(--cm-space-1);
}

.k-diag-select {
	width: 100%;
	padding: .375rem var(--cm-space-2);
	border: 1px solid var(--cm-color-border-input);
	border-radius: var(--cm-radius-sm);
	font-size: var(--cm-font-sm);
}
.k-diag-select:focus { outline: 2px solid var(--cm-color-primary); outline-offset: 1px; }

.k-diag-actions {
	margin-top: var(--cm-space-5);
	display: flex;
	gap: var(--cm-space-3);
	flex-wrap: wrap;
	align-items: center;
}

.k-diag-submit {
	padding: var(--cm-space-2) var(--cm-space-6);
	background: var(--cm-color-primary);
	color: var(--cm-color-white);
	border: none;
	border-radius: var(--cm-radius-sm);
	font-size: var(--cm-font-sm);
	cursor: pointer;
}
.k-diag-submit:hover { background: var(--cm-color-primary-dark); }
.k-diag-submit:focus-visible { outline: 2px solid var(--cm-color-primary); outline-offset: 2px; }

.k-diag-reset {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-text-subtle);
	text-decoration: none;
}
.k-diag-reset:hover { text-decoration: underline; }

/* =====================================================
   カードグリッド（archive / diagnose）
   ===================================================== */

.k-card-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--cm-space-6);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (max-width: 400px) {
	.k-card-grid { grid-template-columns: 1fr; gap: var(--cm-space-4); }
}

.k-card-item {
	border: 1px solid var(--cm-color-border-light);
	border-radius: var(--cm-radius-md);
	padding: var(--cm-space-4);
	background: var(--cm-color-white);
	box-shadow: var(--cm-shadow-sm);
}

.k-card-image {
	margin-bottom: var(--cm-space-3);
	min-height: 60px;
}

/* カード名（h2 / h3 — flex with inline badge） */
.k-card-title {
	display: flex;
	align-items: center;
	gap: var(--cm-space-2);
	flex-wrap: wrap;
	margin: 0 0 var(--cm-space-1);
}

.k-card-title-link {
	font-size: var(--cm-font-base);
	font-weight: bold;
	text-decoration: none;
	color: inherit;
	flex: 1 1 auto;
}
.k-card-title-link:hover { color: var(--cm-color-primary); }

/* "比較中" バッジ */
.k-compare-badge {
	flex-shrink: 0;
	font-size: .7rem;
	background: var(--cm-color-primary);
	color: var(--cm-color-white);
	padding: .1rem .45rem;
	border-radius: var(--cm-radius-sm);
	white-space: nowrap;
	font-weight: normal;
}

/* カード基本情報 DL */
.k-card-meta {
	margin: 0;
	font-size: var(--cm-font-sm);
	line-height: var(--cm-leading-loose);
}
.k-card-meta dt {
	font-weight: bold;
	display: inline;
}
.k-card-meta dd {
	margin: 0;
	display: inline;
}

.k-card-actions {
	margin: var(--cm-space-3) 0 0;
	font-size: var(--cm-font-sm);
}
.k-card-actions a { color: var(--cm-color-primary); }

/* =====================================================
   ランキングリスト（page-ranking / page-ranking-type）
   ===================================================== */

.k-rank-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--cm-space-4);
}

.k-rank-item {
	border: 1px solid var(--cm-color-border-light);
	border-radius: var(--cm-radius-md);
	padding: var(--cm-space-4);
	background: var(--cm-color-white);
	display: flex;
	gap: var(--cm-space-4);
	align-items: flex-start;
	box-shadow: var(--cm-shadow-sm);
}

@media (max-width: 400px) {
	.k-rank-item { gap: var(--cm-space-3); padding: var(--cm-space-3); }
}

/* 順位番号 */
.k-rank-number {
	min-width: 2.5rem;
	text-align: center;
	flex-shrink: 0;
}

.k-rank-num {
	display: inline-block;
	font-size: 1.25rem;
	font-weight: bold;
	color: var(--cm-color-text);
	line-height: 1;
}
.k-rank-num--gold   { color: #c8960c; }
.k-rank-num--silver { color: #888888; }
.k-rank-num--bronze { color: #a0522d; }

.k-rank-unit {
	display: block;
	font-size: .7rem;
	color: var(--cm-color-text-dim);
}

/* ランキングカード本体 */
.k-rank-body {
	flex: 1;
	min-width: 0;
}

.k-rank-card-title {
	font-size: var(--cm-font-base);
	margin: 0 0 var(--cm-space-2);
	display: flex;
	align-items: center;
	gap: var(--cm-space-2);
	flex-wrap: wrap;
}

.k-rank-card-actions {
	margin: var(--cm-space-2) 0 0;
	font-size: var(--cm-font-sm);
}
.k-rank-card-actions a { color: var(--cm-color-primary); }

/* 固定ランキングナビ */
.k-rank-sub-nav {
	margin-bottom: var(--cm-space-6);
}
.k-rank-sub-nav-label {
	font-size: .8rem;
	color: var(--cm-color-text-subtle);
	margin: 0 0 .4rem;
}
.k-rank-sub-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--cm-space-2);
	flex-wrap: wrap;
}
.k-rank-sub-nav-list a {
	display: inline-block;
	font-size: .8rem;
	padding: .25rem var(--cm-space-2);
	border: 1px solid var(--cm-color-border-input);
	border-radius: var(--cm-radius-sm);
	text-decoration: none;
	color: var(--cm-color-primary);
	white-space: nowrap;
}
.k-rank-sub-nav-list a:hover { background: var(--cm-color-primary-bg); }

/* =====================================================
   単一カード詳細（single-card）
   ===================================================== */

.k-card-header {
	margin-bottom: var(--cm-space-6);
}

.k-card-header-title {
	font-size: var(--cm-font-lg);
	margin: 0 0 var(--cm-space-1);
}

/* =====================================================
   E-E-A-T — 著者ボックス・情報確認日（BATCH 031）
   ===================================================== */

/* 著者・編集部帰属ボックス */
.kmc-author-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cm-space-2) var(--cm-space-3);
	padding: var(--cm-space-2) var(--cm-space-3);
	margin-bottom: var(--cm-space-3);
	background: var(--cm-color-bg-form);
	border-radius: var(--cm-radius-sm);
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
	line-height: 1.5;
}

.kmc-author-box__author {
	font-weight: bold;
	color: var(--cm-color-text);
}

.kmc-author-box__policy-link {
	color: var(--cm-color-primary);
	text-decoration: underline;
	font-size: var(--cm-font-xs);
}

.kmc-author-box__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-space-2) var(--cm-space-4);
	width: 100%;
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
}

.kmc-author-box__updated,
.kmc-author-box__verified {
	white-space: nowrap;
}

/* コンパクト版（ランキング・比較ページ） */
.kmc-author-box--compact {
	padding: var(--cm-space-1) var(--cm-space-3);
	margin-bottom: var(--cm-space-2);
	background: transparent;
	border-radius: 0;
}

/* ページ先頭コンパクト編集部注記 */
.kmc-editorial-note {
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
	margin: 0 0 var(--cm-space-3);
	line-height: 1.6;
}

.kmc-editorial-note__link {
	color: var(--cm-color-primary);
	text-decoration: underline;
}

/* 情報確認日 */
.kmc-fact-check {
	font-size: var(--cm-font-xs);
	margin: 0 0 var(--cm-space-1);
	line-height: 1.6;
}

.kmc-fact-check--verified {
	color: var(--cm-color-text-muted);
}

.kmc-fact-check--unverified {
	color: var(--cm-color-text-dim);
}

.kmc-fact-check__label {
	font-weight: bold;
}

.kmc-fact-check__source-link {
	color: inherit;
	text-decoration: underline;
}

.kmc-fact-check-wrap {
	padding-top: var(--cm-space-2);
}

/* レスポンシブ: 360px / 390px */
@media (max-width: 400px) {
	.kmc-author-box {
		gap: var(--cm-space-1) var(--cm-space-2);
	}
	.kmc-author-box__meta {
		gap: var(--cm-space-1) var(--cm-space-2);
	}
}

.k-card-kana {
	margin: 0 0 var(--cm-space-2);
	color: var(--cm-color-text-subtle);
	font-size: var(--cm-font-sm);
}

.k-card-catch {
	margin: 0 0 var(--cm-space-4);
	font-size: var(--cm-font-base);
	color: var(--cm-color-text);
}

/* =====================================================
   広告開示・PR ラベル・共通 CTA リンク（BATCH 030）
   ===================================================== */

/* 広告開示バナー（全外部CTAページ必須） */
.kmc-ad-notice {
	padding: var(--cm-space-2) var(--cm-space-4);
	margin-bottom: var(--cm-space-4);
	background: var(--cm-color-bg-form);
	border-left: 3px solid var(--cm-color-border-light);
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
	line-height: 1.6;
}

.kmc-ad-notice a {
	color: var(--cm-color-text-muted);
	text-decoration: underline;
}

/* PR ラベルバッジ（アフィリエイトCTA近接必須） */
.kmc-pr-label {
	display: inline-block;
	font-size: .65rem;
	font-weight: bold;
	color: var(--cm-color-white);
	background: var(--cm-color-orange-dark, #c05621);
	padding: .1rem .4rem;
	border-radius: 3px;
	vertical-align: middle;
	line-height: 1.4;
	margin-right: .3rem;
}

/* 共通 CTA リンク（disclosure-components.php → kureka_card_cta_with_disclosure_html） */
.kmc-cta-link {
	display: inline-block;
	padding: .5rem 1.25rem;
	background: var(--cm-color-primary);
	color: var(--cm-color-white);
	text-decoration: none;
	border-radius: var(--cm-radius-sm);
	font-size: var(--cm-font-sm);
	font-weight: bold;
	white-space: nowrap;
}

.kmc-cta-link:hover {
	background: var(--cm-color-primary-dark);
}

.kmc-cta-link:focus-visible {
	outline: 3px solid var(--cm-color-primary);
	outline-offset: 2px;
	border-radius: var(--cm-radius-sm);
}

/* 比較テーブル内 CTA（table-cell 向け小サイズ） */
.kmc-cta-link--compare {
	background: transparent;
	color: var(--cm-color-primary);
	padding: 0;
	font-size: var(--cm-font-sm);
	font-weight: normal;
	text-decoration: underline;
}

.kmc-cta-link--compare:hover {
	background: transparent;
	text-decoration: none;
}

/* ショートコード [kureka_card_cta] のスタンドアロン表示は .kmc-cta-link で統一 */

/* CTAボタン行（公式サイト + 比較に追加） */
.k-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-space-2);
	margin-top: var(--cm-space-3);
}

.k-cta-btn {
	display: inline-block;
	padding: var(--cm-space-2) var(--cm-space-5);
	border-radius: var(--cm-radius-sm);
	font-size: var(--cm-font-sm);
	text-decoration: none;
	white-space: nowrap;
}

.k-cta-btn--primary {
	background: var(--cm-color-primary);
	color: var(--cm-color-white);
	border: 1px solid var(--cm-color-primary);
}
.k-cta-btn--primary:hover { background: var(--cm-color-primary-dark); border-color: var(--cm-color-primary-dark); }

.k-cta-btn--outline {
	background: var(--cm-color-white);
	color: var(--cm-color-primary);
	border: 1px solid var(--cm-color-primary);
}
.k-cta-btn--outline:hover { background: var(--cm-color-primary-bg); }

.k-cta-btn:focus-visible {
	outline: 3px solid var(--cm-color-primary);
	outline-offset: 2px;
}

/* 基本情報テーブル */
.k-info-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cm-font-xs);
}

.k-info-th {
	width: 40%;
	text-align: left;
	padding: .6rem var(--cm-space-3);
	background: var(--cm-color-bg-table);
	border: 1px solid var(--cm-color-border-light);
	white-space: nowrap;
	font-weight: bold;
}

.k-info-td {
	padding: .6rem var(--cm-space-3);
	border: 1px solid var(--cm-color-border-light);
	vertical-align: top;
}

/* 特典概要テキスト */
.k-benefit-text {
	font-size: var(--cm-font-xs);
	line-height: var(--cm-leading-loose);
	white-space: pre-line;
}

/* カード画像ラッパー */
.k-card-img-wrap {
	margin-bottom: var(--cm-space-6);
}

/* =====================================================
   比較ページ（page-compare）
   ===================================================== */

/* ツール説明バナー */
.k-cmp-banner {
	background: var(--cm-color-primary-bg);
	border: 1px solid var(--cm-color-primary-border);
	border-radius: var(--cm-radius-lg);
	padding: var(--cm-space-4) var(--cm-space-5);
	margin-bottom: var(--cm-space-6);
	font-size: var(--cm-font-sm);
	color: var(--cm-color-text-meta);
}

/* h1 + 追加ボタン行 */
.k-cmp-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--cm-space-2);
	margin-bottom: var(--cm-space-4);
}

.k-cmp-add-btn {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-primary);
	text-decoration: none;
	border: 1px solid var(--cm-color-primary);
	padding: .3rem var(--cm-space-4);
	border-radius: var(--cm-radius-sm);
	white-space: nowrap;
	flex-shrink: 0;
}
.k-cmp-add-btn:hover { background: var(--cm-color-primary-bg); }

/* プリセット pill ナビ */
.k-preset-pills-wrap {
	margin-bottom: var(--cm-space-6);
}
.k-preset-pills-label {
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-meta);
	margin: 0 0 .6rem;
}
.k-preset-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-space-2);
}

.k-preset-pill {
	display: inline-block;
	font-size: .8rem;
	padding: .35rem var(--cm-space-4);
	border-radius: var(--cm-radius-full);
	text-decoration: none;
	border: 1px solid var(--cm-color-border-light);
	background: var(--cm-color-white);
	color: var(--cm-color-text);
	white-space: nowrap;
}
.k-preset-pill:hover { border-color: var(--cm-color-primary); color: var(--cm-color-primary); }
.k-preset-pill--active {
	border-color: var(--cm-color-primary);
	background: var(--cm-color-primary);
	color: var(--cm-color-white);
}

/* デフォルト表示プリセットグリッド */
.k-preset-grid {
	display: grid;
	gap: var(--cm-space-4);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	margin-bottom: var(--cm-space-8);
}

.k-preset-card {
	display: block;
	border: 1px solid var(--cm-color-border-light);
	border-radius: var(--cm-radius-lg);
	padding: var(--cm-space-4) var(--cm-space-5);
	text-decoration: none;
	color: inherit;
	background: var(--cm-color-white);
	box-shadow: var(--cm-shadow-sm);
	transition: box-shadow .15s;
}
.k-preset-card:hover { box-shadow: var(--cm-shadow-md); }

.k-preset-card-label {
	font-weight: bold;
	color: var(--cm-color-primary);
	margin-bottom: var(--cm-space-1);
}
.k-preset-card-desc {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-text-meta);
}

/* =====================================================
   スクリーンリーダー専用ユーティリティ
   ===================================================== */

.k-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =====================================================
   比較テーブル（BATCH 029 a11y・レスポンシブ対応）
   ===================================================== */

.k-cmp-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--cm-radius-md);
	border: 1px solid var(--cm-color-border-light);
}

.k-cmp-table-wrap:focus-visible {
	outline: 3px solid var(--cm-color-primary);
	outline-offset: 2px;
}

.k-cmp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cm-font-xs);
	min-width: 480px;
}

/* キャプション（WCAG 2.1 SC 1.3.1） */
.k-cmp-table__caption {
	caption-side: top;
	text-align: left;
	padding: var(--cm-space-2) var(--cm-space-3);
	font-size: var(--cm-font-xs);
	font-weight: bold;
	color: var(--cm-color-text-muted);
	background: var(--cm-color-bg-light);
	border-bottom: 1px solid var(--cm-color-border-light);
}

/* 左端ラベル列 — 比較項目ヘッダー */
.k-cmp-th-label {
	width: 28%;
	min-width: 100px;
	text-align: left;
	padding: var(--cm-space-3);
	background: var(--cm-color-primary-bg);
	border: 1px solid var(--cm-color-primary-border);
	white-space: nowrap;
	position: sticky;
	left: 0;
	z-index: 3;
}

/* カード名ヘッダー列 */
.k-cmp-th-card {
	text-align: center;
	padding: var(--cm-space-3);
	background: var(--cm-color-primary-bg);
	border: 1px solid var(--cm-color-primary-border);
}

/* カード名行 — 上部スティッキー */
.k-cmp-thead-name-row th {
	position: sticky;
	top: 0;
	z-index: 4;
}

.k-cmp-thead-name-row .k-cmp-th-label {
	z-index: 5;
}

/* カード画像行 */
.k-cmp-thead-image-row td {
	text-align: center;
	padding: var(--cm-space-2) var(--cm-space-3);
	border: 1px solid var(--cm-color-border-light);
	background: var(--cm-color-bg-card);
}

.k-cmp-th-image img {
	max-width: 100%;
	height: auto;
}

.k-cmp-card-link {
	text-decoration: none;
	color: var(--cm-color-primary);
	font-weight: bold;
}
.k-cmp-remove-link {
	font-size: var(--cm-font-2xs);
	color: var(--cm-color-text-dim);
	text-decoration: none;
}
.k-cmp-remove-link:hover { text-decoration: underline; }

/* tbody 行ラベル — スティッキー左列 */
.k-cmp-row-th {
	text-align: left;
	padding: .6rem var(--cm-space-3);
	background: var(--cm-color-bg-card);
	border: 1px solid var(--cm-color-border-light);
	white-space: nowrap;
	font-weight: bold;
	position: sticky;
	left: 0;
	z-index: 2;
}

.k-cmp-row-td {
	padding: .6rem var(--cm-space-3);
	border: 1px solid var(--cm-color-border-light);
	text-align: center;
	vertical-align: top;
}

/* ゼブラストライプ */
.k-cmp-table tbody tr:nth-child(even) .k-cmp-row-td {
	background: var(--cm-color-bg-form);
}
.k-cmp-table tbody tr:nth-child(even) .k-cmp-row-th {
	background: var(--cm-color-bg-form);
}

.k-cmp-td-text-block {
	text-align: left;
	display: block;
	white-space: pre-line;
	font-size: var(--cm-font-sm);
}

/* 列幅バリアント */
.k-cmp-table--2col .k-cmp-th-card,
.k-cmp-table--2col .k-cmp-row-td { width: 36%; }

.k-cmp-table--3col .k-cmp-th-card,
.k-cmp-table--3col .k-cmp-row-td { width: 24%; }

/* スクロールヒント（モバイル） */
@media (max-width: 600px) {
	.k-cmp-table-wrap::after {
		content: '';
		display: block;
		height: 0;
	}
	.k-cmp-table-wrap {
		background-image: linear-gradient(to right, var(--cm-color-bg-card), var(--cm-color-bg-card)),
		                  linear-gradient(to right, rgba(0,0,0,.08), transparent);
		background-position: right center, right center;
		background-repeat: no-repeat;
		background-size: 20px 100%, 8px 100%;
		background-attachment: local, scroll;
	}
}

/* 360px / 390px — 極小画面 */
@media (max-width: 400px) {
	.k-cmp-table {
		font-size: var(--cm-font-2xs);
		min-width: 320px;
	}
	.k-cmp-th-label,
	.k-cmp-row-th {
		min-width: 72px;
		padding: .4rem var(--cm-space-2);
	}
	.k-cmp-th-card,
	.k-cmp-row-td { padding: .4rem var(--cm-space-2); }
}

/* シミュレーター誘導ボックス */
.k-cmp-sim-box {
	margin-top: var(--cm-space-5);
	padding: var(--cm-space-4) var(--cm-space-5);
	background: var(--cm-color-orange-bg);
	border: 1px solid var(--cm-color-orange-border);
	border-radius: var(--cm-radius-md);
}
.k-cmp-sim-box-title {
	margin: 0 0 var(--cm-space-2);
	font-size: var(--cm-font-sm);
	font-weight: bold;
	color: var(--cm-color-orange-dark);
}
.k-cmp-sim-btn {
	display: inline-block;
	font-size: var(--cm-font-sm);
	padding: .4rem var(--cm-space-4);
	background: var(--cm-color-orange);
	color: var(--cm-color-white);
	border-radius: var(--cm-radius-sm);
	text-decoration: none;
}
.k-cmp-sim-btn:hover { opacity: .9; }
.k-cmp-sim-note {
	margin: var(--cm-space-2) 0 0;
	font-size: var(--cm-font-xs);
	color: var(--cm-color-orange-dark);
}

/* 比較後CTAバー */
.k-cmp-cta-bar {
	margin-top: var(--cm-space-4);
	padding: var(--cm-space-4) var(--cm-space-5);
	background: var(--cm-color-bg-form);
	border: 1px solid var(--cm-color-border-light);
	border-radius: var(--cm-radius-md);
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-space-3);
	align-items: center;
}
.k-cmp-cta-bar-label { font-size: var(--cm-font-sm); color: var(--cm-color-text-meta); }
.k-cmp-cta-bar a { font-size: var(--cm-font-sm); color: var(--cm-color-primary); text-decoration: underline; }

/* ツール間ナビゲーション（比較ページ下部） */
.k-tool-nav-wrap {
	margin-top: var(--cm-space-10);
	padding: var(--cm-space-5);
	background: var(--cm-color-primary-bg);
	border: 1px solid var(--cm-color-primary-border);
	border-radius: var(--cm-radius-lg);
}
.k-tool-nav-title {
	margin: 0 0 var(--cm-space-3);
	font-size: var(--cm-font-sm);
	font-weight: bold;
	color: var(--cm-color-text-meta);
}
.k-tool-nav-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-space-2);
}
.k-tool-pill {
	display: inline-block;
	font-size: .8rem;
	padding: .35rem var(--cm-space-4);
	border: 1px solid var(--cm-color-primary-border);
	border-radius: var(--cm-radius-full);
	text-decoration: none;
	color: var(--cm-color-primary);
	background: var(--cm-color-white);
}
.k-tool-pill:hover { background: var(--cm-color-primary-bg); }

/* =====================================================
   診断ページ（page-diagnose）
   ===================================================== */

.k-diag-intro-banner {
	background: var(--cm-color-primary-bg);
	border: 1px solid var(--cm-color-primary-border);
	border-radius: var(--cm-radius-md);
	padding: .9rem var(--cm-space-5);
	margin-bottom: var(--cm-space-6);
	font-size: var(--cm-font-sm);
	color: var(--cm-color-text-meta);
}
.k-diag-intro-banner strong {
	display: block;
	margin-bottom: var(--cm-space-1);
	color: var(--cm-color-primary);
}
.k-diag-intro-banner a { color: var(--cm-color-primary); }

.k-diag-reason-box {
	background: #fffbea;
	border: 1px solid #f5d060;
	border-radius: var(--cm-radius-md);
	padding: var(--cm-space-4) var(--cm-space-5);
	margin-bottom: var(--cm-space-6);
	font-size: var(--cm-font-xs);
}
.k-diag-reason-title {
	font-weight: bold;
	display: block;
	margin-bottom: var(--cm-space-2);
}
.k-diag-reason-body { margin: 0; color: var(--cm-color-text-muted); }

/* こんな方におすすめリスト */
.k-diag-fit-list {
	list-style: none;
	margin: var(--cm-space-3) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-space-2);
}
.k-diag-fit-item {
	font-size: var(--cm-font-xs);
	padding: .25rem var(--cm-space-3);
	border-radius: var(--cm-radius-full);
	background: #f0f9f4;
	color: #1a7a3e;
	border: 1px solid #a8dbb8;
}
.k-diag-fit-item--ok::before {
	content: "✓ ";
	font-weight: bold;
}

/* 第一候補カード */
.k-diag-result-first {
	border: 2px solid var(--cm-color-primary);
	border-radius: var(--cm-radius-lg);
	padding: var(--cm-space-5);
	margin-bottom: var(--cm-space-5);
	background: var(--cm-color-primary-bg);
	position: relative;
}

.k-diag-result-badge {
	position: absolute;
	top: -12px;
	left: var(--cm-space-4);
	background: var(--cm-color-primary);
	color: var(--cm-color-white);
	font-size: var(--cm-font-2xs);
	font-weight: bold;
	padding: .2rem var(--cm-space-3);
	border-radius: var(--cm-radius-full);
}

/* 第二候補カード */
.k-diag-result-second {
	border: 1px solid var(--cm-color-border-light);
	border-radius: var(--cm-radius-lg);
	padding: var(--cm-space-5);
	margin-bottom: var(--cm-space-5);
	background: var(--cm-color-bg-card);
	position: relative;
}

.k-diag-card-title {
	font-size: var(--cm-font-md);
	margin: var(--cm-space-1) 0 var(--cm-space-2);
}

.k-diag-card-meta { font-size: var(--cm-font-sm); color: var(--cm-color-text-muted); margin: 0 0 var(--cm-space-3); }
.k-diag-card-actions { font-size: var(--cm-font-sm); margin-top: var(--cm-space-3); }
.k-diag-card-actions a { color: var(--cm-color-primary); }

/* その他候補リスト */
.k-diag-other-list {
	list-style: none;
	margin: 0 0 var(--cm-space-6);
	padding: 0;
}
.k-diag-other-item {
	border-bottom: 1px solid var(--cm-color-border-table);
	padding: var(--cm-space-2) 0;
	font-size: var(--cm-font-sm);
	display: flex;
	align-items: baseline;
	gap: var(--cm-space-3);
}
.k-diag-other-item:last-child { border-bottom: none; }
.k-diag-other-name { font-weight: bold; }
.k-diag-other-name a { text-decoration: none; color: var(--cm-color-primary); }
.k-diag-other-name a:hover { text-decoration: underline; }
.k-diag-other-meta { color: var(--cm-color-text-meta); }

/* =====================================================
   状態 UI — 空/エラー/警告/fallback（BATCH 032）
   ===================================================== */

/* 0件・空状態（汎用） */
.k-diag-empty {
	padding: var(--cm-space-4);
	border: 1px solid var(--cm-color-border-table);
	border-radius: var(--cm-radius-md);
	color: var(--cm-color-text-muted);
	font-size: var(--cm-font-sm);
}

/* 0件・エラー（警告色付き）— page-two-card-optimizer / simulator 等 */
.k-no-result {
	padding: var(--cm-space-4) var(--cm-space-5);
	background: var(--cm-color-bg-form);
	border: 1px solid var(--cm-color-border-light);
	border-radius: var(--cm-radius-md);
	color: var(--cm-color-text-muted);
	font-size: var(--cm-font-sm);
	margin-top: var(--cm-space-4);
}

/* 空状態ブロック: アイコン + メッセージ + 次アクション */
.k-empty-state {
	padding: var(--cm-space-6) var(--cm-space-5);
	border: 1px solid var(--cm-color-border-table);
	border-radius: var(--cm-radius-md);
	text-align: center;
	background: var(--cm-color-bg-form);
}

.k-empty-state__message {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-text-muted);
	margin: 0 0 var(--cm-space-4);
}

.k-empty-state__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-space-2) var(--cm-space-3);
	justify-content: center;
}

.k-empty-state__actions a {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-primary);
	text-decoration: underline;
}

/* 警告ボックス（避けるべき情報・注意事項） */
.k-state-warn {
	padding: var(--cm-space-4) var(--cm-space-5);
	background: #fef2f2;
	border: 1px solid #fca5a5;
	border-radius: var(--cm-radius-md);
	color: #7f1d1d;
	font-size: var(--cm-font-sm);
	margin-top: var(--cm-space-6);
}

.k-state-warn ul {
	margin: var(--cm-space-2) 0 0;
	padding-left: 1.25rem;
	line-height: var(--cm-leading-loose, 1.8);
}

/* フォームフィールドラッパー */
.k-field {
	margin-bottom: var(--cm-space-5);
}

.k-field-label {
	display: block;
	font-weight: bold;
	margin-bottom: var(--cm-space-2);
	font-size: var(--cm-font-sm);
}

/* 360px / 390px — 空状態 */
@media (max-width: 400px) {
	.k-empty-state { padding: var(--cm-space-4) var(--cm-space-3); }
	.k-empty-state__actions { flex-direction: column; align-items: center; }
	.k-state-warn { padding: var(--cm-space-3) var(--cm-space-4); }
}

/* ハブリンクリスト */
.k-hub-links { list-style: none; margin: var(--cm-space-3) 0 0; padding: 0; }
.k-hub-links li { margin-bottom: var(--cm-space-2); }
.k-hub-links a { color: var(--cm-color-primary); font-size: var(--cm-font-sm); }

/* =====================================================
   ページネーション余白補正
   ===================================================== */

.k-pagination {
	margin-top: var(--cm-space-8);
	text-align: center;
}

/* =====================================================
   フォーカス統一（layout.css 内のインタラクティブ要素）
   ===================================================== */

.k-card-title-link:focus-visible,
.k-back-link:focus-visible,
.k-cmp-add-btn:focus-visible,
.k-cmp-card-link:focus-visible,
.k-cmp-remove-link:focus-visible,
.kmc-cta-link:focus-visible,
.k-preset-pill:focus-visible,
.k-preset-card:focus-visible,
.k-tool-pill:focus-visible,
.k-cmp-sim-btn:focus-visible,
.k-cmp-cta-bar a:focus-visible,
.k-diag-card-actions a:focus-visible,
.k-hub-links a:focus-visible,
.k-rank-card-actions a:focus-visible,
.k-rank-sub-nav-list a:focus-visible {
	outline: 3px solid var(--cm-color-primary);
	outline-offset: 2px;
	border-radius: var(--cm-radius-sm);
}

/* =====================================================
   BATCH 034 — アクセシビリティ・inline-style置換
   ===================================================== */

/* ランキング サブナビ 現在地 (span) */
.k-rank-sub-nav-current {
	display: inline-block;
	font-size: var(--cm-font-xs);
	padding: .25rem var(--cm-space-2);
	border: 1px solid var(--cm-color-primary);
	border-radius: var(--cm-radius-sm);
	background: var(--cm-color-primary-bg);
	color: var(--cm-color-primary);
	white-space: nowrap;
	font-weight: bold;
	cursor: default;
}

/* 診断ページ — カードタイトルリンク */
.k-diag-card-title-link {
	color: var(--cm-color-primary);
	text-decoration: none;
}
.k-diag-card-title-link:hover { text-decoration: underline; }
.k-diag-card-title-link:focus-visible {
	outline: 3px solid var(--cm-color-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* 第二候補タイトルリンク（色継承） */
.k-diag-card-title-link--inherit {
	color: inherit;
	text-decoration: none;
}
.k-diag-card-title-link--inherit:hover { text-decoration: underline; }
.k-diag-card-title-link--inherit:focus-visible {
	outline: 3px solid var(--cm-color-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* k-card-meta に margin-bottom を付加するバリアント */
.k-card-meta--mb {
	margin-bottom: var(--cm-space-3);
}

/* 第二候補バッジ（グレー） */
.k-diag-result-badge--second {
	background: var(--cm-color-text-meta);
}

/* 第二候補カードタイトル（小サイズ） */
.k-diag-card-title--sm {
	font-size: var(--cm-font-base);
}

/* 2枚持ち提案ボックス */
.k-diag-two-card-box {
	margin-bottom: var(--cm-space-6);
}
.k-diag-two-card-title {
	display: block;
	margin-bottom: var(--cm-space-2);
	color: var(--cm-color-green-dark);
	font-weight: bold;
}
.k-diag-two-card-desc {
	margin: 0 0 var(--cm-space-3);
	color: var(--cm-color-text);
}

/* グリーン系 CTA ボタン */
.k-cta-btn--green {
	background: var(--cm-color-green);
	color: var(--cm-color-white);
	border-color: var(--cm-color-green);
	font-weight: bold;
}
.k-cta-btn--green:hover {
	background: var(--cm-color-green-dark);
	border-color: var(--cm-color-green-dark);
}

/* グリーン系インラインリンク */
.k-link-green {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-green);
	text-decoration: underline;
}
.k-link-green:hover { color: var(--cm-color-green-dark); }
.k-link-green:focus-visible {
	outline: 3px solid var(--cm-color-green);
	outline-offset: 2px;
	border-radius: 2px;
}

/* その他候補 セクション区切り見出し */
.k-diag-section-divider {
	margin-top: var(--cm-space-6);
	border-bottom: 1px solid var(--cm-color-border-table);
	padding-bottom: var(--cm-space-2);
}

/* カードグリッド 下余白バリアント */
.k-card-grid--mb {
	margin-bottom: var(--cm-space-6);
}

/* 診断 関連ナビゲーション */
.k-diag-related-nav {
	margin-top: var(--cm-space-8);
	padding-top: var(--cm-space-6);
	border-top: 1px solid var(--cm-color-border-light);
}
.k-diag-nav-title {
	font-weight: bold;
	margin: 0 0 var(--cm-space-3);
}

/* ツール案内 CTA（diagnose内） margin-top バリアント */
.k-tool-cta--mt {
	margin-top: var(--cm-space-8);
}
.k-tool-cta-heading {
	display: block;
	margin-bottom: var(--cm-space-2);
}

/* 診断ツール案内リスト */
.k-diag-cta-list {
	margin: 0;
	padding-left: 1.2rem;
	line-height: var(--cm-leading-loose);
}
.k-diag-cta-list a { color: var(--cm-color-primary); }
.k-diag-cta-list a:focus-visible {
	outline: 3px solid var(--cm-color-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* 「戻る」リンク ラッパー */
.k-back-link-wrap {
	margin-top: var(--cm-space-8);
}

/* diagnose ページタイトル（下余白を tight に） */
.k-page-title--diag {
	margin-bottom: var(--cm-space-2);
}

/* compare / ranking ページタイトル margin なし */
.k-page-title--no-mb {
	margin-bottom: 0;
}

/* compare バナー内テキスト */
.k-cmp-banner-text {
	margin: 0;
}

/* 比較ページ 比較テキスト */
.k-cmp-intro-text {
	margin-bottom: var(--cm-space-6);
}

/* ランキングタイプ パンくずテキスト */
.k-breadcrumb-text {
	margin-bottom: var(--cm-space-2);
}

/* ランキングタイプ サブナビ margin */
.k-rank-sub-nav--mb {
	margin-bottom: var(--cm-space-5);
}

/* =====================================================
   BATCH 036 — Visual QA / Mobile 360px 修正
   ===================================================== */

/* -------------------------------------------------------
   タッチターゲット最小高 44px（Apple HIG / WCAG 2.5.5）
   比較テーブル内の --compare バリアントは除外する
   ------------------------------------------------------- */
.kmc-cta-link:not(.kmc-cta-link--compare) {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.k-cta-btn {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.k-diag-submit {
	min-height: 44px;
}

/* -------------------------------------------------------
   フィルターフォーム — 360px / 390px 縦積み
   ------------------------------------------------------- */
@media (max-width: 400px) {
	.k-filter-form {
		flex-direction: column;
		align-items: stretch;
	}
	.k-filter-select {
		width: 100%;
		box-sizing: border-box;
	}
	.k-filter-btn {
		width: 100%;
		box-sizing: border-box;
	}
}

/* -------------------------------------------------------
   preset pills — 360px 折り返し時に pill が画面幅を超えない
   ------------------------------------------------------- */
@media (max-width: 400px) {
	.k-preset-pill {
		font-size: var(--cm-font-2xs);
		padding: .25rem var(--cm-space-3);
	}
}

/* -------------------------------------------------------
   基本情報テーブル — 360px で white-space を解除
   ------------------------------------------------------- */
@media (max-width: 400px) {
	.k-info-th {
		white-space: normal;
		width: 36%;
		padding: .5rem var(--cm-space-2);
	}
	.k-info-td {
		padding: .5rem var(--cm-space-2);
	}
}

/* -------------------------------------------------------
   CTA ボタン行 — 360px で縦積み
   ------------------------------------------------------- */
@media (max-width: 400px) {
	.k-cta-row {
		flex-direction: column;
		align-items: stretch;
	}
	.k-cta-row .k-cta-btn,
	.k-cta-row .kmc-cta-link {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
}

/* =====================================================
   BATCH 038 — トップページ（診断型メディア）
   ===================================================== */

/* -------------------------------------------------------
   バッジ カラーバリアント
   ------------------------------------------------------- */
.k-badge--primary { background: var(--cm-color-primary);  color: var(--cm-color-white); }
.k-badge--green   { background: var(--cm-color-green);    color: var(--cm-color-white); }
.k-badge--amber   { background: var(--cm-color-amber);    color: var(--cm-color-white); }
.k-badge--outline {
	background: var(--cm-color-white);
	color: var(--cm-color-primary);
	border: 1px solid var(--cm-color-primary);
}

/* -------------------------------------------------------
   フロントページ外枠
   ------------------------------------------------------- */
.k-fp-wrap {
	font-family: var(--cm-font-family);
	color: var(--cm-color-text);
}

/* -------------------------------------------------------
   ヒーローセクション（全幅）
   ------------------------------------------------------- */
.k-fp-hero {
	background: var(--cm-color-primary-bg);
	border-bottom: 1px solid var(--cm-color-primary-border);
	padding: var(--cm-space-10) var(--cm-space-4);
	text-align: center;
}

.k-fp-hero__inner {
	max-width: 720px;
	margin: 0 auto;
}

.k-fp-hero__title {
	font-size: var(--cm-font-lg);
	line-height: var(--cm-leading-tight);
	margin: 0 0 var(--cm-space-4);
	color: var(--cm-color-text-strong);
}

.k-fp-hero__br { display: none; }
@media (min-width: 480px) {
	.k-fp-hero__br { display: inline; }
	.k-fp-hero__title { font-size: 1.7rem; }
}

.k-fp-hero__lead {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-text-muted);
	line-height: var(--cm-leading-loose);
	margin: 0 0 var(--cm-space-6);
}

.k-fp-hero__quick {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-space-3);
	justify-content: center;
	align-items: center;
}

.k-fp-hero__cta-main {
	font-size: var(--cm-font-base);
	padding: var(--cm-space-3) var(--cm-space-6);
}

@media (max-width: 400px) {
	.k-fp-hero { padding: var(--cm-space-8) var(--cm-space-3); }
	.k-fp-hero__quick { flex-direction: column; align-items: stretch; }
	.k-fp-hero__quick .k-cta-btn { width: 100%; box-sizing: border-box; text-align: center; }
}

/* -------------------------------------------------------
   コンテンツセクション（内側 max-width）
   ------------------------------------------------------- */
.k-fp-section {
	max-width: var(--cm-max-w-list);
	margin: 0 auto;
	padding: var(--cm-space-10) var(--cm-space-4);
}

.k-fp-section--alt {
	background: var(--cm-color-bg-form);
	border-top: 1px solid var(--cm-color-border-light);
	border-bottom: 1px solid var(--cm-color-border-light);
	max-width: 100%;
}

.k-fp-section--alt > * {
	max-width: var(--cm-max-w-list);
	margin-left: auto;
	margin-right: auto;
}

/* alt セクション内の要素に max-width 個別付与（入れ子対応） */
.k-fp-section--alt .k-section-title,
.k-fp-section--alt .k-page-lead,
.k-fp-section--alt .k-hp-cluster-list,
.k-fp-section--alt .k-card-grid,
.k-fp-section--alt .k-text-sm,
.k-fp-section--alt .kmc-ad-notice,
.k-fp-section--alt .kmc-editorial-note {
	max-width: var(--cm-max-w-list);
	margin-left: auto;
	margin-right: auto;
}

.k-fp-section--alt {
	padding: var(--cm-space-10) var(--cm-space-4);
}

@media (max-width: 400px) {
	.k-fp-section,
	.k-fp-section--alt { padding: var(--cm-space-6) var(--cm-space-3); }
}

/* -------------------------------------------------------
   3大導線グリッド（診断 / ランキング / 比較）
   ------------------------------------------------------- */
.k-hp-intent-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cm-space-5);
	margin-top: var(--cm-space-5);
}

@media (max-width: 768px) {
	.k-hp-intent-grid { grid-template-columns: 1fr; gap: var(--cm-space-4); }
}

.k-hp-intent-card {
	border: 1px solid var(--cm-color-border-light);
	border-radius: var(--cm-radius-lg);
	padding: var(--cm-space-6) var(--cm-space-5);
	background: var(--cm-color-white);
	box-shadow: var(--cm-shadow-sm);
	display: flex;
	flex-direction: column;
	gap: var(--cm-space-3);
}

.k-hp-intent-card--primary {
	border-color: var(--cm-color-primary-border);
	background: var(--cm-color-primary-bg);
}

.k-hp-intent-card__title {
	font-size: var(--cm-font-md);
	margin: 0;
	line-height: var(--cm-leading-tight);
}

.k-hp-intent-card__desc {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-text-muted);
	margin: 0;
	line-height: var(--cm-leading-loose);
	flex: 1;
}

.k-hp-intent-card__cta { margin-top: auto; }

/* -------------------------------------------------------
   クラスター入口ピル
   ------------------------------------------------------- */
.k-hp-cluster-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-space-2) var(--cm-space-3);
	margin-top: var(--cm-space-4);
}

.k-hp-cluster-list a {
	display: inline-block;
	padding: .4rem var(--cm-space-4);
	border: 1px solid var(--cm-color-border-input);
	border-radius: var(--cm-radius-full);
	font-size: var(--cm-font-sm);
	text-decoration: none;
	color: var(--cm-color-text);
	background: var(--cm-color-white);
}

.k-hp-cluster-list a:hover {
	border-color: var(--cm-color-primary);
	color: var(--cm-color-primary);
	background: var(--cm-color-primary-bg);
}

.k-hp-cluster-list a:focus-visible {
	outline: 3px solid var(--cm-color-primary);
	outline-offset: 2px;
	border-radius: var(--cm-radius-full);
}

/* economy 系 — 小さめ */
.k-hp-cluster-list--sm a {
	font-size: var(--cm-font-xs);
	padding: .3rem var(--cm-space-3);
}

/* -------------------------------------------------------
   ツールカードグリッド
   ------------------------------------------------------- */
.k-hp-tool-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--cm-space-4);
	margin-top: var(--cm-space-5);
}

@media (min-width: 768px) {
	.k-hp-tool-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 400px) {
	.k-hp-tool-grid { grid-template-columns: 1fr; }
}

.k-hp-tool-item {
	background: var(--cm-color-white);
	border: 1px solid var(--cm-color-border);
	border-radius: var(--cm-radius-md);
	padding: var(--cm-space-4) var(--cm-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--cm-space-2);
}

.k-hp-tool-item__title {
	font-size: var(--cm-font-base);
	font-weight: bold;
	margin: 0;
}

.k-hp-tool-item__desc {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-text-muted);
	margin: 0;
	line-height: var(--cm-leading-loose);
	flex: 1;
}

.k-hp-tool-item .k-cta-btn {
	margin-top: auto;
	align-self: flex-start;
	font-size: var(--cm-font-xs);
}

/* -------------------------------------------------------
   掲載カードセクション 追加マージン
   ------------------------------------------------------- */
.k-fp-cards-footer {
	margin-top: var(--cm-space-6);
}

.k-fp-editorial-wrap {
	margin-top: var(--cm-space-6);
}

/* 経済圏小見出し 上余白 */
.k-hp-eco-heading {
	margin-top: var(--cm-space-8);
}

/* 経済圏注記 上余白 */
.k-hp-eco-note {
	margin-top: var(--cm-space-3);
}

/* =====================================================
   BATCH 039 — スコアバッジ
   ===================================================== */

/* ランキング順位列内のスコア表示 */
.k-rank-score {
	display: block;
	font-size: var(--cm-font-xs);
	font-weight: 600;
	color: var(--cm-color-text-muted);
	line-height: 1.2;
	margin-top: 2px;
	white-space: nowrap;
}

/* =====================================================
   BATCH 040 — ランキングカード詳細表示
   ===================================================== */

/* 順位理由 */
.k-rank-reason {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-text);
	background: var(--cm-color-primary-bg);
	border-left: 3px solid var(--cm-color-primary);
	padding: var(--cm-space-2) var(--cm-space-3);
	margin: var(--cm-space-2) 0 var(--cm-space-3);
	border-radius: 0 var(--cm-radius-sm) var(--cm-radius-sm) 0;
}
.k-rank-reason__label {
	display: inline-block;
	font-size: var(--cm-font-xs);
	font-weight: 700;
	color: var(--cm-color-primary);
	margin-right: var(--cm-space-2);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* details アコーディオン */
.k-rank-details {
	margin-top: var(--cm-space-3);
	border: 1px solid var(--cm-color-border-light);
	border-radius: var(--cm-radius-md);
	overflow: hidden;
}
.k-rank-details__trigger {
	display: block;
	padding: var(--cm-space-3) var(--cm-space-4);
	font-size: var(--cm-font-sm);
	font-weight: 600;
	color: var(--cm-color-primary);
	cursor: pointer;
	background: var(--cm-color-bg-form);
	list-style: none;
	user-select: none;
}
.k-rank-details__trigger::-webkit-details-marker { display: none; }
.k-rank-details__trigger::before {
	content: '▶ ';
	font-size: .7em;
	vertical-align: middle;
}
.k-rank-details[open] > .k-rank-details__trigger::before { content: '▼ '; }
.k-rank-details__trigger:focus-visible {
	outline: 2px solid var(--cm-color-primary);
	outline-offset: -2px;
}
.k-rank-details__body {
	padding: var(--cm-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--cm-space-4);
	border-top: 1px solid var(--cm-color-border-light);
}

/* 向く人 / 向かない人 */
.k-rank-fit {
	font-size: var(--cm-font-sm);
}
.k-rank-fit__heading {
	font-weight: 700;
	margin-bottom: var(--cm-space-2);
	color: var(--cm-color-text);
}
.k-rank-fit--for .k-rank-fit__icon { color: var(--cm-color-green); }
.k-rank-fit--not .k-rank-fit__icon { color: var(--cm-color-amber); }
.k-rank-fit__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cm-space-1);
}
.k-rank-fit__list li::before {
	content: '・';
	color: var(--cm-color-text-muted);
}

/* 注意点 */
.k-rank-caution {
	font-size: var(--cm-font-sm);
	background: var(--cm-color-warn-bg, #fffbeb);
	border: 1px solid var(--cm-color-warn-border, #fde68a);
	border-radius: var(--cm-radius-sm);
	padding: var(--cm-space-3) var(--cm-space-4);
}
.k-rank-caution__heading {
	font-weight: 700;
	margin-bottom: var(--cm-space-2);
	color: var(--cm-color-warn-text, #92400e);
}
.k-rank-caution__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cm-space-1);
}
.k-rank-caution__list li::before {
	content: '※ ';
	color: var(--cm-color-warn-text, #92400e);
	font-weight: 600;
}

/* スコア内訳 */
.k-rank-score-detail {
	font-size: var(--cm-font-sm);
}
.k-rank-score-detail__heading {
	font-weight: 700;
	margin-bottom: var(--cm-space-3);
}
.k-score-breakdown {
	display: flex;
	flex-direction: column;
	gap: var(--cm-space-2);
	margin: 0;
}
.k-score-breakdown__row {
	display: grid;
	grid-template-columns: 7rem 1fr 3.5rem;
	gap: var(--cm-space-2);
	align-items: center;
}
@media (max-width: 480px) {
	.k-score-breakdown__row { grid-template-columns: 6rem 1fr 3rem; }
}
.k-score-breakdown__label {
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
	white-space: nowrap;
}
.k-score-breakdown__bar-wrap {
	height: 10px;
	background: var(--cm-color-bg-form);
	border-radius: var(--cm-radius-full);
	overflow: hidden;
	position: relative;
}
.k-score-breakdown__bar {
	display: block;
	height: 100%;
	background: var(--cm-color-primary);
	border-radius: var(--cm-radius-full);
	transition: width .3s ease;
	min-width: 2px;
}
.k-score-breakdown__pts {
	text-align: right;
	white-space: nowrap;
}
.k-score-breakdown__score {
	font-weight: 700;
	color: var(--cm-color-primary);
}
.k-score-breakdown__max {
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
}
.k-rank-score-detail__note {
	margin-top: var(--cm-space-3);
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
	line-height: 1.6;
}

/* =====================================================
   BATCH 041 — compare hub sections
   ===================================================== */

.k-cmp-section-title {
	font-size: var(--cm-font-md);
	font-weight: 700;
	margin: var(--cm-space-8) 0 var(--cm-space-2);
	padding-bottom: var(--cm-space-2);
	border-bottom: 2px solid var(--cm-color-border);
}

.k-cmp-section-lead {
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
	margin-bottom: var(--cm-space-4);
}

/* カテゴリクラスターグリッド */
.k-cmp-cluster-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--cm-space-3);
}

.k-cmp-cluster-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--cm-space-1);
	padding: var(--cm-space-4) var(--cm-space-3);
	background: var(--cm-color-surface);
	border: 1px solid var(--cm-color-border);
	border-radius: var(--cm-radius-md);
	text-decoration: none;
	color: inherit;
	transition: box-shadow .15s, border-color .15s;
}

.k-cmp-cluster-card:hover {
	box-shadow: var(--cm-shadow-md);
	border-color: var(--cm-color-primary);
}

.k-cmp-cluster-icon {
	display: block;
	font-size: 1.4rem;
	line-height: 1;
	font-weight: 700;
	color: var(--cm-color-primary);
	width: 2.4rem;
	height: 2.4rem;
	line-height: 2.4rem;
	text-align: center;
	background: var(--cm-color-primary-bg);
	border-radius: var(--cm-radius-full);
	flex-shrink: 0;
}

.k-cmp-cluster-label {
	font-size: var(--cm-font-sm);
	font-weight: 600;
	color: var(--cm-color-text);
	display: block;
}

.k-cmp-cluster-desc {
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
	display: block;
	line-height: 1.4;
}

/* 注目比較セクション */
.k-cmp-featured-section {
	margin-bottom: var(--cm-space-8);
}

.k-cmp-clusters-section {
	margin-bottom: var(--cm-space-8);
}

.k-cmp-presets-section {
	margin-bottom: var(--cm-space-6);
}

@media (max-width: 480px) {
	.k-cmp-cluster-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.k-cmp-cluster-icon {
		font-size: 1.1rem;
		width: 2rem;
		height: 2rem;
		line-height: 2rem;
	}
}

.k-cmp-cluster-card:focus-visible {
	outline: 2px solid var(--cm-color-primary);
	outline-offset: 2px;
}

/* =====================================================
   BATCH 042 — 比較トレイ（固定底部バー）
   ===================================================== */

/* tray: position fixed で常時表示。hidden 属性で非表示制御 */
.k-compare-tray {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background: var(--cm-color-surface);
	border-top: 2px solid var(--cm-color-primary);
	box-shadow: 0 -2px 10px rgba(0, 0, 0, .14);
	padding: var(--cm-space-2) var(--cm-space-4);
}

/* tray が表示中: フッターとコンテンツが隠れないよう body に余白 */
body.k-has-compare-tray {
	padding-bottom: 72px;
}

.k-cmp-tray__inner {
	max-width: var(--cm-max-w-list);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--cm-space-3);
	flex-wrap: nowrap;
}

.k-cmp-tray__label {
	font-size: var(--cm-font-xs);
	font-weight: 600;
	color: var(--cm-color-text);
	white-space: nowrap;
	flex-shrink: 0;
}

.k-cmp-tray__slots {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--cm-space-2);
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

/* slot: 全面クリック禁止 — <li> は非クリッカブル */
.k-cmp-tray__slot {
	display: flex;
	align-items: center;
	gap: var(--cm-space-1);
	background: var(--cm-color-bg-form);
	border: 1px solid var(--cm-color-border);
	border-radius: var(--cm-radius-sm);
	padding: .2rem var(--cm-space-2);
	font-size: var(--cm-font-xs);
	min-width: 0;
	max-width: 140px;
}

.k-cmp-tray__name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}

.k-cmp-tray__remove {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--cm-color-text-muted);
	font-size: .75rem;
	padding: 2px 4px;
	line-height: 1;
	flex-shrink: 0;
	border-radius: var(--cm-radius-sm);
}

.k-cmp-tray__remove:hover { color: var(--cm-color-text); background: var(--cm-color-bg-form); }
.k-cmp-tray__remove:focus-visible { outline: 2px solid var(--cm-color-primary); outline-offset: 2px; }

.k-cmp-tray__cta {
	display: inline-block;
	background: var(--cm-color-primary);
	color: #fff;
	padding: .4rem var(--cm-space-4);
	border-radius: var(--cm-radius-sm);
	text-decoration: none;
	font-size: var(--cm-font-sm);
	font-weight: 700;
	white-space: nowrap;
	flex-shrink: 0;
}

.k-cmp-tray__cta:hover { opacity: .9; }
.k-cmp-tray__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* compare ボタン状態（グリッド・ランキング・詳細共通） */
.k-compare-add-btn.k-compare-btn--active {
	color: var(--cm-color-primary);
	font-weight: 700;
}

.k-compare-add-btn.k-compare-btn--full {
	color: var(--cm-color-text-muted);
	cursor: default;
}

/* モバイル: スロット名を短縮 */
@media (max-width: 480px) {
	.k-cmp-tray__inner {
		gap: var(--cm-space-2);
	}
	.k-cmp-tray__slot {
		max-width: 90px;
	}
	.k-cmp-tray__cta {
		padding: .4rem var(--cm-space-3);
		font-size: var(--cm-font-xs);
	}
	body.k-has-compare-tray {
		padding-bottom: 68px;
	}
}

/* =====================================================
   BATCH 043 — カード一覧ハブ: 検索/絞り込み/件数
   ===================================================== */

/* ハブ形式フォーム: 行ごとにレイアウト */
.k-filter-form--hub {
	display: block;
	background: var(--cm-color-bg-form);
	border: 1px solid var(--cm-color-border);
	border-radius: var(--cm-radius-md);
	padding: var(--cm-space-4) var(--cm-space-5);
	margin-bottom: var(--cm-space-4);
}

.k-filter-row {
	display: flex;
	align-items: center;
	gap: var(--cm-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--cm-space-3);
}

.k-filter-row:last-child { margin-bottom: 0; }

/* キーワード検索インプット */
.k-filter-search {
	flex: 1;
	min-width: 200px;
	padding: .375rem var(--cm-space-3);
	border: 1px solid var(--cm-color-border-input);
	border-radius: var(--cm-radius-sm);
	font-size: var(--cm-font-sm);
	background: var(--cm-color-white);
}

.k-filter-search:focus {
	outline: 2px solid var(--cm-color-primary);
	outline-offset: 1px;
}

/* アクション行 */
.k-filter-actions {
	display: flex;
	align-items: center;
	gap: var(--cm-space-3);
}

/* 件数・並び順メタ行 */
.k-archive-meta {
	display: flex;
	align-items: baseline;
	gap: var(--cm-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--cm-space-4);
	min-height: 1.5rem;
}

.k-archive-count {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-text-muted);
	margin: 0;
}

.k-archive-count__num {
	font-size: var(--cm-font-md);
	font-weight: 700;
	color: var(--cm-color-text);
}

.k-archive-count__query {
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
}

.k-archive-sort-label {
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
	margin: 0;
}

@media (max-width: 480px) {
	.k-filter-form--hub {
		padding: var(--cm-space-3) var(--cm-space-3);
	}
	.k-filter-search {
		min-width: 0;
		width: 100%;
	}
	.k-filter-row {
		gap: var(--cm-space-2);
	}
}

/* =====================================================
   BATCH 044 — カード詳細テンプレート標準化
   ===================================================== */

/* 概要テキスト */
.k-card-overview-text {
	font-size: var(--cm-font-sm);
	line-height: var(--cm-leading-base);
	margin: 0 0 var(--cm-space-3);
}

.k-card-official-note {
	color: var(--cm-color-text-muted);
	margin: 0;
}

/* 向く人・向かない人グリッド */
.k-card-fit-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cm-space-4);
	margin-bottom: var(--cm-space-3);
}

@media (max-width: 480px) {
	.k-card-fit-grid {
		grid-template-columns: 1fr;
	}
}

.k-card-fit-col {
	border-radius: var(--cm-radius-md);
	padding: var(--cm-space-4);
}

.k-card-fit-col--for {
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
}

.k-card-fit-col--not {
	background: #fffbeb;
	border: 1px solid #fde68a;
}

.k-card-fit-heading {
	font-size: var(--cm-font-sm);
	font-weight: 700;
	margin: 0 0 var(--cm-space-2);
	display: flex;
	align-items: center;
	gap: var(--cm-space-2);
}

.k-card-fit-icon {
	font-size: 1.1em;
}

.k-card-fit-list {
	margin: 0;
	padding: 0 0 0 var(--cm-space-4);
	font-size: var(--cm-font-sm);
}

.k-card-fit-list li {
	margin-bottom: var(--cm-space-1);
}

.k-card-fit-note {
	color: var(--cm-color-text-muted);
	margin: 0;
}

/* メリットリスト */
.k-card-merit-list {
	margin: 0 0 var(--cm-space-3);
	padding: 0 0 0 var(--cm-space-5);
	font-size: var(--cm-font-sm);
}

.k-card-merit-list li {
	margin-bottom: var(--cm-space-2);
	line-height: var(--cm-leading-base);
}

/* 注意点リスト */
.k-card-caution-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-card-caution-list li {
	font-size: var(--cm-font-sm);
	padding: var(--cm-space-2) var(--cm-space-3);
	border-left: 3px solid var(--cm-color-warning, #f59e0b);
	background: #fffbeb;
	margin-bottom: var(--cm-space-2);
	line-height: var(--cm-leading-base);
}

/* 申込条件 */
.k-card-condition-list {
	display: block;
	margin: 0;
	border: 1px solid var(--cm-color-border);
	border-radius: var(--cm-radius-md);
	overflow: hidden;
}

.k-card-condition-row {
	display: grid;
	grid-template-columns: 9em 1fr;
	gap: 0;
	border-bottom: 1px solid var(--cm-color-border);
}

.k-card-condition-row:last-child {
	border-bottom: none;
}

.k-card-condition-label {
	font-size: var(--cm-font-xs);
	font-weight: 700;
	padding: var(--cm-space-3);
	background: var(--cm-color-bg-form);
	display: flex;
	align-items: flex-start;
}

.k-card-condition-value {
	font-size: var(--cm-font-sm);
	padding: var(--cm-space-3);
	margin: 0;
}

.k-card-condition-check {
	display: block;
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
	margin-top: var(--cm-space-1);
}

@media (max-width: 480px) {
	.k-card-condition-row {
		grid-template-columns: 1fr;
	}
	.k-card-condition-label {
		border-bottom: 1px solid var(--cm-color-border);
	}
}

/* 似たカード */
.k-similar-grid {
	margin-bottom: var(--cm-space-3);
}

.k-similar-lead {
	font-size: var(--cm-font-xs);
	color: var(--cm-color-text-muted);
	margin: 0 0 var(--cm-space-3);
}

.k-similar-action {
	text-align: right;
	font-size: var(--cm-font-sm);
	margin: var(--cm-space-2) 0 0;
}

/* FAQ */
.k-card-faq {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cm-space-3);
}

.k-card-faq-item {
	border: 1px solid var(--cm-color-border);
	border-radius: var(--cm-radius-md);
	overflow: hidden;
}

.k-card-faq-q {
	display: flex;
	align-items: flex-start;
	gap: var(--cm-space-3);
	padding: var(--cm-space-3) var(--cm-space-4);
	background: var(--cm-color-bg-form);
	font-size: var(--cm-font-sm);
	font-weight: 700;
	margin: 0;
}

.k-card-faq-a {
	display: flex;
	align-items: flex-start;
	gap: var(--cm-space-3);
	padding: var(--cm-space-3) var(--cm-space-4);
	font-size: var(--cm-font-sm);
	margin: 0;
}

.k-card-faq-q-label,
.k-card-faq-a-label {
	flex-shrink: 0;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--cm-font-xs);
	font-weight: 700;
	line-height: 1;
}

.k-card-faq-q-label {
	background: var(--cm-color-primary);
	color: var(--cm-color-white);
}

.k-card-faq-a-label {
	background: var(--cm-color-border);
	color: var(--cm-color-text);
}

/* CTA 再掲エリア */
.k-cta-bottom {
	background: var(--cm-color-bg-form);
	border-radius: var(--cm-radius-md);
	padding: var(--cm-space-5) !important;
	text-align: center;
}

.k-cta-bottom .k-cta-row {
	justify-content: center;
	margin-bottom: var(--cm-space-3);
}

.k-cta-bottom-note {
	color: var(--cm-color-text-muted);
	margin: 0;
}

/* ========================================
   Tier 3 Service CTA — 補助サービス導線（BATCH 089）
   主CTA（kmc-cta-link）より視覚的に小さく・控えめに配置する。
   全面クリック不可: .kmc-service-cta 自体はクリッカブルにしない。
   ======================================== */
.kmc-service-cta {
	border-top: 1px solid var(--cm-color-border);
	padding-top: var(--cm-space-4);
	margin-top: var(--cm-space-2);
}

.kmc-service-cta__title {
	font-size: var(--cm-font-sm);
	font-weight: 700;
	color: var(--cm-color-text-muted);
	margin: 0 0 var(--cm-space-2);
}

.kmc-service-cta__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-space-2) var(--cm-space-3);
}

.kmc-service-cta__link {
	display: inline-block;
	font-size: var(--cm-font-sm);
	color: var(--cm-color-primary);
	text-decoration: none;
	padding: var(--cm-space-1) var(--cm-space-3);
	border: 1px solid var(--cm-color-primary);
	border-radius: var(--cm-radius-sm, 4px);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.kmc-service-cta__link:hover {
	background-color: var(--cm-color-primary);
	color: #fff;
	text-decoration: none;
}

.kmc-service-cta__link:focus-visible {
	outline: 2px solid var(--cm-color-primary);
	outline-offset: 2px;
}

/* 内部 fallback 専用スタイル（compare テーブル用） */
.kmc-cta-link--internal {
	color: var(--cm-color-text-muted);
	font-size: var(--cm-font-sm);
	border-bottom: 1px dashed currentColor;
	text-decoration: none;
}

.kmc-cta-link--internal:hover {
	color: var(--cm-color-primary);
	text-decoration: none;
}

/* 関連ガイドナビ */
.k-related-nav {
	border-top: 2px solid var(--cm-color-border);
	padding-top: var(--cm-space-5) !important;
}

.k-related-nav-title {
	font-size: var(--cm-font-sm);
	font-weight: 700;
	margin: 0 0 var(--cm-space-3);
}

.k-related-nav-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-space-2) var(--cm-space-4);
}

.k-related-nav-list a {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-primary);
	text-decoration: none;
}

.k-related-nav-list a:hover {
	text-decoration: underline;
}

/* 戻るリンクラッパー */
.k-back-link-wrap {
	margin-top: var(--cm-space-8);
}

/* =====================================================
   ジャーニー横断ナビ（BATCH 050）
   ===================================================== */
.k-journey-nav {
	margin: var(--cm-space-4) 0;
	padding: var(--cm-space-3) var(--cm-space-4);
	background: var(--cm-color-bg-subtle, #f8fafc);
	border-radius: var(--cm-radius-md, 6px);
}

.k-journey-nav__label {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-text-meta);
	margin: 0 0 var(--cm-space-2);
}

/* =====================================================
   30秒診断ウィザード（BATCH 052）
   ===================================================== */
.k-quiz {
	margin: var(--cm-space-5) 0 var(--cm-space-4);
	background: var(--cm-color-bg-subtle, #f8fafc);
	border-radius: var(--cm-radius-lg, 10px);
	padding: var(--cm-space-5) var(--cm-space-4);
}

.k-quiz-progress {
	height: 4px;
	background: var(--cm-color-border, #e2e8f0);
	border-radius: 2px;
	margin-bottom: var(--cm-space-5);
	overflow: hidden;
}

.k-quiz-progress-inner {
	height: 100%;
	background: var(--cm-color-primary, #2563eb);
	border-radius: 2px;
	transition: width 0.3s ease;
	width: 0%;
}

.k-quiz-step-num {
	display: inline-block;
	font-size: var(--cm-font-xs, 0.75rem);
	font-weight: 700;
	color: var(--cm-color-primary, #2563eb);
	letter-spacing: 0.04em;
	margin-right: var(--cm-space-2);
}

.k-quiz-q {
	font-size: var(--cm-font-lg, 1.125rem);
	font-weight: 700;
	color: var(--cm-color-text-primary, #1e293b);
	margin: 0 0 var(--cm-space-4);
}

.k-quiz-choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cm-space-3);
}

.k-quiz-choices--2col {
	justify-content: center;
}

.k-quiz-choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--cm-space-1);
	padding: var(--cm-space-4) var(--cm-space-5);
	background: #fff;
	border: 2px solid var(--cm-color-border, #e2e8f0);
	border-radius: var(--cm-radius-md, 6px);
	cursor: pointer;
	font-size: var(--cm-font-base, 1rem);
	font-weight: 600;
	color: var(--cm-color-text-primary, #1e293b);
	transition: border-color 0.15s, background 0.15s, transform 0.1s;
	min-width: 110px;
	min-height: 68px;
	text-align: center;
}

.k-quiz-choice:hover,
.k-quiz-choice:focus-visible {
	border-color: var(--cm-color-primary, #2563eb);
	background: #eff6ff;
	outline: none;
}

.k-quiz-choice.is-selected {
	border-color: var(--cm-color-primary, #2563eb);
	background: #dbeafe;
}

.k-quiz-choice:active {
	transform: scale(0.97);
}

.k-quiz-choice--any {
	background: var(--cm-color-bg-subtle, #f8fafc);
	color: var(--cm-color-text-meta, #64748b);
	font-weight: 400;
	border-style: dashed;
}

.k-quiz-choice-icon {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--cm-color-primary, #2563eb);
	line-height: 1;
}

.k-quiz-choice-label {
	font-size: var(--cm-font-sm, 0.875rem);
}

.k-quiz-loading {
	text-align: center;
	padding: var(--cm-space-8) var(--cm-space-4);
	color: var(--cm-color-text-meta, #64748b);
}

.k-diag-filter-toggle {
	font-size: var(--cm-font-sm);
	color: var(--cm-color-text-meta);
	margin: var(--cm-space-2) 0 var(--cm-space-2);
	text-align: center;
}

@media (max-width: 480px) {
	.k-quiz {
		padding: var(--cm-space-4) var(--cm-space-3);
	}
	.k-quiz-choices--2col .k-quiz-choice {
		flex: 1;
	}
	.k-quiz-choice {
		min-width: calc(50% - var(--cm-space-2));
		padding: var(--cm-space-3) var(--cm-space-2);
		font-size: var(--cm-font-sm);
	}
}