/* =========================================================
   いさはやアエル中央商店街（トップ・店舗一覧 共通）
   色・文字・動きの速さは :root の変数を直すと全体が変わる
   ========================================================= */
:root{
  --c-bg:#FBF8F3;          /* 生成り（地の色） */
  --c-surface:#FFFFFF;
  --c-sand:#F3EDE4;        /* 区切りの背景 */
  --c-ink:#2B2622;         /* 文字 */
  --c-ink-sub:#5E554D;     /* 補足の文字 */
  --c-line:#E4DCD0;        /* 区切り線（飾り） */
  --c-field:#8A8178;       /* 入力欄・絞り込みの枠 */

  --c-sakae:#F39800;       /* 栄町通り：看板の色（線・点だけに使う） */
  --c-honmachi:#2EA7E0;    /* ほんまち通り */
  --c-takenoshita:#22AC38; /* 竹の下通り */
  --c-sakae-text:#A65300;  /* 文字にするときの濃い色 */
  --c-honmachi-text:#00689E;
  --c-takenoshita-text:#1E7A32;
  --c-sakae-tint:#FDF0DE;  /* 写真のない店の背景など */
  --c-honmachi-tint:#E2F2FA;
  --c-takenoshita-tint:#E2F3E5;
  --c-river:#CDEBF7;       /* 本明川 */

  --c-cta:#C8473D;         /* 「お店をさがす」専用 */
  --c-cta-hover:#A93A31;

  /* 日本語：端末標準の角ゴシック／英字の小見出し：端末標準のセリフ体 */
  --font-head:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo","Yu Gothic","YuGothic",sans-serif;
  --font-body:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo","Yu Gothic","YuGothic",sans-serif;
  --font-label:"Times New Roman",Times,Georgia,serif;

  --t-slide:5.5s;  /* 最初の画面の写真が切り替わる間隔（js/main.js もこの値を読む） */
  --t-fade:1.2s;   /* 写真がふんわり入れ替わる時間 */

  /* 動きの性格：歩く速さ。跳ねない・一定・左から右 */
  --ease-walk:cubic-bezier(.25,.6,.3,1);
  --t-react:.2s;   /* 押したときの反応・絞り込みの入れ替わり */
  --t-show:.4s;    /* 出てくる */
  --t-step:.55s;   /* 通りを1本歩く（js/main.js もこの値を読む） */

  --radius:12px;
  --radius-pill:999px;
  --gap-section:72px;
  --container:1200px;
}
@media (min-width:1024px){ :root{ --gap-section:112px; } }

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--c-bg); color:var(--c-ink);
  font-family:var(--font-body); font-size:16px; line-height:1.8;
  -webkit-text-size-adjust:100%;
  padding-bottom:76px; /* スマホの下部固定メニューの分 */
}
@media (min-width:768px){ body{ padding-bottom:0; } }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.4; margin:0; }
p{ margin:0; }
:focus-visible{ outline:3px solid var(--c-honmachi-text); outline-offset:3px; border-radius:4px; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 20px; }
@media (min-width:768px){ .container{ padding:0 32px; } }
/* 見出しは言葉の途中で折らない（句読点・<wbr> の位置で折る。入りきらないときだけ途中で折る） */
.section-title, .event__name, .hero__event-text b{ word-break:keep-all; overflow-wrap:anywhere; }
.nowrap{ white-space:nowrap; }
/* スマホ：Tabキーで移ったリンクが下部固定メニューに隠れないように */
@media (max-width:767px){ html{ scroll-padding-bottom:88px; } }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ===== 提案用の見本であることの表示（ページ最上部） ===== */
.demo-bar{ background:var(--c-ink); color:#fff; font-size:13px; line-height:1.5; padding:6px 20px; text-align:center; }

/* ===== 部品 ===== */
.eyebrow{ font-size:15px; font-weight:700; color:var(--c-ink-sub); letter-spacing:.06em; margin-bottom:10px; display:flex; flex-direction:column; gap:2px; }
.eyebrow__en{ font-family:var(--font-label); font-weight:400; font-size:15px; letter-spacing:.24em; text-transform:uppercase; color:var(--c-ink); }
.section-title{ font-size:26px; letter-spacing:.04em; }
@media (min-width:1024px){ .section-title{ font-size:38px; } }
.section{ padding:var(--gap-section) 0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:12px 28px; border-radius:var(--radius-pill);
  font-family:var(--font-head); font-weight:700; font-size:18px; text-decoration:none;
  border:2px solid transparent; cursor:pointer;
  transition:background-color var(--t-react) var(--ease-walk), transform var(--t-react) var(--ease-walk);
}
.btn--cta{ background:var(--c-cta); color:#fff; }
.btn--cta:hover{ background:var(--c-cta-hover); }
.btn--cta:active{ transform:translateY(1px); }
.btn--ink{ background:var(--c-ink); color:#fff; }
.btn--ghost{ background:var(--c-surface); color:var(--c-ink); border-color:var(--c-ink); }
.btn__arrow{ font-family:var(--font-body); transition:transform var(--t-react) var(--ease-walk); }
.btn:hover .btn__arrow{ transform:translateX(4px); }
.text-link{ color:var(--c-ink); text-decoration:underline; text-underline-offset:4px; font-weight:700; }
.text-link:hover{ text-decoration-thickness:2px; }

/* 通りの目印（色の点＋文字。色だけで伝えない） */
.street-tag{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; line-height:1.4; }
.street-tag::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--dot); flex:none; }
.street-tag--sakaemachi{ --dot:var(--c-sakae); color:var(--c-sakae-text); }
.street-tag--honmachi{ --dot:var(--c-honmachi); color:var(--c-honmachi-text); }
.street-tag--takenoshita{ --dot:var(--c-takenoshita); color:var(--c-takenoshita-text); }

/* 出てくる動き（1回だけ）。JSが動くときだけ最初に隠す */
.js .reveal{ opacity:0; transform:translateY(12px); }
.js .reveal.is-shown{ opacity:1; transform:none; transition:opacity var(--t-show) var(--ease-walk), transform var(--t-show) var(--ease-walk); }

/* ===== ヘッダー ===== */
.header{ background:var(--c-surface); border-bottom:1px solid var(--c-line); }
.header .container{ display:flex; align-items:center; justify-content:space-between; min-height:68px; }
.header__logo img{ height:48px; width:auto; }
@media (min-width:1024px){ .header__logo img{ height:58px; } .header .container{ min-height:84px; } }
.header__menu-btn{ min-height:44px; min-width:44px; padding:8px 16px; border:2px solid var(--c-ink); background:none; border-radius:var(--radius-pill); font:700 15px var(--font-body); color:var(--c-ink); cursor:pointer; }
.header__nav{ display:none; }
.header__nav ul{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.header__nav a{ text-decoration:none; font-weight:700; font-size:16px; padding:10px 0; display:inline-block; }
.header__nav a:hover, .header__nav a[aria-current="page"]{ text-decoration:underline; text-underline-offset:6px; }
@media (min-width:1024px){ .header__nav{ display:block; } .header__menu-btn{ display:none; } }
.sp-nav{ background:var(--c-surface); border-bottom:1px solid var(--c-line); }
.sp-nav ul{ list-style:none; margin:0; padding:8px 20px 16px; }
.sp-nav a{ display:block; padding:12px 0; font-weight:700; text-decoration:none; border-bottom:1px solid var(--c-line); }

/* ===== 最初の画面 ===== */
.hero{ background:var(--c-surface); }
/* 写真は時間でふんわり入れ替わる（スマホ：看板3つ→マルシェ／PC：3つの看板→マルシェ） */
.hero__slides{ position:relative; height:300px; overflow:hidden; background:#DCEFF9; touch-action:pan-y; }
.hero__slide{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity var(--t-fade) ease-in-out; }
.hero__slide.is-active{ opacity:1; }
.hero__slide img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%); }
.hero__pause{
  position:absolute; right:12px; bottom:12px; z-index:2; min-height:44px; padding:6px 16px;
  border:0; border-radius:var(--radius-pill); background:rgba(255,255,255,.92); color:var(--c-ink);
  font:700 14px var(--font-body); cursor:pointer; display:inline-flex; align-items:center; gap:8px;
}
.hero__pause-icon{ width:10px; height:12px; border-left:3px solid currentColor; border-right:3px solid currentColor; }
.hero__pause[aria-pressed="true"] .hero__pause-icon{ width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor; }
.hero__slide.is-pc{ display:none; }
@media (min-width:768px){
  .hero__slides{ height:auto; aspect-ratio:1920 / 600; }
  .hero__slide.is-sp{ display:none; }
  .hero__slide.is-pc{ display:block; }
}
/* 写真の下の「通りの帯」：どの看板を見ているか */
.hero__road{ display:flex; gap:4px; padding:0; margin:0; list-style:none; }
.hero__road li{ flex:var(--len) 1 0; }
.hero__road li.is-river{ flex:7 1 0; background:var(--c-river); }
.hero__road button{
  width:100%; min-height:48px; padding:0 0 6px; border:0; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font:700 14px var(--font-body); color:var(--c-ink-sub);
}
.hero__road button::before{ content:""; display:block; width:100%; height:6px; background:var(--seg); transition:height var(--t-react) var(--ease-walk); }
.hero__road button[aria-current="true"]{ color:var(--txt); }
.hero__road button[aria-current="true"]::before{ height:12px; }
.hero__road .is-sakae{ --seg:var(--c-sakae); --txt:var(--c-sakae-text); }
.hero__road .is-honmachi{ --seg:var(--c-honmachi); --txt:var(--c-honmachi-text); }
.hero__road .is-takenoshita{ --seg:var(--c-takenoshita); --txt:var(--c-takenoshita-text); }
@media (min-width:768px){
  /* PCは3つの看板が全部見えるので、看板の写真のあいだは3本とも太く。マルシェの写真では細く戻る */
  .hero__road button{ color:var(--txt); }
  .hero__road.is-all button::before{ height:12px; }
}

.hero__band .container{ display:flex; flex-direction:column; gap:16px; padding-top:20px; padding-bottom:28px; }
.hero__event{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  padding:12px 16px; border:2px solid var(--c-ink); border-radius:var(--radius); background:var(--c-bg);
}
.hero__event-date{ font-family:var(--font-head); font-weight:700; font-size:30px; line-height:1; white-space:nowrap; }
.hero__event-date small{ font-size:15px; margin-left:2px; }
.hero__event-text{ font-size:15px; line-height:1.5; }
.hero__event-text b{ display:block; font-size:17px; }
.hero__event-arrow{ margin-left:auto; font-size:20px; transition:transform var(--t-react) var(--ease-walk); }
.hero__event:hover .hero__event-arrow{ transform:translateX(4px); }
.hero__cta{ order:-1; width:100%; min-height:56px; font-size:19px; }
@media (min-width:768px){
  .hero__band .container{ flex-direction:row; align-items:center; justify-content:space-between; }
  .hero__cta{ order:0; width:auto; min-height:60px; padding:14px 40px; font-size:20px; }
}

/* ===== 次のイベント ===== */
.event{ background:var(--c-bg); }
.event__grid{ display:grid; gap:24px; grid-template-columns:minmax(0,1fr) 120px; align-items:start; }
.event__text{ grid-column:1 / -1; }
.event__main{ grid-column:1; grid-row:2; }
.event__flyer{ grid-column:2; grid-row:2; margin:0; }
.event__flyer img{ border:1px solid var(--c-line); box-shadow:0 6px 18px rgba(43,38,34,.12); }
.event__date{ font-family:var(--font-head); font-weight:700; line-height:1; display:flex; align-items:flex-end; gap:6px; margin-top:8px; }
.event__md{ font-size:72px; letter-spacing:-.02em; }
.event__dow{ font-size:20px; border:2px solid var(--c-ink); border-radius:50%; width:40px; height:40px; display:inline-grid; place-items:center; margin-bottom:8px; }
.event__name{ font-size:22px; margin-top:14px; }
.event__meta{ margin:12px 0 0; }
.event__meta div{ display:flex; gap:12px; }
.event__meta dt{ font-weight:700; color:var(--c-ink-sub); flex:none; }
.event__meta dd{ margin:0; }
.event__points{ margin:14px 0 18px; padding-left:1.2em; }
.event__past{ margin-top:40px; padding-top:24px; border-top:1px solid var(--c-line); }
.event__past h3{ font-size:18px; margin-bottom:8px; }
.event__past ul{ list-style:none; margin:0 0 12px; padding:0; }
.event__past li{ display:flex; gap:14px; padding:6px 0; }
.event__past time{ font-weight:700; white-space:nowrap; min-width:6.5em; }
@media (min-width:768px){
  .event__grid{ grid-template-columns:minmax(0,1fr) 300px; column-gap:64px; }
  .event__text{ grid-column:1; grid-row:1; }
  .event__main{ grid-column:1; grid-row:2; }
  .event__flyer{ grid-column:2; grid-row:1 / span 2; margin-top:calc(var(--gap-section) * -1 - 16px); position:relative; } /* 上の境目にはみ出す */
  .event__md{ font-size:136px; }
  .event__dow{ width:56px; height:56px; font-size:26px; margin-bottom:18px; }
  .event__name{ font-size:30px; }
}

/* ===== 3つの通り（帯が西から東へ描かれる） ===== */
.streets{ background:var(--c-surface); overflow:hidden; }
.streets__lead{ margin-top:12px; color:var(--c-ink-sub); }
.route{ list-style:none; margin:40px 0 0; padding:0 20px; }
.route__street{ display:grid; grid-template-columns:14px minmax(0,1fr); column-gap:20px; min-height:calc(var(--len) * 4px + 120px); }
.route__line{ display:block; background:var(--seg); border-radius:0; transform-origin:top center; margin:2px 0; }
.route__body{ padding:2px 0 28px; }
.route__name{ font-size:24px; color:var(--txt); }
.route__count{ font-family:var(--font-head); font-weight:700; font-size:18px; margin-top:2px; }
.route__count .num{ font-size:52px; line-height:1.1; margin-right:2px; font-variant-numeric:tabular-nums; }
.route__link{ display:inline-block; margin-top:6px; padding:8px 0; font-weight:700; color:var(--txt); text-underline-offset:4px; }
.route__street.is-sakae{ --seg:var(--c-sakae); --txt:var(--c-sakae-text); }
.route__street.is-honmachi{ --seg:var(--c-honmachi); --txt:var(--c-honmachi-text); }
.route__street.is-takenoshita{ --seg:var(--c-takenoshita); --txt:var(--c-takenoshita-text); }
.route__river{ margin:6px -20px; padding:10px 20px 10px 54px; background:var(--c-river); color:var(--c-honmachi-text); font-weight:700; font-size:15px; }
/* JSが動くときだけ、最初は線を隠しておく */
.js .route__line{ transform:scaleY(0); }
.js .route__body, .js .route__river{ opacity:0; }
.route.is-walking .route__line{ transform:none; transition:transform var(--t-step) var(--ease-walk) calc(var(--i) * var(--t-step)); }
.route.is-walking .route__body, .route.is-walking .route__river{ opacity:1; transition:opacity var(--t-show) var(--ease-walk) calc(var(--i) * var(--t-step) + .15s); }
@media (min-width:768px){
  .route{ display:flex; padding:0; margin-top:56px; }
  .route__street{ display:block; flex:var(--len) 1 0; min-height:0; }
  .route__line{ height:16px; border-radius:0; margin:0 2px; transform-origin:left center; }
  .route__street.is-sakae .route__line{ margin-left:0; }   /* 画面の左端から */
  .route__street.is-takenoshita .route__line{ margin-right:0; } /* 画面の右端へ抜ける */
  .route__body{ padding:24px 20px 0; }
  .route__street.is-sakae .route__body{ padding-left:max(32px, calc((100vw - var(--container)) / 2 + 32px)); }
  .route__river{ flex:7 1 0; margin:-24px 0 0; padding:40px 0 0; background:linear-gradient(90deg, transparent 20%, var(--c-river) 20% 80%, transparent 80%); writing-mode:vertical-rl; display:flex; align-items:center; justify-content:flex-start; letter-spacing:.3em; min-height:200px; }
  .js .route__line{ transform:scaleX(0); }
  .route__count .num{ font-size:64px; }
}

/* ===== したいことからさがす ===== */
.wants{ background:var(--c-sand); }
.wants__list{ list-style:none; margin:32px 0 0; padding:0; border-top:1px solid var(--c-line); }
.want{ display:grid; grid-template-columns:112px minmax(0,1fr) auto; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--c-line); text-decoration:none; }
.want__photo{ aspect-ratio:4/3; overflow:hidden; border-radius:8px; background:var(--c-line); }
.want__photo img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-show) var(--ease-walk); }
.want__label{ font-family:var(--font-head); font-weight:700; font-size:20px; display:block; line-height:1.4; }
.want__eg{ display:block; font-size:15px; color:var(--c-ink-sub); line-height:1.6; margin-top:2px; }
.want__arrow{ font-size:20px; transition:transform var(--t-react) var(--ease-walk); }
.want:hover .want__arrow{ transform:translateX(4px); }
.want:hover .want__photo img{ transform:scale(1.04); }
@media (min-width:1024px){
  .wants__list{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:24px; border-top:0; }
  .wants__list li{ min-width:0; }
  .want{ grid-template-columns:1fr; border-bottom:0; padding:0; gap:12px; }
  .want__arrow{ display:none; }
}

