@charset "UTF-8";

img {
  vertical-align: bottom;
}

.c-header {
  position: fixed; /* 常に固定表示 */
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* 白色、透過度80% */
  z-index: 9999;
}

.c-header,
.c-header.fill {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

.bg {
  max-width: 1248px;
  margin: auto;
  padding-top: 0;
  padding-bottom: 8rem;
  background-repeat: no-repeat, no-repeat;
  background-position:
    center top,
    center bottom;
  background-size: 100%;
}

.fv h1 img {
  max-width: 940px;
}

.inner1 h2 img {
  width: 100%;
  height: auto;
  max-width: 940px; /* 必要に応じて上限を設定 */
}

/* セクションをそれぞれ相対配置の基準にする */
#top1,
#top2 {
  position: relative;
}

#day1,
#day2 {
  position: relative;
}

.inner1 {
  text-align: center;
  margin: 0 auto;
  zoom: 1;
}
.inner2 {
  max-width: 940px;
  margin: 0 auto;
  zoom: 1;
}
.inner3 {
  max-width: 850px;
  margin: 0 auto;
  margin-top: 40px; /* ここで上部に余白を追加 */
  margin-bottom: 40px; /* ここで下部に余白を追加 */
  zoom: 1;
}
.inner4 {
  max-width: 650px;
  margin: 0 auto;
  margin-top: 40px; /* ここで上部に余白を追加 */
  margin-bottom: 40px; /* ここで下部に余白を追加 */
  zoom: 1;
}
.inner5 {
  max-width: 850px;
  margin: 0 auto;
  margin-top: 40px; /* ここで上部に余白を追加 */
  margin-bottom: 40px; /* ここで下部に余白を追加 */
  zoom: 1;
}
.inner6 {
  max-width: 650px;
  margin: 0 auto;
  margin-top: 40px; /* ここで上部に余白を追加 */
  margin-bottom: 40px; /* ここで下部に余白を追加 */
  zoom: 1;
}

.fv {
  text-align: center;
  margin-top: 20px; /* ここで上部に余白を追加 */
  margin-bottom: 40px; /* ここで下部に余白を追加 */
}

.fv a {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
}
.fv a img {
  width: 15vw; /* 画面幅の20%をボタンの幅にする */
  max-width: 450px; /* PCでは最大250px */
  min-width: 300px; /* スマホでは最低150px */
}

.fv2 a {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
}
.fv2 a img {
  width: 15vw; /* 画面幅の20%をボタンの幅にする */
  max-width: 450px; /* PCでは最大250px */
  min-width: 300px; /* スマホでは最低150px */
}

#top1 .tkp-middle {
  position: absolute;
  margin-top: 4rem;
  color: #ffffff;
  font-weight: bold;
  font-size: min(3vw, 32px);
  text-align: center;
  line-height: 1.4em;
  font-weight: 600;
  -webkit-text-stroke: 1px #ffffff;
  /* 画像よりも前面に表示するため z-index を指定 */
  z-index: 10; /* 大きめの値にしてみる */
  /* 画像の中央あたりに配置 (例) */
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* ▼ ここで折り返し用の幅を指定する ▼ */
  width: 80%; /* 画面幅の80%を使う例 */
  max-width: 600px; /* 大きくなりすぎないよう最大幅を設定する例 */
}
#top1 .tkp-middle .tk1 {
  letter-spacing: 5px;
}
#top1 .tkp-middle .tk2 {
  font-size: min(1.5vw, 18px);
  letter-spacing: 1px;
  font-weight: 100; /* ここで文字の太さを小さく設定 */
}

#top1 .tkp-bottom {
  position: absolute;
  margin-top: 5rem;
  color: #ffffff;
  font-weight: normal;
  font-size: min(1.05vw, 10px);
  text-align: left;
  line-height: 1.4em;
  -webkit-text-stroke: 0;
  /* 画像よりも前面に表示するため z-index を指定 */
  z-index: 10; /* 大きめの値にしてみる */
  /* 画像の中央あたりに配置 (例) */
  top: 91%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* ▼ ここで折り返し用の幅を指定する ▼ */
  width: 88%; /* 画面幅の80%を使う例 */
  max-width: 830px; /* 大きくなりすぎないよう最大幅を設定する例 */
}

#top2 picture img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1, 1.01); /* 横はそのままで高さだけ1%拡大 */
  transform-origin: center center; /* 中央を基準に拡大 */
  margin: 0 auto; /* 横方向の中央揃え（widthが100%の場合は影響しませんが） */
}

/* 親要素のh1をposition: relative;にして絶対配置の基準にする */
#top2 h1 {
  position: relative;
}

