: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: space-between; 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; transition: flex-grow .34s cubic-bezier(.22, .61, .36, 1); }
.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; }
.mobile-menu-brand { display: none; }
.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 focused result lists. Shop lists append the
   next page at the bottom; editorial collections retain their page controls. */
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; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 62px; margin-top: 7px; }
.shop-experience-badge { position: relative; display: grid; flex: 0 0 60px; place-items: center; width: 60px; height: 60px; padding: 2px; border: 1px solid transparent; border-radius: 10px; outline: 0; background: transparent; cursor: help; }
.shop-experience-badge img { display: block; width: 52px; height: 52px; border-radius: 8px; object-fit: contain; }
.shop-experience-badge:hover, .shop-experience-badge:focus-visible { border-color: #b8d7c3; background: #f0f9f3; box-shadow: 0 2px 7px rgba(47,112,74,.16); }
.shop-experience-tooltip { position: fixed; z-index: 1000; max-width: min(220px, calc(100vw - 16px)); padding: 7px 9px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: rgba(9,43,86,.96); color: #fff; font-size: 11px; font-weight: 800; line-height: 1.45; text-align: center; white-space: normal; box-shadow: 0 8px 22px rgba(9,43,86,.24); opacity: 0; pointer-events: none; transform: translate(-50%, 3px); transition: opacity .15s ease, transform .15s ease; }
.shop-experience-tooltip[hidden] { display: block; visibility: hidden; }
.shop-experience-tooltip.is-visible { opacity: 1; transform: translate(-50%, 0); visibility: visible; }
.shop-experience-tooltip.is-below { transform: translate(-50%, -3px); }
.shop-experience-tooltip.is-below.is-visible { transform: translate(-50%, 0); }
@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;
    padding-inline: 0;
    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) {
  /* On phone-sized screens the fixed row keeps only the logo mark. The full
     wordmark moves into the labeled dropdown sheet instead of disappearing. */
  .site-header > .header-inner > .brand {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    flex: 0 0 44px;
    gap: 0;
    padding-right: 0;
  }

  .site-header > .header-inner > .brand .brand-copy {
    display: none;
  }

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

  .site-header.mobile-open .mobile-menu-brand {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    align-items: center;
    min-height: 52px;
    margin-top: 5px;
    padding: 10px 12px;
    border: 1px solid #dce7f0;
    border-radius: 10px;
    background: #f4f8fb;
    color: var(--navy-deep);
  }

  .mobile-menu-brand-copy {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    letter-spacing: .05em;
    white-space: nowrap;
  }

  .mobile-menu-brand-copy strong {
    font-size: 16px;
    font-weight: 800;
  }

  .mobile-menu-brand-copy span {
    font-size: 14px;
    font-weight: 700;
  }

  .site-header.mobile-open .main-nav { grid-row: 3; }
  .site-header.mobile-open .header-actions { grid-row: 4; }

  .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) {
  .mobile-menu-brand-copy {
    display: grid;
    align-items: start;
    gap: 0;
  }

  .mobile-menu-brand-copy strong,
  .mobile-menu-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;
  /* Let the density engine see the link's real minimum width. Shrinking the
     flex items first compresses labels and falsely reports that a crowded
     header fits, which removes the intended part-to-part breathing room. */
  flex: 0 0 auto;
  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;
  /* The gap is a minimum rhythm; space-between distributes any remaining
     width evenly across the links instead of leaving side voids inside the
     central navigation region. Compact icon mode overrides this with a
     fixed, centered rhythm below. */
  justify-content: space-between;
  /* Keep a visible boundary between the three header parts. The inset grows
     with the available viewport, while the remaining width is still shared
     evenly by the central links. */
  padding-inline: clamp(12px, calc(20vw - 288px), 40px);
  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, max-width .24s ease, flex-grow .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;
  padding-inline: 0;
  gap: 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;
}

/* The utility group owns the reclaimed central width while search is active.
   The field therefore grows between the stable wordmark and the stable
   account/save controls instead of stopping at an arbitrary 320px cap. */
@media (min-width: 1001px) {
  .site-header.search-focused .header-actions {
    flex: 1 1 0%;
    min-width: 0;
  }

.site-header.search-focused .global-search {
    flex: 1 1 auto;
    width: 100%;
    min-width: 44px;
    max-width: 100%;
  }

  .site-header.search-closing .header-actions {
    flex: 0 1 auto;
    justify-content: flex-end;
  }
}

/* Search focus is removed before the layout settles. Make the nav visible at
   the beginning of the reverse animation and postpone density measurement so
   the row can actually expand instead of being replaced by a compact mode. */
.site-header.search-closing .main-nav {
  max-width: 100%;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
  transform: none;
  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;
}
.site-header.search-closing .global-search {
  flex: 0 1 auto;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  padding-left: 0;
}

@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;
  }

  .site-header.search-closing .main-nav {
    visibility: visible;
    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;
  }

  .site-header.mobile-open.search-closing .header-actions {
    justify-content: stretch;
  }
}

@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-closing .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風の省スペースモード。固定幅で一気にアイコン化せず、アプリが
   実測した候補のうち最も情報を残せる状態を選ぶ。 */
