@charset "UTF-8";

/* ==========================================================================
   新着情報・トピックス 記事固有装飾スタイル（topics.css）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 共通パーツ・テキスト装飾
   -------------------------------------------------------------------------- */
/* 本文内のテキストハイライト（重要な日付や強調箇所） */
.news-detail-body .text-highlight {
  color: #c41313;
  background: linear-gradient(transparent 70%, #fff0f0 70%);
  padding: 0 2px;
}

/* 記事全体のフォント調整と行間向上 */
.news-detail-body {
  line-height: 1.9;
  color: #333333;
}

/* 記事冒頭のリード強調タイトル用 */
.news-detail-body .news-detail-lead-title {
  font-weight: bold;
  text-align: center;
  margin-bottom: 25px;
  display: block;
}

/* --------------------------------------------------------------------------
   2. アンケート抽選会 当選者発表セクション用（news-detail-20260508.html 他）
   -------------------------------------------------------------------------- */
/* 当選者発表の外枠ボックス */
.topics-winner-box {
  background-color: #fcfbfa;
  border: 1px solid #e6dfd7;
  border-radius: 6px;
  padding: 25px 30px;
  margin: 30px 0;
  box-shadow: 0 2px 8px rgba(161, 132, 78, 0.04);
  text-align: center;
}

/* ボックス内のタイトル（🎉 4月度 ご当選者様... / 5月の当選者 兼用） */
.topics-winner-title {
  font-size: 17px;
  font-weight: bold;
  color: #222222;
  border-left: 4px solid #a1844e;
  padding-left: 12px;
  margin-top: 0;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* 5月の当選者発表で使用するグリーンバッジ装飾（既存ルールとの競合を防ぐため、特定マークアップ用として拡張） */
h2.topics-winner-title {
  display: inline-block;
  border-left: none;
  padding-left: 0;
  background-color: #008000;
  color: #ffffff;
  padding: 6px 20px;
  font-size: 18px;
  border-radius: 4px;
}

/* 当選者テーブルのラップ外枠 */
.topics-winner-table-wrapper {
  margin-top: 25px;
  text-align: left;
}

/* テーブルエリア内の店舗小見出し */
.topics-winner-table-wrapper h3 {
  font-size: 16px;
  font-weight: bold;
  color: #222222;
  border-left: 4px solid #a1844e;
  padding-left: 10px;
  margin-top: 0;
  margin-bottom: 12px;
}

/* 当選者発表用データテーブルの構造スタイル */
.topics-winner-table {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 25px;
  border-collapse: collapse;
  border: 1px solid #e6dfd7;
  text-align: center;
  font-size: 15px;
}

.topics-winner-table th {
  padding: 10px;
  border: 1px solid #e6dfd7;
  background-color: #edebe8;
  color: #333333;
  font-weight: bold;
}

.topics-winner-table td {
  padding: 10px;
  border: 1px solid #e6dfd7;
  color: #444444;
  vertical-align: middle; /* 選択Aによる修正：縦に結合されたセルを常に垂直中央揃えにする */
}

.topics-winner-table td.id-code {
  font-family: monospace;
}

.topics-winner-table td.initial-name {
  font-weight: bold;
}

.topics-winner-table td.bg-light-flat {
  vertical-align: middle;
  background-color: #fcfbfa;
}

/* 当選者リストのラップ */
.topics-winner-list {
  list-style: none;
  padding-left: 4px;
  margin: 0;
}

/* 当選者名一行ごとのスタイル */
.topics-winner-list li {
  font-size: 15px;
  color: #444444;
  line-height: 2;
  position: relative;
  padding-left: 18px;
  letter-spacing: 0.08em;
  border-bottom: 1px dashed #edebe8;
}

.topics-winner-list li:last-child {
  border-bottom: none;
}

/* リストの文頭に配置する和風・エレガントな金色の四角ドット */
.topics-winner-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background-color: #a1844e;
}

/* --------------------------------------------------------------------------
   3. 重要なお知らせ・案内用（news-detail-20260501.html 他）
   -------------------------------------------------------------------------- */
/* 休業や重要告知を囲むアラートボックス */
.topics-notice-box {
  background-color: #fff9f9;
  border: 1px solid #f2dede;
  border-left: 4px solid #c41313;
  border-radius: 4px;
  padding: 25px 30px;
  margin: 30px 0;
}

/* ボックス内の強調段落 */
.topics-notice-box p {
  margin: 0;
  line-height: 1.8;
  color: #333333;
}

.topics-notice-box p + p {
  margin-top: 15px;
}

/* ボックス内の赤字キャプション見出し用 */
.topics-notice-box p.notice-caption {
  font-weight: bold;
  margin-bottom: 8px;
  color: #c41313;
}

/* --------------------------------------------------------------------------
   4. 公式サイトリニューアル案内専用（news-detail-20260630.html 他）
   -------------------------------------------------------------------------- */
/* メインの導入文・挨拶まわり */
.news-intro-text {
  font-size: 16px;
  margin-bottom: 30px;
  border-bottom: 1px dashed #e6dfd7;
  padding-bottom: 20px;
}

/* リニューアル記念の華やかなアナウンスボックス */
.renewal-announce-card {
  background: linear-gradient(135deg, #fcfbfa 0%, #f5f2eb 100%);
  border: 1px solid #dcd5ca;
  border-left: 5px solid #a1844e; /* アクセントのゴールド・ブラス */
  border-radius: 4px;
  padding: 30px;
  margin: 35px 0;
  box-shadow: 0 4px 15px rgba(161, 132, 78, 0.05);
  position: relative;
  overflow: hidden;
}

/* 背景にうっすらと華やかさを添える装飾（擬似要素） */
.renewal-announce-card::after {
  content: "RENEWAL";
  position: absolute;
  right: -10px;
  bottom: -15px;
  font-size: 70px;
  font-weight: 900;
  color: rgba(161, 132, 78, 0.03);
  font-family: 'Times New Roman', serif;
  letter-spacing: 2px;
  pointer-events: none;
}

/* カード内のタイトル */
.renewal-card-title {
  font-size: 18px;
  font-weight: bold;
  color: #a1844e;
  margin-top: 0;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

/* タイトルの前に上品なダイヤ型のアイコンを付与 */
.renewal-card-title::before {
  content: "◆";
  font-size: 12px;
  margin-right: 8px;
  color: #a1844e;
  vertical-align: middle;
}

/* リニューアルのポイント箇条書き */
.renewal-points-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.renewal-points-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 15px;
  font-size: 15px;
}

.renewal-points-list li:last-child {
  margin-bottom: 0;
}

/* チェックマークのアイコン装飾 */
.renewal-points-list li::before {
  content: "✓";
  position: absolute;
  left: 3px;
  top: 1px;
  color: #a1844e;
  font-weight: bold;
  font-size: 16px;
}

/* 強調テキスト */
.text-gold-highlight {
  color: #8c703b;
  font-weight: bold;
}

/* 結びの文脈 */
.news-closing-text {
  font-size: 15px;
  margin-top: 30px;
  background-color: #faf9f7;
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #edeae4;
}

/* 署名エリアの基本スタイル（インラインスタイルから移行） */
.news-detail-signature {
  margin-top: 40px;
  text-align: right;
  color: #555555;
  font-size: 15px;
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   5. ランチメニュー告知専用（news-detail-20260522.html / 20260227.html 他）
   -------------------------------------------------------------------------- */
/* 本文エリア内の全体センタリング */
.news-detail-body.align-center {
  text-align: center;
}

/* メニュー大見出し */
.topics-menu-main-title {
  font-size: 20px;
  font-weight: bold;
  color: #111111;
  margin-top: 10px;
  margin-bottom: 25px;
}

/* 各メニューセクションの間隔 */
.topics-menu-section {
  margin: 35px auto;
  max-width: 600px;
}

/* クリムゾンレッドのバッジ見出し */
.topics-menu-badge {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  background-color: #dc143c;
  padding: 6px 18px;
  margin-bottom: 15px;
  letter-spacing: 0.05em;
}

/* 週替わりメニューの日付枠 */
.topics-menu-date-tag {
  display: inline-block;
  font-weight: bold;
  font-size: 15px;
  color: #333333;
  border: 2px solid #ff0000;
  padding: 2px 10px;
  margin-bottom: 15px;
}

/* メニュー個別の説明テキスト（新設） */
.topics-menu-desc {
  margin-top: 10px;
  font-size: 95%;
}

/* 個別メニューの品名見出し（新設） */
.topics-menu-item-title {
  font-size: 130%;
  font-weight: bold;
  margin-bottom: 10px;
}

/* ランチ価格の強調表示（新設） */
.topics-menu-price {
  color: #dc143c;
  font-size: 120%;
}

/* メニューのリスト構造 */
.topics-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.topics-menu-list li {
  font-size: 15px;
  line-height: 1.8;
  color: #333333;
  margin-bottom: 6px;
}

/* ご来店お待ちしておりますリード文 */
.topics-menu-lead {
  font-size: 16px;
  font-weight: bold;
  margin-top: 30px;
}

/* 注記（赤字）を内包するブロック（新設） */
.topics-menu-notes {
  margin: 20px 0;
}

/* 注記（赤字）単一行スタイル */
.topics-menu-note {
  font-size: 14px;
  color: #d11212;
  font-weight: 500;
  margin-top: 5px;
  margin-bottom: 30px;
}

/* 注記内のハイライト表示（新設） */
.topics-menu-notes .note-highlight {
  color: #ff0000;
  font-weight: bold;
  font-size: 90%;
  margin-bottom: 5px;
}

/* PDFリンク設置用のコンテナ（新設） */
.topics-pdf-container {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* 新設：3月度PDFリンク内の共通テキスト装飾 */
.topics-pdf-container .pdf-btn-text {
  font-size: 110%;
  font-weight: bold;
  color: #ffffff;
  background-color: crimson;
  padding: 6px 15px;
  border-radius: 4px;
  display: inline-block;
}

/* 新設：3月度PDFリンクホバー時の挙動 */
.topics-pdf-container .pdf-link-block:hover {
  opacity: 0.85;
}

/* 全体総括画像ラッパー（新設） */
.total-summary-wrapper {
  margin-top: 30px;
}

/* 全体総括画像の見出し（新設） */
.total-summary-wrapper .summary-image-title {
  font-size: 95%;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 画像レスポンシブ配置 */
.topics-menu-image-wrapper {
  margin: 30px auto;
  max-width: 100%;
}

.img-responsive-center {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   5-2. 会議・総会プラン / 待春プラン 告知専用（共通レイアウト統合）
   -------------------------------------------------------------------------- */
.plan-main-title {
  font-size: 20px;
  font-weight: bold;
  color: #111111;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center; /* 中央表示に変更 */
}

.plan-duration {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 25px;
  text-align: center; /* 中央表示に変更 */
}

/* 待春プラン用のカラー（既存の会議プランへの干渉を防ぐため単独定義） */
.news-detail-body .plan-duration {
  color: #c5a059;
}

.plan-lead-text {
  text-align: left;
  display: inline-block;
  max-width: 850px;
  line-height: 1.8;
  margin-bottom: 30px;
}

/* 待春プラン専用：桜をイメージしたピンク色のキャッチフレーズ */
.plan-catch-phrase {
  color: #ff69b4;
  font-size: 21px;
  font-weight: bold;
  display: block;
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.5;
}

/* 重要な強調箇所（赤字・太字・拡大） */
.plan-highlight-text {
  font-size: 18px;
  font-weight: bold;
  color: #c41313;
}

/* 注記 */
.plan-small-note {
  font-size: 13px;
  font-weight: normal;
  color: #555555;
}

.plan-block-note {
  display: block;
  font-size: 14px;
  color: #444444;
  margin-top: 4px;
}

/* セクション区切り線 */
.plan-section-divider {
  border: 0;
  border-top: 1px dashed #dcd6cd;
  margin: 40px auto;
  max-width: 850px;
}

/* 各店舗の紹介ブロック */
.plan-restaurant-block {
  max-width: 850px;
  margin: 0 auto;
}

/* 待春プラン専用：個別店舗内のリードテキスト配置 */
.plan-restaurant-intro {
  text-align: left;
  max-width: 640px;
  margin: 20px auto;
}

.plan-restaurant-title {
  font-size: 18px;
  font-weight: bold;
  color: #222222;
  margin-bottom: 20px;
}

/* メインビジュアル単体ラッパー */
.plan-main-visual {
  margin: 30px auto;
  max-width: 100%;
}

/* 画像が並ぶギャラリーエリア */
.plan-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.plan-gallery .img-responsive-center,
.plan-gallery img {
  flex: 1 1 380px;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* 料金リスト */
.plan-price-list {
  list-style: none;
  padding: 0;
  margin: 20px auto;
  display: inline-block;
  text-align: left;
}

.plan-price-list li {
  font-size: 16px;
  margin-bottom: 8px;
}

.plan-price-single {
  font-size: 16px;
  margin: 20px auto;
}

.plan-course-name {
  font-weight: bold;
}

.plan-accent-price {
  font-size: 18px;
  font-weight: bold;
  color: #c41313;
}

.plan-drink-include {
  font-size: 14px;
  color: #555555;
  background-color: #faf9f7;
  padding: 10px 15px;
  display: inline-block;
  border: 1px solid #edeae4;
}

/* 待春プラン用：店舗ごとのドリンク注記個別最適化 */
.plan-restaurant-block .plan-drink-include {
  max-width: 640px;
  margin: 15px auto;
  text-align: left;
  border-left: 3px solid #c5a059;
  display: block;
}

/* 待春プラン専用：オンライン予約・問合せ用QRブロック（画像・文言を完全中央揃えに修正） */
.plan-online-booking {
  margin: 30px auto 10px;
  max-width: 260px;
}

.plan-online-booking a {
  display: block;
  text-decoration: none;
  color: #333333;
  border: 1px solid #e0dbd1;
  background-color: #ffffff;
  padding: 15px;
  transition: opacity 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  text-align: center; /* リンクブロック内の全要素を確実に中央揃えにする記述を追加 */
}

.plan-online-booking a:hover {
  opacity: 0.85;
}

.plan-online-booking img {
  max-width: 130px !important;
  margin: 0 auto 12px !important; /* 画像の左右マージンをオートにし、下部の余白を固定して完全中央揃え */
  display: inline-block; /* インラインブロック化して親の中央揃えプロパティに追従 */
}

.booking-btn-text {
  display: block;
  font-size: 13px;
  font-weight: bold;
  background-color: #555555;
  color: #ffffff;
  padding: 8px 0;
  border-radius: 2px;
  letter-spacing: 0.03em;
  text-align: center; /* テキスト領域自体の中央揃えを保証 */
}

/* 内訳詳細用ボックス */
.plan-detail-box {
  background-color: #fcfbfa;
  border: 1px solid #e6dfd7;
  padding: 25px;
  border-radius: 4px;
  max-width: 700px;
  margin: 25px auto;
  text-align: left;
}

.plan-sub-heading {
  font-size: 15px;
  font-weight: bold;
  color: #222222;
  margin-top: 0;
  margin-bottom: 8px;
  border-left: 3px solid #a1844e;
  padding-left: 10px;
}

.plan-menu-items {
  font-size: 14px;
  line-height: 1.6;
  color: #444444;
  margin-bottom: 15px;
}

.plan-menu-items:last-child {
  margin-bottom: 0;
}

/* 特殊記号（＋）の装飾 */
.plus-symbol {
  font-size: 24px;
  font-weight: bold;
  color: #ff69b4;
  text-align: center;
  margin: 10px 0;
}

.plan-footer-notes {
  font-size: 13px;
  color: #666666;
  text-align: left;
  max-width: 700px;
  margin: 15px auto 0;
  line-height: 1.6;
}

/* 予約情報ブロック */
.plan-booking-info {
  margin: 40px auto 0;
  padding: 30px;
  background-color: #faf9f7;
  border: 1px solid #edeae4;
  max-width: 850px;
}

/* 待春プラン用：予約案内ブロックのデザイン拡張（会議プランへの干渉なし） */
.news-detail-body footer.plan-booking-info {
  background-color: #f7f5f0;
  border: 1px solid #e0dbd1;
}

.booking-lead {
  font-size: 15px;
  margin-bottom: 10px;
}

.booking-tel-box {
  font-size: 18px;
  color: #111111;
  margin-bottom: 25px;
}

.booking-tel-box a {
  color: #111111;
  text-decoration: none;
}

.plan-pdf-link-wrapper {
  margin-top: 20px;
}

/* 待春プラン専用：PDFリンクブロック（画像・枠線付き空中浮遊ボタン化） */
.plan-pdf-link-wrapper .pdf-link-block {
  display: block;
  max-width: 260px;
  margin: 20px auto 0;
  text-decoration: none;
  color: #333333;
  border: 1px solid #cccccc;
  background-color: #ffffff;
  padding: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plan-pdf-link-wrapper .pdf-link-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.plan-pdf-link-wrapper .pdf-link-block img {
  max-width: 100%;
  height: auto;
}

.plan-pdf-link-wrapper .pdf-btn-text {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  background-color: #111111;
  padding: 10px 0;
  text-decoration: none;
}

.pdf-link-block {
  display: inline-block;
  text-decoration: none;
  text-align: center; /* ←これを追加 */
}

.pdf-btn-text {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #8b7355;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6. レスポンシブ対応（スマートフォン表示の最適化）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* 外枠ボックスの余白調整 */
  .topics-winner-box,
  .topics-notice-box,
  .renewal-announce-card {
    padding: 20px 18px;
    margin: 20px 0;
  }

  /* タイトルのフォントサイズ調整 */
  .topics-winner-title,
  .renewal-card-title {
    font-size: 15px;
    padding-left: 10px;
    margin-bottom: 15px;
  }

  /* 5月の当選者発表用（緑バッジ）のスマホ調整 */
  h2.topics-winner-title {
    font-size: 15px;
    padding: 5px 14px;
    margin-bottom: 15px;
  }

  /* 当選者データテーブルのスマホ最適化 */
  .topics-winner-table {
    font-size: 13px;
    margin-bottom: 15px;
  }

  .topics-winner-table th,
  .topics-winner-table td {
    padding: 8px 5px;
  }
  
  /* リニューアルカードの背景装飾文字をスマホでは非表示に（被り防止） */
  .renewal-announce-card::after {
    display: none;
  }

  /* 当選者名のフォントサイズ調整 */
  .topics-winner-list li {
    font-size: 14px;
    line-height: 2.2;
    padding-left: 15px;
  }

  /* 重要告知ボックス・リニューアル文章・リードタイトルの文字サイズ調整 */
  .topics-notice-box p,
  .news-intro-text,
  .renewal-points-list li,
  .news-closing-text,
  .news-detail-body .news-detail-lead-title {
    font-size: 14px;
    line-height: 1.7;
  }
  
  .news-intro-text {
    margin-bottom: 20px;
    padding-bottom: 15px;
  }

  /* 署名エリアのスマホ用最適化 */
  .news-detail-signature {
    margin-top: 30px;
    font-size: 14px;
  }

  /* ランチメニュー告知スマホ用調整 */
  .topics-menu-main-title {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .topics-menu-section {
    margin: 25px auto;
  }

  .topics-menu-badge {
    font-size: 14px;
    padding: 5px 14px;
  }

  .topics-menu-date-tag {
    font-size: 14px;
  }

  /* スマホ環境下でのメニュー説明・品名・価格の最適化（新設） */
  .topics-menu-desc {
    font-size: 13px;
  }

  .topics-menu-item-title {
    font-size: 115%;
  }

  .topics-menu-price {
    font-size: 110%;
  }

  /* スマホ環境下での注記・PDF枠の最適化（新設） */
  .topics-menu-notes .note-highlight {
    font-size: 85%;
  }

  .topics-pdf-container .pdf-btn-text {
    font-size: 100%;
    padding: 5px 12px;
  }

  .total-summary-wrapper .summary-image-title {
    font-size: 90%;
  }

  .topics-menu-list li {
    font-size: 14px;
  }

  .topics-menu-lead {
    font-size: 14px;
    margin-top: 20px;
  }

  .topics-menu-note {
    font-size: 13px;
    margin-bottom: 20px;
  }

  .topics-menu-image-wrapper {
    margin: 20px auto;
  }

  /* 会議・総会プラン / 待春プラン 告知スマホ用調整 */
  .plan-main-title {
    font-size: 18px;
    text-align: center; /* スマホ表示での中央揃えを維持 */
  }
  
  .plan-duration {
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center; /* スマホ表示での中央揃えを維持 */
  }

  /* 待春プラン用：ピンク色のキャッチフレーズのスマホ調整 */
  .plan-catch-phrase {
    font-size: 16px;
    margin-bottom: 15px;
  }
  
  .plan-lead-text {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
  }
  
  .plan-highlight-text {
    font-size: 15px;
  }
  
  .plan-section-divider {
    margin: 25px auto;
  }
  
  .plan-restaurant-title {
    font-size: 15px;
    margin-bottom: 15px;
  }
  
  .plan-gallery {
    gap: 10px;
  }
  
  .plan-price-list li,
  .plan-price-single {
    font-size: 14px;
  }
  
  .plan-accent-price {
    font-size: 16px;
  }
  
  .plan-detail-box {
    padding: 20px 15px;
    margin: 20px auto;
  }
  
  .plan-sub-heading {
    font-size: 14px;
  }
  
  .plan-menu-items {
    font-size: 13px;
  }
  
  .plus-symbol {
    font-size: 20px;
  }
  
  .plan-booking-info {
    padding: 20px 15px;
    margin-top: 30px;
  }
  
  .booking-lead {
    font-size: 13px;
  }
  
  .booking-tel-box {
    font-size: 15px;
    margin-bottom: 15px;
  }
  
  .pdf-btn-text {
    font-size: 13px;
  }

  /* 待春プラン用：オンライン予約ボタン・PDFブロックのスマホ調整（中央揃えを完全維持） */
  .plan-online-booking,
  .plan-pdf-link-wrapper .pdf-link-block {
    max-width: 220px;
    padding: 12px;
  }
  .plan-online-booking a {
    text-align: center; /* スマホ表示でも一括中央揃えを維持 */
  }
  .plan-online-booking img {
    max-width: 110px !important;
    margin: 0 auto 10px !important; /* スマホサイズでも確実に画像中央寄せを固定 */
  }
  .booking-btn-text {
    font-size: 12px;
  }
}

/* ==========================================================================
   2月ランチ告知専用 拡張スタイル
   ========================================================================== */
/* イタリアフェア用の洗練されたイタリック・ブロンズ強調 */
.news-detail-body .italyfair {
  display: inline-block;
  font-weight: bold;
  font-style: italic;
  color: #8b7355; /* ホテルブロンズ */
  border-bottom: 1.5px solid #8b7355;
  padding-bottom: 2px;
}

/* 2月度独自の複数PDFボタン並列用コンテナ */
.topics-pdf-flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin: 25px auto;
  max-width: 600px;
}

/* おかわり自由などの重要注記用（赤太字） */
.topics-menu-notes .note-alert {
  color: #d11212;
  font-weight: bold;
}

/* ==========================================================================
   イタリア・ミラノフェア（20260126）専用 拡張スタイル
   ========================================================================== */
/* フェア専用の料金案内カード構造 */
.fair-plan-card {
  max-width: 600px;
  margin: 25px auto;
  border: 1px solid #e6dfd7;
  background-color: #ffffff;
  text-align: left;
}

.fair-plan-header {
  padding: 12px 20px;
  font-weight: bold;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0.05em;
}

/* ヘッダーカラーバリエーション */
.fair-plan-header.bg-green { background-color: #4a7a5d; } /* 深みのあるクラシックグリーン */
.fair-plan-header.bg-red   { background-color: #a93c3c; } /* 落ち着いたボルドーレッド */
.fair-plan-header.bg-white { 
  background-color: #ffffff; 
  color: #333333; 
  border-bottom: 1px solid #e6dfd7;
}

.fair-plan-body {
  padding: 20px;
}

.fair-plan-subtitle {
  font-size: 14px;
  font-weight: bold;
  color: #777777;
  margin-bottom: 6px;
}

.fair-plan-text {
  font-size: 15px;
  line-height: 1.7;
  color: #333333;
  margin: 0;
}

/* クイズ抽選会の限定装飾ボックス */
.fair-quiz-box {
  background-color: #f6f8f5; /* イタリアングリーンを極薄く敷いた爽やかな背景 */
  border: 1px solid #d5ded9;
  border-top: 4px solid #4a7a5d;
  padding: 25px 30px;
  margin: 30px auto;
  max-width: 750px;
  text-align: left;
}

/* スマホ表示の最適化 */
@media screen and (max-width: 768px) {
  .fair-plan-header {
    padding: 10px 15px;
    font-size: 14px;
  }
  .fair-plan-body {
    padding: 15px;
  }
  .fair-plan-text {
    font-size: 13px;
  }
  .fair-quiz-box {
    padding: 20px 15px;
  }
}

/* ==========================================================================
   待春プラン（20260119）専用 拡張スタイル
   ========================================================================== */
/* 待春プラン専用の華やかな春のキャッチコピー */
.news-detail-body .taisyun-catch {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #e25c80; /* 上品な桜・待春のホットピンク */
  line-height: 1.6;
  margin-bottom: 20px;
}

/* 4店舗合同 予約サイト案内グリッド（フレックスボックスで再定義） */
.taisyun-grid-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 35px auto;
  padding: 0;
  max-width: 960px;
}

.taisyun-grid-card {
  flex: 1;
  min-width: 200px; /* スマホやタブレットで自動崩れ防止 */
  max-width: 220px;
  background: #ffffff;
  border: 1px solid #e6dfd7;
  padding: 15px;
  text-align: center;
  box-sizing: border-box;
}

.taisyun-grid-card img {
  display: block;
  width: 130px;
  height: 130px;
  margin: 0 auto 12px;
}

.taisyun-grid-card a {
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: #8b7355; /* ホテルブロンズ */
  text-decoration: none;
  line-height: 1.4;
}

.taisyun-grid-card a:hover {
  text-decoration: underline;
}

/* 割引赤文字の最適化 */
.text-discount-alert {
  color: #d11212;
  font-weight: bold;
}

/* タブレット・スマホ用の調整 */
@media screen and (max-width: 768px) {
  .news-detail-body .taisyun-catch {
    font-size: 16px;
  }
  .taisyun-grid-container {
    gap: 15px;
  }
  .taisyun-grid-card {
    min-width: 45%; /* スマホでは2列ずつ並ぶ美しい形に */
  }
}
@media screen and (max-width: 480px) {
  .taisyun-grid-card {
    min-width: 100%; /* 極小画面では1列 */
  }
}

/* ==========================================================================
   恵方巻販売（20260116）専用 拡張スタイル
   ========================================================================== */
/* 恵方アピール特大文字 */
.ehou-direction {
  font-size: 24px;
  font-weight: bold;
  color: #d11212;
  margin: 10px 0;
}

/* 商品ブロック */
.ehou-product-box {
  background: #fdfbf7;
  border: 1px solid #e6dfd7;
  padding: 20px;
  margin-bottom: 25px;
  text-align: left;
}

.ehou-product-title {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  border-bottom: 2px solid #8b7355;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.ehou-product-limit {
  font-size: 14px;
  color: #d11212;
  font-weight: bold;
  margin-left: 10px;
}

.ehou-product-price {
  font-size: 16px;
  font-weight: bold;
  color: #8b7355;
  margin-bottom: 10px;
}

.ehou-ingredients {
  font-size: 14px;
  line-height: 1.6;
  background: #ffffff;
  padding: 10px 15px;
  border-left: 3px solid #8b7355;
}

/* お渡し情報ボックス */
.ehou-delivery-box {
  background: #f7f5f0;
  border: 2px dashed #8b7355;
  padding: 20px;
  margin: 30px auto;
  max-width: 650px;
  text-align: left;
}

.ehou-delivery-box h4 {
  font-size: 16px;
  font-weight: bold;
  color: #8b7355;
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: 1px solid #e6dfd7;
  padding-bottom: 5px;
}

.ehou-delivery-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ehou-delivery-list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.5;
}

.ehou-delivery-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #8b7355;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .ehou-direction {
    font-size: 20px;
  }
  .ehou-product-title {
    font-size: 16px;
  }
  .ehou-product-limit {
    display: block;
    margin-left: 0;
    margin-top: 5px;
  }
}

/* ==========================================================================
   皇'ランチインフォメーション（20251229）専用 拡張スタイル
   ========================================================================== */
/* カレンダー等への誘導ボタン */
.lunch-link-container {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin: 25px auto;
  max-width: 650px;
}

.lunch-btn-crimson {
  display: inline-block;
  background-color: #dc143c; /* クリムゾンレッド */
  color: #ffffff !important;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color 0.2s ease, transform 0.2s ease;
  text-align: center;
  min-width: 200px;
}

.lunch-btn-crimson:hover {
  background-color: #b00f30;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ランチ個別メニューカード */
.lunch-menu-card {
  background: #ffffff;
  border: 1px solid #e6dfd7;
  padding: 25px;
  margin-bottom: 35px;
  text-align: center;
}

.lunch-menu-tag {
  display: inline-block;
  background-color: #dc143c;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  margin-bottom: 10px;
}

.lunch-menu-name {
  font-size: 22px;
  font-weight: bold;
  color: #333333;
  margin: 5px 0 10px;
}

.lunch-menu-price {
  font-size: 18px;
  font-weight: bold;
  color: #8b7355;
  margin-bottom: 15px;
}

.lunch-menu-price span {
  font-size: 24px;
}

.lunch-menu-details {
  text-align: left;
  max-width: 450px;
  margin: 15px auto 0;
  font-size: 15px;
  line-height: 1.6;
  background: #fdfbf7;
  padding: 15px;
  border-top: 1px solid #e6dfd7;
}

.lunch-vegan-note {
  font-size: 13px;
  color: #2e7d32;
  font-weight: bold;
  margin-top: 10px;
  display: inline-block;
  border: 1px solid #2e7d32;
  padding: 2px 6px;
  border-radius: 3px;
}

@media screen and (max-width: 768px) {
  .lunch-btn-crimson {
    width: 100%;
    min-width: auto;
  }
  .lunch-menu-name {
    font-size: 18px;
  }
}

/* ==========================================================================
   冬の季節弁当（20251203）専用 拡張スタイル
   ========================================================================== */
/* 限定商品の水色バッジ */
.bento-season-badge {
  display: inline-block;
  background-color: #1e90ff; /* ドジャーブルー */
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 15px;
  margin-bottom: 15px;
  border-radius: 0;
}

/* お弁当詳細情報エリア */
.bento-spec-box {
  background: #fdfbf7;
  border: 1px solid #e6dfd7;
  padding: 20px;
  margin: 20px auto 30px;
  max-width: 650px;
  text-align: left;
}

.bento-name-title {
  font-size: 22px;
  font-weight: bold;
  color: #333333;
  border-bottom: 2px solid #8b7355;
  padding-bottom: 8px;
  margin-bottom: 15px;
  text-align: center;
}

.bento-spec-list {
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
}

.bento-spec-list li {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 8px;
  padding-left: 15px;
  position: relative;
}

.bento-spec-list li::before {
  content: "■";
  position: absolute;
  left: 0;
  color: #8b7355;
  font-size: 11px;
  top: 2px;
}

.bento-notice-text {
  font-size: 13px;
  color: #666666;
  line-height: 1.5;
  border-top: 1px dashed #e6dfd7;
  padding-top: 10px;
}

/* オンライン予約導線 */
.bento-reserve-zone {
  background: #f7f5f0;
  border: 1px dashed #8b7355;
  padding: 25px;
  margin: 30px auto;
  max-width: 500px;
  text-align: center;
}

.bento-qr-wrapper {
  margin: 15px auto;
  width: 180px;
}

.bento-btn-online {
  display: inline-block;
  background-color: #8b7355;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 25px;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color 0.2s ease;
  margin-top: 10px;
}

.bento-btn-online:hover {
  background-color: #6e5940;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .bento-name-title {
    font-size: 18px;
  }
}

/* ==========================================================================
   冬のあったか宿泊割案内（20251203）専用 拡張スタイル
   ========================================================================== */
/* キャンペーン特有の赤太字キャッチコピー */
.news-detail-body .stay-alert-catch {
  color: #a93c3c;
  font-weight: bold;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 1.15rem;
}

/* 注意書き（※印など）の基本一括スタイル */
.stay-note-text {
  display: block;
  font-size: 14px;
  color: #666666;
  line-height: 1.6;
  margin-top: 10px;
}

/* 公式キャンペーン誘導ブロック・ボタン */
.stay-external-link-zone {
  text-align: center;
  margin: 30px 0;
}

.stay-btn-gold {
  display: inline-block;
  background-color: #ffffff;
  border: 1px solid #dcb062; /* 華やかなゴールド系アクセント */
  color: #c98e26;
  padding: 12px 24px;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.stay-btn-gold:hover {
  background-color: #fdfaf4;
  color: #a87213;
  border-color: #a87213;
  text-decoration: none;
}

/* 宿泊割専用の予約・案内カード構造 */
.stay-reserve-box {
  background-color: #ffffff;
  border: 1px solid #dcd6cd;
  padding: 30px;
  margin: 35px auto 0;
  text-align: center;
  max-width: 750px;
}

.stay-reserve-title {
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  margin-top: 0;
  margin-bottom: 15px;
  line-height: 1.5;
}

/* 2食付きフォームへのボタン */
.stay-btn-reserve {
  display: inline-block;
  background-color: #8b7355; /* ホテルブロンズ */
  color: #ffffff !important;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 35px;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color 0.2s ease, transform 0.2s ease;
  margin: 10px auto;
  max-width: 450px;
  width: 100%;
  box-sizing: border-box;
}

.stay-btn-reserve:hover {
  background-color: #6e5940;
  text-decoration: none;
  transform: translateY(-1px);
}

/* QRコード配置用の指定 */
.stay-qr-wrapper {
  margin-top: 25px;
  text-align: center;
}

.stay-qr-wrapper img {
  max-width: 150px;
  height: auto;
  border: 1px solid #e6dfd7;
  padding: 6px;
  background-color: #ffffff;
  display: inline-block;
}

/* お問い合わせ・署名用内包スタイル */
.stay-signature-inner {
  text-align: center;
  margin-top: 25px;
  border-top: 1px dashed #dcd6cd;
  padding-top: 20px;
  font-size: 15px;
  color: #555555;
  line-height: 1.8;
}

.stay-tel-highlight {
  font-size: 20px;
  font-weight: bold;
  color: #8b7355;
}

/* スマートフォン表示の最適化 */
@media screen and (max-width: 768px) {
  .news-detail-body .stay-alert-catch {
    font-size: 15px;
    margin-top: 20px;
  }
  .stay-note-text {
    font-size: 13px;
  }
  .stay-reserve-box {
    padding: 20px 15px;
  }
  .stay-reserve-title {
    font-size: 14px;
  }
  .stay-btn-reserve {
    font-size: 14px;
    padding: 10px 20px;
  }
  .stay-signature-inner {
    font-size: 13px;
  }
  .stay-tel-highlight {
    font-size: 17px;
  }
}

/* ==========================================================================
   冬のあったか宿泊割 期間案内レイアウト調整
   ========================================================================== */
.stay-period-group {
  padding: 10px 5px;
}

/* 各期間を独立した箱として見せる */
.stay-period-block {
  margin-bottom: 25px;
  text-align: center;
}

.stay-period-block:last-child {
  margin-bottom: 0;
}

/* 項目名（割引対象期間 / 予約・販売期間）を目立たせるラベル */
.stay-period-label {
  display: inline-block;
  background-color: #8b7355; /* レクストン共通のホテルブロンズ */
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 16px;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

/* 日付を表示するエリア */
.stay-period-days {
  font-size: 18px;
  font-weight: bold;
  color: #222222;
  line-height: 1.5;
  margin-bottom: 5px;
}

/* 矢印の前後で適度な余白を持たせる */
.stay-period-days .day-arrow {
  color: #8b7355;
  margin: 0 10px;
  font-weight: normal;
}

/* 割引対象期間内の注記 */
.stay-period-block .plan-block-note {
  display: block;
  font-size: 13px;
  color: #666666;
  margin-top: 4px;
}

/* スマートフォン表示では日付が折り返しても綺麗に見えるよう調整 */
@media screen and (max-width: 576px) {
  .stay-period-days {
    font-size: 16px;
  }
  .stay-period-days .day-start,
  .stay-period-days .day-end {
    display: inline-block;
  }
  .stay-period-days .day-arrow {
    display: block;
    margin: 2px auto;
    transform: rotate(0deg); /* 縦並びになっても矢印を自然に維持 */
  }
}

/* ==========================================================================
   12月ランチインフォメーション専用拡張クラス（HTMLインラインスタイルからの移行）
   ========================================================================== */

/* 記事本文の全体的なセンタリング定義 */
.topics-center-align {
  text-align: center;
}

/* メニュー概要文の読みやすさ担保（最大幅制限と左右中央寄せ） */
.topics-summary-text {
  max-width: 700px;
  margin: 0 auto 25px;
  text-align: left;
  line-height: 1.7;
}

/* ご飯・お味噌汁おかわり自由などの注意書き装飾 */
.topics-notice-text {
  font-size: 14px;
  color: #d11212;
  margin: 20px auto 35px;
}

/* メニューカードの最大幅制限（PC閲覧時を想定） */
.topics-menu-card-max {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

/* 全体一覧ポスター画像のラッパー（上部余白の追加） */
.topics-menu-image-wrapper-poster {
  margin-top: 25px;
}

/* ==========================================================================
   おせち完売案内専用拡張クラス（HTMLインラインスタイルからの移行）
   ========================================================================== */

/* 「【完売いたしました】」の赤文字強調 */
.topics-alert-red {
  color: #d11212;
}

/* 予約締切日などの打ち消し線付きの赤文字表現 */
.topics-line-through-red {
  color: #d11212;
  text-decoration: line-through;
}

/* 締切日・お渡し日を囲うボックスの余白調整 */
.topics-date-info-box {
  font-weight: bold;
  margin-bottom: 25px;
}

/* あいさつ文・案内文の幅と可読性調整 */
.topics-summary-text-narrow {
  max-width: 600px;
  margin: 0 auto 30px;
  text-align: center;
  line-height: 1.8;
}

/* メイン画像エリアの調整 */
.topics-main-image-wrapper {
  margin-bottom: 25px;
}

/* 画像の最大幅制限用（元のwidth="750"を担保） */
.topics-max-width-750 {
  max-width: 750px;
  width: 100%;
}

/* 商品情報スペックの縦積みテキスト装飾 */
.topics-product-spec {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 35px;
}

.topics-spec-size {
  font-size: 15px;
}

.topics-spec-name {
  font-size: 20px;
  font-weight: bold;
  margin: 5px 0;
}

.topics-spec-price {
  font-size: 22px;
  font-weight: bold;
  color: #111;
}

.topics-spec-price span {
  font-size: 14px;
  font-weight: normal;
}

.topics-spec-count {
  font-size: 15px;
  color: #555;
}

/* ==========================================================================
   ふく会席案内専用拡張クラス（HTMLインラインスタイルからの移行）
   ========================================================================== */

/* 開催期間エリア全体の文字サイズとマージン */
.topics-period-text {
  font-size: 16px;
  margin-bottom: 10px;
}

/* インラインで差し込む細かな赤文字の注記 */
.topics-alert-red-inline {
  color: #d11212;
  font-weight: bold;
  font-size: 90%;
  margin-left: 5px;
}

/* 概要リード文 */
.topics-summary-lead {
  max-width: 700px;
  margin: 0 auto 25px;
  line-height: 1.7;
}

/* メイン画像ラッパーおよび最大幅 */
.topics-main-image-wrapper {
  margin-bottom: 20px;
}
.topics-max-width-750 {
  max-width: 750px;
  width: 100%;
}

/* 基本料金の強調表現 */
.topics-base-price {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 25px;
}
.topics-base-price span {
  font-size: 26px;
  color: #111;
}

/* お品書き：PCで2カラム、スマホで1カラムに最適化するグリッド */
.topics-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 650px;
  margin: 0 auto 15px;
  gap: 8px 20px;
  text-align: left;
}
.topics-menu-item {
  font-size: 15px;
  border-bottom: 1px dashed #ddd;
  padding-bottom: 4px;
}
.topics-menu-label {
  font-weight: bold;
  color: #7a6146; /* 老舗に合う落ち着いたブラウントーン */
}
/* 最後の鍋など1つの項目を横いっぱいに広げる指定 */
.topics-grid-full {
  grid-column: 1 / -1;
}

/* 仕入れによる注意書き */
.topics-caution-text {
  font-size: 14px;
  color: #666;
  margin-bottom: 40px;
}

/* ドリンクプランエリア */
.topics-drink-plan-section {
  max-width: 750px;
  width: 100%; /* ★追記：はみ出し防止 */
  margin: 0 auto 40px;
  box-sizing: border-box; /* ★追記 */
}

/* ドリンクプランのクリムゾン色見出しリボン */
.topics-drink-plan-badge {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #dc143c;
  padding: 8px 20px; /* ★微調整：上下に少し余裕を持たせる */
  margin-bottom: 15px;
  border-radius: 2px;
  max-width: 100%;   /* ★追記：画面からはみ出るのを防ぐ */
  box-sizing: border-box; /* ★追記 */
}

/* テーブルを横スクロール対応にするコンテナ（スマホ対策） */
.topics-table-responsive {
  width: 100%;
  /* ★修正：横スクロールを隠し、レスポンシブ制御へ変更 */
  overflow-x: visible; 
}

/* ドリンクプラン専用のクリーンなテーブル装飾 */
.topics-drink-table {
  width: 100%;
  /* ★修正：min-widthを解除して100%可変にし、テーブルレイアウトを固定 */
  table-layout: fixed; 
  border-collapse: collapse;
  margin-bottom: 10px;
}
.topics-drink-table th,
.topics-drink-table td {
  border: 1px solid #ddd;
  padding: 12px 15px; /* ★微調整：余白を広げて視認性アップ */
  vertical-align: middle;
}
.topics-price-th {
  background-color: #dc143c;
  color: #fff;
  font-size: 16px;
  width: 15%; /* ★微調整：バランスを考慮 */
  font-weight: bold;
}
.topics-menu-td {
  background-color: #fafafa;
  text-align: left;
  font-size: 14px;
  width: 35%; /* ★微調整：バランスを考慮 */
  line-height: 1.5; /* ★追記：改行時の読みやすさ向上 */
}

/* お問い合わせ文面と電話番号の強調 */
.topics-guide-text {
  font-size: 15px;
  margin-bottom: 15px;
}
.topics-tel-highlight {
  font-size: 16px;
  background: #fdf6f0;
  border: 1px solid #f3e5d8;
  display: inline-block;
  padding: 15px 40px;
  margin-bottom: 40px;
  border-radius: 4px;
}
.topics-tel-highlight .tel-number {
  font-size: 24px;
  color: #dc143c;
  display: inline-block;
  margin-top: 5px;
}

/* チラシとQRコードのアセット配置エリア */
.topics-footer-assets {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-bottom: 20px;
}
.topics-max-width-500 {
  max-width: 500px;
  width: 100%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.topics-qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.topics-width-220 {
  width: 220px;
}

/* 予約サイトへの誘導モダンボタン */
.topics-site-btn {
  display: inline-block;
  background-color: #7a6146;
  color: #fff;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}
.topics-site-btn:hover {
  background-color: #5c4934;
  color: #fff;
}

/* ==========================================================================
   レスポンシブ調整（タブレット・スマホ表示の最適化）
   ========================================================================== */

/* 1. タブレット〜スマホ環境（画面幅 960px 以下） */
@media (max-width: 960px) {
  .topics-drink-plan-section {
    padding: 0 15px;
  }

  /* ★修正：セレクタを厳格化し、ドリンクプランテーブルの要素だけを縦並びに限定（他への干渉を排除） */
  table.topics-drink-table,
  .topics-drink-table tbody,
  .topics-drink-table tr {
    display: block;
    width: 100%;
  }

  /* ★修正：ドリンクプランテーブルの th, td のみをブロック化 */
  .topics-drink-table th.topics-price-th,
  .topics-drink-table td.topics-menu-td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  .topics-drink-table .topics-price-th {
    text-align: center;
    padding: 10px;
    border-bottom: none; /* メニューセルと一体化させるため下線を消去 */
  }

  .topics-drink-table .topics-menu-td {
    background-color: #fff; /* 視認性を上げるため白背景に変更 */
    padding: 15px;
    margin-bottom: 20px; /* 次のパックとの間に隙間を作る */
    text-align: center;
  }

  /* ★完全隔離：壊れてしまったチラシ・QRコード・ボタンエリアの再構築 */
  .topics-footer-assets {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    gap: 40px;
  }

  /* チラシ画像がはみ出さず綺麗に収まるよう再定義 */
  .topics-max-width-500 {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* QRボックスが潰れるのを防ぎ中央へ整列 */
  .topics-qr-box {
    width: 100%;
    align-items: center;
    justify-content: center;
  }

  /* 予約ボタンの文字がスマホで溢れないように調整 */
  .topics-site-btn {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 12px 30px;
  }
}

/* 2. スマートフォン環境（画面幅 576px 以下） */
@media (max-width: 576px) {
  .topics-menu-grid {
    grid-template-columns: 1fr;
    padding: 0 15px;
  }
  .topics-tel-highlight {
    padding: 15px 20px;
    width: 100%;
    box-sizing: border-box;
  }
  .topics-tel-highlight .tel-number {
    font-size: 20px;
  }
}

/* ==========================================================================
   忘新年会・複数プラン並び用の拡張クラス
   ========================================================================== */

/* 各プランを区切るための外枠カードコンテナ */
.topics-plan-card {
  max-width: 750px;
  margin: 0 auto 50px;
  background-color: #fff;
  border: 1px solid #eee;
  padding: 30px 20px;
  border-radius: 6px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
  text-align: center;
}

/* プランのタイトル（黒豚しゃぶしゃぶ、会席など） */
.topics-plan-title {
  font-size: 20px;
  font-weight: bold;
  color: #111;
  margin-bottom: 8px;
}

/* プランのキャッチコピー・リード文 */
.topics-plan-lead {
  font-size: 15px;
  color: #555;
  margin-bottom: 20px;
}

/* カード内の画像配置ラッパー */
.topics-plan-image-wrapper {
  margin-bottom: 18px;
}

/* 各プランごとの価格強調表示 */
.topics-plan-price {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}
.topics-plan-price span {
  font-size: 26px;
  color: #dc143c; /* ダイニング皇'のアクセントに合わせたクリムゾンレッド */
}

/* 具体的なメニュー構成テキスト */
.topics-plan-detail {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  background-color: #fafafa;
  padding: 12px 15px;
  border-radius: 4px;
  display: inline-block;
  max-width: 680px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  margin: 0 auto 10px;
}

/* 各プラン内の注意書き */
.topics-plan-caution {
  font-size: 13px;
  color: #777;
  margin-bottom: 0;
}

/* スマホ閲覧時のカード内余白調整 */
@media (max-width: 576px) {
  .topics-plan-card {
    padding: 20px 15px;
    margin-bottom: 35px;
  }
  .topics-plan-title {
    font-size: 18px;
  }
  .topics-plan-price span {
    font-size: 22px;
  }
  .topics-plan-detail {
    font-size: 13px;
    padding: 10px;
  }
}

/* レスポンシブ調整（スマホ閲覧時にお品書きを1カラムにする） */
/* ★修正：タブレット環境（960px以下）から段階的に最適化を適用させるため、条件を拡張 */
@media (max-width: 960px) {
  /* ドリンクプランエリア全体のパディング確保 */
  .topics-drink-plan-section {
    padding: 0 15px;
  }

  /* テーブルの「横並び構造」を解除し、「縦並びのブロック」へ変換 */
  .topics-drink-table,
  .topics-drink-table tbody,
  .topics-drink-table tr {
    display: block;
    width: 100%;
  }

  /* 各セルを横幅100%の1枚のカード状にする */
  .topics-drink-table th,
  .topics-drink-table td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* 金額セルの装飾をスマホ・タブレット用に最適化 */
  .topics-price-th {
    text-align: center;
    padding: 10px;
    border-bottom: none; /* メニュー内容と一体化させるために下の境界線を消去 */
  }

  /* メニュー内容セルの装飾を最適化 */
  .topics-menu-td {
    background-color: #fff; /* 視認性を上げるため白背景に */
    padding: 15px;
    margin-bottom: 20px; /* 次の金額パックとの間に余白を作る */
    text-align: center;   /* 中央寄せにして見やすさアップ */
  }
}

@media (max-width: 576px) {
  .topics-menu-grid {
    grid-template-columns: 1fr;
    padding: 0 15px;
  }
  .topics-tel-highlight {
    padding: 15px 20px;
    width: 100%;
    box-sizing: border-box;
  }
  .topics-tel-highlight .tel-number {
    font-size: 20px;
  }
}

/* ==========================================================================
   忘新年会（竹千代本館）2種類の価格＆ドリンクカード表現
   ========================================================================== */

/* 上位プランを並列表示するボックス */
.topics-double-price-box {
  max-width: 750px;
  margin: 0 auto 20px;
  text-align: center;
}

/* プレミアムプラン用の太枠に代わる上品なバッジ表現 */
.topics-premium-price-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  border: 2px solid #b89343; /* 高級感のあるゴールド・ベージュ系 */
  background-color: #fdfbf7;
  color: #111;
  font-size: 15px;
  border-radius: 4px;
}
.topics-premium-price-badge strong {
  color: #111;
  font-weight: bold;
}

/* 飲み放題メニュー専用のカード */
.topics-drink-content-card {
  max-width: 600px;
  margin: 40px auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* 飲み放題のクリムゾン背景ヘッダー */
.topics-drink-content-header {
  background-color: #dc143c;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 15px;
  margin: 0;
  text-align: center;
  letter-spacing: 0.05em;
}

/* ドリンクの箇条書きリスト */
.topics-drink-bullet-list {
  list-style: none;
  padding: 20px 25px;
  margin: 0;
  text-align: left;
  background-color: #fff;
}
.topics-drink-bullet-list li {
  font-size: 14px;
  color: #333;
  line-height: 1.7;
  position: relative;
  padding-left: 15px;
  margin-bottom: 12px;
}
.topics-drink-bullet-list li:last-child {
  margin-bottom: 0;
}
/* 文頭の●ポインター */
.topics-drink-bullet-list li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  color: #b89343;
  font-size: 11px;
}

/* スマホ対応 */
@media (max-width: 576px) {
  .topics-premium-price-badge {
    font-size: 13px;
    padding: 10px 12px;
    line-height: 1.5;
  }
  .topics-drink-content-card {
    margin: 30px auto;
  }
  .topics-drink-bullet-list {
    padding: 15px;
  }
  .topics-drink-bullet-list li {
    font-size: 13px;
    margin-bottom: 10px;
  }
}

/* ==========================================================================
   秋の季節弁当（錦秋弁当）専用の拡張スタイル
   ========================================================================== */

/* 期間限定商品のバッジ表示 */
.topics-limited-badge-wrapper {
  margin: 15px auto 25px;
  text-align: center;
}
.topics-limited-badge-crimson {
  display: inline-block;
  background-color: #dc143c;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 18px;
  border-radius: 50px; /* スッキリ見える丸角カプセル風 */
  letter-spacing: 0.03em;
}

/* お弁当スペック情報用カード */
.topics-product-spec-box {
  max-width: 500px;
  margin: 30px auto;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}
.topics-product-name {
  font-size: 18px;
  font-weight: bold;
  color: #111;
  margin-bottom: 5px;
}
.topics-product-price {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px dashed #e2e8f0;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.topics-product-price span {
  font-size: 26px;
  color: #b89343; /* ホテル共通トピックスとしての落ち着いた金・ゴールド系 */
}

/* スペック用ミニテーブル */
.topics-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.topics-spec-table th {
  width: 30%;
  text-align: left;
  font-weight: bold;
  color: #666;
  padding: 8px 0;
  vertical-align: top;
}
.topics-spec-table td {
  text-align: left;
  color: #333;
  padding: 8px 0;
  vertical-align: top;
}

/* 注意事項リストのコンテナ */
.topics-notice-list-container {
  max-width: 650px;
  margin: 35px auto;
  text-align: left;
  background-color: #fcfbfa; /* ほんのり和風の敷紙をイメージした背景色 */
  padding: 20px 25px;
  border-left: 3px solid #b89343;
}
.topics-notice-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.topics-notice-bullet-list li {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  margin-bottom: 8px;
}
.topics-notice-bullet-list li:last-child {
  margin-bottom: 0;
}
/* 期限などの注目メッセージ用エマージェンシーカラー */
.topics-notice-bullet-list li.topics-alert-text {
  color: #dc143c;
  font-weight: bold;
}

/* 単一チラシ表示用の余白調整 */
.topics-single-flyer-wrapper {
  margin: 40px auto;
}

/* スマホ対応の微調整 */
@media (max-width: 576px) {
  .topics-limited-badge-crimson {
    font-size: 13px;
    padding: 5px 14px;
  }
  .topics-product-spec-box {
    padding: 20px 15px;
  }
  .topics-product-price span {
    font-size: 22px;
  }
  .topics-spec-table {
    font-size: 13px;
  }
  .topics-notice-list-container {
    padding: 15px;
  }
  .topics-notice-bullet-list li {
    font-size: 13px;
  }
}