/*
 * web-seisaku.css
 * ホームページ制作LP（/web-seisaku/）専用スタイル
 * スコープ: .l-main--web-seisaku 配下にすべて閉じる
 * フォント: 見出しは Noto Serif JP（このLPのみ）、本文は既存トークン踏襲
 */

/* ---------------------------------------------------------------
 * l-main のデフォルト padding-block（96px）をゼロリセット
 * layout.css: .l-main { padding-block: var(--space-12) } を上書き
 * FV がヘッダー直下から始まるようにする
 * --------------------------------------------------------------- */

.l-main--web-seisaku {
	padding-top: 0;
	padding-bottom: 0;
}

/* ---------------------------------------------------------------
 * 共通: 見出しの明朝体 + フェードイン演出
 * --------------------------------------------------------------- */

.l-main--web-seisaku .js-fade-heading {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.l-main--web-seisaku .js-fade-heading.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ---------------------------------------------------------------
 * l-section の上下 padding をこのLP内で上書き（128px → 96px / 64px）
 * --------------------------------------------------------------- */

.l-main--web-seisaku .l-section {
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
}

@media (max-width: 767px) {
	.l-main--web-seisaku .l-section {
		padding-top: var(--space-8);
		padding-bottom: var(--space-8);
	}
}

/* ---------------------------------------------------------------
 * ① ファーストビュー（墨絵×巨大明朝タイポ）
 * PC: 墨絵を右側にbg配置・左端グラデーションで紙白に溶け込む
 * SP: 墨絵を下部にbg配置・黒文字・テキスト上から
 * background-image は section-hero.php のインラインstyleで設定
 * --------------------------------------------------------------- */

.l-main--web-seisaku .p-seisaku-hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: flex-start;
	background-color: #fafaf8;
	background-repeat: no-repeat;
	background-position: right top;
	background-size: auto 88%;
}

/* 画像左端フェード: 紙白背景に境界線なしで溶け込む */
.l-main--web-seisaku .p-seisaku-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, #fafaf8 40%, transparent 70%);
	z-index: 1;
	pointer-events: none;
}

/* テキストブロック: グラデーションより前面 */
.l-main--web-seisaku .p-seisaku-hero__body {
	position: relative;
	z-index: 2;
	padding: var(--space-6) var(--space-6) var(--space-12) 6vw;
	background: transparent;
}

.l-main--web-seisaku .p-seisaku-hero__label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	letter-spacing: 0.05em;
	margin-bottom: var(--space-3);
	max-width: 480px;
}

/* 巨大明朝タイポ */
.l-main--web-seisaku .p-seisaku-hero__title {
	font-family: 'Noto Serif JP', serif;
	font-size: clamp(44px, 6.8vw, 96px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.02em;
	color: var(--color-text);
	margin-bottom: var(--space-6);
}

/* 各行: display:block + 折り返し禁止 で2行固定 */
.l-main--web-seisaku .p-seisaku-hero__title span {
	display: block;
	white-space: nowrap;
}

/* ロード時フェードイン（モーション許可時のみ）
 * 初期の opacity:0 / transform は JS が担当（defer 環境でも JS 到着まで FV が見えることを保証）。
 * CSS は transition のみ定義し、is-visible 付与時のアニメーションを受け取る。 */
@media (prefers-reduced-motion: no-preference) {
	.l-main--web-seisaku .p-seisaku-hero__title span,
	.l-main--web-seisaku .p-seisaku-hero__sub,
	.l-main--web-seisaku .p-seisaku-hero__ai,
	.l-main--web-seisaku .p-seisaku-hero__nums,
	.l-main--web-seisaku .p-seisaku-hero__cta {
		transition: opacity 0.6s ease, transform 0.6s ease;
	}
}

.l-main--web-seisaku .p-seisaku-hero__title span.is-visible,
.l-main--web-seisaku .p-seisaku-hero__sub.is-visible,
.l-main--web-seisaku .p-seisaku-hero__ai.is-visible,
.l-main--web-seisaku .p-seisaku-hero__nums.is-visible,
.l-main--web-seisaku .p-seisaku-hero__cta.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.l-main--web-seisaku .p-seisaku-hero__sub {
	font-size: var(--text-sm);
	line-height: 1.8;
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
	max-width: 480px;
}

.l-main--web-seisaku .p-seisaku-hero__ai {
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: 1.6;
	color: var(--color-text);
	margin-bottom: var(--space-5);
	max-width: 480px;
}

.l-main--web-seisaku .p-seisaku-hero__ai-br {
	display: none;
}

@media (max-width: 767px) {
	.l-main--web-seisaku .p-seisaku-hero__ai-br {
		display: inline;
	}
}

/* 数字ブロック（主要8ページ | 一式500,000円） */
.l-main--web-seisaku .p-seisaku-hero__nums {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.15em 0.5em;
	margin-bottom: var(--space-5);
	font-weight: 700;
}

.l-main--web-seisaku .p-seisaku-hero__nums-item {
	font-size: clamp(1rem, 2.2vw, 1.2rem);
	color: var(--color-text);
	white-space: nowrap;
	line-height: 1.2;
}

.l-main--web-seisaku .p-seisaku-hero__nums-em {
	font-family: var(--font-en);
	font-size: clamp(2.25rem, 4.8vw, 3.5rem);
	font-weight: 700;
	font-style: normal;
	letter-spacing: -0.02em;
	color: var(--color-text);
	line-height: 1;
}

.l-main--web-seisaku .p-seisaku-hero__nums-sep {
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-text-muted);
	align-self: center;
}

