/* ============================================================
   LottoBox - メインCSS
   Design System: Dark Premium / Neon Glow
   ============================================================ */

/* ============================================================
   1. CSS カスタムプロパティ（デザイントークン）
   ============================================================ */
:root {
  /* ベースカラー */
  --color-bg: #ffffff;
  --color-bg-secondary: #f1f5f9;
  --color-bg-tertiary: #e2e8f0;
  --color-bg-quaternary: #d4c6f6;
  --color-bg-quinary:#eaeaf8;  
  --color-border: rgba(30, 58, 95, 0.18);
  --color-border-subtle: rgba(15, 23, 42, 0.08);
  --color-bg-card: var(--color-bg);
  /* テキストカラー */
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;
  --color-text-white:#FFF;

  /* ブランドカラー */
  --color-primary: #053169;
  --color-primary-light: #3c6392;
  --color-primary-dark: #0b2547;
  --color-accent: #f59e0b;
  --color-accent-light: #fbbf24;
  --color-accent-dark: #b6670d;

  /* 機能カラー */
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  /* タイポグラフィ */
  --font-sans: 'Inter', 'Noto Sans JP', sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* スペーシング */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* レイアウト */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-padding: clamp(16px, 4vw, 32px);

  /* z-index */
  --z-base: 0;
  --z-content: 10;
  --z-sticky: 20;
  --z-dropdown: 40;
  --z-modal: 100;
  --z-toast: 1000;

  /* ボーダー半径 */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* シャドウ・グロー */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 8px 48px rgba(0, 0, 0, 0.6);
  --glow-primary: 0 0 20px rgba(124, 58, 237, 0.4);
  --glow-accent: 0 0 20px rgba(245, 158, 11, 0.4);
  --glow-strong: 0 0 40px rgba(124, 58, 237, 0.6);

  /* アニメーション */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

}

/* ============================================================
   2. リセット & ベーススタイル
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 100%;
  /* タブスクロールの安定化 */
  scroll-padding-top: 80px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* フォーカスリング（全インタラクティブ要素） */
:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* 画像のデフォルト */
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* リンク */
a {
  color: var(--color-primary-light);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--color-accent-light);
}

/* リスト */
ul,
ol {
  list-style: none;
}

/* ボタンリセット */
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* テーブルリセット */
table {
  border-collapse: collapse;
  width: 100%;
}

/* プリフォームド要素 */
pre,
code {
  font-family: 'Courier New', Courier, monospace;
}

/* 等幅数字（価格・テーブル） */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* モーション低減対応 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   3. レイアウトユーティリティ
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* セクション共通 */
.section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.section--compact {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

@media (max-width: 767px) {
  .section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
}

/* ============================================================
   4. タイポグラフィユーティリティ
   ============================================================ */
.heading-xl {
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.heading-lg {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

.heading-md {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

.heading-sm {
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-muted {
  color: var(--color-text-secondary);
}

/* ============================================================
   5. 背景テクスチャ（ページ全体の雰囲気作り）
   ============================================================ */
.bg-glow-top::before {
  content: '';
  position: fixed;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 60vw;
  max-width: 900px;
  max-height: 700px;
  background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: var(--z-base);
}

/* ============================================================
   6. カードコンポーネント
   ============================================================ */
.card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--glow-primary);
}

.card--featured {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-tertiary));
  box-shadow: var(--glow-primary);
}

/* ============================================================
   7. バッジコンポーネント
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge--primary {
  background: rgba(124, 58, 237, 0.2);
  color: var(--color-primary-light);
  border: 1px solid rgba(124, 58, 237, 0.4);
}

.badge--accent {
  background: rgba(245, 158, 11, 0.2);
  color: var(--color-accent-light);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.badge--success {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.badge--required {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
  text-transform: none;
  font-size: var(--text-xs);
}

.badge--optional {
  background: rgba(100, 116, 139, 0.2);
  color: var(--color-text-secondary);
  border: 1px solid rgba(100, 116, 139, 0.3);
  text-transform: none;
  font-size: var(--text-xs);
}

/* ============================================================
   8. セクション見出しパターン
   ============================================================ */
.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-header__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: var(--space-3);
}

.section-header__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.section-header__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 680px;
  margin: 0 auto;
}

/* ============================================================
   9. CTAバナー（全ページ共通）
   ============================================================ */
.cta-banner {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(91, 33, 182, 0.3));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-16) var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, 0.2), transparent 70%);
  pointer-events: none;
}

