/* Japan Eat Guide components. Every value comes from tokens.css.
   Load Noto Sans JP and Shippori Mincho B1 from Google Fonts (see README). */

.jeg-root{margin:0;background:var(--surface-100);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:28px;letter-spacing:.02em;-webkit-text-size-adjust:100%}
.jeg-root *,.jeg-root *::before,.jeg-root *::after{box-sizing:border-box}
.jeg-root :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.jeg-root :where(h1,h2,h3,p,ul,dl,dd){margin:0;padding:0} /* :where() zeroes this reset's specificity so any later single-class component rule (e.g. .jeg-hero__lead) can override its margin -- a plain ".jeg-root p{...}" selector would otherwise always win on specificity regardless of source order, silently cancelling every such margin (confirmed: this was the real cause of the hero spacing not changing despite repeated edits) */
.jeg-root ul{list-style:none}
.jeg-wrap{max-width:var(--container);margin:0 auto;padding:0 var(--space-5)}

/* links and buttons */
.jeg-link{color:var(--brand-strong);font:700 14px/20px var(--font-sans);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer}
.jeg-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-md);padding:0 var(--space-5);border:1px solid transparent;border-radius:var(--radius-md);font:700 16px/1 var(--font-sans);letter-spacing:.04em;cursor:pointer;text-decoration:none}
.jeg-btn--lg{min-height:var(--control-lg)}
.jeg-btn--primary{background:var(--brand);color:var(--on-brand)}
.jeg-btn--primary:hover{background:var(--brand-strong)}
.jeg-btn--ghost{background:var(--surface-200);color:var(--ink);border-color:var(--line-strong)}
.jeg-btn--ghost:hover{background:var(--surface-300)}

/* header */
.jeg-header{background:var(--surface-200);border-bottom:1px solid var(--line)}
.jeg-header__bar{display:flex;align-items:center;gap:var(--space-4);min-height:68px;max-width:var(--container);margin:0 auto;padding:0 var(--space-5)}
.jeg-logo{display:inline-flex;align-items:baseline;gap:var(--space-2);color:var(--ink);text-decoration:none;font-weight:700;white-space:nowrap}
.jeg-logo__kanji{font-family:var(--font-display);font-size:30px;line-height:1;color:var(--brand)}
.jeg-logo__latin{font-size:15px;letter-spacing:.14em}
.jeg-nav{display:flex;align-items:center;gap:2px;flex:1;margin-left:var(--space-4)}
.jeg-nav details{position:relative}
.jeg-nav summary{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-md);padding:0 var(--space-3);border-radius:var(--radius-md);font-weight:700;cursor:pointer;list-style:none}
.jeg-nav summary::-webkit-details-marker{display:none}
.jeg-nav summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.jeg-nav summary:hover,.jeg-nav details[open] summary{background:var(--surface-300)}
.jeg-nav__panel{position:absolute;top:calc(100% + 6px);left:0;z-index:10;width:340px;padding:var(--space-3);background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop)}
.jeg-nav__links{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.jeg-nav__links a{display:flex;align-items:center;min-height:var(--control-md);padding:0 var(--space-3);border-radius:var(--radius-sm);color:var(--ink);text-decoration:none;font-weight:500}
.jeg-nav__links a:hover{background:var(--surface-300)}
.jeg-nav__all{display:block;margin-top:var(--space-2);padding:var(--space-3);border-top:1px solid var(--line);color:var(--brand-strong);font-weight:700;text-decoration:none}
.jeg-header__tools{display:flex;align-items:center;gap:var(--space-3)}
.jeg-seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--radius-pill);overflow:hidden;background:var(--surface-200)}
.jeg-seg button,.jeg-seg a{min-height:40px;min-width:48px;padding:0 var(--space-3);border:0;background:transparent;color:var(--ink);font:700 14px/1 var(--font-sans);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.jeg-seg button[aria-pressed="true"],.jeg-seg a[aria-current="true"]{background:var(--ink);color:var(--surface-100)}

/* mobile nav toggle + drawer (760px以下専用、Header README参照)。details/summaryのみで
   実装し、JSは「他のdetailsを閉じる」排他制御の最小限のみ（デスクトップのjeg-navと同じ
   スクリプトを流用できる）。 */
.jeg-mobile-nav{display:none}
@media (max-width:760px){
  .jeg-mobile-nav{display:block;position:relative}
}
.jeg-mobile-nav>summary{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-md);padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface-200);color:var(--ink);font:700 13px/1 var(--font-sans);cursor:pointer;list-style:none}
.jeg-mobile-nav>summary::-webkit-details-marker{display:none}
.jeg-mobile-nav__icon{position:relative;display:block;width:18px;height:12px;flex-shrink:0}
.jeg-mobile-nav__icon::before,.jeg-mobile-nav__icon span,.jeg-mobile-nav__icon::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);transition:transform .14s ease,opacity .14s ease}
.jeg-mobile-nav__icon::before{top:0}
.jeg-mobile-nav__icon span{top:5px;display:block}
.jeg-mobile-nav__icon::after{top:10px}
.jeg-mobile-nav[open]>summary .jeg-mobile-nav__icon::before{transform:translateY(5px) rotate(45deg)}
.jeg-mobile-nav[open]>summary .jeg-mobile-nav__icon span{opacity:0}
.jeg-mobile-nav[open]>summary .jeg-mobile-nav__icon::after{transform:translateY(-5px) rotate(-45deg)}
.jeg-mobile-nav__panel{display:none}
.jeg-mobile-nav[open] .jeg-mobile-nav__panel{display:block;position:fixed;left:0;right:0;top:68px;bottom:0;z-index:40;background:var(--surface-100);overflow-y:auto;padding:var(--space-5);box-shadow:var(--shadow-pop)}
.jeg-mobile-nav__panel details{border-bottom:1px solid var(--line)}
.jeg-mobile-nav__panel>details>summary{display:flex;align-items:center;justify-content:space-between;min-height:var(--control-lg);font:700 16px/1 var(--font-sans);color:var(--ink);cursor:pointer;list-style:none}
.jeg-mobile-nav__panel>details>summary::-webkit-details-marker{display:none}
.jeg-mobile-nav__panel>details>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .14s ease}
.jeg-mobile-nav__panel>details[open]>summary::after{transform:rotate(225deg)}
.jeg-mobile-nav__panel .jeg-nav__panel{position:static;width:auto;padding:0 0 var(--space-3);border:0;box-shadow:none}
.jeg-mobile-nav__panel .jeg-nav__links{grid-template-columns:1fr}