@media (max-width: 767px) {
	.l-main--web-seisaku .p-seisaku-hero__nums {
		gap: 0.1em 0.4em;
	}
	.l-main--web-seisaku .p-seisaku-hero__nums-item {
		font-size: 0.9rem;
	}
	.l-main--web-seisaku .p-seisaku-hero__nums-em {
		font-size: clamp(1.9rem, 7.5vw, 2.5rem);
	}
}

/* 旧 sub-price（互換） */
.l-main--web-seisaku .p-seisaku-hero__sub-price {
	white-space: nowrap;
}

.l-main--web-seisaku .p-seisaku-hero__cta {
	max-width: 400px;
}

.l-main--web-seisaku .p-seisaku-hero__btn {
	width: 100%;
	white-space: normal;
	line-height: 1.4;
	padding-top: var(--space-4);
	padding-bottom: var(--space-4);
}

.l-main--web-seisaku .p-seisaku-hero__btn-note {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-align: center;
	margin-top: var(--space-2);
}

.l-main--web-seisaku .p-seisaku-hero__limit {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	line-height: 1.6;
	margin-top: var(--space-3);
	max-width: 400px;
}

/* ---------------------------------------------------------------
 * ① FV: SP（767px以下）
 * 墨絵を下部配置・黒文字・テキスト上から
 * --------------------------------------------------------------- */

@media (max-width: 767px) {
	.l-main--web-seisaku .p-seisaku-hero {
		min-height: 92svh;
		background-position: 78% bottom;
		background-size: auto 70%;
		align-items: flex-start;
	}

	/* PCの左端グラデーションをSPでは使わない */
	.l-main--web-seisaku .p-seisaku-hero::before {
		display: none;
	}

	/* body: 通常フロー(flex item)でヒーローを内容に応じて伸長させる */
	.l-main--web-seisaku .p-seisaku-hero__body {
		position: relative;
		width: 100%;
		padding: var(--space-3) var(--space-2) var(--space-6);
		display: flex;
		align-items: flex-start;
		z-index: 2;
	}

	/* content: 縦積み・上から / 白半透明カードで可読性確保 */
	.l-main--web-seisaku .p-seisaku-hero__content {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 20px 16px;
		background: rgba(250, 250, 248, 0.78);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		border-radius: 4px;
	}

	/* h1: SP用フォントサイズ（9文字が1行に収まる可変幅） */
	.l-main--web-seisaku .p-seisaku-hero__title {
		font-size: clamp(32px, 8.5vw, 42px);
		margin-bottom: var(--space-4);
	}

	/* max-width 制約を解除 */
	.l-main--web-seisaku .p-seisaku-hero__label,
	.l-main--web-seisaku .p-seisaku-hero__sub,
	.l-main--web-seisaku .p-seisaku-hero__cta,
	.l-main--web-seisaku .p-seisaku-hero__limit {
		max-width: none;
	}

	/* sub: 下部押し下げを廃止（上から自然に流す） */
	.l-main--web-seisaku .p-seisaku-hero__sub {
		margin-top: 0;
		padding-top: 0;
	}
}

