/* oterastay-web — 共通スタイル
 *
 * 🎨 **正本 = お寺ステイ ブランドブック**(Shingo Torii DesignLab・2025.4.3 版。
 *    Drive「01. ブランドブック / 最新版_2025.4.3 Brand Book_OTERA STAY.pptx」+ 同 Google Doc)。
 *    2026-08-08 に DWD(noa@oterastay.com)で実物を読み、その規定どおりに実装した。
 *    ⚠️ ここの色・書体・明度バランスは**乃亜の好みではなくクライアントの規定**。変えるときは
 *    ブランドブックを先に見ること(2026-08-06 に提示した3案〈余白/灯/朱〉はブランドブックを
 *    開けないまま作ったもので、暗い背景・明朝・金のアクセントはいずれも規定違反だった)。
 *
 * ブランドブックの規定(Color Scheme / 明度のバランス):
 *   1. 基調色 = 白(70〜80%)  … 背景・主要コンテンツ領域・テキストボックス・メニューの背景
 *   2. ポイントカラー = 緑 #5d8234(10〜20%) … ボタン・リンク・アイコンのアクセント。
 *      セクションの背景に**淡い緑(#5d8234 のグラデーション)**を敷いて視覚的に区切る
 *   3. ポイントカラー = 赤 #e8340c … **ロゴと写真の中だけ**。UI では使わない
 *      (「重要なアクションを促すボタンだけに限り、できるだけ使用しない」)
 *   4. 黒とグレー(10%) = #1b2631 / #d8d8d8
 *   5. 書体 = **メイリオ**(= 明朝は使わない)
 *   6. 写真 = 自然の風景・庭園・苔・紅葉。全体が暗くならないようにし、
 *      白抜き文字のために写真を暗くする場合も**ブラックポイント面積は20%以下**
 *   7. 空の色は薄めに(#d7e3e4)
 */

/* ============================================================
   0. トークン(ブランドブックの指定値をそのまま持つ)
   ============================================================ */
:root {
  --white: #ffffff;      /* 基調色(70〜80%) */
  --ink: #1b2631;        /* 黒(ブランド指定) */
  --ink-sub: #5a6672;    /* グレー(副文・本文の補助) */
  --line: #d8d8d8;       /* グレー(罫・分割線。ブランド指定) */
  --wash: #f7f8f6;       /* ほんのり沈めた面(白の範囲内) */

  --green: #5d8234;      /* ポイントカラー 緑(ブランド指定) */
  --green-deep: #4c6b2b; /* 同色相の暗め。**白地に小さい文字**を置くときだけ使う(可読性) */
  --green-wash: rgba(93, 130, 52, 0.10);  /* 淡い緑 = セクションの区切り */
  --green-wash-2: rgba(93, 130, 52, 0.03);

  --red: #e8340c;        /* ロゴ・写真の中だけ。UI では使わない */
  --sky: #d7e3e4;        /* 空(薄めに) */

  /* 後方互換(既存の記述が参照している変数名は残す) */
  --color-fg: var(--ink);
  --color-bg: var(--white);
  --color-accent: var(--green);

  --nav-height: 68px;
  --prop-subnav-height: 46px;

  /* 書体 = メイリオ(ブランドブック規定)。Mac/モバイルは同系のゴシックへ落とす */
  --font: Meiryo, "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;

  --measure: 780px;  /* 本文の読みやすい幅 */
  --wide: 1080px;    /* 一覧・トップの幅 */
}

/* ============================================================
   1. 土台
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* ページ内アンカーの着地位置。sticky な site-header + prop-subnav の裏に見出しが
   潜らないよう、固定バー2本ぶんだけ逃がす。
   ⚠️ scroll-padding-top(スクロールコンテナ側)と scroll-margin-top(ターゲット側)は
   併用すると**加算される**。2026-08-01 に両方 124px を入れて 248px になり、
   「見出しの4行ぐらい上に着地する」不具合を出した(上田報告)。**片方だけにすること。** */
html {
  scroll-padding-top: calc(var(--nav-height) + var(--prop-subnav-height) + 12px);
}

img { max-width: 100%; }
a { color: inherit; }

/* 本文中のリンクは緑(ブランド規定「リンクは緑のアクセント」)。
   ⚠️ #5d8234 は白地の小さい文字だとコントラストが 3.8:1 しか無いので、
   **文字リンクだけ同色相の暗め(--green-deep)** を使う。塗り・罫・アイコンは規定色のまま。 */
/* 🔴 `.btn` を除くこと(2026-08-17 アッキーさん「『この部屋を予約する』の文字が色の関係で
   見えづらい」)。`.content a`(詳細度 0,1,1)は `.btn { color: var(--white) }`(0,1,0)に勝つので、
   除外しないと**本文中のボタンだけ緑地に緑文字**になる(コントラスト 1.4:1)。
   `.band` 側では最初から除外していたが、`.content` 側が抜けていた。 */
.content a:not(.btn),
.band a:not(.stay-card):not(.teaser-card):not(.btn) {
  color: var(--green-deep);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.content a:not(.btn):hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--ink);
}

.content h1 {
  margin: 0 0 30px;
  font-size: clamp(23px, 3.2vw, 31px);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.content h2 {
  margin: 60px 0 20px;
  font-size: clamp(18px, 2.2vw, 22px);
}
/* 見出しの頭に緑の短い罫(ポイントカラーの使いどころ = アイコン・アクセント) */
.content h2::before,
.band h2::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background: var(--green);
  margin-bottom: 16px;
}

.content h3 { margin: 40px 0 12px; font-size: 17px; }

.content p { margin: 0 0 1.5em; }
.content ul, .content ol { padding-left: 1.4em; }
.content li { margin-bottom: 0.5em; }
.content li::marker { color: var(--green); }

