/* =========================================================
   tokens.css — J's様 髪質改善LP v3（2026-10-05）
   ---------------------------------------------------------
   流用元＝../mens_lp_v3/css/tokens.css（変数名はそのまま・値を白ベースへ差し替え）
   岩田さん指定：J'sカラーの白・赤・黒／女性向けLPは白ベース（地は白・オフ白、文字は黒、アクセントは赤）。
   赤＝J's ロゴ画素の実測 #E60012／黒＝ロゴの #0F0F0F。
   コントラスト（Python 実測）：
     黒 #0F0F0F on 白 = 19.17 ／ --ink-2 #4A4744 on #F7F6F4 = 8.54 ／ --ink-3 #6B6762 on #F7F6F4 = 5.20
     小さい赤文字 on 白 → --red-deep #C8000F = 6.06 ／ 白文字 on 赤 #E60012 = 4.80
     黒の帯の中は .section--black が変数を上書き（白文字 17.15・--red-lift #FF4D55 = 5.88）
   2026-10-05 クーポン画像パス：--ic-k-*（種類チップの線アイコン）を追加
   ========================================================= */

:root {
  color-scheme: light;

  /* ---- 地 ---- */
  --bg:       #FFFFFF;   /* 白 */
  --bg-2:     #F7F6F4;   /* 生成りの白（悩み・FAQ） */
  --surface:  #EFECE8;
  --paper:    #FFFFFF;
  --paper-2:  #EFECE8;
  --black:    #0F0F0F;   /* 黒の帯（決めのブロックだけ・面積2割以下） */

  /* ---- 文字 ---- */
  --ink:      #0F0F0F;
  --ink-2:    #4A4744;
  --ink-3:    #6B6762;
  --ink-dark: #0F0F0F;
  --ink-dark-2: #4A4744;

  /* ---- 赤（1色だけ・面で塗らない）---- */
  --red:      #E60012;
  --red-lift: #C8000F;   /* 白地で小さい赤文字を書くとき（黒の帯の中では #FF4D55 に上書き） */
  --red-deep: #C8000F;

  --line:      rgba(15, 15, 15, .14);
  --line-dark: rgba(15, 15, 15, .14);

  /* ---- 書体 ---- */
  --ff-ja:   "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-min:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;   /* 明朝は使わない（ロゴの直線に合わせて太ゴシック・MEN'S と共通） */
  --ff-en:   "Jost", "Helvetica Neue", Arial, sans-serif;

  --fs-hero:  clamp(28px, 7.8vw, 38px);
  --fs-h2:    clamp(22px, 6vw, 28px);
  --fs-h3:    clamp(17px, 4.6vw, 20px);
  --fs-body:  15px;
  --fs-sm:    14px;      /* カード・表・リンクの中身の最小（2026-10-05 UI/UXパス：13.5→14） */
  --fs-label: 11px;
  --fs-note:  12px;      /* 注記・出典の最小（11.5→12） */
  --fs-card-q: 17px;     /* カードの主役（.fears の問いと同じ） */
  --fs-card:   14px;     /* カードの補足 */
  --fs-tag:    13px;     /* カード上のラベル（店のエリア・タグ・番号） */
  --fs-num:   clamp(44px, 13vw, 60px);

  /* ---- 余白（8pxベース） ---- */
  --sp-section: clamp(72px, 16vw, 104px);
  --sp-block:   clamp(32px, 8vw, 48px);
  --gut:        20px;

  /* ---- PCでもスマホ幅の縦列を中央に（ART_DIRECTION：中央列 520px） ---- */
  --col: 520px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur:  600ms;
  --sticky-h: 76px;

  /* ---- 線アイコン（viewBox 24・stroke 2）。CSS の mask で使い、色は currentColor ---- */
  --ic-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --ic-down:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v13M6 12l6 6 6-6'/%3E%3C/svg%3E");
  --ic-plus:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");

  /* ---- クーポンの種類チップの線アイコン（2026-10-05 クーポン画像パス）---- */
  --ic-k-straight: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M12 4v16M17 4v16'/%3E%3C/svg%3E");
  --ic-k-bang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a8 8 0 0 1 16 0'/%3E%3Cpath d='M9 9v5M12 8v6M15 9v5'/%3E%3C/svg%3E");
  --ic-k-cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6.5' r='2.5'/%3E%3Ccircle cx='6' cy='17.5' r='2.5'/%3E%3Cpath d='M8.2 7.8L20 18M8.2 16.2L20 6'/%3E%3C/svg%3E");
  --ic-k-quality: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8c3-3 6 3 9 0s6-3 9 0M3 16h18'/%3E%3C/svg%3E");
  --ic-k-treat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c3 4 6 7.5 6 11a6 6 0 0 1-12 0c0-3.5 3-7 6-11z'/%3E%3C/svg%3E");
  --ic-k-consult: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H10l-6 4z'/%3E%3C/svg%3E");
}