/* ---------------------------------------------------------------
 * ① FV: 背景動画（PC/SP共通）
 * inset:0+overflow:hidden の全面ラッパーでクロップ。
 * PC: video を right top 配置（background-position: right top と一致）
 * SP: hero に isolation:isolate で stacking context を生成し、
 *     video-wrap を z-index:-1 にして白カード（z-2）より確実に下層へ。
 *     video 配置は background-size:auto 70% / background-position:78% bottom と一致。
 *     breakpoint は hero SP（767px）に統一。
 * --------------------------------------------------------------- */

.l-main--web-seisaku .p-seisaku-hero__video-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}

.l-main--web-seisaku .p-seisaku-hero__video {
	position: absolute;
	top: 0;
	right: 0;
	height: 88%;
	width: auto;
	max-width: none;
	display: block;
}

/* SP: hero を stacking context 化・動画を白カード下層に固定 */
@media (max-width: 767px) {
	.l-main--web-seisaku .p-seisaku-hero {
		isolation: isolate;
	}

	.l-main--web-seisaku .p-seisaku-hero__video-wrap {
		z-index: -1;
	}

	.l-main--web-seisaku .p-seisaku-hero__video {
		top: auto;
		right: auto;
		bottom: 0;
		left: 78%;
		transform: translateX(-78%);
		height: 70%;
		width: auto;
	}
}

/* ---------------------------------------------------------------
 * ② 共感ゾーン（黒地）
 * --------------------------------------------------------------- */

.l-main--web-seisaku .p-seisaku-empathy {
	background: #111;
	color: #fff;
	padding: var(--space-16) 0;
}

.l-main--web-seisaku .p-seisaku-empathy .l-container {
	max-width: 760px;
}

.l-main--web-seisaku .p-seisaku-empathy__heading {
	font-family: 'Noto Serif JP', serif;
	font-size: clamp(1.35rem, 3.5vw, 1.85rem);
	font-weight: 700;
	color: #fff;
	margin-bottom: var(--space-5);
}

/* 見出しフェードイン: 黒地でも動作するよう色を保持 */
.l-main--web-seisaku .p-seisaku-empathy .js-fade-heading {
	color: #fff;
}

.l-main--web-seisaku .p-seisaku-empathy__list {
	list-style: none;
	padding: 0;
	margin-bottom: var(--space-6);
}

.l-main--web-seisaku .p-seisaku-empathy__item {
	display: flex;
	gap: var(--space-3);
	font-size: clamp(1rem, 2.5vw, 1.2rem);
	line-height: 1.7;
	padding: var(--space-4) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.45s ease, transform 0.45s ease;
}

.l-main--web-seisaku .p-seisaku-empathy__item.is-visible {
	opacity: 1;
	transform: translateY(0);
}


.l-main--web-seisaku .p-seisaku-empathy__dash {
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.4);
}

/* 末尾の滑り台 */
.l-main--web-seisaku .p-seisaku-empathy__bridge {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.65);
	text-align: right;
	font-style: italic;
}

/* ---------------------------------------------------------------
 * ③ 原因の言語化（白地）
 * --------------------------------------------------------------- */

.l-main--web-seisaku .p-seisaku-cause .l-container {
	max-width: 760px;
}

.l-main--web-seisaku .p-seisaku-cause__heading {
	font-family: 'Noto Serif JP', serif;
	font-size: clamp(1.35rem, 3.5vw, 1.85rem);
	font-weight: 700;
	margin-bottom: var(--space-5);
}

.l-main--web-seisaku .p-seisaku-cause__text {
	font-size: var(--text-base);
	line-height: 1.9;
	color: var(--color-text);
	margin-bottom: 1.4em;
}

/* 引用風ブロック: 左縦罫線 */
.l-main--web-seisaku .p-seisaku-cause__quote {
	border-left: 3px solid var(--color-border);
	padding-left: var(--space-6);
	margin: var(--space-8) 0;
}

.l-main--web-seisaku .p-seisaku-cause__quote p {
	font-size: var(--text-base);
	line-height: 1.9;
	color: var(--color-text);
	margin-bottom: var(--space-2);
}