.content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 32px;
  font-size: 14.5px;
  background: var(--white);
}
.content th, .content td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.content thead th {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-sub);
  background: var(--green-wash);
  white-space: nowrap;
}

.content blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--green);
  color: var(--ink-sub);
}

hr { border: none; border-top: 1px solid var(--line); margin: 48px 0; }

/* 共通ボタン(塗りは規定の緑。赤は使わない) */
.btn {
  display: inline-block;
  padding: 14px 34px;
  background: var(--green);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 1px solid var(--green);
  transition: background 0.2s ease, color 0.2s ease;
}
/* 🔴 ボタンの文字は白。**カスケードに頼らず、ここで明示的に決め切る**
   (2026-08-17 アッキーさん「リンクボタンの色、また見えづらい。2度言わせないように。
   前回のように文字を白にすると見やすいから今後はリンクボタンはそうして」)。
   1度目は `.content a` が `.btn` に勝って緑地に緑文字、2度目はスマホに**1時間キャッシュされた
   古い CSS** が残っていたのが原因。以後どこに置かれても白で出るよう、面ごとに明示する。 */
.content a.btn,
.band a.btn,
.stay-cta a.btn { color: var(--white); }
/* 白地・緑文字の従属ボタン(お問い合わせ等)はこの限りでない */
.content a.btn-ghost,
.band a.btn-ghost,
.stay-cta a.btn-ghost { color: var(--green-deep); }

/* hover の反転(白地・緑文字)は**マウスのある環境だけ**。指で押す端末では
   タップ後に hover が残り、「文字が薄い」状態に見えてしまう。 */
@media (hover: hover) {
  .btn:hover { background: var(--white); color: var(--green-deep); }
  .content a.btn:hover, .band a.btn:hover, .stay-cta a.btn:hover { color: var(--green-deep); }
}

/* ============================================================
   2. グローバルナビ(白・メニュー背景は白 = ブランド規定)
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(16px, 4vw, 44px);
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transform: translateY(0);
  transition: transform 0.25s ease;
}
.site-header.is-hidden { transform: translateY(-100%); }

/* ロゴ = ブランドブックの公式ロゴ(横長・カラー)。
   ⚠️ 変形・色変更・効果の追加は禁止(ブランドブック「不適切な使用」)。白か淡い背景でのみ使う。 */
.site-logo { flex: 0 0 auto; display: flex; align-items: center; }
.site-logo img { display: block; height: 30px; width: auto; }

/* ⚠️ ナビは「横に溢れさせない」こと。header は flex コンテナなので、子に min-width:0 が
   無いと子は中身の幅より縮まず、**ヘッダーごと画面より広くなってページが横スクロールする**。 */
.site-nav {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-left: clamp(16px, 3vw, 40px);
}
.site-nav a {
  margin-right: clamp(12px, 1.8vw, 24px);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-nav a:hover { color: var(--green-deep); border-bottom-color: var(--green); }

/* ヘッダー右側(言語 + 予約 + ハンバーガー)。Roopt の header-actions と同型 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

/* 言語ドロップダウン(Roopt と同型。lang属性つきリンクは worker/i18n.ts が書き換えない) */
.lang-switcher { position: relative; flex: 0 0 auto; }
.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lang-btn:hover { border-color: var(--green); color: var(--green-deep); }
.lang-caret { font-size: 9px; opacity: 0.7; }
.lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(27, 38, 49, 0.12);
  z-index: 300;
  overflow: hidden;
}
.lang-switcher.open .lang-dropdown { display: block; }
.lang-dropdown a {
  display: block;
  padding: 11px 16px;
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
}
.lang-dropdown a:hover { background: var(--green-wash); color: var(--green-deep); }

/* 予約ボタン(Roopt の btn-contact と同型。塗りは規定の緑) */
.btn-book {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 20px;
  background: var(--green);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.18s ease;
}
.btn-book:hover { background: var(--green-deep); }

/* ハンバーガー(モバイルのみ表示) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   3. 物件ページ用サブナビ(2重ナビゲーションの下段)
   ============================================================ */
/* ⚠️ **地は必ず不透明にすること。** 2026-08-08 に `rgba(...)` の淡い緑を敷いていて、
   sticky なサブナビの裏を本文が透けて通り抜けた(上田さん指摘「みづらいです」)。
   淡い緑に見せたいときも、白と混ぜた**不透明な色**を使う。 */