/* search */
/* 2026-10-25（心さんフィードバック、/restaurants/の検索フォームで
   エリア・料理ジャンルのプルダウンが狭く文字が途中で切れる）: 1fr単体
   だと画面幅によっては各フィールドがかなり狭くなりうる。minmax()で
   最低幅を保証しつつ、広い画面では引き続き比率で伸びるようにする。
   2026-10-25追記（龍さんの実測指摘、最初の170pxでは不十分だった）:
   原因は内在幅の突破ではなく単純な算数だった -- 「すべてのジャンル」
   （8文字×約16px）＋左右padding(space-4×2=32px)＋ブラウザ既定の矢印
   （約20px）で約180-190px必要なのに170pxしか確保していなかった。
   200pxに余裕を持たせて210pxに修正。 */
.jeg-search{display:grid;grid-template-columns:minmax(200px,2fr) minmax(210px,1fr) minmax(210px,1fr) auto;gap:var(--space-3);align-items:end;padding:var(--space-4);background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.jeg-field{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.jeg-field label{font:700 13px/20px var(--font-sans);color:var(--ink-muted)}
/* min-width:0 は2026-10-25追加: 単独では文字切れを直さない（列自体が
   狭すぎたことが実際の原因、上のminmax値で対応済み）が、select特有の
   内在幅がグリッドの縮小を妨げる一般的なケースの保険として残す。
   料理ジャンルのプルダウンは "South Asian & Middle
   Eastern" のような長いoptionを持つため、エリア（短いoption）は収まる
   のに料理ジャンルだけ親のminmax(170px,1fr)列を突き破って広がり、
   結果的に表示テキストが切れて見えていた。 */
.jeg-input{width:100%;min-width:0;min-height:var(--control-lg);padding:0 var(--space-4);border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface-100);color:var(--ink);font:400 16px/1 var(--font-sans)}
.jeg-input::placeholder{color:var(--ink-muted)}
.jeg-quick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin-top:var(--space-3);font-size:14px;line-height:22px;color:var(--ink-muted)}
.jeg-quick a{display:inline-flex;align-items:center;min-height:var(--control-md);color:var(--brand-strong);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* chips and tags */
.jeg-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.jeg-chip{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-md);padding:0 var(--space-4);border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface-200);color:var(--ink);font:700 14px/1 var(--font-sans);cursor:pointer}
.jeg-chip:hover{background:var(--surface-300)}
.jeg-chip[aria-pressed="true"],.jeg-chip[aria-current="true"]{background:var(--brand-tint);border-color:var(--brand-strong);color:var(--brand-strong)}
.jeg-chip[aria-pressed="true"]::before{content:"\2713"}
.jeg-chip__n{font-weight:500;font-size:13px;color:var(--ink-muted)}
.jeg-chip[aria-pressed="true"] .jeg-chip__n,.jeg-chip[aria-current="true"] .jeg-chip__n{color:var(--brand-strong)}
.jeg-group-label{margin-bottom:var(--space-2);font:700 14px/20px var(--font-sans);color:var(--ink-muted)}
.jeg-tag{display:inline-flex;align-items:center;gap:var(--space-2);min-height:36px;padding:0 var(--space-2) 0 var(--space-3);border-radius:var(--radius-pill);background:var(--ink);color:var(--surface-100);font:700 13px/1 var(--font-sans)}
.jeg-tag button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:var(--radius-pill);background:transparent;color:inherit;font:700 16px/1 var(--font-sans);cursor:pointer}

/* badges */
/* 2026-10-25（龍さんround5/round6指摘3）: .jeg-hcard内で価格/エリア/
   営業時間のバッジ行が店名より約24pxインデントして見える問題。round5の
   .jeg-badges{padding:0}単体（specificity 0,1,0）では、SWELLの
   `.post_content ul{padding-left:...}`（0,2,0、the_content出力を囲む
   SWELL側のクラス）の方が詳細度で勝ち、実際には上書きできていなかった
   （staging実測: computed padding-left が24pxのまま）。詳細度を
   明示的に上げて確実に勝たせる。 */
.jeg-badges,.jeg-root .jeg-badges,.post_content .jeg-badges,.jeg-hcard .jeg-badges{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-2);margin:0;padding:0;list-style:none}
.jeg-badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);border:1px solid currentColor;border-radius:var(--radius-sm);font:700 13px/20px var(--font-sans);letter-spacing:.02em;white-space:nowrap}
.jeg-badge--info{background:var(--info-tint);color:var(--info)}
.jeg-badge--accent{background:var(--accent-tint);color:var(--accent)}
.jeg-badge--warn{background:var(--warn-tint);color:var(--warn)}
.jeg-badge--plain{background:var(--surface-300);color:var(--ink-muted)}

/* photo placeholder */
.jeg-photo{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--surface-300);color:var(--ink-muted);font:500 13px/20px var(--font-sans);letter-spacing:.1em;overflow:hidden}
.jeg-photo img{width:100%;height:100%;object-fit:cover;display:block}
.jeg-photo--wide{aspect-ratio:16/10}
.jeg-photo--hero{aspect-ratio:16/9}
.jeg-photo--hero img{object-fit:contain;background:var(--highlight-tint)}

/* restaurant card */
.jeg-rcard,.jeg-gcard,.jeg-acard{position:relative;display:flex;flex-direction:column;background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);color:var(--ink)}
.jeg-rcard__body,.jeg-gcard__body{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4)}
.jeg-meta{font:500 13px/20px var(--font-sans);color:var(--ink-muted)}
/* This site's restaurant-post thumbnails are the same baked-in-text marketing
   style as the hub-article thumbnails (confirmed by inspecting a real one,
   Ichiran Shibuya) -- apply the identical contain + real-ratio fix as
   .jeg-gcard above, scoped to .jeg-rcard's photo, so restaurant cards never
   crop into that text either (this page's own "Nearby Restaurants" section,
   and the future search-results grid, both use .jeg-rcard). */
