/* =========================================================================
 * Make it — サービス・料金ページ（/plan/）固有スタイル（フェーズ3）
 *
 * 見た目の正：Figma PC 99:2 / SP 102:2。
 * 見出し・リード・最終CTA等の汎用パーツは front.css を共有再利用（同名クラス）。
 * このファイルはこのページ固有のレイアウト（料金テーブル・費用の内訳・
 * 選ばれる理由カード）のみを持つ。
 *
 * テーブル系（心理プログラムのセッション表・結婚相談所の比較表）はPC/SPで
 * 見せ方そのものが異なる（PC=表／SP=カード）ため、同じ配列から二種類の
 * マークアップを出し分ける（CSSでの列→カード変換はしない）。
 *
 * 2026-08-20：結婚相談所比較表のSP側「月の申し受け数」割愛は廃止（S-7）。
 * 電話相談行が新設の訴求点になったため、PC/SPともに全8行を表示する。
 *
 * 2026-08-20：カード・テーブル面の半透明白を白ベタへ統一
 * （.mk-plan-table・.mk-plan-card・.mk-plan-callout・.mk-plan-reason）。
 * PR-E（#65）の白ベタ統一パスはfront.css（TOP）のみが対象で、このファイルは
 * 対象外だったため漏れていた。S-11（faq.css）と同じ扱いで一括修正。
 * ====================================================================== */

.mk-section--plan-intro    { background: var(--bg-alt); }
.mk-section--plan-psychology { background: var(--bg-base); }
.mk-section--plan-agency   { background: var(--bg-alt); }
.mk-section--plan-set      { background: var(--bg-base); }
.mk-section--plan-cost     { background: var(--bg-alt); }
.mk-section--plan-reasons  { background: var(--bg-base); }

/* -------------------------------------------------------------------------
 * ① 心理プログラム／② 結婚相談所：見出し行（タイトル＋バッジ＋価格）
 * ---------------------------------------------------------------------- */
.mk-plan-heading-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.625rem;
	width: 100%;
}

.mk-plan-heading-row__title {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--c-text);
	font-size: 1.1875rem;
}

.mk-plan-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.1875rem 0.625rem;
	border-radius: var(--radius);
	background: var(--c-primary);
	color: var(--c-on-dark);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.625rem;
}

.mk-plan-price-group {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
}

.mk-plan-price {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--c-text);
	font-size: 1.5rem;
}

.mk-plan-price__unit {
	font-family: var(--font-body);
	color: var(--c-text-caption);
	font-size: 0.75rem;
}

.mk-plan-sublead {
	margin-top: 0.375rem;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.65;
	color: var(--c-text-sub);
	width: 100%;
}

@media (min-width: 1024px) {
	.mk-plan-heading-row__title {
		font-size: 1.5rem;
	}

	.mk-plan-price {
		font-size: 1.75rem;
	}

	.mk-plan-price__unit {
		font-size: 0.8125rem;
	}

	.mk-plan-price-group {
		margin-left: auto;
	}

	.mk-plan-sublead {
		font-size: 0.875rem;
	}
}

/* -------------------------------------------------------------------------
 * 料金テーブル（PC専用：セッション表・結婚相談所比較表 共用）
 * ---------------------------------------------------------------------- */
.mk-plan-table {
	display: none;
	width: 100%;
	margin-top: 1.25rem;
	border-collapse: collapse;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bg-card);
}

.mk-plan-table th,
.mk-plan-table td {
	padding: 0.875rem 1.125rem;
	border-bottom: 1px solid var(--c-border);
	text-align: left;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--c-text-sub);
}

.mk-plan-table thead th {
	background: var(--bg-table-head);
	font-weight: 500;
	font-size: 0.8125rem;
	color: var(--c-text-caption);
}

.mk-plan-table tbody tr:last-child th,
.mk-plan-table tbody tr:last-child td {
	border-bottom: none;
}

.mk-plan-table tbody th {
	font-weight: 500;
	color: var(--c-text);
}

.mk-plan-table--compare th:not(:first-child),
.mk-plan-table--compare td:not(:first-child) {
	text-align: center;
}

@media (min-width: 1024px) {
	.mk-plan-table {
		display: table;
	}
}

/* -------------------------------------------------------------------------
 * 料金カード（SP専用：PC幅では非表示）
 * ---------------------------------------------------------------------- */
.mk-plan-cards {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	width: 100%;
	margin-top: 1.25rem;
}

@media (min-width: 1024px) {
	.mk-plan-cards {
		display: none;
	}
}

.mk-plan-card {
	padding: 1rem 1.125rem;
	border-radius: var(--radius);
	border: 1px solid var(--c-border);
	background: var(--bg-card);
}

/* セッションカード（① 心理プログラム） */
.mk-plan-session-card__title {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--c-text);
}

.mk-plan-session-card__desc {
	margin-top: 0.375rem;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.7;
	color: var(--c-text-sub);
}

.mk-plan-session-card__result {
	margin-top: 0.5rem;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--c-light-text);
}

/* 比較カード（② 結婚相談所） */
.mk-plan-compare-card__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--c-text);
}

.mk-plan-compare-card__kv {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5625rem 0;
	border-bottom: 1px solid var(--c-border);
}

.mk-plan-compare-card__kv:first-of-type {
	margin-top: 0.25rem;
}

.mk-plan-compare-card__kv:last-child {
	border-bottom: none;
}

.mk-plan-compare-card__k {
	flex: 1 1 0%;
	min-width: 0;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	color: var(--c-text-sub);
}

.mk-plan-compare-card__v {
	flex: none;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--c-text);
	white-space: nowrap;
}

