/* ═══════════════════════════════════════════════════════════════════════
   SP Connect × Custom Japan — DESIGN TOKENS  「Studio Minimal」
   ───────────────────────────────────────────────────────────────────────
   ほぼ白＋黒の超ミニマル。グリーンは“点”のアクセント（在庫/適合/主役CTA）だけ。
   Apple的な静かな高級感で、SP Connect の精密工業製品の佇まいと、
   迷いのない購入体験（DtoC）を両立する。全ページがこのファイルを読み込み、
   :root を再定義せず var() で参照する。
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Foundation：白基調（面は引き算で作る） ── */
  --paper:        #FDFDFD;   /* ベース背景 */
  --gray:         #F5F5F7;   /* 交互の薄面（Apple gray） */
  --gray-2:       #EDEDEF;   /* やや濃い面 */
  --white:        #FFFFFF;   /* カード面 */
  --ink:          #0B0B0C;   /* ほぼ黒：見出し・本文・暗アンカー */
  --ink-2:        #6E6E73;   /* 補助テキスト */
  --ink-3:        #A1A1A6;   /* 弱いラベル・プレースホルダ */

  /* ── Lines：色面ではなく 1px ヘアライン＋隙間で仕切る ── */
  --line:         rgba(0,0,0,.09);
  --line-2:       rgba(0,0,0,.05);

  /* ── Signal Green：全体面積 2%以下。意味のある“点”だけに点火 ──
     在庫あり / 機種適合一致 / 主役CTA / カートバッジ / ランキング1位 */
  --green:        #00A84F;   /* SP Connect グリーン（※正規HEXは要確認の仮値） */
  --green-deep:   #00803C;   /* リンク・hover */
  --green-tint:   #EAF7EF;   /* ごく薄い面（適合ハイライト等） */
  --green-glow:   rgba(0,168,79,.22);

  /* ── 暖色：在庫僅少 / 期間限定 のみ（緑＝肯定 と役割分離） ── */
  --warm:         #FF5A2C;

  /* ── EC セマンティック ── */
  --positive:     var(--green);
  --price:        var(--ink);

  /* ── Typography：軽量・大きく・静か（最大 weight 600） ── */
  --font-ja:  "Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  --font-en:  -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  --font-mono:"SF Mono",ui-monospace,Menlo,monospace;   /* 型番・適合コード・価格補助 */

  --fs-display: clamp(2.1rem, 5vw, 3.6rem);  /* w600 / ls -.03em */
  --fs-h2:      clamp(1.4rem, 2.6vw, 1.95rem);
  --fs-h3:      clamp(1.05rem, 1.6vw, 1.25rem);
  --fs-body:    16px;
  --fs-sm:      13.5px;
  --fs-eyebrow: 11px;                         /* ls .24em / uppercase */
  --fs-mono:    12px;

  /* ── Spacing ── */
  --space-xs: 6px;  --space-sm: 12px; --space-md: 20px;
  --space-lg: 34px; --space-xl: 56px; --space-2xl: 92px;
  --space-section: clamp(56px, 8vw, 104px);

  /* ── Radius：pill と控えめ角丸の混在 ── */
  --r-pill: 999px;
  --r-btn:  12px;
  --r-card: 14px;
  --r-lg:   20px;

  /* ── Shadow：ほぼ無し。超ソフトのみ（静けさ＝プレミアム） ── */
  --shadow-sm: 0 2px 10px rgba(0,0,0,.04);
  --shadow-md: 0 10px 30px rgba(0,0,0,.06);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.08);

  /* ── Motion：最小・素早い ── */
  --ease:      cubic-bezier(.22,1,.36,1);
  --dur-fast:  .16s;
  --dur-mid:   .28s;

  /* ── Layout ── */
  --container: min(1180px, calc(100vw - 40px));
  --header-h:  64px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: .01ms; --dur-mid: .01ms; }
}

/* ===== Mobile UX overrides（スマホ最適化 P1/P2） ===== */
@media (max-width: 600px){
  /* プロモバー：1行で収める */
  .promo, .promo.en{ font-size:11px; letter-spacing:.01em; padding:8px 12px; white-space:nowrap; }
  /* ヘッダーの Custom Japan バッジはスマホ非表示（ロゴ＋プロモに集約） */
  .cj-link{ display:none !important; }
}

/* 下部固定カートバー（一覧/用途/TOP等・スマホ／タブレット、商品詳細のstickybuyがある頁は非表示） */
.spc-cartbar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:none; align-items:center; justify-content:center; gap:10px;
  background:var(--green,#00A84F); color:#fff; text-decoration:none;
  font-family:var(--font-ja),sans-serif; font-weight:700; font-size:15px;
  padding:14px 18px; box-shadow:0 -6px 22px rgba(0,0,0,.18);
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
}
.spc-cartbar.on{ display:flex; }
.spc-cartbar b{ font-family:var(--font-en),sans-serif; }
.spc-cartbar svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; }
@media (min-width: 901px){ .spc-cartbar{ display:none !important; } }