.cta-banner__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  position: relative;
}

.cta-banner__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: var(--leading-relaxed);
  position: relative;
}

.cta-banner__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}

/* ============================================================
   10. パンくずリスト
   ============================================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  flex-wrap: wrap;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb__item a {
  color: var(--color-text-secondary);
  transition: color var(--duration-fast);
}

.breadcrumb__item a:hover {
  color: var(--color-text-primary);
}

.breadcrumb__separator {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* ============================================================
   11. ページヘッダー（機能・料金・FAQ・お問い合わせ共通）
   ============================================================ */
.page-header {
  padding: var(--space-16) 0 var(--space-12);
  border-bottom: 1px solid var(--color-border-subtle);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.06) 0%, transparent 100%);
}

.page-header__breadcrumb {
  margin-bottom: var(--space-4);
}

.page-header__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.page-header__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 720px;
}

/* ============================================================
   12. チェックリストアイテム
   ============================================================ */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.check-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.check-list__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--color-success);
}

/* ============================================================
   13. テーブルスタイル
   ============================================================ */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table th {
  background: var(--color-bg-tertiary);
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border-subtle);
}

.data-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
  font-variant-numeric: tabular-nums;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: rgba(124, 58, 237, 0.04);
}

.data-table td.highlight {
  color: var(--color-accent);
  font-weight: var(--font-semibold);
}

/* ============================================================
   14. インフォメーションボックス
   ============================================================ */
.info-box {
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.info-box--accent {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
  border-left-color: var(--color-accent);
}

.info-box--success {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
  border-left-color: var(--color-success);
}

/* ============================================================
   15. スクロールアンカーオフセット補正
   ============================================================ */
[id] {
  scroll-margin-top: 80px;
}

/* ============================================================
   16. アンカーナビゲーション (スティッキー)
   ============================================================ */
.anchor-nav {
  position: sticky;
  top: 72px;
  z-index: var(--z-content);
  background: rgba(15, 15, 26, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-3) 0;
}

.anchor-nav__inner {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--container-padding);
  max-width: var(--container-max);
  margin: 0 auto;
}

.anchor-nav__inner::-webkit-scrollbar {
  display: none;
}

.anchor-nav__link {
  display: block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-white);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast), background var(--duration-fast);
}

.anchor-nav__link:hover,
.anchor-nav__link.is-active {
  color: var(--color-text-muted);
  background: rgba(124, 58, 237, 0.12);
}

/* ============================================================
   17. ページネーション
   ============================================================ */
.pagination {
  margin: 1em 0;
}

.pagination:after,
.pagination ul:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

.pagination ul {
  display: flex;
}

.pagination li {
  list-style: none outside none;
  margin-left: 3px;
}

.pagination li:first-child {
  margin-left: 0;
}

.pagination li .current {
  display: block;
  border-radius: var(--radius);
  padding: 10px 20px;
  color: var(--color-text-white);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  cursor: not-allowed;
}

.pagination li a {
  border-radius: var(--radius);
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  border: 1px solid var(--color-primary);
}

.pagination li a:hover {
  transition-property: all;
  transition-timing-function: ease;
  color: var(--color-text-white);
  background: var(--color-primary);
}
/* ============================================================
   トップページ
 ============================================================ */
