/* =========================================================================
 * Make it — TOP（フロントページ）セクション スタイル（フェーズ3）
 *
 * 見た目の正：Figma PC 24:2 / SP 17:2。
 * 各セクションは .mk-section（背景の温度段階）+ .mk-container（rail・余白）
 * + .mk-section-head（eyebrow/見出し/リード）の組み合わせで組む。
 * ====================================================================== */

.mk-section {
	display: block;
	width: 100%;
}

/* 背景：生成り2値の交互（2026-08〜。旧「上→下で暖色化」の温度段階グラデーションは廃止）。
 * 「玄関の灯り」の温度設計をやめ、全面を明るい生成りに統一。base/altを交互に敷くだけにする。
 * セクション構成はmethod（独自メソッド）・evidence（根拠タグ）を削除し、
 * change（これまで/これから）を新設（前後との交互は維持）。 */
.mk-section--hero           { background: var(--bg-hero-gradient); }
.mk-section--empathy        { background: var(--bg-alt); }
.mk-section--cause          { background: var(--bg-base); }
.mk-section--differentiation{ background: var(--bg-alt); }
.mk-section--story          { background: var(--bg-base); }
.mk-section--journey        { background: var(--bg-alt); }
.mk-section--change         { background: var(--bg-base); }
.mk-section--pricing        { background: var(--bg-alt); }
.mk-section--line-cta       { background: var(--bg-base); }
.mk-section--faq            { background: var(--bg-alt); }
.mk-section--photo-band     { background: var(--bg-base); }
.mk-section--cta-final      { background: var(--bg-cta); }

/* -------------------------------------------------------------------------
 * 見出しブロック（eyebrow + 見出し + リード）
 * ---------------------------------------------------------------------- */
.mk-section-head {
	margin-bottom: 1.75rem;
}

.mk-section-head .mk-eyebrow {
	display: block;
	margin-bottom: 0.75rem;
}

/* セクション見出し h2：SP=Zen Kaku Medium 18px ／ PC=Zen Kaku Bold 30px（ともに lh1.5・tracking0） */
.mk-section-head .mk-display,
.mk-story__col .mk-display {
	font-size: 18px;
	font-weight: 500;
	color: var(--c-text);
}

/* -------------------------------------------------------------------------
 * 下層ページの見出しスケール（TOPとは別系統・Issue #38）
 *
 * TOPは h1 42/27・h2 30/18(Medium)。下層は「ページ見出し(h1)」と
 * 「セクション見出し(h2)」が別スケールで、いずれも Bold。
 *
 * Figmaはページごとに1〜4pxの揺れがある（SP h1 が 23/24/26 に割れる、
 * counselorのMission/Philosophyだけ PC30/SP22 など）。これは後から追加した
 * セクションで値がズレたものと判断し、実装では**下層共通スケールに揃える**
 * （2026-08-08 登内判断）。数値の根拠は design/typography-spec.md §5。
 *
 * 対象＝TOP以外の全ページ（`body:not(.home)`）。除外されるもの：
 *   - 最終CTA見出し（`.mk-cta-final__head` 配下＝別ラッパー）
 *   - LPのセクション見出し（`.mk-lp-block__title`＝別クラス。Medium 22/18のまま）
 * ---------------------------------------------------------------------- */
body:not(.home) .mk-section-head h1.mk-display {
	font-size: 26px;
	font-weight: 700;
}

body:not(.home) .mk-section-head h2.mk-display {
	font-size: 21px;
	font-weight: 700;
}

/* 下層のSP eyebrow は TOP（Regular 10px/tracking1.6px）より大きく太い。
   Figma実測＝Medium 11px・tracking 8%（＝0.88px）。PCは全ページ共通で
   Medium 12px・8%（＝0.96px）のため tokens.css の既定のまま。
   ※Figmaでは一部ページが12pxだったが、11pxが多数（17対9）のため11pxに統一した。 */
body:not(.home) .mk-eyebrow {
	font-size: 11px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.88px;
}

/* リード：Heroリード＝SP 13px/1.95・PC 16px/1.95 */
.mk-lead {
	margin-top: 0.75rem;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: var(--lh-body);
	color: var(--c-text-sub);
}

