@font-face{font-family:Dela;src:url('public/fonts/dela.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Yusei;src:url('public/fonts/yusei.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--paper:#f7f3e9;--ink:#171921;--blue:#284fea;--blue-dark:var(--blue);--rule:rgb(23 25 33 / .25);--shadow:rgb(23 25 33 / .18);--muted:rgb(23 25 33 / .75);--yellow:#fff274;--accent:#ff886f;--line:3px;--ease:cubic-bezier(.2,.85,.2,1);--pop:cubic-bezier(.2,1.4,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;overflow-x:clip}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:4px solid var(--blue);outline-offset:5px}button:disabled{cursor:default;opacity:.5}img{display:block;max-width:100%}p,h1,h2,h3{margin:0}button{touch-action:manipulation}.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link:focus{position:fixed;top:8px;left:8px;z-index:100;background:var(--paper);padding:12px}.masthead{height:98px;max-width:1600px;margin:auto;padding:0 52px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:20}.brand{display:flex;align-items:center;gap:18px;text-decoration:none}.brand-word{font-family:Dela,sans-serif;font-size:52px;line-height:1;letter-spacing:-.09em}.brand-word>span{color:var(--blue);display:inline-block;transform:rotate(8deg);margin-left:2px}.brand-description{font-size:9px;font-weight:800;line-height:1.65;letter-spacing:.12em}.masthead-right{display:flex;align-items:center;gap:26px}.edition{font-family:Yusei,sans-serif;font-size:16px}.prototype-mark{font:700 10px monospace;letter-spacing:.08em;padding:9px 12px;border:1px solid var(--rule);border-radius:3px}
.hero{position:relative;max-width:1600px;min-height:790px;margin:auto;isolation:isolate}.hero-world{position:absolute;inset:-98px 0 0;z-index:-1;overflow:hidden;pointer-events:none}.blue-plane{position:absolute;left:58%;top:102px;width:64%;height:90%;background:var(--blue);transform:rotate(-9deg) skewY(-1deg);border:4px solid var(--ink);box-shadow:-15px 16px 0 var(--blue-dark),-18px 20px 0 var(--ink),-30px 34px 34px rgb(23 25 33 / 0.157)}.blue-plane::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgb(247 243 233 / 0.078),transparent 50%,rgb(23 25 33 / 0.122))}.dot-plane{position:absolute;right:-15px;top:155px;width:280px;height:270px;background-image:radial-gradient(var(--ink) 1.7px,transparent 1.7px);background-size:9px 9px;transform:rotate(8deg);mask-image:linear-gradient(180deg,var(--ink),transparent)}.back-word{position:absolute;right:8px;top:195px;color:var(--blue);writing-mode:vertical-rl;font:bold 70px/.95 Arial,sans-serif;letter-spacing:-.06em;transform:rotate(-9deg);text-shadow:1px 1px 0 rgb(247 243 233 / .28)}.ground-line{position:absolute;bottom:10px;left:50px;right:50px;border-top:2px solid var(--ink)}
.hero-content{position:relative;z-index:8;padding:121px 0 0 56px;width:58%;pointer-events:none}.hero-content a{pointer-events:auto}.chapter-label{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;margin-bottom:25px}.chapter-label>span{font:800 10px monospace;letter-spacing:.05em;background:var(--ink);color:var(--paper);padding:8px 11px;box-shadow:3px 3px 0 var(--shadow)}h1{font-family:Dela,sans-serif;font-size:clamp(72px,7.6vw,116px);font-weight:400;line-height:1.22;letter-spacing:-.065em;white-space:nowrap}h1>span{display:block}.headline-first{color:var(--blue);-webkit-text-stroke:1.6px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--paper),5px 5px 0 var(--ink),8px 8px 0 rgb(23 25 33 / 0.125)}.headline-second{color:var(--paper);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:2px 2px 0 var(--ink),3px 3px 0 var(--ink),4px 4px 0 var(--ink),5px 5px 0 var(--ink),6px 6px 0 var(--ink),7px 7px 0 var(--ink)}.question-mark{color:var(--yellow);padding-left:4px}.hero-lead{font-size:17px;line-height:1.95;margin-top:30px;letter-spacing:.04em}.hero-lead strong{font-weight:800}.hero-actions{margin-top:28px;display:flex;align-items:flex-start;flex-direction:column;gap:15px}.action-button{display:flex;align-items:center;justify-content:space-between;gap:25px;background:var(--yellow);border:3px solid var(--ink);padding:19px 24px;font-weight:800;font-size:16px;text-decoration:none;box-shadow:6px 6px 0 var(--ink);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}.action-button:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}.action-button:active{transform:translate(5px,5px);box-shadow:1px 1px 0 var(--ink)}.button-arrow{font-size:30px;font-weight:500;line-height:1}.action-note{font-size:11px;letter-spacing:.05em;margin-left:3px}
.scene{position:absolute;right:28px;top:0;width:690px;height:727px;z-index:5;perspective:1300px}.scene-perspective{height:100%;position:relative;transform-style:preserve-3d}.depth-layer{--px:0px;--py:0px;--rx:0deg;--ry:0deg;--rotation:0deg;transform:translate3d(var(--px),var(--py),0) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--rotation));will-change:transform}.back-panel{position:absolute;right:3px;top:90px;width:203px;background:var(--paper);padding:8px;border:3px solid var(--ink);box-shadow:7px 8px 0 var(--blue),10px 12px 0 var(--ink),24px 28px 22px rgb(23 25 33 / 0.251);--rotation:12deg;z-index:1}.back-panel img{width:100%;height:auto}.panel-tab{font:900 12px/1.2 monospace;letter-spacing:.04em;background:var(--yellow);padding:7px;border:2px solid var(--ink);position:absolute;right:7px;top:-23px}.scene-shadow{position:absolute;left:210px;bottom:23px;width:410px;height:90px;transform:rotate(-5deg);border-radius:50%;background:rgb(23 25 33 / 0.180);filter:blur(20px);z-index:0}.portrait-layer{position:absolute;left:180px;top:111px;width:392px;z-index:3;--rotation:-4deg}.portrait-frame{padding:9px 9px 0;background:var(--paper);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--shadow),9px 9px 0 var(--ink),17px 19px 0 var(--blue),20px 22px 0 var(--ink),30px 34px 30px rgb(23 25 33 / 0.271);overflow:hidden}.portrait-frame>img{width:100%;height:auto;border:1px solid var(--ink)}.frame-caption{padding:12px 0;display:flex;align-items:center;gap:7px;font:700 8px/1 monospace;letter-spacing:.055em}.frame-caption>span:last-child{margin-left:auto;font-size:10px}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--blue)}.speech-layer{position:absolute;left:20px;top:24px;width:337px;z-index:5}.speech{position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:49% 46% 44% 47%;min-height:180px;padding:32px 31px 30px;box-shadow:3px 4px 0 var(--shadow),6px 7px 0 var(--ink),15px 18px 0 rgb(23 25 33 / 0.137)}.speech::before{content:'';position:absolute;right:15px;bottom:-30px;width:49px;height:55px;background:var(--ink);clip-path:polygon(0 0,62% 5%,100% 100%,0 45%);transform:rotate(-2deg)}.speech::after{content:'';position:absolute;right:20px;bottom:-19px;width:42px;height:42px;background:var(--paper);clip-path:polygon(0 0,64% 0,100% 100%,0 45%);transform:rotate(-2deg)}.speaker{position:absolute;top:4px;left:39px;background:var(--blue);color:var(--paper);padding:5px 11px;font-weight:800;font-size:10px;letter-spacing:.08em;transform:translateY(-50%);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}#speech-copy{font-family:Yusei,sans-serif;font-size:31px;line-height:1.45;letter-spacing:-.04em;min-height:90px;white-space:pre-line}.speech-cursor{position:absolute;bottom:28px;right:32px;width:7px;height:7px;background:var(--blue);transform:rotate(45deg)}.scene-sticker{position:absolute;left:268px;top:633px;background:var(--yellow);border:3px solid var(--ink);padding:10px 25px;box-shadow:5px 6px 0 var(--ink),11px 15px 15px rgb(23 25 33 / 0.212);--rotation:4deg;z-index:7}.scene-sticker>span{display:block;font-family:Yusei,sans-serif;font-size:16px}.scene-sticker>strong{font-family:Dela,sans-serif;font-size:25px;font-weight:400;white-space:nowrap}.front-cursor{position:absolute;left:102px;top:590px;width:91px;height:105px;z-index:8;--rotation:-10deg;filter:drop-shadow(8px 13px 4px rgb(23 25 33 / 0.188))}.sound-effect{position:absolute;right:14px;top:437px;font-family:Dela,sans-serif;font-size:59px;z-index:6;color:var(--paper);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink);transform:rotate(8deg);opacity:0}.sound-effect>span{color:var(--yellow)}.hero[data-beat="1"] .sound-effect{opacity:1;animation:sound-pop .45s var(--pop) both}.burst{position:absolute;left:150px;top:296px;width:50px;height:75px;z-index:6;--rotation:-8deg;pointer-events:none}.burst span{position:absolute;background:var(--yellow);border:2px solid var(--ink);height:10px;box-shadow:2px 2px 0 var(--ink);width:50px;transform:rotate(14deg);left:-5px}.burst span:nth-child(2){top:28px;left:-16px;width:39px;transform:rotate(-6deg)}.burst span:nth-child(3){top:55px;width:35px;transform:rotate(-27deg)}
.hero-footer{position:absolute;bottom:24px;left:56px;right:52px;z-index:10;display:flex;justify-content:space-between;align-items:center}.scroll-cue{display:flex;align-items:center;gap:14px;font:700 9px monospace;letter-spacing:.06em;text-decoration:none}.scroll-cue>span:last-child{font-size:24px}.motion-controls{display:flex;gap:8px}.motion-controls>button{background:var(--paper);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-size:10px;padding:10px 12px;min-height:42px}.motion-controls>button:hover{background:var(--yellow)}.motion-controls>button:active{transform:translate(2px,2px);box-shadow:none}.motion-controls>button>span{font-size:16px;vertical-align:middle;margin-right:4px}
.preview-dock{border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);background:var(--paper);display:flex;align-items:center;justify-content:space-between;padding:24px max(52px,calc((100vw - 1496px)/2));gap:28px;position:relative;z-index:15;box-shadow:0 6px 0 var(--shadow)}.mini-label{font:bold 11px monospace;letter-spacing:.1em}.dock-title{display:flex;align-items:center;gap:24px}.dock-title>p{font-size:11px;line-height:1.7}.dock-title strong{font-weight:500}.beat-controls{display:flex;gap:10px}.beat{min-width:114px;border:2px solid var(--ink);background:var(--paper);box-shadow:3px 3px 0 var(--shadow);padding:12px 14px;display:flex;gap:8px;font-family:Yusei,sans-serif;font-size:14px;align-items:center}.beat>span{font:700 10px monospace}.beat.is-active{background:var(--blue);color:var(--paper);box-shadow:3px 3px 0 var(--ink)}.beat:hover{transform:translateY(-2px)}
.story-plan{max-width:1340px;margin:auto;padding:86px 52px 54px;display:grid;grid-template-columns:.9fr 1.5fr;gap:20px 60px}.plan-heading{position:sticky;top:30px;align-self:start}.plan-heading>.mini-label{color:var(--blue)}.plan-heading h2{font-family:Dela,sans-serif;font-weight:400;font-size:35px;line-height:1.5;letter-spacing:-.04em;margin:20px 0}.plan-heading>p:last-child{font-size:14px;line-height:2}.chapter-plan{margin:0;padding:0;list-style:none}.chapter-plan li{display:flex;gap:22px;align-items:flex-start;border-top:2px solid var(--ink);padding:25px 0}.chapter-plan li>span{font:700 16px monospace;color:var(--blue);padding-top:6px}.chapter-plan h3{font-family:Yusei,sans-serif;font-size:22px;font-weight:400}.chapter-plan p{font-size:12px;line-height:1.7;margin-top:7px}.chapter-plan small{margin-left:auto;font:700 8px monospace;padding-top:10px;color:var(--muted);white-space:nowrap}.plan-footnote{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:20px;display:flex;gap:20px;justify-content:space-between;font-size:11px;line-height:1.8}.plan-footnote a{font-weight:700;text-underline-offset:4px}.page-footer{padding:30px 52px;display:flex;align-items:center;gap:30px;background:var(--ink);color:var(--paper)}.page-footer .brand-word{font-size:37px}.page-footer .brand-word>span{color:var(--yellow)}.page-footer p{font-family:Yusei,sans-serif;font-size:16px}.page-footer>a{margin-left:auto;font-size:11px;text-decoration:none}
.animating .blue-plane{animation:plane-in .75s var(--ease) both}.animating .portrait-frame{animation:portrait-in .9s .18s var(--pop) both}.animating .back-panel>img{animation:panel-in .75s .06s var(--ease) both}.animating .speech{animation:speech-in .65s .35s var(--pop) both}.animating .headline-first{animation:title-in .7s .05s var(--ease) both}.animating .headline-second{animation:title-in .7s .15s var(--ease) both}.animating .scene-sticker>strong{animation:title-in .7s .4s var(--ease) both}.floating .scene-sticker>span{animation:sticker-bob 4.5s ease-in-out infinite}.typing .speech-cursor{animation:cursor-blink .7s steps(1) infinite}.motion-paused *{animation-play-state:paused!important}.motion-paused .speech-cursor{animation:none}.motion-paused .sound-effect{animation:none}.paused-offscreen *{animation-play-state:paused!important}
@keyframes plane-in{from{opacity:0;transform:translate3d(100px,100px,-100px) rotate(-9deg) skewY(-1deg)}to{opacity:1;transform:rotate(-9deg) skewY(-1deg)}}@keyframes portrait-in{from{opacity:.01;transform:translate3d(70px,90px,-100px) rotate(8deg) scale(.93)}to{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}}@keyframes panel-in{from{opacity:.2;transform:translateX(55px)}to{opacity:1;transform:translateX(0)}}@keyframes speech-in{from{opacity:0;transform:translate3d(-25px,-10px,0) scale(.6)}to{opacity:1;transform:none}}@keyframes title-in{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}@keyframes sound-pop{from{transform:rotate(8deg) scale(.35)}to{transform:rotate(8deg) scale(1)}}@keyframes sticker-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes cursor-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(min-width:1600px){.scene{right:74px}.hero-content{padding-left:90px}.hero-footer{left:90px;right:90px}}
@media(max-width:1199px) and (min-width:761px){.masthead{padding:0 32px}.edition{display:none}.hero{min-height:740px}.hero-content{padding-left:32px;padding-top:140px;width:58%}h1{font-size:7.4vw}.hero-lead{font-size:15px}.scene{right:-12px;width:560px;transform:scale(.86);transform-origin:top right;top:37px}.portrait-layer{left:125px}.speech-layer{left:0}.back-panel{right:-30px}.front-cursor{left:63px}.scene-sticker{left:224px}.burst{left:95px}.hero-footer{left:32px;right:32px}.chapter-label{font-size:10px;gap:7px}.preview-dock{padding:22px 32px;gap:20px}.dock-title{gap:12px}.mini-label{font-size:9px}.beat{min-width:90px;padding:12px 9px;font-size:12px;gap:5px}.story-plan{padding-inline:32px;gap:35px}.plan-heading h2{font-size:27px}.action-button{font-size:14px;padding:17px 19px}}
@media(max-width:760px){.masthead{height:76px;padding:0 21px}.brand-word{font-size:44px}.brand{gap:13px}.brand-description{font-size:7px}.masthead-right{gap:0}.edition{display:none}.prototype-mark{font-size:8px;padding:7px 8px}.hero{min-height:884px}.hero-world{inset:-76px 0 0}.hero-content{padding:21px 21px 0;width:100%;position:static}.chapter-label{font-size:10px;gap:9px;margin-bottom:16px}.chapter-label>span{font-size:8px;padding:6px 7px}h1{font-size:clamp(53px,15vw,81px);line-height:1.13;position:relative;z-index:9;letter-spacing:-.05em}.headline-first{font-size:1.18em}.headline-second{-webkit-text-stroke:2px var(--ink);text-shadow:2px 2px 0 var(--ink),3px 3px 0 var(--ink),4px 4px 0 var(--ink),5px 5px 0 var(--ink)}.hero-lead{position:absolute;left:24px;top:643px;font-size:14px;margin:0;line-height:1.85;letter-spacing:.01em;z-index:10}.hero-actions{position:absolute;left:22px;right:22px;top:744px;margin:0;align-items:stretch;gap:12px;z-index:10}.action-button{justify-content:space-between;font-size:14px;padding:15px 17px;gap:10px;box-shadow:5px 5px 0 var(--ink)}.action-note{font-size:9px;margin-left:1px}.button-arrow{font-size:25px}.blue-plane{left:48%;top:317px;width:85%;height:370px;transform:rotate(-10deg);box-shadow:-9px 10px 0 var(--blue-dark),-12px 14px 0 var(--ink),-20px 25px 20px rgb(23 25 33 / 0.157)}.dot-plane{right:0;top:286px;width:150px;height:190px;background-size:7px 7px}.back-word{top:329px;right:0;font-size:45px}.ground-line{left:22px;right:22px;bottom:4px}.scene{top:204px;right:0;width:100%;height:432px;perspective:900px}.portrait-layer{left:auto;right:37px;top:80px;width:230px;--rotation:-4deg}.portrait-frame{padding:5px 5px 0;border-width:2px;box-shadow:4px 4px 0 var(--shadow),6px 6px 0 var(--ink),11px 13px 0 var(--blue),14px 16px 0 var(--ink),22px 26px 18px rgb(23 25 33 / 0.271)}.frame-caption{font-size:5px;gap:4px;padding:8px 0}.frame-caption>span:last-child{font-size:6px}.live-dot{width:4px;height:4px}.back-panel{right:6px;top:33px;width:128px;padding:4px;border-width:2px;box-shadow:4px 5px 0 var(--blue),6px 8px 0 var(--ink),14px 18px 14px rgb(23 25 33 / 0.251)}.panel-tab{font-size:8px;padding:4px;top:-17px}.speech-layer{left:21px;top:15px;width:224px}.speech{min-height:125px;padding:23px 23px 20px;border-width:2px;box-shadow:2px 3px 0 var(--shadow),4px 5px 0 var(--ink),9px 13px 0 rgb(23 25 33 / 0.122)}.speaker{font-size:8px;left:25px;padding:3px 8px}.speech::before{bottom:-25px;right:10px;width:37px;height:45px}.speech::after{bottom:-17px;right:14px;width:32px;height:37px}#speech-copy{font-size:21px;min-height:62px;line-height:1.5}.speech-cursor{width:5px;height:5px;right:22px;bottom:20px}.scene-sticker{top:378px;left:auto;right:10px;padding:7px 17px;border-width:2px;box-shadow:3px 4px 0 var(--ink),7px 10px 12px rgb(23 25 33 / 0.212)}.scene-sticker>span{font-size:12px}.scene-sticker>strong{font-size:19px}.front-cursor{width:63px;height:73px;left:31px;top:313px}.burst{left:55px;top:195px;transform:scale(.68) rotate(-8deg)}.sound-effect{right:7px;top:271px;font-size:38px}.scene-shadow{left:auto;right:20px;bottom:17px;width:240px;height:40px;filter:blur(11px)}.hero-footer{bottom:13px;left:23px;right:22px}.scroll-cue{font-size:7px;gap:7px}.scroll-cue>span:last-child{font-size:20px}.motion-controls{gap:6px}.motion-controls>button{font-size:0;padding:6px 8px;min-width:35px;min-height:35px}.motion-controls>button>span{font-size:17px;margin:0}.preview-dock{padding:22px;align-items:stretch;flex-direction:column;gap:20px}.dock-title{gap:16px}.dock-title>p{font-size:10px}.dock-title>.mini-label{font-size:9px;max-width:65px;line-height:1.5}.beat-controls{gap:8px;justify-content:space-between}.beat{flex:1;min-width:0;justify-content:center;gap:7px;padding:12px 8px;font-size:12px}.beat>span{font-size:9px}.story-plan{padding:54px 22px 30px;display:block}.plan-heading{position:static;margin-bottom:34px}.plan-heading h2{font-size:30px;margin:13px 0}.plan-heading>p:last-child{font-size:13px}.chapter-plan li{gap:15px;padding:23px 0}.chapter-plan h3{font-size:20px}.chapter-plan p{font-size:11px}.chapter-plan li>span{font-size:14px}.chapter-plan small{font-size:7px}.plan-footnote{display:block;font-size:10px;padding-top:18px}.plan-footnote a{display:inline-block;margin-top:13px}.page-footer{padding:28px 22px;gap:18px}.page-footer p{font-size:12px}.page-footer>a{font-size:9px}.page-footer .brand-word{font-size:32px}}
@media(min-width:480px) and (max-width:760px){.scene{width:460px;right:calc(50% - 230px)}.portrait-layer{width:255px;right:59px}.hero-content{padding-left:35px}.hero-lead{left:35px}.hero-actions{left:35px;right:35px}.speech-layer{left:35px}.scene-sticker{top:395px;right:33px}.hero-lead{top:660px}.hero-actions{top:756px}.hero{min-height:900px}}
.hero{overflow:clip}
/* コマ同士の交差を防ぎ、前後関係は固定したまま個別に傾ける。 */
.scene-perspective{transform-style:flat;isolation:isolate}
.speech-layer{z-index:10;left:42px;top:12px;width:350px}
.portrait-layer{top:170px;width:364px}
.back-panel{top:66px;width:177px;right:0;--rotation:9deg}
.scene-sticker{top:673px;left:285px}
.front-cursor{top:606px}
.scene{height:778px}
@media(min-width:1200px){.hero{min-height:841px}.hero-content{padding-top:134px}}
@media(min-width:761px) and (max-width:1199px){.hero{min-height:795px}.speech-layer{left:15px;width:337px}.portrait-layer{left:140px}.scene-sticker{left:238px}.back-panel{right:0}}
@media(max-width:760px){.hero{min-height:962px}.scene{height:498px}.speech-layer{left:24px;top:14px;width:224px}.portrait-layer{top:166px;width:212px;right:39px}.back-panel{top:151px;right:5px;width:105px}.scene-sticker{top:466px;right:19px;left:auto}.front-cursor{top:383px;width:53px;left:30px}.burst{top:279px}.sound-effect{top:347px}.hero-lead{top:722px}.hero-actions{top:820px}.blue-plane{top:386px;height:378px}.dot-plane{top:379px}.scene-shadow{bottom:35px}}
@media(min-width:480px) and (max-width:760px){.portrait-layer{right:80px}.speech-layer{left:70px}.scene-sticker{right:56px}.front-cursor{left:70px}}

/* 枠のない、小さな案内人。本文の主役を奪わない大きさで追従する。 */
.story-plan{display:block;max-width:1160px;padding:76px 250px 50px 42px}
.plan-heading{position:static;margin:0 0 38px}.plan-heading h2{font-size:32px;margin:12px 0}.plan-heading>p:last-child{font-size:13px}
.guide-world{position:fixed;right:18px;bottom:18px;width:226px;height:164px;z-index:40;background:none;border:0;box-shadow:none;pointer-events:none;mix-blend-mode:multiply;opacity:0;visibility:hidden;transition:opacity .2s;--walk-x:0px}
.guide-world.is-visible{opacity:1;visibility:visible}
.guide-speech{position:absolute;right:71px;top:0;width:155px;min-height:67px;padding:17px 9px 10px;background:var(--paper);border:1.5px solid var(--ink);border-radius:42% 38% 34% 39% / 32% 31% 26% 29%;box-shadow:2px 3px 0 var(--ink);text-align:center;transition:opacity .15s,transform .15s}
.guide-speech::after{content:'';position:absolute;right:4px;bottom:-9px;width:13px;height:16px;background:var(--paper);border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:skewY(25deg) rotate(23deg)}
.guide-speaker{position:absolute;top:-8px;left:19px;padding:2px 6px;border:1px solid var(--ink);background:var(--yellow);font-size:8px;font-weight:800}
#guide-copy{font:13px/1.55 Yusei,sans-serif;white-space:pre-line;min-height:40px}
.guide-walker{position:absolute;right:7px;bottom:16px;width:67.5px;height:144px;transform:translateX(var(--walk-x));--facing:1}
.walker-sprite{position:absolute;inset:0;background:url('public/images/dochan-walk.png') no-repeat;background-size:400% 125%;background-position:33.333333% 50%;transform:scaleX(var(--facing));transform-origin:50% 90%}
.walker-shadow{position:absolute;bottom:8px;left:20%;width:60%;height:5px;background:rgb(23 25 33 / 0.133);border-radius:50%;filter:blur(2px)}
.footstep{position:absolute;right:57px;bottom:32px;font:11px Yusei,sans-serif;color:var(--blue);opacity:0;transform:rotate(-7deg)}
.guide-world.is-walking .footstep{opacity:1}.guide-world.is-walking .guide-speech,.guide-world.speech-hidden .guide-speech{opacity:0;transform:translateY(4px)}
#guide-motion-toggle{position:absolute;bottom:0;right:23px;width:27px;height:27px;padding:0;border:1px solid rgb(23 25 33 / 0.333);border-radius:50%;background:var(--paper);font-size:10px;pointer-events:auto}
#guide-motion-toggle:hover{background:var(--yellow)}
.chapter-plan{padding:10px 0 100px}.chapter-plan li{position:relative;display:flex;min-height:390px;border:2px solid var(--ink);padding:35px 26px;gap:19px;background:var(--paper);box-shadow:6px 7px 0 var(--shadow),8px 9px 0 var(--ink);margin-bottom:48px;transition:background .25s,box-shadow .25s;scroll-margin-top:60px;align-items:flex-start}
.chapter-plan li:nth-child(even){transform:rotate(1deg)}.chapter-plan li:nth-child(odd){transform:rotate(-1deg)}
.chapter-plan li::after{content:'↓';position:absolute;bottom:-44px;left:50%;font-size:27px;color:var(--blue)}.chapter-plan li:last-child::after{content:none}.chapter-plan li.is-current{background:var(--paper);box-shadow:6px 7px 0 var(--yellow),8px 9px 0 var(--ink)}
.chapter-plan li>span{font:28px Dela,sans-serif;padding:0;line-height:1;color:var(--blue)}
.chapter-plan li>div{min-width:0}.chapter-plan small{display:block;padding:0;margin:0 0 24px;font:700 10px monospace;letter-spacing:.16em;color:var(--blue)}
.chapter-plan h3{font:clamp(25px,2.7vw,38px)/1.6 Dela,sans-serif;letter-spacing:-.04em}.chapter-plan p{font-size:14px;line-height:2;margin-top:21px}
.chapter-note{display:inline-block;font:13px/1.65 Yusei,sans-serif;margin-top:32px;border-bottom:5px solid var(--yellow)}
.plan-footnote{position:relative;background:var(--paper);z-index:21;margin-top:4px}
@media(min-width:761px) and (max-width:1100px){.story-plan{padding-right:230px;padding-left:30px}.chapter-plan li{padding:30px 20px;gap:15px}.chapter-plan h3{font-size:28px}.chapter-plan p{font-size:13px}}
@media(max-width:760px){.hero{min-height:1008px}.hero-lead{top:760px}.hero-actions{top:860px}.story-plan{padding:48px 22px 34px}.plan-heading h2{font-size:29px}.chapter-plan{padding:8px 1px 66px}.chapter-plan li{min-height:350px;padding:28px 18px;gap:14px;margin-bottom:42px;scroll-margin-top:28px}.chapter-plan li>span{font-size:22px}.chapter-plan small{font-size:9px;margin-bottom:23px}.chapter-plan h3{font-size:27px}.chapter-plan p{font-size:12px}.chapter-note{font-size:12px;margin-top:28px}.guide-world{width:187px;height:124px;right:8px;bottom:12px}.guide-walker{width:45px;height:96px;right:6px;bottom:16px}.guide-speech{right:52px;top:0;width:134px;min-height:57px;padding:14px 7px 7px}#guide-copy{font-size:11px;min-height:34px}.guide-speaker{font-size:7px;top:-7px}.footstep{font-size:9px;right:48px;bottom:24px}#guide-motion-toggle{right:14px;width:25px;height:25px}.walker-shadow{bottom:5px;height:4px}.plan-footnote{padding-bottom:100px}}
@media(prefers-reduced-motion:reduce){.footstep{display:none}}
@media(min-width:761px) and (max-width:950px){.scene{right:22px;top:68px;transform:scale(.68)}.back-panel{right:5px}.hero-content{width:58%}.hero-lead{font-size:14px}.hero-footer{bottom:26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.depth-layer{will-change:auto}.animating .blue-plane,.animating .portrait-frame,.animating .speech,.animating h1>span{opacity:1}}

/* 採用情報：会社を知り、仕事を理解して、募集要項へ進む。 */
.recruit-nav{display:flex;align-items:center;gap:27px;font-size:12px;font-weight:700}.recruit-nav a{text-decoration:none}.recruit-nav a:hover{text-decoration:underline;text-underline-offset:5px}.recruit-nav .nav-entry{background:var(--blue);color:var(--paper);border:2px solid var(--ink);padding:13px 19px;box-shadow:3px 3px 0 var(--ink)}.nav-entry span{margin-left:16px}.text-link{font-size:13px;font-weight:700;text-underline-offset:5px;display:inline-block}.hero-content .text-link{pointer-events:auto}.hero-actions .action-note{margin-top:2px}
.recruit-ribbon{position:relative;z-index:12;display:flex;align-items:center;justify-content:space-around;gap:20px;padding:22px 30px;background:var(--yellow);border-block:3px solid var(--ink);box-shadow:0 7px 0 var(--shadow);transform:rotate(-1deg);margin:0 -10px}.recruit-ribbon span{font:700 12px monospace;letter-spacing:.08em}.recruit-ribbon b{font:23px Yusei,sans-serif}
.recruit-section{position:relative;padding:105px 0;scroll-margin-top:24px;overflow:clip}.section-inner{max-width:1170px;padding:0 48px;margin:auto}.section-kicker{display:flex;align-items:center;gap:13px;font:700 11px monospace;letter-spacing:.14em;margin-bottom:25px;color:var(--blue)}.section-kicker>span{font:18px Dela,sans-serif;background:var(--ink);color:var(--paper);padding:5px 10px;box-shadow:3px 3px 0 var(--shadow)}.recruit-section h2{font:400 clamp(31px,3.5vw,49px)/1.65 Dela,sans-serif;letter-spacing:-.06em}.recruit-section h2 em{font:inherit;font-style:normal;color:var(--blue)}.section-intro{font-size:15px;line-height:2;margin:23px 0 37px}.split-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:75px;align-items:center}.section-copy>p:not(.section-kicker){font-size:14px;line-height:2.1;margin-top:25px}.section-copy>p.opening-copy{font-size:17px;font-weight:700;line-height:2}.section-copy>.text-link{margin-top:28px}.manga-sheet{margin:0;position:relative;padding:9px;background:var(--paper);border:3px solid var(--ink);transform:rotate(2deg);box-shadow:7px 8px 0 var(--shadow),10px 11px 0 var(--ink),19px 21px 0 var(--blue),22px 24px 0 var(--ink),27px 32px 24px rgb(23 25 33 / 0.125)}.manga-sheet img{width:100%;height:auto}.manga-sheet figcaption{font:11px/1.6 Yusei,sans-serif;text-align:center;padding:11px 4px 2px}.about-section::before{content:'HELLO!';position:absolute;left:-20px;bottom:30px;font:900 150px/.9 Arial,sans-serif;letter-spacing:-.06em;color:rgb(23 25 33 / .07);transform:rotate(-7deg);z-index:-1}
.business-section{background:var(--paper);border-block:3px solid var(--ink);box-shadow:inset 0 8px 0 var(--shadow)}.service-list{margin-top:54px;border-top:3px solid var(--ink)}.service-list article{display:grid;grid-template-columns:78px 1fr 80px;gap:25px;border-bottom:2px solid var(--ink);padding:36px 6px;align-items:start}.service-number{font:39px Dela,sans-serif;color:var(--blue)}.service-list h3{font:27px/1.5 Yusei,sans-serif}.service-list p{max-width:665px;font-size:14px;line-height:2;margin:13px 0}.service-list small{font:11px/1.8 monospace;color:var(--muted)}.service-symbol{font:70px/1 Dela,sans-serif;color:var(--blue);text-shadow:3px 3px 0 var(--yellow);text-align:center}
.image-first{grid-template-columns:.9fr 1.1fr}.image-first .manga-sheet{transform:rotate(-2deg)}.team-section h2{font-size:clamp(30px,3vw,43px)}.work-steps{list-style:none;counter-reset:work;padding:0;margin:28px 0}.work-steps li{position:relative;padding:16px 0 16px 46px;border-top:1px solid var(--rule);counter-increment:work}.work-steps li::before{content:counter(work,decimal-leading-zero);position:absolute;top:19px;left:0;color:var(--blue);font:16px Dela,sans-serif}.work-steps b{font:20px Yusei,sans-serif}.work-steps p{font-size:12px;line-height:1.9;margin-top:5px}.section-copy .ink-note{font-size:12px!important;padding-left:16px;border-left:4px solid var(--blue)}
.people-section{background:var(--yellow);border-block:3px solid var(--ink);box-shadow:inset 0 9px 0 var(--yellow);transform:skewY(-1deg)}.people-section>.section-inner{transform:skewY(1deg)}.people-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:38px}.people-grid article{background:var(--paper);border:3px solid var(--ink);padding:28px 27px;position:relative;box-shadow:5px 6px 0 var(--ink)}.people-grid article:nth-child(2){transform:rotate(1deg)}.people-grid article:nth-child(3){transform:rotate(-1deg)}.people-grid article>span{display:inline-block;font:35px/1 Dela,sans-serif;color:var(--blue);margin-bottom:20px}.people-grid h3{font:23px/1.6 Yusei,sans-serif}.people-grid p{font-size:13px;line-height:2;margin-top:10px}.people-message{font-size:14px;line-height:2.1;margin-top:34px}.people-message strong{text-decoration:underline;text-underline-offset:5px}
.environment-list{display:grid;grid-template-columns:repeat(3,1fr);gap:27px;margin-top:47px}.environment-list article{padding:28px 20px 27px 0;border-top:5px solid var(--blue)}.environment-list small{font:700 11px monospace;letter-spacing:.12em}.environment-list h3{font:25px/1.7 Yusei,sans-serif;margin:19px 0}.environment-list p{font-size:13px;line-height:2}.environment-detail{font-size:12px;line-height:2;border-top:1px solid var(--rule);padding-top:26px}
.positions-section{background:var(--paper);border-block:3px solid var(--ink)}.job-list{display:grid;gap:18px}.job{background:var(--paper);border:3px solid var(--ink);box-shadow:5px 6px 0 var(--shadow),7px 8px 0 var(--ink)}summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}summary:focus-visible{outline:4px solid var(--blue);outline-offset:5px}.job summary{padding:30px;display:grid;grid-template-columns:49px 1fr 32px;align-items:center;gap:22px}.job summary:hover{background:var(--yellow)}.job-index{font:27px Dela,sans-serif;color:var(--blue)}.job summary small{display:block;font:700 10px monospace;color:var(--blue);letter-spacing:.13em;margin-bottom:8px}.job summary strong{font:25px/1.5 Yusei,sans-serif}.job-meta{display:block;font-size:12px;margin-top:8px}.detail-icon{font-size:29px;transition:transform .2s}.job[open] .detail-icon{transform:rotate(45deg)}.job-body{padding:0 32px 30px;border-top:1px solid var(--rule)}.job-body dl,.common-terms dl{display:grid;grid-template-columns:145px 1fr;margin:0;font-size:13px;line-height:2}.job-body dt,.job-body dd,.common-terms dt,.common-terms dd{padding:19px 0;border-bottom:1px solid var(--rule);margin:0}.job-body dt,.common-terms dt{font-weight:700;padding-right:14px}.job-apply{background:var(--blue);color:var(--paper);border:2px solid var(--ink);box-shadow:3px 4px 0 var(--ink);padding:14px 23px;display:flex;justify-content:space-between;gap:30px;font-size:13px;font-weight:700;margin-top:26px}.job-apply:hover{background:var(--blue)}.job-apply:active{transform:translate(2px,2px);box-shadow:1px 2px 0 var(--ink)}.common-terms{padding:32px 0 0;margin-top:20px}.common-terms h3{font:23px Yusei,sans-serif;margin-bottom:14px}
.selection-flow{list-style:none;padding:0;margin:45px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.selection-flow li{border-top:3px solid var(--ink);padding:23px 0;position:relative}.selection-flow li:not(:last-child)::after{content:'→';position:absolute;right:-21px;top:28px;color:var(--blue);font-size:23px}.selection-flow span{font:26px Dela,sans-serif;color:var(--blue)}.selection-flow h3{font:20px/1.6 Yusei,sans-serif;margin:15px 0 10px}.selection-flow p{font-size:12px;line-height:2}.selection-flow small{font-size:10px;background:var(--yellow);display:inline-block;padding:3px 7px;margin-top:12px}.faq{margin-top:63px}.faq>h3{font:25px/1.7 Yusei,sans-serif;margin-bottom:25px}.faq details{border-top:1px solid var(--rule)}.faq details:last-child{border-bottom:1px solid var(--rule)}.faq summary{font-size:14px;font-weight:700;padding:21px 4px;display:flex;justify-content:space-between;gap:15px}.faq summary span{font-size:20px}.faq details[open] summary span{transform:rotate(45deg)}.faq details>p{font-size:13px;line-height:2;padding:0 4px 24px;max-width:800px}
.company-section{border-top:3px solid var(--ink);background:var(--paper)}.company-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}.company-table{display:grid;grid-template-columns:105px 1fr;font-size:13px;line-height:2;margin:0}.company-table dt,.company-table dd{padding:21px 0;border-bottom:1px solid var(--rule);margin:0}.company-table dt{font-weight:700}.company-wordmark{font:85px/1 Dela,sans-serif;letter-spacing:-.12em;margin-top:43px}.company-wordmark>span{color:var(--blue)}.company-wordmark small{font:700 11px monospace;letter-spacing:.15em;margin-left:18px}
.entry-section{position:relative;padding:95px 0 105px;background:var(--blue);color:var(--paper);border-block:3px solid var(--ink);overflow:hidden}.entry-section::after{content:'NEXT!';position:absolute;right:-25px;bottom:15px;font:900 240px/.9 Arial,sans-serif;color:rgb(247 243 233 / .28);transform:rotate(-8deg);pointer-events:none}.entry-section>.section-inner{position:relative;z-index:1}.entry-section .section-kicker{color:var(--yellow)}.entry-section h2{font:clamp(40px,6vw,76px)/1.5 Dela,sans-serif;letter-spacing:-.05em;text-shadow:4px 5px 0 var(--ink)}.entry-section p:not(.section-kicker){font-size:15px;line-height:2;margin-top:23px}.entry-section .action-button{color:var(--ink);margin:32px 0 21px;max-width:390px;width:100%}.entry-section .text-link{color:var(--paper)}
.recruit-footer{padding:36px max(40px,calc((100vw - 1074px)/2));background:var(--paper)}.recruit-footer>div{display:flex;align-items:center;justify-content:space-between;gap:30px}.recruit-footer>div>a:last-child{font-size:11px}.recruit-footer .brand-word{font-size:42px}.fiction-note{font-size:11px;line-height:1.9;color:var(--muted);border-top:1px solid var(--rule);margin-top:29px;padding-top:22px;max-width:960px}
#entry-dialog{border:3px solid var(--ink);background:var(--paper);padding:0;max-width:500px;width:calc(100% - 40px);color:var(--ink);box-shadow:9px 10px 0 var(--yellow)}#entry-dialog::backdrop{background:rgb(23 25 33 / 0.600);backdrop-filter:blur(5px)}.dialog-content{padding:35px}.dialog-content h2{font:25px/1.6 Yusei,sans-serif;margin:19px 0}.dialog-content>p:not(.mini-label){font-size:13px;line-height:1.9;margin:15px 0}.dialog-content #entry-role{font-weight:700;color:var(--blue)}#close-dialog{background:var(--blue);color:var(--paper);border:2px solid var(--ink);padding:13px 22px;margin-top:10px;font-weight:700}
@media(min-width:1400px){.guide-world{right:20px}}
@media(max-width:1100px) and (min-width:761px){.section-inner{padding-inline:37px}.split-layout{gap:43px}.recruit-section h2{font-size:35px}.section-copy>p.opening-copy{font-size:15px}.recruit-nav{gap:17px;font-size:11px}.environment-list{gap:20px}.environment-list h3{font-size:23px}.company-layout{gap:30px}.selection-flow h3{font-size:17px}}
@media(max-width:760px){.recruit-nav>a:not(.nav-entry){display:none}.recruit-nav .nav-entry{padding:10px 11px;font-size:11px;white-space:nowrap}.nav-entry span{margin-left:8px}.brand-description{font-size:8px}.recruit-ribbon{padding:18px 14px;gap:18px}.recruit-ribbon span{font-size:8px}.recruit-ribbon span:last-child{display:none}.recruit-ribbon b{font-size:17px}.recruit-section{padding:64px 0;scroll-margin-top:15px}.section-inner{padding:0 25px}.section-kicker{font-size:9px;margin-bottom:18px;gap:11px}.section-kicker>span{font-size:15px}.recruit-section h2{font-size:30px;line-height:1.6}.split-layout,.image-first{display:flex;flex-direction:column;gap:38px}.image-first .section-copy{order:-1}.section-copy>p:not(.section-kicker){font-size:13px;margin-top:20px}.section-copy>p.opening-copy{font-size:15px}.pc-break{display:none}.manga-sheet{max-width:345px;width:calc(100% - 24px);padding:6px;box-shadow:4px 5px 0 var(--shadow),6px 7px 0 var(--ink),11px 13px 0 var(--blue),14px 16px 0 var(--ink)}.manga-sheet figcaption{font-size:10px}.section-intro{font-size:13px;margin:21px 0 29px}.service-list{margin-top:29px}.service-list article{grid-template-columns:40px 1fr;gap:15px;padding:25px 0}.service-number{font-size:24px}.service-symbol{display:none}.service-list h3{font-size:21px}.service-list p{font-size:12px;line-height:1.95}.service-list small{font-size:9px}.work-steps b{font-size:19px}.work-steps p{font-size:12px}.people-grid{grid-template-columns:1fr;gap:20px;margin-top:28px}.people-grid article{padding:23px}.people-grid article>span{font-size:30px;float:right;margin-left:15px}.people-grid h3{font-size:21px}.people-grid p{font-size:12px}.people-message{font-size:12px}.environment-list{grid-template-columns:1fr;gap:0;margin-top:31px}.environment-list article{padding:23px 0}.environment-list h3{font-size:23px;margin:13px 0}.environment-list p{font-size:12px}.environment-detail{font-size:11px}.job summary{padding:22px 14px;grid-template-columns:25px 1fr 22px;gap:10px}.job-index{font-size:18px}.job summary strong{font-size:18px;overflow-wrap:anywhere}.job summary small{font-size:8px;letter-spacing:.05em}.job-meta{font-size:10px;line-height:1.7}.detail-icon{font-size:23px}.job-body{padding:0 20px 23px}.job-body dl,.common-terms dl{display:block;font-size:12px}.job-body dt,.common-terms dt{border:0;padding:19px 0 3px}.job-body dd,.common-terms dd{padding:0 0 17px}.job-apply{font-size:12px;padding:13px 14px;gap:18px}.common-terms h3{font-size:21px}.selection-flow{grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}.selection-flow li:not(:last-child)::after{display:none}.selection-flow h3{font-size:18px}.selection-flow p{font-size:12px}.selection-flow span{font-size:24px}.faq{margin-top:35px}.faq>h3{font-size:21px}.faq summary{font-size:13px;line-height:1.8;padding:18px 0}.faq details>p{font-size:12px}.company-layout{display:block}.company-wordmark{font-size:64px;margin:25px 0}.company-table{grid-template-columns:78px 1fr;font-size:12px}.company-table dt,.company-table dd{padding:17px 0}.entry-section{padding:65px 0 72px}.entry-section h2{font-size:40px}.entry-section p:not(.section-kicker){font-size:13px}.entry-section::after{font-size:140px;right:-20px;bottom:50px}.entry-section .action-button{font-size:14px}.recruit-footer{padding:30px 24px}.recruit-footer .brand-word{font-size:36px}.fiction-note{font-size:10px}.dialog-content{padding:25px}.dialog-content h2{font-size:22px}}
body.entry-open{overflow:hidden}.entry-open .guide-world{visibility:hidden;opacity:0}
.recruit-ribbon{margin-inline:0;transform:skewY(-1deg);overflow:hidden}

