/* ============================================================
 * pages/lp-web-marketing-support.css ─ LP4「はじめてのWeb集客」専用スタイル
 *
 * 構成（CSS順）2026-05-04 v2.3 リライト原稿に対応：
 *  Page-level    : スキップリンク・main 設定
 *  Header        : lp-web-header（最小化・sticky）
 *  Section 00    : lp-web-hero（h1 句読点付き・対象者文・ミニ3点・LP4専用SVG）
 *  Section 00.5  : trust-bar（共通仕様をローカル定義）
 *  Section 01    : lp-web-issue（こんなお悩みはありませんか・チェックリスト6項目）
 *  Section 02    : lp-web-order（順序の問題・3つの順序ポイント）
 *  Section 03    : lp-web-service / lp-web-scope-grid / lp-web-strengths（相談テーマ6カテゴリ＋3強み）
 *  Section 04    : lp-web-roadmap（相談後の進め方・Step 01-03・縦タイムライン）
 *  Section 05    : about-final-cta（about.css で定義済 → 上書きしない）
 *  Section 06    : lp-web-faq（FAQ アコーディオン・5問）
 *  Section 07    : lp-web-promise（ダーク強調・Promise 01-03）
 *  Section 08    : lp-web-form-section（CF7 placeholder・LP固有：自社サイトURL／現在のWeb集客の状況）
 *  Section 09    : lp-web-privacy（個人情報・要約版）
 *  Footer        : lp-web-footer（最小フッター）
 *  Sticky CTA    : lp-web-sticky-cta（SP常時可視CTA）
 *
 * 設計：ライト基盤＋ダーク強調（lp-web-promise）のハイブリッド
 * 配色アクセント：コッパー #C9885F を主アクセントとして強めに使用
 *                （CTA・数字・チェックマーク・GPS ピン・Phase 02 階段）
 * モバイルファースト：SPで第一印象品質を最優先（CLAUDE.md 1章末）
 * ============================================================ */


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

/* ページ末尾は about-final-cta がダーク強調。直後の lp-web-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%;
}


/* ============================================================
 * LP 専用ヘッダー（最小化：ロゴ＋tel＋第一CTA）
 * sticky で常時可視。SP では tel と CTA をコンパクトに。
 * ============================================================ */
.lp-web-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-web-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-web-header__inner {
		padding: var(--space-3) var(--space-6);
	}
}

.lp-web-header__logo img {
	height: 24px;
	width: auto;
}

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

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

.lp-web-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-web-header__tel:hover {
	color: var(--color-brand);
	background: var(--color-glass-brand);
}

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

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

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

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

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


/* ============================================================
 * Section 00 ─ Hero（LP4固有・h1 句読点付き）
 * ============================================================ */
.lp-web-hero {
	position: relative;
	min-height: 80vh;
	display: flex;
	align-items: center;
	padding-top: calc(64px + var(--space-7));
	padding-bottom: var(--space-9);
	overflow: hidden;
	isolation: isolate;
	background: var(--color-bg-primary);
}

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

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

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

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

/* ─── 背景の極薄メガタイポ ─── */
.lp-web-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-web-hero__bg-typo {
		opacity: 0.025;
		font-size: clamp(4rem, 18vw, 8rem);
	}
}

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

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

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

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

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

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

	.lp-web-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-web-hero-visual-in-sp;
		order: 2;
	}

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

@media (min-width: 768px) and (max-width: 1023px) {
	.lp-web-hero__visual {
		max-width: 560px;
		margin-top: var(--space-8);
	}
}

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

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

@media (min-width: 1024px) {
	.lp-web-hero__content {
		max-width: 720px;  /* h1 が 2行で確実に収まる幅 */
		margin-right: auto;
	}
}

.lp-web-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-web-hero-fade-in var(--duration-slow) var(--ease-out-expo) 0.4s forwards;
}

.lp-web-hero__title {
	font-size: var(--fs-display-md);
	line-height: 1.15;
	letter-spacing: 0;
	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-web-hero-fade-in var(--duration-slow) var(--ease-out-expo) 0.6s forwards;
}

