/* Nudgelab v4 デザイントークン（ラフA案から抽出）
   アクセントは ティール1色のみ。オレンジ・黄・紫〜藍は使わない。
   値はすべてここで決め、部品側では var(--…) だけを使う。 */
:root{
  /* ---- 色（基本3色＋その濃淡） ---- */
  --bg:#F5FAF9;        /* ベース（白に近いオフホワイト）。#fff は使わない */
  --ink:#1A1F1F;       /* 文字（墨色）。#000 は使わない */
  --ac:#0B8585;        /* アクセント：ティール。唯一の差し色 */
  --tint:#E3F1F0;      /* アクセントの淡い面（制作サンプル背景・ラベル） */
  --tint2:#CFE8E7;     /* アクセントのもう少し濃い淡色（線・ドット） */
  --line:#CBDCDB;      /* 区切りの1px線 */
  --mute:#5B6666;      /* 補足文字（本文背景上でコントラスト 5.5:1 以上） */
  --on-ac:#F5FAF9;     /* アクセント面の上の文字（=ベース） */
  --on-ac-sub:#E6F4F3; /* アクセント面の上の補足文字 */
  /* プレースホルダー（画像が入るまでの仮枠。本番には残さない） */
  --ph-a:#E6E9E9; --ph-b:#DEE2E2; --ph-line:#A9B2B2; --ph-ink:#6A7474;
  /* モック枠の中身（画像が入るまでの灰色ブロック） */
  --mock-screen:#EDEFEF; --mock-bar:#D3D8D8; --mock-blk:#DDE1E1; --mock-pill:#C9CFCF;

  /* ---- 書体（見出しと本文は同じ1種。全見出し --fh で統一） ---- */
  --fh:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --fb:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --fw-bold:700;       /* 太さは 400（本文）と 700（見出し・強調）の2つだけ */

  /* ---- 文字サイズ（PC / スマホ） ---- */
  --fs-h1:44px;  --fs-h1-sp:30px;   /* ファーストビューの見出し */
  --fs-h2:32px;  --fs-h2-sp:24px;   /* セクション見出し */
  --fs-lead:22px;--fs-lead-sp:18px; /* 締めの1文（.close） */
  --fs-price:44px;--fs-price-sp:36px;/* 49,800円 */
  --fs-body:16px;--fs-body-sp:15px; /* 本文・ボタン */
  --fs-sub:15px;                    /* リスト・FAQ回答・チップ内 */
  --fs-small:13px;                  /* 注記・タグ・補足 */
  /* 行間 */
  --lh-head:1.5; --lh-body:1.9; --lh-tight:1.4; --lh-price:1.2;
  --ls-h1:.01em; --ls-logo:.02em;

  /* ---- 余白（すべて 8 の倍数。例外は線まわりの 4px/12px のみ） ---- */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-6:48px; --sp-8:64px; --sp-12:96px; --sp-16:128px;
  --section-y:128px; --section-y-sp:80px;   /* セクション上下 */
  --hero-y-top:96px; --hero-y-top-sp:48px;  /* ファーストビュー上 */
  --container:1120px; --gutter:32px; --gutter-sp:20px;
  --header-h:64px; --header-h-sp:56px;

  /* ---- 角丸・線・影 ---- */
  --r:16px;            /* カード・枠・FAQ */
  --r-pill:999px;      /* ボタン・ラベル・チップ */
  --r-mock:36px; --r-mock-sp:30px; /* スマホ枠 */
  --bd:1px solid var(--line);
  --bd-hit:2px solid var(--ac);
  --shadow:none;       /* 影は使わない。区切りは 1px の線 */

  /* ---- 動き ---- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-reveal:.6s;      /* 出現（0.3〜0.8秒） */
  --t-btn:.2s;         /* ボタンの浮き */
  --reveal-y:16px;     /* 出現時の上がり幅（12〜16px） */

  /* ---- 円弧ギャラリー（制作サンプル・5枠） ---- */
  --arc-h:620px; --arc-h-sp:540px;
  --mock-w:240px; --mock-h:480px; --mock-bw:8px;          /* 比率 1:2。画像は 240×480 の 2 倍（480×960）で用意 */
  --mock-w-sp:200px; --mock-h-sp:400px; --mock-bw-sp:6px;
  --arc-dx:290px; --arc-dy:40px; --arc-dx-sp:150px; --arc-dy-sp:28px;
  --arc-ring:1500px; --arc-ring-sp:900px;                 /* 点線リングの直径 */
  --arc-step:.7s;      /* 1コマ回る時間（ガチャン） */
  --arc-hold:3.2s;     /* 止まっている時間 */
}