/* ==========================================================================
   shared.css — LP common styles for ganbari-quest
   Shared across: index.html, pricing.html, terms.html, privacy.html,
                  sla.html, tokushoho.html
   Excluded: pamphlet.html
   ========================================================================== */

/* --- Reset & Variables --- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
	/* Brand Blue */
	--brand-900: #1a3a5c;
	--brand-800: #2a5f9e;
	--brand-700: #3878b8;
	--brand-600: #4a90d9;
	--brand-500: #5ba3e6;
	--brand-400: #7db8ed;
	--brand-300: #a3cef3;
	--brand-200: #c9e2f8;
	--brand-100: #e8f4fd;
	--brand-50: #f2f9ff;
	/* Gold */
	--gold-600: #d4ad00;
	--gold-500: #ffcc00;
	--gold-400: #ffe44d;
	--gold-300: #ffed80;
	--gold-100: #fffbe6;
	/* Violet */
	--violet-600: #7c3aed;
	--violet-500: #8b5cf6;
	--violet-100: #ede9fe;
	/* Semantic */
	--green-500: #4caf50;
	--green-100: #e8f5e9;
	--orange-500: #ff9800;
	--orange-100: #fff3e0;
	--red-500: #f44336;
	--red-100: #fde8e7;
	/* Neutral */
	--gray-900: #1e293b;
	--gray-700: #334155;
	--gray-500: #64748b;
	--gray-300: #cbd5e1;
	--gray-200: #e2e8f0;
	--gray-100: #f1f5f9;
	--gray-50: #f8fafc;
	/* #1633 R29: 視覚的不揃いを 5 段階以下のスケールに統一 */
	--radius: 12px; /* 既存値（card / panel） */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-pill: 999px;
	--shadow-sm: 0 2px 8px rgba(56, 120, 184, 0.15);
	--shadow-md: 0 4px 16px rgba(56, 120, 184, 0.2);
	--shadow-lg: 0 8px 32px rgba(56, 120, 184, 0.25);
	--lh-tight: 1.4;
	--lh-base: 1.7;
	--lh-loose: 1.9;
	/* #1839: LP Spacing/Layout 3 層トークン (Base → Semantic → Component)。
	   docs/DESIGN.md §4 スペーシング章を参照。
	   過去 5 PR (#1759 / #1798 / #1827 / #1831 / #1836) で section padding を
	   多層的に圧縮 (40→28 等) してきた状態を、Base + Semantic で SSOT 化する。
	   値を変える際は本セクションの Semantic トークンのみ更新し、Component 側
	   (.section / .faq-item / .hero 等) は触らない方針。 */
	/* Base Spacing (4px グリッド、Tailwind / Material Design 系列に整合) */
	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--space-9: 36px;
	--space-10: 40px;
	--space-12: 48px;
	--space-14: 56px;
	--space-16: 64px;
	/* Semantic LP Spacing (Component から参照する変数群)。
	   命名規則: --lp-<部位>-<軸 or 用途>。値は Base トークンを参照する。 */
	--lp-section-padding-y: var(--space-7); /* .section 縦 padding (#1836 で 28px に圧縮) */
	--lp-section-padding-x: var(--space-4); /* .section 横 padding (16px) */
	--lp-section-title-mb: var(--space-1); /* .section-title 下マージン (#1831 で 4px) */
	--lp-section-desc-mb: var(--space-3); /* .section-desc 下マージン (#1836 で 14px ≈ 12px+2px → space-3 + 2px は許容、ここでは space-3 fallback の代わりに直値 14px を採用) */
	--lp-section-desc-mb-default: 14px; /* #1836 圧縮値、Base 4px グリッドに乗らないため独立定義 */
	/* 注: --lp-cta-bottom-padding-top / -bottom は当初 Phase 1 で定義していたが、
	   PR #1842 (#1838) で .cta-bottom セクション全削除のため rebase 時に撤去。
	   再追加する場合は cta-bottom セクション復活の是非を別 ADR で議論すること。 */
	--lp-faq-item-padding-y: 14px; /* .faq-item 上下 padding (#1831 で 14px、Base 4px グリッドに乗らないため直値) */
	--lp-hero-padding-top: var(--space-12); /* .hero 上 padding (48px) */
	--lp-hero-padding-bottom: var(--space-9); /* .hero 下 padding (36px) */
	/* #1911 (B-1): tour-card / soft-card / core-loop-card で内部 padding がバラバラだった (16/14 vs 20/18 vs 18/18)
	   不揃いを Semantic 統合トークンで SSOT 化。値は #1851 で確定済の tour-card mobile (16px/14px) に揃え、
	   ≥1024px / ≥1440px は段階的拡張。soft-card / core-loop-card の旧個別 token は本トークンに集約 */
	--lp-card-padding-y: var(--space-4); /* card 系 (.tour-card / .soft-card / .core-loop-card) 縦 padding 既定 (16px) */
	--lp-card-padding-x: 14px; /* card 系 横 padding 既定 (4px グリッド外、直値) */
	--lp-card-padding-y-md: var(--space-6); /* card 系 @≥1024px (24px) */
	--lp-card-padding-x-md: 22px; /* card 系 @≥1024px (4px グリッド外、直値) */
	--lp-card-padding-y-lg: var(--space-7); /* card 系 @≥1440px (28px) */
	--lp-card-padding-x-lg: var(--space-6); /* card 系 @≥1440px (24px) */
	--lp-card-shot-aspect-ratio: 390/844; /* card 系 scrshot 枠 aspect-ratio 統一値 (#1911 B-3、縦長スマホ実画像対応) */
	--lp-card-gap: var(--space-5); /* .machine-tour / .soft-grid のグリッド間隔 */
	/* #1851 Phase 2: 残り構造的 padding/margin の Semantic トークン化。
	   tour-card / soft-card / trust-badge / versus-card / plan-card / floating-cta /
	   faq / pp-band / hero h1 等の構造的 spacing を SSOT 化する。値は Phase 1 と同じく
	   過去 PR (#1759 / #1798 / #1827 / #1831 / #1836) で圧縮されている値を踏襲。
	   ローカル装飾値 (gap / 微小余白等) は SSOT 肥大化回避のため対象外。 */
	/* #1911 (B-1): .tour-card / .soft-card 個別 token は --lp-card-padding-* に統合済 (本ファイル l.97-103)。
	   旧 --lp-tour-card-padding-* / --lp-soft-card-padding-* は削除し、参照箇所を統合トークンに置換 */
	--lp-trust-badge-padding-y: var(--space-6); /* .trust-badge 縦 padding (24px) */
	--lp-trust-badge-padding-x: var(--space-5); /* .trust-badge 横 padding (20px) */
	--lp-trust-badge-padding-y-lg: var(--space-5); /* .trust-badge @≥1024px (20px) */
	--lp-trust-badge-padding-x-lg: var(--space-4); /* .trust-badge @≥1024px (16px) */
	--lp-trust-badge-tech-note-margin-top: var(--space-2); /* .trust-badge-tech-note 上マージン (8px、#1905 PERS-MAJ-11) */
	--lp-trust-disclaimer-margin-top: var(--space-8); /* .trust-disclaimer 上マージン (32px) */
	--lp-trust-disclaimer-padding-y: var(--space-4); /* .trust-disclaimer 上下 padding (16px) */
	--lp-trust-disclaimer-padding-x: var(--space-5); /* .trust-disclaimer 横 padding (20px) */
	--lp-pp-band-padding-y: var(--space-6); /* .pp-band 縦 padding (24px) */
	--lp-pp-band-padding-x: 22px; /* .pp-band 横 padding (4px グリッド外) */
	--lp-pp-band-padding-y-sm: 18px; /* .pp-band @≤640px 縦 padding (4px グリッド外) */
	--lp-pp-band-padding-x-sm: 14px; /* .pp-band @≤640px 横 padding (4px グリッド外) */
	--lp-floating-cta-padding-y: 10px; /* .floating-cta 縦 padding (4px グリッド外) */
	--lp-floating-cta-padding-x: var(--space-4); /* .floating-cta 横 padding (16px) */
	--lp-floating-cta-btn-padding-y: var(--space-2); /* .floating-cta .btn 縦 padding (8px) */
	--lp-floating-cta-btn-padding-x: var(--space-4); /* .floating-cta .btn 横 padding (16px) */
	/* #1911 (B-1): .core-loop-card 個別 padding token は --lp-card-padding-* に統合済 */
	--lp-growth-roadmap-padding-y: var(--space-6); /* #growth-roadmap 縦 padding (24px) */
	--lp-growth-roadmap-padding-x: var(--space-4); /* #growth-roadmap 横 padding (16px) */
	--lp-versus-section-padding-y: var(--space-4); /* #versus 縦 padding (16px) */
	--lp-versus-section-padding-x: var(--space-4); /* #versus 横 padding (16px) */
	/* pricing.html (#1851 AC3): plan-card / pricing-hero / trial-box 等の構造的 spacing */
	--lp-pricing-hero-padding-top: 80px; /* 4px グリッド (16×5)、Base 未定義のため直値 */
	--lp-pricing-hero-padding-bottom: 60px; /* 4px グリッド (4×15)、Base 未定義のため直値 */
	--lp-pricing-hero-padding-x: var(--space-4); /* 16px */
	--lp-plans-section-padding-y-top: var(--space-12); /* 48px */
	--lp-plans-section-padding-y-bottom: var(--space-16); /* 64px */
	--lp-plans-section-padding-x: var(--space-4); /* 16px */
	--lp-plan-card-padding-y: var(--space-8); /* 32px */
	--lp-plan-card-padding-x: var(--space-6); /* 24px */
	--lp-trial-section-padding-y: var(--space-16); /* 64px */
	--lp-trial-section-padding-x: var(--space-4); /* 16px */
	--lp-trial-box-padding-y: var(--space-10); /* 40px */
	--lp-trial-box-padding-x: var(--space-8); /* 32px */
	--lp-trial-box-padding-y-sm: var(--space-7); /* 28px @≤640px */
	--lp-trial-box-padding-x-sm: var(--space-5); /* 20px @≤640px */
	--lp-faq-section-padding-y: var(--space-16); /* 64px */
	--lp-faq-section-padding-x: var(--space-4); /* 16px */
	--lp-cta-bottom-padding-y: var(--space-16); /* 64px */
	--lp-cta-bottom-padding-x: var(--space-4); /* 16px */
	--lp-family-patterns-padding-y: var(--space-16); /* 64px */
	--lp-family-patterns-padding-x: var(--space-4); /* 16px */
	--lp-pattern-card-padding: var(--space-6); /* 24px */
	--lp-comparison-section-padding-x: var(--space-4); /* 16px */
	--lp-comparison-section-padding-bottom: var(--space-16); /* 64px */
	/* #2395 Phase 3: faq.html / graduation.html / selfhost.html / pamphlet.html 共通 hero / CTA / section spacing。
	   ADR-0042 Phase 1/2 と同パターンで 4 HTML に Semantic トークン化を波及させる。 */
	/* content (faq / graduation / selfhost) 共通 hero */
	--lp-content-hero-padding-y-top: var(--space-16); /* 64px (faq / graduation の hero 上 padding) */
	--lp-content-hero-padding-y-bottom: var(--space-12); /* 48px (faq / graduation の hero 下 padding) */
	--lp-content-hero-padding-y-top-sm: var(--space-12); /* 48px @≤640px */
	--lp-content-hero-padding-y-bottom-sm: var(--space-9); /* 36px @≤640px */
	--lp-content-hero-padding-x: var(--space-4); /* 16px */
	--lp-content-hero-title-mb: var(--space-3); /* 12px (h1 下マージン) */
	/* selfhost hero は 60px/16px/48px (4px グリッド外) */
	--lp-selfhost-hero-padding-y-top: 60px; /* 4px グリッド外、独立定義 */
	--lp-selfhost-hero-padding-y-bottom: var(--space-12); /* 48px */
	--lp-selfhost-hero-padding-x: var(--space-4); /* 16px */
	--lp-selfhost-hero-desc-mb: var(--space-6); /* 24px (hero p 下マージン) */
	/* content (faq / graduation / selfhost) 共通 section */
	--lp-content-section-padding-y: var(--space-12); /* 48px (selfhost .section / faq-sections / faq-bottom) */
	--lp-content-section-padding-x: var(--space-4); /* 16px */
	--lp-content-section-title-mb: var(--space-3); /* 12px */
	--lp-content-section-desc-mb: var(--space-8); /* 32px (selfhost .section-desc) */
	--lp-content-section-desc-mb-default: var(--space-6); /* 24px (faq-bottom p) */
	/* content (faq / graduation / selfhost) 共通 CTA bottom */
	--lp-content-cta-padding-y: var(--space-12); /* 48px (faq-bottom / selfhost cta-bottom) */
	--lp-content-cta-padding-y-lg: var(--space-14); /* 56px (graduation-cta) */
	--lp-content-cta-padding-x: var(--space-4); /* 16px */
	/* faq 専用 */
	--lp-faq-toc-padding-y-top: var(--space-8); /* 32px (faq-toc 上 padding) */
	--lp-faq-toc-padding-x: var(--space-4); /* 16px */
	--lp-faq-toc-inner-padding-y: var(--space-5); /* 20px */
	--lp-faq-toc-inner-padding-x: var(--space-6); /* 24px */
	--lp-faq-toc-title-mb: var(--space-3); /* 12px */
	--lp-faq-toc-link-padding-y: var(--space-1); /* 4px (絵文字 padding に近い) - 直値の方が安全だが grid に乗る */
	--lp-faq-toc-link-padding-y-pill: 6px; /* 4px グリッド外 (pill 状 link、--space-1=4 と --space-2=8 の中間) */
	--lp-faq-toc-link-padding-x: 14px; /* 4px グリッド外 */
	--lp-faq-sections-padding-y-top: var(--space-8); /* 32px */
	--lp-faq-sections-padding-y-bottom: var(--space-12); /* 48px */
	--lp-faq-sections-padding-x: var(--space-4); /* 16px */
	--lp-faq-category-padding-y: var(--space-8); /* 32px */
	--lp-faq-category-padding-x: var(--space-7); /* 28px */
	--lp-faq-category-padding-x-sm: var(--space-5); /* 20px @≤640px */
	--lp-faq-category-padding-y-sm: var(--space-6); /* 24px @≤640px */
	--lp-faq-category-mb: var(--space-6); /* 24px */
	--lp-faq-category-scroll-margin-top: 80px; /* 4px グリッド外 (header 高さ依存) */
	--lp-faq-category-title-mb: var(--space-2); /* 8px */
	--lp-faq-category-desc-mt: 20px; /* 4px グリッド外 (44px との差分調整) */
	--lp-faq-category-desc-ml: 44px; /* 4px グリッド外 (faq-category-num width 32px + gap 12px) */
	--lp-faq-item-list-padding-y: 18px; /* 4px グリッド外、独立定義 */
	--lp-faq-item-summary-padding-y: var(--space-1); /* 4px */
	--lp-faq-item-open-mb: 10px; /* 4px グリッド外 */
	--lp-faq-answer-padding-y-top: var(--space-2); /* 8px */
	--lp-faq-answer-padding-y-bottom: var(--space-1); /* 4px */
	--lp-faq-answer-padding-x: var(--space-7); /* 28px */
	--lp-faq-answer-mt: 6px; /* 4px グリッド外 */
	--lp-faq-answer-p-mb: 10px; /* 4px グリッド外 */
	--lp-faq-answer-ul-padding-l: var(--space-5); /* 20px */
	--lp-faq-answer-ul-margin-y: var(--space-2); /* 8px */
	--lp-faq-answer-li-margin-y: var(--space-1); /* 4px */
	--lp-faq-cta-trust-mt: 18px; /* 4px グリッド外 */
	--lp-faq-contact-mt: var(--space-6); /* 24px */
	/* graduation 専用 */
	--lp-graduation-breadcrumb-padding-y: 14px; /* 4px グリッド外 */
	--lp-graduation-breadcrumb-padding-x: var(--space-4); /* 16px */
	--lp-graduation-breadcrumb-sep-margin-x: var(--space-2); /* 8px */
	--lp-graduation-detail-padding-y-top: var(--space-12); /* 48px */
	--lp-graduation-detail-padding-y-bottom: var(--space-16); /* 64px */
	--lp-graduation-detail-padding-x: var(--space-4); /* 16px */
	--lp-gr-stage-padding-y: 18px; /* 4px グリッド外 */
	--lp-gr-stage-padding-x: 18px; /* 4px グリッド外 */
	--lp-gr-stage-padding-y-md: var(--space-6); /* 24px @≥1024px */
	--lp-gr-stage-padding-x-md: var(--space-7); /* 28px @≥1024px */
	--lp-gr-age-padding-y: 10px; /* 4px グリッド外 */
	--lp-gr-age-padding-x: 6px; /* 4px グリッド外 (小型ラベル) */
	--lp-gr-age-padding-sm: var(--space-2); /* 8px @≤768px */
	--lp-gr-body-h2-mb: 10px; /* 4px グリッド外 */
	--lp-gr-body-p-mb: var(--space-2); /* 8px */
	--lp-gr-shot-margin-y: 10px; /* 4px グリッド外 */
	--lp-gr-benefit-margin-y: 6px; /* 4px グリッド外 */
	--lp-graduation-cta-buttons-btn-padding-y: var(--space-3); /* 12px */
	--lp-graduation-cta-buttons-btn-padding-x: var(--space-7); /* 28px */
	--lp-graduation-cta-p-mb: var(--space-5); /* 20px */
	/* selfhost 専用 */
	--lp-selfhost-setup-code-padding: var(--space-4); /* 16px */
	--lp-selfhost-setup-code-mb: var(--space-4); /* 16px */
	--lp-selfhost-feature-list-padding-y: var(--space-2); /* 8px */
	--lp-selfhost-table-padding-y: var(--space-3); /* 12px */
	--lp-selfhost-table-padding-x: var(--space-4); /* 16px */
	--lp-selfhost-note-box-padding-y: var(--space-5); /* 20px */
	--lp-selfhost-note-box-padding-x: var(--space-6); /* 24px */
	--lp-selfhost-note-box-margin-y: var(--space-6); /* 24px */
	--lp-selfhost-req-card-padding: var(--space-5); /* 20px */
	--lp-selfhost-req-icon-mb: var(--space-2); /* 8px */
	--lp-selfhost-req-card-h3-mb: var(--space-1); /* 4px */
	--lp-selfhost-req-grid-margin-y: var(--space-6); /* 24px */
	/* pamphlet 専用 (#2395 Phase 3、印刷用 mm 単位は対象外) */
	--lp-pamphlet-control-margin-y: var(--space-5); /* 20px */
	--lp-pamphlet-screen-controls-padding: var(--space-5); /* 20px */
	--lp-pamphlet-screen-controls-btn-padding-y: var(--space-3); /* 12px */
	--lp-pamphlet-screen-controls-btn-padding-x: var(--space-8); /* 32px */
	--lp-pamphlet-screen-controls-p-mt: var(--space-2); /* 8px */
	--lp-pamphlet-page-num-margin-x: var(--space-2); /* 8px */
	--lp-pamphlet-fi-layer-badge-padding-y: 1px; /* 4px グリッド外 */
	--lp-pamphlet-fi-layer-badge-padding-x: var(--space-1); /* 4px */
	--lp-pamphlet-fi-layer-badge-mr: 2px; /* 4px グリッド外 */
	/* Layout */
	--lp-container-max: 1080px; /* セクション内の最大幅 (header-inner / footer-inner / section-inner 共通) */
	--lp-container-max-wide: 1280px; /* hero / machine-tour / guide 用ワイド版 */
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
	color: var(--gray-700);
	line-height: 1.7;
	/* #1729 R14: ADR-0016 日本語折り返し方針 — 全段落に auto-phrase を適用して文節区切り改善 */
	text-wrap: pretty;
	word-break: auto-phrase;
}
a {
	color: var(--brand-700);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
h1, h2, h3, h4 {
	/* #1729 R14: 見出しは balance で行長均等化 + auto-phrase で文節区切り */
	text-wrap: balance;
	word-break: auto-phrase;
}
/* #1891 (PO-4-5): machine-tour `.tour-card` 領域は body / h1-4 既定の上に明示適用し
   widow (1 行 1-2 文字残り) を抑止する。`.tour-card h3` は balance、`.tour-card p` は pretty。
   ADR-0016 日本語折り返し方針 (CSS 第一選択) 整合。 */
.tour-card h3 { text-wrap: balance; word-break: auto-phrase; }
.tour-card p { text-wrap: pretty; word-break: auto-phrase; }
img {
	max-width: 100%;
	height: auto;
}

/* --- A11y: focus-visible (#1906 TECH-D-3) ---
   キーボード操作時の focus indicator をブランド色 (--brand-700) で明示。
   pointer click 時は :focus-visible が発動しないため見た目を汚さない。
   個別コンポーネント (.age-tab / .splide__arrow 等) で個別 focus-visible が
   ある場合は specificity でそちらが勝つ。 */
:focus-visible {
	outline: 3px solid var(--brand-700);
	outline-offset: 2px;
	border-radius: 2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--brand-700);
	outline-offset: 2px;
}