/* プレミアムプランの位置づけ（2026-08-20 野中様の記載指定）。
   税込などの定型注記（.mk-plan-note）より内容が重いため、本文寄りの
   サイズ・色にして注記の上に置く。 */
.mk-plan-premium-desc {
	margin-top: 0.875rem;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.7;
	color: var(--c-text-sub);
	width: 100%;
}

.mk-plan-note {
	margin-top: 0.625rem;
	font-family: var(--font-body);
	font-size: 0.6875rem;
	line-height: 1.6;
	color: var(--c-text-caption);
	width: 100%;
}

@media (min-width: 1024px) {
	.mk-plan-premium-desc {
		font-size: 0.875rem;
	}

	.mk-plan-note {
		font-size: 0.75rem;
	}
}

/* -------------------------------------------------------------------------
 * ③ セット申込：primary色の左ボーダーコールアウト
 * ---------------------------------------------------------------------- */
.mk-plan-callout {
	margin-top: 1rem;
	padding: 1.125rem 1.25rem;
	width: 100%;
	border-radius: var(--radius);
	border-left: 3px solid var(--c-primary);
	background: var(--bg-card);
}

.mk-plan-callout__text {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--c-text);
}

.mk-plan-callout__note {
	margin-top: 0.375rem;
	font-family: var(--font-body);
	font-size: 0.75rem;
	line-height: 1.65;
	color: var(--c-text-caption);
}

@media (min-width: 1024px) {
	.mk-plan-callout {
		padding: 1.25rem 1.5rem;
	}

	.mk-plan-callout__text {
		font-size: 1.0625rem;
	}

	.mk-plan-callout__note {
		font-size: 0.8125rem;
	}
}

/* -------------------------------------------------------------------------
 * 費用の内訳と、目安（How the cost works）
 * ---------------------------------------------------------------------- */
.mk-plan-glossary {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: 0.875rem;
	border-top: 1px solid var(--c-border);
}

.mk-plan-glossary__row {
	display: flex;
	flex-direction: column;
	gap: 0.1875rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--c-border);
}

.mk-plan-glossary__term {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--c-text);
}

.mk-plan-glossary__desc {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.7;
	color: var(--c-text-sub);
}

.mk-plan-estimate {
	margin-top: 1rem;
	padding: 1rem 1.125rem;
	width: 100%;
	border-radius: var(--radius);
	/* 面の濃さではなく細罫で切り出す（Issue #64 案2・2026-08-25 登内判断）。
	   親の .mk-section--plan-cost が既に --bg-alt のため、面を alt に寄せると
	   完全に同化して見えなくなる。目安は「カード」ではなく本文からの切り出し
	   なので、白ベタ（--bg-card）ではなく罫線で役割を表す。必須バッジと同じ扱い。 */
	background: transparent;
	border: 1px solid var(--c-border);
}

.mk-plan-estimate__label {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.8125rem;
	color: var(--c-light-text);
}

.mk-plan-estimate__main {
	margin-top: 0.375rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	line-height: 1.85;
	color: var(--c-text);
}

.mk-plan-estimate__note {
	margin-top: 0.25rem;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.85;
	color: var(--c-text-sub);
}

@media (min-width: 1024px) {
	.mk-plan-glossary__row {
		flex-direction: row;
		gap: 1.25rem;
		padding: 0.875rem 0;
	}

	.mk-plan-glossary__term {
		flex: none;
		width: 240px;
		font-size: 1rem;
	}

	.mk-plan-glossary__desc {
		flex: 1 1 0%;
		min-width: 0;
		font-size: 0.9375rem;
	}

	.mk-plan-estimate {
		margin-top: 1.25rem;
		padding: 1.25rem 1.5rem;
	}

	.mk-plan-estimate__main {
		font-size: 0.9375rem;
	}

	.mk-plan-estimate__note {
		font-size: 0.875rem;
	}
}

/* -------------------------------------------------------------------------
 * 選ばれる、3つの理由（Why choose us）
 * ---------------------------------------------------------------------- */
.mk-plan-reasons {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	width: 100%;
	margin-top: 1rem;
}

.mk-plan-reason {
	padding: 1rem 1.125rem;
	border-radius: var(--radius);
	border: 1px solid var(--c-border);
	background: var(--bg-card);
}

.mk-plan-reason__num {
	font-family: var(--font-label);
	letter-spacing: var(--tracking-label);
	font-size: 0.75rem;
	color: var(--c-light-text);
}

.mk-plan-reason__title {
	margin-top: 0.5rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--c-text);
	white-space: pre-line;
}

/* 会員数No.1の根拠注記（S-8・2026-08-20 追加）：.mk-plan-note と同じ扱いの小さな注記 */
.mk-plan-reasons-note {
	margin-top: 0.75rem;
	font-family: var(--font-body);
	font-size: 0.6875rem;
	line-height: 1.6;
	color: var(--c-text-caption);
	width: 100%;
}

@media (min-width: 1024px) {
	.mk-plan-reasons-note {
		margin-top: 1rem;
		font-size: 0.75rem;
	}
}

.mk-plan-reason__desc {
	margin-top: 0.3125rem;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.75;
	color: var(--c-text-sub);
}

@media (min-width: 1024px) {
	.mk-plan-reasons {
		flex-direction: row;
		gap: 1.25rem;
	}

	.mk-plan-reason {
		flex: 1 1 0%;
		min-width: 0;
		padding: 1.5rem 1.625rem 1.625rem;
	}

	.mk-plan-reason__title {
		font-size: 1.125rem;
	}

	.mk-plan-reason__desc {
		font-size: 0.875rem;
	}
}