@charset "utf-8";
/* ==========================================================================
   安城市日の出町商店街 公開サイト

   白を基調にした和モダンの一枚もの。以前は common / top / shoplist / shop /
   event / map / access / slider / contact / 404 の 10 ファイル（1,521 行）に
   分かれていたが、ビルド工程が無く 1 ファイルでも規模が変わらないため統合した。
   トークンの命名は member/css/admin.css に合わせてある。

   構成: トークン → ベース → タイポグラフィ → レイアウト → ヘッダー・ナビ
         → フッター → パンくず → ボタン・タブ → カード → トップページ
         → 店舗一覧 → 店舗詳細 → 記事 → 地図 → アクセス → 404
         → ユーティリティ
   ========================================================================== */

/* ===== フォント ===== */
/* 見出し用の明朝。Google が配信する Noto Serif JP は unicode-range で 124 分割
   されており、1 ウェイトぶんを丸ごと自ホストすると約 6MB になる。ここでは
   「文言が固定されている見出し」に使う字だけを自前でサブセットしている
   （public/fonts/subset-chars.txt、生成手順は README を参照）。
   本文と、店名・記事タイトルのような可変テキストは OS 標準のゴシックに任せる。 */
@font-face {
    font-family: "Noto Serif JP";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/noto-serif-jp-600-subset.woff2") format("woff2");
}

/* ===== トークン ===== */
:root {
    /* 面 */
    --canvas:         #ffffff;
    --surface:        #ffffff;
    --surface-muted:  #faf9f7;   /* 生成りの薄い面 */
    --surface-sunken: #f4f2ee;

    /* 文字（コントラスト比は白背景に対する実測値） */
    --text:           #2b2b2b;   /* 墨      14.2:1 */
    --text-muted:     #6b6660;   /*          5.7:1 */
    --text-inverse:   #ffffff;

    /* 差し色（藍） */
    --accent:         #1f5c7a;   /*          7.3:1 */
    --accent-dark:    #164257;
    --accent-tint:    #eef3f6;

    /* 罫線 */
    --border:         #e5e3de;
    --border-strong:  #cfccc5;

    /* カテゴリ。同明度・低彩度で揃えてあり、いずれも白背景で AA(4.5:1) 以上 */
    --cat-food:   #9c4a33;  --cat-food-tint:   #f7efec;  /* 柿渋   6.1:1 */
    --cat-buy:    #8a6420;  --cat-buy-tint:    #f8f2e6;  /* 山吹茶 5.3:1 */
    --cat-health: #3e6b52;  --cat-health-tint: #ecf2ee;  /* 千歳緑 6.1:1 */
    --cat-other:  #5b5182;  --cat-other-tint:  #f1eff7;  /* 藤紫   7.1:1 */

    /* 余白 */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;

    /* 文字サイズ。公開サイトなので管理画面より一回り大きく、rem 基準 */
    --font-xs:   .75rem;
    --font-sm:   .875rem;
    --font-base: 1rem;
    --font-lg:   1.125rem;
    --font-xl:   1.375rem;
    --font-2xl:  1.75rem;
    --font-3xl:  2.25rem;

    --radius:    2px;
    --radius-lg: 4px;
    --shadow:    0 1px 2px rgba(43, 43, 43, .06);

    --container:      1080px;   /* 一覧・グリッド用 */
    --container-text: 720px;    /* 本文用（記事・アクセス） */

    --font-sans:  "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
}

/* ===== ベース ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--font-base);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

/* display を持つクラス（.shop-card など）が UA の [hidden] を打ち消してしまうため、
   作者スタイル側で明示的に勝たせておく。店舗一覧のタブ絞り込みがこれに依存する。 */
[hidden] {
    display: none !important;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

a:hover {
    color: var(--accent-dark);
}

button {
    font: inherit;
    color: inherit;
}

/* フォーカスは必ず見えるようにする。旧 CSS には :focus 指定が 1 つも無かった */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius);
}

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

/* ===== タイポグラフィ ===== */
/* 明朝を当てるのは「文言が固定されている見出し」だけ。店名や記事タイトルなど
   可変テキストに当てるとサブセットに無い字が混植になるため、ゴシックで組む。 */
h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .04em;
}

.page-title,
.section-title {
    font-family: var(--font-serif);
}

.page-title {
    font-size: var(--font-2xl);
}

