:root {
  --font-sans: "Montserrat", "Noto Sans JP", "system-ui", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Georgia", Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "SFMono-Regular", SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --font-display: "Zen Maru Gothic", var(--font-sans);

  /* 全体のベースとなる文字間隔（大元）。
   * letter-spacing の計算値は「絶対長」として解決され、em はその値を宣言した
   * 要素の font-size で解決されたうえで、絶対長のまま子要素へ継承される
   * （CSS Text Module Level 3 / MDN）。
   * そのため body だけに 0.08em を指定すると、font-size の異なる見出し等では
   * 見た目の字間が変わってしまう。
   * この変数を各要素で `letter-spacing: var(--tracking)` として使うことで、
   * var() が使用箇所で展開され、各要素が自身の font-size で em を解決するため、
   * どの要素でも同じ相対字間になる。
   * ベース値を変更する場合はこの 1 行を書き換える（字間なしにするなら 0）。 */
  --tracking: 0.04em;

  /* 0px から 414px:
   * 375pxの画面幅で約16pxに到達するvwを設定 (16 / 375 = 0.0426667...)
   */
  --font-size-base: 4.26667vw;
  /* 414px から 768px:
   * 414pxの画面幅で約16pxに到達するvwを設定 (16 / 414 = 0.038647...)
   */
  @media screen and (min-width: 414px) {
    --font-size-base: 3.8647vw;
  }
  /* 768px から 1024px:
   * 1024pxの画面幅で約20pxに到達するvwを設定 (20 / 1024 = 0.019531...)
   */
  @media screen and (min-width: 768px) {
    --font-size-base: 1.9531vw;
  }
  /* 1024px から 1200px:
   * 1200pxの画面幅で約18pxに到達するvwを設定 (18 / 1200 = 0.015)
   */
  @media screen and (min-width: 1024px) {
    --font-size-base: 1.5vw;
  }
  /* 1200px 以上:
   * 1200px以上の画面幅で約12pxに到達するvwを設定 (12 / 1200 = 0.01)
   */
  @media screen and (min-width: 1200px) {
    --font-size-base: 1vw;
  }
}

.font-sans {
  font-family: var(--font-sans);
}
.font-serif {
  font-family: var(--font-serif);
}
.font-mono {
  font-family: var(--font-mono);
}
.font-display {
  font-family: var(--font-display);
}

