/* ============================================================
 * lp-creative.css ─ LP共通「クリエイティブ世界観」統一レイヤー
 *
 * 役割：lp-{slug}.css の上に重ねて、KV以外の全セクションを
 *       トップ（home-creative.css）で確立した編集的世界観へ揃える。
 *       設計事務所/美術館パンフレットの佇まい（巨大明朝ノンブル・
 *       等幅ラベル・コーナーブラケット・建築図面グリッド・細罫線・
 *       グレイン質感）を正典に、6本のLPの均質な3カード反復や
 *       浮くPOP装飾・glow・mega-typo を排する。
 *
 * 依存：tokens.css / base.css（.has-brackets / .hairline /
 *       --color-decor-* / --bracket-* / --font-serif-jp / --font-mono）
 *
 * 方針：
 *   - 既存クラス名・PHPロジックは壊さない。値・装飾の上書きのみ。
 *   - components.css の section-label / bg-mega-typo / section-glow-line /
 *     section-decor / lp-conversion-stage は触れず、ここで .single-cpt_lp
 *     スコープで上書きする（グローバルへ波及させない）。
 *   - 各LPの「中身の主張」（GEO=AI回答画面 / IG=スマホ導線 /
 *     MEO=地図・来店 / Web=現状整理 / マーケの右腕=月次運営 /
 *     AX=業務システム化）は残し、見た目の言語だけ統一する。
 *   - 全モーションは prefers-reduced-motion で停止。SP（〜767px）で
 *     縦積み・WCAG AA 可読を死守。CF7 の実DOM（.wpcf7-form の p/br）
 *     正規化は壊さない。
 *
 * 【最優先】コントラスト修正（WCAG AA）：
 *   - 明コッパー #C9885F（--color-accent / --color-action）を文字色や
 *     白文字バッジ背景に使うと紙地で約2.7〜2.9:1しか取れず AA 落ち。
 *     文字は --color-accent-700（#9E6743）へ、白文字バッジ背景も
 *     --color-accent-700 へ寄せて 4.5:1 以上を確保する。
 * ============================================================ */


/* ════════════════════════════════════════════════════════════
 * 0. フィルムグレイン（LP全体・外部リクエスト0）
 *    home と同じ data-URI ノイズ。紙に粒子感。
 *    （.film-grain の基本定義は home-creative.css 側にあるが、
 *     LPでは home-creative.css を読まないためここで定義する）
 * ════════════════════════════════════════════════════════════ */
.single-cpt_lp .film-grain {
	position: fixed;
	inset: 0;
	z-index: 1;                 /* コンテンツの上・ヘッダーの下 */
	pointer-events: none;
	opacity: 0.42;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}

@media (max-width: 767px) {
	.single-cpt_lp .film-grain { opacity: 0.32; }
}
@media (prefers-reduced-motion: reduce) {
	.single-cpt_lp .film-grain { opacity: 0.3; }
}


/* ════════════════════════════════════════════════════════════
 * 1. 旧・均質装飾の撤去
 *    bg-mega-typo（巨大背景英字）・section-glow-line（発光線）・
 *    section-decor（POPな浮くSVG）をLPから消す。
 *    編集的世界観では「罫線・ブラケット・製図グリッド」に置き換える。
 * ════════════════════════════════════════════════════════════ */
.single-cpt_lp .bg-mega-typo,
.single-cpt_lp .section-glow-line,
.single-cpt_lp .section-decor {
	display: none !important;
}


/* ════════════════════════════════════════════════════════════
 * 2. section-label → エディトリアル・インデックス再解釈
 *    機械的な「01 ─ Problem」反復をやめ、巨大明朝の連番＋
 *    等幅英ラベルの「図録のノンブル」へ。
 *    （HTML構造：.section-label > __num / __line / __en は維持）
 * ════════════════════════════════════════════════════════════ */
.single-cpt_lp .section-label {
	align-items: baseline;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
	line-height: 1;
}

/* 連番：明朝で大きく沈める */
.single-cpt_lp .section-label__num {
	font-family: var(--font-serif-jp);
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	font-weight: var(--fw-semibold);
	color: var(--color-brand);
	letter-spacing: var(--ls-tighter);
	font-feature-settings: "tnum";
	line-height: 0.8;
}

/* 旧グラデ短線 → 細い縦罫（ノンブルと英ラベルを仕切る） */
.single-cpt_lp .section-label__line {
	width: 1px;
	height: 1.6em;
	align-self: flex-end;
	margin-bottom: 0.3em;
	background: var(--color-decor-hairline);
}

/* 英ラベル：等幅・トーンを落として静かに */
.single-cpt_lp .section-label__en {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-widest);
	color: var(--color-text-secondary);
	align-self: flex-end;
	padding-bottom: 0.45em;
}

@media (max-width: 767px) {
	.single-cpt_lp .section-label { gap: var(--space-2); }
	.single-cpt_lp .section-label__num { font-size: clamp(1.875rem, 11vw, 2.5rem); }
	.single-cpt_lp .section-label__line { height: 1.3em; }
}