/* 小リード（見出し直下）＝SP 12px/1.7・PC 16px/1.8 */
.mk-section-head .mk-lead {
	font-size: 12px;
	line-height: 1.7;
}

/* 本文段落：SP 13px/1.95・PC 16px/1.95（共感セクションのみ PC 17px/2.0） */
.mk-body {
	font-family: var(--font-body);
	font-size: 13px;
	line-height: var(--lh-body);
	color: var(--c-text-sub);
	white-space: pre-line;
}

.mk-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

@media (min-width: 1024px) {
	.mk-section-head {
		margin-bottom: 2.5rem;
	}

	.mk-section-head .mk-display,
	.mk-story__col .mk-display {
		font-size: 30px;
		font-weight: 700;
	}

	/* 下層ページの見出しスケール（PC。上記ブロックのコメント参照） */
	body:not(.home) .mk-section-head h1.mk-display {
		font-size: 36px;
	}

	body:not(.home) .mk-section-head h2.mk-display {
		font-size: 28px;
	}

	/* PCは全ページ共通で Mono Medium 12px・字間0.96px（8%）。
	   ※SP用の `body:not(.home) .mk-eyebrow`（詳細度0,2,1）は tokens.css の
	     PC指定 `.mk-eyebrow`（0,1,0）より強く、メディアクエリでは打ち消せない。
	     同じ詳細度でPC値を再指定して戻す。 */
	body:not(.home) .mk-eyebrow {
		font-size: 12px;
		letter-spacing: 0.96px;
	}

	.mk-lead {
		font-size: 16px;
	}

	.mk-section-head .mk-lead {
		font-size: 16px;
		line-height: 1.8;
	}

	.mk-body {
		font-size: 16px;
	}

	.mk-section--empathy .mk-body {
		font-size: 17px;
		line-height: 2;
	}
}

/* -------------------------------------------------------------------------
 * ボタン：ライト面用の枠線バリアント（副CTA。暗面は既存 --outline-light）
 * ---------------------------------------------------------------------- */
/* 2026-08：ライト面の副CTA（LINE）枠線色を藍墨→青緑へ（モックの ghost ボタン基準）。 */
.mk-btn--outline {
	background: transparent;
	color: var(--c-secondary);
	border: 1px solid var(--c-secondary);
}

.mk-btn--outline:hover {
	background: rgba(50, 124, 127, 0.08);
}

/* -------------------------------------------------------------------------
 * 共感：痛みリスト（2026-08新設。旧・文章列挙から箇条書きへ）
 * モックPC＝disc・max-width920px・16px／SPは本文スケール13pxを踏襲。
 * ---------------------------------------------------------------------- */
.mk-pain-list {
	max-width: 920px;
	margin: 0;
	padding-left: 1.4em;
	list-style: disc;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.9;
	color: var(--c-text-sub);
}

.mk-pain-list li {
	padding: 0.375rem 0;
}

@media (min-width: 1024px) {
	.mk-pain-list {
		font-size: 16px;
	}
}

/* -------------------------------------------------------------------------
 * コールアウト（共感セクションの結び：全体を囲むボックス）
 * ---------------------------------------------------------------------- */
/* PC=Noto Medium 17px/1.7・#23262A（SPは未計測のため本文スケール13pxを踏襲） */
.mk-callout {
	margin-top: 1.5rem;
	padding: 1.125rem 1.5rem;
	border-radius: var(--radius);
	border: 1px solid var(--c-border);
	background: var(--bg-card);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--c-text);
}

@media (min-width: 1024px) {
	.mk-callout {
		font-size: 17px;
	}
}

/* -------------------------------------------------------------------------
 * 原因：ハイライトボックス（2026-08新設。結び2文をまとめて囲む）
 * モックPC＝padding 24/28・白72%・枠線border（.why-highlight）。
 * ---------------------------------------------------------------------- */
.mk-cause-highlight {
	margin-top: 1.5rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--radius);
	border: 1px solid var(--c-border);
	background: rgba(255, 255, 255, 0.72);
}

.mk-cause-highlight .mk-keyword {
	margin-top: 0.75rem;
}

/* -------------------------------------------------------------------------
 * キーワード（原因セクションの結び：左アクセントラインの引用）
 * ---------------------------------------------------------------------- */
