@charset "UTF-8";
/* ==========================================================================
   Modern Edo — 江戸紅×墨×和紙のモダン和風ミニマル
   design/stitch_asakusa_event_guide/DESIGN.md をプレーンCSSに実装したもの。
   （Tailwind CDN は実行時コンパイルで初期表示が遅れるため不採用）
   ========================================================================== */

:root {
    /* --- surface (和紙) --- */
    --background: #fbf9f8;
    --surface-dim: #dbdad9;
    --surface-lowest: #ffffff;
    --surface-low: #f5f3f3;
    --surface-container: #efeded;
    --surface-high: #e9e8e7;
    --surface-variant: #e4e2e2;

    /* --- text (墨) --- */
    --on-surface: #1b1c1c;
    --on-surface-variant: #5b403d;
    --outline: #8f6f6c;
    --outline-variant: #e4beba;

    /* --- primary (江戸紅) --- */
    --primary: #af101a;
    --on-primary: #ffffff;
    --primary-container: #ffdad6;
    --on-primary-container: #930010;

    /* --- secondary (墨グレー) --- */
    --secondary: #5d5e61;
    --secondary-container: #e2e2e5;
    --on-secondary-container: #454749;

    /* --- tertiary (開催中バッジ等は江戸紅で強調) --- */
    --tertiary: #af101a;
    --on-tertiary: #ffffff;

    /* --- shape（Soft and Precise: 基本4px・カード8px） --- */
    --r: .25rem;
    --r-lg: .5rem;
    --r-xl: .75rem;
    --r-2xl: .5rem;
    --r-full: 9999px;

    /* --- layout --- */
    --container: 1200px;
    --gutter: 24px;
    --margin-mobile: 16px;
    --margin-desktop: 40px;
    --section-gap: 64px;

    /* --- type --- */
    --font-head: "Be Vietnam Pro", -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    --font-body: "Noto Sans JP", "Noto Sans", -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
    --font-serif: "Noto Sans JP", "Noto Sans", -apple-system, "Hiragino Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    background: var(--background);
    color: var(--on-surface);
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--primary-container); color: var(--on-primary-container); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--margin-mobile);
}
@media (min-width: 768px) { .wrap { padding-inline: var(--margin-desktop); } }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(251, 249, 248, .9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.site-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding-block: 16px;
}
.brand {
    font-family: var(--font-head);
    font-size: 24px; font-weight: 800; line-height: 30px;
    color: var(--primary); letter-spacing: -.01em;
    white-space: nowrap;
}
.brand small {
    display: block;
    font-family: var(--font-body);
    font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: .04em;
    color: var(--on-surface-variant);
}
.nav-links { display: none; align-items: center; gap: 32px; }
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-links a {
    font-family: var(--font-head);
    font-size: 14px; font-weight: 600; letter-spacing: .05em;
    color: var(--on-surface-variant);
    padding-bottom: 4px; border-bottom: 2px solid transparent;
    transition: color .3s, border-color .3s;
}
.nav-links a:hover { color: var(--primary); }
.nav-links a.is-active { color: var(--primary); border-bottom-color: var(--primary); }

/* 狭い画面ではカテゴリを横スクロールで見せる */
.nav-scroller {
    display: flex; gap: 20px; overflow-x: auto;
    max-width: var(--container); margin-inline: auto;
    padding: 0 var(--margin-mobile) 12px;
    scrollbar-width: none;
}
.nav-scroller::-webkit-scrollbar { display: none; }
.nav-scroller a {
    font-family: var(--font-head); font-size: 13px; font-weight: 600;
    color: var(--on-surface-variant); white-space: nowrap;
}
.nav-scroller a.is-active { color: var(--primary); }
@media (min-width: 900px) { .nav-scroller { display: none; } }

/* ==========================================================================
   Buttons / chips / tags
   ========================================================================== */
