:root {
  /* font size */
  --font-size-7xs: 7px;
  --font-size-3xs: 11px;
  --font-size-xs: 14px;
  --font-size-sm: 15px;
  --font-size-base: 16px;
  --font-size-md: 17px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-3xl: 22px;
  --font-size-5xl: 24px;
  --font-size-7xl: 26px;
  --font-size-9xl: 28px;
  --font-size-11xl: 30px;
  --font-size-13xl: 32px;
  --font-size-17xl: 36px;
  --font-size-19xl: 38px;
  --font-size-21xl: 40px;
  --font-size-23xl: 42px;
  --font-size-29xl: 48px;
  --font-size-33xl: 52px;
  --font-size-37xl: 56px;
  --font-size-47xl: 66px;
  --font-size-99xl: 118px;
  /* color */
  --color-white: #ffffff;
  --color-yellow: #faf21d;
  --color-navy: #081961;
  --color-whitesmoke-100: #f8f8f8;
  --color-whitesmoke-200: #f4f3ed;
  --color-skyblue: #D3E5F1;
  --color-black: #333333;
  --color-red: #b21616;
  --color-orange: #ef6f12;
  --color-darkgoldenrod: #916c07;
  --color-gainsboro: #e0e0e0;
  /* container */
  --container-width: min(1280px, calc(100vw - 5%));
  --container-width-sm: min(1080px, calc(100vw - 5%));
  /* margin */
  --margin-base: 1em;
  --margin-0-5: calc(var(--margin-base) * 0.5);
  --margin-1-0: calc(var(--margin-base) * 1);
  --margin-1-5: calc(var(--margin-base) * 1.5);
  --margin-2-0: calc(var(--margin-base) * 2);
  --margin-2-5: calc(var(--margin-base) * 2.5);
  --margin-3-0: calc(var(--margin-base) * 3);
  --margin-3-5: calc(var(--margin-base) * 3.5);
  --margin-4-0: calc(var(--margin-base) * 4);
  --margin-4-5: calc(var(--margin-base) * 4.5);
  --margin-5-0: calc(var(--margin-base) * 5);
  --margin-5-5: calc(var(--margin-base) * 5.5);
}

.container {
  max-width: var(--container-width);
  margin-right: auto;
  margin-left: auto;
}

