/* ============================================================
 * pages/lp-marketing-copilot.css ─ LP5 マーケの右腕（定額制マーケティング支援）専用スタイル
 *
 * 構成（CSS順）2026-05-04 v1.0 再構築：
 *  Page-level     : スキップリンク・main 設定
 *  Header         : lp-mc-header（最小化・sticky）
 *  Section 00     : lp-mc-hero（h1 短文「マーケの右腕。」・対象者文・ミニ3点・LP専用SVG）
 *  Section 00.5   : trust-bar（共通仕様をローカル定義）
 *  Section 01     : lp-mc-why（マーケ運営の現状の3パターン）
 *  Section 02     : lp-mc-compare（採用 vs 業務委託 vs マーケの右腕の比較表）
 *  Section 03     : lp-mc-service / lp-mc-strengths（提供範囲4レイヤー＋3つの強み）
 *  Section 04     : lp-mc-plans（3プランカード／Plan B 中央プラン強調）
 *  Section 05     : lp-mc-flow（4 Step・縦タイムライン型）
 *  Section 06     : Final CTA（about-final-cta 借用）
 *  Section 07     : lp-mc-faq（FAQ 5問・details/summary）
 *  Section 08     : lp-mc-promise（ダーク強調・3カード）
 *  Section 09     : lp-mc-form-section（CF7 placeholder）
 *  Section 10     : lp-mc-privacy（個人情報・要約版）
 *  Footer         : lp-mc-footer（最小フッター）
 *  Sticky CTA     : lp-mc-sticky-cta（SP常時可視CTA）
 *  Thanks Page    : lp-mc-thanks-hero / lp-mc-thanks-info / lp-mc-thanks-back
 *
 * 設計：ライト基盤＋ダーク強調（lp-mc-promise）のハイブリッド
 * 配色：Teal #067B7B 中心の上質トーン。補助色（Cyan/Coral/Amber/Rose）は彩度抑えめ。
 * モバイルファースト：SPで第一印象品質を最優先（CLAUDE.md 1章末）
 * 禁則：AIっぽい callout box（border-left 太枠 ＋ 塗り背景 ＋ 角丸 padding 大）禁止
 *      → Plan B 中央強調も「上部 3px teal ライン＋背景一段濃く」で実装
 * ============================================================ */


/* ============================================================
 * Page-level：アンカー位置のオフセット（固定ヘッダー分）
 * ============================================================ */
:root {
	scroll-padding-top: 80px;
}

/* ページ末尾は about-final-cta がダーク強調。直後の lp-mc-form / footer との
   間に白い余白が出ないよう、site-footer の margin-top を相殺 */
.site-footer {
	margin-top: 0;
}

/* スキップリンク */
.skip-link {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	z-index: 1000;
	padding: var(--space-3) var(--space-4);
	background: var(--color-brand);
	color: var(--color-text-on-brand);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	border-radius: var(--radius-md);
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--duration-fast) var(--ease-out-expo);
}

.skip-link:focus {
	transform: translateY(0);
}

main {
	display: flex;
	flex-direction: column;
}

main > section {
	width: 100%;
}

/* sr-only：スクリーンリーダー専用テキスト（caption 等で使用） */
.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;
}


/* ============================================================
 * LP 専用ヘッダー（最小化：ロゴ＋tel＋第一CTA）
 * sticky で常時可視。SP では tel と CTA をコンパクトに。
 * ============================================================ */
.lp-mc-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--z-header);
	background: rgba(250, 249, 247, 0.92);
	backdrop-filter: blur(var(--blur-md));
	-webkit-backdrop-filter: blur(var(--blur-md));
	border-bottom: 1px solid var(--color-border-subtle);
	transition: transform var(--duration-base) var(--ease-out-expo);
}

.lp-mc-header__inner {
	max-width: var(--container-wide);
	margin-inline: auto;
	padding: var(--space-3) var(--space-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 64px;
}

@media (min-width: 768px) {
	.lp-mc-header__inner {
		padding: var(--space-3) var(--space-6);
	}
}

.lp-mc-header__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
	transition: opacity var(--duration-fast) var(--ease-out-expo);
}

.lp-mc-header__logo:hover {
	opacity: 0.75;
}

.lp-mc-header__logo img {
	height: 24px;
	width: auto;
	display: block;
}

@media (min-width: 768px) {
	.lp-mc-header__logo img {
		height: 28px;
	}
}

.lp-mc-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.lp-mc-header__tel {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-primary);
	font-weight: var(--fw-bold);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-sm);
	letter-spacing: var(--ls-tight);
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	transition:
		color var(--duration-fast) var(--ease-out-expo),
		background var(--duration-fast) var(--ease-out-expo);
}

.lp-mc-header__tel:hover {
	color: var(--color-brand);
	background: var(--color-glass-brand);
}

.lp-mc-header__tel-icon {
	width: 18px;
	height: 18px;
	color: var(--color-brand);
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.lp-mc-header__tel-icon {
		width: 20px;
		height: 20px;
	}
}

.lp-mc-header__tel-num {
	display: none;
}

@media (min-width: 768px) {
	.lp-mc-header__tel-num {
		display: inline;
		font-size: var(--fs-base);
	}
}

.lp-mc-header__cta {
	white-space: nowrap;
}


/* ============================================================
 * Section 00 ─ Hero（LP固有・h1 短文「マーケの右腕。」）
 * LP1 より hero/grid/column gap で余白を 1.2倍程度。
 * ============================================================ */
.lp-mc-hero {
	position: relative;
	min-height: 84vh;  /* LP1（80vh）より少し広く取り、余白の上質感を確保 */
	display: flex;
	align-items: center;
	padding-top: calc(64px + var(--space-8));
	padding-bottom: var(--space-9);
	overflow: hidden;
	isolation: isolate;
	background: var(--color-bg-primary);
}

@media (min-width: 1024px) {
	.lp-mc-hero {
		min-height: 88vh;
	}
}

@keyframes lp-mc-hero-visual-in {
	from { opacity: 0; transform: translateY(-50%) scale(0.96); }
	to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

@keyframes lp-mc-hero-visual-in-sp {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes lp-mc-hero-fade-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ─── 背景の極薄メガタイポ ─── */
.lp-mc-hero__bg-typo {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-family: var(--font-sans-latin);
	font-size: clamp(5rem, 16vw, 16rem);
	font-weight: var(--fw-extrabold);
	color: var(--color-text-primary);
	opacity: 0.04;
	letter-spacing: var(--ls-tight);
	white-space: nowrap;
	user-select: none;
	overflow: hidden;
	pointer-events: none;
}

@media (max-width: 767px) {
	.lp-mc-hero__bg-typo {
		opacity: 0.025;
		font-size: clamp(4rem, 18vw, 8rem);
	}
}

.lp-mc-hero__bg-typo span {
	display: block;
}

.lp-mc-hero__bg-typo span:first-child {
	transform: translateX(-8%);
}

.lp-mc-hero__bg-typo span:last-child {
	transform: translateX(8%);
	text-align: right;
}

/* ─── ヒーロー右側の SVG コンポジション ─── */
.lp-mc-hero__visual {
	position: absolute;
	top: 50%;
	right: max(var(--space-7), calc((100vw - var(--container-wide)) / 2 + var(--space-7)));
	transform: translateY(-50%);
	width: 42%;
	max-width: 540px;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
	opacity: 0;
	animation: lp-mc-hero-visual-in var(--duration-slowest) var(--ease-out-expo) 1.2s forwards;
}

.lp-mc-hero__visual svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

/* SP・タブレット（〜1023px）：ヒーローSVG はテキストの「下」にフルサイズで段組み */
@media (max-width: 1023px) {
	.lp-mc-hero {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		min-height: auto;
		padding-bottom: var(--space-7);
	}

	.lp-mc-hero__visual {
		position: static;
		top: auto;
		right: auto;
		transform: none;
		width: 100%;
		max-width: 480px;
		margin-inline: auto;
		margin-top: var(--space-7);
		padding-inline: var(--space-4);
		opacity: 0;
		animation-name: lp-mc-hero-visual-in-sp;
		order: 2;
	}

	.lp-mc-hero__inner {
		order: 1;
	}
}

/* タブレット（768〜1023px）：ヒーローSVG はワイドな視野を活かして大型化 */
@media (min-width: 768px) and (max-width: 1023px) {
	.lp-mc-hero__visual {
		max-width: 560px;
		margin-top: var(--space-8);
	}
}

/* ─── 中身コンテナ ─── */
.lp-mc-hero__inner {
	position: relative;
	z-index: 1;
}

.lp-mc-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	width: 100%;
	max-width: 640px;
}

@media (min-width: 1024px) {
	.lp-mc-hero__content {
		max-width: min(52vw, 620px);
		margin-right: auto;
	}
}

.lp-mc-hero__overline {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0;
	opacity: 0;
	animation: lp-mc-hero-fade-in var(--duration-slow) var(--ease-out-expo) 0.4s forwards;
}

/* h1 はPCで右側SVGと重ならないよう、短い行の積み上げで見せる */
.lp-mc-hero__title {
	font-size: var(--fs-display-lg);
	line-height: 1.1;
	letter-spacing: var(--ls-tighter);
	color: var(--color-text-primary);
	font-weight: var(--fw-extrabold);
	font-feature-settings: "palt";
	margin-top: var(--space-3);
	max-width: none;
	text-wrap: balance;
	opacity: 0;
	animation: lp-mc-hero-fade-in var(--duration-slow) var(--ease-out-expo) 0.6s forwards;
}

.lp-mc-hero__title-line {
	display: inline-block;
}

@media (min-width: 1024px) {
	.lp-mc-hero__title-line {
		white-space: nowrap;
	}
}

/* SP（〜767px）：h1 短文「マーケの右腕。」を大胆に。36〜48px。 */
@media (max-width: 767px) {
	.lp-mc-hero__title {
		font-size: clamp(2.25rem, 10vw, 3rem);  /* 36〜48px */
		line-height: 1.15;
		letter-spacing: -0.02em;
		max-width: none;
	}
}

/* 狭幅（〜380px：iPhone SE 等）でも 36px 程度を維持 */
@media (max-width: 380px) {
	.lp-mc-hero__title {
		font-size: clamp(2rem, 9.5vw, 2.5rem);  /* 32〜40px */
		line-height: 1.18;
	}
}

/* 対象者文：誰のどの状況を扱うかを 1行で示す */
.lp-mc-hero__audience {
	margin-top: var(--space-3);
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	line-height: 1.7;
	max-width: 60ch;
	text-wrap: pretty;
	opacity: 0;
	animation: lp-mc-hero-fade-in var(--duration-slow) var(--ease-out-expo) 0.8s forwards;
}

@media (min-width: 768px) {
	.lp-mc-hero__audience {
		font-size: var(--fs-lg);
	}
}

.lp-mc-hero__lead {
	font-size: var(--fs-lg);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 60ch;
	text-wrap: pretty;
	opacity: 0;
	animation: lp-mc-hero-fade-in var(--duration-slow) var(--ease-out-expo) 1.0s forwards;
}

.lp-mc-hero__lead strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-bold);
}

