/*
 * マチベース スポットページ モックアップ
 * - 製品UI：.mbs-（既存の .mb-spot-* / common.css の重複定義と衝突させない）
 * - モック専用：.mock-（本番に持ち込まない）
 * - 色はマイページ（mypage.css）の青系トークンに合わせる
 */

:root {
  --mbs-text: #1c395d;
  --mbs-sub: #5d7088;
  --mbs-muted: #8396ab;
  --mbs-blue: #2a578e;
  --mbs-blue-d: #20446e;
  --mbs-bg: #f5f7fa;
  --mbs-pale: #eaf0f7;
  --mbs-pale2: #f4f7fb;
  --mbs-line: #dce4ed;
  --mbs-line2: #bccbdc;
  --mbs-kinari: #faf1e8;
  --mbs-kinari-d: #8a5a2e;
  --mbs-hanko: #c4532e;
  --mbs-danger: #a3412a;
  --mbs-danger-bg: #fdecea;
  --mbs-ok: #2f6b45;
  --mbs-ok-bg: #e8f3ec;
  --mbs-radius: 14px;
  --mbs-font: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --mbs-sticky-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body.mbs-page { margin: 0; background: #fff; color: var(--mbs-text); font-family: var(--mbs-font); font-size: 15px; line-height: 1.75; font-weight: 400; overflow-x: hidden; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
a { color: var(--mbs-blue); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--mbs-blue); outline-offset: 2px; border-radius: 4px; }
.mbs-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mbs-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 767px) { .mbs-wrap { padding: 0 16px; } }

/* ---------- 共通ヘッダー（仮） ---------- */
.mbs-site-header { background: #fff; border-bottom: 1px solid var(--mbs-line); }
.mbs-site-header__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mbs-logo { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--mbs-text); text-decoration: none; }
.mbs-logo__mark { display: grid; grid-template-columns: repeat(3, 6px); gap: 2px; }
.mbs-logo__mark i { width: 6px; height: 6px; background: var(--mbs-blue); border-radius: 1px; }
.mbs-logo__mark i:nth-child(2n) { background: #6f9ccc; }
.mbs-logo__text { display: flex; flex-direction: column; line-height: 1; }
.mbs-logo__text b { font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.mbs-logo__text small { font-size: 8px; letter-spacing: .22em; color: var(--mbs-sub); margin-top: 3px; }
.mbs-site-nav { display: flex; align-items: center; gap: 4px; }
.mbs-site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 13px; color: var(--mbs-sub); text-decoration: none; font-weight: 500; }
.mbs-site-nav a.mbs-site-nav__post { margin-left: 6px; background: #3b6fd4; color: #fff; font-weight: 700; border-radius: 999px; padding: 0 18px; min-height: 40px; }
.mbs-site-nav__user { width: 36px; height: 36px; border-radius: 50%; background: var(--mbs-pale); border: 1px solid var(--mbs-line); display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--mbs-blue); margin-left: 6px; }
@media (max-width: 599px) { .mbs-site-nav .mbs-nav-hide { display: none; } .mbs-site-header__inner { padding: 0 16px; height: 56px; } }

/* ---------- 共通フッター（仮） ---------- */
.mbs-site-footer { background: #111; color: #d7d7d7; }
.mbs-site-footer__inner { max-width: 1200px; margin: 0 auto; padding: 28px 24px 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; font-size: 13px; }
.mbs-site-footer__links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.mbs-site-footer a { color: #d7d7d7; display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }
.mbs-site-footer__copy { margin: 0; color: #9a9a9a; font-size: 12px; }

/* ---------- パンくず ---------- */
.mbs-crumbs { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; font-size: 13px; }
.mbs-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0; padding: 0; list-style: none; color: var(--mbs-sub); }
.mbs-crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.mbs-crumbs li + li::before { content: '›'; color: var(--mbs-line2); margin-right: 2px; }
.mbs-crumbs a { color: var(--mbs-sub); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.mbs-crumbs a:hover { color: var(--mbs-blue); text-decoration: underline; }
.mbs-crumbs__back { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--mbs-pale2); border: 1px solid var(--mbs-line); color: var(--mbs-blue) !important; font-weight: 700; text-decoration: none !important; font-size: 13px; }
.mbs-crumbs__back:hover { background: var(--mbs-pale); }
@media (max-width: 767px) {
  .mbs-crumbs { padding-top: 10px; padding-bottom: 10px; font-size: 12px; }
  .mbs-crumbs ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; max-width: 100%; }
  .mbs-crumbs ol::-webkit-scrollbar { display: none; }
  .mbs-crumbs .mbs-crumbs__back { display: none; } /* スマホはパンくずの市名リンクで戻れる。1画面目に3操作を入れるため省く */
}

/* ---------- ファーストビュー ---------- */
.mbs-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: center; padding-bottom: 40px; }
.mbs-hero__media { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: var(--mbs-pale); aspect-ratio: 4 / 3; max-height: 640px; }
.mbs-hero__open { position: relative; z-index: 1; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.mbs-hero__img { width: 100%; height: 100%; object-fit: cover; }
/* 縦長・極端な横長の写真：全体を見せ、余白はぼかした同じ写真で埋める（切り抜きで建物の上が欠けるのを防ぐ） */
.mbs-hero__media.is-fit { background: #1b2433; }
.mbs-hero__media.is-fit .mbs-hero__img { object-fit: contain; }
.mbs-hero__bg { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; filter: blur(22px) brightness(.62) saturate(1.1); pointer-events: none; }
.mbs-hero__badge { position: absolute; z-index: 2; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px; background: rgba(16, 30, 50, .74); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; backdrop-filter: blur(4px); }
.mbs-hero__badge svg { width: 18px; height: 18px; }
.mbs-hero__badge:hover { background: rgba(16, 30, 50, .86); }
.mbs-hero__credit { position: absolute; right: 14px; top: 14px; margin: 0; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .86); color: var(--mbs-sub); font-size: 11px; }

.mbs-hero__panel { min-width: 0; }
.mbs-hero__loc { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--mbs-blue); text-decoration: none; }
.mbs-hero__loc svg { width: 16px; height: 16px; flex: none; }
a.mbs-hero__loc:hover { text-decoration: underline; }
.mbs-hero__en { margin: 0 0 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mbs-muted); }
.mbs-hero__title { margin: 0; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.32; font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; }
.mbs-hero__kana { margin: 6px 0 0; font-size: 13px; color: var(--mbs-sub); }
.mbs-genres { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.mbs-genres a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--mbs-pale2); border: 1px solid var(--mbs-line); color: var(--mbs-text); font-size: 12px; font-weight: 500; text-decoration: none; }
.mbs-genres a:hover { border-color: var(--mbs-blue); color: var(--mbs-blue); }
.mbs-hero__catch { margin: 18px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--mbs-kinari); color: #5b4630; font-size: 14px; line-height: 1.85; }

