/*
 * MOVER Corporate — ホームページ制作・改修 料金の目安 (/web-price/) styles. draft（未公開）
 *
 * 読み込み: スラッグ web-price の固定ページで「AI HTML / Full Canvas」テンプレートを使うときだけ、
 *           inc/enqueue.php が自動で読み込む（assets/css/pages/{slug}.css）。PHP の変更は不要。
 * スコープ:  content/web-price.html のルート要素 .mv-wpr 配下だけ。他ページとは共有しない。
 * HERO:     位置・余白・h1 サイズは下層ページ共通ルール（ai-html.css「Sub-page HERO」）を
 *           SERVICE と同じクラス（.mv-svc-hero 系）で使う。ここでは h1 下の補足とページ内リンクだけ書く。
 *
 * 構成（背景のリズム。SERVICE と同じ考え方）:
 *  1. 共通部品
 *  2. HERO             Canvas
 *  3. 共感・課題       Pale Blue（色面の変化だけに使う）
 *  4. 料金の目安       White。罫線の一覧（カードにしない・推奨表示なし・全項目同じ色）
 *  5. WordPress        Canvas
 *  6. 文章 / 営業ツール / 保守   White / Canvas / White。左: 見出し、右: 本文と料金の行
 *  7. CTA              Ink
 *  8. Breakpoints      640 / 768 / 1024
 *
 * ルール: 値は theme.json 由来の変数のみ（見出しサイズの clamp は例外）。影・グラデーションなし。
 *         料金は Ink（Signal Orange は短線・ラベルの点だけ）。!important なし。JS なし。
 */

/* ------------------------------------------------------------------
 * 1. Shared
 * ------------------------------------------------------------------ */
.mv-wpr {
	--mv-wpr-gap: var(--mover-space-2xl);

	/* 本文も見出しも文節で折り返す（未対応ブラウザは従来どおり） */
	word-break: auto-phrase;
}

.mv-wpr p {
	margin-block: 0;
	text-wrap: pretty;
}

.mv-wpr :is(h1, h2, h3) {
	text-wrap: pretty;
}

/* :where で詳細度を 1 クラス分に抑える（各部品の margin 指定が後から効くように） */
.mv-wpr :where(.mv-wpr-toc ul, .mv-wpr-voices, .mv-wpr-plans, .mv-wpr-notes) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mv-wpr .mv-wpr-head {
	max-width: var(--mover-reading);
	margin-block-end: var(--mv-wpr-gap);
}

.mv-wpr .mv-wpr-title {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--2-xl);
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.mv-wpr .mv-wpr-head__lead {
	margin-block-start: var(--mover-space-lg);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.9;
}

/* 金額の数字: 桁がそろう等幅数字 */
.mv-wpr .mv-wpr-num {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------
 * 2. HERO
 * ------------------------------------------------------------------ */
/* h1 の下: ページ名（COMPANY の会社名・AI SUPPORT の補足と同じ扱い） */
.mv-wpr .mv-wpr-hero__sub {
	margin-block-start: var(--mv-subhero-sub-gap);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.6;
}

/* ページ内リンク（SERVICE の .mv-svc-toc と同じ見た目）。44px のタップ領域 */
.mv-wpr .mv-wpr-toc {
	margin-block-start: var(--mv-subhero-nav-gap);
	padding-block-start: var(--mover-space-sm);
	border-top: 1px solid var(--mover-border);
}

.mv-wpr .mv-wpr-toc ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mover-space-xs) var(--mover-space-lg);
}

.mv-wpr .mv-wpr-toc a {
	display: inline-flex;
	align-items: center;
	min-height: var(--mover-tap-size);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 1px;
	white-space: nowrap;
}

.mv-wpr .mv-wpr-toc a:hover,
.mv-wpr .mv-wpr-toc a:focus-visible {
	color: var(--mover-signal-dark);
}

/* ページ内リンクで飛んだとき、見出しが画面の端に貼り付かないように */
.mv-wpr [id] {
	scroll-margin-top: var(--mover-space-lg);
}

/* ------------------------------------------------------------------
 * 3. 共感・課題 — Pale Blue
 * ------------------------------------------------------------------ */
