/* ============================================
   ブレークポイント（参照用・メディアクエリには直接使えない）
   ヘッダー切り替え: SP 〜1130px / PC 1131px〜
   コンテンツ: 別途設定
============================================ */

:root {
  /* ============================================
     カラー
  ============================================ */

  /* 背景 */
  --color-bg: #ffffff;
  --color-bg-gray: #efefef;
  --color-bg-subtle: #f7f8f8;

  /* テキスト */
  --color-text: #333333;
  --color-text-gray: #eeeeee;
  --color-text-gray-dark: #8b8d94;
  --color-text-light: #666666;
  --color-text-white: #ffffff;

  /* メインカラー（赤） */
  --color-primary: #e60012;
  --color-primary-dark: #b8000e; /* ホバー・押下時 */
  --color-primary-light: #ff4d5a; /* アクセント・バッジ等 */
  --color-primary-pale: #fde8ea; /* 背景に薄く使う用 */
  --color-primary-overlay: rgba(230, 0, 18, 0.2);

  /* ボーダー */
  --color-border: #e0e0e0;
  --color-border-dark: #cccccc;
  --color-border-gray-dark: #8b8d94;

  /* ============================================
     フォント
  ============================================ */

  --font-family-base: 'Noto Sans JP', YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --font-family-en: 'Roboto', Helvetica, Arial, sans-serif;
  --font-family-sans: 'Open Sans', Helvetica, Arial, sans-serif;
  --font-family-arial:
    'Arial', YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ ゴシック', sans-serif;

  /* フォントサイズ（SP基準） */
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-xxl: 24px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-base: 1.7;
  --line-height-tight: 1.4;
  --line-height-loose: 1.8;

  /* ============================================
     余白
  ============================================ */

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-xxl: 64px;

  /* ============================================
     レイアウト
  ============================================ */

  --container-width: 1400px;
  --container-padding: 20px;

  /* ブレークポイント（参照用・メディアクエリには直接使えない） */
  /* SP: 〜767px / PC: 768px〜 */

  /* ============================================
     その他
  ============================================ */

  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --transition-base: 0.2s ease;
}

/* ============================================
   PC（768px〜）でのフォントサイズ上書き
============================================ */
@media (min-width: 768px) {
  :root {
    --font-size-base: 16px;
    --font-size-sm: 13px;
  }
}