/* --- A11y: skip-to-content link (#1906 TECH-D-4) ---
   キーボードユーザー / SR ユーザーが header / nav をスキップして本文に直接ジャンプできる。
   Tab フォーカス時のみ可視化 (sr-only パターン)。背景は brand-700 で focus indicator と整合。 */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 1000;
	background: var(--brand-700);
	color: #fff;
	padding: 12px 20px;
	font-size: 0.95rem;
	font-weight: 600;
	border-radius: 0 0 8px 0;
	text-decoration: none;
	transition: top 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
	top: 0;
	outline: 3px solid var(--gold-500);
	outline-offset: -3px;
	text-decoration: none;
}

/* --- Header (unified across all pages) --- */
.header {
	background: var(--gray-50);
	border-bottom: 1px solid var(--gray-300);
	padding: 12px 16px;
	position: sticky;
	top: 0;
	z-index: 50;
}
.header-inner {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--gray-900);
	text-decoration: none;
}
.logo img {
	height: 44px;
	width: auto;
}
.header-nav {
	display: flex;
	gap: 20px;
	align-items: center;
}
.header-nav a:not(.btn) {
	font-size: 0.9rem;
	color: var(--gray-500);
}
.header-nav a:not(.btn):hover {
	color: var(--gray-900);
}
.hamburger {
	display: none;
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	padding: 4px 8px;
	color: var(--gray-700);
}

