:root {
  /* ============ Theme Typography ============ */

  /* ----- font-size */
  --font-size-base: 62.5%;

  /* ----- weight */
  --normal: 400;
  --bold: 600;

  /* ----- 本文 */
  --body-font-family-base:
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  --body-font-size-base: 1.4rem;
  --body-font-size-sm: 1.2rem;
  --body-font-size-min: 1rem;
  --body-line-height-base: 1.8;
  --body-font-weight-base: var(--normal);
  --body-font-weight-bold: var(--bold);
  --body-letter-spacing-base: 0;

  /* ----- 見出し */
  --heading-font-weight-base: var(--bold);
  --heading-font-style: normal;
  --heading-letter-spacing: 0;
  --heading-line-height-base: 1.5;
  --heading-font-size-h1: 4rem;
  --heading-font-size-h2: 3rem;
  --heading-font-size-h3: 2.2rem;
  --heading-font-size-h4: 1.6rem;

  /* ============ Theme Colors ============ */

  /* ----- ブランドカラー */
  --color-bland-base: #ed0000;

  /* ----- ファンクションカラー */
  --color-index-base: #164a84; /* 個人用 */

  /* ----- テキストカラー */
  --color-text-base: #333;
  --color-text-link-base: #2f80ed;
  --color-text-placeholder: #808080;

  /* ----- 基本色 */
  --color-white: #fff;
  --color-black: #000;

  /* ----- アクセントカラー  */
  --color-accent: var(--color-black);
  --color-accent-focus: var(--color-black);
  --color-accent-error: var(--color-black);

  /* ----- 背景色 */
  --bg-color-base: #fff;

  /* ----- サポートカラー */
  --color-gray-100: #f7f7f7;
  --color-gray-300: #e6e6e6;

  /* ----- ボーダーカラー */
  --border-color-base: #e6e6e6;
}

@media all and (max-width: 767.98px) {
  :root {
    /* ----- 本文 */
    --body-font-size-base: 1.4rem;
    --body-font-size-sm: 12px;
    --body-letter-spacing-base: 0;

    /* ----- 見出し */
    --heading-font-size-h1: 1.9rem;
    --heading-font-size-h2: 1.9rem;
    --heading-font-size-h3: 1.7rem;
    --heading-font-size-h4: 1.7rem;
  }
}