@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;700&display=swap");

:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-text: #1a1a1a;
  --color-heading: #000000;
  --color-muted: #757575;
  --color-light: #999999;
  --color-border: #e5e5e5;
  --color-surface: #ffffff;
  --color-surface-muted: #f5f5f5;
  --color-accent: #005eb8;
  --color-accent-dark: #004b93;
  --color-accent-soft: #eef5ff;
  --color-accent-border: #b8d4f5;
  --color-header-bg: #000000;
  --color-cta-bg: #000000;
  --color-cta-text: #ffffff;

  --font-body: "Noto Sans JP", "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "MS ゴシック", "MS Gothic", sans-serif;
  --font-mono: "DM Mono", "SFMono-Regular", Consolas,
    "Liberation Mono", Menlo, monospace;

  --container-max: 1200px;
  --container-narrow: 760px;
  --container-wide: 1440px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 128px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --header-height: 72px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: normal;
  color: var(--color-text);
  background: var(--color-white);
  font-feature-settings: "palt";
  word-break: normal;
  line-break: strict;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

::selection {
  color: var(--color-white);
  background: var(--color-black);
}

:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 4px;
}

.site-header :focus-visible,
.section--dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-white);
}

.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 100;
  transform: translateY(-160%);
  padding: 10px 14px;
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--color-black);
}

.skip-link:focus {
  transform: translateY(0);
}

.u-mono,
.meta,
.nav-link,
.card-number,
.tag {
  font-family: var(--font-mono);
  font-kerning: normal;
  font-feature-settings: normal;
  letter-spacing: 0.083em;
  text-transform: uppercase;
}

.u-muted {
  color: var(--color-muted);
}

.u-narrow {
  max-width: var(--container-narrow);
}

.nowrap {
  white-space: nowrap;
}

.technical-token {
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  body {
    overflow-x: clip;
  }

  p,
  li,
  h1,
  h2,
  h3,
  label,
  legend,
  .hero__lead,
  .page-hero__lead,
  .section-heading__lead,
  .card-body,
  .article-card__excerpt,
  .case-card__body p,
  .contact-note p,
  .field input,
  .field textarea,
  .field select {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .nowrap {
    white-space: normal;
  }
}