/* h1 の各行を inline-block で1かたまり扱い → 句点の孤立を防ぐ */
.lp-web-hero__title-line {
	display: inline-block;
}

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

/* SP（〜767px）：h1 サイズと行間を調整。
   3行コピーが収まる範囲で大胆に。プロジェクト基準の SP h1 32px 以上を厳守。 */
@media (max-width: 767px) {
	.lp-web-hero__title {
		font-size: clamp(2rem, 8vw, 2.625rem);  /* 32〜42px：プロジェクト基準の SP h1 32px 以上を厳守 */
		line-height: 1.25;
		letter-spacing: 0;
		max-width: none;
	}
}

@media (max-width: 380px) {
	.lp-web-hero__title {
		font-size: clamp(2rem, 8.4vw, 2.25rem);  /* 32〜36px：プロジェクト基準の SP h1 32px 以上を厳守 */
		line-height: 1.22;
		letter-spacing: 0;
	}
}

/* 対象者文（h1 と lead の間）：誰のどの損失を扱うかを 1行で示す。
   PC（≥1024px）では1行で収まるよう max-width 制約を解除＋ nowrap。
   SP/タブレットでは画面幅に収まらないため折り返し許可（自動改行）。 */
.lp-web-hero__audience {
	margin-top: var(--space-3);
	font-size: var(--fs-md);
	color: var(--color-text-secondary);
	line-height: 1.7;
	max-width: 60ch;
	text-wrap: pretty;
	opacity: 0;
	animation: lp-web-hero-fade-in var(--duration-slow) var(--ease-out-expo) 0.8s forwards;
}

@media (min-width: 1024px) {
	.lp-web-hero__audience {
		max-width: none;
		white-space: nowrap;
	}
}

@media (max-width: 767px) {
	.lp-web-hero__audience {
		font-size: var(--fs-base);
	}
}

.lp-web-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-web-hero-fade-in var(--duration-slow) var(--ease-out-expo) 1.0s forwards;
}

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

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

.lp-web-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-web-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-web-hero__mini-list li {
	position: relative;
	padding-left: calc(var(--space-4) + var(--space-2));
}

/* チェックマーク（インラインSVG ではなく ::before で十分） */
.lp-web-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-web-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-4);
	opacity: 0;
	animation: lp-web-hero-fade-in var(--duration-slow) var(--ease-out-expo) 1.3s forwards;
}

.lp-web-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);
	opacity: 0;
	animation: lp-web-hero-fade-in var(--duration-slow) var(--ease-out-expo) 1.4s forwards;
}

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

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


/* ============================================================
 * 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-web-issue / lp-web-order / lp-web-service / lp-web-roadmap /
 * lp-web-faq / lp-web-form / lp-web-privacy
 * ============================================================ */
.lp-web-issue,
.lp-web-order,
.lp-web-service,
.lp-web-roadmap,
.lp-web-faq,
.lp-web-form-section,
.lp-web-privacy {
	position: relative;
	padding-block: var(--space-9);
	background: var(--color-bg-primary);
	overflow: hidden;
	isolation: isolate;
}

@media (min-width: 1024px) {
	.lp-web-issue,
	.lp-web-order,
	.lp-web-service,
	.lp-web-roadmap,
	.lp-web-faq,
	.lp-web-form-section,
	.lp-web-privacy {
		padding-block: var(--space-10);
	}
}

@media (max-width: 767px) {
	.lp-web-issue,
	.lp-web-order,
	.lp-web-service,
	.lp-web-roadmap,
	.lp-web-faq,
	.lp-web-form-section,
	.lp-web-privacy {
		padding-block: var(--space-8);  /* 64px */
	}
}

.lp-web-issue__header,
.lp-web-order__header,
.lp-web-service__header,
.lp-web-roadmap__header,
.lp-web-faq__header,
.lp-web-form-section__header,
.lp-web-privacy__header,
.lp-web-promise__header {
	margin-bottom: var(--space-7);
	max-width: 760px;
	position: relative;
}