/* Hero 直下のミニ3点：「相談で確認すること」を CTA 直前に配置。
   塗り背景・全周枠線・角丸padding大は使わず、上部 1px 線＋チェック付きリストに。 */
.lp-mc-hero__mini {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-subtle);
	opacity: 0;
	animation: lp-mc-hero-fade-in var(--duration-slow) var(--ease-out-expo) 1.1s forwards;
}

.lp-mc-hero__mini-label {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-2);
}

.lp-mc-hero__mini-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: var(--fs-base);
	color: var(--color-text-primary);
	line-height: var(--lh-relaxed);
}

.lp-mc-hero__mini-list li {
	position: relative;
	padding-left: calc(var(--space-4) + var(--space-2));
}

/* チェックマーク（::before の罫線2本でVを作る） */
.lp-mc-hero__mini-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--color-brand);
	border-bottom: 2px solid var(--color-brand);
	transform: rotate(-45deg);
}

.lp-mc-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-4);
	opacity: 0;
	animation: lp-mc-hero-fade-in var(--duration-slow) var(--ease-out-expo) 1.3s forwards;
}

.lp-mc-hero__notes {
	margin-top: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
	list-style: none;
	padding: 0;
	opacity: 0;
	animation: lp-mc-hero-fade-in var(--duration-slow) var(--ease-out-expo) 1.4s forwards;
}

.lp-mc-hero__notes li {
	position: relative;
	padding-left: var(--space-4);
}

.lp-mc-hero__notes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 8px;
	height: 1px;
	background: var(--color-brand);
}

/* ─── Hero SVG 内：6ピル（SEO/MEO/Ads/SNS/LP/Analytics）の浮遊 ─── */
@media (prefers-reduced-motion: no-preference) {
	.lp-mc-hero__pill {
		transform-origin: center;
		transform-box: fill-box;
	}

	.lp-mc-hero__pill--seo {
		animation: hero-decor-float-y 4.2s ease-in-out infinite;
	}

	.lp-mc-hero__pill--meo {
		animation: hero-decor-float-y-slow 4.8s ease-in-out 0.4s infinite;
	}

	.lp-mc-hero__pill--ads {
		animation: hero-decor-float-y 4.4s ease-in-out 0.8s infinite;
	}

	.lp-mc-hero__pill--sns {
		animation: hero-decor-float-y-slow 5s ease-in-out 0.2s infinite;
	}

	.lp-mc-hero__pill--lp {
		animation: hero-decor-float-y 4.6s ease-in-out 0.6s infinite;
	}

	.lp-mc-hero__pill--ana {
		animation: hero-decor-float-y-slow 5.2s ease-in-out 1s infinite;
	}
}


/* ============================================================
 * Section 00.5 ─ Trust Bar（共通仕様：ローカル複製）
 * ============================================================ */
.trust-bar {
	position: relative;
	padding-block: var(--space-5);
	background: var(--color-bg-surface);
	border-block: 1px solid var(--color-border-subtle);
	z-index: 2;
}

.trust-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}

.trust-bar__label {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0;
}

.trust-bar__metrics {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-4);
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
}

.trust-bar__metrics strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-bold);
}

.trust-bar__divider {
	display: inline-block;
	width: 1px;
	height: 1em;
	background: var(--color-border-default);
}


/* ============================================================
 * 共通：機能名詞 h2 セクションヘッダー
 * lp-mc-why / lp-mc-compare / lp-mc-service / lp-mc-plans /
 * lp-mc-flow / lp-mc-faq / lp-mc-form-section / lp-mc-privacy
 * ============================================================ */
.lp-mc-why,
.lp-mc-compare,
.lp-mc-service,
.lp-mc-plans,
.lp-mc-flow,
.lp-mc-faq,
.lp-mc-form-section,
.lp-mc-privacy {
	position: relative;
	padding-block: var(--space-9);
	background: var(--color-bg-primary);
	overflow: hidden;
	isolation: isolate;
}

@media (min-width: 1024px) {
	.lp-mc-why,
	.lp-mc-compare,
	.lp-mc-service,
	.lp-mc-plans,
	.lp-mc-flow,
	.lp-mc-faq,
	.lp-mc-form-section,
	.lp-mc-privacy {
		padding-block: var(--space-10);
	}
}

@media (max-width: 767px) {
	.lp-mc-why,
	.lp-mc-compare,
	.lp-mc-service,
	.lp-mc-plans,
	.lp-mc-flow,
	.lp-mc-faq,
	.lp-mc-form-section,
	.lp-mc-privacy {
		padding-block: var(--space-8);
	}
}

.lp-mc-why__header,
.lp-mc-compare__header,
.lp-mc-service__header,
.lp-mc-plans__header,
.lp-mc-flow__header,
.lp-mc-faq__header,
.lp-mc-form-section__header,
.lp-mc-privacy__header,
.lp-mc-promise__header {
	margin-bottom: var(--space-7);
	max-width: 760px;
	position: relative;
}

@media (max-width: 767px) {
	.lp-mc-why__header,
	.lp-mc-compare__header,
	.lp-mc-service__header,
	.lp-mc-plans__header,
	.lp-mc-flow__header,
	.lp-mc-faq__header,
	.lp-mc-form-section__header,
	.lp-mc-privacy__header,
	.lp-mc-promise__header {
		margin-bottom: var(--space-6);
	}
}

.lp-mc-why__title,
.lp-mc-compare__title,
.lp-mc-service__title,
.lp-mc-plans__title,
.lp-mc-flow__title,
.lp-mc-faq__title,
.lp-mc-form-section__title,
.lp-mc-privacy__title,
.lp-mc-promise__title {
	font-size: var(--fs-display-md);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-feature-settings: "palt";
	margin-top: var(--space-3);
}

/* h2 内の各行：意味の切れ目で改行＋読点・句点の孤立防止（why / plans セクション） */
.lp-mc-why__title-line,
.lp-mc-plans__title-line {
	display: inline-block;
	white-space: nowrap;
}

.lp-conversion-stage--mc .lp-conversion-stage__title-line,
.lp-mc-form-section__title-line {
	display: block;
	white-space: nowrap;
}

@media (max-width: 360px) {
	.lp-mc-why__title-line,
	.lp-mc-plans__title-line,
	.lp-conversion-stage--mc .lp-conversion-stage__title-line,
	.lp-mc-form-section__title-line {
		white-space: normal;
	}
}

/* PC（≥1024px）：Monthly Ops Board の右カラムを少し絞る */
@media (min-width: 1024px) {
	.lp-mc-form-section__title {
		white-space: normal;
	}

	.lp-conversion-stage--mc .lp-conversion-stage__inner {
		grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
		gap: var(--space-8);
	}

	.lp-conversion-stage--mc .lp-conversion-stage__visual {
		justify-self: end;
		width: min(100%, 520px);
	}
}

@media (min-width: 1280px) {
	.lp-conversion-stage--mc .lp-conversion-stage__inner {
		grid-template-columns: minmax(0, 1.14fr) minmax(380px, 0.86fr);
	}
}

@media (max-width: 767px) {
	.lp-mc-why__title,
	.lp-mc-compare__title,
	.lp-mc-service__title,
	.lp-mc-plans__title,
	.lp-mc-flow__title,
	.lp-mc-faq__title,
	.lp-mc-form-section__title,
	.lp-mc-privacy__title {
		font-size: clamp(1.625rem, 7vw, 2rem);  /* 26〜32px */
		line-height: 1.3;
	}
}

/* TL;DR：プレーンテキスト＋下マージン。box 化禁止 */
.lp-mc-why__tldr,
.lp-mc-compare__tldr,
.lp-mc-service__tldr,
.lp-mc-plans__tldr,
.lp-mc-flow__tldr,
.lp-mc-faq__tldr,
.lp-mc-form-section__tldr,
.lp-mc-privacy__tldr,
.lp-mc-promise__lead {
	margin-top: var(--space-4);
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 64ch;
	text-wrap: pretty;
}

