:root{--ink:#171716;--paper:#faf5e8;--yellow:#ffdc45;--red:#ff5638;--blue:#a3d9f8;--rule:3px solid var(--ink)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background-color:var(--paper);color:var(--ink);font:700 16px/1.7 "Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
body,.chapter,.tape,footer{
  --grid-line:#17171612;
  background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:32px 32px;
  background-position:center top;
}
.tape,footer{--grid-line:#ffffff14}
@media(max-width:670px){
  body,.chapter,.tape,footer{background-size:24px 24px}
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button,summary,input[type=range]{cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #1857b5;outline-offset:4px}
h1,h2,h3,p{margin:0}
.wrap{width:min(1240px,calc(100% - 96px));margin:auto}
.readline{position:fixed;top:0;left:0;z-index:10;width:100%;height:5px;background:var(--red);transform:scaleX(0);transform-origin:left;pointer-events:none}
.header{border-bottom:var(--rule)}
.nav{min-height:76px;display:flex;align-items:center;gap:32px}
.logo{display:inline-flex;align-items:center;gap:8px;font:1000 italic 26px/1 Arial,sans-serif;letter-spacing:-1.5px}
.logo b{display:grid;place-items:center;width:34px;height:35px;border:2px solid var(--ink);background:var(--yellow);color:var(--ink);font-size:30px;transform:skew(-9deg)}
.logo small{display:block;font:800 9px/1.3 sans-serif;letter-spacing:.14em;margin-top:3px}
.brand-accent{color:#ba2510}
nav{display:flex;gap:28px;margin-left:auto;font-size:13px}
nav a:hover{text-decoration:underline}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:1.3rem;border:var(--rule);background:var(--yellow);padding:.65rem 1rem;box-shadow:4px 4px 0 var(--ink);font-weight:900;text-align:left;transition:transform .18s,box-shadow .18s}
.button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.button.small{font-size:13px;background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--red)}
.button.big{padding:.85rem 1.15rem;font-size:clamp(16px,2vw,20px)}
.button.big span{font-size:1.4em;line-height:1}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;padding-block:clamp(45px,6vw,96px) clamp(44px,5vw,78px)}
.eyebrow{font-size:clamp(10px,1.4vw,13px);font-weight:900;letter-spacing:.12em;display:flex;align-items:center;gap:.8em;margin-bottom:20px}
.eyebrow span{background:var(--ink);color:var(--paper);padding:.18em .55em;white-space:nowrap;font-family:monospace;letter-spacing:.08em}
h1,h2{font-weight:1000;letter-spacing:-.075em;line-height:1.15}
h1{font-size:clamp(42px,6.25vw,94px)}
h2{font-size:clamp(37px,5.35vw,76px)}
em{font-style:normal;color:#c22d16;background:linear-gradient(transparent 74%,var(--yellow) 74%);padding-right:.075em}
.hero-copy{position:relative;z-index:2}
.hero-copy h1{animation:arrive .66s cubic-bezier(.2,.85,.25,1.22) both}
.hero-sub{font-weight:950;font-size:clamp(17px,2.15vw,30px);letter-spacing:-.05em;margin:18px 0 12px}
.intro{max-width:34em;font-size:clamp(14px,1.35vw,17px);margin-bottom:26px}
.hero-note{font-size:12px;margin-top:13px}
.hero-art{position:relative;aspect-ratio:1.12;isolation:isolate;margin:0 11px;perspective:900px}
.art-frame,.art-dots,.hero-cast{position:absolute;inset:0}
.art-frame{background:#fff1ac;border:4px solid;box-shadow:9px 9px 0 var(--ink);transform:skew(-4deg) rotate(-2deg)}
.art-dots{background:radial-gradient(var(--ink) 1px,transparent 1.5px) 0 0/7px 7px;opacity:.12;mask-image:linear-gradient(150deg,black,transparent 65%)}
.hero-cast{transform:translate(var(--dx,0px),var(--dy,0px));transition:transform .28s ease-out;mix-blend-mode:multiply}
.hero-cast img{position:absolute;object-fit:contain;mix-blend-mode:multiply;filter:contrast(1.07);max-width:none}
.hero-cast img:nth-child(1){width:47%;left:-3%;bottom:12%;transform:rotate(-10deg)}
.hero-cast img:nth-child(2){width:111%;left:-7%;bottom:0;transform:rotate(-5deg)}
.hero-cast img:nth-child(3){width:42%;right:-2%;bottom:8%;transform:rotate(8deg)}
.speech{position:absolute;top:3%;right:6%;transform:rotate(7deg);border:3px solid;border-radius:50%;background:var(--paper);padding:.6em 1.15em;text-align:center;font-size:clamp(14px,2vw,28px);line-height:1.2;font-weight:950;box-shadow:4px 4px 0 var(--ink)}
.effect{position:absolute;left:-4%;top:10%;color:var(--red);font:1000 italic clamp(32px,5vw,76px)/1 Arial,sans-serif;-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px var(--ink);transform:rotate(-12deg);animation:arrive .7s .12s backwards}
.art-label{position:absolute;bottom:0;left:6%;right:1%;background:var(--ink);color:var(--paper);padding:5px 9px;display:flex;justify-content:space-between;font:700 clamp(8px,1.1vw,13px)/1.4 monospace;letter-spacing:.1em;transform:rotate(-2deg)}
@keyframes arrive{from{opacity:0;translate:0 20px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
.tape{background-color:var(--ink);color:var(--paper);border-bottom:4px solid var(--ink)}
.tape .wrap{display:flex;align-items:center;gap:22px;min-height:48px;padding:8px 0;font-size:13px}
.tape b{color:var(--yellow);font:900 italic 17px Arial,sans-serif;white-space:nowrap}
.chapter{border-bottom:var(--rule);padding:clamp(50px,7.5vw,112px) 0}
.comic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.comic{position:relative;display:grid;grid-template-rows:185px auto;min-width:0;border:var(--rule);background:#ffeb91;box-shadow:6px 6px 0 var(--ink);overflow:hidden;transition:transform .2s}
.comic:nth-child(2){background:#c6e9fb}
.comic:nth-child(3){background:#ffc6b7}
.comic:hover{transform:rotate(-2deg) translateY(-5px)}
.comic-num{position:absolute;z-index:1;top:10px;left:10px;background:var(--ink);color:var(--paper);padding:.1rem .5rem;font:900 italic 26px Arial,sans-serif}
.comic img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.comic div{padding:15px 18px 19px;border-top:var(--rule);background:var(--paper)}
.comic h3{font-size:clamp(18px,2.05vw,28px);font-weight:950;line-height:1.25;margin-bottom:8px}
.comic p{font-size:14px}
.format{background-color:var(--blue)}
.format-grid,.launch-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(25px,7vw,96px);align-items:center}
.format h2+p,.launch h2+p{margin-top:18px;margin-bottom:25px}
.count-label,.range-ends,.paper-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.count-label{font-weight:950}
.count-label output{background:var(--yellow);border:2px solid;padding:0 .5em;font:900 italic 29px/1.3 Arial,sans-serif}
input[type=range]{width:100%;accent-color:var(--ink);margin:16px 0}
.range-ends{font-size:12px}
.paper{background:var(--paper);border:var(--rule);box-shadow:7px 7px 0 var(--ink);transform:rotate(1deg);min-height:280px}
.paper-top{background:var(--ink);color:var(--paper);padding:12px 16px}
.paper-top span{font:900 12px monospace;color:var(--yellow);white-space:nowrap}
.paper ol{margin:0;padding:12px;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;counter-reset:panel}
.paper li{counter-increment:panel;background:#fffdf5;border:2px solid;padding:6px 7px;font-size:13px;animation:arrive .22s both}
.paper li::before{content:counter(panel,decimal-leading-zero) " / ";font:900 12px monospace;color:#a8311f}
.paper li:first-child,.paper li:last-child{background:var(--yellow)}
.launch{background-color:#ffe982}
.launch-art{aspect-ratio:1.3;border:var(--rule);background:#fff}
.launch-art img{display:block;width:100%;height:100%;object-fit:contain}
footer{background-color:var(--ink);color:var(--paper);padding:24px 0}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
footer span{font-size:11px}
.reveal.in-view{animation:arrive .58s cubic-bezier(.2,.8,.2,1) both}
dialog{width:min(620px,calc(100% - 28px));max-height:calc(100dvh - 34px);padding:0;border:var(--rule);background:var(--paper);color:var(--ink);box-shadow:7px 7px 0 var(--ink)}
dialog::backdrop{background:#171716bb}
.dialog-top{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:var(--yellow);padding:5px 16px;font:900 14px monospace}
.close{width:42px;height:38px;background:none;border:0;color:var(--paper);font-size:25px}
.dialog-content{padding:clamp(16px,4vw,34px)}
.dialog-content h2{font-size:clamp(22px,5vw,34px);letter-spacing:-.045em;margin-bottom:20px}
#brief label{display:grid;gap:4px;margin-bottom:13px;font-size:14px}
#brief input,#brief select{width:100%;min-height:42px;background:white;border:2px solid;padding:7px 9px;font-size:16px}
details{border:2px solid;padding:9px 11px;margin-bottom:16px}
#extras{padding-top:12px}
#result-list{padding-left:1.4rem}
#result-list li{padding:6px 0;border-bottom:1px dashed}
#result p,#result dd{overflow-wrap:anywhere}
#result dd{margin:0 0 10px}
.result-actions{display:flex;gap:12px;flex-wrap:wrap}
.secondary{background:var(--paper)}
@media(max-width:900px){
.wrap{width:calc(100% - 56px)}
.hero{gap:12px}
.comic-grid{gap:12px}
.comic{grid-template-rows:145px auto}
}
@media(max-width:670px){
.wrap{width:calc(100% - 36px)}
.nav{min-height:61px;justify-content:space-between;gap:10px}
nav{display:none}
.logo{font-size:20px;letter-spacing:-1px}
.logo b{width:27px;height:29px;font-size:24px}
.logo small{font-size:8px}
.button.small{font-size:11px;padding:.42rem .5rem;gap:.35rem;white-space:nowrap}
.hero,.format-grid,.launch-grid{grid-template-columns:1fr}
.hero{gap:28px;padding-top:35px}
.hero-art{margin:0 10px 0 16px}
.hero-note{font-size:11px}
.tape .wrap{gap:9px;flex-wrap:wrap;padding-block:9px;font-size:11px;line-height:1.5}
.tape b{font-size:12px}
.comic-grid{grid-template-columns:1fr;gap:12px;margin-top:25px}
.comic{grid-template-columns:108px 1fr;grid-template-rows:minmax(108px,auto)}
.comic div{border-top:0;border-left:var(--rule);padding:13px}
.comic-num{top:3px;left:3px;font-size:15px}
.comic img{padding:9px 3px 3px}
.comic p{font-size:13px}
.launch-art{grid-row:2;width:85%;justify-self:center}
footer .wrap{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.hero-cast{transform:none}}
.hero-cast{clip-path:polygon(4% 5%,96% 2%,93% 95%,2% 97%)}
.paper ol{perspective:550px}
.paper li{transform-origin:top center;animation:turn-panel .36s cubic-bezier(.2,.8,.25,1) both;animation-delay:calc(var(--order,0) * 22ms)}
@keyframes turn-panel{from{opacity:0;transform:rotateX(-65deg) translateY(-5px)}to{opacity:1;transform:rotateX(0)}}

.format h2 em{white-space:nowrap}

.voice{background-color:#ffab93}
.voice-card{display:grid;grid-template-columns:minmax(190px,1fr) minmax(0,2fr);margin:30px 0 0;border:var(--rule);box-shadow:7px 7px 0 var(--ink);background:var(--paper)}
.voice-art{display:grid;place-items:center;min-height:230px;border-right:var(--rule);background:#fff}
.voice-art img{width:100%;max-width:290px;object-fit:contain;padding:12px}
.voice-content{padding:clamp(16px,4vw,44px)}
.voice-badge{display:inline-block;background:var(--yellow);border:2px solid;padding:.15em .6em;font-size:12px}
.voice-content blockquote{margin:12px 0}
.voice-quote{font-weight:950;font-size:clamp(22px,3.3vw,42px);line-height:1.24;letter-spacing:-.045em;margin-bottom:14px}
.voice-content figcaption{font-size:13px;color:#51443a}
@media(max-width:670px){
  .voice-card{grid-template-columns:1fr}
  .voice-art{min-height:0;height:155px;border-right:0;border-bottom:var(--rule)}
  .voice-art img{width:auto;height:100%;max-height:155px}
  .voice-content blockquote p+p{font-size:14px}
}

.lp-basics{padding-block:clamp(30px,5vw,58px);border-bottom:var(--rule)}
.lp-basics h2{font-size:clamp(27px,4vw,46px);letter-spacing:-.045em}
.lp-basics-intro{margin-top:12px;max-width:65em}
.lp-basics-intro strong{background:linear-gradient(transparent 72%,#ffe994 72%)}
.lp-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:19px 0 0;border:2px solid var(--ink);background:#fffdf5}
.lp-comparison div{padding:12px 16px}
.lp-comparison div+div{border-left:2px solid var(--ink)}
.lp-comparison dt{font-weight:950}
.lp-comparison dd{margin:4px 0 0;font-size:14px}
@media(max-width:670px){
  .lp-comparison{grid-template-columns:1fr}
  .lp-comparison div+div{border-left:0;border-top:2px solid var(--ink)}
}