/* Web フォント(Noto Serif JP / Noto Sans JP、display=optional)は、
   2026-09-27(#29)から各ページの <head> の <link>(preconnect 付き)で読む。
   以前はここの @import で読んでいたため、style.css を読み終えるまでフォントの
   要求が始まらず、描画を遅らせていた。同じ URL を scripts/bake-static.py が
   head に焼き込む(URL を変えるときは bake-static.py の FONT_URL も合わせる)。
   display=optional はチラつき対策として意図的に選んだもの(2026-08-03)。 */

/* =========================================================
   交流ステーション 和束の郷 — デザインシステム
   「上質な骨格 × 人肌の差し色」
   骨格: 大判ビジュアル / 広い余白 / 明朝体見出し(Noto Serif JP)
   親しみ: 暖色(ゆず色)の差し色 / 一人称コメント
   (2026-08-04: 本文の手書き風(Yomogi)は視認性の指摘により明朝体へ統一。
    編集UIのフォント選択肢としては引き続き選べる)
   本文: ゴシック(Noto Sans JP)で可読性・親しみやすさ
   ※ ビジュアルは CSS グラデーション + SVG data URI のみ(外部画像非依存)
   ========================================================= */

:root{
  /* --- 配色の前提 (2026-09-23 追記) ---
     このサイトは白基調で、茶畑の写真を主役にする設計。端末が dark モードでも
     その見え方を保つため、明示的に light を宣言する。これが無いと一部のブラウザが
     入力欄・選択肢・スクロールバーを勝手に暗くし、白い紙面の中でそこだけ黒く浮く。
     ⚠ 本格的なダークテーマを当てる場合は、content.json の theme.colors が実行時に
     :root を上書きする(content-loader.js)ため、CSS の @media 指定だけでは効かない。
     その場合は theme 側にも dark 用の値を持たせる設計が要る。 */
  color-scheme: light;

  /* --- ブランドカラー (2026-08-22 第2版: 背景・写真をしっかり明るく、
         文字はそのぶん濃くして視認性を確保。全て WCAG AA 4.5:1 以上) --- */
  --tea:#4D8156;          /* 茶葉グリーン ※背景用(白文字で 4.58:1) */
  --tea-deep:#3F6E4A;     /* 濃い茶葉 ※ヘッダー/フッター背景(白文字で 5.93:1) */
  --tea-text:#2E5236;     /* 茶葉グリーン ※見出し文字用(明るい背景で 8.7:1) */
  --leaf:#9BB78B;         /* 若葉グリーン(アクセント) */
  --leaf-soft:#C3D6AF;    /* 若葉ライト(装飾) */
  --cream:#FFFDF9;        /* 生成りベージュ(背景) ほぼ白 */
  --cream-deep:#F6F2E9;   /* ベージュ濃いめ(境界/畝) */
  --brown:#8C6142;        /* 焙じ茶ブラウン(白文字で 5.38:1) */
  --ink:#262626;          /* 墨黒(明るい背景で 14.9:1) */

  /* --- 差し色:ゆず色系オレンジ(親しみやすさ) --- */
  --yuzu:#F0A054;         /* 明るいゆず(バッジ・アクセント・下線) */
  --yuzu-cta:#B25900;     /* 濃いゆず(CTAボタン背景・白文字で4.86:1) */
  --yuzu-text:#8A4500;    /* ゆず淡色の帯に載せる文字用(5.78:1) */
  --yuzu-soft:#F9E4C8;    /* ゆず淡色(枠・帯) */

  /* --- テキスト --- */
  --text:#262626;
  --muted:#57534B;        /* 補足文(明るい背景で 7.53:1) */
  --border:#E8E1D4;
  --white:#ffffff;

  /* --- フォント(content.json / content-loader.js から上書き可能) --- */
  --font-heading:'Noto Serif JP','Yu Mincho','游明朝',serif;
  --font-body:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  /* --- 文字の太さ(content.json theme.fontWeightHeading / fontWeightBody で上書き可能) --- */
  --font-weight-heading:600;
  --font-weight-body:400;

  /* --- カテゴリ色分け(4大ボタン) --- */
  --cat-buy:#4D8156;      /* 買う=グリーン */
  --cat-eat:#B25900;      /* 食べる=オレンジ寄り */
  --cat-walk:#3E6B8C;     /* 巡る=ブルー */
  --cat-know:#8C6142;     /* 知る=焙じ茶ブラウン(落ち着いた色) */
}

*{box-sizing:border-box; margin:0; padding:0}
/* ページ内リンク・スキップリンクの飛び先が追従ヘッダーの下に隠れないようにする
   (#42、2026-09-27)。--header-h は content-loader.js が実際のヘッダーの高さを入れる。
   900px 以下では画面下の固定バーのぶんも空ける。 */
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h, 90px) + 8px)}
@media (max-width:900px){
  html{scroll-padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}
/* ページ内 style に残る scroll-margin-top:96px/88px(access の #zones #by-train #by-car
   #chagenkyo-line #hours、cafe の #allergy)は、上の scroll-padding-top と足し算で効き
   ヘッダーの下に約 250px の空白ができる。ページ内 style に勝つよう !important で 8px にそろえる
   (2026-09-27 レビュー指摘)。 */
#zones, #by-train, #by-car, #chagenkyo-line, #hours, #allergy{scroll-margin-top:8px !important}
/* 期間つきの要素(data-until / data-from)。content-loader.js が期限外で hidden にする。
   hidden は display を指定した class に負けるので、ここで確実に消す。 */
[data-date-hidden][hidden]{display:none !important}
/* 編集モードでは期限外の要素も隠さず、点線の枠で示す */
html.is-editing .date-out-of-range{outline:2px dashed #B25900; outline-offset:2px}

/* =========================================================
   アクセシビリティ(2026-08-03 監査で追加)
   ========================================================= */
/* キーボード操作時のフォーカス位置がほぼ全ページで見えなかったため、
   サイト全体の既定フォーカスリングを用意する(:focus-visible なので
   マウスでクリックしたときには出ず、見た目の印象は変えない)。 */
:focus-visible{
  outline:3px solid var(--yuzu-cta);
  outline-offset:2px;
  border-radius:3px;
}
/* 濃色背景(ヘッダー/フッター/ヒーロー)の上では白いリングの方が視認できる */
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.tea-band :focus-visible{
  outline-color:#fff;
}
/* 「本文へスキップ」リンク(content-loader.js が全ページに注入)。
   通常は画面外に隠し、Tab でフォーカスされたときだけ現れる。 */
/* position は fixed。absolute だとページを下までスクロールした状態で Tab を
   押したとき、リンクがページ最上部(画面外)に現れて見えなくなるため。 */
.skip-link{
  position:fixed; left:8px; top:0; z-index:2000;
  background:var(--tea-deep); color:#fff; text-decoration:none;
  font-size:14px; font-weight:700; padding:10px 18px; border-radius:0 0 8px 8px;
  /* ⚠ もとは top:-64px → :focus で top:0 に動かしていたが、この要素は
     content-loader.js が実行時に差し込むため、ブラウザが初期値を確定する前に
     フォーカスが当たり、transition が走らないまま画面外に留まっていた
     (2026-09-23 に是正)。位置ではなく transform で隠し、フォーカスで戻す。 */
  transform:translateY(-150%);
  transition:transform .15s ease;
}
.skip-link:focus{transform:translateY(0)}
/* 「動きを減らす」設定の利用者にはスムーススクロール等を無効化 */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

body{
  font-family:var(--font-body,'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif);
  font-weight:var(--font-weight-body,400);
  background:var(--cream);
  color:var(--text);
  line-height:1.85;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}

/* =========================================================
   写真の見え方 (2026-08-22 / 2026-08-23 修正)
   当初はサイト内の写真すべてに明度・コントラストを上げるフィルタを掛けたが、
   商品・料理・ギャラリーなどの写真が白飛びしたため、トップページの
   ヒーロー写真と「和束の郷とは」の写真だけに限定した。
   それ以外のページの写真はフィルタなし(元の見え方)。
   ロゴ類は色を正確に出したいので下で除外する。
   ========================================================= */
.hero-slide,
.about-visual.has-photo img{
  filter:brightness(1.11) contrast(1.07) saturate(1.09);
}
/* 桜ごしの外観写真(1枚目)は青空と満開の桜で元々明るく、白飛び寸前の画素が
   サンプルの約25%を占める。上と同じ補正を掛けると白飛びが目立つため、
   この1枚だけ弱める(明るさを少し落とし、コントラスト・彩度も控えめに)。
   店内・客席・テラスの3枚とトップのヒーロー写真はそのまま (2026-08-24 ご指示)。 */
.about-visual-block .about-visual.about-visual-1 img{
  filter:brightness(.92) contrast(.98) saturate(.94);
}
/* ロゴ・バッジはフィルタを掛けない(ブランド色を正確に保つ) */
.gate-logo,
.gate-logo-panel img,
.photo-logo-badge,
.photo-logo-badge img{filter:none}
a{color:inherit}
h1,h2,h3,h4{
  font-family:var(--font-heading,'Noto Serif JP','Yu Mincho','游明朝',serif);
  font-weight:var(--font-weight-heading,600);
  line-height:1.5;
}

/* 手書き風(温かみの差し色として一部にのみ使用) */
.handwrite{font-family:var(--font-heading,'Noto Serif JP',serif)}

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header{
  background:linear-gradient(135deg,var(--tea) 0%,var(--tea-deep) 100%);
  color:#fff;
  padding:14px 24px;
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 10px rgba(43,43,43,.18);
}
.site-header::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--yuzu-soft) 20%, var(--yuzu) 50%, var(--yuzu-soft) 80%, transparent);
}
.site-header-inner{
  max-width:1120px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
}
/* 320px 級の小さい端末ではロゴ・言語切替・メニューが 2 段に折り返し、
   ヘッダーだけで画面の高さの 22% を占めていた(2026-09-23 に是正)。
   余白と字間を詰めて 2 段でも高さを抑える。押す的の 44px は保つ。 */
@media (max-width:360px){
  .site-header{padding-top:8px; padding-bottom:8px}
  .site-header-inner{gap:8px}
  .site-logo{gap:8px}
  .site-logo .logo-prefix{letter-spacing:.1em}
  .site-logo .logo-sub{letter-spacing:.1em}
  .lang-switch a{padding:7px 10px}
}
.site-logo{
  display:flex; align-items:center; gap:11px; text-decoration:none; color:#fff;
}
.site-logo .mark{
  width:34px; height:34px; flex-shrink:0;
  /* 茶の若葉マーク(SVG) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 6C18 14 12 26 12 38c0 9 7 16 18 16s18-7 18-16C48 26 42 14 30 6z' fill='%23A9C08F'/%3E%3Cpath d='M30 12c0 14 0 28 0 40' stroke='%233A5A40' stroke-width='2.4' fill='none'/%3E%3Cpath d='M30 24c-5-4-11-5-15-4M30 34c5-4 11-5 15-4M30 44c-5-4-9-4-13-3' stroke='%233A5A40' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat; background-position:center;
}
.site-logo .logo-text{display:flex; flex-direction:column; line-height:1.25}
.site-logo .logo-prefix{
  font-size:11px; letter-spacing:.14em; color:rgba(255,255,255,.72);
  margin-bottom:1px;
}
.site-logo .logo-main{
  font-family:var(--font-heading,'Noto Serif JP',serif); font-size:22px; font-weight:600; letter-spacing:.1em;
}
.site-logo .logo-sub{
  font-size:11px; letter-spacing:.16em; color:var(--yuzu-soft);
}
.header-right{display:flex; align-items:center; gap:12px}
.site-nav{display:flex; gap:4px; flex-wrap:wrap; font-size:14.5px}
.site-nav a{
  padding:9px 14px; border-radius:8px; text-decoration:none;
  color:#eaf1e4; transition:background .2s, color .2s; white-space:nowrap;
}
.site-nav a:hover, .site-nav a.active{background:rgba(255,255,255,.16); color:#fff}
.site-nav a.nav-cta{background:var(--yuzu-cta); color:#fff; font-weight:700}
.site-nav a.nav-cta:hover{background:#B25900}

/* 言語切替 */
.lang-switch{display:flex; gap:2px; border:1px solid rgba(255,255,255,.4); border-radius:8px; overflow:hidden; flex-shrink:0}
.lang-switch a{
  padding:7px 13px; font-size:12.5px; text-decoration:none; color:#eaf1e4;
  font-weight:700; letter-spacing:.05em; display:flex; align-items:center; justify-content:center;
  /* 指で押す的は 44px 以上にする(Apple/Google の目安)。2026-09-23 に 38px から引き上げ。 */
  min-height:44px; min-width:44px;
}
/* 選択中の言語は白文字。背景に --yuzu(#F0A054) を使うとコントラスト比が
   2.59:1 しかなく WCAG AA(4.5:1) を満たさないため、同系色でより濃い
   --yuzu-cta(#B25900) を使う(白文字で 4.86:1)。ブランドの色味は保ったまま
   可読性だけを上げる意図。*/
.lang-switch a.active{background:var(--yuzu-cta); color:#fff}
.lang-switch a:not(.active):hover{background:rgba(255,255,255,.14)}

/* ハンバーガー(モバイル) */
.nav-toggle{
  display:none; background:none; border:1px solid rgba(255,255,255,.4);
  color:#fff; padding:9px 13px; border-radius:8px; font-size:20px; cursor:pointer;
  min-height:44px; min-width:44px;
}
@media (max-width:900px){
  .nav-toggle{display:block; order:3}
  .site-nav{
    display:none; flex-direction:column; width:100%; order:4;
    background:var(--tea-deep); border-radius:12px; padding:10px; margin-top:10px;
  }
  /* ☰を開いたとき、画面より高くならないようにし、中をスクロールさせる(#12、2026-09-27)。
     小さい画面(375x667 等)や横向きで下の項目に届かなかった。--header-h は閉じた
     ときのヘッダーの高さ(content-loader.js が測る。実際の位置での調整も JS が行う)。
     flex の子は縮めない(縮むと項目が潰れてスクロールにならない)。 */
  .site-nav.open{
    display:flex; flex-wrap:nowrap;
    max-height:calc(100vh - var(--header-h, 140px) - 16px);
    max-height:calc(100dvh - var(--header-h, 140px) - 16px);
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  }
  .site-nav.open > *{flex-shrink:0}
  .site-nav a{padding:13px 16px; border-radius:8px}
  /* JavaScript が動かないときは☰が開けないので、ナビを最初から出しておく(#44) */
  html.no-js .nav-toggle{display:none}
  html.no-js .site-nav{display:flex}
}

/* =========================================================
   ヒーロー(茶畑ビジュアル / CSS + SVG のみ)
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  color:#fff; text-align:center;
  padding:88px 24px 96px;
  /* 空 → 遠景の山なみ */
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(44,70,50,.0) 40%, rgba(44,70,50,.35) 100%),
    linear-gradient(180deg,#6C8C70 0%, #54785A 42%, #4D8156 100%);
}
/* 茶畑の畝(repeating-linear-gradient) */
.hero::before{
  content:''; position:absolute; left:-10%; right:-10%; bottom:0; height:46%;
  background:
    repeating-linear-gradient(96deg,
      #3F6E4A 0px, #3F6E4A 10px,
      #4D8156 10px, #4D8156 20px,
      #649A6C 20px, #649A6C 30px,
      #4D8156 30px, #4D8156 40px);
  transform:perspective(420px) rotateX(52deg);
  transform-origin:bottom center;
  opacity:.9;
  pointer-events:none;
}
/* 手前の丘のふくらみ + やわらかな陽光 */
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 40% at 20% 18%, rgba(255,244,214,.28), transparent 60%),
    radial-gradient(70% 50% at 85% 30%, rgba(255,236,196,.14), transparent 60%);
}
.hero-inner{max-width:820px; margin:0 auto; position:relative; z-index:2}
.hero-eyebrow{
  letter-spacing:.34em; font-size:12.5px; font-weight:700;
  color:#FFF6E6; margin-bottom:18px;
}
.hero h1{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-size:clamp(28px,5.4vw,48px); font-weight:var(--font-weight-heading,600);
  letter-spacing:.08em; margin-bottom:20px;
  text-shadow:0 2px 16px rgba(20,32,22,.4);
}
.hero h1 .sub{
  display:block; font-size:.45em; font-weight:400; letter-spacing:.2em;
  margin-top:14px; color:#eaf1e4;
}
/* 見出しのすぐ下に添える一行。タイトルより一回り小さく、控えめな重みにする */
.hero-tagline{
  display:block; font-size:.5em; font-weight:400; letter-spacing:.12em;
  margin-top:16px; color:var(--yuzu-soft);
}
.hero-tagline:empty{display:none}
.hero-lead{
  font-size:clamp(15px,1.9vw,18px); line-height:2; color:#f2f6ee;
  max-width:640px; margin:0 auto 30px; text-shadow:0 1px 8px rgba(20,32,22,.35);
}
.hero-badges{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:34px}
/* 認定・登録の表示をひとまとまりに整理する (2026-08-23)。
   連合のロゴを中央に置き、その下に4つのバッジを同じ幅でそろえて並べる。
   幅がそろうと行の折り返しがばらつかず、視線が縦に流れて読みやすい。
   サブページの .page-hero .hero-badges には影響させない。 */
.hero-cert{
  display:flex; flex-direction:column; align-items:center;
  gap:16px; margin-bottom:34px;
}
.hero .hero-badges{
  display:grid; grid-template-columns:1fr; gap:10px;
  width:100%; max-width:430px; margin:0 auto;
}
.hero .hero-badges .badge{
  display:flex; align-items:center; justify-content:center; gap:6px;
  text-align:center; line-height:1.55; padding:11px 16px; min-height:46px;
}
@media (min-width:760px){
  .hero-cert{gap:18px}
  .hero .hero-badges{grid-template-columns:repeat(2,1fr); max-width:720px; gap:12px}
}
/* 「日本で最も美しい村」のバッジの左横に、連合のロゴを並べる (2026-08-22)。
   ロゴは縦長なので、バッジの中に入れると小さくなりすぎる。バッジと横並びに
   置き、写真の上でも見えるよう白い下地(角丸)に載せる。 */
/* ロゴ自体もバッジと同じ説明ページへのリンクにする (2026-08-22)。
   押せることが分かるよう、バッジと同じ「浮き上がる」動きをつける。 */
.hero-cert .village-logo-link{
  display:block; flex:0 0 auto; text-decoration:none; border-radius:10px;
  transition:transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.hero-cert .village-logo-link:hover{transform:translateY(-2px)}
.hero-cert .village-logo-link:hover .village-logo{box-shadow:0 6px 20px rgba(0,0,0,.38)}
.hero-cert .village-logo-link:focus-visible{outline:3px solid #fff; outline-offset:3px}
/* ロゴはバッジの左の空きスペースを使えるだけ大きく見せる。縦長なので高さで
   決め、画面幅に応じて伸縮させる (狭い画面では小さく、広い画面では大きく)。 */
.hero-cert .village-logo{
  height:clamp(104px, 14vw, 150px); width:auto; flex:0 0 auto; display:block;
  background:#fff; border-radius:10px; padding:6px 7px;
  box-shadow:0 3px 14px rgba(0,0,0,.3);
}
@media (max-width:520px){
  .hero-cert .village-logo{height:104px; border-radius:9px; padding:5px 6px}
}
.hero-badges .badge{
  font-size:12.5px; padding:8px 16px; border-radius:22px; font-weight:500;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.45); color:#fff;
  backdrop-filter:blur(2px);
}
a.badge{text-decoration:none; cursor:pointer; transition:background .15s, transform .15s, border-color .15s}
a.badge:hover, a.badge:focus-visible{background:rgba(255,255,255,.26); border-color:#fff; transform:translateY(-2px)}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* =========================================================
   ボタン
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body,'Noto Sans JP',sans-serif); font-weight:700; font-size:15px;
  padding:15px 32px; border-radius:32px; text-decoration:none; cursor:pointer;
  border:none; transition:transform .15s, box-shadow .15s, background .2s;
  min-height:52px;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--yuzu-cta); color:#fff; box-shadow:0 6px 18px rgba(178,89,0,.4)}