.lp-mc-why__tldr strong,
.lp-mc-compare__tldr strong,
.lp-mc-service__tldr strong,
.lp-mc-plans__tldr strong,
.lp-mc-flow__tldr strong,
.lp-mc-faq__tldr strong,
.lp-mc-form-section__tldr strong,
.lp-mc-privacy__tldr strong,
.lp-mc-promise__lead strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}


/* ============================================================
 * Section 01 ─ lp-mc-why（マーケ運営の現状の3パターン）
 * ============================================================ */
.lp-mc-why__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 64ch;
	font-size: var(--fs-base);
	line-height: var(--lh-loose);
	color: var(--color-text-secondary);
	text-wrap: pretty;
}

.lp-mc-why__body p {
	margin: 0;
	max-width: 64ch;
}

.lp-mc-why__body strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}

.lp-mc-why__body a {
	color: var(--color-brand);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--duration-fast) var(--ease-out-expo);
}

.lp-mc-why__body a:hover {
	color: var(--color-brand-700);
}

.lp-mc-why__points {
	margin-top: var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	list-style: none;
	padding: 0;
}

/* PC（≥1024px）：上下分離レイアウト
   上：header（h2 + TL;DR）── フル幅
   下：body（説明文段落）＝ 左カラム
       points（3ポイント・01/02/03）＝ 右カラム */
@media (min-width: 1024px) {
	.lp-mc-why__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--space-8);
		row-gap: var(--space-7);
		align-items: start;
	}

	.lp-mc-why__header {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.lp-mc-why__body {
		grid-column: 1;
		grid-row: 2;
		max-width: none;
	}

	.lp-mc-why__body p {
		max-width: 60ch;
	}

	.lp-mc-why__points {
		grid-column: 2;
		grid-row: 2;
		margin-top: 0;
		align-self: start;
	}

	.lp-mc-why__source {
		grid-column: 1 / -1;
		grid-row: 3;
	}
}

.lp-mc-why__points li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-4);
	align-items: start;
	padding: var(--space-4) 0;
	border-top: 1px solid var(--color-border-subtle);
}

.lp-mc-why__points li:first-child {
	border-top: none;
	padding-top: 0;
}

.lp-mc-why__points-num {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xl);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-tight);
	color: var(--color-brand);
	line-height: 1;
	font-feature-settings: "tnum";
	min-width: 2ch;
}

.lp-mc-why__points-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.lp-mc-why__points-body strong {
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
}

.lp-mc-why__points-body span {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	text-wrap: pretty;
}

.lp-mc-why__points-body span strong {
	font-size: inherit;
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
}

.lp-mc-why__source {
	margin-top: var(--space-5);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
	max-width: 64ch;
}


/* ============================================================
 * Section 02 ─ lp-mc-compare（採用 vs 業務委託 vs マーケの右腕）
 *   PC：<table> 横並び比較
 *   SP：各 <tr> を grid 化して縦再構成（観点 → 各セル）
 *   〜380px：grid を 100px 1fr → ラベル↑/本文↓ の 1カラムに切替
 * ============================================================ */
.lp-mc-compare__table-wrap {
	-webkit-overflow-scrolling: touch;
}

.lp-mc-compare__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	background: var(--color-bg-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.lp-mc-compare__table th,
.lp-mc-compare__table td {
	padding: var(--space-4) var(--space-5);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--color-border-subtle);
}

.lp-mc-compare__table thead th {
	background: var(--color-bg-elevated);
	color: var(--color-text-primary);
	font-weight: var(--fw-bold);
	font-size: var(--fs-base);
}

.lp-mc-compare__table tbody th {
	color: var(--color-text-primary);
	font-weight: var(--fw-bold);
	width: 18%;
}

.lp-mc-compare__table tbody td {
	color: var(--color-text-secondary);
	width: 27%;
}

/* マーケの右腕 列：強調（ヘッダ＋セル両方） */
.lp-mc-compare__col-highlight {
	background: var(--color-glass-brand);
	color: var(--color-text-primary);
}

.lp-mc-compare__table thead th.lp-mc-compare__col-highlight {
	background: var(--color-brand);
	color: var(--color-text-on-brand);
}

.lp-mc-compare__table tbody td.lp-mc-compare__col-highlight {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}

.lp-mc-compare__table tbody tr:last-child th,
.lp-mc-compare__table tbody tr:last-child td {
	border-bottom: none;
}

/* SP（767px以下）：各 tr を grid 化して縦再構成 */
@media (max-width: 767px) {

	.lp-mc-compare__table {
		display: block;
		background: transparent;
		border-radius: 0;
		overflow: visible;
		font-size: var(--fs-sm);
	}

	.lp-mc-compare__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.lp-mc-compare__table tbody {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
	}

	.lp-mc-compare__table tbody tr {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-2);
		padding: var(--space-4);
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-subtle);
		border-radius: var(--radius-lg);
	}

	.lp-mc-compare__table tbody th[scope="row"] {
		width: auto;
		padding: 0 0 var(--space-2);
		border-bottom: 1px dashed var(--color-border-subtle);
		font-family: var(--font-sans-latin);
		font-size: var(--fs-xs);
		font-weight: var(--fw-extrabold);
		letter-spacing: var(--ls-widest);
		text-transform: uppercase;
		color: var(--color-brand);
	}

	.lp-mc-compare__table tbody td {
		padding: var(--space-2) 0;
		border-bottom: none;
		display: grid;
		grid-template-columns: 100px 1fr;
		gap: var(--space-3);
		align-items: baseline;
		width: auto;
	}

	.lp-mc-compare__table tbody td::before {
		content: attr(data-axis);
		font-family: var(--font-sans-jp);
		font-size: var(--fs-xs);
		font-weight: var(--fw-bold);
		letter-spacing: var(--ls-wide);
		text-align: center;
		padding: var(--space-1) var(--space-2);
		background: var(--color-bg-elevated);
		color: var(--color-text-muted);
		border-radius: var(--radius-sm);
		line-height: 1.4;
	}

	.lp-mc-compare__table tbody td.lp-mc-compare__col-highlight {
		background: transparent;
	}

	.lp-mc-compare__table tbody td.lp-mc-compare__col-highlight::before {
		background: var(--color-brand);
		color: var(--color-text-on-brand);
	}
}

/* 〜380px（iPhone SE 等）：grid 100px 1fr が窮屈になるため、
   ラベルチップ↑ / 本文↓ の 1カラム縦並びに切替 */
@media (max-width: 380px) {
	.lp-mc-compare__table tbody td {
		grid-template-columns: 1fr;
		gap: var(--space-1);
	}

	.lp-mc-compare__table tbody td::before {
		justify-self: start;
	}
}

.lp-mc-compare__key-message {
	margin-top: var(--space-7);
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 64ch;
	text-wrap: pretty;
}

.lp-mc-compare__key-message strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}

/* 補足：細い teal 縦線＋ミュート文字（B-1 プルクオート風変形・border-left は 2px の細線 OK） */
.lp-mc-compare__note {
	margin-top: var(--space-4);
	padding-left: var(--space-4);
	border-left: 2px solid var(--color-brand-300);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: var(--lh-loose);
	max-width: 64ch;
	text-wrap: pretty;
}


/* ============================================================
 * Section 03 ─ lp-mc-service（提供範囲4レイヤー＋3つの強み）
 * ============================================================ */
.lp-mc-service__scope {
	margin-bottom: var(--space-9);
	max-width: 880px;
}

.lp-mc-service__scope-title {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
	margin-bottom: var(--space-4);
}

.lp-mc-service__scope-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	list-style: none;
	padding: 0;
	margin: 0;
}

.lp-mc-service__scope-list li {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-1) 0 var(--space-1) var(--space-5);
	position: relative;
}

.lp-mc-service__scope-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: calc(var(--space-1) + 0.55em);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-brand);
}

.lp-mc-service__scope-list li strong {
	font-size: var(--fs-base);
	color: var(--color-text-primary);
	font-weight: var(--fw-bold);
}

.lp-mc-service__scope-list li span {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
	text-wrap: pretty;
}

/* ── 3つの強み（カードグリッド：POPアイコン付き） ── */
.lp-mc-strengths {
	margin-top: var(--space-7);
}

.lp-mc-strengths__title {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
	margin-bottom: var(--space-5);
}

.lp-mc-strengths__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	max-width: 640px;
	margin-inline: auto;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.lp-mc-strengths__grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: 920px;
	}
}

@media (min-width: 1024px) {
	.lp-mc-strengths__grid {
		grid-template-columns: repeat(3, 1fr);
		max-width: none;
	}
}

.lp-mc-strength {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-xl);
	transition:
		border-color var(--duration-base) var(--ease-out-expo),
		transform    var(--duration-base) var(--ease-out-expo),
		box-shadow   var(--duration-slow) var(--ease-out-expo),
		background   var(--duration-fast) var(--ease-out-expo);
}

.lp-mc-strength:hover {
	border-color: var(--color-border-brand);
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg), var(--shadow-glow-brand);
	background: var(--color-bg-elevated);
}

.lp-mc-strength__icon {
	width: 72px;
	height: 72px;
	margin-bottom: var(--space-2);
	overflow: visible;  /* viewBox 外の装飾SVG（スパーク等）を許容 */
}

.lp-mc-strength__icon svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.lp-mc-strength__number {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand-300);
}

.lp-mc-strength__heading {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	margin: 0;
	text-wrap: balance;
}

.lp-mc-strength__desc {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	margin: 0;
	text-wrap: pretty;
}

.lp-mc-strength__desc strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-bold);
}


/* ============================================================
 * Section 04 ─ lp-mc-plans（3プラン比較カード）
 *   Plan B（lp-mc-plan--featured）：上部 3px teal ライン＋背景一段濃く
 *   ※ border-left 太枠による強調は NG（CLAUDE.md 4.4.5-B）
 * ============================================================ */
