/*===========================================
 rem計算式用 入力値の設定（カスタマイズゾーン）
========================================== */
/*
【重要：ブレイクポイントの変更手順】
以下の2つの値を変更する際は、コード内の該当箇所を変更してください：

1. PC切替幅：768px
   → @media (max-width: 767px) の1箇所
   → @media (min-width: 768px) の1箇所
   → 計算式内の "100vw - 768px" と "/ 768" の2箇所

2. 最大幅：1400px
   → @media (max-width: 1399px) の1箇所
   → @media (min-width: 1400px) の1箇所

※メディアクエリ内では変数が使用できないため、数値を直接変更する必要があります
*/

:root {
  /* ブレイクポイント */
  --breakpoint-mobile: 375;
  --breakpoint-desktop: 768;
  --max-desktop-width: 1200;

  /* モバイル用フォントサイズ */
  --mobile-min-font: 16;
  --mobile-max-font: 19;

  /* PC用フォントサイズ */
  --desktop-min-font: 19;
  --desktop-max-font: 19;
}

/* デフォルトのフォントサイズ */
html {
  font-size: calc(var(--mobile-min-font) * 1px);
}

/* モバイルの可変フォントサイズ（375px-767px） */
@media (min-width: 375px) and (max-width: 767px) {
  html {
    font-size: calc(
      var(--mobile-min-font) * 1px +
        (var(--mobile-max-font) - var(--mobile-min-font)) *
        (
          (100vw - calc(var(--breakpoint-mobile) * 1px)) /
            (var(--breakpoint-desktop) - var(--breakpoint-mobile))
        )
    );
  }
}

/* PCサイズの可変フォントサイズ（768px-1399px） */
@media (min-width: 768px) and (max-width: 1199px) {
  html {
    font-size: calc(
      var(--desktop-min-font) * 1px +
        (var(--desktop-max-font) - var(--desktop-min-font)) *
        (
          (100vw - calc(var(--breakpoint-desktop) * 1px)) /
            (var(--max-desktop-width) - var(--breakpoint-desktop))
        )
    );
  }
}

/* PC最大サイズのフォントサイズ（1400px以上） */
@media (min-width: 1200px) {
  html {
    font-size: calc(var(--desktop-max-font) * 1px);
  }
}