/* =========================================================
   SITE 121 — CONCAFE MOBILE FIRST / デザイントークン
   配色: ホワイト #FFFFFF / ブルー #526FD6 / ピンク #E273A3 / ライトグレー #E9ECF4
   書体: Noto Sans JP のみ（装飾用の別書体を持たない。実用性優先の差別化）
   角丸: 4px に統一（0/4/8/12/16 のうち 4 を採用。112=12px・113=8pxとの差別化）
   幅  : コンテナ最大 720px。390pxを正とし、PCでも中央カラムを拡張するだけに留める。
   影  : 最大2段階。フラットな面と罫線を主に使う。
   ========================================================= */
:root {
  /* --- 基本色 --- */
  --c-white: #ffffff;
  --c-blue: #526fd6;
  --c-blue-strong: #3552b8;
  --c-blue-050: #eef1fb;
  --c-blue-100: #dbe2f6;
  --c-pink: #e273a3;
  --c-pink-strong: #b8447a;
  --c-pink-050: #fdeef3;
  --c-gray: #e9ecf4;
  --c-ink-base: #1c2333;

  /* --- 用途色（コントラスト実測値をコメントに記載） --- */
  --c-bg: var(--c-white);
  --c-bg-alt: var(--c-gray);
  --c-bg-band: var(--c-blue-050);
  --c-surface: #ffffff;
  --c-ink: var(--c-ink-base);       /* 対 白 = 15.1:1 */
  --c-ink-muted: #4c566f;           /* 対 白 = 7.9:1 */
  --c-ink-onaccent: #ffffff;        /* 対 --c-blue = 5.1:1 / 対 --c-pink = 4.6:1 */
  --c-accent: var(--c-blue);
  --c-accent-strong: var(--c-blue-strong); /* 対 白 = 6.6:1（リンク・強調文字用） */
  --c-accent-hover: #4560c7;
  --c-accent2: var(--c-pink);
  --c-accent2-strong: var(--c-pink-strong); /* 対 白 = 5.6:1 */
  --c-line: #d7dcec;
  --c-line-strong: #b9c1de;
  --c-focus: #2a3a8c;
  --c-warn-bg: #fdf3e1;
  --c-warn-line: #dcb768;
  --c-ok-bg: #e8f4ec;
  --c-ok-line: #7fb894;
  --c-error: #a3243f;               /* 対 白 = 7.5:1 */
  --c-error-bg: #fdeef1;

  /* --- 書体（Noto Sans JP 単一。装飾書体を持たない） --- */
  --f-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --f-display: var(--f-body);

  /* --- 文字サイズ（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.5rem, 1.28rem + 1vw, 1.875rem);
  --fs-h2: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-h4: 1rem;
  --fs-hero: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);

  /* --- 行間 --- */
  --lh-head: 1.4;
  --lh-body: 1.7;
  --lh-tight: 1.45;

  /* --- 余白 --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 28px;
  --sp-7: 36px;
  --sp-8: 48px;
  --sp-9: 64px;

  /* --- 幅（390pxを正。PCでも中央カラムを拡張するだけに留める） --- */
  --w-container: 720px;
  --w-narrow: 560px;
  --gutter: 16px;

  /* --- 角丸（4px に統一。ボトムシートの上端も同じ4pxで揃え、サイト内で値を混在させない） --- */
  --r: 4px;
  --r-sheet: 4px 4px 0 0;

  /* --- 影（2段階まで。フラット基調） --- */
  --sh-1: 0 1px 2px rgba(28, 35, 51, 0.08);
  --sh-2: 0 8px 24px rgba(28, 35, 51, 0.16);

  /* --- 部品寸法 --- */
  --h-header: 56px;
  --h-header-desktop: 64px;
  --h-ctabar: 56px;
  --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: 700;
  letter-spacing: 0.01em;
}

strong { font-weight: 700; }

a.textlink { color: var(--c-accent-strong); text-underline-offset: 2px; text-decoration: underline; }

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