/* 文字を隠さず、移動と回転で楽しさを加える。 */
.mascot{display:block;width:100%;height:auto;overflow:visible}
.cat-breath{transform-origin:145px 290px;animation:cat-breathe 4s ease-in-out infinite}
.cat-tail{transform-origin:190px 265px;animation:cat-tail 3.3s ease-in-out infinite}
.cat-eyes{transform-box:fill-box;transform-origin:center;animation:cat-blink 6.3s infinite}
.hero{isolation:isolate;overflow:hidden;background:linear-gradient(135deg,#fae9e4,#f9eee6 62%,#e9f0df)}
.hero>div:not(.pastel-parallax){z-index:1;min-width:0}
.hero-art{display:block;text-align:center;padding:0}
.hero-art .mascot{width:min(100%,310px);margin:auto}
.mascot-arrival{animation:cat-arrival 1.2s cubic-bezier(.22,.8,.32,1) both}
.mascot-name{font-size:16px;font-weight:700;letter-spacing:.08em;margin-top:10px}
.hero .art-caption{margin-top:4px;color:var(--ink)}
.headline-line{display:block;animation:headline-rise .8s ease-out both}
.headline-line:nth-child(2){animation-delay:.2s}
.pastel-parallax{position:absolute;inset:0;pointer-events:none;z-index:0;transform:translate3d(0,var(--parallax,0px),0)}
.pastel-parallax i{position:absolute;display:block;animation:pastel-float 7s ease-in-out infinite}
.float-yarn{width:100px;height:100px;border-radius:46% 54% 58% 42%;background:repeating-linear-gradient(35deg,#e4d4da 0 3px,#eedee3 3px 11px);top:8%;right:-25px;transform:rotate(20deg);opacity:.6}
.float-book{width:48px;height:63px;bottom:8%;left:48%;background:#cadcbd;border:2px solid #a3b99b;border-radius:9px;rotate:-18deg;animation-delay:-2s!important}
.float-book:before{content:"";position:absolute;left:10px;top:0;height:100%;border-left:2px solid #a3b99b}
.float-paw{width:50px;height:45px;left:55%;top:12%;animation-delay:-4s!important}
.float-paw:before,.float-paw:after,.float-paw b:before,.float-paw b:after{content:"";position:absolute;background:#c6d8df;border-radius:50%}
.float-paw:before{width:34px;height:26px;top:24px;left:8px}.float-paw:after{width:15px;height:19px;left:0;top:9px}.float-paw b:before{width:15px;height:20px;left:20px;top:0}.float-paw b:after{width:15px;height:19px;left:39px;top:12px}
.reveal-in{animation:card-bounce .75s cubic-bezier(.2,.7,.25,1) both}
.button,button{transition:transform .18s,background .18s}
.button:hover,button:hover{transform:translateY(-3px)}
.button:active,button:active{transform:scale(.94)}
.mascot-note{display:flex;gap:18px;align-items:center;margin:12px 0 22px}
.mascot-note>.mascot{width:112px;flex:0 0 112px}
.mascot-note>p{padding:14px 18px;border:1px solid var(--line);background:var(--sage);border-radius:20px 20px 20px 4px;max-width:420px;font-size:16px}
.about-mascot{justify-content:flex-end}
.safety-panel{position:relative}
.safety-mascot{position:absolute;right:12px;top:0;margin:0;width:60px;pointer-events:none}
.safety-mascot>.mascot{width:60px;flex-basis:60px}
.safety-panel>.danger{padding-right:82px}
.safety-panel>.notice{padding-right:82px;border:2px solid #526663}
.cat-track{position:relative;height:85px;margin:10px 0 0;border-bottom:5px solid #dbe3d2;--progress:0%;}
.track-fill{height:5px;position:absolute;bottom:-5px;left:0;width:var(--progress);background:var(--green);transition:width .7s ease}
.walking-cat{position:absolute;bottom:0;left:var(--progress);width:80px;transform:translateX(-50%);margin-left:40px;transition:left .7s ease,margin-left .7s ease}
.walking-cat .mascot{height:82px;width:80px}
.walking-cat.is-walking .cat-legs{transform-origin:130px 260px;animation:cat-walk .18s ease-in-out 4 alternate}
.cat-track.at-end .walking-cat{margin-left:-40px}
.cat-track+.progress{margin-top:12px}
.question-enter{animation:question-slide .55s cubic-bezier(.2,.8,.3,1)}
.result-mascot .cat-head{transform-origin:133px 174px;animation:cat-nod .65s ease-in-out 2}
.lost-page{text-align:center;padding-top:38px}.lost-page h1{font-size:56px;color:var(--green)}
.lost-page h1 span{display:block;font-size:clamp(24px,4vw,36px);color:var(--ink)}
.lost-page .mascot-note{display:block;margin:12px auto}.lost-page .mascot-note>.mascot{width:250px;margin:auto}
.lost-page .mascot-note p{margin:0 auto 24px}.lost-page .actions{justify-content:center;margin-top:24px}
.mascot-lost .cat-head{transform-origin:130px 175px;animation:cat-look 5s ease-in-out infinite}
.mascot-lost .cat-face{animation:face-look 5s ease-in-out infinite}
.sheet-page{padding:45px 0}.sheet-page .wrap{width:min(1420px,calc(100% - 64px))}
.sheet-page h1{margin:0 0 12px}.mascot-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:38px}
.mascot-gallery article{background:#f1f4ed;border:1px solid var(--line);border-radius:22px;padding:16px 8px;text-align:center}
.mascot-gallery img{width:100%;display:block}.mascot-gallery h2{font-size:21px}.mascot-gallery p{font-size:14px}
.rough-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px}.rough-gallery img{width:100%;display:block}.rough-gallery h2{font-size:21px}
.motion-toggle{border:1px solid var(--green);background:white;color:var(--green);border-radius:12px;min-height:44px;padding:7px 16px;margin-bottom:18px}
/* 受診案内の領域と表示中の案内係は、常に静止させる。 */
.danger,.safety-panel,.danger *,.safety-panel *{animation:none!important;transition:none!important;transform:none!important}
html[data-safety="true"] .cat-track *,html[data-safety="true"] .mascot *{animation:none!important;transition:none!important}
html[data-safety="true"] .walking-cat{transform:translateX(-50%)!important}
html[data-safety="true"] .button:hover,html[data-safety="true"] button:hover,html[data-safety="true"] .button:active,html[data-safety="true"] button:active{transform:none}
html[data-motion="paused"] *,html[data-motion="paused"] *:before,html[data-motion="paused"] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion="paused"] .pastel-parallax{transform:none!important}
html[data-motion="paused"] .button:hover,html[data-motion="paused"] .button:active,html[data-motion="paused"] button:hover,html[data-motion="paused"] button:active{transform:none!important}
@keyframes cat-breathe{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-4px) scaleY(1.012)}}
@keyframes cat-tail{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg)}}
@keyframes cat-blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.08)}}
@keyframes cat-arrival{0%{transform:translateY(140px) rotate(-15deg)}45%{transform:translateY(-28px) rotate(6deg)}70%{transform:translateY(10px) rotate(-3deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes headline-rise{from{transform:translateY(16px)}to{transform:translateY(0)}}
@keyframes pastel-float{0%,100%{translate:0 0;rotate:-7deg}50%{translate:0 -22px;rotate:9deg}}
@keyframes card-bounce{0%{transform:translateY(36px)}65%{transform:translateY(-7px)}100%{transform:translateY(0)}}
@keyframes question-slide{0%{transform:perspective(900px) translateX(24px) rotateY(-6deg)}65%{transform:perspective(900px) translateX(-4px) rotateY(1deg)}100%{transform:none}}
@keyframes cat-walk{from{transform:rotate(-4deg) translateY(-3px)}to{transform:rotate(4deg) translateY(0)}}
@keyframes cat-nod{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(5deg) translateY(5px)}}
@keyframes cat-look{0%,100%{transform:rotate(-6deg)}45%,65%{transform:rotate(7deg)}}
@keyframes face-look{0%,100%{transform:translateX(-4px)}45%,65%{transform:translateX(4px)}}
@media(max-width:850px){.hero-art{display:block;grid-row:1}.hero-art .mascot{width:220px}.hero{gap:18px}.hero-art .art-caption{display:none}.mascot-name{margin-top:0}.float-book{left:80%}.float-paw{left:5%;top:5%}}
@media(max-width:600px){.hero-art .mascot{width:185px}.hero{padding-top:18px}.mascot-note{gap:8px}.mascot-note>.mascot{width:88px;flex-basis:88px}.mascot-note>p{padding:12px;font-size:16px}.safety-mascot>.mascot{width:48px;flex-basis:48px}.safety-mascot{width:48px;right:6px}.safety-panel>.danger,.safety-panel>.notice{padding-right:62px}.mascot-gallery,.rough-gallery{grid-template-columns:1fr}.sheet-page .wrap{width:calc(100% - 32px)}.mascot-gallery img{width:220px;margin:auto}.rough-gallery img{max-height:300px}.lost-page{padding-top:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.pastel-parallax,.button:hover,.button:active,button:hover,button:active{transform:none!important}}