.jeg-rcard .jeg-photo{aspect-ratio:16/9}
.jeg-rcard .jeg-photo img{object-fit:contain;background:var(--highlight-tint)}
.jeg-rcard__name,.jeg-gcard__name{font:700 17px/26px var(--font-sans);letter-spacing:.02em}
.jeg-rcard__name a,.jeg-gcard__name a{color:inherit;text-decoration:none}
.jeg-rcard__name a::after,.jeg-gcard__name a::after{content:"";position:absolute;inset:0}
.jeg-rcard:hover .jeg-rcard__name a,.jeg-gcard:hover .jeg-gcard__name a{text-decoration:underline;text-underline-offset:3px}
.jeg-rcard__en{font-size:14px;line-height:22px;color:var(--ink-muted)}
.jeg-facts{display:grid;grid-template-columns:auto 1fr;gap:2px var(--space-3);margin-top:var(--space-1);padding-top:var(--space-3);border-top:1px solid var(--line);font-size:14px;line-height:22px}
.jeg-facts dt{color:var(--ink-muted)}
.jeg-facts dd{font-weight:500}

/* guide card */
/* This site's hub thumbnails bake in their own title/category pill text as
   part of the image pixels (not an HTML overlay), so any cover-fit crop risks
   slicing through a pill at an arbitrary, image-dependent point -- confirmed
   as a real visible bug (a "ーメン" pill shown sliced mid-character) when a
   fixed object-position was tried. contain (not cover) shows the whole
   image with nothing ever cut off. The thumbnails are reliably 1200x675
   (16:9) -- confirmed by downloading and inspecting the actual files -- so
   the card's photo box is set to match that exactly (overriding
   .jeg-photo--wide's 16:10 for guide cards specifically) instead of
   16:10, which left a visible mismatched-color letterbox strip top/bottom
   even with a close background color. Exact-match sizing means contain
   now fills the box completely with no bars at all. */
.jeg-gcard .jeg-photo{aspect-ratio:16/9}
.jeg-gcard .jeg-photo img{object-fit:contain}
/* 2026-10-25（心さん round4フィードバック1）: 画像なしの軽量トピック
   カード（front-page.phpの料理ジャンル/旅行者タイプ）。中央寄せ・
   パディングを詰めてカード高さを抑える。 */
.jeg-gcard--plain .jeg-gcard__body{align-items:center;text-align:center;gap:var(--space-2);padding:var(--space-4) var(--space-3)}
.jeg-gcard__icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-pill);background:var(--brand-tint);color:var(--brand-strong);font:700 16px/1 var(--font-display)}
.jeg-gcard__desc{font-size:14px;line-height:22px;color:var(--ink-muted)}
.jeg-gcard__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-1);font-size:14px;line-height:22px}
.jeg-gcard__foot strong{font-weight:700}
.jeg-gcard__more{color:var(--brand-strong);font-weight:700}

/* area card */
.jeg-acard{padding:var(--space-5);gap:var(--space-3)}
.jeg-acard__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.jeg-acard__name{font:700 24px/34px var(--font-display)}
.jeg-acard__total{font:500 13px/20px var(--font-sans);color:var(--ink-muted)}
.jeg-acard__list{display:grid;grid-template-columns:1fr 1fr;gap:2px var(--space-3)}
.jeg-acard__list a{display:flex;align-items:center;justify-content:space-between;min-height:var(--control-md);padding:0 var(--space-3);border-radius:var(--radius-sm);background:var(--surface-100);color:var(--ink);text-decoration:none;font-weight:500}
.jeg-acard__list a:hover{background:var(--surface-300)}
.jeg-acard__list small{font-size:13px;color:var(--ink-muted)}
.jeg-acard__all{display:inline-flex;align-items:center;min-height:var(--control-md);color:var(--brand-strong);font-weight:700;text-decoration:none}

/* filter panel */
.jeg-panel{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5);background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-lg)}
.jeg-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.jeg-panel__head h2{font:700 20px/30px var(--font-sans)}
.jeg-fs{margin:0;padding:0;border:0;min-width:0}
.jeg-fs legend{padding:0;margin-bottom:var(--space-1);font:700 14px/20px var(--font-sans);color:var(--ink-muted)}
.jeg-check{display:flex;align-items:center;gap:var(--space-3);min-height:var(--control-md);cursor:pointer;font-weight:500}
.jeg-check input{width:22px;height:22px;margin:0;accent-color:var(--brand);flex:none}
.jeg-check__n{margin-left:auto;font-size:13px;color:var(--ink-muted)}
.jeg-panel__apply{position:sticky;bottom:0}

/* results page */
.jeg-results{display:grid;grid-template-columns:272px 1fr;gap:var(--space-6);align-items:start}
/* 2026-11-01: 絞り込みパネルが無いときは結果を全幅に */
.jeg-results--single{grid-template-columns:1fr}
.jeg-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}
.jeg-toolbar__count{font:700 20px/30px var(--font-sans)}
.jeg-toolbar__count small{font:500 14px/22px var(--font-sans);color:var(--ink-muted);margin-left:var(--space-2)}
.jeg-toolbar select{min-height:var(--control-md);padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface-200);color:var(--ink);font:500 14px/1 var(--font-sans)}
.jeg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-5)}
.jeg-section{padding:var(--space-7) 0}
.jeg-section__title{margin-bottom:var(--space-5);font:700 24px/34px var(--font-display)}

/* 2026-10-25（心さんのstaging QA A2）: 検索結果の店舗カードグリッドは
   auto-fillの中身依存の折り返しだと、.jeg-results（272pxサイドバー＋
   残り幅）の中で実質1〜2列にしかならず「カードが大きすぎる」との
   指摘があった。明示的なブレークポイントに変更: デスクトップ3列、
   スマホは1列。
   2026-10-25追記（龍さんQA round3指摘(d)）: 900pxのブレークポイントは
   .jeg-resultsが1列スタックに切り替わる閾値と同じ値だったが、その
   前後（約900〜1100px）では.jeg-resultsはまだ272pxサイドバーありの
   2カラムのままなので、カードグリッドの実際の幅は 272px+gap 分狭い
   （1024px実測で1枚153pxまで潰れていた）。カードグリッド用の2列化を
   .jeg-results側の900pxより広い1100pxに引き上げ、サイドバーがまだ
   横並びの帯でもカードが潰れないようにする。 */