.lp-mc-plans__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	max-width: 640px;
	margin-inline: auto;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.lp-mc-plans__grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: 920px;
	}
}

@media (min-width: 1024px) {
	.lp-mc-plans__grid {
		grid-template-columns: repeat(3, 1fr);
		max-width: none;
		gap: var(--space-6);
		align-items: stretch;
	}
}

.lp-mc-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-xl);
	overflow: hidden;
	transition:
		border-color var(--duration-base) var(--ease-out-expo),
		transform    var(--duration-base) var(--ease-out-expo),
		box-shadow   var(--duration-slow) var(--ease-out-expo);
}

.lp-mc-plan:hover {
	border-color: var(--color-border-brand);
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

/* Plan B（中央プラン）強調：
   - 上部に 3px teal ライン（::before の背景＝top 0/left 0/right 0）
   - 背景を一段濃く（bg-elevated）
   - border-left の太枠は使わない（callout box NG ルール）
   - PC では少し top/Y を持ち上げて目線誘導 */
.lp-mc-plan--featured {
	background: var(--color-bg-elevated);
	border-color: var(--color-border-brand);
}

.lp-mc-plan--featured::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--color-brand);
}

@media (min-width: 1024px) {
	.lp-mc-plan--featured {
		transform: translateY(-12px);
		box-shadow: var(--shadow-md);
	}

	.lp-mc-plan--featured:hover {
		transform: translateY(-16px);
		box-shadow: var(--shadow-lg), var(--shadow-glow-brand);
	}
}

.lp-mc-plan__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border-subtle);
}

.lp-mc-plan__num {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
}

.lp-mc-plan__name {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	margin: 0;
}

.lp-mc-plan__specs {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
}

.lp-mc-plan__spec {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lp-mc-plan__spec dt {
	font-family: var(--font-sans-jp);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	color: var(--color-brand);
}

.lp-mc-plan__spec dd {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-primary);
	line-height: var(--lh-relaxed);
	text-wrap: pretty;
}

.lp-mc-plan__role {
	margin-top: auto;
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border-subtle);
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
	text-wrap: pretty;
}

/* ── 共通条件（プルクオート型 ≒ 区切り線＋大組み・callout box 化禁止） ── */
.lp-mc-plans__conditions {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	padding-bottom: var(--space-2);
	border-top: 1px solid var(--color-border-subtle);
	max-width: 880px;
	margin-inline: auto;
}

.lp-mc-plans__conditions-title {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-5);
}

.lp-mc-plans__conditions-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin: 0;
}

@media (min-width: 768px) {
	.lp-mc-plans__conditions-list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5) var(--space-7);
	}
}

@media (min-width: 1024px) {
	.lp-mc-plans__conditions-list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.lp-mc-plans__conditions-list > div {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-3) 0;
	border-top: 1px solid var(--color-border-subtle);
}

@media (min-width: 768px) {
	.lp-mc-plans__conditions-list > div {
		border-top: none;
		padding: 0;
	}
}

.lp-mc-plans__conditions-list dt {
	font-family: var(--font-sans-jp);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	color: var(--color-brand);
}

.lp-mc-plans__conditions-list dd {
	margin: 0;
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	line-height: var(--lh-snug);
	text-wrap: pretty;
}


/* ============================================================
 * Section 05 ─ lp-mc-flow（4 Step・縦タイムライン型）
 *
 *   AIっぽい callout box は NG。
 *   各ステップは塗りなし／全周枠線なし／角丸padding大なし。
 *   タイムラインは「左端 1px の縦ライン＋番号丸（Teal塗り）」で実装。
 *
 *   【整列の単一情報源】flow と FAQ のテキスト本文（左端・右端・中心線）を
 *   ピクセルパーフェクトで揃えるため、両セクションとも .lp-mc-stack を共通親とする。
 *   max-width 880px・margin-inline auto。番号丸・縦線は stack に対して absolute 配置。
 * ============================================================ */

/* ─── 共通スタックラッパー：flow / FAQ で完全同一の幅・margin ─── */
.lp-mc-stack {
	position: relative;
	max-width: 880px;
	margin-inline: auto;
	width: 100%;
}

/* ヘッダーは共通定義 (760px) を 880px stack 内でフルに広げる */
.lp-mc-stack > .lp-mc-flow__header,
.lp-mc-stack > .lp-mc-faq__header {
	max-width: none;
}

.lp-mc-flow__header {
	position: relative;
}

.lp-mc-flow__list {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* タイムラインの縦ライン：list の content-box 左端から 12px の位置（番号丸の中心）。 */
.lp-mc-stack--flow .lp-mc-flow__list::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 12px;
	width: 1px;
	background: var(--color-border-brand);
}

.lp-mc-flow__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	background: transparent;
	border: none;
	border-radius: 0;
	/* 番号丸 24px + gap 12px = 36px ぶん右にテキストをインデント */
	padding-left: 36px;
}

/* 番号丸：stack 左端に absolute 配置。 */
.lp-mc-flow__step::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-brand);
	box-shadow: 0 0 0 3px var(--color-bg-primary);
}

/* 狭幅（〜380px）：番号丸を 20px に縮小、padding-left も 30px に。 */
@media (max-width: 380px) {
	.lp-mc-flow__step {
		padding-left: 30px;
	}

	.lp-mc-flow__step::before {
		width: 20px;
		height: 20px;
	}

	.lp-mc-stack--flow .lp-mc-flow__list::before {
		left: 10px;
	}
}

.lp-mc-flow__step-num {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
	font-feature-settings: "tnum";
	/* SP 視認性：Step 01 ラベルと heading の間隔をやや広めに */
	margin-bottom: var(--space-1);
}

.lp-mc-flow__step-heading {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	margin: 0;
	text-wrap: balance;
}

.lp-mc-flow__step-desc {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	/* 見出しの下の説明文を右にインデントして視覚階層を出す */
	margin: var(--space-2) 0 0 var(--space-6);
	max-width: 64ch;
	text-wrap: pretty;
}

.lp-mc-flow__step-desc strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-bold);
}


/* ============================================================
 * Section 06 ─ Final CTA（about-final-cta 借用）
 * about.css 側で定義済。本ページ側では特別な上書きなし。
 * ============================================================ */


/* ============================================================
 * Section 07 ─ lp-mc-faq（FAQ 5問・details/summary）
 *
 *   flow と幅・中心線を完全一致させるため、共通の .lp-mc-stack を親とする。
 * ============================================================ */
.lp-mc-faq__header {
	position: relative;
}

.lp-mc-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
}

.lp-mc-faq__item {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color var(--duration-fast) var(--ease-out-expo);
}

.lp-mc-faq__item[open] {
	border-color: var(--color-border-brand);
}

.lp-mc-faq__q {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--space-4);
	align-items: center;
	padding: var(--space-5) var(--space-6);
	cursor: pointer;
	list-style: none;
	min-height: 56px;
}

.lp-mc-faq__q::-webkit-details-marker {
	display: none;
}

.lp-mc-faq__q-mark {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

.lp-mc-faq__q-mark-svg {
	width: 32px;
	height: 32px;
}

.lp-mc-faq__q-mark-num {
	font-family: var(--font-sans-latin);
	font-size: 10px;
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-wider);
	color: var(--color-brand);
	line-height: 1;
}

.lp-mc-faq__q-text {
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
}

.lp-mc-faq__q-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	position: relative;
	flex-shrink: 0;
	transition: transform var(--duration-fast) var(--ease-out-expo);
}

.lp-mc-faq__q-icon::before,
.lp-mc-faq__q-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: var(--color-brand);
	border-radius: 1px;
}

.lp-mc-faq__q-icon::before {
	width: 14px;
	height: 2px;
}

.lp-mc-faq__q-icon::after {
	width: 2px;
	height: 14px;
	transition: transform var(--duration-fast) var(--ease-out-expo);
}

.lp-mc-faq__item[open] .lp-mc-faq__q-icon::after {
	transform: rotate(90deg);
}

.lp-mc-faq__a {
	padding: 0 var(--space-6) var(--space-5) calc(32px + var(--space-4) + var(--space-6));
	color: var(--color-text-secondary);
	font-size: var(--fs-sm);
	line-height: var(--lh-loose);
}

.lp-mc-faq__a p {
	margin: 0;
	max-width: 64ch;
	text-wrap: pretty;
}

.lp-mc-faq__a p + p {
	margin-top: var(--space-3);
}

.lp-mc-faq__a strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-bold);
}


/* ============================================================
 * Section 08 ─ lp-mc-promise（ダーク強調・3カード）
 * services-strengths と統一トーン
 * ============================================================ */
.lp-mc-promise {
	position: relative;
	padding-block: var(--space-9);
	background: var(--color-bg-dark-primary);
	color: var(--color-text-dark-primary);
	overflow: hidden;
	isolation: isolate;
}

@media (min-width: 1024px) {
	.lp-mc-promise {
		padding-block: var(--space-10);
	}
}

@media (max-width: 767px) {
	.lp-mc-promise {
		padding-block: var(--space-8);
	}
}

.lp-mc-promise__header {
	margin-bottom: var(--space-8);
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
}

@media (max-width: 767px) {
	.lp-mc-promise__header {
		text-align: left;
		margin-bottom: var(--space-6);
	}
}

/* ダーク背景上の装飾は明度を抑える */
.lp-mc-promise__header .section-decor {
	opacity: 0.55;
}

.lp-mc-promise__title {
	font-size: var(--fs-display-md);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-dark-primary);
	font-feature-settings: "palt";
	margin-top: var(--space-3);
	/* 句読点孤立防止（responsive-fixer 修正項目） */
	text-wrap: balance;
}

