/* 正: 先頭ドットあり */
.normal-box5{
  padding: 1em;
  margin: 30px 100px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 4px 4px 6px gray;
}


/* スマホ（768px以下）では余白を小さく */
@media screen and (max-width: 768px) {
  .normal-box5 {
    margin: 20px 10px;   /* 左右の余白を10pxにして幅を広く */
  }
}


/* まとめて一箇所に。右寄せしたいなら flex-end に */
.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 右寄せするなら flex-end */
  width: 80%;
  margin: 0 auto;
}

/* ボタン */
a.btn_04 {
  display: block;
  text-align: center;
  text-decoration: none;
  width: 400px;
  margin: 5px;
  padding: 1rem 1rem;
  font-weight: bold;
  border: 2px solid #000;   /* 黒い枠線 */
  background: #000;         /* 背景を黒 */
  color: #fff;              /* 文字を白 */
  border-radius: 3px;       /* 角丸ほぼなし */
  transition: 0.3s;
  box-sizing: border-box;
}
a.btn_04:hover {
  background: #666;   /* ホバーでグレー */
  color: #fff;
  border-color: #666;
}

/* PCビューで文字大きく＆左右マージン調整 */
@media screen and (min-width: 1024px) {
  .button-container a.btn_04 {
    margin: 5px 10px;
    font-size: 20px;
  }
}

/* トップへボタン（閉じカッコを追加！） */
#toTopBtn {
  background-color: #8B0000; /* 深めの赤 */
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 2px;
  font-size: 16px;
}