/* 主要3操作 */
.mbs-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 22px 0 0; }
.mbs-actions--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mbs-act { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 84px; padding: 10px 6px; border: 1px solid var(--mbs-line2); border-radius: 12px; background: #fff; color: var(--mbs-text); text-decoration: none; text-align: center; cursor: pointer; font-size: 14px; line-height: 1.35; transition: background-color .15s, border-color .15s; }
.mbs-act:hover { border-color: var(--mbs-blue); background: var(--mbs-pale2); }
.mbs-act__icon { width: 24px; height: 24px; margin-bottom: 2px; }
.mbs-act__label { font-weight: 700; }
.mbs-act__count { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 4px; }
.mbs-act__sub { font-size: 11px; color: var(--mbs-sub); font-weight: 400; }
.mbs-act--like[aria-pressed="true"] { border-color: var(--mbs-hanko); background: #fdf3ef; color: var(--mbs-hanko); }
.mbs-act--like[aria-pressed="true"] .mbs-act__sub { color: #a65a40; }
.mbs-act--like[aria-pressed="true"] .mbs-heart { fill: currentColor; }
.mbs-act--note { background: var(--mbs-blue); border-color: var(--mbs-blue); color: #fff; }
.mbs-act--note .mbs-act__sub { color: #d6e3f2; }
.mbs-act--note:hover { background: var(--mbs-blue-d); border-color: var(--mbs-blue-d); }
.mbs-act--note.is-in { background: #fff; color: var(--mbs-blue); border-color: var(--mbs-blue); }
.mbs-act--note.is-in .mbs-act__sub { color: var(--mbs-sub); }

.mbs-hero__foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; }
/* WP ULike の本物の出力：画面には出さない（代行クリック用）。display:none にすると一部の環境でクリックが効かないため、見えない位置に置く */
.mb-like-original { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mbs-share { position: relative; }
.mbs-share__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--mbs-blue); font-size: 13px; font-weight: 700; cursor: pointer; border-radius: 8px; }
.mbs-share__btn:hover { background: var(--mbs-pale2); }
.mbs-share__btn svg { width: 18px; height: 18px; }
.mbs-share__menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: 220px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--mbs-line); border-radius: 12px; box-shadow: 0 10px 30px rgba(28, 57, 93, .14); }
.mbs-share__menu a, .mbs-share__menu button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--mbs-text); font-size: 14px; text-decoration: none; text-align: left; cursor: pointer; }
.mbs-share__menu a:hover, .mbs-share__menu button:hover, .mbs-share__menu a:focus-visible, .mbs-share__menu button:focus-visible { background: var(--mbs-pale2); }

@media (max-width: 1023px) {
  .mbs-hero { grid-template-columns: 1fr; gap: 20px; padding-bottom: 28px; }
}
@media (max-width: 767px) {
  .mbs-hero { padding-left: 0; padding-right: 0; gap: 0; padding-bottom: 16px; }
  /* 3:2 にして、ブラウザのツールバーが出ていても1画面目に3操作が入る高さにする */
  .mbs-hero__media { border-radius: 0; aspect-ratio: 3 / 2; }
  /* 縦長写真も3:2のまま（4:3にすると iPhone SE で3操作が1画面目からはみ出すため。全体表示＋ぼかし背景で対応） */
  /* スマホは「場所 → 名前 → 3操作」を先に。紹介の一文・ジャンル・共有はその下 */
  .mbs-hero__panel { display: flex; flex-direction: column; padding: 12px 16px 0; }
  .mbs-hero__loc { order: 1; align-self: flex-start; min-height: 32px; margin: 0; font-size: 12px; }
  .mbs-hero__title { order: 2; font-size: clamp(24px, 6.6vw, 28px); }
  .mbs-hero__kana { order: 3; margin-top: 2px; font-size: 12px; }
  .mbs-actions { order: 4; margin-top: 12px; }
  .mbs-hero__catch { order: 5; margin-top: 12px; padding: 10px 14px; font-size: 13.5px; }
  .mbs-genres { order: 6; margin-top: 10px; }
  .mbs-hero__foot { order: 7; margin-top: 4px; }
  .mbs-hero__en { display: none; }
  .mbs-hero__badge { left: 12px; bottom: 12px; min-height: 36px; font-size: 12px; }
  .mbs-act { min-height: 68px; font-size: 13px; padding: 6px 4px; }
  .mbs-act__sub { font-size: 10.5px; }
}

/* ---------- 投稿者本人・管理者の操作 ---------- */
.mbs-admin { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 28px; padding: 10px 16px; border: 1px dashed var(--mbs-line2); border-radius: 10px; background: #fafbfc; font-size: 13px; color: var(--mbs-sub); }
.mbs-admin__label { font-weight: 700; color: var(--mbs-text); }
.mbs-admin a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 700; }

/* ---------- 本文グリッド ---------- */
.mbs-body { background: var(--mbs-bg); padding: 32px 0 44px; }
/*
 * PC：1段目「この場所について｜地図」、2段目「みんなの写真」を全幅、3段目「行った人の声｜まちノート」
 * DOMの順番は仕様書どおり（about → photos → voices → info → note）で、スマホはこの順に縦に並ぶ
 */