.container-sm {
  max-width: var(--container-width-sm);
  margin-right: auto;
  margin-left: auto;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.underline {
  position: relative;
  z-index: 1;
}
.underline:before {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0.1em;
  left: 0;
  height: 0.3em;
  content: "";
  opacity: 0.8;
  background-color: yellow;
}

.white {
  color: var(--color-white);
}

.yellow {
  color: var(--color-yellow);
}

.navy {
  color: var(--color-navy);
}

.whitesmoke-100 {
  color: var(--color-whitesmoke-100);
}

.whitesmoke-200 {
  color: var(--color-whitesmoke-200);
}

.skyblue {
  color: var(--color-skyblue);
}

.black {
  color: var(--color-black);
}

.red {
  color: var(--color-red);
}

.orange {
  color: var(--color-orange);
}

.darkgoldenrod {
  color: var(--color-darkgoldenrod);
}

.gainsboro {
  color: var(--color-gainsboro);
}

.bg-white {
  background-color: var(--color-white);
}

.bg-yellow {
  background-color: var(--color-yellow);
}

.bg-navy {
  background-color: var(--color-navy);
}

.bg-whitesmoke-100 {
  background-color: var(--color-whitesmoke-100);
}

.bg-whitesmoke-200 {
  background-color: var(--color-whitesmoke-200);
}

.bg-skyblue {
  background-color: var(--color-skyblue);
}

.bg-black {
  background-color: var(--color-black);
}

.bg-red {
  background-color: var(--color-red);
}

.bg-orange {
  background-color: var(--color-orange);
}

.bg-darkgoldenrod {
  background-color: var(--color-darkgoldenrod);
}

.bg-gainsboro {
  background-color: var(--color-gainsboro);
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.sans-display {
  font-family: "Noto Sans Display", sans-serif;
}

.sans {
  font-family: "Noto Sans JP", sans-serif;
}

.serif {
  font-family: "Noto Serif JP", sans-serif;
}

.libre-caslon {
  font-family: "Libre Caslon Display", sans-serif;
}

.bold {
  font-weight: bold;
}

.semi-bold {
  font-weight: 600;
}

.medium {
  font-weight: 500;
}

.line-height-1-87 {
  line-height: 1.87em;
}

.line-height-2 {
  line-height: 2em;
}

.font-7xs {
  font-size: var(--font-size-7xs);
}

.font-3xs {
  font-size: var(--font-size-3xs);
}

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

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

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

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

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

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

.font-3xl {
  font-size: var(--font-size-3xl);
}

.font-5xl {
  font-size: var(--font-size-5xl);
}

.font-7xl {
  font-size: var(--font-size-7xl);
}

.font-9xl {
  font-size: var(--font-size-9xl);
}

.font-11xl {
  font-size: var(--font-size-11xl);
}

.font-13xl {
  font-size: var(--font-size-13xl);
}

.font-17xl {
  font-size: var(--font-size-17xl);
}

.font-19xl {
  font-size: var(--font-size-19xl);
}

.font-21xl {
  font-size: var(--font-size-21xl);
}

.font-23xl {
  font-size: var(--font-size-23xl);
}

.font-29xl {
  font-size: var(--font-size-29xl);
}

.font-33xl {
  font-size: var(--font-size-33xl);
}

.font-37xl {
  font-size: var(--font-size-37xl);
}

.font-47xl {
  font-size: var(--font-size-47xl);
}

.font-99xl {
  font-size: var(--font-size-99xl);
}

.mt-0-5 {
  margin-top: var(--margin-0-5);
}

.pt-0-5 {
  padding-top: var(--margin-0-5);
}

.mt-1 {
  margin-top: var(--margin-1-0);
}

.pt-1 {
  padding-top: var(--margin-1-0);
}

.mt-1-5 {
  margin-top: var(--margin-1-5);
}

.pt-1-5 {
  padding-top: var(--margin-1-5);
}

.mt-2 {
  margin-top: var(--margin-2-0);
}

.pt-2 {
  padding-top: var(--margin-2-0);
}

.mt-2-5 {
  margin-top: var(--margin-2-5);
}

.pt-2-5 {
  padding-top: var(--margin-2-5);
}

.mt-3 {
  margin-top: var(--margin-3-0);
}

.pt-3 {
  padding-top: var(--margin-3-0);
}

.mt-3-5 {
  margin-top: var(--margin-3-5);
}

.pt-3-5 {
  padding-top: var(--margin-3-5);
}

.mt-4 {
  margin-top: var(--margin-4-0);
}

.pt-4 {
  padding-top: var(--margin-4-0);
}

.mt-4-5 {
  margin-top: var(--margin-4-5);
}

.pt-4-5 {
  padding-top: var(--margin-4-5);
}

.mt-5 {
  margin-top: var(--margin-5-0);
}

.pt-5 {
  padding-top: var(--margin-5-0);
}

.mt-5-5 {
  margin-top: var(--margin-5-5);
}

.pt-5-5 {
  padding-top: var(--margin-5-5);
}

.mb-0-5 {
  margin-bottom: var(--margin-0-5);
}

.pb-0-5 {
  padding-bottom: var(--margin-0-5);
}

.mb-1 {
  margin-bottom: var(--margin-1-0);
}

.pb-1 {
  padding-bottom: var(--margin-1-0);
}

.mb-1-5 {
  margin-bottom: var(--margin-1-5);
}

.pb-1-5 {
  padding-bottom: var(--margin-1-5);
}

.mb-2 {
  margin-bottom: var(--margin-2-0);
}

.pb-2 {
  padding-bottom: var(--margin-2-0);
}

.mb-2-5 {
  margin-bottom: var(--margin-2-5);
}

.pb-2-5 {
  padding-bottom: var(--margin-2-5);
}

.mb-3 {
  margin-bottom: var(--margin-3-0);
}

.pb-3 {
  padding-bottom: var(--margin-3-0);
}

.mb-3-5 {
  margin-bottom: var(--margin-3-5);
}

.pb-3-5 {
  padding-bottom: var(--margin-3-5);
}

.mb-4 {
  margin-bottom: var(--margin-4-0);
}

.pb-4 {
  padding-bottom: var(--margin-4-0);
}

.mb-4-5 {
  margin-bottom: var(--margin-4-5);
}

.pb-4-5 {
  padding-bottom: var(--margin-4-5);
}

.mb-5 {
  margin-bottom: var(--margin-5-0);
}

.pb-5 {
  padding-bottom: var(--margin-5-0);
}

.mb-5-5 {
  margin-bottom: var(--margin-5-5);
}

.pb-5-5 {
  padding-bottom: var(--margin-5-5);
}