.btn {
    display: inline-block;
    font-family: var(--font-head); font-size: 14px; font-weight: 600; letter-spacing: .05em;
    padding: 10px 24px; border-radius: var(--r-lg);
    background: var(--primary); color: var(--on-primary);
    border: 0; cursor: pointer;
    transition: transform .2s, opacity .2s, box-shadow .2s;
}
.btn:hover { opacity: .92; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
/* ヘッダーのボタンは狭い画面で折り返して不格好になるため、フッターの導線に任せて隠す */
@media (max-width: 560px) { .site-nav .btn { display: none; } }
.btn:active { transform: scale(.97); }
.btn--ghost { background: var(--surface-high); color: var(--on-surface-variant); }
.btn--ghost:hover { background: var(--secondary-container); color: var(--on-secondary-container); box-shadow: none; }

.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.chip {
    font-family: var(--font-head); font-size: 12px; font-weight: 700; line-height: 16px;
    padding: 9px 22px; border-radius: var(--r-full);
    background: var(--surface-high); color: var(--on-surface-variant);
    transition: background .2s, color .2s;
}
.chip:hover { background: var(--secondary-container); color: var(--on-secondary-container); }
.chip.is-active { background: var(--primary); color: var(--on-primary); }

.tag {
    display: inline-block;
    font-family: var(--font-head); font-size: 12px; font-weight: 700; line-height: 16px;
    padding: 3px 10px; border-radius: var(--r);
    background: var(--secondary-container); color: var(--on-secondary-container);
}
.tag--primary { background: var(--tertiary); color: var(--on-tertiary); }
.tag--pill { border-radius: var(--r-full); padding: 5px 16px; }

.meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-family: var(--font-head); font-size: 12px; font-weight: 600;
    color: var(--on-surface-variant);
}
.meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--outline-variant); }

/* ==========================================================================
   Page head (hero)
   ========================================================================== */
.page-head { position: relative; padding: 32px 0 48px; }
.page-head::before {
    content: ""; position: absolute; z-index: -1;
    top: -40px; right: -40px; width: 320px; height: 320px;
    background: var(--primary-container); opacity: .18;
    border-radius: 50%; filter: blur(60px);
}
.page-head .inner { max-width: 46rem; }
.page-head h1 {
    font-family: var(--font-head);
    font-size: 32px; line-height: 42px; font-weight: 700; letter-spacing: -.02em;
    margin: 16px 0 20px;
}
.page-head h1 .accent { color: var(--primary); }
.page-head p { font-size: 17px; line-height: 28px; color: var(--on-surface-variant); max-width: 40rem; }
@media (min-width: 768px) {
    .page-head h1 { font-size: 46px; line-height: 60px; }
}

.breadcrumb {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-top: 24px;
    font-family: var(--font-head); font-size: 12px; font-weight: 700;
    color: var(--on-surface-variant);
}
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: var(--outline-variant); }
.breadcrumb .current { color: var(--primary); }

/* ==========================================================================
   Featured (bento)
   ========================================================================== */
.featured {
    display: grid; grid-template-columns: 1fr; gap: var(--gutter);
    margin-bottom: 64px;
}
@media (min-width: 900px) { .featured { grid-template-columns: 2fr 1fr; } }

.feature-main {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--r-2xl); min-height: 380px;
    background: var(--surface-variant);
    box-shadow: 0 20px 40px -10px rgba(26,43,60,.08);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
}
@media (min-width: 900px) { .feature-main { min-height: 500px; } }
.feature-main:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -15px rgba(26,43,60,.14); }
.feature-main img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .7s;
}
.feature-main:hover img { transform: scale(1.05); }
.feature-main .scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(27,28,28,.85) 0%, rgba(27,28,28,.35) 38%, transparent 68%);
}
.feature-main .body {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 28px; color: #fff;
}
@media (min-width: 768px) { .feature-main .body { padding: 40px; } }
.feature-main h2 {
    font-family: var(--font-head);
    font-size: 23px; line-height: 34px; font-weight: 700;
    margin: 12px 0 10px;
}
@media (min-width: 768px) { .feature-main h2 { font-size: 31px; line-height: 44px; } }
.feature-main .meta { color: rgba(255,255,255,.85); }
.feature-main .meta .dot { background: rgba(255,255,255,.45); }

