/* =========================================================
   3D増毛エクステ — デザイントークン
   方針（2026-08-20 吉田さん指示で改訂）：
     ・清潔感を最優先。ベースは白＋ごく淡いピンク。
     ・紫とゴールドは使わない。
     ・ただし地味にはしない → CTAはビビッドピンク、差し色はターコイズ。
     ・濃色はディープティール（青緑）。清潔感を保ったまま画面を締める役。
   ※ 変数名は流用元テンプレのまま。名前ではなく「役割」で読むこと：
       --navy   = ブランドの濃色（ディープティール）
       --orange = CTA色（ビビッドピンク）
       --yellow = 差し色（ターコイズ）
   ========================================================= */
:root{
  /* --- 基本色 --- */
  --ink:#153039;             /* 見出し・強調（ディープティール寄りの黒） */
  --ink-soft:#3d5a63;
  --text:#4a5b61;            /* 本文 */
  --muted:#8c9ba1;           /* 補足 */

  /* --- ブランド --- */
  --navy:#0f3c47;            /* メイン濃色：ディープティール */
  --navy-deep:#08262e;
  --orange:#ff2d7a;          /* CTA：ビビッドピンク */
  --orange-deep:#e00f5f;
  --pink:#ff7aa8;            /* やわらかいピンク */
  --pink-soft:#ffe8f0;
  --yellow:#12c7b6;          /* 差し色：ターコイズ（旧ゴールドの置き換え） */
  --yellow-soft:#dbf7f3;
  --mint:#12c7b6;
  --mint-soft:#dbf7f3;
  --sky:#3fc9e0;             /* 濃色セクションの光（アクア） */
  --sky-soft:#e2f7fb;

  /* --- 背景 --- */
  --bg:#ffffff;
  --cream:#fdf7f9;           /* 交互背景：ごく淡いピンク */
  --cream-deep:#ffe9f1;
  --line:#f0e2e7;            /* 罫線 */
  --line-cool:#e3eff1;

  /* --- グラデーション --- */
  --grad-hero:linear-gradient(135deg,#08262e 0%,#0f3c47 46%,#166473 100%);
  --grad-cta:linear-gradient(135deg,#ff5c96 0%,#ff2d7a 46%,#e00f5f 100%);
  --grad-pop:linear-gradient(135deg,#ff2d7a 0%,#ff5c96 45%,#12c7b6 100%);
  --grad-mint:linear-gradient(135deg,#12c7b6 0%,#3fc9e0 100%);
  --grad-cream:linear-gradient(180deg,#fdf4f7 0%,#ffffff 100%);

  /* --- タイポ --- */
  --ff:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --ff-round:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans",sans-serif;
  /* ★明朝(Shippori Mincho)は表示速度のため読み込みをやめた（CSSだけで230KBあった）。
     数字の装飾は --ff-round の900で代用している。 */
  --ff-serif:"Zen Kaku Gothic New","Noto Sans JP",serif;

  /* --- レイアウト --- */
  --container:1120px;
  --radius:14px;
  --radius-lg:22px;
  --radius-xl:34px;

  /* --- 影（ティール寄りのやわらかい影） --- */
  --shadow:0 14px 36px rgba(15,60,71,.09);
  --shadow-lg:0 22px 55px rgba(15,60,71,.15);
  --shadow-pop:0 10px 0 rgba(15,60,71,.10);
  --shadow-cta:0 12px 28px rgba(255,45,122,.34);
}