@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap");

body {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--text-color);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  --font-size-small: 12px;
  --font-size-normal-text: 16px;
  --font-size-nav: 14px;
  --font-size-bigger-text: 20px;
  --font-size-sub-title: 24px;
  --font-size-title: 32px;
  --font-size-bigger-title: 48px;

  --text-color: #404041;
  --comment-color: #ADADAD;
  --main-color: #0979CC;
  --light-main-color: #57BFFE;
  --main-background-color: #E8F6FF;
  --sub-color: #FF9A00;
  --darker-sub-color: #FF7700;
  --light-sub-color: #FFE36A;
  --sub-background-color: #FFF8DA;
  --line-color: #06C755;
  --red-color: #FF0900;

  --main-gradient-color: linear-gradient(180deg, #00D0FF 0%, #0979CC 100%);
  --sub-gradient-color: linear-gradient(180deg, #FFE36A 0%, #FF9A00 100%);
  --line-gradient-color: linear-gradient(180deg, #00FF68 0%, #04BF50 100%);
}

h1,
h2,
h3,
h4,
h5 {
  font-size: var(--font-size-title);
  font-weight: bold;
  color: var(--main-color);
  text-align: center;
}

h1>span.bigger,
h2>span.bigger,
h3>span.bigger,
h4>span.bigger,
h5>span.bigger {
  font-size: var(--font-size-bigger-title);
  font-weight: bold;
}

.comment{
  font-size: var(--font-size-small);
  color: var(--comment-color);
}

/* span{
  text-decoration-line: none !important;
  text-decoration-style: none !important;
} */


@media (max-width: 1350px) {
  :root {
    --font-size-small: 10px;
    --font-size-normal-text: 14px;
    --font-size-nav: 12px;
    --font-size-bigger-text: 18px;
    --font-size-sub-title: 20px;
    --font-size-title: 28px;
    --font-size-bigger-title: 40px;
  }
}

@media (max-width: 1000px) {
  :root {
    --font-size-small: 10px;
    --font-size-normal-text: 14px;
    --font-size-nav: 12px;
    --font-size-bigger-text: 16px;
    --font-size-sub-title: 18px;
    --font-size-title: 24px;
    --font-size-bigger-title: 34px;
  }
}

@media (max-width: 700px) {
  :root {
    /* 100vw = 402px → vw = px / 402 * 100 */
    --font-size-smallest: 1.9900vw;     /* 8px */
    --font-size-small: 2.4876vw;        /* 10px */
    --font-size-normal-text: 3.4826vw;  /* 14px */
    --font-size-nav: 2.9851vw;          /* 12px */
    --font-size-bigger-text: 3.9801vw;  /* 16px */
    --font-size-sub-title: 4.4776vw;    /* 18px */
    --font-size-title: 5.9701vw;        /* 24px */
    --font-size-bigger-title: 8.4577vw; /* 34px */
  }
}