.feature-side { display: flex; flex-direction: column; gap: var(--gutter); }
.feature-side .card-sm {
    display: flex; flex-direction: column; height: 100%;
    background: var(--surface-lowest);
    border-radius: var(--r-2xl); padding: 24px;
    box-shadow: 0 20px 40px -10px rgba(26,43,60,.08);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
}
.feature-side .card-sm:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -15px rgba(26,43,60,.14); }
.feature-side .thumb {
    height: 180px; border-radius: var(--r-xl); overflow: hidden; margin-bottom: 16px;
    background: var(--surface-variant);
}
.feature-side .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.feature-side .card-sm:hover .thumb img { transform: scale(1.08); }
.feature-side .cat { font-family: var(--font-head); font-size: 12px; font-weight: 700; color: var(--secondary); }
.feature-side h3 {
    font-family: var(--font-head); font-size: 19px; line-height: 28px; font-weight: 600;
    margin: 8px 0;
}
.feature-side p { font-size: 14px; line-height: 24px; color: var(--on-surface-variant); }

/* ==========================================================================
   Card grid
   ========================================================================== */
.grid {
    display: grid; grid-template-columns: 1fr;
    column-gap: var(--gutter); row-gap: 48px;
}
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card { display: block; }
.card .thumb {
    aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 20px;
    border-radius: var(--r-2xl); background: var(--surface-variant);
    box-shadow: 0 20px 40px -10px rgba(26,43,60,.08);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
}
.card:hover .thumb { transform: translateY(-4px); box-shadow: 0 30px 60px -15px rgba(26,43,60,.14); }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .thumb--empty {
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-container); color: var(--outline);
    font-family: var(--font-head); font-size: 13px; font-weight: 700;
}
.card .body { padding-inline: 8px; }
.card h2, .card h3 {
    font-family: var(--font-head); font-size: 19px; line-height: 29px; font-weight: 600;
    margin: 12px 0 8px;
    transition: color .2s;
}
.card:hover h2, .card:hover h3 { color: var(--primary); }
.card p {
    font-size: 14px; line-height: 25px; color: var(--on-surface-variant);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.empty {
    text-align: center; color: var(--on-surface-variant);
    padding: 80px 0; font-size: 15px;
}

/* ==========================================================================
   Pager
   ========================================================================== */
.pager { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 64px; }
.pager .count { font-family: var(--font-head); font-size: 12px; font-weight: 600; color: var(--on-surface-variant); }
.pager .links { display: flex; align-items: center; gap: 12px; }

/* ==========================================================================
   Article
   ========================================================================== */
.article { max-width: 46rem; margin-inline: auto; padding-bottom: 24px; }
.article h1 {
    font-family: var(--font-head);
    font-size: 29px; line-height: 44px; font-weight: 700; letter-spacing: -.02em;
    margin: 16px 0;
}
@media (min-width: 768px) { .article h1 { font-size: 38px; line-height: 56px; } }

.article-hero {
    display: block; margin: 24px 0 6px;
    border-radius: var(--r-2xl); overflow: hidden;
    box-shadow: 0 20px 40px -10px rgba(26,43,60,.08);
}
.article-hero img { width: 100%; height: auto; }
.illust-note { font-size: 11px; color: var(--outline); text-align: right; margin-bottom: 32px; }

.article-body { font-size: 17px; line-height: 32px; font-family: var(--font-serif); }
.article-body p { margin-bottom: 1.5em; }
.article-body h2 {
    font-family: var(--font-head); font-size: 21px; line-height: 32px; font-weight: 700;
    margin: 2.2em 0 .8em;
}

/* 引用（著作権法32条の要件に沿って、本文と明瞭に区別する） */
.article-body blockquote {
    position: relative;
    margin: 2em 0; padding: 24px 26px;
    background: var(--surface-low);
    border-left: 4px solid var(--primary-container);
    border-radius: var(--r-lg);
}
.article-body blockquote .quote-original {
    font-size: 16px; line-height: 28px; font-style: italic;
    color: var(--on-surface); margin-bottom: .8em;
}
.article-body blockquote .quote-translation {
    font-size: 15px; line-height: 27px; color: var(--on-surface-variant);
    padding-top: .8em; border-top: 1px dashed var(--outline-variant);
}
.article-body blockquote .quote-translation::before {
    content: "訳: "; font-family: var(--font-head); font-size: 11px; font-weight: 700;
    letter-spacing: .06em; color: var(--outline);
}
.article-body blockquote cite {
    display: block; margin-top: .9em;
    font-family: var(--font-head); font-size: 12px; font-weight: 600; font-style: normal;
    color: var(--outline);
}
.article-body blockquote cite a { color: var(--primary); }
.article-body blockquote cite a:hover { text-decoration: underline; }

/* SNSシェア（外部スクリプト不使用・モバイル優先） */
.share { margin-top: 40px; }
.share-label {
    display: block;
    font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .06em;
    color: var(--outline); margin-bottom: 10px;
}
.share-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .share-buttons { grid-template-columns: repeat(4, 1fr); } }

