@charset "utf-8";

/* モーダル1 */
.modal_button {
  width: 70%;
  height: 2vw;
  background-color: #20A1C3;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9vw;
  margin-top: 2vw;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
}

/* モーダルコンテンツのスタイル */
.modal-content1 {
  background-color: black;
  padding: 1vw;
  box-shadow: 0 0.1vw 1vw rgba(204, 204, 204, 0.2);
  width: 40%;
  max-height: 90vh;
  overflow-y: auto;
  /* コンテンツがはみ出た場合にスクロール */
  position: relative;
  /* 子要素のposition:absoluteの基準 */
  /* アニメーションの初期状態 (少し上に配置し、スケールを小さく) */
  transform: translateY(2vw) scale(0.95);
  /* アニメーションのトランジション */
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  /* 初期は完全に透明 */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

/* モーダル表示時にモーダルコンテンツに適用されるスタイル */
.modal-overlay.is-active .modal-content1 {
  transform: translateY(0) scale(1);
  /* 元の位置、元のサイズに戻す */
  opacity: 1;
  /* 不透明 */
}

.hf_modal_img {
  width: 30vw;
  align-self: center;
  justify-self: center;
  grid-column: 1;
  grid-row: 1;
}

.hf_modal_table {
  width: 100%;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(1fr);
  grid-template-rows: repeat(30, auto);
  row-gap: 1vw;
}

.hf_modal_table {
  width: 100%;
  color: #E6E6E6;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(1fr);
  grid-template-rows: repeat(30, auto);
  row-gap: 1vw;
}

.hf_modal_table>div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
}

.hf_modal_table>div>p {
  font-size: 0.9vw;
}

.hf_modal_table>div>p:first-of-type {
  grid-column: 1;
  justify-self: start;
  padding-left: 10vw;
}

.hf_modal_table>div:first-of-type {
  margin-top: 2vw;
}

.hf_modal_table>div:nth-of-type(30) {
  margin-bottom: 2vw;
}


.hf_modal_table>div>p:nth-of-type(2) {
  grid-column: 2;
  margin-left: -1vw;
}

.hf_modal_table>img {
  width: 70%;
  border-color: #E6E6E6;
  justify-self: center;
}

