/*
 * ブレークポイント: 768px以上 = PC / 767px以下 = SP（モバイルファースト）
 * CSSカスタムプロパティは @media の条件式には使えないため、
 * 各CSSファイルで下記の値を直接メディアクエリに指定する。
 *   SP: @media (max-width: 767px) { ... }
 *   PC: @media (min-width: 768px) { ... }
 */

:root {
  /* カラー（Figma変数より） */
  --color-primary: #e60012;
  --color-primary-light: #fbd1d3;
  --color-text: #2e2e2e;
  --color-text-sub: #707070;
  --color-white: #ffffff;

  /* 女性コースのキーカラー */
  --color-women: #fb629a;
  --color-women-light: #ffecf3;
  --color-women-pale: #ffdae8;
  /* ジュニアコースのキーカラー */
  --color-junior: #ff7f24;
  --color-junior-light: #ffe9da;
  --color-junior-bg: #ffede7;

  /* お誕生前コースのキーカラー */
  --color-birth: #fbbf1c;
  --color-birth-light: #fef2d2;
  --color-birth-bg: #fff8e5;

  /* 上乗せ保障バナー・上乗せ保障セクションのキーカラー */
  --color-addon: #43d8cb;
  --color-addon-light: #e5faf8;
  --color-addon-bg: #e5f3f1;

  /* 加入方法セクションのキーカラー（Web導線=赤 / Web以外=オレンジ / 未加入者=緑）
     --color-join-web / --color-join-web-pale は安心材料セクションでも同色で使う */
  --color-join-web: #ff5a5a;
  --color-join-web-light: #ffb0b0;
  --color-join-web-pale: #ffeded;
  --color-join-offline: #fe913d;
  --color-join-offline-light: #ffd5b5;
  --color-join-member: #67c275;
  --color-join-member-light: #c8ebcc;

  /* ページ全体の下地（Figma フレームの塗り） */
  --color-page-bg: #fff3f6;

  /* フォント */
  --font-family-base: 'Zen Kaku Gothic New', sans-serif;
  /* 英字のみの表記（ヘッダーの MENU など）で Figma が Inter を指定している */
  --font-family-en: 'Inter', sans-serif;
  /* 「顧客満足度第1位」の数字に Figma が Libre Baskerville を指定している */
  --font-family-serif-en: 'Libre Baskerville', serif;
}