/* 末尾の滑り台 */
.l-main--web-seisaku .p-seisaku-cause__bridge {
	text-align: center;
	font-size: clamp(1rem, 2vw, 1.15rem);
	font-weight: 600;
	color: var(--color-text);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------
 * ④ 主要8ページ（白地）
 * --------------------------------------------------------------- */

.l-main--web-seisaku .p-seisaku-pages .l-container {
	max-width: 760px;
}

.l-main--web-seisaku .p-seisaku-pages__heading {
	font-family: 'Noto Serif JP', serif;
	font-size: clamp(1.35rem, 3.5vw, 1.85rem);
	font-weight: 700;
	margin-bottom: var(--space-5);
}

.l-main--web-seisaku .p-seisaku-pages__text {
	font-size: var(--text-base);
	line-height: 1.9;
	color: var(--color-text);
	margin-bottom: 1.4em;
}

/* 8枚カードグリッド */
.l-main--web-seisaku .p-seisaku-pages__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	list-style: none;
	padding: 0;
	margin: var(--space-8) 0;
}

@media (min-width: 600px) {
	.l-main--web-seisaku .p-seisaku-pages__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.l-main--web-seisaku .p-seisaku-pages__card {
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	aspect-ratio: 3 / 4;
	color: var(--color-text);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

.l-main--web-seisaku .p-seisaku-pages__card--entry,
.l-main--web-seisaku .p-seisaku-pages__card--exit {
	border: 1px solid var(--color-text);
}

.l-main--web-seisaku .p-seisaku-pages__card-bar {
	height: 3px;
	background: var(--color-border);
	flex-shrink: 0;
	margin-bottom: var(--space-3);
}

.l-main--web-seisaku .p-seisaku-pages__card--entry .p-seisaku-pages__card-bar,
.l-main--web-seisaku .p-seisaku-pages__card--exit .p-seisaku-pages__card-bar {
	background: var(--color-text);
}

.l-main--web-seisaku .p-seisaku-pages__card-name {
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-text);
	padding: 0 var(--space-3);
}

.l-main--web-seisaku .p-seisaku-pages__card-role {
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--color-text-muted);
	padding: 0 var(--space-3) var(--space-3);
	margin-top: auto;
}

/* 広い視点（ホームページ=会社案内に限らない） */
.l-main--web-seisaku .p-seisaku-pages__wide-view {
	font-size: var(--text-base);
	line-height: 1.9;
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}

.l-main--web-seisaku .p-seisaku-pages__benefit {
	font-size: var(--text-base);
	line-height: 1.9;
	color: var(--color-text);
	margin-bottom: var(--space-8);
}

/* リニューアル訴求: 罫線で区切る */
.l-main--web-seisaku .p-seisaku-pages__renewal {
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-8);
	margin-top: var(--space-4);
}

.l-main--web-seisaku .p-seisaku-pages__renewal-heading {
	font-family: 'Noto Serif JP', serif;
	font-size: clamp(1.1rem, 2.5vw, 1.35rem);
	font-weight: 700;
	margin-bottom: var(--space-4);
}

/* ---------------------------------------------------------------
 * ⑤ マーケター監修（白地）
 * --------------------------------------------------------------- */

.l-main--web-seisaku .p-seisaku-marketer .l-container {
	max-width: 760px;
}

.l-main--web-seisaku .p-seisaku-marketer__heading {
	font-family: 'Noto Serif JP', serif;
	font-size: clamp(1.2rem, 3vw, 1.65rem);
	font-weight: 700;
	margin-bottom: var(--space-5);
}

.l-main--web-seisaku .p-seisaku-marketer__text {
	font-size: var(--text-base);
	line-height: 1.9;
	color: var(--color-text);
	margin-bottom: 1.4em;
}

/* マーケター監修 5ステップフロー */
.l-main--web-seisaku .p-seisaku-marketer__steps {
	list-style: none;
	padding: 0;
	margin: var(--space-8) 0;
}

.l-main--web-seisaku .p-seisaku-marketer__step {
	display: flex;
	gap: var(--space-5);
	align-items: flex-start;
}

.l-main--web-seisaku .p-seisaku-marketer__step-marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 2.5rem;
}

.l-main--web-seisaku .p-seisaku-marketer__step-num {
	font-family: var(--font-en);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-text);
	line-height: 1;
}

.l-main--web-seisaku .p-seisaku-marketer__step-line {
	width: 1px;
	flex: 1;
	background: var(--color-border);
	margin: var(--space-1) auto;
	min-height: 2rem;
}

.l-main--web-seisaku .p-seisaku-marketer__step:last-child .p-seisaku-marketer__step-line {
	display: none;
}

.l-main--web-seisaku .p-seisaku-marketer__step-body {
	display: flex;
	flex-direction: column;
	padding-bottom: var(--space-6);
}

.l-main--web-seisaku .p-seisaku-marketer__step:last-child .p-seisaku-marketer__step-body {
	padding-bottom: 0;
}