/* --- Buttons --- */
.btn {
	display: inline-block;
	padding: 10px 24px;
	border-radius: 2rem;
	font-size: 0.95rem;
	font-weight: 600;
	transition: all 0.2s;
	text-decoration: none;
}
.btn-primary {
	background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
	color: var(--gray-50);
	box-shadow: 0 2px 8px rgba(56, 120, 184, 0.3);
}
.btn-primary:hover {
	box-shadow: 0 4px 16px rgba(56, 120, 184, 0.4);
	text-decoration: none;
	transform: translateY(-1px);
}
.btn-outline {
	border: 2px solid var(--brand-700);
	color: var(--brand-700);
}
.btn-outline:hover {
	background: var(--brand-100);
	text-decoration: none;
}
/* #1895 (PO-4-9): growth-roadmap CTA / graduation CTA / pricing hero secondary CTA で
   共通利用される白背景 + brand-300 outline ボタン。各ページのローカル定義
   (graduation.html / pricing.html) と一致するため共通化。 */
.btn-secondary {
	background: #fff;
	color: var(--brand-700);
	border: 2px solid var(--brand-300);
}
.btn-secondary:hover {
	background: var(--brand-50);
	text-decoration: none;
	transform: translateY(-1px);
}
.btn-demo {
	background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
	color: var(--gray-900);
	box-shadow: 0 2px 8px rgba(255, 204, 0, 0.3);
}
.btn-demo:hover {
	box-shadow: 0 4px 16px rgba(255, 204, 0, 0.4);
	text-decoration: none;
	transform: translateY(-1px);
}
.btn-premium {
	background: linear-gradient(135deg, var(--violet-600), var(--violet-500));
	color: var(--gray-50);
	box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}