@media (max-width: 767px) {
	.lp-web-issue__header,
	.lp-web-order__header,
	.lp-web-service__header,
	.lp-web-roadmap__header,
	.lp-web-faq__header,
	.lp-web-form-section__header,
	.lp-web-privacy__header,
	.lp-web-promise__header {
		margin-bottom: var(--space-6);
	}
}

.lp-web-issue__title,
.lp-web-order__title,
.lp-web-service__title,
.lp-web-roadmap__title,
.lp-web-faq__title,
.lp-web-form-section__title,
.lp-web-privacy__title,
.lp-web-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);
}

/* PC（≥1024px）：親 max-width に縛られず1行表示を確保 */
@media (min-width: 1024px) {
	.lp-web-form-section__title,
	.lp-web-issue__title {
		white-space: nowrap;
	}
}

/* 句点付き／改行制御 h2 の各行を inline-block で1かたまり扱い → 句点・助詞孤立を防ぐ */
.lp-web-order__title-line,
.lp-web-roadmap__title-line,
.lp-web-promise__title-line,
.lp-web-service__title-line {
	display: inline-block;
	white-space: nowrap;
}

@media (max-width: 360px) {
	.lp-web-order__title-line,
	.lp-web-roadmap__title-line,
	.lp-web-promise__title-line,
	.lp-web-service__title-line {
		white-space: normal;
	}
}

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

/* TL;DR：プレーンテキスト＋下マージン。box 化禁止 */
.lp-web-issue__tldr,
.lp-web-order__tldr,
.lp-web-service__tldr,
.lp-web-roadmap__tldr,
.lp-web-faq__tldr,
.lp-web-form-section__tldr,
.lp-web-privacy__tldr,
.lp-web-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-web-issue__tldr strong,
.lp-web-order__tldr strong,
.lp-web-service__tldr strong,
.lp-web-roadmap__tldr strong,
.lp-web-faq__tldr strong,
.lp-web-form-section__tldr strong,
.lp-web-privacy__tldr strong,
.lp-web-promise__lead strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}


/* ============================================================
 * Section 01 ─ lp-web-issue（こんなお悩みはありませんか）
 *   チェックマーク付きリスト6項目。box 化せずシンプルなリストで。
 *   主アクセント コッパー #C9885F を Issue マーカー（チェック丸）に強く採用。
 * ============================================================ */
.lp-web-issue__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	list-style: none;
	padding: 0;
	margin: 0;
	/* container--wide（1440px）の幅を活かすため max-width 制約は解除。
	   PC では3カラム × 2行で 6項目を均等配置し、右側の余白を埋める。 */
}

@media (min-width: 768px) {
	.lp-web-issue__list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4) var(--space-6);
	}
}

@media (min-width: 1024px) {
	.lp-web-issue__list {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-4) var(--space-7);
	}
}

.lp-web-issue__list li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-3);
	align-items: start;
	padding: var(--space-3) 0;
	border-bottom: 1px dashed var(--color-border-subtle);
}

.lp-web-issue__list li:last-child {
	border-bottom: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* タブレット：2列の最後の2件は border-bottom を削る */
	.lp-web-issue__list li:nth-last-child(-n+2) {
		border-bottom: none;
	}
}

@media (min-width: 1024px) {
	/* PC：3列の最後の3件は border-bottom を削る（最終行） */
	.lp-web-issue__list li:nth-last-child(-n+3) {
		border-bottom: none;
	}
}

.lp-web-issue__check {
	flex-shrink: 0;
}

.lp-web-issue__check svg {
	width: 28px;
	height: 28px;
	display: block;
}

.lp-web-issue__list li > span:last-child {
	font-size: var(--fs-base);
	color: var(--color-text-primary);
	line-height: var(--lh-relaxed);
	font-weight: var(--fw-semibold);
	text-wrap: pretty;
}


/* ============================================================
 * Section 02 ─ lp-web-order（順序の問題）
 *   shift と同じ構造（PC は本文左／3ポイント右の2カラム）。
 * ============================================================ */