/* リンクボタンのスタイル */
#top2 .link-btn {
  position: absolute;
  bottom: 40px;
  right: 20px;
  display: inline-block; /* インラインブロックにする */
  padding: 10px; /* 上下左右10pxの固定余白 */
  box-sizing: border-box; /* 幅や高さにパディングを含める */
  background-color: #000000;
  color: #fff;
  text-decoration: none;
  font-size: 0.55em;
  border-radius: 1px;
  transition: background-color 0.3s ease;
  white-space: nowrap; /* テキストの折り返しを防ぐ */
  max-width: 300px; /* 適宜調整 */
}

#day1 .tkp-middle {
  position: absolute;
  margin-top: 1rem;
  color: #ffffff;
  font-weight: normal;
  font-size: min(1.9vw, 16px);
  text-align: center;
  line-height: 1.4em;
  font-weight: 400;
  -webkit-text-stroke: 1px #ffffff;
  /* 画像よりも前面に表示するため z-index を指定 */
  z-index: 10; /* 大きめの値にしてみる */
  /* 画像の中央あたりに配置 (例) */
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* ▼ ここで折り返し用の幅を指定する ▼ */
  width: 80%; /* 画面幅の80%を使う例 */
  max-width: 600px; /* 大きくなりすぎないよう最大幅を設定する例 */
}

#day1 .tkp-bottom {
  position: absolute;
  margin-top: 4rem;
  color: #000000;
  font-weight: bold;
  font-size: min(1.05vw, 10px);
  text-align: left;
  line-height: 1.4em;
  -webkit-text-stroke: 0;
  /* 画像よりも前面に表示するため z-index を指定 */
  z-index: 10; /* 大きめの値にしてみる */
  /* 画像の中央あたりに配置 (例) */
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* ▼ ここで折り返し用の幅を指定する ▼ */
  width: 55%; /* 画面幅の80%を使う例 */
  max-width: 500px; /* 大きくなりすぎないよう最大幅を設定する例 */
}

/* section#day2自体を位置指定の基準に */
#day2 {
  position: relative;
}

#day2 picture img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1, 1.01); /* 横はそのままで高さだけ1%拡大 */
  transform-origin: center center; /* 中央を基準に拡大 */
  margin: 0 auto; /* 横方向の中央揃え（widthが100%の場合は影響しませんが） */
}

/* 親要素のh2をposition: relative;にして絶対配置の基準にする */
#day2 h2 {
  position: relative;
}
/* 親要素のh2をposition: relative;にして絶対配置の基準にする */
#day2 h3 {
  position: relative;
}

#day2 .tkp-middle {
  position: absolute;
  margin-top: 3rem;
  color: #ffffff;
  font-weight: bold;
  font-size: min(2.5vw, 25px);
  text-align: center;
  line-height: 1.4em;
  font-weight: 800;
  -webkit-text-stroke: 1px #ffffff;
  /* 画像よりも前面に表示するため z-index を指定 */
  z-index: 10; /* 大きめの値にしてみる */
  /* 画像の中央あたりに配置 (例) */
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* ▼ ここで折り返し用の幅を指定する ▼ */
  width: 80%; /* 画面幅の80%を使う例 */
  max-width: 700px; /* 大きくなりすぎないよう最大幅を設定する例 */
}

#day2 .tkp-bottom {
  position: absolute;
  margin-top: 5rem;
  color: #ffffff;
  font-weight: normal;
  font-size: min(1.05vw, 10px);
  text-align: left;
  line-height: 1.4em;
  -webkit-text-stroke: 0;
  /* 画像よりも前面に表示するため z-index を指定 */
  z-index: 10; /* 大きめの値にしてみる */
  /* 画像の中央あたりに配置 (例) */
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* ▼ ここで折り返し用の幅を指定する ▼ */
  width: 88%; /* 画面幅の80%を使う例 */
  max-width: 830px; /* 大きくなりすぎないよう最大幅を設定する例 */
}

/* リンクボタン群のコンテナ：画像下部に絶対配置して中央寄せ、かつ横並びに配置 */
#day2 .link-container {
  position: absolute;
  top: 75%; /* 画像下部からの距離（必要に応じて調整） */
  left: 50%;
  transform: translateX(-50%);
  z-index: 11; /* 画像より前面に表示 */
  display: flex;
  justify-content: space-between;
  gap: 20px; /* ボタン間の隙間 */
  width: 70%; /* ボタン群の全体幅（必要に応じて調整） */
  max-width: 700px;
}

