/* ==========================================================
   デザイントークン（ここだけ変えれば全体の見た目が変わります）
   ========================================================== */
:root {
  /* --- ブランドカラー --- */
  --color-primary: #14503f;        /* ボタン・強調（ディープグリーン） */
  --color-primary-contrast: #fdf8f5; /* primaryの上の文字色 */
  --color-accent: #7fcdbd;         /* ロゴ・アクセント（ミント） */

  /* --- 背景色 --- */
  --color-background: #fdf8f5;     /* 基本の背景（クリーム） */
  --color-bg-mint: #e3f6f4;        /* ミント背景セクション */
  --color-bg-peach: #fbf3eb;       /* ピーチ背景セクション */
  --color-bg-gray: #e5e1de;        /* グレー背景セクション・フッター */
  --color-surface: #fdf9f6;        /* カードの背景 */

  /* --- 文字色 --- */
  --color-text: #2f5668;           /* 本文・見出し */
  --color-text-muted: #6b8793;     /* 補足文字 */
  --color-on-image: #fdf8f5;       /* 写真の上の文字 */
  --color-line: #8aa1ac;           /* 罫線 */
  --color-question-bg: #ffffff;    /* FAQの質問欄の背景 */
  --color-question-mark: #14503f;  /* 「Q.」の色 */

  /* --- フォント --- */
  --font-heading: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-ui: "Noto Serif JP", "Hiragino Mincho ProN", serif; /* ボタン・メニュー */

  /* --- 文字サイズ（スマホ基準。画面幅に合わせて自然に変化） --- */
  --size-hero-title: clamp(2.6rem, 11vw, 5.5rem);
  --size-hero-sub: clamp(1.25rem, 5vw, 2rem);
  --size-h2: clamp(1.75rem, 7vw, 3rem);
  --size-h3: clamp(1.15rem, 4.6vw, 1.5rem);
  --size-body: 1rem;               /* 16px */
  --size-small: 0.875rem;
  --line-body: 1.9;
  --line-heading: 1.45;

  /* --- 角丸 --- */
  --radius-small: 4px;
  --radius-medium: 12px;
  --radius-large: 28px;
  --radius-button: 999px;          /* ボタンの形（999px=丸型 / 8px=四角寄り） */

  /* --- 余白 --- */
  --space-page-x: 22px;            /* 画面左右の余白 */
  --space-section-mobile: 56px;    /* セクション上下（スマホ） */
  --space-section-desktop: 104px;  /* セクション上下（PC） */
  --space-section: var(--space-section-mobile);
  --space-card-gap: 16px;          /* カード同士の間隔 */
  --space-card-padding: 24px;      /* カード内側の余白 */

  /* --- レイアウト --- */
  --content-max-width: 1120px;     /* コンテンツ最大幅 */
  --text-max-width: 760px;         /* 読み物の最大幅 */
  --header-height: 64px;
  --button-height: 52px;           /* タップしやすい高さ（44px以上） */
  --color-map-fill: #bfe3dc;       /* 「Future Careについて」の日本地図の色 */
  --color-map-stroke: #ffffff;     /* 地図の県境の線 */
  --shadow-card: 0 1px 3px rgba(47, 86, 104, 0.12);
  --shadow-header: 0 4px 18px rgba(20, 60, 50, 0.18);
}

/* タブレット以上で余白を広げる */
@media (min-width: 768px) {
  :root {
    --space-page-x: 40px;
    --space-section: 80px;
    --space-card-gap: 24px;
    --space-card-padding: 32px;
    --header-height: 72px;
  }
}
@media (min-width: 1024px) {
  :root {
    --space-section: var(--space-section-desktop);
    --space-page-x: 48px;
  }
}