.trust-bar{background:var(--color-bg-secondary);border-top:1px solid var(--color-border-subtle);border-bottom:1px solid var(--color-border-subtle);padding:var(--space-6) 0}
.trust-bar__inner{display:flex;align-items:center;justify-content:center;gap:var(--space-10);flex-wrap:wrap}
.trust-bar__item{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-secondary);white-space:nowrap}
.trust-bar__item-icon{width:20px;height:20px;color:var(--color-primary-light);flex-shrink:0}
.trust-bar__item-value{color:var(--color-text-primary);font-weight:var(--font-semibold)}
.trust-bar__note{text-align:center;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-4)}
@media(max-width:767px){.trust-bar__inner{gap:var(--space-5);justify-content:flex-start;overflow-x:auto;padding-bottom:var(--space-2);-webkit-overflow-scrolling:touch}}
.problem-section__inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:start}
.problem-list{display:flex;flex-direction:column;gap:var(--space-4);list-style:none}
.problem-list__item{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--text-base);color:var(--color-text-secondary);line-height:var(--leading-relaxed);padding:var(--space-4);background:rgba(239,68,68,0.04);border:1px solid rgba(239,68,68,0.1);border-radius:var(--radius)}
.problem-list__icon{width:20px;height:20px;color:#ef4444;flex-shrink:0;margin-top:1px}
.problem-resolve{border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-10);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.problem-resolve__title{font-size:var(--text-2xl);font-weight:var(--font-bold);line-height:var(--leading-tight)}
.problem-resolve__body{font-size:var(--text-base);color:var(--color-text-secondary);line-height:var(--leading-relaxed)}
@media(max-width:1023px){.problem-section__inner{grid-template-columns:1fr;gap:var(--space-10)}}
.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
@media(max-width:1023px){.solution-grid{grid-template-columns:1fr}}
.demo-section__inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center}
.demo-mockup{width:100%;aspect-ratio:1/1;background:#000;border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated),var(--glow-primary);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.demo-mockup__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-8);text-align:center}
.demo-mockup__label{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}
.demo-mockup__icon{width:64px;height:64px;background:linear-gradient(135deg,rgba(124,58,237,0.3),rgba(245,158,11,0.2));border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-accent)}
.demo-mockup__icon svg{width:32px;height:32px}
.demo-mockup__title{font-size:var(--text-lg);font-weight:var(--font-bold)}
.demo-mockup__subtitle{font-size:var(--text-sm);color:var(--color-text-secondary)}
@media(max-width:1023px){
.demo-section__inner{grid-template-columns:1fr;gap:var(--space-10)}
.demo-mockup{max-width:480px;margin:0 auto}}
.feature-highlight-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)
}
@media(max-width:1023px){.feature-highlight-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){
  .demo-mockup{aspect-ratio:9/16;max-width:300px;margin:0 auto}
  .feature-highlight-grid{grid-template-columns:1fr}
  .video-container video{max-width:260px;}
}
.pricing-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
@media(max-width:767px){.pricing-overview-grid{grid-template-columns:1fr}}
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
@media(max-width:767px){.trust-grid{grid-template-columns:1fr}}
[data-animate]{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
[data-animate].is-visible{opacity:1;transform:translateY(0)}
[data-animate-delay="1"]{transition-delay:.1s}[data-animate-delay="2"]{transition-delay:.2s}[data-animate-delay="3"]{transition-delay:.3s}[data-animate-delay="4"]{transition-delay:.4s}[data-animate-delay="5"]{transition-delay:.5s}[data-animate-delay="6"]{transition-delay:.6s}[data-animate-delay="7"]{transition-delay:.7s}[data-animate-delay="8"]{transition-delay:.8s}
@media(prefers-reduced-motion:reduce){[data-animate]{opacity:1;transform:none;transition:none}}

/* ============================================================
  機能ページ
 ============================================================ */
[data-animate]{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
[data-animate].is-visible{opacity:1;transform:translateY(0)}
[data-animate-delay="1"]{transition-delay:.1s}[data-animate-delay="2"]{transition-delay:.2s}[data-animate-delay="3"]{transition-delay:.3s}[data-animate-delay="4"]{transition-delay:.4s}[data-animate-delay="5"]{transition-delay:.5s}[data-animate-delay="6"]{transition-delay:.6s}
.feature-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
@media(max-width:767px){.feature-grid-2{grid-template-columns:1fr}}
.features-section{border-top:1px solid var(--color-border-subtle)}
.features-section:nth-child(even){background:var(--color-bg-secondary)}
.content-type-list{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-8)}
.content-type-item{display:flex;align-items:center;gap:var(--space-2);background:rgba(124,58,237,.1);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-primary)}
.content-type-item svg{width:16px;height:16px;color:var(--color-primary-light)}
.enduser-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);list-style:none}
.enduser-list__item{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-normal)}
.enduser-list__item svg{width:16px;height:16px;color:var(--color-success);flex-shrink:0;margin-top:2px}
@media(max-width:767px){.enduser-list{grid-template-columns:1fr}}

/* ============================================================
  料金ページ
 ============================================================ */
