/*
 * テンプレート③ テーマトークン
 * STUDIOテンプレート（preview.studio.site/templates/r1pqDK6Ojv）を 2026-11-11 に computed style で実測。
 */
:root {
  /* Color */
  --c-bg: #f4f1eb;            /* ページ背景（アイボリー） rgb(244,241,235) */
  --c-card: #f8f7f5;          /* PLANカード rgb(248,247,245) */
  --c-brown: #7d6451;         /* ボタン・TRAINERカード・フッター rgb(125,100,81) */
  --c-text: #212821;          /* 本文 rgb(33,40,33) */
  --c-line: #cccccc;          /* PLAN横罫線 rgb(204,204,204) */
  --c-white: #ffffff;
  --c-glass: rgba(244, 241, 235, .4);  /* SP固定ヘッダー（blur 16px） */
  --c-beige: #e6dfd4;         /* 補助色（バッジ・入力欄の枠など。テンプレートに無いため配色から派生） */
  --c-error: #b3261e;

  /* Font */
  --ff-en: "Montserrat", "Noto Sans JP", sans-serif;
  --ff-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  /* Type（PC実測） */
  --fs-sec-en: 48px;          /* CONCEPT / PLAN / TRAINER：Montserrat 400 ls .03em */
  --fs-sec-ja: 14px;
  --fs-fv: 47px;              /* FV見出し 400 lh 1.6 白 */
  --fs-catch: 36px;           /* CONCEPTのキャッチ 400 lh 1.6 ls .03em */
  --fs-body: 16px;            /* 本文 lh 2.4 ls .03em */
  --lh-body: 2.2;
  --fs-small: 15px;           /* 特徴・カード本文（テンプレートは14px。可読性のため15px） */
  --fs-nav: 16px;             /* Montserrat 500 */

  /* Layout */
  --side: 80px;               /* 左右余白 */
  --sidebar-w: 266px;         /* サイドバー幅（x=80〜346） */
  --fv-h: 864px;
  --fv-radius: 64px;          /* FV写真の左下角丸 */
  --radius-img: 16px;
  --radius-card: 32px;        /* PLANカード */
  --radius-trainer: 20px;     /* TRAINERカード */
  --radius-btn: 4px;
  --sec-pad: 160px;
}

@media (max-width: 767px) {
  :root {
    --fs-sec-en: 32px;        /* SP実測 */
    --fs-fv: 25px;            /* SP実測 25.5px */
    --fs-catch: 24px;         /* SP実測 */
    --fs-body: 15px;
    --lh-body: 2;
    --fs-small: 14px;
    --side: 16px;
    --radius-card: 24px;
    --sec-pad: 96px;
  }
}
