/*
  観光さん.com 後付けレスポンシブCSS（スマホ幅 768px 以下で1カラム化）
  元は幅1000pxの固定レイアウト（テーブル＋インラインstyle）なので、!important で上書きしている。
  三本線メニューは /assets/kankou-menu.js が #header-menu から自動生成する。
*/

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

/* 問い合わせ（Googleフォーム） */
.gform-wrap { text-align: center; }
.gform-wrap iframe { width: 100%; max-width: 760px; height: 1500px; border: 0; }

/* 三本線メニュー（PCでは非表示） */
#sp-nav { display: none; }

@media (max-width: 768px) {
  html, body { margin: 0; overflow-x: hidden; }
  #sp-nav-list { text-align: left; }

  /* 外枠・固定幅のクラスを解除 */
  .common-block-center, .left-box, .right-box, .ranking-box, .ranking-title,
  .spot-write, .update-write, .update-history-write, .photo-box, .ad-center {
    width: auto !important; max-width: 100% !important; float: none !important;
    margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box;
  }
  .common-block-center { padding: 0 8px; }

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

  /* ヘッダー・パンくず・フッターなど 1000px 固定の部品 */
  #header, #header-menu, #common-block-top, .common-footer, .common-footer-word, .common-menu {
    width: auto !important; max-width: 100% !important; box-sizing: border-box;
  }
  #common-block-top { text-align: left; }

  /* ページ内の固定幅をまとめて解除（CSSのクラス指定・インラインstyle・width属性のすべて）
     :where() で優先度を0にしているので、下の個別ルールが優先される。画像・地図・広告・フォーム枠は除外 */
  :where(.common-block-center *:not(img, iframe, ins, .leaflet-container, .leaflet-container *)) {
    width: auto !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box;
  }
  .common-block-center td, .common-block-center th, .common-block-center div, .common-block-center p {
    overflow-wrap: anywhere;
  }
  /* 写真は画面幅に合わせて縮める（width/height属性やクラスの固定サイズを上書き） */
  .common-block-center img:not(.leaflet-container img) { max-width: 100% !important; height: auto !important; }
  .common-block-center img[class*="matome"] { height: auto !important; }
  .spot-comment, .spot-matome-box, .spot-details, .spot-main-width-photo-box, .spot-main-height-photo-box,
  .spot-mini-width-photo-box, .spot-mini-height-photo-box { margin-left: 0 !important; margin-right: 0 !important; }

  /* 「トップへ戻る」ボタン */
  #page-top { right: 12px !important; bottom: 12px !important; }
  #page-top img { width: 44px; height: auto; }
  .common-block-center [style*="height:310px"],
  .common-block-center [style*="height:270px"] { height: auto !important; }
  .common-block-center [style*="padding-left:40px"] { padding-left: 0 !important; }

  /* 周辺の観光地のカードは2列 */
  .common-block-center div[style*="width:180px"][style*="float:left"] {
    width: calc(50% - 12px) !important; height: auto !important; box-sizing: border-box;
  }

  /* ヘッダー：画像メニューは隠して三本線メニューに */
  #header img { width: 100%; height: auto; }
  #header-menu { display: none !important; }
  #sp-nav { display: block; position: relative; margin: 4px 0 8px; }
  #sp-nav-btn {
    display: block; width: 100%; padding: 10px 12px; font-size: 16px; text-align: left;
    background: #333; color: #fff; border: 0; border-radius: 4px; cursor: pointer;
  }
  #sp-nav-list { display: none; list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid #ccc; }
  #sp-nav.open #sp-nav-list { display: block; }
  #sp-nav-list li { display: block; border-top: 1px solid #eee; }
  #sp-nav-list li:first-child { border-top: 0; }
  #sp-nav-list a { display: block; padding: 12px; color: #333; text-decoration: none; font-size: 15px; }

  /* 見出し・本文 */
  h1 { font-size: 18px; }
  .common-block-center div[style*="font-size:20pt"] { font-size: 18px !important; }
  .spot-comment, .list-comment { font-size: 15px; line-height: 1.7; }

  /* トップのスライド写真 */
  ul#photo-list { height: 62vw !important; }
  .top-photo { width: 100% !important; margin: 0 !important; }

  /* 観光地を探す：都道府県を横に並べる */
  .search-pref-font { display: inline-block !important; padding: 6px 8px; }
  .search-region-font { margin-top: 10px; }

  /* 地図 */
  #map_canvas { width: 100% !important; height: 65vh !important; float: none !important; }

  /* 画面に入らない固定サイズの広告ユニットは非表示（AdSense で認められている display:none） */
  ins.adsbygoogle[style*="width:728px"], ins.adsbygoogle[style*="width:468px"],
  ins.adsbygoogle[style*="width:160px"] { display: none !important; }

  /* フッター */
  .common-footer-word { line-height: 2; }

  /* 問い合わせフォーム */
  .gform-wrap iframe { height: 1700px; }
}