/* 2026-10-26（心さんround6指摘）: 1ページ10件表示のため3列だと最後の行に
   1枚だけ余る「孤児カード」になる。PC・タブレットとも2列に、スマホは
   1列のまま（下の@media(max-width:600px)は既存のまま）。 */
.jeg-grid--results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}

/* 2026-10-27（本番公開後、心さん指摘「スマホに致命的な箇所」）: 列数をインラインstyleで
   固定していたため@mediaが効かず、スマホでも3列のままカード内の文字が1〜3文字ずつ
   縦に折れていた。列数はこのクラスで指定し、スマホは1列にする。 */
.jeg-grid--c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.jeg-grid--c3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* 2026-10-25（心さん判断「案B」→round4で画像なしコンパクトカードに変更、
   トップページの料理ジャンル/旅行者タイプ）: サムネイル無しの軽いカード
   なので、固定列数ではなくauto-fillで幅に応じてPC約4〜6列・スマホ2列に
   自然に収まるようにする（カードの最小幅150pxを基準）。 */
.jeg-grid--topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-5)}
@media (max-width:600px){
  /* 2026-10-27: 150pxのauto-fillだと390px幅（内側約310px）では1列になり、
     12枚が縦一列に並んでいた。意図どおりスマホは2列に固定する。 */
  .jeg-grid--topics{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
}

@media (max-width:900px){
  .jeg-results{grid-template-columns:1fr}
  /* 2026-10-27（スマホ確認）: 1カラムだと「近日公開」の押せない予算フィルターだけの
     パネルが検索結果の前に1画面分入っていた。機能ができるまでスマホでは出さない。 */
  .jeg-results > form.jeg-panel{display:none}
}
@media (max-width:600px){
  .jeg-grid--results,.jeg-grid--c2,.jeg-grid--c3{grid-template-columns:1fr}
}
@media (max-width:760px){
  .jeg-search{grid-template-columns:1fr}
  .jeg-nav{display:none}
  .jeg-acard__list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){
  .jeg-btn,.jeg-chip,.jeg-rcard,.jeg-gcard{transition:background-color .14s ease,border-color .14s ease,color .14s ease}
}

/* 2026-10-25（心さん/龍さんのstaging QA、A1）: 検索フォームの4列横並び
   （キーワード/エリア/ジャンル/検索ボタン）は、幅の狭いノートPC
   （実測1000px台のパネル幅）でエリア・ジャンルの選択肢の文字が
   切れることが複数回確認された。列幅の微調整では解決しきらなかった
   ため、より確実な2段構成に変更: 1段目にキーワード（全幅）、
   2段目にエリア・ジャンル・検索ボタンを横並び。キーワード欄に
   grid-column:1/-1を付けて1段目を専有させ、残り3項目はグリッドの
   自動配置で2段目に落ちる。 */
.jeg-search--2row{grid-template-columns:1fr 1fr auto}
.jeg-search--2row>:first-child{grid-column:1/-1}
@media (max-width:600px){
  .jeg-search--2row{grid-template-columns:1fr}
  .jeg-search--2row>:first-child{grid-column:auto}
}

/* home page */
a.jeg-chip{text-decoration:none}
.jeg-search--stack{grid-template-columns:1fr 1fr}
.jeg-search--stack .jeg-field:first-child,.jeg-search--stack .jeg-btn{grid-column:1/-1}
.jeg-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-7);align-items:center;padding:var(--space-7) 0}
.jeg-hero h1{margin:var(--space-3) 0 0;font:700 44px/56px var(--font-display);letter-spacing:0}
.jeg-hero__lead{margin:var(--space-4) 0 var(--space-5);color:var(--ink-muted)}
.jeg-hero__photo{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3}
.jeg-hero__photo img{width:100%;height:100%;object-fit:cover;display:block}
.jeg-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}
.jeg-section__head .jeg-section__title{margin:0}
/* 2026-10-27: スマホで見出しと「すべて見る →」が横並びのまま見出しが
   「料理ジャン／ルから探す」と途中で折れていた。狭い幅では折り返して
   リンクを見出しの下に回す。 */
@media (max-width:600px){
  .jeg-section__head{flex-wrap:wrap;row-gap:var(--space-2)}
  .jeg-section__head .jeg-section__title{flex:1 0 100%}
}
.jeg-more{display:inline-flex;align-items:center;min-height:var(--control-md);color:var(--brand-strong);font-weight:700;text-decoration:none;white-space:nowrap}
.jeg-more:hover{text-decoration:underline;text-underline-offset:3px}
.jeg-band{background:var(--surface-300)}
.jeg-trust{display:grid;grid-template-columns:1fr auto;gap:var(--space-6);align-items:center}
.jeg-trust h2{font:700 24px/34px var(--font-display);margin-bottom:var(--space-3)}
.jeg-trust p{max-width:640px}
.jeg-footer{background:var(--surface-200);border-top:1px solid var(--line)}
.jeg-footer__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);max-width:var(--container);margin:0 auto;padding:var(--space-6) var(--space-5)}
.jeg-footer__links{display:flex;flex-wrap:wrap;gap:0 var(--space-5)}
.jeg-footer__links a{display:inline-flex;align-items:center;min-height:var(--control-md);color:var(--ink);font-size:14px;text-decoration:none}
.jeg-footer__links a:hover{text-decoration:underline;text-underline-offset:3px}
.jeg-footer small{display:block;width:100%;font-size:13px;color:var(--ink-muted)}
@media (max-width:900px){
  .jeg-hero{grid-template-columns:1fr}
  .jeg-hero h1{font-size:32px;line-height:44px}
  .jeg-trust{grid-template-columns:1fr}
}

