.stu{font-family:"IBM Plex Sans JP",sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
.stu *,.stu *::before,.stu *::after{box-sizing:border-box}
.stu :where(h1,h2,h3,h4,p,ol,ul,li){margin:0;padding:0;font-feature-settings:normal}
.stu :where(img){max-width:100%;display:block}
.stu :where(a){color:inherit;text-decoration:none}
.stu .stu-root{width:100%}
.stu .c-custom_html{margin:0}
.stu .totop{position:fixed}
.stu{
  --navy:#3b589f; --ink:#223a42; --ink2:#123b40; --ink3:#222c42; --text:#1a1a1a;
  --bg-soft:#f5f9fc; --card:#e4f2fb; --thead:#e8f0f7; --line:#e3e2ea;
  --s1:#3f7fe0; --s2:#2fb37a; --s3:#ff8a2e; --s4:#ee4f86;
  --shadow:0 16px 24px rgba(18,20,64,.14);
}
.stu .hero{position:relative;overflow:hidden}
.stu .hero .in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:531px 535px;justify-content:space-between;min-height:792px;padding:0 24px}
.stu .hero-copy{padding-top:146px}
.stu .hero h1{font-family:"IBM Plex Sans JP",sans-serif;font-weight:700;font-size:60px;line-height:78px;color:var(--ink3);margin:0 0 24px;letter-spacing:.01em}
.stu .hero h1 span{display:inline-block;opacity:0;transform:translateY(24px);animation:stu-rise .7s cubic-bezier(.2,.8,.2,1) forwards}
.stu .hero h1 span:nth-child(2){animation-delay:.15s}
.stu .hero p{font-size:18px;line-height:1.8;letter-spacing:.04em;margin:0 0 67px}
.stu .btn-hero{display:inline-flex;align-items:center;justify-content:center;width:158px;height:54px;border:1px solid var(--navy);border-radius:27px;background:#fff;color:var(--navy);font-family:"IBM Plex Sans JP";font-weight:500;font-size:17px;box-shadow:0 16px 20px rgba(0,0,0,.17);transition:.2s}
.stu .btn-hero:hover{transform:translateY(-2px);box-shadow:0 20px 26px rgba(0,0,0,.2)}
.stu .hero-visual{position:relative;height:792px}
.stu .phone{position:absolute;left:215px;top:49px;width:320px;height:692px;border-radius:6px;overflow:hidden;box-shadow:0 30px 60px rgba(34,58,66,.18);opacity:0;animation:stu-fadeUp .8s .2s ease forwards}
.stu .phone{background:#139cf5}
.stu .app{width:100%;height:100%;display:block}
.stu .app g{transform-box:fill-box}
.stu .ad-lbl{font-family:Fredoka,sans-serif;font-weight:700;font-size:66px;stroke:#fff;stroke-width:12px;paint-order:stroke;stroke-linejoin:round}
.stu .ad-lbl-boss{font-size:70px}
.stu .ad-scene{transition:transform .7s cubic-bezier(.65,0,.35,1);transform-box:view-box}
.stu #adRank{transform:translateX(923px)}
.stu .app.is-rank #adMap{transform:translateX(-923px)}
.stu .app.is-rank #adRank{transform:none}
.stu .ad-pan{transform-box:view-box;transition:transform 1.6s cubic-bezier(.4,0,.2,1)}
.stu .app.pan-start .ad-pan{transform:translateY(-160px);transition:none}
.stu .ad-pop{transform:scale(0);transform-origin:center}
.stu .ad-node.in .ad-pop{animation:stu-adpop .55s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes stu-adpop{to{transform:scale(1)}}
.stu .ad-mon{transform-origin:50% 100%;animation:stu-adbob 1.6s ease-in-out infinite}
.stu .ad-boss{animation-duration:.9s}
@keyframes stu-adbob{50%{transform:translateY(-8px) scale(1.04,.96)}}
.stu .ad-rays{transform-origin:center;animation:stu-adspin 10s linear infinite}
@keyframes stu-adspin{to{transform:rotate(360deg)}}
.stu .ad-leaves{transform-origin:50% 95%;animation:stu-adsway 3.2s ease-in-out infinite}
@keyframes stu-adsway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.stu .ad-lock{transform-origin:50% 0}
.stu .ad-node.in .ad-lock{animation:stu-adpop .55s cubic-bezier(.3,1.6,.5,1) forwards,stu-adshake 2.4s 1s ease-in-out infinite}
@keyframes stu-adshake{0%,80%,100%{transform:scale(1) rotate(0)}85%{transform:scale(1) rotate(-10deg)}90%{transform:scale(1) rotate(9deg)}95%{transform:scale(1) rotate(-5deg)}}
.stu .ad-coin-in{transform-origin:center}
.stu .app.coin .ad-coin-in{animation:stu-adflip .5s 2}
@keyframes stu-adflip{50%{transform:scaleX(-1)}}
.stu #adCoinNum{transform-box:fill-box;transform-origin:center}
.stu .app.coin #adCoinNum{animation:stu-adbump .3s 3}
@keyframes stu-adbump{50%{transform:scale(1.12)}}
.stu .ad-play{transform-origin:center;animation:stu-adpulse 1.3s ease-in-out infinite}
@keyframes stu-adpulse{50%{transform:scale(1.035)}}
.stu .app.press .ad-play{animation:none;transform:scale(.93);transition:transform .1s}
.stu .ad-clear{transform-origin:center}
.stu .app.cleared .ad-clear{animation:stu-adclear 1.6s ease-out forwards}
@keyframes stu-adclear{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.15)}40%{transform:scale(1)}80%{opacity:1}100%{opacity:0}}
.stu .ad-badge{transform-origin:50% 100%;animation:stu-adbadge 1.8s ease-in-out infinite}
@keyframes stu-adbadge{0%,70%,100%{transform:none}80%{transform:translateY(-10px)}90%{transform:none}}
.stu .ad-row{transform-box:view-box;transition:transform .7s cubic-bezier(.3,1.25,.5,1)}
.stu .ad-row-in{transform:translateX(960px);transition:transform .5s cubic-bezier(.2,.9,.3,1.1)}
.stu .ad-row.in .ad-row-in{transform:none}
.stu .ad-up{transform-origin:center}
.stu .app.ranked .ad-up{animation:stu-adclear 2.4s ease-out forwards}
.stu .app.ranked .ad-you .ad-lv{animation:stu-adbump .3s 4;transform-origin:center}
.stu .ad-nav{transform-origin:50% 100%}
.stu .ad-nav.tapped{animation:stu-adpress .3s}
@keyframes stu-adpress{50%{transform:scale(.9)}}
.stu .ad-caret{transform-box:view-box;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.stu .ad-tap{opacity:0;transform-box:view-box}
.stu .ad-tap-r,.stu .ad-tap-d{transform-origin:center}
.stu .ad-tap.go{opacity:1}
.stu .ad-tap.go .ad-tap-r{animation:stu-adring .7s ease-out forwards}
.stu .ad-tap.go .ad-tap-d{animation:stu-addot .7s ease-out forwards}
@keyframes stu-adring{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.6);opacity:0}}
@keyframes stu-addot{0%{transform:scale(1);opacity:.85}60%{opacity:.6}100%{transform:scale(.6);opacity:0}}
.stu .hero-mascot{position:absolute;left:0;top:468px;width:251px;z-index:3}
@keyframes stu-rise{to{opacity:1;transform:none}}
@keyframes stu-fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.stu .hero{background:#8DDBFF}
.stu .hero .in{position:relative;z-index:1}
.stu .hero-pattern{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.stu .hero-pattern svg.m{position:absolute;overflow:visible;animation:stu-monfloat var(--d,7s) ease-in-out var(--dl,0s) infinite}
.stu .hero-pattern .mb{fill:#fff;opacity:.5}
.stu .hero-pattern .me{fill:#5cb9e6;opacity:.55}
@keyframes stu-monfloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(calc(var(--r,0deg) * -1))}}
@media (max-width:640px){.stu .hero-pattern .hide-sp{display:none}}
.stu .mascot{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stu .mascot-svg{width:100%;height:auto;display:block;overflow:visible}
.stu .mascot-svg g{transform-box:fill-box}
.stu .mascot .body{transform-origin:50% 100%}
.stu .tassel{transform-origin:76% 20%;animation:stu-tassel 3.2s cubic-bezier(.45,0,.55,1) infinite}
@keyframes stu-tassel{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.stu .bowtie{transform-origin:50% 50%;animation:stu-bowtie 3.2s ease-in-out infinite}
@keyframes stu-bowtie{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-12deg) scale(1.08)}95%{transform:rotate(10deg) scale(1.08)}}
.stu .eye{transform-origin:50% 55%;transition:transform .08s}
.stu .blink .eye{transform:scaleY(.08)}
.stu .pupil{transition:transform .15s ease-out}
.stu .mouth{transform-origin:50% 20%}
.stu .talking .mouth{animation:stu-talk .22s ease-in-out infinite alternate}
@keyframes stu-talk{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
.stu .cheek{transform-origin:center;animation:stu-blush 3s ease-in-out infinite}
@keyframes stu-blush{0%,100%{opacity:1}50%{opacity:.55}}
.stu .hero-mascot .float{animation:stu-float 3.4s ease-in-out 1.4s infinite}
.stu .hero-mascot .body{animation:stu-popIn 1s cubic-bezier(.3,1.6,.5,1) .5s both}
@keyframes stu-popIn{0%{transform:translateY(160px) scale(.4,.6);opacity:0}55%{transform:translateY(-18px) scale(1.06,.94);opacity:1}75%{transform:translateY(0) scale(.96,1.05)}100%{transform:none}}
@keyframes stu-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
.stu .mascot.jump .body{animation:stu-jump .8s cubic-bezier(.3,.7,.4,1)!important}
@keyframes stu-jump{0%{transform:none}15%{transform:scale(1.12,.85)}45%{transform:translateY(-70px) rotate(-180deg) scale(.95,1.08)}70%{transform:translateY(0) rotate(-360deg) scale(1.1,.88)}85%{transform:rotate(-360deg) scale(.97,1.04)}100%{transform:rotate(-360deg)}}
.stu .bubble{position:absolute;background:#fff;border:2.5px solid var(--navy);color:var(--navy);font-family:"IBM Plex Sans JP";font-weight:700;font-size:17px;padding:8px 16px;border-radius:18px;white-space:nowrap;transform-origin:85% 120%;transform:scale(0);opacity:0;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s;pointer-events:none;z-index:4;box-shadow:0 8px 16px rgba(59,88,159,.15)}
.stu .bubble::after{content:"";position:absolute;right:26px;bottom:-11px;width:16px;height:16px;background:#fff;border-right:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(45deg) skew(8deg,8deg)}
.stu .bubble.show{transform:scale(1);opacity:1}
.stu .hero-mascot .float{position:relative}
.stu .hero-mascot .bubble{left:auto;right:58%;top:-4%;transform-origin:calc(100% - 26px) 130%}
.stu .hero-mascot .tassel,.stu .hero-mascot .bowtie{animation:none}
.stu .burst{position:absolute;left:50%;top:40%;pointer-events:none;z-index:5}
.stu .burst i{position:absolute;width:10px;height:10px;border-radius:2px;animation:stu-burst .9s cubic-bezier(.2,.7,.4,1) forwards}
.stu .burst i.star{width:16px;height:16px;border-radius:0;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@keyframes stu-burst{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1) rotate(var(--r));opacity:0}}
.stu .s02{padding:96px 0}
.stu .s02 .in{max-width:1440px;margin:0 auto;padding:0 60px}
.stu .h2{font-weight:900;font-size:40px;line-height:1.5;letter-spacing:.02em;color:var(--ink);margin:0}
.stu .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.stu .card{background:var(--card);border-radius:12px;padding:36px 32px;min-height:228px;transition:transform .3s,box-shadow .3s}
.stu .card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.stu .card h3{font-size:20px;line-height:1.5;letter-spacing:.02em;color:var(--ink);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.stu .card h3{gap:14px}
.stu .ui-ic{width:52px;height:55px;flex:none;overflow:visible;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.stu .card:hover .ui-ic{transform:translateY(-4px) rotate(-6deg) scale(1.08)}
.stu .ui-talk{transform-box:fill-box;transform-origin:0 100%;animation:stu-talkpop 2.4s ease-in-out infinite}
@keyframes stu-talkpop{0%,60%,100%{transform:scale(1)}70%{transform:scale(1.2)}80%{transform:scale(.95)}}
.stu .card p{font-size:16px;line-height:1.75;letter-spacing:.04em;margin:0}
.stu .s03{background:var(--bg-soft);padding:96px 0 0}
.stu .eyebrow{font-weight:500;font-size:15px;color:rgba(0,0,0,.6);text-align:center;margin:0 0 19px}
.stu .s03 .h2c{font-weight:900;font-size:40px;line-height:60px;color:var(--ink2);text-align:center;margin:0}
.stu .diagram-wrap{position:relative;width:686px;max-width:100%;margin:75px auto 0}
.stu .diagram{width:100%;height:auto;display:block;overflow:visible}
.stu .sparkle-mascot{position:absolute;left:91.8%;top:-7.7%;width:30.4%;z-index:3}
.stu .fire-mascot{position:absolute;left:-12.9%;top:73.8%;width:25.7%;z-index:3}
.stu .sparkle-mascot .float{animation:stu-sway 3s ease-in-out infinite}
@keyframes stu-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-6px)}}
.stu .spark{transform-origin:center;animation:stu-twinkle 1.6s ease-in-out infinite}
.stu .spark.s2{animation-delay:.4s}
.stu .spark.s3{animation-delay:.8s}
.stu .spark.s4{animation-delay:1.2s}
@keyframes stu-twinkle{0%,100%{transform:scale(.55) rotate(0);opacity:.6}50%{transform:scale(1.15) rotate(20deg);opacity:1}}
.stu .star-eye{transform-origin:center;animation:stu-stareye 1.2s ease-in-out infinite}
@keyframes stu-stareye{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.35) rotate(15deg)}}
.stu .sparkle-mascot.cheer .body{animation:stu-cheer 1s cubic-bezier(.3,.7,.4,1)}
@keyframes stu-cheer{0%{transform:none}20%{transform:scale(1.12,.86)}50%{transform:translateY(-46px) scale(.94,1.08)}75%{transform:translateY(0) scale(1.08,.92)}100%{transform:none}}
.stu .sparkle-mascot .bubble{right:30%;left:auto;top:-30%}
.stu .fire-mascot .float{animation:stu-hop .7s ease-in-out infinite}
@keyframes stu-hop{0%,100%{transform:translateY(0) scale(1,1)}40%{transform:translateY(-8px) scale(.97,1.03)}80%{transform:translateY(0) scale(1.04,.96)}}
.stu .flame{transform-origin:50% 100%;animation:stu-flame .45s ease-in-out infinite alternate}
@keyframes stu-flame{0%{transform:scale(1,1) rotate(-4deg)}100%{transform:scale(.9,1.18) rotate(5deg)}}
.stu .flame-eye{transform-origin:50% 100%;animation:stu-flame .3s ease-in-out infinite alternate}
.stu .brow{transform-origin:center;animation:stu-brow 1.4s ease-in-out infinite}
@keyframes stu-brow{0%,70%,100%{transform:none}80%{transform:translateY(-3px) rotate(-6deg)}}
.stu .fire-mascot.power .flame{animation:stu-powerflame .6s ease-out}
@keyframes stu-powerflame{0%{transform:scale(1)}40%{transform:scale(1.6,1.9) rotate(-8deg)}100%{transform:scale(1)}}
.stu .fire-mascot.power .body{animation:stu-lean .6s ease-out}
@keyframes stu-lean{40%{transform:rotate(8deg) translateX(8px)}}
.stu .stage{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.stu .check{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.stu .dots circle{opacity:0}
.stu .flag{transform-box:fill-box;transform-origin:100% 50%;transform:scaleX(0)}
.stu .flag-wave{transform-box:fill-box;transform-origin:100% 50%}
.stu .dstar{transform-box:fill-box;transform-origin:center;opacity:0}
.stu .go .stage{animation:stu-grow .6s cubic-bezier(.3,1.4,.5,1) forwards}
.stu .go .st1{animation-delay:.1s}
.stu .go .st2{animation-delay:.35s}
.stu .go .st3{animation-delay:.6s}
.stu .go .st50{animation-delay:1.2s}
.stu .go .check{animation:stu-pop .45s cubic-bezier(.3,1.8,.5,1) forwards}
.stu .go .ck1{animation-delay:.6s}
.stu .go .ck2{animation-delay:.85s}
.stu .go .ck3{animation-delay:1.1s}
.stu .go .dots circle{animation:stu-fadein .3s forwards}
.stu .go .dots circle:nth-child(1){animation-delay:.9s}
.stu .go .dots circle:nth-child(2){animation-delay:1s}
.stu .go .dots circle:nth-child(3){animation-delay:1.1s}
.stu .go .flag{animation:stu-flagin .6s cubic-bezier(.3,1.5,.5,1) 1.8s forwards}
.stu .go .flag-wave{animation:stu-wave 1.8s ease-in-out 2.4s infinite}
.stu .go .dstar{animation:stu-dstar 1.8s ease-in-out infinite}
.stu .go .dstar:nth-of-type(2){animation-delay:.5s}
.stu .go .dstar:nth-of-type(3){animation-delay:1s}
@keyframes stu-grow{to{transform:scaleY(1)}}
@keyframes stu-pop{to{transform:scale(1)}}
@keyframes stu-fadein{to{opacity:1}}
@keyframes stu-flagin{to{transform:scaleX(1)}}
@keyframes stu-wave{0%,100%{transform:skewY(0)}50%{transform:skewY(-4deg) scaleX(.97)}}
@keyframes stu-dstar{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.2) rotate(30deg)}}
.stu .node circle.ring{transition:stroke-width .3s}
.stu .node{transform-box:fill-box;transform-origin:center;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.stu .node.on{transform:scale(1.14)}
.stu .node.on circle.ring{stroke-width:9}
.stu .arc{transition:opacity .4s}
.stu .ringed .arc{opacity:.25}
.stu .ringed .arc.on{opacity:1}
.stu .clear-pill{transform-box:fill-box;transform-origin:center;transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.stu .clear-pill.on{transform:scale(1.15)}
.stu .up-dash{stroke-dashoffset:0}
.stu .up-dash.on{animation:stu-dash .6s linear infinite}
@keyframes stu-dash{to{stroke-dashoffset:22}}
.stu .core-num{transition:transform .3s}
.stu .steps{max-width:1080px;margin:0 auto;padding:75px 24px 0;display:flex;flex-direction:column;gap:80px}
.stu .step{display:grid;grid-template-columns:417px 588px;justify-content:space-between;align-items:center}
.stu .step.rev{grid-template-columns:588px 417px}
.stu .step.rev .step-text{order:2}
.stu .num{font-weight:900;font-size:88px;line-height:88px;color:var(--navy);margin:0 0 22px}
.stu .step h3{font-weight:700;font-size:24px;line-height:38.4px;color:var(--ink2);margin:0 0 22px}
.stu .step p{font-size:18px;line-height:1.8;margin:0;color:#000}
.stu .media{position:relative}
.stu .slot{position:relative;height:402px;border-radius:28px;background:linear-gradient(135deg,#dfe6ef,#cfd8e4);box-shadow:var(--shadow);display:grid;place-items:center;z-index:2;overflow:hidden}
.stu .slot .play{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.12);transition:transform .3s}
.stu .slot:hover .play{transform:scale(1.1)}
.stu .slot .play::before{content:"";margin-left:6px;border-left:22px solid var(--navy);border-top:14px solid transparent;border-bottom:14px solid transparent}
.stu .slot small{position:absolute;bottom:16px;left:20px;font-size:12px;color:#6b7a90}
.stu .btn-fill{display:flex;align-items:center;justify-content:center;height:59px;margin-top:26px;border-radius:999px;background:var(--navy);color:#fff;font-weight:700;font-size:16px;box-shadow:0 10px 14px rgba(126,135,239,.32);transition:.2s}
.stu .btn-fill:hover{background:#2f4a8a;transform:translateY(-2px)}
.stu .peek{position:absolute;top:-96px;right:48px;width:120px;height:96px;overflow:hidden;z-index:1;pointer-events:none}
.stu .step.rev .peek{right:auto;left:48px}
.stu .peek .mascot{position:absolute;left:0;top:0;width:120px;transform:translateY(105%);transition:transform .8s cubic-bezier(.3,1.5,.5,1);pointer-events:auto}
.stu .peek.in .mascot{transform:translateY(12%)}
.stu .peek.in .mascot .body{animation:stu-tilt 2.6s ease-in-out .8s infinite}
@keyframes stu-tilt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.stu .goal{padding:96px 24px 112px}
.stu .goal-card{position:relative;max-width:1080px;margin:0 auto;border-radius:40px;padding:56px 64px 44px;color:var(--ink3);background:#8DDBFF;box-shadow:0 20px 40px rgba(59,88,159,.14)}
.stu .goal-card .hero-pattern{border-radius:inherit}
.stu .goal-grid{position:relative;display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center}
.stu .goal-num{text-align:center;line-height:1}
.stu .goal-num .lbl{display:inline-block;background:#3b589f;color:#fff;font:700 15px/1 Fredoka,sans-serif;letter-spacing:.12em;padding:8px 16px;border-radius:99px;margin-bottom:10px}
.stu .goal-num .big{display:block;font:700 184px/.9 Fredoka,sans-serif;letter-spacing:-.03em;color:#fff;-webkit-text-stroke:10px #3b589f;paint-order:stroke fill;filter:drop-shadow(0 8px 0 rgba(59,88,159,.35))}
.stu .goal-num .unit{display:block;font:900 24px/1 "IBM Plex Sans JP";letter-spacing:.2em;margin-top:12px;color:#3b589f}
.stu .goal-copy h2{margin:0;font-weight:900;font-size:42px;line-height:1.5;letter-spacing:.02em;color:var(--ink3)}
.stu .goal-copy .hl{background:linear-gradient(transparent 60%,#ffe46b 60%);background-size:0% 100%;background-repeat:no-repeat;transition:background-size 1s cubic-bezier(.6,0,.2,1) .4s;padding:0 4px}
.stu .goal.in .goal-copy .hl{background-size:100% 100%}
.stu .goal-copy h2 .ek{color:#3b589f}
.stu .goal-copy p{margin:18px 0 0;font-weight:700;font-size:19px;line-height:1.7;color:var(--ink3)}
.stu .grades{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.stu .grades span{font:900 18px/1 "IBM Plex Sans JP";padding:12px 18px;border-radius:14px;background:rgba(255,255,255,.45);color:rgba(59,88,159,.55);transform:translateY(10px);opacity:.6;transition:all .4s cubic-bezier(.3,1.6,.5,1)}
.stu .grades span.on{background:#fff;color:#3b589f;transform:none;opacity:1;box-shadow:0 5px 0 rgba(59,88,159,.25)}
.stu .grades span:first-child.on{background:#ffcf33;color:#1d2b4f;box-shadow:0 5px 0 #d9a400}
.stu .goal-bar{position:relative;margin-top:40px;display:grid;grid-template-columns:repeat(50,1fr);gap:4px;padding:8px;border-radius:14px;background:rgba(255,255,255,.55)}
.stu .goal-bar i{height:16px;border-radius:4px;background:rgba(59,88,159,.12);transition:background .2s,transform .2s}
.stu .goal-bar i.on{transform:scaleY(1.2)}
.stu .goal-bar i.on:nth-child(4n+1){background:#3f7fe0}
.stu .goal-bar i.on:nth-child(4n+2){background:#2fb37a}
.stu .goal-bar i.on:nth-child(4n+3){background:#ff8a2e}
.stu .goal-bar i.on:nth-child(4n){background:#ee4f86}
.stu .goal-bar i:last-child.on{background:#ffcf33;box-shadow:0 0 0 2px #fff}
.stu .goal-scale{position:relative;display:flex;justify-content:space-between;margin-top:10px;padding:0 8px;font:700 13px/1 Fredoka;color:#3b589f}
.stu .goal-mascot{position:absolute;right:28px;top:-112px;width:150px;z-index:3}
.stu .goal-mascot.cheer .body{animation:stu-cheer 1s cubic-bezier(.3,.7,.4,1)}
.stu .goal.in .goal-mascot .float{animation:stu-sway 3s ease-in-out infinite}
.stu .goal-mascot .bubble{right:88%;left:auto;top:-8%}
@media (max-width:900px){.stu .goal-grid{grid-template-columns:1fr;gap:20px}
.stu .goal-num .big{font-size:140px}
.stu .goal-copy h2{font-size:30px}}
@media (max-width:640px){.stu .goal{padding:72px 16px 80px}
.stu .goal-card{padding:40px 16px 32px;border-radius:28px}
.stu .goal-copy h2{font-size:clamp(16px,4.8vw,22px);line-height:1.6;letter-spacing:0}
.stu .goal-copy .hl{padding:0 2px}
.stu .goal-copy p{font-size:16px}
.stu .grades span{font-size:15px;padding:10px 12px}
.stu .goal-bar{gap:2px}
.stu .goal-bar i{height:14px}
.stu .goal-mascot{width:100px;top:-80px}}
.stu .cta-wrap{padding:0 16px}
.stu .cta{position:relative;border-radius:48px;overflow:hidden;min-height:464px;text-align:center;color:#fff;background:linear-gradient(135deg,#1fa596,#17868c);isolation:isolate}
.stu .cta::before{content:"";position:absolute;inset:-30px -16px;background:url(https://246182254.fs1.hubspotusercontent-na2.net/hubfs/246182254/assets/tocme/student-mock/cta-bg.png) center bottom/cover;z-index:-2}
.stu .cta::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.2);z-index:-1}
.stu .cta .o1,.stu .cta .o2{position:absolute;border-radius:50%;background:rgba(255,255,255,.08);z-index:-1}
.stu .cta .o1{left:-80px;top:-120px;width:380px;height:380px}
.stu .cta .o2{right:-100px;bottom:-160px;width:460px;height:460px;background:rgba(255,255,255,.06)}
.stu .cta h2{font-weight:900;font-size:48px;line-height:67.2px;margin:0;padding-top:119px}
.stu .cta p{font-weight:700;font-size:16px;color:rgba(255,255,255,.85);margin:20px 0 48px}
.stu .btn-white{display:inline-flex;align-items:center;justify-content:center;width:324px;height:65px;border-radius:999px;background:#fff;color:var(--navy);font-weight:700;font-size:17px;box-shadow:0 16px 20px rgba(0,0,0,.16);transition:.2s}
.stu .btn-white:hover{transform:translateY(-3px)}
.stu .cta-mascot{position:absolute;right:9%;bottom:-40px;width:170px;transform:translateY(110%);transition:transform 1s cubic-bezier(.3,1.4,.5,1)}
.stu .cta.in .cta-mascot{transform:translateY(0)}
.stu .cta.in .cta-mascot .body{animation:stu-hello 1.6s ease-in-out 1s infinite;transform-origin:50% 90%}
@keyframes stu-hello{0%,100%{transform:rotate(0)}15%{transform:rotate(-10deg)}30%{transform:rotate(8deg)}45%{transform:rotate(-8deg)}60%{transform:rotate(0)}}
.stu .cta-mascot .bubble{left:-110px;top:-20px}
.stu .totop{position:fixed;right:24px;bottom:24px;width:78px;z-index:60;transform:translateY(160%);transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.stu .totop.show{transform:none}
.stu .totop .body{animation:stu-float 2.6s ease-in-out infinite}
.stu .totop.fly{transform:translateY(-120vh)!important;transition:transform .9s cubic-bezier(.6,-.3,.7,.3)}
.stu .totop .label{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.stu *::before,.stu *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (max-width:1100px){.stu .hero .in{grid-template-columns:1fr;min-height:0}
.stu .hero-copy{padding-top:56px}
.stu .hero-visual{height:620px;width:420px;margin:24px auto 0;transform-origin:top center}
.stu .phone{left:140px;top:0;width:260px;height:562px}
.stu .hero-mascot{left:0;top:360px;width:200px}
.stu .step,.stu .step.rev{grid-template-columns:1fr;gap:28px}
.stu .step.rev .step-text{order:0}}
@media (max-width:640px){.stu .hero .in,.stu .s02 .in{padding:0 16px}
.stu .hero h1{font-size:36px;line-height:1.35}
.stu .hero p{font-size:16px;margin-bottom:32px}
.stu .hero-visual{width:320px;height:500px}
.stu .phone{left:110px;width:210px;height:454px}
.stu .hero-mascot{top:280px;width:160px}
.stu .hero-mascot .bubble{right:50%;top:-14%}
.stu .h2,.stu .s03 .h2c{font-size:26px;line-height:1.5}
.stu .s02,.stu .s03{padding-top:64px}
.stu .cards{grid-template-columns:1fr}
.stu .diagram-wrap{width:calc(100% - 32px)}
.stu .diagram-wrap{margin-top:130px}
.stu .sparkle-mascot{left:auto;right:-2%;top:-15%;width:26%}
.stu .sparkle-mascot .bubble{top:-20%;right:95%}
.stu .fire-mascot{left:-3%;top:86%;width:22%}
.stu .sparkle-mascot .tag{left:auto!important;right:0;top:auto!important;bottom:104%}
.stu .steps{padding:48px 16px 0;gap:72px}
.stu .num{font-size:64px;line-height:64px}
.stu .slot{height:220px;border-radius:20px}
.stu .peek{width:90px;height:72px;top:-72px;right:24px}
.stu .peek .mascot{width:90px}
.stu .cta{border-radius:28px;min-height:520px;padding:0 16px}
.stu .cta h2{font-size:26px;line-height:1.5;padding-top:64px}
.stu .btn-white{width:100%;max-width:300px}
.stu .cta-mascot{width:120px;right:50%;margin-right:-60px;bottom:-30px}
.stu .cta-mascot .bubble{left:auto;right:90px}
.stu .totop{width:64px;right:12px;bottom:12px}}
.stu .s03,.stu .s02,.stu .hero{position:relative}
.stu .wrap-rel{position:relative}