.lp-web-order__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-web-order__body p {
	margin: 0;
	max-width: 64ch;
}

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

.lp-web-order__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つの順序ポイント）＝ 右カラム */
@media (min-width: 1024px) {
	.lp-web-order__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-web-order__header {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.lp-web-order__body {
		grid-column: 1;
		grid-row: 2;
		max-width: none;
	}

	.lp-web-order__body p {
		max-width: 60ch;
	}

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

.lp-web-order__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-web-order__points li:first-child {
	border-top: none;
	padding-top: 0;
}

.lp-web-order__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-action);  /* Amber 主アクセント */
	line-height: 1;
	font-feature-settings: "tnum";
	min-width: 2ch;
}

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

.lp-web-order__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-web-order__points-body span {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	text-wrap: pretty;
}


/* ============================================================
 * Section 03 ─ lp-web-service（相談テーマ6カテゴリ＋3つの強み）
 * ============================================================ */
.lp-web-service__scope-block {
	margin-bottom: var(--space-9);
}

.lp-web-service__scope-title,
.lp-web-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);
}

/* ── 6カテゴリのスコープグリッド（PCは3列、狭めの幅では2列） ── */
.lp-web-scope-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	max-width: 640px;
	margin-inline: auto;
}

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

@media (min-width: 1024px) {
	.lp-web-scope-grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: 980px;
	}
}

@media (min-width: 1200px) {
	.lp-web-scope-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: none;
	}
}

.lp-conversion-stage--web .lp-conversion-stage__title {
	width: 100%;
	max-width: none;
}

.lp-conversion-stage--web .lp-conversion-stage__title-line {
	display: block;
	max-width: 100%;
}

@media (min-width: 1024px) {
	.lp-conversion-stage--web .lp-conversion-stage__inner {
		grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
		gap: var(--space-8);
	}

	.lp-conversion-stage--web .lp-conversion-stage__title {
		font-size: clamp(2.875rem, 4.2vw, 3.5rem);
	}

	.lp-conversion-stage--web .lp-conversion-stage__title-line {
		white-space: nowrap;
	}

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

@media (min-width: 1280px) {
	.lp-conversion-stage--web .lp-conversion-stage__inner {
		grid-template-columns: minmax(0, 1.12fr) minmax(420px, 0.88fr);
		gap: var(--space-9);
	}
}

.lp-web-scope {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	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-web-scope:hover {
	border-color: var(--color-border-brand);
	background: var(--color-bg-elevated);
	transform: translateY(-3px);
}

.lp-web-scope__num {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-tight);
	color: var(--color-action);  /* Amber 主アクセント */
	line-height: 1;
	font-feature-settings: "tnum";
	margin-bottom: var(--space-1);
}

.lp-web-scope__heading {
	font-size: var(--fs-lg);
	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-web-scope__desc {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	margin: 0;
	text-wrap: pretty;
}

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

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

.lp-web-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-web-strengths__grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: 920px;
	}
}

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

.lp-web-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-web-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-web-strength__icon {
	width: 72px;
	height: 72px;
	margin-bottom: var(--space-2);
}

.lp-web-strength__icon svg {
	width: 100%;
	height: 100%;
}

.lp-web-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-web-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-web-strength__desc {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	margin: 0;
	text-wrap: pretty;
}

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


/* ============================================================
 * Section 04 ─ lp-web-roadmap（相談後の進め方・縦タイムライン型）
 *   AIっぽい callout box（塗り背景＋全周枠線＋border-left太枠線＋角丸padding大）
 *   は禁止（design_universal_rules_2026-05-04 / CLAUDE.md 4.4.5-B）。
 *   代わりに「左端1pxの縦ライン＋番号丸（Phase 01-03）」を使うタイムライン型で実装。
 *   各 Phase は塗りなし／全周枠線なし／角丸padding大なし。
 *   引用文（"〜。"）はプルクオート型（左に細い縦線＋大きめ文字）で表現。
 *
 *   【整列の単一情報源】
 *   roadmap と FAQ のテキスト本文（左端・右端・中心線）をピクセルパーフェクトで揃えるため、
 *   両セクションとも .lp-web-stack（max-width 880px・margin-inline auto）を共通親とする。
 * ============================================================ */

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