/* warm bands */
.jeg-band-warm{background:var(--highlight-tint)}
/* 2026-10-25 (心さんフィードバック): 全面brand色の反転パネルは主張が
   強すぎるとの指摘。信頼訴求セクションであってCTAバナーではないため、
   highlight-tintの柔らかい背景+通常のink文字色に変更。 */
.jeg-trust--panel{padding:var(--space-6);background:var(--highlight-tint);color:var(--ink);border-radius:var(--radius-lg)}

/* page patterns: breadcrumbs, page head, prose, toc, note */
.jeg-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-2);padding:var(--space-2) 0;font-size:13px;line-height:20px;color:var(--ink-muted)}
.jeg-crumbs li{display:flex;align-items:center;gap:var(--space-2)}
.jeg-crumbs li+li::before{content:"/";color:var(--line-strong)}
.jeg-crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--ink-muted);text-decoration:underline;text-underline-offset:3px}
/* 2026-10-25（龍さんQA round3指摘、Contactページで見出しが縦長のベージュ
   帯になる問題の根本原因）: .jeg-pagehead は page.php/page-about-us.php で
   <main class="l-mainContent"> の兄弟要素として出力されるが、実際の親要素は
   SWELL側が開く #content.l-content{display:flex} -- width指定が無かった
   ため、フレックスアイテムとして「中身の幅だけ」に縮み、SWELL側が
   width:100%を明示している.l-mainContentと同じ行に並んで
   align-items:stretch（デフォルト）で高さだけ全体に伸びる、という見た目の
   崩れが発生していた。width:100%を明示し、必ず自分の行を単独で占有させる
   （flex-wrapにより.l-mainContentは次の行に押し出される、意図通りの
   「全幅バナー→本文」の縦積みに戻る）。 */
/* 2026-10-26（心さんround6指摘→round8訂正）: round6でtext-align:centerに
   したが、心さんの意図は水平ではなく「帯の中での垂直センタリング」
   だった（見出しが帯の中央より上に見える、という指摘）。水平位置は
   元の左寄せに戻し、代わりにdisplay:flex+align-items:center+
   固定min-heightで上下の余白を揃える。h1側のmargin:0も、上下中央から
   ズレる原因（デフォルトmargin/line-height起因の非対称な見え方）を
   断つために明示。 */
.jeg-pagehead{width:100%;background:var(--highlight-tint);min-height:140px;display:flex;align-items:center}
/* 2026-10-26（心さんround9再訂正）: .jeg-pageheadをdisplay:flexにした結果、
   子の.jeg-wrap（本来ブロック要素として100%幅になり、自身のmax-width:1120px
   +margin:0 autoで中央寄せ「箱」を作る仕組み）が、flexアイテムとして
   既定のflex-grow:0のせいで「中身（見出しテキスト）の幅だけ」に縮んで
   しまい、その縮んだ箱自体がmargin:autoの効果で帯全体の中で中央寄せ
   されてしまっていた（＝見出しテキストが帯のド真ん中に見える原因）。
   .jeg-wrapに明示的にwidth:100%を与え、flexアイテムとしてもまず帯の
   全幅を取らせた上で、その内側のmax-width:1120px+margin:0 autoが
   機能するようにする -- 結果は元のブロック要素時代と同じ「1120pxの
   中央寄せされた箱、その箱の中では見出しは左寄せ」に戻る。 */
.jeg-pagehead > .jeg-wrap{width:100%}
.jeg-pagehead h1{font:700 32px/44px var(--font-display);letter-spacing:0;margin:0}
.jeg-pagehead__lead{margin-top:var(--space-3);max-width:720px;color:var(--ink-muted)}
.jeg-pagehead .jeg-chips{margin-top:var(--space-5)}
.jeg-meta-row{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);margin-top:var(--space-3);font-size:13px;line-height:20px;color:var(--ink-muted)}
.jeg-prose{max-width:720px}
.jeg-prose>*+*{margin-top:var(--space-4)}
.jeg-prose h2{margin:var(--space-7) 0 var(--space-5);padding-bottom:var(--space-2);border-bottom:2px solid var(--brand);font:700 24px/34px var(--font-display);letter-spacing:0} /* explicit bottom margin (space-5) so it wins the margin-collapse against the next sibling's own space-4 top margin -- was reading as cramped right under the heading's border-bottom line */
.jeg-prose h3{margin-top:var(--space-6);font:700 20px/30px var(--font-sans)}
.jeg-prose p{line-height:30px}
/* 2026-10-25（心さん第4弾「B. ポイントを箱で目立たせる」）: ハブ記事・
   全国ガイド本文中の「訪れる前の注意」「予算と支払い」等の節を、淡い色の
   囲み＋アイコンで強調（page-hub-article.php/page-cuisine-guide.phpの
   jeg_hub_wrap_callout_sections()/jeg_cg_wrap_callout_sections()が、
   見出しテキストが既知のフレーズと一致する節だけをこの.jeg-calloutで
   包む -- 他の見出しは影響を受けない）。 */
.jeg-callout{background:var(--surface-300);border-left:3px solid var(--brand);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin:var(--space-6) 0}
.jeg-callout>*+*{margin-top:var(--space-3)}
.jeg-callout h2,.jeg-callout h3{margin:0!important;padding:0!important;border:0!important;background:none!important;display:flex;align-items:center;gap:var(--space-2)}
.jeg-callout h2::before,.jeg-callout h3::before{content:"\1F4A1";font-size:.85em}
/* 本文中の<ol class="jeg-hub-list-bullets">（予算・注意点などの既存の
   箇条書き）を、アイコン付きチェックリスト風に。 */