.prop-subnav {
  position: sticky;
  top: var(--nav-height);
  z-index: 190;
  display: flex;
  gap: clamp(16px, 3vw, 30px);
  height: var(--prop-subnav-height);
  align-items: center;
  padding: 0 clamp(16px, 4vw, 44px);
  background: #eff2eb; /* = 白 + 緑10% を焼き込んだ不透明色 */
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.prop-subnav::-webkit-scrollbar { display: none; }

/* 現在地表示(is-active)は 2026-08-01 に撤去(上田指示「そういうギミックは全部はずしていい・
   一番左だけ濃いのも辞めて」)。全項目を同じ見た目のただのリンクにしておく。 */
.prop-subnav a {
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
}
.prop-subnav a:hover { color: var(--green-deep); }

/* --- 1ページ完結の拠点ページの第二ヘッダー(2026-09-01・リニューアル方針PDF ①) ---
   宿坊名＋県バッジ / セクションジャンプ / 「空室を確認する」CTA を1本の追従バーに載せる。
   ⚠️ 高さは既存の --prop-subnav-height(46px)のまま。ここを変えると html の
      scroll-padding-top(固定バー2本ぶんの逃がし)とズレて、アンカーが見出しの下に潜る。 */
/* 🔴 バー全体をスクロールさせない。`.prop-subnav` は overflow-x:auto なので、その中で
   CTA に margin-left:auto を効かせると **auto マージンが可視幅に対して解決され、
   溢れたリンクの上に CTA が重なって両方押せなくなる**(2026-09-01 に 390px で実測)。
   → 単ページ版は「識別子 / スクロールするジャンプ / 固定のCTA」の3分割にし、
     **スクロールするのは真ん中だけ**にする。 */
.prop-subnav-single { gap: 0; justify-content: flex-start; overflow: visible; }
.prop-id {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-right: clamp(14px, 3vw, 28px);
  font-size: 13.5px;
}
.prop-id b { font-weight: 700; white-space: nowrap; }
.pref-badge {
  padding: 1px 7px;
  border: 1px solid var(--green);
  border-radius: 999px;
  color: var(--green-deep);
  font-size: 11px;
  line-height: 1.7;
  white-space: nowrap;
}
.prop-jump {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 26px);
  flex: 1 1 auto;
  min-width: 0;   /* flex の子は既定で中身より縮まない → これが無いとバーが画面より広くなる */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.prop-jump::-webkit-scrollbar { display: none; }
/* CTA は右端に寄せて常時見えるようにする(PDF「CTAが常に画面上部に表示」)。
   🔴 文字は白(--white)。`.prop-subnav a { color: var(--ink) }` が後から当たると
      緑地に黒文字になるので、ここで明示的に上書きする。 */
.prop-subnav .prop-cta,
.prop-subnav a.prop-cta {
  flex: 0 0 auto;
  margin-left: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.prop-subnav a.prop-cta:hover { background: var(--green-deep); color: var(--white); }

/* --- 施設・設備アイコン(PDF ⑤) --- */
.facilities {
  list-style: none;
  margin: 26px 0 34px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 10px;
}
.facilities li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.6;
}
.facilities svg { flex: 0 0 auto; color: var(--green); }

/* --- 横スクロールの写真列(<!--SHOTS:…-->・PDF ④「3枚同時表示の横スクロール式」) --- */
.shots-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 12px) / 3);   /* 器いっぱいに3枚 + 隙間6px×2 */
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 6px;
}
/* 🔴 セレクタは `.shots .shots-track img`(詳細度 0,2,1)にすること。`.shots-track img` だと
   `.fig img { height: auto }`(0,1,1)と**同じ詳細度で、しかも後に定義されている**ため負け、
   写真が元の縦横比のまま並んで**高さがバラバラになる**(2026-09-01 実測で踏んだ)。
   ⚠️ 格子の実体は after_build が挿す <picture>。グリッドの子は img ではなく picture なので、
      picture 側にも block と min-width:0 を与える(inline のままだと列幅から溢れる)。 */
.shots .shots-track > picture { display: block; min-width: 0; scroll-snap-align: start; }
.shots .shots-track img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  scroll-snap-align: start;
}

/* ============================================================
   4. 本文の器
   ============================================================ */
/* 器は全ページ同じ幅にする(2026-08-09 上田「Rooptと同じでいいのでは」)。
   それまでは一覧系1080px / 本文系780px の2種類で、ナビを行き来すると枠がガタついていた。
   Roopt は `--max: 1160px` の**1枚の器で全ページを通し、読ませたい地の文だけ内側で狭める**
   (roopt/web の各CSSが一様に max-width: var(--max) で、780/860px は本文ブロックの内側指定)。
   同じ形にそろえる — 枠は 1080px 固定、地の文だけ下のブロックで読み幅に収める。 */
.content {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 68px) clamp(16px, 4vw, 24px) 96px;
}

/* 地の文は読みやすい行長(780px)に収める。
   カード・ギャラリー・図版・KV・表は**この指定から外れて器いっぱい**を使う。 */
.content > p,
.content > ul,
.content > ol,
.content > blockquote,
.content > h2,
.content > h3,
.content > h4,
.content > .source-note { max-width: var(--measure); }

.source-note {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-sub);
}

/* ============================================================
   5. トップページ — バンド(帯)構成
   白を地に、区切りたいところだけ淡い緑を敷く(ブランド規定 2.)。
   ============================================================ */
.home { display: block; }

.band { padding: clamp(52px, 7vw, 84px) clamp(16px, 4vw, 24px); background: var(--white); }
.band-inner { max-width: var(--wide); margin: 0 auto; }

/* 白どうしが続くときは間を二重に取らない。地の色が変わるところだけ間を開ける。 */
.band + .band { padding-top: 0; }
.band + .band-green,
.band-green + .band { padding-top: clamp(40px, 5vw, 60px); }
.hero-lead + .band { padding-top: clamp(28px, 4vw, 44px); }

/* 淡い緑のセクション。上から下へ抜いて、白基調を壊さない */
.band-green {
  background: linear-gradient(180deg, var(--green-wash) 0%, var(--green-wash-2) 55%, rgba(255, 255, 255, 0) 100%);
}

.band h2 {
  font-size: clamp(19px, 2.4vw, 24px);
  margin: 0 0 8px;
}
.band .sec-en {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--green);
  margin-top: 10px;
}
.band h2 + p { margin-top: 24px; }
.band p { margin: 0 0 1.5em; max-width: 760px; }
.band .lede {
  font-size: clamp(16px, 1.9vw, 18.5px);
  line-height: 2.1;
  color: var(--ink);
  max-width: 780px;
}
.band .more { display: inline-block; margin-top: 4px; font-weight: 700; }

/* ============================================================
   6. トップのファーストビュー
   ブランド規定「写真は自然の風景・庭園、全体が暗くならないように」に沿い、
   **写真を暗く落とさず**、白のパネルにコピーを置く(白抜き文字を使わない = 黒面積ゼロ)。
   ============================================================ */
