/* 立川と、おこと：一覧ページ＋各記事共通スタイル */

body{background:var(--washi);}

.walk-map{margin:0 auto 22px;max-width:860px;background:var(--kinari);border:1px solid rgba(95,122,100,.3);border-radius:4px;padding:26px;}
.walk-map .spot text{font-size:13px;}
.machi-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:860px;margin:0 auto 90px;}
.machi-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block;transition:transform .8s cubic-bezier(.22,.61,.36,1);}
.machi-photos img:hover{transform:scale(1.03);}
@media(max-width:700px){.machi-photos{gap:8px;}.walk-map .spot text{font-size:15px;}}
.walk-map svg{width:100%;height:auto;display:block;}
.walk-map .cap{font-size:12px;color:var(--sage-deep);text-align:center;letter-spacing:.25em;margin-top:10px;}
.route{fill:none;stroke:var(--sage-deep);stroke-width:2;stroke-dasharray:6 8;stroke-linecap:round;animation:walkline 30s linear infinite;}
@keyframes walkline{to{stroke-dashoffset:-280;}}
.spot circle{fill:var(--kinari);stroke:var(--kincha);stroke-width:2;transition:.3s;cursor:pointer;}
.spot:hover circle{fill:var(--kincha);}
.spot text{font-family:var(--mincho);font-size:13px;fill:var(--sumi);letter-spacing:.1em;}

.region-nav{max-width:760px;margin:0 auto 50px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.region-nav a{font-size:12.5px;letter-spacing:.15em;color:var(--sumi);text-decoration:none;border:1px solid var(--sage);border-radius:999px;padding:8px 20px;transition:.3s;}
.region-nav a:hover{border-color:var(--kincha);color:var(--kincha);}
.region-block{max-width:760px;margin:0 auto 90px;scroll-margin-top:100px;}
.region-block .sec-label{margin-bottom:36px;}
.region-block .sec-label .tag{font-size:11px;color:var(--sage-deep);border:1px solid var(--sage-deep);border-radius:999px;padding:3px 12px;letter-spacing:.15em;}

.essay-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:60px;}
.essay{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:start;}
.essay .no{writing-mode:vertical-rl;font-size:13px;letter-spacing:.4em;color:var(--kincha);border-right:1px solid var(--sage);padding-right:18px;height:150px;}
.essay h2{font-size:21px;font-weight:500;letter-spacing:.16em;margin-bottom:16px;line-height:1.9;}
.essay p{font-size:14.5px;color:var(--sumi-soft);line-height:2.3;margin-bottom:1.2em;}
.essay .soon-tag{display:inline-block;font-size:11px;letter-spacing:.25em;color:var(--sage-deep);border:1px solid var(--sage-deep);border-radius:999px;padding:3px 14px;margin-bottom:14px;}
.essay.soon{opacity:.6;}
.essay .excerpt{font-size:13.5px;color:var(--sumi-soft);line-height:2.1;}
.essay .more{display:inline-block;margin-top:8px;font-size:13px;color:var(--sumi);text-decoration:none;border-bottom:1px solid var(--kincha);padding-bottom:2px;}
@media(max-width:700px){.essay{grid-template-columns:1fr;}.essay .no{writing-mode:horizontal-tb;height:auto;border-right:none;border-bottom:1px solid var(--sage);padding:0 0 8px;}}

