*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--line-body);
  letter-spacing: 0.04em;
  /* 日本語の不自然な改行を防ぐ */
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: var(--line-heading); text-wrap: balance; word-break: auto-phrase; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
.nowrap { white-space: nowrap; }  /* 文中で改行させたくない語句に使う */

.center p, p.center { text-wrap: balance; }

/* 日本語の文節改行：js/site.js が文節の切れ目に <wbr> を入れたあとだけ有効にします。
   単語の途中では折り返さず、はみ出す長い文字列だけは安全のため途中で折り返します。 */
.phrase-on #app { word-break: keep-all; overflow-wrap: anywhere; }