/* 共通のリンクボタンスタイル */
#day2 .link-btn {
  display: inline-block;
  padding: 15px 30px;
  box-sizing: border-box;
  background-color: #000000;
  color: #fff;
  text-decoration: none;
  font-size: 1.25em;
  border-radius: 1px;
  transition: background-color 0.3s ease;
  white-space: nowrap;
  max-width: 500px;
  position: relative; /* 擬似要素配置の基準 */
}

/* 修正後：アイコン付きボタンのテキスト部分は余白を最小限に */
#day2 .link-btn.icon-btn {
  padding-left: 30px;
}

/* 修正後：擬似要素のアイコンをボタンの外側（左側）へ配置 */
#day2 .link-btn.icon-btn::before {
  content: "";
  position: absolute;
  left: -45px; /* アイコンの横幅分、ボタンの外側へずらす */
  top: calc(50% - 5px);
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background: url("../img/day_icon_pay.svg") no-repeat center center;
  background-size: contain;
}

/* リンクボタンのスタイル（中央下部に配置） */
#otoku .link-btn {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 10px 60px;
  box-sizing: border-box;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  font-size: 0.6em;
  border-radius: 1px;
  transition: background-color 0.3s ease;
  white-space: nowrap;
  max-width: 300px;
  letter-spacing: 0.05em; /* 文字間隔を調整（例: 0.05em） */
}

/* ホバー時のスタイル */
.link-btn:hover {
  background-color: #000000;
}

section a {
  color: #0000c8;
}

h2.iko {
  margin-top: 8rem;
  padding: 0 20px;
  color: #212121;
  font-size: min(2.3vw, 24px);
  font-weight: bold;
  -webkit-text-stroke: 0.1px #212121;
  text-align: center;
}

h3.iko {
  margin-top: 4rem;
  padding: 0 20px;
  color: #212121;
  font-size: min(2.3vw, 24px);
  font-weight: bold;
  -webkit-text-stroke: 0.1px #212121;
  text-align: center;
}

/* #cards自体は相対配置にして、内部の絶対配置用コンテナを有効に */
#cards {
  padding-top: 4rem;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/* ボタン群のコンテナ（デフォルトはPC用） */
#cards .button-container {
  position: absolute;
  bottom: 5%; /* ボタン群の縦位置（必要に応じて調整） */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row; /* PCでは横並び */
  gap: 20px; /* ボタン間の余白 */
  /* ここで揃え方を変更可能 */
  align-items: flex-end; /* ボタンの下端を揃える場合 */
  /* align-items: center;  中央揃えの場合はこれに変更 */
}

/* ボタンの画像サイズ：相対サイズ＋最大・最小サイズで可変 */
#cards .button-container a img {
  width: 25vw;
  max-width: 220px; /* PC用の最大幅 */
  min-width: 50px; /* スマホ用の最小幅 */
}

/* リンクボタン１だけ自由にサイズを変更する例 */
#cards .button-container a.btn2 img {
  width: 30vw;
  max-width: 280px;
  min-width: 50px;
}

.popup-content {
  position: relative; /* 子要素の絶対配置の基準にする */
}

/* リンクボタンのスタイル（中央下部に配置） */
.popup-content .link-btn {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 10px 40px;
  box-sizing: border-box;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  font-size: 1.4em;
  border-radius: 1px;
  transition: background-color 0.3s ease;
  white-space: nowrap;
  max-width: 400px;
}

.point {
  margin-top: 4rem;
  font-size: min(1.6vw, 14px);
  line-height: 1.4em;
  padding: 0 20px;
  font-weight: bolder;
  text-align: center;
}
.point .point_t {
  -webkit-text-stroke: 0.2px #000000;
}

.picture-link img {
  transition: opacity 0.3s ease; /* ホバー時のスムーズな変化 */
}

.picture-link:hover img {
  opacity: 0.8; /* ホバー時の透過度 */
}

/* 親要素のh1をposition: relative;にして絶対配置の基準にする */
#nyukai {
  position: relative;
}

/* リンクボタンのスタイル */
#nyukai .link-btn {
  margin: 30px 0;
  display: inline-block; /* インラインブロックにする */
  padding: 10px 40px; /* 上下左右10pxの固定余白 */
  box-sizing: border-box; /* 幅や高さにパディングを含める */
  background-color: #000000;
  color: #fff;
  text-decoration: none;
  font-size: 1.2em;
  font-weight: normal;
  border-radius: 1px;
  transition: background-color 0.3s ease;
  white-space: nowrap; /* テキストの折り返しを防ぐ */
  max-width: 300px; /* 適宜調整 */
  letter-spacing: 0.07em; /* 文字間隔を調整（例: 0.05em） */
}

.pc-none {
  display: none;
}

