/* ======================================================
 * tab07-responsive.css
 * 【役割】レスポンシブ対応 (Media Queries @media 768px/480px)
 * 【役割】各端末（タブレット・スマホ）におけるレイアウト最適化
 * ------------------------------------------------------
 * ・タブナビゲーションの2カラムグリッド化
 * ・多連価格表示（.flex-group）の表示崩れ防止と1列・2列制御
 * ・PC2カラムからモバイル1カラム（縦並び）へのレイアウト変換
 * ・各種案内ボックス、注文バナー、外部ボタンのレスポンシブ調整
 * ・各マージン・パディング・文字サイズの間隔最適化
 * ====================================================== */

@media (max-width: 768px) {
  /* タブ・基本レイアウト */
  .tab-group { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    border-bottom: 0; 
    
    /* 💡スマホ・タブレット環境でも吸着固定（Sticky）を完全に維持 */
    position: -webkit-sticky;    /* Safari対応 */
    position: sticky;
    top: 60px;                   /* スマホ用固定ヘッダーの高さいっぱいに合わせてジャストフィット補正 */
    z-index: 10001 !important;   /* ヘッダー前面を確実に維持しつつ下層の突き抜けを徹底防御 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  .tab-item { 
    font-size: 13px;             /* ★元の 14px から 13px に縮小してスマート化 */
    padding: 8px 5px;            /* ★元の縦 12px から 8px に縮小し、タブの厚みを薄く調整 */
    border: 1px solid var(--border-color-light); 
    background: #ffffff;         /* グリッドセル内の文字重なりを防ぐ不透明白 */
  }
  
  /* 💡スマホ環境でのアクティブ時ベタ塗り・枠線連動の最適化 */
  .tab-item.is-active {
    color: #ffffff !important;
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important; /* セル外枠もブランド色に同化させて境界線を綺麗に整える */
  }
  
  .tab-item.is-active::after { 
    bottom: 0; 
    height: 3px;               /* スマホの画面サイズ比率に合わせて下線の太さを3pxに微調整 */
  }
  
  .br-pc { display: none; }

  /* ドリンクヒーロー */
  .drink-hero-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 8px;
    margin-bottom: 20px;
  }
  .drink-hero-grid img:first-child {
    grid-column: span 2; 
    aspect-ratio: 21 / 9;
  }
  .drink-hero-grid img:not(:first-child) {
    aspect-ratio: 1 / 1;
  }

  /* カードヘッダー・タイトル */
  .menu-item-header { 
    padding: 15px; 
    gap: 10px;
    flex-direction: column !important; /* food-section由来の縦強制を統合 */
    align-items: center; /* tab-sectionの中央揃えデザインを活かしつつ破тятを防ぐ */
  }
  .menu-item-title { 
    font-size: 19px; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    gap: 8px;
  }
  .room-badge { margin-right: 0; }

  /* 単一価格フォント固定 */
  .menu-price-container:not(.flex-group) .menu-price-value { font-size: 26px !important; }
  .menu-price-container:not(.flex-group) .menu-price-unit { font-size: 14px !important; }

  /* 多連価格表示（.flex-group）のタブレット・スマホ横向き設定(481px〜768px) */
  .menu-price-container.flex-group { 
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-around !important;
    align-items: baseline !important;
    gap: 16px 0 !important; 
    width: 100% !important;
    max-width: 440px !important; 
    margin: 0 auto !important;
  }

  .price-pair {
    display: inline-flex !important;
    align-items: baseline !important;
    white-space: nowrap !important;
    justify-content: center !important;
    flex: 0 1 45% !important;
    box-sizing: border-box !important;
    padding: 0 5px !important;
    position: relative !important;
    border: none !important;
  }
  
  .menu-price-container.flex-group .price-pair { font-size: 25px !important; }
  .price-pair::after, .price-pair:not(:last-child)::after { display: none !important; content: "" !important; }
  .menu-price-container.flex-group .price-pair:nth-child(even) { border-left: 1px solid rgba(197, 160, 89, 0.4) !important; }

  .price-pair .menu-price-value { font-size: 1em !important; }  
  .price-pair .menu-price-unit { font-size: 0.55em !important; }
  .price-pair .menu-price-label { font-size: 0.6em !important; }
  .price-pair .menu-price-tax { font-size: 0.35em !important; }

  /* レイアウト変換 (1カラム縦並び化) */
  .menu-item-body, .menu-item-body.reverse, .menu-item-body.is-single-center { 
    flex-direction: column !important; 
    display: flex !important;
    gap: 20px; 
    padding: 15px; 
  }
  .menu-item-img, .menu-item-body.is-single-center .menu-item-img { flex: 0 0 100%; max-width: 100%; }
  .menu-grid { grid-template-columns: 1fr !important; gap: 20px; }
  .room-grid-triple { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* 詳細リスト・テーブル */
  .menu-details li { flex-direction: column; gap: 5px; padding: 12px 0; }
  .menu-details li span.chapter { width: 100%; font-size: 12px; }
  .menu-details:last-of-type {
    margin-bottom: 20px !important; 
    display: block !important;
    overflow: hidden !important; 
    clear: both !important;
  }
  .menu-details--wide li { justify-content: flex-start; }
  .menu-details--wide li span.chapter { width: 100%; margin-bottom: 4px; margin-right: 0; font-size: 16px; }

  /* テキスト・価格ボックス調整 */
  .course-main-title { font-size: 15px; }
  .menu-title, .dish-name { font-size: 14px; }
  .menu-price-list .price-num { font-size: 20px; }
  .copyright-tag { font-size: 13px; right: 5px; bottom: 5px; }
  .note-red { font-size: 0.65em; padding: 1px 6px; }

  .room-price-box {
    padding: 20px 15px;
    margin: 10px auto 25px !important;
    width: 95% !important;
    max-width: 420px;
  }
  .room-price-item .num { font-size: 22px; }
  .room-price-item .label { font-size: 15px; }

  /* 案内・注文ボックス・導入文ブロック */
  .rest-important-note--guide { 
    display: block !important;
    float: none !important;
    clear: both !important; 
    align-items: center; 
    padding: 25px 15px; 
    text-align: center; 
    margin: 30px auto 20px !important;
    width: 100% !important;
    box-sizing: border-box;
    position: relative !important;
    z-index: 1;
  }
  .rest-important-note--guide .menu-item-note { font-size: 16px; }

  .bento-intro-block, .shidashi-intro-block { margin: 50px auto 30px; padding: 20px 15px; }
  .bento-intro-block::before, .shidashi-intro-block::before { top: -25px; }
  .bento-title, .shidashi-title { font-size: 18px; margin-bottom: 10px; }
  .bento-description, .shidashi-description { font-size: 14px; line-height: 1.6; text-align: left; }

  /* スマート注文BOX */
  .shidashi-quick-order-box {
    width: 100%;
    padding: 15px;
    margin: 15px auto;
  }
  .quick-order-content {
    flex-direction: column;       
    gap: 12px;
    text-align: center;
  }
  .quick-order-qr {
    width: 90px;
  }
  .shidashi-quick-order-box .shidashi-order-btn {
    width: 100% !important;
    padding: 14px !important;      
  }

  /* 導線ボタン・PDFバナー */
  .shidashi-order-banner { padding: 20px !important; }
  .shidashi-order-btn { width: 100% !important; padding: 14px !important; }
  .shidashi-order-linkwrap { text-align: center; width: 100%; }
  .shidashi-shop-info-flex { justify-content: center; text-align: center; gap: 15px; }
  .btn-external { display: flex; width: 100%; justify-content: center; padding: 12px; box-sizing: border-box; }
  .reservation-btn-group { flex-direction: column; width: 100%; }
  .insta-btn { max-width: 100%; }
  .plan-banner { margin: 25px auto; }
  .menu-details-target { padding: 0 10px; }

  .pdf-banner-container { grid-template-columns: 1fr; gap: 30px; padding: 0 20px; }
  .pdf-banner-title { font-size: 16px; margin-bottom: 10px; }
  .pdf-banner-note { font-size: 12px; }

  .menu-price-container.v-group .price-pair {
    font-size: 24px !important;
  }
}

