@charset "UTF-8";
/* 和華饗宴(旧 長崎卓袱料理 饗庭) — ブレークポイント定義
   撮影モード(?shoot)ではこのファイルが丸ごと無効化され、
   狭幅でもデスクトップのカラム比・文字組みが保たれる。詳細は shoot.js を参照 */

@media (max-width: 1000px) {
  .hd-in { flex-wrap: wrap; gap: 14px; padding: 16px 20px; }
  .nav { width: 100%; order: 3; margin-left: 0; }
  .nav ul { gap: 18px; flex-wrap: wrap; }
  .hero-ph img { height: 420px; }
  .hero-tate { right: 4%; padding: 28px 18px; }
  .tate { font-size: 18px; height: 300px; }
  .kv-info ul { grid-template-columns: 1fr; gap: 18px; padding: 22px 20px; }
  .sec { padding: 48px 20px; }
  .menu, .anniv { grid-template-columns: 1fr; gap: 30px; }
  .gal { grid-template-columns: 1fr; }
  .rooms { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .sec-t .jp { font-size: 21px; }
  .big { font-size: 21px; }
  .logo-main { font-size: 24px; }
  .menu-ph img, .anniv-ph img { height: 260px; }
  .info-tbl th { width: 92px; padding: 11px 12px; }
  .info-tbl td { padding: 11px 12px; }
}

@media (max-width: 1000px) {
  .hd-in { align-items: stretch; }
  .logo { flex: 0 0 auto; }
}

@media (max-width: 700px) {
  /* 縦書きの額は幅を圧迫するため、画像下の横組みに切り替える */
  .hero-ph img { height: 300px; }
  .hero-tate {
    position: static; transform: none; background: #fbf8f2;
    border: none; border-bottom: 1px solid #e0d8c8; padding: 24px 16px; text-align: center;
  }
  .tate {
    writing-mode: horizontal-tb; text-orientation: mixed;
    height: auto; font-size: 17px; letter-spacing: .14em; line-height: 2.1;
  }
  .hd-in { padding: 14px 16px; gap: 12px; }
  .logo-main { font-size: 22px; }
  .sec { padding-left: 16px; padding-right: 16px; }
  .btn { width: 100%; padding: 15px 20px; }
}