[data-animate]{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
[data-animate].is-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){[data-animate]{opacity:1;transform:none;transition:none}}
.plan-selector-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-bottom:var(--space-14)}
@media(max-width:767px){.plan-selector-grid{grid-template-columns:1fr}}
.plan-selector-card__badge{display:inline-block;font-size:var(--text-xs);font-weight:var(--font-bold);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);margin-bottom:var(--space-4)}
.plan-selector-card__badge.plan-onpremise{background:rgba(124,58,237,.15);color:var(--color-primary-light)}
.plan-selector-card__badge.plan-subscription{background:rgba(245,158,11,.15);color:#f59e0b}
.comparison-section{border-radius:var(--radius-2xl);}
.comparison-title{font-size:clamp(var(--text-xl),3vw,var(--text-2xl));font-weight:var(--font-bold);color:var(--color-text-primary);margin-bottom:var(--space-2);text-align:center}
.comparison-subtitle{font-size:var(--text-sm);color:var(--color-text-secondary);text-align:center;margin-bottom:var(--space-8)}
.comparison-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.comparison-table th,.comparison-table td{padding:var(--space-3) var(--space-4);text-align:right;border-bottom:1px solid var(--color-border-subtle)}
.comparison-table th:first-child,.comparison-table td:first-child{text-align:left}
.comparison-table thead th{font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}
.comparison-table .comparison-highlight{color:var(--color-success);font-weight:var(--font-bold)}
.comparison-table .comparison-total-row td{font-weight:var(--font-bold);border-top:2px solid var(--color-border);border-bottom:none;padding-top:var(--space-4)}
.comparison-table .comparison-total-row .comparison-highlight{font-size:var(--text-base);color:var(--color-success)}
.plan-detail-section{margin-bottom:var(--space-14);scroll-margin-top:160px}
.plan-detail-section__header{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-10)}
.plan-detail-section__badge{font-size:var(--text-xs);font-weight:var(--font-bold);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full)}
.plan-detail-section__title{font-size:clamp(var(--text-xl),3vw,var(--text-2xl));font-weight:var(--font-bold);color:var(--color-text-primary);line-height:var(--leading-tight)}
.plan-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
@media(max-width:1023px){.plan-detail-grid{grid-template-columns:1fr}}
.plan-detail-table-card{background:var(--color-bg-card);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);overflow:hidden}
.plan-detail-table-card__heading{padding:var(--space-4) var(--space-5);background:var(--color-primary);border-bottom:1px solid var(--color-border-subtle);font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-text-white)}
.plan-detail-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.plan-detail-table tr{border-bottom:1px solid var(--color-border-subtle)}
.plan-detail-table tr:last-child{border-bottom:none}
.plan-detail-table td{padding:var(--space-3) var(--space-5);color:var(--color-text-secondary);line-height:var(--leading-normal);vertical-align:top}
.plan-detail-table td:first-child{color:var(--color-text-muted);white-space:nowrap;padding-right:var(--space-3)}
.plan-detail-table td:last-child{color:var(--color-text-primary);text-align:right}
.plan-comparison-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.plan-comparison-table th,.plan-comparison-table td{padding:var(--space-3) var(--space-4);text-align:center;border-bottom:1px solid var(--color-border-subtle)}
.plan-comparison-table th:first-child,.plan-comparison-table td:first-child{text-align:left;font-weight:var(--font-medium);color:var(--color-text-secondary)}
.plan-comparison-table thead th{background:var(--color-bg-secondary);font-size:var(--text-xs);font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}
.plan-comparison-table .check{color:var(--color-success)}.plan-comparison-table .cross{color:var(--color-text-muted);opacity:.4}
.plan-comparison-table .plan-col-subscription{background:rgba(124,58,237,.05)}
.plan-comparison-table .plan-col-onpremise{background:rgba(245,158,11,.05)}
.growth-section{margin-bottom:var(--space-14)}
.growth-steps{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}
.growth-step{flex:1;min-width:160px;max-width:220px;background:var(--color-bg-card);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);padding:var(--space-6);text-align:center;position:relative}
.growth-step__number{font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--color-primary-light);letter-spacing:.1em;margin-bottom:var(--space-2)}
.growth-step__title{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-text-primary);margin-bottom:var(--space-2)}
.growth-step__price{font-size:var(--text-lg);font-weight:var(--font-extrabold);color:var(--color-text-primary)}
.growth-step__note{font-size:10px;color:var(--color-text-muted);margin-top:4px}
.growth-arrow{font-size:var(--text-lg);color:var(--color-text-muted);padding:0 var(--space-2);flex-shrink:0}
@media(max-width:767px){.growth-steps{flex-direction:column}.growth-arrow{transform:rotate(90deg)}}
.subsidy-box{background:linear-gradient(135deg,rgba(16,185,129,.1) 0%,rgba(124,58,237,.1) 100%);border:1px solid rgba(16,185,129,.3);border-radius:var(--radius-2xl);padding:var(--space-8);margin-bottom:var(--space-14)}
.subsidy-box__badge{display:inline-block;background:rgba(16,185,129,.2);color:#10b981;font-size:var(--text-xs);font-weight:var(--font-bold);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);margin-bottom:var(--space-4)}
.subsidy-box__title{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-text-primary);margin-bottom:var(--space-3)}
.subsidy-box__text{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-relaxed);margin-bottom:var(--space-5)}
.info-box{background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.2);border-radius:var(--radius-lg);padding:var(--space-5)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}   