.page-lead {
    margin: var(--space-2) 0 0;
    color: var(--text-muted);
    font-size: var(--font-sm);
}

/* セクション見出し。細い罫線を下に敷くだけの控えめな作り */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.section-title {
    font-size: var(--font-xl);
}

.section-head .more-link {
    flex: none;
    font-size: var(--font-sm);
    white-space: nowrap;
}

p {
    margin: 0 0 1em;
}

p:last-child {
    margin-bottom: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

/* ===== レイアウト ===== */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.container--text {
    max-width: var(--container-text);
}

main {
    display: block;
    padding-bottom: var(--space-8);
}

.section {
    margin-top: var(--space-8);
}

.page-head {
    margin: var(--space-6) 0 var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}

/* ===== ヘッダー・ナビ ===== */
.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100%;
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--accent);
    color: var(--accent);
}

.skip-link:focus {
    top: var(--space-2);
}

/* 差し込み前の高さゼロによるガタつきを防ぐ（header は layout.js が後から埋める） */
body > header {
    display: block;
    min-height: 60px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-3) var(--space-4);
}

.site-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--font-lg);
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.4;
}

.site-title a {
    color: var(--text);
    text-decoration: none;
}

.site-title small {
    display: block;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: var(--font-xs);
    font-weight: 400;
    letter-spacing: .04em;
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-2);
    border: 0;
    background: none;
    color: var(--text);
    font-size: var(--font-sm);
    cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--text);
    transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle-bars {
    position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top:  6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
    transform: translateY(-6px) rotate(-45deg);
}

.site-nav ul {
    display: flex;
    flex-direction: column;
}

.site-nav a {
    display: block;
    padding: var(--space-3) var(--space-2);
    border-top: 1px solid var(--border);
    color: var(--text);
    font-size: var(--font-sm);
    text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    color: var(--accent);
}

/* スマホではボタンで開閉、タブレット以上では常時表示の横並び。
   hidden 属性ではなくクラスで切り替えるのは、画面幅が変わっても状態が
   矛盾しないようにするため（幅の判定を JS 側に持たせない）。 */
@media (max-width: 767px) {
    .site-header {
        flex-wrap: wrap;
    }

    .site-nav {
        display: none;
        width: 100%;
        order: 3;
    }

    .site-nav.is-open {
        display: block;
    }
}

@media (min-width: 768px) {
    .nav-toggle {
        display: none;
    }

    .site-nav ul {
        flex-direction: row;
        gap: var(--space-5);
    }

    .site-nav a {
        padding: var(--space-2) 0;
        border-top: 0;
        border-bottom: 2px solid transparent;
    }

    .site-nav a:hover,
    .site-nav a[aria-current="page"] {
        border-bottom-color: var(--accent);
    }
}

/* ===== フッター ===== */
body > footer {
    display: block;
    min-height: 120px;
    margin-top: var(--space-8);
    border-top: 1px solid var(--border);
    background: var(--surface-muted);
}

.site-footer {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

/* 関連リンクのバナー帯（旧サイドバーから移設） */
.footer-banners {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border);
}

.footer-banners img {
    width: auto;
    max-width: 100%;
    height: 48px;
    object-fit: contain;
}

.footer-banners a {
    display: block;
    opacity: .85;
    transition: opacity .2s ease;
}

.footer-banners a:hover {
    opacity: 1;
}

.footer-main {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    justify-content: space-between;
}

.footer-brand {
    font-family: var(--font-serif);
    font-size: var(--font-base);
    /* 自ホストしている明朝は 600 の 1 ウェイトだけなので、揃えておく */
    font-weight: 600;
    letter-spacing: .08em;
}

.footer-brand address {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: var(--font-sm);
    font-style: normal;
    letter-spacing: normal;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.footer-nav h2 {
    margin-bottom: var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: .08em;
}

.footer-nav a {
    display: inline-block;
    padding: var(--space-1) 0;
    color: var(--text);
    font-size: var(--font-sm);
    text-decoration: none;
}

.footer-nav a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.footer-bottom {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--font-xs);
}

/* ===== パンくず ===== */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    color: var(--text-muted);
    font-size: var(--font-xs);
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* 区切りの「›」。以前は Font Awesome、そのあと SVG の背景画像だったが、
   ただの記号なので文字で足りる。読み上げからは外す。 */
.breadcrumb li:not(:last-child)::after {
    content: "›";
    color: var(--border-strong);
}

