/* ==========================================================================
   変数指定
   ========================================================================== */
:root {
  /* フォントサイズ */
  --heading-XL: 24px;
  --heading-L: 20px;
  --heading-M: 18px;
  --heading-S: 16px;
  --text-L: 16px;
  --text-M: 14px;
  --text-S: 12px;
  --text-XS: 10px;
  
  /* 余白（統一） */
  --spacing-XXL: 80px;
  --spacing-XL: 48px;
  --spacing-L: 32px;
  --spacing-M: 24px;
  --spacing-S: 20px;
  --spacing-XS: 16px;
  --spacing-XXS: 12px;
  --spacing-XXXS: 8px;
  
  /* カラー変数 */
  --color-text-primary: #333;
  --color-text-secondary: #666;
  --color-text-error: #c00;
  --color-bg-white: #fff;
  --color-bg-light: #f9f9f9;
  --color-border-dark: #333;
  --color-border-medium: #c5c4c5;
  --color-border-light: #ddd;
  --color-border-lighter: #e0e0e0;
  --color-focus: #4A90E2;
}
@media (max-width: 768px) {
  :root {
    /* フォントサイズ（SP） */

  --heading-XL: 20px;
  --heading-L: 18px;
  --heading-M: 16px;
  --heading-S: 14px;
  --text-L: 16px;
  --text-M: 14px;
  --text-S: 10px;
  --text-XS: 8px;
    
    /* 余白（SP） */
    --spacing-XXL: 64px;
    --spacing-XL: 40px;
    --spacing-L: 24px;
    --spacing-M: 20px;
    --spacing-S: 16px;
    --spacing-XS: 12px;
    --spacing-XXS: 8px;
    --spacing-XXXS: 4px;
  }  
  }