/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
城ケ崎荘　お料理メニューテーブル（PC=新3列／SP=従来カード）
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

/* ---------------- 基本 ---------------- */
.nowrap-tit { white-space: nowrap; font-size: 16px; text-align: left; }
.nowrap-price { white-space: nowrap; }

.table-container {
  width: 100%;
  display: flex;
  justify-content: left;
  margin: 0 auto;
  overflow-x: auto;
  margin-bottom: 2em;
}

.menu-table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  font-size: 16px;
  background: #fff;
}

.menu-table th,
.menu-table td {
  border: 1px solid #ccc;
  padding: 8px;
}

.menu-table th { background: #f6f6f6; }

.menu-table img { max-width: 400px; height: auto; }
.menu-table .iconzoom img { width: auto; height: 46px; }

.s-font{
	font-size: 0.5em;
	font-weight: bold;
}
/* ---------------- 季節のメニュー（ギャラリー） ---------------- */
.photo-gallery {
  display: grid;
  grid-template-columns: 1fr;  /* 初期1列 */
  gap: 20px;
  justify-items: center;
  margin: 0 auto 2em;
}

.photo-box { text-align: center; max-width: 400px; width: 100%; }
.photo-box img { width: 100%; height: auto; display: block; border-radius: 10px 0 10px 0; }
.photo-box figcaption { font-size: 18px; color: #555; margin-top: 8px; }

/* ---------------- ta-meal1（caption等） ---------------- */
.ta-meal1 caption {
  font-size: 1.4em;
  padding: 0.4rem 1rem;
  background: #eee;
  color: #004b36;
  margin-bottom: 1rem;
  border-radius: 10px 0 10px 0;
  line-height: 1.4;
  text-align: left;
  padding-left: 1em;
}

/* ta-meal1本体 */
.ta-meal1 { table-layout: fixed; border-top: 1px solid #ccc; width: 100%; margin-bottom: 1rem; line-height: 1.4; }
.ta-meal1 tr { border-bottom: 1px solid #ccc; }
.ta-meal1 th, .ta-meal1 td { padding: 0.5rem 1rem; word-break: break-all; line-height: 1.4; }
.ta-meal1 th { width: 80%; text-align: left; background: #fff; font-weight: normal; }

/* ---------------- PC（769px以上）：新3列レイアウト ---------------- */
@media screen and (min-width: 769px) {
  .menu-table { table-layout: fixed; font-size: 16px; line-height: 1.4; }
  .menu-table th, .menu-table td { vertical-align: top; }

  /* 列幅（必要に応じ調整） */
  .menu-table th:nth-child(1), .menu-table td.col-symbol { width: 6rem; text-align: center; }
  .menu-table th:nth-child(2), .menu-table td.col-meal   { width: 52%; }
  .menu-table th:nth-child(3), .menu-table td.col-meta   { width: auto; }

  /* 料理セル（写真→料理名の縦並び） */
  .col-meal .meal-figure {
    display: grid;
    grid-template-rows: auto auto;
    gap: .5rem;
    justify-items: center; /* 画像中央 */
  }
  .meal-figure img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 10px 0 10px 0;
    display: block;
  }
  .meal-title {
    font-weight: 600;
    font-size: 1rem;
    width: 100%;
    text-align: left; /* タイトルは左寄せ */
  }

  /* 料金／解説（縦並び） */
  .col-meta .meta { display: grid; grid-template-rows: auto 1fr; gap: .4rem; }
  .col-meta .meal-price { font-size: 1.05em; font-weight: 700; }
  .col-meta .meal-desc { margin: 0; line-height: 1.6; }

  /* PCのみ：本文左寄せ */
  .menu-table td:nth-child(2), /* 料理 */
  .menu-table td:nth-child(3)  /* 料金／解説 */
  { text-align: left; }

  /* 万一HTMLに残っている PC専用改行を隠す（任意） */
  br.sp-hide { display: none !important; }
}

/* ---------------- 大きめPC（1200px～）：任意の微調整 ---------------- */
@media screen and (min-width: 1200px) {
  .menu-table { font-size: 16px; line-height: 1.4; }
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- タブレット（～960px）：フォトやフォント軽量化 ---------------- */
@media screen and (max-width: 960px) {
  .menu-table { font-size: 14px; line-height: 1.4; }
  .menu-table img { max-width: 80px; }
  .photo-gallery { grid-template-columns: 1fr; }
}

/* ---------------- スマホ閾値（～768px）：従来のカード型（thead非表示） ---------------- */
@media screen and (max-width: 768px) {
  .menu-table,
  .menu-table thead,
  .menu-table tbody,
  .menu-table th,
  .menu-table td,
  .menu-table tr { display: block; }

  .menu-table tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    padding: 10px;
    background: #fafafa;
  }

  .menu-table th { display: none; }

  .menu-table td {
    text-align: left;
    padding: 5px 10px;
    border: none;
    position: relative;
    font-size: 14px;
  }

  .menu-table td img { max-width: 100%; height: auto; }

  .menu-table td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    color: #333;
    margin-bottom: 3px;
  }

  .photo-gallery { grid-template-columns: 1fr; }
}

/* ---------------- 小型スマホ（～460px） ---------------- */
@media screen and (max-width: 460px) {
  .menu-table td { font-size: 16px; }
  .photo-box { width: 90%; }
  .photo-box figcaption { font-size: 16px; }
}

/* ---------------- 注意書き（※自動付与・やや小さめ・段落間詰め） ---------------- */
.note1 {
  position: relative;
  font-size: 0.80em;     /* 小さめ */
  color: #555;
  line-height: 1.5;
  margin: 0.05em 0;      /* 段落間を狭く */
  padding-left: 1em;     /* ※分のインデント */
}
.note1::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  color: #555;
  font-weight: bold;
  line-height: 1.5;
}

/* ---------------- PCレイアウト維持を768pxまで拡張 ---------------- */
@media screen and (min-width: 641px) {
  .menu-table {
    table-layout: fixed;
    font-size: 16px;
    line-height: 1.4;
  }
  .menu-table th, .menu-table td {
    vertical-align: top;
  }

  /* 列幅調整 */
  .menu-table th:nth-child(1),
  .menu-table td.col-symbol {
    width: 6rem;
    text-align: center;
  }
  .menu-table th:nth-child(2),
  .menu-table td.col-meal {
    width: 52%;
  }
  .menu-table th:nth-child(3),
  .menu-table td.col-meta {
    width: auto;
  }

  /* 料理セル：画像＋料理名センター揃え */
  .col-meal .meal-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .meal-figure img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 10px 0 10px 0;
  }

  .meal-title {
    font-size: 1rem;
    font-weight: normal; /* ← ボールド禁止 */
    text-align: center;  /* ← センター */
  }

  /* 料金／解説セル */
  .col-meta .meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
	
/* 料金（.meal-price）をノーマル・左寄せに変更 */
.col-meta .meal-price {
  font-size: 1.05em;
  font-weight: normal;   /* ← 太字解除 */
  text-align: left;      /* ← 左寄せ */
}

  .col-meta .meal-desc {
    margin: 0;
    line-height: 1.6;
  }

  /* 左寄せ解除（PCでは中央揃えも混在） */
  .menu-table td:nth-child(2),
  .menu-table td:nth-child(3) {
    text-align: left;
  }

  /* 改行制御：不要なbr非表示（任意） */
  br.sp-hide {
    display: none !important;
  }
}

/* ---------------- スマホ表示（640px以下） ---------------- */
@media screen and (max-width: 640px) {
  .menu-table,
  .menu-table thead,
  .menu-table tbody,
  .menu-table th,
  .menu-table td,
  .menu-table tr {
    display: block;
  }
  .menu-table tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    padding: 10px;
    background: #fafafa;
  }
  .menu-table th { display: none; }
  .menu-table td {
    text-align: left;
    padding: 5px 10px;
    border: none;
    position: relative;
    font-size: 14px;
  }
  .menu-table td img { max-width: 100%; height: auto; }
  .menu-table td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    color: #333;
    margin-bottom: 3px;
  }
}

