:root{--c-stat:#E3F6E1;--c-stat-line:#A6DCA2;--c-note:#FFF6D6;--c-note-line:#F0D77A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c-stat:#243A22;--c-stat-line:#3C403C;--c-note:#3A3522;--c-note-line:#6B5E2A}}
:root[data-theme="dark"]{--c-stat:#243A22;--c-stat-line:#3C403C;--c-note:#3A3522;--c-note-line:#6B5E2A}
/* ── 年齢段階の「道しるべ」のカード（ホーム・/guide/）＝B＋E：上に年齢の線と点・絵をカードいっぱいに（むぎこ 2026-09-26）。各段階ページの上の切り替えは .mini ── */
.gstages{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;list-style:none;margin:0;padding:0}
.gstages li{display:flex;flex-direction:column;position:relative}
.gstages .road{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:6px;margin-bottom:10px}
.gstages .road::before{content:"";position:absolute;left:-7px;right:-7px;top:12px;height:6px;background:#A6DCA2;border-radius:3px}
.gstages li:first-child .road::before{left:50%}.gstages li:last-child .road::before{right:50%}
.gstages .dot{position:relative;width:18px;height:18px;border-radius:50%;background:var(--c-green);border:4px solid var(--c-paper);box-shadow:0 0 0 2px var(--c-green)}
.gstages .n{display:inline-block;width:fit-content;font-size:.76rem;font-weight:700;color:#fff;background:var(--c-green);border-radius:var(--r-pill);padding:0 10px;line-height:1.7;white-space:nowrap}
.gstage{flex:1;display:flex;flex-direction:column;background:var(--c-paper);border:2px solid var(--c-line);border-radius:var(--r-m);overflow:hidden;text-decoration:none;color:var(--c-ink)}
a.gstage:hover,a.gstage:focus-visible{border-color:var(--c-green)}
.gstage .pic{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--c-tint)}
.gstage .t{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px}
.gstage b{font-size:1.02rem;line-height:1.35}
.gstage small{color:var(--c-muted);font-size:.8rem;line-height:1.5}
.gstage small.soon{color:var(--c-green-text);font-weight:700}
.gstage.off{background:var(--c-tint);border-style:dashed}
.gstages.mini{gap:12px}
.gstages.mini .gstage{padding:8px 10px;gap:3px;overflow:visible}
.gstages.mini .gstage b{font-size:.95rem}
.gstages.mini .gstage small{font-size:.75rem}
.gstages.mini .gstage.cur{border-color:var(--c-green);background:var(--c-stat)}
.gstages.mini .gstage.off .n{background:var(--c-muted)}
@media (max-width:760px){.gstages{grid-template-columns:1fr 1fr}.gstages .road::before{display:none}.gstages .road{align-items:flex-start;padding-top:0;margin-bottom:6px}.gstages .dot{display:none}.gstages.mini{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.gstages.mini{grid-template-columns:1fr 1fr}}

/* ── 段階のページ（/guide/<stage>/）── */
.guide .gstages.mini{margin:0 0 20px}
.g-sup{display:block;font-size:.85rem;color:var(--c-green-text);font-weight:700;letter-spacing:.06em;margin-bottom:4px}
.g-eyecatch{margin:0 0 20px}
.g-eyecatch img{display:block;width:100%;height:auto;border-radius:var(--r-m)}
.voices{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:0;list-style:none}
.voices li{background:var(--c-tint);border:1.5px solid var(--c-line);border-radius:var(--r-pill);padding:3px 14px;font-size:.9rem}
.voices li::before{content:"「"}.voices li::after{content:"」"}
.steps{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:14px}
.step{display:grid;grid-template-columns:136px 1fr;gap:16px;background:var(--c-paper);border:2px solid var(--c-line);border-radius:var(--r-m);padding:16px 18px}
.step:has(.pic){grid-template-columns:136px 1fr 150px}
.step .when b{display:block;font-size:1.02rem;color:var(--c-green-text);line-height:1.3}
.step .when span{font-size:.8rem;color:var(--c-muted)}
.post-body .step h3{font-size:1.05rem;margin:0 0 6px}
.step .bd p{margin:0;font-size:.95rem}
.step .who{margin-top:8px;font-size:.86rem;color:var(--c-muted)}
.step .who b{color:var(--c-ink)}
.step .pic img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-s)}
.gbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.gbtn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-radius:var(--r-pill);padding:5px 14px;font-size:.88rem;font-weight:700;text-decoration:none;border:2px solid var(--c-green);color:var(--c-green-text);background:var(--c-paper)}
.gbtn:hover,.gbtn:focus-visible{background:var(--c-stat)}
.gbtn.fill{background:var(--c-green);color:#fff}
.gbtn.fill:hover{background:var(--c-green-text)}
.gbtn .cnt{font-weight:400;font-size:.8rem;opacity:.9}
.places{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:8px}
.place{background:var(--c-paper);border:2px solid var(--c-line);border-radius:var(--r-m);padding:14px;display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
.place:has(.pic){grid-template-columns:96px 1fr}
.place .pic img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-s)}
.post-body .place h3{font-size:1rem;margin:0 0 4px;padding:0;border:0}
.place p{margin:0;font-size:.9rem}
.place .k{display:block;font-size:.78rem;color:var(--c-muted);margin-top:6px}
.systems{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}
.sys{background:var(--c-paper);border:2px solid var(--c-line);border-left:8px solid var(--c-green);border-radius:var(--r-m);padding:14px}
.post-body .sys h3{font-size:1rem;margin:0 0 4px;padding:0;border:0}
.sys p{margin:0;font-size:.9rem}
.sys .src{display:block;font-size:.78rem;color:var(--c-muted);margin-top:8px}
.gnote{background:var(--c-note);border:1.5px solid var(--c-note-line);border-radius:var(--r-m);padding:10px 14px;font-size:.9rem;margin:12px 0 0}
.gfind{background:var(--c-stat);border:2px solid var(--c-stat-line);border-radius:var(--r-m);padding:18px 20px;margin:0 0 8px}
.gfind p{margin:0 0 10px;font-size:.92rem}
.gfind .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gfind select{font:inherit;font-size:.9rem;border:1.5px solid var(--c-line);border-radius:var(--r-s);padding:5px 8px;background:var(--c-paper);color:var(--c-ink);min-height:36px}
.g-sources{margin:2.5em 0 0}
.g-sources h2{font-size:1.1rem;margin:0 0 .5em;padding-left:12px;border-left:6px solid var(--c-green)}
.g-sources ul{margin:0;padding-left:1.3em;font-size:.9rem}
.g-sources .small{font-size:.82rem;color:var(--c-muted);margin:.5em 0 0}
.gnp{display:flex;justify-content:space-between;gap:10px;margin:28px 0 0;flex-wrap:wrap}
.gnp a,.gnp .off{flex:1;min-width:200px;background:var(--c-paper);border:2px solid var(--c-line);border-radius:var(--r-m);padding:10px 14px;text-decoration:none;color:var(--c-ink)}
.gnp a:hover{border-color:var(--c-green)}
.gnp .off{background:var(--c-tint);border-style:dashed}
.gnp .r{text-align:right}
.gnp span>span,.gnp a>span{display:block;font-size:.78rem;color:var(--c-muted)}
.gnp b{color:var(--c-green-text)}
.gnp .off b{color:var(--c-muted)}
.gnp small{display:block;font-size:.75rem;color:var(--c-muted)}
@media (max-width:760px){
  .step,.step:has(.pic){grid-template-columns:1fr;gap:8px}
  .step .pic{display:none}
  .places,.systems{grid-template-columns:1fr}
  .place:has(.pic){grid-template-columns:72px 1fr}
  .gfind{padding:14px}
}