@media screen and (max-width: 970px) {
  .fv h1 img {
    max-width: 100%;
  }
  .fv h2 img {
    max-width: 100%;
  }
}

/* suizu add */
/* inner2 */
.inner2_image_head {
  width: 100%;
  margin-bottom: 30px;
}
.inner2_image01 {
  max-width: 540px;
  margin: 0 auto 80px;
}
.inner2_image01_text {
  font-size: 7.5px;
  font-weight: bold;
  line-height: 1.6em;
  margin: 5px auto 20px;
  width: 100%;
  letter-spacing: -0.5px; /* ここで文字間を詰める */
  text-align: left;
  @media screen and (max-width: 659px) {
    margin: 0px auto 20px;
    width: 90%;
    letter-spacing: 0px; /* ここで文字間を詰める */
    text-align: left;
  }
}
.inner2_image02 {
  max-width: 540px;
  margin: 0 auto 80px;
}
.inner2_image03 {
  max-width: 540px;
  margin: 0 auto 80px;
}
/* スライダー実装 */

#line {
  padding: 30px 0 20px;
  background-color: #06c755;
  @media screen and (max-width: 659px) {
    padding: 10px 0 50px;
  }
}

#line .title {
  text-align: center;
  margin-bottom: 25px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.01em;
  @media screen and (max-width: 659px) {
    margin-bottom: 5px;
  }
}
#line .title h2 {
  font-size: 28px;
  line-height: 1.4em;
  @media screen and (max-width: 659px) {
    font-size: 18px;
  }
}
#line .title h2 span {
  font-size: 28px;
  line-height: 1.4em;
  @media screen and (max-width: 659px) {
    font-size: 16px;
  }
}

#cards-slider {
  width: 95%;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 0px; /* 下部の余白を追加する場合 */
  z-index: 1; /* スライダーのコンテンツを前面に出す */
}
@media screen and (max-width: 659px) {
  #cards-slider {
    width: 100%;
    margin: 0 auto;
    flex-direction: column;
  }
}

/* スライダーコンテナ内の各スライド画像を背景に合わせて縮小・中央配置する */
#cards-slider .slide-item {
  text-align: center; /* 子要素を中央寄せに */
  /* 必要に応じて、上下の余白も調整 */
  padding: 2% 0.5%;
}

.slide-box {
  width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  background-color: #fff;
  padding: 30px 0 10px;
  position: relative;
  @media screen and (max-width: 659px) {
    padding: 30px 0;
  }
}
.slide-box::after {
  content: "";
  background: url(../img/slide_arrow_right.svg) no-repeat center center;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  right: -23px;
  transform: translateY(-50%);
  z-index: 10;
}
.slide-item:last-of-type .slide-box::after {
  display: none;
}
@media screen and (max-width: 659px) {
  .slide-box::after {
    display: none;
  }
}

.step_icon {
  width: 50px;
  height: 50px;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  @media screen and (max-width: 659px) {
    width: 70px;
    height: 70px;
  }
}
.slide-image {
  width: 80%;
  margin: 0 auto;
}
.slide-box .step_text {
  width: 90%;
  margin: 10px auto;
  padding: 5px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background-color: #eeeeef;
}

/* slickテーマ編集 */
.slick-arrow:before {
  content: "" !important;
}
.slick-next {
  right: 25px !important;
}
.slick-prev {
  left: 25px !important;
  z-index: 100;
}
.custom-arrow {
  width: 30px !important;
  height: 30px !important;
}
/* Slick dotsカスタマイズ（デフォルトドット活用版） */
.slick-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  bottom: 15px;
}

.slick-dots li {
  margin: 0 3px !important;
}

.slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  cursor: pointer;
  border: none;
  background: transparent; /* ボタン背景を透明に */
}

.slick-dots li button::before {
  content: "•"; /* デフォルトのドットを使用（•を活用） */
  font-size: 18px !important; /* 非アクティブ時のサイズ */
  color: #ccc !important; /* 非アクティブ時の色 */
  opacity: 1 !important;
  transition: all 0.3s ease;
}

.slick-dots li.slick-active button::before {
  color: #fff !important; /* アクティブ時の色 */
}

/* /suizu add */