.jeg-prose ol.jeg-hub-list-bullets,.jeg-cg-body ol.jeg-hub-list-bullets{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:var(--space-3)}
.jeg-prose ol.jeg-hub-list-bullets>li,.jeg-cg-body ol.jeg-hub-list-bullets>li{position:relative;padding-left:var(--space-7)}
.jeg-prose ol.jeg-hub-list-bullets>li::before,.jeg-cg-body ol.jeg-hub-list-bullets>li::before{content:"\2713";position:absolute;left:0;top:0;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--radius-pill);background:var(--brand-tint);color:var(--brand-strong);font:700 13px/1 var(--font-sans)}
.jeg-prose ul{list-style:disc;padding-left:var(--space-5)}
.jeg-prose ol{list-style:decimal;padding-left:var(--space-5)}
.jeg-prose a:not(.jeg-btn){color:var(--brand-strong);text-decoration:underline;text-underline-offset:3px} /* :not(.jeg-btn) so a button placed inside prose (e.g. the Location section's "View on Google Maps" button) keeps its own jeg-btn--primary/--ghost color instead of being silently overridden -- confirmed real bug, same specificity-collision class as the earlier .jeg-root reset fix */
/* 2026-10-25（龍さんQA round3指摘(c)）: .jeg-tocは常に.jeg-aside（自前の
   background/border/box-shadowを持つカード）の中でしか使われていない
   ため、.jeg-toc自身もbackground/borderを持つと「外枠の中にさらに枠」の
   二重枠に見えていた。.jeg-asideの枠1つだけに統一し、.jeg-tocはただの
   中身にする。
   2026-10-25（心さん第4弾「C. 目次のデザイン変更」）: 01/02…の番号付き
   リストにし、スクロール中の現在地をIntersectionObserverで
   aria-current="true"にしてブランド色で強調（ハブ記事・全国ガイド
   テンプレート側のインラインscriptで実装）。
   2026-10-25追記（龍さんround5指摘2）: 最初max-height:340px+内部スクロール
   で「目次自体の高さを画面に収める」実装だったが、大阪たこ焼きハブ
   （1440x1000）で最後の項目「08 あわせて読みたい」が半分だけ見える形で
   切れて「壊れて見える」と報告。内部スクロール自体をやめ、常に全項目を
   表示する（.jeg-asideは下のposition:sticky;top側で見出し高さ分オフセット
   しているので、長い目次のせいでsticky状態が画面下まで伸びても、ページの
   残りと一緒に自然にスクロールされるだけで崩れない）。 */
.jeg-toc{display:flex;flex-direction:column;gap:var(--space-2)}
.jeg-toc-m{display:none}
/* 本文内に置くため記事本文のリンク装飾（赤・下線）を受けないようにする */
.jeg-root .jeg-toc-m .jeg-toc__list a{color:var(--ink);text-decoration:none}
.jeg-toc__title{font:700 14px/20px var(--font-sans);color:var(--ink-muted)}
.jeg-toc__list{display:flex;flex-direction:column}
.jeg-toc__list a{display:flex;align-items:center;gap:var(--space-3);min-height:var(--control-md);flex:none;color:var(--ink);font-weight:500;text-decoration:none}
.jeg-toc__list a:hover{text-decoration:underline;text-underline-offset:3px}
.jeg-toc__num{flex:none;width:22px;font:700 12px/1 var(--font-sans);color:var(--ink-muted)}
.jeg-toc__list a[aria-current="true"]{color:var(--brand-strong);font-weight:700}
.jeg-toc__list a[aria-current="true"] .jeg-toc__num{color:var(--brand-strong)}
.jeg-note{padding:var(--space-4) var(--space-5);background:var(--surface-300);border-radius:var(--radius-md)}
.jeg-note__title{font-weight:700}
.jeg-note--warn{background:var(--warn-tint)}
.jeg-note--warn .jeg-note__title{color:var(--warn)}

/* ranked horizontal card */
/* 2026-10-25（心さん round7→round7b→round8→round9、龍さんが実機で検証
   済みのCSSをそのまま採用）: サイドカラム（240px固定＋align-self:stretch）
   のアプローチは、align-self:stretchを使うとbase .jeg-photo{aspect-ratio:
   4/3}がまだ効いていて幅が高さ×4/3で計算される（494×4/3=658px）ため
   240pxに収まらず、aspect-ratio:autoにすると今度はテキスト列が901-1050px
   幅で約190pxまで潰れ、結局「画像が枠に合っていない」という同じ見た目に
   戻ってしまうことを龍さんが実機（chromium+webkit）で確認。サムネイルは
   元々768×432（ちょうど16:9）なので、画像をカード上部に全幅で乗せる
   レイアウトに統一（全幅に対してcrop無し・帯無しで綺麗に収まる）。
   サイドカラム用のgrid-template-columns:240px 1frは廃止、1frを基準に
   （写真が無いカード用のinline style="grid-template-columns:1fr"は
   そのままでも無害なので残置）。900px以下用の旧メディアクエリ上書きは
   不要になったため削除。 */
.jeg-hcard{position:relative;display:grid;grid-template-columns:1fr;background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);color:var(--ink)}
.jeg-hcard .jeg-photo{align-self:start;aspect-ratio:16/9;width:100%;height:auto;background:transparent}
.jeg-hcard .jeg-photo img{object-fit:cover}
.jeg-hcard__body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4) var(--space-5)}
.jeg-hcard__head{display:flex;align-items:flex-start;gap:var(--space-3)}
.jeg-hcard__name{font:700 20px/30px var(--font-sans)}
.jeg-hcard__name a{color:inherit;text-decoration:none}
.jeg-hcard__name a::after{content:"";position:absolute;inset:0}
.jeg-hcard:hover .jeg-hcard__name a{text-decoration:underline;text-underline-offset:3px}
/* 営業時間は省略せずフル表示（切れた事実は雑に見えるとの指摘）、長い
   場合は折り返す。本文はやや小さめ・広い行間で読みやすく -- max-width:65ch
   は全幅カードでは右側に不揃いな余白を作るだけなので廃止（25pxの
   パディングで十分という龍さんの確認どおり）。 */
.jeg-hcard__hours{font-size:13px;line-height:1.6;color:var(--ink-muted)}
.jeg-hcard__text{font-size:15px;line-height:1.8;color:var(--ink-muted)}
.jeg-rank{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:var(--radius-pill);background:var(--brand);color:var(--on-brand);font:700 18px/1 var(--font-display)}

