@font-face {
  font-family: 'BIZ UDPGothic Alphabet';
  font-weight: 400;
  src: local('BIZ UDPGothic');
  unicode-range: U+00-7f;
}

@font-face {
  font-family: 'BIZ UDPGothic Alphabet';
  font-weight: 700;
  src: local('BIZ UDPGothic Bold');
  unicode-range: U+00-7f;
}

:lang(ja) {
  font-kerning: none;
}

:lang(en) {
  font-kerning: normal;
}

:where(a) {
  text-decoration-thickness: 1px;
}

:where(a:link),
:where(a:visited) {
  color: var(--color-link);
}
:where(a:active) {
  color: var(--color-link-active);
}

:focus-visible {
  border-radius: var(--border-radius);
  outline: 2px solid var(--color-main);
  outline-offset: var(--space-text-1);
}

h1,
h2,
h3,
h4 {
  margin: 0;
}

h1 {
  font-size: var(--font-size-heading-1);
  line-height: var(--line-height-heading-1);
}

h2 {
  font-size: var(--font-size-heading-2);
  line-height: var(--line-height-heading-2);
}

h3 {
  font-size: var(--font-size-heading-3);
  line-height: var(--line-height-heading-3);
}

h4 {
  font-size: var(--font-size-heading-4);
  line-height: var(--line-height-heading-4);
}

ul li::marker {
  color: var(--color-main);
}

/* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */
.visually-hidden {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip-path: inset(50%);
  margin: -1px;
}