/* ===== 来る前に ===== */
.access{ background:var(--c-bg); }
.access__photo{ margin:28px -20px 0; }
.access__photo img{ width:100%; height:200px; object-fit:cover; object-position:15% 50%; }
.access__photo figcaption{ font-size:14px; color:var(--c-ink-sub); padding:8px 20px 0; }
@media (min-width:768px){ .access__photo{ margin:36px 0 0; } .access__photo img{ height:320px; border-radius:var(--radius); } .access__photo figcaption{ padding-left:0; } }
.parking{ list-style:none; margin:32px 0 0; padding:0; border-top:2px solid var(--c-ink); }
.parking li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; padding:18px 0; border-bottom:1px solid var(--c-line); align-items:center; }
.parking h3{ font-size:19px; }
.parking__where, .parking__detail{ font-size:16px; color:var(--c-ink-sub); grid-column:1; }
.parking__free{ grid-column:2; grid-row:1 / span 3; text-align:right; font-family:var(--font-head); font-weight:700; line-height:1.1; }
.parking__free strong{ font-size:48px; display:block; }
.parking__free span{ font-size:15px; }
.parking__free.is-plain strong{ font-size:28px; }
@media (min-width:1024px){
  .parking li{ grid-template-columns:1.2fr 1fr 1fr 220px; }
  .parking__where, .parking__detail{ grid-column:auto; }
  .parking__free{ grid-column:4; grid-row:1; }
}
.access__notes{ margin:20px 0 0; padding-left:1.2em; }
.access__notes li{ margin:4px 0; }
.access__tel{ margin-top:24px; display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; }
.access__tel .text-link{ white-space:nowrap; } /* 電話番号を途中で折り返さない */

