/* 紙の舞台: 接地する影、離れて落ちる影、奥に回る薄い色を分ける。 */
.hero{background:#f7f2ed}
.hero-art{filter:saturate(.82) contrast(.94);opacity:.9}
.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.3),transparent 55%,rgba(105,91,136,.07));pointer-events:none}
.hero-paper{background:radial-gradient(ellipse at 43% 25%,rgba(255,253,247,.5),transparent 56%);box-shadow:inset 0 25px 36px -32px rgba(74,60,96,.3)}
.hero-stage-floor{position:absolute;width:87%;height:230px;left:7%;bottom:-28px;border-radius:50% 45% 0 0;background:linear-gradient(177deg,#f0e6e7 0%,#f8f2ee 36%,#d9d4e4 100%);border-top:1px solid rgba(255,255,255,.85);box-shadow:0 -14px 44px rgba(115,92,142,.08);z-index:2;transform:translate3d(var(--layer-x,0px),var(--layer-y,0px),0);pointer-events:none}
.hero-actors{perspective:1400px;perspective-origin:50% 50%}
.actor-irori{max-width:315px}.actor-mitsuke{max-width:285px}.actor-kotori{max-width:260px}.actor-yura{max-width:275px}
.hero-actor{transform:translate3d(var(--layer-x,0px),var(--layer-y,0px),0) rotateY(var(--layer-ry,0deg)) rotateX(var(--layer-rx,0deg)) rotate(var(--layer-r,0deg));transform-style:preserve-3d}
.actor-drawing{filter:drop-shadow(1px 3px 1px rgba(59,43,75,.12)) drop-shadow(12px 21px 13px rgba(59,43,75,.18))}
.actor-dochan .actor-drawing{filter:drop-shadow(1px 3px 1px rgba(59,43,75,.13)) drop-shadow(17px 22px 17px rgba(59,43,75,.2))}
.actor-yura .actor-drawing{filter:drop-shadow(6px 15px 14px rgba(59,43,75,.12));opacity:.86}
.hero-actor:before{content:"";position:absolute;left:27%;width:54%;height:5%;bottom:10%;background:rgba(69,50,93,.2);filter:blur(8px);border-radius:50%;transform:rotate(-9deg);pointer-events:none}
.actor-dochan:before{bottom:3%;left:34%;width:57%;height:4%}.actor-irori:before{bottom:7%;left:16%;width:64%}.actor-kotori:before{bottom:14%;left:12%;width:58%}.actor-yura:before{display:none}
.paper-wing{position:absolute;width:11%;height:103%;top:-2%;z-index:7;pointer-events:none;transform:translate3d(var(--layer-x,0px),var(--layer-y,0px),0);filter:drop-shadow(14px 19px 20px rgba(71,49,103,.16));max-width:190px}
.paper-wing-left{left:-4%}.paper-wing-right{right:-5%;filter:drop-shadow(-12px 18px 18px rgba(59,66,84,.13))}
.hero-foreground{filter:drop-shadow(0 -10px 13px rgba(71,49,103,.14));height:164px;z-index:6}
.hero-foreground path{stroke:rgba(95,79,123,.48);stroke-width:1}.hero h1{text-shadow:1px 2px 0 rgba(250,245,239,.7),4px 9px 18px rgba(73,54,110,.13)}
.hero-stamp{filter:drop-shadow(3px 8px 6px rgba(97,77,108,.18));z-index:8}
.hero-button{box-shadow:0 2px 0 #15111e,0 9px 0 -5px #c5b9df,0 19px 25px -8px rgba(50,35,77,.25),inset 0 1px 0 rgba(255,255,255,.16)}
.hero-button:hover{box-shadow:0 2px 0 #15111e,0 13px 0 -8px #c5b9df,0 24px 28px -9px rgba(50,35,77,.25),inset 0 1px 0 rgba(255,255,255,.16)}
.air-field{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.air-field i{position:absolute;display:block;width:9px;height:17px;left:25%;top:19%;background:#decce9;border-radius:1px;box-shadow:4px 7px 9px rgba(99,78,120,.12);transform:rotate(35deg);animation:paper-air 13s ease-in-out infinite;animation-play-state:paused}
.air-field i:nth-child(2){left:75%;top:44%;width:12px;height:12px;background:#eac8b6;animation-delay:-4s;animation-duration:17s;border-radius:50%}
.air-field i:nth-child(3){left:30%;top:62%;width:6px;height:11px;background:#b7d1e0;animation-delay:-8s;animation-duration:15s}
.air-field i:nth-child(4){left:10%;top:36%;width:5px;height:5px;background:#efd4ac;filter:blur(.5px);animation-delay:-2s}
.air-field i:nth-child(5){left:66%;top:79%;width:13px;height:6px;background:#d6c2dd;animation-duration:18s;animation-delay:-7s}
.air-field i:nth-child(6){left:55%;top:9%;width:5px;height:5px;background:#dfcbd5;filter:blur(1px);animation-duration:21s;animation-delay:-15s}
.air-field i:nth-child(7){left:90%;top:24%;width:6px;height:9px;background:#d9e4d0;animation-duration:15s;animation-delay:-4s}
.stage-in-view .air-field i{animation-play-state:running}
@keyframes paper-air{0%,100%{translate:0 0;rotate:10deg;opacity:.6}33%{translate:12px -17px;rotate:48deg;opacity:.85}66%{translate:-9px 10px;rotate:-15deg;opacity:.55}}
.dw-section{background-image:linear-gradient(116deg,rgba(255,255,255,.3),rgba(255,255,255,0) 58%,rgba(77,62,111,.025));isolation:isolate}
.dw-wrap{position:relative;z-index:2}
.dw-section:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;box-shadow:inset 0 18px 35px -32px rgba(59,43,87,.35)}
.dw-direction:before,.dw-friends:before,.dw-playground:before{content:"";position:absolute;top:-42px;left:-2%;width:104%;height:70px;border-radius:0 0 50% 35%;background:var(--paper);box-shadow:0 12px 17px -14px rgba(75,62,99,.3);pointer-events:none;z-index:1}
.dw-friends:before{background:#fbf3e8;transform:rotate(-1deg);border-radius:0 0 16% 55%;top:-46px}.dw-playground:before{background:var(--peach);border-radius:0 0 55% 20%;top:-45px}
.dw-manifesto-note{border:1px solid rgba(127,99,92,.22);box-shadow:1px 2px 1px rgba(77,52,70,.12),7px 17px 23px -9px rgba(77,52,70,.25),24px 29px 36px -26px rgba(77,52,70,.22);background-image:linear-gradient(120deg,rgba(255,255,255,.25),transparent)}
.dw-manifesto-note:before{box-shadow:0 2px 3px rgba(74,57,97,.08)}
.dw-decision-friend{filter:drop-shadow(10px 17px 12px rgba(60,70,104,.2))}
.dw-compare-row>div:last-child{box-shadow:inset 1px 0 0 rgba(255,255,255,.7),-9px 0 17px -16px rgba(52,36,92,.6);background-image:linear-gradient(110deg,rgba(255,255,255,.2),transparent)}
.dw-crew-portrait img{filter:drop-shadow(2px 4px 1px rgba(48,39,75,.1)) drop-shadow(8px 18px 11px rgba(48,39,75,.2))}
.dw-crew-bio{clip-path:none;border:1px solid rgba(117,99,143,.23);box-shadow:0 2px 0 rgba(117,99,143,.2),0 17px 30px -13px rgba(60,45,83,.25);border-radius:2px}
.dw-case-figure{border-color:#62536d;border-width:2px;box-shadow:0 3px 0 #dbc9c5,0 6px 0 #bdb0b8,11px 22px 34px -7px rgba(75,51,70,.28);transform:perspective(1300px) rotateY(-2deg) rotate(-1.3deg)}
.dw-case-stamp{border-color:#ab9fbe;box-shadow:2px 5px 1px rgba(255,255,255,.18),7px 15px 20px rgba(54,36,83,.2)}
.dw-guide-button{border-radius:3px;box-shadow:0 4px 0 #9188ab,0 15px 25px -5px rgba(54,36,83,.25),inset 0 1px 0 rgba(255,255,255,.2)}
.dw-join-dochan{filter:drop-shadow(13px 17px 14px rgba(47,66,66,.22))}
.motion-off .paper-wing,.motion-off .hero-stage-floor{transform:none!important}
.world-badge{display:block;left:3.2%;top:24px;width:160px;height:178px;filter:none;color:var(--paper);z-index:9;transform:rotate(-9deg);-webkit-tap-highlight-color:transparent}
.world-badge .badge-back{position:absolute;inset:8px auto auto 9px;width:160px;height:160px;transform:rotate(8deg);filter:drop-shadow(5px 10px 9px rgba(72,54,96,.18))}
.world-badge .badge-front{position:absolute;inset:0 auto auto 0;width:160px;height:160px;display:block;transform:rotate(-7deg);transition:transform .4s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(1px 3px 1px rgba(42,26,62,.12))}
.world-badge .badge-face{width:160px;height:160px;display:block}
.world-badge .badge-type{position:absolute;inset:22px 12px 23px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transform:none;color:#fff7e8;text-align:center;font-family:var(--en);line-height:1.05}
.world-badge .badge-type b{font-weight:400;font-size:25px;letter-spacing:-.045em}.world-badge .badge-type em{font-style:normal;font-size:19px;line-height:1.05;letter-spacing:.01em}
.world-badge .badge-tab{position:absolute;inset:auto auto 4px 18px;width:132px;height:32px;padding:0 12px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:4px;color:var(--ink);font-family:var(--en);font-size:10px;line-height:1;background:#eee3ac;border:1px solid #80744f;box-shadow:1px 3px 1px rgba(55,41,73,.12),4px 7px 8px rgba(55,41,73,.12);transform:rotate(-5deg);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.world-badge .badge-tab svg{width:28px;height:18px}.world-badge:hover .badge-front,.world-badge:focus-visible .badge-front{transform:translateY(-4px) rotate(-12deg)}.world-badge:hover .badge-tab,.world-badge:focus-visible .badge-tab{transform:translate(3px,3px) rotate(1deg)}
.world-badge:focus-visible{outline:3px solid var(--blue);outline-offset:8px;border-radius:30px}
.is-ready .world-badge{animation:badge-arrive 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes badge-arrive{0%{opacity:0;transform:translateY(-55px) rotate(-18deg) scale(.9)}70%{opacity:1;transform:translateY(3px) rotate(3deg) scale(1.025)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@media(max-width:1100px){.world-badge{left:2%;width:124px;height:139px;top:26px}.world-badge .badge-back,.world-badge .badge-front,.world-badge .badge-face{width:124px;height:124px}.world-badge .badge-type{inset:18px 9px 19px;gap:5px}.world-badge .badge-type b{font-size:20px}.world-badge .badge-type em{font-size:15px}.world-badge .badge-tab{width:108px;left:11px;height:28px;font-size:8px;padding:0 9px}.world-badge .badge-tab svg{width:24px}}
@media(max-width:800px){.world-badge{left:2%;top:10px;width:96px;height:110px}.world-badge .badge-back,.world-badge .badge-front,.world-badge .badge-face{width:96px;height:96px}.world-badge .badge-back{inset:5px auto auto 5px}.world-badge .badge-type{inset:13px 7px 17px;gap:3px}.world-badge .badge-type b{font-size:16px}.world-badge .badge-type em{font-size:12px}.world-badge .badge-tab{left:6px;bottom:0;width:89px;height:23px;font-size:7px;padding:0 7px}.world-badge .badge-tab svg{width:23px;height:15px}}
@media(max-width:1100px){.paper-wing{width:10%}.paper-wing-left{left:-5%}.paper-wing-right{right:-6%}.hero-stage-floor{height:200px}}
@media(max-width:800px){.paper-wing{width:12%;height:67%;top:35%}.paper-wing-left{left:-7%}.paper-wing-right{right:-8%}.hero-stage-floor{width:118%;height:135px;left:-9%;bottom:8px}.hero-paper{background:linear-gradient(var(--paper) 13%,rgba(250,245,239,.91) 39%,transparent 72%)}.actor-drawing{filter:drop-shadow(1px 2px 1px rgba(59,43,75,.1)) drop-shadow(8px 13px 9px rgba(59,43,75,.19))}.actor-dochan .actor-drawing{filter:drop-shadow(1px 2px 1px rgba(59,43,75,.1)) drop-shadow(10px 16px 11px rgba(59,43,75,.2))}.hero-foreground{height:110px}.air-field i:nth-child(n+5){display:none}.air-field i:first-child{left:15%;top:47%}.air-field i:nth-child(2){left:77%;top:52%}.air-field i:nth-child(3){left:43%;top:63%}.air-field i:nth-child(4){top:16%;left:57%}.hero h1{text-shadow:1px 2px 0 rgba(250,245,239,.7),3px 6px 12px rgba(73,54,110,.13)}.dw-compare-row>div:last-child{box-shadow:0 2px 0 rgba(92,73,127,.1),4px 10px 14px -8px rgba(64,43,99,.16)}}
@media(prefers-reduced-motion:reduce){.air-field i{animation:none}.paper-wing,.hero-stage-floor{transform:none!important}}

/* チェック記号に見えたスクロール案内を、説明へ進む実リンクにする。 */
.hero-footnote{min-height:76px;padding:12px 4%;align-items:center;z-index:6;background:#faf5eff2;backdrop-filter:blur(8px);gap:20px}
.hero-footnote-copy{display:flex;align-items:baseline;gap:22px;line-height:1.5}
.hero-footnote-copy small{font-size:10px;color:#70647c;letter-spacing:.04em}
.hero-footnote-copy strong{font-size:13px;font-weight:700;letter-spacing:.03em}
.hero-footnote-arrow{display:flex;align-items:center;justify-content:center;flex:0 0 43px;height:43px;border:1px solid #9c8daf99;border-radius:50%;background:var(--lavender);box-shadow:0 2px 0 #bbafc9;transition:transform .3s,background .3s}
.hero-footnote-arrow svg{width:20px;height:27px}
.hero-footnote:hover .hero-footnote-arrow{transform:translateY(3px);background:#d5c6e9}
@media(max-width:600px){.hero-footnote{padding:10px 6%;min-height:78px}.hero-footnote-copy{display:block}.hero-footnote-copy small{display:block;font-size:9px;margin-bottom:4px}.hero-footnote-copy strong{display:block;font-size:12px}.hero-footnote-arrow{flex-basis:38px;height:38px}.hero-footnote-arrow svg{width:18px;height:25px}}
/* 主画面では固定の動き停止ボタンを案内帯から離す。 */
body:has(.hero.stage-in-view) .motion-toggle{bottom:98px}
@media(max-width:800px){body:has(.hero.stage-in-view) .motion-toggle{bottom:96px}}

/* 中央のことばと、遊べる住人の居場所を分ける。 */
@media(min-width:801px){
 .hero{min-height:900px;height:clamp(900px,calc(100svh - var(--header)),980px)}
 .hero-content{padding-top:88px}
 .actor-kotori{width:min(14vw,200px);left:44%;bottom:100px}
 .actor-mitsuke{width:min(18vw,245px);left:21%;bottom:90px}
 .actor-irori{width:min(22vw,300px);bottom:138px}
 .actor-dochan{width:min(23vw,340px);bottom:90px;right:1.4%}
}
@media(min-width:601px) and (max-width:800px){.hero{height:880px}}
.hero-content{z-index:8;pointer-events:none}
.hero-content a,.hero-content button{pointer-events:auto}
.hero-actors{z-index:6}
.hero-footnote{z-index:12}
.hero-actor{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transform:translate3d(calc(var(--layer-x,0px) + var(--drag-x,0px)),calc(var(--layer-y,0px) + var(--drag-y,0px)),0) rotateY(var(--layer-ry,0deg)) rotateX(var(--layer-rx,0deg)) rotate(var(--layer-r,0deg))}
.hero-actor img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.hero-actor.is-dragging{cursor:grabbing;z-index:20}
.hero-actor.is-dragging .actor-enter{animation:none!important;transform:none;translate:none;transition:none}
.hero-actor.is-dragging .actor-drawing{animation-play-state:paused!important;filter:drop-shadow(3px 5px 1px #3b2b4b18) drop-shadow(15px 28px 17px #3b2b4b40)}
.hero-play-controls{display:flex;align-items:center;justify-content:center;gap:14px;min-height:36px;margin-top:19px;font-size:10px;line-height:1.5;color:#736681;font-weight:700}
.hero-play-controls>span{display:inline-flex;gap:7px;align-items:center}
.hero-play-controls svg{width:27px;height:18px}
.hero-play-controls button{background:#fdf9f1;border:1px solid #c0b1ce;border-radius:20px;padding:6px 12px;font-size:10px;line-height:1.4;box-shadow:0 2px 1px #8f779719}
.hero-play-controls button:disabled{opacity:.48}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.motion-off .hero-actor{transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0)!important}
@media(max-width:600px){.hero-play-controls{font-size:9px;gap:8px;margin-top:16px}.hero-play-controls button{font-size:9px;padding:6px 9px}.hero-play-controls svg{width:21px}}
@media(prefers-reduced-motion:reduce){.hero-actor{transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0)!important}}
@media(max-width:800px){.actor-mitsuke{bottom:90px}.actor-kotori{bottom:90px}.actor-dochan{bottom:84px}}
/* スクロール位置が変わっても、固定ボタンに案内の矢印を隠させない。 */
.hero-footnote{padding-right:160px}
@media(max-width:600px){.hero-footnote{padding-right:128px;gap:10px}.hero-footnote>span:first-child{max-width:none}}