.font-light {
  font-weight: 300;
}
.font-regular {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.font-black {
  font-weight: 900;
}

.text-10 {
  font-size: 0.625rem;
}
.text-12 {
  font-size: 0.75rem;
}
.text-14 {
  font-size: 0.875rem;
}
.text-16 {
  font-size: 1rem;
}
.text-18 {
  font-size: 1.125rem;
}
.text-20 {
  font-size: 1.25rem;
}
.text-24 {
  font-size: 1.5rem;
}
.text-28 {
  font-size: 1.75rem;
}
.text-32 {
  font-size: 2rem;
}
.text-36 {
  font-size: 2.25rem;
}
.text-40 {
  font-size: 2.5rem;
}
.text-48 {
  font-size: 3rem;
}
.text-56 {
  font-size: 3.5rem;
}
.text-60 {
  font-size: 3.75rem;
}
.text-64 {
  font-size: 4rem;
}

.leading-100 {
  line-height: 1;
}
.leading-115 {
  line-height: 1.15;
}
.leading-120 {
  line-height: 1.2;
}
.leading-125 {
  line-height: 1.25;
}
.leading-150 {
  line-height: 1.5;
}
.leading-180 {
  line-height: 1.8;
}
.leading-200 {
  line-height: 2;
}
.leading-240 {
  line-height: 2.4;
}
.leading-320 {
  line-height: 3.2;
}

/* ベースの適用。
 * var() は使用箇所で展開されるため、各要素が自身の font-size で em を解決する。
 * これにより「body への一括指定」と「各タグへの個別指定」の字間差が解消される。
 * ::before / ::after は含めない（アイコンフォント等に字間が付くのを避けるため）。 */
* {
  letter-spacing: var(--tracking);
}

/* トラッキングクラスは letter-spacing を直接指定せず、変数の上書きに徹する。
 * カスタムプロパティは継承されるため、任意の要素（ラッパー含む）に付ければ
 * 配下の各要素が上書き後の値を自身の font-size で解決する。 */
.tracking-0 {
  --tracking: 0;
}
.tracking-4 {
  --tracking: 0.04em;
}
.tracking-6 {
  --tracking: 0.06em;
}
.tracking-8 {
  --tracking: 0.08em;
}
.tracking-10 {
  --tracking: 0.1em;
}
.tracking-12 {
  --tracking: 0.12em;
}
.tracking-16 {
  --tracking: 0.16em;
}
.tracking-20 {
  --tracking: 0.2em;
}

.text-start {
  text-align: start;
}
.text-center {
  text-align: center;
}
.text-end {
  text-align: end;
}

.text-no-br br {
  display: none;
}
.text-br br {
  display: block;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.vertical-rl {
  writing-mode: vertical-rl;
}

@media screen and (min-width: 414px) {
  .sm--text-14 {
    font-size: 0.875rem;
  }
  .sm--text-16 {
    font-size: 1rem;
  }
  .sm--text-18 {
    font-size: 1.125rem;
  }
  .sm--text-20 {
    font-size: 1.25rem;
  }
  .sm--text-24 {
    font-size: 1.5rem;
  }
  .sm--text-28 {
    font-size: 1.75rem;
  }
  .sm--text-32 {
    font-size: 2rem;
  }
  .sm--text-36 {
    font-size: 2.25rem;
  }
  .sm--text-40 {
    font-size: 2.5rem;
  }

  .sm--text-no-br br {
    display: none;
  }
  .sm--text-br br {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .md--text-14 {
    font-size: 0.875rem;
  }
  .md--text-16 {
    font-size: 1rem;
  }
  .md--text-18 {
    font-size: 1.125rem;
  }
  .md--text-20 {
    font-size: 1.25rem;
  }
  .md--text-24 {
    font-size: 1.5rem;
  }
  .md--text-28 {
    font-size: 1.75rem;
  }
  .md--text-32 {
    font-size: 2rem;
  }
  .md--text-36 {
    font-size: 2.25rem;
  }
  .md--text-40 {
    font-size: 2.5rem;
  }
  .md--text-48 {
    font-size: 3rem;
  }
  .md--text-56 {
    font-size: 3.5rem;
  }
  .md--text-60 {
    font-size: 3.75rem;
  }
  .md--text-64 {
    font-size: 4rem;
  }

  .md--text-no-br br {
    display: none;
  }
  .md--text-br br {
    display: block;
  }

  .md--text-start {
    text-align: start !important;
  }
  .md--text-center {
    text-align: center !important;
  }
  .md--text-end {
    text-align: end !important;
  }
}

@media screen and (min-width: 1024px) {
  .lg--text-12 {
    font-size: 0.75rem;
  }
  .lg--text-14 {
    font-size: 0.875rem;
  }
  .lg--text-16 {
    font-size: 1rem;
  }
  .lg--text-18 {
    font-size: 1.125rem;
  }
  .lg--text-20 {
    font-size: 1.25rem;
  }
  .lg--text-24 {
    font-size: 1.5rem;
  }
  .lg--text-28 {
    font-size: 1.75rem;
  }
  .lg--text-32 {
    font-size: 2rem;
  }
  .lg--text-36 {
    font-size: 2.25rem;
  }
  .lg--text-40 {
    font-size: 2.5rem;
  }
  .lg--text-48 {
    font-size: 3rem;
  }
  .lg--text-56 {
    font-size: 3.5rem;
  }
  .lg--text-60 {
    font-size: 3.75rem;
  }
  .lg--text-64 {
    font-size: 4rem;
  }

  .lg--text-no-br br {
    display: none;
  }
  .lg--text-br br {
    display: block;
  }

  .lg--text-start {
    text-align: start !important;
  }
  .lg--text-center {
    text-align: center !important;
  }
  .lg--text-end {
    text-align: end !important;
  }
}

@media screen and (min-width: 1200px) {
  .xl--text-14 {
    font-size: 0.875rem;
  }
  .xl--text-16 {
    font-size: 1rem;
  }
  .xl--text-18 {
    font-size: 1.125rem;
  }
  .xl--text-20 {
    font-size: 1.25rem;
  }
  .xl--text-24 {
    font-size: 1.5rem;
  }
  .xl--text-28 {
    font-size: 1.75rem;
  }
  .xl--text-32 {
    font-size: 2rem;
  }
  .xl--text-36 {
    font-size: 2.25rem;
  }
  .xl--text-40 {
    font-size: 2.5rem;
  }
  .xl--text-48 {
    font-size: 3rem;
  }
  .xl--text-56 {
    font-size: 3.5rem;
  }
  .xl--text-60 {
    font-size: 3.75rem;
  }
  .xl--text-64 {
    font-size: 4rem;
  }
  .xl--text-80 {
    font-size: 5rem;
  }

  .xl--text-no-br br {
    display: none;
  }
  .xl--text-br br {
    display: block;
  }

  .xl--text-start {
    text-align: start !important;
  }
  .xl--text-center {
    text-align: center !important;
  }
  .xl--text-end {
    text-align: end !important;
  }
}