.btn-primary:hover{background:#B25900; box-shadow:0 9px 24px rgba(178,89,0,.5)}
.btn-outline{background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.7)}
.btn-outline:hover{background:rgba(255,255,255,.18); border-color:#fff}
.btn-tea{background:var(--tea); color:#fff}
.btn-tea:hover{background:var(--tea-deep)}

/* =========================================================
   レイアウト共通
   ========================================================= */
main{overflow:hidden}
.section{padding:76px 24px}
.wrap{max-width:1120px; margin:0 auto}
.wrap-narrow{max-width:820px; margin:0 auto}
.section.alt{background:var(--white)}
.section.tea-band{
  background:linear-gradient(135deg,var(--tea) 0%,var(--tea-deep) 100%);
  color:#fff;
}

.eyebrow{
  text-align:center; letter-spacing:.28em; font-size:12px; font-weight:700;
  color:var(--yuzu-cta); margin-bottom:10px; text-transform:uppercase;
}
.tea-band .eyebrow{color:var(--yuzu-soft)}
.section-title{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  text-align:center; font-size:clamp(24px,3.4vw,32px); font-weight:var(--font-weight-heading,600);
  color:var(--tea-text); margin-bottom:14px; position:relative; padding-bottom:20px;
}
.tea-band .section-title{color:#fff}
.section-title::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:64px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, transparent, var(--yuzu), transparent);
}
.section-subtitle{
  text-align:center; color:var(--muted); font-size:15px; margin:0 auto 46px;
  max-width:640px; line-height:1.9;
}
.tea-band .section-subtitle{color:#eaf1e4}

/* 茶の葉 区切り */
.leaf-divider{
  display:flex; align-items:center; justify-content:center; gap:14px;
  max-width:260px; margin:0 auto 44px;
}
.leaf-divider::before, .leaf-divider::after{
  content:''; flex:1; height:2px;
  background:linear-gradient(90deg, transparent, var(--leaf-soft));
}
.leaf-divider::after{background:linear-gradient(90deg, var(--leaf-soft), transparent)}
.leaf-divider .leaf{
  width:22px; height:22px; flex-shrink:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 6C18 14 12 26 12 38c0 9 7 16 18 16s18-7 18-16C48 26 42 14 30 6z' fill='%237C9A6B'/%3E%3Cpath d='M30 12v40' stroke='%233A5A40' stroke-width='2.4' fill='none'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat; background-position:center;
}

/* =========================================================
   4大ボタン(買う / 食べる / 巡る / 知る)— 最重要
   ========================================================= */
.gateway{background:var(--cream)}
.gateway-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
@media (max-width:900px){.gateway-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.gateway-grid{grid-template-columns:1fr}}

/* 参加するカードの隣の余白いっぱいに交流ステーションのロゴを表示 */
.gate-logo-panel{
  grid-column:span 2;
  display:flex; align-items:center; justify-content:center;
}
.gate-logo-panel img{width:100%; max-width:440px; height:auto; object-fit:contain}
/* モバイル(2列/1列)は6枚のカードだけで余白なく揃うため非表示 */
@media (max-width:900px){.gate-logo-panel{display:none}}

.gate-card{
  --c:var(--tea);
  display:flex; flex-direction:column;
  background:#fff; border-radius:18px; overflow:hidden; text-decoration:none;
  border:1px solid var(--border);
  box-shadow:0 3px 14px rgba(43,43,43,.06);
  transition:transform .18s, box-shadow .18s;
}
.gate-card:hover{transform:translateY(-6px); box-shadow:0 14px 30px rgba(43,43,43,.14)}
.gate-visual{
  height:130px; position:relative; overflow:hidden;
  background:var(--c);
}
/* カテゴリ別ビジュアル(SVGパターン) */
.gate-card.buy  .gate-visual{background:linear-gradient(135deg,#649A6C,#3F6E4A)}
.gate-card.eat  .gate-visual{background:linear-gradient(135deg,#E59245,#B25900)}
.gate-card.walk .gate-visual{background:linear-gradient(135deg,#7BA9C8,#457799)}
.gate-card.know .gate-visual{background:linear-gradient(135deg,#AC8B74,#835F44)}
.gate-card.view .gate-visual{background:linear-gradient(135deg,#E6C287,#4D8156)}
.gate-card.join .gate-visual{background:linear-gradient(135deg,#B25900,#A85800)}
.gate-visual::after{
  content:''; position:absolute; inset:0; opacity:.5;
  /* 畝ストライプ模様 */
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.12) 0 8px, transparent 8px 20px);
}
.gate-icon{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:44px; z-index:2; filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
/* ブランドロゴ入りビジュアル(食べる=wazukanoSATOカフェ等)。余白なしで枠いっぱいに表示 */
.gate-visual.has-logo .gate-icon{display:none}
.gate-visual .gate-logo{
  position:absolute; inset:0;
  z-index:2; display:none;
  width:100%; height:100%; object-fit:cover;
}
.gate-visual.has-logo .gate-logo{display:block}
/* 食べるカードのロゴはバナー画像(ロゴ+写真の横長合成)のため、
   クロップせず全体を見せる(2026-08-02、他のゲートカードは cover のまま維持)。 */
.gate-card.eat .gate-logo{object-fit:contain; background:rgba(0,0,0,.04)}
/* 食べるカード: バナー内のコーヒーカップから湯気がふわっと立ちのぼる控えめな
   アニメーション(2026-08-21)。画像自体は静止画のため、object-fit:contain と
   同じ見た目になるよう aspect-ratio 固定のフレームを重ね、その中の実座標
   (カップの湯気位置、画像1281x529中のおよそ x=41.8-46.8%, y=1.9-18%)に
   合わせて湯気(wisp)を配置し上昇+フェードでループさせる。*/
.gate-card.eat .gate-logo-frame{
  position:absolute; inset:0; margin:auto;
  aspect-ratio:1281/529;
  /* ⚠ もとは height:100%; width:auto だったが、それだと高さ基準で幅が決まるため、
     枠より横長のこのロゴでは幅が枠を超えて右端が切れていた(2026-09-23 に是正)。
     max-width/max-height の両方で抑えると、枠に収まる最大サイズ＝object-fit:contain
     と同じ見え方になる。 */
  width:100%; height:auto;
  max-width:100%; max-height:100%;
}
.gate-card.eat .gate-logo-frame .gate-logo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.cafe-steam{
  position:absolute; left:40%; top:-4%; width:10%; height:24%;
  pointer-events:none; z-index:3; overflow:visible;
}
.cafe-steam .wisp{
  position:absolute; bottom:0; left:50%;
  width:38%; height:55%; border-radius:50%;
  /* もとは白グラデーションだったが、バナー自体が白系の背景で、カップの
     湯気マークも黒い線画のため、白い湯気は背景に溶けてほぼ見えなかった。
     線画と馴染む濃いインク色に変え、はっきり見えるようにする(2026-08-24)。 */
  background:radial-gradient(ellipse at center, rgba(42,38,34,.78) 0%, rgba(42,38,34,0) 72%);
  filter:blur(1.4px);
  opacity:0;
  animation:cafe-steam-rise 3.2s ease-in-out infinite;
}
.cafe-steam .wisp.w2{left:28%; width:30%; animation-delay:.9s; animation-duration:3.6s}
.cafe-steam .wisp.w3{left:72%; width:28%; animation-delay:1.8s; animation-duration:3s}
@keyframes cafe-steam-rise{
  0%{transform:translate(-50%,20%) scale(.6); opacity:0}
  18%{opacity:.75}
  55%{opacity:.4}
  100%{transform:translate(-50%,-170%) scale(1.2); opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .cafe-steam .wisp{animation:none; opacity:0}
}

/* 食べるカード: 「wazukanoSATOカフェ」ロゴの sato の4文字(S/A/T/O)を、
   元画像から色ごとに切り抜いた同じ絵柄の画像を寸分違わず同じ位置に重ね、
   1文字ずつ順番に軽くバウンドさせる(2026-08-24 ご指示)。
   台紙(元画像)側の文字はそのまま(桜柄の地紋を壊さないよう非破壊)。
   transform-origin を文字の下端中央にし、scale は必ず1以上のみ動かす
   ことで、重ねた文字が拡大しても常に元の文字を覆い隠したまま保つ
   (縮小方向や平行移動を使うと、下の元の文字がわずかに透けて二重に
   見えてしまうため、拡大方向のみに限定している)。
   座標は画像1281×529中の実測ピクセルを % に換算:
   S x121-225 y198-332 / A x242-367 y203-329 / T x376-482 y170-325 / O x497-618 y203-331 */
.cafe-sato{position:absolute; inset:0; pointer-events:none; z-index:2}
.sato-letter{
  position:absolute; display:block;
  transform-origin:50% 100%;
  animation:letter-hop 2.6s ease-in-out infinite;
}
.sato-letter.sato-s{left:9.4458%; top:37.4292%; width:8.1186%; height:25.3308%; animation-delay:0s}
.sato-letter.sato-a{left:18.8915%; top:38.3744%; width:9.7580%; height:23.8185%; animation-delay:.22s}
.sato-letter.sato-t{left:29.3521%; top:32.1361%; width:8.2748%; height:29.3006%; animation-delay:.44s}
.sato-letter.sato-o{left:38.8009%; top:38.3744%; width:9.4457%; height:24.1966%; animation-delay:.66s}
@keyframes letter-hop{
  0%,100%{transform:scale(1)}
  15%{transform:scale(1.18)}
  30%{transform:scale(1.05)}
  45%{transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .sato-letter{animation:none}
}


/* 見るカードも「（写真：〜）」のキャプションを焼き込んだバナー画像のため、
   cover だと130px枠でキャプションが中央クロップされ文字が半分切れていた。
   食べるカードと同じく contain で全体表示する(2026-08-16)。
   食べるカードと違い親の gate-visual が金→緑の斜めグラデーションなので、
   ほぼ透明な rgba(0,0,0,.04) だと左右の余白にグラデーションが透けて
   左端が茶色・右端が緑の二色に見えてしまっていた。--tea の不透明な
   深緑で完全に覆い、余白を緑一色に統一する(2026-08-17)。 */
/* 見るカード: 以前は contain で全体表示していたが、写真の比率と枠の比率が
   合わず上下に緑の帯が出てしまっていた。写真を茶畑中心の 2.5:1 に作り直した
   うえで cover にし、枠いっぱいに隙間なく収める(2026-08-24 ご指示)。
   枠の比率は画面幅で 約2.0:1(PC) 〜 約2.56:1(スマホ) と大きく変わるため、
   fill(引き伸ばし)だと PC で24%も縦に伸びてしまう。cover なら歪みは一切
   出ず、はみ出た分だけが切り落とされる。キャプション「（写真：白栖の茶畑）」は
   画像の中央 x300〜690 にあり、最も狭い PC 幅でも表示範囲 x97〜898 に収まる。
   background は画像読み込み前の下地としてそのまま残す。 */
.gate-card.view .gate-logo{object-fit:cover; background:var(--tea)}
.gate-body{padding:22px 22px 26px; display:flex; flex-direction:column; flex:1}
.gate-body h3{
  font-family:var(--font-heading,'Noto Serif JP',serif); font-size:21px; color:var(--c);
  margin-bottom:8px; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
}
.gate-body h3 .en{font-family:var(--font-body,'Noto Sans JP',sans-serif); font-size:11px; letter-spacing:.15em; color:var(--muted); font-weight:500}
.gate-body p{font-size:14px; color:var(--muted); line-height:1.8; flex:1}
.gate-more{
  margin-top:16px; font-family:var(--font-body,'Noto Sans JP',sans-serif); font-size:13.5px; font-weight:700;
  color:var(--c); display:inline-flex; align-items:center; gap:6px;
}
.gate-more::after{content:'→'; transition:transform .18s}
.gate-card:hover .gate-more::after{transform:translateX(4px)}

/* =========================================================
   カード(汎用)
   ========================================================= */
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px}
.card{
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:28px;
  box-shadow:0 2px 10px rgba(43,43,43,.05);
}
.card h3{font-size:19px; color:var(--tea-text); margin-bottom:10px}
.card p{color:var(--muted); font-size:14.5px; line-height:1.85}

/* =========================================================
   和束の郷とは(ストーリー + スタッフ)
   ========================================================= */
/* ⚠ もとは align-items:center だったが、右側の写真が5枚に増えて列が 2451px になり、
   背の低い左の文章(351px)がその中央＝1000px 以上も下へ押し下げられていた(2026-09-23 に是正)。
   上ぞろえにして、文章が見出しのすぐ下から始まるようにする。 */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start}
@media (max-width:820px){.about-grid{grid-template-columns:1fr; gap:32px}}
.about-text h2{
  font-family:var(--font-heading,'Noto Serif JP',serif); font-size:clamp(22px,3vw,28px); color:var(--tea-text);
  margin-bottom:18px; line-height:1.6;
}
.about-text p{color:var(--text); font-size:15px; line-height:2; margin-bottom:16px}
.about-text .accent{color:var(--yuzu-cta); font-weight:700}

/* 大判ビジュアル(石寺の茶畑イメージ / CSS) */
.about-visual{
  border-radius:18px; overflow:hidden; position:relative;
  min-height:300px; border:1px solid var(--border);
  background:linear-gradient(180deg,#E6F2DE 0%, #C7DCB4 32%, #90B37E 60%, #4D8156 100%);
}
.about-visual::before{
  content:''; position:absolute; left:-10%; right:-10%; bottom:0; height:64%;
  background:repeating-linear-gradient(88deg,
    #35543B 0 12px, #43664A 12px 24px, #517457 24px 36px, #43664A 36px 48px);
  transform:perspective(500px) rotateX(56deg);
  transform-origin:bottom center;
}
.about-visual .ph-tag{position:absolute; left:12px; top:12px; z-index:3}

.staff-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:52px}
@media (max-width:640px){.staff-grid{grid-template-columns:1fr}}
.staff-card{
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:24px;
  display:flex; gap:18px; align-items:flex-start;
  box-shadow:0 2px 10px rgba(43,43,43,.05);
}
.staff-photo{
  width:84px; height:84px; border-radius:50%; flex-shrink:0; position:relative;
  background:radial-gradient(circle at 40% 35%, var(--leaf-soft), var(--leaf) 70%, var(--tea));
  display:flex; align-items:center; justify-content:center; font-size:34px;
  border:3px solid var(--yuzu-soft);
}
.staff-info .role{font-family:var(--font-body,'Noto Sans JP',sans-serif); font-size:12px; color:var(--yuzu-cta); font-weight:700; letter-spacing:.08em}
.staff-info .name{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:19px; color:var(--tea-text); margin:2px 0 10px}
.staff-info .comment{font-size:14px; color:var(--text); line-height:1.85}
.staff-info .comment.handwrite{color:var(--brown); font-size:15px}

/* =========================================================
   お知らせ
   ========================================================= */
.news-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:2px}
.news-item{
  display:flex; gap:20px; align-items:baseline; padding:20px 8px;
  border-bottom:1px solid var(--border); text-decoration:none; color:var(--text);
  transition:background .18s;
}
.news-item:hover{background:var(--cream)}
.news-date{font-family:var(--font-body,'Noto Sans JP',sans-serif); font-size:13px; color:var(--muted); flex-shrink:0; min-width:96px}
.news-cat{
  font-size:11.5px; font-weight:700; padding:3px 12px; border-radius:14px; flex-shrink:0;
  background:var(--leaf-soft); color:var(--tea-text);
}
.news-cat.event{background:var(--yuzu-soft); color:var(--yuzu-text)}
.news-title{font-size:15px; line-height:1.6}
@media (max-width:560px){
  .news-item{flex-wrap:wrap; gap:8px 14px}
  .news-title{flex-basis:100%}
}

/* =========================================================
   アクセス・営業案内
   ========================================================= */
.access-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
@media (max-width:820px){.access-grid{grid-template-columns:1fr}}
.info-table{width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(43,43,43,.05)}
.info-table th,.info-table td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--border); font-size:14.5px; vertical-align:top}
.info-table th{background:var(--tea); color:#fff; font-family:var(--font-body,'Noto Sans JP',sans-serif); font-weight:500; width:118px; white-space:nowrap}
.info-table tr:last-child th,.info-table tr:last-child td{border-bottom:none}
/* ⚠ 見出し列は nowrap にしているが、英語は語が長く（"12 constituent municipalities" 等）
   折り返せずに列が 331px まで広がり、狭い画面で表の右側が切れていた(2026-09-23 に是正)。
   スマホ幅では折り返しを許し、見出し列の幅も内容に合わせる。 */
@media (max-width:560px){
  .info-table th{white-space:normal; width:auto; max-width:42%; word-break:break-word}
  .info-table th,.info-table td{padding:12px 12px; font-size:14px}
}
.info-table .tel{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:22px; color:var(--yuzu-cta); font-weight:600; letter-spacing:.02em}
.hours-note{
  margin-top:14px; font-size:13px; color:var(--muted); line-height:1.8;
  background:#fff; border-left:4px solid var(--yuzu); border-radius:6px; padding:12px 16px;
}
.tax-note{font-size:12.5px; color:var(--muted); margin-top:10px}

/* Google Map プレースホルダー */
.map-ph{
  border-radius:16px; overflow:hidden; min-height:320px; position:relative;
  border:1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(124,154,107,.18), rgba(58,90,64,.12)),
    repeating-linear-gradient(0deg,#eef2e8 0 24px,#e6ecdd 24px 25px),
    repeating-linear-gradient(90deg,#eef2e8 0 24px,#e6ecdd 24px 25px);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; text-align:center; padding:24px;
}
.map-ph .pin{font-size:44px}
.map-ph .map-label{font-family:var(--font-body,'Noto Sans JP',sans-serif); font-size:14px; color:var(--tea-text); font-weight:700}

/* =========================================================
   暫定イメージ写真(フリー素材)— 実写真差し替え前の仮素材
   ※ 実際の店舗写真ではないことを示す小さな注記を必ず添える
   ========================================================= */
.img-note{
  position:absolute; left:10px; bottom:10px; z-index:5;
  font-size:11px; line-height:1.45; color:#fff; font-weight:500;
  background:rgba(43,43,43,.58); border-radius:5px; padding:3px 9px;
  letter-spacing:.02em; max-width:calc(100% - 20px);
}
@supports (backdrop-filter:blur(2px)){.img-note{backdrop-filter:blur(2px)}}

/* 写真に重ねる wazukanoSATO カフェ ロゴバッジ */
.photo-logo-badge{
  position:absolute; top:14px; right:14px; z-index:5;
  height:64px; width:auto; object-fit:contain;
  background:#fff; border-radius:10px; padding:6px 10px;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
}
@media (max-width:520px){.photo-logo-badge{height:48px; padding:5px 8px}}

/* ヒーロー背景は「朝あけ」の写真を横スワイプで見せる。
   写真そのものは .hero-slides (z-index:0)、その上に読みやすさのための
   オーバーレイ (::after, z-index:1)、いちばん上に文字 (.hero-inner, z-index:2)。 */
.hero.has-photo{
  background:linear-gradient(180deg,#54785A,#4D8156);   /* 写真が来るまでの下地 */
}
.hero.has-photo::before{display:none}
.hero-slides{
  position:absolute; inset:0; z-index:0;
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain; scrollbar-width:none;
}
.hero-slides::-webkit-scrollbar{display:none}
.hero-slide{
  flex:0 0 100%; height:100%; scroll-snap-align:center;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
/* 写真の上に重ねる減光。
   全面を濃くすると写真そのものが暗く見えてしまうので、全面は薄くとどめ、
   文字が集まる中ほどだけ楕円で落とす。実測 (scratchpad/contrast2.py):
   全面を濃くしていた頃は写真の周辺が輝度 5.0% まで沈んでいたが、この形なら
   10.3% と 2倍明るくなり、文字の当たる部分は最悪 3.68:1 を保つ
   (大きな文字の WCAG AA 基準 3.0:1 を上回る)。細かい文字は下の影で補う。 */
.hero.has-photo::after{
  z-index:1;
  background:
    radial-gradient(78% 62% at 50% 46%, rgba(18,32,22,.28), transparent 78%),
    linear-gradient(180deg,
      rgba(18,32,22,.24) 0%, rgba(18,32,22,.12) 34%,
      rgba(18,32,22,.16) 66%, rgba(18,32,22,.28) 100%),
    radial-gradient(60% 40% at 20% 18%, rgba(255,244,214,.24), transparent 60%);
}
/* 減光を薄くしたぶん、文字は影で輪郭を立てて読ませる。
   近くの濃い影で縁取り、遠くのぼかしで背景から浮かせる二段構え。 */
.hero.has-photo .hero-inner{
  /* 写真を明るくしたぶん、文字は「輪郭+落ち影」で形を保たせる。
     上下左右の 1px の濃い影が縁取りになるので、背景が白飛びした空でも
     文字が消えない (2026-08-22)。 */
  text-shadow:
    -1px -1px 0 rgba(8,14,10,.62),
     1px -1px 0 rgba(8,14,10,.62),
    -1px  1px 0 rgba(8,14,10,.62),
     1px  1px 0 rgba(8,14,10,.62),
    0 2px 6px rgba(0,0,0,.82),
    0 6px 22px rgba(0,0,0,.7);
}
/* ボタン(「ご来店案内・アクセス」など)は、はっきりした背景色や枠を持つので
   文字に縁取りは不要。上の .hero-inner から受け継ぐ縁取りを打ち消して、
   通常の文字にする (2026-08-23 ご指示)。 */
.hero.has-photo .hero-inner .btn{text-shadow:none}

/* 文字の上をなぞってもスライドを送れるように、リンク以外はタッチを下へ通す */
.hero.has-photo .hero-inner{pointer-events:none}
.hero.has-photo .hero-inner a,
.hero.has-photo .hero-inner .badge,
.hero.has-photo .hero-inner .btn{pointer-events:auto}
/* ヒーローの文章のすぐ下に置く、石寺の茶畑のドローン映像。
   最初は写真＋再生ボタンだけを出し、押されてから YouTube を読み込む
   (トップに iframe を常設すると開いただけで重くなるため)。 */
.hero-video{
  max-width:600px; margin:26px auto 0; pointer-events:auto;
}
.hero-video-play{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  padding:0; border:1px solid rgba(255,255,255,.34); border-radius:14px;
  background-size:cover; background-position:center; background-color:#365241;
  cursor:pointer; overflow:hidden; -webkit-tap-highlight-color:transparent;
  box-shadow:0 10px 30px rgba(0,0,0,.34);
  transition:border-color .18s ease, transform .18s ease;
}
.hero-video-play::before{      /* 写真を少し落として、文字と再生印を立たせる */
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,22,15,.07) 0%, rgba(12,22,15,.30) 100%);
}
.hero-video-play:hover{border-color:rgba(255,255,255,.7); transform:translateY(-2px)}
.hero-video-play:focus-visible{outline:2px solid #fff; outline-offset:3px}
.hero-video-play .hvp-icon{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%; display:flex;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,.94); color:var(--tea-text); font-size:20px;
  padding-left:4px; box-shadow:0 4px 16px rgba(0,0,0,.34);
}
.hero-video-play .hvp-text{
  position:absolute; left:0; right:0; bottom:12px;
  font-family:var(--font-heading); font-size:14px; letter-spacing:.08em;
  color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.hero-video iframe{
  width:100%; aspect-ratio:16/9; border:0; border-radius:14px; display:block;
  box-shadow:0 10px 30px rgba(0,0,0,.34);
}
.hero-video-note{
  margin:9px 0 0; font-size:11.5px; letter-spacing:.08em;
  color:rgba(255,255,255,.8);
}
@media (max-width:520px){
  .hero-video{margin-top:20px}
  .hero-video-play .hvp-icon{width:50px; height:50px; font-size:17px}
  .hero-video-play .hvp-text{font-size:12.5px; bottom:10px}
  .hero-video-note{font-size:11px}
}

/* 何枚あるか・今どこかを示す点。タップでもその写真へ移動できる */
.hero-arrow{
  display:none;
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:4; width:56px; height:56px; padding:0; border-radius:50%;
  align-items:center; justify-content:center;
  background:rgba(20,32,22,.42); border:2px solid rgba(255,255,255,.85);
  color:#fff; cursor:pointer;
  transition:background .18s ease, transform .18s ease, border-color .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.hero-arrow:hover{background:rgba(20,32,22,.64); border-color:#fff; transform:translateY(-50%) scale(1.08)}
.hero-arrow:focus-visible{outline:2px solid #fff; outline-offset:3px}
.hero-arrow:disabled{opacity:.32; cursor:default; pointer-events:none}
.hero-arrow-prev{left:22px}
.hero-arrow-next{right:22px}
/* ドットクリックだけでは画像を送りにくい PC (マウス操作) 向けの導線。
   スマホはスワイプで十分に送れるので 901px 以上でのみ表示する。 */
@media (min-width:901px){
  .hero.has-photo .hero-arrow{display:flex}
}
.hero-dots{
  position:absolute; left:0; right:0; bottom:14px; z-index:3;
  display:flex; justify-content:center; gap:18px;
}
.hero-dot{
  width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.75); background:transparent;
  -webkit-tap-highlight-color:transparent; transition:background .18s ease, transform .18s ease;
  /* 点そのものは 8px のままにして、指で押せる範囲だけ ::before で 36px に広げる
     (2026-09-23)。見た目を変えずに押し間違いを減らす。 */
  position:relative;
}
.hero-dot::before{content:''; position:absolute; inset:-14px; border-radius:50%}
.hero-dot.is-current{background:#fff; transform:scale(1.25)}
.hero-dot:focus-visible{outline:2px solid #fff; outline-offset:3px}
@media (max-width:520px){
  .hero-dots{bottom:11px; gap:18px}
  .hero-dot{width:7px; height:7px}
}
.hero .img-note{left:auto; right:12px; bottom:12px}

/* =========================================================
   写真の上に載るヒーローの文字 (2026-08-22)
   写真を明るくしたぶん、白い文字が空に溶けて読みにくくなっていた。
   原因は .hero h1 / .hero-lead が各自 text-shadow を持っており、
   .hero.has-photo .hero-inner に指定した輪郭を打ち消していたこと。
   ここで写真ありのときだけ、主要な文字へ輪郭を指定し直す。
   写真そのものの明るさは変えない (減光は増やさない)。
   ========================================================= */
.hero.has-photo .hero-eyebrow,
.hero.has-photo h1 .sub,
.hero.has-photo .hero-lead{
  /* -webkit-text-stroke + paint-order も試したが、この構成 (写真の上・
     filter 付き要素の近く) では描画が崩れる環境があったため採用しない。
     輪郭は多重の text-shadow だけで作る (2026-08-22)。 */
  text-shadow:
    -1px -1px 0 rgba(8,14,10,.78),  1px -1px 0 rgba(8,14,10,.78),
    -1px  1px 0 rgba(8,14,10,.78),  1px  1px 0 rgba(8,14,10,.78),
     0   -1px 0 rgba(8,14,10,.62),  0    1px 0 rgba(8,14,10,.62),
    -1px  0   0 rgba(8,14,10,.62),  1px  0   0 rgba(8,14,10,.62),
    0 2px 9px rgba(0,0,0,.86),
    0 8px 28px rgba(0,0,0,.62);
}

/* 淡い色のままだと明るい空に負けるので、写真の上では白へ寄せる。
   文字の線も少し太らせて、細い明朝体が飛ばないようにする。 */
/* 見出し「茶畑がつくる、この町の物語。」は白字のみ。
   黒い縁取りは付けない (2026-08-23 ご指示)。輪郭にならない
   やわらかい影だけを残し、写真の上でも文字が沈まないようにする。 */
.hero.has-photo h1{
  color:#FFFFFF;
  text-shadow:0 2px 16px rgba(20,32,22,.45);
}
.hero.has-photo h1 .sub{color:#FFFFFF}
/* タグラインも黒い縁取りは付けない (2026-08-23 ご指示)。
   見出しと同じ、輪郭にならないやわらかい影だけを残す。 */
.hero.has-photo .hero-tagline{
  color:#FFF4E2; font-weight:500;
  text-shadow:0 2px 14px rgba(20,32,22,.45);
}
.hero.has-photo .hero-lead{color:#FFFFFF; font-weight:500}
.hero.has-photo .hero-eyebrow{color:#FFFFFF}
/* 文字の背後に減光を敷く案は採らない。実測で写真全体の明るさが
   敷き .34 → 12.7% / 敷き .16 → 13.9% と落ちてしまい、
   「明るさは変えずに文字を読みやすく」という要件に反するため。
   読ませる仕事は上の輪郭 (text-shadow の 8 方向) だけに任せ、
   写真は 15.2% のまま一切暗くしない (2026-08-22)。 */


/* aboutビジュアルに暫定の茶畑写真 */
.about-visual.has-photo{background:#4D8156}

.about-visual.has-photo::before{display:none}
.about-visual.has-photo img{
  position:absolute; inset:0; width:100%; height:100%;
  min-height:300px; object-fit:cover; display:block;
}

/* 「和束の郷とは」の写真は2枚。2枚目 (店内) は説明文のあとに間をあけて置く。
   左右の看板まで説明文で触れているので、cover で切り落とさず写真そのものの
   縦横比で全体を見せる。1枚目 (外観) は従来どおり cover のまま。
   上の .about-visual.has-photo img より詳細度を1つ上げて確実に上書きする。 */
.about-visual-block .about-visual.about-visual-2,
.about-visual-block .about-visual.about-visual-3,
.about-visual-block .about-visual.about-visual-4,
.about-visual-block .about-visual.about-visual-5{margin-top:26px; min-height:0; height:auto}
.about-visual-block .about-visual.about-visual-2 img,
.about-visual-block .about-visual.about-visual-3 img,
.about-visual-block .about-visual.about-visual-4 img,
.about-visual-block .about-visual.about-visual-5 img{
  position:static; inset:auto; width:100%; height:auto; min-height:0;
  object-fit:fill; display:block;
}
@media (max-width:820px){
  .about-visual-block .about-visual.about-visual-2,
  .about-visual-block .about-visual.about-visual-3,
  .about-visual-block .about-visual.about-visual-4,
  .about-visual-block .about-visual.about-visual-5{margin-top:20px}
}
.about-visual.has-photo .ph-tag{left:auto; right:12px; top:auto; bottom:12px}

/* 天空の茶畑の写真の下に置く紹介文。.about-visual は img を inset:0 で
   覆う箱なので、紹介文は箱の外側 (.about-visual-block) に置いて縦に並べる。 */
.about-visual-desc{
  margin:14px 2px 0; color:var(--muted); font-size:13.5px; line-height:1.95;
}

/* 商品カード / 御膳カードのビジュアルに暫定写真 */
.product-visual.has-photo img, .zen-visual.has-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
}
/* 卵かけご飯・日替わりランチのサマリーカードはバナー画像(ロゴ+写真の横長合成)のため、
   クロップせず全体を見せる(2026-08-02、他のカードは cover のまま維持)。
   ★ 日替わりランチ(.lunch)は以前 data-edit-img-fill="" による background-image
   方式で描画していたが、卵かけご飯(.tkg)と同じ「子 <img> + data-edit-img」方式へ
   統一した(2026-08-05)。編集UI(editor.js)が子 <img> を生成する方式なのに対し、
   閲覧側(content-loader.js)だけが background 方式だったため、写真を差し替えると
   描画が食い違う状態だった。両カードとも同一セレクタで contain 指定できる。
   background-size の指定は方式統一により不要になったため削除。 */
.zen-visual.tkg.has-photo img,
.zen-visual.lunch.has-photo img,
.zen-visual.oyako.has-photo img,
.zen-visual.curry.has-photo img,
.zen-visual.tofu.has-photo img{object-fit:contain; background:rgba(0,0,0,.04)}
.product-visual.has-photo::after, .zen-visual.has-photo::after{opacity:.15}
.product-visual.has-photo .pv-svg, .zen-visual.has-photo .zen-icon{display:none}
.product-visual.has-photo .pv-tag, .zen-visual.has-photo .zen-badge{z-index:4}

/* =========================================================
   プレースホルダー注記
   ========================================================= */
.placeholder-note, .ph-tag{
  display:inline-block; font-size:12px; line-height:1.5;
  background:#FFF3D6; color:#8A5A00; border:1px solid var(--yuzu-soft); border-radius:6px;
  padding:4px 10px;
}
.placeholder-note{margin-bottom:12px}
/* 写真が設定された(.has-photo が付いた)コンテナ内では、
   差し替え待ちの注記は用済みなので常に隠す */
.has-photo .placeholder-note{display:none !important}

/* =========================================================
   フッター
   ========================================================= */
.site-footer{
  background:var(--tea-deep); color:#E6EFE1; padding:56px 24px 30px;
  font-size:13.5px;
}
.site-footer::before{
  content:''; display:block; height:3px; max-width:1120px; margin:0 auto 40px;
  background:linear-gradient(90deg, transparent, var(--yuzu) 50%, transparent);
}
.footer-inner{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px}
@media (max-width:760px){.footer-inner{grid-template-columns:1fr; gap:28px}}
.footer-brand .fb-logo{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:20px; color:#fff; letter-spacing:.08em; margin-bottom:12px}
.footer-brand p{font-size:13px; line-height:1.9; color:#E6EFE1}
.footer-col h2,.footer-col h4{font-family:var(--font-body,'Noto Sans JP',sans-serif); font-size:13px; color:var(--yuzu-soft); letter-spacing:.1em; margin-bottom:14px; font-weight:700}
.footer-col a{display:block; text-decoration:none; color:#EDF3E9; padding:5px 0; font-size:13.5px}
.footer-col a:hover{color:#fff}
.footer-sns{display:flex; gap:12px; margin-top:14px}
.footer-sns a{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:center; text-decoration:none; color:#fff; font-size:13px; font-weight:700;
}
.footer-sns a:hover{background:var(--yuzu); border-color:var(--yuzu)}
.footer-bottom{
  max-width:1120px; margin:40px auto 0; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center;
}
.footer-bottom .copy{color:#DCE8D6; font-size:12px}
.footer-bottom .fb-links{display:flex; gap:18px; flex-wrap:wrap}
.footer-bottom .fb-links a{color:#E6EFE1; text-decoration:none; font-size:12.5px}
.footer-bottom .fb-links a:hover{color:#fff}

@media (max-width:600px){
  .section{padding:52px 20px}
  .hero{padding:64px 20px 72px}
  .card{padding:22px}
}

/* =========================================================
   サブページ共通ヒーロー(買う / 食べる 等)
   ========================================================= */
.page-hero{
  position:relative; overflow:hidden;
  color:#fff; text-align:center; padding:66px 24px 72px;
  background:linear-gradient(135deg,var(--tea) 0%, var(--tea-deep) 100%);
  background-size:cover; background-position:center;
}
/* カテゴリ別の色分け */
.page-hero.buy{background:linear-gradient(135deg,#649A6C 0%, #3F6E4A 100%)}
.page-hero.eat{background:linear-gradient(135deg,#E59245 0%, #B25900 100%)}
.page-hero.walk{background:linear-gradient(135deg,#7BA9C8 0%, #457799 100%)}
.page-hero.know{background:linear-gradient(135deg,#AC8B74 0%, #835F44 100%)}
.page-hero.view{background:linear-gradient(135deg,#E6C287 0%, #4D8156 100%)}
.page-hero.village{background:linear-gradient(135deg,#9BB78B 0%, #4D8156 100%)}
.page-hero.heritage{background:linear-gradient(135deg,#C1735B 0%, #854D39 100%)}
.page-hero.ujicha{background:linear-gradient(135deg,#6C9B5D 0%, #3F6E4A 100%)}
.page-hero.landscape{background:linear-gradient(135deg,#CFB284 0%, #946F46 100%)}
/* 畝ストライプの気配 */
.page-hero::before{
  /* 背景に写真を敷いた場合でも白文字が読めるよう、常時薄暗いスクリムを重ねる
     (グラデーションのみの場合はほぼ目立たない濃さに調整済み)。
     2026-08-23: 一度 .13 まで薄くしたが、写真が明るくなりすぎたため元の .32 に戻した。 */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:rgba(0,0,0,.32);
}
.page-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.10) 0 8px, transparent 8px 22px);
}
.page-hero-inner{max-width:820px; margin:0 auto; position:relative; z-index:2}
.page-hero-eyebrow{
  letter-spacing:.3em; font-size:12px; font-weight:700;
  color:rgba(255,255,255,.85); margin-bottom:14px; text-transform:uppercase;
}
.page-hero h1{
  font-family:var(--font-heading,'Noto Serif JP',serif); font-weight:var(--font-weight-heading,600);
  font-size:clamp(28px,5vw,44px); letter-spacing:.08em; margin-bottom:16px;
  text-shadow:0 2px 14px rgba(20,32,22,.35);
  display:flex; align-items:baseline; justify-content:center; gap:14px; flex-wrap:wrap;
}
.page-hero h1 .en{
  font-family:var(--font-body,'Noto Sans JP',sans-serif); font-weight:500;
  /* 親の見出しが clamp() で可変なため .4em だと狭い画面で 10.9px まで下がっていた。
     11px を下限にする(2026-09-23)。 */
  font-size:max(11px, .4em);
  letter-spacing:.2em; color:rgba(255,255,255,.85);
}
.page-hero h1 .sub{
  flex-basis:100%; display:block; font-size:.5em; font-weight:400;
  letter-spacing:.14em; margin-top:8px; color:#f2f6ee;
}
.page-hero-lead{
  font-size:clamp(14.5px,1.8vw,17px); line-height:2; color:#f4f7f1;
  max-width:660px; margin:0 auto; text-shadow:0 1px 6px rgba(20,32,22,.3);
}
.page-hero .hero-badges{margin-top:26px; margin-bottom:0}
@media (max-width:600px){.page-hero{padding:50px 20px 56px}}

/* =========================================================
   買う — 商品カテゴリカード
   ========================================================= */
.product-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
@media (max-width:720px){.product-grid{grid-template-columns:1fr}}
.product-card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--border); border-radius:18px; overflow:hidden;
  box-shadow:0 3px 14px rgba(43,43,43,.06);
  transition:transform .18s, box-shadow .18s;
}
.product-card:hover{transform:translateY(-5px); box-shadow:0 14px 30px rgba(43,43,43,.13)}
.product-visual{
  height:170px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.product-visual.veg{background:linear-gradient(135deg,#9BB78B,#4D8156)}
.product-visual.tea{background:linear-gradient(135deg,#649A6C,#3F6E4A)}
.product-visual.jam{background:linear-gradient(135deg,#D6A15A,#B25900)}
.product-visual.craft{background:linear-gradient(135deg,#9A7B63,#835F44)}
.product-visual::after{
  content:''; position:absolute; inset:0; opacity:.45; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.12) 0 8px, transparent 8px 20px);
}
.product-visual .pv-svg{width:92px; height:92px; position:relative; z-index:2; filter:drop-shadow(0 3px 8px rgba(0,0,0,.22))}
.product-visual .pv-tag{
  position:absolute; left:14px; top:14px; z-index:3;
  font-family:var(--font-body,'Noto Sans JP',sans-serif); font-size:11.5px; font-weight:700; letter-spacing:.06em;
  color:#fff; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.5);
  padding:4px 12px; border-radius:14px; backdrop-filter:blur(2px);
}
.product-body{padding:24px 24px 26px; display:flex; flex-direction:column; flex:1}
.product-body h3{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:21px; color:var(--tea-text); margin-bottom:6px}
.product-copy{
  font-family:var(--font-heading,'Noto Serif JP',serif); color:var(--brown);
  font-size:15px; margin-bottom:12px;
}
.product-body p{font-size:14.5px; color:var(--muted); line-height:1.85; margin-bottom:14px}
.product-body .placeholder-note{margin-top:auto; margin-bottom:0}

/* 商品カードの「タップで商品例を見る」アコーディオン */
.product-more{
  margin-top:2px; margin-bottom:14px; border:1px solid var(--border); border-radius:12px;
  background:var(--cream); overflow:hidden;
}
.product-more summary{
  list-style:none; cursor:pointer; padding:12px 40px 12px 16px; position:relative;
  font-family:var(--font-body,'Noto Sans JP',sans-serif); font-size:13.5px; font-weight:700; color:var(--tea-text);
}
.product-more summary::-webkit-details-marker{display:none}
.product-more summary::after{
  content:'+'; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:19px; color:var(--leaf); transition:transform .2s;
}
.product-more[open] summary::after{content:'−'; color:var(--yuzu-cta)}
.product-more[open] summary{border-bottom:1px solid var(--border)}
.product-more .pm-list{padding:12px 16px 14px; margin:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.product-more .pm-list li{font-size:13.5px; color:var(--text); line-height:1.7; padding-left:18px; position:relative}
.product-more .pm-list li::before{content:'🍃'; position:absolute; left:0; top:1px; font-size:11px}
.product-more .pm-note{padding:0 16px 12px; font-size:12px; color:var(--muted); line-height:1.6}

/* =========================================================
   買う — 入荷・価格の注記カード
   ========================================================= */
.notice-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media (max-width:680px){.notice-grid{grid-template-columns:1fr}}
.notice-card{
  background:var(--cream); border:1px solid var(--border); border-radius:16px;
  padding:28px; text-align:center;
}
.notice-card .notice-icon{font-size:38px; margin-bottom:12px}
.notice-card h3{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:19px; color:var(--tea-text); margin-bottom:12px}
.notice-card p{font-size:14px; color:var(--muted); line-height:1.85; margin-bottom:10px}
.notice-card .notice-strong{
  font-size:15px; color:var(--yuzu-cta); font-weight:700; line-height:1.7;
  background:#fff; border:1px solid var(--yuzu-soft); border-radius:10px; padding:10px 14px;
}
.notice-card .notice-sub{font-size:12.5px; color:var(--muted); margin-bottom:0}

/* =========================================================
   食べる — 御膳カード
   ========================================================= */
.zen-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
@media (max-width:760px){.zen-grid{grid-template-columns:1fr}}
.zen-card{
  display:flex; flex-direction:column; background:#fff; text-decoration:none;
  border:1px solid var(--border); border-radius:18px; overflow:hidden;
  box-shadow:0 3px 14px rgba(43,43,43,.06);
  transition:transform .18s, box-shadow .18s;
}
.zen-card:hover{transform:translateY(-5px); box-shadow:0 14px 30px rgba(43,43,43,.13)}
.zen-visual{
  height:150px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#E0C79A,#B25900);
  background-size:contain; background-repeat:no-repeat; background-position:center;
}
/* 卵かけご飯・日替わりランチ・御膳のバナー画像(ロゴ+写真の横長合成、1281x529
   相当)は、コンテナが固定 height:150px のままだと object-fit:contain で
   小さく縮小され、周囲に大きな余白ができてしまう(2026-08-05 発覚)。
   コンテナ自体を画像の縦横比に合わせることで解消する。 */
.zen-visual.tkg,
.zen-visual.lunch,
.zen-visual.oyako,
.zen-visual.curry,
.zen-visual.tofu{height:auto; aspect-ratio:1281/529}
.zen-visual.lunch{background:linear-gradient(135deg,#C9A96B,#8A5A1E)}
.zen-visual.tkg{background:linear-gradient(135deg,#E8C878,#C98A2E)}
.zen-visual.oyako{background:linear-gradient(135deg,#E6C287,#A65E14)}
.zen-visual.unagi{background:linear-gradient(135deg,#7B5A3A,#4A2E18)}
.zen-visual.curry{background:linear-gradient(135deg,#8FB86C,#3E6B2E)}
.zen-visual.tofu{background:linear-gradient(135deg,#F3EFE3,#C9BFA0)}
.zen-visual.yasai{background:linear-gradient(135deg,#A9C97E,#5C8A3A)}
.zen-visual::after{
  content:''; position:absolute; inset:0; opacity:.4; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.12) 0 8px, transparent 8px 20px);
}
.zen-visual .zen-icon{font-size:52px; position:relative; z-index:2; filter:drop-shadow(0 3px 8px rgba(0,0,0,.28))}
.zen-visual .zen-ph{position:absolute; left:12px; bottom:12px; z-index:3; margin-bottom:0}
.zen-visual .zen-badge{
  position:absolute; right:14px; top:14px; z-index:3;
  font-family:var(--font-body,'Noto Sans JP',sans-serif); font-size:11.5px; font-weight:700; letter-spacing:.05em;
  color:#fff; background:var(--yuzu-cta); border-radius:14px; padding:4px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.zen-body{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1}
.zen-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:8px;
}
.zen-head h3{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:20px; color:var(--tea-text)}
.zen-price{
  font-family:var(--font-heading,'Noto Serif JP',serif); font-size:22px; font-weight:600;
  color:var(--yuzu-cta); white-space:nowrap;
}
.zen-price .tax{font-family:var(--font-body,'Noto Sans JP',sans-serif); font-size:12px; font-weight:500; color:var(--muted); margin-left:3px}
.zen-copy{
  font-family:var(--font-heading,'Noto Serif JP',serif); color:var(--brown);
  font-size:15.5px; margin-bottom:14px;
}
.zen-items{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:7px}
.zen-items li{
  position:relative; padding-left:22px; font-size:14px; color:var(--text); line-height:1.7;
}
.zen-items li::before{
  content:''; position:absolute; left:0; top:.55em; width:12px; height:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 6C18 14 12 26 12 38c0 9 7 16 18 16s18-7 18-16C48 26 42 14 30 6z' fill='%237C9A6B'/%3E%3Cpath d='M30 12v40' stroke='%233A5A40' stroke-width='3' fill='none'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
}
.zen-note{margin-top:auto; font-size:13px; color:var(--muted); line-height:1.7; padding-top:4px}

/* =========================================================
   食べる — カフェ・甘味カード
   ========================================================= */
.sweets-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px}
.sweet-card{
  display:block; background:#fff; text-decoration:none;
  border:1px solid var(--border); border-radius:16px; padding:26px 24px;
  box-shadow:0 2px 10px rgba(43,43,43,.05); text-align:center;
  transition:transform .18s, box-shadow .18s;
}
.sweet-card:hover{transform:translateY(-4px); box-shadow:0 12px 26px rgba(43,43,43,.12)}
.sweet-card .sweet-icon{
  font-size:40px; width:76px; height:76px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 40% 35%, var(--leaf-soft), var(--leaf) 72%, var(--tea));
  border:3px solid var(--yuzu-soft);
}
.sweet-card h3{
  font-family:var(--font-heading,'Noto Serif JP',serif); font-size:18px; color:var(--tea-text); margin-bottom:8px;
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
}
.sweet-card p{font-size:13.5px; color:var(--muted); line-height:1.8}
.sweet-card .sweet-photo{display:none}
.sweet-card.has-photo .sweet-icon{display:none}
.sweet-card.has-photo .sweet-photo{
  display:block; width:76px; height:76px; margin:0 auto 14px; border-radius:50%;
  object-fit:cover; border:3px solid var(--yuzu-soft);
}
.season{
  font-family:var(--font-body,'Noto Sans JP',sans-serif); font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:3px 10px; border-radius:12px; white-space:nowrap;
}
.season.summer{background:#DCEEF6; color:#2F5A77}
.season.winter{background:var(--yuzu-soft); color:var(--yuzu-text)}

/* =========================================================
   食べる — アレルギー・食品表示の注記
   ========================================================= */
.allergy-note{
  background:#FFF3D6; border:1px solid var(--yuzu-soft); border-left:5px solid var(--yuzu);
  border-radius:14px; padding:28px 30px;
}
.allergy-head{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.allergy-head .allergy-icon{font-size:26px; flex-shrink:0}
.allergy-head h2{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:19px; color:#8A5A00; line-height:1.5}
.allergy-note p{font-size:14.5px; color:#6B4A10; line-height:1.9; margin-bottom:10px}
.allergy-note p:last-child{margin-bottom:0}
.allergy-note strong{color:#8A4500; font-weight:700}
.allergy-note .allergy-sub{font-size:13px; color:#8A6A2A}
@media (max-width:600px){.allergy-note{padding:22px 20px}}

/* =========================================================
   パンくず(汎用、複数ページで共有)
   ========================================================= */
.breadcrumb{max-width:1120px; margin:0 auto; padding:16px 24px 0; font-size:12.5px; color:var(--muted)}
.breadcrumb a{color:var(--tea-text); text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{margin:0 6px; color:var(--border)}

/* =========================================================
   食べる — メニュー詳細ページ(お食事・カフェ甘味 共通)
   ========================================================= */
.menu-detail{max-width:720px; margin:0 auto}
.menu-detail-visual{
  height:220px; border-radius:18px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; margin-bottom:28px;
  background:linear-gradient(135deg,#E0C79A,#B25900);
  /* swipe-nav.js が読込後にこの要素を .menu-detail-visual-wrap で包み、
     左右に44px(モバイルは38px)の余白を追加する。初期表示から同じ余白を
     持たせておくことで、JS実行前後で画像の横幅が変わらない(チラつかない)
     ようにする(2026-08-02)。 */
  margin-left:44px; margin-right:44px;
}
@media (max-width:400px){.menu-detail-visual{margin-left:38px; margin-right:38px}}
.menu-detail-visual.lunch{background:linear-gradient(135deg,#C9A96B,#8A5A1E)}
.menu-detail-visual.tkg{background:linear-gradient(135deg,#E8C878,#C98A2E)}
.menu-detail-visual.oyako{background:linear-gradient(135deg,#E6C287,#A65E14)}
.menu-detail-visual.unagi{background:linear-gradient(135deg,#7B5A3A,#4A2E18)}
.menu-detail-visual.curry{background:linear-gradient(135deg,#8FB86C,#3E6B2E)}
.menu-detail-visual.tofu{background:linear-gradient(135deg,#F3EFE3,#C9BFA0)}
.menu-detail-visual.yasai{background:linear-gradient(135deg,#A9C97E,#5C8A3A)}
.menu-detail-visual.sweet{background:radial-gradient(circle at 40% 35%, var(--leaf-soft), var(--leaf) 72%, var(--tea))}
.menu-detail-visual::after{
  content:''; position:absolute; inset:0; opacity:.4; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.12) 0 8px, transparent 8px 20px);
}
.menu-detail-visual.has-photo::after{opacity:.15}
.menu-detail-visual.has-photo .md-icon{display:none}
.menu-detail-visual img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:1}
.menu-detail-visual .md-icon{font-size:80px; position:relative; z-index:2; filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
/* 画像を切り抜かず全体をそのまま見せたい場合(チラシ・ポスター等の縦長画像向け)。
   固定高さ220px+object-fit:coverでの切り抜きをやめ、画像本来の縦横比のまま
   自然な高さで表示する。 */
.menu-detail-visual.full-image{height:auto; display:block; background:none; overflow:visible}
.menu-detail-visual.full-image::after{display:none}
.menu-detail-visual.full-image img{
  position:static; width:100%; height:auto; object-fit:contain; display:block; border-radius:18px;
}
.menu-detail-visual .md-badge{
  position:absolute; right:16px; top:16px; z-index:3;
  font-family:var(--font-body,'Noto Sans JP',sans-serif); font-size:12px; font-weight:700;
  color:#fff; background:var(--yuzu-cta); border-radius:14px; padding:5px 14px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
/* full-image (チラシ・ポスター等の縦長画像) では img が position:static のため、
   絶対配置のバッジが画像の最上部に重なって表示されてしまう(2026-08-05 発覚)。
   バッジを画像の前に独立したブロックとして配置し直し、重なりを解消する。 */
.menu-detail-visual.full-image .md-badge{
  position:static; display:inline-block; margin:0 0 10px;
}
.menu-detail-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:8px}
.menu-detail-head h1{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:clamp(24px,4vw,32px); color:var(--tea-text)}
.menu-detail-price{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:26px; font-weight:600; color:var(--yuzu-cta); white-space:nowrap}
.menu-detail-price .tax{font-family:var(--font-body,'Noto Sans JP',sans-serif); font-size:13px; font-weight:500; color:var(--muted); margin-left:4px}
.menu-detail-copy{font-family:var(--font-heading,'Noto Serif JP',serif); color:var(--brown); font-size:17px; margin-bottom:22px}
.menu-detail-sub{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:15px; color:var(--tea-text); margin-bottom:10px}
.menu-detail-items{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:9px}
.menu-detail-items li{position:relative; padding-left:24px; font-size:15px; color:var(--text); line-height:1.8}
.menu-detail-items li::before{
  content:''; position:absolute; left:0; top:.5em; width:13px; height:13px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M30 6C18 14 12 26 12 38c0 9 7 16 18 16s18-7 18-16C48 26 42 14 30 6z' fill='%237C9A6B'/%3E%3Cpath d='M30 12v40' stroke='%233A5A40' stroke-width='3' fill='none'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
}
.menu-detail-note{font-size:14px; color:var(--muted); line-height:1.85; padding:16px 18px; background:var(--cream); border-radius:10px; margin-bottom:24px}
.menu-detail-visual-wrap{position:relative; display:flex; align-items:center}
.menu-detail-visual-wrap .menu-detail-visual{flex:1 1 auto; margin-left:44px; margin-right:44px; min-width:0}
.swipe-hint{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:42px; height:42px; border-radius:50%; border:none; padding:0; margin:0; box-sizing:border-box;
  -webkit-appearance:none; appearance:none;
  background:var(--yuzu-cta); box-shadow:0 4px 12px rgba(178,89,0,.45);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  animation:swipe-hint-pulse 1.8s ease-in-out infinite;
}
.swipe-hint::after{
  content:''; position:absolute; top:50%; left:50%; width:0; height:0;
  border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.swipe-hint.prev{left:0; animation-name:swipe-hint-pulse-left}
.swipe-hint.prev::after{
  border-right:12px solid #fff; margin:-9px 0 0 -8px;
}
.swipe-hint.next{right:0; animation-name:swipe-hint-pulse-right}
.swipe-hint.next::after{
  border-left:12px solid #fff; margin:-9px 0 0 -4px;
}
@keyframes swipe-hint-pulse-left{
  0%,100%{transform:translateY(-50%) translateX(0) scale(1); opacity:.9}
  50%{transform:translateY(-50%) translateX(-5px) scale(1.08); opacity:1}
}
@keyframes swipe-hint-pulse-right{
  0%,100%{transform:translateY(-50%) translateX(0) scale(1); opacity:.9}
  50%{transform:translateY(-50%) translateX(5px) scale(1.08); opacity:1}
}
@media (max-width:400px){
  .menu-detail-visual-wrap .menu-detail-visual{margin-left:38px; margin-right:38px}
  .swipe-hint{width:36px; height:36px}
  .swipe-hint::after{border-top-width:7px; border-bottom-width:7px}
  .swipe-hint.prev::after{border-right-width:10px; margin:-7px 0 0 -7px}
  .swipe-hint.next::after{border-left-width:10px; margin:-7px 0 0 -3px}
}
.swipe-hint:focus-visible{outline:2px solid #fff; outline-offset:2px}
/* スワイプ案内文。swipe-nav.js が画像(.menu-detail-visual)と見出し
   (.menu-detail-head > h1)の「間」へ後から差し込む要素であり、差し込んだ
   瞬間に直下の <h1> が下へ押し下げられていた。
   実測(2026-08-03 headless Chrome 390x844, cafe-tkg-3.html):
     h1.top = 764.9px (JS実行前) → 820.0px (JS実行後) … +55.1px の飛び
     .swipe-hint-text の占有高 = 10(margin-top) + 23.13(行) + 22(margin-bottom)
                                = 55.13px  ← 飛び幅と完全一致
   これが「画像の下の見出しの文字がチラつく/動く」の主因だった。
   対策として (1) 行の高さを 23px に固定して占有高を 55px ちょうどに確定させ、
   (2) 差し込み前は画像の margin-bottom に同じ 55px を上乗せして場所を予約し、
   (3) 差し込み完了時に swipe-nav.js が body へ .swipe-nav-ready を付けて
       予約を解除する。結果、JS 実行の前後で <h1> の位置が動かない。 */
.swipe-hint-text{
  text-align:center; font-size:12.5px; line-height:23px; color:var(--muted); margin:10px 0 22px;
}
/* (2) 予約: 案内文が入る詳細ページ(body に data-swipe-* がある)でのみ、
       画像の下に 28px(元の余白) + 55px(案内文の占有高) を確保する。 */
body[data-swipe-prev] .menu-detail-visual,
body[data-swipe-next] .menu-detail-visual{margin-bottom:83px}
/* (3) 解除: swipe-nav.js が案内文を実際に差し込んだら元の 28px に戻す。
       差し込まれた案内文がちょうど 55px を埋めるため、差し引きゼロ。 */
body.swipe-nav-ready[data-swipe-prev] .menu-detail-visual,
body.swipe-nav-ready[data-swipe-next] .menu-detail-visual{margin-bottom:28px}
.menu-detail-back{margin-top:36px; text-align:center}
.menu-detail-contact{
  margin-top:18px; padding-top:26px; border-top:1px solid var(--border);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.menu-detail-contact .btn{
  font-size:16px; padding:15px 30px;
  /* 2 本並ぶので幅をそろえる。指で押せる高さ(44px)は下回らせない */
  min-height:44px; min-width:min(100%, 300px);
  display:inline-flex; align-items:center; justify-content:center;
}
.menu-detail-contact-note{font-size:13px; color:var(--muted); line-height:1.7}

/* =========================================================
   巡る(around) — 見どころカード
   ※ .page-hero(共通ヒーロー / .walk・.know・.en 等)は上部で定義済み
   ========================================================= */
/* 見どころは3列。grid だと最終行に余ったカードが左に寄ってしまい、
   4枚のときは中央寄せの上書きが必要だった。5枚以上になったのを機に flex へ変え、
   justify-content:center で「余りが何枚でも最終行が中央にそろう」ようにする
   (2026-08-25 活道ヶ丘公園の追加にあわせて)。 */
/* 見どころの並べかえタブ。カードは flex の order を書きかえるだけなので、
   本文や DOM の順序は変わらない(2026-08-25 ご指示)。 */
.spot-tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:0 0 14px;
}
.spot-tab{
  appearance:none; cursor:pointer;
  font-family:var(--font-body,'Noto Sans JP',sans-serif);
  font-size:14px; font-weight:700; line-height:1;
  color:var(--tea-text); background:#fff;
  border:1px solid var(--border); border-radius:999px;
  padding:12px 18px;
  transition:background .16s, color .16s, border-color .16s, transform .16s;
}
.spot-tab:hover{border-color:var(--leaf); transform:translateY(-1px)}
.spot-tab:focus-visible{outline:3px solid var(--yuzu-cta); outline-offset:2px}
.spot-tab.is-active{
  background:var(--tea); color:#fff; border-color:var(--tea);
  box-shadow:0 4px 12px rgba(43,43,43,.14);
}
.spot-tabs-note{
  text-align:center; font-size:13.5px; color:var(--muted);
  line-height:1.8; margin:0 0 26px;
}
@media (max-width:560px){
  .spot-tabs{gap:8px}
  .spot-tab{font-size:13px; padding:11px 14px}
  .spot-tabs-note{font-size:13px; margin-bottom:22px}
}
/* 並べかえに対応できない環境でも、DOM 順（近い順）でそのまま読めます */
.spot-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:24px}
.spot-grid > *{width:calc((100% - 48px) / 3)}
@media (max-width:820px){.spot-grid > *{width:100%}}
.spot-card{
  background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden;
  box-shadow:0 3px 14px rgba(43,43,43,.06); transition:transform .18s, box-shadow .18s;
}
.spot-card:hover{transform:translateY(-5px); box-shadow:0 14px 28px rgba(43,43,43,.13)}
.spot-visual{
  height:180px; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#E6F2DE 0%, #C7DCB4 34%, #90B37E 62%, #4D8156 100%);
}
.spot-visual .ph-tag{position:absolute; left:10px; top:10px; z-index:3}

/* 見どころカードに実写を入れたときの表示 (2026-08-28 追加)。
   カードの絵は .spot-visual の linear-gradient と ::before / ::after で
   描いている。写真を background-image で直接入れると
     ・.spot-visual に background-size が無いため原寸タイル表示になる
     ・装飾の図形が写真の上に残る
   という壊れ方をしていた。content-loader.js / editor.js の
   data-edit-img-fill 方式(子 <img> を生成し has-photo を付与)へそろえ、
   写真があるときだけ図形を隠す。zen-visual / product-visual と同じ作り。 */
.spot-visual.has-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
}
.spot-visual.has-photo::before,
.spot-visual.has-photo::after{display:none}
.spot-visual.has-photo .ph-tag{z-index:4}
/* 写真の見せどころが上寄り(空・稜線など)のカードは、cover の切り出しを上端にそろえる。
   既定の object-position は 50% 50% で上下が均等に切れるため、
   空と稜線が入った写真だと上が落ちてしまう。(2026-08-31 追加) */
.spot-visual.has-photo.focus-top img{object-position:50% 0}
.spot-visual.has-photo.focus-bottom img{object-position:50% 100%}
/* 茶畑(畝の遠近) */
.spot-visual.tea-terrace::after{
  content:''; position:absolute; left:-10%; right:-10%; bottom:0; height:66%;
  background:repeating-linear-gradient(88deg,
    #35543B 0 12px, #43664A 12px 24px, #517457 24px 36px, #43664A 36px 48px);
  transform:perspective(460px) rotateX(56deg); transform-origin:bottom center;
}
/* 社寺(空 → 山なみ) */
.spot-visual.temple{background:linear-gradient(180deg,#bcd0dd 0%, #8fae9a 48%, #5c7d5f 100%)}
.spot-visual.shrine{background:linear-gradient(180deg,#cdd7e0 0%, #9db3ac 46%, #647f66 100%)}
.spot-visual.temple::after, .spot-visual.shrine::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:42%;
  background:linear-gradient(180deg, rgba(44,70,50,0), rgba(44,70,50,.4));
}
/* 陵墓(安積親王陵墓=太鼓山)。茶畑のうえに、木立をいただく塚がこんもりと
   盛りあがった姿を表す。写真を登録すれば data-edit-img で差し替わる。 */
.spot-visual.tomb{background:linear-gradient(180deg,#CFE1EC 0%, #B7D0C1 42%, #86A87C 70%, #4D8156 100%)}
.spot-visual.tomb::before{
  content:''; position:absolute; left:50%; bottom:32%; width:44%; height:40%;
  transform:translateX(-50%); z-index:2;
  background:linear-gradient(180deg,#3F6446 0%, #2C4A33 100%);
  border-radius:50% 50% 40% 40% / 66% 66% 22% 22%;
}
/* 茶畑の畝(石寺の茶畑カードと同じ表現で、まちの景観としてそろえる) */
.spot-visual.tomb::after{
  content:''; position:absolute; left:-10%; right:-10%; bottom:0; height:46%;
  background:repeating-linear-gradient(88deg,
    #35543B 0 12px, #43664A 12px 24px, #517457 24px 36px, #43664A 36px 48px);
  transform:perspective(460px) rotateX(56deg); transform-origin:bottom center;
}
/* 公園(活道ヶ丘公園)。空の下に、木立をいただく芝生の丘がゆるやかに重なる姿。
   写真を登録すれば data-edit-img で差し替わる。 */
.spot-visual.park{background:linear-gradient(180deg,#C9E0EE 0%, #DCEBD5 46%, #A8CB92 62%, #6FA45F 100%)}
/* 奥の木立 */
.spot-visual.park::before{
  content:''; position:absolute; left:0; right:0; bottom:34%; height:26%;
  background:
    radial-gradient(ellipse 14% 100% at 12% 100%, #3F6446 0 96%, transparent 97%),
    radial-gradient(ellipse 11% 82% at 30% 100%, #4A7150 0 96%, transparent 97%),
    radial-gradient(ellipse 16% 100% at 52% 100%, #386040 0 96%, transparent 97%),
    radial-gradient(ellipse 12% 86% at 74% 100%, #4A7150 0 96%, transparent 97%),
    radial-gradient(ellipse 14% 96% at 91% 100%, #3F6446 0 96%, transparent 97%);
}
/* 手前の芝生の丘 */
.spot-visual.park::after{
  content:''; position:absolute; left:-6%; right:-6%; bottom:-14%; height:52%;
  background:linear-gradient(180deg,#8FBE74 0%, #6FA45F 100%);
  border-radius:50% 50% 0 0 / 42% 42% 0 0;
}
/* 天空カフェ。山頂の小さな切妻屋根の茶室と、その下にひろがる茶畑。
   写真を登録すれば data-edit-img で差し替わる。 */
.spot-visual.skycafe{background:linear-gradient(180deg,#BFDCEF 0%, #E4EFDF 40%, #9DC287 58%, #4D8156 100%)}
/* 茶室(屋根+壁)。切妻屋根は三角形、その下に木の壁 */
.spot-visual.skycafe::before{
  content:''; position:absolute; left:50%; top:26%; width:26%; height:30%;
  transform:translateX(-50%); z-index:3;
  background:
    linear-gradient(#6B4B32,#6B4B32) no-repeat center 52%/100% 48%,
    conic-gradient(from 135deg at 50% 0, transparent 0 90deg, #4A3524 90deg 180deg, transparent 180deg) no-repeat center top/100% 52%;
}
/* 手前の茶畑の畝 */
.spot-visual.skycafe::after{
  content:''; position:absolute; left:-10%; right:-10%; bottom:0; height:48%;
  background:repeating-linear-gradient(88deg,
    #35543B 0 12px, #43664A 12px 24px, #517457 24px 36px, #43664A 36px 48px);
  transform:perspective(460px) rotateX(58deg); transform-origin:bottom center;
}
/* 弥勒磨崖仏。川べりの大きな岩と、そこに浮かぶ立像のシルエット。
   写真を登録すれば data-edit-img で差し替わる。 */
.spot-visual.magaibutsu{background:linear-gradient(180deg,#C6D8E4 0%, #A9BFA8 38%, #7C9A78 66%, #4F7358 100%)}
/* 岩塊 */
.spot-visual.magaibutsu::before{
  content:''; position:absolute; left:50%; top:16%; width:52%; height:70%;
  transform:translateX(-50%); z-index:2;
  background:linear-gradient(160deg,#9A9086 0%, #7C7268 52%, #625A52 100%);
  border-radius:16% 22% 8% 10% / 14% 16% 8% 10%;
  box-shadow:inset 0 0 26px rgba(0,0,0,.22);
}
/* 岩に彫られた仏の立像(シルエット) */
.spot-visual.magaibutsu::after{
  content:''; position:absolute; left:50%; top:30%; width:11%; height:44%;
  transform:translateX(-50%); z-index:3;
  background:
    radial-gradient(ellipse 50% 26% at 50% 12%, rgba(60,52,44,.55) 0 92%, transparent 93%),
    linear-gradient(180deg, rgba(60,52,44,.42), rgba(60,52,44,.30));
  border-radius:48% 48% 30% 30% / 22% 22% 8% 8%;
}

/* 八坂の大杉。社の木立に、一本だけ突きぬけて立つ巨杉。 */
.spot-visual.osugi{background:linear-gradient(180deg,#B9D2E0 0%, #94AE93 40%, #5E7F5E 72%, #3A5940 100%)}
/* 背後の木立 */
.spot-visual.osugi::before{
  content:''; position:absolute; left:0; right:0; bottom:18%; height:46%; z-index:2;
  background:
    radial-gradient(ellipse 12% 70% at 10% 100%, #33513A 0 96%, transparent 97%),
    radial-gradient(ellipse 10% 54% at 26% 100%, #3C5D42 0 96%, transparent 97%),
    radial-gradient(ellipse 10% 58% at 74% 100%, #3C5D42 0 96%, transparent 97%),
    radial-gradient(ellipse 12% 74% at 90% 100%, #33513A 0 96%, transparent 97%);
}
/* 中央の巨杉(太い幹 + こんもりした樹冠) */
.spot-visual.osugi::after{
  content:''; position:absolute; left:50%; top:6%; width:34%; height:88%;
  transform:translateX(-50%); z-index:3;
  background:
    linear-gradient(180deg,#5A4632,#41301F) no-repeat center bottom/16% 46%,
    radial-gradient(ellipse 50% 42% at 50% 30%, #2E4C35 0 96%, transparent 97%) no-repeat center top/100% 62%;
}
/* 祝橋の桜並木。川面の上に、桜色の並木がふんわりと連なる。
   写真を登録すれば data-edit-img で差し替わる。 */
.spot-visual.sakura{background:linear-gradient(180deg,#CFE4F0 0%, #F0DCE4 40%, #C9D9C4 64%, #7FA0AF 100%)}
/* 桜の並木(ふんわりした花のかたまりを横に連ねる) */
.spot-visual.sakura::before{
  content:''; position:absolute; left:-4%; right:-4%; top:16%; height:44%; z-index:2;
  background:
    radial-gradient(ellipse 13% 52% at 8% 60%, #F6C6D6 0 88%, transparent 89%),
    radial-gradient(ellipse 15% 60% at 27% 48%, #FADCE6 0 88%, transparent 89%),
    radial-gradient(ellipse 13% 54% at 46% 62%, #F6C6D6 0 88%, transparent 89%),
    radial-gradient(ellipse 15% 58% at 66% 46%, #FADCE6 0 88%, transparent 89%),
    radial-gradient(ellipse 13% 52% at 86% 60%, #F6C6D6 0 88%, transparent 89%);
}
/* 手前の川面 */
.spot-visual.sakura::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:30%; z-index:1;
  background:linear-gradient(180deg,#9FC0D2 0%, #6E93A8 100%);
  box-shadow:inset 0 6px 14px rgba(255,255,255,.35);
}
/* 白栖・撰原の茶畑。急斜面に区画がパッチワーク状に並ぶ「山畑」。
   写真を登録すれば data-edit-img で差し替わる。 */
.spot-visual.yamahata{background:linear-gradient(180deg,#C7DCEA 0%, #A9C79B 34%, #6F9A63 100%)}
/* 斜面の区画(向きも大きさもばらばらの畑を、濃淡のブロックで表す) */
.spot-visual.yamahata::before{
  content:''; position:absolute; left:-6%; right:-6%; bottom:0; height:74%; z-index:2;
  background:
    linear-gradient(74deg,#3E6244 0 22%, transparent 22%) no-repeat 0 0/38% 46%,
    linear-gradient(-70deg,#4E7551 0 26%, transparent 26%) no-repeat 34% 6%/34% 40%,
    linear-gradient(66deg,#456B49 0 24%, transparent 24%) no-repeat 68% 0/36% 44%,
    linear-gradient(-62deg,#54805A 0 28%, transparent 28%) no-repeat 8% 44%/40% 42%,
    linear-gradient(78deg,#3A5C40 0 22%, transparent 22%) no-repeat 52% 50%/44% 46%,
    linear-gradient(180deg,#5C8760,#3E6244);
}
/* 谷をながれる川 */
.spot-visual.yamahata::after{
  content:''; position:absolute; left:-4%; right:-4%; bottom:0; height:12%; z-index:3;
  background:linear-gradient(180deg,#89AEC2,#6B93AA);
  border-radius:40% 40% 0 0 / 60% 60% 0 0;
}

/* 原山の円形茶園。山なりに同心円を描く畝。 */
.spot-visual.enkei{background:linear-gradient(180deg,#C3DAEA 0%, #AFCB9E 36%, #6B9A5E 100%)}
/* まるい山の本体 */
.spot-visual.enkei::before{
  content:''; position:absolute; left:50%; bottom:-16%; width:80%; height:92%;
  transform:translateX(-50%); z-index:2;
  background:linear-gradient(180deg,#6E9A62,#41663F);
  border-radius:50% 50% 0 0 / 62% 62% 0 0;
}
/* 同心円の畝 */
.spot-visual.enkei::after{
  content:''; position:absolute; left:50%; bottom:-16%; width:80%; height:92%;
  transform:translateX(-50%); z-index:3;
  border-radius:50% 50% 0 0 / 62% 62% 0 0;
  background:repeating-radial-gradient(ellipse 62% 78% at 50% 100%,
    rgba(255,255,255,.16) 0 6px, rgba(30,58,34,.20) 6px 13px);
}
/* 釜塚の茶畑。釜のように丸い山を、頂上まで茶の畝がおおう。
   写真を登録すれば data-edit-img で差し替わる。 */
.spot-visual.kamatsuka{background:linear-gradient(180deg,#C6DCEC 0%, #B3CDA4 40%, #6E9A60 100%)}
.spot-visual.kamatsuka::before{
  content:''; position:absolute; left:50%; bottom:-10%; width:92%; height:86%;
  transform:translateX(-50%); z-index:2;
  background:linear-gradient(180deg,#77A268,#3F653F);
  border-radius:50% 50% 0 0 / 70% 70% 0 0;
}
/* 頂上まで走る畝 */
.spot-visual.kamatsuka::after{
  content:''; position:absolute; left:50%; bottom:-10%; width:92%; height:86%;
  transform:translateX(-50%); z-index:3;
  border-radius:50% 50% 0 0 / 70% 70% 0 0;
  background:repeating-linear-gradient(2deg,
    rgba(255,255,255,.13) 0 5px, rgba(28,54,32,.20) 5px 11px);
}

/* 桜のせせらぎ小径。川ぞいに桜が並ぶ、細い遊歩道。 */
.spot-visual.seseragi{background:linear-gradient(180deg,#CEE3F0 0%, #E8DCE6 36%, #B7CDAE 62%, #7FA48C 100%)}
/* 川ぞいの桜 */
.spot-visual.seseragi::before{
  content:''; position:absolute; left:-4%; right:-4%; top:18%; height:40%; z-index:2;
  background:
    radial-gradient(ellipse 14% 50% at 10% 66%, #F5C8D8 0 88%, transparent 89%),
    radial-gradient(ellipse 15% 56% at 34% 52%, #FBDEE8 0 88%, transparent 89%),
    radial-gradient(ellipse 14% 50% at 60% 66%, #F5C8D8 0 88%, transparent 89%),
    radial-gradient(ellipse 15% 56% at 86% 52%, #FBDEE8 0 88%, transparent 89%);
}
/* 遊歩道(白い帯)と、その下の川 */
.spot-visual.seseragi::after{
  content:''; position:absolute; left:-8%; right:-8%; bottom:0; height:40%; z-index:3;
  background:
    linear-gradient(180deg,#E8E4DA,#CFC9BC) no-repeat 0 0/100% 42%,
    linear-gradient(180deg,#8FB4C8,#6B93AB) no-repeat 0 42%/100% 58%;
  transform:perspective(420px) rotateX(46deg); transform-origin:bottom center;
}

/* 撰原の子安地蔵と坂尻古墳。峠の石仏と、うしろの古墳の高まり。 */
.spot-visual.jizo{background:linear-gradient(180deg,#C4D8E6 0%, #A9BFA0 42%, #5F7F58 100%)}
/* うしろの古墳(こんもりした高まり) */
.spot-visual.jizo::before{
  content:''; position:absolute; left:50%; bottom:22%; width:62%; height:34%;
  transform:translateX(-50%); z-index:2;
  background:linear-gradient(180deg,#4E7350,#33502F);
  border-radius:50% 50% 0 0 / 78% 78% 0 0;
}
/* 手前の石仏(祠のかたち) */
.spot-visual.jizo::after{
  content:''; position:absolute; left:50%; bottom:14%; width:17%; height:44%;
  transform:translateX(-50%); z-index:3;
  background:
    linear-gradient(180deg,#9A9186,#6F675E) no-repeat center 34%/100% 66%,
    conic-gradient(from 135deg at 50% 0, transparent 0 90deg, #7E7469 90deg 180deg, transparent 180deg) no-repeat center top/100% 34%;
}
/* 金胎寺。山なみの上にたつ多宝塔のシルエット。
   写真を登録すれば data-edit-img で差し替わる。 */
.spot-visual.kontaiji{background:linear-gradient(180deg,#B9CFE2 0%, #93A9A4 44%, #4B6350 100%)}
/* 重なる山なみ */
.spot-visual.kontaiji::before{
  content:''; position:absolute; left:-8%; right:-8%; bottom:0; height:52%; z-index:2;
  background:
    radial-gradient(ellipse 40% 100% at 16% 100%, #3E5945 0 96%, transparent 97%),
    radial-gradient(ellipse 46% 86% at 56% 100%, #34503B 0 96%, transparent 97%),
    radial-gradient(ellipse 38% 96% at 92% 100%, #3E5945 0 96%, transparent 97%);
}
/* 多宝塔(屋根2段+相輪) */
.spot-visual.kontaiji::after{
  content:''; position:absolute; left:50%; top:20%; width:24%; height:52%;
  transform:translateX(-50%); z-index:3;
  background:
    linear-gradient(#4A3524,#4A3524) no-repeat 50% 12%/6% 18%,
    conic-gradient(from 135deg at 50% 0, transparent 0 90deg, #4A3524 90deg 180deg, transparent 180deg) no-repeat center 26%/86% 26%,
    linear-gradient(#6B4B32,#6B4B32) no-repeat center 50%/46% 16%,
    conic-gradient(from 135deg at 50% 0, transparent 0 90deg, #4A3524 90deg 180deg, transparent 180deg) no-repeat center 64%/100% 26%,
    linear-gradient(#6B4B32,#6B4B32) no-repeat center 88%/56% 14%;
}

/* 湯船森林公園。森にかこまれた浅い流れ。 */
.spot-visual.yubune{background:linear-gradient(180deg,#BFDAEA 0%, #A9C89A 34%, #6E9A5F 62%, #4C7350 100%)}
.spot-visual.yubune::before{
  content:''; position:absolute; left:0; right:0; bottom:26%; height:40%; z-index:2;
  background:
    radial-gradient(ellipse 13% 74% at 9% 100%, #33513A 0 96%, transparent 97%),
    radial-gradient(ellipse 11% 58% at 27% 100%, #3E6244 0 96%, transparent 97%),
    radial-gradient(ellipse 12% 66% at 73% 100%, #3E6244 0 96%, transparent 97%),
    radial-gradient(ellipse 13% 78% at 91% 100%, #33513A 0 96%, transparent 97%);
}
/* 手前の浅い流れ(白い波きらめき) */
.spot-visual.yubune::after{
  content:''; position:absolute; left:-6%; right:-6%; bottom:0; height:30%; z-index:3;
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,.34) 0 8px, transparent 8px 22px),
    linear-gradient(180deg,#9CC4D6,#71A0B8);
  border-radius:44% 44% 0 0 / 46% 46% 0 0;
}

/* MTB LAND。うねる山のコースと、走るラインの軌跡。 */
.spot-visual.mtb{background:linear-gradient(180deg,#C2D9E8 0%, #A8BF92 38%, #6C8C4F 100%)}
.spot-visual.mtb::before{
  content:''; position:absolute; left:-8%; right:-8%; bottom:0; height:62%; z-index:2;
  background:
    radial-gradient(ellipse 44% 100% at 22% 100%, #5C7C42 0 96%, transparent 97%),
    radial-gradient(ellipse 48% 88% at 74% 100%, #4C6A37 0 96%, transparent 97%);
}
/* コースのライン */
.spot-visual.mtb::after{
  content:''; position:absolute; left:-4%; right:-4%; bottom:8%; height:44%; z-index:3;
  background:
    repeating-linear-gradient(-16deg, rgba(196,176,132,.9) 0 7px, transparent 7px 26px);
  transform:perspective(420px) rotateX(56deg); transform-origin:bottom center;
}

/* 正寿院。猪目窓(ハート型)と、吊るされた風鈴。 */
.spot-visual.shojuin{background:linear-gradient(180deg,#CFE3F2 0%, #DCE9DA 40%, #93B187 100%)}
/* 風鈴(吊り下がる粒) */
.spot-visual.shojuin::before{
  content:''; position:absolute; left:0; right:0; top:0; height:34%; z-index:2;
  background:
    radial-gradient(circle 6px at 12% 62%, #E8F2F6 0 96%, transparent 97%),
    radial-gradient(circle 5px at 26% 48%, #F3D9E2 0 96%, transparent 97%),
    radial-gradient(circle 6px at 40% 66%, #E8F2F6 0 96%, transparent 97%),
    radial-gradient(circle 5px at 60% 46%, #F3D9E2 0 96%, transparent 97%),
    radial-gradient(circle 6px at 74% 62%, #E8F2F6 0 96%, transparent 97%),
    radial-gradient(circle 5px at 88% 50%, #F3D9E2 0 96%, transparent 97%),
    repeating-linear-gradient(90deg, rgba(90,80,66,.28) 0 1px, transparent 1px 14%);
}
/* 猪目窓(丸窓のなかにハート型の抜き) */
.spot-visual.shojuin::after{
  content:''; position:absolute; left:50%; bottom:12%; width:44%; height:56%;
  transform:translateX(-50%); z-index:3;
  background:#5A4A3A;
  border-radius:50%;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 0 40%, #000 41%);
  mask-image:radial-gradient(circle at 50% 50%, transparent 0 40%, #000 41%);
}
/* 大智寺。山あいの山門と、そのわきに枝を垂らすしだれ桜。
   写真を登録すれば data-edit-img で差し替わる。 */
.spot-visual.daichiji{background:linear-gradient(180deg,#C6D9E8 0%, #D9DEE0 34%, #93A98E 66%, #4F6B4E 100%)}
/* うしろの山と巨岩(百丈岩) */
.spot-visual.daichiji::before{
  content:''; position:absolute; left:-6%; right:-6%; bottom:22%; height:48%; z-index:2;
  background:
    radial-gradient(ellipse 34% 100% at 20% 100%, #47624A 0 96%, transparent 97%),
    radial-gradient(ellipse 22% 118% at 62% 100%, #8A8175 0 96%, transparent 97%),
    radial-gradient(ellipse 32% 92% at 92% 100%, #47624A 0 96%, transparent 97%);
}
/* 山門(切妻屋根)としだれ桜 */
.spot-visual.daichiji::after{
  content:''; position:absolute; left:0; right:0; bottom:6%; height:44%; z-index:3;
  background:
    conic-gradient(from 135deg at 50% 0, transparent 0 90deg, #4A3524 90deg 180deg, transparent 180deg) no-repeat 58% 26%/30% 24%,
    linear-gradient(#6B4B32,#6B4B32) no-repeat 58% 62%/22% 38%,
    radial-gradient(ellipse 46% 40% at 22% 24%, #F2C4D4 0 88%, transparent 89%) no-repeat 0 0/34% 62%,
    repeating-linear-gradient(96deg, rgba(242,196,212,.85) 0 3px, transparent 3px 12px) no-repeat 4% 30%/26% 46%;
}

/* 永谷宗円生家。茅葺きの家と、焙炉の火。 */
.spot-visual.soen{background:linear-gradient(180deg,#CBDDEA 0%, #DCE3D6 38%, #9FB68F 68%, #6B8A5E 100%)}
/* 茅葺き屋根の家 */
.spot-visual.soen::before{
  content:''; position:absolute; left:50%; bottom:22%; width:64%; height:48%;
  transform:translateX(-50%); z-index:2;
  background:
    linear-gradient(#EDE6D8,#D8CFBC) no-repeat center 62%/100% 38%,
    conic-gradient(from 135deg at 50% 0, transparent 0 90deg, #7A6B52 90deg 180deg, transparent 180deg) no-repeat center top/100% 62%;
}
/* 焙炉の火(あたたかいゆらぎ) */
.spot-visual.soen::after{
  content:''; position:absolute; left:50%; bottom:24%; width:20%; height:16%;
  transform:translateX(-50%); z-index:3;
  background:radial-gradient(ellipse at 50% 100%, #F2A64B 0 42%, rgba(242,166,75,.42) 62%, transparent 78%);
  border-radius:50% 50% 40% 40% / 70% 70% 30% 30%;
}
/* 恭仁宮跡。草地に点在する礎石と、秋のコスモス。
   写真を登録すれば data-edit-img で差し替わる。 */
.spot-visual.kunikyu{background:linear-gradient(180deg,#C3DAEC 0%, #D7E2CE 40%, #A8BE8C 66%, #8AA46E 100%)}
/* 点在する礎石 */
.spot-visual.kunikyu::before{
  content:''; position:absolute; left:0; right:0; bottom:8%; height:44%; z-index:2;
  background:
    radial-gradient(ellipse 7% 22% at 16% 34%, #9A9186 0 92%, transparent 93%),
    radial-gradient(ellipse 9% 26% at 38% 58%, #8B8278 0 92%, transparent 93%),
    radial-gradient(ellipse 8% 24% at 62% 40%, #9A9186 0 92%, transparent 93%),
    radial-gradient(ellipse 10% 30% at 84% 66%, #7F776D 0 92%, transparent 93%);
}
/* コスモス(ピンクと白の点) */
.spot-visual.kunikyu::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:34%; z-index:3;
  background:
    radial-gradient(circle 3px at 10% 40%, #F0A9C2 0 92%, transparent 93%),
    radial-gradient(circle 3px at 24% 68%, #FBFBFB 0 92%, transparent 93%),
    radial-gradient(circle 3px at 44% 34%, #F0A9C2 0 92%, transparent 93%),
    radial-gradient(circle 3px at 58% 72%, #E8809F 0 92%, transparent 93%),
    radial-gradient(circle 3px at 76% 44%, #FBFBFB 0 92%, transparent 93%),
    radial-gradient(circle 3px at 92% 70%, #F0A9C2 0 92%, transparent 93%);
}

/* 海住山寺。山あいにそびえる五重塔。 */
.spot-visual.kaiju{background:linear-gradient(180deg,#BCD3E6 0%, #9FB6A2 46%, #4F6B52 100%)}
/* うしろの山 */
.spot-visual.kaiju::before{
  content:''; position:absolute; left:-8%; right:-8%; bottom:0; height:50%; z-index:2;
  background:
    radial-gradient(ellipse 42% 100% at 14% 100%, #3F5B45 0 96%, transparent 97%),
    radial-gradient(ellipse 46% 84% at 84% 100%, #35503C 0 96%, transparent 97%);
}
/* 五重塔(屋根5段) */
.spot-visual.kaiju::after{
  content:''; position:absolute; left:50%; top:12%; width:30%; height:74%;
  transform:translateX(-50%); z-index:3;
  background:
    linear-gradient(#4A3524,#4A3524) no-repeat 50% 0/5% 12%,
    conic-gradient(from 135deg at 50% 0, transparent 0 90deg, #55402C 90deg 180deg, transparent 180deg) no-repeat center 12%/56% 15%,
    conic-gradient(from 135deg at 50% 0, transparent 0 90deg, #4A3524 90deg 180deg, transparent 180deg) no-repeat center 30%/68% 15%,
    conic-gradient(from 135deg at 50% 0, transparent 0 90deg, #55402C 90deg 180deg, transparent 180deg) no-repeat center 48%/80% 15%,
    conic-gradient(from 135deg at 50% 0, transparent 0 90deg, #4A3524 90deg 180deg, transparent 180deg) no-repeat center 66%/91% 15%,
    conic-gradient(from 135deg at 50% 0, transparent 0 90deg, #55402C 90deg 180deg, transparent 180deg) no-repeat center 84%/100% 16%;
}
/* カードをリンクにしたとき、本文の高さがそろうように */
.spot-card.card-link{display:flex; flex-direction:column}
.spot-card.card-link .spot-body{display:flex; flex-direction:column; flex:1}
.spot-card.card-link .spot-body p:not(.card-guide){flex:1}
.spot-body{padding:22px 22px 26px}
.spot-body h3{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:20px; color:var(--tea-text); margin-bottom:10px}
.spot-body p{font-size:14px; color:var(--muted); line-height:1.85}

/* 外部リンク(送客)カード */
.link-card-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:900px; margin:0 auto}
@media (max-width:720px){.link-card-grid{grid-template-columns:1fr}}
/* リンクバナーが奇数個のとき、最後の1枚が左に寄って余白ができるので中央に置く
   (2026-08-23: 和束町観光案内所を加えて3枚になったため) */
@media (min-width:721px){
  .link-card-grid > .ext-card:last-child:nth-child(odd){
    grid-column:1 / -1; justify-self:center;
    width:100%; max-width:calc((100% - 24px) / 2);
  }
}
.ext-card{
  display:flex; gap:18px; align-items:flex-start;
  background:#fff; border:1px solid var(--border); border-radius:18px; padding:28px;
  text-decoration:none; color:var(--text);
  box-shadow:0 3px 14px rgba(43,43,43,.06); transition:transform .18s, box-shadow .18s, border-color .18s;
}
.ext-card:hover{transform:translateY(-5px); box-shadow:0 16px 32px rgba(43,43,43,.15)}
.ext-card.primary{border-color:var(--yuzu); border-width:2px; background:linear-gradient(180deg,#fffdf8,#fff)}
.ext-mark{
  width:60px; height:60px; flex-shrink:0; border-radius:16px; font-size:30px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--leaf-soft),var(--leaf)); color:#fff;
}
.ext-card.primary .ext-mark{background:linear-gradient(135deg,var(--yuzu),var(--yuzu-cta))}
.ext-kicker{
  font-family:var(--font-body,'Noto Sans JP',sans-serif); font-size:11.5px; font-weight:700;
  letter-spacing:.08em; color:var(--yuzu-cta); display:block; margin-bottom:4px;
}
.ext-body h3{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:22px; color:var(--tea-text); margin-bottom:8px}
.ext-body h3 .ruby{font-size:.62em; color:var(--muted); font-weight:500; margin-left:4px}
.ext-body p{font-size:14px; color:var(--muted); line-height:1.85; margin-bottom:14px}
.ext-go{
  font-family:var(--font-body,'Noto Sans JP',sans-serif); font-size:13.5px; font-weight:700; color:var(--yuzu-cta);
  display:inline-flex; align-items:center; gap:6px;
}
.ext-go::after{content:'↗'; transition:transform .18s}
.ext-card:hover .ext-go::after{transform:translate(2px,-2px)}

/* 体験カードのアイコン・案内文 */
.card-icon{font-size:38px; margin-bottom:10px; line-height:1}
.card-guide{
  margin-top:12px; font-size:13px; color:var(--yuzu-cta); font-weight:700;
  border-top:1px dashed var(--border); padding-top:12px;
}

/* 送客バンド(観光案内所へ) */
.guide-band{
  margin-top:40px; background:var(--cream); border:1px solid var(--cream-deep);
  border-radius:16px; padding:32px 28px; text-align:center;
}
.guide-band p{font-size:15px; line-height:1.9; color:var(--text); margin-bottom:22px}
.guide-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn-outline-dark{background:#fff; color:var(--tea-text); border:1.5px solid var(--tea)}
.btn-outline-dark:hover{background:var(--tea); color:#fff}

/* 免責注記 */
.disclaimer{
  margin-top:28px; font-size:13px; color:var(--muted); line-height:1.8;
  background:#fff; border-left:4px solid var(--yuzu); border-radius:6px; padding:12px 16px;
}

/* =========================================================
   知る(know) — メディア掲載実績
   ========================================================= */
.media-list{max-width:820px; margin:0 auto; list-style:none; display:flex; flex-direction:column; gap:2px}
.media-item{
  display:flex; gap:16px; align-items:flex-start; padding:20px 8px;
  border-bottom:1px solid var(--border);
}
.media-tag{
  flex-shrink:0; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  padding:4px 12px; border-radius:14px; min-width:54px; text-align:center; color:#fff;
}
.media-tag.tv{background:#B25900}
.media-tag.mag{background:#8C6142}
.media-tag.web{background:#3E6B8C}
.media-tag.radio{background:#4D8156}
.media-date{
  flex-shrink:0; font-family:var(--font-body,'Noto Sans JP',sans-serif); font-size:13px;
  color:var(--muted); min-width:92px; padding-top:3px;
}
.media-body{display:flex; flex-direction:column; gap:3px}
.media-outlet{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:16px; color:var(--tea-text); font-weight:600}
.media-note{font-size:14px; color:var(--muted); line-height:1.75}
@media (max-width:560px){
  .media-item{flex-wrap:wrap; gap:8px 12px}
  .media-body{flex-basis:100%}
}

/* 取材受付 */
.press-intro{
  max-width:760px; margin:0 auto 12px; text-align:center;
  font-size:15.5px; line-height:2; color:var(--text);
}
.sub-heading{
  font-family:var(--font-heading,'Noto Serif JP',serif); font-size:19px; color:var(--tea-text);
  max-width:820px; margin:40px auto 18px; padding-bottom:10px;
  border-bottom:2px solid var(--yuzu-soft);
}

/* 受付フロー */
.flow-steps{
  max-width:820px; margin:0 auto; list-style:none;
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
}
@media (max-width:680px){.flow-steps{grid-template-columns:1fr; gap:38px}}
.flow-step{
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:24px 22px;
  display:flex; gap:16px; align-items:flex-start; box-shadow:0 2px 10px rgba(43,43,43,.05);
  position:relative;
}
.flow-step:not(:last-child)::after{
  content:'→'; position:absolute; right:-32px; top:50%; transform:translateY(-50%);
  color:var(--yuzu); font-size:40px; font-weight:900; line-height:1; z-index:2;
  text-shadow:0 2px 3px rgba(43,43,43,.12); -webkit-text-stroke:1px var(--yuzu);
}
@media (max-width:680px){
  .flow-step:not(:last-child)::after{content:'↓'; right:50%; top:auto; bottom:-30px; transform:translateX(50%)}
}
.flow-num{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  background:var(--tea); color:#fff; font-family:var(--font-heading,'Noto Serif JP',serif); font-weight:600;
  font-size:18px; display:flex; align-items:center; justify-content:center;
}
.flow-text h4{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:16px; color:var(--tea-text); margin-bottom:6px}
.flow-text p{font-size:13.5px; color:var(--muted); line-height:1.8}

/* 伝えていただきたい項目 */
.check-list{
  max-width:820px; margin:0 auto; list-style:none;
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px 24px;
}
@media (max-width:680px){.check-list{grid-template-columns:1fr}}
.check-list li{
  position:relative; padding:8px 8px 8px 30px; font-size:14.5px; color:var(--text); line-height:1.7;
  border-bottom:1px solid var(--border);
}
.check-list li::before{
  content:'✓'; position:absolute; left:6px; top:8px; color:var(--yuzu-cta); font-weight:700;
}

/* お願い事項バンド */
.note-band{
  max-width:820px; margin:36px auto 0; background:#FFF8EC;
  border:1px solid var(--yuzu-soft); border-left:4px solid var(--yuzu);
  border-radius:10px; padding:22px 24px;
}
.note-band.soft{background:var(--cream); border-color:var(--cream-deep); border-left-color:var(--leaf)}
.note-band h4{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:16px; color:var(--brown); margin-bottom:10px}
.note-band.soft h4{color:var(--tea-text)}
.note-band ul{margin:0; padding-left:20px}
.note-band li{font-size:14px; color:var(--text); line-height:1.85; margin-bottom:4px}
.btn-primary-tea{background:var(--tea)}
.btn-primary-tea:hover{background:var(--tea-deep); box-shadow:0 9px 24px rgba(44,70,50,.4)}
/* 本文中の電話番号。そのままだと行の高さ(17px)しか当たり判定が無く押しにくいので、
   上下に余白を足して指で押しやすくする(2026-09-23)。 */
.tel-inline{color:var(--yuzu-cta); font-weight:700; text-decoration:none;
  display:inline-block; padding:4px 2px; margin:-4px -2px}
.tel-inline:hover{text-decoration:underline}

/* 撮影・SNS歓迎 */
.sns-welcome{
  max-width:820px; margin:0 auto; display:flex; gap:24px; align-items:center;
  background:linear-gradient(135deg,#fffdf8,#fff);
  border:2px solid var(--yuzu-soft); border-radius:18px; padding:30px 28px;
}
@media (max-width:560px){.sns-welcome{flex-direction:column; text-align:center; gap:14px}}
.sns-icon{
  flex-shrink:0; width:76px; height:76px; border-radius:20px; font-size:38px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--yuzu),var(--yuzu-cta)); color:#fff;
}
.sns-text h3{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:19px; color:var(--yuzu-cta); margin-bottom:8px; line-height:1.6}

/* ============== メニュー表バナー + 全画面ギャラリー ============== */
.menu-gallery-banner{
  display:flex; align-items:center; gap:14px; width:100%; max-width:520px; margin:30px auto 0;
  padding:22px 26px; border:none; border-radius:18px; cursor:pointer;
  background:linear-gradient(135deg,var(--yuzu,#e08a2e),var(--yuzu-cta,#c9691a));
  color:#fff; box-shadow:0 10px 26px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease;
  /* スマホでラベルをタップした時に、文字が選択されるだけでボタンが反応しない
     ことがあったため、選択を止めてタップ遅延も外す。 */
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
}
/* 子要素(アイコン/ラベル/矢印)はクリック対象にせず、常に親ボタンで受ける */
.menu-gallery-banner > *{pointer-events:none}
.menu-gallery-banner:hover{transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.22)}
.menu-gallery-banner:active{transform:translateY(0)}
.menu-gallery-banner .mgb-icon{font-size:30px; flex-shrink:0}
.menu-gallery-banner .mgb-text{flex:1; text-align:left; font-size:21px; font-weight:700; letter-spacing:.02em}
.menu-gallery-banner .mgb-arrow{font-size:26px; flex-shrink:0; opacity:.85}

.menu-gallery-modal{
  position:fixed; inset:0; z-index:2000; background:#0c0c0c;
  display:flex; flex-direction:column;
}
.menu-gallery-modal .mg-viewport{
  position:relative; flex:1 1 auto; min-height:0;
}
.menu-gallery-modal .mg-track{
  display:flex; width:100%; height:100%; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; touch-action:pan-y pan-x pinch-zoom;
  overscroll-behavior-x:contain; scrollbar-width:none;
}
.menu-gallery-modal .mg-track::-webkit-scrollbar{display:none}
.menu-gallery-modal .mg-page{
  flex:0 0 100%; width:100%; height:100%; scroll-snap-align:center;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:18px 56px;
  background-color:#fff; background-size:contain; background-repeat:no-repeat; background-position:center;
}
.menu-gallery-modal .mg-empty-hint{
  display:none; color:rgba(255,255,255,.6); font-size:18px; text-align:center;
  flex-direction:column; align-items:center; gap:10px; cursor:pointer;
}
.menu-gallery-modal .mg-page.mg-empty{background-color:transparent}
.menu-gallery-modal .mg-page.mg-empty .mg-empty-hint{display:flex}
.menu-gallery-modal .mg-empty-icon{font-size:44px; opacity:.6}
.menu-gallery-modal .mg-close{
  position:absolute; top:18px; right:18px; z-index:6; width:48px; height:48px; border-radius:50%;
  border:none; background:rgba(255,255,255,.14); color:#fff; font-size:22px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.menu-gallery-modal .mg-close:hover{background:rgba(255,255,255,.26)}
/* 左右ナビゲーション: 商品詳細ページの .swipe-hint (卵かけご飯 等) と
   見た目を統一(黄色い丸ボタン＋白矢印＋パルスアニメーション)。
   画像の外側の余白(.mg-page の左右 padding)に配置する。 */
.menu-gallery-modal .mg-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:42px; height:42px; border-radius:50%; border:none; padding:0; margin:0; box-sizing:border-box;
  -webkit-appearance:none; appearance:none;
  background:var(--yuzu-cta); box-shadow:0 4px 12px rgba(178,89,0,.45);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  animation:swipe-hint-pulse-left 1.8s ease-in-out infinite;
}
.menu-gallery-modal .mg-nav::after{
  content:''; position:absolute; top:50%; left:50%; width:0; height:0;
  border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.menu-gallery-modal .mg-prev{left:8px; animation-name:swipe-hint-pulse-left}
.menu-gallery-modal .mg-prev::after{border-right:12px solid #fff; margin:-9px 0 0 -8px}
.menu-gallery-modal .mg-next{right:8px; animation-name:swipe-hint-pulse-right}
.menu-gallery-modal .mg-next::after{border-left:12px solid #fff; margin:-9px 0 0 -4px}
.menu-gallery-modal .mg-nav:disabled{opacity:.25; cursor:default; animation:none}
.menu-gallery-modal .mg-indicator{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:5;
  color:#fff; font-size:15px; background:rgba(255,255,255,.14); padding:8px 18px; border-radius:999px;
  letter-spacing:.04em;
}
@media (max-width:400px){
  .menu-gallery-modal .mg-page{padding:14px 46px}
  /* 小さい画面でも指で押せるよう 44px を確保する(2026-09-23 に 36px から引き上げ)。
     .mg-page の左右 padding が 46px あるので枠内に収まる。 */
  .menu-gallery-modal .mg-nav{width:44px; height:44px}
  .menu-gallery-modal .mg-nav::after{border-top-width:7px; border-bottom-width:7px}
  .menu-gallery-modal .mg-prev::after{border-right-width:10px; margin:-7px 0 0 -7px}
  .menu-gallery-modal .mg-next::after{border-left-width:10px; margin:-7px 0 0 -3px}
  .menu-gallery-modal .mg-close{width:44px; height:44px}
}
.menu-gallery-modal .mg-footer{
  flex:0 0 auto; background:#151515; padding:16px 20px 22px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  border-top:1px solid rgba(255,255,255,.1);
}
.menu-gallery-modal .mg-footer .btn{font-size:15px; padding:13px 26px}
.menu-gallery-modal .mg-footer-note{font-size:12.5px; color:rgba(255,255,255,.6); line-height:1.7}
.sns-text p{font-size:14.5px; color:var(--muted); line-height:1.85}

/* =========================================================
   見る(展示室) — 美術館ふうの意匠
   ---------------------------------------------------------
   「見る」ページだけに掛ける。共有部品 (.menu-gallery-banner 等) は
   食べるページでも使うので触らず、ここでは専用クラスと
   #gallery-lightbox-modal / #drone-* の ID スコープだけで組む。
   軸は既存のブランド資産2つ — 金 (ヒーローの #E6C287) と明朝体。
   ========================================================= */
:root{
  --museum-gold:#C9A961;        /* 落ち着いた真鍮。額縁と罫線 */
  --museum-gold-soft:rgba(201,169,97,.34);
  --museum-wall:#16201A;        /* 展示室の壁(深い墨緑) */
  --museum-wall-deep:#0E1511;
}

/* ---- ページヘッダー: 金の二重罫で囲んだ扉のように ---- */
.page-hero.view{
  background:linear-gradient(165deg,#33513A 0%, #1E2E24 52%, #131D17 100%);
  padding:78px 24px 84px;
}
.page-hero.view .page-hero-inner{
  border:1px solid var(--museum-gold-soft);
  padding:38px 26px 40px;
}
/* 外側にもう一本、細い金の罫 (額縁の二重線) */
.page-hero.view .page-hero-inner::before{
  content:''; position:absolute; inset:-9px; pointer-events:none;
  border:1px solid rgba(201,169,97,.16);
}
.page-hero.view .page-hero-eyebrow{color:var(--museum-gold); letter-spacing:.4em; font-weight:600}
.page-hero.view h1{letter-spacing:.16em}
.page-hero.view .page-hero-lead{color:rgba(244,247,241,.86); letter-spacing:.03em}

/* ---- 展示室のご案内 ---- */
.view-museum{background:linear-gradient(180deg,#F6F1E6 0%, var(--cream) 100%)}
.view-museum .eyebrow{color:var(--brown); letter-spacing:.4em}
.view-museum .section-title{letter-spacing:.1em; padding-bottom:24px}
/* 見出しの下線は、ゆず色ではなく金の細い罫に差し替える */
.view-museum .section-title::after{
  width:120px; height:1px; border-radius:0;
  background:linear-gradient(90deg, transparent, var(--museum-gold), transparent);
}
.view-museum .section-subtitle{letter-spacing:.02em; margin-bottom:54px}

/* ---- 各展示室の入口。額縁を掛けた壁面のカード ---- */
.view-room-grid{display:grid; grid-template-columns:1fr; gap:22px; max-width:560px; margin:0 auto}
@media (min-width:820px){
  .view-room-grid{grid-template-columns:1fr 1fr; max-width:940px; gap:30px}
}
.view-room{
  display:flex; flex-direction:column; align-items:center; gap:0;
  width:100%; margin:0; padding:30px 26px 26px; cursor:pointer;
  border:1px solid var(--museum-gold-soft); border-radius:2px;
  background:linear-gradient(170deg,#22322A 0%, var(--museum-wall) 60%, var(--museum-wall-deep) 100%);
  color:#fff; font:inherit; text-align:center;
  box-shadow:0 16px 40px rgba(14,21,17,.26);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
}
.view-room > *{pointer-events:none}
.view-room:hover{
  transform:translateY(-4px); border-color:rgba(201,169,97,.72);
  box-shadow:0 22px 52px rgba(14,21,17,.34);
}
.view-room:active{transform:translateY(-1px)}
/* 室番号と英字の銘板 */
.view-room .vr-plate{
  display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:20px;
}
.view-room .vr-no{
  font-family:var(--font-heading,'Noto Serif JP',serif); font-size:13px; letter-spacing:.2em;
  color:var(--museum-gold); border:1px solid var(--museum-gold-soft);
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
}
.view-room .vr-en{
  font-size:11.5px; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(201,169,97,.92);
}
/* 額縁。中央にアイコンを収める */
.view-room .vr-frame{
  width:120px; height:120px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(201,169,97,.5); outline:1px solid rgba(201,169,97,.14); outline-offset:5px;
  background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.07), transparent 70%);
  margin-bottom:22px;
}
.view-room .vr-icon{font-size:44px; filter:drop-shadow(0 3px 10px rgba(0,0,0,.4))}
.view-room .vr-title{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-size:23px; font-weight:var(--font-weight-heading,600); letter-spacing:.18em; line-height:1.5;
}
.view-room .vr-count{
  font-size:12.5px; letter-spacing:.16em; color:rgba(255,255,255,.6); margin-top:9px;
}
.view-room .vr-count:empty{display:none}
.view-room .vr-enter{
  margin-top:22px; padding-top:16px; width:100%;
  border-top:1px solid rgba(201,169,97,.22);
  font-size:13px; letter-spacing:.18em; color:var(--museum-gold);
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.view-room .vr-arrow{transition:transform .2s ease}
.view-room:hover .vr-arrow{transform:translateX(5px)}
@media (max-width:520px){
  .view-room{padding:26px 20px 22px}
  .view-room .vr-frame{width:104px; height:104px; margin-bottom:18px}
  .view-room .vr-icon{font-size:38px}
  .view-room .vr-title{font-size:21px}
}
/* サムネイルのグリッド (.gallery-grid / .gallery-card / .gallery-thumb /
   .gallery-caption / .gallery-note) は、「見る」を2バナー構成にした
   2026-08-13 に撤去した。全ページが読み込む style.css に使われない指定を
   置かないため削除している (復活が必要なら git から戻せる)。 */

/* =========================================================
   バッジ詳細ページ(認定・称号の解説)
   ========================================================= */
.fact-summary{
  background:#fff; border-left:4px solid var(--yuzu); border-radius:6px;
  padding:20px 22px; font-size:15px; line-height:1.9; color:var(--text); margin:0 0 8px;
}
.confidence-tag{
  display:inline-block; font-size:11.5px; font-weight:700; padding:3px 11px; border-radius:12px;
  margin-left:10px; vertical-align:middle; white-space:nowrap;
}
.confidence-tag.high{background:#E3EFDD; color:#3F6E4A}
.confidence-tag.mid{background:#FFF3D6; color:#8A5A00}
/* 「日本で最も美しい村」ページ: 緑の見出し帯と説明文のあいだに置くロゴ。
   画面幅に応じて大きさを変える (2026-08-22)。 */
.village-logo-figure{
  margin:0 0 32px; display:flex; justify-content:center;
}
.village-logo-large{
  height:clamp(240px, 40vw, 360px); width:auto; display:block;
}
@media (max-width:520px){
  .village-logo-figure{margin-bottom:26px}
  .village-logo-large{height:230px}
}
.badge-detail-section{margin-top:44px}
.badge-detail-section h2{
  font-family:var(--font-heading,'Noto Serif JP',serif); font-size:22px; color:var(--tea-text); margin-bottom:16px;
}
.badge-detail-section > p{font-size:15px; line-height:1.95; color:var(--text); margin-bottom:14px}
.note-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.note-list li{
  position:relative; padding-left:22px; font-size:14.5px; color:var(--text); line-height:1.85;
}
.note-list li::before{content:'・'; position:absolute; left:0; color:var(--yuzu-cta); font-weight:700}
.source-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px}
.source-list li{font-size:13px; color:var(--muted); line-height:1.7}
.source-list a{color:var(--tea-text); word-break:break-all; text-decoration:underline}
/* 外部サイトへのリンクであることが分かるよう、小さな矢印アイコンを添える */
.source-list a[target="_blank"]::after{
  content:'\2197'; display:inline-block; margin-left:3px;
  text-decoration:none; font-size:.9em; color:var(--muted);
}
.caveat-box{
  margin-top:10px; font-size:13.5px; color:var(--muted); line-height:1.85;
  background:var(--cream); border-radius:10px; padding:16px 18px;
}
.stat-table{
  width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 2px 10px rgba(43,43,43,.05); margin-bottom:18px; font-size:13.5px;
}
.stat-table th, .stat-table td{padding:10px 14px; text-align:center; border-bottom:1px solid var(--border)}
.stat-table thead th{background:var(--tea); color:#fff; font-weight:500; white-space:nowrap}
.stat-table tbody tr:last-child th, .stat-table tbody tr:last-child td{border-bottom:none}
.stat-table tbody th{background:var(--cream); font-weight:600; white-space:nowrap; text-align:left}
.stat-table tbody tr.highlight{background:#FFF3D6}
.stat-table-scroll{overflow-x:auto; margin-bottom:18px;
  /* 横に続くことが分かる手がかり。白いグラデは中身と一緒に動き(local)、影は枠に
     固定される(scroll)ので、スクロールできる側にだけ影が残り端で消える(2026-09-23)。 */
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to right, rgba(255,255,255,0), #fff 70%) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) right center;
  background-repeat:no-repeat;
  background-size:34px 100%, 34px 100%, 13px 100%, 13px 100%;
  background-attachment:local, local, scroll, scroll;
  scrollbar-width:thin;
}
.stat-table-scroll::-webkit-scrollbar,
.gsm-scroll::-webkit-scrollbar{height:7px}
.stat-table-scroll::-webkit-scrollbar-track,
.gsm-scroll::-webkit-scrollbar-track{background:rgba(0,0,0,.05); border-radius:4px}
.stat-table-scroll::-webkit-scrollbar-thumb,
.gsm-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.26); border-radius:4px}
.stat-table-scroll .stat-table{margin-bottom:0; min-width:480px}
/* 映像のサムネイル (.drone-thumb / .drone-play-badge) も、グリッド撤去と
   同じ 2026-08-13 に使われなくなったため削除した。 */
.drone-lightbox-stage{
  position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
}
.drone-lightbox-video{
  position:relative; width:100%; max-width:900px; aspect-ratio:16/9; margin:0 24px;
  border-radius:12px; overflow:hidden; background:#111;
}
.drone-lightbox-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.drone-lightbox-video .mg-empty-hint{position:absolute; inset:0}

/* 映像のページは「映像 → フルページで視聴するバナー → 紹介文」の縦並び。
   .mg-page の既定は写真向けの白背景+中央寄せなので、ここで上書きする
   (映像は暗い背景の方が見やすく、紹介文の白文字も読める)。
   入りきらない画面ではページ内を縦スクロールできるようにしてある。 */
/* padding-top は右上の閉じるボタン (top:18px + 48px) を避ける値。
   これより小さいと、映像の上端が ✕ に隠れて YouTube のタイトルが読めなくなる。 */
/* scrollbar-gutter:stable — 紹介文が長いページだけスクロールバーが出て
   内容幅が縮み、映像の大きさが他のページと変わってしまうのを防ぐ
   (実測で 810x456 と 795x447 に分かれた)。 */
.menu-gallery-modal .drone-lightbox-stage{
  flex-direction:column; align-items:center; justify-content:flex-start;
  gap:10px; overflow-y:auto; scrollbar-gutter:stable; padding:70px 12px 14px;
  background-color:transparent;
}
/* 各映像ページの右下すみに置く SKY FACE のロゴ (2026-08-22)。
   展示室の背景が暗いので、ロゴ本来の白地を小さな角丸の下地として残し、
   色がそのまま出るようにする。控えめな大きさで、内容の邪魔をしない。 */
.drone-lightbox-stage .skyface-credit{
  align-self:flex-end; margin:2px 2px 0; flex:0 0 auto;
  height:28px; width:auto; display:block;
  background:#fff; border-radius:5px; padding:3px 5px;
  box-shadow:0 2px 8px rgba(0,0,0,.4); opacity:.94;
}
@media (max-width:520px){
  .drone-lightbox-stage .skyface-credit{height:24px; padding:2px 4px; border-radius:4px}
}
/* 映像は画面ぎりぎりまで大きくする。
   幅は 100% まで伸ばし、上限は「画面の高さから、映像以外に必要な分
   (上下の余白・視聴バナー・紹介文・下部のフッター) を引いた残り」を
   16:9 に換算した値。高さ側を max-height で抑えると width:100% が残って
   映像が縦に潰れるため、必ず幅の上限として与える。 */
.menu-gallery-modal .drone-lightbox-stage .drone-lightbox-video{
  margin:0 auto; flex-shrink:0;
  width:100%; max-width:calc((100vh - 300px) * 16 / 9);
}
@supports (height: 100dvh){
  /* モバイルのアドレスバー分を含めた実際の高さで計算する */
  .menu-gallery-modal .drone-lightbox-stage .drone-lightbox-video{
    max-width:calc((100dvh - 300px) * 16 / 9);
  }
}
/* 映像の下に横並びで置く2つのバナー (視聴 / このエリアのマップ)。
   同じ大きさ・同じ形にそろえ、狭い画面では縦に折り返す (2026-08-22)。 */
.drone-banner-row{
  display:flex; align-items:stretch; justify-content:center;
  gap:14px; flex-wrap:wrap; width:100%; max-width:720px; margin:0 auto;
}
/* 2つのボタンは幅もそろえる。狭い画面では折り返して、それぞれが1行を使う。 */
.drone-banner-row > .drone-fullpage-banner,
.drone-banner-row > .drone-map-banner{
  flex:1 1 260px; max-width:340px; min-width:0; text-align:center;
}
.drone-fullpage-banner,
.drone-map-banner{
  flex-shrink:0; display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:12px 24px; border-radius:999px; text-decoration:none;
  background:var(--yuzu-cta,#c9691a); color:#fff; font-size:15px; font-weight:700;
  letter-spacing:.02em; box-shadow:0 6px 18px rgba(0,0,0,.32);
  transition:background .15s ease, transform .15s ease;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.drone-fullpage-banner:hover,
.drone-map-banner:hover{background:var(--yuzu,#e08a2e); transform:translateY(-2px)}
.drone-fullpage-banner:active,
.drone-map-banner:active{transform:translateY(0)}
/* 子要素はクリック対象にせず、常にリンク本体で受ける */
.drone-fullpage-banner > *,
.drone-map-banner > *{pointer-events:none}
.drone-fullpage-banner .dfb-icon,
.drone-map-banner .dfb-icon{font-size:13px}
.drone-fullpage-banner .dfb-arrow,
.drone-map-banner .dfb-arrow{font-size:15px; opacity:.9}
/* 左右の padding は前後送りボタン (left/right:8px + 42px) を避けるため。
   映像を大きくすると送りボタンの縦位置が紹介文の高さに来て、無いと
   文字がボタンの下に隠れる。 */
.drone-lightbox-desc{
  flex-shrink:0; max-width:760px; margin:0; box-sizing:border-box; padding:0 52px;
  font-size:14px; line-height:1.9; color:rgba(255,255,255,.84); text-align:center;
}
/* 写真ビューアの紹介文。フッターの「室名 — 写真名」の下に出す。
   .mg-footer は食べるページのメニュー表とも共有しているので、
   漏れないよう ID スコープだけに掛ける。 */
#gallery-lightbox-desc{
  flex-shrink:0; max-width:720px; margin:0; box-sizing:border-box;
  font-family:var(--font-heading); font-size:13.5px; line-height:1.95;
  color:rgba(255,255,255,.82); text-align:center; letter-spacing:.02em;
}
#gallery-lightbox-desc:empty{display:none}
/* 紹介文の下の「このエリアのマップを見る」。撮影地が特定できない写真では
   JS が display:none にするので、ここでは見た目だけを決める。 */
#gallery-area-link{
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  padding:9px 18px; border:1px solid rgba(201,169,97,.5); border-radius:2px;
  font-family:var(--font-heading); font-size:12.5px; letter-spacing:.12em;
  color:rgba(201,169,97,.95); text-decoration:none; white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
#gallery-area-link:hover{background:rgba(201,169,97,.14); color:#fff; border-color:var(--museum-gold)}
#gallery-area-link:focus-visible{outline:2px solid var(--museum-gold); outline-offset:2px}
#gallery-area-link .gal-pin{font-size:13px}
#gallery-area-link .gal-arrow{opacity:.75}
@media (max-height:620px){
  #gallery-area-link{padding:7px 14px; font-size:11.5px; letter-spacing:.08em}
}
/* 紹介文が長くてもフッターが写真を押しつぶさないよう、高さの上限を決めて
   あふれた分はここだけスクロールさせる (縦位置の写真は viewport の高さが
   そのまま表示サイズになるため、フッターの肥大がそのまま効いてしまう)。 */
#gallery-lightbox-modal .mg-footer{padding:13px 20px 16px; gap:8px}
@media (max-width:520px){
  #gallery-lightbox-desc{
    font-size:12.5px; line-height:1.8; text-align:left;
    /* 日英いちばん長い紹介文がちょうど収まる高さ (実測 113px / 12.5px = 9.0em)。
       これ以上あふれる文が出たらここだけスクロールする。 */
    max-height:9.4em; overflow-y:auto; scrollbar-width:thin;
  }
}
/* 画面が低いときは写真の見える面積を優先し、紹介文をさらに控えめにする */
@media (max-height:620px){
  #gallery-lightbox-desc{font-size:12px; line-height:1.7; max-height:3.4em; overflow-y:auto}
  #gallery-lightbox-modal .mg-footer{padding:10px 16px 12px; gap:6px}
}
@media (max-width:520px){
  /* 狭い画面では閉じるボタンが 44px 角になるので 18+44=62px を確保する。
     左右はほぼ詰めて、映像の幅を画面いっぱいまで使う。 */
  .menu-gallery-modal .drone-lightbox-stage{padding:64px 8px 10px; gap:8px}
  .drone-fullpage-banner,
  .drone-map-banner{font-size:14px; padding:11px 20px}
  /* 狭い画面では前後送りボタン (left/right:8px + 36px) の上にバナーが
     かぶるので、紹介文と同じだけ左右を逃がす。 */
  .drone-banner-row{gap:10px; max-width:calc(100% - 92px)}
  /* 狭い画面では送りボタンが 36px 角 (left:8px) なので 46px 逃がす */
  .drone-lightbox-desc{font-size:13px; line-height:1.8; text-align:left; padding:0 46px}
  .menu-gallery-modal .drone-lightbox-stage .drone-lightbox-video{
    max-width:calc((100vh - 260px) * 16 / 9);
  }
}
@supports (height: 100dvh){
  @media (max-width:520px){
    .menu-gallery-modal .drone-lightbox-stage .drone-lightbox-video{
      max-width:calc((100dvh - 260px) * 16 / 9);
    }
  }
}

/* 画面が低いとき (横向きのスマホ、ウィンドウを縦に狭めた PC) は、映像・視聴
   バナー・紹介文を同時に収める余地がない。通常と同じ控除値で幅を決めると
   映像が極端に小さくなるので (812x375 で実測 134x75)、ここでは映像が画面に
   収まる最大サイズを優先し、バナーと紹介文はページ内スクロールで見せる。
   閉じるボタンと通し番号も小さくして上の余白を詰める。 */
@media (max-height:620px){
  #drone-lightbox-modal .mg-close{top:10px; right:10px; width:38px; height:38px; font-size:18px}
  #drone-lightbox-modal .mg-indicator{top:14px; left:14px; font-size:12px; padding:5px 12px}
  .menu-gallery-modal .drone-lightbox-stage{padding:54px 12px 10px; gap:8px}
  .menu-gallery-modal .drone-lightbox-stage .drone-lightbox-video{
    max-width:calc((100vh - 180px) * 16 / 9);
  }
}

/* 映像ビューアは画面いっぱいまで映像を出すので、通し番号を既定の
   「下部中央」に置くと紹介文に重なって読めなくなる。左上に移す
   (右上は閉じるボタンなので衝突しない)。写真側は従来どおり下部中央。 */
#drone-lightbox-modal .mg-indicator{
  top:24px; bottom:auto; left:20px; transform:none;
  font-size:13px; padding:6px 14px;
}
@media (max-width:520px){
  #drone-lightbox-modal .mg-indicator{top:20px; left:12px; font-size:12px; padding:5px 12px}
}

/* =========================================================
   展示室 (ライトボックス) の美術館ふう意匠
   ---------------------------------------------------------
   .mg-* は食べるページのメニュー表ギャラリーと共有しているため、
   必ず #gallery-lightbox-modal / #drone-lightbox-modal /
   #drone-area-modal の ID で囲んで、他ページへ波及させない。
   ========================================================= */
#gallery-lightbox-modal,
#drone-lightbox-modal,
#drone-area-modal{background:var(--museum-wall-deep)}

/* ---- 写真は額装して壁に掛ける ----
   .mg-page の背景画像を content 領域に収め、その外側に
   マット(生成りの太枠)と金の縁を重ねて額縁に見せる。 */
/* 下側だけ余白を多めに取り、額縁の外に作品番号を置く場所を作る
   (詰めると番号がマットの白枠に重なって読めなくなる)。 */
#gallery-lightbox-modal .mg-page{
  position:relative; background-color:transparent;
  background-origin:content-box; background-clip:content-box;
  padding:56px 80px 96px;
}
#gallery-lightbox-modal .mg-page::before{
  content:''; position:absolute; inset:38px 62px 78px; pointer-events:none;
  border:13px solid #F1EADC;                       /* マットボード */
  outline:1px solid rgba(201,169,97,.62);           /* 金の縁 */
  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 26px 64px rgba(0,0,0,.5);
}
#gallery-lightbox-modal .mg-indicator{bottom:24px}
@media (max-width:520px){
  #gallery-lightbox-modal .mg-page{padding:40px 46px 74px}
  #gallery-lightbox-modal .mg-page::before{inset:26px 34px 60px; border-width:9px}
  #gallery-lightbox-modal .mg-indicator{bottom:18px}
}

/* ---- 閉じる・前後送り・作品番号 ---- */
#gallery-lightbox-modal .mg-close,
#drone-lightbox-modal .mg-close,
#drone-area-modal .mg-close{
  background:rgba(14,21,17,.6); border:1px solid rgba(201,169,97,.42);
  color:var(--museum-gold); border-radius:50%;
}
#gallery-lightbox-modal .mg-close:hover,
#drone-lightbox-modal .mg-close:hover,
#drone-area-modal .mg-close:hover{background:rgba(201,169,97,.18)}
#gallery-lightbox-modal .mg-nav,
#drone-lightbox-modal .mg-nav{
  background:rgba(14,21,17,.74); border:1px solid rgba(201,169,97,.45);
  box-shadow:none; animation:none;
}
#gallery-lightbox-modal .mg-nav:hover,
#drone-lightbox-modal .mg-nav:hover{background:rgba(201,169,97,.2)}
#gallery-lightbox-modal .mg-prev::after,
#drone-lightbox-modal .mg-prev::after{border-right-color:var(--museum-gold)}
#gallery-lightbox-modal .mg-next::after,
#drone-lightbox-modal .mg-next::after{border-left-color:var(--museum-gold)}
#gallery-lightbox-modal .mg-indicator,
#drone-lightbox-modal .mg-indicator{
  background:transparent; border:1px solid rgba(201,169,97,.38);
  font-family:var(--font-heading,'Noto Serif JP',serif);
  letter-spacing:.18em; color:rgba(255,255,255,.86); border-radius:0;
}
/* 未登録の枠の「準備中」表示も金系で揃える */
#gallery-lightbox-modal .mg-empty-hint,
#drone-lightbox-modal .mg-empty-hint{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  letter-spacing:.16em; color:rgba(201,169,97,.72); font-size:15px;
}
#gallery-lightbox-modal .mg-empty-icon,
#drone-lightbox-modal .mg-empty-icon{opacity:.4}

/* ---- 作品名の銘板 (下部) ---- */
#gallery-lightbox-modal .mg-footer,
#drone-lightbox-modal .mg-footer,
#drone-area-modal .mg-footer{
  background:#0A0F0C; border-top:1px solid rgba(201,169,97,.26);
}
#gallery-lightbox-caption,
#drone-lightbox-caption{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-size:15px; letter-spacing:.18em; color:rgba(255,255,255,.9); line-height:1.9;
}
#gallery-lightbox-modal .mg-footer .btn,
#drone-lightbox-modal .mg-footer .btn,
#drone-area-modal .mg-footer .btn{
  border-color:rgba(201,169,97,.5); color:var(--museum-gold);
  letter-spacing:.16em; border-radius:2px;
}
#gallery-lightbox-modal .mg-footer .btn:hover,
#drone-lightbox-modal .mg-footer .btn:hover,
#drone-area-modal .mg-footer .btn:hover{
  background:rgba(201,169,97,.16); border-color:var(--museum-gold); color:#fff;
}

/* エリア選択の小見出しも金で揃える (既定のゆず色を ID の詳細度で上書き) */
#drone-area-modal .eyebrow{color:var(--museum-gold); letter-spacing:.4em}
#drone-area-modal .drone-area-title{letter-spacing:.16em}
#drone-area-modal .drone-area-lead{letter-spacing:.03em; color:rgba(255,255,255,.72)}
#drone-area-modal .dac-name{
  font-family:var(--font-heading,'Noto Serif JP',serif); letter-spacing:.14em;
}
#drone-area-modal .dac-count{letter-spacing:.14em}
#drone-area-modal .dac-arrow{color:var(--museum-gold)}
#drone-area-modal .drone-area-card:hover{
  border-color:rgba(201,169,97,.72); background:rgba(201,169,97,.12);
}

/* ---- 映像ページ: 視聴バナーと解説 ---- */
.drone-fullpage-banner,
.drone-map-banner{
  background:transparent; border:1px solid rgba(201,169,97,.55);
  color:var(--museum-gold); box-shadow:none; border-radius:2px;
  letter-spacing:.16em; font-weight:600;
}
.drone-fullpage-banner:hover,
.drone-map-banner:hover{
  background:rgba(201,169,97,.16); border-color:var(--museum-gold);
  color:#fff; transform:none;
}
.drone-lightbox-desc{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  letter-spacing:.05em; color:rgba(255,255,255,.82);
}

/* ---- 撮影エリアの衛星写真マップ (紹介文の下) ----
   展示室の壁に掛けた小さな解説図のように、金の細枠で囲む。 */
.drone-area-map{
  flex-shrink:0; width:100%; max-width:760px; margin:2px 0 0;
  display:flex; flex-direction:column; align-items:center; gap:9px;
}
.drone-area-map .dam-caption{
  font-size:11.5px; letter-spacing:.2em; color:rgba(201,169,97,.9);
  text-transform:none; text-align:center; line-height:1.7;
}
.drone-area-map .dam-caption:empty{display:none}
.drone-area-map .dam-frame{
  position:relative; width:100%; aspect-ratio:16/7; overflow:hidden;
  border:1px solid rgba(201,169,97,.5); outline:1px solid rgba(201,169,97,.14);
  outline-offset:4px; background:#0A0F0C;
}
.drone-area-map .dam-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  /* 衛星写真は明るいので、周りの展示室に馴染むよう少しだけ落ち着かせる */
  filter:saturate(.92) brightness(.94);
  /* 地図そのものをタップしたら経路案内を開きたいので、埋め込み側には
     タップを渡さない (下の .dam-hit が受け取る)。この指定を外すと
     Google 側のパン/ズームにタップを奪われ、経路案内が開かなくなる。 */
  pointer-events:none;
}
/* 衛星写真の上に重ねる、透明な経路案内リンク */
.drone-area-map .dam-hit{
  position:absolute; inset:0; z-index:2; display:block;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.drone-area-map .dam-hit:focus-visible{
  outline:2px solid var(--museum-gold); outline-offset:-3px;
}
/* 埋め込みの中の Google 製リンクは通常の地図で開いてしまうので、
   衛星写真のまま開くリンクをこちらで用意する。 */
/* 地図の下のリンク2本。左が「衛星写真で拡大表示」、右が「ここへの経路を案内」。
   地図そのもののタップは経路案内に割り当ててあるので、主である経路案内を
   右端 (行の終わり) に置いている。狭い画面では折り返して中央に寄せる。 */
.drone-area-map .dam-links{
  align-self:flex-end; display:flex; align-items:center;
  gap:16px; flex-wrap:wrap; justify-content:flex-end;
}
.drone-area-map .dam-open,
.drone-area-map .dam-zoom{
  text-decoration:none;
  font-size:11.5px; letter-spacing:.14em; color:rgba(201,169,97,.9);
  border-bottom:1px solid rgba(201,169,97,.3); padding-bottom:2px;
  transition:color .15s ease, border-color .15s ease;
}
.drone-area-map .dam-open:hover,
.drone-area-map .dam-zoom:hover{color:#fff; border-color:var(--museum-gold)}
.drone-area-map .dam-open:empty,
.drone-area-map .dam-zoom:empty{display:none}
@media (max-width:520px){
  .drone-area-map .dam-links{align-self:center; justify-content:center; gap:12px}
  .drone-area-map .dam-open,
  .drone-area-map .dam-zoom{font-size:11px; letter-spacing:.1em}
}
@media (max-width:520px){
  .drone-area-map{gap:7px}
  .drone-area-map .dam-caption{font-size:11px; letter-spacing:.14em}
  .drone-area-map .dam-frame{aspect-ratio:16/9}
}
/* 画面が低いときは映像を優先するので、地図は縦を詰める */
@media (max-height:620px){
  .drone-area-map .dam-frame{aspect-ratio:16/6}
}

/* ドローン映像: エリア選択画面 (バナー → ここ → 各エリアのビューア) */
/* 縦の中央寄せ (flex の align-items:center / grid の align-content:center) は
   どちらも、画面が低いとき (例 320x568) に上端がスクロール範囲の外へ出て
   見出しに到達できなくなる (実測で両方とも -80px 前後はみ出した)。
   そのため上寄せで組む。大きい画面ではカードの下に余白が残るが、
   到達できないより良い。padding-top は右上の閉じるボタンを避ける値。 */
.drone-area-modal .drone-area-viewport{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:flex; align-items:flex-start; justify-content:center; padding:74px 20px 28px;
}
.drone-area-inner{width:100%; max-width:660px; text-align:center; color:#fff}
/* 黒背景では既定の eyebrow 色が沈むので明るい側に寄せる */
.drone-area-modal .eyebrow{color:var(--yuzu,#e08a2e)}
.drone-area-title{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-size:clamp(22px,3vw,28px); font-weight:var(--font-weight-heading,600);
  color:#fff; margin:4px 0 12px;
}
.drone-area-lead{font-size:14.5px; color:rgba(255,255,255,.76); line-height:1.9; margin:0 0 26px}
.drone-area-grid{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width:620px){
  .drone-area-grid{grid-template-columns:1fr 1fr; gap:14px}
}
/* 室番号 (I, II, III…) は CSS カウンタで自動採番する。
   エリアを増減しても HTML を直さなくてよい。 */
.drone-area-grid{counter-reset:room}
.drone-area-card{
  display:flex; align-items:center; gap:14px; width:100%; padding:19px 20px; margin:0;
  border:1px solid var(--museum-gold-soft); border-radius:2px; cursor:pointer;
  background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  color:#fff; font:inherit; text-align:left; counter-increment:room;
  transition:background .15s ease, transform .15s ease, border-color .15s ease;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
}
.drone-area-card::before{
  content:counter(room, upper-roman);
  flex-shrink:0; width:27px; height:27px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading,'Noto Serif JP',serif); font-size:12px; letter-spacing:.06em;
  color:var(--museum-gold); border:1px solid var(--museum-gold-soft);
}
/* 子要素はクリック対象にせず、常に親ボタンで受ける (文字選択でタップが
   空振りするのを防ぐ。.menu-gallery-banner と同じ理由) */
.drone-area-card > *{pointer-events:none}
.drone-area-card:hover{background:rgba(255,255,255,.14); transform:translateY(-2px)}
.drone-area-card:active{transform:translateY(0)}
.drone-area-card .dac-name{flex:1; font-size:17px; font-weight:700; letter-spacing:.02em}
.drone-area-card .dac-count{font-size:13px; color:rgba(255,255,255,.68); white-space:nowrap}
.drone-area-card .dac-arrow{font-size:22px; opacity:.8}
/* ビューア下部に出す「エリア名 — 映像タイトル」 */
#drone-lightbox-caption:empty{display:none}
#drone-lightbox-caption{font-size:14px; color:rgba(255,255,255,.85); line-height:1.7}

/* =========================================================
   PC (幅1000px以上) で「見る」を大きく・読みやすく (2026-08-21)
   ---------------------------------------------------------
   スマホは現状の見え方が最適なため一切変更せず、PC のときだけ効かせる。
   きっかけ: PC だと写真が小さい/文字が小さい/マップのリンクが目立たない、
   という指摘 (Koutaro)。実測 (1512x900) では縦積みレイアウトのせいで
   銘板 202px + 額縁の余白 152px = 354px (画面の39%) が写真以外に取られ、
   写真の高さが 546px しか残っていなかった。
   対策:
   (1) 写真ビューアを「写真(左) + 作品ラベル(右)」の横並びにして、
       写真が画面の高さいっぱいを使えるようにする。美術館で絵の横に
       解説プレートを掛けるのと同じ配置で、意匠とも合う。
   (2) 銘板(作品名・解説)の文字を拡大。
   (3)「このエリアのマップを見る」を金地のボタンにして目立たせる。
   (4) ドローン映像は操作ボタンを1行にまとめ、空いた高さを映像に回す。
   ========================================================= */
@media (min-width:1000px){
  #gallery-lightbox-modal{
    --gal-panel:clamp(320px, 23vw, 400px);
    flex-direction:row;
  }
  #gallery-lightbox-modal .mg-viewport{flex:1 1 auto; min-width:0}

  /* 額縁まわりの余白を詰めて、写真そのものを大きく取る
     (::before の額縁は padding より 18px 内側、という元の関係を維持) */
  #gallery-lightbox-modal .mg-page{padding:44px 60px 52px}
  #gallery-lightbox-modal .mg-page::before{inset:26px 42px 34px; border-width:14px}
  #gallery-lightbox-modal .mg-indicator{bottom:14px}

  /* ✕ は写真エリアの右上へ。右の銘板パネルに重ならないよう内側に寄せる */
  #gallery-lightbox-modal .mg-close{right:calc(var(--gal-panel) + 18px)}

  /* 銘板を下部の帯から、右側の縦長パネルへ */
  #gallery-lightbox-modal .mg-footer{
    flex:0 0 var(--gal-panel); width:var(--gal-panel); height:100%;
    box-sizing:border-box; overflow-y:auto;
    justify-content:center; align-items:stretch; text-align:center;
    gap:15px; padding:40px 30px;
    border-top:none; border-left:1px solid rgba(201,169,97,.26);
  }
  #gallery-lightbox-modal .mg-footer .btn{width:100%; font-size:14.5px; padding:13px 14px}

  /* 文字を大きく、行間もゆったりと */
  #gallery-lightbox-caption{font-size:18px; letter-spacing:.14em; line-height:1.95}
  #gallery-lightbox-desc{
    font-size:15.5px; line-height:2.1; max-width:none;
    color:rgba(255,255,255,.88); text-align:left;
  }

  /* 「このエリアのマップを見る」を金地のボタンにして目立たせる */
  #gallery-area-link{
    justify-content:center; white-space:nowrap;
    padding:14px 12px; font-size:13.5px; letter-spacing:.06em; font-weight:700;
    color:#14201A; background:var(--museum-gold); border-color:var(--museum-gold);
    box-shadow:0 6px 18px rgba(201,169,97,.26);
  }
  #gallery-area-link:hover{background:#DCC07E; border-color:#DCC07E; color:#0E1511}
  #gallery-area-link .gal-pin{font-size:15px}
  #gallery-area-link .gal-arrow{opacity:.85}

  /* ---- ドローン映像 ---- */
  /* 操作ボタンを縦積みから1行に変えてフッターを薄くし、その分を映像へ */
  #drone-lightbox-modal .mg-footer{
    flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center;
    padding:12px 20px 14px; gap:12px;
  }
  #drone-lightbox-modal .mg-footer .btn{font-size:14.5px; padding:11px 22px}
  .menu-gallery-modal .drone-lightbox-stage .drone-lightbox-video{
    max-width:calc((100vh - 230px) * 16 / 9);
    max-width:calc((100dvh - 230px) * 16 / 9);
  }
  .drone-lightbox-desc{font-size:15.5px; line-height:2.05; max-width:900px}
  .drone-fullpage-banner,
  .drone-map-banner{font-size:15px; padding:13px 26px}
}
/* 横長でも縦が短い画面 (例 1280x620) では、銘板を中央寄せにすると
   内容があふれたとき上端が読めなくなるので上詰めにする。 */
@media (min-width:1000px) and (max-height:700px){
  #gallery-lightbox-modal .mg-footer{justify-content:flex-start; padding-top:64px}
}

/* =========================================================
   スマホの「見る」— 文章を大きく、マップを目立たせる (2026-08-21)
   ---------------------------------------------------------
   きっかけ: スマホで写真・ドローン映像の下の文章が小さい、
   「このエリアのマップを見る」が目立たない、という指摘 (Koutaro)。
   前提: スマホの写真の大きさは「ちょうど良い」との評価なので、
   写真は縮めない。実測 (375x812) では
     ・横位置の写真 → 幅で決まる (283x189) ので帯の高さは影響しない
     ・縦位置の写真 → 高さで決まる (276x368) ので帯が伸びると縮む
   よって「帯を太らせずに文字だけ大きくする」ため、
   文字の拡大分を (a) ボタンの余白圧縮 (b) 額縁まわりの余白圧縮 で相殺する。
   ========================================================= */

/* ---- 「このエリアのマップを見る」を金地のボタンにする (全画面共通) ----
   細い枠線だけの控えめなリンクだと、黒い銘板の中で埋もれて気づかれない。 */
#gallery-area-link{
  justify-content:center; font-weight:700;
  color:#14201A; background:var(--museum-gold); border-color:var(--museum-gold);
  box-shadow:0 5px 16px rgba(201,169,97,.26);
}
#gallery-area-link:hover{background:#DCC07E; border-color:#DCC07E; color:#0E1511}
#gallery-area-link .gal-pin{opacity:1}
#gallery-area-link .gal-arrow{opacity:.85}

@media (max-width:520px){
  /* 額縁まわりを少し詰めて、下の帯が伸びる分をここで取り戻す
     (::before の額縁は padding より上下14px・左右12px 内側、という関係を維持) */
  #gallery-lightbox-modal .mg-page{padding:36px 46px 66px}
  #gallery-lightbox-modal .mg-page::before{inset:22px 34px 52px; border-width:9px}

  /* 作品名 */
  #gallery-lightbox-caption{font-size:16.5px; letter-spacing:.12em; line-height:1.85}

  /* 紹介文を拡大。長文はこれまで通りここだけスクロールさせる */
  #gallery-lightbox-desc{
    font-size:14.5px; line-height:1.9; text-align:left;
    max-height:8.4em; overflow-y:auto; scrollbar-width:thin;
  }

  /* マップのボタン: 文字を大きくしつつ、高さは従来と同じ 44px 前後に収める */
  #gallery-area-link{
    padding:10px 14px; font-size:13.5px; letter-spacing:.05em; white-space:nowrap;
  }
  #gallery-area-link .gal-pin{font-size:15px}

  /* 下の 2 つのボタンは余白を詰めて、拡大した文章のぶんを捻出する。
     min-height は指で押しやすい 46px までに留める (既定は 52px)。 */
  #gallery-lightbox-modal .mg-footer{padding:12px 16px 14px; gap:7px}
  #gallery-lightbox-modal .mg-footer .btn{
    font-size:13.5px; padding:10px 16px; letter-spacing:.1em; min-height:46px;
  }

  /* ドローン映像の紹介文。映像の大きさを決める式には触れないので映像は不変 */
  .drone-lightbox-desc{font-size:14.5px; line-height:1.95}
  #drone-lightbox-caption{font-size:16px; letter-spacing:.12em}
}

/* 横向きのスマホなど画面が低いときは余地が少ないので、控えめに上げるだけ */
@media (max-height:620px){
  #gallery-lightbox-desc{font-size:13px; line-height:1.75; max-height:3.6em}
  #gallery-area-link{padding:9px 14px; font-size:12.5px; letter-spacing:.05em}
}

/* ---- 横向きスマホ (幅700px以上 かつ 高さ620px以下) ----
   縦積みのままだと銘板だけで画面が埋まり、写真の表示領域が 9px しか
   残らず実質なにも見えない状態だった (変更前の 812x375 で実測)。
   横幅には余裕があるので、PC と同じ「写真(左) + ラベル(右)」の
   横並びに切り替えて写真を出す。文字は画面の高さなりに控えめにする。 */
@media (min-width:700px) and (max-height:620px){
  #gallery-lightbox-modal{--gal-panel:clamp(260px, 34vw, 320px); flex-direction:row}
  #gallery-lightbox-modal .mg-viewport{flex:1 1 auto; min-width:0}
  #gallery-lightbox-modal .mg-page{padding:22px 40px 30px}
  #gallery-lightbox-modal .mg-page::before{inset:12px 30px 20px; border-width:7px}
  #gallery-lightbox-modal .mg-indicator{bottom:8px; font-size:12px; padding:5px 12px}
  #gallery-lightbox-modal .mg-close{
    right:calc(var(--gal-panel) + 10px); top:10px; width:38px; height:38px; font-size:18px;
  }
  #gallery-lightbox-modal .mg-footer{
    flex:0 0 var(--gal-panel); width:var(--gal-panel); height:100%;
    box-sizing:border-box; overflow-y:auto;
    justify-content:flex-start; align-items:stretch; text-align:center;
    gap:8px; padding:14px 16px;
    border-top:none; border-left:1px solid rgba(201,169,97,.26);
  }
  #gallery-lightbox-caption{font-size:14.5px; letter-spacing:.1em; line-height:1.7}
  #gallery-lightbox-desc{font-size:13px; line-height:1.85; max-height:none; text-align:left}
  #gallery-area-link{padding:10px 12px; font-size:12.5px; letter-spacing:.04em}
  #gallery-lightbox-modal .mg-footer .btn{
    font-size:12.5px; padding:9px 12px; min-height:42px; width:100%;
  }
}


/* =========================================================
   巡る — グリーンスローモビリティ 茶畑周遊ツアー (2026-08-23)
   ========================================================= */
/* ページ冒頭に置く案内チラシ */
.gsm-flyer{margin:0 auto 26px; max-width:560px}
.gsm-flyer img{
  width:100%; height:auto; display:block; border-radius:14px;
  box-shadow:0 6px 22px rgba(43,43,43,.14);
}
.gsm-lead{max-width:760px; margin:0 auto 26px}
.gsm-lead p{font-size:15px; line-height:2; color:var(--text); text-align:center}
.gsm-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:34px}
@media (max-width:760px){.gsm-cards{grid-template-columns:1fr}}
.gsm-card{
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px 22px;
  box-shadow:0 2px 10px rgba(43,43,43,.05);
}
.gsm-card h3{
  font-family:var(--font-heading,'Noto Serif JP',serif); font-size:17px;
  color:var(--tea-text); margin-bottom:10px;
}
.gsm-card p{font-size:14px; line-height:1.9; color:var(--text)}
.gsm-card .gsm-note{font-size:12.5px; color:var(--muted); line-height:1.8; margin-top:10px}
.gsm-card .gsm-tel{margin-top:8px; font-size:14px; line-height:1.9}
.gsm-card .gsm-tel .tel-inline{font-size:21px; letter-spacing:.02em}
.gsm-card-gift{background:linear-gradient(135deg,#fff,var(--cream-deep)); border-color:var(--yuzu-soft)}
.gsm-fare{width:100%; border-collapse:collapse; margin-top:4px}
.gsm-fare th, .gsm-fare td{padding:7px 4px; font-size:14px; border-bottom:1px dashed var(--border)}
.gsm-fare th{text-align:left; font-weight:500; color:var(--muted)}
.gsm-fare td{text-align:right; font-weight:700; color:var(--tea-text); white-space:nowrap}
.gsm-h3{
  font-family:var(--font-heading,'Noto Serif JP',serif); font-size:19px;
  color:var(--tea-text); margin:30px 0 6px; text-align:center;
}
.gsm-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:14px;
  /* 横に続くことが分かる手がかり。白いグラデは中身と一緒に動き(local)、影は枠に
     固定される(scroll)ので、スクロールできる側にだけ影が残り端で消える(2026-09-23)。 */
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to right, rgba(255,255,255,0), #fff 70%) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) right center;
  background-repeat:no-repeat;
  background-size:34px 100%, 34px 100%, 13px 100%, 13px 100%;
  background-attachment:local, local, scroll, scroll;
  scrollbar-width:thin;
}
.gsm-table{width:100%; min-width:520px; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden}
.gsm-table th, .gsm-table td{padding:11px 12px; border:1px solid var(--border); font-size:14px; vertical-align:middle}
.gsm-table thead th{background:var(--tea); color:#fff; font-weight:500; font-size:13px; white-space:nowrap}
.gsm-table tbody th{background:var(--cream); color:var(--tea-text); font-weight:700; white-space:nowrap; width:64px; text-align:center}
.gsm-table .gsm-time{font-weight:700; color:var(--text); white-space:nowrap}
.gsm-table .gsm-ref{font-size:12px; color:var(--muted); line-height:1.7}
.gsm-route{
  list-style:none; counter-reset:gsm; display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px; margin-top:14px; padding:0;
}
.gsm-stop{
  counter-increment:gsm; position:relative;
  background:#fff; border:1px solid var(--border); border-radius:999px;
  padding:9px 16px 9px 38px; font-size:14px; font-weight:700; color:var(--tea-text);
  box-shadow:0 2px 8px rgba(43,43,43,.05);
}
.gsm-stop::before{
  content:counter(gsm); position:absolute; left:9px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; background:var(--tea); color:#fff;
  font-size:12px; display:flex; align-items:center; justify-content:center;
}
.gsm-stop span{display:block; font-size:11px; font-weight:400; color:var(--muted); letter-spacing:.02em}
.gsm-notes{max-width:760px; margin:14px auto 0; padding-left:20px}
.gsm-notes li{font-size:14px; line-height:1.95; color:var(--text); margin-bottom:4px}
@media (max-width:520px){
  .gsm-route{flex-direction:column; align-items:stretch}
  .gsm-stop{text-align:left}
  .gsm-card{padding:18px 18px}
}


/* =========================================================
   巡る — レンタサイクル詳細 (2026-08-23)
   ========================================================= */
/* 一覧のカードをそのままリンクにしたもの (見た目はカードのまま) */
.card-link{
  display:block; text-decoration:none; color:inherit;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card-link:hover{
  transform:translateY(-4px); border-color:var(--leaf);
  box-shadow:0 12px 26px rgba(43,43,43,.12);
}
.card-link:focus-visible{outline:3px solid var(--yuzu-cta); outline-offset:2px}

/* 安積親王陵墓のページ: 冒頭の要点カード(4枚)。rc-card の見た目を流用する。 */
.asaka-facts{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:32px}
@media (max-width:720px){.asaka-facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:380px){.asaka-facts{grid-template-columns:1fr}}
.asaka-facts .rc-big{font-size:19px}

/* カードを6枚に増やしたので3列にする (2026-08-27)。
   4列のままだと2行目が2枚だけになって間延びする。 */
.asaka-facts.is-six{grid-template-columns:repeat(3,1fr)}
@media (max-width:720px){.asaka-facts.is-six{grid-template-columns:repeat(2,1fr)}}
@media (max-width:380px){.asaka-facts.is-six{grid-template-columns:1fr}}

/* Google の口コミへの入口。ほかのカードと見分けがつくよう色を変える。
   カード全体をリンクにして、どこを押せばよいか迷わせない。 */
a.rc-card.rc-review{
  display:flex; flex-direction:column; justify-content:center;
  text-decoration:none; cursor:pointer;
  background:linear-gradient(135deg, var(--yuzu-soft, #FDF3E0) 0%, #fff 100%);
  border-color:var(--yuzu-cta);
  box-shadow:0 3px 14px rgba(214,138,42,.18);
  transition:transform .15s, box-shadow .15s;
}
a.rc-card.rc-review:hover,
a.rc-card.rc-review:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(214,138,42,.28);
}
a.rc-card.rc-review:focus-visible{outline:3px solid var(--yuzu); outline-offset:2px}
a.rc-card.rc-review h2,a.rc-card.rc-review .rc-card-label{color:var(--yuzu-cta); font-weight:700}
a.rc-card.rc-review .rc-big{font-size:17px; color:var(--tea-text)}
a.rc-card.rc-review .rc-unit{display:block; font-size:12px; color:var(--muted); margin-top:4px}

/* 口コミカードの下に出す、和束の郷からのお願い。
   カードと同じ幅にそろえ、主張しすぎない見た目にする。 */
.rc-review-note{
  margin:-20px 0 30px; padding:14px 18px;
  background:var(--cream, #FAF6EE); border:1px dashed var(--yuzu-cta);
  border-radius:12px; font-size:13px; line-height:1.85; color:var(--tea-text);
}
.rc-review-note strong{color:var(--yuzu-cta)}
@media (max-width:560px){
  .rc-review-note{font-size:12.5px; padding:12px 14px; margin-top:-16px}
  a.rc-card.rc-review .rc-big{font-size:16px}
}

@media (max-width:720px){.asaka-facts .rc-big{font-size:18px}}

/* 万葉集の和歌。縦の罫と余白で「引用」であることを示す。 */
.asaka-poem{
  margin:26px 0; padding:26px 24px; border-left:4px solid var(--leaf);
  background:var(--cream); border-radius:0 14px 14px 0;
}
.asaka-poem blockquote{
  margin:0; font-family:var(--font-heading,'Noto Serif JP',serif);
  font-size:19px; line-height:2.1; color:var(--tea-text); letter-spacing:.04em;
}
@media (max-width:520px){.asaka-poem{padding:22px 18px} .asaka-poem blockquote{font-size:17px; line-height:2}}
.asaka-poem figcaption{
  margin-top:14px; font-size:13px; color:var(--muted); text-align:right;
}
/* 歩いてめぐる散策コース(和束の郷 → 歌碑 → 陵墓)。番号つきの縦並びで、
   左に丸番号、右に地点名と補足。番号どうしを縦線でつないで道すじに見せる。 */
.asaka-course{
  list-style:none; margin:0 0 22px; padding:0;
  display:flex; flex-direction:column; gap:0;
}
.asaka-course li{display:flex; gap:16px; position:relative; padding-bottom:22px}
/* 番号と番号をつなぐ縦線(最後の地点には引かない) */
.asaka-course li:not(:last-child)::before{
  content:''; position:absolute; left:16px; top:34px; bottom:0;
  width:2px; background:var(--border);
}
.asaka-course li:last-child{padding-bottom:0}
.asaka-course .ac-step{
  flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  background:var(--tea); color:#fff; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; position:relative; z-index:2;
}
.asaka-course .ac-body{display:flex; flex-direction:column; gap:4px; padding-top:5px}
.asaka-course .ac-body strong{font-size:15.5px; color:var(--tea-text)}
.asaka-course .ac-note{font-size:13.5px; color:var(--muted); line-height:1.8}
/* 由来の言い伝えなど、本文中の箇条書き */
.asaka-list{margin:0 0 18px; padding-left:1.3em; color:var(--muted); font-size:15px; line-height:1.95}
.asaka-list li{margin-bottom:6px}
.asaka-list strong{color:var(--tea-text)}
/* 見どころ詳細ページの「参考にした資料」。本文よりひとまわり控えめにし、
   出典であることが分かるよう罫線でしっかり区切る(2026-08-25 ご指示)。 */
.rc-sources{
  margin:34px 0 8px; padding:24px 22px;
  background:var(--cream); border:1px solid var(--cream-deep); border-radius:14px;
}
.rc-sources h2{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-size:16px; color:var(--tea-text); margin:0 0 10px;
}
.rc-sources-lead{font-size:13px; color:var(--muted); line-height:1.85; margin:0 0 14px}
.rc-sources ul{margin:0; padding-left:1.25em; list-style:disc}
.rc-sources li{font-size:13.5px; line-height:1.9; color:var(--muted); margin-bottom:5px}
.rc-sources li a{color:var(--tea-text); text-decoration:underline; text-underline-offset:2px}
.rc-sources li a:hover{color:var(--yuzu-cta)}
/* 出典は外部サイトへ新しいタブで開く。.source-list と同じ小さな矢印を添える（支援技術には読ませない） */
.rc-sources li a[target="_blank"]::after{
  content:'\2197'; content:'\2197' / ''; display:inline-block; margin-left:3px;
  text-decoration:none; font-size:.9em; color:var(--muted);
}
/* 参考資料をアコーディオンに (2026-08-31 ご指示)。
   読み上げ(read-aloud.js)は details.rc-sec を拾うので、資料一覧が読まれないよう
   rc-sec は使わず、開閉の見た目だけ本文のアコーディオンとそろえる。 */
.rc-sources-acc > summary{
  list-style:none; cursor:pointer; position:relative; padding-right:34px;
}
.rc-sources-acc > summary::-webkit-details-marker{display:none}
.rc-sources-acc > summary:focus-visible{outline:3px solid var(--yuzu); outline-offset:3px}
.rc-sources-acc > summary h2{margin:0}
.rc-sources-acc > summary::after{
  content:'+'; position:absolute; right:4px; top:-2px;
  font-family:var(--font-body,'Noto Sans JP',sans-serif);
  font-size:22px; font-weight:400; color:var(--leaf); line-height:1.4;
}
.rc-sources-acc[open] > summary::after{content:'−'; color:var(--yuzu-cta)}
.rc-sources-acc > summary:hover h2{opacity:.75}
.rc-sources-body{padding-top:14px}
.rc-sources-note{
  margin:14px 0 0; padding-top:12px; border-top:1px dashed var(--cream-deep);
  font-size:12.5px; color:var(--muted);
}
@media (max-width:520px){
  .rc-sources{padding:20px 16px}
  .rc-sources li{font-size:13px}
}
/* まちのみどころ各ページの見出し写真 (2026-08-26 追加)。
   .rc-visual は max-width:520px の正方形向けで、横長の風景写真には小さい。
   出所の写真は縦横比がまちまち (3:2 / 16:9 / 4:3) なので、aspect-ratio と
   object-fit:cover でページ間の見た目をそろえる。 */
/* まちのみどころ各ページのドローン映像 (2026-08-26 追加)。
   YouTube の iframe は幅を決めても高さが追随しないので、16:9 の箱を
   padding-top で作り、その中に絶対配置で敷く (aspect-ratio 非対応の
   古い端末でも崩れない従来からの手法)。 */
.rc-drone{margin:0 auto 10px; max-width:100%}
.rc-drone-frame{
  position:relative; width:100%; padding-top:56.25%;
  border-radius:16px; overflow:hidden; background:#000;
  box-shadow:0 6px 20px rgba(43,43,43,.12);
}
.rc-drone-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}
.rc-drone figcaption{
  margin-top:10px; font-size:13px; color:var(--muted); line-height:1.7;
}
.rc-drone-cta{margin:0 0 30px; text-align:center}
.rc-photo-cta{margin:-14px 0 26px; text-align:center}
/* まちのみどころ各章の折りたたみ (2026-08-26 追加)。
   FAQ・バス時刻表と同じ details/summary 方式にそろえる。JS を使わないので
   検索エンジンにも中身が読まれ、ページ内検索(Ctrl+F)も効く。
   見出しの見た目は従来の .rc-h2 をそのまま流用し、右端に開閉の印を出す。 */
.rc-sec{border-bottom:1px solid var(--border); margin:0 0 4px}
.rc-sec > summary{
  list-style:none; cursor:pointer; position:relative;
  padding-right:34px;
}
.rc-sec > summary::-webkit-details-marker{display:none}
.rc-sec > summary:focus-visible{outline:3px solid var(--yuzu); outline-offset:3px}
.rc-sec > summary .rc-h2{margin-bottom:14px}
/* 開閉の印。閉じているときは＋、開いていると− */
.rc-sec > summary::after{
  content:'+'; position:absolute; right:6px; top:2px;
  font-family:var(--font-body,'Noto Sans JP',sans-serif);
  font-size:22px; font-weight:400; color:var(--leaf); line-height:1.4;
}
.rc-sec[open] > summary::after{content:'−'; color:var(--yuzu-cta)}
.rc-sec > summary:hover .rc-h2{opacity:.75}
.rc-sec-body{padding-bottom:10px}
/* 章ごとの朗読ボタン (2026-08-26 追加)。
   見出しの中に置くので、見出しの文字サイズを継がないよう明示的に指定する。
   非対応の端末では JS 側がボタンを作らないため、この指定は使われない。 */
.read-aloud{
  appearance:none; cursor:pointer; vertical-align:middle;
  display:inline-flex; align-items:center; gap:5px;
  margin-left:12px; padding:5px 12px;
  font-family:var(--font-body,'Noto Sans JP',sans-serif);
  font-size:12.5px; font-weight:700; line-height:1;
  color:var(--tea-text); background:#fff;
  border:1px solid var(--border); border-radius:999px;
  box-shadow:0 1px 4px rgba(43,43,43,.06);
  transition:background .15s, color .15s, border-color .15s;
}
.read-aloud:hover{background:var(--cream)}
.read-aloud:focus-visible{outline:3px solid var(--yuzu); outline-offset:2px}
.read-aloud .ra-icon{font-size:13px}
/* 読み上げ中はひと目で分かるようにする */
.read-aloud.is-speaking{
  background:var(--yuzu-cta); color:#fff; border-color:var(--yuzu-cta);
}
.read-aloud.is-speaking .ra-icon{animation:ra-pulse 1.1s ease-in-out infinite}
@keyframes ra-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (max-width:560px){
  .read-aloud{margin-left:8px; padding:5px 10px; font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .read-aloud.is-speaking .ra-icon{animation:none}
}

@media (max-width:560px){
  .rc-sec > summary{padding-right:30px}
  .rc-sec > summary::after{right:2px; font-size:20px}
}

@media (max-width:560px){
  .rc-drone-frame{border-radius:12px}
}
.rc-banner{margin:0 auto 28px; max-width:100%}
.rc-banner img{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block;
  border-radius:16px; box-shadow:0 6px 20px rgba(43,43,43,.12);
}
.rc-banner figcaption{
  margin-top:10px; font-size:13px; color:var(--muted); text-align:center; line-height:1.6;
}
@media (max-width:560px){
  .rc-banner img{aspect-ratio:4/3; border-radius:12px}
}
/* バナーを2枚ならべる（季節ちがいの写真など）。既存の .rc-banner の見た目はそのまま使う。 */
.rc-banner-pair{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0 auto 28px}
.rc-banner-pair .rc-banner{margin:0}
@media (max-width:700px){
  .rc-banner-pair{grid-template-columns:1fr; gap:16px}
}
.rc-visual{margin:0 auto 26px; max-width:520px}
.rc-visual img{width:100%; height:auto; display:block; border-radius:16px; box-shadow:0 6px 20px rgba(43,43,43,.12)}
/* 本文中の古写真などの説明 (2026-09-14 弥勒磨崖仏) */
.rc-visual figcaption{margin-top:10px; font-size:13px; color:var(--muted); text-align:center; line-height:1.6}
.rc-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:30px}
@media (max-width:560px){.rc-cards{grid-template-columns:1fr}}
.rc-card{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; text-align:center; box-shadow:0 2px 10px rgba(43,43,43,.05);
}
/* データカードの見出し。文書構造上は見出しではなくラベルなので p.rc-card-label に
   組み替えた(2026-08-31)。旧マークアップの h2 も当分そのまま効くようにしておく。 */
.rc-card h2,.rc-card .rc-card-label{
  font-family:var(--font-heading,'Noto Serif JP',serif); font-size:15px;
  color:var(--muted); margin:0 0 6px; font-weight:600;
}
.rc-big{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:26px; font-weight:600; color:var(--yuzu-cta); line-height:1.4}
.rc-unit{font-size:15px; color:var(--muted); font-weight:400}
.rc-h2{
  font-family:var(--font-heading,'Noto Serif JP',serif); font-size:20px;
  color:var(--tea-text); margin:30px 0 10px; text-align:center;
}
.rc-text{font-size:15px; line-height:2; color:var(--text); max-width:660px; margin:0 auto}
.rc-contact{
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:22px 24px; box-shadow:0 2px 10px rgba(43,43,43,.05); margin-top:14px;
}
.rc-org{
  font-family:var(--font-heading,'Noto Serif JP',serif); font-size:19px;
  color:var(--tea-text); margin-bottom:12px; text-align:center;
}
.rc-table{width:100%; border-collapse:collapse}
.rc-table th, .rc-table td{padding:11px 8px; font-size:14.5px; border-bottom:1px solid var(--border); line-height:1.85; text-align:left; vertical-align:top}
.rc-table th{width:84px; color:var(--muted); font-weight:500; white-space:nowrap}
/* 英語ページは見出し語が長く、nowrap のままだと見出し列が広がって本文列がつぶれる
   (2026-09-09 実測: 幅375pxで本文列が120px・表の高さ3967px、白栖撰原では表が画面外へ32px出ていた)。
   英語のときだけ折り返しを許す。日本語ページ (lang="ja") には当たらない。 */
html[lang="en"] .rc-table th{white-space:normal}
.rc-table tr:last-child th, .rc-table tr:last-child td{border-bottom:none}
.rc-cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:18px}
/* 商工会ホームページへのバナー (戻るボタンのすぐ上) */
.rc-site{display:flex; justify-content:center; margin-top:26px}
/* 経路案内バナーの直後にホームページのバナーが続くので、間隔を詰める */
.gsm-map-link + .rc-site{margin-top:12px}
/* お問い合わせバナーは直前のバナーに続けて置く */
.rc-site + .rc-contact-link{margin-top:12px}
/* 来店誘導バンドのボタンの下に置く、電話番号と営業時間の補足 */
.tea-band-note{
  margin-top:16px; font-size:13px; line-height:1.9;
  color:#FFFFFF; text-align:center;
}
@media (max-width:520px){.rc-site .btn{width:100%}}
@media (max-width:520px){
  .rc-cta .btn{width:100%}
  .rc-contact{padding:20px 18px}
  .rc-table th{width:72px; font-size:13.5px}
}


/* ===== 資料館 (know-library.html) ===== */
/* 「巡る」26ページが参照している外部資料を、展示室（発行主体の区分）ごとに
   展示カードとして並べる。写真ギャラリーの「展示室を選ぶ」導線と揃えている。 */

/* --- 「知る」ページの資料館の説明（旧バナー .lib-banner / .lb-* はどこからも使われて
   いないので 2026-09-28 に消した。再精査 64 番） --- */
.lib-banner-desc{max-width:820px; margin:0 auto 26px}
.lib-banner-desc p{margin:0 0 12px; font-size:14.5px; line-height:2.05; color:var(--ink)}
.lib-banner-desc strong{color:var(--tea-text)}
.lib-banner-h3{
  max-width:900px; margin:26px auto 6px; text-align:center;
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-size:19px; color:var(--tea-text);
}
.lib-banner-lead{
  max-width:760px; margin:0 auto 18px; text-align:center;
  font-size:14px; line-height:2; color:var(--muted);
}
.lib-banner-lead strong{color:var(--tea-text)}

/* 読み上げだけに届ける補足（「新しいタブで開きます」、折りたたみのサイト名など）。画面には出さない */
.lib-vh{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* --- 国立国会図書館デジタルコレクションで読める原典（特別展示の2冊のほかの一覧。2026-09-28） ---
   見た目は展示室のサイトカード（.lib-site / .ls-item）にそろえ、折りたたまずに並べる */
.lib-ndl{max-width:940px; margin:40px auto 0}
.lib-ndl-h3{
  margin:0 0 6px; text-align:center;
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-size:19px; color:var(--tea-text);
}
.lib-ndl-lead{
  max-width:760px; margin:0 auto 16px; text-align:center;
  font-size:14px; line-height:2; color:var(--muted);
}
.lib-ndl .ls-items{padding-top:12px}

/* --- 特別展示：NDLで全文公開の2冊 --- */
.lib-featured{display:flex; flex-wrap:wrap; gap:20px; justify-content:center; margin-top:6px}
.lib-book{
  display:flex; align-items:stretch;
  width:calc((100% - 20px) / 2); min-width:280px;
  background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden;
  box-shadow:0 3px 14px rgba(43,43,43,.06);
}
.lib-book-spine{
  flex:0 0 84px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:16px 8px; text-align:center;
  background:linear-gradient(160deg,#5C7D5F 0%, #3F6E4A 100%);
  color:#fff; font-size:12px; line-height:1.5; letter-spacing:.04em;
}
.lib-book-spine span{font-size:16px; font-weight:700; letter-spacing:.06em}
.lib-book-body{flex:1; padding:16px 18px}
.lib-book-body h3, .lib-book-body h4{margin:0 0 4px; font-size:19px; line-height:1.4}
.lib-book-body h3 a, .lib-book-body h4 a{color:var(--tea-text); text-decoration:underline; text-underline-offset:3px}
.lib-book-body h3 a:hover, .lib-book-body h4 a:hover{color:var(--yuzu-cta)}
.lib-book-meta{margin:0 0 8px; font-size:12.5px; color:var(--muted)}
.lib-book-note{margin:0 0 10px; font-size:13.5px; line-height:1.9; color:var(--ink)}
.lib-book-body .lc-cite{margin:0 -18px -16px; border-radius:0}
/* 「この資料を使っているページ」の帯。以前は負の余白だけで、帯が縁に張り付いていた（再精査 19 番）
   背景 cream（白に 1.02:1）と破線 cream-deep（1.12:1）では帯が見分けられなかったので、
   若葉の薄い色＋破線 #8A857B（白に 3.67:1・この背景に 3.32:1）にする（3回目の精査 38 番） */
.lc-cite{display:block; padding:10px 18px 12px; background:#F1F5EA; border-top:1px dashed #8A857B}
.lc-cite-label{display:block; margin-bottom:6px; font-size:11px; letter-spacing:.06em; color:var(--muted)}
@media (max-width:820px){.lib-book{width:100%}}

/* --- 展示室を選ぶカード（gallery.html の drone-area-card に対応） --- */
.lib-rooms{
  display:grid; grid-template-columns:1fr; gap:10px;
  max-width:820px; margin:0 auto 26px;
}
@media (min-width:640px){.lib-rooms{grid-template-columns:1fr 1fr; gap:12px}}
.lib-room{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; text-decoration:none;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.lib-room:hover{
  transform:translateY(-2px); border-color:var(--leaf);
  box-shadow:0 8px 18px rgba(43,43,43,.10);
}
.lr-icon{font-size:22px; line-height:1}
.lr-name{flex:1; font-size:15.5px; font-weight:700; color:var(--tea-text); letter-spacing:.02em}
.lr-count{font-size:12.5px; color:var(--muted); white-space:nowrap}
.lr-arrow{color:var(--leaf); font-size:18px; line-height:1}

/* 説明文の根拠を示す注記 */
.lib-howto{
  max-width:760px; margin:0 auto 22px; padding:13px 18px;
  font-size:13px; line-height:1.95; color:var(--muted);
  background:#fff; border:1px solid var(--border); border-left:4px solid var(--leaf);
  border-radius:10px;
}
.lib-howto strong{color:var(--tea-text)}

/* --- さがす --- */
/* 検索欄だけの区画（特別展示より前。3回目の精査 17 番）。区画の余白は小さく */
.section.lib-search-sec{padding-top:34px; padding-bottom:30px}
.lib-search{
  max-width:640px; margin:0 auto; padding:16px 18px;
  background:#fff; border:1px solid var(--border); border-radius:14px;
}
.lib-search-label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}
.lib-search input{
  width:100%; box-sizing:border-box; padding:11px 14px;
  font-size:15px; font-family:inherit; color:var(--ink);
  background:var(--cream); border:1px solid #8A857B; border-radius:9px; /* 白に 3.6:1（再精査 61 番） */
}
.lib-search input:focus{outline:3px solid var(--yuzu-cta); outline-offset:1px}
.lib-asof{
  margin:0 0 10px; font-size:12px; color:var(--muted); text-align:center;
}
.lib-search-note{margin:8px 0 0; font-size:12.5px; color:var(--muted)}
/* JavaScript が動かないとき（html.no-js。<head> の 1 行目の script が外す）は、押しても動かない
   「すべて開く／閉じる」と検索の入力欄を出さない。件数と時点の注記は残す（再精査 62 番） */
html.no-js .lib-bulk, html.no-js .lib-search-label, html.no-js #lib-q, html.no-js .lib-empty{display:none}

/* --- 展示室（各セクション）とサイトの展示 --- */
/* 展示の単位は「資料1点」ではなく「サイト1つ」。
   サイトの概要を述べたうえで、そこから参考にした資料を羅列する。 */
.lib-hall{scroll-margin-top:8px} /* ヘッダーのぶんは html の scroll-padding-top が空ける(2026-09-27) */
.lib-hall .lib-count{
  display:block; width:fit-content; margin:9px auto 0; padding:3px 13px;
  font-size:12px; font-weight:400; color:var(--muted);
  background:#fff; border:1px solid var(--cream-deep); border-radius:999px;
}

/* さがして見つからなかったときの案内 */
.lib-empty{
  max-width:620px; margin:18px auto 0; padding:22px 24px; text-align:center;
  background:var(--cream); border:1px dashed var(--cream-deep); border-radius:14px;
  font-size:14px; line-height:2; color:var(--ink);
}
.lib-empty strong{display:block; color:var(--tea-text); font-size:15px; margin-bottom:4px}
.lib-empty-eg{display:block; margin-top:8px; font-size:12.5px; color:var(--muted)}
.lib-empty-reset{
  display:inline-block; margin-top:14px; padding:10px 22px;
  background:var(--tea-text); color:#fff; border:0; border-radius:999px;
  font-size:13px; font-weight:700; font-family:inherit; cursor:pointer;
  transition:background .18s;
}
.lib-empty-reset:hover{background:var(--yuzu-cta)}
.lib-empty-reset:focus-visible{outline:3px solid var(--yuzu-cta); outline-offset:3px}
.lib-sites{max-width:940px; margin:24px auto 0; display:flex; flex-direction:column; gap:16px}
.lib-site{
  background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden;
  box-shadow:0 3px 12px rgba(43,43,43,.05);
}
.ls-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 18px; background:var(--cream); border-bottom:1px solid var(--cream-deep);
}
.ls-icon{font-size:18px; line-height:1; flex:none}
.ls-name{
  flex:1; min-width:0; margin:0;
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-size:16.5px; font-weight:700; color:var(--tea-text); line-height:1.45;
  overflow-wrap:anywhere;
}
.ls-count{
  flex:none; padding:3px 11px; font-size:11.5px; color:var(--muted);
  background:#fff; border:1px solid var(--cream-deep); border-radius:999px;
}
.ls-about{
  margin:0; padding:13px 18px 0;
  font-size:13.5px; line-height:1.95; color:var(--ink);
}
/* サイト名は、そのサイトのトップページへのリンク */
.ls-name .ls-home{
  display:inline-block; max-width:100%; overflow-wrap:anywhere;
  color:var(--tea-text); text-decoration:none; padding:2px 0;
}
.ls-name .ls-home:hover{color:var(--yuzu-cta); text-decoration:underline; text-underline-offset:3px}

/* 参考にした資料の一覧はアコーディオン。初期は閉じている */
.ls-fold{border-top:1px dashed var(--cream-deep); margin-top:13px}
.ls-fold > summary.ls-list-label{
  display:flex; align-items:center; gap:8px;
  margin:0; padding:12px 18px; cursor:pointer; list-style:none;
  font-size:12px; letter-spacing:.06em; color:var(--tea-text);
}
.ls-fold > summary::-webkit-details-marker{display:none}
.ls-fold > summary:hover{background:var(--cream)}
.ls-fold > summary:focus-visible{outline:3px solid var(--yuzu-cta); outline-offset:-3px}
.ls-fold-text{flex:1}
.ls-fold-n{
  flex:none; padding:2px 9px; font-size:11px; color:var(--muted);
  background:var(--cream); border:1px solid var(--cream-deep); border-radius:999px;
}
/* 「開く／閉じる」は、状態がひと目で分かるようにボタンの形にする */
.ls-fold-btn{
  flex:none; display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border:1px solid var(--leaf); border-radius:999px;
  background:#fff; color:var(--tea-text);
  font-size:12px; font-weight:700; letter-spacing:.04em; line-height:1;
  transition:background .18s, color .18s, border-color .18s;
}
.ls-fold > summary:hover .ls-fold-btn{
  background:var(--tea-text); color:#fff; border-color:var(--tea-text);
}
.ls-fold-word{white-space:nowrap}
.ls-fold-c{display:none}
.ls-fold[open] .ls-fold-o{display:none}
.ls-fold[open] .ls-fold-c{display:inline}
.ls-fold[open] .ls-fold-btn{
  background:var(--tea-text); color:#fff; border-color:var(--tea-text);
}
.ls-fold-mark{
  flex:none; display:inline-block; width:11px; text-align:center;
  font-size:11px; line-height:1; color:inherit;
  transition:transform .18s;
}

/* 「すべて開く／すべて閉じる」（問題12：ページ内検索や印刷のため） */
.lib-bulk{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  max-width:940px; margin:22px auto 0;
}
.lib-bulk button{
  /* 枠は検索欄と同じ #8A857B（白に 3.67:1）。cream-deep（1.12:1）ではボタンの形が見えなかった（3回目の精査 38 番） */
  padding:9px 18px; border:1px solid #8A857B; border-radius:999px;
  background:#fff; color:var(--tea-text);
  font-size:12.5px; font-weight:700; font-family:inherit; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s;
}
.lib-bulk button:hover{background:var(--tea-text); color:#fff; border-color:var(--tea-text)}
.lib-bulk button:focus-visible{outline:3px solid var(--yuzu-cta); outline-offset:2px}

/* JavaScript が動かないときの案内（問題7） */
.lib-nojs{
  max-width:620px; margin:12px auto 0; padding:12px 16px;
  background:var(--cream); border:1px dashed var(--cream-deep); border-radius:10px;
  font-size:12.5px; line-height:1.9; color:var(--muted); text-align:center;
}

/* 印刷（問題6）：折りたたみを開いて、画面用の飾りを落とす。
   ⚠ 2026-09-27(#34): 以前はこのブロックが全ページに効き、どのページを印刷しても
   ヘッダー・フッター(住所・運営者)が消え、押せないボタンに長い URL が付いていた。
   資料館(body.is-library、content-loader.js が .lib-search のあるページに付ける)
   だけに限定する。URL の併記も資料館の出典リンクだけ。共通の印刷は末尾の
   「印刷(全ページ共通)」を参照。 */
@media print{
  /* 検索の枠ごとは消さない。時点の注記（.lib-asof）と件数（.lib-search-note）は紙にも残す
     （no-js のときと同じ粒度。3回目の精査 36 番） */
  body.is-library .lib-search-label, body.is-library #lib-q,
  body.is-library .lib-bulk, body.is-library .lib-empty,
  body.is-library .ls-fold-btn, body.is-library .lib-rooms,
  body.is-library header, body.is-library footer,
  body.is-library .breadcrumb, body.is-library .rc-cta{display:none !important}
  .lib-site{break-inside:avoid; box-shadow:none; border:1px solid #ccc}
  .ls-item{break-inside:avoid}
  /* 全室の前で改ページすると、4点の部屋でも1ページを使う。見出しだけ次の中身と離さない（精査 T16） */
  .lib-hall h2{break-after:avoid}
  body.is-library .lib-site a[href^="http"]::after,
  body.is-library .ls-item a[href^="http"]::after,
  body.is-library .lib-book a[href^="http"]::after,
  body.is-library .lib-book-item a[href^="http"]::after,
  body.is-library .lib-note a[href^="http"]::after{content:" <" attr(href) ">"; font-size:10px; color:#555}
  .lc-ext{display:none}
  body.is-library{background:#fff}
  body.is-library .lib-search{border:0; padding:0}
  body.is-library .section.lib-search-sec{padding-top:12px; padding-bottom:0}
}
.ls-fold[open] .ls-fold-mark{transform:rotate(180deg)}
/* 細い画面では、指で押しやすい大きさにする */
@media (max-width:560px){
  .ls-fold > summary.ls-list-label{padding:13px 16px; gap:7px}
  .ls-fold-btn{padding:8px 14px; font-size:12.5px}
}
.ls-fold[open] > summary{background:var(--cream)}
.ls-items{margin:0; padding:8px 18px 16px; list-style:none}
.ls-item{
  padding:11px 0 11px 15px; border-left:3px solid var(--cream-deep);
  margin-top:9px;
}
.ls-item:hover{border-left-color:var(--leaf)}
.ls-link{
  font-size:14px; font-weight:600; line-height:1.7;
  color:var(--ink); text-decoration:none;
}
.ls-link:hover{color:var(--yuzu-cta); text-decoration:underline; text-underline-offset:2px}
/* 外部リンクの「↗」。--leaf（白に 2.2:1）では 1.4.11 の 3:1 に届かないので --tea（白に 4.58:1・cream に 4.5:1）（3回目の精査 38 番） */
.lc-ext{margin-left:4px; font-size:11px; color:var(--tea); vertical-align:2px}
.ls-link:hover .lc-ext{color:var(--yuzu-cta)}
.ls-desc{
  margin:5px 0 0; font-size:12.5px; line-height:1.9; color:var(--muted);
}
/* ウェブでは読めない資料（出典欄にリンクの無い資料。build-library.py の unlinked_sources。3回目の精査 16 番） */
.lib-offline-site{max-width:940px; margin:24px auto 0}
.ls-offline-title{margin:0; font-size:14px; font-weight:600; line-height:1.7; color:var(--ink)}
.ls-for{margin:7px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.ls-for-label{font-size:11px; letter-spacing:.06em; color:var(--muted)}
.lc-pages{display:flex; flex-wrap:wrap; gap:6px}
.lc-page{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px 3px 8px; max-width:100%;
  font-size:11.5px; line-height:1.5; color:var(--tea-text); text-decoration:none;
  background:var(--cream); border:1px solid var(--cream-deep); border-radius:999px;
}
/* 📄 は飾り。代替テキストを空にして、チップごとに絵文字の名前を読ませない（資料館の精査 T15）。
   「/ ""」を解さない古いブラウザは1つ目の content だけが効く */
.lc-page::before{content:"\1F4C4"; content:"\1F4C4" / ""; font-size:11px; line-height:1}
.lc-page:hover{border-color:var(--leaf); color:var(--yuzu-cta); background:#fff}
@media (min-width:900px){
  /* 資料が多いサイトは2列に流して、縦に伸びすぎないようにする */
  .ls-items{columns:2; column-gap:26px}
  .ls-item{break-inside:avoid; margin-top:0; margin-bottom:14px}
}
@media (max-width:600px){
  .ls-head{padding:12px 14px; row-gap:2px}
  /* 件数の札が先に幅を取り、サイト名が押し縮められていた（再精査 20 番）。
     札は次の行の小さな 1 行にして、サイト名の書き出しにそろえる（アイコン 20px＋間 10px） */
  .ls-icon{width:20px; text-align:center}
  .ls-count{flex:1 1 100%; margin-left:30px; padding:0; background:none; border:0; border-radius:0}
  .ls-about{margin-left:14px; margin-right:14px; padding-left:0; padding-right:0}
  .ls-items{padding:8px 14px 14px}
}

/* --- 場所からさがす --- */
.lib-spots{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  max-width:900px; margin:0 auto; padding:0; list-style:none;
}
.lib-spots li{
  background:#fff; border:1px solid var(--border); border-radius:999px;
  padding:8px 15px; font-size:13.5px;
}
.lib-spots li a{color:var(--tea-text); text-decoration:none}
.lib-spots li a:hover{color:var(--yuzu-cta); text-decoration:underline}
.lib-spots .lib-cite{display:inline; margin-left:6px; font-size:11.5px; color:var(--muted)}

/* --- 紙の本の棚 / 方針 --- */
.lib-list{margin:0; padding-left:1.2em; list-style:disc}
.lib-cite{display:block}
.lib-books{max-width:900px; margin:0 auto; color:var(--ink)}
.lib-books li{font-size:14px; line-height:1.9; margin-bottom:10px; color:var(--ink)}
.lib-books .lib-cite{margin-top:2px; font-size:12px; color:var(--muted)}
.lib-note{
  max-width:900px; margin:16px auto 0; padding:12px 16px;
  font-size:13px; line-height:1.9; color:var(--muted);
  background:#fff; border:1px solid var(--border); border-radius:10px;
}
.lib-policy{max-width:820px; margin:0 auto}
.lib-policy p{
  margin:0 0 12px; padding:14px 18px; font-size:14px; line-height:1.95;
  background:#fff; border:1px solid var(--border); border-left:4px solid var(--leaf);
  border-radius:10px;
}

/* ===== 知るページ：入口を選ぶカード =====
   ※このファイルはマーカー以降を丸ごと書き直すため、
     知るページのCSSも必ずここに置くこと（別途あとから足すと消える）。 */
.know-picks-sec{padding-bottom:0}
.know-picks{
  display:grid; gap:18px; max-width:900px; margin:0 auto;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.know-picks:has(> :only-child){grid-template-columns:minmax(0, 1fr)}
.know-pick{
  display:flex; flex-direction:column; gap:7px;
  padding:26px 24px 22px; text-decoration:none;
  background:#fff; border:1px solid var(--cream-deep); border-radius:16px;
  box-shadow:0 6px 18px rgba(43,43,43,.06);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.know-pick:hover{
  transform:translateY(-4px); border-color:var(--leaf);
  box-shadow:0 16px 32px rgba(43,43,43,.14);
}
.know-pick:focus-visible{outline:3px solid var(--yuzu-cta); outline-offset:3px}
.kp-mark{font-size:30px; line-height:1}
.kp-eyebrow{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--yuzu-cta); font-weight:700;
}
.kp-title{
  font-family:var(--font-heading,'Noto Serif JP',serif);
  font-size:22px; font-weight:700; color:var(--tea-text); line-height:1.4;
}
.kp-desc{font-size:13.5px; line-height:1.95; color:var(--ink)}
.kp-meta{
  margin-top:2px; font-size:12px; color:var(--muted);
  padding-top:9px; border-top:1px dashed var(--cream-deep);
}
.kp-meta strong{color:var(--tea-text); font-size:14px}
.kp-go{
  margin-top:10px; align-self:flex-start;
  padding:9px 18px; border-radius:999px;
  background:var(--tea-text); color:#fff;
  font-size:13px; font-weight:700; letter-spacing:.04em;
  transition:background .18s;
}
.know-pick:hover .kp-go{background:var(--yuzu-cta)}
/* .kp-go-down（ページ内へ下りるボタン）は、以前は若葉色の背景で白文字が 2.2:1 だった。
   ほかのボタンと同じ背景（白文字 8.7:1）にし、下向きは矢印（↓）で示す（再精査 21 番） */
.lib-desc-cta{max-width:820px; margin:4px auto 30px; text-align:center}
@media (max-width:760px){
  .know-picks{grid-template-columns:1fr; gap:14px}
  .know-pick{padding:22px 20px 18px}
  .kp-title{font-size:20px}
}
/* 追従ヘッダーの下に隠れないように。
   .rc-sec-body[id] は、たたんだ章の中へ飛ぶページ内リンクの飛び先
   （陵墓の #chabatake、石寺の #oishita など）。id を付けるだけで効く (2026-09-07) */
#library, #media, .rc-sec-body[id]{scroll-margin-top:8px} /* 2026-09-27: ヘッダーのぶんは html の scroll-padding-top へ移した(二重に空けない) */

/* 印刷するときは、たたんである章も中身を出す。
   紙に持ち出す人が、閉じた章の内容を落とさないようにするため。
   朗読ボタン・写真をもっと見るボタンなど、紙で押せないものは消す。 */
@media print{
  details:not([open]) > *:not(summary){display:revert !important}
  details > .rc-sec-body{display:block !important}
  /* 最近のブラウザは閉じた details の中身を ::details-content で隠すため、印刷時はこれも開く (2026-09-14) */
  details::details-content{content-visibility:visible !important; display:block !important; height:auto !important}
  .skip-link{display:none !important}
  body.is-library a[href^="http"]::after{overflow-wrap:anywhere; word-break:break-all}
  .read-aloud, .rc-photo-cta, .rc-review-cta{display:none !important}
  .rc-sec{break-inside:auto}
  .rc-banner-pair{grid-template-columns:1fr 1fr}
  .rc-banner img{aspect-ratio:16/9}
  .rc-table{break-inside:avoid}
}

/* スポットページ本文内の小見出し（rc-h3）: 直前の段落との間隔を確保 */
.rc-sec-body h3.rc-h3{
  margin:2.2em 0 .7em;
  font-size:1.08rem;
  color:var(--color-heading,#2e5236);
}
.rc-sec-body h3.rc-h3:first-child{margin-top:.4em}

/* =========================================================
   準備中セクション（買う・巡る・知る）
   一般の来訪者にはトップのカードを薄い緑の膜で覆い、リンクも無効にする。
   関係者が管理者ログインすると body に gate-unlocked が付き、膜が外れる。
   ページ本体はサーバ側(app.py の _preparing_sections)でも止めているので、
   URL を直接叩かれても中身は出ない。
   ========================================================= */
.gate-card.preparing{position:relative; pointer-events:none}
.gate-card.preparing::after{
  content:"準備中"; position:absolute; inset:0; z-index:4;
  /* 英語ページでは英語で出す。共通CSSなので言語で切り替える (2026-09-23)。
     html[lang] で見分ける。en/ 配下は lang="en"。 */
  display:flex; align-items:center; justify-content:center;
  background:rgba(107,153,110,.66);
  color:#fff; font-weight:800; letter-spacing:.18em;
  font-size:clamp(30px,6vw,46px); text-shadow:0 2px 10px rgba(0,0,0,.28);
}
html[lang="en"] .gate-card.preparing::after{ content:"Coming soon"; letter-spacing:.06em }
.gate-card.preparing:hover{transform:none; box-shadow:0 3px 14px rgba(43,43,43,.06)}
body.gate-unlocked .gate-card.preparing{pointer-events:auto}
body.gate-unlocked .gate-card.preparing::after{display:none}

/* メニューの一番下に置く管理者ログイン */
.site-nav a.nav-admin{font-size:13px; opacity:.72}
.site-nav a.nav-admin:hover{opacity:1}
@media (max-width:900px){
  .site-nav a.nav-admin{
    margin-top:6px; padding-top:14px; border-radius:0;
    border-top:1px solid rgba(255,255,255,.18);
  }
}

/* アクセスの時刻表内の小見出し。h2 のすぐ下に h4 を置くと見出しの階層が飛ぶため
   h3 に上げたが、見た目はこれまでの h4 と同じにしておく。 */
.access-subhead{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:1em; font-weight:700; margin-bottom:6px}


/* JavaScript が動かない環境への案内 (2026-09-23 追加)
   このサイトの写真の多くは content.json から JS が流し込んでいる。
   文章は HTML に書いてあるので読めるが、写真だけが何も出ない状態になり、
   しかも理由が分からない。そのときだけ出る短い断り書き。 */
.nojs-note{
  margin:0 auto 18px; max-width:760px;
  padding:12px 16px; border:1px solid var(--border,#E8E1D4); border-radius:10px;
  background:var(--cream-deep,#F6F2E9); color:var(--muted,#57534B);
  font-size:14px; line-height:1.8;
}


/* 英語は語が長い。確信度のラベルは white-space:nowrap だったため、
   "Confidence: high (figures verified against source data)" が折り返せず
   320px の画面で枠を破っていた (2026-09-23 に是正)。狭い画面では折り返す。
   日本語の「確信度: 高」は短いので 1 行のまま収まる。 */
@media (max-width:560px){
  .confidence-tag{
    white-space:normal;
    margin-left:0; margin-top:6px;
    max-width:100%;
  }
}

/* iOS Safari の自動拡大よけ。理由は contact のページ内 style と同じ (2026-09-23)。 */
@media (max-width:767px), (pointer:coarse){
  .lib-search input{ font-size:16px }
}

/* 季節運行バスの「いま走っているか」表示 (2026-09-23 追加)。
   このバスは 6/6〜10/4、10/10〜12/6、12/12〜3/28 と期間が分かれ、
   しかも 10/10〜12/6 は名称が「グリーンライナー」に変わって
   宇治からの直通便が走る。時刻表だけが並んでいると、
   今どれが動いているのか分からないため、日付で自動的に示す。 */
.season-status{
  display:block; margin:0 0 20px; padding:13px 16px;
  border-radius:10px; font-size:15px; line-height:1.85; font-weight:700;
}
.season-status.is-running{ background:#E3EFDD; color:#2E5236; border:1px solid #9BB78B }
.season-status.is-off{ background:#FFF3D6; color:#8A5A00; border:1px solid #E8C97A }
.season-status .ss-sub{ display:block; font-weight:400; font-size:14px; margin-top:5px }
/* いま動いている方の時刻表を目立たせる */
.bus-timetable.is-now{
  border-left:4px solid var(--tea); padding-left:14px;
}
.bus-timetable.is-not-now{ opacity:.72 }

/* ===== アクセスページの時刻表と動線カード =====
   2026-09-23 に access.html のページ内 <style> から移した。
   英語版にも同じ節を足したが、見た目の定義が日本語版のページ内にしか無く、
   時刻表が横スクロールせずに画面からはみ出していたため。
   ⚠ ページ内 <style> は共通CSSより後に来るので勝つ。片方のページにしか無い
      定義は、もう片方で静かに効かなくなる。共通で使うものはここに置くこと。 */
/* 茶源郷和束ライン(季節運行バス) */
.chagenkyo-line .cl-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px}
@media (max-width:680px){.chagenkyo-line .cl-cards{grid-template-columns:1fr}}
.cl-card{
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px 20px;
  box-shadow:0 2px 10px rgba(43,43,43,.05);
}
.cl-card h4{
  font-family:var(--font-heading,'Noto Serif JP',serif); font-size:17px;
  color:var(--tea-text); margin-bottom:8px;
}
.cl-card p{font-size:14px; line-height:1.85; color:var(--text)}
.cl-card .cl-note{font-size:12.5px; color:var(--muted); line-height:1.8; margin-top:8px}
.cl-fare{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.cl-fare span{
  background:var(--cream); border:1px solid var(--border); border-radius:999px;
  padding:5px 12px; font-size:12.5px; font-weight:700; color:var(--tea-text);
}
/* 時刻表は列が多いので、狭い画面では横スクロールさせる */
.bt-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:10px;
  /* ⚠ 狭い画面では時刻表が横に続くのに、それが分かる手がかりが何も無く、右側の列を
 見落とすおそれがあった(2026-09-23 に是正)。スクロールできる側にだけ影を出し、
 端まで動かすと消えるようにする。細いスクロールバーも併せて見せる。 */
  background:
linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
linear-gradient(to right, rgba(255,255,255,0), #fff 70%) right center,
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) left center,
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) right center;
  background-repeat:no-repeat;
  background-size:34px 100%, 34px 100%, 13px 100%, 13px 100%;
  background-attachment:local, local, scroll, scroll;
  scrollbar-width:thin;
}
.bt-scroll::-webkit-scrollbar{height:7px}
.bt-scroll::-webkit-scrollbar-track{background:rgba(0,0,0,.05); border-radius:4px}
.bt-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.26); border-radius:4px}
.bt-table.bt-wide{min-width:440px}
.chagenkyo-line .bt-table th{font-size:12px; line-height:1.5; padding:8px 6px}
.chagenkyo-line .bt-table td{font-size:13.5px; padding:8px 6px}
/* アクセス方法のショートカットバナー(タップでそれぞれの見出しへ移動) */
.access-jump{
  max-width:1000px; margin:26px auto 0; padding:0 24px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
@media (max-width:760px){
  .access-jump{grid-template-columns:1fr; gap:10px; margin-top:20px; padding:0 20px}
}
.aj-card{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:16px 16px; box-shadow:0 2px 10px rgba(43,43,43,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.aj-card:hover{
  transform:translateY(-3px); border-color:var(--leaf);
  box-shadow:0 10px 24px rgba(43,43,43,.12);
}
.aj-card:focus-visible{outline:3px solid var(--yuzu-cta); outline-offset:2px}
.aj-icon{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  background:var(--cream); display:flex; align-items:center; justify-content:center;
  font-size:21px; line-height:1;
}
.aj-body{display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-width:0}
.aj-title{
  font-family:var(--font-heading,'Noto Serif JP',serif); font-size:16.5px;
  font-weight:600; color:var(--tea-text); line-height:1.4;
}
.aj-sub{font-size:12px; color:var(--muted); line-height:1.5}
.aj-arrow{flex:0 0 auto; font-size:17px; color:var(--leaf); font-weight:700}
.aj-card:hover .aj-arrow{color:var(--yuzu-cta)}

/* ===== 読みやすさ（色のコントラスト）の手当て 2026-09-23 =====
   WCAG AA は、普通の大きさの文字で 4.5:1 以上を求める。
   実測して足りなかったものだけを直す。 */

/* フッターの電話番号は、緑地(#3F6E4A)の上でオレンジ(#B25900)のままだった。
   コントラスト比 1.22 で、ほとんど読めない状態。フッター内だけ白系に戻す。
   本文中（白地）の .tel-inline はオレンジのままでよいので触らない。 */
footer .tel-inline,
.site-footer .tel-inline{
  color:#FFE8C8;
}
footer .tel-inline:hover,
.site-footer .tel-inline:hover{ color:#fff }

/* メニュー表ビューアの下に置く、各メニューへの入口 (2026-09-25 追加)。
   暗い覆い(#151515)の上なので、白い文字＋薄い白の面で「押せる」ことを示す。
   .mg-footer は「見る」のライトボックスとも共有しているので、
   食べるページにしか無い .mg-menu-links だけに掛ける。 */
.mg-menu-links-title{
  width:100%; margin:2px 0 0; text-align:center;
  font-size:12px; letter-spacing:.1em; color:rgba(255,255,255,.75);
}
.mg-menu-links{
  display:grid; gap:10px; width:100%; max-width:720px; margin:0 auto;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (min-width:700px){ .mg-menu-links{ grid-template-columns:repeat(3, minmax(0,1fr)) } }
.mg-menu-links a{
  display:flex; align-items:center; gap:8px;
  min-height:52px; padding:10px 12px; box-sizing:border-box;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.45);
  border-radius:10px; color:#fff; text-decoration:none;
  font-size:13.5px; font-weight:700; line-height:1.4; text-align:left;
}
.mg-menu-links a:hover{ background:rgba(255,255,255,.22); border-color:#fff }
.mg-menu-links a:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.mg-menu-links .ico{ flex:0 0 auto; font-size:19px; line-height:1 }
@media (max-width:360px){
  .mg-menu-links{ gap:8px }
  .mg-menu-links a{ font-size:12.5px; padding:9px 10px }
}

/* 各メニューのページに置く「ほかのメニューを見る」 (2026-09-25 追加)。
   メニュー表ビューアの .mg-menu-links は暗い覆いの上用(白文字)なので、
   明るい背景のこちらでは使えない。白地・茶文字・緑枠にする。
   いま見ているページの項目はリンクにせず、緑で塗って居場所を示す。 */
.menu-hop-title{
  max-width:720px; margin:34px auto 10px; text-align:center;
  font-size:12px; letter-spacing:.1em; color:var(--muted);
}
.menu-hop{
  display:grid; gap:10px; max-width:720px; margin:0 auto;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (min-width:700px){ .menu-hop{ grid-template-columns:repeat(3, minmax(0,1fr)) } }
.menu-hop a, .menu-hop span{
  display:flex; align-items:center; gap:8px;
  min-height:52px; padding:10px 12px; box-sizing:border-box;
  border-radius:10px; font-size:13.5px; font-weight:700; line-height:1.4; text-align:left;
}
.menu-hop a{ background:#fff; border:1px solid var(--tea); color:var(--tea-text); text-decoration:none }
.menu-hop a:hover{ background:var(--tea); color:#fff }
.menu-hop a:focus-visible{ outline:2px solid var(--tea); outline-offset:2px }
.menu-hop span[aria-current]{ background:var(--tea); border:1px solid var(--tea); color:#fff }
.menu-hop .ico{ flex:0 0 auto; font-size:19px; line-height:1 }
@media (max-width:360px){
  .menu-hop{ gap:8px }
  .menu-hop a, .menu-hop span{ font-size:12.5px; padding:9px 10px }
}

/* メニュー表の画像を画面いっぱいに見せる (2026-09-25)。
   下部に入口を 6 つ足したぶん .mg-footer の背が高くなり、
   flex:1 の .mg-viewport が押し縮められて画像が小さくなっていた。
   → 画像に画面のほぼ全部を渡し、下のボタン類は縦スクロールで出す。
     見出しが少しだけ覗くので、下に続きがあることが分かる。
   ⚠ .menu-gallery-modal は「見る」のライトボックスも持つクラスなので、
     食べるページの #menu-gallery-modal だけに掛ける。 */
#menu-gallery-modal{ overflow-y:auto; overscroll-behavior-y:contain }
#menu-gallery-modal .mg-viewport{
  flex:0 0 auto;
  height:calc(100vh - 76px);
  height:calc(100dvh - 76px);   /* スマホのアドレスバーの出入りに追従する */
  min-height:320px;
}
/* 閉じる(✕)はスクロールしても画面の右上に留める */
#menu-gallery-modal .mg-close{ position:fixed }
/* 画像を幅いっぱいに。
   左右の矢印(left/right:8px・44px幅)を避けるために 44〜52px の余白があったが、
   実測するとそのせいで **画面の幅の 70% しか画像に使えていなかった**
   (720x1040 の画像が 390px 幅の画面で 272x393 にしかならない)。
   → 余白を詰めて、矢印は画像の上に重ねる。写真ビューアでは一般的な作りで、
     矢印はオレンジの丸＋影なので白い紙の上でも見える。 */
#menu-gallery-modal .mg-page{ padding:10px }
@media (max-width:400px){
  #menu-gallery-modal .mg-page{ padding:8px }
}
/* 重なっても矢印が紙に埋もれないよう、輪郭を少しはっきりさせる */
#menu-gallery-modal .mg-nav{ box-shadow:0 4px 14px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.55) }
/* 画面が低いとき(横向き等)は、下部が隠れすぎないようにする */
@media (max-height:520px){
  #menu-gallery-modal .mg-viewport{ height:calc(100dvh - 56px); min-height:220px }
}

/* =========================================================
   準備中の印・☰の先頭行・モバイル固定バー・メニュー表の拡大 (2026-09-26)
   content-loader.js / menu-gallery.js が付ける class に対する見た目。
   ========================================================= */
/* ヘッダーのタブ(買う・巡る・知る)。押せなくはしない(pointer-events は触らない)。
   ⚠ 2026-09-27(#7・#26): 以前は「（準備中）」を文字の後ろに足していたため、PC で
   ナビが1段増えてヘッダーが伸び、本文が後からずれていた(CLS 0.11〜0.73)。
   印はタブの下端に重ねる小さな札(position:absolute)にして、タブの幅を変えない。
   文字は薄くしない(opacity を使うとコントラストが基準に届かなかった)。
   札は淡い緑 #d9e6d2 の地に濃い緑の文字(6.8:1)。
   class は静的 HTML に最初から書いてある(scripts/mark-preparing.py)。 */
.site-nav a.preparing{position:relative}
.site-nav a.preparing::after{
  content:"準備中"; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  font-size:10px; line-height:1; font-weight:700; letter-spacing:.04em; white-space:nowrap;
  padding:2px 5px; border-radius:6px; background:#d9e6d2; color:#2E5236; pointer-events:none;
}
html[lang="en"] .site-nav a.preparing::after{content:"Coming soon"; letter-spacing:0}
/* ☰の中(縦並び)では文字の後ろに並べる(閉じているのでずれは起きない) */
@media (max-width:900px){
  .site-nav a.preparing::after{
    position:static; transform:none; display:inline-block; margin-left:.6em; vertical-align:middle;
  }
}
/* フッターや本文のリンク(静的な class なので最初の描画から付いており、ずれない)。
   薄くしない(フッターで 4.02:1 しかなかった)。 */
.preparing-link::after{content:"（準備中）"; font-size:.75em; margin-left:.2em; white-space:nowrap}
html[lang="en"] .preparing-link::after{content:" (Coming soon)"}
/* 解錠済み(管理者ログイン)なら印を消す */
body.gate-unlocked .site-nav a.preparing::after,
body.gate-unlocked .preparing-link::after{content:none}

/* ☰(900px 以下)の先頭行: 電話 / アクセス / 営業時間。901px 以上では出さない。 */
.nav-quick{display:none}
@media (max-width:900px){
  .site-nav .nav-quick{
    display:flex; gap:6px; margin-bottom:8px; padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.18);
  }
  .site-nav .nav-quick a{
    flex:1; text-align:center; padding:11px 6px; font-size:13.5px; min-height:44px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.1); white-space:nowrap;
  }
}

/* モバイル固定バー(電話 / 道順 / 食べる)。901px 以上・印刷では出さない。 */
.mobile-bar{display:none}
@media (max-width:900px){
  .mobile-bar{
    position:fixed; bottom:0; left:0; right:0; z-index:99;
    display:flex; gap:1px; background:var(--tea-deep);
    box-shadow:0 -4px 14px rgba(0,0,0,.18);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-bar a{
    flex:1; min-height:48px; display:flex; align-items:center; justify-content:center;
    padding:6px 4px; color:#fff; text-decoration:none; font-size:13.5px; font-weight:700;
    white-space:nowrap; background:var(--tea-deep); -webkit-tap-highlight-color:transparent;
  }
  .mobile-bar a:hover{background:var(--tea)}
  .mobile-bar a.mb-eat{background:var(--yuzu-cta)}
  .mobile-bar a.mb-eat:hover{background:#9A4D00}
  /* バーの高さぶん、ページ末尾(フッター)が隠れないようにする。
     バーと同じ 48px にする(64px だとフッターの下に 16px の帯が出ていた。#43) */
  body.has-mobile-bar{padding-bottom:calc(48px + env(safe-area-inset-bottom))}
}
/* 編集モード(?edit=1)と解錠済み(運営者)では固定バーを出さない(#43、2026-09-27)。
   編集のクリックを塞いでいた。wz-unlocked は目印 Cookie、gate-unlocked はサーバ確認後。 */
/* 2026-10-02: 解錠しただけの通常閲覧（運営者がログインしてサイトを見る）では出す。
   運営者から「下の固定バーが無くなった」と指摘。隠すのは編集モード(?edit=1)のときだけ。 */
html.is-editing .mobile-bar{display:none !important}
html.is-editing body.has-mobile-bar{padding-bottom:0}
/* 濃い地の上のフォーカスリングは白にする(オレンジの既定リングは固定バーの上で 1.22:1、
   「食べる」ボタンの上で 1.0:1 しかなかった。#26、2026-09-27)。内側に描く。 */
.mobile-bar a:focus-visible,
.promo-bar a:focus-visible,
.promo-bar:focus-visible,
.promo-bar :focus-visible{outline:3px solid #fff; outline-offset:-3px; border-radius:3px}
@media print{.mobile-bar{display:none !important}}

/* メニュー表ビューア: 小さい画面では余白を詰める(480px 以下で 8px) */
@media (max-width:480px){
  #menu-gallery-modal .mg-page{padding:8px}
}
/* 🔍 ボタン(左上。✕ と対に fixed)とヒント(インジケータの直下) */
#menu-gallery-modal .mg-zoom{
  position:fixed; top:18px; left:18px; z-index:6; width:48px; height:48px; border-radius:50%;
  border:none; background:rgba(255,255,255,.14); color:#fff; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent;
}
/* ✕ と 🔍 は白い紙(メニュー表)の上に乗るので、濃い半透明の地＋白い輪郭にする
   (白地に白で見えなかった。#24、2026-09-27)。 */
#menu-gallery-modal .mg-close,
#menu-gallery-modal .mg-zoom{
  background:rgba(0,0,0,.55); color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 2px 10px rgba(0,0,0,.35);
}
#menu-gallery-modal .mg-close:hover,
#menu-gallery-modal .mg-zoom:hover{background:rgba(0,0,0,.72)}
#menu-gallery-modal.mg-zoomed .mg-zoom{background:rgba(0,0,0,.8); box-shadow:0 0 0 3px #fff, 0 2px 10px rgba(0,0,0,.35)}
#menu-gallery-modal :focus-visible{outline-color:#fff}
#menu-gallery-modal .mg-hint{
  position:absolute; bottom:2px; left:50%; right:auto; transform:translateX(-50%); z-index:5;
  width:max-content; max-width:calc(100% - 24px); text-align:center; pointer-events:none;
  background:rgba(0,0,0,.55); color:#fff; padding:4px 12px; border-radius:999px;
  font-size:11.5px; letter-spacing:.02em; line-height:1.4;
}
#menu-gallery-modal.mg-zoomed .mg-hint{display:none}
/* 拡大中: 横スワイプの吸着を一時解除し、拡大したページの中だけをスクロールさせる */
#menu-gallery-modal.mg-zoomed .mg-track{scroll-snap-type:none; overflow-x:hidden}
#menu-gallery-modal .mg-page.mg-zoom-page{
  display:block; overflow:auto; padding:0; scroll-snap-align:none;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; background-image:none !important;
}
#menu-gallery-modal .mg-page .mg-zoom-img{display:block; max-width:none; user-select:none; -webkit-user-drag:none}
@media (max-width:400px){
  #menu-gallery-modal .mg-zoom{width:44px; height:44px; top:14px; left:14px}
}

/* =========================================================
   印刷(全ページ共通) 2026-09-27(#34)
   紙に要るのは本文と、店の住所・電話・営業時間(フッターの店舗情報)。
   画面用の帯・固定バー・押せないボタン・開閉の記号は出さない。
   電話番号は本文に書いてあるので tel: の URL は併記しない。
   メニュー表は menu-gallery.js が印刷のときだけ .mg-print に並べる。
   ========================================================= */
.mg-print{display:none}
@media print{
  html{scroll-padding:0}
  body, body.has-mobile-bar{padding-bottom:0 !important; background:#fff}
  .promo-bar, .mobile-bar, .nav-toggle, .site-nav, .lang-switch, .skip-link, .btn,
  .menu-gallery-banner, .menu-cover-open, .menu-gallery-modal, .mg-zoom, .mg-hint,
  .read-aloud, .swipe-hint, #wazuka-admin-login-link{display:none !important}
  /* ヘッダーはロゴだけ残す(背景色は印刷されないので文字を黒に) */
  .site-header{position:static; box-shadow:none; background:none !important; color:#000;
    padding:0 0 8px; border-bottom:1px solid #999}
  .site-header::after{display:none}
  .site-header .site-logo, .site-header .site-logo *{color:#000 !important}
  /* フッターは店舗情報(住所・電話・営業時間)と運営者の表記だけ残す */
  .site-footer{background:none !important; color:#000 !important; border-top:1px solid #999;
    padding:12px 0 0 !important; margin-top:16px}
  .site-footer::before{display:none}
  .site-footer *{color:#000 !important}
  .site-footer .footer-inner{display:block}
  .site-footer .footer-col, .site-footer .footer-sns, .site-footer .fb-links{display:none !important}
  .site-footer .footer-bottom{border:none; padding:6px 0 0; display:block}
  a[href^="tel:"]::after{content:none !important}
  /* 開閉の記号(＋/−)は紙では意味がない */
  .product-more summary::after, .rc-sources-acc > summary::after, .rc-sec > summary::after{content:none !important}
  /* 表・写真・カードの途中で改ページしない */
  table, tr, figure, img, .card, .faq-item, .product-card, .menu-detail{break-inside:avoid; page-break-inside:avoid}
  h1, h2, h3{break-after:avoid; page-break-after:avoid}
  /* メニュー表(食べるページ): 1ページに1枚ずつ */
  .mg-print{display:block !important; margin:12px 0}
  .mg-print-img{display:block; width:100%; max-width:180mm; max-height:260mm; object-fit:contain;
    height:auto; margin:0 auto 6mm; break-inside:avoid; page-break-inside:avoid}
  .mg-print-img + .mg-print-img{break-before:page; page-break-before:always}
}

/* =========================================================
   今週の和束（トップ。this-week.js が this-week.json から描く）2026-09-28 追加
   JS が無い・JSON が古いときは .tw-fallback（既定の文）だけが見える。
   ========================================================= */
.this-week .wrap{max-width:820px; margin:0 auto}
.this-week .tw-updated{text-align:center; font-size:13px; color:var(--muted); margin:-6px 0 18px}
.this-week .tw-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
/* display:flex が UA の [hidden]{display:none} に勝つので、hidden のときは明示的に消す */
.this-week .tw-list[hidden]{display:none}
.this-week .tw-item{display:flex; gap:14px; align-items:baseline; padding:14px 8px; border-bottom:1px solid var(--border)}
.this-week .tw-label{flex:0 0 auto; width:7.2em; box-sizing:border-box; text-align:center; font-size:11.5px;
  font-weight:700; line-height:1.4; padding:3px 8px; border-radius:14px; background:var(--leaf-soft); color:var(--tea-text)}
.this-week[data-this-week-lang="en"] .tw-label{width:9.5em}
.this-week .tw-kind-event .tw-label{background:var(--yuzu-soft); color:var(--yuzu-text)}
.this-week .tw-kind-bus .tw-label{background:#E3EFDD; color:#2E5236; border:1px solid var(--leaf)}
.this-week .tw-kind-news .tw-label{background:var(--cream-deep); color:var(--ink)}
.this-week .tw-body{flex:1 1 auto; display:flex; flex-direction:column; gap:3px; min-width:0}
.this-week .tw-title{font-size:15px; line-height:1.6; color:var(--text); font-weight:600; overflow-wrap:anywhere}
.this-week a.tw-title{color:var(--tea-text); text-decoration:underline; text-underline-offset:3px}
.this-week a.tw-title:hover{color:var(--tea)}
.this-week .tw-when{font-size:14px; color:var(--text)}
.this-week .tw-where{font-size:13.5px; color:var(--muted)}
.this-week .tw-src{font-size:12px; color:var(--muted)}
.this-week .tw-fallback{text-align:center; font-size:15px; line-height:1.8}
.this-week .tw-fallback a, .this-week .tw-more a{color:var(--tea-text)}
.this-week .tw-more{text-align:center; margin-top:22px; font-size:14px}
.this-week .tw-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
@media (max-width:560px){
  .this-week .tw-item{flex-direction:column; gap:6px}
  .this-week .tw-label, .this-week[data-this-week-lang="en"] .tw-label{width:auto; padding:3px 12px}
}
@media print{
  .this-week .tw-item{break-inside:avoid; page-break-inside:avoid}
}

/* お知らせが 0 件のときの案内（news.html とトップ。app.py が一覧を作り直すときに出す。2026-09-28） */
.news-empty{color:var(--muted); text-align:center; padding:24px 8px}

/* =========================================================
   和束の一年（season.html・en/season.html。scripts/build-season-page.py が
   scripts/season_calendar.json から作る）2026-09-28 追加
   ========================================================= */
/* 既存の .season（メニューの季節の札・nowrap）と重ならない名前にする */
.page-hero.season-year{background:linear-gradient(135deg,#8DB36B 0%, #3F6E4A 100%)}
.season-page .fact-summary{margin-bottom:22px}
.season-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
/* 冒頭の季節の写真 */
.season-photos{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 0 8px}
.season-photo{margin:0}
.season-photo a{display:block; border-radius:10px; overflow:hidden; background:var(--cream-deep)}
.season-photo img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.season-photo figcaption{font-size:12px; color:var(--muted); line-height:1.5; margin-top:5px}
/* いまの時期 */
.badge-detail-section.season-now{background:#fff; border:1px solid var(--leaf-soft); border-radius:14px; padding:20px 22px}
.badge-detail-section.season-now h2{margin-bottom:8px}
.season-now-head{font-size:15px; line-height:1.85; color:var(--text); margin-bottom:12px}
.season-now-list{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px}
.season-now-list li{font-size:14px; line-height:1.5; background:var(--cream); border:1px solid var(--border);
  border-radius:18px; padding:5px 12px}
.season-now-col{font-size:11px; font-weight:700; color:var(--muted); margin-right:6px}
.season-now-list a, .season-now-more a{color:var(--tea-text)}
.season-now-more{margin-top:12px; font-size:14px}
.season-now-note{margin-top:8px; font-size:12px; color:var(--muted)}
/* 12か月の早見表（狭い画面では月ごとのカードに組み替える） */
.season-grid{width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 2px 10px rgba(43,43,43,.05); font-size:13.5px; table-layout:fixed}
.season-grid th, .season-grid td{padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:top;
  text-align:left; line-height:1.55; overflow-wrap:anywhere}
.season-grid thead th{background:var(--tea); color:#fff; font-weight:500; font-size:13px}
.season-grid thead th:first-child{width:4.4em}
.season-grid tbody th{background:var(--cream)}
.season-grid tbody th a{color:var(--tea-text); font-weight:700}
.season-grid tbody tr:last-child th, .season-grid tbody tr:last-child td{border-bottom:none}
.season-grid tr.is-now th, .season-grid tr.is-now td{background:#FFF3D6}
.season-cell{list-style:none; margin:0; padding:0}
.season-cell li{margin:0 0 4px}
.season-cell a{color:var(--text); text-decoration:underline; text-decoration-color:var(--leaf); text-underline-offset:3px}
.season-cell a:hover{color:var(--tea-text)}
.season-none{color:var(--muted)}
.season-table-note{font-size:13px; color:var(--muted); line-height:1.8; margin-top:10px}
@media (max-width:720px){
  .season-grid thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .season-grid, .season-grid tbody, .season-grid tr, .season-grid th, .season-grid td{display:block; width:100%}
  .season-grid tr{border-bottom:2px solid var(--leaf-soft)}
  .season-grid tbody tr:last-child{border-bottom:none}
  .season-grid tbody th{border-bottom:none; padding:10px 14px 6px; font-size:15px}
  .season-grid td, .season-grid tbody tr:last-child td{border-bottom:none; padding:4px 14px; display:flex; gap:10px}
  .season-grid td::before{content:attr(data-label); flex:0 0 7.2em; font-size:11.5px; font-weight:700;
    color:var(--muted); padding-top:2px}
  .season-grid td:last-child{padding-bottom:12px}
  .season-cell{display:flex; flex-wrap:wrap; gap:2px 12px}
  .season-cell li{margin:0}
}
/* 月へ移動 */
.season-month-nav{display:flex; flex-wrap:wrap; gap:6px; margin:36px 0 0; justify-content:center}
.season-month-nav a{font-size:13.5px; padding:6px 12px; border-radius:16px; border:1px solid var(--leaf);
  color:var(--tea-text); text-decoration:none; background:#fff}
.season-month-nav a:hover{background:var(--leaf-soft)}
.season-month-nav a.is-now{background:var(--tea); color:#fff; border-color:var(--tea)}
/* 月ごとの節 */
.season-month h2{border-bottom:2px solid var(--leaf-soft); padding-bottom:8px}
.season-month.is-now h2{border-bottom-color:var(--yuzu)}
.season-month-lead{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:16px; line-height:1.9;
  color:var(--text); margin:0 0 16px}
.season-items{display:flex; flex-direction:column; gap:14px}
.season-item{background:#fff; border:1px solid var(--border); border-left:5px solid var(--leaf); border-radius:10px;
  padding:16px 18px}
.season-item.season-col-tea{border-left-color:var(--tea)}
.season-item.season-col-nature{border-left-color:#C77D9A}
.season-item.season-col-events{border-left-color:var(--yuzu)}
.season-item.season-col-travel{border-left-color:#6F97B5}
.season-tag{font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.04em; margin-bottom:2px}
.season-item h3{font-family:var(--font-heading,'Noto Serif JP',serif); font-size:17.5px; color:var(--tea-text);
  line-height:1.5; margin-bottom:8px}
.season-meta{display:grid; grid-template-columns:auto 1fr; gap:3px 12px; font-size:14px; margin:0 0 8px}
.season-meta div{display:contents}
.season-meta dt{font-weight:700; color:var(--muted); font-size:12.5px; padding-top:2px; white-space:nowrap}
.season-meta dd{margin:0; color:var(--text); line-height:1.65}
.season-summary{font-size:14.5px; line-height:1.9; color:var(--text)}
.season-note-text{font-size:13.5px; line-height:1.8; color:var(--muted); margin-top:6px}
.season-links{font-size:13.5px; line-height:1.8; margin-top:8px}
.season-src{font-size:12px; color:var(--muted); margin-top:8px; line-height:1.7}
.season-links a, .season-src a, .season-also a, .season-back a, .season-sato a{color:var(--tea-text)}
.season-also{font-size:13.5px; line-height:1.9; margin-top:14px; color:var(--text); background:var(--cream);
  border-radius:8px; padding:10px 14px}
.season-back{text-align:right; font-size:13px; margin-top:10px}
.season-item.season-ended{background:var(--cream)}
.season-ended-note{font-size:13px; font-weight:700; color:var(--yuzu-text); margin:0 0 6px}
/* 和束の郷へ・出典 */
.season-sato{margin:6px 0 18px}
.season-sato-when{display:inline-block; font-size:11.5px; font-weight:700; background:var(--yuzu-soft);
  color:var(--yuzu-text); border-radius:12px; padding:1px 9px; margin-right:8px}
.season-checked{font-size:13px; color:var(--muted); line-height:1.8; margin-bottom:12px}
.season-src-no{color:var(--muted)}
@media (max-width:640px){
  .season-photos{grid-template-columns:repeat(2,1fr)}
  .badge-detail-section.season-now{padding:16px}
  .season-item{padding:14px 14px}
}
@media print{
  .season-item, .season-grid tr{break-inside:avoid; page-break-inside:avoid}
  .season-month-nav, .season-back, .season-now-note{display:none}
}

/* 免責事項への小さなバナー（全ページの隅に固定・指やマウスで動かせる・ダブルクリックで元の位置）。
   disclaimer-badge.js が動かす。モバイルでは固定バー(48px)の上に出す。2026-10-02 運営者指示 */
.dc-badge{
  position:fixed; left:12px; bottom:14px; z-index:150;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px 5px 7px; border-radius:999px;
  background:rgba(255,253,249,.94); color:var(--tea-text);
  border:1px solid var(--border); box-shadow:0 2px 8px rgba(0,0,0,.14);
  font-size:11.5px; line-height:1; font-weight:600; letter-spacing:.02em;
  text-decoration:none; opacity:.92; cursor:grab;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
}
.dc-badge:hover{opacity:1; background:#fff; color:var(--tea-deep)}
.dc-badge:focus-visible{outline:3px solid var(--yuzu); outline-offset:2px}
.dc-badge .dc-i{
  display:inline-flex; width:15px; height:15px; border-radius:50%; align-items:center; justify-content:center;
  background:var(--tea-deep); color:#fff; font-size:10px; font-weight:700; font-family:var(--font-heading); font-style:italic;
}
.dc-badge.is-dragging{cursor:grabbing; opacity:1; box-shadow:0 6px 18px rgba(0,0,0,.22)}
@media (max-width:900px){
  body.has-mobile-bar .dc-badge{bottom:calc(56px + env(safe-area-inset-bottom))}
}
html.is-editing .dc-badge{display:none}
@media print{.dc-badge{display:none}}

/* ===== 見る III「旅の音楽」(gallery.html / en)。音源は権利者の公式 YouTube の埋め込み。2026-10-03 ===== */
a.view-room{text-decoration:none}
@media (min-width:1000px){ .view-room-grid.has-three{grid-template-columns:repeat(3,1fr); max-width:1200px} }
.music-room{background:var(--cream)}
.music-player{max-width:900px; margin:0 auto 24px; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.08); overflow:hidden}
.mp-stage{position:relative; aspect-ratio:16/9; background:#16201A; color:#fff}
.mp-stage iframe,.mp-stage #music-yt{position:absolute; inset:0; width:100%; height:100%; border:0}
.mp-empty,.mp-unavailable{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px; text-align:center; font-size:14px; color:rgba(255,255,255,.88)}
.mp-empty span:first-child{font-size:40px}
.mp-unavailable p{margin:0}
.mp-unavailable a{color:var(--yuzu)}
.mp-now{display:flex; gap:10px; align-items:baseline; padding:12px 16px 0; font-size:14px}
.mp-now-label{font-size:11px; letter-spacing:.2em; color:var(--muted); white-space:nowrap}
#music-now-title{font-weight:600}
.mp-controls{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 16px 12px}
.mp-btn,.mp-rep,.ms-chip{font:inherit; font-size:13px; padding:7px 12px; border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--ink); cursor:pointer; min-height:36px}
.mp-btn:hover,.mp-rep:hover,.ms-chip:hover{background:var(--cream-deep)}
.mp-btn:focus-visible,.mp-rep:focus-visible,.ms-chip:focus-visible,.mt-play:focus-visible{outline:3px solid var(--yuzu); outline-offset:2px}
.mp-repeat{display:inline-flex; align-items:center; gap:6px; margin-left:auto; flex-wrap:wrap}
.mp-repeat-label{font-size:11px; letter-spacing:.14em; color:var(--muted)}
.mp-rep.is-on,.ms-chip.is-on,.mp-btn.is-on{background:var(--tea-deep); color:#fff; border-color:var(--tea-deep)}
.mp-note{margin:0; padding:0 16px 14px; font-size:12px; line-height:1.8; color:var(--muted)}
.music-scenes{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:900px; margin:0 auto 22px}
.music-list{list-style:none; margin:0 auto; padding:0; max-width:900px; display:grid; gap:14px}
.music-track{display:grid; grid-template-columns:56px 1fr; gap:14px; padding:16px; background:#fff; border:1px solid var(--border); border-radius:14px}
.music-track[hidden]{display:none}
.music-track.is-playing{border-color:var(--tea); box-shadow:0 0 0 3px rgba(77,129,86,.15)}
.mt-play{width:56px; height:56px; border-radius:50%; border:1px solid var(--tea-deep); background:var(--tea-deep); color:#fff; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font:inherit; padding:0; align-self:start}
.mt-play .mt-no{font-size:10px; letter-spacing:.1em; opacity:.85}
.mt-play .mt-icon{font-size:15px; line-height:1}
.music-track.is-playing .mt-play{background:var(--yuzu-cta); border-color:var(--yuzu-cta)}
.mt-title{margin:0 0 6px; font-size:17px; line-height:1.5; font-family:var(--font-heading); font-weight:var(--font-weight-heading,600)}
.mt-artist{display:block; font-size:12.5px; font-weight:400; color:var(--muted); margin-top:3px; font-family:var(--font-body); line-height:1.6}
.mt-image{margin:0 0 8px; font-size:14px; line-height:1.9}
.mt-scenes{margin:0 0 8px; font-size:13px; line-height:1.8}
.mt-scenes-label{display:inline-block; font-size:10.5px; letter-spacing:.16em; color:var(--tea-text); border:1px solid var(--leaf-soft); border-radius:999px; padding:1px 8px; margin-right:8px; vertical-align:middle}
.mt-yt{font-size:12.5px; color:var(--yuzu-text); text-decoration:none}
.mt-yt:hover{text-decoration:underline}
@media (max-width:520px){ .music-track{grid-template-columns:48px 1fr; padding:14px} .mt-play{width:48px; height:48px} .mp-repeat{margin-left:0} .mt-title{font-size:16px} }
.music-tip{max-width:900px; margin:-30px auto 22px; padding:10px 14px; border-radius:10px; background:var(--yuzu-soft); color:var(--yuzu-text); font-size:13.5px; line-height:1.8; text-align:center}
@media print{ .music-player,.music-scenes{display:none} }

/* 旅の音楽 v2: アコーディオン・マイプレイリスト・再生元の表示（2026-10-03） */
.mp-now-source{font-size:11px; letter-spacing:.12em; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:1px 8px; margin-left:auto; white-space:nowrap}
.mp-now-source:empty{display:none}
.mp-btn-primary{background:var(--tea-deep); color:#fff; border-color:var(--tea-deep)}
.mp-btn-primary:hover{background:var(--tea)}
.mp-btn:disabled{opacity:.45; cursor:default}
.music-playlist{max-width:900px; margin:0 auto 24px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px 16px 12px}
.mpl-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px}
.mpl-title{margin:0; font-size:16px; font-family:var(--font-heading); font-weight:var(--font-weight-heading,600); display:flex; align-items:baseline; gap:8px}
.mpl-count{font-size:12px; color:var(--muted); font-family:var(--font-body); font-weight:400}
.mpl-actions{display:flex; gap:8px; flex-wrap:wrap}
.mpl-hint{margin:8px 0 10px; font-size:12.5px; line-height:1.8; color:var(--muted)}
.mpl-list{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.mpl-empty{font-size:13px; color:var(--muted); padding:8px 4px}
.mpl-item{display:grid; grid-template-columns:28px 24px 1fr auto auto; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--border); border-radius:10px; background:var(--cream)}
.mpl-item.is-playing{border-color:var(--tea); background:#F1F6EF}
.mpl-item.is-dragging{box-shadow:0 8px 20px rgba(0,0,0,.18); background:#fff; position:relative; z-index:2}
.mpl-handle{cursor:grab; font-size:18px; color:var(--muted); text-align:center; user-select:none; -webkit-user-select:none; touch-action:none; padding:6px 0}
.mpl-item.is-dragging .mpl-handle{cursor:grabbing}
.mpl-no{font-size:12px; color:var(--muted); text-align:right}
.mpl-play-item{font:inherit; font-size:14px; text-align:left; background:none; border:0; padding:6px 4px; cursor:pointer; color:var(--ink); line-height:1.5; min-height:36px}
.mpl-play-item:hover{color:var(--tea-deep); text-decoration:underline}
.mpl-move{display:inline-flex; gap:4px}
.mpl-move button,.mpl-remove{font:inherit; font-size:13px; width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:#fff; cursor:pointer; color:var(--ink)}
.mpl-move button:hover,.mpl-remove:hover{background:var(--cream-deep)}
.mpl-remove{color:var(--muted)}
.music-list-tools{max-width:900px; margin:0 auto 10px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px}
.music-list-hint{margin:0; font-size:12.5px; color:var(--muted)}
.mlt-btns{display:flex; gap:8px}
.music-track{display:block; padding:0}
.mt-head{display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:12px 14px}
.mt-toggle{font:inherit; text-align:left; background:none; border:0; padding:4px 0; cursor:pointer; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px}
.mt-toggle:hover .mt-title > span:first-child{color:var(--tea-deep)}
.mt-toggle .mt-title{margin:0; display:block}
.mt-chevron{font-size:22px; color:var(--muted); transition:transform .2s ease; flex:0 0 auto}
.music-track.is-open .mt-chevron{transform:rotate(90deg)}
.mt-add{font:inherit; font-size:12.5px; display:inline-flex; align-items:center; gap:4px; padding:7px 10px; border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--ink); cursor:pointer; min-height:36px; white-space:nowrap}
.mt-add:hover{background:var(--cream-deep)}
.mt-add.is-on{background:var(--tea-deep); color:#fff; border-color:var(--tea-deep)}
.mt-add:focus-visible,.mt-toggle:focus-visible,.mpl-handle:focus-visible,.mpl-play-item:focus-visible{outline:3px solid var(--yuzu); outline-offset:2px}
.mt-body{padding:0 14px 14px 82px}
@media (max-width:520px){
  .mt-head{grid-template-columns:48px 1fr; padding:10px 12px}
  .mt-add{grid-column:1 / -1; justify-self:start}
  .mt-body{padding:0 12px 14px 12px}
  .mpl-item{grid-template-columns:24px 20px 1fr auto; }
  .mpl-move{display:none}
}
.mt-source{margin:0 0 8px; font-size:12.5px; line-height:1.8; color:var(--muted)}
.music-scene-add{max-width:900px; margin:-12px auto 16px; text-align:center}
.mp-note a{color:var(--tea-text); text-decoration:underline}

/* 折り返しの整え(2026-10-03): 見出し類は行の長さを均等に(balance)、本文は最終行だけが
   極端に短くなるのを避ける(pretty)。対応していないブラウザーでは無視されるだけで害はない。 */
h1,h2,h3,h4,.eyebrow,.page-hero-eyebrow,.hero-tagline,.mt-title,.gate-body h3,.view-room strong{text-wrap:balance}
p,li,dd,dt,figcaption,summary,blockquote,.hero-lead,.page-hero-lead,.section-subtitle,.gate-body p{text-wrap:pretty}

/* wrap-tidy.js 用(2026-10-03): 日本語見出しは文節(<wbr>)でのみ折り返す。長すぎる文節は overflow-wrap で救う。
   .wt-balance は短いブロックの最終行の 1〜3 文字残りを均等化で解消する。 */
.wt-ja{word-break:keep-all; overflow-wrap:break-word}  /* anywhere だと flex 内で 1 文字幅まで縮んで不要に折り返す(2026-10-03) */
.wt-nb{white-space:nowrap}
.wt-balance{text-wrap:balance}

/* hero-title-oneline(2026-10-03): トップの題「茶畑がつくる、この町の物語。」は常に 1 行。
   狭い画面では題を折り返さず、画面幅に応じて文字を縮める(375px で約 21px、14 字×1.05em=309px)。
   英語版は文の長さが違うので対象外。JS の整形より先に CSS で決まるので、読込直後に 2 行→1 行と変わることがない。 */
html[lang="ja"] .hero h1 > [data-edit="pages.index.hero.title"]{white-space:nowrap}
@media (max-width:900px){
  html[lang="ja"] .hero h1{font-size:clamp(17px, 5.6vw, 48px); letter-spacing:.05em}
  /* 題を縮めても副題・添え書きは読める大きさを保つ */
  html[lang="ja"] .hero h1 .sub{font-size:max(12px, .45em)}
  html[lang="ja"] .hero h1 .hero-tagline{font-size:max(12.5px, .5em)}
}

/* hero-phrase(2026-10-03): トップの見出し周りは JS で組み直さず、CSS だけで最初の描画から最終形にする。
   word-break:auto-phrase は Chrome 119+ の日本語文節折り返し(未対応ブラウザーは通常の折り返し)。 */
html[lang="ja"] .hero h1, html[lang="ja"] .hero-lead{word-break:auto-phrase}
html[lang="ja"] .hero-lead{text-wrap:pretty}
html[lang="ja"] .hero h1 .sub, html[lang="ja"] .hero h1 .hero-tagline{text-wrap:balance}
/* 副題は空白の位置でだけ折り返す（「交流ステーション 和束の郷a0／」と「wazukanoSATOカフェ」に分かれる） */
html[lang="ja"] .hero h1 .sub{word-break:keep-all}
/* 題の行末「。」の右半分の空白と字間の分だけ詰め、見た目の中心を合わせる(題は 1 行・「。」で終わる前提) */
html[lang="ja"] .hero h1 > [data-edit="pages.index.hero.title"]{margin-right:-.55em}

/* btn-oneline(2026-10-03): スマホではボタンの文字を 1 行に。左右の余白を詰め、画面幅に応じて少し縮める(375px で約 14.6px)。
   アクセスの経路ボタン(.car-links)は長いので、文節で 2 行にそろえる。英語は語が長いので折り返しを残し、行の長さだけ均等に。 */
@media (max-width:600px){
  html[lang="ja"] .btn{padding-left:16px; padding-right:16px; gap:6px; white-space:nowrap; max-width:100%; font-size:min(15px, 3.9vw); letter-spacing:0}
  html[lang="ja"] .car-links .btn{white-space:normal; text-wrap:balance; word-break:auto-phrase}
  html[lang="en"] .btn{padding-left:18px; padding-right:18px; text-wrap:balance}
}
/* 「町の人が、町のめぐみを手渡す場所。」は 1 行(16 字)。1 段組みになる 820px 以下は画面幅に応じて縮める */
html[lang="ja"] .about-text h3{white-space:nowrap}
@media (max-width:820px){ html[lang="ja"] .about-text h3{font-size:min(28px, 5vw); letter-spacing:0} }

/* cup-sway(2026-10-03): 固定バー「食べる」の湯呑みを 2.4 秒ごとに小さく揺らし、目に留まるようにする。
   底を支点に左右へ 3 往復して止まり、残りの時間は静止（常に揺れ続けると読みにくいため）。
   OS で「視差効果を減らす／アニメーションを減らす」を選んでいる人には揺らさない。 */
@keyframes wz-cup-sway{
  0%,46%,100%{transform:rotate(0)}
  7%{transform:rotate(-15deg)}
  14%{transform:rotate(12deg)}
  21%{transform:rotate(-9deg)}
  28%{transform:rotate(6deg)}
  35%{transform:rotate(-3deg)}
  41%{transform:rotate(1deg)}
}
.mobile-bar a.mb-eat .wz-glyph{display:inline-block; white-space:pre; transform-origin:.55em 80%; animation:wz-cup-sway 2.4s ease-in-out infinite; will-change:transform}
@media (prefers-reduced-motion: reduce){ .mobile-bar a.mb-eat .wz-glyph{animation:none} }