/* さんぽ絵（仮）サポートサイト。配色はアプリアイコン（紺の道・茶の塗り）から取る */
:root { --accent:#2E5E8A; --ink:#1F2A33; --text:#3A4650; --muted:#6E7C86;
        --bg:#FBFAF6; --line:#E4E1D8; --card:#FFFFFF; --paint:#B3541E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent:#8FB6DA; --ink:#ECEFF2; --text:#D0D6DB;
    --muted:#93A0A8; --bg:#15181B; --line:#2C3238; --card:#1C2125; --paint:#E08A4E; }
}
:root[data-theme="dark"] { --accent:#8FB6DA; --ink:#ECEFF2; --text:#D0D6DB;
  --muted:#93A0A8; --bg:#15181B; --line:#2C3238; --card:#1C2125; --paint:#E08A4E; }

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.8; }
.wrap { max-width:680px; margin:0 auto; padding:28px 22px 64px; }
a { color:var(--accent); text-underline-offset:3px; }
a:focus-visible, summary:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; }
h1 { color:var(--ink); font-size:clamp(1.4rem, 4vw, 1.75rem); margin:1.2em 0 .4em; }
h2 { color:var(--ink); font-size:1.08rem; margin:2em 0 .5em;
  border-top:1px solid var(--line); padding-top:1.2em; text-wrap:balance; }
.meta { color:var(--muted); font-size:.86rem; }
.foot { margin-top:2.5em; }
ul { padding-left:1.3em; } li { margin:.3em 0; }
.lead { font-size:clamp(1rem, 2.6vw, 1.12rem); color:var(--ink); text-wrap:pretty; }
.icon { width:84px; height:84px; border-radius:19px; display:block; }
.head { display:flex; align-items:center; gap:16px; margin-top:8px; }
.head h1 { margin:0; }
.note { color:var(--muted); font-size:.9rem; }
.shots { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:22px 0 8px; }
.shots figure { margin:0; }
.shots img { width:100%; height:auto; display:block; border-radius:14px; border:2px solid var(--line); }
.shots figcaption { font-size:.86rem; color:var(--ink); text-align:center; margin-top:8px; line-height:1.45;
  text-decoration:underline; text-decoration-color:var(--paint); text-decoration-thickness:2px; text-underline-offset:5px; }
br.sp { display:none; }
@media (max-width:420px) { br.sp { display:inline; } }
details { border-bottom:1px solid var(--line); padding:.5em 0; }
summary { cursor:pointer; color:var(--ink); font-weight:600; }
details p { margin:.4em 0 .2em; }
.nw { white-space:nowrap; }
/* 動き（lp-craft.md）。イージングは1つ */
.anim .reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
.anim .reveal.on { opacity:1; transform:none; }
.shots img { cursor:zoom-in; }
.shots img:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media (hover: hover) {
  .shots img { transition:transform .22s cubic-bezier(.2,.7,.3,1); }
  .shots img:hover { transform:translateY(-3px) scale(1.015); }
}
.lightbox { position:fixed; inset:0; z-index:100; background:rgba(20,24,27,.82); display:flex;
  align-items:center; justify-content:center; opacity:0; transition:opacity .18s ease; }
.lightbox[hidden] { display:none; }
.lightbox.on { opacity:1; }
.lightbox img { max-width:92vw; max-height:88vh; border-radius:16px; transform:scale(.94);
  transition:transform .22s cubic-bezier(.2,.7,.3,1); cursor:default; }
.lightbox.on img { transform:none; }
.lb-close { position:absolute; top:14px; right:16px; width:44px; height:44px; border-radius:22px; border:0;
  background:rgba(255,255,255,.9); color:#1F2A33; font-size:26px; line-height:44px; cursor:pointer; }
.lb-close:focus-visible { outline:3px solid #fff; outline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
  .shots img, .lightbox img { transition:none; }
  .shots img:hover { transform:none; }
  .lightbox { transition-property:opacity; }
}