.l-main--web-seisaku .p-seisaku-marketer__step-title {
	display: block;
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: 0.3em;
}

.l-main--web-seisaku .p-seisaku-marketer__step-desc {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.7;
}

/* ---------------------------------------------------------------
 * ⑥ 絆ゾーン（写真背景・薄暗いオーバーレイ）
 * --------------------------------------------------------------- */

.l-main--web-seisaku .p-seisaku-bond {
	position: relative;
	overflow: hidden;
}

.l-main--web-seisaku .p-seisaku-bond__bg-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* picture要素に高さを与えないとimg height:100%が解決されない */
.l-main--web-seisaku .p-seisaku-bond__bg-wrap picture {
	display: block;
	height: 100%;
}

.l-main--web-seisaku .p-seisaku-bond__bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.l-main--web-seisaku .p-seisaku-bond__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.62);
}

.l-main--web-seisaku .p-seisaku-bond .l-container {
	position: relative;
	z-index: 1;
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
}

@media (max-width: 767px) {
	.l-main--web-seisaku .p-seisaku-bond .l-container {
		padding-top: var(--space-6);
		padding-bottom: var(--space-6);
	}
}

/* 白半透明カード: 写真の明暗に関わらず可読性を保証 */
.l-main--web-seisaku .p-seisaku-bond__content {
	background: rgba(255, 255, 255, 0.88);
	max-width: 640px;
	margin: 0 auto;
	padding: var(--space-6) var(--space-5);
	border-radius: var(--border-radius);
}

@media (min-width: 768px) {
	.l-main--web-seisaku .p-seisaku-bond__content {
		padding: var(--space-8) var(--space-8);
	}
}

.l-main--web-seisaku .p-seisaku-bond__heading {
	font-family: 'Noto Serif JP', serif;
	font-size: clamp(1.2rem, 3vw, 1.65rem);
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: var(--space-5);
	line-height: 1.6;
}

/* 白カード上のフェードイン見出しは暗色を維持 */
.l-main--web-seisaku .p-seisaku-bond .js-fade-heading {
	color: var(--color-text);
}

.l-main--web-seisaku .p-seisaku-bond__text {
	font-size: clamp(0.95rem, 2vw, 1.05rem);
	line-height: 2;
	color: var(--color-text);
	margin-bottom: 1.4em;
}

.l-main--web-seisaku .p-seisaku-bond__text:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
 * ⑦ 料金（白地）
 * --------------------------------------------------------------- */

.l-main--web-seisaku .p-seisaku-price .l-container {
	max-width: 640px;
}

.l-main--web-seisaku .p-seisaku-price__heading {
	font-family: 'Noto Serif JP', serif;
	font-size: clamp(1.35rem, 3.5vw, 1.85rem);
	font-weight: 700;
	margin-bottom: var(--space-5);
}

.l-main--web-seisaku .p-seisaku-price__lead {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}

/* 一式カード */
.l-main--web-seisaku .p-seisaku-price__card-wrap {
	margin-bottom: var(--space-6);
}

.l-main--web-seisaku .p-seisaku-price__card {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	padding: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.l-main--web-seisaku .p-seisaku-price__card-head {
	text-align: center;
}

.l-main--web-seisaku .p-seisaku-price__name {
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--space-2);
}

.l-main--web-seisaku .p-seisaku-price__price-block {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--space-1);
	margin-bottom: var(--space-2);
}

.l-main--web-seisaku .p-seisaku-price__price {
	font-family: var(--font-en);
	font-size: clamp(2rem, 6vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--color-text);
}