/* 強調行：Zen Kaku Medium（SP 15px/1.7・PC 22px/1.6）／文字色は --c-light-text。
   左ボーダーのコーラルは CLAUDE.md で明記された例外のため据え置く。 */
.mk-keyword {
	margin-top: 1.5rem;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 3px solid var(--c-accent);
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--c-light-text);
}

@media (min-width: 1024px) {
	.mk-keyword {
		font-size: 22px;
		line-height: 1.6;
	}
}

/* -------------------------------------------------------------------------
 * Hero
 *
 * PC（Figma 24:15）は写真が本文カラムのすぐ右（角丸なし）。Figma 1280 では本文＋画像で
 * ちょうど画面幅を占める＝画像右端は「1280pxで中央寄せされたコンテンツブロックの右端」。
 *
 * よって画像は .mk-container の外＝.mk-section--hero（position:relative）を基準に絶対配置し、
 * left を本文カラム右（コンテナ左パディング＋本文470px＋Figma実測の隙間18px）に、
 * right を中央寄せブロックの右端（左右の余白 max(0px,(100vw-1280px)/2)）に合わせる。
 * これで 1280px 超のワイドでも本文と画像の間に隙間ができず、ブロック全体が中央寄せされて
 * Figma と同じ「本文のすぐ右に約600px幅の画像」の見た目になる。
 * （旧実装は right:0 で viewport 右端まで裁ち落としていたが、ワイドで画像が横に広がりすぎて
 *  ズームし、かつ本文との間に大きな中央余白ができたため、この中央寄せ方式に変更。）
 * 1024〜1279px は right:0（余白0）で本文右〜viewport右端を素直に埋める。
 * モバイルはテキスト下に通常のブロックで表示。
 * ---------------------------------------------------------------------- */
/* サービス行（2026-08新設）：モックPC＝Noto Bold 17px・青緑（.service）。
   SPは未計測のため本文よりひと回り大きい14pxを暫定値とする。 */
.mk-hero__service {
	margin: 0.25rem 0 1rem;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--c-secondary);
}

/* Hero h1：SP=Zen Kaku Bold 27px/1.5/tracking0 ／ PC=Bold 33px/1.42/tracking-0.42px。
   2026-08：新見出し（2行目14字）は旧42pxだと本文カラム470pxに収まらない。
   モックは38px→36pxへ調整済みだが、モックの本文カラムは525pxなので36pxでも
   2行に収まっていた。こちらは470pxなので36pxでは3行になるため33pxとする
   （数値の正＝design/typography-spec.md §1。PCの実値は下の @1024 ブロック）。 */
.mk-hero__heading {
	font-size: 27px;
	white-space: pre-line;
}

/* リード強調行（2026-08新設）：モックPC＝Bold 19px/1.8（.lead-strong）。
   通常の .mk-lead より太く・ひと回り大きい。SPは本文リードと同スケールを暫定採用。 */
.mk-hero__lead-strong {
	font-weight: 700;
	font-size: 14px;
}

@media (min-width: 1024px) {
	.mk-hero__service {
		font-size: 17px;
		margin: 0.125rem 0 1.375rem;
	}

	.mk-hero__lead-strong {
		font-size: 19px;
		line-height: 1.8;
	}
}

.mk-hero__image {
	aspect-ratio: 330 / 188;
	margin-top: 1.5rem;
	border-radius: var(--radius);
	background: var(--bg-placeholder);
}