.btn-premium:hover {
	box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
	text-decoration: none;
	transform: translateY(-1px);
}
.btn-lg {
	padding: 14px 32px;
	font-size: 1.1rem;
}

/* #1285: ヘッダー右上 ログイン の ghost button スタイル。
   他の nav-text と視覚的に区別し、既存ユーザーのマイページ復帰導線を明示する。 */
.header-nav a.nav-login {
	padding: 6px 14px;
	font-size: 0.88rem;
	font-weight: 600;
	border: 1.5px solid var(--brand-300);
	border-radius: 8px;
	color: var(--brand-700);
	background: #fff;
	transition: background 0.15s, border-color 0.15s;
}
.header-nav a.nav-login:hover {
	background: var(--brand-50);
	border-color: var(--brand-500);
	color: var(--brand-700);
	text-decoration: none;
}

/* #1290: ヘッダー常時 signup CTA (index.html のみ、floating-cta との二重表示回避)。
   デスクトップ: .nav-login ghost button と並列に新規登録導線を常時表示。
   モバイル: ハンバーガー展開時に floating-cta と重複するため非表示、floating-cta に集約。
   pricing/terms/privacy 等は floating-cta を持たないため .nav-signup class を付けず通常表示。
   #1795 R-MAJ-5: hero 可視中はヘッダー nav-signup を非表示 (hero 内 primary CTA との視線奪い合い回避)。
   IntersectionObserver で .hero がビューポート内に留まる間 body[data-hero-visible="true"] が立ち、
   nav-signup の opacity/visibility を制御する。 */