/* 2026-10-25（round10）: .jeg-hcardの画像付きデザインが何度試しても
   「枠に合っていない」形で差し戻され続け、最終的に心さんの判断は
   「サムネイル無し、文字文字しくない」カード。龍さんが実機
   （chromium+webkit、1440/768/390、本番ではなくstaging）で検証・
   スクリーンショット確認済みのプロトタイプCSSをそのまま採用、ハード
   コードされた色だけ既存のデザイントークンに置き換えた（半径・余白・
   フォントサイズ等は検証済みの見た目を変えないようそのまま）。
   jeg_hub_render_shop_link_card()/jeg_cg_render_shop_link_card()（本文中
   の店紹介）と、jeg_hub_shop_card()（1-6位のランキングカード、ランク
   丸バッジは.jeg-scard__head内で店名の前に配置）の両方で使用。 */
.jeg-scard{position:relative;background:var(--surface-200);border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:12px;padding:20px 24px;margin:20px 0;box-shadow:0 1px 2px rgba(60,40,20,.06)}
.jeg-scard__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.jeg-scard__name{margin:0!important;padding:0!important;border:0!important;background:none!important;font:700 20px/1.5 var(--font-sans)!important}
.jeg-scard__name::before,.jeg-scard__name::after{display:none!important}
/* 2026-10-25（round11指摘1）: .jeg-scard__name a{text-decoration:none}
   単体（0,1,1）はSWELLの`.post_content a`系ルールに詳細度で負けており、
   staging実測で全カードに下線が出ていた。.post_content配下での勝ちを
   明示的に確保する。 */
.jeg-scard .jeg-scard__name a,.post_content .jeg-scard__name a{color:var(--ink);text-decoration:none}
.jeg-scard .jeg-scard__name a:hover,.post_content .jeg-scard__name a:hover{text-decoration:underline;text-underline-offset:3px}
.jeg-scard__go{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-pill);background:var(--brand);color:var(--on-brand)!important;font:700 14px/1 var(--font-sans);text-decoration:none!important}
.jeg-scard__go:hover{background:var(--brand-strong)}
.jeg-scard__facts{display:grid;grid-template-columns:auto auto 1fr;gap:0;margin:14px 0 0!important;padding:0;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--surface-100)}
.jeg-scard__facts>div{padding:10px 14px;border-left:1px solid var(--line);min-width:0}
.jeg-scard__facts>div:first-child{border-left:0}
.jeg-scard__facts dt{margin:0;font:700 11px/1.4 var(--font-sans);letter-spacing:.08em;color:var(--ink-muted)}
.jeg-scard__facts dd{margin:2px 0 0!important;font:700 14px/1.5 var(--font-sans);color:var(--ink)}
.jeg-scard__text{margin:14px 0 0!important;font-size:15px;line-height:1.85;color:var(--ink-muted)}
/* JS無効時は全文表示・「続きを読む」ボタン非表示（安全側のフォールバック）
   -- document.documentElement.classList.add('jeg-js')が各テンプレートの
   早期wp_head scriptで付与された時だけクランプ+ボタン表示を有効にする。 */
.jeg-js .jeg-scard__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.jeg-scard.is-open .jeg-scard__text{-webkit-line-clamp:unset;display:block}
.jeg-scard__more{display:none;margin-top:6px;padding:0;border:0;background:none;color:var(--brand);font:700 13px/1.6 var(--font-sans);cursor:pointer}
/* 2026-10-25（round11指摘2）: 「続きを読む」が、3行に収まって実際には
   クランプされていないカードにも出てしまっていた（ランクカードでは押しても
   何も起きない）。各テンプレートのJSが、scrollHeight > clientHeight+2の
   時だけ.jeg-scard__textに.is-clampableを付与（リサイズ時も再判定）、
   実際に切れている時だけボタンを表示する。 */
.jeg-js .jeg-scard__text.is-clampable + .jeg-scard__more{display:inline-block}
@media (max-width:600px){
  .jeg-scard{padding:16px 16px 16px 18px}
  .jeg-scard__facts{grid-template-columns:auto 1fr}
  .jeg-scard__facts>div:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .jeg-scard__go{width:100%;justify-content:center;order:3}
  .jeg-scard__head{flex-direction:column;align-items:stretch;gap:10px}
}
/* 2026-10-26（龍さんround7指摘1）: 「このエリアのその他のお店」の2列
   グリッド（.jeg-hub-area-restaurants、page-hub-article.php）内の
   .jeg-scardは、ビューポート幅に関係なく列自体が常に約350-400px幅と
   狭いため、上のビューポート基準の@media(max-width:600px)とは別に、
   このグリッド文脈だけ無条件（メディアクエリ無し）で同じ「狭いカード」
   処理（事実ストリップ2セル+営業時間を全幅行に、ボタンは店名の下に
   全幅で）を適用する。 */
.jeg-hub-area-restaurants .jeg-scard{padding:16px 16px 16px 18px}
.jeg-hub-area-restaurants .jeg-scard__facts{grid-template-columns:auto 1fr}
.jeg-hub-area-restaurants .jeg-scard__facts>div:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
.jeg-hub-area-restaurants .jeg-scard__go{width:100%;justify-content:center;order:3}
.jeg-hub-area-restaurants .jeg-scard__head{flex-direction:column;align-items:stretch;gap:10px}


/* spec table, steps, gallery, detail layout */
.jeg-spec{display:grid;grid-template-columns:160px 1fr;border-top:1px solid var(--line)}
.jeg-spec dt,.jeg-spec dd{padding:var(--space-3) var(--space-3);border-bottom:1px solid var(--line)}
.jeg-spec dt{font-weight:700;color:var(--ink-muted);background:var(--surface-300)}

/* FAQ accordion (2026-10-21: restores real collapse/expand -- a hub-article
   page used a details/summary accordion before the design refresh; an
   earlier pass flattened it to .jeg-spec rows, losing that interaction.
   Same chevron-rotate convention as .jeg-mobile-nav__panel's own
   details/summary, applied here instead of inventing a new pattern.) */