.mbs-body__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.mbs-body__grid > .mbs-about { grid-column: 1; grid-row: 1; align-self: stretch; }
.mbs-body__grid > .mbs-location { grid-column: 2; grid-row: 1; }
.mbs-body__grid > .mbs-photos { grid-column: 1 / -1; grid-row: 2; }
.mbs-body__grid > .mbs-voices { grid-column: 1; grid-row: 3; }
.mbs-body__grid > .mbs-note { grid-column: 2; grid-row: 3; position: sticky; top: 16px; }
.mbs-sec { background: #fff; border-radius: var(--mbs-radius); padding: 24px 26px; min-width: 0; }
.mbs-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mbs-sec__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--mbs-muted); }
/* 「登録情報」「ユーザー投稿」の区別：枠のラベルではなく見出しの小さな添え字に */
.mbs-sec__src { letter-spacing: .04em; font-weight: 700; padding: 0 0 0 8px; border-left: 1px solid var(--mbs-line2); color: var(--mbs-kinari-d); }
.mbs-about .mbs-sec__src { color: var(--mbs-blue); }
.mbs-sec__title { margin: 0; font-size: 22px; line-height: 1.45; font-weight: 700; letter-spacing: .02em; }
.mbs-sec__count { font-size: 14px; font-weight: 500; color: var(--mbs-sub); margin-left: 6px; }
.mbs-sec__link { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 700; color: var(--mbs-blue); background: none; border: 0; padding: 0 4px; cursor: pointer; text-decoration: none; }
.mbs-sec__link:hover { text-decoration: underline; }
@media (max-width: 1023px) {
  .mbs-body__grid { grid-template-columns: 1fr; }
  .mbs-body__grid > .mbs-sec { grid-column: 1; grid-row: auto; position: static; }
}
@media (max-width: 767px) {
  .mbs-body { padding: 16px 0 28px; }
  .mbs-body__grid { gap: 12px; padding: 0 12px; }
  .mbs-sec { padding: 22px 16px; border-radius: 12px; }
  .mbs-sec__title { font-size: 19px; }
}


/* ---------- この場所について ---------- */
.mbs-about { display: flex; flex-direction: column; }
.mbs-about__desc { margin: 0; font-size: 15px; line-height: 1.95; overflow-wrap: anywhere; }
/* 登録情報：説明文の下に区切り線 → 項目名｜値の2列 */
.mbs-facts { margin: 20px 0 0; padding: 0; border-top: 1px solid var(--mbs-line); font-size: 14px; line-height: 1.7; }
.mbs-sec__head + .mbs-facts { margin-top: 0; }
.mbs-facts__row { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 16px; padding: 11px 0; }
.mbs-facts__row + .mbs-facts__row { border-top: 1px solid var(--mbs-line); }
.mbs-facts dt { color: var(--mbs-sub); font-size: 13px; font-weight: 500; line-height: 1.85; }
.mbs-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mbs-facts a { font-weight: 500; text-underline-offset: 3px; }
.mbs-facts__sep { margin: 0 6px; color: var(--mbs-sub); }
.mbs-facts .mbs-ext::after { content: none; }
.mbs-ext__icon { width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; }
/* スマホ：項目名の列を詰め、値の行間を広げて読みやすく */
@media (max-width: 599px) {
  .mbs-facts__row { grid-template-columns: 5.6em minmax(0, 1fr); gap: 12px; padding: 12px 0; }
  .mbs-facts dt { font-size: 12.5px; }
  .mbs-facts dd { font-size: 14px; line-height: 1.75; }
}
/* PCは紹介文を全文表示（場所に余裕があるため）。スマホ・タブレットは現行どおり1文目＋続きを読む */
@media (min-width: 1024px) {
  .mbs-about [data-short], .mbs-about .mbs-more { display: none !important; }
  .mbs-about [data-full] { display: inline !important; }
}
.mbs-more { display: inline; margin-left: 4px; padding: 0; border: 0; background: none; color: var(--mbs-blue); font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; position: relative; }
.mbs-more::after { content: ''; position: absolute; inset: -12px -8px; }
.mbs-ext::after { content: '↗'; margin-left: 3px; font-size: .9em; }

/* ---------- みんなの写真 ---------- */
.mbs-gal { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mbs-gal__item { position: relative; min-width: 0; }
.mbs-gal__btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--mbs-pale); cursor: zoom-in; aspect-ratio: 4 / 3; }
.mbs-gal__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.mbs-gal__btn img.is-tall { object-position: 50% 38%; } /* 縦長写真は上寄りで切り抜く（建物の上部・料理の器が欠けにくい） */
.mbs-gal__btn:hover img { transform: scale(1.03); }
.mbs-gal__more { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px; background: rgba(16, 30, 50, .55); color: #fff; font-size: 18px; font-weight: 700; pointer-events: none; }
.mbs-gal__add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; aspect-ratio: 4 / 3; border: 1.5px dashed var(--mbs-line2); border-radius: 10px; background: var(--mbs-pale2); color: var(--mbs-blue); font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; padding: 8px; text-align: center; }
.mbs-gal__add:hover { background: var(--mbs-pale); border-color: var(--mbs-blue); }
.mbs-gal__add svg { width: 26px; height: 26px; }
/* 1〜3枚：一覧（スライダーなし） */
.mbs-gal--few { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 4枚以上：PCは大1＋小4のモザイク、6枚目以降は拡大表示で見る */
/* 枠の比率を固定（4列×2段の4:3タイル＝全体 8:3）。写真の縦横比に関係なく同じ高さになる */
.mbs-gal--many { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 8 / 3; }
.mbs-gal--many .mbs-gal__item { min-height: 0; }
.mbs-gal--many .mbs-gal__btn { aspect-ratio: auto; }
.mbs-gal--many .mbs-gal__item:first-child { grid-column: span 2; grid-row: span 2; }
.mbs-gal--many .mbs-gal__item:nth-child(n+6) { display: none; }
.mbs-gal__pager { display: none; }
/* 枠で囲まず、1行の案内にする */
.mbs-photos__cta { display: flex; align-items: center; justify-content: flex-end; gap: 8px 14px; flex-wrap: wrap; margin-top: 14px; }
.mbs-photos__cta p { margin: 0; font-size: 13px; color: var(--mbs-sub); }

@media (max-width: 767px) {
  .mbs-gal--few { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* スマホ：横スワイプ（scroll-snap）。DOMはPCと共通で二重出力しない */
  .mbs-gal--many { aspect-ratio: auto; }
  .mbs-gal--many .mbs-gal__btn { aspect-ratio: 4 / 3; }
  .mbs-gal--many { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .mbs-gal--many::-webkit-scrollbar { display: none; }
  .mbs-gal--many .mbs-gal__item, .mbs-gal--many .mbs-gal__item:nth-child(n+6) { display: block; flex: 0 0 78%; scroll-snap-align: center; }
  .mbs-gal--many .mbs-gal__item:first-child .mbs-gal__btn { aspect-ratio: 4 / 3; }
  .mbs-gal--many .mbs-gal__more { display: none; }
  .mbs-gal__pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--mbs-sub); font-variant-numeric: tabular-nums; }
  .mbs-photos__cta { justify-content: space-between; }
}

/* 写真ゼロ */
.mbs-empty { padding: 22px 20px; border-radius: 12px; background: var(--mbs-pale2); text-align: center; }
.mbs-empty__lead { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.mbs-empty__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* 写真投稿フォーム（既存 #sub-image-form と同じ項目） */
.mbs-upload { margin-top: 18px; padding: 20px; border: 1px solid var(--mbs-line); border-radius: 12px; background: #fff; }
.mbs-upload__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.mbs-upload__note { margin: 0 0 14px; font-size: 12px; color: var(--mbs-sub); }
.mbs-upload__drop { position: relative; display: grid; place-items: center; min-height: 180px; border: 1.5px dashed var(--mbs-line2); border-radius: 10px; background: var(--mbs-pale2); overflow: hidden; cursor: pointer; }
.mbs-upload__drop:focus-within { outline: 3px solid var(--mbs-blue); outline-offset: 2px; }
.mbs-upload__drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mbs-upload__ph { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--mbs-blue); font-size: 14px; font-weight: 700; pointer-events: none; text-align: center; padding: 12px; }
.mbs-upload__ph small { color: var(--mbs-sub); font-weight: 400; font-size: 12px; }
.mbs-upload__ph svg { width: 32px; height: 32px; }
.mbs-upload__preview { width: 100%; max-height: 320px; object-fit: contain; background: #fff; }
.mbs-upload__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--mbs-sub); overflow-wrap: anywhere; }
.mbs-check { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; font-size: 14px; cursor: pointer; }
.mbs-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--mbs-blue); }
.mbs-upload__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mbs-field-error { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--mbs-danger-bg); color: var(--mbs-danger); font-size: 13px; }