.header-nav a.nav-signup {
	padding: 8px 18px;
	font-size: 0.9rem;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
@media (max-width: 768px) {
	.header-nav a.nav-signup {
		display: none;
	}
}
/* #1795 R-MAJ-5: hero 可視中は PC でも nav-signup を非表示。hero スクロール完了後に再表示 */
@media (min-width: 769px) {
	body[data-hero-visible='true'] .header-nav a.nav-signup {
		opacity: 0;
		visibility: hidden;
	}
}

/* --- Footer (full footer for index/pricing) --- */
.footer {
	background: var(--gray-900);
	color: #94a3b8;
	padding: 40px 16px;
}
.footer-inner {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
}
.footer-brand h3 {
	color: var(--gray-50);
	font-size: 1rem;
	margin-bottom: 8px;
}
.footer-brand p {
	font-size: 0.85rem;
}
.footer-links h4 {
	color: var(--gray-200);
	font-size: 0.85rem;
	margin-bottom: 8px;
}
.footer-links a {
	display: block;
	font-size: 0.85rem;
	color: #94a3b8;
	margin-bottom: 4px;
}
.footer-links a:hover {
	color: var(--gray-50);
}
.footer-copy {
	border-top: 1px solid var(--gray-700);
	margin-top: 32px;
	padding-top: 16px;
	text-align: center;
	font-size: 0.75rem;
}

/* --- Footer (simple for legal pages) --- */
.footer-simple {
	background: var(--gray-50);
	border-top: 1px solid var(--gray-300);
	padding: 16px;
	text-align: center;
}
.footer-simple p {
	font-size: 0.75rem;
	color: #94a3b8;
	margin: 0 0 8px;
}
.footer-simple .footer-links-inline {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}
.footer-simple .footer-links-inline a {
	font-size: 0.75rem;
	color: var(--gray-500);
	display: inline;
}

/* --- Legal page styles --- */
.legal-body {
	background: var(--gray-50);
}
.main {
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
	padding: 32px 16px;
}
.doc {
	background: var(--gray-50);
	border-radius: var(--radius);
	padding: 32px 24px;
	border: 1px solid var(--gray-200);
}
.doc h1 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--gray-900);
	margin: 0 0 8px;
}
.meta {
	font-size: 0.8rem;
	color: #94a3b8;
	margin: 0 0 24px;
}
.intro {
	font-size: 0.9rem;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--gray-200);
}
.doc h2 {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--gray-900);
	margin: 32px 0 12px;
}
.doc h3 {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--gray-500);
	margin: 20px 0 8px;
}
.doc section {
	margin-bottom: 8px;
}
.doc p {
	font-size: 0.9rem;
	margin: 8px 0;
}
.doc ol,
.doc ul {
	font-size: 0.9rem;
	padding-left: 24px;
	margin: 8px 0;
}
.doc li {
	margin: 6px 0;
}
.effective {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--gray-200);
	text-align: right;
}
.effective p {
	font-size: 0.85rem;
	color: var(--gray-500);
	margin: 4px 0;
}