@media screen and (max-width: 659px) {
  .inner1 {
    width: 100%;
  }
  .inner2 {
    width: 100%;
  }
  .inner3 {
    width: 100%;
  }
  .inner4 {
    width: 100%;
  }
  .inner5 {
    width: 80%;
  }
  .inner6 {
    width: 80%;
  }

  .pc-none {
    display: block;
  }
  .sp-none {
    display: none;
  }

  .bg {
    max-width: 100%;
    padding-bottom: 4rem;
  }

  .inner1 h2 img {
    width: 90% !important;
    height: auto;
  }

  #top1 .tkp-middle {
    position: absolute;
    margin-top: 4rem;
    color: #ffffff;
    font-weight: bold;
    font-size: min(4vw, 32px);
    text-align: center;
    line-height: 1.4em;
    font-weight: 600;
    -webkit-text-stroke: 0.4px #ffffff;
    /* 画像よりも前面に表示するため z-index を指定 */
    z-index: 10; /* 大きめの値にしてみる */
    /* 画像の中央あたりに配置 (例) */
    top: 9%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* ▼ ここで折り返し用の幅を指定する ▼ */
    width: 80%; /* 画面幅の80%を使う例 */
    max-width: 600px; /* 大きくなりすぎないよう最大幅を設定する例 */
  }
  #top1 .tkp-middle .tk1 {
    letter-spacing: 5px;
  }
  #top1 .tkp-middle .tk2 {
    font-size: min(2.2vw, 18px);
    letter-spacing: 0px;
    font-weight: 10; /* ここで文字の太さを小さく設定 */
  }

  #top1 .tkp-bottom {
    position: absolute;
    margin-top: 5rem;
    color: #ffffff;
    font-weight: normal;
    font-size: min(2vw, 12px);
    text-align: left;
    line-height: 1.4em;
    -webkit-text-stroke: 0;
    /* 画像よりも前面に表示するため z-index を指定 */
    z-index: 10; /* 大きめの値にしてみる */
    /* 画像の中央あたりに配置 (例) */
    top: 86%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* ▼ ここで折り返し用の幅を指定する ▼ */
    width: 88%; /* 画面幅の80%を使う例 */
    max-width: 830px; /* 大きくなりすぎないよう最大幅を設定する例 */
  }

  /* リンクボタンのスタイル */
  #top2 .link-btn {
    position: absolute;
    bottom: 2%;
    right: 1px;
    display: inline-block; /* インラインブロックにする */
    padding: 8px; /* 上下左右10pxの固定余白 */
    box-sizing: border-box; /* 幅や高さにパディングを含める */
    background-color: #000000;
    color: #fff;
    text-decoration: none;
    font-size: 0.25em;
    border-radius: 1px;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* テキストの折り返しを防ぐ */
    max-width: 350px; /* 適宜調整 */
  }

  #day1 .tkp-middle {
    position: absolute;
    margin-top: 1rem;
    color: #ffffff;
    font-weight: normal;
    font-size: min(2.9vw, 24px);
    text-align: center;
    line-height: 1.4em;
    font-weight: 400;
    -webkit-text-stroke: 1px #ffffff;
    /* 画像よりも前面に表示するため z-index を指定 */
    z-index: 10; /* 大きめの値にしてみる */
    /* 画像の中央あたりに配置 (例) */
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* ▼ ここで折り返し用の幅を指定する ▼ */
    width: 80%; /* 画面幅の80%を使う例 */
    max-width: 600px; /* 大きくなりすぎないよう最大幅を設定する例 */
  }

  #day1 .tkp-bottom {
    position: absolute;
    margin-top: 4rem;
    color: #000000;
    font-weight: bold;
    font-size: min(2vw, 12px);
    text-align: left;
    line-height: 1.4em;
    -webkit-text-stroke: 0;
    /* 画像よりも前面に表示するため z-index を指定 */
    z-index: 10; /* 大きめの値にしてみる */
    /* 画像の中央あたりに配置 (例) */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* ▼ ここで折り返し用の幅を指定する ▼ */
    width: 65%; /* 画面幅の80%を使う例 */
    max-width: 500px; /* 大きくなりすぎないよう最大幅を設定する例 */
  }

  /* 親要素のh2をposition: relative;にして絶対配置の基準にする */
  #day2 h2 {
    position: relative;
  }
  /* 親要素のh2をposition: relative;にして絶対配置の基準にする */
  #day2 h3 {
    position: relative;
  }

  #day2 .tkp-middle {
    position: absolute;
    margin-top: 3rem;
    color: #ffffff;
    font-weight: normal;
    font-size: min(3.5vw, 25px);
    text-align: center;
    line-height: 1.4em;
    font-weight: 400;
    -webkit-text-stroke: 1px #ffffff;
    /* 画像よりも前面に表示するため z-index を指定 */
    z-index: 10; /* 大きめの値にしてみる */
    /* 画像の中央あたりに配置 (例) */
    top: 14%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* ▼ ここで折り返し用の幅を指定する ▼ */
    width: 50%; /* 画面幅の80%を使う例 */
    max-width: 700px; /* 大きくなりすぎないよう最大幅を設定する例 */
  }

  #day2 .tkp-bottom {
    position: absolute;
    margin-top: 5rem;
    color: #ffffff;
    font-weight: normal;
    font-size: min(2vw, 12px);
    text-align: left;
    line-height: 1.4em;
    -webkit-text-stroke: 0;
    /* 画像よりも前面に表示するため z-index を指定 */
    z-index: 10; /* 大きめの値にしてみる */
    /* 画像の中央あたりに配置 (例) */
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* ▼ ここで折り返し用の幅を指定する ▼ */
    width: 78%; /* 画面幅の80%を使う例 */
    max-width: 830px; /* 大きくなりすぎないよう最大幅を設定する例 */
  }

  /* リンクボタン群のコンテナ：画像下部に絶対配置して中央寄せ、かつ横並びに配置 */
  #day2 .link-container {
    position: absolute;
    top: 73%; /* 画像下部からの距離（必要に応じて調整） */
    left: 50%;
    transform: translateX(-50%);
    z-index: 11; /* 画像より前面に表示 */
    display: flex;
    justify-content: space-between;
    flex-direction: column-reverse;
    gap: 20px; /* ボタン間の隙間 */
    width: 50%; /* ボタン群の全体幅（必要に応じて調整） */
    max-width: 700px;
  }

  /* 共通のリンクボタンスタイル */
  #day2 .link-btn {
    display: inline-block;
    padding: 10px 15px;
    box-sizing: border-box;
    background-color: #000000;
    color: #fff;
    text-decoration: none;
    font-size: 0.6em;
    border-radius: 1px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    max-width: 500px;
    position: relative; /* 擬似要素配置の基準 */
  }

  /* 修正後：アイコン付きボタンのテキスト部分は余白を最小限に */
  #day2 .link-btn.icon-btn {
    padding-left: 10px;
  }

  /* 修正後：擬似要素のアイコンをボタンの外側（左側）へ配置 */
  #day2 .link-btn.icon-btn::before {
    content: "";
    position: absolute;
    left: -20px; /* アイコンの横幅分、ボタンの外側へずらす */
    top: calc(50% - 2px);
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background: url("../img/day_icon_pay.svg") no-repeat center center;
    background-size: contain;
  }

  /* リンクボタンのスタイル（中央下部に配置） */
  #otoku .link-btn {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    padding: 10px 40px;
    box-sizing: border-box;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    font-size: 0.3em;
    border-radius: 1px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    max-width: 300px;
  }

  h2.tkp {
    margin-top: 2rem;
    color: #d4083b;
    font-size: 7vw;
    line-height: 1.4em;
    -webkit-text-stroke: 0.3px #d4083b;
  }

  h2.tkp .tk1 {
    letter-spacing: 2px;
  }

  h2.iko {
    padding: 0 4%;
    margin-top: 5rem;
    font-size: min(4.5vw, 24px);
    -webkit-text-stroke: 0.1px #212121;
    line-height: 1.4em;
  }

  h3.iko {
    padding: 0 4%;
    margin-top: 5rem;
    font-size: min(4.5vw, 24px);
    -webkit-text-stroke: 0.1px #212121;
    line-height: 1.4em;
  }

  #cards {
    padding-top: 1rem;
    width: 100%;
  }

  #cards .button-container {
    flex-direction: column; /* 縦並び */
    gap: 10px;
    bottom: 5.2%;
    /* 縦並びの場合、必要に応じて align-items の設定を変更可能 */
    align-items: left;
  }

  /* ボタンの画像サイズ：相対サイズ＋最大・最小サイズで可変 */
  #cards .button-container a img {
    width: 40vw;
    max-width: 500px; /* PC用の最大幅 */
    min-width: 50px; /* スマホ用の最小幅 */
  }

  /* リンクボタン１だけ自由にサイズを変更する例 */
  #cards .button-container a.btn2 img {
    width: 40vw;
    max-width: 500px;
    min-width: 50px;
  }

  .point {
    margin-top: 2rem;
    font-size: min(3.3vw, 10px);
    line-height: 1.5em;
    padding: 0 10px;
    font-weight: bolder;
  }
  .point .point_t {
    -webkit-text-stroke: 0.2px #000000;
  }

  /* リンクボタンのスタイル */
  #nyukai .link-btn {
    margin: 30px 0;
    display: inline-block; /* インラインブロックにする */
    padding: 10px 40px; /* 上下左右10pxの固定余白 */
    box-sizing: border-box; /* 幅や高さにパディングを含める */
    background-color: #000000;
    color: #fff;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: normal;
    border-radius: 1px;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* テキストの折り返しを防ぐ */
    max-width: 300px; /* 適宜調整 */
    letter-spacing: 0.1em; /* 文字間隔を調整（例: 0.05em） */
  }

  .fv a {
    position: absolute;
    bottom: 0.6%;
    left: 50%;
    transform: translateX(-50%);
  }
  .fv a img {
    width: 40vw; /* 画面幅の40%をボタンの幅にする */
    max-width: 250px; /* PCでは最大250px */
    min-width: 180px; /* スマホでは最低150px */
  }

  .fv2 a {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
  }
  .fv2 a img {
    width: 40vw; /* 画面幅の40%をボタンの幅にする */
    max-width: 250px; /* PCでは最大250px */
    min-width: 100px; /* スマホでは最低150px */
  }

  .mobile-only {
    display: block;
  }
  .pc-only {
    display: none;
  }

  .popup-content {
    position: relative; /* 子要素の絶対配置の基準にする */
  }

  #popup .popup-content .popup-image {
    width: 90%;
    margin: 0 auto;
    display: block;
    border: none;
  }

  /* リンクボタンのスタイル（中央下部に配置） */
  .popup-content .link-btn {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    padding: 8px 24px;
    box-sizing: border-box;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    font-size: 0.7em;
    border-radius: 1px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    max-width: 300px;
  }

  /* スマホ用画像グループのスタイル */
  .sp-images {
    display: block;
    width: 100%;
    text-align: center; /* 必要に応じて中央寄せ */
    margin-bottom: 1rem; /* 全体の下マージン */
  }
  .sp-images img {
    width: 90%; /* 必要に応じてサイズ調整 */
    max-width: 100%; /* 画像がコンテナ幅を超えないように */
    display: block;
    margin: 20px auto 40px; /* 下に余白を追加 */
  }

  /* PC用画像を非表示にする（必要な場合） */
  .pc-only {
    display: none;
  }
}