.mv-wpr .mv-wpr-concern {
	/* theme.json の変数が出力されない場合に備えて同じ値をフォールバックに持つ */
	background-color: var(--wp--custom--mover--pale-blue, #E7F2FB);
	color: var(--mover-ink);
}

.mv-wpr .mv-wpr-concern__grid {
	display: grid;
	gap: var(--mover-space-xl) var(--mv-wpr-gap);
	align-items: start;
}

.mv-wpr .mv-wpr-voices {
	display: grid;
	border-top: 1px solid var(--mover-ink);
}

.mv-wpr .mv-wpr-voices li {
	padding-block: var(--mover-space-md);
	border-bottom: 1px solid color-mix(in srgb, var(--mover-ink) 20%, transparent);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.6;
}

.mv-wpr .mv-wpr-concern__body {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.9;
}

.mv-wpr .mv-wpr-concern__body .mv-wpr-title {
	margin-block-end: var(--mover-space-lg);
}

/* ------------------------------------------------------------------
 * 4. 料金の目安
 * ------------------------------------------------------------------ */
/* 1 項目 = 1 行。狭い画面: 名前 | 金額 / 説明。1024px〜: 名前 | 説明 | 金額 */
.mv-wpr .mv-wpr-plans {
	display: grid;
	border-top: 1px solid var(--mover-ink);
}

.mv-wpr .mv-wpr-plan {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"name price"
		"desc desc";
	gap: var(--mover-space-xs) var(--mover-space-md);
	align-items: baseline;
	padding-block: var(--mover-space-lg);
	border-bottom: 1px solid var(--mover-border);
}

.mv-wpr .mv-wpr-plan__name {
	grid-area: name;
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
}

.mv-wpr .mv-wpr-plan__price {
	grid-area: price;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.3;
	text-align: end;
	white-space: nowrap;
}

.mv-wpr .mv-wpr-plan__price .mv-wpr-num {
	font-size: var(--wp--preset--font-size--xl);
}

.mv-wpr .mv-wpr-plan__desc {
	grid-area: desc;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.8;
	color: var(--mover-muted);
}

/* 補助の 2 項目（WordPress を使わないサイト・LP）: 主要 5 項目の下に、少し小さく並べる */
/* 上の罫線は付けない（主要 5 項目の最後の罫線と二重になり、空の行に見えるため） */
.mv-wpr .mv-wpr-price-subtitle {
	margin-block-start: var(--mover-space-xl);
	margin-block-end: var(--mover-space-sm);
}

.mv-wpr .mv-wpr-plans--sub {
	margin-block-start: 0;
	border-top: 0;
}

.mv-wpr .mv-wpr-plans--sub .mv-wpr-plan__name {
	font-size: var(--wp--preset--font-size--md);
}

.mv-wpr .mv-wpr-plans--sub .mv-wpr-plan__price .mv-wpr-num {
	font-size: var(--wp--preset--font-size--lg);
}

.mv-wpr .mv-wpr-notes {
	display: grid;
	gap: var(--mover-space-xs);
	margin-block-start: var(--mover-space-lg);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.7;
	color: var(--mover-muted);
}

/* ------------------------------------------------------------------
 * 5. WordPress / 非WordPress — Canvas
 * ------------------------------------------------------------------ */
.mv-wpr .mv-wpr-cms {
	background-color: var(--mover-canvas);
}

.mv-wpr .mv-wpr-cms__pair {
	display: grid;
	gap: var(--mover-space-lg) var(--mover-space-xl);
}

.mv-wpr .mv-wpr-cms__item {
	padding-block-start: var(--mover-space-md);
	border-top: 1px solid var(--mover-ink);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.7;
}

.mv-wpr .mv-wpr-cms__close {
	max-width: var(--mover-reading);
	margin-block-start: var(--mv-wpr-gap);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.9;
}

/* ------------------------------------------------------------------
 * 6. 文章 / 営業ツール / 保守 — 見出し | 本文と料金の行
 * ------------------------------------------------------------------ */
.mv-wpr .mv-wpr-area:not(.mover-section--white) {
	background-color: var(--mover-canvas);
}

.mv-wpr .mv-wpr-area__grid {
	display: grid;
	gap: var(--mover-space-xl) var(--mv-wpr-gap);
	align-items: start;
}

.mv-wpr .mv-wpr-area__body {
	padding-block-start: var(--mover-space-lg);
	border-top: 1px solid var(--mover-ink);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.9;
}

.mv-wpr .mv-wpr-area__body > p + p {
	margin-block-start: var(--mover-space-sm);
}

/* 料金の行: 項目 | 金額 */
.mv-wpr .mv-wpr-rates {
	margin-block: var(--mover-space-lg);
	margin-inline: 0;
}

.mv-wpr .mv-wpr-rates__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--mover-space-md);
	align-items: baseline;
	padding-block: var(--mover-space-sm);
	border-top: 1px solid var(--mover-border);
}

.mv-wpr .mv-wpr-rates__row:last-child {
	border-bottom: 1px solid var(--mover-border);
}

.mv-wpr .mv-wpr-rates :is(dt, dd) {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
}

.mv-wpr .mv-wpr-rates dt {
	font-weight: 700;
}

.mv-wpr .mv-wpr-rates dd {
	font-weight: 700;
	text-align: end;
	white-space: nowrap;
}

.mv-wpr .mv-wpr-rates dd .mv-wpr-num {
	font-size: var(--wp--preset--font-size--lg);
}