/* 予約ボックス */
.yoyaku-box {
  display: inline-block;
  padding: 10px 10px;
  margin: 10px;
  width: 480px;
  color: #5d627b;
  background: #fff;
  border-top: solid 5px #5d627b;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
@media screen and (max-width: 768px) {
  .yoyaku-box {
    width: auto;
    max-width: 100%;
    margin: 10px 0;
    padding: 10px;
  }
}

.yoyaku-box a { color: #004386; }
.yoyaku-box2 a { color: #191919; }

/* 正: 余分なスペースを削除 */
.yoyaku-box2 a:hover { color: red; }

.yoyaku-box h4 {
  color: #004386;
  font-size: 110%;
}
.yoyaku-box p {
  color: #333333;
  font-size: 100%;
}

.notice-box {
  background-color: #D70413;
  color: #fff;
  font-weight: bold;
  text-align: center;           /* 文字は中央 */
  padding: 10px 20px;
  border-radius: 3px;
  max-width: 600px;             /* 幅は600pxまで */
  width: auto;                  /* 親幅いっぱいにしない */
  margin: 20px auto !important; /* ← 帯を中央配置に戻す決め手 */
  font-size: 20px;
}

/* スマホ用（文字＆帯を少し小さく） */
@media (max-width: 768px) {
  .notice-box {
    font-size: 16px;
    padding: 6px 12px;
    margin: 15px auto;
  }
}


.normal-box5 p,
p {
  font-size: 16px;                  /* スマホで小さく */
  line-height: 1.8;
}

/* PCのみ大きく（1024px以上） */
@media (min-width: 1024px) {
  .normal-box5 p,
  p {
    font-size: 20px !important;     /* 競合が強い場合に備えて !important */
  }
}



.band-box {
  background-color: #000;        /* 黒帯 */
  color: #ffd700;                /* 暗い黄色 */
  font-weight: bold;
  text-align: center;
  padding: 15px 20px;
  margin: 20px auto;
  border-radius: 3px;
  max-width: 90%;             /* PC幅でも一行収まるように調整 */
  font-size: 18px;
  white-space: nowrap;           /* ← 改行させない */
  overflow: hidden;              /* はみ出し防止 */
  text-overflow: ellipsis;       /* 収まらない時は「…」で省略（任意） */
}

@media (max-width: 768px) {
  .band-box {
    font-size: 16px;
    padding: 10px 15px;
    margin: 15px auto;
    white-space: normal;         /* スマホでは自動改行OK */
  }
}



/* コンテナ */
.room-spec-block{
  max-width: 820px;       /* お好みで */
  margin: 30px auto;
  padding: 24px;
  border-radius: 12px;
  background: linear-gradient(135deg,#6c6be9 0%, #e73a8e 100%); /* 紫→ピンク */
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

/* タイトル帯（白抜き文字・中央） */
.room-spec-title{
  margin: 0 0 18px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  border-radius: 8px;
  letter-spacing: .02em;
}

/* 画像ラッパー */
.room-image-wrap{
  position: relative;
  background: #fff;               /* 縁取り用の白 */
  border-radius: 8px;
  padding: 14px;                  /* 余白で額縁感 */
  box-shadow: 0 10px 20px rgba(0,0,0,0.2) inset;
}

/* 画像本体 */
.room-image-wrap img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* 右下の小ラベル */
.room-image-badge{
  position: absolute;
  right: 22px;
  bottom: 22px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
  font-size: 16px;
}

/* 下部の店舗名バッジ（中央） */
.store-badge{
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 16px;
  background: linear-gradient(90deg,#e73a8e, #6c6be9);
  color: #fff;
  border-radius: 10px;
  font-weight: 800;
  box-shadow: 0 6px 12px rgba(0,0,0,.25);
}

.store-line1{ font-size: 13px; opacity:.95; }
.store-line2{ font-size: 15px; }

/* スマホ調整 */
@media (max-width: 768px){
  .room-spec-block{ 
    margin: 20px 10px;
    padding: 16px;
    border-radius: 10px;
  }
  .room-spec-title{ 
    font-size: 18px; 
    padding: 12px 14px;
    border-radius: 6px;
  }
  .room-image-wrap{ padding: 10px; }
  .room-image-badge{ right: 14px; bottom: 14px; font-size: 13px; }
  .store-badge{ bottom: -12px; padding: 8px 12px; }
  .store-line1{ font-size: 11px; }
  .store-line2{ font-size: 13px; }
}



/* 共通（前回と同じクラスを再利用） */
.room-spec-block{
  max-width: 820px;
  margin: 30px auto;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.room-spec-title{
  margin: 0 0 18px;
  padding: 16px 20px;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  border-radius: 8px;
  letter-spacing: .02em;
  background: rgba(255,255,255,0.12);
}
.room-image-wrap{
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  box-shadow: inset 0 10px 20px rgba(0,0,0,0.2);
}
.room-image-wrap img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.room-image-badge{
  position: absolute;
  right: 22px;
  bottom: 22px;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
  font-size: 16px;
}
.store-badge{
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 16px;
  color: #fff;
  border-radius: 10px;
  font-weight: 800;
  box-shadow: 0 6px 12px rgba(0,0,0,.25);
  background: linear-gradient(90deg,#ff2d8a, #6c6be9); /* デフォ */
}

/* ── ゴールド版（今回追加） ── */
.room-spec-block.gold{
  background: linear-gradient(135deg,#f3b021 0%, #e38c00 100%); /* 金→橙 */
}

.room-spec-block.gold .store-badge{
  background: linear-gradient(90deg,#ff2d8a, #6c6be9); /* 画像下のピンク帯は据え置き */
}

/* レスポンシブ */
@media (max-width: 768px){
  .room-spec-block{ margin: 20px 10px; padding: 16px; border-radius: 10px; }
  .room-spec-title{ font-size: 18px; padding: 12px 14px; border-radius: 6px; }
  .room-image-wrap{ padding: 10px; }
  .room-image-badge{ right: 14px; bottom: 14px; font-size: 13px; }
  .store-badge{ bottom: -12px; padding: 8px 12px; }
  .store-badge .store-line1{ font-size: 11px; }
  .store-badge .store-line2{ font-size: 13px; }
}


.room-spec-block.gold .room-spec-title {
  background: linear-gradient(135deg, #f7d358 0%, #cfa928 50%, #a67c00 100%);
  /* 金色 → 濃い金 → 深い黄金 */
  color: #fff;
  text-align: center;
  padding: 16px 20px;
  font-size: 24px;
  font-weight: 800;
  border-radius: 8px;

  border-bottom: 4px solid #8a6e00; /* 下線は暗めの黄金色 */
}

/* 店舗バッジの背景をゴールド系に */
.room-spec-block.gold .store-badge {
  background: linear-gradient(90deg, #ffd54f, #f9a825); 
  /* #ffd54f = 明るいゴールド, #f9a825 = 濃いめの黄橙 */
  color: #222;  /* 文字は黒っぽくして読みやすく */
  text-shadow: 0 1px 1px rgba(255,255,255,0.6); /* 薄い光沢感 */
}




.fullwidth-banner img {
  display: block;     /* 余計な隙間をなくす */
  width: 100%;        /* 横幅いっぱい */
  height: auto;       /* 縦横比を保持 */
}

p.note {
  font-size: 12px !important;  /* PCデフォルト */
  line-height: 1.4;
  color: #666;                 /* 注釈っぽく薄めの色 */
  margin-top: 5px;
}

/* スマホ（768px以下）はもう少し小さめでもOK */
@media (max-width: 768px) {
  p.note {
    font-size: 8px !important;
  }
}



/* ==== スマホでははみ出さないように調整（最後に追記） ==== */
@media (max-width: 768px) {
  .normal-box5 {
    margin: 20px 10px;           /* 親ボックスの左右マージンも控えめに */
  }

  .button-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 10px;             /* 内側に余白を作って安全に */
    justify-content: center;     /* 右寄せ指定があっても中央に */
    gap: 10px;                   /* ボタン間隔をこれで管理（margin依存を減らす） */
  }

  .button-container .btn_04,
  .button-container .band-box {
    width: 100%;                 /* 画面幅いっぱいにフィット */
    max-width: 100%;             /* 固定幅400pxを無効化 */
    margin: 0;                   /* 左右マージンが溢れ原因になるのを防止 */
    box-sizing: border-box;      /* パディングやボーダー含めて幅計算 */
  }
}



/* スマホではバッジを画像の下に出す（かぶり防止） */
@media (max-width: 768px) {
  .room-image-wrap {
    padding: 10px;              /* 既存通りでOK。重なりを解消するので余白は少なくてよい */
  }

  .store-badge {
    position: static !important; /* ← 絶対配置をやめる */
    left: auto;                  /* 念のためリセット */
    bottom: auto;                /* 念のためリセット */
    transform: none !important;  /* 中央寄せの変形を解除 */
    display: inline-flex;
    margin-top: 8px;             /* 画像の下に間隔 */
    align-self: center;
    text-align: center;
    width: auto;                 /* 自然な幅 */
    max-width: 100%;
    padding: 8px 12px;           /* ちょい小さめに */
    border-radius: 8px;
  }

  /* バッジ内の文字も少し縮める */
  .store-line1 { font-size: 11px; }
  .store-line2 { font-size: 13px; }
}
/* スマホではタイトル文字を小さくする */
@media (max-width: 768px) {
  .room-spec-title {
    font-size: 16px !important;  /* PCは24px、スマホは16pxに */
    padding: 10px 12px;          /* 内側の余白も少なめに */
  }
}