@font-face {
  font-family: "Noto Sans JP Site";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/noto-sans-jp-400-site.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans JP Site";
  font-style: normal;
  font-display: swap;
  font-weight: 500 600;
  src: url("../fonts/noto-sans-jp-500-site.woff2") format("woff2");
}

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

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 500 600;
  src: url("../fonts/inter-500.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --color-canvas: #ffffff;
  --color-surface: #fafafa;
  --color-surface-strong: #ededed;
  --color-ink: #171717;
  --color-ink-secondary: #2f2f2f;
  --color-muted: #666666;
  --color-faint: #707070;
  --color-border: #d8d8d8;
  --color-border-strong: #b9b9b9;
  --color-accent: #343434;
  --color-accent-hover: #171717;
  --color-accent-active: #171717;
  --color-accent-deep: #343434;
  --color-accent-line: #8a8a8a;
  --color-on-accent: #ffffff;
  --color-brand: #343434;
  --color-brand-deep: #171717;
  --color-brand-soft: #dedede;
  --color-hero: #171717;
  --color-hero-surface: #2f2f2f;
  --color-hero-sky-from: #ededed;
  --color-hero-sky-to: #ffffff;
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #b9b9b9;
  --color-border-dark: #2f2f2f;
  --color-surface-feature: #ededed;
  --color-disabled: #e6e6e6;
  --color-disabled-ink: #707070;
  --color-overlay: rgba(255, 255, 255, 0.98);
  --color-scrim: rgba(23, 23, 23, 0.08);
  --color-selection: #dedede;
  --color-transparent: transparent;
  --scrollbar-thumb: #a5a5a5;
  --scrollbar-thumb-hover: #707070;
  --scrollbar-track: #f1f1f1;

  --font-japanese: "Noto Sans JP Site", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --font-latin: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 500;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-micro: 0.75rem;
  --font-size-lead: clamp(1.0625rem, 1.5vw, 1.25rem);
  --font-size-h1: clamp(2.5rem, 6vw, 4rem);
  --font-size-home-title: clamp(2rem, 4.5vw, 3.5rem);
  --font-size-page-h1: clamp(2.25rem, 5vw, 3.5rem);
  --font-size-overseas-title: clamp(2.25rem, 3.4vw, 2.75rem);
  --font-size-policy-title: clamp(2rem, 4vw, 2.75rem);
  --font-size-policy-heading: clamp(1.125rem, 2vw, 1.375rem);
  --font-size-h2: clamp(1.75rem, 3.8vw, 3rem);
  --font-size-h3: clamp(1.125rem, 2vw, 1.375rem);
  --line-height-body: 1.8;
  --line-height-heading: 1.25;
  --letter-spacing-heading: -0.025em;
  --letter-spacing-label: 0.08em;

  --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;
  --space-section: clamp(4rem, 7vw, 6rem);
  --space-hero: clamp(5rem, 9vw, 7.5rem);
  --container-max: 80rem;
  --container-lower: 70rem;
  --container-narrow: 52rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --space-copy-edge: 2em;
  --space-page-inline: 30px;
  --header-height: 4.5rem;
  --size-header-logo: 204px;
  --size-header-logo-mobile: 160px;
  --size-footer-logo: 112px;
  --size-process-icon: 144px;
  --size-drawer-card: 20rem;
  --offset-hero-backplate: 24px;
  --size-touch-target: 24px;

  --radius-button: 0.375rem;
  --radius-card: 0.75rem;
  --radius-media: 1rem;
  --radius-small: 0.25rem;
  --shadow-card: 0 0.0625rem 0.1875rem var(--color-scrim);
  --shadow-float: 0 0.75rem 2.5rem var(--color-scrim);
  --shadow-media: 0 1rem 3rem var(--color-scrim);
  --focus-ring: 0 0 0 0.1875rem var(--color-border-strong);
  --focus-ring-on-dark: 0 0 0 0.1875rem var(--color-accent);
  --border-width: 0.0625rem;
  --transition-fast: 160ms ease;
  --transition-nav-underline: 160ms ease;
  --transition-base: 240ms ease;
  --transition-reveal: 600ms cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-distance: 1.5rem;
  --reveal-delay: 0ms;
  --logo-filter: grayscale(1) contrast(1.08);
  --media-filter: grayscale(1);
  --ratio-home-hero: 8 / 5;
  --ratio-home-company: 3 / 2;
  --ratio-home-product: 4 / 3;
  --ratio-home-business: 4 / 3;
  --ratio-news-thumbnail: 4 / 3;
  --ratio-support-illustration: 4 / 3;
  --font-size-news-article-title: clamp(1rem, 2.2vw, 2rem);
  --z-header: 20;
  --z-cookie: 40;
}

:root[data-theme="brand"] {
  --color-canvas: #ffffff;
  --color-surface: #f7f7f7;
  --color-surface-strong: #fafafa;
  --color-surface-feature: #fafafa;
  --color-ink: #0a0a0a;
  --color-ink-secondary: #1c1c1e;
  --color-muted: #5a5a5c;
  --color-faint: #707070;
  --color-border: #e5e5e5;
  --color-border-strong: #a8a8aa;
  --color-border-dark: #1f1f1f;
  --color-accent: #0a0a0a;
  --color-accent-hover: #1c1c1e;
  --color-accent-active: #3a3a3c;
  --color-accent-deep: #08705b;
  --color-accent-line: #00d4a4;
  --color-on-accent: #ffffff;
  --color-brand: #00d4a4;
  --color-brand-deep: #00b48a;
  --color-brand-soft: #7cebcb;
  --color-hero: #87a8c8;
  --color-hero-surface: #ffffff;
  --color-hero-sky-from: #87a8c8;
  --color-hero-sky-to: #f5e9d8;
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #b3b3b3;
  --color-disabled: #e5e5e5;
  --color-disabled-ink: #888888;
  --color-overlay: rgba(255, 255, 255, 0.98);
  --color-scrim: rgba(0, 0, 0, 0.08);
  --color-selection: #7cebcb;
  --scrollbar-thumb: #888888;
  --scrollbar-thumb-hover: #5a5a5c;
  --scrollbar-track: #f7f7f7;
  --font-weight-semibold: 600;
  --font-size-h1: clamp(2.25rem, 6vw, 4.5rem);
  --line-height-heading: 1.15;
  --letter-spacing-heading: -0.03em;
  --radius-button: 9999px;
  --radius-media: 0.75rem;
  --focus-ring-on-dark: 0 0 0 0.1875rem var(--color-brand);
  --logo-filter: none;
  --media-filter: none;
}