/* --------------------------------------------------
   【ピンポイント制御】480px以下：完全1列（縦並び）へ強制切替
   -------------------------------------------------- */
@media screen and (max-width: 480px) {
  .menu-price-container.flex-group {
    flex-direction: column !important;
    align-items: center !important;
    max-width: 280px !important; 
    gap: 0 !important;
  }
  
  .menu-price-container.flex-group .price-pair,
  .menu-price-container.flex-group .price-pair:nth-child(even) {
    flex: 0 0 auto !important;
    width: 100% !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px dotted rgba(197, 160, 89, 0.3) !important;
    padding: 10px 0 !important;
    justify-content: center !important;
    font-size: 25px !important; 
  }
  
  .menu-price-container.flex-group .price-pair:last-child {
    border-bottom: none !important;
  }

  .menu-price-container.v-group .price-pair {
    font-size: 25px !important;
    padding: 10px 0 !important;
  }
}

/* 💡【追加】休業お知らせブロックがタブレット・スマホで白背景になるバグを修正 */
.shop-info-content.shop-info-notice,
.shop-info-content,
.shidashi-intro-block,
.bento-intro-block {
  background-color: var(--color-bg-note) !important; /* 全画面幅（特に768px以下）でも強制的に和紙色を維持 */
}

/* ======================================================
   特定ブロック：タブレット・スマホ時の中央配置最適化
   ====================================================== */
@media (max-width: 768px) {
  /* 親コンテナをフレックス配置にして、子要素をすべて中央に集める */
  .menu-item-info.is-insta-centered {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* 導入文テキストを確実に中央揃えにする */
  .menu-item-info.is-insta-centered .menu-item-desc {
    text-align: center !important;
    width: 100%;
  }

  /* Instagramボタンが横いっぱいに広がりすぎず、文字幅で中央に座るように制御 */
  .menu-item-info.is-insta-centered .insta-btn {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: max-content !important;
    display: inline-flex !important;
  }

  /* お品書きリスト自体をブロック中央に寄せつつ、リスト内のテキストは左揃えを維持 */
  .menu-item-info.is-insta-centered .menu-details {
    display: inline-block !important; /* 横幅をコンテンツに合わせる */
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;      /* リスト内のテキストの左揃えを守る */
    max-width: 100%;
  }

  /* リスト内の各行の配置ズレをリセット */
  .menu-item-info.is-insta-centered .menu-details li {
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important; /* tab07の縦並び化をこのブロックだけ打ち消して横並びをキープ */
    gap: 8px !important;
  }
}