.hero-lead { position: relative; background: var(--white); }
.hero-photo { position: relative; height: clamp(320px, 56vh, 520px); overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-panel {
  position: relative;
  max-width: var(--wide);
  margin: clamp(-190px, -14vw, -110px) auto 0;
  padding: 0 clamp(16px, 4vw, 24px);
}
.hero-panel-inner {
  background: var(--white);
  padding: clamp(30px, 4vw, 44px) clamp(24px, 4vw, 48px) clamp(32px, 4vw, 44px);
  max-width: 620px;
  border-top: 4px solid var(--green);
}
.hero-lead .kicker {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--green);
}
.hero-lead h1 {
  margin: 0;
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: var(--ink);
}
.hero-lead .hero-sub {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-sub);
}
.hero-lead .hero-cta { margin: 28px 0 0; }

/* 下層ページ・本文中の1枚もの写真 */
.hero { margin: 30px 0 38px; }
.hero img { width: 100%; max-height: 460px; object-fit: cover; display: block; }

/* ============================================================
   7. 宿坊カード(トップ・一覧共通)
   ============================================================ */
/* FAQ の節の頭に置く案内文(2026-08-18 アッキーさん「これから予約しようか悩んでいる人が見る
   サイトだからそういった目線で洗い直して」→ FAQ を「ご予約前に」「ご予約後のお手続き」に分けた)。 */
.faq-lead { margin: -6px 0 20px; font-size: 13.5px; line-height: 1.9; color: var(--ink-sub); }

/* お問い合わせ前の「まずFAQ」導線(2026-08-18 アッキーさん「できるだけお問合せを減らしたい」)。
   淡い緑の面で本文から浮かせる(ブランドブック「セクションの背景に淡い緑」)。 */
.faq-first {
  margin: 26px 0 34px;
  padding: clamp(20px, 3vw, 28px) clamp(18px, 3vw, 26px);
  background: linear-gradient(180deg, var(--green-wash) 0%, var(--green-wash-2) 100%);
  border-top: 3px solid var(--green);
}
.faq-first h2 { margin: 0 0 8px; font-size: clamp(17px, 2.1vw, 20px); }
.faq-first > p { margin: 0; font-size: 14px; line-height: 1.95; }
.faq-first-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 14px; }
.content .faq-first-links a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--white);
  color: var(--green-deep);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}
@media (hover: hover) {
  .content .faq-first-links a:hover { background: var(--green); color: var(--white); }
}
.faq-first-note { margin: 0; font-size: 12.5px; line-height: 1.9; color: var(--ink-sub); }

.stay-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: clamp(20px, 3vw, 32px);
  margin: 30px 0 34px;
}

.stay-card { display: block; text-decoration: none; color: inherit; background: var(--white); }
.stay-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}
.stay-card:hover img { opacity: 0.88; }
.stay-card h3 {
  margin: 14px 0 0;
  font-size: 15.5px;
  font-weight: 700;
}
.stay-card p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-sub); }
/* 2026-08-18: ご利用例(/uniquevenue/)のカードに添える一言。所在地より一段落とす。 */
.stay-card .card-note { margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--ink); }
.stay-card:hover h3 { color: var(--green-deep); }

/* 2026-08-14 アッキーさん指示で /stay/ は区分なしの1つの並びになったので、
   連携拠点だけに付けていた緑の細帯(.stay-card-partner)と外部誘導バッジ(.tag-outbound)は撤去した。 */

/* まだ写真が無い拠点だけ、従来どおり罫だけの面にする */
.stay-card-noimg {
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  padding: 22px 20px 24px;
}
.stay-card-noimg h3 { margin-top: 0; }

/* ============================================================
   8. 体験
   ============================================================ */
/* 2026-09-15 アッキーさん: 体験4種に写真を1枚ずつ付けたカードに(従来は文字だけの丸ボタン) */
.experience-teaser {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 24px);
  margin: 26px 0 28px;
}
@media (max-width: 760px) { .experience-teaser { grid-template-columns: repeat(2, 1fr); } }
.teaser-card { display: block; text-decoration: none; color: var(--ink); background: var(--white); }
.teaser-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}
.teaser-card span { display: block; padding: 10px 4px 2px; font-size: 14px; font-weight: 700; }
.teaser-card:hover img { opacity: 0.88; }
.teaser-card:hover span { color: var(--green-deep); }

/* 体験一覧ページ: 体験ごとに、体験できる寺をカード内に列挙 */
.experience-list { display: grid; gap: clamp(26px, 4vw, 40px); margin: 36px 0 0; }

.experience-card { background: var(--white); border: 1px solid var(--line); }

/* 上段 = 淡い緑(「セクションの背景に淡い緑を敷いて区切る」というブランド規定の適用) */
.exp-head {
  background: var(--green-wash);
  padding: clamp(22px, 3.2vw, 30px) clamp(20px, 4vw, 34px) 0;
  border-bottom: 1px solid var(--line);
}
.exp-head h2 {
  margin: 0 0 20px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  color: var(--ink);
}
.exp-head h2::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background: var(--green);
  margin-bottom: 14px;
}
.exp-head .experience-shots { margin: 0; padding-bottom: clamp(22px, 3.2vw, 30px); }

.exp-body { padding: clamp(24px, 4vw, 32px) clamp(20px, 4vw, 34px) clamp(24px, 4vw, 30px); }
.exp-body > p { margin: 0; font-size: 14.5px; line-height: 2.05; color: var(--ink); }
.exp-body strong { font-weight: 700; }

.experience-card .temples {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-sub);
}
.experience-card .temples a { margin-right: 16px; color: var(--green-deep); text-underline-offset: 4px; }

/* 体験カード・法人利用ページの写真列 */
.experience-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
  margin: 22px 0 0;
}
/* 2026-08-18: 体験カードの写真が「拠点の外観」から「その体験そのもの」に変わったので、
   紹介写真として読める高さにする(140px だと 2:1 超の細い帯になり、何の写真か分からなかった)。 */
.experience-shots img { width: 100%; height: clamp(150px, 19vw, 200px); object-fit: cover; display: block; }
.experience-shots a:hover img { opacity: 0.88; }

