/* ==========================================================================
   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代には細すぎる）
   ========================================================================== */

:root {
  /* ---- カラー ----
     参照サイトはメインの緑1色だけで、CTA 用の別アクセントを持たない。
     ボタンが浮いて見えていた原因はここ。v4 では色を1つに統一した。
     色相だけ参照サイトの緑（#0c8e56）からブルーへ置き換えている。
     リンク・ラベル・番号・アイコン・CTAボタンが全部この1色。
     白文字とのコントラスト比 6.90:1 で WCAG AA を満たす。
     緑に戻す場合はこの2行を #0A7C4B / #085F3A に差し替える */
  --jd-main:       #0E5C9E;
  --jd-main-dark:  #0A4A80;
  --jd-tint:       #F1F5F9;  /* 淡ブルーの帯 */
  --jd-tint-deep:  #E4EDF5;

  --jd-bg:         #FFFFFF;
  --jd-text:       #262E36;  /* 参照サイトの #26302d をブルー寄りに振った同等値 */
  --jd-text-sub:   #5A6370;
  --jd-text-faint: #8A939D;
  --jd-border:     #E3E7EC;

  /* ---- 書体 ----
     参照サイトは和文 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:  17px;
  --jd-fs-h3:    clamp(19px, 2.1vw, 24px);  /* 参照と同値 */
  --jd-fs-h2:    clamp(26px, 3vw, 33px);    /* 参照は 24px 始まり。下限のみ引き上げ */
  --jd-fs-hero:  clamp(27px, 3.3vw, 40px);
  --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 値と同じ */
  }
}