@media (max-width: 767px) {
	.lp-mc-promise__title {
		font-size: clamp(1.625rem, 7vw, 2rem);
		line-height: 1.3;
	}
}

/* h2 内の各行：句点孤立防止 */
.lp-mc-promise__title-line {
	display: inline-block;
	white-space: nowrap;
}

@media (max-width: 360px) {
	.lp-mc-promise__title-line {
		white-space: normal;
	}
}

.lp-mc-promise__lead {
	color: var(--color-text-dark-secondary);
	max-width: 60ch;
	margin-inline: auto;
}

@media (max-width: 767px) {
	.lp-mc-promise__lead {
		margin-inline: 0;
	}
}

.lp-mc-promise__lead strong {
	color: var(--color-text-dark-primary);
}

/* ダーク内のセクションラベル */
.lp-mc-promise .section-label__num,
.lp-mc-promise .section-label__en {
	color: var(--color-brand-300);
}

.lp-mc-promise .section-label__line {
	background: var(--color-brand-300);
	opacity: 0.6;
}

/* ダーク背景上の bg-mega-typo は明色＋薄め */
.lp-mc-promise .bg-mega-typo {
	color: var(--color-text-dark-primary);
	opacity: 0.04;
}

.lp-mc-promise__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	max-width: 640px;
	margin-inline: auto;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.lp-mc-promise__grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: 920px;
	}
}

@media (min-width: 1024px) {
	.lp-mc-promise__grid {
		grid-template-columns: repeat(3, 1fr);
		max-width: none;
	}
}

.lp-mc-promise__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	background: var(--color-bg-dark-surface);
	border: 1px solid var(--color-border-dark-subtle);
	border-radius: var(--radius-xl);
	transition:
		border-color var(--duration-base) var(--ease-out-expo),
		transform    var(--duration-base) var(--ease-out-expo),
		background   var(--duration-fast) var(--ease-out-expo);
}

.lp-mc-promise__card:hover {
	background: var(--color-bg-dark-elevated);
	border-color: var(--color-border-dark-default);
	transform: translateY(-4px);
}

.lp-mc-promise__card-num {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand-300);
}

.lp-mc-promise__card-title {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-dark-primary);
	margin: 0;
	text-wrap: balance;
}

.lp-mc-promise__card-desc {
	font-size: var(--fs-sm);
	color: var(--color-text-dark-secondary);
	line-height: var(--lh-loose);
	margin: 0;
	text-wrap: pretty;
}

.lp-mc-promise__card-desc strong {
	color: var(--color-text-dark-primary);
	font-weight: var(--fw-bold);
}


/* ============================================================
 * Section 09 ─ lp-mc-form-section（CF7 placeholder）
 * contact.css は読み込まないので、フォーム関連の最小限スタイルを定義する。
 * .contact-form 系と .wpcf7-form 系の両方に同じスタイルを当てる。
 * ============================================================ */

.contact-form,
.lp-mc-form,
.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	max-width: 720px;
	margin-inline: auto;
	width: 100%;
}

@media (min-width: 768px) {
	.contact-form,
	.lp-mc-form,
	.wpcf7-form {
		padding: var(--space-7);
	}
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* ─── CF7 自動 <p> / <br> の余白を打ち消す（Contact ページと同方針） ─── */
.wpcf7-form .contact-form__field > p:not(.contact-form__hint) {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.wpcf7-form .contact-form__field br,
.wpcf7-form .contact-form__label br {
	display: none;
}

.contact-form__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.contact-form__required {
	display: inline-block;
	padding: 2px var(--space-2);
	background: var(--color-accent);
	color: var(--color-text-on-accent);
	font-size: var(--fs-xs); /* 11px(0.6875rem)→12px：必須バッジ。最低フォントサイズ確保 */
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	border-radius: var(--radius-sm);
	line-height: 1.4;
}

.contact-form__optional {
	display: inline-block;
	padding: 2px var(--space-2);
	background: var(--color-bg-elevated);
	color: var(--color-text-muted);
	font-size: var(--fs-xs); /* 11px(0.6875rem)→12px：任意バッジ。最低フォントサイズ確保 */
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wider);
	border-radius: var(--radius-sm);
	line-height: 1.4;
}

.contact-form__hint {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
	margin: 0;
}

.contact-form__input,
.contact-form__textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	font-family: inherit;
	font-size: var(--fs-base);
	color: var(--color-text-primary);
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	min-height: 48px;
	transition:
		border-color var(--duration-fast) var(--ease-out-expo),
		box-shadow var(--duration-fast) var(--ease-out-expo);
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
	color: var(--color-text-muted);
}

.contact-form__input:hover,
.contact-form__textarea:hover {
	border-color: var(--color-border-strong);
}

.contact-form__input:focus,
.contact-form__textarea:focus {
	outline: none;
	border-color: var(--color-brand);
	box-shadow: 0 0 0 3px rgba(6, 123, 123, 0.15);
}

.contact-form__textarea {
	resize: vertical;
	min-height: 140px;
	line-height: var(--lh-relaxed);
}

/* radio: ラジオボタン（topic-options） */
.contact-form__topic-group {
	border: none;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.contact-form__topic-options {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	margin-top: var(--space-2);
}

@media (min-width: 768px) {
	.contact-form__topic-options {
		grid-template-columns: repeat(2, 1fr);
	}
}

.contact-form__topic-option {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition:
		border-color var(--duration-fast) var(--ease-out-expo),
		background var(--duration-fast) var(--ease-out-expo);
	min-height: 56px;
}

.contact-form__topic-option:hover {
	border-color: var(--color-border-brand);
	background: var(--color-glass-brand);
}

.contact-form__topic-option input[type="radio"] {
	margin-top: 2px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--color-brand);
}

.contact-form__topic-option:has(input:checked) {
	border-color: var(--color-brand);
	background: var(--color-glass-brand);
}

.contact-form__topic-option-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.contact-form__topic-option-title {
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	line-height: var(--lh-snug);
}

.contact-form__topic-option-desc {
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
	text-wrap: pretty;
}

/* checkbox: 同意 */
.contact-form__field--consent {
	margin-top: var(--space-2);
}

.contact-form__consent {
	display: flex;
	gap: var(--space-3);
	cursor: pointer;
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
	min-height: 44px;
	align-items: flex-start;
	padding: var(--space-2);
}

.contact-form__consent a {
	color: var(--color-brand);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.contact-form__checkbox {
	margin-top: 4px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--color-brand);
}

/* 送信ボタン */
.contact-form__submit {
	margin-top: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: center;
}

.contact-form__submit-btn {
	width: 100%;
	max-width: 360px;
	min-height: 56px;
	font-size: var(--fs-lg);
}

.contact-form__submit-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.contact-form__submit-note {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
	text-align: center;
	max-width: 60ch;
	margin: 0;
}

.contact-form__submit-note code {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	background: var(--color-bg-elevated);
	padding: 1px 6px;
	border-radius: var(--radius-sm);
}

/* フォーム下部の補助テキスト */
.lp-mc-form-section__notes {
	margin-top: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
	max-width: 720px;
	margin-inline: auto;
	list-style: none;
	padding: 0;
}

.lp-mc-form-section__notes li {
	padding-left: var(--space-4);
	position: relative;
}

.lp-mc-form-section__notes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 8px;
	height: 1px;
	background: var(--color-brand);
}


/* ============================================================
 * Section 10 ─ lp-mc-privacy（要約版）
 * ============================================================ */
.lp-mc-privacy__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 64ch;
}

.lp-mc-privacy__list li {
	position: relative;
	padding-left: var(--space-5);
	text-wrap: pretty;
}

.lp-mc-privacy__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 12px;
	height: 1px;
	background: var(--color-brand);
}

.lp-mc-privacy__list strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}

.lp-mc-privacy__list a {
	color: var(--color-brand);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ============================================================
 * LP 専用フッター（最小：法的情報＋会社情報）
 * ============================================================ */
.lp-mc-footer {
	background: var(--color-bg-surface);
	border-top: 1px solid var(--color-border-subtle);
	color: var(--color-text-secondary);
	margin-top: 0;
}

.lp-mc-footer__inner {
	padding-block: var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

@media (min-width: 1024px) {
	.lp-mc-footer__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-6);
	}
}

.lp-mc-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.lp-mc-footer__logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	transition: opacity var(--duration-fast) var(--ease-out-expo);
}

.lp-mc-footer__logo:hover {
	opacity: 0.75;
}

.lp-mc-footer__logo img {
	height: 24px;
	width: auto;
	display: block;
}

.lp-mc-footer__address {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	line-height: var(--lh-relaxed);
	font-style: normal;
}

.lp-mc-footer__address a {
	color: var(--color-brand);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lp-mc-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-5);
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--fs-sm);
}

.lp-mc-footer__legal a {
	color: var(--color-text-secondary);
	transition: color var(--duration-fast) var(--ease-out-expo);
}

.lp-mc-footer__legal a:hover {
	color: var(--color-brand);
}

.lp-mc-footer__copyright {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin: 0;
	font-family: var(--font-sans-latin);
	letter-spacing: var(--ls-wide);
}


/* ============================================================
 * スティッキーCTA バー（SP / タブレットのみ表示）
 * 狭幅対応：padding-inline をやや絞り、ボタン文字が窮屈にならないように
 * ============================================================ */
.lp-mc-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-sticky);
	padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0));
	background: rgba(250, 249, 247, 0.96);
	backdrop-filter: blur(var(--blur-md));
	-webkit-backdrop-filter: blur(var(--blur-md));
	border-top: 1px solid var(--color-border-subtle);
	display: none;
}