/* ====== 768px以上は常にPCレイアウトを強制 ====== */
@media screen and (min-width: 768px) {
  /* ブロック化を解除して通常のテーブル表示へ戻す */
  .menu-table { display: table; table-layout: fixed; width: 100%; }
  .menu-table thead { display: table-header-group; }
  .menu-table tbody { display: table-row-group; }
  .menu-table tr { display: table-row; margin: 0; border: 1px solid #ccc; padding: 0; background: #fff; }
  .menu-table th, .menu-table td { display: table-cell; border: 1px solid #ccc; padding: 8px; }

  /* スマホ用見出し（data-label）を無効化 */
  .menu-table td::before { content: none !important; }

  /* PCのセル内レイアウト（センター＆通常ウェイト） */
  .col-meal .meal-figure {
    display: flex;
    flex-direction: column;
    align-items: center;   /* 画像・料理名をセンター */
    justify-content: center;
    gap: 0.5rem;
  }
  .meal-title {
    font-size: 1rem;
    font-weight: normal;   /* ボールドにしない */
    text-align: center;    /* センター */
  }

  /* 列幅（必要なら微調整） */
  .menu-table th:nth-child(1), .menu-table td.col-symbol { width: 6rem; text-align: center; }
  .menu-table th:nth-child(2), .menu-table td.col-meal   { width: 52%; }
  .menu-table th:nth-child(3), .menu-table td.col-meta   { width: auto; }
}

/* ==== PC(768px以上)の最終オーバーライド ==== */
@media screen and (min-width: 768px) {

  /* テーブル形に戻す（万一スマホ化が残っている場合の保険） */
  .menu-table { display: table; table-layout: fixed; width: 100%; }
  .menu-table thead { display: table-header-group; }
  .menu-table tbody { display: table-row-group; }
  .menu-table tr { display: table-row; margin: 0; border: 1px solid #ccc; padding: 0; background: #fff; }
  .menu-table th, .menu-table td { display: table-cell; border: 1px solid #ccc; padding: 8px; vertical-align: top; }

  /* --- 記号セル：ぎりぎりまで狭く --- */
  .menu-table th:nth-child(1),
  .menu-table td.col-symbol {
    width: 1%;              /* 最小幅に張り付くよう指示 */
    white-space: nowrap;    /* 折り返さず最小限 */
    text-align: center;
    padding-left: 6px;      /* 余白も少し詰める */
    padding-right: 6px;
  }

  /* --- 写真(料理)セル：できるだけ狭く（画像も少し縮小） --- */
  .menu-table th:nth-child(2),
  .menu-table td.col-meal {
    width: 40%;             /* 既存より細め（必要なら 38% などに） */
  }

  .col-meal .meal-figure {
    display: flex;
    flex-direction: column;
    align-items: center;     /* 画像・料理名センター */
    justify-content: center;
    gap: 0.5rem;
  }

  /* 画像の最大幅を控えめに（狭い列でも収まるように） */
  .meal-figure img {
    width: 100%;
    max-width: clamp(220px, 28vw, 340px);  /* ←最小/可変/最大。更に狭めたい時は数値を下げる */
    height: auto;
    border-radius: 10px 0 10px 0;
    display: block;
  }

  .meal-title {
    font-size: 1rem;
    font-weight: normal;     /* ボールドにしない */
    text-align: center;      /* センター */
    margin: 0;
  }

  /* --- 料金／解説：間隔と見た目調整 --- */
  .col-meta .meta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;             /* 料金と解説の間隔を“少し”確保 */
  }

  .col-meta .meal-price {
    font-size: 1.18em;       /* 料金を“少し大きく” */
    font-weight: normal;     /* 太字にしない */
    text-align: left;        /* 左寄せ */
    margin: 0;
    line-height: 1.4;
  }

  .col-meta .meal-desc {
    margin: 0;               /* gapで間隔管理 */
    line-height: 1.6;
    text-align: left;
  }
}

/* ===== 最終オーバーライド：PC(>=768px) で列幅を強制 ===== */
@media screen and (min-width: 768px) {

  /* テーブル全体設定 */
  .menu-table {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .menu-table thead { display: table-header-group; }
  .menu-table tbody { display: table-row-group; }
  .menu-table tr { display: table-row; }

  /* 記号列：2文字分 */
  .menu-table th:nth-child(1),
  .menu-table td.col-symbol {
    width: 2.4em;          /* ほぼ全角2文字ぶん */
    white-space: nowrap;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
  }

  /* ★ 写真セル：常に全体の40％幅 */
  .menu-table th:nth-child(2),
  .menu-table td.col-meal {
    width: 40%;
  }

  /* 料金／解説セル：残りを自動配分 */
  .menu-table th:nth-child(3),
  .menu-table td.col-meta {
    width: auto;
  }

  /* 料理セル（写真＋料理名）縦並びセンター配置 */
  .col-meal .meal-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  /* ★ 画像は幅100%、ただし最大400pxで制限 */
  .meal-figure img {
    width: 100%;
    max-width: 400px;      /* ←ここで制限 */
    height: auto;
    border-radius: 10px 0 10px 0;
    display: block;
  }

  /* 料理名 */
  .meal-title {
    font-size: 1rem;
    font-weight: normal;   /* ボールド解除 */
    text-align: center;
    margin: 0;
  }

  /* 料金／解説 */
  .col-meta .meta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;           /* 料金と説明の間隔 */
  }

  .col-meta .meal-price {
    font-size: 1.18em;     /* やや大きめ */
    font-weight: normal;   /* ノーマル */
    text-align: left;      /* 左寄せ */
    line-height: 1.4;
    margin: 0;
  }

  .col-meta .meal-desc {
    margin: 0;
    line-height: 1.6;
    text-align: left;
  }

  /* スマホ用ラベルを無効化 */
  .menu-table td::before { content: none !important; }
}

/* ===== スマホ版（640px以下）調整 ===== */
@media screen and (max-width: 640px) {

  /* 写真と料理名の間隔を少し開ける */
  .col-meal .meal-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem; /* 写真と料理名の縦間隔 */
  }

  /* 料理名フォントを少しだけ大きく（自然な強調） */
  .meal-title {
    font-size: 1.05rem;   /* ← 控えめなサイズアップ */
    font-weight: normal;
    text-align: center;
  }

  /* 記号フォントも同様に少し大きく、左寄せに */
  .menu-table td.col-symbol {
    font-size: 1em; 
    font-weight: normal;
    text-align: left;     /* ← ★ 左寄せに変更 */
    padding-left: 8px;    /* ← 少し余白を入れて整える */
  }
}

/* ===== スマホ版（640px以下）で .list-half 内の text と image の間隔を広げる ===== */
@media screen and (max-width: 640px) {

  /* list-half 内の要素を縦並びにしたときの間隔 */
  .list-half {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;  /* ← ★ここで上下の間隔を調整（デフォルト約0.5～0.8rem程度なら1.2remが自然） */
  }

  /* 念のため個別の余白も調整（上詰まり防止） */
  .list-half .text,
  .list-half .image {
    margin-bottom: 0;      /* 二重余白を防ぐ */
  }

  /* 下に少しだけスペースを確保（見た目の呼吸感） */
  .list-half .image {
    margin-top: 0.8rem;    /* ← ここでも少し空けるとさらに自然 */
  }
}

/* ===== figcaptionの料金表示をメニューテーブルと同じスタイルに ===== */
figcaption {
  font-size: 1.18em;
  font-weight: normal;
  color: #333;
  text-align: left;
  margin-top: 0.5em;
  line-height: 1.4;
}
figcaption .nowrap-price {
  font-size: 1em; /* ← 「料金」文字より金額だけほんの少し小さく */
}

/* ===== スマホ版（640px以下）で料金(.meal-price)を左寄せに ===== */
@media screen and (max-width: 640px) {
  .menu-table .meal-price {
    text-align: left !important;   /* ← 左寄せに固定 */
    display: block;                /* ← ブロック表示で安定 */
    margin-left: 0;                /* ← 左端に寄せる */
    margin-top: 0.3em;             /* ← 上に少しスペースをとると見やすい */
  }
}

/* PC（769px以上）では改行を無効化 */
@media screen and (min-width: 769px) {
  br.sp-only {
    display: none;  /* 改行しない */
  }
}

/* 768px以下では改行を有効に */
@media screen and (max-width: 768px) {
  br.sp-only {
    display: inline;  /* 通常の改行として表示 */
  }
}

/* ===== 特別メニューのテーブル：スマホ版のみ料理名下に1pxライン ===== */
/* 768px以下だけ、料理名直下にライン */
/* ===== スマホ（640px以下）のみ料理名下に1pxライン ===== */
@media screen and (max-width: 640px) {
  .menu-table .col-meal .meal-title {
    display: block;              /* 幅を確保 */
    width: 100%;
    border-bottom: 1px solid #ccc;  /* ★ 料理名の直下にライン */
    padding-bottom: 6px;         /* 文字と線の間隔 */
    margin-bottom: 8px;          /* 線と次要素の間隔 */
    text-align: center;          /* 料理名は中央揃え */
  }
}

/* =======================================================
   ドリンク用の .ta-meal1 「だけ」に右寄せを適用
   （= .menu-table と併用されている表には適用しない）
   ======================================================= */

/* PC/スマホ共通：金額セル右寄せ */
table.ta-meal1:not(.menu-table) td {
  text-align: right !important;
}
table.ta-meal1:not(.menu-table) .nowrap-price {
  display: inline-block;
  text-align: right;
  min-width: 4em; /* 桁揃え（任意） */
}

/* スマホ安定化（右端のはみ出し対策） */
@media (max-width: 768px) {
  /* セルに十分な内側余白 + フレックスで右寄せ */
  table.ta-meal1:not(.menu-table) tr > td {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 12px !important;
    padding-left: 10px !important;
    box-sizing: border-box;
    text-align: initial; /* flex に委ねる */
  }
  table.ta-meal1:not(.menu-table) .nowrap-price {
    display: inline-block;
    flex: 0 0 auto;
    max-width: 100%;
  }
}

/* ===== ドリンク2テーブル横並び（PC）→ 縦並び（SP） ===== */
.drinks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* PC: 2カラム */
  gap: 24px;                        /* テーブル間の余白 */
  align-items: start;               /* キャプション高さが違っても上揃え */
  margin-bottom: 2rem;
}

/* テーブル幅のはみ出し防止＆見出し/セルの折返し調整 */
.drinks-grid .ta-meal1 {
  width: 100%;
  table-layout: fixed;              /* セル幅を安定させる */
  margin: 0;                        /* 余白が重複しないように */
}
.drinks-grid .ta-meal1 th,
.drinks-grid .ta-meal1 td {
  word-break: break-word;           /* 長い品名の折返し */
}

/* 768px以下は1カラムに */
@media (max-width: 768px) {
  .drinks-grid {
    grid-template-columns: 1fr;     /* 縦並び */
    gap: 16px;
  }
}

/* キャプションを左寄せ＆統一感（既存と同じなら不要） */
.drinks-grid .ta-meal1 caption {
  text-align: left;
  margin-bottom: .6rem;
}

/* PC表示時：list-half の画像とテキストの間隔を縮める */
@media screen and (min-width: 769px) {
  .list-half {
    display: flex;
    align-items: flex-start;
    gap: 12px; /* ← 写真とテキストの間隔を調整（お好みで 8px などに変更可能） */
  }
}