html {
  /* Colors */
  --color-main-blue: #34328e;
  --color-main-blue-rgb: 52, 50, 142;
  --color-tag-red: #e5004e;
  --color-accent-red: #800020;
  --color-tag-green: #35babe;
  --color-tag-yellow: #ffc700;
  --color-text-black: #2e2e2e;
  --color-frame-black: #3b3b3b;
  --color-text-gray: #acacac;
  --color-bg-light-gray1: #eaeaea;
  --color-bg-light-gray2: #f4f4f4;
  --color-white: #fff;

  /* Sizes */
  --size-1: 0.0625rem;
  --size-2: 0.125rem;
  --size-3: 0.1875rem;
  --size-4: 0.25rem;
  --size-6: 0.375rem;
  --size-8: 0.5rem;
  --size-10: 0.625rem;
  --size-11: 0.6875rem;
  --size-12: 0.75rem;
  --size-14: 0.875rem;
  --size-15: 0.9375rem;
  --size-16: 1rem;
  --size-18: 1.125rem;
  --size-20: 1.25rem;
  --size-24: 1.5rem;
  --size-28: 1.75rem;
  --size-30: 1.875rem;
  --size-32: 2rem;
  --size-36: 2.25rem;
  --size-40: 2.5rem;
  --size-42: 2.625rem;
  --size-48: 3rem;
  --size-54: 3.25rem;
  --size-56: 3.5rem;
  --size-62: 3.875rem;
  --size-80: 5rem;
  --size-96: 6rem;
  --size-100: 6.25rem;
  --size-106: 6.625rem;
  --size-120: 7.5rem;
  --size-140: 8.75rem;
  --size-160: 10rem;
  --size-170: 10.625rem;
  --size-200: 12.5rem;
  --size-210: 13.125rem;
  --size-220: 13.75rem;
  --size-240: 15rem;
  --size-250: 15.625rem;
  --size-270: 16.875rem;
  --size-275: 17.1875rem;
  --size-310: 19.375rem;
  --size-323: 20.1875rem;
  --size-350: 21.875rem;
  --size-370: 23.125rem;
  --size-400: 25rem;
  --size-420: 26.25rem;
  --size-440: 27.5rem;
  --size-450: 28.125rem;
  --size-550: 34.375rem;
  --size-700: 43.75rem;
  --size-800: 50rem;
  --size-840: 52.5rem;
  --size-1100: 68.75rem;

  --font-family-yg: "游ゴシック体", YuGothic, "游ゴシック Medium",
    "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  --font-family-ym: "游明朝体", YuMincho, "游明朝", "Yu Mincho", serif;
  --font-family-roboto: "Roboto", sans-serif;

  /* Typography */
  --font-weight-bold: 700;
  --font-weight-medium: 500;
}

body {
  font-family: var(--font-family-yg);
  font-size: var(--size-16);
  line-height: 1.7;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

@media (max-width: 768px) {
  body {
    font-size: var(--size-14);
    line-height: 1.5;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

a {
  cursor: pointer;
  text-decoration: none;
  color: var(--color-text-black);
}
a:hover,
a:visited,
a:focus {
  color: currentColor;
}

/* Utility */

.un {
  display: inline-block;
}

.un::after {
  content: "";
  width: 0px;
  height: 1px;
  display: block;
  background: currentColor;
  transition: 300ms;
}

.un:hover::after {
  width: 100%;
}

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-bg-light-gray1);
  margin: var(--size-14) 0;
}

select {
  min-width: var(--size-140);
  padding: var(--size-8);
  border: 1px solid var(--color-text-black);
  border-radius: var(--size-4);
  border-radius: 0;
  border: 1px solid var(--color-text-gray);
  font-weight: var(--font-weight-bold);
}

ul {
  list-style: none;
  margin: unset;
  padding: unset;
}

/* 共通コンテナスタイル */
.content-container {
  width: 100%;
  max-width: var(--size-840);
  margin: var(--size-80) auto;
  padding: 0 var(--size-20);
  margin-bottom: var(--size-80);
}

/* 幅広コンテナスタイル（1100px） */
.wide-container {
  width: 100%;
  max-width: var(--size-1100);
}

/* 最大幅コンテナスタイル（1200px） */
.max-container {
  width: 100%;
  max-width: var(--size-1200);
}

/* コンテナのマージンボトム調整用ユーティリティクラス */
.content-container--mb-40 {
  margin-bottom: var(--size-40);
}

.content-container--mb-0 {
  margin-bottom: 0;
}

.heading-1 {
  font-size: var(--size-48);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--size-40);
}

.heading-2 {
  font-size: var(--size-32);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--size-40);
}

.heading-3 {
  position: relative;
  font-size: var(--size-20);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--size-14);
  padding-left: var(--size-14);
}

.text-center {
  text-align: center;
}

.heading-3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 4px;
  background-color: var(--color-main-blue);
}

.bannar-section__content {
  display: flex;
  justify-content: center;
  column-gap: var(--size-40);
  row-gap: var(--size-24);
}

.banner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: var(--size-323);
  padding: var(--size-16);
  border: 1px solid var(--color-text-gray);
}

.banner__image-wrapper {
  width: 100%;
  height: var(--size-120);
}

.banner__image {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.banner__text {
  font-size: var(--size-16);
  font-weight: var(--font-weight-medium);
}

.banner__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

@media screen and (max-width: 768px) {
  .heading-1 {
    font-size: var(--size-24);
    margin-bottom: var(--size-32);
  }

  .heading-2 {
    font-size: var(--size-20);
    margin-bottom: var(--size-20);
  }

  .heading-3 {
    font-size: var(--size-18);
    margin-bottom: var(--size-10);
  }

  .content-container {
    margin: var(--size-40) auto;
    margin-bottom: var(--size-40);
  }

  .content-container--mobile-no-header-image-mt-adjusted {
    margin-top: var(--size-120);
  }

  .bannar-section__content {
    flex-direction: column;
    row-gap: var(--size-24);
    align-items: center;
  }
}