@media (min-width: 1024px) {
	.mk-section--hero {
		position: relative;
	}

	/* Hero h1（Figma 24:24）＝Zen Kaku Bold 33px。モック実値は36pxだが、モックの
	   本文カラムは525pxで、こちらは470px（.mk-hero__col）。36pxだと2行目
	   「婚活の基準になっていませんか」が14字×36px≒504pxで収まらず3行に
	   折り返す。33pxなら462pxで2行に収まる（design/typography-spec.md §1）。 */
	.mk-hero__heading {
		font-size: 33px;
		line-height: 1.42;
		letter-spacing: -0.42px;
	}

	.mk-hero__col {
		max-width: 470px;
	}

	.mk-hero__image {
		position: absolute;
		top: 0;
		bottom: 0;
		/* 画像は本文カラムのすぐ右（Figma実測の隙間18px）に寄せ、右端は
		   「1280pxで中央寄せされたコンテンツブロックの右端」に合わせる。
		   left  = 中央寄せの左オフセット + コンテナ左パディング + 本文470px + 18px
		   right = 中央寄せの左右余白（= コンテンツブロック右端の viewport 右からの距離）
		   これで 1280px 超のワイドでも本文と画像の間に隙間ができず、Figma と同じ
		   「本文のすぐ右に600px幅の画像」の見た目になる（ブロック全体が中央寄せ）。
		   1024〜1279px は right:0（＝余白0）で本文右〜viewport右端を素直に埋める。 */
		left: calc(
			max(0px, (100vw - 1280px) / 2) + var(--mk-side) + var(--mk-rail-offset) + 470px + 18px
		);
		right: max(0px, (100vw - 1280px) / 2);
		width: auto;
		aspect-ratio: auto;
		margin-top: 0;
		border-radius: 0;
	}

	/* PCでは箱が縦長（1280で600x670＝比0.896）になる一方、写真は1200x675
	   （比1.778）なので、cover で横が約50%落ちる。既定の中央クロップだと
	   写真の左35%＝無地の壁が残り、右31%＝窓と緑が切れる。被写体の視線は
	   右（光の方）を向いているため、この写真を選んだ理由（明るい窓辺）が
	   消えて「壁の前の男性」に見えてしまう。
	   そこで注視点を右寄りにして、男性＋窓＋緑が入る側を残す。欠損率は
	   変わらない（どちらの50%を残すかの問題）。% 指定なので枠幅が変わっても
	   比例する（1024では --mk-side が24pxにクランプされ枠が440pxまで細るが、
	   緑の見え方の比率は保たれる）。
	   ※箱の比率そのものを直すには枠幅952pxが必要で、使えるのは600px
	   （本文470＋隙間18＋画像600＝コンテンツ幅の上限）なので不可能。
	   詳細＝design/redesign-top-2026-08.md §9。 */
	.mk-hero__image .mk-brand-img {
		object-position: 70% center;
	}
}

/* -------------------------------------------------------------------------
 * 差別化：比較表
 * ---------------------------------------------------------------------- */
.mk-compare {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 1.5rem;
}

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

/* Make it 側：SP（17:63）＝藍墨ベタ塗り（枠線なし・強調）。PCは768px以上で白面＋枠に戻す（Issue #39） */
.mk-compare__col--make {
	border-color: var(--c-primary);
	background: var(--c-primary);
}

/* 比較カードの見出しは「見出し」ではなくラベル体。
   SP（17:61/17:64）＝Noto Regular 12px/1.2、PC（24:73/24:81）＝IBM Plex Mono Medium 13px/tracking0.52。
   ※Issue #31 の当初リストはここを Zen Kaku と誤っていたため仕様表で訂正済み。 */
.mk-compare__title {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--c-text-caption);
}

.mk-compare__col--make .mk-compare__title {
	color: var(--c-on-dark-sub);
}

/* 項目：SP（17:62/17:65）＝12px/2.0、PC（24:75/24:83）＝16px/1.6 */
.mk-compare__list {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 2;
	color: var(--c-text-caption);
}

/* Make it 側の項目は Noto Medium（SP＝白／PC＝墨色。Figma 17:65／24:83） */
.mk-compare__col--make .mk-compare__list {
	font-weight: 500;
	color: var(--c-on-dark);
}

@media (min-width: 768px) {
	.mk-compare {
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;
	}

	/* PC（24:80）＝白ベタ＋青緑1.5px枠・文字は藍墨／墨（藍墨ベタ塗りの強調はSPのみ）。
	   枠色は Figma 実測が `#327C7F`（secondary）。SP側の base ルールは藍墨ベタ塗りの
	   ため border-color も primary のままで良いが、PCは面が白に戻るので枠を青緑に
	   戻す必要がある（料金カードと同じ扱い）。 */
	.mk-compare__col--make {
		border-width: 1.5px;
		border-color: var(--c-secondary);
		background: var(--bg-card);
	}

	.mk-compare__col--make .mk-compare__title {
		color: var(--c-primary);
	}

	.mk-compare__col--make .mk-compare__list {
		color: var(--c-text);
	}
}