@media screen and (min-width: 660px) {
  .mobile-only {
    display: none;
  }
  .sp-images {
    display: none;
  }
  .pc-only {
    display: block;
  }
}

/* ポップアップコンテナのスタイル */
#popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 背景を半透明に */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* ポップアップ内容のスタイル */
.popup-content {
  position: relative; /* 子要素の絶対配置の基準にする */
  overflow: visible; /* コンテンツがはみ出ても隠さない */
  padding: 0; /* 余白なし */
  width: 500px;
  border-radius: 1px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* 画像がコンテナ外に溢れた場合に隠さないなら削除 */
}

/* 広告画像のスタイル */
.popup-content img {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  transform: scale(1, 1); /* 横はそのままで高さだけ1%拡大 */
  transform-origin: center center; /* 中央を基準に拡大 */
}

/* ×ボタンのスタイル：コンテナ外側に配置 */
#close-btn {
  position: absolute;
  top: 0px; /* コンテナ上端からはみ出す */
  right: 0px; /* コンテナ右端からはみ出す */
  background: #fff;
  border-radius: 1px;
  border: none;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  padding: 0 5px;
  z-index: 10; /* 数値は画像のスタッキング状況に応じて調整 */
}

@media screen and (max-width: 659px) {
  /* 親コンテナは既にposition: relative;になっている前提 */
  #popup .popup-content #close-btn {
    position: absolute;
    top: 0px;
    /* 画像幅が90%なので、左右の余白は (100%-90%)/2 = 5% ずつ。
       そのため右側の位置は余白分＋任意のオフセット（ここでは10px）を足す */
    right: calc((100% - 90%) / 2 + 0px);
    font-size: 20px;
    font-weight: normal;
    cursor: pointer;
    padding: 2px 5px;
  }
}