.dora-wrap{width:min(320px,84vw);margin:26px auto;background:var(--kinari);border:1px solid rgba(95,122,100,.3);border-radius:4px;padding:18px 16px 12px;}
.dora-wrap .cap{font-size:11px;color:var(--sage-deep);text-align:center;letter-spacing:.2em;margin-bottom:4px;}
.dora-wrap svg{width:100%;height:auto;display:block;touch-action:manipulation;cursor:pointer;}
.dora-body{fill:#C99A5B;stroke:#9C7038;stroke-width:1.5;}
.dora-fold{fill:#DDB679;stroke:#9C7038;stroke-width:1;opacity:.8;}
.dora-stamp{fill:none;stroke:#9C7038;stroke-width:1;opacity:.5;}
.dora-kanji{font-family:var(--mincho);font-size:13px;fill:#7A5230;letter-spacing:.15em;}
.dora-hit{fill:transparent;cursor:pointer;}
.steam-line{fill:none;stroke:var(--sage-deep);stroke-width:2;stroke-linecap:round;opacity:0;}
.steaming .steam-line{animation:steamRise 1.4s ease-out;}
.steaming .s2{animation-delay:.15s;}
.steaming .s3{animation-delay:.3s;}
.steaming .dora-body{animation:doraPop .5s ease-out;}
@keyframes steamRise{0%{opacity:0;transform:translateY(0);}30%{opacity:.6;}100%{opacity:0;transform:translateY(-18px);}}
@keyframes doraPop{0%{transform:translateY(0);}30%{transform:translateY(-3px);}70%{transform:translateY(1px);}100%{transform:translateY(0);}}

/* 多摩地区ガイド：ハブカード（一覧ページ） */
.guide-feature{max-width:860px;margin:0 auto 70px;background:var(--sumi);color:var(--kinari);border-radius:4px;padding:44px clamp(24px,5vw,60px);position:relative;overflow:hidden;text-decoration:none;display:block;transition:.4s;}
.guide-feature:hover{box-shadow:0 24px 50px -26px rgba(43,43,38,.5);}
.guide-feature::before{content:"";position:absolute;inset:12px;border:1px solid rgba(217,192,138,.35);pointer-events:none;}
.guide-feature .en{font-family:var(--en);font-size:11px;letter-spacing:.45em;color:#D9C08A;}
.guide-feature h2{font-size:clamp(21px,3vw,27px);font-weight:500;letter-spacing:.14em;color:var(--kinari);margin:12px 0 14px;line-height:1.8;}
.guide-feature p{font-size:14px;color:rgba(239,237,226,.8);line-height:2.1;max-width:56ch;}
.guide-feature .go{display:inline-block;margin-top:18px;font-size:12.5px;letter-spacing:.2em;color:#D9C08A;}

/* 多摩地区ガイド：記事ページ */
.tama-map{max-width:820px;margin:40px auto;background:var(--kinari);border:1px solid rgba(95,122,100,.3);border-radius:4px;padding:26px;}
.tama-map svg{width:100%;height:auto;display:block;touch-action:manipulation;}
.tama-map .cap{font-size:12px;color:var(--sage-deep);text-align:center;letter-spacing:.2em;margin-top:10px;}
.tm-route{fill:none;stroke:rgba(95,122,100,.5);stroke-width:1.6;stroke-dasharray:5 7;}
.tm-node circle{fill:var(--washi);stroke:var(--sage-deep);stroke-width:2;cursor:pointer;transition:.25s;}
.tm-node.center circle{fill:var(--kincha);stroke:var(--kincha);}
.tm-node:hover circle{stroke:var(--kincha);}
.tm-node.active circle{fill:var(--kincha);stroke:var(--kincha);}
.tm-node text{font-family:var(--mincho);font-size:13px;fill:var(--sumi);letter-spacing:.08em;}
.tm-node.center text{fill:var(--kincha);font-weight:500;}
.tm-node.active text{fill:var(--kincha);}
@media(max-width:680px){.tm-node text{font-size:16px;}}

.guide-article{max-width:720px;margin:0 auto;}
.guide-article h1{font-size:clamp(24px,3.4vw,32px);font-weight:500;letter-spacing:.16em;line-height:1.9;margin:14px 0 10px;}
.guide-article .meta{font-size:12px;color:var(--sumi-soft);letter-spacing:.2em;}
.guide-article h2{font-size:19px;font-weight:500;letter-spacing:.14em;margin:56px 0 20px;padding-left:16px;border-left:3px solid var(--kincha);scroll-margin-top:100px;}
.guide-article p{font-size:15px;color:var(--sumi-soft);line-height:2.3;margin-bottom:1.4em;}
.guide-article .en{font-family:var(--en);font-size:11px;letter-spacing:.45em;color:var(--kincha);}
.guide-article .foot-note{font-size:13px;color:var(--sage-deep);border-top:1px solid rgba(95,122,100,.3);padding-top:20px;margin-top:50px;}
/* 各話ページの前後ナビ（textbook.cssと同じ見た目） */
.next-nav{max-width:720px;margin:60px auto 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;}
.next-nav a{color:var(--sumi);text-decoration:none;border-bottom:1px solid var(--kincha);padding-bottom:3px;}