/**
 * ============================================================
 * variables.css - デザイン変数（Design Tokens）
 * ============================================================
 * ■ デザイナー向け: ここを編集するとサイト全体の色・フォント・余白が一括で変わります
 * ■ 編集のしかた: 右辺の値（#5ba4b5 や 1rem 等）を変更してください
 * ■ 変数の参照: 他のCSSファイルで var(--primary) のように使われています
 *
 * ⚠ 変数名（--primary など）は変更しないでください。
 *   変数名を変えると他のCSSで参照できなくなります。
 * ============================================================
 */

:root {
  /* ===== テーマカラー ===== */
  /* サイト全体のメインカラー（ヘッダー背景・ボタン・リンク等に使用） */
  --primary: #18d4de;
  /* メインカラーの薄い版（ホバー背景・アクティブ状態等） */
  --primary-light: #e8f4f7;
  /* メインカラーの濃い版（フッター背景・見出し等） */
  --primary-dark: #3d8a9b;
  /* 標準テキスト色 */
  --text: #333;
  /* 薄いテキスト色（サブテキスト・メモ等） */
  --text-light: #666;
  /* ページ背景色 */
  --bg: #fff;
  /* セクション背景（薄いグレー） */
  --bg-gray: #f5f5f5;
  /* 罫線・ボーダー色 */
  --border: #ddd;
  /* コンテンツ最大幅（これ以上広がらない） */
  --max-width: 1920px;

  /* ===== Bootstrap互換カラー（ボタン等で使用） ===== */
  --color-primary: #5ba4b5;
  --color-primary-hover: #3d8a9b;
  --color-secondary: #6c757d;
  --color-success: #198754;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-line: #2e8b57;

  --color-text: #212529;
  --color-text-muted: #6c757d;
  --color-bg: #ffffff;
  --color-bg-muted: #f8f9fa;
  --color-border: #dee2e6;

  /* ===== ヘッダー・フッター ===== */
  --header-bg: #ffffff;      /* ヘッダー背景色 */
  --header-border: #ddd;     /* ヘッダー下ボーダー色 */
  --header-text: #333;       /* ヘッダーテキスト色 */
  --footer-bg: #3d8a9b;      /* フッター背景色 */
  --footer-text: rgba(255,255,255,.7); /* フッターテキスト色 */

  /* ===== タイポグラフィ ===== */
  /* 基本フォント（日本語Webフォント優先） */
  --font-family-base: "游ゴシック", "Yu Gothic", YuGothic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-size-base: 1rem;      /* 基本文字サイズ（= 16px） */
  --font-size-sm: 0.875rem;    /* 小さい文字（= 14px） */
  --font-size-lg: 1.25rem;     /* 大きい文字（= 20px） */
  --font-weight-normal: 400;   /* 標準ウェイト */
  --font-weight-bold: 700;     /* 太字 */
  --line-height-base: 1.5;     /* 行間 */

  /* ===== スペーシング（余白）===== */
  /* ↓ padding や margin で var(--spacing-md) のように使います */
  --spacing-xs: 0.25rem;   /* 4px  - 極小余白 */
  --spacing-sm: 0.5rem;    /* 8px  - 小余白 */
  --spacing-md: 1rem;      /* 16px - 標準余白 */
  --spacing-lg: 1.5rem;    /* 24px - 大余白 */
  --spacing-xl: 2rem;      /* 32px - 特大余白 */
  --spacing-xxl: 3rem;     /* 48px - 超特大余白 */

  /* コンテナ最大幅（サイト内のコンテンツエリア） */
  --container-max: 1140px;
  --container-padding: 1rem;

  /* ===== ボーダー・シャドウ ===== */
  --border-radius: 0.375rem;   /* 角丸（小） */
  --border-radius-lg: 0.5rem;  /* 角丸（大） */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);  /* 薄い影 */
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);        /* 標準の影 */
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);         /* 濃い影 */

  /* ===== アニメーション（トランジション）===== */
  --transition-fast: 0.15s ease;  /* 素早いアニメーション */
  --transition-base: 0.2s ease;   /* 標準アニメーション */
}