article {
  word-break: break-word;
}

h1,
h2,
h3,
h4 {
  hyphens: auto;
  line-height: var(--line-height-small);
}

h1 {
  font-size: var(--s2);
}

h2 {
  font-size: var(--s1);
}

h3 {
  font-size: var(--s0);
}

b,
h3,
strong,
.font-weight_bold {
  font-weight: bold;
}

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

figcaption,
blockquote > q {
  font-style: italic;
}

:any-link {
  color: hsl(240, var(--l-100), var(--l-50));
  cursor: pointer;
  text-decoration-color: hsl(240, var(--l-100), var(--l-50));
  text-decoration-skip-ink: auto;
  text-decoration: underline;
  transition-duration: var(--speed-medium);
  transition-property: color,
                       text-decoration-color;
  transition-timing-function: var(--easing-standard);
}

:any-link:hover {
  color: hsl(355, var(--l-100), var(--l-45));
  text-decoration-color: hsl(355, var(--l-100), var(--l-45));
}

abbr {
  text-decoration-style: dotted;
  text-decoration: underline;
}

wbr:before {
  content: "\200B";
  white-space: normal;
}

th {
  text-align: left;
}

q {
  quotes: '«' '»';
}

label,
figcaption {
  font-size: var(--s-1);
}

ul {
  list-style-type: '一 ';
}

ul[class],
ol[class] {
  list-style: none;
}

table {
  border-collapse: collapse;
}

hr {
  border: none;
  height: 1px;
  background: hsl(0, 0%, var(--l-20));
  background-image: linear-gradient(to right,
                    hsl(0, 0%, var(--l-80)),
                    hsl(0, 0%, var(--l-20)),
                    hsl(0, 0%, var(--l-80)));
}

html {
  color: var(--color);
  font-display: optional;
  font-family: system-ui,
               -apple-system,
               BlinkMacSystemFont,
               Segoe UI,
               Roboto,
               Helvetica,
               Arial,
               sans-serif,
               Apple Color Emoji,
               Segoe UI Emoji;
  font-size: calc(1rem + 0.333vw);
}

body {
  line-height: var(--line-height);
  text-rendering: optimizeSpeed;
}