/* ------------------------------------------------------------------
 * 7. CTA — Ink
 * ------------------------------------------------------------------ */
.mv-wpr .mv-wpr-cta__grid {
	display: grid;
	gap: var(--mover-space-xl);
	align-items: start;
}

/* 6 行の見出し。1 行目（17 文字）が PC で折り返さない大きさに留める */
.mv-wpr .mv-wpr-cta__title {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.6;
	letter-spacing: 0.01em;
	color: var(--mover-white);
}

.mv-wpr .mv-wpr-cta__lead {
	margin-block-start: var(--mover-space-lg);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.9;
	color: var(--mover-border);
}

.mv-wpr .mv-wpr-cta__actions .mover-btn {
	width: 100%;
}

/* ------------------------------------------------------------------
 * 8. Breakpoints
 * ------------------------------------------------------------------ */
@media (max-width: 639px) {
	.mv-wpr .mv-wpr-toc ul {
		column-gap: var(--mover-space-md);
		row-gap: var(--mover-space-xs);
	}
}

@media (min-width: 640px) {
	.mv-wpr .mv-wpr-cms__pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mv-wpr .mv-wpr-plans--sub {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--mover-space-xl);
	}

	.mv-wpr .mv-wpr-cta__actions .mover-btn {
		width: auto;
	}
}

@media (min-width: 768px) {
	.mv-wpr .mv-wpr-voices li {
		font-size: var(--wp--preset--font-size--xl);
	}

	.mv-wpr :is(.mv-wpr-concern__body, .mv-wpr-head__lead, .mv-wpr-area__body, .mv-wpr-cms__close, .mv-wpr-cta__lead) {
		font-size: var(--wp--preset--font-size--lg);
	}

	.mv-wpr .mv-wpr-cms__item {
		font-size: var(--wp--preset--font-size--xl);
		line-height: 1.6;
	}

	.mv-wpr .mv-wpr-rates :is(dt, dd) {
		font-size: var(--wp--preset--font-size--md);
	}

	.mv-wpr .mv-wpr-cta__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--mover-space-2xl);
	}

	.mv-wpr .mv-wpr-cta__actions {
		justify-self: end;
		align-self: end;
	}
}

@media (min-width: 1024px) {
	/* HERO の h1 は 1 行 8 文字（SERVICE は 7 文字）。左列に収まるよう共通ルールの倍率で少し小さく */
	.mv-wpr {
		--mv-subhero-h1-scale: 0.8;
	}

	/* 共感・課題: 声 | 見出しと本文 */
	.mv-wpr .mv-wpr-concern__grid {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		align-items: center;
	}

	/* 料金: 名前 | 説明 | 金額 の 3 列 */
	.mv-wpr .mv-wpr-plans > .mv-wpr-plan {
		grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
		grid-template-areas: "name desc price";
		gap: var(--mover-space-xl);
		padding-block: var(--mover-space-xl);
	}

	.mv-wpr .mv-wpr-plans > .mv-wpr-plan .mv-wpr-plan__name {
		font-size: var(--wp--preset--font-size--xl);
	}

	.mv-wpr .mv-wpr-plans > .mv-wpr-plan .mv-wpr-plan__desc {
		font-size: var(--wp--preset--font-size--md);
	}

	.mv-wpr .mv-wpr-plans > .mv-wpr-plan .mv-wpr-plan__price .mv-wpr-num {
		font-size: var(--wp--preset--font-size--2-xl);
	}

	/* 補助の 2 項目は 2 列のまま、名前 | 金額 / 説明 の小さい形 */
	.mv-wpr .mv-wpr-plans--sub > .mv-wpr-plan {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name price"
			"desc desc";
		gap: var(--mover-space-xs) var(--mover-space-md);
		padding-block: var(--mover-space-lg);
	}

	.mv-wpr .mv-wpr-plans--sub > .mv-wpr-plan .mv-wpr-plan__name {
		font-size: var(--wp--preset--font-size--lg);
	}

	.mv-wpr .mv-wpr-plans--sub > .mv-wpr-plan .mv-wpr-plan__desc {
		font-size: var(--wp--preset--font-size--sm);
	}

	.mv-wpr .mv-wpr-plans--sub > .mv-wpr-plan .mv-wpr-plan__price .mv-wpr-num {
		font-size: var(--wp--preset--font-size--xl);
	}

	/* 文章 / 営業ツール / 保守: 見出し | 本文（SERVICE の領域と同じ 6:6） */
	.mv-wpr .mv-wpr-area__grid {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	}

	.mv-wpr .mv-wpr-area__grid .mv-wpr-title {
		font-size: clamp(28px, 2.5vw, 36px);
	}

	.mv-wpr .mv-wpr-area__head {
		position: sticky;
		top: var(--mover-space-xl);
	}
}