/* 権限・ログイン案内 */
.mbs-notice { margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: var(--mbs-kinari); color: #5b4630; font-size: 14px; }
.mbs-notice p { margin: 0; }
.mbs-notice__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* 送信結果 */
.mbs-result { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.mbs-result p { margin: 0; }
.mbs-result--ok { background: var(--mbs-ok-bg); color: var(--mbs-ok); }
.mbs-result--ng { background: var(--mbs-danger-bg); color: var(--mbs-danger); }
.mbs-result__close { flex: none; min-height: 32px; padding: 0 10px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font-size: 12px; cursor: pointer; }

/* ---------- ボタン ---------- */
.mbs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 20px; border: 1px solid var(--mbs-blue); border-radius: 8px; background: var(--mbs-blue); color: #fff !important; font-size: 15px; font-weight: 700; text-decoration: none !important; cursor: pointer; line-height: 1.3; text-align: center; }
.mbs-btn:hover { background: var(--mbs-blue-d); border-color: var(--mbs-blue-d); }
.mbs-btn--line { background: #fff; color: var(--mbs-blue) !important; }
.mbs-btn--line:hover { background: var(--mbs-pale2); color: var(--mbs-blue-d) !important; }
.mbs-btn--sm { min-height: 40px; padding: 0 14px; font-size: 13px; }
.mbs-btn--block { display: flex; width: 100%; }
.mbs-btn:disabled { background: var(--mbs-line); border-color: var(--mbs-line); color: var(--mbs-sub) !important; cursor: default; }

/* ---------- 行った人の声 ---------- */
.mbs-voices__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
/* 声のカード：名前と日付を1行に、いいねは右下へ。カードの高さを詰める */
.mbs-voice { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px; border-radius: 12px; background: var(--mbs-pale2); min-width: 0; }
.mbs-voice__head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.mbs-ava { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #7fa0b5; color: #fff; font-size: 13px; font-weight: 700; }
.mbs-voice__name { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.mbs-voice__date { margin: 0 0 0 auto; font-size: 11px; color: var(--mbs-muted); }
.mbs-voice__body { margin: 0; font-size: 14px; line-height: 1.85; overflow-wrap: anywhere; flex: 1; }
.mbs-voice__like { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border: 1px solid var(--mbs-line); border-radius: 999px; background: #fff; color: var(--mbs-sub); font-size: 12px; cursor: pointer; }
.mbs-voice__like svg { width: 14px; height: 14px; }
.mbs-voice__like[aria-pressed="true"] { color: var(--mbs-hanko); border-color: #eab9a8; }
.mbs-voice__like[aria-pressed="true"] .mbs-heart { fill: currentColor; }
.mbs-voice--pending { background: #fff; border: 1px dashed var(--mbs-line2); }
.mbs-badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 4px; background: var(--mbs-kinari); color: var(--mbs-kinari-d); font-size: 11px; font-weight: 700; margin-left: 6px; }
.mbs-voices__more { margin-top: 12px; text-align: center; }
.mbs-voices__empty { margin: 0 0 4px; padding: 16px; border-radius: 12px; background: var(--mbs-pale2); font-size: 14px; color: var(--mbs-sub); }
.mbs-cform { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--mbs-line); }
.mbs-cform__row { margin-bottom: 0; }
.mbs-cform__hint { font-size: 12px; color: var(--mbs-sub); }
/* 未ログイン：1行の案内＋2つのボタン（大きな箱にしない） */
.mbs-login-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mbs-line); }
.mbs-login-row p { margin: 0 auto 0 0; font-size: 14px; }
.mbs-cform__label { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.mbs-cform textarea { display: block; width: 100%; min-height: 120px; padding: 12px 14px; border: 1px solid var(--mbs-line2); border-radius: 10px; background: #fff; color: var(--mbs-text); font-size: 16px; line-height: 1.7; resize: vertical; }
.mbs-cform textarea:focus { outline: 3px solid var(--mbs-blue); outline-offset: 1px; border-color: var(--mbs-blue); }
.mbs-cform__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.mbs-cform__hint { margin: 0; font-size: 12px; color: var(--mbs-sub); }
@media (max-width: 767px) {
  .mbs-voices__list { grid-template-columns: 1fr; }
  .mbs-cform__row .mbs-btn { width: 100%; }
}

/* ---------- 地図・基本情報 ---------- */
.mbs-map { display: block; position: relative; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--mbs-pale); }
.mbs-map img { width: 100%; height: 100%; object-fit: cover; }
.mbs-map__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--mbs-blue); font-size: 13px; font-weight: 700; box-shadow: 0 4px 14px rgba(28, 57, 93, .18); white-space: nowrap; }
.mbs-map__pin svg { width: 16px; height: 16px; }
.mbs-location__note { margin: 8px 0 0; font-size: 12px; color: var(--mbs-sub); line-height: 1.7; }

/* ---------- まちノート ---------- */
.mbs-note { border-top: 4px solid var(--mbs-blue); }
.mbs-note__def { margin: -6px 0 14px; font-size: 13px; color: var(--mbs-sub); }
.mbs-note__wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; }
/* PC（右列360px）では縦積み：小さなノート → 文 → ボタン */
@media (min-width: 1024px) {
  .mbs-note__wrap { grid-template-columns: 1fr; gap: 14px; }
  .mbs-note__mini { display: flex; align-items: center; gap: 14px; }
  .mbs-note__mini .mbs-mini { width: 120px; flex: none; padding: 5px; gap: 3px; }
  .mbs-note__mini .mbs-mini__cap { margin: 0; text-align: left; }
  .mbs-note__actions { flex-direction: column; }
  .mbs-note__actions .mbs-btn { width: 100%; }
}
.mbs-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid var(--mbs-line); box-shadow: 0 6px 18px rgba(28, 57, 93, .06); }
.mbs-mini span { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--mbs-pale2); border: 1px dashed var(--mbs-line2); }
.mbs-mini span.is-on { border: 0; }
.mbs-mini img { width: 100%; height: 100%; object-fit: cover; }
.mbs-mini span.is-here { outline: 3px solid var(--mbs-hanko); outline-offset: -3px; }
.mbs-mini span.is-next { display: grid; place-items: center; color: var(--mbs-blue); font-size: 20px; font-weight: 700; border-color: var(--mbs-blue); background: var(--mbs-pale); }
.mbs-mini__cap { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--mbs-sub); font-variant-numeric: tabular-nums; }
.mbs-note__lead { margin: 0 0 10px; font-size: 14px; line-height: 1.8; }
.mbs-note__people { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 12px; font-size: 12px; color: var(--mbs-sub); }
.mbs-ava-row { display: inline-flex; }
.mbs-ava-row .mbs-ava { width: 28px; height: 28px; font-size: 12px; border: 2px solid #fff; margin-left: -6px; }
.mbs-ava-row .mbs-ava:first-child { margin-left: 0; }
.mbs-note__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mbs-note__hint { margin: 10px 0 0; font-size: 12px; color: var(--mbs-sub); }
@media (max-width: 767px) {
  .mbs-note__wrap { grid-template-columns: 1fr; gap: 16px; }
  .mbs-mini { width: 180px; margin: 0 auto; }
  .mbs-note__actions .mbs-btn { width: 100%; }
}

/* ---------- この地域をもっと知る ---------- */
.mbs-area { padding: 48px 0 56px; background: #fff; }
.mbs-area__lead { margin: 4px 0 22px; font-size: 13px; color: var(--mbs-sub); }
.mbs-city { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; border-radius: 16px; overflow: hidden; background: var(--mbs-kinari); text-decoration: none; color: var(--mbs-text); }
.mbs-city__thumbs { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3px; height: 280px; }
.mbs-city__thumbs img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.mbs-city__thumbs img:first-child { grid-row: span 2; }
.mbs-city__body { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 28px; }
.mbs-city__eyebrow, .mbs-city__name, .mbs-city__meta { display: block; }
.mbs-city__eyebrow { margin: 0; font-size: 12px; font-weight: 700; color: var(--mbs-kinari-d); letter-spacing: .08em; }
.mbs-city__name { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.35; }
.mbs-city__meta { margin: 0; font-size: 13px; color: #6f6253; }
.mbs-city__go { margin-top: 10px; align-self: flex-start; }
.mbs-city:hover .mbs-city__go { background: var(--mbs-blue-d); }
.mbs-sub-title { margin: 32px 0 12px; font-size: 16px; font-weight: 700; }
.mbs-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.mbs-card { display: block; color: var(--mbs-text); text-decoration: none; }
.mbs-card__img, .mbs-card__name, .mbs-card__genre { display: block; }
.mbs-card__img { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--mbs-pale); }
.mbs-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.mbs-card:hover .mbs-card__img img { transform: scale(1.03); }
.mbs-card__name { margin: 8px 0 0; font-size: 14px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.mbs-card__genre { margin: 2px 0 0; font-size: 12px; color: var(--mbs-sub); }
.mbs-towns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mbs-towns a { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 16px 6px 6px; border: 1px solid var(--mbs-line); border-radius: 999px; color: var(--mbs-text); text-decoration: none; font-size: 14px; font-weight: 700; background: #fff; }
.mbs-towns a:hover { border-color: var(--mbs-blue); color: var(--mbs-blue); }
.mbs-towns img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.mbs-towns small { font-weight: 400; color: var(--mbs-sub); font-size: 12px; }
.mbs-area__find { margin-top: 28px; padding: 18px 20px; border-radius: 12px; background: var(--mbs-pale2); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mbs-area__find p { margin: 0; font-size: 14px; }
@media (min-width: 768px) and (max-width: 1023px) {
  /* タブレット：地図が本文より目立たないよう横長に。関連スポットは4列のまま */
  .mbs-map { aspect-ratio: 21 / 8; }
  .mbs-hero__media { max-height: 520px; }
}
@media (max-width: 767px) {
  .mbs-area { padding: 32px 0 40px; }
  .mbs-city { grid-template-columns: 1fr; }
  .mbs-city__thumbs { height: auto; aspect-ratio: 16 / 10; }
  .mbs-city__body { padding: 20px; }
  .mbs-city__name { font-size: 22px; }
  .mbs-city__go { align-self: stretch; }
  .mbs-cards { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .mbs-cards::-webkit-scrollbar { display: none; }
  .mbs-cards li { flex: 0 0 62%; scroll-snap-align: start; }
  .mbs-area__find { flex-direction: column; align-items: stretch; }
}

/* ---------- スマホ固定バー ---------- */
.mbs-sticky { display: none; }
@media (max-width: 767px) {
  .mbs-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--mbs-line); box-shadow: 0 -4px 16px rgba(28, 57, 93, .08); transform: translateY(110%); transition: transform .2s ease; }
  .mbs-sticky.mbs-sticky--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mbs-sticky.is-shown { transform: none; }
  .mbs-sticky .mbs-act { min-height: 48px; flex-direction: row; gap: 6px; font-size: 13px; padding: 0 6px; border-radius: 10px; }
  .mbs-sticky .mbs-act__icon { width: 20px; height: 20px; margin: 0; }
  .mbs-sticky .mbs-act__sub { display: none; }
  body.mbs-page.has-sticky .mbs-site-footer { padding-bottom: calc(var(--mbs-sticky-h) + env(safe-area-inset-bottom)); }
}

/* ---------- 写真の拡大表示 ---------- */
.mbs-lb { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0a111c; color: #fff; }
.mbs-lb::backdrop { background: rgba(8, 14, 24, .9); }
.mbs-lb[open] { display: grid; grid-template-rows: auto 1fr; }
.mbs-lb__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px 20px; }
.mbs-lb__count { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.mbs-lb__close, .mbs-lb__nav { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.mbs-lb__close:hover, .mbs-lb__nav:hover { background: rgba(255, 255, 255, .24); }
.mbs-lb__close svg, .mbs-lb__nav svg { width: 24px; height: 24px; }
.mbs-lb__stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 0 72px 24px; min-height: 0; touch-action: pan-y; }
.mbs-lb__stage img { max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); object-fit: contain; border-radius: 6px; }
.mbs-lb__cap { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #c9d4e0; text-align: center; }
.mock-credit { font-size: 11px; }
.mock-credit a { color: #9fb3c8; }
.mbs-lb__nav { position: fixed; top: 50%; transform: translateY(-50%); }
.mbs-lb__nav--prev { left: 12px; }
.mbs-lb__nav--next { right: 12px; }
@media (max-width: 767px) {
  .mbs-lb__stage { padding: 0 8px 80px; }
  .mbs-lb__nav { top: auto; bottom: 16px; transform: none; }
  .mbs-lb__nav--prev { left: calc(50% - 60px); }
  .mbs-lb__nav--next { right: calc(50% - 60px); }
}

/* ---------- 通知 ---------- */
.mbs-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 10px; background: #1c2b3f; color: #fff; font-size: 14px; line-height: 1.6; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); overflow-wrap: anywhere; }
.mbs-toast small { display: block; color: #b9c7d8; font-size: 12px; }
body.has-sticky .mbs-toast { bottom: calc(var(--mbs-sticky-h) + 16px + env(safe-area-inset-bottom)); }

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .mbs-gal__btn:hover img, .mbs-card:hover .mbs-card__img img { transform: none; }
}

/* ================================================================
   モック専用（本番に持ち込まない）
   ================================================================ */
.mock-banner { padding: 6px 16px; background: #fff7d6; color: #6b5310; font-size: 12px; text-align: center; border-bottom: 1px solid #f0e2a8; }
.mock-panel { position: fixed; left: 12px; bottom: 12px; z-index: 70; font-size: 13px; }
.mock-panel__toggle { min-height: 40px; padding: 0 14px; border: 1px solid #6b5310; border-radius: 999px; background: #fff7d6; color: #6b5310; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.mock-panel__form { position: absolute; left: 0; bottom: 48px; width: min(320px, calc(100vw - 24px)); max-height: 75vh; overflow: auto; padding: 14px; border: 1px solid #e6d79a; border-radius: 12px; background: #fffdf3; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); display: grid; gap: 10px; }
.mock-panel__title { margin: 0; font-weight: 700; color: #6b5310; }
.mock-panel__form label { display: grid; gap: 4px; color: #4d3c0c; font-weight: 500; }
.mock-panel__form select { min-height: 40px; padding: 0 8px; border: 1px solid #d9c886; border-radius: 6px; background: #fff; font-size: 14px; }
.mock-panel__apply { min-height: 44px; border: 0; border-radius: 8px; background: #6b5310; color: #fff; font-weight: 700; cursor: pointer; }
@media (max-width: 767px) { body.has-sticky .mock-panel { bottom: calc(var(--mbs-sticky-h) + 12px); } }
body.mock-clean .mock-banner, body.mock-clean .mock-panel { display: none !important; }
/* 実写サンプルのクレジット（スクリーンショットにも残す） */
.mock-credits { background: #f3f3f0; border-top: 1px solid #e3e3dc; padding: 18px 0 22px; font-size: 11px; line-height: 1.7; color: #5f5f58; }
.mock-credits__title { margin: 0 0 6px; font-weight: 700; font-size: 12px; }
.mock-credits ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 18px; }
.mock-credits li { overflow-wrap: anywhere; }
.mock-credits a { color: #4b5a6a; }

/* WordPress preview adapter: keep final-mock layout, isolate theme interference */
.mbs { width:100%; max-width:none; padding:0; background:#fff; font-family:var(--mbs-font); }
.mbs-preview-banner { padding:10px 16px; text-align:center; background:#fff1d7; font-size:12px; color:#856033; }
.mbs [hidden] {display:none!important;}
.mbs .mbs-body__grid {display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:20px;}
.mbs .mbs-body__grid>.mbs-about{grid-column:1;grid-row:1;align-self:stretch;}
.mbs .mbs-body__grid>.mbs-location{display:block;grid-column:2;grid-row:1;}
.mbs .mbs-body__grid>.mbs-photos{grid-column:1/-1;grid-row:2;}
.mbs .mbs-body__grid>.mbs-voices{grid-column:1;grid-row:3;}
.mbs .mbs-body__grid>.mbs-note{grid-column:2;grid-row:3;position:sticky;top:16px;}
.mbs .mbs-city__no-photo { display:grid;place-items:center;grid-column:1/-1;grid-row:1/-1;min-height:250px;padding:24px;text-align:center;color:var(--mbs-sub);background:var(--mbs-pale2);}
.mbs .mbs-hero__open{border:0;padding:0;cursor:zoom-in;}
.mbs .mbs-hero__open img{width:100%;height:100%;object-fit:cover;}
.mbs .mbs-hero__media{margin:0;}
.mbs .mbs-act{appearance:none;}
.mbs .mbs-act--note{color:#fff;}
.mbs .mbs-like-shell{position:relative;min-width:0;}
.mbs .mbs-like-shell>.mbs-act{width:100%;height:100%;min-height:84px;}
.mbs .mbs-like-native{position:absolute;width:1px;height:1px;opacity:.001;overflow:hidden;pointer-events:none;}
.mbs .mbs-sec .comment-respond{margin-top:20px;}
.mbs .mbs-sec .comment-respond textarea{display:block;width:100%;min-height:135px;border:1px solid var(--mbs-line2);border-radius:8px;padding:12px;}
.mbs .mbs-sec .comment-respond input[type=submit]{background:var(--mbs-blue);color:#fff;padding:12px 22px;border:0;border-radius:8px;cursor:pointer;}
.mbs .mbs-sec .comment-respond .comment-reply-title:empty{display:none;}
.mbs-lightbox{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(5,15,29,.94);padding:50px 70px;}
.mbs-lightbox[hidden]{display:none!important;}
.mbs-lightbox img{max-width:100%;max-height:85vh;object-fit:contain;}
.mbs-lightbox button{position:absolute;color:white;border:0;background:transparent;font-size:32px;cursor:pointer;}
.mbs-lightbox__close{top:12px;right:22px}.mbs-lightbox__prev{left:20px}.mbs-lightbox__next{right:20px}
@media(max-width:1023px){
 .mbs .mbs-body__grid{grid-template-columns:1fr;}
 .mbs .mbs-body__grid>.mbs-sec{grid-column:1;grid-row:auto;position:static;}
}
@media(max-width:767px){.mbs-lightbox{padding:48px 36px}.mbs-lightbox__prev{left:2px}.mbs-lightbox__next{right:2px}}



/* ================================================================
 * v2.7: モックアップ準拠の「横幅いっぱいの背景・中央に内容」
 * v2.6 の競合する列指定を削除して統一。
 * ================================================================ */
.mbs[data-design-revision="mock-parity-v28"] {
  width:100%; max-width:none; overflow:visible;
}
/* WordPress テーマのコンテンツ幅制限からビジュアル背景だけを解放 */
.mbs[data-design-revision="mock-parity-v28"] .mbs-v27-hero-band,
.mbs[data-design-revision="mock-parity-v28"] .mbs-body,
.mbs[data-design-revision="mock-parity-v28"] .mbs-area {
  position:relative; width:100vw; max-width:none;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  box-sizing:border-box;
}
.mbs[data-design-revision="mock-parity-v28"] .mbs-v27-hero-band {background:#fff;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-body {background:var(--mbs-bg); padding:44px 0 54px;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-area {background:#fff; padding:55px 0 60px;}
/* 中央の文章・カードはモックアップと同じ最大1200px */
.mbs[data-design-revision="mock-parity-v28"] .mbs-wrap {width:100%;max-width:1200px;margin-left:auto;margin-right:auto;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-v26-stack {
  display:flex;flex-direction:column;gap:20px;align-items:stretch;
}
.mbs[data-design-revision="mock-parity-v28"] .mbs-v26-row {
  display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start;width:100%;min-width:0;
}
.mbs[data-design-revision="mock-parity-v28"] .mbs-v26-row > .mbs-sec {
  min-width:0;max-width:none;width:auto;grid-area:auto;float:none;visibility:visible;opacity:1;
}
.mbs[data-design-revision="mock-parity-v28"] .mbs-v26-row--overview > .mbs-about {
  grid-column:1;grid-row:1;display:flex;flex-direction:column;align-self:stretch;min-height:0;
}
.mbs[data-design-revision="mock-parity-v28"] .mbs-v26-row--overview > .mbs-location {grid-column:2;grid-row:1;display:block;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-v26-row--gallery {display:block;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-v26-row--gallery > .mbs-photos {width:100%;max-width:none;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-v26-row--participate > .mbs-voices {grid-column:1;grid-row:1;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-v26-row--participate > .mbs-note {grid-column:2;grid-row:1;position:static;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-about__desc {display:block;visibility:visible;opacity:1;margin:0 0 16px;color:var(--mbs-text);}
.mbs[data-design-revision="mock-parity-v28"] .mbs-about .mbs-facts {display:block;}
/* Google マップをその場で表示。座標がないスポットでは検索結果を埋め込む */
.mbs[data-design-revision="mock-parity-v28"] .mbs-map--embed {display:block;width:100%;aspect-ratio: 16/10;border-radius:12px;overflow:hidden;background:var(--mbs-pale);}
.mbs[data-design-revision="mock-parity-v28"] .mbs-map--embed iframe {display:block;border:0;width:100%;height:100%;min-height:220px;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-location__external {display:inline-flex;align-items:center;min-height:36px;margin-top:8px;font-size:13px;font-weight:700;}
/* WordPress comment_form が挿入するフォームの構造を原本に合わせる */
.mbs[data-design-revision="mock-parity-v28"] .mbs-comment-form {margin-top:18px;border-top:1px solid var(--mbs-line);padding-top:18px;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-comment-form .comment-respond {margin-top:0;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-comment-form .comment-reply-title:empty,
.mbs[data-design-revision="mock-parity-v28"] .mbs-comment-form .comment-notes {display:none;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-comment-form .comment-form-comment {margin:0;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-comment-form textarea {width:100%;min-height:138px;padding:14px 16px;border:1px solid var(--mbs-line2);border-radius:10px;font-size:16px;resize:vertical;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-comment-form .form-submit {display:flex;justify-content:flex-start;margin:12px 0 0;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-comment-form input[type="submit"] {width:auto;min-width:190px;min-height:48px;padding:0 22px;border:1px solid #2c5bb7;border-radius:12px;background:#2c5bb7;color:#fff;font-weight:700;font-size:15px;box-shadow:none;cursor:pointer;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-comment-form input[type="submit"]:hover {background:#234995;}
/* 「ほかのまち」写真付きの丸形チップ */
.mbs[data-design-revision="mock-parity-v28"] .mbs-towns {gap:10px;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-towns a {padding:7px 16px 7px 7px;gap:11px;min-height:60px;}
.mbs[data-design-revision="mock-parity-v28"] .mbs-towns img,
.mbs[data-design-revision="mock-parity-v28"] .mbs-town__fallback {display:inline-flex;flex:none;width:45px;height:45px;border-radius:50%;object-fit:cover;align-items:center;justify-content:center;background:#e9f0f5;color:#4c7698;}
@media (max-width:1023px) {
  .mbs[data-design-revision="mock-parity-v28"] .mbs-v26-row {grid-template-columns:minmax(0,1fr);}
  .mbs[data-design-revision="mock-parity-v28"] .mbs-v26-row > .mbs-sec,
  .mbs[data-design-revision="mock-parity-v28"] .mbs-v26-row--overview > .mbs-about,
  .mbs[data-design-revision="mock-parity-v28"] .mbs-v26-row--overview > .mbs-location,
  .mbs[data-design-revision="mock-parity-v28"] .mbs-v26-row--participate > .mbs-voices,
  .mbs[data-design-revision="mock-parity-v28"] .mbs-v26-row--participate > .mbs-note {grid-column:1;grid-row:auto;}
}
@media (max-width:767px) {
  .mbs[data-design-revision="mock-parity-v28"] .mbs-v26-stack {gap:12px;padding-left:12px;padding-right:12px;}
  .mbs[data-design-revision="mock-parity-v28"] .mbs-v26-row {gap:12px;}
  .mbs[data-design-revision="mock-parity-v28"] .mbs-body {padding:18px 0 30px;}
  .mbs[data-design-revision="mock-parity-v28"] .mbs-area {padding:32px 0 40px;}
  .mbs[data-design-revision="mock-parity-v28"] .mbs-comment-form input[type="submit"] {min-height:48px;}
  .mbs[data-design-revision="mock-parity-v28"] .mbs-map--embed iframe {min-height:210px;}
}


/* v2.8 — Voice controls / footer parity with approved mockup. */
/* Remove padding left by the legacy WordPress single-post wrapper (preview only). */
body:has(.mbs[data-design-revision="mock-parity-v28"]) .site-main--single-spot {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* Restore actual WordPress comment form's mockup submission row. */
.mbs[data-design-revision="mock-parity-v28"] .mbs-comment-form .mbs-cform__row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px 22px;
  margin: 12px 0 0; padding: 0;
}
.mbs[data-design-revision="mock-parity-v28"] .mbs-comment-form .mbs-cform__hint {
  color: var(--mbs-sub); font-size: 13px; margin: 0 auto 0 0;
}
.mbs[data-design-revision="mock-parity-v28"] .mbs-comment-form input[type="submit"] {
  min-width: 136px; min-height: 48px;
  background: var(--mbs-blue); border: 1px solid var(--mbs-blue);
  border-radius: 10px; padding: 0 23px;
  color: #fff; font-size: 16px; font-weight: 700;
  cursor: pointer; margin: 0;
}
.mbs[data-design-revision="mock-parity-v28"] .mbs-comment-form input[type="submit"]:hover {
  background: var(--mbs-blue-d);
}
/* Show-more for voices — retains the original mockup outline button. */
.mbs[data-design-revision="mock-parity-v28"] .mbs-voices__more {
  display: flex; justify-content: center; margin-top: 18px;
}
.mbs[data-design-revision="mock-parity-v28"] .mbs-voices__more[hidden] { display: none !important; }
.mbs[data-design-revision="mock-parity-v28"] .mbs-voices__more button {
  min-height: 48px; padding: 0 24px; border: 1.5px solid var(--mbs-blue);
  border-radius: 10px; background: #fff; color: var(--mbs-blue) !important;
  font-size: 15px; font-weight: 700; cursor: pointer;
}
.mbs[data-design-revision="mock-parity-v28"] .mbs-voices__more button:hover { background: var(--mbs-pale2); }
@media (max-width: 767px) {
  .mbs[data-design-revision="mock-parity-v28"] .mbs-comment-form .mbs-cform__row { align-items: stretch; }
  .mbs[data-design-revision="mock-parity-v28"] .mbs-comment-form .mbs-cform__row input[type="submit"] { width: 100%; }
}

/* v2.9 — Remove the legacy single-post gap before the theme footer.
 * Scope to the spot v2 preview only; preserve the area section's own spacing.
 * The shared theme sets .site-main { padding:40px 0; margin:auto }, and
 * the page is a flex column, so the legacy wrapper can leave visible space.
 */
body:has(.mbs[data-design-revision="mock-parity-v28"]) #page > .site-main--single-spot,
body:has(.mbs[data-design-revision="mock-parity-v28"]) main.site-main--single-spot {
  padding-block: 0 !important;
  margin-block: 0 !important;
}
body:has(.mbs[data-design-revision="mock-parity-v28"]) #page > .site-footer {
  margin-top: 0 !important;
}
body:has(.mbs[data-design-revision="mock-parity-v28"]) #page {
  row-gap: 0 !important;
}
/* End of the area section should join the real footer directly. */
body:has(.mbs[data-design-revision="mock-parity-v28"]) .mbs-v27-area-band,
body:has(.mbs[data-design-revision="mock-parity-v28"]) .mbs-area {
  margin-bottom: 0 !important;
}

/* v3.0 public display: remove the actual flex child auto margins and bottom padding.
   This stylesheet loads only for the new single spot view, not legacy, area, or home. */
body.single-post #page,
body.single #page { row-gap: 0 !important; }
body.single-post main.site-main--single-spot,
body.single main.site-main--single-spot {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important; /* common.css uses margin:auto on flex children */
  padding: 0 !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  background: #fff;
}
body.single-post main.site-main--single-spot > .mbs,
body.single main.site-main--single-spot > .mbs {
  display: flow-root;
  margin: 0 !important;
  padding: 0 !important;
}
body.single-post main.site-main--single-spot .mbs-area,
body.single main.site-main--single-spot .mbs-area {
  margin-bottom: 0 !important;
}
body.single-post footer.site-footer,
body.single footer.site-footer {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
}