@media (max-width: 1023px) {
	.lp-mc-sticky-cta {
		display: block;
	}
}

.lp-mc-sticky-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	min-height: 56px;
	padding: var(--space-3) var(--space-5);
	background: var(--color-brand);
	color: var(--color-text-on-brand);
	font-weight: var(--fw-bold);
	font-size: var(--fs-base);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	transition:
		background var(--duration-fast) var(--ease-out-expo),
		box-shadow var(--duration-base) var(--ease-out-expo);
	text-decoration: none;
}

/* 狭幅（〜380px）：padding を縮め、文字を確実に1行で収める（responsive-fixer 修正項目） */
@media (max-width: 380px) {
	.lp-mc-sticky-cta {
		padding-inline: var(--space-3);
	}

	.lp-mc-sticky-cta__btn {
		padding-inline: var(--space-3);
		font-size: 0.9375rem;  /* 15px */
	}
}

.lp-mc-sticky-cta__btn:hover {
	background: var(--color-brand-700);
	color: var(--color-text-on-brand);
	box-shadow: var(--shadow-xl), var(--shadow-glow-brand);
}

.lp-mc-sticky-cta__btn svg {
	width: 18px;
	height: 18px;
	color: currentColor;
	flex-shrink: 0;
}

/* 固定CTAの受け余白はfooter内だけに持たせ、body最下部に空白を作らない。 */
@media (max-width: 1023px) {
	body {
		padding-bottom: 0;
	}

	body:has(.lp-mc-sticky-cta) :is(.lp-mc-footer, .site-footer) {
		padding-bottom: calc(56px + var(--space-5) + env(safe-area-inset-bottom, 0));
	}
}


/* ============================================================
 * Reveal アニメーション（IntersectionObserver で発火）
 * ============================================================ */
.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--duration-slow) var(--ease-out-expo),
		transform var(--duration-slow) var(--ease-out-expo);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}


/* ============================================================
 * タッチ端末ではホバー前提の transform を抑制
 * ============================================================ */
@media (hover: none) {
	.lp-mc-strength:hover,
	.lp-mc-plan:hover,
	.lp-mc-plan--featured:hover,
	.lp-mc-promise__card:hover,
	.lp-mc-sticky-cta__btn:hover,
	.lp-mc-hero__cta .btn:hover,
	.lp-mc-header__cta:hover,
	.lp-mc-header__tel:hover,
	.lp-mc-faq__item:hover,
	.contact-form__topic-option:hover {
		transform: none;
		box-shadow: none;
	}
}


/* ============================================================
 * SP（〜767px）：詰まり防止と読みやすさ調整
 * ============================================================ */
@media (max-width: 767px) {

	/* hero セクション全体の上下余白：詰まらず空きすぎない */
	.lp-mc-hero {
		padding-top: calc(64px + var(--space-7));
		padding-bottom: var(--space-8);
	}

	.lp-mc-hero__visual {
		max-width: 360px;
		margin-top: var(--space-6);
	}

	.lp-mc-hero__content {
		gap: var(--space-4);
	}

	.lp-mc-hero__lead {
		font-size: var(--fs-base);  /* SPは16px：本文同等で詰まり緩和 */
		line-height: 1.85;
	}

	.lp-mc-hero__overline {
		font-size: 0.8125rem;
	}

	.lp-mc-hero__cta {
		gap: var(--space-3);
		margin-top: var(--space-5);
	}

	/* ─── 主要CTA はフル幅・56px・18px ─── */
	.lp-mc-hero__cta .btn--primary,
	.lp-mc-form .contact-form__submit-btn {
		flex: 1 1 100%;
		min-height: 56px;
		font-size: var(--fs-lg);
		justify-content: center;
	}

	.lp-mc-hero__cta .btn--ghost {
		flex: 1 1 100%;
		min-height: 48px;
		justify-content: center;
	}

	/* ─── lp-mc-why ─── */
	.lp-mc-why__points-num {
		font-size: var(--fs-lg);
	}

	.lp-mc-why__points-body strong {
		font-size: var(--fs-base);
	}

	/* ─── lp-mc-compare（SP 行カード padding 微調整） ─── */
	.lp-mc-compare__table tbody tr {
		padding: var(--space-3) var(--space-4);
	}

	/* ─── lp-mc-service ─── */
	.lp-mc-service__scope {
		margin-bottom: var(--space-7);
	}

	.lp-mc-strength {
		padding: var(--space-5);
		border-radius: var(--radius-lg);
	}

	.lp-mc-strength__icon {
		width: 64px;
		height: 64px;
	}

	.lp-mc-strength__heading {
		font-size: var(--fs-lg);
	}

	/* ─── lp-mc-plans ─── */
	.lp-mc-plan {
		padding: var(--space-5);
		border-radius: var(--radius-lg);
	}

	.lp-mc-plan__name {
		font-size: var(--fs-xl);
	}

	/* SP では Plan B の transform は不要（積み重ね表示で目立つ位置） */
	.lp-mc-plan--featured {
		transform: none;
	}

	.lp-mc-plans__conditions {
		margin-top: var(--space-7);
		padding-top: var(--space-5);
	}

	/* ─── lp-mc-flow（SP）─── */
	.lp-mc-flow__list {
		gap: var(--space-5);
	}

	.lp-mc-flow__step-heading {
		font-size: var(--fs-lg);
	}

	/* SP では説明文のインデントを抑える（stack の padding-left 36px が既にあるため） */
	.lp-mc-flow__step-desc {
		margin-left: var(--space-4);
	}

	/* Step 01 ラベルと heading の gap 拡張（SP 視認性・responsive-fixer 修正項目） */
	.lp-mc-flow__step-num {
		margin-bottom: var(--space-2);
	}

	/* ─── lp-mc-faq ─── */
	.lp-mc-faq__q {
		padding: var(--space-4);
		gap: var(--space-3);
	}

	.lp-mc-faq__q-text {
		font-size: var(--fs-base);
		line-height: 1.5;
	}

	.lp-mc-faq__a {
		padding: 0 var(--space-4) var(--space-4) var(--space-4);
		line-height: 1.85;
	}

	/* ─── lp-mc-promise（ダーク） ─── */
	.lp-mc-promise__grid {
		gap: var(--space-4);
	}

	.lp-mc-promise__card {
		padding: var(--space-5);
		border-radius: var(--radius-lg);
	}

	.lp-mc-promise__card-title {
		font-size: var(--fs-lg);
	}

	/* ─── lp-mc-form ─── */
	.contact-form,
	.lp-mc-form,
	.wpcf7-form {
		padding: var(--space-5);
	}

	.contact-form__topic-option {
		padding: var(--space-3);
		min-height: 64px;
	}
}


/* ============================================================
 * prefers-reduced-motion 対応
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.lp-mc-hero__overline,
	.lp-mc-hero__title,
	.lp-mc-hero__audience,
	.lp-mc-hero__lead,
	.lp-mc-hero__mini,
	.lp-mc-hero__cta,
	.lp-mc-hero__notes,
	.lp-mc-hero__visual,
	.lp-mc-hero__pill,
	.lp-mc-hero__pill--seo,
	.lp-mc-hero__pill--meo,
	.lp-mc-hero__pill--ads,
	.lp-mc-hero__pill--sns,
	.lp-mc-hero__pill--lp,
	.lp-mc-hero__pill--ana {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	@media (min-width: 1024px) {
		.lp-mc-hero__visual {
			transform: translateY(-50%) !important;
		}
	}

	.lp-mc-strength:hover,
	.lp-mc-plan:hover,
	.lp-mc-plan--featured,
	.lp-mc-plan--featured:hover,
	.lp-mc-promise__card:hover,
	.lp-mc-faq__item,
	.lp-mc-sticky-cta__btn:hover {
		transform: none !important;
		transition: none !important;
	}

	.reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}


/* ============================================================
 * ============================================================
 *
 *  /lp/marketing-copilot/thanks/ 専用スタイル
 *
 *  LP5（マーケの右腕）フォーム送信完了後の遷移先（CV計測URL）。
 *  構成：
 *    Section 1 :  lp-mc-thanks-hero（h1: お問い合わせを承りました。）
 *    Section 2 :  lp-mc-thanks-info（連絡先：電話・営業時間・所在地）
 *    Section 3 :  lp-mc-thanks-back（戻り導線：LP5 / トップ）
 *
 *  方針：
 *    - LP5 と同じライト基盤トーンを継承（クールホワイト系）
 *    - thanks ページは sticky CTA を持たない
 *    - ヒーローはチェックマーク中心の落ち着いたコンポジション
 *    - モバイルファースト（min-width で書く）
 *    - callout box 化禁止（CLAUDE.md 4.4.5-B）
 *    - prefers-reduced-motion で全アニメ停止
 *    - thanks-next（3カード）は撤去済み・本CSS にも定義しない
 *
 * ============================================================
 * ============================================================ */


/* ============================================================
 * Section 1 ─ lp-mc-thanks-hero
 * ============================================================ */
.lp-mc-thanks-hero {
	position: relative;
	min-height: 60vh;
	display: flex;
	align-items: center;
	padding-top: calc(64px + var(--space-7));
	padding-bottom: var(--space-8);
	overflow: hidden;
	isolation: isolate;
	background: var(--color-bg-primary);
}

@media (min-width: 1024px) {
	.lp-mc-thanks-hero {
		min-height: 70vh;
		padding-bottom: var(--space-9);
	}
}