/* ════════════════════════════════════════════════════════════
 * 3. 書体コントラストの統一
 *    見出し＝明朝＋mix-blend（紙にインクが沈む）。
 *    eyebrow / overline / 数値ラベル＝等幅。本文＝ゴシック維持。
 * ════════════════════════════════════════════════════════════ */
.single-cpt_lp h2,
.single-cpt_lp h3 {
	font-family: var(--font-serif-jp);
	font-weight: var(--fw-semibold);
}

/* セクション主見出し（各LPの __title）は紙地でインクが沈む表現。
   KV（hero）は据え置き方針のため、*-hero__title は除外する。 */
.single-cpt_lp section:not([class*="-hero"]) [class$="__title"],
.single-cpt_lp .final-cta__title {
	mix-blend-mode: multiply;
}
/* ダーク面（lp-conversion-stage のダーク派生等）では mix-blend を解除 */
.single-cpt_lp .lp-conversion-stage [class$="__title"] {
	mix-blend-mode: normal;
}

/* eyebrow / kicker / 数値ラベルを等幅へ（KV内の overline 等は除外） */
.single-cpt_lp section:not([class*="-hero"]) [class$="__eyebrow"],
.single-cpt_lp section:not([class*="-hero"]) [class$="__kicker"],
.single-cpt_lp [class$="__step-num"],
.single-cpt_lp [class$="__points-num"],
.single-cpt_lp [class$="__number"],
.single-cpt_lp [class$="__metric-value"] {
	font-family: var(--font-mono);
	letter-spacing: var(--ls-wide);
}


/* ════════════════════════════════════════════════════════════
 * 4. セクションヘッダーに編集的ディテール
 *    各LPの section > header（reveal を持つ見出し帯）の上端に、
 *    建築図面グリッドが「組み上がる」極薄帯＋左上コーナーブラケット。
 *    bg-mega-typo 撤去の代替として、声の入りを作る。
 * ════════════════════════════════════════════════════════════ */
.single-cpt_lp section > .container > header,
.single-cpt_lp section > .container > div > header {
	position: relative;
}

/* コーナーブラケット（左上）：見出し帯に設計図感を添える。
   ::before は多くのヘッダーで未使用だが、念のため content で限定。 */
.single-cpt_lp section > .container > header::before {
	content: "";
	position: absolute;
	top: calc(var(--space-5) * -1);
	left: calc(var(--space-3) * -1);
	width: 16px;
	height: 16px;
	border: 0 solid var(--color-decor-bracket);
	border-top-width: var(--bracket-thickness);
	border-left-width: var(--bracket-thickness);
	opacity: 0.7;
	pointer-events: none;
}

@media (max-width: 767px) {
	.single-cpt_lp section > .container > header::before {
		left: 0;
		top: calc(var(--space-4) * -1);
	}
}


/* ════════════════════════════════════════════════════════════
 * 5. lp-conversion-stage：各LPの個性ビジュアルを「製図トーン」へ
 *    components.css の派生（--ig=coral / --meo=copper / --web=amber /
 *    --mc=cyan）が旧パレット rgba を直書きしているため、
 *    --stage-accent 系をブランド統一（ティール主役＋コッパー差し）へ
 *    .single-cpt_lp スコープで上書きする。中身の図版主張は維持。
 * ════════════════════════════════════════════════════════════ */

/* GEO：ティール（資産・維持。元から teal なので踏襲） */
.single-cpt_lp .lp-conversion-stage--geo {
	--stage-accent: var(--color-brand);
	--stage-accent-soft: rgba(6, 123, 123, 0.10);
	--stage-accent-border: rgba(6, 123, 123, 0.30);
	--stage-accent-ink: var(--color-brand-900);
}

/* Instagram：人の温度＝コッパー（コーラル原色は紙地に浮くため統一） */
.single-cpt_lp .lp-conversion-stage--ig {
	--stage-accent: var(--color-accent-700);
	--stage-accent-soft: rgba(158, 103, 67, 0.10);
	--stage-accent-border: rgba(158, 103, 67, 0.30);
	--stage-accent-ink: var(--color-accent-900);
}

/* MEO：コッパー（来店・地図の温度） */
.single-cpt_lp .lp-conversion-stage--meo {
	--stage-accent: var(--color-accent-700);
	--stage-accent-soft: rgba(158, 103, 67, 0.10);
	--stage-accent-border: rgba(158, 103, 67, 0.30);
	--stage-accent-ink: var(--color-accent-900);
}

/* Web集客：コッパー（現状整理。アンバー原色は廃し統一） */
.single-cpt_lp .lp-conversion-stage--web {
	--stage-accent: var(--color-accent-700);
	--stage-accent-soft: rgba(158, 103, 67, 0.11);
	--stage-accent-border: rgba(158, 103, 67, 0.32);
	--stage-accent-ink: var(--color-accent-900);
}

