:root{
  --bg:#fff8ec; --ink:#1d1b3a; --mute:#4b4870;
  --yellow:#ffd23f; --coral:#ff5d73; --sky:#3bc9ff; --mint:#2ee6a6; --grape:#8b5cf6;
  --card:#ffffff; --line:#1d1b3a; --radius:22px; --pop:6px 6px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  background-color:var(--bg);
  background-image:radial-gradient(rgba(29,27,58,.10) 1.6px,transparent 1.6px);
  background-size:22px 22px;
  color:var(--ink);line-height:1.8;overflow-x:hidden;
}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* nav */
nav.top{position:fixed;top:12px;left:50%;translate:-50% 0;z-index:50;display:flex;gap:6px;
  padding:6px;background:#fff;border:3px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 var(--ink)}
nav.top a{text-decoration:none;font-size:14px;font-weight:700;padding:7px 16px;border-radius:999px;transition:.2s}
nav.top a:hover{background:var(--yellow)}
nav.top a[aria-current="page"]{background:var(--coral);color:#fff}

/* hero */
.hero{min-height:100vh;display:grid;align-items:center;padding:110px 20px 70px;perspective:1200px;position:relative;overflow:hidden}
.hero-grid{max-width:1100px;margin:0 auto;width:100%;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.stage{position:relative;transform-style:preserve-3d;transition:transform .15s ease-out}
.hero h1{font-size:clamp(40px,7vw,84px);line-height:1.15;font-weight:900;letter-spacing:.02em;color:#fff;
  -webkit-text-stroke:3px var(--ink);paint-order:stroke fill;
  text-shadow:1px 1px 0 var(--ink),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(--coral),8px 8px 0 var(--coral),9px 9px 0 var(--coral),10px 10px 0 var(--coral);
  transform:translateZ(60px)}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero p.lead{margin-top:22px;font-size:clamp(15px,2vw,19px);font-weight:700;color:var(--mute);transform:translateZ(30px)}
.hero .tag{display:inline-block;font-size:13px;font-weight:800;padding:6px 16px;border:3px solid var(--ink);border-radius:999px;background:var(--mint);box-shadow:3px 3px 0 var(--ink);margin-bottom:24px;transform:translateZ(40px) rotate(-3deg)}
.pics{position:relative;height:440px;transform-style:preserve-3d;transition:transform .15s ease-out}
.pics .photo{position:absolute}
.pics .p1{width:88%;left:0;top:30px;transform:rotate(-5deg) translateZ(20px)}
.pics .p2{width:46%;right:0;top:170px;transform:rotate(6deg) translateZ(90px)}
.pics .p3{width:40%;left:6%;bottom:0;transform:rotate(4deg) translateZ(60px)}
/* floating shapes */
.orb{position:absolute;pointer-events:none;border:3px solid var(--ink);box-shadow:var(--pop);z-index:1}
.orb.a{width:90px;height:90px;border-radius:50%;background:var(--yellow);left:4%;top:16%;animation:float 6s ease-in-out infinite}
.orb.b{width:70px;height:70px;border-radius:18px;background:var(--sky);right:6%;top:12%;animation:spin 9s linear infinite}
.orb.c{width:0;height:0;border:0;box-shadow:none;left:48%;bottom:8%;border-left:34px solid transparent;border-right:34px solid transparent;border-bottom:58px solid var(--mint);filter:drop-shadow(5px 5px 0 var(--ink));animation:float 7s ease-in-out infinite reverse}
@keyframes float{50%{transform:translateY(-18px) rotate(8deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.scroll-hint{position:absolute;bottom:20px;left:50%;translate:-50% 0;font-size:12px;font-weight:800;letter-spacing:.3em;animation:bob 2s infinite}
@keyframes bob{50%{transform:translateY(8px)}}

/* photo frame */
.photo{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:8px;box-shadow:8px 8px 0 var(--ink);transition:transform .3s}
.photo img{border-radius:11px;width:100%;height:100%;object-fit:cover}
.photo figcaption{font-size:12px;font-weight:800;padding:6px 4px 0;text-align:center}

/* sections */
section{padding:80px 0;perspective:1400px;position:relative}
section.band{background:var(--yellow);border-block:3px solid var(--ink)}
section.band.sky{background:#bdeeff}
section.band.mint{background:#c9f8e6}
section.band.pink{background:#ffd6dc}
h2{font-size:clamp(28px,4.6vw,46px);line-height:1.3;margin-bottom:14px;font-weight:900}
h2 small{display:inline-block;font-size:12px;letter-spacing:.25em;background:var(--ink);color:#fff;padding:3px 12px;border-radius:999px;margin-bottom:10px;font-weight:800}
h3{font-weight:900}
.sub{color:var(--mute);font-weight:600;max-width:760px;margin-bottom:34px}
.reveal{opacity:0;transform:translateY(50px) rotateX(20deg) scale(.96);transform-origin:50% 100%;transition:opacity .7s,transform .8s cubic-bezier(.3,1.4,.5,1)}
.reveal.in{opacity:1;transform:none}
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.two{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:var(--card);border:3px solid var(--ink);border-radius:var(--radius);padding:24px;box-shadow:var(--pop);
  transform-style:preserve-3d;transition:transform .2s ease-out,box-shadow .2s;position:relative}
.card:hover{box-shadow:10px 10px 0 var(--ink)}
.card>*{transform:translateZ(24px)}
.card h3{font-size:19px;margin-bottom:6px}
.card p,.card li{color:var(--mute);font-size:14.5px}
.card ul{padding-left:18px}
.grid>.card:nth-child(4n+1){border-top:12px solid var(--coral)}
.grid>.card:nth-child(4n+2){border-top:12px solid var(--sky)}
.grid>.card:nth-child(4n+3){border-top:12px solid var(--mint)}
.grid>.card:nth-child(4n+4){border-top:12px solid var(--grape)}
.card .photo{margin:-6px -6px 16px;box-shadow:4px 4px 0 var(--ink);padding:5px}
.card .photo img{aspect-ratio:16/10}
.big{font-size:clamp(30px,5vw,48px);font-weight:900;line-height:1.1;color:var(--coral);-webkit-text-stroke:1.5px var(--ink);text-shadow:3px 3px 0 var(--ink)}
.badge{display:inline-block;font-size:12px;font-weight:800;padding:3px 12px;border-radius:999px;border:2px solid var(--ink);background:#fff;margin-bottom:10px}
.badge.hot{background:var(--coral);color:#fff}

/* flip */
.flip{perspective:900px;height:190px;cursor:pointer}
.flip .in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.flip:hover .in,.flip:focus-visible .in,.flip.on .in{transform:rotateY(180deg)}
.flip .f,.flip .b{position:absolute;inset:0;border-radius:var(--radius);padding:22px;backface-visibility:hidden;border:3px solid var(--ink);box-shadow:var(--pop);display:flex;flex-direction:column;justify-content:center}
.flip .f{background:#fff}
.flip .f s{font-size:20px;font-weight:900;color:var(--mute);text-decoration-color:var(--coral);text-decoration-thickness:4px}
.flip .f::after{content:"タップしてめくる ↻";font-size:11px;font-weight:800;color:var(--coral);margin-top:10px}
.flip .b{transform:rotateY(180deg);background:var(--sky)}
.flip:nth-child(even) .b{background:var(--mint)}
.flip .b b{font-size:12px;letter-spacing:.15em}
.flip .b span{font-size:19px;font-weight:900}

/* slabs */
.slabs{display:grid;gap:18px;transform:rotateX(12deg) rotateZ(-2deg);transform-style:preserve-3d;margin:30px 0}
.slab{padding:22px 26px;border-radius:18px;border:3px solid var(--ink);box-shadow:8px 10px 0 var(--ink);transition:transform .3s}
.slab:hover{transform:translateZ(40px) translateX(10px) rotate(-1deg)}
.slab b{display:block;font-size:13px;letter-spacing:.15em}
.slab span{font-size:20px;font-weight:900}
.slab p{font-size:14px;font-weight:600}
.s1{background:var(--yellow)} .s2{background:var(--sky)} .s3{background:var(--coral);color:#fff}

/* steps */
.steps{display:flex;gap:22px;overflow-x:auto;padding:24px 8px 36px;scroll-snap-type:x mandatory;perspective:1000px}
.step{flex:0 0 270px;scroll-snap-align:center;transform:rotateY(-12deg);transition:.35s}
.step:nth-child(even){transform:rotateY(12deg)}
.step:hover{transform:rotateY(0) translateY(-10px)}
.step .n{font-size:46px;font-weight:900;line-height:1;color:var(--yellow);-webkit-text-stroke:2px var(--ink);text-shadow:3px 3px 0 var(--ink)}

/* split (text + photo) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split .photo{transform:rotate(2deg)}
.split .photo:hover{transform:rotate(0) scale(1.03)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.duo .photo:first-child{transform:rotate(-3deg)}
.duo .photo:last-child{transform:rotate(3deg) translateY(24px)}

/* 3D bars */
.chart{display:flex;justify-content:space-around;align-items:flex-end;height:320px;padding:20px 10px 0;transform:rotateX(18deg) rotateY(-22deg);transform-style:preserve-3d;margin:50px 0 30px;border-bottom:3px solid var(--ink)}
.col{display:flex;gap:12px;align-items:flex-end;height:100%;transform-style:preserve-3d;position:relative}
.bar{--h:0;--c:var(--sky);position:relative;width:34px;height:0;transform-style:preserve-3d;transition:height 1.3s cubic-bezier(.3,1.3,.5,1)}
.chart.in .bar{height:calc(var(--h)*1%)}
.bar i{position:absolute;display:block;border:2px solid var(--ink)}
.bar .fr{inset:0;background:var(--c)}
.bar .rt{top:0;bottom:0;right:-14px;width:14px;background:color-mix(in srgb,var(--c) 60%,#000);transform:skewY(-45deg);transform-origin:left bottom}
.bar .tp{top:-14px;left:0;width:100%;height:14px;background:color-mix(in srgb,var(--c) 60%,#fff);transform:skewX(-45deg);transform-origin:left bottom}
.bar.cost{--c:var(--coral)}
.lbl{position:absolute;bottom:-34px;left:0;right:0;text-align:center;font-size:12px;font-weight:800}
.legend{display:flex;gap:18px;justify-content:center;font-size:13px;font-weight:700;margin-bottom:10px}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;border:2px solid var(--ink);margin-right:6px;vertical-align:-2px}

/* table */
.tbl{overflow-x:auto;border:3px solid var(--ink);border-radius:var(--radius);background:#fff;box-shadow:var(--pop)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
th,td{padding:10px 14px;text-align:left;border-bottom:2px solid rgba(29,27,58,.12)}
tr:first-child th{background:var(--ink);color:#fff;font-size:12px;letter-spacing:.08em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.neg th.num{color:#d6203f}

/* misc */
.callout{border:3px solid var(--ink);padding:18px 22px;background:#fff;border-radius:var(--radius);margin:28px 0;box-shadow:var(--pop);font-weight:600;color:var(--mute);position:relative}
.callout::before{content:"!";position:absolute;top:-18px;left:18px;width:34px;height:34px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);display:grid;place-items:center;font-weight:900;color:var(--ink)}
.callout b{color:var(--ink)}
.cta-photo{max-width:1100px;margin:0 auto 34px;padding:0 20px}
.cta-photo .photo{transform:rotate(-1.5deg)}
.cta-photo .photo img{aspect-ratio:587/105}
footer{padding:60px 0 70px;text-align:center;font-weight:700;font-size:13px;background:var(--sky);border-top:3px solid var(--ink)}
.next{display:inline-block;margin-top:18px;padding:14px 30px;border-radius:999px;text-decoration:none;background:var(--coral);color:#fff;font-weight:900;font-size:16px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.next:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.next:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink)}

@media(max-width:820px){
  .hero-grid,.split{grid-template-columns:1fr}
  .pics{height:340px;max-width:460px;margin:0 auto;width:100%}
  .hero{padding-top:90px}
}
@media(max-width:640px){
  nav.top{top:8px;width:calc(100% - 24px);justify-content:center}
  nav.top a{padding:6px 10px;font-size:12px}
  .hero h1{-webkit-text-stroke:2px var(--ink)}
  .chart{transform:rotateX(10deg) rotateY(-12deg);height:260px}
  .bar{width:18px} .col{gap:6px} .slabs{transform:rotateX(6deg)}
  .orb.a{width:56px;height:56px} .orb.b{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}.bar{height:calc(var(--h)*1%)}
}

/* layout fixes */
h2 small{display:table}
.duo{max-width:620px;margin-left:auto;margin-right:auto}
@media(min-width:900px){
  .grid:has(> :nth-child(5):last-child){grid-template-columns:repeat(5,1fr)}
  .grid:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
  .grid:has(> :nth-child(7):last-child){grid-template-columns:repeat(3,1fr)}
}
.hero .orb{z-index:0}
.hero-grid{position:relative;z-index:1}
.hero h1{font-size:clamp(38px,6vw,76px)}
.orb.a{left:2%;top:9%}

/* ===== page-specific heroes ===== */
.hero{isolation:isolate}
.hero .pgno{position:absolute;right:3%;bottom:4%;font-size:clamp(90px,16vw,220px);font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:3px var(--ink);opacity:.18;z-index:0;pointer-events:none}
.hero .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;transform:translateZ(40px)}
.chip{display:inline-block;font-size:13px;font-weight:800;padding:6px 14px;border:3px solid var(--ink);border-radius:999px;background:#fff;box-shadow:3px 3px 0 var(--ink)}
@keyframes heroIn{from{opacity:0;transform:translateY(60px) rotateX(-25deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.4) rotate(-20deg)}70%{transform:scale(1.08)}100%{opacity:1}}
.hero .stage,.hero .pics,.hero .board,.hero .tickets,.hero .iso{animation:heroIn 1s cubic-bezier(.3,1.3,.5,1) backwards}
.hero .pics,.hero .tickets,.hero .iso{animation-delay:.15s}

/* 01 school : yellow, panoramic billboard */
.hero-school{background:var(--yellow);border-bottom:3px solid var(--ink)}
.hero-school .hero-grid{grid-template-columns:1fr;text-align:center;gap:26px}
.hero-school .stage{max-width:900px;margin:0 auto}
.hero-school .chips{justify-content:center}
.hero-school h1 em{color:var(--coral)}
.hero-school .lead{color:var(--ink)!important}
.board{position:relative;max-width:1000px;margin:0 auto;width:100%;perspective:1200px}
.board>.photo.main{transform:rotateX(14deg) rotate(-1.5deg);transform-origin:50% 0}
.board>.photo.main img{aspect-ratio:1376/454}
.board .pop{position:absolute;width:21%;animation:popIn .7s cubic-bezier(.3,1.4,.5,1) backwards}
.board .pop.l{left:-3%;top:-18%;transform:rotate(-8deg);animation-delay:.5s}
.board .pop.r{right:-2%;top:-24%;transform:rotate(7deg);animation-delay:.65s}
.board .pop.b{right:12%;bottom:-16%;width:17%;transform:rotate(-5deg);animation-delay:.8s}
.board .pop img{aspect-ratio:1/1}

/* 02 investor : sky blueprint, floating isometric building */
.hero-investor{background-color:#bdeeff;background-image:linear-gradient(rgba(29,27,58,.08) 2px,transparent 2px),linear-gradient(90deg,rgba(29,27,58,.08) 2px,transparent 2px);background-size:44px 44px;border-bottom:3px solid var(--ink)}
.hero-investor h1 em{color:var(--sky)}
.hero-investor h1{text-shadow:1px 1px 0 var(--ink),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(--grape),8px 8px 0 var(--grape),9px 9px 0 var(--grape),10px 10px 0 var(--grape)}
.iso{position:relative;transform-style:preserve-3d}
.iso .photo{transform:rotate(-3deg);animation:bobIso 6s ease-in-out infinite}
@keyframes bobIso{50%{transform:rotate(-3deg) translateY(-14px)}}
.iso .kpi{position:absolute;background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink);padding:8px 14px;font-weight:900;line-height:1.2;animation:popIn .7s cubic-bezier(.3,1.4,.5,1) backwards}
.iso .kpi small{display:block;font-size:11px;font-weight:800;color:var(--mute)}
.iso .kpi b{font-size:clamp(18px,2.4vw,26px)}
.iso .k1{left:-6%;top:6%;background:var(--yellow);transform:rotate(-6deg);animation-delay:.5s}
.iso .k2{right:-4%;top:38%;background:var(--mint);transform:rotate(5deg);animation-delay:.65s}
.iso .k3{left:8%;bottom:-6%;background:var(--coral);color:#fff;transform:rotate(-3deg);animation-delay:.8s}
.iso .k3 small{color:#fff}

/* 03 grants : pink, fanned tickets */
.hero-grants{background:#ffd6dc;border-bottom:3px solid var(--ink);
  background-image:repeating-linear-gradient(-45deg,rgba(255,93,115,.10) 0 18px,transparent 18px 36px)}
.hero-grants h1 em{color:var(--mint)}
.hero-grants h1{text-shadow:1px 1px 0 var(--ink),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(--sky),8px 8px 0 var(--sky),9px 9px 0 var(--sky),10px 10px 0 var(--sky)}
.tickets{position:relative;height:420px;perspective:1000px;transform-style:preserve-3d}
.ticket{position:absolute;left:8%;width:78%;background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:7px 7px 0 var(--ink);padding:18px 22px 18px 92px;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.ticket::before{content:attr(data-date);position:absolute;left:0;top:0;bottom:0;width:76px;border-right:3px dashed var(--ink);display:grid;place-items:center;font-weight:900;font-size:15px;text-align:center;line-height:1.2;white-space:pre}
.ticket b{display:block;font-size:17px;font-weight:900}
.ticket span{font-size:13px;font-weight:700;color:var(--mute)}
.ticket .amt{display:block;font-size:22px;font-weight:900;color:var(--coral);-webkit-text-stroke:1px var(--ink)}
.ticket.t1{top:0;transform:rotate(-7deg) translateZ(0);background:#fff}
.ticket.t1::before{background:var(--yellow);border-radius:15px 0 0 15px}
.ticket.t2{top:140px;transform:rotate(3deg) translateX(30px) translateZ(30px)}
.ticket.t2::before{background:var(--sky);border-radius:15px 0 0 15px}
.ticket.t3{top:280px;transform:rotate(-2deg) translateX(-10px) translateZ(60px)}
.ticket.t3::before{background:var(--mint);border-radius:15px 0 0 15px}
.tickets:hover .ticket.t1{transform:rotate(-10deg) translate(-20px,-14px)}
.tickets:hover .ticket.t3{transform:rotate(1deg) translate(10px,14px)}

/* 3-week polaroids + misc photos */
.polas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:10px 0 34px}
.polas .photo{padding:8px 8px 4px}
.polas .photo img{aspect-ratio:4/3}
.polas .photo:nth-child(1){transform:rotate(-4deg)}
.polas .photo:nth-child(2){transform:rotate(2deg) translateY(16px)}
.polas .photo:nth-child(3){transform:rotate(-1deg)}
.polas .photo:hover{transform:rotate(0) scale(1.05) translateZ(30px)}
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 12px}
.paths figure{border:2px solid var(--ink);border-radius:10px;overflow:hidden}
.paths img{aspect-ratio:4/3;object-fit:cover;width:100%}
.paths figcaption{font-size:11px;font-weight:800;text-align:center;padding:2px;background:var(--yellow);border-top:2px solid var(--ink)}
@media(max-width:820px){
  .board .pop{width:28%}.board .pop.l{top:-14%}.board .pop.r{top:-18%}
  .tickets{height:400px;max-width:480px;margin:10px auto 0;width:100%}
  .iso{max-width:480px;margin:20px auto 0}
}
@media(max-width:560px){
  .polas{grid-template-columns:1fr 1fr}
  .ticket{width:90%;left:2%;padding-left:84px}
  .board .pop.b{display:none}
}
@media(prefers-reduced-motion:reduce){.hero .stage,.hero .pics,.hero .board,.hero .tickets,.hero .iso,.board .pop,.iso .kpi{animation:none!important}}
@media(max-width:560px){
  .ticket.t2{transform:rotate(3deg) translateX(8px)}
  .ticket.t3{transform:rotate(-2deg)}
}
.split .duo{margin-bottom:34px}.polas figcaption{font-size:13px}
/* caption fix: let images size by aspect-ratio, keep captions below */
.photo{display:flex;flex-direction:column;align-self:start}
.photo img{height:auto;flex:none}
.photo figcaption{flex:none;line-height:1.4;padding:8px 4px 4px;position:relative;z-index:1}
.iso .k3{bottom:-10%}
.num.m{color:#d6203f}