:root {
  color-scheme: light;
  --ink: #111111;
  --paper: #ffffff;
  --green: #1e6b44;
  --red: #c2352b;
  --gray-950: #181818;
  --gray-800: #303030;
  --gray-700: #4b4b4b;
  --gray-600: #666666;
  --gray-300: #d8d8d8;
  --gray-200: #e8e8e8;
  --gray-100: #f4f4f1;
  --wash: #f8f7f2;
  --green-soft: #eaf3ee;
  --red-soft: #faecea;
  --focus: #0c5bd8;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-heading: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --text-size: 17px;
  --text-line: 1.8;
  --leading-tight: 1.35;
  --leading-heading: 1.45;
  --tap-target: 44px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --content-max: 1120px;
  --measure: 40em;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --shadow-soft: 0 18px 50px rgba(17, 17, 17, 0.08);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/*
 * スマホでは巨大な日本語Webフォントを要求せず、初期表示を優先する。
 * 幅だけでなく coarse pointer も対象にし、横向き端末でも同じ挙動にする。
 */
@media (max-width: 767px), (pointer: coarse) {
  :root {
    --font-body: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
    --font-heading: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}