:root {
  --navy: #0d376d;
  --navy-deep: #092b56;
  --ink: #172842;
  --muted: #586779;
  --line: #e1e7ef;
  --surface: #ffffff;
  --canvas: #f5f8fb;
  --green: #3b8c5c;
  --orange: #ee8922;
  --blue: #2171ba;
  --shadow: 0 10px 28px rgba(26, 62, 101, 0.09);
  --radius: 14px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; min-width: 0; background: var(--canvas); color: var(--ink); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3 { overflow-wrap: anywhere; word-break: normal; }
@supports (word-break: auto-phrase) {
  h1, h2, h3 { word-break: auto-phrase; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header { position: sticky; z-index: 20; top: 0; height: 72px; background: rgba(255, 255, 255, 0.95); border-bottom: 1px solid rgba(19, 51, 91, 0.11); backdrop-filter: blur(12px); }
#top { scroll-margin-top: 72px; }
.header-inner { width: min(1340px, calc(100% - 64px)); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 260px; color: var(--navy-deep); }
.brand-mark { display: grid; place-items: center; width: 39px; height: 46px; overflow: hidden; color: var(--navy); }
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.brand-copy { display: inline-flex; align-items: baseline; gap: 2px; letter-spacing: .05em; white-space: nowrap; }
.brand-copy strong { font-size: 17px; font-weight: 800; }
.brand-copy span { font-size: 15px; font-weight: 700; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.4vw, 38px); flex: 1; font-size: 13px; font-weight: 700; white-space: nowrap; }
.main-nav a { position: relative; padding: 26px 0 24px; }
.main-nav a::after { position: absolute; right: 0; bottom: 15px; left: 0; height: 2px; background: var(--navy); content: ""; opacity: 0; transform: scaleX(.4); transition: opacity .2s, transform .2s; }
.main-nav a:hover::after, .main-nav a:focus-visible::after { opacity: 1; transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 17px; }
.global-search { display: flex; align-items: center; width: 242px; height: 34px; padding-left: 13px; border: 1px solid #d8e0ea; border-radius: 10px; background: #fff; color: #7b8796; }
.global-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(33, 113, 186, .12); }
.global-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); font-size: 11px; background: transparent; }
.global-search input::placeholder { color: #8993a1; }
.global-search-submit { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: inherit; }
.global-search-submit:hover, .global-search-submit:focus-visible { background: #edf4fb; color: var(--blue); outline: 0; }
.global-search-submit svg { width: 19px; height: 19px; }
.login-icon { display: none; place-items: center; width: 18px; height: 18px; }
.login-icon svg { width: 18px; height: 18px; }
.text-button, .save-button, .link-button { border: 0; background: transparent; color: var(--navy); font-weight: 700; }
.text-button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 0; font-size: 12px; white-space: nowrap; }
.text-button:hover, .link-button:hover { color: var(--blue); }
.save-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 0; font-size: 11px; white-space: nowrap; }
.save-button svg { width: 18px; height: 18px; }
.save-button b { display: none; min-width: 18px; padding: 2px 5px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 10px; text-align: center; }
.save-button.has-count b { display: inline-block; }
.menu-toggle { display: none; width: 38px; height: 38px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.menu-toggle span { display: block; height: 2px; margin: 4px 0; border-radius: 2px; background: var(--navy); }

.hero { position: relative; z-index: 5; min-height: 365px; overflow: visible; background: linear-gradient(116deg, #f8fbfd 0%, #f5f8fc 43%, #e8f0f6 100%); }
.hero-map { position: absolute; z-index: 0; inset: 0 0 0 38%; overflow: hidden; background: linear-gradient(122deg, rgba(255,255,255,.9) 0%, rgba(232,242,226,.92) 31%, rgba(218,234,242,.8) 100%), repeating-linear-gradient(28deg, transparent 0 28px, rgba(255,255,255,.7) 29px 31px, transparent 32px 71px), repeating-linear-gradient(119deg, transparent 0 49px, rgba(255,255,255,.72) 50px 52px, transparent 53px 94px); opacity: .96; }
.hero-map::before { position: absolute; inset: 0; background: radial-gradient(ellipse at 33% 45%, rgba(255,255,255,.84), transparent 43%), radial-gradient(ellipse at 80% 25%, rgba(255,255,255,.5), transparent 35%); content: ""; }
.hero-map::after { position: absolute; right: 22%; bottom: -24%; width: 360px; height: 420px; border: 22px solid rgba(105, 172, 199, .18); border-radius: 48% 52% 0 0; transform: rotate(26deg); content: ""; }
.map-road { position: absolute; height: 10px; border-radius: 999px; background: rgba(255,255,255,.8); box-shadow: 0 0 0 2px rgba(205, 215, 212, .25); transform-origin: left center; }
.road-a { top: 18%; left: 21%; width: 65%; transform: rotate(19deg); }
.road-b { top: 64%; left: 3%; width: 75%; transform: rotate(-27deg); }
.road-c { top: 48%; left: 17%; width: 71%; transform: rotate(74deg); }
.map-river { position: absolute; top: -18%; right: 31%; width: 130px; height: 145%; border-right: 34px solid rgba(105, 184, 205, .25); border-radius: 52%; transform: rotate(16deg); }
.map-district { position: absolute; z-index: 1; padding: 5px 10px; border-radius: 6px; background: rgba(42, 112, 69, .86); color: #fff; font-size: 10px; font-weight: 700; box-shadow: 0 3px 10px rgba(32,74,51,.12); }
.district-1 { top: 17%; left: 36%; }.district-2 { top: 24%; right: 16%; }.district-3 { top: 45%; left: 30%; }.district-4 { bottom: 28%; left: 41%; }.district-5 { bottom: 18%; left: 25%; }
.map-pin { position: absolute; z-index: 2; display: grid; place-items: center; width: 29px; height: 35px; border-radius: 50% 50% 50% 0; color: #fff; font-size: 16px; line-height: 1; box-shadow: 0 5px 10px rgba(33, 67, 93, .22); transform: rotate(-45deg); }
.map-pin::first-letter { transform: rotate(45deg); }.map-pin.pin-blue { background: var(--blue); }.map-pin.pin-green { background: var(--green); }.map-pin.pin-orange { background: var(--orange); }
.pin-1 { top: 24%; left: 61%; }.pin-2 { top: 44%; left: 70%; }.pin-3 { top: 31%; right: 34%; }.pin-4 { top: 13%; right: 22%; }.pin-5 { bottom: 19%; right: 31%; }.pin-6 { bottom: 28%; left: 20%; }.pin-7 { bottom: 15%; left: 44%; }
.map-landmark { position: absolute; z-index: 1; color: rgba(42, 76, 109, .6); }.landmark-tower { bottom: 21%; left: 11%; width: 27px; height: 88px; border: 2px solid currentColor; border-radius: 50% 50% 0 0; transform: perspective(50px) rotateY(-19deg); }.landmark-tower::after { position: absolute; bottom: 0; left: -14px; width: 55px; height: 16px; border: 2px solid currentColor; border-bottom: 0; content: ""; }.landmark-tower span { position: absolute; top: 26px; left: 3px; width: 16px; height: 2px; background: currentColor; box-shadow: 0 13px currentColor, 0 26px currentColor; }.landmark-station { top: 33%; left: 46%; color: rgba(113, 70, 50, .7); font-size: 54px; transform: rotate(-4deg); }
.hero-inner { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 35px; width: min(1340px, calc(100% - 64px)); min-height: 365px; margin: 0 auto; padding: 31px 0 34px; }
.hero-copy { position: relative; z-index: 4; width: min(750px, 64%); }.eyebrow { margin: 0 0 10px; color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: .12em; }.hero h1 { margin: 0; color: var(--navy-deep); font-size: clamp(31px, 3.3vw, 47px); font-weight: 900; letter-spacing: .08em; line-height: 1.25; }.hero h1:focus { outline: 0; }.hero-lead { margin: 12px 0 21px; color: #344f71; font-size: 15px; font-weight: 700; line-height: 1.8; }
.filter-card { width: min(730px, 100%); padding: 15px 16px 12px; border: 1px solid rgba(218,226,235,.95); border-radius: 13px; background: rgba(255,255,255,.92); box-shadow: 0 9px 27px rgba(36, 70, 102, .1); backdrop-filter: blur(7px); }
.filter-grid { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: end; gap: 10px; }
.filter-field { display: grid; min-width: 0; gap: 5px; }
.filter-field-label { color: #536172; font-size: 10px; font-weight: 800; }
.custom-select { position: relative; min-width: 0; }
.custom-select.is-open { z-index: 60; }
.custom-select-trigger { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 11px; border: 1px solid #d5dde8; border-radius: 8px; outline: 0; background: #fff; color: #253b58; font-size: 12px; text-align: left; }
.custom-select-trigger.is-placeholder { color: #536579; }
.custom-select-trigger:disabled { cursor: wait; opacity: .62; }
.custom-select-trigger:hover:not(:disabled) { border-color: #a8bdd2; background: #fbfdff; }
.custom-select-trigger:focus-visible, .custom-select.is-open .custom-select-trigger { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(33, 113, 186, .13); }
.custom-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-icon { color: #58718b; font-size: 17px; line-height: 1; transition: transform .18s ease; }
.custom-select.is-open .custom-select-icon { transform: rotate(180deg); }
.custom-select-panel { position: absolute; z-index: 70; top: calc(100% + 7px); left: 0; min-width: 100%; max-height: min(728px, max(220px, calc(100dvh - 390px))); overflow: hidden; border: 1px solid #cad9e7; border-radius: 11px; background: #fff; box-shadow: 0 16px 36px rgba(13, 43, 78, .18); }
.custom-select-panel[hidden] { display: none; }
.custom-select-list { display: grid; max-height: 252px; overflow-y: auto; padding: 5px; overscroll-behavior: contain; }
.custom-select-option { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: #29425e; font-size: 12px; text-align: left; }
.custom-select-option:hover, .custom-select-option:focus-visible { outline: 0; background: #edf5fb; color: var(--navy-deep); }
.custom-select-option.is-selected { background: #e6f1fa; color: var(--navy); font-weight: 800; }
.custom-select-check { visibility: hidden; color: var(--blue); font-weight: 900; text-align: center; }
.custom-select-option.is-selected .custom-select-check { visibility: visible; }
.prefecture-picker-panel { left: 50%; width: min(430px, calc(100vw - 32px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 12px; transform: translateX(-50%); }
.prefecture-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.prefecture-picker-head strong { color: var(--navy-deep); font-size: 13px; }
.prefecture-picker-clear { min-height: 32px; padding: 0 10px; border: 1px solid #d4e0eb; border-radius: 999px; background: #f8fbfd; color: var(--navy); font-size: 10px; font-weight: 800; }
.prefecture-picker-clear:hover, .prefecture-picker-clear:focus-visible { border-color: var(--blue); outline: 0; background: #edf5fb; }
.prefecture-picker-clear.is-selected { border-color: var(--navy); background: var(--navy); color: #fff; }
.prefecture-island-grid { --prefecture-cell-width: clamp(18px, calc((100vw - 64px) / 13), 30px); display: grid; grid-template-columns: repeat(13, var(--prefecture-cell-width)); grid-auto-rows: max-content; gap: 1px; width: max-content; max-width: 100%; margin: 0 auto; }
.prefecture-island-cell { display: grid; min-width: 0; }
.prefecture-island-cell-button { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 23px; overflow: hidden; padding: 3px 1px; border: 1px solid #c4d9e9; border-radius: 1px; background: #f6fafc; color: #34516f; font-size: clamp(7px, 1.9vw, 9px); font-weight: 800; line-height: 1; white-space: nowrap; }
.prefecture-island-cell.is-available .prefecture-island-cell-button { border-color: #91bdd9; background: #e8f4fb; color: #164d78; cursor: pointer; }
.prefecture-island-cell.is-available .prefecture-island-cell-button:hover, .prefecture-island-cell.is-available .prefecture-island-cell-button:focus-visible { position: relative; z-index: 1; border-color: var(--blue); outline: 2px solid rgba(33,113,186,.25); outline-offset: -2px; background: #d5ebf8; }
.prefecture-island-cell.is-unavailable .prefecture-island-cell-button { border-color: #e2e8ed; background: #f4f6f7; color: #a2adb7; cursor: not-allowed; }
.prefecture-island-cell.is-active .prefecture-island-cell-button { position: relative; z-index: 2; border-color: var(--navy); outline: 2px solid var(--navy); outline-offset: -2px; background: var(--navy); color: #fff; }
.prefecture-picker-note { margin: 9px 2px 0; color: #267147; font-size: 9px; font-weight: 700; line-height: 1.5; }
.check-label { display: flex; align-items: center; gap: 7px; min-width: 142px; padding: 0 1px 10px; white-space: nowrap; }
.check-label input { width: 16px; height: 16px; accent-color: var(--navy); }
.check-label span { color: #536172; font-size: 11px !important; font-weight: 600 !important; }
.filter-actions { display: grid; grid-template-columns: 1.3fr .7fr; gap: 10px; margin-top: 11px; }.primary-button, .secondary-button { height: 36px; border-radius: 8px; font-size: 12px; font-weight: 800; }.primary-button { border: 1px solid var(--navy); background: var(--navy); color: #fff; box-shadow: 0 5px 12px rgba(13,55,109,.17); }.primary-button:hover { background: #194a88; }.secondary-button { border: 1px solid #d6dfe9; background: #fff; color: var(--navy); }.secondary-button:hover { border-color: var(--navy); background: #f6f9fc; }.popular-row { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: 11px; overflow-x: auto; overflow-y: hidden; padding: 2px 0 4px; scrollbar-width: none; color: #718094; font-size: 10px; }.popular-row::-webkit-scrollbar { display: none; }.popular-row > span { flex: 0 0 auto; white-space: nowrap; }.popular-row button { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: calc(13px / 3) 13px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #536174; font-size: 10px; line-height: 1.25; white-space: nowrap; }.popular-row button::before, .area-tabs button::before { position: absolute; z-index: -1; inset: 11px 0; border: 1px solid transparent; border-radius: 999px; background: #f0f3f6; content: ""; }.popular-row button:hover { border-color: transparent; background: transparent; color: var(--navy); }.popular-row button:hover::before { border-color: #adc2d8; background: #eaf2fa; }
.hero-event-card { width: 300px; padding: 17px 15px 14px; border: 1px solid rgba(215,224,233,.95); border-radius: 13px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); backdrop-filter: blur(7px); }.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }.section-heading.compact { margin-bottom: 10px; }.section-heading h2 { margin: 0; color: var(--navy-deep); font-size: 17px; letter-spacing: .04em; }.section-heading.compact h2 { font-size: 15px; }.section-heading a, .link-button { color: var(--navy); font-size: 10px; font-weight: 800; }.hero-event-row { display: grid; grid-template-columns: 76px 1fr; gap: 9px; padding: 8px 0; border-top: 1px solid #e5eaf0; }.hero-event-row:first-child { border-top: 0; }.event-image { width: 76px; height: 57px; border-radius: 6px; background-position: center; background-size: cover; }.event-copy h3 { overflow: hidden; margin: 0 0 4px; color: #253b58; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }.event-copy p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }.event-tag { display: inline-block; margin-top: 4px; padding: 2px 5px; border-radius: 3px; background: #e9f6ea; color: #2d8553; font-size: 9px; font-weight: 800; }.event-tag.orange { background: #fff0df; color: #df7216; }.outline-link { display: block; margin-top: 10px; padding: 9px 10px; border: 1px solid #d7e0e9; border-radius: 8px; color: var(--navy); font-size: 11px; font-weight: 800; text-align: center; }

.page-section { width: min(1340px, calc(100% - 64px)); margin: 0 auto; padding: 22px 0 0; }.heading-icon { display: inline-grid; place-items: center; width: 21px; height: 21px; color: var(--navy); font-size: 22px; vertical-align: -2px; }.heading-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }.map-heading { color: #2c9e59; font-size: 17px; }.calendar-heading { color: var(--navy); font-size: 20px; }.gift-heading { color: var(--navy); font-size: 21px; }.book-heading { color: #41719d; font-size: 19px; }.shop-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }.shop-card { overflow: hidden; min-width: 0; border: 1px solid #e0e6ed; border-radius: 11px; background: var(--surface); box-shadow: 0 3px 10px rgba(30, 58, 89, .07); transition: transform .2s, box-shadow .2s; }.shop-card:hover { transform: translateY(-3px); box-shadow: 0 11px 24px rgba(30,58,89,.14); }.shop-photo { position: relative; height: 101px; background-position: center; background-size: cover; }.shop-photo::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(6, 26, 51, .18)); content: ""; }.region-pill { position: absolute; z-index: 1; top: 9px; left: 9px; padding: 3px 7px; border-radius: 4px; background: rgba(22, 63, 108, .9); color: #fff; font-size: 10px; font-weight: 800; }.shop-body { position: relative; padding: 10px 11px 12px; }.shop-body h2 { margin: 0 0 8px; overflow: hidden; color: var(--navy-deep); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }.shop-meta { display: flex; flex-wrap: wrap; gap: 5px 11px; color: #647287; font-size: 9px; }.shop-meta span { display: inline-flex; align-items: center; gap: 3px; }.shop-description { display: -webkit-box; overflow: hidden; min-height: 32px; margin: 8px 0 0; color: #718094; font-size: 9px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.bookmark { position: absolute; top: 9px; right: 9px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid #dce4ed; border-radius: 50%; background: #fff; color: var(--navy); }.bookmark svg { width: 15px; height: 15px; }.bookmark.active { border-color: var(--orange); background: #fff8ee; color: var(--orange); }.empty-state { margin: 15px 0 0; padding: 20px; border: 1px dashed #cdd8e5; border-radius: 12px; color: var(--muted); background: #fff; text-align: center; font-size: 13px; }

.lower-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(380px, 1fr); align-items: stretch; gap: 18px; padding-top: 28px; }.map-panel, .event-panel, .product-panel { min-width: 0; }.map-panel { padding-right: 2px; }.lower-grid .product-panel { grid-column: 1 / -1; }.lower-grid .product-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }.area-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 1px 0 9px; scrollbar-width: none; }.area-tabs::-webkit-scrollbar { display: none; }.area-tabs button { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: calc(13px / 3) 13px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #68788c; font-size: 10px; line-height: 1.25; }.area-tabs button::before { border-color: #d7e0ea; }.area-tabs button.active, .area-tabs button:hover { border-color: transparent; background: transparent; }.area-tabs button.active { color: #fff; }.area-tabs button.active::before { border-color: var(--navy); background: var(--navy); }.area-tabs button:hover::before { border-color: #adc2d8; background: #eaf2fa; }.map-browser { display: grid; grid-template-columns: 1.12fr .88fr; min-height: 172px; overflow: hidden; border: 1px solid #dde5ee; border-radius: 11px; background: #fff; box-shadow: 0 4px 13px rgba(33,61,90,.07); }.mini-map { position: relative; z-index: 0; isolation: isolate; min-height: 172px; overflow: hidden; background: #e8f0f5; }.map-shop-list { display: flex; flex-direction: column; gap: 1px; padding: 7px; background: #fff; }.map-shop-row { display: grid; grid-template-columns: 40px 1fr 15px; align-items: center; gap: 7px; padding: 6px 2px; border-bottom: 1px solid #edf0f3; }.map-shop-thumb { position: relative; width: 40px; height: 31px; border-radius: 5px; background-position: center; background-size: cover; }.map-shop-row strong { display: block; overflow: hidden; color: var(--ink); font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }.map-shop-row small { display: block; margin-top: 2px; color: #768397; font-size: 8px; }.map-shop-row svg { width: 14px; height: 14px; color: var(--navy); }.map-cta { display: block; width: 100%; margin-top: 8px; padding: 7px 0; border: 0; background: transparent; color: var(--navy); font-size: 10px; font-weight: 800; text-align: right; }
.map-popup-link { display: grid; min-width: 170px; gap: 5px; color: var(--blue); text-decoration: none; }
.map-popup-link strong { color: var(--navy-deep); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.map-popup-location { display: flex; flex-wrap: wrap; gap: 4px 6px; color: #5b6f82; font-size: 11px; line-height: 1.45; }
.map-popup-location span { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 6px; border-radius: 999px; background: #f0f6fa; }
.map-popup-prefecture { color: #2c6388; }
.map-popup-municipality { color: #566c80; }
.map-panel.map-expanded { grid-column: 1 / -1; }
.map-panel.map-expanded .map-browser { min-height: min(62vh, 560px); grid-template-columns: minmax(0, 1.55fr) minmax(240px, .45fr); }
.map-panel.map-expanded .mini-map { min-height: min(62vh, 560px); }
.event-panel, .product-panel { padding-left: 1px; }.event-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }.event-card { overflow: hidden; border: 1px solid #e1e7ed; border-radius: 10px; background: #fff; box-shadow: 0 3px 10px rgba(31,60,90,.06); }.event-card-image { height: 100px; background-position: center; background-size: cover; }.event-card-body { padding: 8px 9px 10px; }.event-card-date { display: inline-block; padding: 3px 5px; border-radius: 3px; background: #f2f5f7; color: var(--navy); font-size: 9px; font-weight: 800; }.event-card-body h3 { margin: 6px 0 4px; color: var(--navy-deep); font-size: 10px; line-height: 1.45; }.event-card-body p { margin: 0; color: #748095; font-size: 9px; line-height: 1.45; }.event-card-status { display: inline-block; margin-top: 6px; padding: 2px 5px; border: 1px solid #add5b7; border-radius: 3px; color: #368455; font-size: 8px; font-weight: 800; }.event-card-status.orange { border-color: #f3c99e; color: #d87715; }
.event-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.event-card-region { display: inline-block; max-width: 48%; overflow: hidden; padding: 3px 6px; border-radius: 999px; background: #e8f2fb; color: #155486; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }.product-card { position: relative; display: flex; min-height: 198px; flex-direction: column; overflow: hidden; border: 1px solid #e1e7ed; border-radius: 10px; background: #fff; box-shadow: 0 3px 10px rgba(31,60,90,.06); color: inherit; text-decoration: none; transition: border-color .18s, box-shadow .18s, transform .18s; }.product-card:hover, .product-card:focus-visible { border-color: #b9cfe1; box-shadow: 0 9px 22px rgba(31,60,90,.12); transform: translateY(-2px); }.product-card::after { display: none; }.product-card-image { position: relative; inset: auto; display: block; flex: 0 0 100px; height: 100px; background-position: center; background-size: cover; }.product-card h3 { position: static; margin: 0; color: var(--navy-deep); font-size: 10px; line-height: 1.3; }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 17px; padding-bottom: 35px; }.article-card { display: grid; grid-template-columns: 155px 1fr; overflow: hidden; min-height: 104px; border: 1px solid #e1e7ed; border-radius: 10px; background: #fff; box-shadow: 0 4px 12px rgba(31,60,90,.06); }.article-image { min-height: 104px; background-position: center; background-size: cover; }.article-copy { padding: 13px 13px 10px; }.article-copy h3 { margin: 0 0 7px; color: var(--navy-deep); font-size: 13px; line-height: 1.4; }.article-copy p { margin: 0; color: #718096; font-size: 10px; line-height: 1.55; }.article-footer { display: flex; justify-content: space-between; gap: 6px; margin-top: 9px; color: #8a95a4; font-size: 9px; }.article-tag { padding: 2px 6px; border-radius: 3px; background: #eef4fb; color: var(--blue); font-weight: 800; }

.shop-card.no-image { border-color: #c9dddd; background: #fff; }
.shop-card.no-image .shop-photo { height: 101px; background: #e4f1ef; }
.shop-card.no-image .shop-photo::after { background: linear-gradient(180deg, rgba(13, 68, 76, .02) 25%, rgba(13, 68, 76, .18)); }
.shop-card.no-image .media-fallback { padding: 15px 13px 13px; gap: 5px; background: linear-gradient(135deg, #eff8f6 0%, #d9ece9 57%, #c8e3e1 100%); color: #164d57; }
.shop-card.no-image .media-fallback > span { color: #28736e; font-size: 16px !important; letter-spacing: .12em; line-height: 1.1; }
.shop-card.no-image .media-fallback > strong { max-width: 76%; color: #174f5d; font-size: 18px !important; line-height: 1.25; white-space: nowrap; }
.shop-card.no-image .region-pill { z-index: 3; background: rgba(22, 63, 108, .94); box-shadow: 0 2px 5px rgba(14, 65, 74, .18); }
.event-card.no-image { border-color: #eadfce; background: #fffdfa; }
.event-card.no-image .event-card-image { height: 72px; }
.product-card.no-image { border-color: #d9e3ec; }
.product-card.no-image .product-card-image { background: #e8f0f6; }
.product-card.no-image .media-fallback { align-items: flex-start; justify-content: flex-end; flex-direction: column; gap: 5px; padding: 14px; }
.product-card.no-image .media-fallback > span { font-size: 8px; }
.product-card.no-image .media-fallback > strong { max-width: 100%; overflow: hidden; font-size: 13px; line-height: 1.25; text-overflow: ellipsis; white-space: normal; }
.product-card-content { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; padding: 11px 12px 12px; }
.product-card-meta { display: flex; align-items: center; min-height: 22px; max-width: 100%; }
.product-card-type { display: inline-flex; align-items: center; max-width: 100%; min-height: 21px; overflow: hidden; padding: 0 8px; border-radius: 999px; background: #e8f2fb; color: #155486; font-size: 9px; font-weight: 900; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.product-card .product-card-content h2 { position: static; inset: auto; margin: 7px 0 0; color: var(--navy-deep); font-size: 12px; line-height: 1.4; text-shadow: none; overflow-wrap: anywhere; }
.product-card-summary { display: -webkit-box; overflow: hidden; margin: 6px 0 0; color: #586779; font-size: 9px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-card-source { display: block; max-width: 100%; overflow: hidden; margin-top: auto; padding-top: 8px; color: #5c6878; font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.article-card.no-image { grid-template-columns: 1fr; border-color: #d8e3ee; border-left: 4px solid #7da8cb; background: linear-gradient(135deg, #fff, #f8fbfe); }
.article-card.no-image .article-copy { padding: 14px 16px 12px; }
.article-type-label { display: block; margin-bottom: 6px; color: #4f789a; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.detail-related-image.no-image { position: relative; }
.site-footer { border-top: 1px solid #dfe6ed; background: #fff; }.footer-inner { display: flex; align-items: center; gap: 40px; width: min(1340px, calc(100% - 64px)); min-height: 76px; margin: 0 auto; }.footer-brand { min-width: auto; }.footer-brand .brand-mark { width: 40px; height: 40px; flex: 0 0 40px; overflow: visible; font-size: 24px; }.footer-brand .brand-logo { padding: 1px; object-fit: contain; }.footer-brand .brand-copy strong { font-size: 13px; }.footer-brand .brand-copy span { font-size: 12px; }.footer-links { display: flex; gap: 20px; color: #65748a; font-size: 11px; }.footer-inner p { margin: 0 0 0 auto; color: #8893a2; font-size: 10px; }
.toast { position: fixed; z-index: 50; right: 22px; bottom: 86px; max-width: min(340px, calc(100% - 44px)); padding: 11px 15px; border-radius: 9px; background: rgba(13,55,109,.95); color: #fff; box-shadow: 0 8px 24px rgba(13,55,109,.25); font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s, transform .2s; }.toast.show { opacity: 1; transform: translateY(0); }
.shop-photo, .event-image, .event-card-image, .article-image, .map-shop-thumb, .product-card-image { background-color: #dbe6e8; }

/* 画像なしの項目は空の写真枠にせず、種類と主要情報を見せる編集カードにする。 */
.media-fallback { position: absolute; z-index: 1; inset: 0; display: flex; align-items: flex-start; justify-content: flex-end; flex-direction: column; gap: 4px; overflow: hidden; padding: 12px; border: 0; border-radius: inherit; background: linear-gradient(145deg, #edf5f5, #dfeceb); color: #173f58; line-height: 1.2; white-space: normal; transform: none; }
.media-fallback::before { position: absolute; top: -36%; right: -10%; width: 74%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; box-shadow: 0 0 0 16px rgba(255,255,255,.22), 0 0 0 34px rgba(255,255,255,.12); content: ""; }
.media-fallback::after { position: absolute; right: 10%; bottom: 16%; width: 31%; height: 2px; border-radius: 999px; background: rgba(20,76,98,.19); box-shadow: -12px -9px 0 rgba(20,76,98,.13), 8px 9px 0 rgba(20,76,98,.1); content: ""; transform: rotate(-28deg); }
.media-fallback > span, .media-fallback > strong { position: relative; z-index: 1; }
.media-fallback > span { font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.media-fallback > strong { max-width: 100%; overflow: hidden; font-size: 15px; font-weight: 900; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.media-fallback-event { background: linear-gradient(145deg, #fff3e4, #f6dfc3); color: #86480d; }
.media-fallback-product { background: linear-gradient(145deg, #edf3f8, #dce8f1); color: #28557d; }
.media-fallback-article { background: linear-gradient(145deg, #edf3fb, #d9e7f5); color: #28557d; }
.media-fallback-compact { align-items: center; justify-content: center; gap: 1px; padding: 4px; text-align: center; }
.media-fallback-compact > span { display: none; }
.media-fallback-compact > strong { font-size: 9px; letter-spacing: 0; }
.media-fallback-compact::after { display: none; }

@media (max-width: 1180px) {
  .header-inner, .hero-inner, .page-section, .footer-inner { width: min(100% - 38px, 1060px); }
  .header-inner { gap: 20px; }.brand { min-width: 215px; }.main-nav { gap: 18px; }.header-actions { gap: 10px; }.global-search { width: 205px; }.shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.shop-card:nth-child(n+4) { display: none; }.lower-grid { grid-template-columns: 1.2fr 1fr; }.product-panel { grid-column: 1 / -1; }.product-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }.hero-copy { width: 66%; }
}

@media (max-width: 850px) {
  #top { scroll-margin-top: 64px; }
  .site-header { height: 64px; }.header-inner, .hero-inner, .page-section, .footer-inner { width: min(100% - 30px, 720px); }.brand { min-width: auto; }.brand-mark { width: 32px; height: 38px; }.brand-mark svg { width: 30px; height: 36px; }.brand-copy strong { font-size: 14px; }.brand-copy span { font-size: 13px; }.main-nav, .header-actions { display: none; }.menu-toggle { display: block; margin-left: auto; }.hero { min-height: auto; }.hero-map { inset: 0; opacity: .48; }.hero-inner { display: block; min-height: auto; padding: 32px 0 27px; }.hero-copy { width: 100%; }.hero h1 { font-size: clamp(30px, 8vw, 42px); }.hero-event-card { width: min(100%, 380px); margin-top: 22px; }.filter-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }.check-label { grid-column: 1 / -1; padding: 4px 0 0; }.filter-actions { grid-template-columns: 1fr 1fr; }.lower-grid { grid-template-columns: 1fr; gap: 25px; }.product-panel { grid-column: auto; }.product-grid, .lower-grid .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.article-grid { grid-template-columns: 1fr; }.article-card { grid-template-columns: 190px 1fr; }.footer-inner { flex-wrap: wrap; gap: 13px 27px; padding: 18px 0; }.footer-inner p { width: 100%; margin-left: 0; }.footer-links { flex-wrap: wrap; gap: 8px 15px; }
}

/* 補助テキストは小さい文字でも十分なコントラストを確保する。 */
.event-tag { color: #236b42; }
.event-tag.orange { color: #a94f08; }
.event-card-status.orange { color: #a94f08; }
.detail-article-body { overflow-wrap: anywhere; word-break: break-word; }
.shop-description, .article-copy p { color: #586779; }
.map-shop-row small { color: #526274; }
.event-card-body p { color: #586779; }
.article-footer { color: #5c6878; }
.footer-inner p { color: #5f6b7a; }
.leaflet-control-attribution a { color: #005f99; text-decoration: underline; text-underline-offset: 2px; }

.shop-card { position: relative; isolation: isolate; }
.shop-card-link { display: block; color: inherit; }
.shop-card .bookmark { z-index: 2; }
.event-card, .article-card, .product-card { color: inherit; text-decoration: none; }
.event-card { display: block; }
.article-card { display: grid; }
.map-shop-row { color: inherit; text-decoration: none; }
.search-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0; padding: 11px 13px; border: 1px solid #c8dced; border-radius: 10px; background: #f4f9fd; color: var(--navy-deep); font-size: 12px; line-height: 1.55; }
.search-summary[hidden] { display: none; }
.search-summary span { min-width: 0; }
.search-summary button { flex: 0 0 auto; min-height: 32px; padding: 0 11px; border: 1px solid #b8cde0; border-radius: 999px; background: #fff; color: var(--navy); font-size: 10px; font-weight: 800; }
.search-summary button:hover, .search-summary button:focus-visible { border-color: var(--blue); color: var(--blue); }
.catalog-fallback-notice { display: grid; gap: 3px; margin: 12px 0; padding: 11px 14px; border: 1px solid #e4d4a8; border-radius: 10px; background: #fffaf0; color: #6f5727; font-size: 13px; line-height: 1.55; }
.catalog-fallback-notice[hidden] { display: none; }
.catalog-fallback-notice strong { color: #5f481e; font-weight: 800; }
.catalog-refreshing { opacity: .42; pointer-events: none; transition: opacity .18s ease; }
.catalog-status { margin: 12px 0; padding: 15px; border: 1px dashed #cbd8e5; border-radius: 10px; background: #fff; color: var(--muted); font-size: 12px; text-align: center; }
.shop-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 20px 0 4px; color: var(--muted); font-size: 12px; }
.shop-pagination[hidden] { display: none; }
.shop-pagination .secondary-button { min-width: 104px; padding: 0 12px; }
.shop-pagination .secondary-button:disabled { cursor: not-allowed; opacity: .45; }
.catalog-status[hidden] { display: none; }
.catalog-error { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 13px 15px; border: 1px solid #efc7c7; border-radius: 10px; background: #fff7f7; color: #8a3030; font-size: 12px; }
.catalog-error[hidden] { display: none; }
.catalog-error span { flex: 1; }
.catalog-error button { padding: 6px 10px; border: 1px solid #bd6b6b; border-radius: 7px; background: #fff; color: #8a3030; font-size: 11px; font-weight: 700; }
.inline-empty { margin: 0; padding: 20px; border: 1px dashed #d2dce7; border-radius: 10px; color: var(--muted); background: #fff; font-size: 12px; text-align: center; }
.detail-view { min-height: 360px; padding-bottom: 50px; }

/* 詳細画面でもグローバルヘッダーを共通利用し、本文だけをルートごとに差し替える。 */
body.detail-mode { min-width: 0; background: #f3f7fb; }
body.detail-mode .hero { display: none; }
body.detail-mode #top { min-height: 100vh; }
body.detail-mode.saved-mode #top { min-height: auto; }
body.detail-mode.saved-mode { display: flex; flex-direction: column; min-height: 100vh; }
body.detail-mode.saved-mode #top { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
body.detail-mode.saved-mode .detail-view { flex: 1 1 auto; }
body.detail-mode .detail-view { display: block; width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 64px; }
.detail-heading { width: 100%; min-width: 0; margin: 0 0 28px; }
.detail-kicker { margin: 0 0 8px; color: #267147; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.detail-heading h1 { margin: 0; color: var(--navy-deep); font-size: clamp(28px, 4.3vw, 48px); line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; word-break: normal; text-wrap: wrap; }
.detail-heading h1.detail-title-long { font-size: clamp(26px, 3.8vw, 42px); }
.detail-heading h1.detail-title-dense { font-size: clamp(24px, 3vw, 32px); }
.detail-heading h1:focus { outline: 0; }
.detail-lead { max-width: 820px; margin: 14px 0 0; color: #51647a; font-size: 15px; line-height: 1.85; }
.detail-primary-grid { display: grid; grid-template-columns: minmax(320px, .92fr) minmax(360px, 1.08fr); overflow: hidden; border: 1px solid #dce6ef; border-radius: 18px; background: #fff; box-shadow: 0 14px 40px rgba(30,58,89,.08); }
.detail-primary-grid.no-image { position: relative; grid-template-columns: 1fr; border-color: #d3e1e9; background: linear-gradient(135deg, #fff 0%, #fff 74%, #f3f8f9 100%); }
.detail-primary-grid.no-image::before { position: absolute; z-index: 1; top: 0; right: 0; left: 0; height: 5px; background: linear-gradient(90deg, var(--navy), var(--green), #7fb4c4); content: ""; }
.detail-primary-grid.no-image .detail-info { max-width: 900px; padding-top: 34px; }
.detail-primary-grid.no-image.has-location-map { grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr); background: #fff; }
.detail-primary-grid.no-image.has-location-map .detail-info { max-width: none; }
.shop-detail-grid.has-image.has-location-map { grid-template-columns: minmax(210px, .62fr) minmax(390px, 1.28fr) minmax(300px, .82fr); align-items: stretch; }
.shop-detail-grid.has-image .detail-media-shop { align-self: center; min-width: 0; margin: 28px 20px 28px 28px; padding: 0; background: transparent; }
.shop-detail-grid.has-image .detail-media-shop .detail-visual { display: grid; width: 100%; height: 190px; aspect-ratio: auto; place-items: center; border-color: #d2dee7; background: linear-gradient(145deg, #f8fafc, #e9f0f4); }
.detail-primary-grid.shop-detail-grid.has-image .detail-media-shop .detail-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: scale-down; }
.shop-detail-grid.has-image .detail-media-shop figcaption { margin-top: 7px; text-align: center; }
.shop-detail-grid.has-image .detail-info { border-left: 1px solid #e6edf2; }
.shop-detail-grid.has-image.has-location-map .detail-location-card { align-self: center; margin: 28px 28px 28px 0; padding: 14px; }
.shop-detail-grid.has-image.has-location-map .detail-location-heading { align-items: flex-start; flex-direction: column; gap: 8px; margin: 0 2px 12px; }
.shop-detail-grid.has-image.has-location-map .detail-location-map { height: 220px; min-height: 220px; }
.detail-media { min-width: 0; margin: 0; padding: 18px; background: #edf3f7; }
.detail-visual { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgba(202,216,228,.8); border-radius: 13px; background: #dce7ea; }
.detail-visual > img { width: 100%; height: 100%; object-fit: cover; }
.detail-media-contain .detail-visual { background: #fff; }
.detail-media-contain .detail-visual > img { object-fit: contain; padding: 12px; }
.detail-media figcaption { margin: 8px 2px 0; color: #526579; font-size: 9px; }
.detail-info { min-width: 0; padding: 30px 30px 28px; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.detail-tags > span { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 9px; border: 1px solid #d9e5ef; border-radius: 999px; background: #f5f9fc; color: #4f667d; font-size: 10px; font-weight: 800; }
.detail-tags > a.detail-tag-link { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 13px; border: 1px solid #bcd3e3; border-radius: 999px; background: #eef6fb; color: #164d78; font-size: 16px; font-weight: 800; line-height: 1.25; text-decoration: none; transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.detail-tags > a.detail-tag-link::after { margin-left: 6px; color: #5f8eae; content: "›"; font-size: 18px; line-height: 1; }
.detail-tags > a.detail-tag-link:hover, .detail-tags > a.detail-tag-link:focus-visible { border-color: #6da5c7; background: #e3f0f8; color: #0d376d; box-shadow: 0 3px 10px rgba(33, 113, 186, .13); transform: translateY(-1px); }
.detail-tags > a.detail-tag-link:focus-visible { outline: 3px solid rgba(33, 113, 186, .28); outline-offset: 2px; }
.detail-tags > a.detail-tag-link:active { transform: translateY(0); }
.detail-tags .detail-status.active { border-color: #b9dfc7; background: #eef9f1; color: #267146; }
.detail-tags .detail-status.upcoming { border-color: #f0d2a9; background: #fff8ed; color: #9b5b0b; }
.detail-tags .detail-status.ended { background: #f2f4f6; color: #6f7884; }
.detail-tags .detail-status.unconfirmed { border-color: #e7c7a4; background: #fff7ed; color: #965516; }
.detail-facts { display: grid; gap: 0; margin: 0; }
.detail-facts > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid #e9eef3; }
.detail-facts > div:first-child { border-top: 1px solid #e9eef3; }
.detail-facts dt { color: #5d7186; font-size: 10px; font-weight: 800; }
.detail-facts dd { min-width: 0; margin: 0; color: #253e59; font-size: 13px; font-weight: 650; line-height: 1.65; overflow-wrap: anywhere; }
.detail-facts a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.detail-action, .detail-official-button { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 42px; height: auto; padding: 9px 15px; line-height: 1.35; text-align: center; text-decoration: none; }
.detail-save { min-width: 118px; }
.detail-location-card { align-self: end; min-width: 0; margin: 34px 30px 28px 0; padding: 15px; border: 1px solid #d9e5ed; border-radius: 15px; background: #f7fafc; box-shadow: 0 10px 28px rgba(30,58,89,.08); }
.detail-location-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 0 2px 12px; }
.detail-location-heading > div { min-width: 0; }
.detail-location-heading p { margin: 0 0 3px; color: #217445; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.detail-location-heading h2 { margin: 0; color: var(--navy-deep); font-size: 16px; line-height: 1.35; }
.detail-location-heading a { flex: 0 0 auto; color: var(--blue); font-size: 10px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.detail-location-map { position: relative; z-index: 0; isolation: isolate; width: 100%; height: 260px; min-height: 260px; overflow: hidden; border: 1px solid #cbd9e3; border-radius: 11px; background: #e5edf2; }
.detail-location-caption { display: flex; align-items: flex-start; gap: 7px; min-width: 0; margin: 10px 2px 0; color: #536b7e; font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; }
.detail-location-caption span { flex: 0 0 auto; color: var(--blue); font-size: 8px; line-height: 1.9; }
.detail-notice { margin: 0 0 18px; padding: 13px 14px; border: 1px solid #dce6ef; border-radius: 10px; background: #f6f9fc; }
.detail-notice strong { display: block; margin-bottom: 4px; color: var(--navy-deep); font-size: 12px; }
.detail-notice p { margin: 0; color: #5b6d80; font-size: 11px; line-height: 1.65; }
.detail-notice-warning { border-color: #ebd2b4; background: #fff8ef; }
.detail-notice-warning strong { color: #8c4c0d; }
.detail-notice-neutral { border-color: #d9e4ed; background: #f6f9fc; }
.detail-source-card { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 18px; padding: 22px 24px; border: 1px solid #cfe3d8; border-radius: 15px; background: linear-gradient(135deg, #f2faf5, #f8fbfd); }
.detail-source-card > div { min-width: 0; }
.detail-source-kicker { margin: 0 0 4px !important; color: #278452 !important; font-size: 10px !important; font-weight: 900; letter-spacing: .1em; }
.detail-source-card h2 { margin: 0; color: var(--navy-deep); font-size: 17px; }
.detail-source-card p { max-width: 700px; margin: 7px 0 0; color: #5b6f80; font-size: 11px; line-height: 1.65; }
.detail-source-card dl { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 11px 0 0; }
.detail-source-card dl div { display: flex; gap: 7px; font-size: 10px; }
.detail-source-card dt { color: #718093; font-weight: 800; }
.detail-source-card dd { margin: 0; color: #334b62; font-weight: 800; overflow-wrap: anywhere; }
.detail-subsection { margin-top: 18px; padding: 23px 24px; border: 1px solid #dce6ef; border-radius: 15px; background: #fff; }
.detail-section-heading { margin-bottom: 15px; }
.detail-section-heading p { margin: 0 0 3px; color: #267147; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.detail-section-heading h2 { margin: 0; color: var(--navy-deep); font-size: 18px; }
.detail-special-metadata-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.detail-special-metadata-card { min-width: 0; padding: 14px; border: 1px solid #dce8ef; border-radius: 11px; background: #f8fbfd; }
.detail-special-metadata-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.detail-special-metadata-head h3 { min-width: 0; margin: 0; color: var(--navy-deep); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.detail-special-metadata-head h3 a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.detail-special-metadata-head h3 a:hover, .detail-special-metadata-head h3 a:focus-visible { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; outline: 0; }
.detail-special-metadata-status { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 900; white-space: nowrap; }
.detail-special-metadata-status.confirmed { background: #e8f6ed; color: #267147; }
.detail-special-metadata-status.review { background: #fff3df; color: #925112; }
.detail-special-metadata-status.unavailable { background: #eef1f4; color: #687582; }
.detail-special-metadata-qualifier { margin: 8px 0 0; color: #2d6680; font-size: 10px; font-weight: 800; line-height: 1.5; }
.detail-special-metadata-evidence { display: -webkit-box; overflow: hidden; margin: 8px 0 0; color: #5b6f80; font-size: 10px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.detail-special-metadata-source { margin-top: 9px; font-size: 10px; font-weight: 800; }
.detail-special-metadata-source a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.detail-special-metadata-note { margin: 13px 0 0; color: #718093; font-size: 10px; line-height: 1.6; }
.detail-event-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.detail-event-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 72px; padding: 12px; border: 1px solid #e0e7ee; border-radius: 10px; color: inherit; text-decoration: none; }
.detail-event-row:hover, .detail-event-row:focus-visible { border-color: #9dbbd6; box-shadow: 0 5px 16px rgba(25,61,96,.08); }
.detail-event-row strong { display: block; color: var(--navy-deep); font-size: 12px; line-height: 1.5; }
.detail-event-row small { display: block; margin-top: 4px; color: #697b8d; font-size: 9px; line-height: 1.5; }
.detail-event-date { padding: 5px 7px; border-radius: 6px; background: #eef5fb; color: var(--navy); font-size: 9px; font-weight: 800; }
.detail-event-date.unconfirmed { background: #fff3e5; color: #925112; }
.detail-empty-note { margin: 0; padding: 17px; border: 1px dashed #d5e0e9; border-radius: 9px; color: #607285; font-size: 12px; }
.detail-related-shop { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; max-width: 620px; padding: 10px; border: 1px solid #e0e7ee; border-radius: 11px; color: inherit; text-decoration: none; }
.detail-related-shop:hover, .detail-related-shop:focus-visible { border-color: #9dbbd6; box-shadow: 0 5px 16px rgba(25,61,96,.08); }
.detail-related-image { width: 72px; height: 54px; overflow: hidden; border-radius: 7px; background: #edf2f5; }
.detail-related-image img { width: 100%; height: 100%; object-fit: cover; }
.detail-related-shop strong { display: block; color: var(--navy-deep); font-size: 13px; }
.detail-related-shop small { display: block; margin-top: 4px; color: #5f7183; font-size: 10px; }
.detail-related-basis { display: block; margin-top: 7px; color: #5f7183; font-size: 10px; line-height: 1.6; }
.detail-related-group + .detail-related-group { margin-top: 24px; padding-top: 22px; border-top: 1px solid #e6edf3; }
.detail-related-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.detail-related-group-heading h3 { margin: 0; color: #29445f; font-size: 14px; }
.detail-related-more { flex: 0 0 auto; color: var(--blue); font-size: 10px; font-weight: 800; text-decoration: none; }
.detail-related-more:hover, .detail-related-more:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.detail-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.detail-related-item { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 88px; padding: 9px; border: 1px solid #e0e7ee; border-radius: 11px; background: #fff; color: inherit; text-decoration: none; }
.detail-related-item:hover, .detail-related-item:focus-visible { border-color: #9dbbd6; box-shadow: 0 5px 16px rgba(25,61,96,.08); }
.detail-related-item-media { position: relative; width: 84px; height: 66px; overflow: hidden; border-radius: 8px; background: #edf2f5; }
.detail-related-item-media img { width: 100%; height: 100%; object-fit: cover; }
.detail-related-item-copy { min-width: 0; }
.detail-related-item-copy > span { display: block; margin-bottom: 3px; color: #267147; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.detail-related-item-copy strong { display: -webkit-box; overflow: hidden; color: var(--navy-deep); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.detail-related-item-copy small { display: -webkit-box; overflow: hidden; margin-top: 4px; color: #5f7183; font-size: 9px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.detail-related-arrow { color: #7b8fa3; font-size: 17px; }
.detail-article-body { max-width: 820px; color: #415970; font-size: 14px; line-height: 2; }
.detail-article-body p { margin: 0 0 1.1em; }
.detail-article-body p:last-child { margin-bottom: 0; }
.detail-article-body h3 { margin: 1.8em 0 .55em; color: var(--navy-deep); font-size: 16px; line-height: 1.55; }
.detail-article-body ul { margin: 0 0 1.2em; padding-left: 1.4em; }
.detail-article-body li { margin: .35em 0; }
.detail-article-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.detail-body-missing { padding: 18px; border: 1px dashed #cfdae5; border-radius: 10px; background: #f8fafc; }
.detail-body-missing strong { color: var(--navy-deep); font-size: 13px; }
.detail-body-missing p { margin: 7px 0 0; color: #607286; font-size: 12px; line-height: 1.75; }
.detail-loading-card, .detail-error-card { display: flex; align-items: center; gap: 16px; min-height: 150px; padding: 28px; border: 1px solid #dce6ef; border-radius: 15px; background: #fff; }
.detail-error-card { display: grid; align-content: center; }
.detail-loading-card strong, .detail-error-card strong { color: var(--navy-deep); font-size: 15px; }
.detail-loading-card p, .detail-error-card p { margin: 5px 0 0; color: #617387; font-size: 12px; }
.detail-error-card .utility-actions { margin-top: 14px; }
.detail-loading-mark { width: 34px; height: 34px; border: 3px solid #d7e5ef; border-top-color: var(--blue); border-radius: 50%; animation: detail-spin .8s linear infinite; }
@keyframes detail-spin { to { transform: rotate(360deg); } }
.map-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.map-actions .secondary-button { height: 32px; padding: 0 12px; font-size: 10px; }
.map-actions .map-cta { width: auto; margin-top: 0; }
.saved-page { display: grid; gap: 16px; }
.saved-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 24px 28px; border: 1px solid #d8e4ee; border-radius: 16px; background: linear-gradient(135deg, #fff 0%, #fff 72%, #f2f8fc 100%); box-shadow: 0 12px 34px rgba(30,58,89,.07); }
.saved-intro-copy { min-width: 0; }
.saved-intro-eyebrow, .saved-list-heading p, .saved-empty-eyebrow { margin: 0 0 7px; color: #2f704a; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.saved-intro h2, .saved-list-heading h2, .saved-empty-state h2 { margin: 0; color: var(--navy-deep); font-size: 18px; line-height: 1.45; }
.saved-intro-copy > p:last-child, .saved-empty-state p { max-width: 680px; margin: 8px 0 0; color: #5b6f82; font-size: 13px; line-height: 1.8; }
.saved-intro-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.saved-list-section { padding: 22px 20px 20px; border: 1px solid #d8e4ee; border-radius: 16px; background: rgba(255,255,255,.72); }
.saved-list-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 2px 15px; }
.saved-list-heading p { margin-bottom: 5px; }
.saved-list-count { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid #d5e2ed; border-radius: 999px; background: #fff; color: #536d83; font-size: 11px; font-weight: 800; white-space: nowrap; }
.saved-empty-state { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 24px 28px; border: 1px solid #d8e4ee; border-radius: 16px; background: linear-gradient(135deg, #fafdff 0%, #f1f7fb 100%); }
.saved-empty-mark { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #c8dcea; border-radius: 15px; background: #fff; color: var(--blue); box-shadow: 0 7px 18px rgba(33,113,186,.1); }
.saved-empty-mark svg { width: 25px; height: 25px; }
.saved-empty-state h2 { font-size: 16px; }
.saved-empty-state .saved-empty-eyebrow { margin-bottom: 5px; }
.saved-empty-state .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; white-space: nowrap; }
.saved-local-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.account-page { display: grid; gap: 16px; max-width: 760px; }
.account-card { padding: 24px 28px; border: 1px solid #d8e4ee; border-radius: 16px; background: #fff; box-shadow: 0 12px 34px rgba(30,58,89,.07); }
.account-eyebrow { margin: 0 0 7px; color: #2f704a; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.account-card h2 { margin: 0; color: var(--navy-deep); font-size: 20px; line-height: 1.45; }
.account-card-lead { margin: 8px 0 0; color: #5b6f82; font-size: 13px; line-height: 1.8; }
.account-profile-list { display: grid; margin: 18px 0 0; }
.account-profile-list > div { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid #e6eef4; }
.account-profile-list dt { color: #5b6f82; font-size: 13px; font-weight: 700; }
.account-profile-list dd { min-width: 0; margin: 0; color: var(--navy-deep); font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.account-note { margin: 14px 0 0; color: #64788c; font-size: 13px; line-height: 1.7; }
#passwordChangeForm { display: grid; gap: 13px; margin-top: 18px; }
#passwordChangeForm label { display: grid; gap: 6px; color: #536172; font-size: 13px; font-weight: 800; }
#passwordChangeForm input { width: 100%; min-height: 48px; padding: 0 11px; border: 1px solid #d5dde8; border-radius: 8px; outline: 0; background: #fff; color: var(--ink); font-size: 16px; }
#passwordChangeForm input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(33,113,186,.12); }
#passwordChangeForm .field-hint { font-size: 12px; }
.account-form-error { min-height: 18px; margin: 0; }
.account-result { min-height: 18px; margin: 0; color: #2f704a; font-size: 13px; line-height: 1.5; }
.account-result:empty { display: none; }
.account-page-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 0; }
.account-page-actions > * { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; text-decoration: none; }
.account-danger-button { border-color: #e2b9b4; color: #9b3f3a; }
.account-danger-button:hover, .account-danger-button:focus-visible { border-color: #b85b53; background: #fff8f7; }
.account-actions { margin-top: 20px; }
.error-text { padding: 18px; border-radius: 9px; background: #fff7f7; color: #8a3030 !important; }
.login-dialog { width: min(430px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 22px 70px rgba(15,42,76,.3); }
.login-dialog::backdrop { background: rgba(8, 35, 69, .42); backdrop-filter: blur(2px); }
.login-card { position: relative; display: grid; gap: 12px; padding: 26px; }
.login-card h2 { margin: 0; color: var(--navy-deep); font-size: 20px; }
.login-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.login-card label { display: grid; gap: 5px; color: #536172; font-size: 11px; font-weight: 800; }
.login-card input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid #d5dde8; border-radius: 7px; outline: 0; font-size: 13px; }
.login-card input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(33,113,186,.12); }
.dialog-close { position: absolute; top: 9px; right: 12px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f2f5f8; color: var(--muted); font-size: 20px; line-height: 1; }
.login-error { min-height: 18px; color: #a43a3a !important; }
.auth-card { max-height: min(720px, calc(100vh - 32px)); overflow-y: auto; }
.auth-panel { display: grid; gap: 12px; min-width: 0; }
.auth-panel[hidden], .auth-verify[hidden] { display: none; }
.auth-panel form { display: grid; gap: 12px; }
.auth-panel h2 { padding-right: 42px; }
.auth-panel label { min-width: 0; }
.auth-panel input { min-height: 46px; }
.field-hint { color: #6a7b8d; font-size: 11px; font-weight: 500; line-height: 1.45; }
.auth-switch { width: 100%; }
.auth-divider { display: flex; align-items: center; gap: 10px; color: #8391a0; font-size: 11px; line-height: 1; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: #e2e8ef; content: ""; }
.auth-verify { display: grid; gap: 12px; padding: 14px; border: 1px solid #d9e7ef; border-radius: 10px; background: #f7fbfd; }
.auth-status { color: #266b46 !important; }
.auth-resend { justify-self: start; min-height: 44px; padding-inline: 0; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.leaflet-container { min-height: 260px; font-family: inherit; }
.antenna-marker { width: 28px !important; height: 36px !important; border: 0; background: transparent; }
.antenna-marker span { position: absolute; top: 2px; left: 5px; display: block; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50% 50% 50% 0; background: var(--blue); box-shadow: 0 3px 8px rgba(20, 55, 88, .35); transform: rotate(-45deg); }
.antenna-marker span::after { position: absolute; top: 5px; left: 5px; width: 6px; height: 6px; border-radius: 50%; background: #fff; content: ""; }
.event-image, .event-card-image, .article-image, .detail-visual { position: relative; }
.shop-photo > img, .event-image > img, .event-card-image > img, .article-image > img, .map-shop-thumb > img, .product-card-image > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.product-card-image .image-placeholder { z-index: 1; }
.article-body { white-space: pre-wrap; }
.feedback-form { display: grid; gap: 10px; max-width: 620px; margin-top: 20px; padding: 18px; border: 1px solid #e0e7ef; border-radius: 12px; background: #fff; }
.feedback-form h3 { margin: 0 0 2px; color: var(--navy-deep); font-size: 16px; }
.feedback-form label { display: grid; gap: 5px; color: #536172; font-size: 11px; font-weight: 800; }
.feedback-field { display: grid; gap: 5px; color: #536172; font-size: 11px; font-weight: 800; }
.feedback-form input:not([type="hidden"]), .feedback-form textarea { width: 100%; padding: 8px 10px; border: 1px solid #d5dde8; border-radius: 7px; outline: 0; background: #fff; font-size: 13px; }
.feedback-form input:not([type="hidden"]):focus, .feedback-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(33,113,186,.12); }
.feedback-form .custom-select-trigger { font-size: 13px; font-weight: 500; }
.feedback-form textarea { resize: vertical; }
.feedback-form .primary-button { width: max-content; padding: 0 18px; }
.feedback-result { min-height: 18px; margin: 0 !important; color: var(--green) !important; }

/* The contact entry point is available on every route without taking space
   away from the page layout. The panel itself owns scrolling so long drafts
   remain usable on short viewports. */
.contact-widget { position: fixed; z-index: 80; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: grid; justify-items: end; pointer-events: none; }
.contact-widget > * { pointer-events: auto; }
.contact-widget-trigger { position: fixed; z-index: 80; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 1px solid #0b4e8e; border-radius: 999px; background: var(--navy); color: #fff; box-shadow: 0 12px 30px rgba(13,55,109,.24); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.contact-widget-trigger:hover, .contact-widget-trigger:focus-visible { background: #0a2d5a; outline: 3px solid rgba(33,113,186,.2); outline-offset: 2px; }
.contact-widget-icon { display: block; flex: 0 0 22px; width: 22px; height: 22px; color: currentColor; }
.contact-widget-icon path { vector-effect: non-scaling-stroke; }
.contact-widget-panel { position: fixed; z-index: 81; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: min(410px, calc(100vw - 40px)); max-height: min(720px, calc(100dvh - 40px)); overflow: auto; padding: 18px; border: 1px solid #d5e0ea; border-radius: 16px; background: rgba(255,255,255,.98); box-shadow: 0 20px 58px rgba(15,42,76,.24); overscroll-behavior: contain; }
.contact-widget.is-open .contact-widget-trigger { display: none; }
.contact-widget-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.contact-widget-head h2 { margin: 0; color: var(--navy-deep); font-size: 20px; line-height: 1.35; }
.contact-widget-close { display: grid; flex: 0 0 1.35em; place-items: center; width: 1.35em; height: 1.35em; padding: 0; border: 1px solid #dbe4ed; border-radius: 8px; background: #f7f9fb; color: var(--navy); font-size: 20px; line-height: 1; }
.contact-widget-close:hover, .contact-widget-close:focus-visible { border-color: #9dbbd6; background: #edf4fb; outline: 3px solid rgba(33,113,186,.14); outline-offset: 1px; }
.contact-widget-lead { margin: 10px 0 0; color: #607286; font-size: 11px; line-height: 1.7; }
.contact-widget-lead strong { display: block; color: var(--navy-deep); font-weight: 800; }
.feedback-context-note { margin: 8px 0 0; color: #68798a; font-size: 10px; line-height: 1.55; }
.contact-widget-panel .feedback-form { max-width: none; margin-top: 14px; padding: 0; border: 0; background: transparent; }
.feedback-message-field { display: grid; gap: 5px; }
.feedback-voice-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; margin-top: -2px; }
.feedback-voice-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 13px; border: 1px solid #b8cddd; border-radius: 999px; background: #f5f9fc; color: var(--navy); font-size: 11px; font-weight: 800; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.feedback-voice-button:hover, .feedback-voice-button:focus-visible { border-color: #6b9ec6; background: #eaf3fa; outline: 3px solid rgba(33,113,186,.14); outline-offset: 1px; }
.feedback-voice-button[data-recording] { border-color: #b54d45; background: #fff0ee; color: #9d322c; }
.feedback-voice-button[data-processing] { cursor: wait; opacity: .72; }
.feedback-voice-button:disabled { cursor: not-allowed; opacity: .55; }
.feedback-voice-icon { display: grid; place-items: center; width: 21px; height: 21px; font-size: 15px; line-height: 1; }
.feedback-voice-status { min-width: 0; color: #607286; font-size: 10px; line-height: 1.5; }
.feedback-submit-button { flex: 0 0 auto; margin-left: auto; padding: 0 18px; }
.feedback-voice-status[data-status="error"] { color: #a43a3a; }
.feedback-voice-status[data-status="success"] { color: #2f704a; }
.feedback-voice-status[data-status="note"] { color: #596b7d; }
.feedback-voice-row.is-text-only { justify-content: flex-end; }
.feedback-note { margin: -2px 0 1px !important; color: #596b7d !important; font-size: 10px !important; line-height: 1.55 !important; }
.feedback-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

@media (max-width: 560px) {
  .contact-widget { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .contact-widget-panel { width: calc(100vw - 20px); max-height: min(680px, calc(100dvh - 20px)); padding: 15px; border-radius: 14px; }
  .contact-widget-trigger { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); min-height: 46px; padding: 0 15px; font-size: 11px; }
  .contact-widget-panel { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .toast { right: 10px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 20px); }
}

@media (max-width: 1050px) and (min-width: 851px) {
  .shop-detail-grid.has-image.has-location-map { grid-template-areas: "media info" "location location"; grid-template-columns: minmax(220px, .64fr) minmax(0, 1.36fr); }
  .shop-detail-grid.has-image.has-location-map .detail-media-shop { grid-area: media; margin: 28px 20px 24px 28px; }
  .shop-detail-grid.has-image.has-location-map .detail-info { grid-area: info; }
  .shop-detail-grid.has-image.has-location-map .detail-location-card { display: grid; grid-area: location; grid-template-areas: "heading map" "caption map"; grid-template-columns: minmax(190px, .3fr) minmax(0, .7fr); grid-template-rows: auto 1fr; align-self: stretch; column-gap: 20px; margin: 0 28px 28px; padding: 16px; }
  .shop-detail-grid.has-image.has-location-map .detail-location-heading { grid-area: heading; justify-content: flex-end; margin: 0; }
  .shop-detail-grid.has-image.has-location-map .detail-location-map { grid-area: map; height: 220px; min-height: 220px; }
  .shop-detail-grid.has-image.has-location-map .detail-location-caption { grid-area: caption; align-self: start; margin: 12px 0 0; }
}

@media (max-width: 850px) {
  body.detail-mode .detail-view { width: min(100% - 30px, 720px); }
  .detail-primary-grid { grid-template-columns: 1fr; }
  .detail-primary-grid.no-image.has-location-map { grid-template-columns: 1fr; }
  .shop-detail-grid.has-image.has-location-map { grid-template-columns: 1fr; }
  .detail-primary-grid.no-image .detail-info { padding: 26px 22px 24px; }
  .detail-location-card { align-self: stretch; margin: 0 22px 24px; }
  .shop-detail-grid.has-image .detail-media-shop { justify-self: center; width: min(280px, calc(100% - 44px)); margin: 24px auto 0; }
  .shop-detail-grid.has-image .detail-info { border-left: 0; }
  .shop-detail-grid.has-image.has-location-map .detail-location-card { display: block; margin: 0 22px 24px; padding: 15px; }
  .shop-detail-grid.has-image.has-location-map .detail-location-heading { align-items: flex-end; flex-direction: row; justify-content: space-between; margin: 0 2px 12px; }
  .shop-detail-grid.has-image.has-location-map .detail-location-map { height: 260px; min-height: 260px; }
  .detail-media { padding: 15px; }
  .detail-visual { aspect-ratio: 16 / 10; }
  .detail-info { padding: 22px; }
  .detail-source-card { align-items: flex-start; flex-direction: column; gap: 16px; }
  .saved-local-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-special-metadata-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  body.detail-mode .detail-view { width: calc(100% - 24px); padding-top: 24px; }
  .detail-heading { margin-bottom: 20px; }
  .detail-heading h1 { font-size: clamp(25px, 8vw, 34px); line-height: 1.25; }
  .detail-lead { margin-top: 10px; font-size: 13px; line-height: 1.75; }
  .detail-primary-grid { border-radius: 14px; }
  .detail-media { padding: 11px; }
  .detail-visual { border-radius: 10px; }
  .detail-media-contain .detail-visual > img { padding: 6px; }
  .detail-info { padding: 18px 15px 20px; }
  .detail-primary-grid.no-image .detail-info { padding: 22px 15px 20px; }
  .detail-location-card { margin: 0 15px 20px; padding: 12px; border-radius: 12px; }
  .detail-location-heading { align-items: flex-start; flex-direction: column; gap: 7px; margin-bottom: 10px; }
  .detail-location-map { height: 220px; min-height: 220px; border-radius: 9px; }
  .shop-detail-grid.has-image .detail-media-shop { width: min(250px, calc(100% - 30px)); margin-top: 18px; }
  .shop-detail-grid.has-image .detail-media-shop .detail-visual { height: 180px; }
  .shop-detail-grid.has-image.has-location-map .detail-location-card { margin: 0 15px 20px; padding: 12px; }
  .shop-detail-grid.has-image.has-location-map .detail-location-heading { align-items: flex-start; flex-direction: column; gap: 7px; margin: 0 0 10px; }
  .shop-detail-grid.has-image.has-location-map .detail-location-map { height: 220px; min-height: 220px; }
  .detail-facts > div { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
  .detail-actions { display: grid; grid-template-columns: 1fr; }
  .detail-action, .detail-official-button { width: 100%; }
  .detail-source-card, .detail-subsection { padding: 18px 16px; border-radius: 13px; }
  .detail-source-card h2 { font-size: 15px; }
  .detail-source-card dl { display: grid; gap: 5px; }
  .detail-event-list { grid-template-columns: 1fr; }
  .detail-special-metadata-list { grid-template-columns: 1fr; }
  .detail-related-shop { grid-template-columns: 62px minmax(0, 1fr) auto; }
  .detail-related-image { width: 62px; height: 48px; }
  .detail-related-group-heading { align-items: flex-start; }
  .detail-related-grid { grid-template-columns: 1fr; }
  .detail-related-item { grid-template-columns: 72px minmax(0, 1fr) auto; min-height: 78px; }
  .detail-related-item-media { width: 72px; height: 58px; }
  .catalog-error { align-items: flex-start; flex-wrap: wrap; }
  .catalog-error span { flex-basis: 100%; }
  .saved-local-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .header-inner, .hero-inner, .page-section, .footer-inner { width: calc(100% - 24px); }.brand-copy { display: grid; gap: 0; }.brand-copy strong { font-size: 13px; }.brand-copy span { font-size: 11px; }.hero h1 { letter-spacing: .04em; }.hero-lead { font-size: 13px; }.filter-grid { grid-template-columns: 1fr; }.check-label { grid-column: auto; }.filter-actions { grid-template-columns: 1fr; }.popular-row { flex-wrap: nowrap; }.shop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }.shop-card:nth-child(n+3) { display: none; }.shop-photo, .shop-card.no-image .shop-photo { height: 92px; }.shop-card.no-image .media-fallback { padding: 12px 10px 11px; }.shop-card.no-image .media-fallback > strong { max-width: 72%; font-size: 16px !important; }.shop-body { padding: 9px; }.shop-body h2 { font-size: 11px; }.map-browser { grid-template-columns: 1fr; }.mini-map { min-height: 165px; }.map-shop-list { display: none; }.event-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.event-card:nth-child(3) { display: none; }.event-card-image { height: 91px; }.product-grid, .lower-grid .product-grid { grid-template-columns: 1fr; }.article-card { grid-template-columns: 125px 1fr; }.article-copy { padding: 10px; }.article-copy h2 { font-size: 12px; }.article-copy p { font-size: 9px; }.section-heading h2 { font-size: 15px; }
}

@media (max-width: 850px) {
  .site-header.mobile-open { height: auto; }
  .site-header.mobile-open .header-inner { flex-wrap: wrap; min-height: 64px; }
  .site-header.mobile-open .main-nav { position: absolute; top: 64px; right: 0; left: 0; display: grid; gap: 0; padding: 5px 15px 12px; border-bottom: 1px solid var(--line); background: #fff; box-shadow: 0 12px 20px rgba(19,51,91,.1); }
  .site-header.mobile-open .main-nav a { padding: 13px 9px; border-bottom: 1px solid #edf0f4; font-size: 13px; }
  .site-header.mobile-open .main-nav a::after { display: none; }
  .site-header.mobile-open .header-actions { position: absolute; top: 292px; right: 0; left: 0; display: flex; justify-content: center; padding: 12px 16px; background: #fff; box-shadow: 0 12px 20px rgba(19,51,91,.1); }
  .site-header.mobile-open .global-search { width: min(100%, 280px); }
}

/* ページングはAPIが返したページ内の全カードを表示する。 */
@media (max-width: 1180px) {
  .shop-card:nth-child(n) { display: block; }
}

.menu-backdrop[hidden] { display: none; }
.menu-backdrop { display: none; }

@media (max-width: 850px) {
  .site-header.mobile-open { height: auto; max-height: 100vh; overflow-y: auto; }
  .site-header.mobile-open .header-inner { display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 0 12px; min-height: 64px; }
  .site-header.mobile-open .main-nav { position: static; grid-column: 1 / -1; display: grid; gap: 0; padding: 5px 0 0; border-bottom: 0; box-shadow: none; }
  .site-header.mobile-open .main-nav a { padding: 13px 9px; border-bottom: 1px solid #edf0f4; font-size: 13px; }
  .site-header.mobile-open .header-actions { position: static; grid-column: 1 / -1; display: flex; justify-content: center; padding: 12px 0 16px; border-bottom: 1px solid var(--line); box-shadow: none; }
  .menu-backdrop { position: fixed; z-index: 19; inset: 64px 0 0; display: block; background: rgba(8, 35, 69, .24); }
  body.menu-open { overflow: hidden; }
}

/* CDP検証で確認した小画面のレイアウトとセクション遷移を安定させる。 */
#shops, #map, #events, #products, #articles { scroll-margin-top: 86px; }
.shop-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 260px)); justify-content: center; }
.event-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); justify-content: center; }
.event-grid[data-count="1"] { grid-template-columns: minmax(0, 300px); }
.event-copy, .hero-event-row { min-width: 0; }
.sparse-note { margin: 12px 0 0; padding: 9px 12px; border: 1px solid #d9e5ef; border-radius: 8px; background: #f8fbfd; color: #52677e; font-size: 10px; line-height: 1.6; text-align: center; }
.sparse-note[hidden] { display: none; }

@media (min-width: 1181px) {
  .lower-grid > .map-panel { display: flex; flex-direction: column; }
  .lower-grid > .map-panel .map-browser { flex: 1; }
  .lower-grid .map-browser, .lower-grid .mini-map { min-height: 394px; }
}

@media (max-width: 1180px) {
  .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .event-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .event-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 850px) {
  .site-header .header-inner { position: relative; }
  .site-header .brand { padding-right: 52px; }
  .site-header .menu-toggle,
  .site-header.mobile-open .menu-toggle { position: absolute; top: 13px; right: 0; margin: 0; }
  .site-header.mobile-open .header-inner { position: relative; }
  .site-header.mobile-open .brand { position: static; grid-column: 1; grid-row: 1; align-self: center; padding-right: 0; }
  .site-header.mobile-open .menu-toggle { position: static; grid-column: 2; grid-row: 1; align-self: center; justify-self: end; margin: 0; }
  .site-header.mobile-open .main-nav { grid-row: 2; }
  .site-header.mobile-open .header-actions { grid-row: 3; }
  #shops, #map, #events, #products, #articles { scroll-margin-top: 76px; }
}

@media (max-width: 560px) {
  .hero-inner { padding: 20px 0 18px; }
  .filter-card { padding: 12px 12px 10px; }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .custom-select-trigger { padding: 0 8px; font-size: 11px; }
  .custom-select-prefecture .prefecture-picker-panel { right: -12px; left: auto; width: calc(200% + 31px); max-width: none; transform: none; }
  .check-label { grid-column: 1 / -1; padding-bottom: 2px; }
  .filter-actions { grid-template-columns: 1.15fr .85fr; gap: 7px; margin-top: 8px; }
  .filter-actions .primary-button, .filter-actions .secondary-button { height: 34px; font-size: 11px; }
  .hero-event-card { width: 100%; margin-top: 14px; padding: 12px 11px 10px; }
  .hero-event-row { grid-template-columns: 62px minmax(0, 1fr); gap: 8px; padding: 6px 0; }
  .hero-event-row:nth-child(n + 2) { display: none; }
  .event-image { width: 62px; height: 47px; }
  .event-copy h3 { display: -webkit-box; overflow: hidden; line-height: 1.35; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .outline-link { margin-top: 7px; padding: 7px 8px; }
  .map-panel.map-expanded .map-browser { grid-template-columns: 1fr; min-height: min(62vh, 560px); }
  .map-panel.map-expanded .mini-map { width: 100%; min-height: min(62vh, 560px); }
  .map-panel.map-expanded .map-shop-list { display: none; }
}

/* Public collection routes keep the global navigation while replacing the
   promotional home content with a focused, paginated result list. */
body.collection-mode .hero,
body.collection-mode #shops,
body.collection-mode #catalogSections,
body.collection-mode #detailView { display: none !important; }
body.collection-mode #collectionView { display: block; min-height: calc(100vh - 150px); padding-top: 34px; padding-bottom: 48px; }
.collection-header { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 20px; margin-bottom: 24px; }
.collection-header p { grid-column: 1 / -1; margin: 8px 0 0; color: #2f704a; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.collection-header h1 { margin: 0; color: var(--navy-deep); font-size: clamp(28px, 4vw, 44px); line-height: 1.2; }
.collection-header h1:focus { outline: 0; }
.collection-header > span { color: var(--muted); font-size: 12px; font-weight: 800; }
.collection-shops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.collection-events-grid, .collection-products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.collection-article-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.collection-loading, .collection-empty, .utility-state { padding: 30px; border: 1px solid #dce6ef; border-radius: 16px; background: #fff; box-shadow: 0 12px 34px rgba(30,58,89,.07); }
.collection-empty strong, .utility-state strong { display: block; color: var(--navy-deep); font-size: 18px; }
.collection-empty p, .utility-state p { max-width: 680px; margin: 9px 0 0; color: #5b6f82; font-size: 13px; line-height: 1.8; }
.collection-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; }
.collection-pagination .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-width: 112px; min-height: 44px; text-decoration: none; }
.collection-pagination .disabled { pointer-events: none; opacity: .45; }
.collection-infinite-sentinel { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }
.collection-infinite-sentinel[data-loading="true"] { color: var(--navy); }
.collection-infinite-spinner { width: 18px; height: 18px; flex: 0 0 auto; border: 2px solid #dbe5ef; border-top-color: var(--navy); border-radius: 50%; animation: collection-spinner .8s linear infinite; }
.collection-infinite-sentinel .secondary-button { min-height: 44px; padding: 8px 14px; }
@keyframes collection-spinner { to { transform: rotate(360deg); } }
.shop-experiences-page { display: grid; gap: 18px; }
.shop-experiences-intro { display: grid; gap: 8px; margin-bottom: 2px; }
.shop-experiences-intro p { margin: 8px 0 0; color: #2f704a; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.shop-experiences-intro h1 { margin: 0; color: var(--navy-deep); font-size: clamp(28px, 4vw, 44px); line-height: 1.2; }
.shop-experiences-intro h1:focus { outline: 0; }
.shop-experiences-intro > span { max-width: 760px; color: #5b6f82; font-size: 14px; line-height: 1.8; }
.shop-experience-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 5px; scrollbar-width: thin; }
.shop-experience-tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; flex: 0 0 auto; padding: 0 15px; border: 1px solid #d5e1eb; border-radius: 999px; background: #fff; color: #34536f; font-size: 13px; font-weight: 800; white-space: nowrap; }
.shop-experience-tabs a:hover, .shop-experience-tabs a:focus-visible { border-color: #8db4d1; background: #eef6fb; color: var(--navy); outline: 0; }
.shop-experience-tabs a.is-active { border-color: var(--navy); background: var(--navy); color: #fff; }
.shop-experience-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.shop-experience-summary-card { display: grid; align-content: start; gap: 8px; min-height: 190px; padding: 19px; border: 1px solid #d8e4ed; border-radius: 15px; background: linear-gradient(145deg, #fff, #f3f8fb); box-shadow: 0 6px 18px rgba(30,58,89,.07); color: inherit; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.shop-experience-summary-card:hover, .shop-experience-summary-card:focus-visible { border-color: #8eb5d1; box-shadow: 0 12px 25px rgba(30,58,89,.12); outline: 0; transform: translateY(-2px); }
.shop-experience-summary-kicker { color: #2f704a; font-size: 14px; font-weight: 900; }
.shop-experience-summary-card strong { color: var(--navy-deep); font-size: 27px; line-height: 1.15; }
.shop-experience-summary-card > span:not(.shop-experience-summary-kicker):not(.shop-experience-summary-link) { color: #5b6f82; font-size: 12px; line-height: 1.65; }
.shop-experience-summary-link { align-self: end; margin-top: auto; color: var(--blue); font-size: 13px; font-weight: 800; }
.shop-experience-result-heading { display: flex; align-items: baseline; gap: 10px; color: #5b6f82; }
.shop-experience-result-heading strong { color: var(--navy-deep); font-size: 18px; }
.shop-experience-result-heading span { font-size: 12px; }
.shop-experience-disclaimer { margin: 0; color: #718093; font-size: 12px; line-height: 1.7; }
.shop-experience-preview .section-lead { margin: -3px 0 13px; color: #5b6f82; font-size: 13px; line-height: 1.7; }
.shop-experience-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.shop-experience-badges span { display: inline-flex; align-items: center; min-height: 23px; padding: 3px 7px; border: 1px solid #c8dfd1; border-radius: 999px; background: #f0f9f3; color: #2f704a; font-size: 10px; font-weight: 800; line-height: 1.3; }
@media (max-width: 850px) {
  .shop-experience-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .shop-experience-summary-grid { grid-template-columns: 1fr; gap: 10px; }
  .shop-experience-summary-card { min-height: 160px; padding: 16px; }
  .shop-experience-tabs { margin-inline: -1px; }
  .shop-experience-result-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
}
.utility-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 34px; align-items: start; }
.utility-copy { max-width: 650px; }
.utility-copy h2 { margin: 0 0 16px; color: var(--navy-deep); font-size: 23px; line-height: 1.45; }
.utility-copy h3 { margin: 28px 0 9px; color: var(--navy-deep); font-size: 17px; }
.utility-copy p { margin: 0; color: #536a80; font-size: 14px; line-height: 1.95; }
.utility-layout .feedback-form { width: 100%; max-width: none; margin-top: 0; }
.utility-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.utility-actions .primary-button, .utility-actions .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; text-decoration: none; }
.utility-empty { grid-column: 1 / -1; padding: 22px; border: 1px dashed #d3dee8; border-radius: 12px; background: #f8fafc; }
.detail-more-link { display: flex; align-items: center; justify-content: center; width: max-content; min-height: 44px; margin: 16px auto 0; padding: 0 16px; text-decoration: none; }

/* The map is a real destination, not a same-page jump. It reuses the live map
   and filter state while presenting them as one focused page. */
.map-route-header { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 20px; margin-bottom: 24px; }
.map-route-header[hidden] { display: none; }
.map-route-header p { grid-column: 1 / -1; margin: 8px 0 0; color: #2f704a; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.map-route-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; min-width: 0; }
.map-route-header h1 { min-width: 0; margin: 0; color: var(--navy-deep); font-size: clamp(28px, 4vw, 44px); line-height: 1.2; }
.map-route-count { flex: 0 0 auto; color: #53718a; font-size: 14px; font-weight: 800; white-space: nowrap; }
.map-route-header h1:focus { outline: 0; }
body.map-mode .hero,
body.map-mode #shops,
body.map-mode #collectionView,
body.map-mode #detailView,
body.map-mode .event-panel,
body.map-mode .product-panel,
body.map-mode #articles { display: none !important; }
body.map-mode #catalogSections { display: block !important; }
body.map-mode .lower-grid { display: block; min-height: calc(100vh - 150px); padding-top: 34px; padding-bottom: 48px; }
body.map-mode .map-panel > .section-heading { display: none; }
body.map-mode .map-panel.map-expanded .map-browser { min-height: min(68vh, 700px); }
body.map-mode .map-panel.map-expanded .mini-map { min-height: min(68vh, 700px); }
body.map-mode .map-panel.map-expanded .map-shop-list { max-height: min(68vh, 700px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c5d5e3 transparent; }
body.map-mode .map-cta { display: none; }

/* Collection cards use h2 because they are the first headings under the page h1. */
.event-card-body h2 { margin: 6px 0 4px; color: var(--navy-deep); font-size: 10px; line-height: 1.45; }
.product-card h2 { margin: 0; }
.article-copy h2 { margin: 0 0 7px; color: var(--navy-deep); font-size: 13px; line-height: 1.4; }

/* Primary touch interactions follow the 44px minimum target size. */
.menu-toggle { width: 44px; height: 44px; padding: 12px; }
.detail-action, .detail-official-button, .map-actions .secondary-button, .map-cta,
.custom-select-trigger, .custom-select-option, .filter-actions .primary-button, .filter-actions .secondary-button,
.shop-pagination button, .login-button, .save-button, .dialog-close { min-height: 44px; }
.dialog-close { width: 44px; height: 44px; }

@media (max-width: 850px) {
  .collection-shops-grid, .collection-events-grid, .collection-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-article-grid { grid-template-columns: 1fr; }
  .utility-layout { grid-template-columns: 1fr; }
  .map-route-title-row { align-items: end; gap: 10px; }
  .map-route-count { font-size: 12px; }
  .saved-intro { gap: 18px; padding: 22px; }
  .saved-list-section { padding: 20px 16px 16px; }
}

@media (max-width: 560px) {
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-grid, .collection-events-grid { grid-template-columns: 1fr; }
  .collection-shops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .event-card:nth-child(n), .shop-card:nth-child(n) { display: block; }
  .collection-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.collection-mode #collectionView { width: calc(100% - 24px); padding-top: 20px; }
  .collection-header { grid-template-columns: 1fr; align-items: start; }
  .map-route-header { grid-template-columns: 1fr; align-items: start; }
  .collection-header > span { justify-self: start; }
  .collection-pagination { gap: 8px; }
  .collection-pagination .secondary-button { min-width: 94px; }
  .custom-select-trigger, .filter-actions .primary-button, .filter-actions .secondary-button { height: 44px; }
  .detail-heading h1 { font-size: clamp(24px, 7.2vw, 31px); overflow-wrap: anywhere; }
  .detail-heading h1.detail-title-long { font-size: clamp(22px, 6.5vw, 30px); }
  .detail-heading h1.detail-title-dense { font-size: clamp(20px, 6vw, 28px); }
  .utility-state, .collection-empty { padding: 22px 18px; }
  .utility-actions { display: grid; grid-template-columns: 1fr; }
  .utility-actions .primary-button, .utility-actions .secondary-button { width: 100%; }
  .saved-intro { grid-template-columns: 1fr; gap: 16px; padding: 20px 18px; }
  .saved-intro-actions { justify-content: stretch; }
  .saved-intro-actions .primary-button { width: 100%; }
  .saved-list-section { padding: 17px 12px 12px; }
  .saved-list-heading { align-items: flex-start; margin-bottom: 12px; }
  .saved-list-heading h2 { font-size: 16px; }
  .saved-empty-state { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 18px 16px; }
  .saved-empty-state .secondary-button { grid-column: 1 / -1; width: 100%; }
  .account-card { padding: 20px 18px; }
  .account-profile-list > div { grid-template-columns: 1fr; gap: 5px; }
  .account-page-actions { display: grid; grid-template-columns: 1fr; }
  .account-page-actions > * { width: 100%; }
}

/* The corporate site remains the single source for operator information. Keep
   that link in the same navigation rhythm as every other footer destination. */
.site-footer .footer-inner { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(420px, 1.3fr); align-items: start; gap: clamp(28px, 5vw, 72px); min-height: 0; padding: 32px 0 24px; }
.footer-brand-block { min-width: 0; }
.footer-brand-block p { max-width: 270px; margin: 12px 0 0; color: #5f6f82; font-size: 10px; line-height: 1.7; }
.site-footer .footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px 18px; padding-top: 2px; color: #51647a; font-size: 11px; }
.site-footer .footer-links a { display: inline-flex; align-items: center; min-height: 34px; width: max-content; max-width: 100%; font-weight: 700; }
.site-footer .footer-links a:hover, .site-footer .footer-links a:focus-visible { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .footer-links .footer-operator-link { color: inherit; }
.footer-operator-link > span[aria-hidden] { margin-left: 3px; color: currentColor; font-size: .9em; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1340px, calc(100% - 64px)); margin: 0 auto; padding: 14px 0 18px; border-top: 1px solid #e5ebf1; }
.footer-bottom p { margin: 0; color: #5f6b7a; font-size: 9px; line-height: 1.65; }
.footer-notice { max-width: 760px; }
.footer-copyright { flex: 0 0 auto; text-align: right; white-space: nowrap; }

/* HIG interaction contract: keep the visual control compact while giving
   pointer and touch users a stable 44px hit box. */
.site-header { height: calc(72px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
.site-header .header-inner { height: calc(100% - env(safe-area-inset-top, 0px)); }
.main-nav a, .section-heading a, .link-button, .brand.footer-brand,
.global-search-submit, .bookmark, .leaflet-control-zoom a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
.main-nav a { min-width: 44px; }
.global-search { height: 44px; }
.global-search input { height: 44px; }
.global-search-submit { flex-basis: 44px; width: 44px; height: 44px; }
.bookmark { width: 44px; height: 44px; }
.section-heading a, .link-button { padding: 0 8px; }
.brand.footer-brand { padding: 4px 0; }
.site-header .brand { min-height: 44px; }
.detail-facts a { display: inline-flex; align-items: center; min-height: 44px; }
.leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
.popular-row button, .area-tabs button { min-height: 44px; padding: calc(13px / 3) 13px; }
.popular-row button, .area-tabs button { min-width: 44px; }
.outline-link { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.feedback-form input:not([type="hidden"]), .feedback-form textarea { min-height: 44px; }
.feedback-form .primary-button { min-height: 44px; height: 44px; }
.utility-copy .primary-button { min-height: 44px; }
.check-label { position: relative; min-height: 44px; padding-top: 0; padding-bottom: 0; }
.check-label input { position: absolute; width: 44px; height: 44px; margin: 0; opacity: 0; }
.check-label span { display: inline-flex; align-items: center; min-height: 44px; padding-left: 32px; position: relative; }
.check-label span::before { position: absolute; left: 0; width: 22px; height: 22px; border: 1px solid #aebdcb; border-radius: 5px; background: #fff; content: ""; }
.check-label input:checked + span::before { border-color: var(--navy); background: var(--navy); }
.check-label input:checked + span::after { position: absolute; top: 13px; left: 7px; width: 8px; height: 4px; border-bottom: 2px solid #fff; border-left: 2px solid #fff; content: ""; transform: rotate(-45deg); }
.prefecture-island-cell-button { min-height: 44px; }
.shop-body h2, .event-card-body h2, .product-card h2, .article-copy h2 { overflow-wrap: anywhere; }

@media (max-width: 850px) {
  .site-header { height: calc(64px + env(safe-area-inset-top, 0px)); }
  .site-header .header-inner { height: calc(100% - env(safe-area-inset-top, 0px)); }
  .site-header.mobile-open .main-nav { top: calc(64px + env(safe-area-inset-top, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .shop-card:hover { transform: none; }
}

/* Keep compact metadata readable when the optional HIG text-floor gate is
   enabled. These are intentionally still secondary styles, but never below
   10px so browser zoom and assistive technology retain a legible baseline. */
.shop-meta, .shop-description, .event-copy p, .event-tag,
.event-card-date, .event-card-region, .event-card-status,
.article-tag, .article-type-label, .article-footer,
.map-shop-row strong, .map-shop-row small,
.media-fallback > span, .media-fallback-compact > strong,
.footer-notice, .footer-copyright,
.detail-location-heading p, .detail-location-caption span,
.detail-related-item-copy > span, .detail-related-item-copy small,
.detail-event-row small, .detail-event-date,
.detail-section-heading p, .detail-source-kicker,
.detail-location-heading a, .detail-location-caption,
.event-card-body p, .event-card-body h2 { font-size: 10px; }
.media-fallback > span { font-size: 10px; }
.footer-bottom p, .footer-operator-link > span[aria-hidden] { font-size: 10px; }
.detail-media figcaption { font-size: 10px; }
.article-copy p, .detail-article-body p { font-size: 10px; }

@media (max-width: 1180px) {
  .site-footer .footer-inner, .footer-bottom { width: min(100% - 38px, 1060px); }
  .site-footer .footer-inner { grid-template-columns: minmax(210px, .65fr) minmax(390px, 1.35fr); gap: 28px; }
}

@media (max-width: 850px) {
  .site-footer .footer-inner, .footer-bottom { width: min(100% - 30px, 720px); }
  .site-footer .footer-inner { grid-template-columns: minmax(180px, .7fr) minmax(360px, 1.3fr); gap: 22px; padding: 26px 0 20px; }
  .site-footer .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
  .footer-copyright { text-align: left; }
}

@media (max-width: 560px) {
  .site-footer .footer-inner, .footer-bottom { width: calc(100% - 24px); }
  .site-footer .footer-inner { grid-template-columns: 1fr; gap: 20px; padding: 24px 0 18px; }
  .site-footer .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 3px 0 5px; }
  .site-footer .footer-links a { min-height: 44px; }
  .footer-bottom { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .footer-copyright { white-space: normal; }
}

/* Feedback panel polish: keep the floating entry point quiet, while giving
   the expanded form a clear reading order and a calm, brand-aligned surface.
   The header stays fixed and only the body scrolls when a short viewport or a
   long draft needs more room. */
.contact-widget-trigger {
  min-height: 50px;
  padding: 0 19px;
  border-color: #0a477f;
  background: linear-gradient(135deg, #0e3b74 0%, #145d9f 100%);
  box-shadow: 0 14px 34px rgba(13, 55, 109, .25), 0 2px 5px rgba(13, 55, 109, .12);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.contact-widget-trigger:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(13, 55, 109, .28), 0 3px 7px rgba(13, 55, 109, .13); }
.contact-widget-trigger:active { transform: translateY(0); }
.contact-widget-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(440px, calc(100vw - 40px));
  max-height: min(700px, calc(100dvh - 32px));
  overflow: hidden;
  padding: 0;
  border-color: #cbd9e5;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
  box-shadow: 0 25px 72px rgba(15, 42, 76, .24), 0 3px 9px rgba(15, 42, 76, .08);
}
.contact-widget-panel[hidden] { display: none; }
.contact-widget-panel::before {
  position: absolute;
  inset: 0 20px auto;
  height: 3px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, var(--green), #53a9bd 56%, var(--blue));
  content: "";
}
.contact-widget-head {
  position: relative;
  min-width: 0;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #e6eef4;
  background: rgba(255, 255, 255, .86);
}
.contact-widget-heading { min-width: 0; }
.contact-widget-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #357e83;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.3;
}
.contact-widget-head h2 { font-size: 21px; letter-spacing: .015em; line-height: 1.7142857; }
.contact-widget-close {
  flex-basis: 1.7142857em;
  width: 1.7142857em;
  height: 1.7142857em;
  border-color: #d4e0e9;
  border-radius: 10px;
  background: #f5f8fb;
  color: #31516f;
  font-size: 21px;
  font-weight: 400;
}
.contact-widget-close:hover, .contact-widget-close:focus-visible { background: #edf5fb; }
.contact-widget-body {
  min-height: 0;
  overflow: auto;
  padding: 0 22px 22px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.contact-widget-lead {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0 0;
  padding: 11px 12px;
  border: 1px solid #dcebf1;
  border-radius: 11px;
  background: #f3f9fb;
  color: #506a80;
  font-size: 11px;
  line-height: 1.65;
}
.contact-widget-lead::before {
  flex: 0 0 4px;
  width: 4px;
  min-height: 18px;
  border-radius: 4px;
  background: var(--green);
  content: "";
}
.contact-widget-lead strong { display: block; color: #26445f; font-weight: 700; }
.contact-widget-panel .feedback-form {
  gap: 12px;
  margin-top: 17px;
  padding: 0;
  border: 0;
  background: transparent;
}
.feedback-form label { gap: 7px; color: #36536d; font-size: 11px; }
.feedback-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feedback-label::after {
  color: #7b91a4;
  content: "必須";
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
}
.feedback-form textarea {
  min-height: 136px;
  padding: 13px 14px;
  border-color: #cbdbe7;
  border-radius: 12px;
  background: #fcfeff;
  color: #1f3d58;
  font-size: 13px;
  line-height: 1.7;
  resize: vertical;
}
.feedback-form textarea::placeholder { color: #8a9bad; }
.feedback-form textarea:focus { border-color: #4285b4; box-shadow: 0 0 0 4px rgba(33, 113, 186, .12); background: #fff; }
.feedback-voice-row { gap: 9px; margin-top: 0; }
.feedback-voice-button {
  min-height: 44px;
  padding: 0 14px;
  border-color: #c2d7e5;
  border-radius: 12px;
  background: #eef6fb;
  color: #164d78;
}
.feedback-voice-button:hover, .feedback-voice-button:focus-visible { border-color: #68a1c8; background: #e5f1f8; }
.feedback-voice-button[data-recording] { border-color: #c36158; background: #fff1ef; color: #9d322c; }
.feedback-voice-icon { width: 19px; height: 19px; }
.feedback-voice-icon svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.feedback-submit-button { min-width: 112px; border-radius: 12px; padding: 0 17px; }
.feedback-note {
  margin: 0 2px 1px !important;
  color: #64788c !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
}
.feedback-voice-status[data-status="error"], .feedback-voice-status[data-status="success"] {
  margin-right: 0 !important;
  padding: 9px 11px;
  border-radius: 9px;
}
.feedback-voice-status[data-status="error"] { background: #fff4f3; color: #a43a3a !important; }
.feedback-voice-status[data-status="success"] { background: #eff9f1; color: #2f704a !important; }
.feedback-result { min-height: 0; font-size: 11px; line-height: 1.6; }
.feedback-result:empty { display: none; }

@media (max-width: 560px) {
  .contact-widget-panel {
    width: calc(100vw - 20px);
    max-height: min(700px, calc(100dvh - 20px));
    border-radius: 18px;
  }
  .contact-widget-head { padding: 17px 16px 14px; }
  .contact-widget-body { padding: 0 16px 16px; }
  .contact-widget-eyebrow { font-size: 9px; }
  .contact-widget-head h2 { font-size: 19px; line-height: 1.7142857; }
  .contact-widget-close { flex-basis: 1.7142857em; width: 1.7142857em; height: 1.7142857em; font-size: 19px; }
  .contact-widget-lead { margin-top: 13px; padding: 10px 11px; }
  .contact-widget-panel .feedback-form { margin-top: 15px; }
  .feedback-form textarea { min-height: 122px; }
  .feedback-voice-button { flex: 1 1 auto; }
  .feedback-submit-button { min-width: 104px; padding: 0 14px; }
}

/* Button rhythm: the visual padding on every bordered/action control is one
   third of its horizontal padding.  The HIG block below still supplies the
   44px hit target, so compact visuals never reduce touch accessibility. */
.custom-select-trigger { padding: calc(11px / 3) 11px; }
.custom-select-option { padding: calc(9px / 3) 9px; }
.prefecture-picker-clear { padding: calc(10px / 3) 10px; }
.primary-button, .secondary-button { height: auto; padding: calc(12px / 3) 12px; }
.outline-link { padding: calc(10px / 3) 10px; }
.search-summary button { padding: calc(11px / 3) 11px; }
.catalog-error button { padding: calc(10px / 3) 10px; }
.detail-action, .detail-official-button { padding: calc(15px / 3) 15px; }
.map-actions .secondary-button { padding: calc(12px / 3) 12px; }
.map-cta { padding-block: 0; padding-inline: 0; }
.saved-empty-state .secondary-button { padding: calc(16px / 3) 16px; }
.collection-pagination .secondary-button { padding: calc(12px / 3) 12px; }
.shop-pagination .secondary-button { padding: calc(12px / 3) 12px; }
.utility-actions .primary-button, .utility-actions .secondary-button { padding: calc(18px / 3) 18px; }
.detail-more-link { padding: calc(16px / 3) 16px; }
.feedback-form .primary-button { padding: calc(18px / 3) 18px; }
.feedback-voice-button { padding: calc(14px / 3) 14px; }
.feedback-submit-button { padding: calc(17px / 3) 17px; }
.feedback-form .feedback-submit-button { padding: calc(17px / 3) 17px; }
.prefecture-island-cell-button { padding: calc(1px / 3) 1px; }
.section-heading a, .link-button { padding-block: calc(8px / 3); }
.contact-widget-trigger { padding: calc(19px / 3) 19px; }

@media (max-width: 560px) {
  .custom-select-trigger { padding: calc(8px / 3) 8px; }
  .contact-widget-trigger { padding: calc(15px / 3) 15px; }
  .feedback-submit-button { padding: calc(14px / 3) 14px; }
  .feedback-form .feedback-submit-button { padding: calc(14px / 3) 14px; }
}

/* Interactive typography: text that can be activated, selected, or edited
   must remain legible at 16px or larger.  Icon-only controls keep their
   geometry; the rule is harmless for their SVG-only contents. */
button, a, input:not([type="hidden"]), textarea,
[role="button"], [role="link"], [role="option"], [role="combobox"] {
  font-size: 16px !important;
}
button *:not(svg):not(path):not(.sr-only),
a *:not(svg):not(path):not(.sr-only),
label, label *:not(svg):not(path):not(.sr-only) {
  font-size: 16px !important;
}
input:not([type="hidden"])::placeholder,
textarea::placeholder { font-size: 16px !important; }
.contact-widget-close { font-size: 21px !important; }
@media (max-width: 560px) {
  .contact-widget-close { font-size: 19px !important; }
}

/* Preserve the vertical breathing room that these controls had before the
   interactive text floor was raised to 16px.  A control's effective y-space
   includes the free space supplied by min-height/height, not only its
   declared padding, so the hit box grows with the new line box while the
   existing one-third padding rhythm remains intact. */
.login-button { min-height: 48px; }
.save-button { min-height: 50px; }
.custom-select-trigger,
.custom-select-option,
.primary-button,
.secondary-button { min-height: 48px; }
.filter-actions .primary-button,
.filter-actions .secondary-button { min-height: 48px; }
.feedback-form .primary-button { min-height: 50px; }
.utility-copy .primary-button { min-height: 48px; }
.popular-row button,
.area-tabs button { min-height: 52px; }
.outline-link { min-height: 50px; }
.prefecture-picker-clear { min-height: 44px; }
.search-summary button { min-height: 44px; }
.catalog-error button { min-height: 44px; }
.detail-action,
.detail-official-button { min-height: 48px; }
.detail-facts a { min-height: 50px; }
.map-actions .secondary-button,
.map-cta { min-height: 52px; }
.saved-empty-state .secondary-button,
.collection-pagination .secondary-button,
.shop-pagination .secondary-button { min-height: 48px; }
.utility-actions .primary-button,
.utility-actions .secondary-button { min-height: 50px; }
.detail-more-link { min-height: 52px; }
.feedback-voice-button,
.feedback-submit-button { min-height: 50px; }
.prefecture-island-cell-button { min-height: 51px; }
.prefecture-island-cell-button > span {
  display: block;
  flex: 0 0 auto;
  max-width: none;
  white-space: nowrap;
  transform: scaleX(.62);
  transform-origin: center;
}
.check-label,
.check-label span { min-height: 50px; }
.section-heading a,
.link-button { min-height: 52px; }
.contact-widget-trigger { min-height: 54px; }
.site-footer .footer-links a { min-height: 40px; }

@media (max-width: 560px) {
  .site-footer .footer-links a { min-height: 50px; }
  .prefecture-island-cell-button > span { transform: scaleX(.5); }
}

/* Prevent long shop names in the adjacent list from collapsing the map
   column to zero width.  Both grid tracks and the list's text column must be
   allowed to shrink below their min-content size. */
.map-browser { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.map-browser .mini-map { min-width: 0; }
.map-browser .map-shop-list { min-width: 0; overflow: hidden; }

.map-browser .map-shop-row { grid-template-columns: 40px minmax(0, 1fr) 15px; min-width: 0; }
.map-browser .map-shop-row > span:nth-child(2) { min-width: 0; }

/* Keep the desktop map preview visually occupied when the adjacent event
   column is taller.  The preview shows enough nearby shops to use the panel
   height, while a small anchored summary makes the remaining catalogue
   explicit instead of leaving a large undifferentiated white block. */
.map-list-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: auto 2px 0;
  padding: 8px 6px 4px;
  border-top: 1px solid #e5edf3;
  color: #2f6288;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}
.map-list-more span { margin-left: 4px; color: #6d8ba5; }

@media (min-width: 1181px) {
  .map-browser .map-shop-list {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c5d5e3 transparent;
  }
}

@media (max-width: 850px) {
  .map-list-more { display: none; }
}

/* Unknown/legacy media starts in a conservative letterbox treatment.  The
   shape-aware rules at the end of the stylesheet refine this once the
   crawler/browser knows whether the asset is portrait, square, or landscape. */
.product-card-image,
.event-card-image,
.article-image { background: #f1f5f8; }
.product-card-image > img,
.event-card-image > img,
.article-image > img { object-fit: contain; padding: 7px; }
.product-card { min-height: 232px; }
.product-card-image { flex-basis: 132px; height: 132px; }
.shop-photo > img[data-media-shape="portrait"],
.shop-photo > img[data-media-shape="square"] { object-fit: contain; padding: 7px; background: #f1f5f8; }
.article-card { align-items: start; }
.article-image { height: 180px; min-height: 180px; align-self: start; }
.article-copy h2,
.article-copy p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; }
.article-copy h2 { -webkit-line-clamp: 3; }
.article-copy p { -webkit-line-clamp: 6; }

@media (max-width: 850px) {
  .article-image { height: 165px; min-height: 165px; }
}

@media (max-width: 560px) {
  .article-image { height: 150px; min-height: 150px; }
}

/* Keep a compact desktop header for ordinary PC and laptop widths. The
   enlarged HIG hit targets need tighter spacing here, but the full
   navigation remains visible instead of looking like a phone layout. */
@media (min-width: 1101px) and (max-width: 1180px) {
  .header-inner { width: min(100% - 38px, 1060px); gap: 8px; }
  .brand { width: 238px; min-width: 238px; flex: 0 0 238px; gap: 8px; }
  .brand-mark { width: 39px; height: 46px; flex-basis: 39px; }
  .main-nav { min-width: 0; gap: 10px; }
  .header-actions { gap: 5px; }
  .global-search { width: 180px; }
}

@media (min-width: 1181px) and (max-width: 1320px) {
  .header-inner { width: min(1340px, calc(100% - 64px)); gap: 8px; }
  .brand { width: 238px; min-width: 238px; flex: 0 0 238px; gap: 8px; }
  .brand-mark { width: 39px; height: 46px; flex-basis: 39px; }
  .main-nav { min-width: 0; gap: 10px; }
  .header-actions { gap: 5px; }
  .global-search { width: 180px; }
}

/* A tighter desktop tier keeps the full navigation usable on small laptops
   without changing the interactive text floor. */
@media (min-width: 1001px) and (max-width: 1100px) {
  .header-inner { width: min(100% - 38px, 1060px); gap: 4px; }
  .brand { width: 231px; min-width: 231px; flex: 0 0 231px; gap: 8px; }
  .brand-mark { width: 32px; height: 38px; flex: 0 0 32px; }
  .main-nav { min-width: 0; gap: 4px; }
  .header-actions { gap: 3px; }
  .global-search { width: 128px; }
}

/* Below the compact desktop range the navigation cannot fit without
   horizontal overflow, so switch to the accessible menu shell. */
@media (min-width: 851px) and (max-width: 1000px) {
  .header-inner { width: min(100% - 38px, 1060px); gap: 20px; }
  .brand { min-width: 0; }
  .main-nav,
  .header-actions { display: none; }
  .menu-toggle { display: block; width: 44px; height: 44px; margin-left: auto; padding: 12px; }
  .site-header.mobile-open { height: auto; max-height: 100vh; overflow-y: auto; }
  .site-header.mobile-open .header-inner { display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 0 12px; min-height: 72px; position: relative; }
  .site-header.mobile-open .brand { grid-column: 1; grid-row: 1; align-self: center; }
  .site-header.mobile-open .menu-toggle { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; margin: 0; }
  .site-header.mobile-open .main-nav { position: static; grid-column: 1 / -1; display: grid; gap: 0; padding: 5px 0 0; border-bottom: 0; }
  .site-header.mobile-open .main-nav a { padding: 13px 9px; border-bottom: 1px solid #edf0f4; }
  .site-header.mobile-open .header-actions { position: static; grid-column: 1 / -1; display: flex; justify-content: center; padding: 12px 0 16px; border-bottom: 1px solid var(--line); }
  .site-header.mobile-open .global-search { width: min(100%, 360px); }
  .menu-backdrop { position: fixed; z-index: 19; inset: 72px 0 0; display: block; background: rgba(8, 35, 69, .24); }
  body.menu-open { overflow: hidden; }
}

/* Final responsive polish: the mobile shell should read as a deliberate
   navigation sheet, not as a desktop flex row squeezed into a phone. Two
   columns keep the expanded menu short and avoid a large blank vertical rail. */
@media (max-width: 1000px) {
  .site-header.mobile-open .main-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    justify-items: stretch;
    gap: 6px;
    width: 100%;
  }

  .site-header.mobile-open .main-nav a {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    min-height: 50px;
    padding: 12px;
    border-radius: 9px;
  }

  .site-header.mobile-open .main-nav a:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 3px);
  }

  .site-header.mobile-open .main-nav a:hover,
  .site-header.mobile-open .main-nav a:focus-visible {
    background: #f2f7fb;
  }
}

@media (max-width: 560px) {
  /* Keep the compact wordmark on one clear line while the menu is closed.
     The 360px fallback below preserves the lock-up on very narrow phones. */
  .site-header .brand-copy {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
  }

  .site-header .brand-copy strong,
  .site-header .brand-copy span {
    font-size: 16px !important;
    line-height: 1.2;
  }

  .site-header:not(.mobile-open) .brand {
    width: calc(100% - 52px);
    max-width: calc(100% - 52px);
    padding-right: 0;
  }

  .site-header.mobile-open .header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    justify-content: stretch;
    gap: 8px;
    padding: 12px 0 16px;
  }

  .site-header.mobile-open .global-search {
    width: 100%;
    min-width: 0;
  }

  .site-header.mobile-open .login-button,
  .site-header.mobile-open .save-button {
    min-width: 0;
    padding-inline: 0;
  }

  .site-header.mobile-open .save-button { gap: 4px; }

  .hero-inner {
    padding-top: 24px;
    padding-bottom: 20px;
  }

  .hero h1 {
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.22;
    letter-spacing: .02em;
  }

  .hero-lead {
    margin: 9px 0 17px;
    font-size: 14px;
    line-height: 1.65;
  }

  .filter-card {
    padding: 12px;
    border-radius: 14px;
  }

  .filter-grid { gap: 8px; }

  /* A full-width category field prevents a lone final character from
     wrapping in the two-column phone layout. */
  .filter-field:nth-child(3) { grid-column: 1 / -1; }

  .custom-select-trigger {
    min-height: 52px;
    line-height: 1.3;
  }

  .custom-select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .filter-actions {
    gap: 8px;
    margin-top: 10px;
  }

  .filter-actions .primary-button,
  .filter-actions .secondary-button {
    min-height: 50px;
    line-height: 1.35;
  }

  .popular-row { margin-top: 10px; }
  .hero-event-card { margin-top: 16px; }

  .section-heading {
    align-items: flex-start;
    gap: 8px;
  }

  .section-heading h2 { line-height: 1.45; }
  .page-section { padding-top: 24px; }
  .lower-grid { gap: 30px; padding-top: 30px; }
}

@media (max-width: 359px) {
  .site-header .brand-copy {
    display: grid;
    align-items: start;
    gap: 0;
  }

  .site-header .brand-copy strong,
  .site-header .brand-copy span {
    font-size: 15px !important;
  }
}

/* The primary navigation is intentionally compact but scannable: each
   destination keeps a small visual cue at its leading edge, while the
   search control owns the available header space only when it is in use. */
.main-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: color .2s ease, opacity .22s ease, transform .22s ease;
}
.nav-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}
.main-nav {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  gap: clamp(22px, 2.7vw, 42px);
  clip-path: inset(0 0 0 0);
  transition: max-width .34s cubic-bezier(.22, .61, .36, 1), opacity .28s ease, clip-path .34s cubic-bezier(.22, .61, .36, 1), transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .34s;
}
.global-search {
  flex: 0 1 auto;
  width: 44px;
  min-width: 44px;
  padding-left: 0;
  overflow: hidden;
  transition: width .24s ease, min-width .24s ease, padding-left .24s ease, border-color .2s ease, box-shadow .2s ease;
}
.global-search input {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  padding: 0;
  opacity: 0;
  transition: flex-basis .24s ease, width .24s ease, opacity .16s ease;
}
.global-search-submit { flex: 0 0 44px; width: 44px; }
.site-header.search-focused .global-search {
  width: min(320px, calc(100vw - 220px));
  min-width: min(320px, calc(100vw - 220px));
  padding-left: 13px;
}
.site-header.search-focused .global-search input {
  flex: 1 1 auto;
  width: 100%;
  opacity: 1;
}
.site-header.search-focused .main-nav {
  flex: 1 1 0%;
  max-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transform: translateX(-8px);
  transition: max-width .34s cubic-bezier(.22, .61, .36, 1), opacity .28s ease, clip-path .34s cubic-bezier(.22, .61, .36, 1), transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .34s;
}

@media (min-width: 1001px) and (max-width: 1100px) {
  .main-nav { gap: 4px; }
  .nav-icon { flex-basis: 16px; width: 16px; height: 16px; }
  .main-nav a { gap: 4px; }
}

@media (min-width: 1101px) and (max-width: 1180px) {
  .main-nav { gap: 10px; }
}

@media (min-width: 1181px) and (max-width: 1320px) {
  .main-nav { gap: 20px; }
}

@media (max-width: 1000px) {
  .site-header.mobile-open .main-nav {
    gap: 10px 12px;
    height: auto;
    max-height: 190px;
    transition: height .34s cubic-bezier(.22, .61, .36, 1), max-height .34s cubic-bezier(.22, .61, .36, 1), max-width .34s cubic-bezier(.22, .61, .36, 1), opacity .28s ease, clip-path .34s cubic-bezier(.22, .61, .36, 1), transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .34s;
  }

  .site-header.mobile-open .main-nav a {
    gap: 4px;
  }

  .site-header.mobile-open .main-nav a:last-child {
    width: calc(50% - 6px);
  }

  .site-header.mobile-open .global-search {
    width: 44px;
    min-width: 44px;
  }

  .site-header.mobile-open.search-focused .global-search {
    width: min(320px, calc(100vw - 220px));
    min-width: min(320px, calc(100vw - 220px));
  }

  .site-header.mobile-open.search-focused .main-nav {
    height: auto;
    max-height: 0;
    padding-top: 0;
    border-bottom: 0;
    gap: 0;
    overflow: hidden;
  }
}

@media (max-width: 560px) {
  .site-header.mobile-open .header-actions {
    grid-template-columns: 44px auto auto;
  }

  .site-header.mobile-open.search-focused .header-actions {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .site-header.mobile-open.search-focused .global-search {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* Saved-count badge: anchor the count to the button's upper-right shoulder,
   rather than to the bookmark glyph, so the whole control reads as one unit. */
.save-button { position: relative; }
.save-button .save-icon {
  position: static;
  display: grid;
  flex: 0 0 18px;
  place-items: center;
  width: 18px;
  height: 18px;
}
.save-button .save-icon > svg { width: 18px; height: 18px; }
.save-button .save-icon > b {
  position: absolute;
  top: 2px;
  right: -7px;
  display: none;
  place-items: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 11px !important;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.save-button.has-count .save-icon > b { display: grid; }

/* Feature cards use the same vertical rhythm as product cards.  Keeping the
   media frame above the copy gives headlines the full card width, so long
   Japanese titles can wrap naturally instead of being squeezed beside a
   thumbnail. */
.article-card {
  display: flex;
  min-height: 232px;
  flex-direction: column;
  align-items: stretch;
}
.article-image {
  position: relative;
  display: block;
  flex: 0 0 132px;
  width: 100%;
  height: 132px;
  min-height: 132px;
  align-self: stretch;
  overflow: hidden;
  background: #f1f5f8;
  background-position: center;
  background-size: cover;
}
.article-image > img { object-fit: contain; padding: 7px; }
.article-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  padding: 11px 12px 12px;
}
.article-card-meta {
  display: flex;
  align-items: center;
  min-height: 22px;
  max-width: 100%;
}
.article-card-type {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 21px;
  overflow: hidden;
  padding: 0 8px;
  border-radius: 999px;
  background: #e8f2fb;
  color: #155486;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-copy h2 {
  margin: 7px 0 0;
  overflow-wrap: anywhere;
  color: var(--navy-deep);
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.article-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin: 6px 0 0;
  color: #586779;
  font-size: 10px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.article-footer {
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 8px;
}
.article-card.no-image {
  border-left: 1px solid #d8e3ee;
  background: #fff;
}
.article-card.no-image .article-image { background: #e8f0f6; }

@media (max-width: 560px) {
  .article-image { flex-basis: 132px; height: 132px; min-height: 132px; }
  .article-copy { padding: 11px 12px 12px; }
}

/* The crawler records one of three media families.  Landscape photos can
   safely fill a wide card frame; portrait and square packages/posters keep
   their complete subject inside a quiet letterboxed frame.  The natural
   dimensions detected in the browser remain a fallback for older assets that
   have not yet been re-crawled with shape metadata. */
.shop-photo > img[data-media-shape="landscape"],
.event-image > img[data-media-shape="landscape"],
.event-card-image > img[data-media-shape="landscape"],
.product-card-image > img[data-media-shape="landscape"],
.article-image > img[data-media-shape="landscape"],
.map-shop-thumb > img[data-media-shape="landscape"],
.detail-related-image img[data-media-shape="landscape"],
.detail-related-item-media img[data-media-shape="landscape"] {
  object-fit: cover;
  padding: 0;
}
.shop-photo > img[data-media-shape="portrait"],
.shop-photo > img[data-media-shape="square"],
.event-image > img[data-media-shape="portrait"],
.event-image > img[data-media-shape="square"],
.event-card-image > img[data-media-shape="portrait"],
.event-card-image > img[data-media-shape="square"],
.product-card-image > img[data-media-shape="portrait"],
.product-card-image > img[data-media-shape="square"],
.article-image > img[data-media-shape="portrait"],
.article-image > img[data-media-shape="square"],
.map-shop-thumb > img[data-media-shape="portrait"],
.map-shop-thumb > img[data-media-shape="square"],
.detail-related-image img[data-media-shape="portrait"],
.detail-related-image img[data-media-shape="square"],
.detail-related-item-media img[data-media-shape="portrait"],
.detail-related-item-media img[data-media-shape="square"] {
  object-fit: contain;
  padding: 7px;
  background: #f1f5f8;
}
.detail-media-cover .detail-visual > img[data-media-shape="portrait"],
.detail-media-cover .detail-visual > img[data-media-shape="square"] {
  object-fit: contain;
  padding: 12px;
  background: #fff;
}
.detail-primary-grid.shop-detail-grid.has-image .detail-media-shop .detail-visual > img[data-media-shape="landscape"] {
  object-fit: scale-down;
  padding: 0;
}
.detail-primary-grid.shop-detail-grid.has-image .detail-media-shop .detail-visual > img[data-media-shape="portrait"],
.detail-primary-grid.shop-detail-grid.has-image .detail-media-shop .detail-visual > img[data-media-shape="square"] {
  object-fit: contain;
  padding: 10px;
  background: #f1f5f8;
}
/* Product/package photography is information-dense even when it is
   landscape.  Preserve the whole package rather than cropping its label. */
.product-card-image > img[data-media-shape="landscape"],
.detail-related-item[data-related-kind="products"] .detail-related-item-media img[data-media-shape="landscape"] {
  object-fit: contain;
  padding: 0 7px;
}

/* Event cards must remain readable in the narrow three-column layout as well
   as in the single-column mobile collection.  Let the date wrap before the
   prefecture badge is squeezed, and make every copy block shrink/wrap inside
   its card instead of painting outside the rounded boundary. */
.event-card,
.event-card-body,
.event-card-meta {
  min-width: 0;
}
.event-card-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: start;
  gap: 6px;
}
.event-card-date {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}
.event-card-region {
  min-width: 0;
  max-width: 100%;
  justify-self: end;
}
.event-card-body h2,
.event-card-body p {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

/* At tablet/laptop widths the two-column lower grid leaves the map column
   shorter than the event column, creating an empty strip below the map.
   Stack these sections before the event cards become too narrow; the map then
   ends naturally and the event grid follows immediately below it. */
@media (min-width: 851px) and (max-width: 1180px) {
  .lower-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .lower-grid > .map-panel,
  .lower-grid > .event-panel {
    grid-column: 1;
  }
  .lower-grid > .map-panel { align-self: start; }
}

/* Final home-filter normalization.  Keep selector controls compact while
   preserving a comfortable trigger hit area, and keep every option on one
   line so the panel height is predictable.  The prefecture matrix uses a
   denser 26px visual row so the map reads as one diagram instead of a stack
   of tall buttons.  The picker itself is a centered dialog rather than an
   oversized child of the filter trigger. */
.custom-select-trigger {
  min-height: 48px;
  height: 48px;
  line-height: 1.25;
}
.custom-select-option {
  min-height: 44px;
  height: 44px;
  line-height: 1.25;
  white-space: nowrap;
}
.custom-select-option > span:first-child {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select-panel.custom-select-list {
  min-width: max(100%, 190px);
  max-width: calc(100vw - 24px);
}
.filter-card.prefecture-picker-open {
  /* backdrop-filter creates a containing block for fixed descendants.  Turn
     it off only while the dialog is open so its safe-area position is based
     on the viewport instead of the filter card. */
  backdrop-filter: none;
}
.prefecture-picker-panel,
.custom-select-prefecture .prefecture-picker-panel {
  position: fixed;
  z-index: 80;
  top: max(84px, calc(50dvh - 214px));
  right: auto;
  bottom: auto;
  left: var(--prefecture-picker-left, 50%);
  width: min(430px, calc(100vw - 24px));
  min-width: 0;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-50%);
}
.prefecture-island-cell-button {
  min-height: 26px;
  height: 26px;
  padding: calc(1px / 12) 1px;
  line-height: 1;
}
.prefecture-picker-clear {
  min-height: 44px;
  height: 44px;
  padding: calc(10px / 3) 10px;
  border-radius: 8px;
  font-size: 16px !important;
  line-height: 1.25;
}

/* Make the destination tab unambiguous on every route.  The underline is
   retained on desktop and the same state becomes a quiet filled row in the
   expanded mobile menu, where the desktop underline is intentionally hidden. */
.main-nav a.is-active,
.main-nav a[aria-current="page"] {
  color: var(--blue);
  font-weight: 800;
}
.main-nav a.is-active::after,
.main-nav a[aria-current="page"]::after {
  background: var(--blue);
  opacity: 1;
  transform: scaleX(1);
}
.main-nav a.is-active .nav-icon,
.main-nav a[aria-current="page"] .nav-icon {
  color: var(--blue);
}
@media (max-width: 1000px) {
  .site-header.mobile-open .main-nav a.is-active,
  .site-header.mobile-open .main-nav a[aria-current="page"] {
    border-color: #cfe2f1;
    background: #edf5fb;
    color: var(--blue);
  }
}
@media (max-width: 560px) {
  .custom-select-trigger {
    min-height: 48px;
    height: 48px;
  }
  .custom-select-prefecture .prefecture-picker-panel {
    top: max(84px, calc(50dvh - 214px));
    right: auto;
    bottom: auto;
    left: var(--prefecture-picker-left, 50%);
    width: calc(100vw - 24px);
    min-width: 0;
    max-width: calc(100vw - 24px);
    transform: translateX(-50%);
  }
}

/* A fading trailing edge indicates that the horizontal discovery rails have
   more choices. JavaScript removes the class at the end, so complete/short
   rails never look artificially clipped. */
.popular-row.has-more,
.area-tabs.has-more {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  padding-right: 24px;
}

/* Phones get an unobtrusive fixed affordance instead of a text pill that can
   cover phone numbers, map attribution, or a card's primary action. */
@media (max-width: 560px) {
  .contact-widget-trigger {
    width: 54px;
    min-width: 54px;
    height: 54px;
    min-height: 54px;
    padding: 0;
    border-radius: 50%;
  }
  .contact-widget-trigger > span { display: none; }
  .contact-widget-icon { width: 23px; height: 23px; }
}

/* At phone widths a single compact horizontal card preserves a readable title
   column without doubling the page length. Home highlights stay editorially
   dense; this rule applies to full catalog/saved screens only. */
@media (max-width: 420px) {
  .collection-shops-grid,
  .collection-products-grid,
  .saved-local-list { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .collection-shops-grid .shop-card-link,
  .saved-local-list .shop-card-link {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 156px;
  }
  .collection-shops-grid .shop-photo,
  .collection-shops-grid .shop-card.no-image .shop-photo,
  .saved-local-list .shop-photo,
  .saved-local-list .shop-card.no-image .shop-photo { height: 100%; min-height: 156px; }
  .collection-shops-grid .shop-body h2,
  .saved-local-list .shop-body h2 { white-space: normal; }
  .collection-products-grid .product-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 172px;
  }
  .collection-products-grid .product-card-image {
    width: 112px;
    height: 100%;
    min-height: 172px;
  }
}

/* Wide displays use their space for browsable card/map content while prose
   retains its own narrower line-length constraints inside each component. */
@media (min-width: 1800px) {
  .header-inner,
  .hero-inner,
  .page-section,
  .site-footer .footer-inner,
  .footer-bottom { width: min(1680px, calc(100% - 128px)); }
  body.detail-mode .detail-view { width: min(1500px, calc(100% - 128px)); }
  .shop-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .article-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .collection-events-grid,
  .collection-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .collection-article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Reserve the exact dynamic rows in the hero before filters/events arrive.
   Without this envelope, the popular-area controls and two 16px event rows
   expand an initially empty card after first paint and create a large CLS. */
.popular-row { min-height: 58px; }
.hero-event-card { min-height: 393px; }
#heroEvents { min-height: 234px; }
.shop-card-skeleton {
  min-height: 282px;
  padding: 116px 14px 18px;
  pointer-events: none;
}
.shop-card-skeleton > span,
.shop-card-skeleton > i {
  display: block;
  height: 16px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e7edf2 25%, #f4f7f9 50%, #e7edf2 75%);
  background-size: 200% 100%;
  animation: catalog-skeleton 1.4s ease-in-out infinite;
}
.shop-card-skeleton > span { height: 101px; margin: -116px -14px 24px; border-radius: 0; }
.shop-card-skeleton > i:nth-of-type(1) { width: 76%; }
.shop-card-skeleton > i:nth-of-type(2) { width: 92%; }
.shop-card-skeleton > i:nth-of-type(3) { width: 58%; }
@keyframes catalog-skeleton { to { background-position: -200% 0; } }

@media (max-width: 1180px) {
  .shop-card-skeleton { min-height: 249px; }
}

@media (max-width: 850px) {
  .shop-card-skeleton { min-height: 273px; }
}

@media (max-width: 560px) {
  .hero-event-card { min-height: 276px; }
  #heroEvents { min-height: 117px; }
  .shop-card-skeleton { min-height: 263px; }
}

@media (max-width: 359px) {
  .shop-card-skeleton { min-height: 290px; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-card-skeleton > span,
  .shop-card-skeleton > i { animation: none; }
}

/* CAD-AI風の省スペースモード。固定幅で切り替えず、アプリが実測して
   .header-compact を付けたときだけナビゲーションをアイコンへ畳む。
   ラベル本文はクリップするだけなので、aria-labelとともに読み上げ可能。 */
@media (min-width: 1001px) {
  .site-header.header-compact .main-nav {
    justify-content: center;
    gap: 4px;
    overflow: visible;
  }

  .site-header.header-compact .main-nav a {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 9px;
  }

  .site-header.header-compact .main-nav a > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-header.header-compact .main-nav a:hover,
  .site-header.header-compact .main-nav a:focus-visible {
    background: #f2f7fb;
    outline: 0;
  }

  .site-header.header-compact .main-nav a::before {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 50%;
    padding: 7px 9px;
    border-radius: 7px;
    background: var(--navy-deep);
    box-shadow: 0 6px 14px rgba(9, 43, 86, .18);
    color: #fff;
    content: attr(aria-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -2px);
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
    visibility: hidden;
    white-space: nowrap;
  }

  .site-header.header-compact .main-nav a:hover::before,
  .site-header.header-compact .main-nav a:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: .08s;
    visibility: visible;
  }

  /* If even the six icon targets do not fit, reclaim space from secondary
     labels and the wordmark before falling back to the expandable menu. */
  .site-header.header-ultra-compact .header-inner {
    gap: 8px;
  }

  .site-header.header-ultra-compact .brand {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    gap: 6px;
  }

  .site-header.header-ultra-compact .brand-mark {
    width: 32px;
    height: 38px;
    flex-basis: 32px;
  }

  .site-header.header-ultra-compact .brand-copy {
    display: none;
  }

  .site-header.header-ultra-compact .header-actions {
    gap: 4px;
  }

  .login-icon {
    display: none;
    place-items: center;
    width: 18px;
    height: 18px;
  }

  .login-icon svg {
    width: 18px;
    height: 18px;
  }

  .site-header.header-ultra-compact .login-button,
  .site-header.header-ultra-compact .save-button {
    width: 44px;
    min-width: 44px;
    padding: 0;
    font-size: 0;
  }

  .site-header.header-ultra-compact .login-button {
    display: inline-flex;
  }

  .site-header.header-ultra-compact .login-icon {
    display: grid;
  }

  .site-header.header-ultra-compact .login-button > span:last-child,
  .site-header.header-ultra-compact .save-button > span:last-child {
    display: none;
  }

  .site-header.header-ultra-compact .save-button {
    justify-content: center;
    gap: 0;
  }

  .site-header.header-ultra-compact .save-button .save-icon {
    flex-basis: 18px;
  }

  /* At extreme zoom/text scaling, expose the same labeled sheet used by the
     mobile layout instead of allowing an icon row to be partially clipped. */
  .site-header.header-menu-mode .main-nav,
  .site-header.header-menu-mode .header-actions {
    display: none;
  }

  .site-header.header-menu-mode .menu-toggle {
    display: block;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 12px;
  }

  .site-header.header-menu-mode.mobile-open {
    height: auto;
    max-height: 100vh;
    overflow-y: auto;
  }

  .site-header.header-menu-mode.mobile-open .header-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: start;
    gap: 0 12px;
    min-height: 72px;
    position: relative;
  }

  .site-header.header-menu-mode.mobile-open .brand {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .site-header.header-menu-mode.mobile-open .menu-toggle {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    margin: 0;
  }

  .site-header.header-menu-mode.mobile-open .main-nav {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    height: auto;
    max-width: none;
    max-height: none;
    padding: 5px 0 0;
    overflow: visible;
    clip-path: none;
    opacity: 1;
    transform: none;
    transition: none;
    visibility: visible;
  }

  .site-header.header-menu-mode.mobile-open .main-nav a {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 12px;
    border-radius: 9px;
    justify-content: flex-start;
    gap: 4px;
  }

  .site-header.header-menu-mode.mobile-open .main-nav a > span {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    border: 0;
    clip: auto;
    clip-path: none;
    white-space: nowrap;
  }

  .site-header.header-menu-mode.mobile-open .main-nav a::before {
    display: none;
  }

  .site-header.header-menu-mode.mobile-open .main-nav a::after {
    display: none;
  }

  .site-header.header-menu-mode.mobile-open .main-nav a:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 6px);
  }

  .site-header.header-menu-mode.mobile-open .header-actions {
    position: static;
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px 16px;
    border-bottom: 1px solid var(--line);
  }

  .site-header.header-menu-mode.mobile-open .global-search {
    width: 280px;
    min-width: 44px;
  }

  body.menu-open .menu-backdrop {
    position: fixed;
    z-index: 19;
    inset: 72px 0 0;
    display: block;
    background: rgba(8, 35, 69, .24);
  }
}