@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/notosansjp/v53/nKGVt5Oai2MfOYnT9NXr.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/notosansjp/v53/nKGVt5Oai2MfOYnT9NXr.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/notosansjp/v53/nKGVt5Oai2MfOYnT9NXr.woff2') format('woff2');
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-ja);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

h1 { font-size: var(--font-size-hero); }
h2 { font-size: var(--font-size-section-title); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }

p {
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-sm);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-primary);
  transition: color var(--duration-fast) var(--ease-out-cubic);
}

a:hover {
  color: var(--color-accent);
}

strong, b {
  font-weight: var(--font-weight-bold);
}

small {
  font-size: var(--font-size-sm);
}

img {
  border-radius: var(--radius-sm);
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.en {
  font-family: var(--font-english), var(--font-primary);
  letter-spacing: var(--letter-spacing-en);
}