/* モーダル2 */
/* モーダルオーバーレイのスタイル */
.modal-overlay {
  /* 初期状態では非表示 */
  visibility: hidden;
  /* display: none; の代わりにアニメーションのために visibility を使う */
  opacity: 0;
  /* 初期は完全に透明 */
  /* 画面全体に広げる */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 背景色と透過度 (50%透過の黒) */
  background-color: rgba(0, 0, 0, 0.5);
  /* 最前面に表示 */
  z-index: 1000;
  /* モーダルコンテンツを中央に配置するためのFlexbox */
  display: flex;
  justify-content: center;
  align-items: center;

  /* アニメーションのトランジション */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* モーダル表示時に適用されるクラス */
.modal-overlay.is-active {
  visibility: visible;
  /* 表示 */
  opacity: 1;
  /* 不透明 */
}

/* モーダルコンテンツのスタイル */
.modal-content {
  background-color: rgb(224, 224, 224);
  padding: 1vw;
  box-shadow: 0 0.1vw 1vw rgba(204, 204, 204, 0.2);
  width: 40%;
  max-height: 90vh;
  overflow-y: auto;
  /* コンテンツがはみ出た場合にスクロール */
  position: relative;
  /* 子要素のposition:absoluteの基準 */
  /* アニメーションの初期状態 (少し上に配置し、スケールを小さく) */
  transform: translateY(2vw) scale(0.95);
  /* アニメーションのトランジション */
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  /* 初期は完全に透明 */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

/* モーダル表示時にモーダルコンテンツに適用されるスタイル */
.modal-overlay.is-active .modal-content {
  transform: translateY(0) scale(1);
  /* 元の位置、元のサイズに戻す */
  opacity: 1;
  /* 不透明 */
}

/* バツマークボタンのスタイル */
.close-button {
  position: absolute;
  /* 親要素 (.modal-content) を基準に配置 */
  top: 1vw;
  right: 1vw;
  background: none;
  border: none;
  font-size: 2vw;
  cursor: pointer;
  color: #6f6f6f;
  padding: 0.5vw;
  line-height: 1;
  /* 高さの調整 */
}

.close-button:hover {
  color: white;
}

/* 背景スクロールを無効にするクラス */
body.no-scroll {
  overflow: hidden;
}

.modal_button_2 {
  width: 75%;
  height: 2vw;
  background-color: #20A1C3;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9vw;
  margin-top: 2vw;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
}

.hf_modal_img_2 {
  display: block;
  width: 80%;
  height: auto;
  align-self: center;
  justify-self: center;
  grid-column: 1;
  grid-row: 1;
  mix-blend-mode: color-burn;
  opacity: 10%;
}

.hf_modal_table_2 {
  width: 100%;
  color: #2c2c2c;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(1fr);
  grid-template-rows: repeat(22, auto);
  row-gap: 0.8vw;
}

.hf_modal_table_2>div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
}

.hf_modal_table_2>div>p {
  font-size: 0.9vw;
}

.hf_modal_table_2>div>h1 {
  grid-column: 1/3;
  justify-self: center;
  font-size: 1.2vw;
  font-weight: 500;
}

.hf_modal_table_2>div:nth-of-type(12) {
  margin-top: 1vw;
}



.hf_modal_table_2>div>p:first-of-type {
  grid-column: 1;
  justify-self: start;
  padding-left: 10vw;
}

.hf_modal_table_2>div:first-of-type {
  margin-top: 2vw;
}

.hf_modal_table_2>div:nth-of-type(21) {
  margin-bottom: 2vw;
}


.hf_modal_table_2>div>p:nth-of-type(2) {
  grid-column: 2;
  margin-left: -1vw;
}

.hf_modal_table_2>img {
  width: 70%;
  border-color: #E6E6E6;
  justify-self: center;
}

/* モーダル3 */
/* モーダルオーバーレイのスタイル */
.modal-overlay {
  /* 初期状態では非表示 */
  visibility: hidden;
  /* display: none; の代わりにアニメーションのために visibility を使う */
  opacity: 0;
  /* 初期は完全に透明 */
  /* 画面全体に広げる */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 背景色と透過度 (50%透過の黒) */
  background-color: rgba(0, 0, 0, 0.5);
  /* 最前面に表示 */
  z-index: 1000;
  /* モーダルコンテンツを中央に配置するためのFlexbox */
  display: flex;
  justify-content: center;
  align-items: center;

  /* アニメーションのトランジション */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* モーダル表示時に適用されるクラス */
.modal-overlay.is-active {
  visibility: visible;
  /* 表示 */
  opacity: 1;
  /* 不透明 */
}

/* モーダルコンテンツのスタイル */
.modal-content3 {
  background-color: rgb(224, 224, 224);
  padding: 1vw;
  box-shadow: 0 0.1vw 1vw rgba(204, 204, 204, 0.2);
  width: 40%;
  max-height: 90vh;
  overflow-y: auto;
  /* コンテンツがはみ出た場合にスクロール */
  position: relative;
  /* 子要素のposition:absoluteの基準 */
  /* アニメーションの初期状態 (少し上に配置し、スケールを小さく) */
  transform: translateY(2vw) scale(0.95);
  /* アニメーションのトランジション */
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  /* 初期は完全に透明 */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

/* モーダル表示時にモーダルコンテンツに適用されるスタイル */
.modal-overlay.is-active .modal-content3 {
  transform: translateY(0) scale(1);
  /* 元の位置、元のサイズに戻す */
  opacity: 1;
  /* 不透明 */
}

/* バツマークボタンのスタイル */
.close-button {
  position: absolute;
  /* 親要素 (.modal-content) を基準に配置 */
  top: 1vw;
  right: 1vw;
  background: none;
  border: none;
  font-size: 2vw;
  cursor: pointer;
  color: #6f6f6f;
  padding: 0.5vw;
  line-height: 1;
  /* 高さの調整 */
}

.close-button:hover {
  color: white;
}

/* 背景スクロールを無効にするクラス */
body.no-scroll {
  overflow: hidden;
}

.modal_button3 {
  width: 75%;
  height: 2vw;
  background-color: #20A1C3;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9vw;
  margin-top: 2vw;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
}

.hf_modal_img_3 {
  display: block;
  width: 80%;
  height: 95%;
  align-self: center;
  justify-self: center;
  grid-column: 1;
  grid-row: 1;
  mix-blend-mode: color-burn;
  opacity: 10%;
}

.hf_modal_table_3 {
  width: 100%;
  color: #2c2c2c;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(1fr);
  grid-template-rows: repeat(22, auto);
  row-gap: 0.8vw;
}

.hf_modal_table_3>div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
}

.hf_modal_table_3>div>p {
  font-size: 0.9vw;
}

.hf_modal_table_3>div>h1 {
  grid-column: 1/3;
  justify-self: center;
  font-size: 1.2vw;
  font-weight: 500;
}

.hf_modal_table_3>div:nth-of-type(11) {
  margin-top: 1vw;
}

.hf_modal_table_3>div>p:first-of-type {
  grid-column: 1;
  justify-self: start;
  padding-left: 10vw;
}

.hf_modal_table_3>div:first-of-type {
  margin-top: 2vw;
}

.hf_modal_table_3>div:nth-of-type(25) {}

.hf_modal_table_3>div>p:nth-of-type(2) {
  grid-column: 2;
  margin-left: -1vw;
}

.hf_modal_table_3>img {
  width: 70%;
  border-color: #E6E6E6;
  justify-self: center;
}

/* モーダル4 */
/* モーダルコンテンツのスタイル */
.modal-content4 {
  background-color: rgb(254, 251, 235);
  padding: 1vw;
  box-shadow: 0 0.1vw 1vw rgba(204, 204, 204, 0.2);
  width: 40%;
  max-height: 90vh;
  overflow-y: auto;
  /* コンテンツがはみ出た場合にスクロール */
  position: relative;
  /* 子要素のposition:absoluteの基準 */
  /* アニメーションの初期状態 (少し上に配置し、スケールを小さく) */
  transform: translateY(2vw) scale(0.95);
  /* アニメーションのトランジション */
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  /* 初期は完全に透明 */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

/* モーダル表示時にモーダルコンテンツに適用されるスタイル */
.modal-overlay.is-active .modal-content4 {
  transform: translateY(0) scale(1);
  /* 元の位置、元のサイズに戻す */
  opacity: 1;
  /* 不透明 */
}

/* バツマークボタンのスタイル */
.close-button {
  position: absolute;
  /* 親要素 (.modal-content) を基準に配置 */
  top: 1vw;
  right: 1vw;
  background: none;
  border: none;
  font-size: 2vw;
  cursor: pointer;
  color: #6f6f6f;
  padding: 0.5vw;
  line-height: 1;
  /* 高さの調整 */
}

.close-button:hover {
  color: white;
}

/* 背景スクロールを無効にするクラス */
body.no-scroll {
  overflow: hidden;
}

.modal_button4 {
  width: 100%;
  height: 2vw;
  background-color: #20A1C3;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9vw;
  margin-top: 2vw;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
}

.hf_modal_img_4 {
  display: block;
  width: 80%;
  height: auto;
  align-self: center;
  justify-self: center;
  grid-column: 1;
  grid-row: 1;
  mix-blend-mode: multiply;
  opacity: 10%;
}

.hf_modal_table_4 {
  width: 100%;
  color: #2c2c2c;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(1fr);
  grid-template-rows: repeat(22, auto);
  row-gap: 1.4vw;
}

.hf_modal_table_4>div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
}

.hf_modal_table_4>div>p {
  font-size: 0.9vw;
  align-self: center;
  line-height: 1.4vw;
}

.hf_modal_table_4>div>p:first-of-type {
  grid-column: 1;
  justify-self: start;
  padding-left: 6vw;
  font-weight: 600;
  color: #380000;
  letter-spacing: 0.1vw;
  font-size: 0.9vw;
}

.hf_modal_table_4>div:first-of-type {
  margin-top: 2vw;
}

.hf_modal_table_4>div:nth-of-type(19) {
  margin-bottom: 2vw;
}

.hf_modal_table_4>div>p:nth-of-type(2) {
  grid-column: 2;
  margin-left: 1vw;
}

.hf_modal_table_4>img {
  width: 70%;
  border-color: #E6E6E6;
  justify-self: center;
}

/* モーダル5 */
/* モーダルコンテンツのスタイル */
.modal-content5 {
  background-color: rgb(251, 255, 247);
  padding: 1vw;
  box-shadow: 0 0.1vw 1vw rgba(204, 204, 204, 0.2);
  width: 40%;
  max-height: 90vh;
  overflow-y: auto;
  /* コンテンツがはみ出た場合にスクロール */
  position: relative;
  /* 子要素のposition:absoluteの基準 */
  /* アニメーションの初期状態 (少し上に配置し、スケールを小さく) */
  transform: translateY(2vw) scale(0.95);
  /* アニメーションのトランジション */
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  /* 初期は完全に透明 */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

/* モーダル表示時にモーダルコンテンツに適用されるスタイル */
.modal-overlay.is-active .modal-content5 {
  transform: translateY(0) scale(1);
  /* 元の位置、元のサイズに戻す */
  opacity: 1;
  /* 不透明 */
}

/* バツマークボタンのスタイル */
.close-button {
  position: absolute;
  /* 親要素 (.modal-content) を基準に配置 */
  top: 1vw;
  right: 1vw;
  background: none;
  border: none;
  font-size: 2vw;
  cursor: pointer;
  color: #6f6f6f;
  padding: 0.5vw;
  line-height: 1;
  /* 高さの調整 */
}

.close-button:hover {
  color: white;
}

/* 背景スクロールを無効にするクラス */
body.no-scroll {
  overflow: hidden;
}

.modal_button5 {
  width: 70%;
  height: 2vw;
  background-color: #20A1C3;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9vw;
  margin-top: 2vw;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
}

.hf_modal_img_5 {
  display: block;
  width: 80%;
  height: auto;
  align-self: center;
  justify-self: center;
  grid-column: 1;
  grid-row: 1;
  mix-blend-mode: multiply;
  opacity: 10%;
}

.hf_modal_table_5 {
  width: 100%;
  color: #2c2c2c;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(1fr);
  grid-template-rows: repeat(22, auto);
  row-gap: 1.4vw;
}

.hf_modal_table_5>div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
}

.hf_modal_table_5>div>p {
  font-size: 0.9vw;
  align-self: center;
  line-height: 1.4vw;
}

.hf_modal_table_5>div>p:first-of-type {
  grid-column: 1;
  justify-self: start;
  padding-left: 6vw;
  font-weight: 600;
  color: #380000;
  letter-spacing: 0.1vw;
  font-size: 0.9vw;
}

.hf_modal_table_5>div:first-of-type {
  margin-top: 2vw;
}

.hf_modal_table_5>div:nth-of-type(19) {
  margin-bottom: 2vw;
}

.hf_modal_table_5>img {
  width: 70%;
  border-color: #E6E6E6;
  justify-self: center;
}

@media screen and (max-width: 1260px) {

  /* モーダル1 */
  .modal_button {
    width: 70%;
    height: 2vw;
    background-color: #20A1C3;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9vw;
    margin-top: 2vw;
  }

  /* モーダルコンテンツのスタイル */
  .modal-content1 {
    background-color: black;
    padding: 1vw;
    box-shadow: 0 0.1vw 1vw rgba(204, 204, 204, 0.2);
    width: 40%;
    max-height: 90vh;
    overflow-y: auto;
    /* コンテンツがはみ出た場合にスクロール */
    position: relative;
    /* 子要素のposition:absoluteの基準 */
    /* アニメーションの初期状態 (少し上に配置し、スケールを小さく) */
    transform: translateY(2vw) scale(0.95);
    /* アニメーションのトランジション */
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    /* 初期は完全に透明 */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* モーダル表示時にモーダルコンテンツに適用されるスタイル */
  .modal-overlay.is-active .modal-content1 {
    transform: translateY(0) scale(1);
    /* 元の位置、元のサイズに戻す */
    opacity: 1;
    /* 不透明 */
  }

  .hf_modal_img {
    width: 80%;
    align-self: center;
    justify-self: center;
    grid-column: 1;
    grid-row: 1;
  }

  .hf_modal_table {
    width: 100%;
    color: #E6E6E6;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(1fr);
    grid-template-rows: repeat(30, auto);
    row-gap: 1vw;
  }

  .hf_modal_table>div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .hf_modal_table>div>p {
    font-size: 1vw;
  }

  .hf_modal_table>div>p:first-of-type {
    grid-column: 1;
    justify-self: start;
    padding-left: 10vw;
  }

  .hf_modal_table>div:first-of-type {
    margin-top: 2vw;
  }

  .hf_modal_table>div:nth-of-type(30) {
    margin-bottom: 2vw;
  }


  .hf_modal_table>div>p:nth-of-type(2) {
    grid-column: 2;
    margin-left: -1vw;
  }

  .hf_modal_table>img {
    width: 70%;
    border-color: #E6E6E6;
    justify-self: center;
  }

  /* モーダル2 */
  /* モーダルオーバーレイのスタイル */
  .modal-overlay {
    /* 初期状態では非表示 */
    visibility: hidden;
    /* display: none; の代わりにアニメーションのために visibility を使う */
    opacity: 0;
    /* 初期は完全に透明 */
    /* 画面全体に広げる */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 背景色と透過度 (50%透過の黒) */
    background-color: rgba(0, 0, 0, 0.5);
    /* 最前面に表示 */
    z-index: 1000;
    /* モーダルコンテンツを中央に配置するためのFlexbox */
    display: flex;
    justify-content: center;
    align-items: center;

    /* アニメーションのトランジション */
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  /* モーダル表示時に適用されるクラス */
  .modal-overlay.is-active {
    visibility: visible;
    /* 表示 */
    opacity: 1;
    /* 不透明 */
  }

  /* モーダルコンテンツのスタイル */
  .modal-content {
    background-color: rgb(224, 224, 224);
    padding: 1vw;
    box-shadow: 0 0.1vw 1vw rgba(204, 204, 204, 0.2);
    width: 50%;
    max-height: 90vh;
    overflow-y: auto;
    /* コンテンツがはみ出た場合にスクロール */
    position: relative;
    /* 子要素のposition:absoluteの基準 */
    /* アニメーションの初期状態 (少し上に配置し、スケールを小さく) */
    transform: translateY(2vw) scale(0.95);
    /* アニメーションのトランジション */
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    /* 初期は完全に透明 */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* モーダル表示時にモーダルコンテンツに適用されるスタイル */
  .modal-overlay.is-active .modal-content {
    transform: translateY(0) scale(1);
    /* 元の位置、元のサイズに戻す */
    opacity: 1;
    /* 不透明 */
  }

  /* バツマークボタンのスタイル */
  .close-button {
    position: absolute;
    /* 親要素 (.modal-content) を基準に配置 */
    top: 1vw;
    right: 1vw;
    background: none;
    border: none;
    font-size: 2vw;
    cursor: pointer;
    color: #6f6f6f;
    padding: 0.5vw;
    line-height: 1;
    /* 高さの調整 */
  }

  .close-button:hover {
    color: white;
  }

  /* 背景スクロールを無効にするクラス */
  body.no-scroll {
    overflow: hidden;
  }

  .modal_button_2 {
    width: 75%;
    height: 2vw;
    background-color: #20A1C3;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9vw;
    margin-top: 2vw;
  }

  .hf_modal_img_2 {
    display: block;
    width: 80%;
    height: auto;
    align-self: center;
    justify-self: center;
    grid-column: 1;
    grid-row: 1;
    mix-blend-mode: color-burn;
    opacity: 10%;
  }

  .hf_modal_table_2 {
    width: 100%;
    color: #2c2c2c;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(1fr);
    grid-template-rows: repeat(22, auto);
    row-gap: 1vw;
  }

  .hf_modal_table_2>div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .hf_modal_table_2>div>p {
    font-size: 1vw;
  }

  .hf_modal_table_2>div>h1 {
    grid-column: 1/3;
    justify-self: center;
    font-size: 1.2vw;
    font-weight: 500;
  }

  .hf_modal_table_2>div:nth-of-type(12) {
    margin-top: 1vw;
  }

  .hf_modal_table_2>div>p:first-of-type {
    grid-column: 1;
    justify-self: start;
    padding-left: 10vw;
  }

  .hf_modal_table_2>div:first-of-type {
    margin-top: 2vw;
  }

  .hf_modal_table_2>div:nth-of-type(22) {
    margin-bottom: 2vw;
  }

  .hf_modal_table_2>div>p:nth-of-type(2) {
    grid-column: 2;
    margin-left: -1vw;
  }

  .hf_modal_table_2>img {
    width: 70%;
    border-color: #E6E6E6;
    justify-self: center;
  }

  /* モーダル3 */
  /* モーダルオーバーレイのスタイル */
  .modal-overlay {
    /* 初期状態では非表示 */
    visibility: hidden;
    /* display: none; の代わりにアニメーションのために visibility を使う */
    opacity: 0;
    /* 初期は完全に透明 */
    /* 画面全体に広げる */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 背景色と透過度 (50%透過の黒) */
    background-color: rgba(0, 0, 0, 0.5);
    /* 最前面に表示 */
    z-index: 1000;
    /* モーダルコンテンツを中央に配置するためのFlexbox */
    display: flex;
    justify-content: center;
    align-items: center;

    /* アニメーションのトランジション */
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  /* モーダル表示時に適用されるクラス */
  .modal-overlay.is-active {
    visibility: visible;
    /* 表示 */
    opacity: 1;
    /* 不透明 */
  }

  /* モーダルコンテンツのスタイル */
  .modal-content3 {
    background-color: rgb(224, 224, 224);
    padding: 1vw;
    box-shadow: 0 0.1vw 1vw rgba(204, 204, 204, 0.2);
    width: 50%;
    max-height: 90vh;
    overflow-y: auto;
    /* コンテンツがはみ出た場合にスクロール */
    position: relative;
    /* 子要素のposition:absoluteの基準 */
    /* アニメーションの初期状態 (少し上に配置し、スケールを小さく) */
    transform: translateY(2vw) scale(0.95);
    /* アニメーションのトランジション */
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    /* 初期は完全に透明 */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* モーダル表示時にモーダルコンテンツに適用されるスタイル */
  .modal-overlay.is-active .modal-content3 {
    transform: translateY(0) scale(1);
    /* 元の位置、元のサイズに戻す */
    opacity: 1;
    /* 不透明 */
  }

  /* バツマークボタンのスタイル */
  .close-button {
    position: absolute;
    /* 親要素 (.modal-content) を基準に配置 */
    top: 1vw;
    right: 1vw;
    background: none;
    border: none;
    font-size: 2vw;
    cursor: pointer;
    color: #6f6f6f;
    padding: 0.5vw;
    line-height: 1;
    /* 高さの調整 */
  }

  .close-button:hover {
    color: white;
  }

  /* 背景スクロールを無効にするクラス */
  body.no-scroll {
    overflow: hidden;
  }

  .modal_button3 {
    width: 75%;
    height: 2vw;
    background-color: #20A1C3;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9vw;
    margin-top: 2vw;
  }

  .hf_modal_img_3 {
    display: block;
    width: 90%;
    height: 80%;
    align-self: center;
    justify-self: center;
    grid-column: 1;
    grid-row: 1;
    mix-blend-mode: color-burn;
    opacity: 10%;
  }

  .hf_modal_table_3 {
    width: 100%;
    color: #2c2c2c;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(1fr);
    grid-template-rows: repeat(22, auto);
    row-gap: 1vw;
  }

  .hf_modal_table_3>div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .hf_modal_table_3>div>p {
    font-size: 1vw;
  }

  .hf_modal_table_3>div>h1 {
    grid-column: 1/3;
    justify-self: center;
    font-size: 1.2vw;
    font-weight: 500;
  }

  .hf_modal_table_3>div:nth-of-type(11) {
    margin-top: 1vw;
  }

  .hf_modal_table_3>div>p:first-of-type {
    grid-column: 1;
    justify-self: start;
    padding-left: 10vw;
  }

  .hf_modal_table_3>div:first-of-type {
    margin-top: 2vw;
  }

  .hf_modal_table_3>div:nth-of-type(26) {}

  .hf_modal_table_3>div>p:nth-of-type(2) {
    grid-column: 2;
    margin-left: -1vw;
  }

  .hf_modal_table_3>img {
    width: 70%;
    border-color: #E6E6E6;
    justify-self: center;
  }

  /* モーダル4 */
  /* モーダルコンテンツのスタイル */
  .modal-content4 {
    background-color: rgb(254, 251, 235);
    padding: 1vw;
    box-shadow: 0 0.1vw 1vw rgba(204, 204, 204, 0.2);
    width: 50%;
    max-height: 90vh;
    overflow-y: auto;
    /* コンテンツがはみ出た場合にスクロール */
    position: relative;
    /* 子要素のposition:absoluteの基準 */
    /* アニメーションの初期状態 (少し上に配置し、スケールを小さく) */
    transform: translateY(2vw) scale(0.95);
    /* アニメーションのトランジション */
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    /* 初期は完全に透明 */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* モーダル表示時にモーダルコンテンツに適用されるスタイル */
  .modal-overlay.is-active .modal-content4 {
    transform: translateY(0) scale(1);
    /* 元の位置、元のサイズに戻す */
    opacity: 1;
    /* 不透明 */
  }

  /* バツマークボタンのスタイル */
  .close-button {
    position: absolute;
    /* 親要素 (.modal-content) を基準に配置 */
    top: 1vw;
    right: 1vw;
    background: none;
    border: none;
    font-size: 2vw;
    cursor: pointer;
    color: #6f6f6f;
    padding: 0.5vw;
    line-height: 1;
    /* 高さの調整 */
  }

  .close-button:hover {
    color: white;
  }

  /* 背景スクロールを無効にするクラス */
  body.no-scroll {
    overflow: hidden;
  }

  .modal_button4 {
    width: 100%;
    height: 2vw;
    background-color: #20A1C3;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9vw;
    margin-top: 2vw;
  }

  .hf_modal_img_4 {
    display: block;
    width: 80%;
    height: auto;
    align-self: center;
    justify-self: center;
    grid-column: 1;
    grid-row: 1;
    mix-blend-mode: multiply;
    opacity: 10%;
  }

  .hf_modal_table_4 {
    width: 100%;
    color: #2c2c2c;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(1fr);
    grid-template-rows: repeat(18, auto);
    row-gap: 1.4vw;
  }

  .hf_modal_table_4>div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .hf_modal_table_4>div>p {
    font-size: 1vw;
    align-self: center;
    line-height: 1.4vw;
  }

  .hf_modal_table_4>div>p:first-of-type {
    grid-column: 1;
    justify-self: start;
    padding-left: 6vw;
    font-weight: 600;
    color: #380000;
    letter-spacing: 0.1vw;
    font-size: 1vw;
  }

  .hf_modal_table_4>div:first-of-type {
    margin-top: 2vw;
  }

  .hf_modal_table_4>div:nth-of-type(19) {
    margin-bottom: 2vw;
  }

  .hf_modal_table_4>div>p:nth-of-type(2) {
    grid-column: 2;
    margin-left: 1vw;
  }

  .hf_modal_table_4>img {
    width: 70%;
    border-color: #E6E6E6;
    justify-self: center;
  }

  /* モーダル5 */
  /* モーダルコンテンツのスタイル */
  .modal-content5 {
    background-color: rgb(254, 251, 235);
    padding: 1vw;
    box-shadow: 0 0.1vw 1vw rgba(204, 204, 204, 0.2);
    width: 50%;
    max-height: 90vh;
    overflow-y: auto;
    /* コンテンツがはみ出た場合にスクロール */
    position: relative;
    /* 子要素のposition:absoluteの基準 */
    /* アニメーションの初期状態 (少し上に配置し、スケールを小さく) */
    transform: translateY(2vw) scale(0.95);
    /* アニメーションのトランジション */
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    /* 初期は完全に透明 */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* モーダル表示時にモーダルコンテンツに適用されるスタイル */
  .modal-overlay.is-active .modal-content5 {
    transform: translateY(0) scale(1);
    /* 元の位置、元のサイズに戻す */
    opacity: 1;
    /* 不透明 */
  }

  /* バツマークボタンのスタイル */
  .close-button {
    position: absolute;
    /* 親要素 (.modal-content) を基準に配置 */
    top: 1vw;
    right: 1vw;
    background: none;
    border: none;
    font-size: 2vw;
    cursor: pointer;
    color: #6f6f6f;
    padding: 0.5vw;
    line-height: 1;
    /* 高さの調整 */
  }

  .close-button:hover {
    color: white;
  }

  /* 背景スクロールを無効にするクラス */
  body.no-scroll {
    overflow: hidden;
  }

  .modal_button5 {
    width: 100%;
    height: 2vw;
    background-color: #20A1C3;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9vw;
    margin-top: 2vw;
  }

  .hf_modal_img_5 {
    display: block;
    width: 80%;
    height: auto;
    align-self: center;
    justify-self: center;
    grid-column: 1;
    grid-row: 1;
    mix-blend-mode: multiply;
    opacity: 10%;
  }

  .hf_modal_table_5 {
    width: 100%;
    color: #2c2c2c;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(1fr);
    grid-template-rows: repeat(18, auto);
    row-gap: 1.4vw;
  }

  .hf_modal_table_5>div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .hf_modal_table_5>div>p {
    font-size: 1vw;
    align-self: center;
    line-height: 1.4vw;
  }

  .hf_modal_table_5>div>p:first-of-type {
    grid-column: 1;
    justify-self: start;
    padding-left: 6vw;
    font-weight: 600;
    color: #380000;
    letter-spacing: 0.1vw;
    font-size: 1vw;
  }

  .hf_modal_table_5>div:first-of-type {
    margin-top: 2vw;
  }

  .hf_modal_table_5>div:nth-of-type(18) {
    margin-bottom: 2vw;
  }

  .hf_modal_table_5>div>p:nth-of-type(2) {
    grid-column: 2;
    margin-left: 1vw;
  }

  .hf_modal_table_5>img {
    width: 70%;
    border-color: #E6E6E6;
    justify-self: center;
  }
}

@media screen and (max-width: 430px) {

  /* モーダル1 */
  .modal_button {
    width: 100%;
    height: 8vw;
    background-color: #20A1C3;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.6vw;
    margin-top: 6vw;
  }

  /* モーダルコンテンツのスタイル */
  .modal-content1 {
    background-color: black;
    padding: 0;
    padding-top: 10vw;
    padding-bottom: 10vw;
    box-shadow: 0 0.1vw 1vw rgba(204, 204, 204, 0.2);
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    /* コンテンツがはみ出た場合にスクロール */
    position: relative;
    /* 子要素のposition:absoluteの基準 */
    /* アニメーションの初期状態 (少し上に配置し、スケールを小さく) */
    transform: translateY(2vw) scale(0.95);
    /* アニメーションのトランジション */
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    /* 初期は完全に透明 */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* モーダル表示時にモーダルコンテンツに適用されるスタイル */
  .modal-overlay.is-active .modal-content1 {
    transform: translateY(0) scale(1);
    /* 元の位置、元のサイズに戻す */
    opacity: 1;
    /* 不透明 */
  }

  .hf_modal_img {
    width: 80%;
    align-self: center;
    justify-self: center;
    grid-column: 1;
    grid-row: 1;
  }

  .hf_modal_table {
    width: 100%;
    color: #E6E6E6;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(1fr);
    grid-template-rows: repeat(30, auto);
    row-gap: 4vw;
  }

  .hf_modal_table>div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .hf_modal_table>div>p {
    font-size: 3vw;
  }

  .hf_modal_table>div>p:first-of-type {
    grid-column: 1;
    justify-self: start;
    padding-left: 15vw;
  }

  .hf_modal_table>div:first-of-type {
    margin-top: 2vw;
  }

  .hf_modal_table>div:nth-of-type(30) {
    margin-bottom: 2vw;
  }


  .hf_modal_table>div>p:nth-of-type(2) {
    grid-column: 2;
    margin-left: -5vw;
  }

  .hf_modal_table>img {
    width: 90%;
    border-color: #E6E6E6;
    justify-self: center;
  }

  /* モーダル2 */
  /* モーダルオーバーレイのスタイル */
  .modal-overlay {
    /* 初期状態では非表示 */
    visibility: hidden;
    /* display: none; の代わりにアニメーションのために visibility を使う */
    opacity: 0;
    /* 初期は完全に透明 */
    /* 画面全体に広げる */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 背景色と透過度 (50%透過の黒) */
    background-color: rgba(0, 0, 0, 0.5);
    /* 最前面に表示 */
    z-index: 1000;
    /* モーダルコンテンツを中央に配置するためのFlexbox */
    display: flex;
    justify-content: center;
    align-items: center;

    /* アニメーションのトランジション */
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  /* モーダル表示時に適用されるクラス */
  .modal-overlay.is-active {
    visibility: visible;
    /* 表示 */
    opacity: 1;
    /* 不透明 */
  }

  /* モーダルコンテンツのスタイル */
  .modal-content {
    background-color: rgb(224, 224, 224);
    padding: 0;
    padding-top: 10vw;
    padding-bottom: 10vw;
    box-shadow: 0 0.1vw 1vw rgba(204, 204, 204, 0.2);
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    /* コンテンツがはみ出た場合にスクロール */
    position: relative;
    /* 子要素のposition:absoluteの基準 */
    /* アニメーションの初期状態 (少し上に配置し、スケールを小さく) */
    transform: translateY(2vw) scale(0.95);
    /* アニメーションのトランジション */
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    /* 初期は完全に透明 */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* モーダル表示時にモーダルコンテンツに適用されるスタイル */
  .modal-overlay.is-active .modal-content {
    transform: translateY(0) scale(1);
    /* 元の位置、元のサイズに戻す */
    opacity: 1;
    /* 不透明 */
  }

  .close-button:hover {
    color: white;
  }

  /* 背景スクロールを無効にするクラス */
  body.no-scroll {
    overflow: hidden;
  }

  .modal_button_2 {
    width: 100%;
    height: 8vw;
    background-color: #20A1C3;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.6vw;
    margin-top: 6vw;
  }

  .hf_modal_img_2 {
    display: block;
    width: 80%;
    height: auto;
    align-self: center;
    justify-self: center;
    grid-column: 1;
    grid-row: 1;
    mix-blend-mode: color-burn;
    opacity: 10%;
  }

  .hf_modal_table_2 {
    width: 100%;
    color: #2c2c2c;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(1fr);
    grid-template-rows: repeat(22, auto);
    row-gap: 4vw;
  }

  .hf_modal_table_2>div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .hf_modal_table_2>div>p {
    font-size: 3vw;
  }

  .hf_modal_table_2>div>h1 {
    grid-column: 1/3;
    justify-self: center;
    font-size: 4vw;
    font-weight: 500;
  }

  .hf_modal_table_2>div:nth-of-type(12) {
    margin-top: 5vw;
  }

  .hf_modal_table_2>div>p:first-of-type {
    grid-column: 1;
    justify-self: start;
    padding-left: 15vw;
  }

  .hf_modal_table_2>div:first-of-type {
    margin-top: 2vw;
  }

  .hf_modal_table_2>div:nth-of-type(22) {
    margin-bottom: 2vw;
  }

  .hf_modal_table_2>div>p:nth-of-type(2) {
    grid-column: 2;
    margin-left: -10vw;
  }

  .hf_modal_table_2>img {
    width: 90%;
    border-color: #E6E6E6;
    justify-self: center;
  }

  /* モーダル3 */
  /* モーダルオーバーレイのスタイル */
  .modal-overlay {
    /* 初期状態では非表示 */
    visibility: hidden;
    /* display: none; の代わりにアニメーションのために visibility を使う */
    opacity: 0;
    /* 初期は完全に透明 */
    /* 画面全体に広げる */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 背景色と透過度 (50%透過の黒) */
    background-color: rgba(0, 0, 0, 0.5);
    /* 最前面に表示 */
    z-index: 1000;
    /* モーダルコンテンツを中央に配置するためのFlexbox */
    display: flex;
    justify-content: center;
    align-items: center;

    /* アニメーションのトランジション */
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  /* モーダル表示時に適用されるクラス */
  .modal-overlay.is-active {
    visibility: visible;
    /* 表示 */
    opacity: 1;
    /* 不透明 */
  }

  /* モーダルコンテンツのスタイル */
  .modal-content3 {
    background-color: rgb(224, 224, 224);
    padding: 0;
    padding-top: 10vw;
    padding-bottom: 10vw;
    box-shadow: 0 0.1vw 1vw rgba(204, 204, 204, 0.2);
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    /* コンテンツがはみ出た場合にスクロール */
    position: relative;
    /* 子要素のposition:absoluteの基準 */
    /* アニメーションの初期状態 (少し上に配置し、スケールを小さく) */
    transform: translateY(2vw) scale(0.95);
    /* アニメーションのトランジション */
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    /* 初期は完全に透明 */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* モーダル表示時にモーダルコンテンツに適用されるスタイル */
  .modal-overlay.is-active .modal-content3 {
    transform: translateY(0) scale(1);
    /* 元の位置、元のサイズに戻す */
    opacity: 1;
    /* 不透明 */
  }



  .close-button:hover {
    color: white;
  }

  /* 背景スクロールを無効にするクラス */
  body.no-scroll {
    overflow: hidden;
  }

  .modal_button3 {
    width: 100%;
    height: 8vw;
    background-color: #20A1C3;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.6vw;
    margin-top: 6vw;
  }

  .hf_modal_img_3 {
    display: block;
    width: 80%;
    height: auto;
    align-self: center;
    justify-self: center;
    grid-column: 1;
    grid-row: 1;
    mix-blend-mode: color-burn;
    opacity: 10%;
  }

  .hf_modal_table_3 {
    width: 100%;
    color: #2c2c2c;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(1fr);
    grid-template-rows: repeat(22, auto);
    row-gap: 4vw;
  }

  .hf_modal_table_3>div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .hf_modal_table_3>div>p {
    font-size: 3vw;
  }

  .hf_modal_table_3>div>h1 {
    grid-column: 1/3;
    justify-self: center;
    font-size: 4vw;
    font-weight: 500;
  }

  .hf_modal_table_3>div:nth-of-type(12) {
    margin-top: 5vw;
  }

  .hf_modal_table_3>div>p:first-of-type {
    grid-column: 1;
    justify-self: start;
    padding-left: 30%;
  }

  .hf_modal_table_3>div:first-of-type {
    margin-top: 2vw;
  }

  .hf_modal_table_3>div:nth-of-type(26) {
    margin-bottom: 2vw;
  }

  .hf_modal_table_3>div>p:nth-of-type(2) {
    grid-column: 2;
    margin-left: -20%;
  }

  .hf_modal_table_3>img {
    width: 90%;
    border-color: #E6E6E6;
    justify-self: center;
  }

  /* モーダル4 */
  /* モーダルコンテンツのスタイル */
  .modal-content4 {
    background-color: rgb(254, 251, 235);
    padding: 0;
    padding-top: 10vw;
    padding-bottom: 10vw;
    box-shadow: 0 0.1vw 1vw rgba(204, 204, 204, 0.2);
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    /* コンテンツがはみ出た場合にスクロール */
    position: relative;
    /* 子要素のposition:absoluteの基準 */
    /* アニメーションの初期状態 (少し上に配置し、スケールを小さく) */
    transform: translateY(2vw) scale(0.95);
    /* アニメーションのトランジション */
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    /* 初期は完全に透明 */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* モーダル表示時にモーダルコンテンツに適用されるスタイル */
  .modal-overlay.is-active .modal-content4 {
    transform: translateY(0) scale(1);
    /* 元の位置、元のサイズに戻す */
    opacity: 1;
    /* 不透明 */
  }

  /* バツマークボタンのスタイル */
  .close-button {
    position: absolute;
    /* 親要素 (.modal-content) を基準に配置 */
    top: 2%;
    right: 5%;
    background: none;
    border: none;
    font-size: 8vw;
    cursor: pointer;
    color: #6f6f6f;
    padding: 0.5vw;
    line-height: 1;
    /* 高さの調整 */
  }

  .close-button:hover {
    color: white;
  }

  /* 背景スクロールを無効にするクラス */
  body.no-scroll {
    overflow: hidden;
  }

  .modal_button4 {
    width: 100%;
    height: 8vw;
    background-color: #20A1C3;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.3vw;
    margin-top: 6vw;
  }

  .hf_modal_img_4 {
    display: block;
    width: 80%;
    height: auto;
    align-self: center;
    justify-self: center;
    grid-column: 1;
    grid-row: 1;
    mix-blend-mode: multiply;
    opacity: 10%;
  }

  .hf_modal_table_4 {
    width: 100%;
    color: #2c2c2c;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(1fr);
    grid-template-rows: repeat(18, auto);
    row-gap: 5vw;
  }

  .hf_modal_table_4>div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .hf_modal_table_4>div>p {
    font-size: 3vw;
    align-self: center;
    line-height: 5vw;
  }

  .hf_modal_table_4>div>p:first-of-type {
    grid-column: 1;
    justify-self: start;
    padding-left: 15%;
    font-weight: 600;
    color: #380000;
    letter-spacing: 0.1vw;
    font-size: 3vw;
  }

  .hf_modal_table_4>div:first-of-type {
    margin-top: 2vw;
  }

  .hf_modal_table_4>div:nth-of-type(19) {
    margin-bottom: 2vw;
  }

  .hf_modal_table_4>div>p:nth-of-type(2) {
    grid-column: 2;
    margin: 0;
    padding-left: 10%;
  }

  .hf_modal_table_4>img {
    width: 90%;
    border-color: #E6E6E6;
    justify-self: center;
  }

  /* モーダル5 */
  /* モーダルコンテンツのスタイル */
  .modal-content5 {
    background-color: rgb(254, 251, 235);
    padding: 0;
    padding-top: 10vw;
    padding-bottom: 10vw;
    box-shadow: 0 0.1vw 1vw rgba(204, 204, 204, 0.2);
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    /* コンテンツがはみ出た場合にスクロール */
    position: relative;
    /* 子要素のposition:absoluteの基準 */
    /* アニメーションの初期状態 (少し上に配置し、スケールを小さく) */
    transform: translateY(2vw) scale(0.95);
    /* アニメーションのトランジション */
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    /* 初期は完全に透明 */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* モーダル表示時にモーダルコンテンツに適用されるスタイル */
  .modal-overlay.is-active .modal-content5 {
    transform: translateY(0) scale(1);
    /* 元の位置、元のサイズに戻す */
    opacity: 1;
    /* 不透明 */
  }

  /* バツマークボタンのスタイル */
  .close-button {
    position: absolute;
    /* 親要素 (.modal-content) を基準に配置 */
    top: 2%;
    right: 5%;
    background: none;
    border: none;
    font-size: 8vw;
    cursor: pointer;
    color: #6f6f6f;
    padding: 0.5vw;
    line-height: 1;
    /* 高さの調整 */
  }

  .close-button:hover {
    color: white;
  }

  /* 背景スクロールを無効にするクラス */
  body.no-scroll {
    overflow: hidden;
  }

  .modal_button5 {
    width: 100%;
    height: 8vw;
    background-color: #20A1C3;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.3vw;
    margin-top: 6vw;
  }

  .hf_modal_img_5 {
    display: block;
    width: 80%;
    height: auto;
    align-self: center;
    justify-self: center;
    grid-column: 1;
    grid-row: 1;
    mix-blend-mode: multiply;
    opacity: 10%;
  }

  .hf_modal_table_5 {
    width: 100%;
    color: #2c2c2c;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(1fr);
    grid-template-rows: repeat(18, auto);
    row-gap: 5vw;
  }

  .hf_modal_table_5>div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .hf_modal_table_5>div>p {
    font-size: 3vw;
    align-self: center;
    line-height: 5vw;
  }

  .hf_modal_table_5>div>p:first-of-type {
    grid-column: 1;
    justify-self: start;
    font-weight: 600;
    color: #380000;
    letter-spacing: 0.1vw;
    font-size: 3vw;
    padding: 0;
    padding-left: 10%;
  }

  .hf_modal_table_5>div:first-of-type {
    margin-top: 2vw;
  }

  .hf_modal_table_5>div:nth-of-type(18) {
    margin-bottom: 2vw;
  }

  .hf_modal_table_5>div>p:nth-of-type(2) {
    grid-column: 2;
    margin: 0;
  }

  .hf_modal_table_5>img {
    width: 90%;
    border-color: #E6E6E6;
    justify-self: center;
  }
  
}