/* マーケの右腕：ティール（上質・運営。シアン原色は廃し統一） */
.single-cpt_lp .lp-conversion-stage--mc {
	--stage-accent: var(--color-brand);
	--stage-accent-soft: rgba(6, 123, 123, 0.10);
	--stage-accent-border: rgba(6, 123, 123, 0.30);
	--stage-accent-ink: var(--color-brand-900);
}

/* ステージ背景の斜線ハッチを製図グリッドへ寄せる（過剰グラデを抑える）。
   罫線主体・紙地の連続感を出し、トップの建築図面トーンと地続きに。 */
.single-cpt_lp .lp-conversion-stage {
	background:
		linear-gradient(var(--color-decor-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--color-decor-grid) 1px, transparent 1px),
		linear-gradient(120deg, rgba(255, 255, 255, 0.96) 0%, rgba(250, 249, 247, 0.98) 60%, var(--stage-accent-soft) 100%),
		var(--color-bg-primary);
	background-size: var(--space-7) var(--space-7), var(--space-7) var(--space-7), 100% 100%, 100% 100%;
	border-block: 1px solid var(--stage-accent-border);
}

/* ステージ装飾の回転ポリゴン／破線バーは控える（編集的に静かに） */
.single-cpt_lp .lp-conversion-stage::before {
	opacity: 0.28;
}
.single-cpt_lp .lp-conversion-stage::after {
	opacity: 0.06;
}

/* eyebrow 下線（太い塗りバー）を細罫へ */
.single-cpt_lp .lp-conversion-stage__eyebrow::before {
	height: 1px;
	background: var(--stage-accent);
}


/* ════════════════════════════════════════════════════════════
 * 6. コントラスト修正（WCAG AA・最優先）
 *    Phase1 のトークン回帰で明コッパー #C9885F が紙地に浮き、
 *    文字・白文字バッジ背景で AA を割っていた箇所を全修正。
 * ════════════════════════════════════════════════════════════ */

/* 6-1. 必須バッジ：白文字 × 明コッパー背景（約2.9:1）→ 濃コッパー背景（約5:1） */
.single-cpt_lp .contact-form__required {
	background: var(--color-accent-700);
	color: #FFFFFF;
}

/* 6-2. 明コッパー（--color-action = #C9885F・紙地で約2.6:1）を、14px太字
        という「非・大文字」サイズの文字色に使っていた Web集客LP roadmap の
        ゴール強調文を修正。濃コッパー #9E6743 でも紙地では約4.17:1で
        4.5:1 に僅かに届かないため、AA を満たすブランドティール
        #067B7B（紙地で約4.52:1）へ寄せる（統一世界観の主役色とも整合）。 */
.single-cpt_lp .lp-web-roadmap__phase-goal strong {
	color: var(--color-brand);
}

/* 6-3. 旧テラコッタ直書き（MEO LP points-num・大連番）を
        濃コッパーへ。本レイヤーの section-3 で __points-num はティールへ
        寄るが、明示しておく（off-token 直書きの除去）。 */
.single-cpt_lp .lp-meo-shift__points-num {
	color: var(--color-accent-700);
}

/* 6-4. Web集客LP scope の大連番（__num・24px太字）が明コッパー #C9885F で
        紙地 2.6:1（大文字 3:1 すら割る）。section-3 の __number 規則は
        __num 末尾を捕捉しないため、ここで個別にブランドティールへ。 */
.single-cpt_lp .lp-web-scope__num {
	color: var(--color-brand);
}


/* ════════════════════════════════════════════════════════════
 * 7. カード・面の編集化
 *    丸枠＋影＋塗りの「AIっぽい」面を、罫線主体へ寄せる微調整。
 *    各LPの細かなレイアウトは lp-{slug}.css を尊重し、ここでは
 *    トーンの底上げだけ行う（破壊的な再レイアウトはしない）。
 * ════════════════════════════════════════════════════════════ */

/* Flow/Step・Points の番号を明朝の大連番に寄せ、トップと地続きに */
.single-cpt_lp [class$="__step-num"],
.single-cpt_lp [class$="__points-num"] {
	color: var(--color-brand);
}

/* Deliverable / Strength の番号ラベルはトーンを落として等幅で静かに */
.single-cpt_lp [class$="__number"] {
	color: var(--color-text-secondary);
	font-weight: var(--fw-medium);
}


/* ════════════════════════════════════════════════════════════
 * 8. scroll-driven（対応ブラウザのみ・編集的な入り）
 *    セクション見出し帯が下からせり上がって組み上がる。
 *    未対応は静止（@supports で隔離）。reduced-motion で停止。
 * ════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.single-cpt_lp section > .container > header::before,
		.single-cpt_lp section > .container > div > header::before {
			animation: lp-bracket-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
	}
}
@keyframes lp-bracket-in {
	from { opacity: 0; }
	to   { opacity: 0.7; }
}


/* ════════════════════════════════════════════════════════════
 * 9. prefers-reduced-motion：全モーション停止＋見栄えする静止
 * ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.single-cpt_lp section > .container > header::before,
	.single-cpt_lp section > .container > div > header::before {
		animation: none !important;
		opacity: 0.7 !important;
	}
}