.l-main--web-seisaku .p-seisaku-price__price-unit {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.l-main--web-seisaku .p-seisaku-price__subcopy {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* 内訳リスト */
.l-main--web-seisaku .p-seisaku-price__items {
	list-style: none;
	padding: 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-4) 0;
}

.l-main--web-seisaku .p-seisaku-price__item {
	padding: var(--space-2) 0;
	font-size: var(--text-sm);
	color: var(--color-text);
	line-height: 1.6;
	display: flex;
	gap: var(--space-2);
}

.l-main--web-seisaku .p-seisaku-price__item::before {
	content: '✓';
	color: var(--color-text-muted);
	flex-shrink: 0;
}

/* 付帯情報 */
.l-main--web-seisaku .p-seisaku-price__extras {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	line-height: 1.8;
}

.l-main--web-seisaku .p-seisaku-price__extra-add {
	margin-bottom: var(--space-1);
}

.l-main--web-seisaku .p-seisaku-price__extra-add strong {
	font-weight: 700;
	color: var(--color-text);
}

.l-main--web-seisaku .p-seisaku-price__extra-sep::before {
	content: '※ ';
}

.l-main--web-seisaku .p-seisaku-price__extra-maint {
	margin-top: var(--space-2);
}

/* 納品後払い */
.l-main--web-seisaku .p-seisaku-price__payment {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
}

/* 価格の理由 */
.l-main--web-seisaku .p-seisaku-price__reason {
	margin: var(--space-6) 0;
}

.l-main--web-seisaku .p-seisaku-price__text {
	font-size: var(--text-base);
	line-height: 1.9;
	color: var(--color-text);
	margin-bottom: 1.4em;
}

/* 所有権ブロック（薄いグレー背景） */
.l-main--web-seisaku .p-seisaku-price__ownership {
	background: #f5f5f5;
	padding: var(--space-8);
	border-radius: var(--border-radius);
}


.l-main--web-seisaku .p-seisaku-price__ownership-heading {
	font-family: 'Noto Serif JP', serif;
	font-size: clamp(1.1rem, 2.8vw, 1.45rem);
	font-weight: 700;
	margin-bottom: var(--space-4);
}

/* ---------------------------------------------------------------
 * ⑧ 制作の流れ（白地・縦タイムライン）
 * --------------------------------------------------------------- */

.l-main--web-seisaku .p-seisaku-flow .l-container {
	max-width: 760px;
}

.l-main--web-seisaku .p-seisaku-flow__heading {
	font-family: 'Noto Serif JP', serif;
	font-size: clamp(1.35rem, 3.5vw, 1.85rem);
	font-weight: 700;
	margin-bottom: var(--space-5);
}

.l-main--web-seisaku .p-seisaku-flow__lead {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}

/* タイムライン本体: track-wrap が ol と line を同一座標空間に収める */
.l-main--web-seisaku .p-seisaku-flow__track-wrap {
	position: relative;
}

/* 縦線背景（ガイドライン・薄いグレー） */
.l-main--web-seisaku .p-seisaku-flow__track-wrap::before {
	content: '';
	position: absolute;
	left: 16px;
	top: 17px;
	width: 2px;
	bottom: 17px;
	background: var(--color-border);
	z-index: 0;
}

/* 縦線前景（JS でスクロール進捗に応じて高さが伸びる） */
.l-main--web-seisaku .p-seisaku-flow__timeline-line {
	position: absolute;
	left: 16px;
	top: 17px;
	width: 2px;
	height: 0;
	background: var(--color-text);
	z-index: 1;
	pointer-events: none;
}

.l-main--web-seisaku .p-seisaku-flow__list {
	list-style: none;
	padding: 0;
}

.l-main--web-seisaku .p-seisaku-flow__step {
	display: flex;
	gap: var(--space-3);
	padding-bottom: var(--space-4);
	position: relative;
}

.l-main--web-seisaku .p-seisaku-flow__step:last-child {
	padding-bottom: 0;
}

/* 番号マーカー */
.l-main--web-seisaku .p-seisaku-flow__step-marker {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border: 2px solid var(--color-text);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg);
	position: relative;
	z-index: 1;
}

.l-main--web-seisaku .p-seisaku-flow__step-num {
	font-family: var(--font-en);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--color-text);
}

.l-main--web-seisaku .p-seisaku-flow__step-body {
	padding-top: var(--space-1);
	flex: 1;
}

.l-main--web-seisaku .p-seisaku-flow__step-title-wrap {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
	margin-bottom: var(--space-1);
}

.l-main--web-seisaku .p-seisaku-flow__step-title {
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.4;
}

.l-main--web-seisaku .p-seisaku-flow__step-badge {
	font-size: var(--text-xs);
	font-weight: 700;
	background: var(--color-text);
	color: var(--color-bg);
	padding: 1px var(--space-2);
	border-radius: 2px;
	white-space: nowrap;
}

.l-main--web-seisaku .p-seisaku-flow__step-detail {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.6;
}

/* 「ここまで2週間」注記 */
.l-main--web-seisaku .p-seisaku-flow__step-note {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	border-left: 2px solid var(--color-border);
	padding-left: var(--space-2);
	margin-top: var(--space-1);
}

/* ---------------------------------------------------------------
 * ⑨ 代表の顔（白地）
 * --------------------------------------------------------------- */