.inner4_text {
  line-height: 1.5em;
  font-size: 0.8em;
  text-align: center;
  margin-top: 1rem;
  padding: 0 10px;
}

/* ============== ヘッダーメニュー用スタイル ============== */

/* ヘッダー全体 */
.c-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 80px;
  padding: 0 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent;
  transition: all 0.4s ease-out;
}

/* 常に白背景にしたい場合は、こちらを追加（もしくは .fill クラスの付与タイミングを変更） */
.c-header.always-white {
  background-color: #ffffff;
}

/* スクロールにより背景切替 */
.c-header.fill {
  background-color: #ffffff;
}
.c-header.fixed-hide {
  top: -80px;
}

/* メインコンテンツの上部にヘッダー分の余白を追加 */
.main_contents {
  padding-top: 80px;
}

/* ロゴ */
.c-header_logo img {
  width: 160px;
}

/* PC用メニュー */
.c-header_menus {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 35px;
}
.c-header_menu_items,
.c-header_menu_items li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-header_menus li a,
.c-header_menus li p {
  font-family: "PPMonumentExtended", sans-serif;
  font-weight: 675;
  font-size: 14px;
  color: #000;
  text-decoration: none;
}

/* ドロップダウン用 */
.c-header_menu_menu {
  position: relative;
  cursor: pointer;
}
.c-header_menu_txt {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 80px;
}
.c-header_menu_txt img {
  width: 16px;
}
.c-header_menu_items {
  display: none;
  position: absolute;
  top: 80px;
  width: 220px;
  background-color: #1a1a1a;
  border-radius: 4px;
  padding: 10px 0;
  transition: 0.4s;
}
.c-header_menu_items .c-header_menu_item a {
  display: block;
  padding: 10px 16px;
  font-family: "Noto Sans JP", sans-serif;
  color: #fff;
  font-weight: bold;
  line-height: 1.5;
}
.c-header_menu_items .c-header_menu_item a:hover {
  color: #c92a28;
}
.c-header_menu_menu:hover .c-header_menu_items {
  display: block;
}