@media (min-width: 1024px) {
	/* 「一般的な相談所」「Make it」＝日本語が入るので Mono ではなく本文フォント
	   （Issue #60）。Figma（24:73/24:81）は Mono Medium 13px 指定だが、これは
	   英字ラベル前提の指定で、実際は日本語が入るためOS既定の monospace に
	   フォールバックしていた。サイズ13px・Medium・字間0.52pxは維持する。
	   SP側（base）は元から var(--font-body) 12px で問題なし。 */
	.mk-compare__title {
		font-family: var(--font-body);
		font-size: 13px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0.52px;
	}

	.mk-compare__list {
		font-size: 16px;
		line-height: 1.6;
	}
}

/* -------------------------------------------------------------------------
 * 野中様の物語：ポートレート＋本文
 * ---------------------------------------------------------------------- */
.mk-story__row {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
}

/* 写真は野中様の最終確認（2026-08-26 ⑥）でSPを拡大。「現在の約2倍を目安に、顔や
   人柄が分かる大きさへ」との依頼に対し、登内さんが Figma 17:73 で3案を比較して
   「幅2倍・現行比維持」＝176×211 に決定（面積2倍の124×149では体感差が出ず、
   PC比 390:533 の176×240は胴体が増えるだけで顔の大きさは同じ）。Figma側も変更済み。
   aspect-ratio は据え置きなので 176 × 180/150 = 211.2 が自動で出る。 */
.mk-story__portrait {
	flex: none;
	width: 176px;
	aspect-ratio: 150 / 180;
	border-radius: var(--radius);
	background: var(--bg-placeholder);
}

/* 氏名ラベル（Issue #90 ①・2026-08-31）
 *
 * カウンセラーページの .mk-profile__name（18px / PC 22px）はそのまま持ってこない。
 * TOPと下層は見出しスケールが別系統（上の Issue #38 のコメント参照）で、TOPのこの
 * 見出し（.mk-story__col .mk-display）は 18px / PC 30px と小さいため、同じ値だと
 * 見出しと同格になってしまう。下層での比率（氏名 ÷ 見出し ＝ 18/20・22/36）を
 * TOPの見出しサイズに当てて 16px / PC 18px とした。
 * 結果、資格行（13px / PC 16px）＜ 氏名 ＜ 見出し の並びになる。
 */
.mk-story__name {
	margin: 0 0 0.25rem;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--c-text);
}

/* 資格行（2026-08新設）：モック＝Bold・本文サイズ継承（.credentials）。 */
.mk-story__credentials {
	margin-bottom: 0.5rem;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	color: var(--c-text-sub);
}

/* 区切りの ／ はPCだけ。SPは2行に折る指定（Issue #87 ⑦・Figma 627:2）で
   ／ を持たないため、SPでは隠して <br class="mk-br--sp"> に役割を渡す。 */
.mk-story__credentials-sep {
	display: none;
}

@media (min-width: 1024px) {
	.mk-story__row {
		flex-direction: row;
		align-items: flex-start;
		/* Figma 24:95（row 968）＝portrait 390 ＋ 隙間 58 ＋ tcol 520。
		   tcol は flex の残り幅で 520px になる。 */
		gap: 58px;
	}

	/* カウンセラー写真（Figma 24:96）＝390×533。2026-08リデザインで150px幅の
	   サムネイルから「390px幅・本文高さいっぱい」に変わった分
	   （design/redesign-top-2026-08.md「併せて直した既存の不整合」）。Figma側は
	   改稿済みだが実装が追いついていなかった。aspect-ratio も base（SP）の
	   150/180 のままだったため Figma 実測値へ。
	   SPは base 側で指定（Figma 17:73＝176×211。2026-08-26 の野中様依頼⑥で
	   88×106 から拡大）。PC側は width・aspect-ratio とも上書きするため影響しない。 */
	.mk-story__portrait {
		width: 390px;
		aspect-ratio: 390 / 533;
	}

	.mk-story__name {
		margin-bottom: 0.375rem;
		font-size: 18px;
	}

	.mk-story__credentials {
		margin-bottom: 0.75rem;
		font-size: 16px;
	}

	.mk-story__credentials-sep {
		display: inline;
	}
}

/* -------------------------------------------------------------------------
 * アプローチ：5段階ステップ（旧称「道のり」）
 * ---------------------------------------------------------------------- */