/* ヘッダーは stack 幅 880px にフルで広げる（共通定義の max-width: 760px を上書き） */
.lp-web-stack > .lp-web-roadmap__header,
.lp-web-stack > .lp-web-faq__header {
	max-width: none;
}

/* ─── roadmap 内部 ─── */
.lp-web-roadmap__header {
	position: relative;
}

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

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

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

/* 番号丸：Phase 01-03 で色を変える（Phase 02 は Amber 主アクセント） */
.lp-web-roadmap__phase::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-intelligence);  /* Phase 01: Cyan */
	box-shadow: 0 0 0 3px var(--color-bg-primary);
}

.lp-web-roadmap__phase:nth-child(2)::before {
	background: var(--color-action);  /* Phase 02: Amber 強調 */
}

.lp-web-roadmap__phase:nth-child(3)::before {
	background: var(--color-brand);  /* Phase 03: Teal */
}

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

	.lp-web-roadmap__phase::before {
		width: 20px;
		height: 20px;
	}

	.lp-web-stack--roadmap .lp-web-roadmap__list::before {
		left: 10px;
	}
}

.lp-web-roadmap__phase-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";
}

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

/* Phase 引用文：プルクオート型（細い縦線＋大きめ文字／box 化しない） */
.lp-web-roadmap__phase-quote {
	margin: var(--space-2) 0 var(--space-3) 0;
	padding-left: var(--space-4);
	border-left: 2px solid var(--color-action);  /* Amber 主アクセント */
	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-web-roadmap__phase:nth-child(1) .lp-web-roadmap__phase-quote {
	border-left-color: var(--color-intelligence);
}

.lp-web-roadmap__phase:nth-child(3) .lp-web-roadmap__phase-quote {
	border-left-color: var(--color-brand);
}

.lp-web-roadmap__phase-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-3) var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
}

.lp-web-roadmap__phase-list li {
	position: relative;
	padding-left: var(--space-4);
	text-wrap: pretty;
}

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

/* Phase ゴール文（Day XX のゴール：…） */
.lp-web-roadmap__phase-goal {
	margin: 0 0 0 var(--space-5);
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	text-wrap: pretty;
}

.lp-web-roadmap__phase-goal strong {
	color: var(--color-action);  /* Amber 主アクセント */
	font-weight: var(--fw-extrabold);
}

/* 相談後の補足文：プレーンテキスト（box化禁止） */
.lp-web-roadmap__after {
	margin-top: var(--space-7);
	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 06 ─ lp-web-faq（contact-faq 流用構造）
 *   roadmap と幅・中心線を完全一致させるため、共通の .lp-web-stack を親とする。
 * ============================================================ */
.lp-web-faq__header {
	position: relative;
}

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

.lp-web-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-web-faq__item[open] {
	border-color: var(--color-border-brand);
}

.lp-web-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-web-faq__q::-webkit-details-marker {
	display: none;
}

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

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

.lp-web-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-web-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-web-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-web-faq__q-icon::before,
.lp-web-faq__q-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: var(--color-brand);
	border-radius: 1px;
}

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

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

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

.lp-web-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-web-faq__a p {
	margin: 0;
	max-width: 64ch;
	text-wrap: pretty;
}

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

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


/* ============================================================
 * Section 07 ─ lp-web-promise（ダーク強調・Promise 01-03）
 * ============================================================ */
.lp-web-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-web-promise {
		padding-block: var(--space-10);
	}
}

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

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

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

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

.lp-web-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);
}

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

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

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

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

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

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

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

.lp-web-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-web-promise__grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: 920px;
	}
}

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

.lp-web-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-web-promise__card:hover {
	background: var(--color-bg-dark-elevated);
	border-color: var(--color-border-dark-default);
	transform: translateY(-4px);
}

