body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: var(--font-size-normal-text);
  color: var(--text-color);
  overflow-x: hidden;
  background: #fff;
}

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

:root {
  --inner-container-width: 1000px;

  /* Type scale */
  --font-size-comment: 12px;
  --font-size-normal-text: 18px;
  --font-size-title: 36px;

  /* Colors */
  --text-color: #1c2a51;
  --orange-color: #ff8c00;
  --yellow-color: #ffff01;
  --pink-color: #d53563;
  --red-color: #ff0000;
  --blue-color: #005baa;
  --light-blue-color: #3393cd;
  --table-vertical-heading-bg: #e2e3e8;
  --table-horizontal-heading-bg: #555e7b;
  --light-blue-background: #e6f5fc;
  --dark-blue-background: #1c2a51;
  --light-yellow-background: #ffffb2;
  --beige-background: #fbfada;
  --present-background: linear-gradient(to right, #f8fcfe, #d1ebf8);
  --present-curve-color: #c9dced;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: var(--font-size-title);
  font-weight: 800;
  color: var(--text-color);
  line-height: 1.4;
}

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

.inner-container {
  width: 100%;
  max-width: var(--inner-container-width);
  margin-inline: auto;
}

@media screen and (max-width: 1150px) {
  :root {
    --inner-container-width: 700px;

  }
}

@media screen and (max-width: 768px) {
  :root {
    --inner-container-width: 94vw;
    --font-size-comment: 2.4vw;
    --font-size-normal-text: 3.2vw;
    --font-size-title: 6.4vw;
  }
}