/* ==========================================================================
   jand.jp デザイントークン（v4）
   --------------------------------------------------------------------------
   v4 は推測をやめ、参照サイト（OLTANA No.001 DEMO6）の配信 CSS を取得して
   実際の値を読んだ上で作り直したもの。取得元:
     https://oltana.style/no001/demo6/wp-content/themes/oltana-001/style.css

   参照サイトの実測値（そのまま引用）
     メインカラー         #0c8e56（緑・単色。アクセント色は存在しない）
     本文色               #26302d
     本文                 clamp(15px,1.5vw,16px) / weight 200 / lh 1.65 / ls .12rem
     セクション見出し     clamp(24px,3vw,33px)  / weight 200 / ls .36rem
     小見出し             clamp(19px,2.1vw,24px)/ weight 200 / ls .18rem
     項目の英字サブ       clamp(11px,1.2vw,12px)/ weight 200
     ステップ番号         48px / weight 100
     角丸                 すべて 4px（タグのみ 60px のピル）
     ボタン               角丸 4px / weight 300 / ls .12rem
     コンテナ             max-width 1180px + padding clamp(24px,4.5vw,60px)
     セクション間         clamp(90px,21vw,180px)

   本サイト側の制約で変えている点は2つだけ
     1. 最小フォントサイズ 16px（参照は 11〜14px を多用）
     2. ウェイトを1段上げる（参照の 200 は 40〜60代には細すぎる）

   色は ECOcal ロゴの緑に合わせている。
   ========================================================================== */

:root {
  /* ---- カラー ----
     ロゴのフォレストグリーンをメインに1色で揃える。
     リンク・ラベル・番号・アイコン・CTAボタンが全部この1色。 */
  --jd-main:       #166534;
  --jd-main-dark:  #14532D;
  --jd-cta:        #E24A3C;
  --jd-cta-dark:   #C53D31;
  --jd-tint:       #F3F8F4;
  --jd-tint-deep:  #E5F0E8;

  --jd-bg:         #FFFFFF;
  --jd-text:       #26302D;
  --jd-text-sub:   #5A635E;
  --jd-text-faint: #8A938E;
  --jd-border:     #E3E8E4;

  /* ---- 書体 ----
     参照サイトは和文 Noto Sans JP、欧文 Onest。同じ組み合わせにする */
  --jd-font-ja: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
                "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --jd-font-en: "Onest", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;

  /* ---- サイズ。下限 16px は維持する ---- */
  --jd-fs-min:   16px;
  --jd-fs-body:  16px;                      /* 参照の clamp(15,1.5vw,16) 上限と同じ */
  --jd-fs-lead:  18px;
  --jd-fs-h3:    clamp(19px, 2.1vw, 24px);  /* 参照と同値 */
  --jd-fs-h2:    clamp(26px, 3vw, 33px);    /* 参照は 24px 始まり。下限のみ引き上げ */
  --jd-fs-hero:  clamp(32px, 4.4vw, 52px);
  --jd-fs-num:   clamp(40px, 4.5vw, 56px);  /* ステップ番号。参照は 48px 固定 */

  /* ---- ウェイト ----
     参照サイトの軽さの正体はここ。見出しまで 200、番号は 100 で
     ヘアラインのように細い。太字は一切使っていない */
  --jd-fw-body: 300;   /* 参照 200。可読性のため1段上げた */
  --jd-fw-head: 200;   /* 参照と同値 */
  --jd-fw-num:  100;   /* 参照と同値。大きいので細くても読める */
  --jd-fw-btn:  400;   /* 参照 300。白抜き文字なので1段上げた */

  /* ---- 字間。参照は rem 指定なので em に読み替えた ---- */
  --jd-ls-body:  .09em;   /* 参照 .12rem */
  --jd-ls-head:  .18em;   /* 参照 .36rem。かなり広い。これが参照サイトの印象を作っている */
  --jd-ls-label: .18em;   /* 参照 .18rem */

  --jd-lh-head: 1.5;   /* 参照と同値 */
  --jd-lh-body: 1.8;   /* 参照 1.65。和文 16px 用に少し広げた */

  /* ---- レイアウト ---- */
  --jd-container: 1180px;                   /* 参照と同値 */
  --jd-gutter:    clamp(24px, 4.5vw, 60px); /* 参照と同値 */
  --jd-section-y: clamp(90px, 14vw, 170px); /* 参照 clamp(90px,21vw,180px) */
  --jd-head-mb:   clamp(48px, 6vw, 90px);   /* 参照 clamp(60px,6vw,90px) */

  /* ---- 角丸。参照サイトは一律 4px。ボタンもピルではなく 4px ---- */
  --jd-radius:      4px;
  --jd-radius-pill: 60px;  /* タグ・カテゴリだけ */

  --jd-header-h: 84px;
}

@media (max-width: 900px) {
  :root {
    --jd-lh-body:  1.85;
    --jd-header-h: 62px;
    --jd-gutter:   21px;  /* 参照の SP 値と同じ */
  }
}