:root{--cream:#fdf6e3;--leaf:#7cb342;--deep:#3f6b2f;--ink:#4a3b2a;--sky:#cfe8f5}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);
 font-family:"Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif;line-height:1.7}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;
 padding:.8rem 1rem;background:var(--deep);color:#fff}
h1{margin:0;font-size:1.4rem;letter-spacing:.08em}
.where{margin:0;background:#fff3;padding:.2rem .9rem;border-radius:2rem}
main{max-width:1000px;margin:0 auto;padding:.8rem}
#map{width:100%;height:auto;display:block;border-radius:1.2rem;background:linear-gradient(var(--sky),#f3f9e6)}
.ground{fill:#9ccc65;stroke:#6a9a3a;stroke-width:4}
.pad{fill:var(--c);stroke:#fff;stroke-width:3;opacity:.55}
.spot{cursor:pointer;outline:none}
.spot:hover .pad,.spot:focus-visible .pad{stroke:#ff9800;stroke-width:5}
.spot.on .pad{stroke:#ff9800;stroke-width:6}
.spot text.ico{font-size:44px;text-anchor:middle}
.spot text.lbl{font-size:17px;font-weight:bold;text-anchor:middle;fill:#fff;paint-order:stroke;stroke:#3f6b2f;stroke-width:4px}
#hero{transition:transform .9s ease-in-out;pointer-events:none}
#hero .bob{animation:bob 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
nav{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0}
nav button{flex:1 1 9rem;min-height:48px;border:0;border-radius:2rem;padding:.4rem 1rem;
 font:inherit;font-weight:bold;background:#fff;color:var(--deep);box-shadow:0 2px 0 #c8d9a8;cursor:pointer}
nav button.on{background:var(--leaf);color:#fff}
#panel{background:#fff;border-radius:1.2rem;padding:1rem 1.2rem;box-shadow:0 2px 0 #e6dcc0}
#panel h2{margin:.2rem 0 .4rem;color:var(--deep)}
.photo{height:180px;border-radius:1rem;background:#eef5dc center/cover;display:grid;place-items:center;font-size:4rem}
.bar{height:16px;background:#e8efd8;border-radius:1rem;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#8bc34a,#ffb300);transition:width .8s}
#panel ul{padding-left:1.2rem}
.btn{display:inline-block;padding:.5rem 1.2rem;border-radius:2rem;background:#e8782a;color:#fff;text-decoration:none;font-weight:bold}
@media (min-width:760px){#panel{display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem}#panel h2,#panel .intro{grid-column:1/-1}}
.cloud{animation:drift 50s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(70px)}}
@media (prefers-reduced-motion:reduce){.cloud{animation:none}#hero{transition:none}#hero .bob{animation:none}}

.logs{grid-column:1/-1}
.rec{display:flex;gap:.9rem;flex-wrap:wrap;padding:.8rem 0;border-top:2px dotted #d8c9a0}
.rec img{width:160px;height:120px;object-fit:cover;border-radius:.9rem;display:block}
.rec time{font-size:.85rem;color:#8a6a3a}
.rec p{margin:.1rem 0;white-space:pre-wrap}
.rec>div{flex:1 1 14rem}

.homelink{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem 1.1rem .3rem .35rem;border-radius:2rem;
 background:var(--cream);color:#b85a10;font-weight:bold;text-decoration:none;border:3px solid #ffb74d;
 box-shadow:0 3px 0 #e8782a;transition:transform .2s,box-shadow .2s}
.homelink .sp{width:30px;height:30px;border-radius:50%;background:#8bc34a;display:grid;place-items:center;font-size:1.05rem}
.homelink:hover,.homelink:focus-visible{transform:translateY(-2px) rotate(-1.5deg);box-shadow:0 5px 0 #e8782a}
.homelink:focus-visible{outline:3px solid #fff;outline-offset:2px}
.homelink:active{transform:translateY(1px);box-shadow:0 1px 0 #e8782a}
@media (max-width:620px){.homelink{order:3;width:100%;justify-content:center}}