/* --- Responsive: mobile --- */
@media (max-width: 768px) {
	.hamburger {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.header-nav {
		display: none;
		position: absolute;
		top: 56px;
		left: 0;
		right: 0;
		background: var(--gray-50);
		flex-direction: column;
		padding: 16px;
		gap: 12px;
		border-bottom: 1px solid var(--gray-300);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}
	.header-nav.open {
		display: flex;
	}
	.header-nav a:not(.btn) {
		font-size: 1rem;
		padding: 8px 0;
	}
	.header-nav .btn {
		text-align: center;
		width: 100%;
	}
	.footer-inner {
		flex-direction: column;
	}
}

/* --- Lightbox (#297) --- */
.lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.lightbox-overlay.active {
	opacity: 1;
	pointer-events: auto;
}
.lightbox-overlay img {
	max-width: 90vw;
	max-height: 90vh;
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	object-fit: contain;
}
.lightbox-close {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 101;
	background: none;
	border: none;
	color: var(--gray-50);
	font-size: 2rem;
	cursor: pointer;
	line-height: 1;
	padding: 8px;
	opacity: 0.8;
	transition: opacity 0.2s;
}
.lightbox-close:hover {
	opacity: 1;
}
img[data-lightbox] {
	cursor: zoom-in;
}

/* --- Moved from index.html (Versus and Age Panel Redesign) --- */
#versus{padding:var(--lp-versus-section-padding-y) var(--lp-versus-section-padding-x)}
.versus-grid{display:grid;gap:var(--space-6);max-width:1080px;margin:0 auto}
.versus-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);align-items:center;padding:var(--space-5);background:#fff;border:1px solid var(--gray-300);border-radius:28px}
.versus-row.reverse .versus-text{order:2}
.versus-row.reverse .versus-visual{order:1}
.versus-label{display:inline-block;margin:16px 0 8px;padding:6px 10px;background:var(--brand-700);color:#fff;border-radius:10px;font-size:.85rem;font-weight:700}
.versus-text > .versus-label:first-child{margin-top:0}
.versus-label.versus-label-muted{background:var(--gray-100);color:var(--gray-700)}
.versus-text h3{margin:0 0 10px;font-size:clamp(1.2rem, 2vw, 1.6rem);line-height:1.4;color:var(--gray-900)}
.versus-text p{margin:0 0 var(--space-4);color:var(--gray-700);font-size:.95rem;line-height:1.6}
.versus-visual img{border-radius:16px;border:1px solid var(--gray-200);background:#f8fafc;width:100%;height:auto;display:block}
@media(max-width:960px){
  .versus-row,.versus-row.reverse{grid-template-columns:1fr;gap:var(--space-5)}
  .versus-row.reverse .versus-text,.versus-row.reverse .versus-visual{order:initial}
}
@media(max-width:640px){
  .versus-row{padding:20px;border-radius:18px}
  .versus-text h3{font-size:1.3rem}
  .versus-text p{font-size:.9rem}
}

.age-panel{display:none;grid-template-columns:minmax(280px, 420px) 1fr;gap:var(--space-6);align-items:center;background:#fff;border:1px solid var(--gray-300);border-radius:28px;padding:var(--space-5);box-shadow:0 16px 40px rgba(29, 43, 63, 0.08)}
.age-panel.active{display:grid}
.age-panel-shot{align-self:stretch}
.age-panel-shot img{width:100%;height:100%;max-height:680px;object-fit:contain;border-radius:20px;border:1px solid var(--gray-200);background:#f9fbfe;display:block}
.age-panel-shot picture{display:block;width:100%;height:100%}
.age-panel-body{display:flex;flex-direction:column;align-items:flex-start}
.age-panel-feature{margin:0 0 var(--space-3);padding:8px 12px;border-radius:999px;background:var(--brand-50);color:var(--brand-700);font-size:14px;font-weight:700;display:inline-block}
.age-panel-body h3{margin:0 0 var(--space-3);font-size:clamp(30px, 4vw, 46px);line-height:1.2;letter-spacing:-0.02em;color:var(--gray-900)}
.age-panel-desc{margin:0 0 var(--space-4);color:var(--gray-600);font-size:18px;max-width:34rem;line-height:1.6}
.age-panel-checklist{display:grid;gap:var(--space-2);margin:0 0 var(--space-5);padding:0;list-style:none}
.age-panel-checklist li{position:relative;padding-left:28px;color:var(--gray-900);font-size:18px;font-weight:500;line-height:1.5}
.age-panel-checklist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand-700);font-weight:800}
.age-panel-cta{margin-top:auto;width:100%}
@media(max-width:960px){
  .age-panel.active{grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-4)}
  .age-panel-shot img{max-height:none}
  .age-panel-body h3{font-size:34px}
  .age-panel-desc,.age-panel-checklist li{font-size:17px}
}
@media(max-width:640px){
  .age-panel.active{padding:20px;border-radius:20px;gap:20px;text-align:left}
  .age-panel-feature{font-size:13px;margin-bottom:12px}
  .age-panel-body h3{margin-bottom:12px;font-size:28px}
  .age-panel-desc{margin-bottom:16px;font-size:16px}
  .age-panel-checklist{gap:10px;margin-bottom:20px}
  .age-panel-checklist li{padding-left:24px;font-size:16px}
  .age-panel-cta,.age-panel-cta .btn{width:100%}
  .age-panel-cta .btn{min-height:52px;font-size:17px;display:flex;justify-content:center}
}