/*
 * Fonts Reset
 * ----------------------------------------------------------------------------
 * Common Custom Fonts Should Be Set Here.
 * フォントの書き方の基礎：https://saruwakakun.com/html-css/basic/font-family-how-to
 */

/* Safari and Firefox use -apple-system for San Fransisco; Chrome recognizes BlinkMacSystemFont */
/* system-ui — default UI font on a given platform */

/**********************
Font familyの定義
**********************/
body {
  font-family: 'ヒラギノ角ゴ ProN', 'HiraKakuProN', 'ヒラギノ角ゴ Pro',
    'HiraKakuPro', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro',
    'Hiragino Sans', Meiryo, 'メイリオ', -apple-system, BlinkMacSystemFont,
    'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans JP', system-ui, Verdana,
    sans-serif;
}

/* 共通 font family */
:root {
  --hiragino-font-1: hiraginoKakuGothicPro-W1, Meiryo, 'メイリオ', -apple-system,
    BlinkMacSystemFont, Roboto-W1, NotoSans-W1, system-ui, Verdana, sans-serif;
  --hiragino-font-2: hiraginoKakuGothicPro-W2, Meiryo, 'メイリオ', -apple-system,
    BlinkMacSystemFont, Roboto-W2, NotoSans-W2, system-ui, Verdana, sans-serif;
  --hiragino-font-3: hiraginoKakuGothicPro-W3, Meiryo, 'メイリオ', -apple-system,
    BlinkMacSystemFont, Roboto-W3, NotoSans-W3, system-ui, Verdana, sans-serif;
  --hiragino-font-4: hiraginoKakuGothicPro-W4, Meiryo, 'メイリオ', -apple-system,
    BlinkMacSystemFont, Roboto-W4, NotoSans-W4, system-ui, Verdana, sans-serif;
  --hiragino-font-5: hiraginoKakuGothicPro-W5, Meiryo, 'メイリオ', -apple-system,
    BlinkMacSystemFont, Roboto-W5, NotoSans-W5, system-ui, Verdana, sans-serif;
  --hiragino-font-6: hiraginoKakuGothicPro-W6, Meiryo, 'メイリオ', -apple-system,
    BlinkMacSystemFont, Roboto-W6, NotoSans-W6, system-ui, Verdana, sans-serif;
  --hiragino-font-7: hiraginoKakuGothicPro-W7, Meiryo, 'メイリオ', -apple-system,
    BlinkMacSystemFont, Roboto-W7, NotoSans-W7, system-ui, Verdana, sans-serif;
  --hiragino-font-8: hiraginoKakuGothicPro-W8, Meiryo, 'メイリオ', -apple-system,
    BlinkMacSystemFont, Roboto-W8, NotoSans-W8, system-ui, Verdana, sans-serif;
  --hiragino-font-9: hiraginoKakuGothicPro-W9, Meiryo, 'メイリオ', -apple-system,
    BlinkMacSystemFont, Roboto-W9, NotoSans-W9, system-ui, Verdana, sans-serif;

  /* 例外 font その ① */
  --helvetica-font: 'Helvetica Neue', Helvetica, -apple-system, BlinkMacSystemFont,
    Roboto, 'ヒラギノ角ゴ ProN', 'HiraKakuProN', 'ヒラギノ角ゴ Pro', 'HiraKakuPro',
    'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'Hiragino Sans',
    'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans JP', system-ui, Verdana,
    'メイリオ', Meiryo, sans-serif;

  /* 例外 font その ② */
  --Avenir: Avenir, -apple-system, BlinkMacSystemFont, 'ヒラギノ角ゴ ProN',
    'HiraKakuProN', 'ヒラギノ角ゴ Pro', 'HiraKakuPro', 'Hiragino Kaku Gothic ProN',
    'Hiragino Kaku Gothic Pro', 'Hiragino Sans', 'Noto Sans', 'Noto Sans CJK JP',
    'Noto Sans JP', system-ui, Verdana, 'メイリオ', Meiryo, sans-serif;

  /* 例外 font その ③ */
  --SegoeUI-Semibold: 'Segoe UI Semibold', 'Segoe UI', 'Helvetica Neue', Helvetica,
    'ヒラギノ角ゴ ProN', 'HiraKakuProN', 'ヒラギノ角ゴ Pro', 'HiraKakuPro',
    'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'Hiragino Sans',
    Meiryo, 'メイリオ', -apple-system, BlinkMacSystemFont, Roboto, 'Noto Sans',
    'Noto Sans CJK JP', 'Noto Sans JP', system-ui, Verdana, sans-serif;

  /* 例外 font その ④ */
  --SegoeUI-Bold: 'Segoe UI', 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ ProN',
    'HiraKakuProN', 'ヒラギノ角ゴ Pro', 'HiraKakuPro', 'Hiragino Kaku Gothic ProN',
    'Hiragino Kaku Gothic Pro', 'Hiragino Sans', Meiryo, 'メイリオ', -apple-system,
    BlinkMacSystemFont, Roboto, 'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans JP',
    system-ui, Verdana, sans-serif;
  /* etc... */

  /**********************
  variables
  **********************/
  /* Based on 375px screen size
  px / em convertor: https://www.w3schools.com/tags/ref_pxtoemconversion.asp
  percent convertor: https://percentagecalculator.net/ */
  --font-size-10: 0.625rem;
  --font-size-12: calc(0.5rem + 1.07vw);
  --font-size-14: calc(0.625rem + 1.07vw);
  --font-size-16: calc(0.75rem + 1.07vw);
  --font-size-18: calc(0.875em + 1.07vw);
  --font-size-20: calc(1em + 1.07vw);
  --font-size-22: calc(1.125em + 1.07vw);
  --font-size-24: calc(1.25rem + 1.07vw);
  --font-size-26: calc(1.375rem + 1.07vw);
  --font-size-28: calc(1.5rem + 1.07vw);
  --font-size-30: calc(1.625rem + 1.07vw);
  --font-size-32: calc(1.75rem + 1.07vw);
  --font-size-36: calc(2rem + 1.07vw);
  --font-size-40: calc(2.25rem + 1.07vw);
}

@media (min-width: 375px) {
  :root {
    --font-size-10: 0.625rem;
    --font-size-12: 0.75rem;
    --font-size-14: 0.875rem;
    --font-size-16: 1rem;
    --font-size-18: 1.125rem;
    --font-size-20: 1.25rem;
    --font-size-22: 1.375rem;
    --font-size-24: 1.5rem;
    --font-size-26: 1.625rem;
    --font-size-28: 1.75rem;
    --font-size-30: 1.875rem;
    --font-size-32: 2rem;
    --font-size-36: 2.25rem;
    --font-size-40: 2.5rem;
  }
}

/**********************
class
**********************/
/* font size */
/* 10px */
.font-mini {
  font-size: var(--font-size-10) !important;
}

/* 12px */
.font-extra-small {
  font-size: var(--font-size-12) !important;
}

/* 14px */
.font-small {
  font-size: var(--font-size-14) !important;
}

/* 16px */
.font-medium {
  font-size: var(--font-size-16) !important;
}

/* 18px */
.font-large {
  font-size: var(--font-size-18) !important;
}

/* 20px */
.font-extra-large {
  font-size: var(--font-size-20) !important;
}