.l-main--web-seisaku .p-seisaku-ceo .l-container {
	max-width: 960px;
}

.l-main--web-seisaku .p-seisaku-ceo__heading {
	font-family: 'Noto Serif JP', serif;
	font-size: clamp(1.35rem, 3.5vw, 1.85rem);
	font-weight: 700;
	margin-bottom: var(--space-5);
}

.l-main--web-seisaku .p-seisaku-ceo__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

@media (min-width: 768px) {
	.l-main--web-seisaku .p-seisaku-ceo__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-12);
	}
}

/* 写真 */
.l-main--web-seisaku .p-seisaku-ceo__photo-wrap {
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.l-main--web-seisaku .p-seisaku-ceo__photo-wrap {
		width: 30%;
		max-width: 260px;
	}
}

.l-main--web-seisaku .p-seisaku-ceo__photo {
	width: 100%;
	max-width: 300px;
	height: auto;
	display: block;
	border-radius: var(--border-radius);
	object-fit: cover;
}

@media (min-width: 768px) {
	.l-main--web-seisaku .p-seisaku-ceo__photo {
		max-width: none;
	}
}

/* テキスト */
.l-main--web-seisaku .p-seisaku-ceo__text-wrap {
	flex: 1;
}

.l-main--web-seisaku .p-seisaku-ceo__text {
	font-size: var(--text-base);
	line-height: 1.9;
	color: var(--color-text);
	margin-bottom: 1.4em;
}

/* 会長セリフ: 引用の重み */
.l-main--web-seisaku .p-seisaku-ceo__quote {
	border-left: 3px solid var(--color-border);
	padding: var(--space-4) var(--space-6);
	margin: var(--space-6) 0;
}

@media (prefers-reduced-motion: no-preference) {
	.l-main--web-seisaku .p-seisaku-ceo__quote {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}
}

.l-main--web-seisaku .p-seisaku-ceo__quote.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.l-main--web-seisaku .p-seisaku-ceo__quote p {
	font-size: clamp(1rem, 2vw, 1.1rem);
	line-height: 1.9;
	color: var(--color-text);
	margin-bottom: var(--space-3);
}

/* ---------------------------------------------------------------
 * ⑩ CTA + フォーム（黒地）
 * --------------------------------------------------------------- */

.l-main--web-seisaku .p-seisaku-form {
	background: #111;
	color: #fff;
	padding: var(--space-16) 0;
}

.l-main--web-seisaku .p-seisaku-form .l-container {
	max-width: 680px;
}

.l-main--web-seisaku .p-seisaku-form__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.l-main--web-seisaku .p-seisaku-form__header {
	text-align: center;
}

.l-main--web-seisaku .p-seisaku-form__heading {
	font-family: 'Noto Serif JP', serif;
	font-size: clamp(1.35rem, 3.5vw, 1.85rem);
	font-weight: 700;
	color: #fff;
	margin-bottom: var(--space-4);
}

.l-main--web-seisaku .p-seisaku-form__micro {
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: var(--space-3);
}

.l-main--web-seisaku .p-seisaku-form__limit {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.8;
	border: 1px solid rgba(255, 255, 255, 0.15);
	padding: var(--space-3) var(--space-4);
}

/* フォームカード: 白地に浮かせる */
.l-main--web-seisaku .p-seisaku-form__body {
	background: #fff;
	border-radius: var(--border-radius);
	padding: var(--space-8);
	color: var(--color-text);
}

.l-main--web-seisaku .p-seisaku-form__submit-note {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-top: var(--space-4);
	text-align: center;
}

.l-main--web-seisaku .p-seisaku-form__placeholder {
	text-align: center;
}

.l-main--web-seisaku .p-seisaku-form__placeholder-text {
	font-size: var(--text-sm);
	line-height: 1.8;
	margin-bottom: var(--space-4);
}

.l-main--web-seisaku .p-seisaku-form__mail-link {
	font-size: var(--text-base);
	color: var(--color-text);
	text-decoration: underline;
}

.l-main--web-seisaku .p-seisaku-form__admin-notice {
	font-size: var(--text-xs);
	color: #b33225;
	margin-top: var(--space-4);
}

.l-main--web-seisaku .p-seisaku-form__privacy {
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
}

.l-main--web-seisaku .p-seisaku-form__privacy a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: underline;
}

/* ---------------------------------------------------------------
 * FAQ（白地・既存アコーディオン意匠流用）
 * --------------------------------------------------------------- */

