/* r6 public/index.html styles, unchanged design foundation. */


:root{
  
  --maxw:1304px; --margin:60px; --gutter:24px;
  --prose:760px;
  --sec:120px;          

  
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s7:64px; --s8:80px; --s9:96px;

  
  --ink:#131A29;        
  --ink-2:#5A6478;      
  --ink-3:#8E97A8;      
  --paper:#FFFFFF;
  --paper-2:#F6F4EF;    
  --line:#E3DFD5;
  --navy:#0F1B33;       
  --navy-2:#182A4A;
  --on-navy:#EEF1F7;
  --on-navy-2:#A9B4CA;
  --accent:#C8A24B;     
  --accent-lit:#E3C87C;
  --cta:#D9791F;

  --ease:cubic-bezier(0.32,0.72,0,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; }
body{
  margin:0; background:var(--paper-2); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP",sans-serif;
  font-size:16px; line-height:var(--lh,32px); letter-spacing:0.02em;
  -webkit-font-smoothing:antialiased; text-wrap:pretty; overflow-x:hidden; overflow-x:clip;
}
img{ max-width:100%; display:block; }


.wrap{ width:min(100% - var(--margin)*2, var(--maxw)); margin-inline:auto; }
.prose{ max-width:var(--prose); }
.section{ padding-block:var(--sec); }
.bleed{ width:100vw; margin-left:calc(50% - 50vw); }

.paper{ background:var(--paper); }
.cream{ background:var(--paper-2); }
.dark{ background:var(--navy); color:var(--on-navy); }
.dark h2,.dark h3{ color:var(--on-navy); }
.dark p{ color:var(--on-navy-2); }


h1,h2,h3,h4{ margin:0; font-weight:600; text-wrap:balance; letter-spacing:0.005em; }
.t-hero{ font-size:64px; line-height:88px; }
.t-1{ font-size:40px; line-height:64px; }
.t-2{ font-size:28px; line-height:48px; }
.t-3{ font-size:20px; line-height:32px; }
p{ margin:0 0 var(--s3); }
p:last-child{ margin-bottom:0; }
.lead{ font-size:20px; line-height:40px; color:var(--ink-2); }
.small{ font-size:14px; line-height:26px; color:var(--ink-2); }
.tiny{ font-size:12px; line-height:20px; color:var(--ink-3); }
strong{ font-weight:600; color:var(--ink); }
.dark strong{ color:var(--paper); }

.hero strong,.cta strong,.band-cap strong{ color:#fff; }
.num{ font-variant-numeric:tabular-nums; }


.mark{ margin-bottom:var(--s5); }
.mark .jp{ margin:0 0 var(--s1); font-size:12px; line-height:20px; font-weight:600;
  letter-spacing:0.18em; color:var(--accent); }
.mark .en{ margin:0; font-size:104px; line-height:104px; font-weight:600;
  letter-spacing:-0.03em; color:rgba(19,26,41,0.10); }
.dark .mark .en{ color:rgba(227,200,124,0.20); }



[data-wipe]{ clip-path:inset(0 100% 0 0); transition:clip-path 1150ms var(--ease); }
[data-wipe].on{ clip-path:inset(0 0 0 0); }

[data-fade]{ opacity:0; transform:translateY(48px);
  transition:opacity 1050ms var(--ease), transform 1050ms var(--ease); }
[data-fade].on{ opacity:1; transform:translateY(0); }

[data-rise]{ opacity:0; transform:translateY(72px);
  transition:opacity 1200ms var(--ease), transform 1200ms var(--ease); }
[data-rise].on{ opacity:1; transform:translateY(0); }

[data-zoom]{ overflow:hidden; }
[data-zoom] img{ transform:scale(1.18); transition:transform 1800ms var(--ease); }
[data-zoom].on img{ transform:scale(1); }

[data-d="1"]{ transition-delay:130ms; }
[data-d="2"]{ transition-delay:260ms; }
[data-d="3"]{ transition-delay:390ms; }
[data-d="4"]{ transition-delay:520ms; }
[data-d="1"] img{ transition-delay:130ms; }
[data-d="2"] img{ transition-delay:260ms; }


.skip{ position:absolute; left:16px; top:-80px; z-index:200; background:var(--navy);
  color:#fff; padding:12px 24px; border-radius:8px; font-size:14px; text-decoration:none;
  transition:top 300ms var(--ease); }
.skip:focus{ top:16px; }
.nav-wrap{ position:sticky; top:0; z-index:100; pointer-events:none; }
.nav{ margin:24px auto 0; width:max-content; max-width:calc(100% - 32px); pointer-events:auto;
  display:flex; align-items:center; gap:24px; padding:8px 8px 8px 24px; border-radius:999px;
  background:rgba(255,255,255,0.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line); transition:box-shadow 700ms var(--ease), background 700ms var(--ease); }
.nav.stuck{ box-shadow:0 10px 32px rgba(15,27,51,0.12); background:rgba(255,255,255,0.95); }
.brand{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); }
.brand img{ display:block; width:180px; height:auto; max-width:100%; }
footer .brand img{ width:240px; }
.nav ul{ display:flex; gap:22px; list-style:none; margin:0; padding:0; }
.nav a.l{ font-size:14px; color:var(--ink-2); text-decoration:none; white-space:nowrap;
  padding-block:4px; border-bottom:2px solid transparent; transition:color 600ms var(--ease), border-color 600ms var(--ease); }
.nav a.l:hover{ color:var(--ink); }
.nav a.l[aria-current="true"]{ color:var(--ink); border-bottom-color:var(--accent); }
.nav .go{ font-size:14px; font-weight:600; padding:10px 18px; border-radius:999px;
  background:var(--navy); color:#fff; text-decoration:none; white-space:nowrap;
  transition:transform 600ms var(--ease), background 600ms var(--ease); }
.nav .go:hover{ background:#0A1526; transform:translateY(-1px); }
.burger{ display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:999px;
  background:none; cursor:pointer; position:relative; padding:0; }
.burger span{ position:absolute; left:12px; width:18px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform 600ms var(--ease), top 600ms var(--ease); }
.burger span:nth-child(1){ top:16px; } .burger span:nth-child(2){ top:24px; }
.burger[aria-expanded="true"] span:nth-child(1){ top:20px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ top:20px; transform:rotate(-45deg); }
.sheet{ position:fixed; inset:0; z-index:90; background:rgba(255,255,255,0.9);
  backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
  display:flex; flex-direction:column; justify-content:center; padding:80px 40px;
  opacity:0; visibility:hidden; transition:opacity 600ms var(--ease), visibility 600ms var(--ease); }
.sheet.open{ opacity:1; visibility:visible; }
.sheet ul{ list-style:none; margin:0; padding:0; display:grid; gap:24px; }
.sheet a{ font-size:26px; font-weight:600; color:var(--ink); text-decoration:none; display:block;
  opacity:0; transform:translateY(40px); transition:opacity 700ms var(--ease), transform 700ms var(--ease); }
.sheet.open a{ opacity:1; transform:none; }
.sheet.open li:nth-child(1) a{ transition-delay:80ms; }
.sheet.open li:nth-child(2) a{ transition-delay:130ms; }
.sheet.open li:nth-child(3) a{ transition-delay:180ms; }
.sheet.open li:nth-child(4) a{ transition-delay:230ms; }
.sheet.open li:nth-child(5) a{ transition-delay:280ms; }
.sheet.open li:nth-child(6) a{ transition-delay:330ms; }


.btn{ display:inline-flex; align-items:center; gap:10px; font:600 17px/26px inherit;
  font-family:inherit; padding:18px 32px; border-radius:999px; border:1px solid var(--cta);
  background:var(--cta); color:#fff; text-decoration:none; cursor:pointer;
  transition:transform 600ms var(--ease), background 600ms var(--ease), box-shadow 600ms var(--ease); }
.btn:hover{ background:#BC6716; border-color:#BC6716; transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(217,121,31,0.32); }
.btn:active{ transform:scale(0.98); }
.btn:focus-visible{ outline:2px solid var(--accent-lit); outline-offset:4px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-line{ background:transparent; color:var(--on-navy); border-color:rgba(255,255,255,0.28); }
.btn-line:hover{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.5); box-shadow:none; }
.hint{ font-size:14px; color:var(--ink-3); }
.hint a{ color:inherit; text-underline-offset:3px; }
.dark .hint{ color:var(--on-navy-2); }


.hero{ position:relative; min-height:94vh; display:flex; align-items:center; overflow:hidden;
  background:var(--navy); }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.72;
  animation:drift 50s ease-in-out infinite alternate; }
@keyframes drift{ from{ transform:scale(1.04); } to{ transform:scale(1.14) translate3d(-1.6%,-1.2%,0); } }
.hero-veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(15,27,51,.96) 0%, rgba(15,27,51,.86) 42%, rgba(15,27,51,.42) 78%, rgba(15,27,51,.3) 100%); }
.hero .wrap{ position:relative; z-index:2; padding-block:120px; }
.hero h1{ color:var(--on-navy); max-width:900px; margin-bottom:var(--s4); }
.hero h1 em{ font-style:normal; color:var(--accent-lit); }
.hero .lead{ color:var(--on-navy-2); max-width:640px; margin-bottom:var(--s3); }
.hero .eyebrow{ margin:0 0 var(--s3); font-size:12px; letter-spacing:.2em; font-weight:600; color:var(--accent-lit); }
.hero-course{ width:fit-content; max-width:640px; margin:0 0 var(--s6); padding:16px 24px;
  border-left:4px solid var(--accent-lit); border-radius:8px; background:var(--navy-2); color:var(--on-navy); }