/* ============================================================
   9. 拠点ページの写真・図版
   ============================================================ */
.stay-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
  margin: 26px 0 38px;
}
.stay-gallery img { width: 100%; height: 190px; object-fit: cover; display: block; }

/* 本文中の図版(<!--FIG:…--> / <!--GRID:…-->)。
   道順図・間取り図・献立写真など「そのページにしか意味の無い画像」用。
   ギャラリー(object-fit:cover で切り詰める)と違い、図は切らずに全体を見せる。 */
.fig { margin: 30px 0; }
.fig img { width: 100%; height: auto; display: block; }
.fig figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--ink-sub);
}
/* 正方形・縦長の図版(版画・御朱印)は切らずに幅だけ絞る(<!--FIG:…|…|narrow-->・2026-09-14 正伝寺) */
.fig-narrow { max-width: 420px; }
.fig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px; }
.fig-grid img { width: 100%; height: 210px; object-fit: cover; display: block; }

/* 表のセルに置く写真(<!--IMG:…-->)。2026-08-17 アッキーさん指示
   「どの写真が『雪見の間』か分かりづらい。一覧表の左隣に写真を」
   → 続けて「**写真が小さすぎてどんな部屋か全く確認できない。これでは無い方がマシ**。
     サイズを再調整して、スマホでも見れるように」。
   🔴 最初の実装(132×88px)が細い短冊に潰れた真因は **土台の `img { max-width: 100% }`**。
      写真の列を `td:has(){width:1px}` で「中身ぴったり」にしたため、セルが 40px 程度に縮み、
      max-width がそれに追随して画像を横だけ潰した(高さは固定なので縦長の短冊になる)。
      → 幅は**列に明示**し、画像には `max-width: none` を効かせる。 */
.content .rooms-table td .cell-thumb {
  display: block;
  width: 100%;
  max-width: none;
  height: 200px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.content .rooms-table td:first-child { width: 320px; padding-right: 22px; }
/* 写真の列を広げたぶん、部屋名が「花見の / 間」と2行に折れる。名前は折らない。 */
.content .rooms-table td:nth-child(2) { white-space: nowrap; }
/* 定員(または広さ)の列も「最大12 / 名」と折れないように */
.content .rooms-table td:nth-child(3) { white-space: nowrap; }

/* スマホは横スクロールにしない。行ごとに「写真 → 情報」の積み重ねへ組み替える
   (5列の表を横に流すと、写真か文字のどちらかしか画面に入らない)。 */
@media (max-width: 700px) {
  .content .rooms-table { overflow-x: visible; }
  .content .rooms-table table,
  .content .rooms-table tbody,
  .content .rooms-table tr,
  .content .rooms-table td { display: block; width: auto; }
  /* 🔴 これが無いと横にはみ出す。土台の `.table-wrap > table { min-width: 460px }`
     (列の多い料金表を横スクロールさせるための下限)が、積み重ねに組み替えたこの表にも
     効いてしまい、390px の画面で 460px の表になる(実測 scrollWidth=474)。 */
  .content .rooms-table > table { min-width: 0; }
  .content .rooms-table thead { display: none; }
  .content .rooms-table tr {
    padding: 18px 0 20px;
    border-bottom: 1px solid var(--line);
  }
  .content .rooms-table td { border: 0; padding: 0 0 4px; }
  .content .rooms-table td:first-child { width: auto; padding: 0 0 12px; }
  .content .rooms-table td .cell-thumb { height: 200px; }
  .content .rooms-table td:nth-child(2) { font-size: 17px; }
  /* 見出し行を隠すぶん、項目名を各行に補う。
     🔴 列の位置で決め打ちしない(2026-09-14)。以前は「4列目=水まわり」固定で、4列目が「特徴」の
        5拠点で特徴の文に「水まわり:」が付いていた。項目名は hooks `_wrap_tables` が
        **その表の見出し行から** data-label に写している。 */
  .content .rooms-table td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-sub); }
}

/* 部屋ごとの予約ボタン(<!--BOOKROOM:…-->)。間取り図のすぐ下に置く。 */
.room-book { margin: 20px 0 40px; }

/* 体験ごとの予約ボタン(<!--BOOK-->)。2026-08-17 アッキーさん指示で体験10種すべてに付けた。
   次の体験の見出しとくっつかないよう、下に間隔を多めに取る。 */
.exp-book { margin: 18px 0 34px; }

/* Google マップ埋め込み(<!--MAP:…-->)。16:9 を保って高さを確保する */
.map-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 260px; overflow: hidden; border: 1px solid var(--line); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   10. フッター
   ============================================================ */
.site-footer {
  padding: 48px clamp(16px, 4vw, 44px) 56px;
  text-align: center;
  font-size: 12.5px;
  line-height: 2.1;
  color: var(--ink-sub);
  border-top: 1px solid var(--line);
  background: var(--white);
}
.footer-nav { margin-bottom: 14px; }
.footer-nav a { margin: 0 14px; color: var(--ink); text-decoration: none; font-weight: 700; }
.footer-nav a:hover { color: var(--green-deep); }
.site-footer p { margin: 0; }

/* ============================================================
   11. 問い合わせフォーム(roopt /contact/ と同型の自前送信・2026-08-06)
   ============================================================ */
.contact-form { max-width: 620px; }
.contact-form p { margin: 0 0 22px; }
.contact-form label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
/* 「必須」バッジ。⚠️ 赤は使わない(ブランド規定 = 赤はロゴと写真の中だけ) */
.contact-form .req {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--white);
  background: var(--green-deep);
  padding: 2px 8px;
  margin-left: 10px;
  vertical-align: 1px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 12px 14px;
  transition: border-color 0.2s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.contact-form textarea { resize: vertical; line-height: 1.9; }