.l-main--web-seisaku .p-seisaku-faq .l-container {
	max-width: 760px;
}

.l-main--web-seisaku .p-seisaku-faq__heading {
	font-family: 'Noto Serif JP', serif;
	font-size: clamp(1.35rem, 3.5vw, 1.85rem);
	font-weight: 700;
}

.l-main--web-seisaku .p-seisaku-faq__list {
	margin-top: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: 0;
}

.l-main--web-seisaku .p-seisaku-faq__item {
	border-top: 1px solid var(--color-border);
}

.l-main--web-seisaku .p-seisaku-faq__item:last-child {
	border-bottom: 1px solid var(--color-border);
}

.l-main--web-seisaku .p-seisaku-faq__question {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-5) 0;
	cursor: pointer;
	list-style: none;
}

.l-main--web-seisaku .p-seisaku-faq__question::-webkit-details-marker {
	display: none;
}

.l-main--web-seisaku .p-seisaku-faq__q-label {
	font-family: var(--font-en);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-text-muted);
	flex-shrink: 0;
	line-height: 1.5;
}

.l-main--web-seisaku .p-seisaku-faq__q-text {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
	flex: 1;
	line-height: 1.6;
}

.l-main--web-seisaku .p-seisaku-faq__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	position: relative;
	margin-top: 2px;
}

.l-main--web-seisaku .p-seisaku-faq__icon::before,
.l-main--web-seisaku .p-seisaku-faq__icon::after {
	content: '';
	position: absolute;
	background: var(--color-text);
	border-radius: 1px;
}

.l-main--web-seisaku .p-seisaku-faq__icon::before {
	width: 14px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.l-main--web-seisaku .p-seisaku-faq__icon::after {
	width: 2px;
	height: 14px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.l-main--web-seisaku .p-seisaku-faq__item[open] .p-seisaku-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

.l-main--web-seisaku .p-seisaku-faq__answer {
	display: flex;
	gap: var(--space-4);
	padding: 0 0 var(--space-5) 0;
}

.l-main--web-seisaku .p-seisaku-faq__a-label {
	font-family: var(--font-en);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-text);
	flex-shrink: 0;
	line-height: 1.5;
}

.l-main--web-seisaku .p-seisaku-faq__answer-text {
	font-size: var(--text-sm);
	line-height: 1.85;
	color: var(--color-text-muted);
	flex: 1;
}

/* ---------------------------------------------------------------
 * LP全体: .c-button の inline-flex + white-space:nowrap 起因の
 * はみ出しをSP全域で上書き（components.css は変更しない）
 * --------------------------------------------------------------- */
@media (max-width: 767px) {
	.l-main--web-seisaku .c-button {
		display: flex;
		white-space: normal;
		min-width: 0;
	}
}

/* ---------------------------------------------------------------
 * ⑦ 料金カード CTA ボタン はみ出し防止（SP）
 * --------------------------------------------------------------- */
@media (max-width: 767px) {
	.l-main--web-seisaku .p-seisaku-price__card-wrap,
	.l-main--web-seisaku .p-seisaku-price__card {
		box-sizing: border-box;
		max-width: 100%;
	}
	.l-main--web-seisaku .p-seisaku-price__card .c-button {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------
 * ⑩ フォーム（CF7）崩れ修正
 * --------------------------------------------------------------- */

/* 入力欄全体: はみ出し防止 */
.l-main--web-seisaku .p-seisaku-form__body .wpcf7 input:not([type="submit"]),
.l-main--web-seisaku .p-seisaku-form__body .wpcf7 textarea,
.l-main--web-seisaku .p-seisaku-form__body .wpcf7 select {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

/* ラベル・control-wrap の意図しない黒背景を除去 */
.l-main--web-seisaku .p-seisaku-form__body .wpcf7 label,
.l-main--web-seisaku .p-seisaku-form__body .wpcf7 .wpcf7-form-control-wrap {
	background: none;
	background-color: transparent;
}

/* 送信ボタン: LP黒ボタンスタイル */
.l-main--web-seisaku .p-seisaku-form__body .wpcf7 [type="submit"] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	background: var(--color-primary);
	color: #fff;
	border: 2px solid var(--color-primary);
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.03em;
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: opacity var(--transition);
}

.l-main--web-seisaku .p-seisaku-form__body .wpcf7 [type="submit"]:hover {
	opacity: 0.8;
}