@keyframes lp-mc-thanks-fade-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes lp-mc-thanks-visual-in {
	from { opacity: 0; transform: translateY(-50%) scale(0.94); }
	to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

@keyframes lp-mc-thanks-visual-in-sp {
	from { opacity: 0; transform: scale(0.94); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes lp-mc-thanks-check-pop {
	0%   { transform: scale(0.6); opacity: 0; }
	60%  { transform: scale(1.08); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes lp-mc-thanks-spark-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.55; transform: scale(1.15); }
}

@keyframes lp-mc-thanks-bubble-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}

/* ─── 背景の極薄メガタイポ（ライト基盤での階調を維持） ─── */
.lp-mc-thanks-hero__bg-typo {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-family: var(--font-sans-latin);
	font-size: clamp(5rem, 16vw, 16rem);
	font-weight: var(--fw-extrabold);
	color: var(--color-text-primary);
	opacity: 0.045;
	letter-spacing: var(--ls-tight);
	white-space: nowrap;
	user-select: none;
	overflow: hidden;
	pointer-events: none;
}

.lp-mc-thanks-hero__bg-typo span {
	display: block;
}

.lp-mc-thanks-hero__bg-typo span:first-child {
	transform: translateX(-8%);
}

.lp-mc-thanks-hero__bg-typo span:last-child {
	transform: translateX(8%);
	text-align: right;
}

/* ─── ヒーロー右側の装飾SVG（PC：絶対配置） ─── */
.lp-mc-thanks-hero__visual {
	position: absolute;
	top: 50%;
	right: max(var(--space-5), calc((100vw - var(--container-wide)) / 2 + var(--space-5)));
	transform: translateY(-50%);
	width: 38%;
	max-width: 480px;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
	opacity: 0;
	animation: lp-mc-thanks-visual-in var(--duration-slowest) var(--ease-out-expo) 1.0s forwards;
}

.lp-mc-thanks-hero__visual svg {
	width: 100%;
	height: auto;
	display: block;
}

/* 装飾SVG内：チェックの登場アニメ・スパーク・吹き出しの微アニメ */
@media (prefers-reduced-motion: no-preference) {
	.lp-mc-thanks-hero__visual-check {
		transform-origin: 240px 180px;
		animation: lp-mc-thanks-check-pop 0.8s var(--ease-out-expo) 1.4s backwards;
	}

	.lp-mc-thanks-hero__visual-spark1 {
		animation: lp-mc-thanks-spark-pulse 3.5s ease-in-out infinite;
		transform-origin: 110px 132px;
	}

	.lp-mc-thanks-hero__visual-spark2 {
		animation: lp-mc-thanks-spark-pulse 4s ease-in-out 0.5s infinite;
		transform-origin: 380px 104px;
	}

	.lp-mc-thanks-hero__visual-spark3 {
		animation: lp-mc-thanks-spark-pulse 4.5s ease-in-out 1s infinite;
		transform-origin: 400px 266px;
	}

	.lp-mc-thanks-hero__visual-bubble {
		animation: lp-mc-thanks-bubble-float 5s ease-in-out infinite;
		transform-origin: center;
	}
}

/* SP・タブレット（〜1023px）：SVG はテキストの下にフルサイズで段組み */
@media (max-width: 1023px) {
	.lp-mc-thanks-hero {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		min-height: auto;
		padding-bottom: var(--space-7);
	}

	.lp-mc-thanks-hero__visual {
		position: static;
		top: auto;
		right: auto;
		transform: none;
		width: 100%;
		max-width: 360px;
		margin-inline: auto;
		margin-top: var(--space-6);
		padding-inline: var(--space-4);
		opacity: 0;
		animation-name: lp-mc-thanks-visual-in-sp;
		order: 2;
	}

	.lp-mc-thanks-hero__inner {
		order: 1;
	}
}

.lp-mc-thanks-hero__inner {
	position: relative;
	z-index: 1;
}

.lp-mc-thanks-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	width: 100%;
	max-width: 640px;
}

@media (min-width: 1024px) {
	.lp-mc-thanks-hero__content {
		max-width: 600px;
		margin-right: auto;
	}
}

.lp-mc-thanks-hero__overline {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0;
	opacity: 0;
	animation: lp-mc-thanks-fade-in var(--duration-slow) var(--ease-out-expo) 0.4s forwards;
}

.lp-mc-thanks-hero__title {
	font-size: var(--fs-display-md);
	line-height: 1.2;
	letter-spacing: var(--ls-tighter);
	color: var(--color-text-primary);
	font-weight: var(--fw-extrabold);
	font-feature-settings: "palt";
	margin-top: var(--space-3);
	text-wrap: balance;
	opacity: 0;
	animation: lp-mc-thanks-fade-in var(--duration-slow) var(--ease-out-expo) 0.6s forwards;
}

@media (max-width: 767px) {
	.lp-mc-thanks-hero__title {
		font-size: clamp(2rem, 8.5vw, 2.75rem);
		line-height: 1.25;
		letter-spacing: -0.02em;
	}
}

.lp-mc-thanks-hero__lead {
	font-size: var(--fs-lg);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 60ch;
	text-wrap: pretty;
	opacity: 0;
	animation: lp-mc-thanks-fade-in var(--duration-slow) var(--ease-out-expo) 0.9s forwards;
}

.lp-mc-thanks-hero__lead strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}

@media (max-width: 767px) {
	.lp-mc-thanks-hero__lead {
		font-size: var(--fs-base);
		line-height: 1.85;
	}
}


/* ============================================================
 * Section 2 ─ lp-mc-thanks-info（連絡先）
 * ============================================================ */
.lp-mc-thanks-info {
	position: relative;
	padding-block: var(--space-7);
	background: var(--color-bg-surface);
	overflow: hidden;
	isolation: isolate;
	border-top: 1px solid var(--color-border-subtle);
}

@media (min-width: 768px) {
	.lp-mc-thanks-info {
		padding-block: var(--space-9);
	}
}

@media (min-width: 1024px) {
	.lp-mc-thanks-info {
		padding-block: var(--space-10);
	}
}

.lp-mc-thanks-info__header {
	margin-bottom: var(--space-7);
	max-width: 720px;
	position: relative;
}

.lp-mc-thanks-info__title {
	font-size: var(--fs-display-md);
	font-weight: var(--fw-extrabold);
	color: var(--color-text-primary);
	letter-spacing: var(--ls-tighter);
	line-height: var(--lh-tight);
	margin: var(--space-4) 0 var(--space-4);
	font-feature-settings: "palt";
}

@media (max-width: 767px) {
	.lp-mc-thanks-info__title {
		font-size: clamp(1.75rem, 7vw, 2.25rem);
		line-height: 1.3;
	}
}

.lp-mc-thanks-info__tldr {
	font-size: var(--fs-lg);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 60ch;
	text-wrap: pretty;
	margin: 0;
}

@media (max-width: 767px) {
	.lp-mc-thanks-info__tldr {
		font-size: var(--fs-base);
		line-height: 1.85;
	}
}

/* 連絡先カード（callout box にならないよう、border-left 太枠は使わない） */
.lp-mc-thanks-info__card {
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border-subtle);
	border-radius: 16px;
	padding: var(--space-6) var(--space-5);
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	align-items: flex-start;
}

@media (min-width: 768px) {
	.lp-mc-thanks-info__card {
		padding: var(--space-7);
		gap: var(--space-6);
	}
}

/* 受話器SVG ＋ 電話番号の横並びコンテナ */
.lp-mc-thanks-info__primary {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}

@media (max-width: 639px) {
	.lp-mc-thanks-info__primary {
		gap: var(--space-3);
	}
}

.lp-mc-thanks-info__icon {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
}

@media (max-width: 639px) {
	.lp-mc-thanks-info__icon {
		width: 44px;
		height: 44px;
	}
}

.lp-mc-thanks-info__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* 電話番号：320px 端末でも一行に収まるように clamp で調整（responsive-fixer 修正項目） */
.lp-mc-thanks-info__number {
	font-family: var(--font-sans-latin);
	font-size: clamp(1.75rem, 7vw, 2.75rem);  /* 28〜44px：狭幅でも wrap しない */
	font-weight: var(--fw-extrabold);
	color: var(--color-brand);
	letter-spacing: var(--ls-tight);
	text-decoration: none;
	line-height: 1;
	transition: color var(--duration-fast) var(--ease-out-expo);
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;  /* 確実に1行 */
}

.lp-mc-thanks-info__number:hover {
	color: var(--color-brand-700);
}

.lp-mc-thanks-info__number:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 4px;
	border-radius: 4px;
}

/* 連絡先リスト */
.lp-mc-thanks-info__list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	width: 100%;
	border-top: 1px solid var(--color-border-subtle);
	padding-top: var(--space-5);
}

.lp-mc-thanks-info__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

@media (min-width: 640px) {
	.lp-mc-thanks-info__row {
		flex-direction: row;
		gap: var(--space-4);
		align-items: flex-start;
	}
}

.lp-mc-thanks-info__row dt {
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	color: var(--color-brand);
	flex-shrink: 0;
	min-width: 80px;
	font-family: var(--font-sans-jp);
}

.lp-mc-thanks-info__row dd {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--color-text-primary);
	line-height: var(--lh-relaxed);
	text-wrap: pretty;
}

.lp-mc-thanks-info__row dd a {
	color: var(--color-brand);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	transition: color var(--duration-fast) var(--ease-out-expo);
}

.lp-mc-thanks-info__row dd a:hover {
	color: var(--color-brand-700);
}


/* ============================================================
 * Section 3 ─ lp-mc-thanks-back（戻り導線：LP5 / トップ）
 * ============================================================ */
.lp-mc-thanks-back {
	position: relative;
	padding-block: var(--space-7);
	background: var(--color-bg-surface);
	border-top: 1px solid var(--color-border-subtle);
}

