@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
@import url('../font/yakuhanjp/dist/css/yakuhanjp.css');

:root,
:host {
  --font-size-1: 96px;
  --font-size-2: 64px;
  --font-size-3: 42.667px; /* h1 */
  --font-size-4: 32px;     /* h2 */
  --font-size-5: 25.6px;
  --font-size-6: 21.333px;
  --font-size-7: 18.286px; /* h3 */
  --font-size-8: 16px;     /* body */
  --font-size-9: 14.222px;
  --font-size-10: 12.8px;  /* small */

  --font-family-main: YakuhanJP, "Noto Sans JP", sans-serif;
  --font-family-accent: YakuhanJP, "Poppins", sans-serif;

  --color-main: #1955A6;
  --color-accent: #FADD29;
  --color-white: #ffffff;
  --color-black: #333333;
  --color-light-gray: #f1f1f1;

  --breakpoint-mobile: 767px;
  --breakpoint-tablet: 960px;
  --breakpoint-laptop: 1280px;
  --breakpoint-desktop: 1920px;

  @media (width <= 960px) {
    --is-mq-md: true;
  }
  @media (width <= 767px) {
    --is-mq-mobile: true;

    --font-size-1: 64px;
    --font-size-2: 42.667px;
    --font-size-3: 32px; /* h1 */
    --font-size-4: 25.6px;     /* h2 */
    --font-size-5: 21.333px;
    --font-size-6: 18.286px;
    --font-size-7: 16px; /* h3 */
    --font-size-8: 14.222px;     /* body */
    --font-size-9: 12.8px;
    --font-size-10: 10.667px;  /* small */
  }

}