.hero-course-name{ display:block; font-size:14px; line-height:24px; font-weight:600; }
.hero-course-time{ display:block; margin-top:var(--s1); font-size:20px; line-height:32px; font-weight:600; }
.hero-course-time strong{ color:var(--accent-lit); }


.band{ position:relative; overflow:hidden; height:clamp(360px, 64vh, 680px); }
.band img{ width:100%; height:100%; object-fit:cover; }
.band-cap{ position:absolute; left:0; right:0; bottom:0; padding:56px 0 40px;
  background:linear-gradient(0deg, rgba(15,27,51,.97) 0%, rgba(15,27,51,.90) 42%, rgba(15,27,51,.55) 74%, rgba(15,27,51,0) 100%); }
.band-cap p{ margin:0; color:#fff; font-size:20px; line-height:34px; font-weight:600; }

.split{ display:grid; grid-template-columns:1.22fr 1fr; gap:var(--s8); align-items:center; }
.split.wide{ grid-template-columns:1.55fr 1fr; }
.split.flip .pic{ order:2; }
.pic{ overflow:hidden; border-radius:20px; background:var(--line); }
.pic img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.pic.tall img{ aspect-ratio:4/5; }
.pic.wide img{ aspect-ratio:16/9; }


.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:var(--s6);
  transition:transform 600ms var(--ease), box-shadow 600ms var(--ease); }
