:root {
--primary: #1F2A24;
--secondary: #6B4226;
/* preview の theme.accent と一致（デザインスタイル優先・無ければ accent/secondary） */
--accent: #C4A86C;
/* 段F57①：地色パレット。sectionPartsCss 等の背景/文字/カード/罫線がこれを参照（濃地スタイルで反転）。 */
--ground-base: #F7F4EE; --ground-alt: #EFEAE0; --ground-dark: #201B15; --ground-text: #1F1B16; --ground-body: #5C5348; --ground-muted: #8A8072; --ground-card: #FFFFFF; --ground-border: #E3DDD0;
--bg: var(--ground-base);
--bg-alt: var(--ground-alt);
--text: var(--ground-text);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* 段F65/F96-fix2：サイト背景画像モード（活性時のみ）。LP コンテナ(.has-site-bg)背景に画像＋ground base/alt の半透明オーバーレイ（card/text/border は不透明のまま）。preview と同一の共通 siteBgImageCss/siteBgOverlayCss。 */
/* 段F44②：横スクロール根絶の安全網。メディアは親幅を超えない（比率維持）。具体クラス(.hero-media 等)は詳細度で優先＝従来不変。compare 表の意図的 overflow-x は .cmp-table-wrap で別途スクロール。 */
img, video { max-width: 100%; height: auto; }
/* 段F44③：本文 font-size を clamp 化（上限16px=ブラウザ既定＝デスクトップ不変・SPのみ最小15px）。 */
body { font-family: 'Shippori Mincho', 'Noto Serif JP', serif; background: var(--bg); color: var(--text); line-height: 1.7; font-size: clamp(15px, 4vw, 16px); }
h1, h2, h3, .site-name { font-family: 'Shippori Mincho', 'Noto Serif JP', serif; }
/* ナビのアンカー遷移時、sticky ヘッダーに隠れないようオフセット */
.section, .hero { scroll-margin-top: 80px; }
/* スクロール連動の出現アニメ（preview の AnimatedSection と同パラメータ＝MOTION_PROFILES.standard.reveal）。
F50-①：opacity フェード＋小さめ translateY(14px)。透明化(opacity:0)は html.js が付いた時（JS有効）のみ適用し、
JS無効/IO非対応/prefers-reduced-motion では全要素を可視のまま出す（初期隠しは JS 有効時限定＝「見出しが沈む」旧懸念を回避）。 */
.reveal { transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
html.js .reveal { opacity: 0; transform: translateY(14px); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } }
/* グリッド内カードの段階フェード（preview の per-card stagger 100ms と一致）。
親セクション(.reveal)が is-visible になった時に子カードが 100ms 刻みで順に出る。子は IO 対象外＝親の可視化だけで駆動（自己完結）。 */
html.js .reveal-kids > * { opacity: 0; transform: translateY(14px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
html.js .reveal.is-visible .reveal-kids > *, html.js .reveal-kids.is-visible > * { opacity: 1; transform: none; }
html.js .reveal-kids > *:nth-child(2) { transition-delay: 0.1s; }
html.js .reveal-kids > *:nth-child(3) { transition-delay: 0.2s; }
html.js .reveal-kids > *:nth-child(4) { transition-delay: 0.3s; }
html.js .reveal-kids > *:nth-child(5) { transition-delay: 0.4s; }
html.js .reveal-kids > *:nth-child(6) { transition-delay: 0.5s; }
html.js .reveal-kids > *:nth-child(7) { transition-delay: 0.6s; }
html.js .reveal-kids > *:nth-child(8) { transition-delay: 0.7s; }
html.js .reveal-kids > *:nth-child(9) { transition-delay: 0.8s; }
html.js .reveal-kids > *:nth-child(10) { transition-delay: 0.9s; }
html.js .reveal-kids > *:nth-child(11) { transition-delay: 1s; }
html.js .reveal-kids > *:nth-child(12) { transition-delay: 1.1s; }
@media (prefers-reduced-motion: reduce) { html.js .reveal-kids > * { opacity: 1; transform: none; transition: none; transition-delay: 0s; } }
/* 段F47-P1a：header/footer 背景を preview（近黒＋blur）に一致（旧 var(--primary) はテーマ色で乖離＝D1/D2）。値は lib/siteChrome。 */
header { background: rgba(245,242,234,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(26,26,26,0.08); color: #1a1a1a; padding: 16px 20px; position: sticky; top: 0; z-index: 100; }
.header-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.site-name { font-weight: 700; font-size: 1.1rem; }
/* 段F103：ヘッダーのブランド表記は常にリンク（既定=トップ／任意URL）。色・装飾はブランド表記のまま継承（見た目不変）。 */
.site-brand-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-width: 0; }
.site-brand-link:hover { opacity: 0.85; }
/* 段F102：ヘッダーロゴ（usage="logo" がある時だけ注入＝byte 不変）。preview と同一の共通 headerLogoCss。 */
.site-name.has-logo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: min(60vw, 460px); color: #1a1a1a; }
.site-logo { height: 34px; width: auto; max-width: 220px; object-fit: contain; display: block; flex: 0 0 auto; }
.site-name.has-logo .site-tagline { font-weight: 400; opacity: 0.85; font-size: clamp(12px, 3vw, 15px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* 社名併記（logoWithName・opt-in）：34px ロゴと視覚的に揃える＝中央そろえ・折り返さず 375 では省略。 */
.site-name.has-logo .site-logo-name { font-weight: 700; font-size: clamp(14px, 3.4vw, 18px); line-height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 768px) { .site-logo { height: 26px; max-width: 130px; } .site-name.has-logo { max-width: 60vw; } .site-name.has-logo .site-logo-name { line-height: 26px; } }
nav a { color: rgba(26,26,26,0.82); text-decoration: none; margin-left: 24px; font-size: 0.9rem; display: inline-block; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
nav a:hover { color: var(--accent); } /* 段F47-P1a：D3＝preview の hover(theme.accent)に一致（旧 #fff） */
/* 段F68追補：ヘッダーCTA「無料相談」＝preview と同一要素・行動色(cta)で描画（装飾色 accent とは独立）。nav を右寄せし CTA と右側でグループ化（preview の brand左/nav+cta右 と一致＝preview==export）。 */
.header-inner nav { margin-left: auto; }
.header-cta { flex-shrink: 0; margin-left: 16px; background: #c3a550; color: #1A1A1A; padding: 10px clamp(14px, 4vw, 24px); border-radius: 4px; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; display: inline-block; }
.page-nav { max-width: 1100px; margin: 10px auto 0; display: flex; flex-wrap: wrap; gap: 18px; border-top: 1px solid rgba(26,26,26,0.16); padding-top: 10px; }
.page-nav a { color: rgba(26,26,26,0.82); text-decoration: none; margin-left: 0; font-size: 0.9rem; font-weight: 600; }
.page-nav a.active { color: #1a1a1a; border-bottom: 2px solid #1a1a1a; }
/* 段F57④：immersive hero の背景を preview(HeroImmersive の theme.heroStyle) に一致（旧 primary22/secondary44 の明グラデ乖離を解消）。暗地＝白文字。 */
.hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #1a1208 0%, #2d1f0a 40%, #1C3A36 100%); padding: clamp(56px, 8vw, 120px) clamp(20px, 5vw, 40px) clamp(48px, 7vw, 80px); text-align: center; }
/* 段G5：改行＝禁則＋語中割れ抑制（生成
は
で温存）。preview HERO_BREAK と同値。 */
/* 段F57④：暗地の hero＝白文字（preview HeroImmersive h1:#FFFFFF / body:rgba(255,255,255,.95) と一致）。 */
.hero h1 { font-size: clamp(1.6rem, 5vw, 5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: #fff; margin: 16px 0; line-break: strict; overflow-wrap: break-word; word-break: keep-all; text-wrap: balance; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
/* 段F59：本文は語中割れ(anywhere)をやめ 禁則(line-break:strict)＋text-wrap:pretty で「。」等の行頭禁則を守る（preview BODY_BREAK と同値）。 */
.hero .body { color: rgba(255,255,255,0.95); text-shadow: 0 1px 8px rgba(0,0,0,0.45); line-break: strict; overflow-wrap: normal; word-break: normal; text-wrap: pretty; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Ken Burns: 画像ヒーローのみ控えめにズーム（動画には当てない） */
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
img.hero-media { animation: kenburns 14s ease-in-out infinite alternate; will-change: transform; }
@media (prefers-reduced-motion: reduce) { img.hero-media { animation: none; } }
/* 段G5：左右薄グラデ→縦グラデ（全幅で効く暗幕）。preview のオーバーレイと同一値＝preview==export。 */
/* 段F40：暗幕を控えめに強化（0.35→0.45 / 0.6→0.65）。明るい画像でも文字が沈まないように。 */
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.65) 100%); z-index: 1; }
.hero-content { position: relative; z-index: 2; width: 100%; }
.hero-has-media h1, .hero-has-media .body, .hero-has-media .eyebrow { color: #fff; }
/* 段F56①：モバイルの hero を svh 基準で適正化（大きすぎる動画を1画面に収める）。高さは min(100svh,720px)・内容は縦中央・メディアは中央フレーミング。 */
@media (max-width: 768px) { .hero { min-height: min(100svh, 720px); display: flex; flex-direction: column; justify-content: center; } .hero-media { object-position: center; } }
/* 段G5/F40：メディア時の可読性強化（preview と同値）。段F40：body/eyebrow/stats にも text-shadow を付与。 */
.hero-has-media h1 { text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.hero-has-media .body { color: rgba(255,255,255,0.95); text-shadow: 0 1px 8px rgba(0,0,0,0.55); }
.hero-has-media .eyebrow { text-shadow: 0 1px 8px rgba(0,0,0,0.55); }
/* ヒーロー実績数字（データ駆動。stats があるときだけ出力）。
段F53：見た目は lib/heroStats の単一ソース＝preview の StatItem/コンテナと同値（実測乖離の解消）。
チップは常に暗（媒体有無で分岐しない＝preview と一致）。数字色は var(--accent)（preview=theme.accent）。 */
.hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; max-width: 980px; margin: 80px auto 0; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
.hero-stats .hero-stat { padding: clamp(14px, 3.4vw, 32px) clamp(16px, 4vw, 24px); text-align: center; background: rgba(0,0,0,0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hero-stat-val { font-size: clamp(0.95rem, 4.2vw, 3.5rem); font-weight: 800; color: var(--accent); font-family: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; letter-spacing: -0.01em; line-height: 1; margin-bottom: 8px; white-space: nowrap; }
/* 段F94：長い値（is-long）は段階縮小＋折返しで見切れ回避（短い値は is-long 非付与＝上の nowrap のまま＝従来不変）。 */
.hero-stat-val.is-long { font-size: clamp(0.8rem, 3vw, 1.5rem); line-height: 1.25; letter-spacing: normal; white-space: normal; overflow-wrap: anywhere; }
/* 段F94：ラベルも長文折返し許容（overflow-wrap:anywhere は既存 .stats-val と同じ流儀。短いラベルは box 寸法不変＝視覚不変）。 */
.hero-stat-label { font-size: 13px; color: rgba(255,255,255,0.6); letter-spacing: 0.05em; overflow-wrap: anywhere; }
/* 段F67②：モバイル FV 圧縮＝stats を上に詰める。段F70-b：チップ padding は chipPadding の clamp 単一値に移管（≤560 の padding 上書きは廃止＝preview inline と一致）。 */
@media (max-width: 560px) { .hero-stats { margin-top: 28px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); } }
.case-card { border-radius: 12px; overflow: hidden; background: var(--ground-card); border: 1px solid rgba(0,0,0,0.06); }
.case-media { aspect-ratio: 4 / 3; background: #eee; }
.case-card .case-media img, .case-card .case-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 段F47-P1b：caseStudy grid（既定）＝preview の濃地 spotlight＋ドットnav（静的 CSS :has()+radio）。D4/D5/D6。 */
.cs-grid-sec { padding: clamp(48px, 12vw, 125px) 0; background: #F5F2EA; color: #1a1a1a; overflow: hidden; scroll-margin-top: 80px; }
.cs-grid-inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 40px); }
.cs-grid-head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; }
.cs-grid-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: #C4A86C; margin-bottom: 12px; text-transform: uppercase; }
.cs-grid-h2 { font-family: 'Shippori Mincho', 'Noto Serif JP', serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; color: #1a1a1a; line-height: 1.3; white-space: pre-line; margin: 0; }
.cs-grid-dots { display: flex; gap: 8px; align-items: center; }
.cs-grid-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cs-grid-dot { width: 8px; height: 8px; border-radius: 4px; background: rgba(26,26,26,0.28); cursor: pointer; transition: width 0.3s, background 0.3s; display: inline-block; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.cs-grid-card { border-radius: 16px; overflow: hidden; opacity: 0.5; transform: scale(0.97); transition: opacity 0.4s, transform 0.4s; }
.cs-grid-media { height: 240px; position: relative; display: flex; align-items: flex-end; padding: 24px; overflow: hidden; }
.cs-grid-media img, .cs-grid-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-grid-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.5) 100%); }
.cs-grid-tag { position: absolute; top: 16px; left: 16px; z-index: 2; background: #C4A86C; color: #000; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 100px; }
.cs-grid-num { color: rgba(255,255,255,0.6); font-size: clamp(40px, 10vw, 80px); font-weight: 900; position: absolute; right: 16px; bottom: -10px; line-height: 1; z-index: 2; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.cs-grid-text { background: #FFFFFF; padding: 24px; }
.cs-grid-text h3 { font-size: 17px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; }
.cs-grid-meta { display: flex; gap: 16px; }
.cs-grid-meta span { font-size: 13px; color: #57534d; }
/* 段F74：説明・顧客の声（任意）。cs-grid-text は濃地(#1a1a1a)＝淡色＋2行 clamp（カード等高維持）。 */
.cs-grid-voice { margin-top: 10px; font-size: 13px; color: #4a4640; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 段F74②：実際のサイトへの小リンク（accent＝装飾色・行動色CTAと役割分離）。空URLは非表示。 */
.cs-grid-visit { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; color: #C4A86C; font-size: 13px; font-weight: 700; text-decoration: none; }
.cs-grid-visit:hover { text-decoration: underline; }
.case-text { padding: 16px 18px; }
/* 段F54：事例タグ地色は preview の theme.accent に一致（旧 var(--secondary) は暗色で乖離）。 */
.case-text .case-tag { display: inline-block; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; margin-bottom: 8px; }
.case-text h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.case-meta { display: flex; gap: 16px; font-size: 13px; opacity: 0.6; }
/* caseStudy variant="split": 1件ずつ全幅・左右交互（preview と同一数値） */
.cs-split-section { padding: 100px 0; background: var(--bg); scroll-margin-top: 80px; overflow: hidden; }
.cs-split-inner { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.cs-split-head { margin-bottom: 56px; }
.cs-split-head .eyebrow { color: var(--accent); margin-bottom: 12px; }
.cs-split-head h2 { color: var(--ground-text); margin-bottom: 0; }
.cs-split-row { display: flex; gap: 44px; align-items: center; margin-bottom: 72px; }
.cs-split-row:last-child { margin-bottom: 0; }
.cs-split-row.rev { flex-direction: row-reverse; }
.cs-split-col { flex: 1 1 50%; min-width: 0; }
.cs-split-media { position: relative; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; }
.cs-split-media.is-empty { background: linear-gradient(135deg, #C4A86C22 0%, #C4A86C0a 100%); }
.cs-split-media img, .cs-split-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-split-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(48px, 7vw, 88px); font-weight: 800; font-family: 'DM Sans', monospace; color: var(--accent); opacity: 0.3; }
.cs-split-num { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; color: var(--accent); font-family: 'DM Sans', monospace; margin-bottom: 12px; }
.cs-split-text .case-tag { display: inline-block; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 100px; margin-bottom: 12px; }
.cs-split-text h3 { font-size: 22px; font-weight: 700; color: var(--ground-text); line-height: 1.4; margin-bottom: 12px; }
.cs-split-text .case-meta { display: flex; gap: 20px; font-size: 14px; color: var(--ground-body); opacity: 1; }
/* 段F74：説明・顧客の声（任意）。split は面積があるので clamp なし・ground 連動色（濃地 luxury でも可読）。 */
.cs-split-voice { margin-top: 14px; font-size: 15px; line-height: 1.8; color: var(--ground-body); }
/* 段F74②：実際のサイトへの小リンク（accent＝装飾色・行動色CTAと役割分離）。空URLは非表示。 */
.cs-split-visit { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; color: var(--accent); font-size: 14px; font-weight: 700; text-decoration: none; }
.cs-split-visit:hover { text-decoration: underline; }
/* 段F55①：iOS で cs-split 画像が消える不具合。縦積み(column)時、flex 交差軸(width)が align-items:center で 0 に潰れ
aspect-ratio→高さ0 になるため、hero-split-media と同型に width:100% を明示（実機再現あり）。 */
@media (max-width: 768px) { .cs-split-row, .cs-split-row.rev { flex-direction: column; gap: 20px; margin-bottom: 56px; } .cs-split-media { width: 100%; } }
.section { padding: 100px 40px; }
/* 段Tier1-D(C)：汎用 .section 経由の dense セクション(problem/process/faq/contact/privacy)だけ上下 padding を密に上書き。
id 詳細度で .section(標準100) に勝つ。専用 *-sec は各クラスが sectionPadY を直読み＝ここは対象外。preview の #id>section 上書きと同判断。 */
#sec-problem{padding-top:85px;padding-bottom:85px}
#sec-process{padding-top:85px;padding-bottom:85px}
#sec-faq{padding-top:85px;padding-bottom:85px}
#sec-contact{padding-top:85px;padding-bottom:85px}
.section-alt { background: var(--ground-alt); }
/* 段F49①：汎用セクション(problem/solution 等)の items カード（preview GenericSection と同値）。 */
/* 段F56②：課題カード(gen-card)の造形強化＝lib/genCard 単一ソース（白カード＋影＋accent縦ライン＋番号）。preview と同一 CSS。 */
.gen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 36px; }
.gen-card { position: relative; background: var(--ground-card); border-radius: 14px; padding: 26px 24px 26px 28px; box-shadow: var(--ground-shadow-md, 0 6px 24px rgba(0,0,0,0.07)); border: 1px solid var(--ground-border); border-left: 3px solid #C4A86C; }
.gen-card-num { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: #C4A86C; font-family: 'DM Sans', monospace; margin-bottom: 10px; }
.gen-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--ground-text); margin-bottom: 8px; line-height: 1.4; }
.gen-card p { font-size: 14px; color: var(--ground-body); line-height: 1.8; margin: 0; }
.section-inner { max-width: 1200px; margin: 0 auto; }
/* 段F54：eyebrow は preview の theme.accent に一致（旧 var(--secondary) は暗色で金アクセントと乖離＝まだら）。 */
.eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 8px; }
/* 段F61④：Q&A型見出し（features/process/faq の任意 variant）。preview と同一の共通 questionHeadingCss。未使用時は無害。 */
.is-question { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 16px; border-radius: 100px; background: #C4A86C14; border: 1px solid #C4A86C33; color: #C4A86C; text-transform: none; }
.is-question::before { content: "Q."; font-weight: 900; font-size: 1.05em; letter-spacing: 0; }
/* 段F41：基底 h2 色を preview（各セクションの #1a1a1a 直書き）と一致させる。旧 var(--primary) は主色が明るい案件で明背景に沈むため。暗背景/固有色の h2（.cs-carousel-h2/.final-cta h2/.parts-h2/.cs-split-head h2/.offer-h2）は各クラスがより高い詳細度で上書き済み＝不変。hero h1(.hero h1) は対象外。 */
h2 { font-size: clamp(2rem, 3.4vw, 3.3rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; color: var(--ground-text); margin-bottom: 24px; }
/* 段F64②：全セクション見出し(h1/h2)の文節改行（word-break: auto-phrase）。preview と同一の共通 headingPhraseBreakCss。 */
h1, h2, h3 { word-break: keep-all; overflow-wrap: break-word; }
.body { color: var(--ground-body); margin-bottom: 32px; }
/* 段F54：主CTA は preview の hero ボタン（background:theme.accent / color:#000）に一致（旧 primary 地＋白文字は乖離）。 */
.btn-primary { display: inline-block; background: var(--accent); color: #000; padding: 14px 32px; border-radius: 6px; text-decoration: none; font-weight: 600; margin-top: 16px; transition: transform 0.2s, box-shadow 0.2s; }
/* F50-②/F54：hover は preview 同様「微小移動＋影」のみ（地色は変えない＝accent のまま）。 */
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px #C4A86C30; }
/* 段F46②：immersive hero の第2ボタン（preview HeroImmersive secondaryCta と同一の見た目・ナビ先頭へアンカースクロール）。 */
.btn-hero-secondary { display: inline-block; background: transparent; color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.3); padding: 16px 32px; border-radius: 4px; text-decoration: none; font-size: 16px; font-weight: 500; margin-top: 16px; margin-left: 12px; backdrop-filter: blur(8px); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 32px; }
.card { background: var(--ground-card); border: 1px solid #eee; border-radius: 12px; padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
/* F50-②：カード hover＝浮き＋影（preview の FeaturesSection カードと同一挙動＝preview==export）。 */
.card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px #C4A86C20; border-color: #C4A86C40; }
/* F50-②：prefers-reduced-motion では hover の移動を無効化（色/影の変化のみ）。 */
@media (prefers-reduced-motion: reduce) { .card, .btn-primary, .final-cta-btn { transition: none; } .card:hover, .btn-primary:hover, .final-cta-btn:hover { transform: none; } }
.card-icon { font-size: 2rem; margin-bottom: 12px; }
/* 段F54：カード番号/罫は preview の theme.accent に一致（旧 var(--secondary) は暗色で乖離）。 */
.card-num { font-size: 0.9rem; font-weight: 800; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 16px; }
.card-num-line { display: block; width: 32px; height: 2px; background: var(--accent); opacity: 0.5; margin-top: 8px; }
/* F50-④：カード見出し(h3)を階層トークンに統一（従来 preview 20px / export≈17px の乖離を解消）。 */
.card h3 { font-size: clamp(1.15rem, 1.6vw, 1.25rem); font-weight: 700; letter-spacing: -0.005em; line-height: 1.5; margin-bottom: 8px; color: var(--ground-text); }
/* 段F47-P1c：D7＝preview の styled アコーディオン（"Q./A."接頭・accent枠/影・回転+）に一致。開閉は native 。 */
.faq-item { background: var(--ground-card); border: 1px solid #eee; border-radius: 12px; margin-bottom: 8px; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; }
.faq-item[open] { border-color: #C4A86C40; box-shadow: 0 8px 32px #C4A86C15; }
.faq-item summary { list-style: none; cursor: pointer; padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { font-size: 16px; font-weight: 600; color: var(--ground-text); }
.faq-icon { color: #C4A86C; font-size: 20px; font-weight: 300; flex-shrink: 0; margin-left: 16px; transition: transform 0.3s; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-a { padding: 0 28px 24px; font-size: 15px; color: var(--ground-body); line-height: 1.8; border-top: 1px solid #C4A86C20; }
.faq-a p { padding-top: 16px; }
/* 流れ（process）: preview の ProcessSection と同じ番号付きステップ */
.process .process-head { text-align: center; margin-bottom: 64px; }
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.process-step { text-align: center; }
.process-num { width: 80px; height: 80px; border-radius: 50%; background: #C4A86C15; border: 2px solid #C4A86C30; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 28px; font-weight: 900; color: var(--accent); font-family: 'DM Sans', monospace; }
.process-step h3 { font-size: clamp(16px, 3.5vw, 18px); font-weight: 700; color: var(--ground-text); margin-bottom: 10px; }
.process-step p { font-size: 14px; color: var(--ground-body); line-height: 1.8; }
/* 最終CTA（finalCta）: preview の FinalCtaSection と同じダーク背景＋2ボタン＋注記 */
.final-cta { position: relative; overflow: hidden; padding: 120px 40px; background: linear-gradient(135deg, #1a1208 0%, #2d1f0a 40%, #1C3A36 100%); }
.final-cta-overlay { position: absolute; inset: 0; background-image: linear-gradient(#C4A86C06 1px, transparent 1px), linear-gradient(90deg, #C4A86C06 1px, transparent 1px); background-size: 60px 60px; }
.final-cta-inner { max-width: 800px; margin: 0 auto; text-align: center; position: relative; z-index: 10; }
.final-cta .eyebrow { color: var(--accent); margin-bottom: 16px; }
.final-cta h2 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; color: #fff; margin-bottom: 24px; }
.final-cta-body { font-size: 17px; color: rgba(255,255,255,0.7); line-height: 1.9; margin-bottom: 48px; white-space: pre-line; }
.final-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.final-cta-btn { display: inline-block; background: var(--accent); color: #000; padding: 20px 56px; border-radius: 4px; font-size: 18px; font-weight: 700; text-decoration: none; letter-spacing: 0.05em; box-shadow: 0 8px 40px #C4A86C50; transition: transform 0.2s, box-shadow 0.2s; }
/* F50-②：最終CTA hover＝微小移動＋影強調（preview の finalCta ボタンと両側一致）。 */
.final-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 48px #C4A86C70; }
.final-cta-btn-secondary { display: inline-block; background: transparent; color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.3); padding: 20px 40px; border-radius: 4px; font-size: 18px; }
.final-cta-note { margin-top: 32px; font-size: 13px; color: rgba(255,255,255,0.4); }
/* 段F61②：3ゾーンフッター（サイト名/説明・ナビ再掲・主CTA/連絡導線＋SNS）。preview と同一の共通 footerCss。地色 var(--ground-dark)。 */
.site-footer { background: #F5F2EA; color: rgba(26,26,26,0.72); padding: 56px clamp(20px, 5vw, 48px) 36px; }
.site-footer-inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1.1fr; gap: 40px; }
.footer-zone { min-width: 0; }
.footer-brand-name { font-family: 'Shippori Mincho', 'Noto Serif JP', serif; font-size: 1.2rem; font-weight: 800; color: #1a1a1a; margin: 0 0 12px; letter-spacing: 0.01em; }
.footer-desc { margin: 0; font-size: 13px; line-height: 1.85; color: rgba(26,26,26,0.66); white-space: pre-line; }
.footer-zone-title { font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #C4A86C; margin: 0 0 14px; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { color: rgba(26,26,26,0.72); text-decoration: none; font-size: 14px; font-weight: 600; transition: color .15s; cursor: pointer; width: fit-content; }
.footer-nav a:hover { color: #C4A86C; }
.footer-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer-actions .cta { padding: 12px 26px; font-size: 15px; }
.footer-contact { color: rgba(26,26,26,0.72); text-decoration: none; font-size: 14px; font-weight: 600; border-bottom: 1px solid #C4A86C66; padding-bottom: 2px; transition: color .15s, border-color .15s; }
.footer-contact:hover { color: #C4A86C; border-color: #C4A86C; }
.footer-social { display: flex; gap: 14px; margin-top: 4px; }
.footer-social a { color: rgba(26,26,26,0.78); display: inline-flex; transition: color .15s; }
.footer-social a:hover { color: #C4A86C; }
.footer-bottom { max-width: 1160px; margin: 36px auto 0; padding-top: 22px; border-top: 1px solid rgba(26,26,26,0.12); font-size: 12px; color: rgba(26,26,26,0.62); display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
.footer-copy { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-legal a { color: rgba(26,26,26,0.62); text-decoration: none; font-size: 12px; transition: color .15s; cursor: pointer; }
.footer-legal a:hover { color: #C4A86C; }
@media (max-width: 768px) { .site-footer-inner { grid-template-columns: 1fr; gap: 30px; } .site-footer { padding: 44px 20px 28px; } }
/* 段F62-A①：追従CTA（モバイル下部固定バー・≤768）。preview と同一の共通 stickyCtaCss。 */
/* 段F68追補：主追従ボタン(is-primary)は行動色(cta)＝装飾色 accent から独立（resolveSiteCta・未設定時 accent フォールバック）。 */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--ground-card); border-top: 1px solid var(--ground-border); box-shadow: 0 -6px 22px rgba(0,0,0,0.14); transform: translateY(0); transition: transform .28s cubic-bezier(.16,1,.3,1); }
@media (max-width: 768px) { .sticky-cta { display: flex; } }
.sticky-cta.is-hidden { transform: translateY(130%); }
.sticky-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; padding: 0 16px; border-radius: 12px; font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap; box-sizing: border-box; }
.sticky-cta-btn.is-primary { flex: 1 1 auto; background: #c3a550; color: #1A1A1A; box-shadow: 0 6px 18px #c3a55055; }
.sticky-cta-btn.is-line { flex: 0 0 auto; background: #06C755; color: #fff; }
.sticky-cta-btn.is-tel { flex: 0 0 auto; background: var(--ground-alt); color: var(--ground-text); border: 1px solid var(--ground-border); }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }
/* 段F62-A②③：contact の LINE/電話 併設ボタン行。preview と同一の共通 contactLeadCss。 */
.lead-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.lead-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 10px; font-size: 15px; font-weight: 800; text-decoration: none; box-sizing: border-box; }
.lead-btn.is-line { background: #06C755; color: #fff; }
.lead-btn.is-tel { background: var(--ground-alt); color: var(--ground-text); border: 1px solid var(--ground-border); }
/* 段contact-form S1：hearing-form variant（当該 variant が在る時だけ注入＝OFF/未設定は byte 不変）。preview==export の共通 contactFormCss。thanks.html も styles.css 経由で参照。段S3：ground を渡し暗地サイトは暗地トークン追従（ライトは byte 不変）。 */
/* 段contact-form：.aws-form スコープ（LP 既存CSSと非衝突・接頭辞 aws/fld/opt/input）。色はローカル変数の右辺のみテーマ写像。 */
.aws-form {
--fc-band: #F5F2EA;
--fc-ink: #16294A;
--fc-ink-soft: #2E4470;
--fc-accent: #C4A86C;
--fc-accent-dark: color-mix(in srgb, #C4A86C 78%, #000);
--fc-cta: #c3a550;
--fc-cta-dark: color-mix(in srgb, #c3a550 78%, #000);
--fc-paper: #ffffff;
--fc-field: color-mix(in srgb, #C4A86C 5%, #ffffff);
--fc-line: color-mix(in srgb, #C4A86C 16%, #ffffff);
--fc-muted: #5C6B85;
box-sizing: border-box;
padding: 56px 20px 72px;
background: var(--fc-band);
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
color: var(--fc-ink);
line-height: 1.7;
-webkit-text-size-adjust: 100%;
}
.aws-form *, .aws-form *::before, .aws-form *::after { box-sizing: border-box; }
.aws-form__inner { max-width: 720px; margin: 0 auto; }
/* 段contact-form S4：フォームの見出しは