/* ハンバーガーメニュー（スマホ用） */
.c-header_hamburger {
  display: none;
  width: 24px;
  height: 30px;
  position: relative;
  z-index: 101;
  cursor: pointer;
  transition: 0.5s ease-in-out;
}
.c-header_hamburger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 50%;
  background: #000000;
  transition: 0.25s ease-in-out;
}
.c-header_hamburger span:nth-child(odd) {
  left: 0;
  border-radius: 9px 0 0 9px;
}
.c-header_hamburger span:nth-child(even) {
  left: 50%;
  border-radius: 0 9px 9px 0;
}
.c-header_hamburger span:nth-child(1),
.c-header_hamburger span:nth-child(2) {
  top: 6px;
}
.c-header_hamburger span:nth-child(3),
.c-header_hamburger span:nth-child(4) {
  top: 14px;
}
.c-header_hamburger span:nth-child(5),
.c-header_hamburger span:nth-child(6) {
  top: 22px;
}
.c-header_hamburger.open span:nth-child(1),
.c-header_hamburger.open span:nth-child(6) {
  transform: rotate(45deg);
}
.c-header_hamburger.open span:nth-child(2),
.c-header_hamburger.open span:nth-child(5) {
  transform: rotate(-45deg);
}
.c-header_hamburger.open span:nth-child(3),
.c-header_hamburger.open span:nth-child(4) {
  opacity: 0;
}

/* レスポンシブ：スマホではPC用メニューを非表示 */
@media screen and (max-width: 768px) {
  .c-header {
    padding: 0 20px;
    height: 64px;
  }
  .c-header_logo img {
    width: 150px;
  }
  .c-header_menus {
    display: none;
  }
  .c-header_hamburger {
    display: block;
  }
}

/* モバイル用メニューの基本設定 */
.c-header_mobile-menus {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  flex-direction: column;
  overflow-y: auto;
  z-index: 999;
  padding: 60px 40px; /* ヘッダーの高さ分の余白 */
}

/* ハンバーガーメニューがオープン状態の場合に表示 */
.c-header_mobile-menus.open {
  display: flex;
}

/* 親メニュー項目：下線は削除 */
.c-header_mobile-menu-item {
  display: block;
  padding: 16px 0px;
  border-top: 1px solid #ddd;
  text-decoration: none;
  color: #fff;
}

/* 子（サブ）メニュー項目：親メニューより右にずらす */
.c-header_mobile-menu-item-child {
  display: block;
  padding: 0px 0px 20px 20px; /* 左側に余白を追加 */
  /* 必要に応じて下線やボーダーを追加する場合はここで設定 */
  text-decoration: none;
  color: #fff;
}

/* メニュー内のテキストサイズや太さの調整（必要に応じて微調整） */
.c-header_mobile-menu-item-title {
  font-size: 10px;
}

.c-header_mobile-menu-item-subtitle {
  font-size: 10px;
  margin-top: 4px;
}

.c-header_mobile-menu-item-child-title {
  font-size: 18px;
  font-weight: bold;
}

.c-header_mobile-close {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 0 2px;
  font-size: 35px;
  color: #fff;
  cursor: pointer;
  z-index: 1001;
}

.c-header_mobile-menu-item-title {
  font-size: 12px;
  margin-bottom: 1px; /* タイトルとサブタイトルの間隔 */
}

.c-header_mobile-menu-item {
  margin: 10px 20px; /* 各メニュー項目の間隔を広げる */
}

/* スクロールロック用 */
body.lock-scroll {
  overflow: hidden;
}