@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

:root,
:host {
  --font-size-1: 128px;
  --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-sans: "Noto Sans JP", sans-serif;
  --font-accent: "Jost", sans-serif;
  --font-serif: "Noto Serif JP", serif;

  --color-main: #c9a063;
  --color-white: #ffffff;
  --color-black: #333333;
  --color-light-gray: #f1f1f1;

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

  @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 */
  }

}