.share-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    /* 指で押しやすい高さを確保する */
    min-height: 48px; padding: 0 12px;
    border-radius: var(--r-full);
    font-family: var(--font-head); font-size: 13px; font-weight: 700;
    color: #fff; background: var(--on-surface);
    transition: transform .15s, opacity .15s;
}
.share-btn:hover { opacity: .88; transform: translateY(-2px); }
.share-btn:active { transform: scale(.97); }
.share-btn svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }

.share-btn--x      { background: #000; }
.share-btn--fb     { background: #1877f2; }
.share-btn--line   { background: #06c755; }
.share-btn--hatena { background: #00a4de; }
.hatena-mark { font-size: 14px; font-weight: 800; line-height: 1; }

/* 当サイト独自の補足（背景 / 日本から見ると） */
.note-box {
    margin: 36px 0;
    padding: 24px 26px;
    border-radius: var(--r-xl);
    background: var(--surface-low);
    border-left: 4px solid var(--outline-variant);
}
.note-box h2 {
    font-family: var(--font-head); font-size: 17px; line-height: 26px; font-weight: 700;
    margin-bottom: 10px;
}
.note-box p { font-size: 15px; line-height: 28px; color: var(--on-surface-variant); }
.note-box--bg { border-left-color: var(--outline-variant); }
.note-box--jp {
    background: var(--secondary-container);
    border-left-color: var(--secondary);
}
.note-box--jp h2 { color: var(--on-secondary-container); }
.note-box--jp p { color: #1e3a5f; }

/* 動画・地図などの付加セクション */
.extra { margin-top: 40px; }
.extra h2 {
    font-family: var(--font-head); font-size: 18px; line-height: 26px; font-weight: 700;
    margin-bottom: 14px;
}
.extra-note { font-size: 11px; color: var(--outline); text-align: right; margin-top: 8px; }

.video-embed, .map-embed {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: var(--r-xl); overflow: hidden;
    background: var(--surface-variant);
}
.map-embed { aspect-ratio: 16 / 10; }
.video-embed iframe, .map-embed iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.place-box {
    background: var(--surface-container);
    border-radius: var(--r-xl);
    padding: 24px;
}
.place-box h2 { margin-bottom: 10px; }
.place-name {
    font-family: var(--font-head); font-size: 15px; font-weight: 700;
    color: var(--secondary); margin-bottom: 8px;
}
.place-note { font-size: 15px; line-height: 27px; color: var(--on-surface-variant); }
.place-box .map-embed { margin-top: 18px; }

.article .source {
    margin-top: 40px; padding: 20px 24px;
    background: var(--surface-container); border-radius: var(--r-lg);
    font-size: 14px; line-height: 24px; color: var(--on-surface-variant);
}
.article .source a { color: var(--primary); font-weight: 700; }
.article .source a:hover { text-decoration: underline; }

/* ==========================================================================
   Info box（design のニュースレター枠の位置づけ）
   ========================================================================== */
.info-box {
    position: relative; overflow: hidden;
    background: var(--surface-container);
    border-radius: var(--r-2xl);
    padding: 40px 32px;
    margin-top: var(--section-gap);
}
.info-box > * { position: relative; z-index: 1; }
.info-box::after {
    content: ""; position: absolute; z-index: 0; right: -60px; bottom: -80px;
    width: 260px; height: 260px; border-radius: 50%;
    background: var(--primary-container); opacity: .22; filter: blur(50px);
}
.info-box h2 {
    font-family: var(--font-head); font-size: 23px; line-height: 34px; font-weight: 700;
    margin-bottom: 12px;
}
.info-box p { font-size: 15px; line-height: 26px; color: var(--on-surface-variant); max-width: 40rem; }
.info-box .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ==========================================================================
   Section heading
   ========================================================================== */
.section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; margin: 64px 0 28px;
}
.section-head h2 {
    font-family: var(--font-head); font-size: 23px; line-height: 32px; font-weight: 700;
}
.section-head a { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--primary); }

/* ==========================================================================
   Ads
   ========================================================================== */
.ad-unit { margin: 48px 0; text-align: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    margin-top: var(--section-gap);
    background: var(--surface-container);
    padding: 56px 0 40px;
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-grid h3 {
    font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--on-surface); margin-bottom: 14px;
}
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { font-size: 14px; color: var(--on-surface-variant); }
.footer-grid a:hover { color: var(--primary); }
.site-footer .about { font-size: 13px; line-height: 24px; color: var(--on-surface-variant); max-width: 22rem; margin-top: 14px; }
.site-footer .copyright {
    margin-top: 40px; padding-top: 24px;
    border-top: 1px solid var(--outline-variant);
    font-size: 12px; color: var(--outline);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}

/* ==========================================================================
   Asakusa GO — 地図・イベント（フェーズ1の簡素な追加分。デザイン確定後に整理）
   ========================================================================== */
.page-head--compact { padding: 10px 0 14px; }
.page-head--compact h1 { font-size: 20px; line-height: 28px; margin: 8px 0 6px; }
@media (min-width: 768px) { .page-head--compact h1 { font-size: 24px; line-height: 32px; } }
.page-head--compact p { font-size: 13px; line-height: 20px; }
.page-head--compact .tag--pill { padding: 3px 12px; font-size: 11px; }

#map {
    width: 100%; height: 58vh; min-height: 380px;
    border-radius: var(--r-xl); overflow: hidden;
    box-shadow: none; border: 1px solid var(--surface-variant);
    background: var(--surface-variant);
}
.map-legend {
    display: flex; flex-wrap: wrap; gap: 12px 18px; margin: 12px 4px 8px;
    font-family: var(--font-head); font-size: 12px; font-weight: 600; color: var(--on-surface-variant);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-item i.legend-pin {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
    font-style: normal; font-size: 10px; line-height: 1;
}
.legend-item i.legend-pin--now { box-shadow: 0 0 0 2px rgba(175,16,26,.35); }

.maplibregl-popup-content { border-radius: var(--r-lg); padding: 12px 14px; font-family: var(--font-body); }
.pop { display: flex; flex-direction: column; gap: 3px; min-width: 180px; }
.pop-cat { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.pop-title { font-family: var(--font-head); font-size: 14px; font-weight: 700; line-height: 20px; color: var(--on-surface); }
a.pop-title:hover { color: var(--secondary); }
.pop-meta { font-size: 12px; line-height: 18px; color: var(--on-surface-variant); }

/* バルーン型ピン（カテゴリ色 --pc ＋絵文字。--now は紅のパルスリング）
   円は太い白縁、尻尾は「白い大三角の上にカテゴリ色の小三角」を重ねて白縁を再現する */
.pinwrap {
    position: relative; width: 40px; height: 52px; cursor: pointer;
    transition: transform .15s;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.28));
}
.pinwrap:hover { transform: scale(1.15); z-index: 5; }
.pinwrap::after {   /* 白い尻尾（外郭） */
    content: ""; position: absolute; top: 33px; left: 50%; transform: translateX(-50%);
    border: 9px solid transparent; border-top: 15px solid #fff;
    z-index: 0;
}
.pinwrap .pin {
    position: absolute; top: 0; left: 1px; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--pc, var(--primary));
    border: 3px solid #fff;
    font-size: 17px; line-height: 1;
}
.pinwrap .pin::after {   /* カテゴリ色の尻尾（内側） */
    content: ""; position: absolute; top: 29px; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top: 11px solid var(--pc, var(--primary));
}
.pinwrap--now .pin { box-shadow: 0 0 0 3px rgba(175,16,26,.30); }
.pinwrap--now::before {
    content: ""; position: absolute; top: -4px; left: -3px;
    width: 46px; height: 46px; border-radius: 50%;
    border: 2px solid #af101a;
    animation: pin-pulse 1.8s ease-out infinite;
    pointer-events: none; z-index: 3;
}
@keyframes pin-pulse {
    0%   { transform: scale(.65); opacity: .9; }
    100% { transform: scale(1.25); opacity: 0; }
}
.pop-now {
    display: inline-block; margin-left: 4px; padding: 0 6px;
    background: var(--primary); color: #fff; border-radius: var(--r);
    font-size: 10px; font-weight: 700;
}

.performers, .events, .kitchen { margin-top: 40px; }
.performer-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .performer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .performer-grid { grid-template-columns: repeat(3, 1fr); } }
.performer-card {
    background: var(--surface-lowest); border: 1px solid var(--outline-variant);
    border-radius: var(--r-xl); padding: 18px 20px;
}
.performer-card h3 { font-family: var(--font-head); font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.performer-card ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.performer-card li { font-size: 13px; line-height: 21px; color: var(--on-surface-variant); }
.performer-card .more-link {
    display: inline-block; margin-top: 10px;
    font-family: var(--font-head); font-size: 12px; font-weight: 700; color: var(--primary);
}

.event-list { display: flex; flex-direction: column; gap: 14px; }
.event-card {
    display: flex; gap: 18px; align-items: flex-start;
    background: var(--surface-lowest); border: 1px solid var(--outline-variant);
    border-radius: var(--r-xl); padding: 18px 20px;
    transition: border-color .2s, background .2s;
}
.event-card:hover { border-color: var(--outline-variant); background: #fffaf9; box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.event-date {
    flex: 0 0 108px; display: flex; flex-direction: column; gap: 4px;
    font-family: var(--font-head);
}
.event-date strong { font-size: 14px; line-height: 20px; }
.event-date .time { font-size: 11px; color: var(--on-surface-variant); }
.event-body { min-width: 0; }
.event-body h3 { font-family: var(--font-head); font-size: 17px; line-height: 26px; font-weight: 700; margin: 6px 0 4px; }
.event-card:hover .event-body h3 { color: var(--primary); }
.event-body p {
    font-size: 13px; line-height: 22px; color: var(--on-surface-variant);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 560px) {
    .event-card { flex-direction: column; gap: 8px; }
    .event-date { flex-direction: row; align-items: center; gap: 10px; }
}

.state {
    display: inline-block; width: fit-content;
    font-family: var(--font-head); font-size: 11px; font-weight: 700; line-height: 16px;
    padding: 2px 8px; border-radius: var(--r);
}
.state--now { background: var(--tertiary); color: #fff; }
.state--future { background: var(--surface-high); color: var(--on-surface-variant); }

.event-facts {
    margin: 20px 0 8px; padding: 18px 22px;
    background: var(--surface-low); border-radius: var(--r-xl);
    display: flex; flex-direction: column; gap: 10px;
}
.event-facts > div { display: flex; gap: 14px; }
.event-facts dt {
    flex: 0 0 3.2em;
    font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--on-surface-variant);
    padding-top: 1px;
}
.event-facts dd { font-size: 15px; line-height: 24px; }

.event-thumb { flex: 0 0 96px; margin-left: auto; }
.event-thumb img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--outline-variant); }
@media (max-width: 560px) { .event-thumb { margin-left: 0; } .event-thumb img { width: 100%; height: 120px; } }

.event-preview { margin: 18px 0 6px; }
.event-preview img { max-width: 320px; width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--outline-variant); }
.event-preview figcaption { font-size: 11px; color: var(--outline); margin-top: 4px; }
.event-preview figcaption a { color: var(--primary); }

.section-head h2::before, .article-body h2::before, .extra h2::before {
    content: ""; display: inline-block;
    width: 18px; height: 3px; border-radius: 2px;
    background: var(--primary);
    margin-right: 10px; vertical-align: 4px;
}

/* 日程・会場・料金の情報パネル（Modern Edo: 淡紅の面＋細罫線） */
.event-facts { background: #fdf5f3; border: 1px solid var(--outline-variant); }
.event-facts dd strong { color: var(--on-surface); }

.performer-card .genre { font-size: 11px; font-weight: 400; color: var(--outline); margin-left: 4px; }
.performer-card .notice { color: var(--primary); font-weight: 700; }

/* 日付ナビ: 地図直下に来る場合の余白と、タップしやすい最小幅 */
.chips--days { margin: 14px 0 36px; gap: 10px; }
.chips--days .chip { min-width: 64px; text-align: center; }