/* =========================================================
   SITE 113 — CONCAFE STANDARD DARK / デザイントークン
   配色: ブラック #121319 / ホワイト #F7F7FA / パープル #7A63D8 / ピンク #DF5E9B
   書体: Chakra Petch + Noto Sans JP（システムフォールバック必須）
   角丸: 8px に統一（0/4/8/12/16 のうち 8 を採用。112の12pxとは差別化。混在させない）
   影  : 2段階まで。暗背景のため主に罫線でカードを明確に区切る。
   ========================================================= */
:root {
  /* --- 基本色 --- */
  --c-black: #121319;
  --c-black-2: #1b1d27;
  --c-black-3: #23212f;
  --c-white: #f7f7fa;
  --c-purple: #7a63d8;
  --c-purple-strong: #9884ea;
  --c-pink: #df5e9b;
  --c-pink-strong: #ef7fb2;

  /* --- 用途色（コントラスト実測値をコメントに記載） --- */
  --c-bg: var(--c-black);
  --c-bg-alt: var(--c-black-2);
  --c-bg-band: var(--c-black-3);
  --c-surface: #1e2029;
  --c-surface-2: #262837;
  --c-ink: var(--c-white);          /* 対 --c-black = 15.8:1 */
  --c-ink-muted: #c7c8d6;           /* 対 --c-black = 9.7:1 */
  --c-ink-onaccent: #14121c;        /* 対 --c-purple = 5.0:1 / 対 --c-pink = 5.3:1 */
  --c-accent: var(--c-purple);
  --c-accent-strong: var(--c-purple-strong); /* 対 --c-black = 7.6:1（リンク・強調文字用） */
  --c-accent-hover: #6a54c4;
  --c-accent2: var(--c-pink);
  --c-accent2-strong: var(--c-pink-strong); /* 対 --c-black = 6.8:1 */
  --c-line: #35374a;
  --c-line-strong: #4a4d63;
  --c-focus: #b7a8f5;
  --c-warn-bg: #3a2c1c;
  --c-warn-line: #8a6a34;
  --c-ok-bg: #17342a;
  --c-ok-line: #3f8064;
  --c-error: #ff9bb8;               /* 対 --c-black = 9.2:1 */
  --c-error-bg: #3a1626;

  /* --- 書体 --- */
  --f-display: "Chakra Petch", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --f-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;

  /* --- 文字サイズ（14px 未満を作らない） --- */
  --fs-body: 1rem;        /* 16px */
  --fs-body-lg: 1.0625rem;/* 17px */
  --fs-note: 0.875rem;    /* 14px */
  --fs-label: 0.9375rem;  /* 15px */
  --fs-h1: clamp(1.75rem, 1.15rem + 2.2vw, 2.75rem);
  --fs-h2: clamp(1.375rem, 1.05rem + 1.2vw, 1.875rem);
  --fs-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-h4: 1.0625rem;
  --fs-hero: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
  --fs-deco: 0.875rem;    /* 14px: 装飾英字ラベル。14px未満は作らない方針 */

  /* --- 行間 --- */
  --lh-head: 1.3;
  --lh-body: 1.75;
  --lh-tight: 1.4;

  /* --- 余白 --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 88px;

  /* --- 幅 --- */
  --w-container: 1180px;
  --w-narrow: 820px;
  --gutter: 20px;

  /* --- 角丸（8px 統一） --- */
  --r: 8px;

  /* --- 影（2段階まで） --- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.28);
  --sh-2: 0 10px 30px rgba(0, 0, 0, 0.45);

  /* --- 部品寸法 --- */
  --h-header: 72px;
  --h-ctabar: 60px;
  --tap: 44px;
}

html { font-size: 100%; }

body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  line-height: var(--lh-head);
  font-weight: 600;
  letter-spacing: 0.02em;
}

strong { font-weight: 700; }

a { color: var(--c-accent-strong); }

/* 数値・時刻・料金は等幅数字で揃える */
.num, time, .price, .tel { font-variant-numeric: tabular-nums; }