:root {
  --primary: #2e2e2e;
  --secondary: #141414;
  /* preview の theme.accent と一致（デザインスタイル優先・無ければ accent/secondary） */
  --accent: #D4AF37;
  /* 段F57①：地色パレット。sectionPartsCss 等の背景/文字/カード/罫線がこれを参照（濃地スタイルで反転）。 */
  --ground-base: #121212; --ground-alt: #1A1A1A; --ground-dark: #0A0A0A; --ground-text: #F5EFE0; --ground-body: #C9C0AE; --ground-muted: #8A8271; --ground-card: #1A160E; --ground-border: #3A3016;
  --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; }
/* 段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: 'Cormorant Garamond', '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: 'Cormorant Garamond', '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(10,10,10,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.05); color: #fff; 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; }
.site-name { font-weight: 700; font-size: 1.1rem; }
nav a { color: rgba(255,255,255,0.85); 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） */
.page-nav { max-width: 1100px; margin: 10px auto 0; display: flex; flex-wrap: wrap; gap: 18px; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 10px; }
.page-nav a { color: rgba(255,255,255,0.85); text-decoration: none; margin-left: 0; font-size: 0.9rem; font-weight: 600; }
.page-nav a.active { color: #fff; border-bottom: 2px solid #fff; }
/* 段F57④：immersive hero の背景を preview(HeroImmersive の theme.heroStyle) に一致（旧 primary22/secondary44 の明グラデ乖離を解消）。暗地＝白文字。 */
.hero { position: relative; overflow: hidden; background: linear-gradient(135deg,#000000 0%,#1c1408 60%,#3D2E12 100%); padding: clamp(56px, 8vw, 120px) clamp(20px, 5vw, 40px) clamp(48px, 7vw, 80px); text-align: center; }
/* 段G5：改行＝禁則＋語中割れ抑制（生成 
 は <br> で温存）。preview HERO_BREAK と同値。 */
/* 段F57④：暗地の hero＝白文字（preview HeroImmersive h1:#FFFFFF / body:rgba(255,255,255,.95) と一致）。 */
.hero h1 { font-size: clamp(1.9rem, 5.2vw, 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: auto-phrase; 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(120px, 1fr)); gap: 1px; max-width: 720px; margin: 80px auto 0; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
.hero-stats .hero-stat { padding: 32px 24px; text-align: center; background: rgba(0,0,0,0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hero-stat-val { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; color: var(--accent); font-family: 'DM Sans', monospace; line-height: 1; margin-bottom: 8px; }
.hero-stat-label { font-size: 13px; color: rgba(255,255,255,0.6); letter-spacing: 0.05em; }
.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, 100px) 0; background: #0f0f0f; color: #fff; 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: #D4AF37; margin-bottom: 12px; text-transform: uppercase; }
.cs-grid-h2 { font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; color: #fff; 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(255,255,255,0.2); 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: #D4AF37; 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: #1a1a1a; padding: 24px; }
.cs-grid-text h3 { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.cs-grid-meta { display: flex; gap: 16px; }
.cs-grid-meta span { font-size: 13px; color: rgba(255,255,255,0.5); }
.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, #D4AF3722 0%, #D4AF370a 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; }
/* 段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; }
.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: 0 6px 24px rgba(0,0,0,0.07); border: 1px solid var(--ground-border); border-left: 3px solid #D4AF37; }
.gen-card-num { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: #D4AF37; 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; }
/* 段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; }
.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 #D4AF3730; }
/* 段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 #D4AF3720; border-color: #D4AF3740; }
/* 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 <details>。 */
.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: #D4AF3740; box-shadow: 0 8px 32px #D4AF3715; }
.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: #D4AF37; 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 #D4AF3720; }
.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: #D4AF3715; border: 2px solid #D4AF3730; 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,#000000 0%,#1c1408 60%,#3D2E12 100%); }
.final-cta-overlay { position: absolute; inset: 0; background-image: linear-gradient(#D4AF3706 1px, transparent 1px), linear-gradient(90deg, #D4AF3706 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 #D4AF3750; 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 #D4AF3770; }
.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); }
footer { background: #0a0a0a; color: rgba(255,255,255,0.7); padding: 32px; font-size: 0.85rem; }
.footer-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-name { font-weight: 700; font-size: 1.05rem; color: #fff; margin-bottom: 6px; }
.footer-desc { margin: 0; line-height: 1.6; }
.footer-right { text-align: right; }
.footer-social { display: flex; gap: 14px; justify-content: flex-end; margin-bottom: 10px; }
.footer-social a { color: rgba(255,255,255,0.85); display: inline-flex; }
.footer-social a:hover { color: #fff; }
.footer-copy { margin: 0; }
@media (max-width: 768px) {
  /* 段F55②：モバイルヘッダーの巨大化を抑制。社名を縮小・ナビを密度UPして1〜2行に収める（sticky 占有を圧縮）。 */
  header { padding: 12px 16px; }
  .site-name { font-size: 0.95rem; }
  .header-inner { flex-direction: column; gap: 8px; }
  nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; }
  /* 段F44④：タッチ端末(≤768)で実効タップ領域44px維持（縦padding 14px×2＋行高≒44）。横は詰めて密度UP。 */
  nav a { margin: 0; padding: 14px 7px; font-size: 0.82rem; max-width: 120px; }
  .page-nav a { padding: 14px 0; }
  .faq-item summary { padding: 18px 20px; } .faq-a { padding: 0 20px 18px; }
}
/* 段F44①：SP(≤560px)ティア。768 の下に重ねる（768ルールは不変）。全グリッド1列・左右パディング最小・scroll indicator 非表示。 */
@media (max-width: 560px) {
  .section { padding-left: 16px; padding-right: 16px; }
  .hero { padding-left: 16px; padding-right: 16px; }
  .grid-3, .process-grid, .hero-stats { grid-template-columns: 1fr; }
  .hero-scroll { display: none; }
}
/* hero 代替variant（split/centered/statement）。preview と同一の共通CSS（両側一致の単一の真実）。 */

.hero-alt { background: #FFFFFF; color: #1a1a1a; position: relative; overflow: hidden; }
.hero-alt .hero-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #D4AF37; margin-bottom: 16px; }
.hero-alt h1 { font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; font-weight: 800; line-height: 1.2; color: #1a1a1a; white-space: pre-line; margin: 0 0 20px; }
.hero-alt .hero-body { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.9; color: #555; white-space: pre-line; margin: 0 0 32px; }
.hero-alt .hero-cta { display: inline-block; background: #D4AF37; color: #fff; text-decoration: none; padding: 16px 40px; border-radius: 6px; font-size: 16px; font-weight: 700; letter-spacing: 0.03em; border: none; cursor: pointer; box-shadow: 0 8px 28px #D4AF3740; }
.hero-alt .hero-stats { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 40px; }
.hero-alt .hero-stat-val { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 800; color: #D4AF37; line-height: 1; }
.hero-alt .hero-stat-label { font-size: 13px; color: #777; margin-top: 4px; }
/* 段G16：背景画像（centered/statement で immersive 同等＝背景画像＋暗幕＋白文字）。画像が無い時は has-media を付けない＝上の白地値のまま（回帰ゼロ）。OVERLAY は immersive と同一リテラル＝両側一致。 */
.hero-alt-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* 段F40：暗幕を控えめに強化（0.35→0.45 / 0.6→0.65）＋body/eyebrow/stats に text-shadow（明るい画像でも可読）。 */
.hero-alt-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-alt.has-media h1 { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.hero-alt.has-media .hero-body { color: rgba(255,255,255,0.95); text-shadow: 0 1px 8px rgba(0,0,0,0.55); }
.hero-alt.has-media .hero-eyebrow { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.55); }
.hero-alt.has-media .hero-stat-val { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.55); }
.hero-alt.has-media .hero-stat-label { color: rgba(255,255,255,0.9); text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.hero-alt.has-media.hero-centered::before { display: none; } /* 画像時は薄方眼グリッドを消す（暗幕下で不要） */
/* split */
.hero-split .hero-split-inner { max-width: 1200px; margin: 0 auto; padding: 96px 40px; display: flex; gap: 56px; align-items: center; }
.hero-split-text { flex: 1 1 50%; min-width: 0; }
.hero-split-text h1 { font-size: clamp(2rem, 3.6vw, 3.4rem); }
.hero-split-media { flex: 1 1 50%; min-width: 0; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; position: relative; background: linear-gradient(135deg, #D4AF3722 0%, #D4AF370a 100%); }
.hero-split-media img, .hero-split-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) { .hero-split .hero-split-inner { flex-direction: column; gap: 32px; padding: 64px 24px; } .hero-split-media { width: 100%; } }
/* centered */
.hero-centered { text-align: center; }
.hero-centered::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#D4AF3706 1px, transparent 1px), linear-gradient(90deg, #D4AF3706 1px, transparent 1px); background-size: 64px 64px; }
.hero-centered .hero-centered-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 120px 40px; }
.hero-centered h1 { font-size: clamp(2.2rem, 4.6vw, 4rem); }
.hero-centered .hero-body { margin-left: auto; margin-right: auto; max-width: 600px; }
.hero-centered .hero-stats { justify-content: center; }
@media (max-width: 768px) { .hero-centered .hero-centered-inner { padding: 84px 24px; } }
/* statement */
.hero-statement .hero-statement-inner { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; padding: 120px 40px; }
.hero-statement .hero-accent-bar { width: 64px; height: 4px; background: #D4AF37; border-radius: 4px; margin-bottom: 28px; }
.hero-statement h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); letter-spacing: -0.01em; }
@media (max-width: 768px) { .hero-statement .hero-statement-inner { padding: 84px 24px; } }
/* 段F44①⑧：SP(≤560px)ティア。hero-alt 各variant の左右パディング最小化＋stats を縦積み（768ルールは不変・下に重ねる）。 */
@media (max-width: 560px) {
  .hero-split .hero-split-inner { padding-left: 16px; padding-right: 16px; }
  .hero-centered .hero-centered-inner { padding-left: 16px; padding-right: 16px; }
  .hero-statement .hero-statement-inner { padding-left: 16px; padding-right: 16px; }
  .hero-alt .hero-stats { flex-direction: column; gap: 16px; }
}

/* testimonials（お客様の声）/ company（会社情報）。preview と同一の共通CSS。 */

/* PR表記（広告表示）バナー：ページ冒頭の控えめな帯（accent の薄い背景・小さめ・全幅）。視認できるが目立ち過ぎない。 */
.pr-banner { width: 100%; background: #D4AF3716; border-bottom: 1px solid #D4AF3740; color: var(--ground-body); font-size: 12px; line-height: 1.6; letter-spacing: 0.02em; text-align: center; padding: 9px 16px; }
.pr-banner b { color: #D4AF37; font-weight: 700; }
.parts-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #D4AF37; margin: 0 0 10px; }
.parts-h2 { font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; color: var(--ground-text); line-height: 1.3; margin: 0; white-space: pre-line; }
/* testimonials（お客様の声）: カードグリッド */
.ts-sec { padding: 96px 40px; background: var(--ground-alt); }
.ts-inner { max-width: 1100px; margin: 0 auto; }
.ts-head { text-align: center; margin-bottom: 36px; }
.ts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.ts-card { background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 14px; padding: 28px; }
.ts-rating { color: #D4AF37; font-size: 13px; letter-spacing: 2px; margin-bottom: 10px; }
.ts-quote { font-size: 15px; line-height: 1.9; color: var(--ground-body); margin: 0 0 16px; white-space: pre-line; }
.ts-name { font-size: 14px; font-weight: 700; color: var(--ground-text); }
.ts-role { font-size: 12px; color: var(--ground-muted); margin-top: 2px; }
@media (max-width: 768px) { .ts-sec { padding: 72px 20px; } }
/* team（社員紹介）: 顔写真カードグリッド。写真は usage="member-N"、無ければ頭文字プレースホルダ（偽の顔は出さない） */
.team-sec { padding: 96px 40px; background: var(--ground-base); }
.team-inner { max-width: 1100px; margin: 0 auto; }
.team-head { text-align: center; margin-bottom: 36px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.team-card { background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 14px; padding: 28px 24px; text-align: center; }
.team-avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; background: #D4AF371a; display: flex; align-items: center; justify-content: center; }
.team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-avatar-ph { font-size: 36px; font-weight: 800; color: #D4AF37; font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; line-height: 1; }
.team-name { font-size: 16px; font-weight: 700; color: var(--ground-text); }
.team-role { font-size: 12px; color: #D4AF37; font-weight: 600; margin-top: 4px; }
.team-comment { font-size: 13px; line-height: 1.8; color: var(--ground-body); margin: 12px 0 0; white-space: pre-line; }
@media (max-width: 768px) { .team-sec { padding: 72px 20px; } }
/* company（会社情報）: 表形式（ラベル/値） */
.co-sec { padding: 96px 40px; background: var(--ground-base); }
.co-inner { max-width: 820px; margin: 0 auto; }
.co-head { text-align: center; margin-bottom: 30px; }
.co-table { border-top: 1px solid var(--ground-border); }
.co-row { display: flex; gap: 24px; padding: 18px 8px; border-bottom: 1px solid var(--ground-border); }
.co-label { flex: 0 0 150px; font-size: 14px; font-weight: 700; color: #D4AF37; }
.co-value { flex: 1; min-width: 0; font-size: 15px; color: var(--ground-body); line-height: 1.7; white-space: pre-line; }
@media (max-width: 768px) { .co-sec { padding: 72px 20px; } .co-row { flex-direction: column; gap: 4px; } .co-label { flex-basis: auto; } }
/* pricing（料金）: カード型 */
.pr-sec { padding: 96px 40px; background: var(--ground-alt); }
.pr-inner { max-width: 1100px; margin: 0 auto; }
.pr-head { text-align: center; margin-bottom: 36px; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
/* 段F45③：カードを等高（グリッド行内で高さ揃え）。 */
.pr-card { background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 14px; padding: 32px 28px; display: flex; flex-direction: column; height: 100%; }
.pr-name { font-size: 16px; font-weight: 700; color: var(--ground-text); margin: 0 0 12px; }
/* 段F45③：金額と付記を分離。金額(1行目)は大きく nowrap／付記(2行目以降)は小さくサブ行＝価格行の崩れ解消。 */
.pr-price { line-height: 1.2; margin: 0 0 12px; }
.pr-price-amount { display: block; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; color: #D4AF37; overflow-wrap: anywhere; word-break: auto-phrase; }
.pr-price-amount.is-long { font-size: clamp(1.05rem, 2.2vw, 1.4rem); line-height: 1.35; }
.pr-price-note { display: block; font-size: 12px; font-weight: 600; color: var(--ground-muted); margin-top: 4px; white-space: pre-line; }
.pr-desc { font-size: 14px; color: var(--ground-body); line-height: 1.8; margin: 0; white-space: pre-line; }
.pr-notes { max-width: 1100px; margin: 28px auto 0; font-size: 13px; color: var(--ground-muted); line-height: 1.8; white-space: pre-line; text-align: center; }
@media (max-width: 768px) { .pr-sec { padding: 72px 20px; } }
/* stats（数字で見る）: 大数字インフォグラフィック。value を大きく accent で・label を小さく。アイコンなし。 */
.stats-sec { padding: 96px 40px; background: #D4AF370d; }
.stats-inner { max-width: 1100px; margin: 0 auto; }
.stats-head { text-align: center; margin-bottom: 36px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.stats-item { text-align: center; }
.stats-val { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 900; color: #D4AF37; line-height: 1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.stats-val .stats-unit { font-size: 0.42em; font-weight: 800; margin-left: 2px; }
/* 段F39：長い/レンジ/非数字始まりの stats 値は縮小＋折り返しで崩れ回避（短い数値は is-long 非付与＝従来のまま）。 */
.stats-val.is-long { font-size: clamp(1.05rem, 3vw, 1.7rem); line-height: 1.35; letter-spacing: normal; }
.stats-val.is-long .stats-unit { font-size: 0.88em; margin-left: 3px; }
/* 段F39：オプトイン本文（section.showBody=true 時に見出し直下へ）。色はセクションのテキスト色を継承（明/暗背景に追従）。 */
.section-body { font-size: 16px; line-height: 1.9; margin: 14px auto 0; max-width: 760px; white-space: pre-line; opacity: 0.82; }
.stats-label { font-size: 14px; color: var(--ground-body); font-weight: 700; margin-top: 12px; }
@media (max-width: 768px) { .stats-sec { padding: 72px 20px; } }
/* offer（限定オファー）: 希少性の視覚強調。通常価格は打ち消し・限定価格を大きく・枠/期限はバッジ（accent連動）。 */
.offer-sec { padding: 96px 40px; background: #D4AF370d; }
.offer-inner { max-width: 760px; margin: 0 auto; }
.offer-card { background: var(--ground-card); border: 2px solid #D4AF37; border-radius: 16px; padding: 40px 32px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.offer-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 16px; }
.offer-badge { display: inline-block; background: #D4AF37; color: #fff; font-size: 13px; font-weight: 800; padding: 6px 16px; border-radius: 100px; letter-spacing: 0.03em; }
.offer-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #D4AF37; margin: 0 0 10px; }
.offer-h2 { font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; color: var(--ground-text); line-height: 1.3; margin: 0 0 24px; white-space: pre-line; }
.offer-name { font-size: 16px; font-weight: 700; color: var(--ground-text); margin: 0 0 12px; }
.offer-prices { display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.offer-normal { font-size: 18px; color: var(--ground-muted); text-decoration: line-through; }
.offer-price { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 900; color: #D4AF37; line-height: 1; }
.offer-unit { font-size: 15px; color: var(--ground-body); font-weight: 700; }
.offer-items { list-style: none; padding: 0; margin: 24px auto 0; max-width: 480px; text-align: left; }
.offer-items li { font-size: 15px; color: var(--ground-body); line-height: 1.9; padding-left: 26px; position: relative; }
.offer-items li::before { content: "✓"; position: absolute; left: 0; color: #D4AF37; font-weight: 900; }
.offer-cta { display: inline-block; margin-top: 28px; background: #D4AF37; color: #fff; font-size: 16px; font-weight: 700; padding: 16px 40px; border-radius: 8px; text-decoration: none; }
@media (max-width: 768px) { .offer-sec { padding: 72px 20px; } .offer-card { padding: 32px 22px; } }
/* 段F36：価格アンカリング priceAnchor（single_direct で反復）。割引率(赤)→通常価格(打消)→割引価格→クーポン併用価格(最大強調・赤)→badges→CTA→但し書き。 */
.pa-sec { padding: 72px 40px; background: #D4AF370a; }
.pa-inner { max-width: 620px; margin: 0 auto; }
.pa-card { background: var(--ground-card); border: 2px solid #D4AF37; border-radius: 16px; padding: 32px 28px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.pa-discount { display: inline-block; background: #DC2626; color: #fff; font-size: 18px; font-weight: 900; padding: 6px 20px; border-radius: 100px; letter-spacing: 0.03em; margin-bottom: 14px; }
.pa-normal { font-size: 18px; color: var(--ground-muted); text-decoration: line-through; margin-bottom: 2px; }
.pa-offer { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; color: var(--ground-body); line-height: 1.1; }
.pa-coupon { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pa-coupon-label { display: inline-block; background: #DC2626; color: #fff; font-size: 12px; font-weight: 800; padding: 3px 12px; border-radius: 6px; }
.pa-coupon-price { font-size: clamp(2.4rem, 6vw, 3.8rem); font-weight: 900; color: #DC2626; line-height: 1; }
.pa-unit { font-size: 15px; color: var(--ground-body); font-weight: 700; margin-left: 4px; }
.pa-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.pa-badge { display: inline-block; background: #D4AF3714; color: #D4AF37; font-size: 12px; font-weight: 800; padding: 5px 14px; border-radius: 100px; }
.pa-cta { display: inline-block; margin-top: 24px; background: #D4AF37; color: #fff; font-size: 16px; font-weight: 700; padding: 16px 44px; border-radius: 8px; text-decoration: none; }
.pa-terms { font-size: 11px; color: var(--ground-muted); margin-top: 14px; line-height: 1.6; }
@media (max-width: 768px) { .pa-sec { padding: 56px 18px; } .pa-card { padding: 26px 18px; } }
/* 段F36：期限カウントダウン 追従バー（fixed/daily=時間・quota=静的）。画面下部に固定。 */
/* 段F44⑥：固定バーは iOS ホームインジケータ分だけ下に余白（safe-area）。本文がバーに隠れない body 側 padding-bottom は countdown 有効時のみ export で付与。 */
.cd-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; background: #DC2626; color: #fff; padding: 12px 20px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); font-weight: 800; box-shadow: 0 -4px 20px rgba(0,0,0,0.15); }
.cd-label { font-size: 14px; }
.cd-time { font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.cd-quota { font-size: 16px; }
@media (max-width: 768px) { .cd-bar { padding: 10px 14px; gap: 10px; } .cd-time { font-size: 17px; } }
/* 段G3：AI診断ブロック（.diag-*）。デザイントークン参照・F44基準（タップ44px/≤560で1カラム/はみ出しゼロ）を最初から満たす。preview/export 共有。 */
.diag-sec { padding: 96px 40px; background: #D4AF370d; }
.diag-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.diag-flow { margin-top: 32px; }
.diag-q { font-size: clamp(1.05rem, 2.4vw, 1.35rem); font-weight: 800; color: var(--ground-text); margin: 0 0 20px; line-height: 1.5; font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
.diag-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 560px; margin: 0 auto; }
.diag-opt { display: block; width: 100%; min-height: 56px; padding: 15px 18px; background: var(--ground-card); border: 2px solid #D4AF3733; border-radius: 12px; font-size: 15px; font-weight: 700; color: var(--ground-text); font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.diag-opt:hover { border-color: #D4AF37; background: #D4AF370a; }
.diag-opt:active { transform: scale(0.98); }
.diag-analyzing { padding: 32px 0; }
.diag-spinner { width: 48px; height: 48px; margin: 0 auto 20px; border: 4px solid #D4AF3722; border-top-color: #D4AF37; border-radius: 50%; animation: diag-spin 0.8s linear infinite; }
@keyframes diag-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .diag-spinner { animation: none; } }
.diag-aline { font-size: 15px; color: var(--ground-body); min-height: 1.5em; font-family: 'DM Sans', monospace; letter-spacing: 0.02em; }
.diag-result-card { background: var(--ground-card); border: 2px solid #D4AF37; border-radius: 16px; padding: 32px 28px; box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.diag-result-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #D4AF37; margin: 0 0 12px; }
.diag-plan-name { font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 900; color: var(--ground-text); line-height: 1.2; }
.diag-plan-price { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 800; color: #D4AF37; margin-top: 8px; }
.diag-plan-desc { font-size: 15px; color: var(--ground-body); line-height: 1.9; margin: 14px 0 0; white-space: pre-line; }
.diag-reason { font-size: 14px; color: var(--ground-body); line-height: 1.8; margin: 16px 0 0; padding: 14px 16px; background: #D4AF370d; border-radius: 10px; text-align: left; white-space: pre-line; }
.diag-cta { display: inline-block; margin-top: 24px; background: #D4AF37; color: #fff; font-size: 16px; font-weight: 700; padding: 15px 44px; min-height: 44px; box-sizing: border-box; border-radius: 8px; text-decoration: none; }
.diag-restart { display: inline-block; margin-top: 16px; background: none; border: none; color: #D4AF37; font-size: 13px; font-weight: 700; cursor: pointer; padding: 10px; text-decoration: underline; }
@media (max-width: 768px) { .diag-sec { padding: 72px 20px; } }
@media (max-width: 560px) { .diag-sec { padding: 56px 16px; } .diag-opts { grid-template-columns: 1fr; } .diag-result-card { padding: 24px 18px; } }
/* access（アクセス/地図）: 地図iframe＋住所＋アクセス方法 */
.ac-sec { padding: 96px 40px; background: var(--ground-base); }
.ac-inner { max-width: 900px; margin: 0 auto; }
.ac-head { text-align: center; margin-bottom: 30px; }
.ac-map { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid var(--ground-border); background: #f3f3f3; }
.ac-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ac-address { margin-top: 20px; font-size: 16px; font-weight: 700; color: var(--ground-text); }
.ac-directions { margin-top: 8px; font-size: 14px; color: var(--ground-body); line-height: 1.8; white-space: pre-line; }
@media (max-width: 768px) { .ac-sec { padding: 72px 20px; } .ac-map { aspect-ratio: 4 / 3; } }
/* hours（営業時間）: 表組み（曜日｜時間／備考） */
.hours-sec { padding: 96px 40px; background: var(--ground-base); }
.hours-inner { max-width: 760px; margin: 0 auto; }
.hours-head { text-align: center; margin-bottom: 30px; }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table tr { border-bottom: 1px solid var(--ground-border); }
.hours-table tr:first-child { border-top: 1px solid var(--ground-border); }
.hours-day { padding: 16px 12px; font-size: 15px; font-weight: 700; color: var(--ground-text); white-space: nowrap; }
.hours-time { padding: 16px 12px; font-size: 15px; color: var(--ground-body); text-align: right; }
.hours-note { padding: 0 12px 14px; font-size: 13px; color: #D4AF37; text-align: right; }
@media (max-width: 768px) { .hours-sec { padding: 72px 20px; } }
/* menu（メニュー表）: カテゴリ＋品目行（名前 … 価格／説明） */
.menu-sec { padding: 96px 40px; background: var(--ground-alt); }
.menu-inner { max-width: 820px; margin: 0 auto; }
.menu-head { text-align: center; margin-bottom: 36px; }
.menu-cat { margin-bottom: 36px; }
.menu-cat-title { font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; font-size: 18px; font-weight: 800; color: #D4AF37; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid #D4AF37; }
.menu-item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--ground-border); }
.menu-item-name { font-size: 16px; font-weight: 700; color: var(--ground-text); }
.menu-item-desc { font-size: 13px; color: var(--ground-muted); margin: 4px 0 0; line-height: 1.7; }
.menu-item-price { font-size: 16px; font-weight: 700; color: #D4AF37; white-space: nowrap; }
@media (max-width: 768px) { .menu-sec { padding: 72px 20px; } }
/* gallery（写真集）: 画像グリッド（caption 任意） */
.gallery-sec { padding: 96px 40px; background: var(--ground-base); }
.gallery-inner { max-width: 1100px; margin: 0 auto; }
.gallery-head { text-align: center; margin-bottom: 36px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.gallery-item { position: relative; border-radius: 12px; overflow: hidden; background: #f3f3f3; border: 1px solid var(--ground-border); }
.gallery-item img { display: block; width: 100%; height: 220px; object-fit: cover; }
.gallery-ph { display: flex; align-items: center; justify-content: center; height: 220px; color: #D4AF37; font-size: 13px; font-weight: 700; background: #D4AF3710; }
.gallery-cap { padding: 10px 12px; font-size: 13px; color: var(--ground-body); line-height: 1.6; }
@media (max-width: 768px) { .gallery-sec { padding: 72px 20px; } .gallery-item img, .gallery-ph { height: 180px; } }
/* 段F44①：SP(≤560px)ティア。parts 系グリッドを1列化＋左右パディング16px（768ルールは不変・下に重ねる）。compare(.cmp-*)は @container 対応済みのため対象外。 */
@media (max-width: 560px) {
  .ts-grid, .team-grid, .pr-grid, .stats-grid, .gallery-grid { grid-template-columns: 1fr; }
  .ts-sec, .team-sec, .co-sec, .pr-sec, .stats-sec, .offer-sec, .pa-sec, .ac-sec, .hours-sec, .menu-sec, .gallery-sec { padding-left: 16px; padding-right: 16px; }
}
/* comparison（比較ランキング）: 縦カード */
.cmp-sec { padding: 96px 40px; background: var(--ground-alt); }
/* 段G14：ヒーロー直下の各社ロゴ帯（左方向 無限スクロール・CSS-only・JS不要・listing 限定）。set×2 で translateX(-50%) シームレス。 */
.cmp-logobar { overflow: hidden; background: var(--ground-alt); padding: 14px 0; border-top: 1px solid var(--ground-border); border-bottom: 1px solid var(--ground-border); }
.cmp-logobar-track { display: flex; width: max-content; align-items: center; animation: cmp-logobar-scroll 20s linear infinite; will-change: transform; }
/* 段F-logospeed：流速の X側選択。base(20s=normal)は不変・fast/slow は data-speed で animation-duration を上書き（CSS-only）。 */
.cmp-logobar[data-speed="fast"] .cmp-logobar-track { animation-duration: 12s; }
.cmp-logobar[data-speed="slow"] .cmp-logobar-track { animation-duration: 32s; }
.cmp-logobar:hover .cmp-logobar-track { animation-play-state: paused; }
/* 段G14b：間隔は item の margin-right で取る（flex gap だと set×2 の境界が半端になり -50% がズレる＝変な位置から動く。cs-marquee と同方式）。 */
.cmp-logobar-item { flex: 0 0 auto; height: 64px; width: 140px; margin-right: 40px; display: flex; align-items: center; justify-content: center; border-radius: 6px; overflow: hidden; }
.cmp-logobar-item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cmp-logobar-ph { font-size: 26px; font-weight: 800; }
@keyframes cmp-logobar-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cmp-logobar-track { animation: none; overflow-x: auto; width: 100%; flex-wrap: wrap; gap: 16px; padding: 0 16px; } .cmp-logobar-item { margin-right: 0; } }
/* 段F1-4：compare 全体のクエリ容器。@container がコンテナ幅で効く＝preview の PC/Tab/SP トグル（コンテナ幅絞り）でも実機でも一致。 */
.cmp-inner { max-width: 880px; margin: 0 auto; container-type: inline-size; container-name: cmp; }
.cmp-head { text-align: center; margin-bottom: 36px; }
.cmp-list { display: flex; flex-direction: column; gap: 20px; }
.cmp-card { position: relative; background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 16px; padding: 28px 28px 24px; box-shadow: 0 2px 14px rgba(0,0,0,0.04); }
/* 順位強調：1位はカードを強調（枠＝accent・影強め）。2/3位はバッジ色の濃淡で段階（金銀銅っぽく・派手にしない）。 */
.cmp-card-top { border: 2px solid #D4AF37; box-shadow: 0 6px 24px #D4AF3726; }
.cmp-rank { position: absolute; top: -14px; left: 24px; min-width: 52px; height: 32px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; background: #D4AF37; color: #fff; font-weight: 800; font-size: 14px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.cmp-rank-1 { background: #D4AF37; height: 36px; min-width: 60px; font-size: 16px; }
.cmp-rank-2 { background: #D4AF37CC; }
.cmp-rank-3 { background: #D4AF3799; }
/* 星評価（rating→★）：薄い空行＋濃い塗り行を重ね、塗りを width(%) でクリップ＝半星も正確。静的・accent 連動。 */
.cmp-stars { display: inline-flex; align-items: center; vertical-align: middle; }
.cmp-stars-row { position: relative; display: inline-block; line-height: 0; white-space: nowrap; }
/* 空（base 層）＝中立の淡色。塗り（fill 層）＝SVG の金グラデ（fill="url(#cmpGoldStar)"）＝色固定・パレット非連動。 */
.cmp-stars-base { color: #E8DFD0; display: inline-block; }
.cmp-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; display: inline-block; }
.cmp-stars-fill svg, .cmp-stars-base svg { display: inline-block; }
.cmp-stars-num { margin-left: 6px; font-size: 13px; font-weight: 800; color: #C8881C; }
.cmp-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.cmp-logo { width: 120px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--ground-alt); border: 1px solid var(--ground-border); border-radius: 8px; overflow: hidden; }
.cmp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* 段G9：ロゴ未設定（生成前/失敗）のフォールバックを「ブランド色バッジ」化＝社名頭文字を accent 淡塗り＋accent 文字で
   意図的な見た目に（実画像 .cmp-detail-logo>img は別経路＝object-fit:contain のまま非干渉）。色は accent 変数＝業種非依存。 */
.cmp-logo-ph { font-weight: 800; color: #D4AF37; font-size: 22px; line-height: 1; background: #D4AF3714; }
.cmp-detail-logo.cmp-logo-ph { font-size: 36px; letter-spacing: 0.02em; border-color: #D4AF3740; }
.cmp-name { font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; font-size: 20px; font-weight: 800; color: var(--ground-text); line-height: 1.3; margin: 0; }
.cmp-metrics { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 6px; }
.cmp-metric { font-size: 14px; color: var(--ground-body); }
.cmp-metric b { color: #D4AF37; font-size: 17px; font-weight: 800; }
.cmp-point { font-size: 15px; color: var(--ground-body); line-height: 1.8; margin: 0 0 14px; font-weight: 600; }
/* 段G10：各軸の「ラベル＋値」スペック。長い軸名(nowrap)が横並びで値の幅を奪い縦細切れになっていたため、
   ラベル上／値下の縦積みにして値にセル全幅を与える（細切れ解消）。列は少し広げて2列を維持。preview/export 共有CSS。 */
.cmp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 18px; margin: 0 0 18px; padding: 0; list-style: none; }
.cmp-feature { font-size: 13px; color: var(--ground-body); display: flex; flex-direction: column; gap: 2px; border-bottom: 1px dashed var(--ground-border); padding: 6px 0; min-width: 0; }
.cmp-feature .cmp-flabel { color: #D4AF37; font-weight: 700; }
.cmp-feature > span:last-child { overflow-wrap: break-word; }
/* 段G10b-1：カード CTA を横幅フルボタン化（inline-flex→flex・width:100%・中央寄せ）。文字幅依存をやめ最下部の太い導線に。 */
.cmp-cta { display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; background: #D4AF37; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 10px; }
.cmp-cta:hover { opacity: 0.92; }
@media (max-width: 768px) { .cmp-sec { padding: 72px 20px; } .cmp-top { flex-direction: column; align-items: flex-start; } .cmp-logo { width: 100px; height: 48px; } }
/* comparison table（比較表＝各社×観点マトリクス） */
.cmp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--ground-card); }
.cmp-table th, .cmp-table td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--ground-border); font-size: 14px; vertical-align: middle; color: var(--ground-text); font-weight: 600; line-break: strict; overflow-wrap: break-word; word-break: keep-all; }
/* F-pricing-br：料金セルは自動折返しを止め、ユーザー入力の改行(<br>)位置だけで改行＝表記の乱れ解消。長値は .cmp-table-wrap の横スクロールで吸収。 */
.cmp-table td[data-tab="pricing"] { white-space: nowrap; }
.cmp-table thead th { background: #D4AF37; color: #fff; font-weight: 700; }
.cmp-table tbody tr:nth-child(even) { background: var(--ground-alt); }
.cmp-table .cmp-t-rank { font-weight: 800; color: #D4AF37; white-space: nowrap; }
.cmp-table .cmp-t-name { font-weight: 700; color: var(--ground-text); white-space: nowrap; }
.cmp-table .cmp-t-logo { width: 88px; height: 36px; object-fit: contain; display: block; margin: 0 auto; }
.cmp-table .cmp-t-cta { display: inline-block; background: #D4AF37; color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 8px; white-space: nowrap; }
.cmp-table .cmp-t-empty { color: var(--ground-muted); }
/* listing 併載表のカード枠（detailカードと同じ枠に収めて“浮き”を解消・listing 限定で付与＝seo table 単独は不変）。 */
.cmp-table-card { position: relative; background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 16px; padding: 24px; box-shadow: 0 2px 14px rgba(0,0,0,0.04); margin-bottom: 28px; }
.cmp-table-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: #D4AF37; margin: 0 0 14px; }
/* 段G10a：比較表タブ（列切替・CSS-only・radio＋:checked＋兄弟結合子~）。radio/タブ/テーブルは .cmp-tab-block 直下の兄弟。preview/export 共有CSS。 */
.cmp-ctab-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cmp-ctab-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--ground-border); margin-bottom: 14px; }
.cmp-ctab-tab { padding: 10px 20px; font-size: 14px; font-weight: 600; color: var(--ground-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; user-select: none; white-space: nowrap; }
/* アクティブタブ（同 index の radio:checked）。 */
.cmp-ctab-radio:nth-of-type(1):checked ~ .cmp-ctab-tabs .cmp-ctab-tab:nth-of-type(1),
.cmp-ctab-radio:nth-of-type(2):checked ~ .cmp-ctab-tabs .cmp-ctab-tab:nth-of-type(2),
.cmp-ctab-radio:nth-of-type(3):checked ~ .cmp-ctab-tabs .cmp-ctab-tab:nth-of-type(3) { color: #D4AF37; border-bottom-color: #D4AF37; }
/* 非アクティブタブの列を非表示（th/td 個別 display:none＝列が畳まれる）。1=総合/2=料金/3=口コミ。 */
.cmp-ctab-radio:nth-of-type(1):checked ~ .cmp-table-wrap [data-tab="pricing"],
.cmp-ctab-radio:nth-of-type(1):checked ~ .cmp-table-wrap [data-tab="review"] { display: none; }
.cmp-ctab-radio:nth-of-type(2):checked ~ .cmp-table-wrap [data-tab="score"],
.cmp-ctab-radio:nth-of-type(2):checked ~ .cmp-table-wrap [data-tab="review"] { display: none; }
.cmp-ctab-radio:nth-of-type(3):checked ~ .cmp-table-wrap [data-tab="score"],
.cmp-ctab-radio:nth-of-type(3):checked ~ .cmp-table-wrap [data-tab="pricing"] { display: none; }
.cmp-ctab-radio:focus-visible ~ .cmp-ctab-tabs .cmp-ctab-tab { outline: 2px solid #D4AF37; outline-offset: 2px; }
.cmp-t-max { font-size: 11px; font-weight: 700; color: var(--ground-muted); margin-left: 1px; }
.cmp-t-revcount { font-size: 11px; color: var(--ground-muted); margin-top: 2px; }
/* 段G15：口コミ単一列の各行＝デモグラ小ラベル＋本文。列分割をやめ歯抜けを解消（preview/export 共有CSS）。 */
.cmp-t-revline { margin: 0 0 6px; }
.cmp-t-revline:last-child { margin-bottom: 0; }
.cmp-t-revattr { display: inline-block; font-size: 10px; font-weight: 700; color: #D4AF37; background: #D4AF3714; border-radius: 4px; padding: 1px 6px; margin-right: 6px; }
@container cmp (max-width: 640px) { .cmp-ctab-tabs { overflow-x: auto; white-space: nowrap; } }
/* 段2a：各社レーダー（6軸・listing 限定で出力）。中央寄せ・レスポンシブ。preview/export 共有CSS。 */
.cmp-radar { text-align: center; margin: 14px auto 4px; max-width: 340px; }
.cmp-radar-svg { width: 100%; max-width: 100%; height: auto; }
/* 段G10b-2：カード上部3カラム＝左 キャッチ＋POINT / 中 大レーダー / 右 絞り込み条件。SCORE は3colの外（下段全幅）。
   罫線で区切る理想系（左1fr・中320px・右160px）。border/textSub は中立グレー literal＝業種非依存。preview/export 共有CSS。 */
/* 段G11：カード上部2カラム＝左 キャッチ＋POINT / 右 大レーダー。右の絞り込み条件は廃止し radar を主役に拡大。 */
.cmp-card-2col { display: grid; grid-template-columns: 1fr minmax(360px, 520px); gap: 0; border-top: 1px solid var(--ground-border); border-bottom: 1px solid var(--ground-border); margin: 14px 0; }
.cmp-c3-left { padding: 16px 16px; border-right: 1px solid var(--ground-border); min-width: 0; }
.cmp-c3-mid { padding: 14px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
/* 段G11/G17：2カラム中はレーダーを主役に拡大（G17: 440→520）。.cmp-radar 本体は SVG が幅にフィット。 */
/* F-radar-width：c3-mid は align-items:center で縮小フィット＝width 無しだと中身(SVG width=200)に縮む。
   width:100% で列幅まで広げる（max-width:520 でキャップ）＝ラベル可読化。基底 .cmp-radar/SVG 属性は不変。 */
.cmp-c3-mid .cmp-radar { max-width: 520px; width: 100%; margin: 0 auto; }
/* 段G10b-2：総合スコア（ヘッダー右端）。 */
.cmp-overall { text-align: right; flex-shrink: 0; }
.cmp-overall-num { font-size: 26px; font-weight: 800; color: #D4AF37; }
.cmp-overall-unit { font-size: 12px; color: var(--ground-muted); }
.cmp-overall-label { font-size: 11px; color: var(--ground-muted); margin-top: 2px; }
/* 段2b：各社バナー画像（comp-banner-N・listing 限定）。preview/export 共有CSS。 */
.cmp-banner { margin: -32px -32px 18px; border-radius: 16px 16px 0 0; overflow: hidden; }
.cmp-banner img { width: 100%; height: auto; display: block; max-height: 160px; object-fit: cover; }
/* 段2e/F1-4：scores 各軸の数値列（「N/5＋軸名」・listing 限定）。RAM パターン（auto-fit＋minmax(min(100%,..)))で
   狭幅は自動1列・広幅は2列＝@media非依存でコンテナ幅に追従（長い軸名でも縦リズムを保つ）。 */
.cmp-scorenum { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px 16px; margin: 4px 0 16px; }
.cmp-score-head { grid-column: 1 / -1; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #D4AF37; margin: 0 0 2px; }
.cmp-scorenum-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cmp-scorenum-val { font-size: 20px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: var(--ground-text); font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
.cmp-scorenum-max { font-size: 12px; font-weight: 700; color: var(--ground-muted); margin-left: 1px; }
.cmp-scorenum-label { font-size: 13px; color: var(--ground-body); }
/* 段2b/G1：points 強み箇条（listing 限定）＋POINT見出し（SCORE/VOICE と同体裁・ブロックで余白を持つ）。 */
.cmp-points-block { margin: 14px 0; }
.cmp-point-head { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #D4AF37; margin: 0 0 8px; }
.cmp-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cmp-point-item { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.7; color: var(--ground-body); }
.cmp-point-item::before { content: "✓"; position: absolute; left: 0; top: 0; color: #D4AF37; font-weight: 800; }
/* 段3d：診断UI＝条件で絞り込む（CSS-only・OR マルチ選択・:has()＋:nth-of-type・JS非依存・listing 限定）。preview/export 共有CSS。 */
/* 段F15：一流比較サイト水準の整列トグル（CSS-only・HTML/DOM順不変＝:has()/nth-of-type/~ の絞り込み機構は下部で温存）。 */
.cmp-filter { margin: 40px auto 12px; max-width: 860px; text-align: left; }
.cmp-filter-head { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800; color: var(--ground-text); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ground-border); font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
.cmp-filter-cond-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* 条件＝Grid 整列のトグルセル（左寄せ・□チェックボックス付き）。 */
.cmp-filter-conds { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 20px; }
.cmp-filter-cond { position: relative; display: flex; align-items: center; gap: 10px; text-align: left; font-size: 14px; font-weight: 700; color: var(--ground-body); background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 10px; padding: 12px 14px; cursor: pointer; user-select: none; transition: border-color .15s, background .15s, box-shadow .15s; }
.cmp-filter-cond:hover { border-color: #D4AF37; box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
/* □チェックボックス（未選択）。選択時は下部の active ルールで ✓ 化＋塗り。 */
.cmp-filter-cond::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; border: 2px solid var(--ground-border); border-radius: 5px; background: var(--ground-card); box-sizing: border-box; font-size: 13px; font-weight: 900; line-height: 15px; text-align: center; color: transparent; }
/* 残った社チップも Grid 整列。 */
.cmp-filter-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cmp-filter-item { display: block; background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 10px; padding: 10px 14px; font-weight: 700; color: var(--ground-body); box-shadow: 0 1px 6px rgba(0,0,0,0.03); text-align: center; }
/* いずれかの条件が選択されたら一旦全隠し（:has 非対応環境では無効＝全表示のまま安全劣化）。 */
.cmp-filter:has(.cmp-filter-cond-input:checked) .cmp-filter-item { display: none; }
/* チェックした条件 n に該当する社（.cmp-fhas-{n-1}）を高詳細度で再表示（OR）。最大10条件。 */
.cmp-filter-cond-input:nth-of-type(1):checked ~ .cmp-filter-results .cmp-filter-item.cmp-fhas-0,
.cmp-filter-cond-input:nth-of-type(2):checked ~ .cmp-filter-results .cmp-filter-item.cmp-fhas-1,
.cmp-filter-cond-input:nth-of-type(3):checked ~ .cmp-filter-results .cmp-filter-item.cmp-fhas-2,
.cmp-filter-cond-input:nth-of-type(4):checked ~ .cmp-filter-results .cmp-filter-item.cmp-fhas-3,
.cmp-filter-cond-input:nth-of-type(5):checked ~ .cmp-filter-results .cmp-filter-item.cmp-fhas-4,
.cmp-filter-cond-input:nth-of-type(6):checked ~ .cmp-filter-results .cmp-filter-item.cmp-fhas-5,
.cmp-filter-cond-input:nth-of-type(7):checked ~ .cmp-filter-results .cmp-filter-item.cmp-fhas-6,
.cmp-filter-cond-input:nth-of-type(8):checked ~ .cmp-filter-results .cmp-filter-item.cmp-fhas-7,
.cmp-filter-cond-input:nth-of-type(9):checked ~ .cmp-filter-results .cmp-filter-item.cmp-fhas-8,
.cmp-filter-cond-input:nth-of-type(10):checked ~ .cmp-filter-results .cmp-filter-item.cmp-fhas-9 { display: block; }
/* チェックした条件チップをアクティブ配色に。 */
.cmp-filter-cond-input:nth-of-type(1):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(1),
.cmp-filter-cond-input:nth-of-type(2):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(2),
.cmp-filter-cond-input:nth-of-type(3):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(3),
.cmp-filter-cond-input:nth-of-type(4):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(4),
.cmp-filter-cond-input:nth-of-type(5):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(5),
.cmp-filter-cond-input:nth-of-type(6):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(6),
.cmp-filter-cond-input:nth-of-type(7):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(7),
.cmp-filter-cond-input:nth-of-type(8):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(8),
.cmp-filter-cond-input:nth-of-type(9):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(9),
.cmp-filter-cond-input:nth-of-type(10):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(10) { background: #D4AF37; color: #fff; border-color: #D4AF37; }
/* 段F15：選択された条件の □→✓ 化＋白ボックス（選択状態を一目で・既存の nth-of-type 機構を流用）。 */
.cmp-filter-cond-input:nth-of-type(1):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(1)::before,
.cmp-filter-cond-input:nth-of-type(2):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(2)::before,
.cmp-filter-cond-input:nth-of-type(3):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(3)::before,
.cmp-filter-cond-input:nth-of-type(4):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(4)::before,
.cmp-filter-cond-input:nth-of-type(5):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(5)::before,
.cmp-filter-cond-input:nth-of-type(6):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(6)::before,
.cmp-filter-cond-input:nth-of-type(7):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(7)::before,
.cmp-filter-cond-input:nth-of-type(8):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(8)::before,
.cmp-filter-cond-input:nth-of-type(9):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(9)::before,
.cmp-filter-cond-input:nth-of-type(10):checked ~ .cmp-filter-conds .cmp-filter-cond:nth-of-type(10)::before { content: "✓"; background: var(--ground-card); border-color: #fff; color: #D4AF37; }
/* 段F16：2次元カテゴリ絞り込み表（CSS-only・1D-OR・:has(#id) で DOM入れ子でも動作＝別名前空間・段F11/F15 と非干渉）。preview/export 共有。 */
.cmp-catf { margin: 40px auto 12px; max-width: 860px; text-align: left; }
.cmp-catf-head { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800; color: var(--ground-text); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ground-border); font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
.cmp-cat-table { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.cmp-cat-row { display: grid; grid-template-columns: minmax(90px, 140px) 1fr; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--ground-border); }
.cmp-cat-label { font-weight: 800; color: var(--ground-text); font-size: 13px; padding-top: 4px; }
.cmp-cat-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.cmp-catf-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cmp-catf-cond { position: relative; display: flex; align-items: center; gap: 8px; text-align: left; font-size: 13px; font-weight: 700; color: var(--ground-body); background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 8px; padding: 9px 12px; cursor: pointer; user-select: none; transition: border-color .15s, background .15s, box-shadow .15s; }
.cmp-catf-cond:hover { border-color: #D4AF37; box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
.cmp-catf-cond::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; border: 2px solid var(--ground-border); border-radius: 4px; background: var(--ground-card); box-sizing: border-box; font-size: 12px; font-weight: 900; line-height: 13px; text-align: center; color: transparent; }
.cmp-catf-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cmp-catf-item { display: block; background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 10px; padding: 10px 14px; font-weight: 700; color: var(--ground-body); box-shadow: 0 1px 6px rgba(0,0,0,0.03); text-align: center; }
/* いずれか選択で全隠し → 選択された選択肢 id に該当する社(.cmp-cathas-{id})だけ :has(#id) で再表示（OR・入れ子でも動作）。 */
.cmp-catf:has(.cmp-catf-input:checked) .cmp-catf-item { display: none; }
.cmp-catf:has(#cmp-catf-c0:checked) .cmp-catf-item.cmp-cathas-0,
.cmp-catf:has(#cmp-catf-c1:checked) .cmp-catf-item.cmp-cathas-1,
.cmp-catf:has(#cmp-catf-c2:checked) .cmp-catf-item.cmp-cathas-2,
.cmp-catf:has(#cmp-catf-c3:checked) .cmp-catf-item.cmp-cathas-3,
.cmp-catf:has(#cmp-catf-c4:checked) .cmp-catf-item.cmp-cathas-4,
.cmp-catf:has(#cmp-catf-c5:checked) .cmp-catf-item.cmp-cathas-5,
.cmp-catf:has(#cmp-catf-c6:checked) .cmp-catf-item.cmp-cathas-6,
.cmp-catf:has(#cmp-catf-c7:checked) .cmp-catf-item.cmp-cathas-7,
.cmp-catf:has(#cmp-catf-c8:checked) .cmp-catf-item.cmp-cathas-8,
.cmp-catf:has(#cmp-catf-c9:checked) .cmp-catf-item.cmp-cathas-9,
.cmp-catf:has(#cmp-catf-c10:checked) .cmp-catf-item.cmp-cathas-10,
.cmp-catf:has(#cmp-catf-c11:checked) .cmp-catf-item.cmp-cathas-11,
.cmp-catf:has(#cmp-catf-c12:checked) .cmp-catf-item.cmp-cathas-12,
.cmp-catf:has(#cmp-catf-c13:checked) .cmp-catf-item.cmp-cathas-13,
.cmp-catf:has(#cmp-catf-c14:checked) .cmp-catf-item.cmp-cathas-14,
.cmp-catf:has(#cmp-catf-c15:checked) .cmp-catf-item.cmp-cathas-15 { display: block; }
/* 選択トグルのアクティブ表示（□→✓・アクセント塗り。label 内包 input を :has で参照＝入れ子でも一発）。 */
.cmp-catf-cond:has(.cmp-catf-input:checked) { background: #D4AF37; color: #fff; border-color: #D4AF37; }
.cmp-catf-cond:has(.cmp-catf-input:checked)::before { content: "✓"; background: var(--ground-card); border-color: #fff; color: #D4AF37; }
/* 段F17c：統合フィルタ .cmp-fp（scores＋attributes を1パネル・多次元AND×OR＝CMP_FILTER_JS 制御・html.js 限定表示）。F15 整列トグル意匠を流用。preview/export 共有CSS。 */
.cmp-fp { margin: 40px auto 12px; max-width: 860px; text-align: left; }
.cmp-fp-head { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800; color: var(--ground-text); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ground-border); font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
/* アクティブ条件チップ（JS が生成＝× で個別解除）。未生成（空）は畳む。 */
.cmp-fp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cmp-fp-chips:empty { display: none; }
.cmp-fp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #fff; background: #D4AF37; border: none; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.cmp-fp-chip:hover { opacity: .9; }
/* 条件行＝カテゴリ/軸ラベル＋トグル群（Grid 整列・F16 の 2カラム行を流用）。 */
.cmp-fp-body { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
/* 段F21：カテゴリ行の区切り・余白を整理（gap/padding を広げメリハリ・最終行は境界線なし）。 */
.cmp-fp-row { display: grid; grid-template-columns: minmax(96px, 150px) 1fr; gap: 16px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--ground-border); }
.cmp-fp-row:last-child { border-bottom: none; }
.cmp-fp-label { font-weight: 800; color: var(--ground-text); font-size: 13px; padding-top: 6px; }
/* 段F21：選択肢を内容幅チップ化（grid 固定幅→flex-wrap＝間延び・空白セル解消）。 */
.cmp-fp-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-fp-cond-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* 段F21：長ラベルの自然折り返し（全文可読優先・ellipsis 不使用）＋親はみ出し防止。border/padding/radius/hover/checked は維持。 */
.cmp-fp-cond { position: relative; display: inline-flex; align-items: center; gap: 8px; text-align: left; line-height: 1.35; word-break: normal; overflow-wrap: anywhere; max-width: 100%; font-size: 13px; font-weight: 700; color: var(--ground-body); background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 8px; padding: 9px 12px; cursor: pointer; user-select: none; transition: border-color .15s, background .15s, box-shadow .15s; }
.cmp-fp-cond:hover { border-color: #D4AF37; box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
.cmp-fp-cond::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; border: 2px solid var(--ground-border); border-radius: 4px; background: var(--ground-card); box-sizing: border-box; font-size: 12px; font-weight: 900; line-height: 13px; text-align: center; color: transparent; }
/* 選択トグルのアクティブ表示（□→✓・アクセント塗り・:has で label 内包 input を参照＝html.js 前提＝モダンブラウザ）。 */
.cmp-fp-cond:has(.cmp-fp-cond-input:checked) { background: #D4AF37; color: #fff; border-color: #D4AF37; }
.cmp-fp-cond:has(.cmp-fp-cond-input:checked)::before { content: "✓"; background: var(--ground-card); border-color: #fff; color: #D4AF37; }
/* 件数＋すべて解除バー（JS が count/empty を制御）。 */
.cmp-fp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 20px; }
.cmp-fp-count { font-size: 13px; font-weight: 700; color: var(--ground-body); }
.cmp-fp-clear { font-size: 13px; font-weight: 700; color: #D4AF37; background: none; border: none; cursor: pointer; padding: 0; }
.cmp-fp-clear:hover { text-decoration: underline; }
/* 残った社カード（JS が該当外を display:none）。 */
.cmp-fp-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
/* 段F21：結果カードはリンク化済(F20)＝クリック可能を hover で示唆（下線は消す）。 */
.cmp-fp-item { display: block; background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 10px; padding: 10px 14px; font-weight: 700; color: var(--ground-body); text-decoration: none; box-shadow: 0 1px 6px rgba(0,0,0,0.03); text-align: center; transition: border-color .15s, box-shadow .15s; }
.cmp-fp-item:hover { border-color: #D4AF37; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.cmp-fp-name { display: block; }
/* 0件時のみ JS が hidden を外す（見た目のみ定義・[hidden] を著者側で再明示＝UA より優先されても隠す）。 */
.cmp-fp-empty { margin-top: 10px; padding: 14px; text-align: center; font-weight: 700; color: var(--ground-muted); background: var(--ground-alt); border: 1px dashed var(--ground-border); border-radius: 10px; }
.cmp-fp-empty[hidden] { display: none; }
/* 段F21：小画面はカテゴリ行を縦積み（ラベル上・選択肢下）＝狭幅の窮屈さ解消。gate(display) には触れない。 */
@media (max-width: 520px) {
  .cmp-fp-row { grid-template-columns: 1fr; gap: 8px; }
  .cmp-fp-label { padding-top: 0; }
}
/* 段F17c：no-JS gate（進行的強化）。既定は隠し → JS無効(html:not(.js))＝従来CSS-only(1D-OR)の .cmp-filter/.cmp-catf を表示（no-JS フォールバック温存）、JS有効(html.js)＝多次元AND×OR の .cmp-fp を表示。
   .cmp-fp は .cmp-filter/.cmp-catf の上位集合（buildFacets＝category∪score）＝どちらかが出る時は必ず出るので、JS有効時は CSS-only を隠して .cmp-fp に一本化しても機能欠落なし。既存 :has/nth-of-type 機構は不変・gate 追加のみ。 */
.cmp-filter, .cmp-catf, .cmp-fp { display: none; }
html:not(.js) .cmp-filter, html:not(.js) .cmp-catf { display: block; }
html.js .cmp-fp { display: block; }
/* 段3c：タイプ別おすすめ（区分タブ→推し社・CSS-onlyタブ＝JS非依存・listing 限定）。preview/export 共有CSS。 */
.cmp-recs { margin: 36px auto 8px; max-width: 760px; }
.cmp-recs-head { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 800; color: var(--ground-text); text-align: center; margin: 0 0 18px; font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
.cmp-recs-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cmp-recs-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 16px; }
.cmp-recs-tab { font-size: 13px; font-weight: 700; color: var(--ground-body); background: #f3f3f1; border: 1px solid var(--ground-border); border-radius: 999px; padding: 8px 18px; cursor: pointer; user-select: none; }
.cmp-recs-panel { display: none; }
.cmp-recs-card { background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 16px; padding: 24px; box-shadow: 0 2px 14px rgba(0,0,0,0.04); text-align: center; }
.cmp-recs-name { font-size: 18px; font-weight: 800; color: var(--ground-text); margin: 0 0 8px; font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
.cmp-recs-body { font-size: 14px; line-height: 1.8; color: var(--ground-body); margin: 0 0 16px; white-space: pre-line; }
.cmp-recs-cta { display: inline-block; background: #D4AF37; color: #fff; text-decoration: none; font-weight: 800; font-size: 14px; padding: 11px 28px; border-radius: 999px; }
/* CSS-onlyタブ：radio n がchecked → パネル n を表示・タブ n をアクティブ（最大6区分）。 */
.cmp-recs-radio:nth-of-type(1):checked ~ .cmp-recs-panels .cmp-recs-panel:nth-of-type(1),
.cmp-recs-radio:nth-of-type(2):checked ~ .cmp-recs-panels .cmp-recs-panel:nth-of-type(2),
.cmp-recs-radio:nth-of-type(3):checked ~ .cmp-recs-panels .cmp-recs-panel:nth-of-type(3),
.cmp-recs-radio:nth-of-type(4):checked ~ .cmp-recs-panels .cmp-recs-panel:nth-of-type(4),
.cmp-recs-radio:nth-of-type(5):checked ~ .cmp-recs-panels .cmp-recs-panel:nth-of-type(5),
.cmp-recs-radio:nth-of-type(6):checked ~ .cmp-recs-panels .cmp-recs-panel:nth-of-type(6) { display: block; }
.cmp-recs-radio:nth-of-type(1):checked ~ .cmp-recs-tabs .cmp-recs-tab:nth-of-type(1),
.cmp-recs-radio:nth-of-type(2):checked ~ .cmp-recs-tabs .cmp-recs-tab:nth-of-type(2),
.cmp-recs-radio:nth-of-type(3):checked ~ .cmp-recs-tabs .cmp-recs-tab:nth-of-type(3),
.cmp-recs-radio:nth-of-type(4):checked ~ .cmp-recs-tabs .cmp-recs-tab:nth-of-type(4),
.cmp-recs-radio:nth-of-type(5):checked ~ .cmp-recs-tabs .cmp-recs-tab:nth-of-type(5),
.cmp-recs-radio:nth-of-type(6):checked ~ .cmp-recs-tabs .cmp-recs-tab:nth-of-type(6) { background: #D4AF37; color: #fff; border-color: #D4AF37; }
.cmp-recs-radio:focus-visible ~ .cmp-recs-tabs .cmp-recs-tab { outline: 2px solid #D4AF37; outline-offset: 2px; }
/* 段3b：プラン例セクション（料金主役カード横並び・listing 限定）。preview/export 共有CSS。中身は全データ駆動。 */
.cmp-plans { margin: 36px auto 8px; max-width: 1000px; }
.cmp-plans-head { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 800; color: var(--ground-text); text-align: center; margin: 0 0 20px; font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
.cmp-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.cmp-plan-card { background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 16px; padding: 24px; box-shadow: 0 2px 14px rgba(0,0,0,0.04); display: flex; flex-direction: column; }
.cmp-plan-name { font-size: 15px; font-weight: 700; color: #D4AF37; margin: 0 0 10px; }
.cmp-plan-price { margin: 0 0 12px; color: var(--ground-text); display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.cmp-plan-lead { font-size: 13px; font-weight: 700; color: var(--ground-body); }
.cmp-plan-num { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; line-height: 1; letter-spacing: -0.02em; font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
.cmp-plan-unit { font-size: 13px; font-weight: 700; color: var(--ground-body); }
.cmp-plan-body { font-size: 13px; line-height: 1.8; color: var(--ground-body); margin: 0 0 16px; white-space: pre-line; flex: 1; }
.cmp-plan-cta { display: inline-block; text-align: center; background: #D4AF37; color: #fff; text-decoration: none; font-weight: 800; font-size: 14px; padding: 11px 18px; border-radius: 999px; margin-top: auto; }
.cmp-plans-note { font-size: 12px; color: var(--ground-muted); text-align: center; margin: 18px 0 0; line-height: 1.7; }
/* 段3a：POINT教育（選び方3STEP＋複数登録REASON・listing 限定・比較セクション内）。preview/export 共有CSS。中身は全データ駆動・番号は固定枠。 */
.cmp-edu { margin: 36px auto 8px; max-width: 1000px; }
.cmp-edu-head { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 800; color: var(--ground-text); text-align: center; margin: 0 0 20px; font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
.cmp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 8px; }
.cmp-step { position: relative; background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 16px; padding: 24px; box-shadow: 0 2px 14px rgba(0,0,0,0.04); }
.cmp-step-no { display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: 0.08em; color: #fff; background: #D4AF37; border-radius: 999px; padding: 4px 12px; margin-bottom: 12px; font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
.cmp-step-title { font-size: 16px; font-weight: 800; color: var(--ground-text); margin: 0 0 8px; font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
.cmp-step-body { font-size: 13.5px; line-height: 1.8; color: var(--ground-body); margin: 0; white-space: pre-line; }
.cmp-reasons { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.cmp-reason { display: flex; align-items: flex-start; gap: 14px; background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 14px; padding: 18px 20px; box-shadow: 0 2px 14px rgba(0,0,0,0.04); }
.cmp-reason-no { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 15px; font-weight: 900; color: #D4AF37; background: var(--ground-alt); border: 1px solid var(--ground-border); border-radius: 999px; font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
.cmp-reason-title { font-size: 15px; font-weight: 800; color: var(--ground-text); margin: 2px 0 4px; font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
.cmp-reason-body { font-size: 13.5px; line-height: 1.8; color: var(--ground-body); margin: 0; white-space: pre-line; }
/* 段2d：各社料金スペック表（pricing・listing 限定）。preview/export 共有CSS。 */
.cmp-pricing { display: flex; flex-direction: column; gap: 0; margin: 4px 0 14px; border: 1px solid var(--ground-border); border-radius: 10px; overflow: hidden; }
.cmp-pricing-row { display: flex; align-items: center; font-size: 13px; border-bottom: 1px solid var(--ground-border); }
.cmp-pricing-row:last-child { border-bottom: none; }
.cmp-pricing-label { flex: 0 0 38%; padding: 9px 12px; background: var(--ground-alt); color: var(--ground-body); font-weight: 700; }
.cmp-pricing-value { flex: 1; padding: 9px 12px; color: var(--ground-body); }
/* 段G3：各社サンプル項目カード（具体例・listing 限定・grid auto-fit でモバイル縦積み）。preview/export 共有CSS。 */
.cmp-samples { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 8px 0 16px; }
.cmp-sample-card { display: flex; flex-direction: column; background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 12px; padding: 16px; box-shadow: 0 1px 6px rgba(0,0,0,0.03); }
.cmp-sample-title { font-size: 14px; font-weight: 800; color: var(--ground-text); margin: 0 0 10px; font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }
.cmp-sample-fields { display: flex; flex-direction: column; gap: 0; flex: 1; }
.cmp-sample-row { display: flex; align-items: baseline; gap: 10px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f3f3f1; }
.cmp-sample-row:last-child { border-bottom: none; }
.cmp-sample-label { flex: 0 0 34%; color: #D4AF37; font-weight: 700; }
.cmp-sample-value { flex: 1; color: var(--ground-body); }
.cmp-sample-cta { display: inline-block; text-align: center; margin-top: 12px; background: #D4AF37; color: #fff; text-decoration: none; font-weight: 800; font-size: 13px; padding: 9px 16px; border-radius: 999px; }
/* 段2e：各社の属性チップ（attributes を横並び丸タグに・属性スペック表の置換・listing 限定）。preview/export 共有CSS。 */
.cmp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; }
.cmp-chip { display: inline-block; font-size: 12px; font-weight: 700; color: var(--ground-body); background: #f3f3f1; border: 1px solid var(--ground-border); border-radius: 999px; padding: 5px 12px; line-height: 1.4; }
/* 段G2：カテゴリ別タグ群（複数タグ）。カテゴリ名＋タグ chips を1行（flex-wrap）に。単一タグは従来フラット chip。F1-4 @container 配下で折返し。 */
.cmp-attr-group { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0; }
.cmp-attr-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--ground-muted); }
.cmp-attr-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* 段2c：各社 VOICE（口コミ reviews・listing 限定で出力）。preview/export 共有CSS。 */
.cmp-voice { margin: 16px 0 4px; }
.cmp-voice-head { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #D4AF37; margin: 0 0 10px; }
.cmp-voice-item { background: var(--ground-alt); border: 1px solid var(--ground-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.cmp-voice-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.cmp-voice-attr { font-size: 12px; font-weight: 700; color: var(--ground-body); background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 999px; padding: 2px 10px; }
.cmp-voice-rating .cmp-stars-row { display: inline-flex; position: relative; }
.cmp-voice-rating { display: inline-flex; color: #E0902B; }
.cmp-voice-body { font-size: 13px; line-height: 1.8; color: var(--ground-body); margin: 0; white-space: pre-line; }
/* comparison detail（各社詳細・大カード） */
.cmp-detail-list { display: flex; flex-direction: column; gap: 28px; }
/* 段F20：scroll-margin-top＝結果カード(.cmp-fp-item)アンカー遷移時に sticky ヘッダー(export:993/preview:2952)へ潜り込まない着地余白。 */
.cmp-detail-card { background: var(--ground-card); border: 1px solid var(--ground-border); border-radius: 16px; padding: 32px; box-shadow: 0 2px 14px rgba(0,0,0,0.04); scroll-margin-top: 80px; }
/* 段G10b-1：右端に総合スコアを差すスペースを確保（DOM 追加は G10b-2／本段は space-between のみ）。 */
.cmp-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.cmp-detail-logo { width: 200px; height: 96px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--ground-alt); border: 1px solid var(--ground-border); border-radius: 12px; overflow: hidden; }
.cmp-detail-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cmp-detail-name { font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; font-size: 24px; font-weight: 800; color: var(--ground-text); margin: 0; }
.cmp-detail-rank { display: inline-block; background: #D4AF37; color: #fff; font-weight: 800; font-size: 13px; padding: 3px 12px; border-radius: 14px; margin-bottom: 8px; }
.cmp-detail-metrics { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; }
.cmp-detail-metrics span { font-size: 15px; color: var(--ground-body); }
.cmp-detail-metrics b { color: #D4AF37; font-size: 18px; font-weight: 800; }
/* 段G9：キャッチコピー（it.point）を「ブランド帯」化＝大きめ・太字・濃色＋accent 左ボーダーで見出し感（detail 限定）。色は accent 変数＝業種非依存。 */
.cmp-detail-point { font-size: 19px; color: var(--ground-text); line-height: 1.7; font-weight: 700; letter-spacing: 0.02em; margin: 0 0 18px; border-left: 4px solid #D4AF37; padding-left: 12px; }
.cmp-detail-features { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 0; }
.cmp-detail-feature { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ground-border); font-size: 15px; color: var(--ground-body); }
.cmp-detail-feature .cmp-flabel { color: #D4AF37; font-weight: 700; min-width: 120px; }
@media (max-width: 768px) { .cmp-detail-card { padding: 24px 20px; } .cmp-detail-logo { width: 150px; height: 72px; } .cmp-detail-feature .cmp-flabel { min-width: 90px; } }
/* 段F1-4：コンテナ幅で効くレスポンシブ（@container・@media非依存＝preview トグルと実機で一致）。既存 @media はビューポート狭幅の保険として温存。 */
/* タブレット相当（コンテナ ≤760px）：詰まり防止の微調整。 */
@container cmp (max-width: 760px) {
  .cmp-detail-card { padding: clamp(20px, 4cqi, 32px); }
  .cmp-detail-name { font-size: clamp(20px, 4cqi, 24px); }
  /* 比較表が溢れる帯域では右端フェードで「続き（横スクロール）」を示唆（pointer-events なし＝操作を妨げない）。 */
  .cmp-table-card::after { content: ""; position: absolute; top: 16px; right: 1px; bottom: 16px; width: 26px; background: linear-gradient(to left, #fff, rgba(255,255,255,0)); border-radius: 0 15px 15px 0; pointer-events: none; }
}
/* モバイル相当（コンテナ ≤560px）：縦積み・ロゴ縮小・余白圧縮で崩れ防止。SCORE列は RAM パターンで自動1列。 */
@container cmp (max-width: 560px) {
  .cmp-top { flex-direction: column; align-items: flex-start; }
  .cmp-logo { width: 100px; height: 48px; }
  .cmp-detail-card { padding: 22px 18px; }
  .cmp-detail-head { gap: 12px; }
  .cmp-detail-logo { width: 140px; height: 66px; }
  .cmp-detail-name { font-size: 20px; }
  .cmp-detail-point { font-size: 17px; line-height: 1.7; }
  .cmp-detail-feature { gap: 10px; font-size: 14px; }
  .cmp-detail-feature .cmp-flabel { min-width: 84px; }
  /* 段G10b-2：狭幅は3カラム→縦積み（左→中→右）。縦の区切りは横罫線に切替（崩れない）。 */
  .cmp-card-2col { grid-template-columns: 1fr; }
  .cmp-c3-left { border-right: none; border-bottom: 1px solid var(--ground-border); }
  .cmp-scorenum-val { font-size: 18px; }
  .cmp-pricing-label { flex-basis: 42%; }
  .cmp-recs-card, .cmp-plan-card { padding: 20px; }
}
/* === F50-② マイクロインタラクション（preview/export 共通・単一ソース）：カード hover 浮き+影／画像ゆるやか zoom。=== */
.ts-card, .team-card, .pr-card { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease; }
.ts-card:hover, .team-card:hover, .pr-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px #D4AF3720; border-color: #D4AF3740; }
.gallery-item { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease; }
.gallery-item:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
.gallery-item img, .team-avatar img { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.gallery-item:hover img, .team-card:hover .team-avatar img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .ts-card, .team-card, .pr-card, .gallery-item, .gallery-item img, .team-avatar img { transition: none; }
  .ts-card:hover, .team-card:hover, .pr-card:hover, .gallery-item:hover { transform: none; }
  .gallery-item:hover img, .team-card:hover .team-avatar img { transform: none; }
}

/* 段F56⑤：hero 直下 信頼バッジ帯（データ駆動）。preview と同一の共通 trustBarCss。 */
.trust-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 28px; padding: 18px clamp(16px, 5vw, 40px); background: #D4AF370d; border-top: 1px solid #D4AF3722; border-bottom: 1px solid #D4AF3722; }
.trust-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ground-text); }
.trust-badge::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #D4AF37; color: #fff; font-size: 12px; font-weight: 900; flex-shrink: 0; }
@media (max-width: 560px) { .trust-bar { gap: 8px 18px; padding: 14px 16px; } .trust-badge { font-size: 13px; } }
/* 施工事例 carousel（流れる）。preview と同一の共通関数 caseCarouselCss（両側一致）。 */

.cs-carousel-sec { padding: 96px 0; background: #0f0f0f; overflow: hidden; }
.cs-carousel-head { max-width: 1200px; margin: 0 auto 40px; padding: 0 40px; }
.cs-carousel-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #D4AF37; margin: 0 0 12px; }
.cs-carousel-h2 { font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; color: #fff; line-height: 1.3; margin: 0; white-space: pre-line; }
.cs-carousel-viewport { overflow: hidden; }
.cs-carousel-track { display: flex; width: max-content; animation: cs-marquee 40s linear infinite; will-change: transform; }
.cs-carousel.dir-right .cs-carousel-track { animation-direction: reverse; }
.cs-carousel:hover .cs-carousel-track { animation-play-state: paused; }
.cs-carousel-tile { flex: 0 0 auto; width: 320px; margin-right: 24px; }
.cs-carousel-media { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #1a1a1a; }
.cs-carousel-media img, .cs-carousel-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-carousel-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 64px; font-weight: 800; font-family: 'DM Sans', monospace; color: #D4AF37; opacity: 0.4; }
.cs-carousel-cap { margin-top: 12px; }
.cs-carousel-tag { display: inline-block; background: #D4AF37; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; margin-bottom: 8px; }
.cs-carousel-title { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.4; }
@keyframes cs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 768px) { .cs-carousel-sec { padding: 72px 0; } .cs-carousel-tile { width: 240px; margin-right: 16px; } }
/* 段F44①：SP(≤560px)ティア。見出しの左右パディング最小化＋タイル幅縮小（768ルールは不変・下に重ねる）。 */
@media (max-width: 560px) { .cs-carousel-head { padding-left: 16px; padding-right: 16px; } .cs-carousel-tile { width: 200px; } }
@media (prefers-reduced-motion: reduce) { .cs-carousel-track { animation: none; } .cs-carousel-viewport { overflow-x: auto; } }

/* モーション強度（standard/lively）。preview と同一の共通関数 motionCss（両側一致）。standard は空文字＝現状不変。 */
/* 段F56③：全 CTA の造形の単一ソース（.cta / .cta.is-primary / .cta.is-ghost / .cta.is-lg）。per-class 定義より後に置き .cta を優先。 */
.cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 15px 30px; border-radius: 6px; font-size: 16px; font-weight: 700; text-decoration: none; letter-spacing: 0.02em; line-height: 1.2; cursor: pointer; border: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.cta::before { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-20deg); transition: left 0.6s ease; pointer-events: none; }
.cta:hover::before { left: 150%; }
.cta.is-primary { background-color: #D4AF37; background-image: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(0,0,0,0.10) 100%); color: #1A1A1A; box-shadow: 0 8px 24px #D4AF3755; }
.cta.is-primary::after { content: "→"; display: inline-block; transition: transform 0.25s ease; }
.cta.is-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px #D4AF3770; }
.cta.is-primary:hover::after { transform: translateX(4px); }
.cta.is-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.45); box-shadow: none; }
.cta.is-ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,0.08); }
.cta.is-lg { padding: 19px 44px; font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .cta, .cta::before, .cta.is-primary::after { transition: none; } .cta:hover { transform: none; } .cta:hover::before { left: -120%; } .cta.is-primary:hover::after { transform: none; } }

/* === モーション強度: rich（純CSS・preview/export 共通） === */
/* (a) スクロール出現の強調：export の .reveal を大きく・弾む系へ（preview は AnimatedSection が同値を適用）。
   JS無効/IO非対応で内容が消えないよう、隠しは html.js が付いた export 側でのみ効かせる。opacity フェードは base .reveal と共有。 */
.motion-rich .reveal { transition: opacity 1s cubic-bezier(0.22, 1.15, 0.36, 1), transform 1s cubic-bezier(0.22, 1.15, 0.36, 1); }
html.js .motion-rich .reveal { transform: translateY(32px); }
.motion-rich .reveal.is-visible { transform: none; }
/* (c) ホバー強化：カード/各部品/画像が浮く（純CSS・両側共通クラス/要素）。
   hero 画像(.hero-kb/.hero-media)は Ken Burns と競合するため除外。 */
.motion-rich .card, .motion-rich .case-card, .motion-rich .cs-split-media,
.motion-rich .ts-card, .motion-rich .co-row {
  transition: transform .4s cubic-bezier(0.22, 1.15, 0.36, 1), box-shadow .4s ease;
}
.motion-rich .card:hover, .motion-rich .case-card:hover, .motion-rich .ts-card:hover {
  transform: translateY(-6px); box-shadow: 0 18px 48px rgba(0,0,0,0.14);
}
.motion-rich img:not(.hero-kb):not(.hero-media) { transition: transform .45s cubic-bezier(0.22, 1.15, 0.36, 1); }
.motion-rich .case-card:hover img, .motion-rich .cs-split-media:hover img,
.motion-rich img:not(.hero-kb):not(.hero-media):hover { transform: scale(1.045); }
.motion-rich a.btn-primary:hover, .motion-rich button:hover { transform: translateY(-2px); }
/* (e) 質感：見出しを大きく・引き締める（両側 h1/h2。preview の inline 指定を !important で上書き）。 */
.motion-rich h1 { font-size: clamp(2.6rem, 6vw, 4.6rem) !important; letter-spacing: -0.02em !important; }
.motion-rich h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem) !important; letter-spacing: -0.01em !important; }
/* === 第2弾：preview限定だった hero の賑やかしを export へ純CSSで移植（lively のみ） ===
   これらのクラスは export の hero だけが出力する（preview は従来どおり自前のinlineで出すため、
   下のルールは preview では一致対象がなく無害＝inert）。視覚値は preview の hero と同値。 */
@keyframes kbfloat { from { transform: translateY(0) scale(1); } to { transform: translateY(-30px) scale(1.05); } }
@keyframes kbpulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.8); } }
@keyframes kbscroll { 0% { opacity: 0; transform: scaleY(0); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(0); transform-origin: bottom; } }
.motion-rich .hero-particles { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.motion-rich .hero-particle { position: absolute; border-radius: 50%; will-change: transform; animation-name: kbfloat; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.motion-rich .hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--accent) 1px, transparent 1px), linear-gradient(90deg, var(--accent) 1px, transparent 1px); background-size: 60px 60px; opacity: 0.05; }
.motion-rich .hero-badge { display: inline-flex; align-items: center; gap: 8px; border-radius: 100px; padding: 6px 16px; margin-bottom: 24px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.motion-rich .hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: kbpulse 2s infinite; }
.motion-rich .hero-badge-text { color: var(--accent); font-size: clamp(11px, 3vw, 13px); font-weight: 600; letter-spacing: 0.08em; white-space: nowrap; }
.motion-rich .hero-scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,0.5); font-size: 12px; letter-spacing: 0.1em; }
.motion-rich .hero-scroll-line { width: 1px; height: 40px; background: linear-gradient(var(--accent), transparent); animation: kbscroll 1.5s ease-in-out infinite; }
/* hero 内のコンテンツ/メディアを装飾より前面に（既存 .hero-content/.hero-media の z-index と整合）。 */
.motion-rich .hero .hero-content { position: relative; z-index: 2; }
/* アクセシビリティ：動きを減らす設定では強調分を無効化（reveal/hover を止める）。 */
@media (prefers-reduced-motion: reduce) {
  .motion-rich .reveal { transition: none; }
  .motion-rich .card, .motion-rich .case-card, .motion-rich .cs-split-media,
  .motion-rich .ts-card, .motion-rich .co-row, .motion-rich img { transition: none; }
  .motion-rich .card:hover, .motion-rich .case-card:hover, .motion-rich .ts-card:hover,
  .motion-rich .case-card:hover img, .motion-rich .cs-split-media:hover img,
  .motion-rich img:not(.hero-kb):not(.hero-media):hover,
  .motion-rich a.btn-primary:hover, .motion-rich button:hover { transform: none; box-shadow: none; }
  /* 第2弾の hero 賑やかしも停止（動きを減らす設定を尊重）。 */
  .motion-rich .hero-particle, .motion-rich .hero-badge-dot, .motion-rich .hero-scroll-line { animation: none; }
}