.jeg-faq-item{background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-3)}
.jeg-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-weight:700;color:var(--ink)}
.jeg-faq-item summary::-webkit-details-marker{display:none}
.jeg-faq-item summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .14s ease;flex:none;color:var(--ink-muted)}
.jeg-faq-item[open] summary::after{transform:rotate(225deg)}
.jeg-faq-item p{margin:var(--space-3) 0 0;color:var(--ink-muted);line-height:1.8}
.jeg-steps{display:grid;gap:var(--space-4);counter-reset:jeg-step}
.jeg-steps li{display:grid;grid-template-columns:40px 1fr;gap:var(--space-3);align-items:start;counter-increment:jeg-step}
.jeg-steps li::before{content:counter(jeg-step);display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-pill);background:var(--brand-tint);color:var(--brand-strong);font:700 16px/1 var(--font-sans)}
.jeg-steps strong{display:block;font-weight:700}
.jeg-gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:var(--space-2);border-radius:var(--radius-lg);overflow:hidden}
.jeg-gallery .jeg-photo{aspect-ratio:auto;min-height:160px}
.jeg-gallery .jeg-photo:first-child{grid-row:1/3;min-height:340px}
.jeg-detail{display:grid;grid-template-columns:1fr 320px;gap:var(--space-6);align-items:start}
/* 2026-10-25（龍さんround5指摘1）: top:var(--space-5)（24px）だと、固定
   ヘッダー（1440pxで約55px）の下にサイドバーカードの上端が隠れる
   （「目次」ラベルがヘッダーの縁にちょうど重なる）。オフセットを
   ヘッダー高さ+16px以上に。 */
.jeg-aside{position:sticky;top:80px;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5);background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
/* 2026-10-25（龍さんround6指摘）: 目次を全項目表示にした結果（round5の
   直前の修正）、短いノートPC画面（1366x768/1280x720）ではasideの実高さ
   （ハブ記事で700-800px台）+ top:80pxがビューポート高を超え、sticky故に
   「この記事のお店」の下の方のリンクがスクロールしても一切見えない状態
   になっていた。page-hub-article.php/page-cuisine-guide.php側のインライン
   scriptが、aside.offsetHeight+96がwindow.innerHeightを超える時だけこの
   クラスを付与してposition:staticに切り替える（収まる時は従来どおり
   sticky）。single-restaurant.phpの.jeg-aside（常に短い）はこの対象外、
   このクラスが付かない限り従来のsticky挙動のまま。 */
.jeg-aside--static{position:static}
.jeg-aside__price{font:700 24px/34px var(--font-display)}
.jeg-doc{display:grid;grid-template-columns:240px 1fr;gap:var(--space-7);align-items:start}
.jeg-sidenav{display:flex;flex-direction:column;gap:2px}
.jeg-sidenav a{display:flex;align-items:center;min-height:var(--control-md);padding:0 var(--space-3);border-radius:var(--radius-sm);color:var(--ink);font-weight:500;text-decoration:none}
.jeg-sidenav a:hover{background:var(--surface-300)}
.jeg-sidenav a[aria-current="page"]{background:var(--brand-tint);color:var(--brand-strong);font-weight:700}

/* 2026-10-25 (B1, 心さんフィードバック): WP core the_posts_pagination()
   output (search.php's generic site-wide search fallback, the only place
   on the site that calls it -- see that file's own docblock for why the
   restaurant search results page has no pager of its own) rendered with
   zero jeg-* styling, inheriting SWELL's own full-width block treatment
   ("full-width stacked buttons"). Restyled directly onto WP/SWELL's own
   markup classes (.navigation.pagination/.nav-links/.page-numbers) --
   no PHP/markup change needed -- into small, centered, horizontal
   page-number buttons, same visual language as .jeg-chip/.jeg-seg. */
.navigation.pagination{margin-top:var(--space-6);text-align:center}
.navigation.pagination .nav-links{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2)}
.navigation.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface-200);color:var(--ink);font:700 14px/1 var(--font-sans);text-decoration:none}
.navigation.pagination a.page-numbers:hover{background:var(--surface-300)}
.navigation.pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.navigation.pagination .page-numbers.dots{border:none;background:none;color:var(--ink-muted);min-width:auto;padding:0 var(--space-1)}

/* form */
.jeg-form{display:grid;gap:var(--space-5);max-width:640px}
textarea.jeg-input{min-height:160px;padding:var(--space-3) var(--space-4);line-height:28px;resize:vertical}
.jeg-req{margin-left:var(--space-1);color:var(--brand-strong);font-weight:700}
.jeg-input[aria-invalid="true"]{border:2px solid var(--brand-strong)}
.jeg-error{font:700 13px/20px var(--font-sans);color:var(--brand-strong)}
.jeg-hint{font-size:13px;line-height:20px;color:var(--ink-muted)}

@media (max-width:900px){
  .jeg-detail,.jeg-doc{grid-template-columns:1fr}
  .jeg-aside{position:static}
  /* 2026-10-27: 1カラム時は目次を本文の最初の見出しの前に出す（jeg_insert_mobile_toc）。 */
  .jeg-toc-m{display:block;margin:var(--space-5) 0;padding:var(--space-5);background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
  .jeg-aside .jeg-toc{display:none}
  .jeg-aside:not(:has(> :not(.jeg-toc))){display:none}
  /* 2026-10-27（スマホ確認）: 「この記事のお店」等のリンクは高さ20px・間隔4pxで指で押し分けにくかった */
  .jeg-aside ul .jeg-link{display:inline-block;padding:6px 0}
  .jeg-scard__more{padding:6px 0}
  .jeg-gallery{grid-template-columns:1fr;grid-template-rows:auto}
  .jeg-gallery .jeg-photo:first-child{grid-row:auto;min-height:0;aspect-ratio:4/3}
  .jeg-spec{grid-template-columns:120px 1fr}
}
.jeg-root ol.jeg-crumbs,.jeg-root ol.jeg-steps{margin:0;padding:0;list-style:none}

/* 2026-10-29（心さんOK）: 口コミ0件の店は投稿フォームを「口コミを書く」ボタン1つにたたむ（single-restaurant.php） */
.jeg-review-fold{margin:var(--space-5) 0 28px}
.jeg-review-fold > summary{display:inline-flex;list-style:none;cursor:pointer}
.jeg-review-fold > summary::-webkit-details-marker{display:none}
.jeg-review-fold[open] > summary{margin-bottom:var(--space-4)}

/* 2026-10-29: 通常投稿（single.php）では SWELL が本文に自動で差し込む旧デザインの目次を出さない（サイドバー／スマホ用目次に一本化） */
.jeg-post .p-toc{display:none}