.lp-web-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-web-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-web-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-web-promise__card-desc strong {
	color: var(--color-text-dark-primary);
	font-weight: var(--fw-bold);
}


/* ============================================================
 * Section 08 ─ lp-web-form-section（CF7 placeholder）
 * contact-form の主要スタイルをローカル定義（contact.css は読まない）。
 * ============================================================ */

.contact-form,
.lp-web-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-web-form,
	.wpcf7-form {
		padding: var(--space-7);
	}
}

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

/* ─── CF7 自動 <p> / <br> の余白を打ち消す（Contact ページと同方針） ───
   CF7 は各フィールドの label + 入力を <p> でラップし、<br> も差し込む。
   SPで余白が膨らむため CSS で正規化。CF7 フォーム定義・テンプレートは触らない。 */
.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: ラジオボタン4項目（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);
}

/* キーボードフォーカス時の視認性確保（a11y）：ラジオがフォーカス受けたらカード全体に focus ring を出す */
.contact-form__topic-option:focus-within {
	border-color: var(--color-brand);
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
	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);
}

/* ラジオ自体のフォーカスリングは focus-within で代替するため非表示にしない（二重表示はモバイルで邪魔だが a11y 上は残しつつ outline-offset で位置を整える） */
.contact-form__topic-option input[type="radio"]:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 1px;
}

.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-web-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-web-form-section__notes li {
	padding-left: var(--space-4);
	position: relative;
}

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


/* ============================================================
 * Section 09 ─ lp-web-privacy（要約版）
 * ============================================================ */
.lp-web-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-web-privacy__list li {
	position: relative;
	padding-left: var(--space-5);
	text-wrap: pretty;
}

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

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

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


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

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

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

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

.lp-web-footer__logo img {
	height: 24px;
	width: auto;
}

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

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

.lp-web-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-web-footer__legal a {
	color: var(--color-text-secondary);
	transition: color var(--duration-fast) var(--ease-out-expo);
}

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

.lp-web-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 のみ表示・常時可視で CV 最大化）
 * ============================================================ */
.lp-web-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-web-sticky-cta {
		display: block;
	}
}

.lp-web-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-action);  /* Amber 主アクセント：LP4独自で CTA を強める */
	color: #5C3A0A;
	font-weight: var(--fw-extrabold);
	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);
}

.lp-web-sticky-cta__btn:hover {
	background: var(--color-action-700);
	color: var(--color-text-on-brand);
	box-shadow: var(--shadow-xl), 0 0 28px rgba(201, 136, 95, 0.30);
}

.lp-web-sticky-cta__btn svg {
	width: 18px;
	height: 18px;
	color: currentColor;
}

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

	body:has(.lp-web-sticky-cta) :is(.lp-web-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-web-strength:hover,
	.lp-web-scope:hover,
	.lp-web-promise__card:hover,
	.lp-web-sticky-cta__btn:hover,
	.lp-web-hero__cta .btn:hover,
	.lp-web-header__cta:hover {
		transform: none;
		box-shadow: none;
	}
}


/* ============================================================
 * SP（〜767px）：詰まり防止と読みやすさ調整
 * ============================================================ */
