:root { --brown:#4a250f; --sky:#dff5ff; --cream:#fffaf0; --blue:#35a9d8; --green:#76bd3b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--brown); background:#fff; font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { min-height:80px; max-width:1180px; margin:auto; padding:10px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; background:#fff; }
.brand { display:flex; align-items:center; gap:12px; flex:none; }
.brand-balloon { position:relative; display:block; width:46px; height:52px; border-radius:52% 52% 46% 46%; background:linear-gradient(90deg,#a8cd67 0 24%,#ffd25c 24% 48%,#ef8a7c 48% 73%,#9bd7e9 73%); border:2px solid #875c3f; box-shadow:inset 0 0 0 2px #fff6; }
.brand-balloon:after { content:""; position:absolute; left:15px; bottom:-12px; width:14px; height:12px; border:2px solid #875c3f; border-radius:2px; background:#d6a95f; }
.brand-balloon i { position:absolute; left:22px; bottom:-2px; width:2px; height:8px; background:#875c3f; }
.brand strong { display:block; font-size:23px; letter-spacing:.12em; white-space:nowrap; }
.brand small { display:inline-block; margin-top:4px; padding:2px 14px; color:#fff; background:var(--brown); border-radius:999px; font-weight:700; letter-spacing:.08em; }
nav { display:flex; gap:32px; font-size:14px; font-weight:700; }
nav a { white-space:nowrap; }
nav a:hover, nav a:focus-visible { color:#e57443; }

.hero { min-height:530px; position:relative; display:grid; grid-template-columns:1.35fr .8fr; align-items:center; gap:28px; padding:42px 80px 42px 300px; background:url(./assets/hero-illustration.png) left bottom / cover no-repeat; overflow:hidden; }
.hero-copy { position:relative; z-index:1; align-self:start; }
.hero h1 { margin:60px 0 20px; font-size:clamp(34px,4.2vw,62px); line-height:1.35; letter-spacing:.05em; text-shadow:0 3px 0 #fff,2px 0 0 #fff,-2px 0 0 #fff; }
.hero p { margin:0; padding-left:10px; color:#1f1b18; font-size:clamp(15px,1.5vw,20px); line-height:1.7; font-weight:700; text-shadow:0 1px 0 #fff; }
.hero-door { width:100%; max-height:450px; aspect-ratio:.75; object-fit:cover; border-radius:28px; box-shadow:0 10px 30px #77522d33; border:6px solid #fff9; }

.section { position:relative; padding:66px 24px; overflow:hidden; }
.section-inner { position:relative; z-index:1; width:min(1100px,100%); margin:auto; }
h2 { width:max-content; max-width:100%; margin:0 auto 24px; padding:0 20px 8px; font-size:clamp(27px,3vw,38px); line-height:1.35; text-align:center; letter-spacing:.08em; background-image:linear-gradient(90deg,#86ce51 0 33%,#f3d460 33% 66%,#66caeb 66%); background-repeat:no-repeat; background-position:center bottom; background-size:75% 3px; }
.lead { margin:0 auto 34px; width:70%; max-width:100%; color:#29221e; font-size:16px; line-height:1.9; font-weight:600; }
.section-note { margin:-10px auto 28px; text-align:center; color:#412717; font-weight:700; line-height:1.75; }
.about { background:#fffaf1; }
.cloud { position:absolute; width:90px; height:34px; border:2px solid #77513e; border-radius:50px; background:#fff; }
.cloud:before,.cloud:after { content:""; position:absolute; bottom:10px; border:2px solid #77513e; border-bottom:0; border-radius:50% 50% 0 0; background:#fff; }
.cloud:before { left:16px; width:34px; height:33px; }.cloud:after { right:10px; width:34px; height:26px; }
.cloud-a { right:8%; top:72px; }.cloud-b { right:2%; top:150px; transform:scale(.65); }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature-card { min-height:205px; padding:28px 22px; display:flex; flex-direction:column; align-items:center; gap:12px; background:#fff; border:2px solid #f3e4d3; border-radius:18px; box-shadow:0 4px 9px #69401f14; }
.feature-icon { font-size:39px; line-height:1; }
.feature-card>div { width:100%; }.feature-card h3 { margin:2px 0 16px; font-size:21px; text-align:center; white-space:nowrap; }
.feature-card p { margin:0; color:#3c2b20; font-weight:600; line-height:1.8; text-align:center; }

.gallery-section { background:#fff; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.gallery-grid img { display:block; width:100%; aspect-ratio:1.4; object-fit:cover; border-radius:22px; box-shadow:0 3px 10px #321e1024; }

.guide { padding-top:54px; padding-bottom:64px; background:linear-gradient(#def5ff,#eefbff 60%,#dff6ff); }
.guide:before,.guide:after { content:""; position:absolute; width:110px; height:48px; border-radius:50%; background:#fff9; box-shadow:38px 8px 0 -5px #fff9,-34px 13px 0 -13px #fff9; }
.guide:before { left:6%; top:75px; }.guide:after { right:6%; top:65px; }
.guide-inner { max-width:980px; }
.request-list { display:grid; gap:14px; }
.request-card { min-height:115px; position:relative; display:grid; grid-template-columns:110px 1fr; align-items:center; gap:18px; padding:18px 54px 18px 18px; border:2px solid #d8e4e8; border-radius:24px; background:#fff; box-shadow:0 5px 12px #2e73861a; }
.request-icon { display:grid; place-items:center; width:90px; height:90px; border-radius:50%; color:#fff; font-weight:900; font-size:22px; letter-spacing:-8px; background:#54add8; }
.request-icon.people { position:relative; overflow:hidden; }
.request-icon.people::before,.request-icon.people::after { content:""; position:absolute; top:14%; width:46%; height:76%; background:radial-gradient(circle at 50% 25%,#fff 0 18%,transparent 19%),radial-gradient(ellipse at 50% 92%,#fff 0 39%,transparent 40%); }
.request-icon.people::before { left:7%; }.request-icon.people::after { right:7%; }
.request-icon.heart { background:#ee7f8a; font-size:44px; letter-spacing:0; }
.request-card h3 { margin:0 0 5px; font-size:20px; }.request-card p { margin:0; color:#342a24; line-height:1.65; font-weight:600; }
.check { position:absolute; left:84px; bottom:16px; display:grid; place-items:center; width:30px; height:30px; border:3px solid #fff; border-radius:50%; background:#72bf3c; color:#fff; font-size:19px; font-weight:900; }

.access { padding-top:58px; padding-bottom:38px; }
.access h2 { margin-left:3%; }
.access-layout { display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 7fr); align-items:stretch; gap:20px; }
.access-cards { display:grid; grid-template-columns:1fr; gap:10px; }
.access-cards article { min-height:125px; position:relative; padding:24px 18px; display:grid; justify-items:center; align-content:center; text-align:center; border:2px solid #e6e4e0; border-radius:18px; background:#fff; box-shadow:0 3px 8px #6f5a4114; overflow:hidden; }
.access-cards article>span { color:#28a9d8; font-size:30px; line-height:1; }.access-cards h3 { margin:8px 0 12px; font-size:18px; }.access-cards p { margin:0; font-size:16px; line-height:1.75; font-weight:700; color:#332821; }
.map-card { min-height:395px; position:relative; overflow:hidden; border-radius:22px; border:2px solid #f0e3d4; background:#edf1ee; }
.map-card iframe { display:block; width:100%; height:100%; min-height:395px; border:0; }

footer { padding:24px; background:linear-gradient(135deg,#bdeeff,#77d4ef); }
.footer-inner { max-width:1100px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer-brand strong { font-size:24px; }.footer-inner>p { margin:0; color:#33251d; font-size:14px; line-height:1.75; }.footer-kids { white-space:nowrap; font-size:27px; }

@media (max-width:900px) {
  nav { gap:15px; font-size:12px; }
  .hero { grid-template-columns:1.15fr .75fr; }
  .feature-grid { gap:12px; }.feature-card { padding:22px 18px; }.feature-card h3 { font-size:18px; }
  .map-card,.map-card iframe { min-height:320px; }
}
@media (max-width:680px) {
  .site-header { padding:14px 18px; flex-wrap:wrap; }.brand strong { font-size:18px; }.brand small { font-size:10px; }.brand-balloon { width:38px; height:44px; }
  nav { width:100%; gap:9px; justify-content:space-between; overflow:auto; font-size:11px; }
  .hero { min-height:700px; grid-template-columns:1fr; align-content:start; gap:24px; padding:64px 18px 34px; background-size:auto 100%; background-position:26% bottom; }.hero-copy { margin:0; text-align:center; }.hero h1 { margin:0 0 24px; font-size:34px; }.hero p { padding-left:0; line-height:1.7; }.hero-door { width:min(88%,400px); height:280px; aspect-ratio:auto; margin:0 auto; border-radius:22px; }
  .section { padding:50px 18px; }h2 { font-size:27px; padding-inline:5px; }.lead br,.section-note br,.request-card br { display:none; }.lead { width:100%; font-size:14px; line-height:1.9; }.cloud { opacity:.45; }
  .feature-grid { grid-template-columns:1fr; }.feature-card { min-height:0; flex-direction:row; align-items:center; }.feature-card h3 { margin:2px 0 6px; font-size:20px; text-align:left; }.feature-card p { text-align:left; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); gap:8px; }.gallery-grid img { border-radius:14px; aspect-ratio:1; }
  .request-card { grid-template-columns:72px 1fr; gap:12px; padding:16px 16px 16px 12px; border-radius:18px; }.request-icon { width:68px; height:68px; font-size:18px; }.request-card h3 { font-size:16px; }.request-card p { font-size:13px; }.check { left:60px; bottom:12px; width:25px; height:25px; font-size:15px; }
  .access h2 { margin-inline:auto; }.access-layout { grid-template-columns:1fr; }.access-cards article { min-height:150px; }.map-card,.map-card iframe { min-height:300px; }
  .footer-inner { flex-direction:column; align-items:flex-start; }.footer-kids { align-self:center; font-size:23px; }
}
@media (max-width:420px) { .gallery-grid { grid-template-columns:1fr; }.gallery-grid img { aspect-ratio:1.5; }.hero h1 { font-size:29px; }.feature-card { gap:8px; }.footer-brand strong { font-size:19px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }