/*
  観光さん.com 用 後付けレスポンシブCSS（第一版）
  元の固定幅・テーブルレイアウトを、スマホ幅で1カラムに崩すための汎用ルール。
  実際のHTMLを見て、#wrap などのID名を合わせて調整してください。
*/

html { -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; }
iframe { max-width: 100%; }  /* iframe に height:auto を付けると 150px に縮むので付けない */
.gform-wrap { text-align: center; }
.gform-wrap iframe { width: 100%; max-width: 640px; height: 1300px; }

@media (max-width: 768px) {
  /* 固定幅を解除（ID/クラス名は実際のものに合わせて追加） */
  body, #wrap, #container, #header, #main, #contents, #content,
  #side, #sidebar, #footer, .wrap, .container {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body { padding: 0 8px; box-sizing: border-box; }
  *[width], *[style*="width"] { max-width: 100% !important; }

  /* レイアウト用テーブルを縦積みに */
  table { width: 100% !important; }
  table, tbody, tr, td, th { display: block; box-sizing: border-box; }
  td, th { width: 100% !important; }

  /* 詳細情報表（営業時間・料金など）は ラベル→値 の縦並びで読める */
  th, td:first-child { font-weight: bold; padding-top: 8px; }

  /* ヘッダー画像・メニュー画像 */
  img[src*="header_images"] { width: 100%; }
  img[src*="/images/menu/"] { width: 32%; }

  /* Googleフォーム */
  .gform-wrap iframe { width: 100%; height: 1400px; }
}