.card:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(15,27,51,.08); }
.card h3{ margin-bottom:var(--s2); }
.card p{ color:var(--ink-2); margin:0; font-size:15px; line-height:28px; }
.card .no{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px;
  background:var(--navy); color:#fff; font-size:15px; font-weight:600; margin-bottom:var(--s3);
  font-variant-numeric:tabular-nums; }

.rows{ display:grid; gap:var(--s2); }
.row{ display:grid; grid-template-columns:44px 1fr; gap:var(--s3); padding:var(--s5);
  background:var(--paper); border:1px solid var(--line); border-radius:20px; }
.row .ic{ width:44px; height:44px; border-radius:12px; background:var(--paper-2);
  display:grid; place-items:center; }
.row h3{ margin-bottom:6px; }
.row p{ margin:0; color:var(--ink-2); font-size:15px; line-height:28px; }


.lesson{ display:grid; grid-template-columns:1.28fr 1fr; gap:var(--s8); align-items:center;
  padding-block:var(--s8); border-top:1px solid var(--line); }
.lesson:first-of-type{ border-top:0; padding-top:0; }
.lesson:nth-of-type(even) .pic{ order:2; }
.lesson .tag{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.16em;
  color:var(--accent); margin-bottom:var(--s2); }
.lesson h3{ margin-bottom:var(--s2); }
.lesson .goal{ font-size:15px; line-height:28px; color:var(--ink-2); margin-bottom:var(--s3); }
.lesson ul{ margin:0; padding-left:20px; }
.lesson li{ font-size:15px; line-height:30px; color:var(--ink-2); margin-bottom:6px; }

.opt{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); margin:0; }
.opt li{ list-style:none; padding:var(--s4); border:1px dashed var(--line); border-radius:16px;
  background:var(--paper); font-size:14px; line-height:26px; color:var(--ink-2); }
.opt b{ display:block; color:var(--ink); margin-bottom:6px; }


.bio{ list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:var(--s2); }
.bio li{ font-size:15px; line-height:28px; color:var(--ink-2);
  padding-left:var(--s2); border-left:2px solid var(--line); }
.cred{ display:inline-block; padding:6px 14px; border-radius:999px; background:var(--navy);
  color:#fff; font-size:12px; font-weight:600; letter-spacing:.04em; margin-bottom:var(--s3); }


.lines{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s5); }
.lines li{ padding-left:var(--s3); border-left:2px solid var(--accent); }
.lines b{ display:block; margin-bottom:6px; font-size:18px; line-height:30px; color:var(--paper); }
.lines span{ font-size:15px; line-height:28px; color:var(--on-navy-2); }


.two{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.box{ background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:var(--s6); }
.box ul{ list-style:none; margin:var(--s3) 0 0; padding:0; display:grid; gap:var(--s2); }
.box li{ display:grid; grid-template-columns:20px 1fr; gap:10px; font-size:15px; line-height:28px; color:var(--ink-2); }
.box li svg{ margin-top:5px; }
#fit .fit-answer{ display:block; margin-top:var(--s1); }


.price{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.plan{ background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:var(--s6); }
.plan.base{ border-color:var(--navy); border-width:2px; }
.plan .lab{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.08em;
  padding:6px 12px; border-radius:999px; background:var(--paper-2); color:var(--ink-2); margin-bottom:var(--s3); }
.plan.base .lab{ background:var(--navy); color:#fff; }
.plan .amt{ font-size:34px; line-height:48px; font-weight:600; color:var(--ink-3); margin-bottom:var(--s2); }
.plan ul{ list-style:none; margin:var(--s3) 0 0; padding:0; display:grid; gap:10px; }
.plan li{ display:grid; grid-template-columns:20px 1fr; gap:10px; font-size:15px; line-height:28px; color:var(--ink-2); }
.plan li svg{ margin-top:5px; }


.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); }


.faq{ display:grid; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:1fr 24px;
  gap:16px; align-items:center; padding:var(--s5) 0; font-size:18px; line-height:30px; font-weight:600;
  transition:color 500ms var(--ease); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--accent); }