.breadcrumb a {
    color: var(--text-muted);
}

.breadcrumb li:last-child span {
    color: var(--text);
}

/* ===== ボタン・タブ ===== */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--accent);
    font-size: var(--font-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.button:hover {
    background: var(--accent);
    color: var(--text-inverse);
}

.button--quiet {
    border-color: var(--border-strong);
    color: var(--text);
}

.more-link {
    color: var(--accent);
    text-decoration: none;
}

.more-link:hover {
    text-decoration: underline;
}

.more-link::after {
    content: " →";
}

/* カテゴリタブ（店舗一覧） */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.tab {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: var(--font-sm);
    line-height: 1.6;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.tab:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.tab[aria-selected="true"] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--text-inverse);
}

.tab-count {
    font-size: var(--font-xs);
    opacity: .8;
}

/* ページネーション（新着情報＆イベント） */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-7);
}

.pagination button {
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: var(--font-sm);
    cursor: pointer;
}

.pagination button:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.pagination button:disabled,
.pagination button.active {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--text-inverse);
    cursor: default;
}

/* ===== カテゴリの色 ===== */
.cat-food   { --cat: var(--cat-food);   --cat-tint: var(--cat-food-tint); }
.cat-buy    { --cat: var(--cat-buy);    --cat-tint: var(--cat-buy-tint); }
.cat-health { --cat: var(--cat-health); --cat-tint: var(--cat-health-tint); }
.cat-other  { --cat: var(--cat-other);  --cat-tint: var(--cat-other-tint); }

.category-badge {
    display: inline-block;
    padding: 2px var(--space-2);
    background: var(--cat-tint, var(--surface-sunken));
    color: var(--cat, var(--text-muted));
    font-size: var(--font-xs);
    letter-spacing: .06em;
    line-height: 1.6;
}

/* ===== カード ===== */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: var(--space-5);
    }
}

/* 店舗カード */
.shop-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.shop-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
    color: var(--text);
}

.shop-card__image {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    background: var(--surface-sunken);
}

.shop-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-4);
}

.shop-card__name {
    font-size: var(--font-base);
    font-weight: 600;
    line-height: 1.6;
}

.shop-card:hover .shop-card__name {
    color: var(--accent);
}

.shop-card__meta {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-xs);
    line-height: 1.7;
}

/* ===== トップページ ===== */
/* 写真を使わないタイポグラフィだけのヒーロー。上下を細い罫線で挟む */
.hero {
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
    text-align: center;
}

.hero__eyebrow {
    margin: 0 0 var(--space-3);
    color: var(--text-muted);
    font-size: var(--font-xs);
    letter-spacing: .3em;
    text-indent: .3em;
}

.hero__title {
    font-family: var(--font-serif);
    font-size: var(--font-2xl);
    letter-spacing: .12em;
    text-indent: .12em;
}

.hero__title::after {
    content: "";
    display: block;
    width: 48px;
    height: 1px;
    margin: var(--space-5) auto;
    background: var(--border-strong);
}

.hero__copy {
    margin: 0 auto;
    max-width: var(--container-text);
    color: var(--text-muted);
    font-size: var(--font-sm);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--space-6) 0 0;
}

@media (min-width: 768px) {
    .hero {
        padding: calc(var(--space-8) * 1.4) 0;
    }

    .hero__title {
        font-size: var(--font-3xl);
    }

    .hero__copy {
        font-size: var(--font-base);
    }
}

/* ジャンルカード */
.genre-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (min-width: 768px) {
    .genre-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-4);
    }
}

.genre-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    height: 100%;
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--border);
    border-top: 3px solid var(--cat);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: background-color .2s ease;
}

.genre-card:hover {
    background: var(--cat-tint);
    color: var(--text);
}

.genre-card__name {
    font-family: var(--font-serif);
    font-size: var(--font-lg);
    font-weight: 600;
    letter-spacing: .06em;
}

.genre-card__note,
.genre-card__count {
    color: var(--text-muted);
    font-size: var(--font-xs);
    line-height: 1.7;
}

.genre-card__count:not(:empty) {
    margin-top: var(--space-2);
    color: var(--cat);
}

/* 新着情報の一覧。以前は高さ 200px の枠内スクロールだった */
.news-list__item + .news-list__item {
    border-top: 1px solid var(--border);
}

.news-list__item a {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-4) var(--space-1);
    color: var(--text);
    text-decoration: none;
}