@media (max-width: 767px) {
	/* hero セクション全体の上下余白：詰まらず空きすぎない */
	.lp-web-hero {
		padding-top: calc(64px + var(--space-6));
		padding-bottom: var(--space-8);
	}

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

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

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

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

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

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

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

	/* ─── lp-web-issue（SP：1列に戻す） ─── */
	.lp-web-issue__list li {
		padding: var(--space-3) 0;
	}

	.lp-web-issue__list li > span:last-child {
		font-size: var(--fs-base);
	}

	/* ─── lp-web-order ─── */
	.lp-web-order__points-num {
		font-size: var(--fs-lg);
	}

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

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

	.lp-web-scope {
		padding: var(--space-4);
		border-radius: var(--radius-md);
	}

	.lp-web-scope__num {
		font-size: var(--fs-xl);
	}

	.lp-web-scope__heading {
		font-size: var(--fs-base);
	}

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

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

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

	/* ─── lp-web-roadmap（SP）───
	   ※ padding-left は .lp-web-stack（共通親）に集約済み（36px）。 */
	.lp-web-roadmap__list {
		gap: var(--space-6);
	}

	.lp-web-roadmap__phase-heading {
		font-size: var(--fs-xl);
	}

	.lp-web-roadmap__phase-quote {
		font-size: var(--fs-base);
	}

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

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

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

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

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

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

	/* ─── lp-web-form ─── */
	.contact-form,
	.lp-web-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-web-hero__overline,
	.lp-web-hero__title,
	.lp-web-hero__audience,
	.lp-web-hero__lead,
	.lp-web-hero__mini,
	.lp-web-hero__cta,
	.lp-web-hero__notes,
	.lp-web-hero__visual {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

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

	.lp-web-strength:hover,
	.lp-web-scope:hover,
	.lp-web-promise__card:hover,
	.lp-web-faq__item,
	.lp-web-sticky-cta__btn:hover {
		transform: none !important;
		transition: none !important;
	}

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


/* ============================================================
 * ============================================================
 *
 *  /lp/web-marketing-support/thanks/ 専用スタイル
 *
 *  LP4（はじめてのWeb集客）フォーム送信完了後の遷移先（CV計測URL）。
 *  構成：
 *    Section 1 :  lp-web-thanks-hero（h1: お問い合わせを受け付けました。）
 *    Section 2 :  lp-web-thanks-info（連絡先：電話・営業時間・所在地）
 *    Section 3 :  lp-web-thanks-back（戻り導線：LP4 / トップ）
 *
 *  方針：
 *    - LP4 ライト基盤トーンを継承（クールホワイト系・dark mode ではない）
 *    - 配色アクセントは コッパー #C9885F を主役（LP1 の Teal とは差別化）
 *    - thanks ページは sticky CTA を持たない（送信後の再CTAは過剰）
 *    - ヒーローはチェックマーク中心の落ち着いたコンポジション
 *    - モバイルファースト（min-width で書く）
 *    - callout box 化禁止（CLAUDE.md 4.4.5-B）
 *    - prefers-reduced-motion で全アニメ停止
 *
 * ============================================================
 * ============================================================ */


/* ============================================================
 * Section 1 ─ lp-web-thanks-hero
 * ============================================================ */
.lp-web-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-web-thanks-hero {
		min-height: 70vh;
		padding-bottom: var(--space-9);
	}
}

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

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

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

@keyframes lp-web-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-web-thanks-spark-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.55; transform: scale(1.15); }
}

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

/* ─── 背景の極薄メガタイポ（ライト基盤での階調を維持） ─── */
.lp-web-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-web-thanks-hero__bg-typo span {
	display: block;
}

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

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

/* ─── ヒーロー右側の装飾SVG（PC：絶対配置） ─── */
.lp-web-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-web-thanks-visual-in var(--duration-slowest) var(--ease-out-expo) 1.0s forwards;
}

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

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

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

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

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

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

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

	.lp-web-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-web-thanks-visual-in-sp;
		order: 2;
	}

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

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

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

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

.lp-web-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-accent-action, #C9885F);  /* LP4：コッパー 主アクセント（LP1 の Teal とは差別化） */
	margin: 0;
	opacity: 0;
	animation: lp-web-thanks-fade-in var(--duration-slow) var(--ease-out-expo) 0.4s forwards;
}

.lp-web-thanks-hero__title {
	font-size: var(--fs-display-md);
	line-height: 1.2;
	letter-spacing: 0;
	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-web-thanks-fade-in var(--duration-slow) var(--ease-out-expo) 0.6s forwards;
}

/* SP（〜767px）：h1 を 32〜44px に（プロジェクト基準厳守） */
@media (max-width: 767px) {
	.lp-web-thanks-hero__title {
		font-size: clamp(2rem, 8.5vw, 2.75rem);
		line-height: 1.25;
		letter-spacing: 0;
	}
}