.faq .chev{ transition:transform 500ms var(--ease); justify-self:end; }
.faq details[open] .chev{ transform:rotate(180deg); }
.faq .a{ padding:0 60px var(--s5) 0; font-size:15px; line-height:30px; color:var(--ink-2); }
.faq mark{ background:#F5E9CC; color:var(--ink); padding:0 5px; border-radius:4px; }


.cta{ position:relative; overflow:hidden; background:var(--navy); }
.cta-veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(15,27,51,.95) 0%, rgba(15,27,51,.78) 60%, rgba(15,27,51,.55) 100%); }
.cta .wrap{ position:relative; z-index:2; }
.form{ display:grid; gap:var(--s2); max-width:520px; margin-top:var(--s6); }
.release-hold{ padding:24px; border:1px solid rgba(227,200,124,.55); border-radius:16px; background:rgba(255,255,255,.08); color:var(--on-navy-2); }
.release-hold strong{ display:block; margin-bottom:8px; color:#fff; font-size:22px; line-height:1.5; }
.release-hold p{ margin:0; font-size:15px; line-height:1.9; }
.form .tiny a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.form label{ display:block; font-size:14px; font-weight:600; margin-bottom:8px; color:var(--on-navy); }
.form input{ width:100%; font-family:inherit; font-size:17px; line-height:26px; padding:16px 18px;
  border:1px solid rgba(255,255,255,.24); border-radius:12px;
  background:rgba(255,255,255,.06); color:#fff;
  transition:border-color 500ms var(--ease), box-shadow 500ms var(--ease); }
.form input::placeholder{ color:rgba(255,255,255,.36); }
.form input:hover{ border-color:rgba(255,255,255,.4); }
.form input:focus{ outline:none; border-color:var(--accent-lit); box-shadow:0 0 0 3px rgba(227,200,124,.22); }
.form input[aria-invalid="true"]{ border-color:#E9846F; }
.err{ display:none; font-size:14px; color:#E9846F; margin-top:6px; }
.err.on{ display:block; }
.done{ display:none; padding:16px 20px; border-radius:12px;
  background:rgba(227,200,124,.14); border:1px solid rgba(227,200,124,.4);
  font-size:14px; line-height:26px; color:var(--accent-lit); }
.done.on{ display:block; }


footer{ background:#0A1220; color:var(--on-navy-2); padding-block:var(--s8); }

.flinks{ list-style:none; margin:var(--s4) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:24px; }
.flinks a{ font-size:14px; color:var(--on-navy-2); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color 500ms var(--ease); }
.flinks a:hover{ border-bottom-color:var(--on-navy-2); }
.flinks span{ font-size:14px; color:#4C5872; }
.disc{ margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid #1B2740;
  font-size:12px; line-height:22px; color:#6C7A96; }
.disc p{ margin-bottom:6px; }



.curriculum-intro{ margin-bottom:var(--s8); }


.goalbox{ margin:var(--s3) 0; padding:14px 18px; border-left:3px solid var(--accent);
  background:rgba(200,162,75,.09); border-radius:0 10px 10px 0; }
.goalbox p{ margin:0; font-size:14px; line-height:26px; color:var(--ink); }
.goalbox b{ color:var(--accent); font-size:12px; letter-spacing:.1em; display:block; margin-bottom:4px; }


.statement{ max-width:none; margin:56px 0 0; font-size:24px; line-height:48px;
  color:var(--ink-2); letter-spacing:.01em; }
.statement strong{ color:var(--ink); }
.statement.sm{ margin-top:40px; font-size:20px; line-height:40px; }
.statement.dark-st{ color:var(--on-navy-2); }
.statement.dark-st strong{ color:#fff; }


.note2{ max-width:none; columns:2; column-gap:64px; }


.vs-note{ max-width:none; margin:24px 0 0; font-size:14px; line-height:26px;
  color:var(--on-navy-2); text-align:right; }
.closer{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:80px; align-items:center; margin-top:64px; }
.closer .lead{ max-width:none; margin:0; color:var(--on-navy-2); }
.closer .t-1{ margin:0; color:#fff; }
.bridge{ max-width:none; margin:64px 0 0; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:15px; line-height:28px; color:var(--on-navy-2); text-align:center; }
.bridge strong{ color:var(--accent-lit); }


.vs{ display:grid; grid-template-columns:minmax(0,.52fr) minmax(0,1fr) minmax(0,1fr);
  gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14);
  border-radius:20px; overflow:hidden; }
.vs > div{ background:var(--navy); padding:22px 24px; }
.vs .vs-h{ font-size:12px; font-weight:600; letter-spacing:.14em; padding-block:16px; }
.vs .vs-h.old{ color:var(--on-navy-2); }
.vs .vs-h.new{ color:var(--accent-lit); }
.vs .vs-k{ font-size:13px; font-weight:600; color:var(--on-navy-2); letter-spacing:.06em; }
.vs .vs-c{ font-size:15px; line-height:28px; color:var(--on-navy-2); }
.vs .vs-c.new{ background:rgba(200,162,75,.09); color:var(--on-navy); }
.vs .vs-c.new strong{ color:var(--accent-lit); }
.vs .vs-c.old strong{ color:var(--on-navy); }


.gains{ list-style:none; margin:0 0 var(--s5); padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.gains li{ padding:var(--s6); border:1px solid rgba(255,255,255,.16);
  border-radius:20px; background:rgba(255,255,255,.04); }
.gains .gn{ display:grid; place-items:center; width:56px; height:56px;
  margin-bottom:var(--s3); border-radius:16px; background:rgba(200,162,75,.16);
  color:var(--accent-lit); font-size:17px; font-weight:600; }
.gains h3{ margin:0 0 8px; color:#fff; }
.gains p{ margin:0; font-size:15px; line-height:28px; color:var(--on-navy-2); }
.gains strong{ color:var(--accent-lit); }


.exbox{ margin:0 0 var(--s6); padding:var(--s6);
  border-left:4px solid var(--accent-lit); border-radius:8px; background:var(--navy-2); }
.exbox .exlabel{ margin:0 0 var(--s2); font-size:12px; font-weight:600;
  letter-spacing:.14em; color:var(--accent-lit); }
.exbox p{ margin:0 0 var(--s2); font-size:16px; line-height:32px; color:var(--on-navy-2); }
.exbox strong{ color:#fff; }
.exbox p.exnote{ margin:var(--s3) 0 0; font-size:13px; line-height:24px; color:var(--on-navy-2); }
.vs-cap{ margin:0 0 var(--s3); font-size:13px; font-weight:600;
  letter-spacing:.06em; color:var(--accent-lit); }


.agent-flow{ display:grid; grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr);
  gap:var(--s2); align-items:stretch; margin:var(--s5) 0; }
.agent-stage{ min-width:0; padding:var(--s3); border:1px solid var(--line);
  border-radius:16px; background:var(--paper); }
.agent-stage.is-ai{ border-color:var(--navy); background:var(--navy); }
.agent-label{ display:block; margin:0 0 var(--s2); font-size:13px; font-weight:600;
  letter-spacing:.08em; color:var(--accent); }
.agent-stage h3{ margin:0 0 var(--s2); font-size:20px; line-height:32px; }
.agent-stage p{ margin:0; font-size:16px; line-height:32px; color:var(--ink-2); }
.agent-stage.is-ai .agent-label{ color:var(--accent-lit); }
.agent-stage.is-ai h3{ color:#fff; }
.agent-stage.is-ai p{ color:var(--on-navy-2); }
.agent-arrow{ display:grid; place-items:center; width:32px; font-size:24px; color:var(--accent); }
.loop-intro{ margin:0 0 var(--s4); font-size:16px; line-height:32px; color:var(--ink-2); }


.loopwrap{ position:relative; }
.loop{ list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); }

.loop::before{ content:none; position:absolute; z-index:0;
  left:10%; right:10%; top:72px; height:2px;
  background:linear-gradient(90deg,
    var(--line) 0%, var(--accent) 18%, var(--accent) 82%, var(--line) 100%); opacity:.55; }
.loop li{ position:relative; z-index:1; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding:40px 16px 32px; border-radius:24px;
  transition:background 600ms var(--ease); }
.loop li > p{ flex:1 0 auto; width:100%; }
.loop li::after{ content:"→"; position:absolute; right:-19px; top:59px;
  color:var(--accent); font-size:24px; line-height:32px; }
.loop li:nth-child(4)::after,.loop li:last-child::after{ content:none; }
.loop .ls-ic{ color:var(--navy); }
.loop .ls-when{ max-width:100%; }
.loop-scope{ margin:48px 0 0; color:var(--ink-3); }
.loop li:hover{ background:var(--paper); }
.loop .ls-ic{ display:grid; place-items:center; width:64px; height:64px; margin:0 auto 24px;
  border-radius:50%; background:var(--paper); border:2px solid var(--line);
  transition:border-color 600ms var(--ease), transform 600ms var(--ease),
             box-shadow 600ms var(--ease); }
.loop li:hover .ls-ic{ border-color:var(--accent); transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(15,27,51,.10); }
.loop .ls-no{ display:block; font-size:11px; font-weight:600; letter-spacing:.18em;
  color:var(--accent); margin-bottom:8px; font-variant-numeric:tabular-nums; }
.loop h3{ margin:0 0 12px; }
.loop p{ margin:0 0 16px; font-size:14px; line-height:26px; color:var(--ink-2); text-align:left; }
.loop .ls-when{ display:inline-block; font-size:11px; font-weight:600; letter-spacing:.06em;
  padding:5px 12px; border-radius:999px; background:var(--paper); border:1px solid var(--line);
  color:var(--ink-2); }


.loop-return{ position:relative; height:56px; margin:8px auto 0; width:80%;
  border:2px dashed var(--accent); border-top:0; border-radius:0 0 28px 28px; opacity:.5; }
.loop-return::before{ content:""; position:absolute; left:-6px; top:-9px;
  border-left:7px solid transparent; border-right:7px solid transparent;
  border-bottom:10px solid var(--accent); }
.loop-back{ position:absolute; left:0; right:0; bottom:-16px; margin:0;
  text-align:center; font-size:15px; line-height:32px; color:var(--ink-2); }
.loop-chip{ display:inline-block; padding:0 24px; background:var(--paper-2); }
.loop-back .loop-arrow{ color:var(--accent); font-size:19px; margin-right:10px; vertical-align:-2px; }
.loop-back .loop-sep{ margin:0 12px; color:var(--ink-3); }


.lsn{ border-top:1px solid var(--line); }
.lsn:first-of-type{ border-top:0; }
.lsn summary{ list-style:none; cursor:pointer; display:grid;
  grid-template-columns:132px 1fr 24px; gap:var(--s4); align-items:center;
  padding:var(--s5) 0; transition:color 500ms var(--ease); }
.lsn summary::-webkit-details-marker{ display:none; }
.lsn summary:hover .lsn-t b{ color:var(--accent); }
.lsn .lsn-no{ font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--accent); }
.lsn .lsn-no small{ display:block; margin-top:4px; font-size:11px; letter-spacing:.08em; color:var(--ink-3); }
.lsn .lsn-t b{ display:block; font-size:20px; line-height:32px; font-weight:600;
  transition:color 500ms var(--ease); }
.lsn .lsn-g{ display:block; margin-top:6px; font-size:14px; line-height:26px; color:var(--ink-2); }
.lsn .chev{ justify-self:end; transition:transform 500ms var(--ease); }
.lsn[open] .chev{ transform:rotate(180deg); }
.lsn-body{ display:grid; grid-template-columns:1fr 1.28fr; gap:var(--s6);
  align-items:start; padding:0 0 var(--s7) 132px; }
.lsn-body .pic img{ aspect-ratio:3/2; }
.lsn-body ul{ margin:0; padding-left:20px; }
.lsn-body li{ font-size:15px; line-height:30px; color:var(--ink-2); margin-bottom:6px; }


.sups{ display:grid; }
.sup{ border-bottom:1px solid var(--line); }
.sup summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:1fr 24px;
  gap:16px; align-items:center; padding:var(--s4) 0;
  font-size:17px; line-height:30px; transition:color 500ms var(--ease); }
.sup summary::-webkit-details-marker{ display:none; }
.sup summary:hover b{ color:var(--accent); }
.sup b{ font-weight:600; transition:color 500ms var(--ease); }
.sup .chev{ justify-self:end; transition:transform 500ms var(--ease); }
.sup[open] .chev{ transform:rotate(180deg); }
.sup .sup-a{ padding:0 48px var(--s4) 0; font-size:15px; line-height:30px; color:var(--ink-2); }
.sup .sup-a strong{ color:var(--ink); }


#teacher .cred{ padding:var(--s1) var(--s2); }
.pillar{ margin-top:var(--s4); padding:var(--s4) var(--s5);
  border-left:2px solid var(--accent); background:var(--paper-2); border-radius:0 16px 16px 0; }
.pillar .cred{ margin-bottom:var(--s2); }
.pillar p{ margin:0; font-size:16px; line-height:32px; color:var(--ink); }
.why3{ margin-top:var(--s7); padding:var(--s5) var(--s6); border:1px solid var(--line);
  border-left:4px solid var(--accent); border-radius:16px;
  background:var(--paper-2); color:var(--ink); font-size:18px; line-height:32px; }
.why3 strong{ color:var(--navy); }


.branch{ margin:var(--s3) 0 0; padding:10px 16px; border-radius:12px;
  border:1px dashed var(--line); background:var(--paper);
  font-size:13px; line-height:24px; color:var(--ink-2); }
.branch::before{ content:"＋ "; color:var(--accent); font-weight:600; }
.optcap{ margin:var(--s7) 0 var(--s3); font-size:12px; line-height:20px; font-weight:600;
  letter-spacing:.16em; color:var(--accent); }
.opt .bno{ display:grid; width:max-content; max-width:100%; white-space:nowrap; place-items:center; min-width:44px; height:26px; padding:0 8px; margin-bottom:8px;
  border-radius:999px; background:var(--navy); color:#fff; font-size:13px; font-weight:600;
  font-variant-numeric:tabular-nums; margin-right:10px; vertical-align:middle; }
.opt .bwhen{ display:block; margin-top:6px; font-size:12px; font-weight:400; color:var(--accent); letter-spacing:.04em; }


.verbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.verb{ background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:var(--s6); }
.verb .vn{ display:block; font-size:12px; font-weight:600; letter-spacing:.18em;
  color:var(--accent); margin-bottom:var(--s3); font-variant-numeric:tabular-nums; }
.verb p.t-2{ margin:0 0 10px; }
.verb p.small{ margin:0; }


.olab{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.1em;
  padding:5px 12px; border-radius:999px; background:var(--navy); color:#fff;
  margin-bottom:10px; white-space:nowrap; }


.four{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.four li{ display:grid; grid-template-columns:56px 1fr; gap:var(--s3); align-items:start;
  padding:var(--s6); border:1px solid rgba(255,255,255,.16); border-radius:20px;
  background:rgba(255,255,255,.04); }
.four .fn{ display:grid; place-items:center; width:56px; height:56px; border-radius:16px;
  background:rgba(200,162,75,.16); color:var(--accent-lit); font-size:17px; font-weight:600;
  font-variant-numeric:tabular-nums; }
.four h3{ margin:0 0 8px; color:#fff; }
.four p{ margin:0; font-size:15px; line-height:28px; color:var(--on-navy-2); }
.four strong{ color:var(--accent-lit); }


#support .lines b{ color:var(--ink); }

.sups{ max-width:none; grid-template-columns:1fr 1fr; column-gap:64px;
  align-items:start; align-content:start; }
.sups .sup:nth-last-child(1):nth-child(odd){ grid-column:1 / -1; }
#support .lines span{ color:var(--ink-2); }
#support .lines strong{ color:var(--ink); }
.limit{ margin-top:var(--s8); padding:var(--s6); border-radius:20px;
  background:var(--navy); color:var(--on-navy-2); }
.limit p.t-2{ margin:0 0 var(--s2); color:#fff; }
.limit p:last-child{ margin:0; font-size:15px; line-height:30px; }
.limit strong{ color:var(--accent-lit); }


.whybox{ margin-top:var(--s8); padding:var(--s6); border-radius:20px;
  background:var(--paper-2); border:1px solid var(--line); }
.whybox .cap{ margin:0 0 var(--s3); font-size:12px; line-height:20px; font-weight:600;
  letter-spacing:.16em; color:var(--accent); }
.whybox p{ font-size:16px; line-height:32px; color:var(--ink-2); }
.whybox p:last-child{ margin-bottom:0; }
#prep{ scroll-margin-top:96px; }


.pre{ margin-top:var(--s7); padding:var(--s6); border-radius:20px;
  background:var(--paper-2); border:1px dashed var(--line); }
.pre .cap{ margin:0 0 var(--s3); font-size:12px; line-height:20px; font-weight:600;
  letter-spacing:.16em; color:var(--accent); }
.pre ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
.pre li{ font-size:15px; line-height:28px; color:var(--ink-2); }
.pre b{ display:block; color:var(--ink); margin-bottom:4px; }




.mark.prose:has(.lead){
  max-width:none; display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);
  column-gap:var(--s8); align-items:end; }
.mark.prose:has(.lead) > .jp{ grid-column:1; grid-row:1; }
.mark.prose:has(.lead) > .en{ grid-column:1; grid-row:2; }
.mark.prose:has(.lead) > h2{ grid-column:1; grid-row:3; }
.mark.prose:has(.lead) > .lead{
  grid-column:2; grid-row:1 / 4; align-self:end;
  max-width:none; margin-top:0 !important; padding-bottom:6px; }


#support .lines{ max-width:none;
  grid-template-columns:1fr 1fr; column-gap:var(--s7); row-gap:var(--s5); }

#support .lines li:nth-child(5){ grid-column:1 / -1; }


#simple > .wrap > p.lead.prose,
#difference > .wrap > p.lead.prose{ max-width:1040px; }


.whybox{ max-width:none; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:var(--s7); align-items:start; }
.whybox .cap{ grid-column:1 / -1; }


.limit{ max-width:none; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  column-gap:var(--s7); align-items:center; }
.limit p.t-2{ margin:0; }


.pre{ max-width:none; }
.pre ul{ grid-template-columns:repeat(3,1fr); column-gap:var(--s5); }


#faq > .wrap{ display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  column-gap:var(--s7); align-items:start; }
#faq .mark{ max-width:none; margin-bottom:0; position:sticky; top:118px; }
#faq .faq{ max-width:none; }


#cta > .wrap{ display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  column-gap:var(--s8); align-items:center; }
#cta .mark{ grid-column:1; grid-row:1; margin-bottom:var(--s4); }
#cta > .wrap > p.lead.prose{ grid-column:1; grid-row:2; max-width:none; margin:0; }
#cta .form{ grid-column:2; grid-row:1 / 3; max-width:none; margin-top:0; align-self:center; }


@media (max-width:1100px){
  :root{ --margin:40px; --sec:88px; }
  .nav ul,.nav .go{ display:none; }
  .burger{ display:block; }
  .nav{ padding-right:8px; }
  .t-hero{ font-size:44px; line-height:66px; }
  .t-1{ font-size:32px; line-height:52px; }
  .mark .en{ font-size:64px; line-height:66px; }
  .cards,.steps,.opt{ grid-template-columns:repeat(2,1fr); }
  .loop{ grid-template-columns:repeat(3,1fr); row-gap:var(--s3); }
  .loop li:nth-child(4)::after{ content:"→"; }
  .loop li:nth-child(3n)::after,.loop li:last-child::after{ content:none; }
  .loop::before{ content:none; }
  .loop-return{ display:none; }
  .loop-back{ position:static; display:block; margin-top:var(--s4); }
  .loop-chip{ display:block; padding:16px 24px; border-radius:999px;
    border:1px dashed var(--accent); background:rgba(200,162,75,.07); }
  .statement{ font-size:20px; line-height:40px; }
  .closer{ grid-template-columns:1fr; row-gap:var(--s5); }
  .vs-note{ text-align:left; }
  .note2{ columns:1; }
  .sups{ grid-template-columns:1fr; }
  .lsn summary{ grid-template-columns:110px 1fr 24px; gap:var(--s3); }
  .lsn-body{ grid-template-columns:1fr; padding-left:0; }
  .verbs{ grid-template-columns:repeat(3,1fr); }
  .split,.split.wide,.lesson{ grid-template-columns:1fr; gap:var(--s5); }
  
  .mark.prose:has(.lead){ display:block; }
  .mark.prose:has(.lead) > .lead{ margin-top:var(--s3) !important; }
  #support .lines{ grid-template-columns:1fr; }
  .whybox,.limit{ display:block; }
  .limit p.t-2{ margin-bottom:var(--s2); }
  .pre ul{ grid-template-columns:repeat(2,1fr); }
  #faq > .wrap,#cta > .wrap{ display:block; }
  #faq .mark{ position:static; margin-bottom:var(--s5); }
  #cta .form{ max-width:520px; margin-top:var(--s6); }
  .split.flip .pic,.lesson:nth-of-type(even) .pic{ order:0; }
}
@media (max-width:720px){
  :root{ --margin:20px; --sec:72px; }
  .t-hero{ font-size:32px; line-height:52px; }
  .t-1{ font-size:26px; line-height:44px; }
  .t-2{ font-size:22px; line-height:38px; }
  .mark .en{ font-size:44px; line-height:46px; }
  .lead{ font-size:17px; line-height:34px; }
  .cards,.steps,.opt,.two,.price,.verbs,.four,.gains,.loop{ grid-template-columns:1fr; }
  .vs{ grid-template-columns:1fr; }
  .vs .vs-h:first-child{ display:none; }
  .vs .vs-k{ padding-bottom:0; }
  .agent-flow{ grid-template-columns:1fr; margin:var(--s4) 0; }
  .agent-arrow{ width:auto; height:32px; transform:rotate(90deg); }
  .loop{ grid-template-columns:1fr; }
  .loop li::after,.loop li:nth-child(3n)::after,.loop li:nth-child(4)::after{
    content:"↓"; top:auto; right:16px; bottom:0; }
  .loop li:last-child::after{ content:none; }
  .loop-scope{ margin-top:24px; }
  .loop li{ text-align:left; align-items:flex-start; padding:24px 0;
    border-top:1px solid var(--line); border-radius:0; }
  .loop li > p{ flex:0 0 auto; }
  .loop li:first-child{ border-top:0; }
  .loop .ls-ic{ margin:0 0 16px; }
  .statement{ font-size:18px; line-height:36px; }
  .lsn summary{ grid-template-columns:1fr 22px; gap:12px; }
  .lsn .lsn-no{ grid-column:1 / -1; }
  .lsn .lsn-t b{ font-size:18px; line-height:30px; }
  .sup .sup-a{ padding-right:0; }
  .pre ul{ grid-template-columns:1fr; }
  .four li{ grid-template-columns:44px 1fr; padding:var(--s5); }
  .four .fn{ width:44px; height:44px; border-radius:12px; font-size:15px; }
  .limit,.whybox,.pre{ padding:var(--s5); }
  .gains li,.exbox{ padding:var(--s5); }
  .hero{ min-height:auto; }
  .hero .wrap{ padding-block:96px 72px; }
  .hero-course{ max-width:100%; padding:16px; }
  .hero-course-time{ font-size:18px; line-height:32px; }
  .faq .a{ padding-right:0; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  [data-wipe],[data-fade],[data-rise]{ clip-path:none !important; opacity:1 !important; transform:none !important; }
  [data-zoom] img{ transform:none !important; }
  .hero-bg img{ animation:none !important; }
}