.mk-journey__lead {
	margin-top: 0.5rem;
}

.mk-journey {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 2rem;
}

.mk-journey__step {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
}

/* ステップ番号の面は secondary（青緑 #327C7F）。primary（濃紺）ではない
   ――修正指示書のモックと design/typography-spec.md §1・§2、Figma
   （PC 25:44 ／ SP 17:111）がいずれも青緑。白文字とのコントラストは
   4.86:1 で、13〜14pxの通常テキストとしてAA（4.5:1）を満たす。 */
.mk-journey__num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--c-secondary);
	color: var(--c-on-dark);
	font-family: var(--font-label);
	font-size: 0.8125rem;
	font-weight: 500;
}

.mk-journey__text {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.375rem;
	align-items: baseline;
	font-family: var(--font-body);
}

/* ステップ名：SP（17:112）はラベルと説明が1行の Noto Regular 14px/1.5・墨色。
   PC（25:46）で Zen Kaku Bold 17px に変わる（Issue #31 の指摘箇所）。 */
.mk-journey__label {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--c-text);
}

/* 説明：SPは上記と同一スタイル ／ PC（25:48）＝12px/1.6・#4A4D50 */
.mk-journey__desc {
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-text);
}

.mk-journey__desc::before {
	content: "― ";
}

@media (min-width: 1024px) {
	.mk-journey {
		flex-direction: row;
		justify-content: space-between;
		gap: 1rem;
	}

	/* 2026-08：説明文が短いラベルから1文へ長くなったため、幅を180px固定から
	   flex可変＋左寄せへ変更（モックの.step相当・min-height230pxに準拠）。
	   2026-08-21：min-width:200pxを撤去（石井さんレビュー・#56）。5枚×200px+gapで
	   本文カラム968pxを96pxオーバーしていた。min-widthなしのflex:1 1 0だけで
	   Figma実測（180.8px×5）と小数点まで一致する。 */
	.mk-journey__step {
		flex: 1 1 0;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 0.75rem;
		min-height: 230px;
		padding: 1.5rem 1.125rem;
		border-radius: var(--radius);
		border: 1px solid var(--c-border);
		background: var(--bg-card);
	}

	/* ステップ番号（Figma 25:44）＝IBM Plex Mono Medium 14px */
	.mk-journey__num {
		width: 34px;
		height: 34px;
		font-size: 14px;
	}

	.mk-journey__label {
		font-family: var(--font-display);
		font-size: 17px;
		font-weight: 700;
		line-height: normal;
	}

	.mk-journey__desc {
		font-size: 13px;
		line-height: 1.7;
		color: var(--c-text-sub);
	}

	.mk-journey__text {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.mk-journey__desc::before {
		content: none;
	}
}

/* -------------------------------------------------------------------------
 * 変化：これまで/これから テーブル（2026-08新設）
 * モックPC＝ヘッダ背景は --bg-table-head-cool（#DFE5E2）／矢印はコーラル。
 * モックはPCのみのためSPは横スクロールラッパーで対応（テーブル自体は崩さない）。
 * ---------------------------------------------------------------------- */
.mk-change-table__scroll {
	margin-top: 1.5rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* SPで横スクロールさせない。旧 min-width:480px は SP（本文カラム約321px）で
   常に overflow-x が効いてしまい、一番読ませたい「これから」列が初期表示で
   見切れていた（PR #56 石井さんレビュー2）。Figma SP（627:3）は 330px 幅・
   12px・セル余白12px で収めているので、実装も min-width を外してセル余白を
   詰める。__scroll の overflow-x は保険として残す。 */
.mk-change-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--bg-card);
	font-family: var(--font-body);
	font-size: 12px;
}

.mk-change-table th {
	padding: 0.625rem 0.75rem; /* SP＝Figma 627:5 実測 10px/12px */
	background: var(--bg-table-head-cool);
	text-align: left;
	font-weight: 500;
	color: var(--c-text);
}

.mk-change-table td {
	width: 50%;
	padding: 0.75rem; /* SP＝Figma 627:10 実測 12px */
	border-top: 1px solid var(--c-border);
	color: var(--c-text-sub);
}

.mk-change-table__arrow {
	margin-right: 0.5rem;
	color: var(--c-accent);
	font-weight: 700;
}

