/* ============================================================
   PC 表示（2026-10）
   ------------------------------------------------------------
   スマホの見え方は変えない。すべて min-width の中にだけ書く。
   テーマ(style.css)の後に読み込む。

   幅の上限は 2 か所にある。
     1. 外枠 #site-box … HTML 側の inline style で 600px（!important が要る）
     2. テーマの section / #primary / .inner / #pankuzu ul … 750px
   本文の入れ物はページ種別で違う（記事=#main、一覧=#content）。

   方針
     ・枠は画面に合わせて広げ、文章は読める幅に収める
     ・写真が並ぶところは写真を拡大せず（元が 150px）、1 行の枚数を増やす
     ・PC ではハンバーガーを開かなくても主要導線に届くよう横並びナビを出す
     ・地図は画面の高さを使う
   ============================================================ */

/* ---------- タブレット ---------- */
@media screen and (min-width: 768px) {
  #site-box { max-width: 780px !important; }
  #primary.content-area,
  #site-box section { max-width: none; }
}

/* ---------- PC ---------- */
@media screen and (min-width: 1024px) {
  #site-box { max-width: 1040px !important; }

  /* --- 横並びナビ（ヘッダー直下、ヘッダーと一緒にスクロールで隠れる） --- */
  #pcnav {
    display: flex;
    position: absolute;
    top: 67px;
    left: 0;
    width: 100%;
    height: 40px;
    justify-content: center;
    align-items: center;
    gap: 0 28px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    font-size: 14px;
    letter-spacing: .04em; }
  #pcnav a {
    color: #333;
    text-decoration: none;
    padding: 4px 2px;
    border-bottom: 2px solid transparent; }
  #pcnav a:hover,
  #pcnav a.current { border-bottom-color: #e16980; color: #000; }
  #pcnav a [class*="icon-"] { margin-right: 4px; }
  #content.site-content { margin-top: 125px !important; }

  /* --- 横幅を枠に揃える --- */
  #pankuzu { padding-left: 0; padding-right: 0; margin-top: 20px; }
  #pankuzu ul,
  #site-box .inner { max-width: none; }
  #site-box .btn.wide { width: 100%; margin-left: 0; }
  #site-box .shareButton { margin-left: 0; }
  #site-box .shareArea { margin-left: -10px; margin-right: -10px; }
  #pageTop { width: 100%; }

  /* --- 文章は読める幅で止める（記事・スポット本文） --- */
  /* 直下の要素はすべて同じ列幅に揃える（figure / div / center に入った画像も含む）。
     横いっぱいに使う部品（section、タイル、ジャンル、広告）だけ除く */
  body.single #main > :not(section):not(.rowMagazine):not(.grid-2):not(script):not(ins):not(.boxBorder) {
    max-width: 860px;
    /* 古い記事は本文全体を <div style="margin-left:2px;margin-right:2px"> で包んでおり、
       インライン指定が勝つので横の余白だけ強制する */
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important; }
  body.single #main > span[style*="font-size:small"] { display: block; }
  body.single #main figure { margin-left: auto; margin-right: auto; }
  body.single #main figure img,
  body.single #main > div img:not([width="32%"]) { display: block; margin-left: auto; margin-right: auto; }

  /* 記事の写真は元が 640px 前後。引き伸ばさず中央に置く */
  body.single #main img:not([width="32%"]):not(.wp-post-image) {
    max-width: 700px;
    height: auto; }
  body.single #main > center img:not([width="32%"]),
  body.single #main > p img:not([width="32%"]),
  body.single #main > div:not(.rowMagazine) img:not([width="32%"]) {
    display: block;
    margin-left: auto;
    margin-right: auto; }
  /* スポットの基本情報は箱にまとめる */
  body.single #main > h2[style*="font-size:medium"] {
    max-width: 860px;
    margin: 20px auto 0; }
  body.single #main > h2[style*="font-size:medium"] ~ span[style*="font-size:small"] {
    display: inline; }

  /* --- 写真だけが並ぶところ --- */
  .grid-3.rowPhoto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px; }
  .grid-3.rowPhoto > .col { flex-basis: auto; max-width: none; padding: 0; }
  .grid-3.rowPhoto > .col img { width: 100%; }
  .grid-3.rowPhoto > *:nth-child(n+4) { margin-top: 0; }
  /* 32% 幅 + 3 枚ごとの <BR> で 3 列固定になっている写真一覧 */
  #site-box img[width="32%"] { width: 150px; height: 150px; object-fit: cover; }
  #site-box a:has(> img[width="32%"]) { display: inline-block; margin: 2px; line-height: 0; }
  #site-box a:has(> img[width="32%"]) + br:has(+ a > img[width="32%"]) { display: none; }
  #site-box a:has(> img[width="32%"]) + br + br:has(+ a > img[width="32%"]) { display: none; }

  /* --- 画像と文字が組になったリンクのタイル(.rowMagazine) --- */
  #site-box .rowMagazine:not(:has(> a + a)) {
    display: inline-block;
    width: calc(50% - 8px);
    margin: 0 1px 8px;
    vertical-align: top; }
  body.single #main .rowMagazine:not(:has(> a + a)) {
    display: block;
    width: auto;
    margin: 0 0 8px; }
  #site-box .rowMagazine:has(> a + a) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: 1fr;
    gap: 8px; }
  #site-box .rowMagazine:has(> a + a) > a { height: 100%; min-height: 96px; }
  #site-box .rowMagazine .col-3 img,
  #site-box .rowMagazine .col-5 img { display: block; width: 100%; object-fit: cover; }
  #site-box .rowMagazine:has(> a + a) .col-3 img,
  #site-box .rowMagazine:has(> a + a) .col-5 img { height: 100%; }
  #site-box .rowMagazine:not(:has(> a + a)) .col-3 img { height: 140px; }
  #site-box .rowMagazine:not(:has(> a + a)) .col-9 {
    box-sizing: border-box;
    height: 140px;
    overflow: hidden; }

  /* --- 表 ---
     ・都道府県一覧(/pref/) … 1 件 1 表 → 2 列に詰める
     ・マップ一覧(/maplist/) … 1 表 2 列組み(td に width) → 枠いっぱい */
  #site-box article > table:not(:has(td[width])) {
    display: inline-table;
    width: calc(50% - 6px);
    vertical-align: top; }
  #site-box article > table:has(td[width]) { width: 100%; }
  #site-box article > table:has(td[width]) td[width] { height: 120px; background-size: cover; background-position: center; }

  /* 幅 100% 指定のバナー画像は元が 730px 前後。枠いっぱいに伸ばさない */
  #site-box a > img[width="100%"],
  #site-box center > img[width="100%"],
  #site-box p > img[width="100%"] { max-width: 820px; height: auto; }
  #site-box .mainVisual { max-width: 900px; margin-left: auto; margin-right: auto; }

  /* --- 地図ページ：画面の高さを使う --- */
  #map { height: 600px !important; width: 100% !important; }
  #placedetail table { max-width: 900px; margin-left: auto; margin-right: auto; }
  #placedetail img { max-height: 220px !important; }

  /* --- 小さすぎる文字を上げる --- */
  [style*="font-size:xx-small"], [style*="font-size: xx-small"] { font-size: 12px !important; }
  [style*="font-size:x-small"], [style*="font-size: x-small"] { font-size: 13px !important; }
  [style*="font-size:small"], [style*="font-size: small"] { font-size: 15px !important; }
  [style*="font-size:65%"] { font-size: 90% !important; }
  #pankuzu { font-size: 90%; }
  .btn.fontSmall { font-size: 85%; }

  /* ジャンルのタイルは 2 列だと 1 枚が大きすぎる */
  .grid-2.rowGenre > .col { flex-basis: 25%; max-width: 25%; }
  /* 地域ボタンは 6 列 */
  .grid-4.rowBtn > .col { flex-basis: 16.666%; max-width: 16.666%; }

  /* フォームは幅を抑えて中央に */
  #site-box .snaplace-form { max-width: 760px; margin-left: auto; margin-right: auto; }
  #site-box .search-form .search-field { width: 420px; }
}

/* ---------- ワイド ---------- */
@media screen and (min-width: 1400px) {
  #site-box { max-width: 1200px !important; }
  body:not(.single) #site-box .rowMagazine:not(:has(> a + a)) { width: calc(33.333% - 10px); }
  #site-box article > table:not(:has(td[width])) { width: calc(33.333% - 8px); }
  #map { height: 680px !important; }
}

/* ---------- 全画面共通の微修正 ----------
   記事の見出しは <div style="background-color:#444444;color:white"><h2>…</h2></div> の
   黒帯に入っているが、テーマの h2/h3 は下側だけに 20〜40px の余白があり、
   帯の中で文字が上に寄っていた。帯の中では上下対称にする。 */
#main [style*="background-color"] > h2,
#main [style*="background-color"] > h3,
#main [style*="background-color"] > h4,
#main [style*="background-color"] > h5 {
  padding: 10px 12px;
  margin: 0;
  line-height: 1.4; }

/* ---------- スマホ：PC ナビは出さない ---------- */
@media screen and (max-width: 1023px) {
  #pcnav { display: none; }
}