/* ===== お知らせ・動画 ===== */
.news{ background:var(--c-surface); }
.news__list{ list-style:none; margin:28px 0 0; padding:0; border-top:2px solid var(--c-ink); }
.news__list li{ display:flex; flex-direction:column; gap:2px; padding:14px 0; border-bottom:1px solid var(--c-line); }
.news__list time{ font-size:15px; font-weight:700; color:var(--c-ink-sub); white-space:nowrap; }
@media (min-width:768px){
  .news__list li{ flex-direction:row; gap:24px; align-items:baseline; }
  .news__list time{ min-width:9.5em; }
}
.news__links{ margin-top:24px; display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; }
.news__links .btn{ font-size:16px; padding:12px 22px; max-width:100%; }

/* ===== 最後の呼びかけ ===== */
.last-cta{ background:var(--c-sand); text-align:left; }
.last-cta .container{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
@media (min-width:768px){ .last-cta .container{ flex-direction:row; align-items:center; justify-content:space-between; } }

/* ===== フッター ===== */
.footer{ background:var(--c-ink); color:#fff; padding:40px 0; font-size:15px; }
.footer a{ color:#fff; }
.footer__name{ font-family:var(--font-head); font-weight:700; font-size:18px; margin-bottom:8px; }
.footer__youtube{ margin-top:8px; }
.footer__youtube a{ display:inline-block; padding:10px 0; font-weight:700; text-underline-offset:4px; }

/* ===== スマホの下部固定メニュー ===== */
.tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--c-surface); border-top:1px solid var(--c-line); box-shadow:0 -4px 16px rgba(43,38,34,.08); }
.tabbar ul{ display:grid; grid-template-columns:0.9fr 1.35fr 0.9fr 1.2fr; list-style:none; margin:0; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); gap:6px; align-items:center; }
.tabbar a{ display:flex; align-items:center; justify-content:center; min-height:48px; text-decoration:none; font-weight:700; font-size:14px; text-align:center; line-height:1.3; white-space:nowrap; border-radius:var(--radius-pill); }
.tabbar .is-main a{ background:var(--c-cta); color:#fff; font-family:var(--font-head); font-size:15px; }
@media (min-width:768px){ .tabbar{ display:none; } }

/* ===== 「デモでは準備中」の案内 ===== */
.soon-dialog{ border:0; border-radius:16px; padding:24px 20px 20px; width:calc(100% - 40px); max-width:400px; background:var(--c-surface); color:var(--c-ink); }
.soon-dialog::backdrop{ background:rgba(43,38,34,.55); }
.soon-dialog__title{ font-size:20px; }
.soon-dialog__text{ margin-top:8px; color:var(--c-ink-sub); }
.soon-dialog .btn{ margin-top:20px; width:100%; }

/* ===== 店舗一覧 ===== */
.shops{ background:var(--c-bg); padding:48px 0 var(--gap-section); }
.shops__lead{ color:var(--c-ink-sub); margin-top:6px; }
.filters{ margin-top:24px; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.filters__label{ display:block; font-size:14px; font-weight:700; color:var(--c-ink-sub); margin-bottom:6px; }
.chips{ display:flex; gap:8px; overflow-x:auto; margin:0 -20px; padding:2px 20px 4px; scrollbar-width:none; list-style:none; }
.chips::-webkit-scrollbar{ display:none; }
.chips > li{ flex:none; } /* ボタンを縮めずに横へずらせるようにする */
.chip{
  flex:none; min-height:44px; padding:8px 16px; border-radius:var(--radius-pill);
  border:1.5px solid var(--c-field); background:var(--c-surface); color:var(--c-ink);
  font:700 15px var(--font-body); cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  transition:background-color var(--t-react) var(--ease-walk), color var(--t-react) var(--ease-walk);
}
.chip .n{ font-weight:400; font-size:14px; }
.chip[aria-pressed="true"]{ background:var(--c-ink); border-color:var(--c-ink); color:#fff; }
.chip--street::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--dot); }
.chip--street[data-street="sakaemachi"]{ --dot:var(--c-sakae); --on:var(--c-sakae-text); }
.chip--street[data-street="honmachi"]{ --dot:var(--c-honmachi); --on:var(--c-honmachi-text); }
.chip--street[data-street="takenoshita"]{ --dot:var(--c-takenoshita); --on:var(--c-takenoshita-text); }
.chip--street[aria-pressed="true"]{ background:var(--on); border-color:var(--on); }
.chip--street[aria-pressed="true"]::before{ background:#fff; }
.search{ display:flex; gap:8px; }
.search input{ flex:1; min-width:0; min-height:48px; padding:8px 14px; border:1.5px solid var(--c-field); border-radius:10px; font:16px var(--font-body); background:var(--c-surface); color:var(--c-ink); }
@media (min-width:768px){ .chips{ margin:0; padding:2px 0 4px; flex-wrap:wrap; } .search{ max-width:480px; } }
.shops__result{ margin-top:24px; font-weight:700; }
.shop-group{ margin-top:28px; }
.shop-group__title{ display:flex; align-items:center; gap:12px; font-size:22px; color:var(--txt); }
.shop-group__title::before{ content:""; width:40px; height:8px; border-radius:4px; background:var(--seg); }
.shop-group__count{ font-family:var(--font-body); font-size:15px; color:var(--c-ink-sub); font-weight:400; }
.shop-group--sakaemachi{ --seg:var(--c-sakae); --txt:var(--c-sakae-text); --tint:var(--c-sakae-tint); }
.shop-group--honmachi{ --seg:var(--c-honmachi); --txt:var(--c-honmachi-text); --tint:var(--c-honmachi-tint); }
.shop-group--takenoshita{ --seg:var(--c-takenoshita); --txt:var(--c-takenoshita-text); --tint:var(--c-takenoshita-tint); }
.shop-grid{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:28px 20px; }
@media (min-width:560px){ .shop-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .shop-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1200px){ .shop-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.shop-card{ position:relative; min-width:0; }
.shop-card__photo{ aspect-ratio:3/2; overflow:hidden; border-radius:10px; background:var(--tint); margin-bottom:10px; }
.shop-card__photo img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-show) var(--ease-walk); }
.shop-card__nophoto{ width:100%; height:100%; display:grid; place-items:center; padding:0 16px; text-align:center; font-family:var(--font-head); font-weight:700; font-size:26px; color:var(--txt); }
.shop-card__name{ font-size:19px; margin-top:4px; }
.shop-card__open{ all:unset; cursor:pointer; }
.shop-card__open::after{ content:""; position:absolute; inset:0; border-radius:10px; }
.shop-card__open:focus-visible::after{ outline:3px solid var(--c-honmachi-text); outline-offset:4px; }
.shop-card:hover .shop-card__photo img{ transform:scale(1.03); }
.shop-card:hover .shop-card__name{ text-decoration:underline; text-underline-offset:4px; }
.shop-card__item{ margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.6; }
.shop-card__closed{ font-size:15px; color:var(--c-ink-sub); margin-top:4px; }
.shops__list.is-fresh .shop-card{ animation:fade var(--t-react) var(--ease-walk); }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.shops__empty{ margin-top:24px; padding:24px; background:var(--c-surface); border-radius:var(--radius); }
.shops__empty .btn{ margin-top:12px; }
.shops__noscript{ margin-top:24px; padding:24px; background:var(--c-surface); border-radius:var(--radius); }

/* 店を開いたところ（スマホは下からせり上がる／PCは中央） */
.shop-dialog{ border:0; padding:0; margin:auto auto 0; width:100%; max-width:100%; max-height:90vh; overflow:auto; position:fixed; border-radius:16px 16px 0 0; background:var(--c-surface); color:var(--c-ink); }
.shop-dialog::backdrop{ background:rgba(43,38,34,.55); }
.shop-dialog[open]{ animation:sheet-up .3s var(--ease-walk); }
@keyframes sheet-up{ from{ transform:translateY(40px); opacity:0; } to{ transform:none; opacity:1; } }
@media (min-width:768px){
  .shop-dialog{ margin:auto; max-width:760px; border-radius:16px; }
  @keyframes sheet-up{ from{ transform:translateY(16px); opacity:0; } to{ transform:none; opacity:1; } }
}
.sd{ padding:0 0 20px; }
.sd__photo{ aspect-ratio:3/2; background:var(--tint); }
.sd__photo img{ width:100%; height:100%; object-fit:cover; }
.sd__body{ padding:16px 20px 0; }
.sd__name{ font-size:24px; margin-top:4px; }
.sd__item{ margin-top:6px; }
.sd__info{ margin:16px 0 0; display:grid; gap:10px; }
.sd__info div{ display:grid; grid-template-columns:5.5em minmax(0,1fr); gap:8px; padding-top:10px; border-top:1px solid var(--c-line); }
.sd__info dt{ font-weight:700; color:var(--c-ink-sub); }
.sd__info dd{ margin:0; min-width:0; overflow-wrap:anywhere; }
.sd__actions{ display:grid; gap:10px; margin-top:20px; }
.sd__actions .btn{ width:100%; font-size:17px; }
.sd__close{ position:sticky; top:0; display:flex; justify-content:flex-end; padding:10px 12px; background:linear-gradient(var(--c-surface) 70%, transparent); z-index:1; margin-bottom:-64px; }
.sd__close button{ min-height:44px; padding:6px 18px; border-radius:var(--radius-pill); border:2px solid var(--c-ink); background:var(--c-surface); font:700 15px var(--font-body); cursor:pointer; color:var(--c-ink); }
@media (min-width:768px){
  .sd{ display:grid; grid-template-columns:320px minmax(0,1fr); padding:0; }
  .sd__photo{ aspect-ratio:auto; height:100%; min-height:100%; }
  .sd__body{ padding:64px 28px 28px; }
  .sd__close{ grid-column:1 / -1; position:absolute; right:0; top:0; background:none; margin:0; }
  .sd__actions{ grid-template-columns:1fr 1fr; }
  .sd__actions .is-tel{ grid-column:1 / -1; }
}

/* 動きを減らす設定のとき：すべて止め、完成した状態で見せる */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
  .js .reveal{ opacity:1; transform:none; }
  .js .route__line{ transform:none; }
  .js .route__body, .js .route__river{ opacity:1; }
}