:root{--cream:#fff9ec;--paper:#fffdf6;--teal:#07534f;--coral:#f18973;--yellow:#ffe477;--blue:#bfe8e8;--ink:#244a48}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.landing{max-width:760px;margin:auto;background:var(--paper);box-shadow:0 0 45px #0a554c16}.landing section{line-height:0}.landing img{width:100%;height:auto;display:block}.start-panel{padding:3rem 1.25rem 4rem;text-align:center;background:repeating-linear-gradient(0deg,transparent 0 26px,#e9e8dc 27px),repeating-linear-gradient(90deg,transparent 0 26px,#e9e8dc 27px),var(--cream)}.start-panel p{font-weight:800;font-size:clamp(1.25rem,4vw,2rem);color:var(--teal)}.start-panel small{display:block;margin-top:1rem;line-height:1.6}.primary,.secondary{min-height:52px;border-radius:16px;padding:.8rem 1.4rem;font-weight:800;border:3px solid var(--teal)}.primary{background:var(--yellow);color:var(--teal);box-shadow:5px 6px 0 var(--teal);transition:transform .2s,box-shadow .2s}.primary:hover{transform:translate(3px,3px);box-shadow:2px 3px 0 var(--teal)}.secondary{background:#fff;color:var(--teal)}.start-panel .primary{font-size:1.22rem;min-width:min(100%,330px)}.application{min-height:100vh;background:repeating-linear-gradient(0deg,transparent 0 29px,#eae7d8 30px),repeating-linear-gradient(90deg,transparent 0 29px,#eae7d8 30px),var(--cream)}.app-header{max-width:1100px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem}.brand-button{background:none;border:0;color:var(--teal);font-weight:900;font-size:1.1rem}.text-button{border:0;background:none;text-decoration:underline;color:var(--teal);min-height:44px}.setup,.dashboard{max-width:1100px;margin:auto;padding:1rem 1rem 4rem}.setup-card,.progress-box,.map-panel,.task-panel{background:var(--paper);border:3px solid var(--teal);border-radius:24px;box-shadow:7px 8px 0 #0a55512a}.setup-card{max-width:760px;margin:1rem auto;padding:clamp(1.3rem,4vw,3rem)}h1,h2{color:var(--teal);line-height:1.4;word-break:keep-all;text-wrap:balance}h1{font-size:clamp(1.6rem,5vw,2.8rem)}h2{font-size:1.25rem}.eyebrow{font-size:.72rem;letter-spacing:.22em;font-weight:900;color:#b05646}.field{display:block;margin:2rem 0;font-weight:800}.field input{display:block;width:100%;max-width:320px;margin-top:.55rem;padding:.8rem;border:2px solid var(--teal);border-radius:12px;background:white}.room-options{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem}.room-option{display:flex;gap:.65rem;align-items:center;padding:.85rem;background:#fff;border:2px solid #b7d7d1;border-radius:13px;min-height:52px}.room-option:has(input:checked){background:#e3f8ee;border-color:var(--teal)}input[type=checkbox]{accent-color:var(--teal);width:20px;height:20px}.setup-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:1rem;margin-top:2rem}.edit-room{border-top:2px dashed #b9d1ca;padding:1rem 0}.edit-room h2{margin:.3rem 0}.edit-task{display:flex;align-items:center;gap:.5rem;margin:.4rem 0}.edit-task input[type=text],.add-task input{flex:1;min-width:0;padding:.65rem;border:2px solid #b7d7d1;border-radius:10px;background:white}.edit-task button,.add-task button{border:0;background:#e8f2ee;border-radius:10px;min-width:44px;min-height:44px;color:var(--teal)}.add-task{display:flex;gap:.4rem;margin-top:.5rem}.dash-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}.progress-box{padding:1.2rem;margin:1.5rem 0}.progress-box>div:first-child{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}.progress-box strong{font-size:1.35rem;color:var(--teal)}.progress-track{height:16px;border-radius:99px;background:#e4e8de;margin-top:1rem;overflow:hidden}.progress-track div{height:100%;width:0;background:linear-gradient(90deg,var(--coral),var(--yellow));transition:width .5s}.map-panel{padding:1.2rem}.map-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem}.map-heading span{background:var(--yellow);border-radius:99px;padding:.5rem 1rem;font-weight:800}.map-stage{position:relative;min-height:300px;padding:2rem 1rem 1rem;background:linear-gradient(180deg,#fff8df,#f0fbf7);border-radius:18px;overflow:hidden}.room-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;position:relative;z-index:1}.room-tile{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;min-height:100px;border:3px solid #24716b;border-radius:17px;background:#e8e5d9;color:var(--teal);font-weight:800;transition:background .4s,transform .2s,box-shadow .3s}.room-tile:hover,.room-tile.active{transform:translateY(-4px);box-shadow:0 6px 0 #b2d6c9}.room-tile.done{background:#dff6de}.room-tile.partial{background:#fff3c5}.room-tile .icon{font-size:1.9rem}.room-tile .medal{position:absolute;top:-15px;right:-10px;font-size:1.6rem;animation:pop .5s both}.mascot{position:absolute;z-index:2;width:85px;left:1%;bottom:0;transition:left .8s ease,bottom .8s ease,transform .4s;filter:drop-shadow(2px 6px 1px #0c4f4b3b)}.mascot svg{width:100%}.mascot.moving{animation:bob .4s infinite alternate}.map-hint{font-size:.88rem}.task-panel{padding:1.2rem;margin-top:1.5rem}.task-item{display:flex;gap:.8rem;align-items:center;padding:.9rem .4rem;border-bottom:1px dashed #c8d8cd;min-height:54px}.task-item.done{text-decoration:line-through;color:#6c8580}.task-item input{flex:none}.task-panel h2{margin-bottom:.3rem}.task-panel p{margin-top:0}.data-tools{text-align:right;margin:1rem}.celebrate{animation:pop .6s ease}@keyframes bob{to{transform:translateY(-10px) rotate(-5deg)}}@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@media(max-width:650px){.room-grid{grid-template-columns:repeat(2,1fr)}.room-tile{min-height:105px}.map-stage{padding-bottom:5rem}.mascot{width:70px}.room-options{grid-template-columns:1fr}.dash-top .secondary{width:100%}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}body.motion-off *,body.motion-off *::before,body.motion-off *::after{animation:none!important;transition:none!important}
.landing-toolbar{display:flex;align-items:center;justify-content:space-between;padding:.5rem .8rem;background:#fff9ec;color:var(--teal);font-size:.82rem;font-weight:800}.landing-toolbar button{min-height:44px;border:2px solid var(--teal);border-radius:99px;padding:.4rem .8rem;background:#fff;color:var(--teal);font-weight:800}.landing section{position:relative;perspective:900px;transform-style:preserve-3d}.landing section img{transform-origin:top center;backface-visibility:hidden}.landing section.turning img{animation:page-turn .65s cubic-bezier(.38,.02,.31,1) both}.page-next{display:block;width:calc(100% - 2rem);max-width:360px;min-height:48px;margin:-.3rem auto 1.3rem;padding:.55rem 1rem;border:2px solid var(--teal);border-radius:99px;background:var(--blue);color:var(--teal);font-weight:800;line-height:1.3;box-shadow:3px 4px 0 #07534f2b}.page-next span{display:inline-block;transform:rotate(35deg)}.task-panel.page-rustle{animation:rustle .42s ease}@keyframes page-turn{0%{transform:rotateX(0);filter:brightness(1)}48%{transform:rotateX(12deg);filter:brightness(.95)}100%{transform:rotateX(65deg);filter:brightness(.8)}}@keyframes rustle{0%,100%{transform:rotateX(0)}45%{transform:rotateX(3deg) translateY(-4px)}}@media(prefers-reduced-motion:reduce){.landing section.turning img,.task-panel.page-rustle{animation:none!important}}body.motion-off .landing section.turning img,body.motion-off .task-panel.page-rustle{animation:none!important}
.hero{overflow:hidden}.hero-runner{position:absolute;z-index:2;top:43%;left:23%;width:19%;pointer-events:none;animation:runner-patrol 3.8s ease-in-out infinite alternate;filter:drop-shadow(2px 5px 1px #07534f44)}.runner-chick{display:block;width:100%;animation:runner-hop .32s ease-in-out infinite alternate}.runner-flag{position:absolute;z-index:3;left:68%;bottom:70%;width:190%;padding:.55em .4em .55em .65em;background:#ffe477;border:3px solid #07534f;clip-path:polygon(0 0,100% 0,87% 50%,100% 100%,0 100%);color:#07534f;font-size:clamp(9px,2.2vw,21px);font-weight:900;line-height:1.25;text-align:center;white-space:nowrap;box-shadow:3px 4px 0 #07534f2e;transform-origin:left bottom;animation:flag-flap .32s ease-in-out infinite alternate}.runner-flag::before{content:"";position:absolute;left:-7px;top:95%;height:70px;width:4px;background:#07534f}@keyframes runner-patrol{0%{transform:translateX(-18%)}100%{transform:translateX(130%)}}@keyframes runner-hop{to{transform:translateY(-10px) rotate(5deg)}}@keyframes flag-flap{to{transform:rotate(4deg) scaleX(.94)}}@media(max-width:500px){.hero-runner{top:44%;width:22%;left:19%}.runner-flag{font-size:10px;border-width:2px;padding:.45em .25em .45em .5em}}@media(prefers-reduced-motion:reduce){.hero-runner,.runner-chick,.runner-flag{animation:none!important}}body.motion-off .hero-runner,body.motion-off .runner-chick,body.motion-off .runner-flag{animation:none!important}
.chick-track{height:110px;position:relative;max-width:360px;margin:0 auto 1rem;overflow:hidden}.chick-track img{position:absolute;top:0;left:8%;width:90px;height:100px;object-fit:contain;animation:chick-walk 4s ease-in-out infinite alternate}@keyframes chick-walk{0%{left:8%;transform:rotate(-5deg)}25%{transform:translateY(-5px) rotate(4deg)}50%{transform:rotate(-4deg)}75%{transform:translateY(-5px) rotate(4deg)}100%{left:calc(92% - 90px);transform:rotate(-5deg)}}@media(prefers-reduced-motion:reduce){.chick-track img{animation:none!important}}body.motion-off .chick-track img{animation:none!important}
.hero .chick-track{position:absolute;left:0;right:0;top:82%;height:10%;max-width:none;margin:0;pointer-events:none}.hero .chick-track img{width:16%;height:auto;top:0;left:2%;animation:hero-dash 2.4s linear infinite}.mascot img{width:100%;display:block}.room-icon{width:48px;height:48px;object-fit:contain;flex:none}.room-option .room-icon{width:48px;height:48px}.edit-room h2,.task-panel h2{display:flex;align-items:center;gap:.5rem}.edit-room h2 .room-icon,.task-panel h2 .room-icon{width:50px;height:50px}.room-tile .room-icon{width:58px;height:58px}.room-tile .medal{top:-13px;right:-9px;width:48px;height:48px;display:grid;place-items:center;border:3px solid #a85c19;border-radius:50%;background:#ffdc60;color:#a75d12;font-size:26px;box-shadow:0 3px 0 #b46b24,0 0 0 3px #fff4c3;z-index:3}.room-tile{overflow:visible}.app-header{flex-wrap:wrap}@keyframes hero-dash{0%{left:2%;transform:scaleX(1) translateY(0)}12%{transform:scaleX(1) translateY(-5px)}25%{transform:scaleX(1) translateY(0)}37%{transform:scaleX(1) translateY(-5px)}49.9%{left:82%;transform:scaleX(1)}50%{left:82%;transform:scaleX(-1)}62%{transform:scaleX(-1) translateY(-5px)}75%{transform:scaleX(-1) translateY(0)}87%{transform:scaleX(-1) translateY(-5px)}100%{left:2%;transform:scaleX(-1)}}@media(prefers-reduced-motion:reduce){.hero .chick-track img{animation:none!important}}body.motion-off .hero .chick-track img{animation:none!important}
.room-tile .medal{width:72px;height:72px;top:-22px;right:-15px;border:0;background:transparent;box-shadow:none;display:block}.room-tile .medal img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 2px #9b64084a)}
.mascot{width:64px;pointer-events:none;top:0;bottom:auto;transition:left .65s ease,top .65s ease;z-index:4}.map-stage{overflow:visible}.map-stage .room-grid{padding-top:12px}#all-clear-dialog{width:min(94vw,500px);max-height:92vh;border:3px solid var(--teal);border-radius:22px;padding:0 0 1.2rem;text-align:center;background:var(--paper);overflow:auto}#all-clear-dialog::backdrop{background:#123d38b8}#all-clear-dialog img{width:100%;height:auto;display:block;margin-bottom:1rem}#all-clear-dialog .primary{margin:0 1rem}.data-tools{display:flex;gap:1rem;justify-content:flex-end;align-items:center;flex-wrap:wrap}@media(max-width:650px){.mascot{width:58px}.map-stage{padding-bottom:1rem}}
/* スマートフォンの狭い幅でも、見出しと日付欄をカード内に収める */
.setup-card,.dashboard,.room-option,.edit-room,.task-panel{min-width:0}
.setup-card h1,.setup-card h2,.dashboard h1,.dashboard h2{word-break:normal;overflow-wrap:anywhere;line-break:strict}
.field{min-width:0;max-width:100%}
.field input[type=date]{display:block;box-sizing:border-box;width:100%;max-width:min(100%,320px);min-width:0;-webkit-appearance:none;appearance:none;text-align:left}
.room-option{overflow-wrap:anywhere}
@media(max-width:400px){.setup-card{padding:1.2rem}.setup-card h1{font-size:clamp(1.35rem,6vw,1.7rem)}.setup-actions .primary{max-width:100%;overflow-wrap:anywhere}.app-header{gap:.25rem}}
.start-panel .chick-track{height:67px;width:min(100%,330px);margin:0 auto 3px;position:relative;overflow:visible;pointer-events:none}.start-panel .chick-track img{position:absolute;top:0;left:0;width:67px;height:67px;object-fit:contain;animation:button-dash 2.4s linear infinite}@keyframes button-dash{0%{left:0;transform:scaleX(1)}12%{transform:scaleX(1) translateY(-5px)}25%{transform:scaleX(1)}37%{transform:scaleX(1) translateY(-5px)}49.9%{left:calc(100% - 67px);transform:scaleX(1)}50%{left:calc(100% - 67px);transform:scaleX(-1)}62%{transform:scaleX(-1) translateY(-5px)}75%{transform:scaleX(-1)}87%{transform:scaleX(-1) translateY(-5px)}100%{left:0;transform:scaleX(-1)}}@media(prefers-reduced-motion:reduce){.start-panel .chick-track img{animation:none!important}}body.motion-off .start-panel .chick-track img{animation:none!important}
/* 開始エリアの余白を整える */
.start-panel{padding:1.5rem 1.25rem 2.25rem}.start-panel p{margin:0 0 .35rem;line-height:1.45}.start-panel .chick-track{height:56px;margin:0 auto 2px}.start-panel .chick-track img{width:56px;height:56px;animation-name:button-dash-compact}@keyframes button-dash-compact{0%{left:0;transform:scaleX(1)}12%{transform:scaleX(1) translateY(-4px)}25%{transform:scaleX(1)}37%{transform:scaleX(1) translateY(-4px)}49.9%{left:calc(100% - 56px);transform:scaleX(1)}50%{left:calc(100% - 56px);transform:scaleX(-1)}62%{transform:scaleX(-1) translateY(-4px)}75%{transform:scaleX(-1)}87%{transform:scaleX(-1) translateY(-4px)}100%{left:0;transform:scaleX(-1)}}