:root {
  /* ===========================
     Color Palette
     =========================== */
  --color-primary: #333333;          /* 基本文字色 */
  --color-secondary: #555555;        /* サブテキスト */
  --color-text-main: #222222;        /* 本文 */
  --color-accent: #c94f4f;           /* 強調色（CTAなど） */
  --color-bg-light: #f7f7f7;         /* 薄い背景 */
  --color-bg-dark: #1a1a1a;          /* ダーク背景 */
  --color-border: #e5e5e5;           /* ボーダー */

  /* ===========================
     Font Size Scale
     （LPで使う黄金比スケール）
     =========================== */
  --font-xxxs: 0.8rem;   /* スマホの小さな補足 */
  --font-xxs: 1.0rem;   /* スマホ */
  --font-xs: 1.2rem;   /* 小さな補足 */
  --font-sm: 1.4rem;   /* キャプション */
  --font-md: 1.6rem;   /* 本文（基本） */
  --font-lg: 2.0rem;   /* 小見出し */
  --font-xl: 2.4rem;   /* 中見出し */
  --font-xxl: 3.2rem;  /* 大見出し（Hero） */
  --font-xxxl: 4.0rem; /* 特大見出し（LP冒頭） */

  /* ===========================
     Spacing Scale
     （セクション・ブロック・テキスト）
     =========================== */
  --space-xxs: 0.4rem;
  --space-xs: 0.8rem;
  --space-sm: 1.2rem;
  --space-md: 2.0rem;
  --space-lg: 3.2rem;
  --space-xl: 4.8rem;
  --space-xxl: 6.4rem;
  --space-xxxl: 9.6rem;

  /* 意味のある余白（実務向け） */
  --space-text: var(--space-sm);        /* テキスト下の余白 */
  --space-block: var(--space-xl);       /* ブロック間の余白 */
  --space-section: var(--space-xxxl);   /* セクション間の余白 */

  /* ===========================
     Layout
     =========================== */
  --container-width: 1200px;
  --container-padding: 5%;

  /* ===========================
     Breakpoints
     =========================== */
  --bp-sp: 768px;
  --bp-tab: 1024px;

  /* ===========================
     problem（悩みのチェックマーク）
     =========================== */
  --problem-check-color: var(--color-accent);
}