.mk-closing-copy {
	margin-top: 1.5rem;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--c-text);
	white-space: pre-line;
}

@media (min-width: 1024px) {
	.mk-change-table {
		font-size: 15px;
	}

	.mk-change-table th {
		padding: 1.0625rem 1.25rem;
	}

	.mk-change-table td {
		padding: 1.1875rem 1.25rem;
	}

	.mk-closing-copy {
		font-size: 23px;
		line-height: 1.8;
		margin-top: 2rem;
	}
}

/* -------------------------------------------------------------------------
 * 料金：カード
 * ---------------------------------------------------------------------- */
.mk-pricing-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 1.5rem;
}

/* 2026-08：枠線を藍墨→青緑へ（モック基準）。カード構成もモックに合わせ
   「①大見出し（結婚相談所／心理プログラム）②サブラベル（プラン名）③詳細」の
   3段に変更（旧・巨大な金額数字の見せ方から、料金は詳細テキスト内へ統合）。
   .mk-badge（おすすめバッジ）はモックに存在しないため削除。 */
.mk-pricing-card {
	padding: 1.5rem 1.75rem;
	border-radius: var(--radius);
	border: 1px solid var(--c-secondary);
	background: var(--bg-card);
}

/* ①大見出し：モックPC h3＝27px（--font-displayで代替）。旧__priceのクラス名を流用。 */
.mk-pricing-card__price {
	display: block;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--c-text);
}

/* ②サブラベル：モックPC .label＝Bold 16px・#536267。旧__titleのクラス名を流用。 */
.mk-pricing-card__title {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-text-sub);
}

/* ③詳細：モックPC .price-lines＝17px/1.9。 */
.mk-pricing-card__detail {
	margin-top: 0.75rem;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.7;
	color: var(--c-text-sub);
}

/* 但し書き：SP（17:168）＝12px/1.7 ／ PC（25:127）＝15px/1.75・#23262A */
.mk-disclaimer {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: var(--radius);
	border: 1px solid var(--c-border);
	background: var(--bg-card);
	font-size: 12px;
	line-height: 1.7;
	color: var(--c-text-sub);
}

@media (min-width: 768px) {
	.mk-pricing-grid {
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.mk-pricing-card__price {
		font-size: 27px;
		font-weight: 700;
		line-height: normal;
	}

	.mk-pricing-card__title {
		font-size: 16px;
	}

	.mk-pricing-card__detail {
		font-size: 17px;
		line-height: 1.9;
	}

	.mk-disclaimer {
		font-size: 15px;
		line-height: 1.75;
		color: var(--c-text);
	}
}

/* -------------------------------------------------------------------------
 * FAQ：アコーディオン
 * ---------------------------------------------------------------------- */
.mk-faq-list {
	margin-top: 1.5rem;
	border-top: 1px solid var(--c-border);
}

.mk-faq-item {
	border-bottom: 1px solid var(--c-border);
}

.mk-faq-item__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	/* 行の上下余白（Issue #48）＝Figma SP 17:187〜17:193 の設問テキスト y=14。
	   1行の行高さは 14 + 22 + 14 = 50px（Figma 17:190・17:193）、2行なら 68px
	   （17:187）になる。旧 1.125rem（18px）では 64px で +14px 大きかった。 */
	padding: 14px 0;
	background: none;
	border: 0;
	/* 設問：SP（17:188）＝Noto Regular 13px/1.5 ／ PC（25:150）＝Noto Medium 17px。
	   Figma実測で Noto のままが正（Issue #31 の「要確認」分の結論）。 */
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	color: var(--c-text);
	cursor: pointer;
}

/* ＋アイコン（Figma 25:151）＝Noto Regular 18px・#9A4E33 */
.mk-faq-item__icon {
	flex: none;
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 400;
	/* Figma（SP 17:189 ほか）の ＋ は 18×22。既定の行送りだと行ボックスが約27pxに
	   なり、設問テキスト（13px×1.5＝19.5px）より高いので行の高さを支配して
	   しまう。Figma実測の22pxに固定して行高さを 50px に合わせる（Issue #48）。 */
	line-height: 22px;
	color: var(--c-light-text);
	transition: transform 0.2s ease;
}