.contact-form .btn-submit {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 2px;
  padding: 15px 44px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.contact-form .btn-submit:hover { background: var(--white); color: var(--green-deep); }
/* ハニーポット: 画面外へ(display:none だと埋めない bot がいるため roopt と同じくオフスクリーン) */
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* ============================================================
   12. よくある質問(FAQ) 2026-08-08 新設
   CSP で JS を使わない方針なので <details>/<summary> のネイティブ挙動で開閉する。
   ⚠️ summary の display は変えない(iOS Safari でマーカーごと消える既知の罠・roopt で実測)。
   ============================================================ */
.faq-item { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq-item > summary {
  cursor: pointer;
  font-weight: 700;
  line-height: 1.8;
  padding: 16px 4px 16px 0;
  list-style-position: outside;
}
.faq-item > summary::marker { color: var(--green); }
.faq-item > summary:hover { color: var(--green-deep); }
.faq-item[open] > summary { color: var(--green-deep); }
.faq-a { padding: 0 4px 20px 4px; line-height: 2.05; color: var(--ink); }
.faq-a p { margin: 0 0 0.8em; }
.content h2 + .faq-item { border-top: 1px solid var(--line); }

/* ============================================================
   13. 画面が狭いとき
   ============================================================ */

/* --- タブレット以下: ナビをハンバーガーに畳む(Roopt と同じ型) --- */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 4px 0;
    background: var(--white);
    border-bottom: 3px solid var(--green);
    box-shadow: 0 10px 24px rgba(27, 38, 49, 0.14);
    z-index: 199;
  }
  .site-nav.open { display: flex; }
  .site-nav a {
    margin: 0;
    padding: 15px clamp(16px, 4vw, 44px);
    font-size: 15px;
    border-bottom: 1px solid var(--line);
  }
  .site-nav a:last-child { border-bottom: none; }
  .site-nav a:hover { color: var(--green-deep); border-bottom-color: var(--line); }

  /* 地球儀だけにして幅を空ける */
  .lang-label { display: none; }
  .lang-btn { padding: 0 12px; gap: 4px; }
}

/* --- スマートフォン --- */
@media (max-width: 640px) {
  :root { --nav-height: 58px; --prop-subnav-height: 44px; }
  body { font-size: 15.5px; line-height: 1.9; }

  .site-header { padding: 0 14px; gap: 8px; }
  .site-logo img { height: 24px; }
  .header-actions { gap: 6px; }
  .lang-btn, .btn-book { height: 34px; }
  .btn-book { padding: 0 14px; font-size: 12px; }
  .nav-toggle { width: 36px; height: 36px; }

  /* ヒーロー: パネルは写真に少しだけ掛けて、全幅で置く */
  .hero-photo { height: 46vh; min-height: 260px; }
  .hero-panel { margin-top: -36px; padding: 0 14px; }
  .hero-panel-inner { max-width: none; padding: 24px 20px 26px; }
  .hero-lead h1 { font-size: 30px; line-height: 1.4; }
  .hero-lead .hero-sub { font-size: 13.5px; }
  .hero-lead .hero-cta { margin-top: 22px; }
  .btn { width: 100%; text-align: center; padding: 15px 20px; }

  .band { padding: 44px 14px; }
  .band .lede { font-size: 16px; line-height: 2; }
  .content { padding: 32px 14px 64px; }
  .content h1 { font-size: 22px; margin-bottom: 22px; padding-bottom: 16px; }
  .content h2 { margin-top: 40px; font-size: 18px; }
  .content h3 { margin-top: 30px; font-size: 16px; }

  .stay-cards { grid-template-columns: 1fr 1fr; gap: 14px; }
  .stay-card h3 { font-size: 13.5px; line-height: 1.5; }
  .stay-card p { font-size: 11.5px; }
  /* 写真つきの連携拠点は他カードと同じ2列に並べる。横幅いっぱいは写真なしの時だけ */
  .stay-card-noimg { grid-column: 1 / -1; }

  .stay-gallery { grid-template-columns: 1fr 1fr; gap: 4px; }
  .stay-gallery img { height: 120px; }
  /* 横スクロールは 1.2 枚見せ = 「まだ右に続く」ことを見た目で伝える(3枚だと1枚90px以下で潰れる) */
  .shots-track { grid-auto-columns: 78%; }
  .shots .shots-track img { height: 200px; }
  .prop-id { margin-right: 12px; font-size: 12.5px; }
  .prop-id .pref-badge { display: none; }   /* 幅が要るのはジャンプとCTA。県は本文で分かる */
  .prop-subnav a.prop-cta { padding: 6px 11px; font-size: 12px; }
  .experience-shots { grid-template-columns: 1fr 1fr; gap: 4px; }
  .experience-shots img { height: 100px; }
  .fig-grid { grid-template-columns: 1fr; }
  .fig-grid img { height: auto; }

  /* 指で押せる大きさを確保する(44px 目安) */
  .prop-subnav a { padding: 12px 0; }
  .footer-nav a { display: inline-block; padding: 8px 12px; margin: 0 4px; }

  .exp-head, .exp-body { padding-left: 16px; padding-right: 16px; }
  .contact-form .btn-submit { width: 100%; }
}

/* ============================================================
   14. 拠点ページの末尾の行き先(予約 / 問い合わせ)
   ============================================================ */