@media (min-width: 768px) {
	.lp-mc-thanks-back {
		padding-block: var(--space-8);
	}
}

.lp-mc-thanks-back__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: var(--space-3);
}

@media (min-width: 768px) {
	.lp-mc-thanks-back__inner {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: var(--space-4);
	}
}

/* SP では btn--lg をフル幅に（モバイル品質基準・タップ容易性） */
.lp-mc-thanks-back__btn {
	width: 100%;
	min-height: 56px;
	justify-content: center;
}

@media (min-width: 768px) {
	.lp-mc-thanks-back__btn {
		width: auto;
		min-width: 280px;
	}
}


/* ============================================================
 * thanks ページ専用：prefers-reduced-motion 対応
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.lp-mc-thanks-hero__overline,
	.lp-mc-thanks-hero__title,
	.lp-mc-thanks-hero__lead,
	.lp-mc-thanks-hero__visual,
	.lp-mc-thanks-hero__visual-check,
	.lp-mc-thanks-hero__visual-spark1,
	.lp-mc-thanks-hero__visual-spark2,
	.lp-mc-thanks-hero__visual-spark3,
	.lp-mc-thanks-hero__visual-bubble {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	@media (min-width: 1024px) {
		.lp-mc-thanks-hero__visual {
			transform: translateY(-50%) !important;
		}
	}
}


/* LP Opening final override：旧ミニリスト指定より後で診断ボードを確定 */
.lp-hero-diagnostic {
	position: relative;
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-5);
	padding: clamp(var(--space-4), 3vw, var(--space-5));
	border: 1px solid var(--lp-opening-accent-border, var(--color-border-brand));
	border-radius: var(--radius-lg);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.42) 58%, var(--lp-opening-accent-soft, rgba(6, 123, 123, 0.10)) 100%),
		var(--color-bg-base);
	box-shadow: 0 18px 46px rgba(26, 40, 38, 0.08);
	overflow: hidden;
}

.lp-hero-diagnostic > p {
	position: relative;
	z-index: 1;
	margin: 0;
	color: var(--lp-opening-accent, var(--color-brand));
}

.lp-hero-diagnostic ul {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-hero-diagnostic li {
	position: static;
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	padding-left: 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.lp-hero-diagnostic li::before {
	content: "";
	position: static;
	width: 8px;
	height: 8px;
	margin-top: 0.55em;
	border: 0;
	border-radius: 50%;
	background: var(--lp-opening-accent, var(--color-brand));
	transform: none;
	flex: 0 0 auto;
}

@media (min-width: 768px) {
	.lp-hero-diagnostic ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ============================================================
 * LP refinement：Why Now point cards
 * 左ラインや段差を使わず、番号バッジと面の整理で3パターンを見せる。
 * ============================================================ */
.lp-mc-why__points {
	--lp-why-accent: var(--color-brand);
	--lp-why-accent-soft: rgba(6, 123, 123, 0.10);
	gap: var(--space-3);
}

.lp-mc-why__points li {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: clamp(56px, 7vw, 72px) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-4);
	min-height: 122px;
	padding: clamp(var(--space-4), 2.6vw, var(--space-5));
	border: 1px solid rgba(6, 123, 123, 0.16);
	border-radius: var(--radius-lg);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.50) 62%, var(--lp-why-accent-soft)),
		var(--color-bg-base);
	box-shadow: 0 14px 34px rgba(26, 40, 38, 0.07);
}

.lp-mc-why__points li:first-child {
	padding: clamp(var(--space-4), 2.6vw, var(--space-5));
	border-top: 1px solid rgba(6, 123, 123, 0.16);
}

.lp-mc-why__points li::after {
	content: "";
	position: absolute;
	top: -30px;
	right: -26px;
	z-index: -1;
	width: 96px;
	aspect-ratio: 1;
	border: 1px solid rgba(6, 123, 123, 0.14);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(6, 123, 123, 0.10), transparent 62%);
}

.lp-mc-why__points-num {
	display: grid;
	align-self: center;
	place-items: center;
	width: clamp(50px, 6vw, 64px);
	aspect-ratio: 1;
	min-width: 0;
	border: 1px solid rgba(6, 123, 123, 0.22);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.72);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
	color: var(--lp-why-accent);
	font-size: clamp(1.28rem, 1.9vw, 1.65rem);
	letter-spacing: 0;
}

.lp-mc-why__points-body {
	gap: var(--space-2);
	padding-top: 0;
}

.lp-mc-why__points-body strong {
	font-size: clamp(1.03rem, 1.22vw, 1.18rem);
	letter-spacing: 0;
}

.lp-mc-why__points-body span {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
}

/* ============================================================
 * LP refinement：Scope cards
 * 4レイヤーの提供範囲を、箇条書きではなく運用ボードのカードとして見せる。
 * ============================================================ */
.lp-mc-service__scope {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	max-width: none;
	padding: clamp(var(--space-5), 4vw, var(--space-7));
	border: 1px solid rgba(6, 123, 123, 0.16);
	border-radius: var(--radius-2xl);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.50) 56%, rgba(6, 123, 123, 0.08)),
		var(--color-bg-base);
	box-shadow: 0 22px 54px rgba(26, 40, 38, 0.09);
}

.lp-mc-service__scope::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -86px;
	z-index: -1;
	width: 220px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(6, 123, 123, 0.12), transparent 64%);
}

.lp-mc-service__scope-title {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border: 1px solid rgba(6, 123, 123, 0.18);
	border-radius: var(--radius-full);
	background: rgba(6, 123, 123, 0.07);
	margin-bottom: var(--space-5);
	letter-spacing: var(--ls-wider);
}

.lp-mc-service__scope-list {
	counter-reset: scope-card;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

@media (min-width: 768px) {
	.lp-mc-service__scope-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.lp-mc-service__scope-list li {
	counter-increment: scope-card;
	position: relative;
	min-height: 164px;
	padding: var(--space-5);
	border: 1px solid rgba(26, 40, 38, 0.10);
	border-radius: var(--radius-xl);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.42)),
		rgba(255, 255, 255, 0.54);
	box-shadow: 0 14px 30px rgba(26, 40, 38, 0.07);
}

.lp-mc-service__scope-list li::before {
	content: counter(scope-card, decimal-leading-zero);
	position: static;
	display: inline-flex;
	width: fit-content;
	height: auto;
	border-radius: 0;
	background: transparent;
	color: var(--color-brand);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-sm);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-wider);
}

.lp-mc-service__scope-list li::after {
	content: "";
	position: absolute;
	top: var(--space-5);
	right: var(--space-5);
	width: 34px;
	height: 2px;
	border-radius: var(--radius-full);
	background: linear-gradient(90deg, var(--color-brand), var(--color-action));
}

.lp-mc-service__scope-list li strong {
	margin-top: var(--space-2);
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
	letter-spacing: 0;
}

.lp-mc-service__scope-list li span {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
}

/* 2026-05-31: SP表と提供範囲カード内の線装飾を整理 */
@media (max-width: 767px) {
	.lp-mc-compare__table-wrap {
		overflow: visible;
	}

	.lp-mc-compare__table tbody {
		display: grid;
		gap: var(--space-3);
	}

	.lp-mc-compare__table tbody tr {
		display: grid;
		gap: var(--space-3);
		padding: var(--space-4);
		border: 0;
		border-radius: var(--radius-md);
		background: linear-gradient(180deg, #fff, rgba(250, 249, 247, 0.82));
		box-shadow:
			inset 0 0 0 1px rgba(26, 40, 38, 0.08),
			0 10px 24px rgba(26, 40, 38, 0.07);
	}

	.lp-mc-compare__table tbody th[scope="row"] {
		padding: 0;
		border-bottom: 0;
		color: var(--color-text-primary);
		font-family: inherit;
		font-size: var(--fs-lg);
		font-weight: var(--fw-extrabold);
		letter-spacing: 0;
		line-height: var(--lh-snug);
		text-transform: none;
	}

	.lp-mc-compare__table tbody td {
		display: grid;
		grid-template-columns: minmax(7rem, auto) 1fr;
		gap: var(--space-3);
		align-items: start;
		width: auto;
		padding: var(--space-3);
		border: 0;
		border-radius: var(--radius-sm);
		background: rgba(26, 40, 38, 0.035);
		color: var(--color-text-primary);
		line-height: var(--lh-relaxed);
	}

	.lp-mc-compare__table tbody td::before {
		justify-self: start;
		padding: 0.28rem 0.62rem;
		border-radius: var(--radius-full);
		background: rgba(26, 40, 38, 0.08);
		color: var(--color-text-secondary);
		font-family: inherit;
		font-size: var(--fs-xs);
		font-weight: var(--fw-bold);
		letter-spacing: 0;
		line-height: 1.3;
		text-align: left;
		text-transform: none;
	}

	.lp-mc-compare__table tbody td.lp-mc-compare__col-highlight {
		background: rgba(6, 123, 123, 0.09);
		color: var(--color-text-primary);
	}
}

@media (max-width: 420px) {
	.lp-mc-compare__table tbody td {
		grid-template-columns: 1fr;
		gap: var(--space-2);
	}
}

.lp-mc-service__scope-list li {
	min-height: auto;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-3);
	padding: var(--space-4);
}

.lp-mc-service__scope-list li::before {
	grid-row: 1 / span 2;
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-sm);
	background: rgba(6, 123, 123, 0.11);
	color: var(--color-brand);
	font-size: 0.78rem;
	line-height: 1;
}

.lp-mc-service__scope-list li::after {
	display: none;
}

.lp-mc-service__scope-list li strong {
	margin-top: 0;
}