@media (min-width: 1001px) {
  /* Candidate 1: reclaim only spacing and keep every label. */
  .site-header.header-tight .header-inner {
    gap: 8px;
  }

  .site-header.header-tight .main-nav {
    gap: 8px;
  }

  .site-header.header-tight .main-nav a {
    gap: 3px;
  }

  /* Candidate 2: keep the wordmark, but stack it on two lines and let only
     utility-button labels yield space. The brand name is never removed from
     tablet or desktop layouts. */
  .site-header.header-secondary-compact .header-inner {
    gap: 2px;
  }

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

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

  .site-header.header-secondary-compact .brand-copy {
    display: grid;
    align-items: start;
    gap: 0;
    line-height: 1.05;
  }

  .site-header.header-secondary-compact .brand-copy strong {
    font-size: 13px;
  }

  .site-header.header-secondary-compact .brand-copy span {
    font-size: 11px;
  }

  .site-header.header-secondary-compact .main-nav {
    gap: 8px;
  }

  .site-header.header-secondary-compact .main-nav a {
    gap: 4px;
  }

  .site-header.header-secondary-compact .header-actions {
    gap: 0;
  }

  .site-header.header-compact .main-nav {
    justify-content: center;
    padding-inline: 0;
    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, keep the compact two-line
     wordmark while reclaiming the remaining secondary-control spacing. */
  .site-header.header-ultra-compact .header-inner {
    gap: 4px;
  }

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

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

  .site-header.header-secondary-compact .brand-copy,
  .site-header.header-ultra-compact .brand-copy {
    display: grid;
    align-items: start;
    gap: 0;
    line-height: 1.05;
  }

  .site-header.header-ultra-compact .brand-copy strong {
    font-size: 13px;
  }

  .site-header.header-ultra-compact .brand-copy span {
    font-size: 11px;
  }

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

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

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

  .site-header.header-secondary-compact .login-button,
  .site-header.header-secondary-compact .save-button,
  .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-secondary-compact .login-button,
  .site-header.header-ultra-compact .login-button {
    display: inline-flex;
  }

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

  .site-header.header-secondary-compact .login-button > span:last-child,
  .site-header.header-secondary-compact .save-button > span:last-child,
  .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-secondary-compact .save-button,
  .site-header.header-ultra-compact .save-button {
    justify-content: center;
    gap: 0;
  }

  .site-header.header-secondary-compact .save-button .save-icon,
  .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);
  }
}

/* A menu sheet needs breathing room around the fixed brand row. When a
   tablet has enough width, three equal columns use the available sheet more
   evenly; narrow phones keep the more readable two-column arrangement. */
@media (max-width: 1000px) {
  /* Opening the sheet changes the header's layout context. The inline shifts
     written by setMobileMenu keep the closed logo and toggle coordinates as
     the invariant visual anchor while the navigation grows below them. */
  .site-header.mobile-open .brand {
    transform: translate(var(--menu-brand-shift-x, 0px), var(--menu-brand-shift-y, 0px));
  }

  .site-header.mobile-open .menu-toggle {
    transform: translate(var(--menu-toggle-shift-x, 0px), var(--menu-toggle-shift-y, 0px));
  }

  /* Keep the collapsed toggle on the same top/right anchors as the expanded
     menu row. The expanded position is the source of truth. */
  .site-header .header-inner {
    position: relative;
  }

  .site-header:not(.mobile-open) .menu-toggle {
    position: absolute;
    top: 10px;
    right: 0;
    margin: 0;
  }

  .site-header.mobile-open .header-inner {
    padding: 10px 0;
  }
}

@media (min-width: 561px) and (max-width: 1000px) {
  .site-header.mobile-open .main-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
  }

  .site-header.mobile-open .main-nav a:last-child {
    grid-column: auto;
    width: 100%;
  }
}

@media (min-width: 851px) and (max-width: 1000px) {
  /* This row is one pixel taller because the tablet brand line determines the
     grid track; match the open-state centering exactly. */
  .site-header:not(.mobile-open) .menu-toggle {
    top: 11px;
  }
}

@media (min-width: 1001px) {
  .site-header.header-menu-mode.mobile-open .brand {
    transform: translate(var(--menu-brand-shift-x, 0px), var(--menu-brand-shift-y, 0px));
  }

  .site-header.header-menu-mode.mobile-open .menu-toggle {
    transform: translate(var(--menu-toggle-shift-x, 0px), var(--menu-toggle-shift-y, 0px));
  }

  /* The labeled fallback menu uses a 12px expanded header inset. Anchor the
     collapsed button to that same inset so opening the sheet does not nudge
     it vertically or horizontally. */
  .site-header.header-menu-mode:not(.mobile-open) .header-inner {
    position: relative;
  }

  .site-header.header-menu-mode:not(.mobile-open) .menu-toggle {
    position: absolute;
    top: 12px;
    right: 0;
    margin: 0;
  }

  .site-header.header-menu-mode.mobile-open .header-inner {
    padding: 12px 0;
  }

  .site-header.header-menu-mode.mobile-open .main-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
  }

  .site-header.header-menu-mode.mobile-open .main-nav a:last-child {
    grid-column: auto;
    width: 100%;
  }
}