/* ============================================================
  faqページ
 ============================================================ */
  [data-animate]{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
[data-animate].is-visible{opacity:1;transform:translateY(0)}
.faq-section{padding:var(--space-14) 0;border-top:1px solid var(--color-border-subtle)}
.faq-section:nth-child(even){background:var(--color-bg-secondary)}
.faq-section__heading-area{margin-bottom:var(--space-8)}
.faq-section__category-label{display:inline-block;font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-primary-light);letter-spacing:.05em;text-transform:uppercase;margin-bottom:var(--space-2)}
.faq-section__title{font-size:clamp(var(--text-xl),3vw,var(--text-2xl));font-weight:var(--font-bold);color:var(--color-text-primary);margin-bottom:var(--space-3);line-height:var(--leading-tight)}
.faq-section__intro{font-size:var(--text-base);color:var(--color-text-secondary);line-height:var(--leading-relaxed);max-width:640px}
.faq-list{display:flex;flex-direction:column;gap:var(--space-2)}
.faq-accordion{background:var(--color-bg-card);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--duration-fast)}
.faq-accordion:has(.faq-accordion__trigger[aria-expanded="true"]){border-color:rgba(124,58,237,.3)}
.faq-accordion__trigger{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-6);background:transparent;border:none;cursor:pointer;text-align:left;color:var(--color-text-primary);font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--font-medium);line-height:var(--leading-normal);transition:background var(--duration-fast)}
.faq-accordion__trigger:hover{background:rgba(255,255,255,.03)}
.faq-accordion__trigger:focus-visible{outline:2px solid var(--color-primary-light);outline-offset:-2px}
.faq-accordion__q-prefix{flex-shrink:0;font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-primary-light);margin-top:2px}
.faq-accordion__q-text{flex:1}
.faq-accordion__icon{flex-shrink:0;width:20px;height:20px;color:var(--color-text-muted);transition:transform var(--duration-normal) var(--ease-out)}
.faq-accordion__trigger[aria-expanded="true"] .faq-accordion__icon{transform:rotate(180deg);color:var(--color-primary-light)}
.faq-accordion__panel{max-height:0;overflow:hidden;transition:max-height .3s ease-out}
.faq-accordion__panel[hidden]{display:block}
.faq-accordion__body{padding:0 var(--space-6) var(--space-5) var(--space-12);font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-relaxed)}
@media(max-width:767px){.faq-accordion__trigger{padding:var(--space-4) var(--space-5)}.faq-accordion__body{padding:0 var(--space-5) var(--space-4) var(--space-10)}}
.faq-accordion__body p{margin-bottom:var(--space-3)}.faq-accordion__body p:last-child{margin-bottom:0}
.faq-accordion__body a{color:var(--color-primary-light);text-decoration:underline;text-underline-offset:3px}
.faq-accordion__body a:hover{text-decoration:none}
.faq-accordion__related{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-border-subtle);font-size:var(--text-sm)}

/* ============================================================
  contactページ
 ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-10);
  align-items: start
}

@media(max-width:1023px) {
  .contact-layout {
    grid-template-columns: 1fr
  }
}

.contact-support {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-2xl);
  padding: var(--space-6)
}

.contact-support__title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
  text-transform: uppercase;
  letter-spacing: .05em
}

.contact-support__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5)
}

.contact-support__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3)
}

.contact-support__item-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: rgba(124, 58, 237, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary-light)
}

.contact-support__item-icon svg {
  width: 18px;
  height: 18px
}

.contact-support__item-content {}

.contact-support__item-title {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  margin-bottom: 2px
}

.contact-support__item-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed)
}

.contact-support__no-spam {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed)
}

/* ============================================================
  postページ
 ============================================================ */
 .type-post h1,
 .type-post h2,
 .type-post h3,
 .type-post h4,
 .type-post h5,
 .type-post h6{
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
 }
 .type-post p{
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
 }