:root{--paper:#faf5ef;--ink:#2d2b3a;--blue:#655699;--lime:#eee3ac;--coral:#c97f97;--mint:#d0e3d9;--lavender:#e3daf1;--sky:#d8e8f4;--peach:#f4d9c4;--blush:#f1dce5;--display:'Dela Gothic One',sans-serif;--body:'Zen Kaku Gothic New',sans-serif;--en:'Bungee',sans-serif;--ease:cubic-bezier(.2,.8,.2,1);--header:94px;--pointer-x:0;--pointer-y:0}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:500;line-height:1.9;overflow-x:clip}body.menu-open{overflow:hidden}button,a,input{touch-action:manipulation}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}img{display:block;max-width:100%;height:auto}svg{display:block}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400}button{border:0}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--coral);outline-offset:6px}::selection{background:var(--lime);color:var(--ink)}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:fixed;top:8px;left:8px;transform:translateY(-160%);padding:10px 20px;background:var(--ink);color:white;z-index:200}.skip-link:focus{transform:translateY(0)}.site-header{height:var(--header);padding:0 4%;display:flex;gap:36px;align-items:center;justify-content:space-between;position:relative;z-index:30;background:var(--paper);border-bottom:1.5px solid var(--ink)}.wordmark{font-family:var(--display);font-size:32px;line-height:.95;letter-spacing:-2px;position:relative;white-space:nowrap}.wordmark-dot{color:var(--coral)}.wordmark small{display:block;font-family:var(--en);font-size:9px;letter-spacing:2px;margin-top:10px;line-height:1}.desktop-nav{display:flex;gap:30px;margin-left:auto;font-size:12px;font-weight:700;line-height:1.5}.desktop-nav a{position:relative;padding:8px 0}.desktop-nav a:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .3s}.desktop-nav a:hover:after{transform:scaleX(1)}.header-cta{font-size:12px;font-weight:700;display:flex;align-items:center;gap:15px;padding:13px 20px;background:var(--lime);border:1.5px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);transition:transform .25s,box-shadow .25s}.header-cta:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.header-cta svg{width:38px;height:20px}.menu-toggle{display:none;width:42px;height:42px;background:transparent;position:relative}.menu-toggle span{width:26px;height:2px;background:var(--ink);position:absolute;left:8px;top:15px;transition:transform .3s}.menu-toggle span+span{top:25px}.menu-toggle[aria-expanded=true] span{transform:translateY(5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span+span{transform:translateY(-5px) rotate(-45deg)}.mobile-menu[hidden]{display:none}.mobile-menu{position:fixed;inset:var(--header) 0 0;background:var(--lime);z-index:25;padding:60px 7%;display:flex;flex-direction:column;gap:36px;font-family:var(--display);font-size:24px}.eyebrow{font-family:var(--en);font-size:11px;letter-spacing:.13em;line-height:1.5}.hero{height:min(820px,calc(100svh - var(--header)));min-height:680px;position:relative;isolation:isolate;overflow:clip;border-bottom:1.5px solid var(--ink)}.hero-art{position:absolute;inset:0;z-index:-2;transform:translate(calc(var(--pointer-x)*-5px),calc(var(--pointer-y)*-3px)) scale(1.025);will-change:transform}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center;max-width:none}.hero-paper{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 30% 32% at 49% 37%,rgba(244,240,229,.45),transparent 100%)}.hero-content{position:relative;text-align:center;width:65%;max-width:940px;padding-top:clamp(85px,10vh,150px);margin:0 auto}.hero-kicker{display:flex;justify-content:center;align-items:center;gap:12px;color:var(--blue);margin-bottom:28px}.tiny-spark{font-size:26px;line-height:1;display:inline-block}.hero h1{font-family:var(--display);font-size:clamp(43px,5.1vw,82px);line-height:1.4;letter-spacing:-.065em;position:relative;z-index:2;white-space:nowrap}.hero-line{display:block;overflow:clip;padding-bottom:.08em}.hero-line>span{display:block;transform-origin:50% 100%}.hero-line:nth-child(2){color:var(--blue)}.title-dot{display:inline-block;color:var(--coral)}.hero-lead{font-size:clamp(14px,1.2vw,18px);font-weight:700;line-height:1.9;margin-top:22px;letter-spacing:.09em}.button{display:inline-flex;gap:34px;align-items:center;justify-content:center;padding:17px 28px;min-height:56px;line-height:1.5;font-size:14px;font-weight:700;border-radius:999px;border:1.5px solid var(--ink);transition:transform .3s var(--ease),box-shadow .3s var(--ease);position:relative;overflow:clip}.button svg{width:46px;height:26px;transition:transform .4s var(--ease)}.button:hover svg{transform:translateX(6px) rotate(-7deg)}.button:hover{transform:translateY(-3px)}.button--ink{background:var(--ink);color:var(--paper);box-shadow:4px 5px 0 var(--coral)}.hero-button{margin-top:30px}.hero-stamp{position:absolute;right:4%;top:28px;width:128px;height:128px;transform:rotate(12deg);color:var(--coral);z-index:2}.hero-stamp svg{width:100%;height:100%}.hero-stamp span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;font-family:var(--en);font-size:14px;line-height:1.15;color:var(--paper);transform:rotate(-12deg)}.hero-footnote{position:absolute;bottom:0;left:0;right:0;padding:13px 4%;display:flex;justify-content:space-between;gap:20px;font-size:11px;font-weight:700;background:var(--paper);border-top:1.5px solid var(--ink)}.scroll-cue{font-family:var(--en);font-size:9px;letter-spacing:.13em;display:flex;align-items:center;gap:16px}.scroll-cue i{width:7px;height:14px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translateY(-3px)}.world-ticker{background:var(--lime);border-bottom:1.5px solid var(--ink);overflow:hidden;padding:18px 0;color:var(--ink)}.world-ticker>div{display:flex;align-items:center;white-space:nowrap;gap:40px;width:max-content;font-family:var(--display);font-size:28px;line-height:1.4;animation:ticker 35s linear infinite}.world-ticker span{font-size:30px;color:var(--blue)}.motion-toggle{position:fixed;z-index:45;bottom:20px;right:20px;display:flex;align-items:center;gap:8px;border:1.5px solid var(--ink);border-radius:100px;background:var(--paper);font-size:10px;font-weight:700;line-height:1;padding:12px 16px;box-shadow:2px 2px 0 var(--ink)}.motion-toggle-dot{width:7px;height:7px;background:var(--coral);border-radius:50%}.motion-toggle[aria-pressed=true] .motion-toggle-dot{background:var(--ink)}.transition-paper{position:fixed;inset:0;background:var(--blue);z-index:80;pointer-events:none;clip-path:inset(100% 0 0 0);border-radius:50% 50% 0 0;visibility:hidden}.is-ready .hero-line>span{animation:word-entry 1.25s var(--ease) both}.is-ready .hero-line:nth-child(2)>span{animation-delay:.12s}.is-ready .hero-kicker,.is-ready .hero-lead,.is-ready .hero-button{animation:soft-entry 1s var(--ease) both;animation-delay:.25s}.is-ready .hero-stamp{animation:stamp-in 1.2s var(--ease) both}.is-ready .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform 1s var(--ease)}.is-ready .reveal.is-visible{opacity:1;transform:translateY(0)}body.motion-off *,body.motion-off *:before,body.motion-off *:after{animation:none!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.motion-off .reveal{opacity:1!important;transform:none!important}.motion-off .hero-art{transform:none}.motion-off .transition-paper{display:none}@keyframes word-entry{from{transform:translateY(115%) rotate(4deg)}to{transform:translateY(0) rotate(0)}}@keyframes soft-entry{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes stamp-in{0%{transform:translateY(-140px) rotate(-45deg);opacity:0}70%{transform:translateY(5px) rotate(18deg);opacity:1}100%{transform:translateY(0) rotate(12deg)}}@keyframes ticker{to{transform:translateX(-50%)}}@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-13px) rotate(2deg)}}
@media(min-width:1700px){.hero-art img{object-fit:cover;object-position:center bottom}.hero-content{padding-top:110px}}@media(max-width:1100px){.desktop-nav{gap:18px;font-size:11px}.site-header{gap:20px}.header-cta{padding:11px 15px}.hero-content{width:76%;padding-top:115px}.hero{min-height:670px}.hero h1{font-size:clamp(45px,5.9vw,66px)}.hero-stamp{width:100px;height:100px}.hero-stamp span{font-size:11px}}@media(max-width:800px){:root{--header:78px}.site-header{padding:0 5%;gap:15px}.wordmark{font-size:26px}.wordmark small{font-size:8px}.desktop-nav{display:none}.menu-toggle{display:block}.header-cta{margin-left:auto;font-size:11px;padding:10px 13px;gap:8px}.header-cta svg{width:28px}.hero{height:800px;min-height:0}.hero-content{padding-top:94px;width:92%}.hero h1{font-size:clamp(33px,6.8vw,57px);line-height:1.5}.hero-art{inset:250px -30% 30px -30%;transform:none}.hero-art img{object-fit:cover;object-position:65% bottom}.hero-paper{background:linear-gradient(var(--paper) 31%,rgba(244,240,229,.94) 38%,transparent 57%)}.hero-kicker{margin-bottom:24px;font-size:9px;gap:7px}.hero-lead{font-size:15px;margin-top:18px}.hero-button{margin-top:22px;padding:15px 24px;min-height:51px;font-size:12px}.hero-stamp{width:76px;height:76px;right:4%;top:12px}.hero-stamp span{font-size:8px}.hero-footnote{padding:11px 5%;font-size:9px}.scroll-cue{font-size:0}.scroll-cue i{margin-right:8px}.world-ticker>div{font-size:21px;gap:24px}.world-ticker{padding:14px 0}.motion-toggle{right:12px;bottom:12px;font-size:9px;padding:10px 12px}.is-ready .reveal{transform:translateY(25px)}}@media(max-width:430px){.hero{height:760px}.hero-art{inset:295px -51% 30px -51%;}.hero-content{padding-top:98px}.hero h1{font-size:clamp(29px,7.3vw,34px)}.hero-lead{font-size:14px}.hero-kicker{font-size:8px}.header-cta svg{display:none}.header-cta{font-size:10px}.hero-footnote>span:first-child{max-width:80%}.wordmark{font-size:24px}}
/* 切り抜きの舞台。配置・視差・身ぶりの変形を三階層に分ける。 */
.hero-art{z-index:0;inset:-20px;transform:translate3d(var(--layer-x,0px),var(--layer-y,0px),0) scale(1.06)}
.hero-paper{z-index:1;background:radial-gradient(ellipse 36% 40% at 47% 40%,rgba(244,240,229,.48),transparent 100%)}
.hero-content{z-index:5;padding-top:70px;width:70%;pointer-events:none}.hero-content a{pointer-events:auto}.hero h1{font-size:clamp(43px,5vw,80px)}
.hero-actors{position:absolute;inset:0;z-index:3;pointer-events:none}.hero-actor{position:absolute;display:block;pointer-events:auto;transform:translate3d(var(--layer-x,0px),var(--layer-y,0px),0) rotate(var(--layer-r,0deg));outline-offset:-5px!important;will-change:transform}.actor-enter{display:block;transform-origin:50% 100%}.actor-drawing{width:100%;height:auto;filter:drop-shadow(3px 8px 0 rgba(24,35,34,.12));transform-origin:50% 85%;animation:actor-float 6s ease-in-out infinite;animation-play-state:paused}.stage-in-view .actor-drawing{animation-play-state:running}.actor-dochan{right:1.4%;bottom:53px;width:min(27%,380px);z-index:4}.actor-irori{left:-1.4%;bottom:132px;width:22%;z-index:2}.actor-mitsuke{left:16%;bottom:35px;width:19%;z-index:5}.actor-kotori{left:44%;bottom:23px;width:22%;z-index:6}.actor-yura{right:8%;top:25px;width:16%;z-index:1}.actor-irori .actor-drawing{animation-name:actor-peek;animation-duration:7s}.actor-mitsuke .actor-drawing{animation-name:actor-think;animation-duration:8s}.actor-kotori .actor-drawing{animation-delay:-2s;animation-duration:5.5s}.actor-yura .actor-drawing{animation-name:actor-spring;animation-duration:4.6s}.actor-label{position:absolute;left:50%;bottom:10%;padding:5px 13px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--paper);border:1.5px solid var(--ink);border-radius:100px;opacity:0;transform:translate(-50%,15px) rotate(-5deg);transition:transform .3s,opacity .3s;box-shadow:3px 3px 0 var(--coral)}.hero-actor:hover .actor-label,.hero-actor:focus-visible .actor-label{opacity:1;transform:translate(-50%,0) rotate(-5deg)}.hero-actor:hover .actor-enter{translate:0 -10px;transition:translate .35s}.hero-foreground{position:absolute;inset:auto -3% 0;width:106%;height:145px;z-index:4;pointer-events:none;transform:translate3d(var(--layer-x,0px),var(--layer-y,0px),0)}.hero-stamp{z-index:6;width:110px;height:110px;left:3%;right:auto;top:25px}.hero-stamp span{font-size:12px}.hero-footnote{z-index:8}.is-ready .actor-enter{animation:actor-arrive 1.35s cubic-bezier(.22,.8,.24,1) both}.is-ready .actor-irori .actor-enter{animation-delay:.15s}.is-ready .actor-mitsuke .actor-enter{animation-delay:.3s}.is-ready .actor-kotori .actor-enter{animation-delay:.45s}.is-ready .actor-yura .actor-enter{animation-delay:.25s}.hero-actor:focus-visible{outline-color:var(--blue);border-radius:30%}.world-ticker>div{animation-play-state:paused}.world-ticker.stage-in-view>div{animation-play-state:running}.dw-crew-portrait img{animation:actor-float 7s ease-in-out infinite;animation-play-state:paused;transform-origin:50% 90%}.dw-crew-member:nth-child(2) img{animation-name:actor-think;animation-delay:-3s}.dw-crew-member:nth-child(3) img{animation-name:actor-peek;animation-delay:-2s}.dw-crew-member:nth-child(4) img{animation-delay:-5s}.dw-crew-member:nth-child(5) img{animation-name:actor-spring;animation-delay:-1s}.dw-friends.stage-in-view img{animation-play-state:running}.dw-demo-resident{animation:actor-float 5s ease-in-out infinite;animation-play-state:paused}.dw-playground.stage-in-view .dw-demo-resident{animation-play-state:running}.dw-mood-demo[data-active-mood=calm] .dw-demo-resident{animation-duration:12s}.dw-mood-demo[data-active-mood=playful] .dw-demo-resident{animation-name:actor-spring;animation-duration:2.5s}.dw-join-dochan{animation:actor-peek 8s ease-in-out infinite;animation-play-state:paused}.dw-join.stage-in-view .dw-join-dochan{animation-play-state:running}.page-hidden *{animation-play-state:paused!important}.dialog-open{overflow:hidden}.motion-off [data-depth]{transform:none!important}html[data-motion=off]{scroll-behavior:auto}.ink-arrow{width:40px;height:24px;display:inline-block;vertical-align:middle}.tiny-spark svg{width:25px;height:25px}.world-ticker span svg{width:32px;height:32px}.dw-mood-arrow .ink-arrow{width:25px}.dw-demo-arrow .ink-arrow{width:48px}.dw-crew-hint .ink-arrow{transform:rotate(75deg);width:26px}
@keyframes actor-arrive{0%{opacity:0;transform:translateY(130px) rotate(-11deg) scale(.8)}70%{opacity:1;transform:translateY(-12px) rotate(3deg) scale(1.025)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes actor-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(3deg)}}
@keyframes actor-peek{0%,100%{transform:rotate(-3deg)}40%{transform:rotate(4deg) translateY(-8px)}65%{transform:rotate(1deg)}}
@keyframes actor-think{0%,55%,100%{transform:rotate(-3deg)}65%{transform:rotate(7deg) translateY(-4px)}78%{transform:rotate(7deg) translateY(-4px)}88%{transform:rotate(-5deg)}}
@keyframes actor-spring{0%,40%,100%{transform:translateY(0) scale(1) rotate(-3deg)}48%{transform:translateY(5px) scale(1.06,.86) rotate(-3deg)}63%{transform:translateY(-28px) scale(.93,1.09) rotate(5deg)}78%{transform:translateY(3px) scale(1.04,.93) rotate(-1deg)}90%{transform:translateY(-4px) scale(1) rotate(-3deg)}}
.actor-kotori{width:17%;left:44%;bottom:12px}
@media(min-width:1600px){.hero-content{padding-top:80px}.actor-dochan{right:4%}.actor-irori{left:1%;width:21%}}
@media(max-width:1100px){.hero-content{padding-top:90px}.hero h1{font-size:clamp(43px,5.8vw,65px)}.actor-dochan{width:30%;right:-3%;bottom:51px}.actor-irori{width:26%;bottom:125px;left:-4%}.actor-mitsuke{width:23%;left:15%}.actor-kotori{width:24%;left:43%}.actor-yura{width:19%;right:8%;top:30px}.hero-stamp{width:85px;height:85px}.hero-stamp span{font-size:9px}}
@media(max-width:800px){.hero-content{padding-top:90px;width:96%}.hero h1{font-size:clamp(32px,6.8vw,53px)}.hero-art{inset:80px -45% 30px;transform:translate3d(var(--layer-x,0px),var(--layer-y,0px),0)}.hero-art img{object-position:50% bottom}.hero-paper{background:linear-gradient(var(--paper) 15%,rgba(244,240,229,.9) 37%,transparent 70%)}.hero-stamp{width:63px;height:63px;top:20px;left:4%}.hero-stamp span{font-size:7px}.actor-dochan{width:37%;bottom:51px;right:0}.actor-irori{width:35%;bottom:103px;left:-6%}.actor-mitsuke{width:27%;bottom:33px;left:15%}.actor-kotori{width:29%;bottom:30px;left:43%}.actor-yura{width:24%;right:3%;top:14px}.hero-foreground{height:100px}.hero-kicker{margin-bottom:20px}.hero-lead{margin-top:19px}.hero-button{margin-top:23px}.dw-mood-demo[data-active-mood=playful]{--demo-ink:var(--ink)}}
@media(max-width:430px){.hero{height:770px}.hero-content{padding-top:99px}.hero h1{font-size:clamp(28px,7.8vw,34px);letter-spacing:-.075em}.hero-kicker{font-size:8px}.actor-dochan{width:47%;right:-6%;bottom:52px}.actor-irori{width:44%;left:-9%;bottom:123px}.actor-mitsuke{width:37%;left:8%;bottom:40px}.actor-kotori{width:35%;left:37%;bottom:33px}.actor-yura{width:28%;right:1%;top:12px}.hero-stamp{left:2%}.hero-art{inset:125px -65% 20px}.hero-paper{background:linear-gradient(var(--paper) 12%,rgba(244,240,229,.88) 36%,transparent 67%)}.hero-lead{font-size:14px}.hero-button{font-size:12px}}
/* 淡い紙面と鮮やかな住人を重ね、章ごとに色の空気を変える。 */
.hero-paper{background:radial-gradient(ellipse 34% 40% at 47% 40%,rgba(250,245,239,.4),transparent 100%)}.hero-stamp{color:var(--peach)}.hero-stamp span{color:var(--ink)}.world-ticker{background:var(--lavender)}.hero-foreground path:first-child{fill:#b5b6df}.hero-foreground path:last-child{fill:var(--blush)}.header-cta{background:var(--sky)}.hero-button{box-shadow:4px 5px 0 var(--lavender)}
@media(max-width:800px){.hero-paper{background:linear-gradient(var(--paper) 15%,rgba(250,245,239,.91) 37%,transparent 70%)}}
@media(max-width:430px){.hero-paper{background:linear-gradient(var(--paper) 12%,rgba(250,245,239,.9) 36%,transparent 67%)}}
html{scroll-padding-top:24px}.dw-section{scroll-margin-top:0}
@media(max-width:800px){.actor-yura{top:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition-duration:.01ms!important}.is-ready .reveal{opacity:1;transform:none}[data-depth]{transform:none!important}}