.stay-cta {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 34px clamp(16px, 4vw, 24px) 72px;
}
.stay-cta-lead {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.stay-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.stay-cta-legal { margin: 20px 0 0; font-size: 12px; }  /* 2026-10-14 特定商取引法に基づく表記へのリンク */
.btn-ghost { background: var(--white); color: var(--green-deep); border-color: var(--green); }
.btn-ghost:hover { background: var(--green-wash); color: var(--green-deep); }
@media (max-width: 640px) {
  .stay-cta { padding: 28px 14px 56px; }
  .stay-cta-actions { flex-direction: column; }
}

/* --- 表は画面をはみ出させない(拠点ページの料金表・時刻表が横に長い) --- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0 32px;
}
.table-wrap > table { margin: 0; min-width: 460px; }

/* ============================================================
   15. イベント・お知らせ(/event/)と各拠点の天気(/weather/)
   2026-08-31 増設(上田指示)。正本 = data/events.yaml / temples.yaml の geo
   ============================================================ */
.event-list {
  list-style: none;
  margin: 18px 0 34px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.event-list li {
  display: flex;
  gap: 18px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
}
.event-list time {
  flex: 0 0 92px;
  font-size: 13.5px;
  color: var(--ink-sub);
  padding-top: 2px;
}
.event-body { min-width: 0; }
.event-kind {
  display: inline-block;
  margin-right: 10px;
  padding: 1px 10px;
  font-size: 11.5px;
  color: var(--green-deep);
  border: 1px solid var(--green);
  border-radius: 999px;
  vertical-align: 2px;
}
.event-title { font-weight: 700; }
.event-note {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-sub);
}
.event-year { margin-bottom: 4px; }
@media (max-width: 640px) {
  .event-list li { flex-direction: column; gap: 4px; }
  .event-list time { flex-basis: auto; }
}

.weather-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 26px 0 30px;
}
.weather-card {
  min-width: 0;  /* grid の子は min-width:auto で中身より縮まない — 390px で 664px にはみ出したのを実測 */
  border: 1px solid var(--line);
  background: var(--white);
  padding: 18px 18px 14px;
}
.weather-card h2 { margin: 0 0 2px; font-size: 17px; }
.weather-card .weather-loc { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-sub); }
.weather-days {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.weather-day {
  flex: 1 0 84px;
  min-width: 84px;
  text-align: center;
  padding: 10px 4px;
  background: var(--wash);
}
.weather-day.is-today { background: var(--green-wash); }
.wd-date { font-size: 12.5px; font-weight: 700; }
.wd-yobi { font-weight: 400; color: var(--ink-sub); }
.wd-icon { font-size: 26px; line-height: 1.5; }
.wd-label { font-size: 11px; color: var(--ink-sub); }
.wd-temp { margin-top: 4px; font-size: 13px; }
.wd-max { color: #b0430c; font-weight: 700; }  /* 最高気温。朱(#e8340c)はUI禁色なので暗めの同系色 */
.wd-min { color: #3a5b8c; font-weight: 700; }
.wd-pop { font-size: 11.5px; color: var(--ink-sub); }
.weather-status { margin: 8px 0; font-size: 13.5px; color: var(--ink-sub); }
.weather-credit { font-size: 12px; color: var(--ink-sub); }

/* ─── エリアの周辺イベント(2026-09-28・/area/<name>/ と /area/<name>/events/) ─── */
.ae-teaser { background: var(--green-wash); border-radius: 10px; padding: 18px 18px 8px; margin: 8px 0 28px; }
.ae-teaser-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ae-teaser-list li { margin: 0; }
.ae-teaser-list a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px 14px; background: var(--white);
  border-radius: 8px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ae-teaser-list a:hover { border-color: var(--green); }
.ae-date { font-size: 0.82rem; font-weight: 700; color: var(--green-deep); }
.ae-name { font-weight: 700; line-height: 1.5; }
.ae-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.78rem; color: var(--ink-sub); }
.ae-badge { display: inline-block; font-size: 0.72rem; padding: 1px 8px; border-radius: 99px; background: var(--wash); border: 1px solid var(--line); color: var(--ink-sub); }
.ae-badge.now { background: var(--green); border-color: var(--green); color: #fff; }
.ae-more { margin: 12px 0 8px; text-align: right; font-size: 0.9rem; }
.ae-empty { margin: 0 0 10px; color: var(--ink-sub); }
.ae-notice { background: #fff8e6; border: 1px solid #f0d68a; border-radius: 8px; padding: 12px 14px; font-size: 0.9rem; }
.ae-month-title { margin-top: 36px; }
.ae-card { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin: 14px 0; background: var(--white); }
.ae-card-date { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ae-time { font-size: 0.8rem; color: var(--ink-sub); }
.ae-card-name { margin: 6px 0 2px; font-size: 1.1rem; }
.ae-place { margin: 0 0 8px; font-size: 0.88rem; color: var(--ink-sub); }
.ae-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ae-tag { font-size: 0.75rem; padding: 2px 8px; border-radius: 4px; background: var(--wash); border: 1px solid var(--line); }
.ae-tag.rec { color: var(--green-deep); border-color: var(--green); background: var(--green-wash-2); }
.ae-tag.intl { background: var(--green-wash); border-color: transparent; }
.ae-body p { margin: 0 0 8px; }
.ae-access, .ae-note { font-size: 0.85rem; color: var(--ink-sub); margin: 6px 0; }
.ae-official { margin: 10px 0 0; font-size: 0.9rem; }
.ae-generated { font-size: 0.8rem; color: var(--ink-sub); margin-top: 24px; }
@media (max-width: 640px) {
  .ae-teaser { padding: 14px 12px 4px; }
  .ae-teaser-list { grid-template-columns: 1fr; }
}
/* hidden 属性を display 指定より優先する(「開催中」バッジ・過ぎた回の非表示が効かなかった 2026-09-28) */
.ae-teaser [hidden], .ae-card[hidden], .ae-card [hidden], .ae-month[hidden] { display: none !important; }
.content .ae-teaser .ae-teaser-list { padding: 0; margin: 0; }
.content .ae-teaser .ae-teaser-list li::marker { content: none; }

/* ─── 「〇〇でしたい3つのこと」(2026-09-28・エリアガイドの冒頭。アッキーさん「詰め込みすぎで何をしたらいいか伝わらない」) ─── */
.todo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 0 32px; }
.todo-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; color: var(--ink); text-decoration: none; }
.content a.todo-card { text-decoration: none; border-bottom: 1px solid var(--line); }
.todo-card:hover { border-color: var(--green); }
.todo-card img, .todo-card picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin: 0; }
.todo-no { position: absolute; top: 10px; left: 10px; width: 32px; height: 32px; border-radius: 50%; background: var(--green);
  color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.todo-card h3 { margin: 14px 16px 6px; font-size: 1.05rem; line-height: 1.5; }
.todo-card p { margin: 0 16px 10px; font-size: 0.9rem; line-height: 1.7; color: var(--ink-sub); }
.todo-more { margin: auto 16px 14px; font-size: 0.85rem; color: var(--green-deep); font-weight: 700; }
@media (max-width: 760px) { .todo-cards { grid-template-columns: 1fr; } }

/* ─── 食事スポットのカード(<!--FOOD_SPOTS:…-->・2026-09-28 /area/minobu/food/。minobu-fuji.com の食事スポットと同じ型) ─── */
.food-lead { background: var(--green-wash); border-radius: 10px; padding: 22px 24px; margin: 0 0 40px; max-width: none; }
.content .food-lead p { margin: 0 0 0.6em; max-width: var(--measure); }
.content .food-lead p:last-child { margin-bottom: 0; }
.food-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; margin: 8px 0 32px; }
.food-card { min-width: 0; scroll-margin-top: 90px; }
.food-photos { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 6px; }
.food-photos::-webkit-scrollbar { display: none; }
.food-photos > picture { display: block; min-width: 0; scroll-snap-align: start; }
.food-card .food-photos img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block; margin: 0; scroll-snap-align: start; }
.food-dots { display: flex; justify-content: center; gap: 4px; min-height: 12px; margin: 10px 0 14px; }
.food-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; }
.food-dots button[aria-current="true"] { background: var(--ink); }
.content .food-card h3 { margin: 0; font-size: 1.3rem; font-weight: 500; line-height: 1.4; }
.content .food-card .food-en { margin: 2px 0 10px; font-size: 0.82rem; color: var(--ink-sub); }
.content .food-card .food-genre { margin: 0 0 8px; }
.content ul.food-info { list-style: none; padding: 0; margin: 0; }
.content ul.food-info li { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; line-height: 1.5; }
.content ul.food-info li::marker { content: none; }
.food-info svg { flex: 0 0 auto; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--ink); fill: #fff; }
.food-checked { font-size: 0.85rem; color: var(--ink-sub); }
@media (max-width: 900px) { .food-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .food-cards { grid-template-columns: 1fr; } .food-lead { padding: 18px 16px; } }
/* 4枚のときは PC 2列×2段(3列だと1枚余る・4列だと文字が詰まる) */
.todo-cards.todo-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .todo-cards.todo-cards-4 { grid-template-columns: 1fr; } }
/* 2枚目以降の写真(data-src・遅延読み込み)。読み込むまでは淡い面で場所を取っておく(2026-09-29) */
.food-photos > img.food-more { display: block; min-width: 0; scroll-snap-align: start; background: var(--wash); }
.content .food-card .food-desc { margin: 0 0 12px; font-size: 0.92rem; line-height: 1.8; color: var(--ink); }