/* 色のついた紙とインク。文字は止めたまま、登場と操作に動きをつける。 */
.reading-progress{position:fixed;inset:0 0 auto;height:5px;z-index:90;pointer-events:none}
.reading-progress>span{display:block;height:100%;background:var(--blue);border-bottom:1px solid var(--ink);transform:scaleX(0);transform-origin:left}
.chapter-label>span{background:var(--yellow);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.nav-entry{background:var(--yellow)}
.blue-plane{box-shadow:-10px 12px 0 var(--yellow),-13px 16px 0 var(--ink),-24px 29px 0 var(--blue-dark),-27px 32px 0 var(--ink)}
.hero .scene-sticker{background:var(--paper)}
.hero .scene-sticker>strong{color:var(--blue)}
.recruit-ribbon{background:var(--blue);color:var(--paper);box-shadow:0 7px 0 var(--shadow)}
.recruit-ribbon b{background:var(--yellow);color:var(--ink);padding:7px 18px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(2deg)}
.section-kicker>span{background:var(--yellow);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.recruit-section h2 em{position:relative;display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;background:linear-gradient(transparent 74%,var(--yellow) 74%,var(--yellow) 94%,transparent 94%)}
.recruit-section h2.has-entered em{animation:ink-arrives .65s .15s var(--ease) both}
@keyframes ink-arrives{from{background-size:0% 100%}to{background-size:100% 100%}}
.recruit-section h2 em{background-repeat:no-repeat}
.about-section::before{color:rgb(23 25 33 / .07);transform:translateY(var(--scene-shift,0px)) rotate(-7deg)}
.team-section{background:var(--paper)}
.team-section::before{content:'';position:absolute;right:-45px;top:65px;width:230px;height:230px;border:3px solid var(--ink);background:var(--paper);box-shadow:7px 8px 0 var(--ink);transform:translateY(var(--scene-shift,0px)) rotate(13deg);pointer-events:none}
.team-section>.section-inner{position:relative}
.image-first .manga-sheet{box-shadow:7px 8px 0 var(--shadow),10px 11px 0 var(--ink),19px 21px 0 var(--yellow),22px 24px 0 var(--ink),27px 32px 24px rgb(23 25 33 / 0.125)}
.service-number{display:grid;place-items:center;align-self:start;width:63px;height:65px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(-4deg)}
.service-list article:nth-child(2) .service-number{background:var(--paper);transform:rotate(3deg)}
.service-list article:nth-child(3) .service-number{background:var(--yellow);transform:rotate(-3deg)}
.service-list article{transition:translate .22s var(--ease)}
.service-symbol{color:var(--blue);transition:transform .35s var(--pop)}
.people-section{background:var(--yellow)}
.people-grid article{box-shadow:5px 6px 0 var(--ink),10px 12px 0 rgb(23 25 33 / 0.333);transition:translate .22s var(--ease),box-shadow .22s var(--ease)}
.people-grid article:nth-child(2){background:var(--paper)}
.people-grid article:nth-child(3){background:var(--paper)}
.people-grid article:nth-child(4){background:var(--paper)}
.people-grid article>span{color:var(--paper);background:var(--blue);border:2px solid var(--ink);padding:11px 13px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-7deg)}
.environment-list article{padding:26px 20px;background:var(--paper);border:2px solid var(--ink);border-top:8px solid var(--blue);box-shadow:5px 6px 0 var(--ink);margin-bottom:28px;transition:translate .22s var(--ease)}
.environment-list article:nth-child(2){border-top-color:var(--blue)}
.environment-list article:nth-child(3){border-top-color:var(--blue)}
.environment-list small{background:var(--yellow);padding:4px 8px}
.job{transition:translate .22s var(--ease),box-shadow .22s var(--ease)}
.job-index{background:var(--yellow);color:var(--ink);border:2px solid var(--ink);text-align:center;box-shadow:3px 3px 0 var(--ink);padding:5px 0;transform:rotate(-4deg)}
.job-apply{width:fit-content;text-decoration:none}
.job[open]{box-shadow:5px 6px 0 var(--yellow),7px 8px 0 var(--ink)}
.job[open] .job-body{animation:job-unfold .35s var(--ease)}
@keyframes job-unfold{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.selection-flow>li>span{color:var(--ink);background:var(--paper);padding:5px 10px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:inline-block;transform:rotate(-5deg)}
.company-section{background:var(--paper)}
.company-table dd:nth-of-type(2),.company-table dd:nth-of-type(3){font-weight:800;color:var(--blue)}
.company-wordmark>span{color:var(--blue)}
.entry-section::before{content:'';position:absolute;right:5%;top:-60px;width:260px;height:260px;background:var(--yellow);border:4px solid var(--ink);box-shadow:9px 11px 0 var(--ink);transform:translateY(var(--scene-shift,0px)) rotate(18deg)}
.entry-section::after{transform:translateY(var(--scene-shift,0px)) rotate(-8deg);color:rgb(247 243 233 / .28)}
.contact-section{background:var(--paper);padding-top:105px;padding-bottom:120px}
.contact-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:66px;align-items:start}
.contact-intro h2{font-size:clamp(30px,3vw,41px)}
.contact-intro>p:not(.section-kicker){font-size:14px;line-height:2;margin-top:24px}
.contact-letter{color:var(--paper);position:relative;max-width:310px;margin:63px 15px 0 0;padding:28px 28px 60px;background:var(--blue);border:3px solid var(--ink);box-shadow:7px 8px 0 var(--shadow),10px 11px 0 var(--ink);transform:rotate(-6deg)}
.contact-letter>span{color:var(--ink);display:inline-block;font:12px monospace;letter-spacing:.15em;padding:5px 8px;background:var(--yellow);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);transform:rotate(4deg)}
.contact-letter b{display:block;font:29px/1.7 Yusei,sans-serif;margin-top:18px}
.contact-letter i{position:absolute;bottom:8px;right:24px;font:70px/1 Dela,sans-serif;color:var(--yellow)}
.form-paper{position:relative;background:var(--paper);border:3px solid var(--ink);padding:39px 33px 32px;box-shadow:6px 7px 0 var(--shadow),9px 10px 0 var(--ink),16px 18px 0 var(--yellow),19px 21px 0 var(--ink)}
.form-paper-tab{position:absolute;top:-19px;left:24px;background:var(--yellow);border:2px solid var(--ink);padding:8px 15px;font:16px Yusei,sans-serif;box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg)}
.form-demo-note{font-size:12px;line-height:1.9;padding:12px 14px;background:var(--paper);border-left:3px solid var(--blue);margin-bottom:26px}
#contact-fields{border:0;padding:0;margin:0;min-width:0}
.form-field{margin-bottom:23px}
.form-field label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;margin-bottom:10px}
.form-field label>span{background:var(--yellow);color:var(--ink);font-size:10px;padding:2px 5px;border:1px solid var(--rule);font-weight:500}
.form-field label>span.optional{background:var(--paper);color:var(--ink);border-color:var(--rule)}
.form-field input,.form-field select,.form-field textarea{display:block;width:100%;max-width:100%;border:2px solid var(--muted);border-radius:0;background:var(--paper);color:var(--ink);font:16px/1.6 'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;padding:12px 13px;transition:border-color .18s,box-shadow .18s;scroll-margin:30px}
.form-field select{min-height:53px;padding-right:25px}
.form-field textarea{resize:vertical;min-height:145px}
.form-field textarea::placeholder{font-size:13px;color:var(--muted)}
.form-field :is(input,select,textarea):focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-color:var(--blue);box-shadow:4px 4px 0 var(--paper)}
.form-field [aria-invalid="true"]{border-color:var(--ink);border-style:dashed;background:var(--paper);box-shadow:inset 5px 0 0 var(--yellow)}
.field-error{font-size:12px;line-height:1.7;color:var(--ink);margin-top:6px;font-weight:700}
.field-error:empty{display:none}
.field-help{display:flex;gap:12px;align-items:start;justify-content:space-between}
#message-count{font-size:10px;color:var(--muted);white-space:nowrap;margin-top:8px;margin-left:auto}
.form-error-summary{font-size:12px;line-height:1.8;color:var(--ink);margin-bottom:15px;padding:10px 12px;background:var(--yellow);border-left:3px solid var(--ink)}
.form-error-summary:empty{display:none}
.form-confirm{width:100%;font-size:15px}
.form-confirm>span:last-child{font-size:24px}
.form-complete{text-align:center;padding:36px 4px}
.complete-mark{display:inline-block;background:var(--paper);border:3px solid var(--ink);box-shadow:4px 5px 0 var(--ink);padding:14px 21px;font:40px Dela,sans-serif;transform:rotate(-6deg)}
.form-complete h3{font:24px/1.6 Yusei,sans-serif;margin:25px 0 16px}
.form-complete p{font-size:14px;line-height:2}
#form-again{border:0;border-bottom:1px solid var(--ink);background:none;padding:8px 0;margin-top:24px;font-size:13px}
#contact-review{border:3px solid var(--ink);background:var(--paper);padding:0;max-width:600px;width:calc(100% - 40px);max-height:calc(100dvh - 64px);color:var(--ink);box-shadow:8px 9px 0 var(--yellow);overflow:auto}
#contact-review::backdrop{background:rgb(23 25 33 / 0.651);backdrop-filter:blur(5px)}
#contact-review[open]{animation:review-open .25s var(--pop)}
@keyframes review-open{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.review-values{font-size:13px;line-height:1.8;margin:22px 0}
.review-values dt{font-weight:700;font-size:11px;color:var(--muted);margin-top:15px}
.review-values dd{margin:4px 0 0;padding-bottom:12px;border-bottom:1px solid var(--rule);white-space:pre-wrap;overflow-wrap:anywhere}
.review-actions{display:flex;flex-direction:column-reverse;align-items:stretch;gap:21px;margin-top:25px}
.review-actions .action-button{font-size:14px;padding:14px 18px}
#review-back{background:none;border:0;text-decoration:underline;text-underline-offset:5px;font-size:13px;padding:6px}
@media(hover:hover) and (pointer:fine){
  .service-list article:hover{translate:7px 0}.service-list article:hover .service-symbol{transform:rotate(12deg) scale(1.12)}
  .people-grid article:hover,.environment-list article:hover{translate:0 -5px}
  .job:hover{translate:-2px -2px;box-shadow:7px 8px 0 var(--yellow),9px 10px 0 var(--ink)}
}
@media(max-width:1100px) and (min-width:761px){.recruit-nav{gap:13px}.contact-layout{gap:35px;grid-template-columns:.9fr 1.1fr}.form-paper{padding:35px 25px 28px}.contact-intro h2{font-size:32px}.environment-list h3{font-size:21px}}
@media(max-width:760px){
  .reading-progress{height:3px}.recruit-ribbon{padding:17px 10px;gap:12px}.recruit-ribbon b{font-size:15px;padding:6px 8px}
  .service-number{width:34px;height:42px;font-size:21px;box-shadow:2px 3px 0 var(--ink)}
  .people-grid article>span{font-size:24px;padding:8px 9px}.people-grid h3{font-size:20px}
  .team-section::before{width:125px;height:125px;top:25px;right:-25px}.team-section{background:var(--paper)}
  .image-first .manga-sheet{box-shadow:4px 5px 0 var(--shadow),6px 7px 0 var(--ink),11px 13px 0 var(--yellow),14px 16px 0 var(--ink)}
  .environment-list article{padding:23px 20px;margin-bottom:23px}.environment-list h3{font-size:23px}
  .job-index{font-size:15px;box-shadow:2px 3px 0 var(--ink)}.job-apply{width:100%;font-size:11px;gap:10px}
  .entry-section::before{width:130px;height:130px;right:-60px;top:-70px}.entry-section h2{font-size:34px}
  .contact-section{padding:70px 0 80px}.contact-layout{display:block}.contact-intro h2{font-size:30px}.contact-intro>p:not(.section-kicker){font-size:13px}
  .contact-letter{display:none}.form-paper{margin-top:52px;padding:35px 18px 23px;box-shadow:4px 5px 0 var(--shadow),6px 7px 0 var(--ink),11px 13px 0 var(--yellow),13px 15px 0 var(--ink)}
  .form-paper-tab{left:16px;font-size:14px}.form-demo-note{font-size:11px;padding:10px 11px}.form-field label{font-size:13px}.form-field{margin-bottom:22px}
  .form-confirm{font-size:13px;padding:15px 12px}.form-field input,.form-field select,.form-field textarea{padding-inline:10px}
  #contact-review{width:calc(100% - 30px);max-height:calc(100dvh - 48px);box-shadow:5px 6px 0 var(--yellow)}.dialog-content h2{font-size:21px}
  .review-actions .action-button{font-size:13px}.form-complete h3{font-size:22px}
}
.motion-paused .has-entered em,.motion-paused .job-body,.motion-paused #contact-review{animation:none!important}
.motion-paused :is(.service-list article,.people-grid article,.environment-list article,.job){translate:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.recruit-section h2.has-entered em{animation:none!important}.service-list article,.people-grid article,.environment-list article,.job{translate:none!important}}

/* 元の4色に、行動の入口を示すコーラルを1色だけ添える。 */
.hero-actions>.action-button,.entry-section .action-button,.form-confirm{background:var(--accent)}
.section-kicker>span{background:var(--accent)}

/* ヘッダーからオープニングを見返す入口。 */
.masthead .brand{flex-shrink:0}
.masthead .brand-word{white-space:nowrap}
.nav-opening{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 13px;border:2px solid var(--ink);background:var(--yellow);box-shadow:3px 3px 0 var(--ink);font-size:12px;font-weight:800;white-space:nowrap;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.nav-opening[hidden]{display:none}
.nav-opening>span{color:var(--blue);font-size:11px}
.nav-opening:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.nav-opening:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
@media(max-width:1100px) and (min-width:761px){.nav-opening{font-size:10px;padding:9px;gap:5px}.recruit-nav{gap:11px}}
@media(max-width:760px){.masthead{gap:10px}.masthead .brand{gap:9px}.masthead .brand-description{font-size:7px}.recruit-nav{gap:8px}.nav-opening{font-size:10px;padding:9px;gap:5px}}
@media(max-width:380px){.masthead{padding-inline:16px}.masthead .brand-description{display:none}}
@media(prefers-reduced-motion:reduce){.nav-opening{transition:none}}

/* 映像を中央で見せ、最後の紙面に寄り、左の余白へ採用メッセージを入れる。 */
body.opening-active{overflow:hidden}
.opening-active .guide-world{visibility:hidden}
.opening-active .hero *{animation-play-state:paused!important}
#opening{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;color:var(--ink);background:var(--paper);opacity:1;transition:opacity .65s ease}
#opening::backdrop{background:var(--paper);transition:opacity .65s ease}
#opening[open]{display:grid;place-items:center}
#opening.is-leaving,#opening.is-leaving::backdrop{opacity:0;pointer-events:none}
.opening-brand{position:absolute;top:32px;left:40px;z-index:4;display:flex;align-items:center;gap:15px;pointer-events:none}
.opening-brand>span{font:46px/1 Dela,sans-serif;letter-spacing:-.08em}
.opening-brand i{font-style:normal;color:var(--blue)}
.opening-brand small{font-size:8px;font-weight:800;letter-spacing:.1em;line-height:1.7}
.opening-stage{position:relative;width:min(75dvh,100vw);aspect-ratio:3/4;flex:none;transition:transform 1.15s var(--ease);transform-origin:50% 25%;isolation:isolate;container-type:inline-size}
#opening-video{display:block;width:100%;height:100%;object-fit:contain;background:var(--paper)}
/* 動画中の空の吹き出しへ、映像の寸法に比例する文字を重ねる。 */
.opening-dialogue{position:absolute;left:77.4%;top:18.8%;width:20.5%;z-index:3;margin:0;pointer-events:none;opacity:0;transform:translate(-50%,-50%);text-align:center;white-space:nowrap;font:400 3.25cqw/1.35 Yusei,sans-serif;color:var(--ink)}
.opening-controls{position:absolute;top:32px;right:32px;z-index:5;display:flex;gap:12px;align-items:center}
.opening-controls button{min-height:44px;border:2px solid var(--ink);background:var(--paper);padding:10px 14px;font-size:12px;font-weight:700;box-shadow:3px 3px 0 var(--ink)}
.opening-controls #opening-sound{box-shadow:none;border:1px solid var(--rule);font-size:11px}
.opening-controls button:hover{background:var(--yellow)}
.opening-controls button:active{transform:translate(2px,2px);box-shadow:none}
.opening-controls button:focus-visible{outline-color:var(--blue);outline-offset:5px}
.opening-footer{position:absolute;bottom:24px;left:40px;right:40px;display:flex;justify-content:space-between;z-index:3;pointer-events:none;font:700 10px/1.3 monospace;letter-spacing:.1em}
.opening-footer>span{padding:6px 8px;background:var(--paper)}
.opening-progress{position:absolute;bottom:0;left:0;right:0;height:5px;background:var(--rule);z-index:5}
.opening-progress>span{display:block;width:100%;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:left}
.opening-title-block{position:absolute;z-index:2;top:28%;left:6%;width:52%;visibility:hidden;pointer-events:none}
.opening-title-block>*{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s var(--ease)}
.opening-title-block .opening-eyebrow{font:700 9px/1.4 monospace;letter-spacing:.06em;margin-bottom:14px}
.opening-title-block h2{font:400 clamp(24px,5.4dvh,64px)/1.3 Dela,sans-serif;letter-spacing:-.06em;white-space:nowrap}
.opening-title-block h2>span:first-child{display:block;color:var(--blue)}
.opening-title-block .opening-question{color:var(--blue)}
.opening-title-block .opening-lead{font-size:12px;line-height:1.9;margin-top:18px;letter-spacing:0}
#opening-positions{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;margin-top:22px;padding:12px 16px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:var(--accent);font-size:12px;font-weight:800}
#opening-positions:hover{background:var(--yellow)}
#opening.is-final .opening-title-block{visibility:visible;pointer-events:auto}
#opening.is-final .opening-title-block>*{opacity:1;transform:none}
#opening.is-final .opening-lead{transition-delay:.2s}
#opening.is-final #opening-positions{transition-delay:.38s}
#opening-start{position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;padding:18px 24px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:var(--yellow);font-weight:800;font-size:14px}
#opening-start[hidden]{display:none}
@media(min-width:761px){
  #opening.is-final .opening-stage{transform:scale(var(--opening-zoom,1))}
  .opening-title-block{top:30%;left:6%;width:53%}
  .opening-title-block h2{font-size:clamp(28px,5.1dvh,58px);line-height:1.3}
  .opening-title-block .opening-eyebrow{font-size:9px;margin-bottom:14px}
  .opening-title-block .opening-lead{font-size:12px;line-height:1.9;margin-top:18px}
  #opening-positions{font-size:12px;padding:12px 16px;margin-top:22px}
}
@media(min-width:761px) and (max-aspect-ratio:6/5){
  .opening-stage{width:min(65dvh,72vw)}
  #opening.is-final .opening-stage{transform:none}
  .opening-title-block{left:6%;top:30%;width:53%}
  .opening-title-block h2{font-size:4.5vw}
  .opening-title-block .opening-lead{font-size:12px}
  #opening-positions{font-size:12px;padding:12px}
}
@media(max-width:760px){
  .opening-brand{top:22px;left:20px;gap:10px}.opening-brand>span{font-size:36px}.opening-brand small{font-size:7px}
  .opening-stage{width:min(100vw,calc((100dvh - 136px)*.75))}
  .opening-controls{top:auto;bottom:32px;left:18px;right:18px;justify-content:space-between;gap:8px}
  .opening-controls button{font-size:11px;padding:10px 11px}.opening-controls #opening-sound{font-size:10px}
  .opening-footer{left:auto;right:18px;top:33px;bottom:auto}.opening-footer>span:first-child{display:none}
  .opening-title-block{top:29%;left:6%;width:54%}
  .opening-title-block h2{font-size:clamp(26px,7.5vw,49px);line-height:1.35}
  .opening-title-block .opening-eyebrow{font-size:7px;margin-bottom:12px}
  .opening-title-block .opening-lead{font-size:11px;line-height:1.8;margin-top:13px;text-wrap:pretty}
  #opening-positions{font-size:11px;padding:10px 11px;margin-top:16px;gap:10px;box-shadow:3px 3px 0 var(--ink)}
  #opening-start{font-size:12px;padding:15px 16px}
  .motion-controls #replay{font-size:9px;padding:8px}
  .motion-controls #replay>span{font-size:14px;margin-right:3px}
}
@media(max-height:520px){
  .opening-brand{top:14px;left:20px}.opening-controls{top:14px;bottom:auto;left:auto;right:20px}.opening-footer{bottom:14px}
  .opening-stage{width:min(75dvh,100vw)}.opening-title-block{top:24%}.opening-title-block h2{font-size:9dvh}
  .opening-title-block .opening-eyebrow{margin-bottom:8px}.opening-title-block .opening-lead{margin-top:10px;font-size:11px}
  #opening-positions{margin-top:12px;font-size:11px;padding:8px 12px}
}
@media(prefers-reduced-motion:reduce){#opening,#opening::backdrop,.opening-stage,.opening-title-block>*{transition:none!important}}