@font-face {
  font-family: "TKS Ugothic";
  src: url("../assets/fonts/ugothic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TKS Ugothic";
  src: url("../assets/fonts/ugothic-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TKS Ugothic";
  src: url("../assets/fonts/ugothic-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TKS Ugothic";
  src: url("../assets/fonts/ugothic-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TKS Ugothic";
  src: url("../assets/fonts/ugothic-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TKS Ugothic";
  src: url("../assets/fonts/ugothic-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --color-primary: #50b848;
  --color-primary-hover: #57b53c;
  --color-primary-soft: #ceebcc;
  --color-secondary: #3333cc;
  --color-secondary-strong: #2d2db9;
  --color-bg: #fcfffe;
  --color-surface: #f3f8f6;
  --color-surface-alt: #eef8ed;
  --surface-p1: #fcfffe;
  --surface-p2-start: #f3f8f6;
  --surface-p2-end: #fcfffe;
  --surface-p3-start: #071b34;
  --surface-p3-end: #12385c;
  --surface-p3-glow: rgba(80, 184, 72, 0.18);
  --color-text: #111817;
  --color-text-strong: #000000;
  --color-text-muted: #46534f;
  --color-muted: #808080;
  --color-border: rgba(0, 0, 0, 0.12);
  --color-border-strong: rgba(0, 0, 0, 0.22);
  --color-white: #ffffff;

  --font-family-base: "Yu Gothic", YuGothic, "游ゴシック体", "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --font-family-display: "Yu Gothic", YuGothic, "游ゴシック体", "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.75;
  /* タイポ: 本文は字間を抑え、ラベル・英字周り・CTA で参考サイト寄りのシャープさを付与（外部フォント追加なし） */
  --letter-spacing-body: 0.02em;
  --letter-spacing-heading: 0.04em;
  --letter-spacing-label: 0.08em;
  --line-height-heading: 1.4;
  --font-feature-jp-body: "palt";

  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;

  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;

  --shadow-1: 0 8px 18px rgba(9, 21, 37, 0.06);
  --shadow-2: 0 18px 42px rgba(9, 21, 37, 0.08);
  --shadow-3: 0 28px 58px rgba(9, 21, 37, 0.12);
  --shadow-floating: 0 22px 46px rgba(9, 21, 37, 0.12);

  --motion-duration-base: 240ms;
  --motion-duration-bridge: 700ms;
  --motion-duration-reveal: 700ms;
  --motion-easing-standard: ease;
  --motion-easing-bridge: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-easing-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-distance: 12px;
  --reveal-distance-hero: 14px;
  --products-peek: clamp(28px, 5vw, 80px);
  --products-carousel-slots: 2.5;

  --layout-gutter: clamp(20px, 3vw, 48px);
  --layout-shell-max: 1440px;
  --layout-shell-width: min(var(--layout-shell-max), calc(100vw - 2 * var(--layout-gutter)));
  --grid-column-gap: var(--spacing-24);
  --readable-shell-max: 960px;
  --measure-intro: 72ch;
  --measure-lead: 68ch;
  --measure-body: 56ch;
  --header-height: 64px;

  --bg: var(--color-bg);
  --panel: rgba(255, 255, 255, 0.96);
  --line: var(--color-border);
  --accent: var(--color-primary);
  --accent-soft: rgba(80, 184, 72, 0.18);
  --accent-2: var(--color-secondary);
  --accent-2-strong: var(--color-secondary-strong);
  --danger: var(--color-text-strong);
  --shadow: var(--shadow-floating);
  --clr-safety: var(--color-primary);
  --clr-copper: var(--color-primary);
  --clr-rust: var(--color-primary-hover);
  --clr-charcoal: var(--color-text);
  --clr-charcoal-dk: var(--color-text-strong);
  --clr-stone: var(--color-text-muted);
  --clr-concrete: var(--color-muted);
  --clr-sand: var(--color-surface-alt);
  --clr-offwhite: var(--color-bg);
  --clr-white: var(--color-white);
  --font-sans: var(--font-family-base);
  --space-xs: var(--spacing-8);
  --space-sm: var(--spacing-16);
  --space-md: var(--spacing-24);
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --radius-sm: var(--radius-4);
  --radius-md: var(--radius-8);
  --radius-lg: var(--radius-12);
  --radius-xl: var(--radius-16);
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-3);
  --transition: var(--motion-duration-base) var(--motion-easing-standard);
  --header-h: var(--header-height);
}