/* ─── 周辺イベントの写真(2026-10-07・1イベント1枚。無いものはカテゴリの絵柄) ─── */
.ae-teaser-list a { flex-direction: row; align-items: center; gap: 12px; }
.ae-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ae-thumb { position: relative; flex: 0 0 76px; width: 76px; height: 76px; border-radius: 6px; overflow: hidden; background: var(--green-wash); }
.ae-thumb img, .ae-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.ae-thumb picture, .ae-card-thumb picture { display: block; width: 100%; height: 100%; }
.ae-thumb-icon { display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.ae-card { display: grid; grid-template-columns: 1fr 160px; column-gap: 18px; }
.ae-card > * { grid-column: 1; }
.ae-card > .ae-card-thumb { grid-column: 2; grid-row: 1 / span 6; position: relative; width: 160px; height: 160px; border-radius: 8px; overflow: hidden; background: var(--green-wash); align-self: start; }
.ae-card-thumb.ae-thumb-icon { font-size: 3.4rem; }
.ae-imgnote { position: absolute; right: 4px; bottom: 4px; font-size: 0.62rem; line-height: 1.3; padding: 1px 5px; border-radius: 3px; background: rgba(27, 38, 49, 0.62); color: #fff; }
@media (max-width: 640px) {
  .ae-card { grid-template-columns: 1fr 96px; column-gap: 12px; }
  .ae-card > .ae-card-thumb { width: 96px; height: 96px; }
  .ae-thumb { flex-basis: 64px; width: 64px; height: 64px; }
}
/* スマホ: 写真は日付・名前・場所の横だけ。説明以下は全幅(写真の列で本文が細くなっていた 2026-10-07) */
@media (max-width: 640px) {
  .ae-card > .ae-card-thumb { grid-row: 1 / span 3; }
  .ae-card > .ae-tags, .ae-card > .ae-body, .ae-card > .ae-access, .ae-card > .ae-note, .ae-card > .ae-official { grid-column: 1 / -1; }
}

/* 2026-10-13 W3: 旧サイトから移した規約(/privacy-policy/ ・ /terms/)の表と、メディア掲載一覧(/information/) */
.legacy-policy table { border-collapse: collapse; margin: 1em 0; }
.legacy-policy td, .legacy-policy th { border: 1px solid #ccc; padding: .4em .6em; vertical-align: top; }
.news-list { list-style: none; padding-left: 0; }
.news-list li { padding: .5em 0; border-bottom: 1px solid #eee; scroll-margin-top: 80px; }
.news-list time { display: inline-block; min-width: 6.5em; color: #666; font-variant-numeric: tabular-nums; }
.news-list li:target { background: #fff6dd; }  /* 旧記事のURLから転送されてきた行 */