/* =========================================================
   tokens.css ─ サイト全体の「色・文字・余白」の設定
   ここの数値を変えると、サイト全体の見た目がまとめて変わります。
   ========================================================= */
:root {
  /* ---- 色 ---- */
  --color-navy: #1c2a4b;        /* 見出し・基本の文字色 */
  --color-text: #3d4456;        /* 本文 */
  --color-text-sub: #6b7285;    /* 補足・日付 */
  --color-pink: #cb609f;        /* メインアクセント（ボタン・強調） */
  --color-pink-light: #f8e9f2;  /* ピンクの淡色（タグ背景） */
  --color-pink-border: #eabfd9; /* ピンクの中間色（丸い矢印の枠線） */
  --color-pink-shadow: rgba(203, 96, 159, 0.15); /* ピンクの影 */
  --color-green: #1faa59;       /* LINE・チェック */
  --color-green-light: #e8f6ec;
  --color-leaf: #8db045;        /* 理由1・3の数字 */
  --color-sky: #2aa4e0;         /* 英字ラベル・地域情報タグ */
  --color-sky-light: #e3f2fb;
  --color-bg: #ffffff;
  --color-bg-soft: #f2f8fd;     /* 薄い水色の背景 */
  --color-line: #e6e9ef;        /* 区切り線 */
  --color-brown: #5a3d26;       /* フッター */

  /* ---- 文字（フォント） ---- */
  --font-sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --font-serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-hand: "Zen Kurenaido", "Klee One", cursive;      /* 手書き風の添え書き */
  --font-en: "Cormorant Garamond", "Times New Roman", serif; /* 数字・英字ラベル */
  --font-script: "Caveat", cursive;                         /* 筆記体の英字 */

  /* ---- 文字サイズ（高齢の方にも読みやすい大きさ） ---- */
  --fs-body: 18px;    /* 本文 */
  --fs-small: 16px;   /* 補足・小さめの文 */
  --fs-xsmall: 14px;  /* いちばん小さい文字（これより小さくしない） */

  /* ---- レイアウト ---- */
  --container: 1120px;          /* コンテンツの最大幅 */
  --container-wide: 1240px;
  --gutter: 24px;               /* 画面の左右の余白 */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 28px rgba(40, 90, 140, 0.10);
  --section-space: 120px;       /* セクションの上下余白 */
}

@media (max-width: 768px) {
  :root {
    --gutter: 18px;
    --section-space: 72px;
    --fs-body: 17px;
    --fs-small: 15px;
    --fs-xsmall: 14px;
  }
}