:root{
  --ink:#111214;
  --sub:#6B6F76;
  --sub-d:#9BA3B4;
  --line:#E4E5E8;
  --line-d:rgba(255,255,255,.10);
  --navy:#111828;      /* Hinowa University の地色 */
  --navy-2:#182136;    /* カード */
  --bg2:#F6F6F4;
  --blue:#0B63F6;
  --grad:linear-gradient(100deg,#2E8BEE,#7A5BE8 55%,#C25BD0);
  --sans:'Noto Sans JP','Inter',sans-serif;
  --en:'Inter','Noto Sans JP',sans-serif;
  --disp:'Montserrat','Noto Sans JP',sans-serif;
  --gut:clamp(20px,4.5vw,64px);
  --max:1200px;
  --r:16px;
  --nav-h:56px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--sans);color:var(--ink);background:#fff;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
section{padding:clamp(80px,11vw,140px) 0;position:relative}
.dark{background:var(--navy);color:#fff}
.gray{background:var(--bg2)}

/* ---------- 見出し ---------- */
.hd{margin-bottom:clamp(40px,6vw,72px)}
.hd h2{font-size:clamp(30px,4.4vw,52px);font-weight:900;line-height:1.4;letter-spacing:.005em}
.hd .eb{display:block;margin-top:14px;font:600 11px/1 var(--en);letter-spacing:.18em;color:var(--sub)}
.dark .hd .eb{color:var(--sub-d)}
.hd p{margin-top:22px;color:var(--sub);font-size:15px;max-width:34em}
.dark .hd p{color:var(--sub-d)}
.hd.center{text-align:center}.hd.center p{margin-left:auto;margin-right:auto}
.it{font-style:italic;font-family:var(--disp);font-weight:800}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:14px;white-space:nowrap;transition:transform .25s ease,background .25s ease,border-color .25s ease}
.btn svg{width:16px;height:16px;transition:transform .25s ease}
.btn:hover svg{transform:translateX(3px)}
.btn-g{background:var(--grad);color:#fff}
.btn-w{background:#fff;color:var(--ink)}
.btn-k{background:var(--ink);color:#fff}
.btn-o{border:1px solid rgba(255,255,255,.35);color:#fff}
.btn-o:hover{border-color:#fff}
.btn-ol{border:1px solid var(--line);color:var(--ink);background:#fff}
.btn-ol:hover{border-color:var(--ink)}

/* ---------- ナビ ---------- */
.nav{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:50;width:min(1204px,calc(100% - 20px));height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 20px;border-radius:14px;
  background:rgba(17,24,40,.72);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);color:#fff;border:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:10px;font:800 15px/1 var(--disp);letter-spacing:.02em}
.brand img{width:20px;height:28px;object-fit:contain}
.brand b{font-weight:800}
.brand span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-sep{width:1px;height:16px;background:rgba(255,255,255,.2);margin:0 4px 0 8px}
.back{font:600 10px/1 var(--en);letter-spacing:.14em;color:var(--sub-d);display:flex;align-items:center;gap:6px}
.back:hover{color:#fff}
.nav-l{display:flex;align-items:center}
.nav ul{display:flex;list-style:none;gap:26px;font-size:12.5px;font-weight:500}
.nav ul a{opacity:.85}.nav ul a:hover{opacity:1}
.nav-r{display:flex;align-items:center;gap:22px}
.nav .btn{height:38px;padding:0 16px;font-size:12.5px}
.menu{display:none;width:40px;height:40px;align-items:center;justify-content:center}
.menu i{display:block;width:18px;height:1.5px;background:#fff;position:relative}
.menu i::before,.menu i::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:#fff;transition:transform .25s}
.menu i::before{top:-6px}.menu i::after{top:6px}
.nav.open .menu i{background:transparent}
.nav.open .menu i::before{transform:translateY(6px) rotate(45deg)}
.nav.open .menu i::after{transform:translateY(-6px) rotate(-45deg)}
.drawer{display:none}

/* ---------- ヒーロー ---------- */
.hero{background:var(--navy);color:#fff;padding:calc(var(--nav-h) + 110px) 0 clamp(90px,10vw,130px);overflow:hidden}
.hero::before{content:"";position:absolute;width:900px;height:900px;right:-260px;top:-280px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(122,91,232,.28),rgba(46,139,238,.10) 55%,transparent)}
.hero .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,80px);align-items:center;position:relative}
.hero .eb{font:600 11px/1 var(--en);letter-spacing:.2em;color:var(--sub-d)}
.shine{margin-top:22px;font:800 clamp(18px,2vw,24px)/1.2 var(--disp);letter-spacing:-.01em;
  background:linear-gradient(105deg,#fff 0 38%,#D6EEFF 46%,#fff 50%,#9BA3B4 62%,#fff 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s ease-in-out infinite}
@keyframes shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.hero h1{margin-top:14px;font-size:clamp(34px,4.6vw,60px);font-weight:900;line-height:1.36;letter-spacing:.005em}
.hero .rule{height:1px;background:var(--line-d);margin:34px 0 26px;max-width:560px}
.hero .lead{color:#C9CFDB;font-size:15px;max-width:38em}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.hero .note{margin-top:18px;font-size:12px;color:var(--sub-d)}
.hero .note b{color:#fff;font-family:var(--en);font-weight:700}

/* アプリの画面（CSSで描く） */
.device{position:relative;justify-self:center;width:min(330px,100%)}
.phone{position:relative;border-radius:38px;padding:12px;background:#0A0F1A;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.6),0 0 0 6px rgba(255,255,255,.03)}
.screen{border-radius:28px;background:#F7F8FA;color:var(--ink);overflow:hidden;aspect-ratio:9/18.5;display:flex;flex-direction:column}
.s-top{padding:18px 18px 14px;background:#fff}
.s-top small{display:block;font:600 9px/1 var(--en);letter-spacing:.16em;color:var(--sub)}
.s-top strong{display:block;margin-top:8px;font-size:15px;font-weight:900;line-height:1.4}
.prog{margin-top:12px;height:6px;border-radius:9px;background:#ECEDF0;overflow:hidden}
.prog i{display:block;height:100%;width:42%;border-radius:9px;background:var(--grad)}
.prog-t{display:flex;justify-content:space-between;margin-top:6px;font:600 9.5px/1 var(--en);color:var(--sub)}
.s-vid{margin:12px 14px 0;border-radius:14px;aspect-ratio:16/9;background:linear-gradient(135deg,#1F2A44,#111828);position:relative;display:flex;align-items:flex-end;padding:10px 12px;color:#fff}
.s-vid::after{content:"";position:absolute;left:50%;top:44%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(255,255,255,.16);
  -webkit-mask:radial-gradient(circle,#000 99%,transparent) ;}
.s-vid .pl{position:absolute;left:50%;top:44%;transform:translate(-40%,-50%);width:0;height:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.s-vid span{font-size:10px;font-weight:700;position:relative}
.s-list{padding:12px 14px;display:grid;gap:8px}
.s-item{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:10px 12px;font-size:11px;font-weight:700;border:1px solid #EEF0F3}
.s-item em{font:700 9px/1 var(--en);font-style:normal;color:var(--sub);width:22px}
.s-item .ck{margin-left:auto;width:16px;height:16px;border-radius:50%;border:1.5px solid #D5D8DE;flex:none}
.s-item.done .ck{border:0;background:var(--grad)}
.s-item.now{border-color:#C9B8F5}
.tag{position:absolute;background:#fff;color:var(--ink);border-radius:14px;padding:12px 14px;font-size:11px;font-weight:700;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);line-height:1.5}
.tag small{display:block;font:600 9px/1 var(--en);letter-spacing:.14em;color:var(--sub);margin-bottom:6px}
.tag.t1{left:-64px;top:22%}
.tag.t2{right:-54px;bottom:16%}
.tag b{font:800 18px/1 var(--disp)}

/* ---------- 悩み ---------- */
.iss{border-top:1px solid var(--line)}
.iss-row{display:grid;grid-template-columns:180px 1fr 1fr;gap:clamp(20px,4vw,56px);padding:clamp(34px,4vw,52px) 0;border-bottom:1px solid var(--line);position:relative}
.iss-row .no{font:800 clamp(56px,7vw,96px)/.9 var(--disp);color:#EDEEF0;letter-spacing:-.02em}
.iss-row .lb{display:block;font:600 11px/1 var(--en);letter-spacing:.16em;color:var(--blue);margin-bottom:14px}
.iss-row h3{font-size:clamp(21px,2.2vw,27px);font-weight:900;line-height:1.5}
.iss-row p{color:var(--sub);font-size:14.5px}
.iss-row::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--grad);transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.iss-row.in::before{width:100%}
.iss-ans{margin-top:clamp(40px,5vw,64px);font-size:clamp(20px,2.4vw,28px);font-weight:900;line-height:1.6}
.iss-ans span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- コンセプト（道のり） ---------- */
.path{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.path::before{content:"";position:absolute;left:0;right:0;top:58px;height:2px;background:linear-gradient(90deg,#2E8BEE,#7A5BE8 55%,#C25BD0);opacity:.55}
.st{padding-right:28px;position:relative}
.st .n{font:800 46px/1 var(--disp);color:#D9DBE0}
.st .dot{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #7A5BE8;margin:6px 0 26px;position:relative;z-index:1}
.st .lb{font:600 10.5px/1 var(--en);letter-spacing:.16em;color:var(--blue)}
.st h3{margin-top:10px;font-size:19px;font-weight:900;line-height:1.5}
.st p{margin-top:10px;font-size:13.5px;color:var(--sub)}
.concept-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:end;margin-bottom:clamp(56px,7vw,88px)}
.concept-top .hd{margin-bottom:0}
.concept-top p{color:var(--sub);font-size:15px}

/* ---------- 学科 ---------- */
.dept{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.dc{position:relative;background:var(--navy-2);border:1px solid var(--line-d);border-radius:var(--r);padding:clamp(28px,3vw,40px);overflow:hidden;display:flex;flex-direction:column}
.dc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);opacity:0;transition:opacity .3s}
.dc:hover::before,.dc.main::before{opacity:1}
.dc .big{position:absolute;right:22px;top:14px;font:800 italic 64px/1 var(--disp);color:rgba(255,255,255,.05)}
.dc .lb{font:600 10.5px/1 var(--en);letter-spacing:.16em;color:#7FB2FF}
.dc h3{margin-top:12px;font-size:clamp(22px,2.3vw,28px);font-weight:900;line-height:1.4}
.dc .d{margin-top:12px;font-size:14px;color:var(--sub-d)}
.dc ul{list-style:none;margin-top:26px;border-top:1px solid var(--line-d)}
.dc li{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-d);font-size:14px}
.dc li em{font:700 10.5px/2.2 var(--en);font-style:normal;color:var(--sub-d);letter-spacing:.06em;min-width:62px}
.dc li span{color:#E8EBF2}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font:700 10px/1 var(--en);letter-spacing:.1em;border:1px solid rgba(127,178,255,.5);color:#BFD7FF;margin-left:10px;vertical-align:middle}
.soon{margin-top:20px;display:grid;grid-template-columns:auto 1fr 1fr;gap:20px;align-items:center;border:1px dashed rgba(255,255,255,.16);border-radius:var(--r);padding:22px clamp(22px,3vw,34px)}
.soon .lb{font:600 10.5px/1 var(--en);letter-spacing:.16em;color:var(--sub-d)}
.soon div strong{display:block;font-size:16px;font-weight:900}
.soon div span{font-size:12.5px;color:var(--sub-d)}

/* ---------- 比較 ---------- */
.cmp{width:100%;border-collapse:collapse;font-size:14.5px}
.cmp th,.cmp td{padding:20px 22px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font:600 11px/1.4 var(--en);letter-spacing:.14em;color:var(--sub);padding-top:0}
.cmp thead th.us{color:var(--ink)}
.cmp tbody th{font-weight:700;width:22%;color:var(--ink)}
.cmp td.them{color:var(--sub);width:34%}
.cmp td.us{font-weight:700;background:linear-gradient(180deg,rgba(122,91,232,.05),rgba(46,139,238,.04));position:relative}
.cmp tbody tr:first-child td.us{box-shadow:inset 0 3px 0 0 #7A5BE8}
.cmp td.us::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--grad);margin-right:10px;vertical-align:2px}

/* ---------- 対象者 ---------- */
.who{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(30px,6vw,90px);align-items:start}
.who .hd{margin-bottom:0;position:sticky;top:110px}
.who ol{list-style:none;counter-reset:w;border-top:1px solid var(--line)}
.who li{counter-increment:w;display:flex;gap:22px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:700}
.who li::before{content:counter(w,decimal-leading-zero);font:700 11px/1 var(--en);color:var(--blue);letter-spacing:.1em;min-width:22px}

/* ---------- 学び方 ---------- */
.flow{display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.flow::before{content:"";position:absolute;left:0;right:0;top:76px;height:2px;background:linear-gradient(90deg,#2E8BEE,#7A5BE8 55%,#C25BD0);opacity:.5}
.fs{padding-right:22px}
.fs .n{font:800 52px/1 var(--disp);color:#E2E4E8}
.fs .dot{width:10px;height:10px;border-radius:50%;background:#2E8BEE;margin:16px 0 26px;position:relative;z-index:1;box-shadow:0 0 0 5px #fff}
.fs:nth-child(2) .dot{background:#4F7AEC}.fs:nth-child(3) .dot{background:#7A5BE8}.fs:nth-child(4) .dot{background:#9E5BDC}.fs:nth-child(5) .dot{background:#C25BD0}
.fs .lb{font:600 10.5px/1 var(--en);letter-spacing:.16em;color:var(--blue)}
.fs h3{margin-top:10px;font-size:17px;font-weight:900;line-height:1.5}
.fs p{margin-top:8px;font-size:13px;color:var(--sub)}

/* ---------- 料金 ---------- */
.price{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.price .hd{margin-bottom:0}
.pc{position:relative;background:var(--navy-2);border:1px solid var(--line-d);border-radius:20px;padding:clamp(30px,4vw,48px);overflow:hidden}
.pc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.pc .badge{display:inline-flex;height:26px;align-items:center;padding:0 12px;border-radius:999px;border:1px solid rgba(127,178,255,.55);color:#BFD7FF;font-size:11px;font-weight:700}
.pc h3{margin-top:16px;font-size:20px;font-weight:900}
.pc .yen{display:flex;align-items:baseline;gap:8px;margin-top:18px}
.pc .yen b{font:800 clamp(54px,6vw,76px)/1 var(--disp);letter-spacing:-.02em}
.pc .yen span{color:var(--sub-d);font-size:14px}
.pc .sm{margin-top:10px;font-size:12.5px;color:var(--sub-d)}
.pc .sm b{color:#7FB2FF}
.pc ul{list-style:none;margin:28px 0 30px;border-top:1px solid var(--line-d)}
.pc li{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line-d);font-size:14px}
.pc li svg{width:16px;height:16px;flex:none;color:#7FB2FF}
.pc .btn{width:100%;justify-content:center}
.pc .fine{margin-top:16px;text-align:center;font-size:12px;color:var(--sub-d)}
.trial{margin-top:30px;display:flex;gap:16px;align-items:center;border-top:1px solid var(--line-d);padding-top:26px}
.trial b{font:800 40px/1 var(--disp);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.trial p{font-size:14px;color:#C9CFDB;line-height:1.7}

/* ---------- 講師 ---------- */
.ins{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px);align-items:center}
.ph{border-radius:var(--r);aspect-ratio:4/5;overflow:hidden;background:linear-gradient(160deg,#1F2A44,#111828);position:relative}
.ph img{width:100%;height:100%;object-fit:cover}
.ph .ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 88px/1 var(--disp);color:rgba(255,255,255,.12)}
.ins .role{font:600 11px/1 var(--en);letter-spacing:.16em;color:var(--blue)}
.ins h3{margin-top:14px;font-size:clamp(28px,3vw,38px);font-weight:900;line-height:1.3}
.ins h3 small{display:block;margin-top:8px;font:600 13px/1 var(--en);letter-spacing:.08em;color:var(--sub)}
.ins blockquote{margin:30px 0;padding-left:20px;border-left:3px solid;border-image:linear-gradient(180deg,#2E8BEE,#C25BD0) 1;font-size:clamp(17px,1.8vw,20px);font-weight:700;line-height:1.75}
.ins dl{display:grid;grid-template-columns:110px 1fr;border-top:1px solid var(--line);font-size:14px}
.ins dt,.ins dd{padding:14px 0;border-bottom:1px solid var(--line)}
.ins dt{color:var(--sub);font-weight:500}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px);align-items:start}
.faq .hd{margin-bottom:0}
.faq .hd .btn{margin-top:30px}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;gap:16px;align-items:center;padding:22px 4px;font-weight:700;font-size:15px}
.qa summary::-webkit-details-marker{display:none}
.qa summary em{font:800 13px/1 var(--disp);font-style:normal;color:var(--blue)}
.qa summary i{margin-left:auto;width:10px;height:10px;border-right:1.5px solid var(--sub);border-bottom:1.5px solid var(--sub);transform:rotate(-45deg);transition:transform .25s;flex:none}
.qa details[open] summary i{transform:rotate(45deg)}
.qa .a{padding:0 4px 24px 33px;color:var(--sub);font-size:14.5px}

/* ---------- CTA ---------- */
.cta-s{text-align:center;overflow:hidden}
.cta-s::before{content:"";position:absolute;left:50%;top:50%;width:900px;height:520px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(122,91,232,.12),rgba(46,139,238,.06) 55%,transparent);pointer-events:none}
.cta-s .eb{font:600 11px/1 var(--en);letter-spacing:.2em;color:var(--sub)}
.cta-s h2{margin-top:22px;font-size:clamp(34px,5vw,60px);font-weight:900;line-height:1.35}
.cta-s p{margin-top:24px;color:var(--sub);font-size:15px}
.cta-s .row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:38px}
.cta-s .fine{margin-top:18px;font-size:12px;color:var(--sub)}

/* ---------- フッター ---------- */
footer{background:var(--bg2);padding:72px 0 40px;border-top:1px solid var(--line)}
.ft-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.ft-top p{font-size:13px;color:var(--sub);max-width:26em;margin-top:14px}
.ft-brand{font:800 16px/1 var(--disp);letter-spacing:.02em;display:flex;gap:10px;align-items:center}
.ft-brand img{width:20px;height:28px;object-fit:contain}
.ft-links{display:grid;grid-template-columns:repeat(2,auto);gap:10px 44px;font-size:12.5px}
.ft-links a:hover{color:var(--blue)}
.ft-bot{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:11.5px;color:var(--sub)}
.ft-bot nav{display:flex;flex-wrap:wrap;gap:20px}
.ft-bot a:hover{color:var(--ink)}

/* ---------- 出現 ---------- */
[data-r]{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
[data-r].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-r]{opacity:1;transform:none;transition:none}
  .shine{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- レスポンシブ ---------- */
@media(max-width:1080px){
  .nav ul{display:none}
  .menu{display:flex}
  .drawer{position:fixed;inset:76px 10px auto 10px;z-index:49;background:rgba(17,24,40,.96);backdrop-filter:blur(14px);border-radius:14px;padding:10px 20px 20px;color:#fff;display:block;
    opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .25s,transform .25s}
  .drawer a{display:block;padding:14px 0;border-bottom:1px solid var(--line-d);font-weight:700;font-size:15px}
  .drawer .btn{margin-top:18px;width:100%;justify-content:center;border:0}
  .nav.open + .drawer{opacity:1;pointer-events:auto;transform:none}
  .tag.t1{left:-30px}.tag.t2{right:-24px}
}
@media(max-width:900px){
  .hero .wrap,.concept-top,.price,.ins,.faq,.who{grid-template-columns:1fr}
  .who .hd{position:static}
  .device{margin-top:24px}
  .dept{grid-template-columns:1fr}
  .path{grid-template-columns:1fr 1fr;row-gap:48px}
  .path::before{display:none}
  .flow{grid-template-columns:1fr;row-gap:0}
  .flow::before{left:5px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,#2E8BEE,#7A5BE8 55%,#C25BD0)}
  .fs{display:grid;grid-template-columns:auto 1fr;column-gap:24px;padding:0 0 34px}
  .fs .n{display:none}
  .fs .dot{margin:6px 0 0;grid-row:span 3}
  .ins .ph{max-width:360px}
  .soon{grid-template-columns:1fr}
}
@media(max-width:760px){
  .back,.brand-sep{display:none}
  .nav-r > .btn{display:none}
  .iss-row{grid-template-columns:1fr;gap:12px}
  .iss-row .no{font-size:52px}
  .path{grid-template-columns:1fr}
  .cmp thead{display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:100%}
  .cmp tr{border-bottom:1px solid var(--line);padding:18px 0}
  .cmp th,.cmp td{border:0;padding:4px 0}
  .cmp tbody th{width:100%;font-size:12px;color:var(--sub);letter-spacing:.06em}
  .cmp td.them{width:100%;font-size:13px}
  .cmp td.them::before{content:"一般的な講座：";color:var(--sub)}
  .cmp td.us{background:none;padding-top:6px}
  .cmp tbody tr:first-child td.us{box-shadow:none}
  .tag{display:none}
  .hero{padding-top:calc(var(--nav-h) + 70px)}
  .hero .btn{flex:1 1 100%;justify-content:center}
  .cta-s .row .btn{flex:1 1 100%;justify-content:center}
  .ins dl{grid-template-columns:88px 1fr}
  .cta-s h2{font-size:clamp(26px,7.4vw,34px)}
  .ins .ph{max-width:240px;aspect-ratio:1/1}
  .path{row-gap:36px}
}

/* =========================================================
   複数ページ版で追加したもの
   ========================================================= */
.nav ul a[aria-current]{opacity:1;position:relative}
.nav ul a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--grad)}
.drawer a[aria-current]{color:#9FC3FF}

/* ---- トップ：中央揃え ---- */
.vhero{position:relative;height:100svh;min-height:520px;background:var(--navy);overflow:hidden;padding:0}
.vh-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.vh-video.ready{opacity:1}
.vh-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:radial-gradient(60% 60% at 50% 45%,rgba(122,91,232,.22),rgba(46,139,238,.08) 55%,transparent),var(--navy)}
.vh-fallback img{width:44px;height:63px;opacity:.9}
.vh-fallback span{font:600 11px/1 var(--en);letter-spacing:.3em;color:var(--sub-d)}
.top-hero{background:var(--navy);color:#fff;text-align:center;padding:clamp(90px,11vw,140px) 0 0;overflow:hidden}
.top-hero::before{content:"";position:absolute;left:50%;top:34%;width:1100px;height:900px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(122,91,232,.26),rgba(46,139,238,.10) 55%,transparent);pointer-events:none}
.top-hero .wrap{position:relative}
br.sp{display:none}
@media(max-width:760px){br.sp{display:inline}}
.top-hero .mk{width:44px;height:63px;margin:0 auto 30px}
.top-hero .eb{font:600 11px/1 var(--en);letter-spacing:.24em;color:var(--sub-d)}
.top-hero .shine{margin-top:20px}
.top-hero h1{margin-top:16px;font-size:clamp(30px,4.4vw,58px);word-break:keep-all;line-break:strict;font-weight:900;line-height:1.38;letter-spacing:.005em}
.top-hero .lead{margin:26px auto 0;color:#C9CFDB;font-size:15px;max-width:30em}
.top-hero .cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:40px}
.top-hero .note{margin-top:18px;font-size:12px;color:var(--sub-d)}
.top-hero .note b{color:#fff;font-family:var(--en);font-weight:700}
.top-hero{padding-bottom:clamp(90px,11vw,140px)}
/* ---- 画面イメージ（Web版＋スマホ版）----
   1100×700 の設計サイズで組み、site.js で幅に合わせて縮小する */
.web{position:absolute;left:0;top:0;width:920px;transform:scale(var(--s,1));transform-origin:0 0;height:600px;border-radius:14px;overflow:hidden;background:#fff;color:var(--ink);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.w-bar{height:38px;background:#EEF0F3;display:flex;align-items:center;padding:0 14px;gap:7px;border-bottom:1px solid #E2E4E8}
.w-bar i{width:11px;height:11px;border-radius:50%;background:#D5D8DE}
.w-bar span{margin:0 auto;height:22px;min-width:300px;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--sub);transform:translateX(-20px)}
.w-body{display:grid;grid-template-columns:190px 1fr 250px;height:562px}
.w-side{border-right:1px solid #ECEDF0;padding:18px 14px;display:flex;flex-direction:column;gap:4px}
.w-logo{display:flex;align-items:center;gap:8px;font:800 12.5px/1 var(--disp);margin:0 6px 20px}
.w-logo img{width:14px;height:20px}
.w-nav{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:9px;font-size:12px;font-weight:700;color:#4A4F57}
.w-nav b{width:16px;height:16px;border-radius:5px;border:1.6px solid #B9BDC5;flex:none}
.w-nav.on{background:#F1EEFD;color:var(--ink)}
.w-nav.on b{border:0;background:var(--grad)}
.w-side .w-up{margin-top:auto;border-radius:12px;background:var(--navy);color:#fff;padding:14px;font-size:10.5px;line-height:1.6}
.w-side .w-up strong{display:block;font-size:12px;margin-bottom:4px}
.w-main{padding:20px 22px;background:#F7F8FA;overflow:hidden}
.w-crumb{font:600 9.5px/1 var(--en);letter-spacing:.14em;color:var(--sub)}
.w-main h4{margin-top:8px;font-size:17px;font-weight:900}
.w-vid{margin-top:14px;border-radius:12px;aspect-ratio:16/9;background:linear-gradient(135deg,#25335A,#111828);position:relative;overflow:hidden}
.w-vid::before{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(255,255,255,.16)}
.w-vid::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.w-vid .bar{position:absolute;left:16px;right:16px;bottom:14px;height:4px;border-radius:4px;background:rgba(255,255,255,.2)}
.w-vid .bar i{display:block;width:38%;height:100%;border-radius:4px;background:var(--grad)}
.w-vid .tt{position:absolute;left:16px;top:14px;color:#fff;font-size:11px;font-weight:700}
.w-tabs{display:flex;gap:18px;margin-top:16px;border-bottom:1px solid #E4E5E8;font-size:11.5px;font-weight:700;color:var(--sub)}
.w-tabs span{padding-bottom:9px}
.w-tabs .on{color:var(--ink);box-shadow:inset 0 -2px 0 #7A5BE8}
.w-note{margin-top:12px;display:grid;gap:7px}
.w-note i{display:block;height:7px;border-radius:4px;background:#E3E5E9}
.w-note i:nth-child(2){width:86%}.w-note i:nth-child(3){width:64%}
.w-right{border-left:1px solid #ECEDF0;padding:20px 16px;background:#fff}
.w-right small{display:block;font:600 9.5px/1 var(--en);letter-spacing:.14em;color:var(--sub)}
.w-right .big{display:flex;align-items:baseline;gap:6px;margin-top:10px;font:800 30px/1 var(--disp)}
.w-right .big span{font:600 11px/1 var(--en);color:var(--sub)}
.w-right .prog{margin-top:10px}
.w-list{margin-top:20px;display:grid;gap:6px}
.w-list div{display:flex;align-items:center;gap:9px;border:1px solid #EEF0F3;border-radius:10px;padding:9px 10px;font-size:10.5px;font-weight:700}
.w-list em{font:700 9px/1 var(--en);font-style:normal;color:var(--sub);width:18px}
.w-list .ck{margin-left:auto;width:13px;height:13px;border-radius:50%;border:1.5px solid #D5D8DE;flex:none}
.w-list .done .ck{border:0;background:var(--grad)}
.w-list .now{border-color:#C9B8F5;background:#FAF8FF}

/* ---- スクロール演出の共通部分 ---- */
.scene{position:relative;padding:0;height:280vh}
.scene .stage{position:sticky;top:0;height:100svh;padding-top:calc(var(--nav-h) + 16px);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;perspective:1700px}
.scene .s-hd{text-align:center;margin-bottom:clamp(24px,4vh,44px);position:relative;z-index:2}
.scene .s-hd .eb{display:block;font:600 11px/1 var(--en);letter-spacing:.22em;color:var(--sub)}
.scene .s-hd h2{margin-top:12px;font-size:clamp(24px,3.2vw,38px);font-weight:900;line-height:1.45}
.dark.scene .s-hd .eb{color:var(--sub-d)}
.pts{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,4vh,40px);position:relative;z-index:2}
.pts span{height:36px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;font-size:12.5px;font-weight:700;background:#fff;border:1px solid var(--line);
  opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 10px));transition:none}
.dark .pts span{background:rgba(255,255,255,.06);border-color:var(--line-d);color:#fff}

/* ---- iPhone（実機寄せ：iPhone 15 Pro 比率 71.6×146.6mm）---- */
.iph{--w:min(clamp(230px,22vw,286px),calc((100svh - 390px) * .488));position:relative;width:var(--w);aspect-ratio:.488;
  transform-style:preserve-3d;transform:rotateY(var(--ry,0deg)) rotateX(var(--rx2,0deg)) rotateZ(var(--rz,0deg)) translateY(var(--ty,0px));will-change:transform}
.iph .face,.iph .edge{position:absolute;inset:0;border-radius:14% / 6.83%}
.iph .edge{background:linear-gradient(90deg,#55585E,#9DA0A6 18%,#6B6E74 40%,#B7BABF 62%,#5C5F65 85%,#8E9197);transform:translateZ(var(--z))}
.iph .face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.iph .front{transform:translateZ(4.6px);background:#08090B;padding:2.4%;
  box-shadow:inset 0 0 0 1.2px #A4A7AC,inset 0 0 0 2.6px #3B3E44,inset 0 0 0 3.4px #0A0B0D}
.iph .btn-a,.iph .btn-b,.iph .btn-c,.iph .btn-d{position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#4E5157,#A9ACB1);transform:translateZ(0)}
.iph .btn-a{left:-2.5px;top:17.5%;height:5.5%}
.iph .btn-b{left:-2.5px;top:26%;height:9.5%}
.iph .btn-c{left:-2.5px;top:37.5%;height:9.5%}
.iph .btn-d{right:-2.5px;top:28%;height:15%}
.iph .screen{position:relative;height:100%;border-radius:12.4% / 5.95%;background:#F2F3F7;overflow:hidden;display:flex;flex-direction:column;color:var(--ink)}
.iph .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.22) 44%,rgba(255,255,255,0) 58%);
  background-size:300% 100%;background-position:calc(var(--g,50) * 1%) 0;mix-blend-mode:screen}
.iph .island{position:absolute;left:50%;top:2.1%;transform:translateX(-50%);width:32%;height:3.9%;border-radius:999px;background:#000;z-index:6}
.iph .island::after{content:"";position:absolute;right:16%;top:50%;width:13%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 40% 40%,#1E2A44,#05060A 70%)}
.ap-sb{display:flex;justify-content:space-between;align-items:center;padding:0 9% 0 11%;height:9%;flex:none;font:600 calc(var(--w) * .047)/1 -apple-system,'Inter',sans-serif}
.ap-sb .ic{display:flex;align-items:center;gap:calc(var(--w) * .016)}
.ap-sb svg{height:calc(var(--w) * .038);width:auto;display:block}
.ap-hd{padding:1% 6.5% 3%;flex:none}
.ap-hd small{display:block;font:600 calc(var(--w)*.031)/1 var(--en);letter-spacing:.12em;color:var(--sub)}
.ap-hd b{display:block;margin-top:2.5%;font-size:calc(var(--w)*.085);font-weight:900;letter-spacing:-.01em}
.ap-card{margin:0 5%;border-radius:calc(var(--w)*.06);background:#fff;padding:5% 5% 4.5%;box-shadow:0 1px 0 rgba(0,0,0,.04),0 6px 18px -10px rgba(17,24,40,.25);flex:none}
.ap-vid{position:relative;border-radius:calc(var(--w)*.04);aspect-ratio:16/9;overflow:hidden;
  background:radial-gradient(120% 90% at 80% 10%,#3D4E7E,transparent 60%),linear-gradient(140deg,#24304F,#0E1424)}
.ap-vid::before{content:"";position:absolute;left:50%;top:50%;width:20%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(4px)}
.ap-vid::after{content:"";position:absolute;left:51.5%;top:50%;transform:translate(-50%,-50%);border-left:calc(var(--w)*.04) solid #fff;border-top:calc(var(--w)*.026) solid transparent;border-bottom:calc(var(--w)*.026) solid transparent}
.ap-vid .t{position:absolute;right:4%;bottom:6%;font:600 calc(var(--w)*.03)/1 var(--en);color:#fff;background:rgba(0,0,0,.4);padding:2% 3%;border-radius:4px}
.ap-card h5{margin-top:5%;font-size:calc(var(--w)*.05);font-weight:900;line-height:1.35}
.ap-card p{margin-top:1.5%;font-size:calc(var(--w)*.034);color:var(--sub)}
.ap-pr{margin-top:4%;height:calc(var(--w)*.018);border-radius:9px;background:#ECEDF1;overflow:hidden}
.ap-pr i{display:block;height:100%;width:42%;background:var(--grad);border-radius:9px}
.ap-sec{display:flex;justify-content:space-between;padding:6% 6.5% 2.5%;font-size:calc(var(--w)*.042);font-weight:900;flex:none}
.ap-sec span{font:600 calc(var(--w)*.034)/1.6 var(--en);color:var(--blue)}
.ap-list{margin:0 5%;background:#fff;border-radius:calc(var(--w)*.05);overflow:hidden;flex:none}
.ap-list div{display:flex;align-items:center;gap:4.5%;padding:3.8% 5%;font-size:calc(var(--w)*.04);font-weight:700;white-space:nowrap;overflow:hidden}
.ap-list div+div{border-top:1px solid #EEEFF2}
.ap-list em{font:700 calc(var(--w)*.03)/1 var(--en);font-style:normal;color:var(--sub);width:7%}
.ap-list i{margin-left:auto;width:calc(var(--w)*.055);aspect-ratio:1;border-radius:50%;border:1.5px solid #D2D5DB;flex:none}
.ap-list .d i{border:0;background:var(--grad)}
.ap-list .n{color:#5B3FD6}
.ap-tab{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);padding:2.5% 4% 8.5%;background:rgba(255,255,255,.94);border-top:1px solid #E6E7EB;flex:none}
.ap-tab span{display:flex;flex-direction:column;align-items:center;gap:calc(var(--w)*.012);font-size:calc(var(--w)*.028);font-weight:700;color:#9AA0AA}
.ap-tab span.on{color:#5B3FD6}
.ap-tab svg{width:calc(var(--w)*.075);height:calc(var(--w)*.075)}
.iph .home{position:absolute;left:50%;bottom:1.3%;transform:translateX(-50%);width:35%;height:calc(var(--w)*.016);border-radius:9px;background:#111;z-index:6}
/* 背面 */
.iph .back{transform:rotateY(180deg) translateZ(4.6px);
  background:radial-gradient(120% 70% at 30% 20%,#2A3656,#151D31 55%,#0D1322);
  box-shadow:inset 0 0 0 1.2px #A4A7AC,inset 0 0 0 2.4px #4A4D53}
.iph .back::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.10) 48%,rgba(255,255,255,0) 60%);background-size:300% 100%;background-position:calc(var(--g,50) * 1%) 0}
.iph .cam{position:absolute;left:5.5%;top:2.6%;width:41%;aspect-ratio:1;border-radius:26%;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.35)}
.iph .lens{position:absolute;width:41%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#0A0E18 0 30%,#1D2740 31% 42%,#05070C 43% 60%,#4A5268 61% 66%,#22262E 67% 100%);
  box-shadow:0 0 0 2px #1A1E26,0 2px 4px rgba(0,0,0,.6)}
.iph .lens::after{content:"";position:absolute;left:30%;top:26%;width:14%;aspect-ratio:1;border-radius:50%;background:rgba(150,180,255,.55);filter:blur(.5px)}
.iph .lens.l1{left:6%;top:6%}.iph .lens.l2{left:6%;bottom:6%}.iph .lens.l3{right:6%;top:29.5%}
.iph .flash{position:absolute;right:13%;top:9%;width:13%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#F4EBD6,#B9AE95)}
.iph .lidar{position:absolute;right:13%;bottom:10%;width:11%;aspect-ratio:1;border-radius:50%;background:#0B0D12;box-shadow:0 0 0 1.5px #2B2F38}
.iph .back img{position:absolute;left:50%;top:50%;width:18%;height:auto;transform:translate(-50%,-50%);opacity:.92}
.iph-shadow{position:absolute;left:50%;bottom:calc(50% - var(--w) / .488 / 2 - 26px);width:calc(var(--w) * .9);height:26px;transform:translateX(-50%) scaleX(var(--shx,1));border-radius:50%;
  background:radial-gradient(closest-side,rgba(17,24,40,.32),transparent);pointer-events:none}
.iph-wrap{position:relative;display:flex;justify-content:center}

/* ---- MacBook（フタが開く）----
   1200×860 の設計サイズ。視点はやや上から。キーボード面は手前に寝かせて置く */
.mac{position:relative;width:min(1100px,calc(100vw - 2 * var(--gut)),calc((100svh - 340px) * 1.3));height:calc(860px * var(--s,1))}
.mac-in{position:absolute;left:0;top:0;width:1200px;height:860px;transform:scale(var(--s,1));transform-origin:0 0;transform-style:preserve-3d;perspective:3000px;perspective-origin:50% -18%}
.hinge{position:absolute;left:130px;top:0;width:940px;height:622px;transform-style:preserve-3d}
.lid{position:absolute;inset:0;transform-origin:50% 100%;transform-style:preserve-3d;transform:rotateX(var(--lx,6deg));will-change:transform}
.lid .lf,.lid .lb{position:absolute;inset:0;border-radius:22px 22px 6px 6px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lid .lf{background:#0A0A0C;padding:12px 10px 10px;box-shadow:inset 0 0 0 1.5px #3A3C40,inset 0 0 0 2.5px #8E9095}
.lid .lf .notch{position:absolute;left:50%;top:0;transform:translateX(-50%);width:130px;height:16px;border-radius:0 0 10px 10px;background:#0A0A0C;z-index:4}
.lid .lf .notch::after{content:"";position:absolute;left:50%;top:5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#2B3654,#050608)}
.lid .scr{position:relative;width:920px;height:600px;border-radius:12px 12px 2px 2px;overflow:hidden}
.lid .scr .web{position:absolute;left:0;top:0;transform:none;border-radius:0;box-shadow:none}
.lid .scr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%),linear-gradient(115deg,rgba(255,255,255,0) 52%,rgba(255,255,255,.06) 60%,rgba(255,255,255,0) 68%)}
.lid .lb{transform:rotateX(180deg);background:linear-gradient(0deg,#D9DBDF,#C2C5CA 55%,#AEB1B7);box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);display:flex;align-items:center;justify-content:center}
.lid .lb img{width:58px;height:auto;filter:grayscale(1) brightness(.5) contrast(1.3);opacity:.55}
.base{position:absolute;left:0;top:100%;width:940px;height:622px;transform-origin:50% 0;transform:rotateX(90deg);transform-style:preserve-3d;
  border-radius:4px 4px 26px 26px;background:linear-gradient(180deg,#B8BBC1,#D3D6DA 12%,#DADCE0 70%,#CDD0D5)}
.kb{position:absolute;left:62px;right:62px;top:46px;height:268px;border-radius:10px;background:#1C1D20;padding:8px;
  background-image:repeating-linear-gradient(90deg,transparent 0 52px,#1C1D20 52px 58px),repeating-linear-gradient(180deg,transparent 0 37px,#1C1D20 37px 43px),linear-gradient(#2E3034,#2E3034);
  background-origin:content-box;background-clip:content-box;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.tp{position:absolute;left:50%;top:336px;width:380px;height:236px;transform:translateX(-50%);border-radius:14px;background:linear-gradient(180deg,#CBCED3,#D6D8DC);box-shadow:inset 0 0 0 1px rgba(0,0,0,.10)}
.lip{position:absolute;left:0;top:100%;width:940px;height:18px;transform-origin:50% 0;transform:rotateX(-90deg);border-radius:0 0 18px 18px / 0 0 14px 14px;
  background:linear-gradient(180deg,#E7E9EC,#BFC2C7 40%,#8D9096)}
.lip::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:140px;height:7px;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#9A9DA3,#C3C6CB)}
.mac-shadow{position:absolute;left:50%;top:820px;width:1180px;height:60px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent)}

@media (prefers-reduced-motion:reduce){
  .scene{height:auto}
  .scene .stage{position:relative;height:auto;padding:clamp(80px,10vw,130px) 0}
  .pts span{--o:1}
}
@media(max-width:760px){
  .scene{height:230vh}
  .iph{--w:min(232px,60vw,calc((100svh - 330px) * .488))}
}

.statement{text-align:center}
.statement h2{font-size:clamp(28px,4vw,46px);font-weight:900;line-height:1.45}
.statement .eb{display:block;margin-top:14px;font:600 11px/1 var(--en);letter-spacing:.18em;color:var(--sub)}
.statement p{margin:26px auto 0;max-width:38em;color:var(--sub);font-size:15px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);max-width:820px;margin:clamp(48px,6vw,72px) auto 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div{padding:30px 10px;text-align:center}
.stats div+div{border-left:1px solid var(--line)}
.stats b{display:block;font:800 clamp(34px,4.4vw,50px)/1 var(--disp);letter-spacing:-.02em}
.stats b small{font-size:.42em;font-family:var(--sans);font-weight:700;margin-left:2px;letter-spacing:0}
.stats span{display:block;margin-top:12px;font-size:12.5px;color:var(--sub)}

.entry{display:grid;grid-template-columns:repeat(2,1fr);max-width:960px;margin:0 auto;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.entry a{position:relative;display:block;padding:clamp(30px,4vw,46px) clamp(24px,3vw,40px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;background:#fff;transition:background .3s}
.entry a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--grad);transform:scaleX(0);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.entry a:hover::before{transform:scaleX(1)}
.entry a:hover{background:#FBFBFA}
.entry .lb{font:600 10.5px/1 var(--en);letter-spacing:.18em;color:var(--blue)}
.entry h3{margin-top:12px;font-size:clamp(19px,2vw,23px);font-weight:900}
.entry p{margin-top:8px;font-size:13px;color:var(--sub)}
.entry i{display:inline-flex;margin-top:18px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);align-items:center;justify-content:center;transition:border-color .3s}
.entry i svg{width:14px;height:14px;transition:transform .25s}
.entry a:hover i{border-color:var(--ink)}
.entry a:hover i svg{transform:translateX(2px)}
.center-hd{text-align:center;margin-bottom:clamp(40px,5vw,60px)}
.center-hd h2{font-size:clamp(26px,3.4vw,40px);font-weight:900;line-height:1.45}
.center-hd .eb{display:block;margin-top:12px;font:600 11px/1 var(--en);letter-spacing:.18em;color:var(--sub)}

/* ---- 下層ページの見出し ---- */
.ph-head{background:var(--navy);color:#fff;text-align:center;padding:calc(var(--nav-h) + 96px) 0 clamp(70px,8vw,100px);overflow:hidden}
.ph-head::before{content:"";position:absolute;left:50%;top:0;width:1000px;height:600px;transform:translate(-50%,-40%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(122,91,232,.22),rgba(46,139,238,.08) 55%,transparent);pointer-events:none}
.ph-head .wrap{position:relative}
.crumb{font-size:11.5px;color:var(--sub-d);display:flex;justify-content:center;gap:10px}
.crumb a:hover{color:#fff}
.ph-head .eb{display:block;margin-top:30px;font:600 11px/1 var(--en);letter-spacing:.22em;color:var(--sub-d)}
.ph-head h1{margin-top:16px;font-size:clamp(32px,4.6vw,56px);font-weight:900;line-height:1.35}
.ph-head p{margin:22px auto 0;max-width:32em;color:#C9CFDB;font-size:15px}

/* ---- 明るい地での部品 ---- */
.soon.light{border-color:#D3D6DC}
.soon.light .lb,.soon.light div span{color:var(--sub)}
.soon.light div strong{color:var(--ink)}
.dc,.pc{color:#fff}
.trial.light{border-top-color:var(--line)}
.trial.light p{color:var(--sub)}
.next{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:clamp(40px,5vw,60px)}

@media(max-width:760px){
  .stats div{padding:22px 4px}
  .stats b{font-size:clamp(22px,7vw,30px)}
  .stats span{font-size:10.5px;margin-top:8px}
  .entry{grid-template-columns:1fr}
  .top-hero{padding-top:80px}
  .vhero{height:100svh}
  .top-hero .mk{width:36px;height:52px;margin-bottom:24px}
  .top-hero .cta .btn,.next .btn{flex:1 1 100%;justify-content:center}
  .top-hero .lead br{display:none}
}