.lp-web-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-web-thanks-fade-in var(--duration-slow) var(--ease-out-expo) 0.9s forwards;
}

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


/* ============================================================
 * Section 2 ─ lp-web-thanks-info（連絡先）
 * ============================================================ */
.lp-web-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-web-thanks-info {
		padding-block: var(--space-9);
	}
}

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

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

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

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

.lp-web-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;
}

/* 連絡先カード */
.lp-web-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-web-thanks-info__card {
		padding: var(--space-7);
		gap: var(--space-6);
	}
}

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

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

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

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

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

.lp-web-thanks-info__number {
	font-family: var(--font-sans-latin);
	font-size: clamp(2rem, 7vw, 2.75rem);
	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;
}

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

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

/* 連絡先リスト */
.lp-web-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-web-thanks-info__row {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

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

.lp-web-thanks-info__row dt {
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	color: var(--color-accent-action, #C9885F);  /* LP4：dt ラベル色もコッパーに */
	flex-shrink: 0;
	min-width: 80px;
	font-family: var(--font-sans-jp);
}

.lp-web-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-web-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-web-thanks-info__row dd a:hover {
	color: var(--color-brand-700);
}


/* ============================================================
 * Section 3 ─ lp-web-thanks-back（戻り導線：LP4 / トップ）
 * ============================================================ */
.lp-web-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-web-thanks-back {
		padding-block: var(--space-8);
	}
}

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

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

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

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


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

	@media (min-width: 1024px) {
		.lp-web-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：Order point cards
 * 左ラインや段差を使わず、番号バッジと面の整理で順序を見せる。
 * ============================================================ */
.lp-web-order__points {
	--lp-order-accent: var(--color-action);
	--lp-order-accent-soft: rgba(201, 136, 95, 0.12);
	gap: var(--space-3);
}

.lp-web-order__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: 116px;
	padding: clamp(var(--space-4), 2.6vw, var(--space-5));
	border: 1px solid rgba(201, 136, 95, 0.20);
	border-radius: var(--radius-lg);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.50) 62%, var(--lp-order-accent-soft)),
		var(--color-bg-base);
	box-shadow: 0 14px 34px rgba(26, 40, 38, 0.07);
}

.lp-web-order__points li:first-child {
	padding: clamp(var(--space-4), 2.6vw, var(--space-5));
	border-top: 1px solid rgba(201, 136, 95, 0.20);
}

.lp-web-order__points li::after {
	content: "";
	position: absolute;
	top: -30px;
	right: -26px;
	z-index: -1;
	width: 96px;
	aspect-ratio: 1;
	border: 1px solid rgba(201, 136, 95, 0.18);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(201, 136, 95, 0.12), transparent 62%);
}

.lp-web-order__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(201, 136, 95, 0.26);
	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-order-accent);
	font-size: clamp(1.28rem, 1.9vw, 1.65rem);
	letter-spacing: 0;
}

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

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

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

/* ============================================================
 * LP refinement：Scope cards
 * 提供範囲6カテゴリを、ただのカード列ではなくLPの検討ボードとして見せる。
 * ============================================================ */
.lp-web-service__scope-block {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	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-web-service__scope-block::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-web-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-web-scope-grid {
	gap: var(--space-3);
	max-width: none;
}

.lp-web-scope {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 210px;
	padding: var(--space-5);
	border-color: 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-web-scope::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-web-scope__num {
	display: inline-flex;
	width: fit-content;
	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-web-scope__heading {
	margin-top: var(--space-2);
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
	letter-spacing: 0;
}

.lp-web-scope__desc {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
}

/* 2026-05-31: 提供範囲カード内の線装飾を整理 */
.lp-web-scope {
	min-height: auto;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-3);
	padding: var(--space-4);
}

.lp-web-scope::after {
	display: none;
}

.lp-web-scope__num {
	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-web-scope__heading {
	margin-top: 0;
}

.lp-web-scope__heading,
.lp-web-scope__desc {
	grid-column: 2;
}