/* 街の一覧ページ。枠線のカードにせず、罫線で区切った行にする(下部セクションの文法と同じ)。識別子の番号だけ朱色。 */
.towns-title { margin: 0 0 28px; font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1.02; letter-spacing: -.06em; font-weight: 900; }
.towns-title span { display: inline-block; }
.towns-lead { max-width: 40em; }
.towns-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 56px 0 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.towns-numbers > div { padding: 22px 24px 24px 0; border-right: 1px solid var(--line, #d9ddd6); }
.towns-numbers > div + div { padding-left: 24px; }
.towns-numbers > div:last-child { border-right: 0; }
.towns-numbers dt { font-size: .8rem; color: var(--muted); }
.towns-numbers dd { margin: 6px 0 0; font-size: .9rem; }
.towns-numbers b { font: 600 clamp(1.8rem, 4vw, 3rem) "Lexend Exa", sans-serif; letter-spacing: -.02em; margin-right: 4px; }
.towns-list { list-style: none; margin: 0 0 72px; padding: 0; }
.towns-list li { border-bottom: 1px solid var(--line, #d9ddd6); }
.towns-list a { display: grid; grid-template-columns: 64px minmax(160px, 300px) minmax(0, 1fr); gap: clamp(16px, 3vw, 44px); align-items: center; padding: 28px 0; color: inherit; text-decoration: none; }
.towns-no { font: 600 .95rem "Lexend Exa", sans-serif; color: var(--accent, #e45f38); }
.towns-list img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 100%; background: #dcebf2; }
.towns-copy { display: grid; gap: 8px; }
.towns-copy small { font: 600 .72rem "Lexend Exa", sans-serif; letter-spacing: .1em; color: var(--town); }
.towns-copy b { font-size: clamp(1.5rem, 3.2vw, 2.5rem); font-weight: 900; letter-spacing: -.05em; line-height: 1.1; color: var(--town); }
.towns-copy span { font-size: .95rem; line-height: 1.8; max-width: 34em; }
.towns-copy em { font-style: normal; font-size: .8rem; color: var(--muted); }
.towns-list a:hover b { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px; }
.towns-text { margin: 0 0 32px; font-size: .95rem; line-height: 1.95; max-width: 36em; }
@media (max-width: 720px) {
  .towns-numbers { grid-template-columns: 1fr; }
  .towns-numbers > div, .towns-numbers > div + div { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--line, #d9ddd6); }
  .towns-numbers > div:last-child { border-bottom: 0; }
  .towns-list a { grid-template-columns: 36px minmax(0, 1fr); }
  .towns-list img { grid-column: 2; }
  .towns-copy { grid-column: 2; }
}