.news-list__item a:hover .news-list__title {
    color: var(--accent);
    text-decoration: underline;
}

.news-list__date {
    color: var(--text-muted);
    font-size: var(--font-xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

.news-list__category {
    padding: 2px var(--space-2);
    background: var(--accent-tint);
    color: var(--accent);
    font-size: var(--font-xs);
    justify-self: start;
}

.news-list__title {
    grid-column: 1 / -1;
    font-size: var(--font-sm);
    line-height: 1.7;
}

@media (min-width: 768px) {
    .news-list__item a {
        grid-template-columns: auto auto 1fr;
    }

    .news-list__title {
        grid-column: auto;
        font-size: var(--font-base);
    }
}

/* 定義リスト（商店街について・店舗詳細で共用） */
.fact-list {
    margin: var(--space-5) 0;
    border-top: 1px solid var(--border);
}

.fact-list > div {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border);
}

.fact-list dt {
    color: var(--text-muted);
    font-size: var(--font-xs);
    letter-spacing: .06em;
}

.fact-list dd {
    margin: 0;
    font-size: var(--font-sm);
    line-height: 1.9;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .fact-list > div {
        grid-template-columns: 9em 1fr;
        gap: var(--space-4);
        align-items: baseline;
    }

    .fact-list dd {
        font-size: var(--font-base);
    }
}

/* ===== 店舗詳細 ===== */
.shop__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.shop__name {
    font-size: var(--font-2xl);
    line-height: 1.4;
}

.shop-gallery__main {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    background: var(--surface-sunken);
}

.shop-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.shop-gallery__thumbs img {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    background: var(--surface-sunken);
}

.shop__description {
    margin: var(--space-6) 0 0;
    font-size: var(--font-base);
}

.shop__section-title {
    margin-top: var(--space-7);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.shop__map {
    display: block;
    width: 100%;
    height: 320px;
    margin-top: var(--space-6);
    border: 1px solid var(--border);
}

.shop__back {
    margin-top: var(--space-7);
}

/* 営業時間・定休日・紹介文など、入力された改行をそのまま出す項目 */
.is-multiline {
    white-space: pre-line;
}

/* ===== 記事（新着情報＆イベント） ===== */
.news-item + .news-item {
    margin-top: var(--space-7);
    padding-top: var(--space-7);
    border-top: 1px solid var(--border);
}

.news-item__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.news-item__date {
    color: var(--text-muted);
    font-size: var(--font-xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

.news-item__category {
    padding: 2px var(--space-2);
    background: var(--accent-tint);
    color: var(--accent);
    font-size: var(--font-xs);
}

.news-item__title {
    font-size: var(--font-xl);
    line-height: 1.6;
}

.news-item__title a {
    color: var(--text);
    text-decoration: none;
}

.news-item__title a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.news-item__body {
    margin-top: var(--space-4);
}

.news-item__body a {
    overflow-wrap: anywhere;
}

/* 記事画像。以前は float: left + width: 49% で並べていた */
.news-item__images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.news-item__images img {
    width: 100%;
    border: 1px solid var(--border);
}

/* ===== 地図 ===== */
.map {
    width: 100%;
    height: 360px;
    border: 1px solid var(--border);
    background: var(--surface-sunken);
}

@media (min-width: 768px) {
    .map {
        height: 480px;
    }
}

.map-loading {
    padding: var(--space-7) var(--space-4);
    color: var(--text-muted);
    text-align: center;
}

.spinner {
    width: 32px;
    height: 32px;
    margin: 0 auto var(--space-4);
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.map-lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-7);
}

.map-lists__title {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--cat);
    color: var(--cat);
    font-size: var(--font-base);
    letter-spacing: .06em;
}

.shop-list__item {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) 0;
    border: 0;
    background: none;
    color: var(--text);
    font-size: var(--font-sm);
    text-align: left;
    line-height: 1.7;
    cursor: pointer;
}

.shop-list__item:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* ===== アクセス ===== */
.access-note {
    margin-top: var(--space-5);
    font-size: var(--font-sm);
}

/* ===== ユーティリティ ===== */
/* 記事や店舗情報を読み込めなかったときの案内文 */
.notice-empty {
    padding: var(--space-7) var(--space-4);
    border: 1px solid var(--border);
    background: var(--surface-muted);
    color: var(--text-muted);
    text-align: center;
}