/* ==========================================================
   LP Design System "bold-conversion" / tokens
   由来: rank-quest.jp/lp/17 の構造・配色・書体を抽出して体系化（2026-10-08）
   使い方: このファイルを最初に読み込み、lp-system.css を続けて読み込む
   ========================================================== */
:root {
  /* ---- 1. ブランド色（基調=ネイビー、主アクセント=ティール） ---- */
  --navy:        #0A1A3F;   /* 文字・暗い面の基調 */
  --navy-2:      #152F63;
  --teal:        #2DD4BF;   /* 主アクセント。暗い面での強調文字 */
  --teal-dark:   #0891A1;   /* 白い面での強調文字・リンク */
  --teal-soft:   #CFFAF4;
  --pink:        #EC4899;   /* 第2アクセント。CTA・必須ラベル */
  --pink-dark:   #BE185D;
  --pink-soft:   #FCE7F3;
  --gold:        #F59E0B;   /* 第3アクセント。実績・受賞・電話CTA */
  --gold-dark:   #B45309;
  --gold-soft:   #FEF3C7;
  --purple:      #8B5CF6;   /* 第4アクセント。カードの差し色 */
  --purple-dark: #6D28D9;
  --purple-soft: #EDE9FE;
  --coral:       #FB7185;
  --coral-dark:  #E11D48;

  /* ---- 2. 中立色 ---- */
  --bg:        #FFFFFF;
  --bg-alt:    #F7FBFC;   /* 表の見出し行・入力欄の下地 */
  --bg-faint:  #FAFBFF;   /* FAQ 帯 */
  --ink:       #0A1A3F;   /* 本文 */
  --ink-60:    #4A5A78;   /* 補足文 */
  --ink-40:    #768894;   /* ラベル・無効 */
  --line:      #EFF2F4;
  --line-2:    #DCE4E8;
  --on-dark:        #FFFFFF;
  --on-dark-70:     rgba(255,255,255,.70);
  --on-dark-glass:  rgba(255,255,255,.06);
  --on-dark-border: rgba(255,255,255,.12);

  /* ---- 3. グラデーション（角度は135deg固定） ---- */
  --grad:      linear-gradient(135deg,#2DD4BF 0%,#0891A1 60%,#0E7490 100%);   /* 主 */
  --grad-2:    linear-gradient(135deg,#8B5CF6 0%,#EC4899 100%);               /* 紫→桃 */
  --grad-3:    linear-gradient(135deg,#F59E0B 0%,#FB7185 50%,#EC4899 100%);   /* 金→桃。CTA用 */
  --grad-cool: linear-gradient(135deg,#0A1A3F 0%,#152F63 50%,#0891A1 100%);   /* 紺→ティール */
  --grad-pink: linear-gradient(135deg,#FB7185 0%,#EC4899 50%,#BE185D 100%);
  --grad-gold: linear-gradient(135deg,#FBBF24 0%,#F59E0B 50%,#D97706 100%);
  --grad-soft: linear-gradient(135deg,#CFFAF4 0%,#EDE9FE 100%);
  /* 帯の背景用メッシュ（radial を重ねる） */
  --grad-mesh:
    radial-gradient(ellipse 600px 400px at 20% 10%, rgba(139,92,246,.18), transparent 55%),
    radial-gradient(ellipse 700px 500px at 85% 80%, rgba(45,212,191,.20), transparent 55%),
    radial-gradient(ellipse 500px 400px at 80% 20%, rgba(245,158,11,.14), transparent 55%);
  --grad-hero:
    radial-gradient(ellipse 900px 700px at 100% 0%, rgba(45,212,191,.32), transparent 60%),
    radial-gradient(ellipse 700px 600px at 0% 100%, rgba(236,72,153,.22), transparent 60%),
    radial-gradient(ellipse 500px 400px at 50% 40%, rgba(139,92,246,.18), transparent 60%),
    linear-gradient(135deg,#FDFCFF 0%,#F0FDFA 50%,#FDF2F8 100%);
  /* 淡色帯（白ベースのセクションに敷く） */
  --band-lavender: linear-gradient(180deg,#FAFBFF 0%,#F4F0FF 50%,#FDF2F8 100%);
  --band-mint:     linear-gradient(165deg,#ECFEFE 0%,#F0FDFA 48%,#FDF8EE 100%);
  --band-gold:     linear-gradient(180deg,#FFFBEB 0%,#FEF3C7 16%,#FDE68A 38%,#FCD34D 62%,#FBBF24 100%);
  --band-dark:     linear-gradient(180deg,#0A1A3F 0%,#1E1B4B 50%,#4C1D95 100%);
  --band-final:    linear-gradient(120deg,#0A1A3F 0%,#0891A1 40%,#EC4899 100%);

  /* ---- 4. 書体 ---- */
  --font-display: "Zen Kaku Gothic New", "Zen Kaku Gothic Antique", sans-serif; /* 見出し 700/900 */
  --font-body:    "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* 本文 400/500/700 */
  --font-num:     Inter, Manrope, sans-serif;   /* 数字・英字ラベル 700〜900。tnum を有効化 */

  /* ---- 5. 文字サイズ（clamp で流体） ---- */
  --fs-hero:   clamp(44px, 7vw, 96px);   /* h1 の最大行 */
  --fs-title:  clamp(40px, 5.2vw, 72px); /* section-title */
  --fs-title-s:clamp(28px, 3.8vw, 48px); /* 小さめ section-title */
  --fs-h3:     22px;
  --fs-h4:     16px;
  --fs-lead:   17px;   /* section-lead */
  --fs-body:   15px;
  --fs-small:  13px;
  --fs-label:  11px;   /* eyebrow・タグ */
  --fs-micro:  10px;   /* フォームラベル・凡例 */
  --fs-stat:   40px;   /* 統計数字 */
  --lh-tight:  1.2;
  --lh-title:  1.3;
  --lh-body:   1.85;
  --lh-lead:   1.95;
  --ls-eyebrow: .22em;
  --ls-tag:     .28em;
  --ls-title:  -.015em;
  --ls-num:    -.02em;

  /* ---- 6. 余白 ---- */
  --wrap:       1320px;
  --wrap-narrow: 900px;
  --gutter:     32px;
  --gutter-sp:  20px;
  --sec-y:      120px;   /* セクション上下 */
  --sec-y-sp:   72px;
  --head-mb:    72px;    /* セクション見出し群→本体 */
  --grid-gap:   20px;
  --card-pad:   28px 24px;

  /* ---- 7. 角丸 ---- */
  --r-pill: 999px;
  --r-xl:   32px;   /* 大きな色面ブロック */
  --r-lg:   24px;   /* カード */
  --r-md:   20px;   /* 表・小カード */
  --r-sm:   14px;   /* FAQ・写真 */
  --r-xs:   8px;    /* 入力欄・番号バッジ */
  --r-tag:  4px;    /* 角ばったラベル */

  /* ---- 8. 影 ---- */
  --sh-card:   0 20px 50px -20px rgba(10,26,63,.15), 0 0 0 1px var(--line-2);
  --sh-float:  0 40px 80px -20px rgba(10,26,63,.40);
  --sh-hover:  0 30px 60px -20px rgba(10,26,63,.25);
  --sh-cta:    0 6px 20px rgba(225,29,72,.40);
  --sh-teal:   0 8px 20px rgba(45,212,191,.50);
  --sh-pink:   0 8px 20px rgba(236,72,153,.50);
  --sh-gold:   0 8px 20px rgba(245,158,11,.50);
  --sh-purple: 0 8px 20px rgba(139,92,246,.50);

  /* ---- 9. 動き ---- */
  --ease:     cubic-bezier(.2,.8,.2,1);
  --dur-fast: .15s;
  --dur:      .3s;
  --dur-reveal: .9s;
  --lift:     -8px;   /* カード hover の持ち上げ */

  /* ---- 10. 透かし文字 ---- */
  --wm-size:  280px;
  --wm-alpha-light: rgba(10,26,63,.04);
  --wm-alpha-teal:  rgba(45,212,191,.07);
  --wm-alpha-dark:  rgba(255,255,255,.04);
}

@media (max-width: 720px) {
  :root {
    --gutter: var(--gutter-sp);
    --sec-y: var(--sec-y-sp);
    --head-mb: 40px;
    --fs-lead: 15px;
    --fs-stat: 32px;
    --wm-size: 140px;
  }
}