.mk-faq-item__q[aria-expanded="true"] .mk-faq-item__icon {
	transform: rotate(45deg);
}

.mk-faq-item__a {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.25s ease;
}

/* 回答文は Figma では閉じた状態のため未計測。本文スケール（SP13/PC16）に合わせる。 */
.mk-faq-item__a-inner {
	padding: 0 0 1.25rem;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: var(--lh-body);
	color: var(--c-text-sub);
}

.mk-faq-item__list {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.mk-faq-item__list li {
	padding-left: 1.25rem;
	position: relative;
}

.mk-faq-item__list li::before {
	content: "・";
	position: absolute;
	left: 0;
}

@media (min-width: 1024px) {
	.mk-faq-item__q {
		font-size: 17px;
		font-weight: 500;
		/* Figma PC 25:150＝設問テキストの高さ20px（1行）。line-height: normal だと
		   約25pxになり、＋アイコン（22px）より高くなって行の高さを支配してしまう。
		   Issue #48 でSPの余白を14pxに詰めた副作用でPCが53pxまで縮んだため、
		   Figma実測（25:149 の行 58px＝上下18px＋アイコン22px）に合わせ直す。 */
		line-height: 20px;
		padding: 18px 0;
	}

	.mk-faq-item__a-inner {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mk-faq-item__a {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 画像帯（テキストなし）
 * ---------------------------------------------------------------------- */
/* 箱の比率は Figma 実測（PC 25:163＝968×340 ／ SP 17:201＝330×196）。
   旧 968/300 は仕様§2の「幅いっぱい・340px」に未更新で、画像1600×640に対し
   上下22.5%（片側11.2%）のトリミングになり、被写体の頭頂部（上から7〜8%）が
   欠けていた（PR #57 石井さんレビュー3）。340pxなら上下12.2%（片側6.1%）で収まる。
   固定heightではなく aspect-ratio にしているのは、1024〜1279pxでコンテナが
   968pxより狭くなっても設計比を保つため。 */
.mk-photo-band {
	aspect-ratio: 330 / 196;
	border-radius: var(--radius);
	background: var(--bg-placeholder-band);
}

@media (min-width: 1024px) {
	.mk-photo-band {
		aspect-ratio: 968 / 340; /* 968px時に高さ340px＝仕様§2 */
	}
}

/* -------------------------------------------------------------------------
 * 最終CTA
 * ---------------------------------------------------------------------- */
.mk-section--cta-final .mk-display {
	color: var(--c-on-dark);
}

.mk-section--cta-final .mk-body {
	color: var(--c-on-dark-sub);
}

.mk-cta-final__head {
	text-align: center;
}

/* 最終CTA見出し：SP（17:211）＝Zen Kaku Bold 22px/1.5 ／ PC（25:173）＝Bold 40px/1.5 */
.mk-cta-final__head .mk-display {
	font-size: 22px;
}

/* eyebrow は暗面でもコーラルで点灯させる。装飾用の --c-accent（#E96847）は
   藍墨面（#203E43）に載せると3.6:1でAA不合格になるため、暗面専用に明るく
   振った --c-accent-on-dark を使う（4.62:1）。深くするのではなく明るくするのは
   「明るく温かい雰囲気を維持」という野中様のご要望に沿わせるため。 */
.mk-cta-final__head .mk-eyebrow {
	color: var(--c-accent-on-dark);
}

/* リード：SP（17:213）＝12.5px/1.8 ／ PC（25:175）＝16px/1.95（＝.mk-body の既定） */
.mk-cta-final .mk-body {
	font-size: 12.5px;
	line-height: 1.8;
}

@media (min-width: 1024px) {
	.mk-cta-final__head .mk-display {
		font-size: 40px;
	}

	/* 下層ページの最終CTA見出しはTOPより小さい（PC 30px。SPは22pxで共通）。
	   Issue #38・2026-08-08 の下層スケール統一に含む。 */
	body:not(.home) .mk-cta-final__head .mk-display {
		font-size: 30px;
	}

	.mk-cta-final .mk-body {
		font-size: 16px;
		line-height: var(--lh-body);
	}
}

.mk-cta-final .mk-cta-row {
	justify-content: center;
}

.mk-cta-final .mk-body {
	text-align: center;
	white-space: pre-line;
}