/* cohesion-r5: this sheet is the "legacy" layer — site/shared/cohesion-r5.css (unlayered, loaded last) sets the shared
   rails, rhythm and type roles over it. */
@layer legacy{
/* JET School LP V2 (A / B) — shared tokens and components. Local review build, Stage 2 2026-11-04.
   Colours are the current JET LP values (v4 implementation/tmp/v3.css, variants/shared-fv.css):
   cyan #00b4c8 / #009daf / #00798a, orange #f57914 (small accents only), ink #274045, muted #4e6569,
   pale aqua #ecf9fb / #d2f2f6, rule #cfe6ea. LINE green #06C755 is used for the CTA only.
   Type: Noto Sans JP for text and figures (heavy, upright); weights and sizes carry the meaning, not a second face.
   Key words and figures are set large; particles and connectors (.p) at ~82%. Shadows stay short and shallow. */

:root{
  --cyan:#00b4c8;--cyan-d:#009daf;--cyan-t:#00798a;
  --orange:#ff7c10;--orange-d:#e06400;
  --ink:#243e43;--muted:#4e6569;--faint:#7a8e92;
  --aqua:#edf9fa;--aqua-2:#d2f2f6;--line:#cfe6ea;
  /* 2026-11-04 Stage 1 (imagegen-master-20261104/briefs/STAGE-1.md): white / ink #243e43 / teal #00a6b7 / pale cyan
     #edf9fa / orange #ff7c10 / LINE #06c755; teal is the large key word and the bubbles' ring */
  --teal:#00a6b7;
  --gray:#eef1f2;--gray-t:#6f7f82;
  --line-green:#06C755;
  --page:540px;--pad:20px;
  --w:min(100vw,var(--page));--u:calc(var(--w) / 390);
  --num:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  --jp:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  /* narrow, shallow shadows: a contact line and a short soft fall-off */
  --shadow-s:0 1px 1.5px rgba(20,48,56,.16),0 2px 6px rgba(20,48,56,.07);
  --shadow-m:0 1px 2px rgba(20,48,56,.12),0 4px 12px rgba(20,48,56,.08);
}
@media (max-width:360px){:root{--pad:16px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:12px;scrollbar-gutter:stable}
body{margin:0;background:#e8f5f7;color:var(--ink);font-family:var(--jp);font-weight:400;font-size:15px;line-height:1.85;letter-spacing:.02em;-webkit-font-smoothing:antialiased;line-break:strict}
img{max-width:100%;height:auto;vertical-align:middle}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3,h4{font-weight:900;line-height:1.45;letter-spacing:.02em;font-feature-settings:'palt'}
em,i{font-style:normal}
strong,b{font-weight:900}
a{color:var(--cyan-t);text-underline-offset:3px}
button{font:inherit;color:inherit;cursor:pointer}
button,a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nw{white-space:nowrap}
.nb{white-space:nowrap}
/* phrase-set text (ph() / kp() in the generator): breaks only at the <wbr> between phrases; a phrase wider than the
   line still breaks, so nothing overflows */
.kp{word-break:keep-all;overflow-wrap:anywhere}
.ap{word-break:auto-phrase}
/* body text avoids one-character last lines where the browser can; headings balance by phrase (Chrome). Inside
   :where() (no specificity), so any label's white-space:nowrap still wins over the text-wrap shorthand */
:where(.sec p,.sec li,.sec dd,.sec figcaption,.sec blockquote,.sec summary,.sec td,.sec th,.message p,.foot p){text-wrap:pretty}
:where(.sec h2,.sec h3,.message h2){text-wrap:balance;word-break:auto-phrase}
.p{font-size:.82em}
.skip-link{position:absolute;left:8px;top:-60px;z-index:100;padding:8px 12px;background:#fff;border-radius:6px;box-shadow:var(--shadow-m)}
.skip-link:focus{top:8px}

#lp{position:relative;max-width:var(--page);margin:0 auto;background:#fff;overflow:clip;padding-bottom:96px}
@media (min-width:600px){#lp{box-shadow:0 0 60px rgba(20,70,80,.12)}}


/* ---------- LINE CTA (one component for every placement) ----------
   A flat LINE-green button: two centred lines, a static chevron and a slight bottom edge for the press affordance.
   No shine, swelling or moving arrow. "3大特典 配布中！" above is plain text, not a pill. */
.cta-block{position:relative;max-width:350px;margin:28px auto 0;text-align:center}
/* the wire's ribbon (3大特典 配布中！) as the drafts draw it: an orange banner with notched ends sitting on the button */
.cta-ribbon{position:relative;z-index:2;display:block;width:max-content;max-width:100%;margin:0 auto -5px;padding:3px 24px 4px;background:var(--orange);color:#fff;font-size:15px;font-weight:900;line-height:1.35;letter-spacing:.06em;white-space:nowrap;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%,9px 50%)}
.cta-ribbon b{font-weight:900}
.cta{position:relative;display:flex;align-items:center;justify-content:center;min-height:64px;padding:9px 46px 9px;border-radius:10px;background:var(--line-green);color:#fff;text-decoration:none;box-shadow:0 3px 0 #04a443,0 8px 14px -8px rgba(4,110,48,.5);transition:background-color .15s}
/* readability candidate (Stage6+, for Root's on-screen decision): the words and the chevron in the body ink #274045 on the
   unchanged LINE green (4.885:1, white was 2.256:1); hover keeps the same green (no darker green under dark text); the
   orange focus ring and the press-down stay */
.cta:hover{background:var(--line-green)}
.cta:active{transform:translateY(1px);box-shadow:0 1px 0 #04a443}
.cta-label{display:flex;flex-direction:column;align-items:center;font-size:22px;font-weight:900;line-height:1.25;letter-spacing:.04em}
.cta-label small{margin-bottom:1px;font-size:14px;font-weight:700;letter-spacing:.06em}
.cta .chevron{position:absolute;right:20px;top:50%;width:9px;height:9px;margin:0;font-size:0;line-height:0;border-top:2.4px solid currentColor;border-right:2.4px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.cta-assure{margin-top:8px;font-size:12px;font-weight:500;line-height:1.6;color:var(--muted);letter-spacing:.03em}
/* the CTAs after reading a course or the comparison: the same words, link and button, a step smaller and closer to
   the text, so the page does not stop at the same large advert every time (the first, the gifts, the consult and the
   last keep the full size) */
.cta-block--sub{max-width:320px;margin-top:22px}
.cta-block--sub .cta-ribbon{font-size:13px;padding:2px 20px 3px}
.cta-block--sub .cta{min-height:54px;padding-block:7px}
.cta-block--sub .cta-label{font-size:18px}
.cta-block--sub .cta-label small{font-size:12px}

/* persistent bottom CTA (shown from the top, as in the current LP): one quiet bar, 68px plus the safe area */
.sticky{position:fixed;left:50%;bottom:0;z-index:40;width:min(100%,var(--page));padding:3px 8px calc(7px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.95) 36%);transform:translateX(-50%);text-align:center}
.sticky .cta-block{max-width:none;margin:0}
/* the wire's HERO'ZZ bar: the small ribbon on a full-width one-line button (A-01-r2) */
.sticky .cta-ribbon{font-size:12px;padding:1px 16px 2px;margin-bottom:-4px;clip-path:polygon(0 0,100% 0,calc(100% - 7px) 50%,100% 100%,0 100%,7px 50%)}
.sticky .cta{min-height:46px;padding:4px 36px 4px 16px;box-shadow:0 2px 0 #04a443,0 6px 12px -6px rgba(4,110,48,.45)}
.sticky .cta-label{flex-direction:row;align-items:baseline;flex-wrap:nowrap;gap:.45em;font-size:clamp(13.5px,4.2vw,17px);white-space:nowrap}
.sticky .cta-label small{margin:0;font-size:.84em;font-weight:700}
.sticky .cta .chevron{right:16px}

/* ---------- page header: the official logo (original pixels, transparent margin cut) and the in-page menu ---------- */
.site-head{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between;height:50px;padding:0 6px 0 16px;background:#fff}
.site-logo{display:block;line-height:0}
.site-logo img{display:block;width:126px;height:auto}
.menu-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:8px;background:transparent}
.menu-btn i{position:relative;display:block;width:22px;height:2px;border-radius:1px;background:var(--ink)}
.menu-btn i::before,.menu-btn i::after{content:'';position:absolute;left:0;width:22px;height:2px;border-radius:1px;background:var(--ink);transition:transform .2s}
.menu-btn i::before{top:-7px}
.menu-btn i::after{top:7px}
.menu-btn[aria-expanded="true"] i{background:transparent}
.menu-btn[aria-expanded="true"] i::before{transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{transform:translateY(-7px) rotate(-45deg)}
.lp-menu{position:absolute;left:10px;right:10px;top:50px;z-index:7;padding:4px 16px 18px;background:#fff;border-radius:12px;box-shadow:var(--shadow-m)}
.lp-menu li a{display:block;padding:11px 2px;border-bottom:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:700;text-decoration:none}
.lp-menu .cta-block{margin-top:20px}

/* the PC header's small in-page nav (existing anchors only); shown from 1040px, see the frame at the end */
.desk{display:none}

/* ---------- chapter frame: headings change form with the chapter (no faint English words) ---------- */
.sec{position:relative;padding:56px var(--pad) 54px}
.sec-head{position:relative;margin-bottom:24px}
.sec-head .kicker{font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--cyan-t)}
.sec-head .kicker+h2{margin-top:6px}
.sec-head h2{font-size:clamp(22px,6.4vw,28px);font-weight:700;line-height:1.45;color:var(--ink)}
.sec-head h2 em{color:var(--cyan-d)}
.sec-head--left{text-align:left}
.sec-head--center{text-align:center}
.sec-lead{margin-top:12px;font-size:14px;line-height:1.85;color:var(--muted)}
.sec-lead em,.sec-lead b,.sec-lead strong{color:var(--ink);font-weight:700}
.note{font-size:11px;font-weight:400;line-height:1.7;color:var(--muted);letter-spacing:.01em}
.tag{display:inline-block;padding:0 7px;border-radius:3px;font-size:11px;font-weight:700;line-height:1.7;letter-spacing:.04em}
.tag--guide{background:var(--aqua-2);color:var(--cyan-t)}

/* ---------- teacher photos: the originals in frames, each with its own focal point (no redraw, no collage) ---------- */
.t-photo{position:relative;display:block;overflow:hidden;aspect-ratio:1;background:#eef3f4}
.t-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1));transform-origin:var(--fx,50%) var(--fy,30%)}
/* focal points measured on each original (head top → chin, eye line, face centre): in the large frames the head is
   ~40% of the frame and the face centred, so the four read as equals (岸田: face, not the outstretched arm; ASU keeps
   her own turned-away pose, matched by head size) */
.t-photo--mctaka{--z:1.48;--fx:50%;--fy:0%}
.t-photo--kishida{--z:1.74;--fx:8%;--fy:0%}
.t-photo--nanase{--z:1.6;--fx:53%;--fy:7%}
.t-photo--asu{--z:1.2;--fx:0%;--fy:8%}
/* frames of 80px or less: closer, the same head size for the four */
:is(.faces--mini,.faces--row,.teacher,.cmt-teach) .t-photo--mctaka{--z:1.85;--fx:50%;--fy:0%}
:is(.faces--mini,.faces--row,.teacher,.cmt-teach) .t-photo--kishida{--z:2.15;--fx:17%;--fy:0%}
:is(.faces--mini,.faces--row,.teacher,.cmt-teach) .t-photo--nanase{--z:2;--fx:52%;--fy:8%}
:is(.faces--mini,.faces--row,.teacher,.cmt-teach) .t-photo--asu{--z:1.5;--fx:19%;--fy:8%}
.faces{display:grid;gap:14px 12px}
.faces li{min-width:0}
.faces p{margin-top:8px;line-height:1.35}
.faces p span{display:block;font-size:11px;font-weight:500;color:var(--muted);word-break:keep-all}
.faces p b{display:block;margin-top:1px;font-size:15px;font-weight:700;color:var(--ink)}
.faces--2x2{grid-template-columns:repeat(2,minmax(0,1fr))}
.faces--2x2 .t-photo{border-radius:10px}
.faces--row{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.faces--row .t-photo{border-radius:50%}
.faces--row p{text-align:center}
.faces--row p b{font-size:12.5px}
.faces--row p span{font-size:9.5px}
.faces--mini{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.faces--mini .t-photo{border-radius:8px}
.faces--mini p{margin-top:6px;line-height:1.3;text-align:center}
.faces--mini p span{font-size:9.5px}
.faces--mini p b{font-size:12.5px}
/* one block per teacher: course, name, main record, detail held together beside the photo's top */
.teacher{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.teacher .t-photo{border-radius:8px}
.teacher-role{font-size:11px;font-weight:500;line-height:1.4;color:var(--cyan-t)}
.teacher-name{margin-top:1px;font-size:16px;font-weight:700;line-height:1.3}
.teacher-main{margin-top:4px;font-size:14px;font-weight:700;line-height:1.45;color:var(--ink)}
.teacher-sub{margin-top:1px;font-size:12px;font-weight:400;line-height:1.5;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere}

/* ---------- stories (講師陣の指導実績): the person, the main result with its period/basis next to it, the person's words ---------- */
.carousel{position:relative}
.story-track{display:flex;gap:calc(var(--pad) + 12px);margin:0 calc(-1 * var(--pad));padding:4px var(--pad) 10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;overscroll-behavior-x:contain}
.story-track::-webkit-scrollbar{display:none}
.story-track:focus-visible{outline-offset:-3px}
.story{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;scroll-snap-align:start}
.story-who{display:flex;align-items:flex-start;gap:14px}
.story-avatar{flex:none;width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.story-id{min-width:0}
.story-id h3{margin-top:4px;font-size:19px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.story-handle{font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.ba-tag{display:inline-block;margin-right:8px;padding:0 6px;border-radius:2px;font-size:10px;font-weight:700;line-height:1.7;letter-spacing:.06em;vertical-align:1px;background:#e2e7e8;color:#5d6b6e}
.ba-tag--after{background:var(--cyan-d);color:#fff}
.story-before{margin-top:6px;font-size:13px;font-weight:500;line-height:1.6;color:var(--gray-t)}
.story-after{margin-top:14px}
.story-main{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;margin-top:6px;line-height:1.25;color:var(--ink)}
.story-main .cond{font-size:13.5px;font-weight:500}
.story-main .what{font-size:15px;font-weight:700}
.story-main .fig{display:inline-flex;align-items:baseline;white-space:nowrap;color:var(--orange-d)}
.story-main .fig strong{font-size:44px;font-weight:900;line-height:1.05;letter-spacing:-.01em}
.story-main .approx{font-size:15px;font-weight:700}
.story-main .unit{font-size:17px;font-weight:700}
/* period + measure wrap together, figure + unit wrap together (never 「破」 alone) */
.story-main .lbl,.story-sub .lbl{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:5px}
.story-sub{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:13px;font-weight:500;line-height:1.55;color:var(--muted)}
.story-sub .what{color:var(--ink);font-weight:700}
.story-sub .fig{white-space:nowrap;color:var(--ink);font-weight:700}
.story-sub .fig b{margin:0 1px;font-size:20px;font-weight:900;color:var(--cyan-t)}
.story-voice{margin-top:16px;padding-left:14px;border-left:3px solid var(--cyan);font-size:14px;font-weight:500;line-height:1.9;color:var(--ink)}
.story-voice mark{padding:0 1px;background:linear-gradient(transparent 62%,#c8f0f4 62%);color:inherit}
.story-proof{margin-top:14px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#fff}
.story-proof img{display:block;width:100%;padding:8px 10px 6px}
.story-proof figcaption{padding:3px 10px;background:var(--aqua);color:var(--cyan-t);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-align:center}
.story-more{margin-top:auto;padding-top:4px}
.story-more summary{display:flex;justify-content:space-between;align-items:center;padding:10px 2px;list-style:none;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--cyan-t);border-bottom:1px solid var(--line)}
.story-more summary::-webkit-details-marker{display:none}
.story-more summary::after{content:'＋';font-size:15px;transition:transform .2s}
.story-more[open] summary::after{transform:rotate(45deg)}
.story-more dl>div{display:flex;justify-content:space-between;gap:10px;padding:7px 2px;border-bottom:1px dashed var(--line);font-size:12.5px}
.story-more dt{color:var(--muted)}
.story-more dd{flex:none;font-weight:700}
.story-note{margin-top:10px}
.slider{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}
.slider button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--cyan-t);font-size:17px;font-weight:700}
.slider button:disabled{opacity:.35;cursor:default}
.slider .dots{display:flex;gap:8px}
.slider .dots span{width:7px;height:7px;border-radius:50%;background:var(--line)}
.slider .dots span[aria-current="true"]{background:var(--cyan-d)}
.slider .autoplay{width:32px;height:32px;color:var(--muted)}
.slider .autoplay::before{content:'';display:block;width:9px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.slider .autoplay[aria-pressed="true"]::before{width:0;height:0;border-style:solid;border-width:5.5px 0 5.5px 9px;border-color:transparent transparent transparent currentColor;margin-left:3px}

/* ---------- material and photos shown as they are ---------- */
/* the live course photo: face, phone and ring light lead; a slight zoom toward the top right keeps the cosmetics at the
   bottom edge out of the frame (the same crop logic in every place the photo appears) */
figure.course-photo--liver img{transform:scale(1.12);transform-origin:70% 12%}
.lesson-shot{margin-top:14px}
.lesson-shot img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 0 0 1px rgba(20,48,56,.08)}
.lesson-shot figcaption{margin-top:6px;font-size:11.5px;color:var(--muted)}
.event-photo{margin-top:16px}
.event-photo img{display:block;width:100%;height:auto;border-radius:6px}
.event-photo figcaption{margin-top:6px;font-size:11.5px;color:var(--muted)}
/* live → archive as one line in time: the live lecture (a small dot), then the archive after it (replay mark);
   the sentence below says why: 見逃しても、あとで見返せる */
.live-flow{display:flex;align-items:center;margin-top:14px;padding:10px 12px;border-radius:6px;background:var(--aqua);font-size:13.5px;font-weight:700;line-height:1.4}
.live-flow li{display:flex;align-items:center;gap:7px;white-space:nowrap}
.live-flow li:first-child{flex:1}
.live-flow li:first-child::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(245,121,20,.2)}
.live-flow li:first-child::after{content:'';flex:1;min-width:24px;height:10px;margin:0 8px 0 4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 1.5L7.5 5l-5 3.5' fill='none' stroke='%23009daf' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center/10px 10px no-repeat,linear-gradient(var(--cyan-d),var(--cyan-d)) left center/calc(100% - 3px) 1.6px no-repeat}
.live-flow li+li{color:var(--cyan-t)}
@media (max-width:360px){.live-flow{padding:9px 10px;font-size:12.5px}.live-flow li:first-child::after{min-width:18px;margin:0 6px 0 3px}}
.live-flow li+li::before{content:'';flex:none;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%2300798a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 9.4A4.6 4.6 0 1 0 4.9 4.6'/%3E%3Cpath d='M4.6 1.9v2.9h2.9'/%3E%3C/g%3E%3Cpath d='M7 6.3v3.4L9.8 8z' fill='%2300798a'/%3E%3C/svg%3E") center/16px 16px no-repeat}

/* ---------- FAQ: quiet accordion (15 questions; the first 4 shown, the rest behind "もっと見る") ---------- */
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{position:relative;display:flex;gap:10px;padding:15px 34px 15px 2px;list-style:none;cursor:pointer;font-size:14.5px;font-weight:500;line-height:1.65}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .q{flex:none;font-size:15px;font-weight:700;line-height:1.55;color:var(--cyan-d)}
.faq-list summary::after{content:'';position:absolute;right:6px;top:21px;width:12px;height:12px;background:linear-gradient(var(--cyan-t),var(--cyan-t)) center/12px 1.5px no-repeat,linear-gradient(var(--cyan-t),var(--cyan-t)) center/1.5px 12px no-repeat;transition:transform .2s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list .answer{display:grid;gap:8px;padding:0 4px 18px 24px;font-size:14px;line-height:1.9;color:var(--muted);word-break:auto-phrase}
.faq-list.is-collapsed details.is-extra{display:none}
.faq-more{display:block;width:100%;margin-top:14px;padding:12px 16px;border:1px solid var(--cyan-d);border-radius:6px;background:#fff;color:var(--cyan-t);font-size:14px;font-weight:700}

/* ---------- flow: one vertical path 01 → 04 ---------- */
.flow{position:relative;display:grid;gap:0}
.flow li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:0 0 20px}
.flow li:not(:last-child)::before{content:'';position:absolute;left:21px;top:34px;bottom:4px;width:2px;background:var(--aqua-2)}
.flow .no{display:grid;place-items:center;width:44px;height:34px;border-radius:17px;background:var(--cyan-d);color:#fff;font-size:15px;font-weight:700}
.flow h3{font-size:16px;font-weight:700;line-height:1.5;padding-top:4px}
.flow p{margin-top:2px;font-size:13.5px;line-height:1.75;color:var(--muted)}

/* ---------- message: a letter, left aligned, normal weight ---------- */
.message{padding:60px var(--pad) 52px;background:#fff;border-top:1px solid var(--line)}
.message h2{font-size:clamp(23px,6.6vw,28px);font-weight:700;line-height:1.5}
.message h2 em{color:var(--cyan-d)}
.message-copy{display:grid;gap:16px;margin-top:22px;font-size:15px;line-height:2;color:var(--ink)}

/* ---------- company / footer: a small readable two-column table ---------- */
.foot{padding:36px var(--pad) 28px;background:#f6f9fa;border-top:1px solid var(--line)}
.foot h2{font-size:14px;font-weight:700;margin-bottom:10px}
.company>div{display:grid;grid-template-columns:80px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.7}
.company dt{color:var(--muted)}
.company dd{overflow-wrap:anywhere}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin:16px 0 12px;font-size:12.5px}
.copyright{margin-top:12px;font-size:11px;color:var(--faint);text-align:center}

/* ---------- the three gifts: one transparent set picture (r3) + the real material layered on it ----------
   The stage keeps the base picture's own 1921×819 px space and is scaled to the column (lp.js sets --k from data-w;
   0.18 without script). The lesson frame is mapped onto the tablet's blank screen with a projective transform (the
   four fitted edges, a box of the screen's own ratio, the 16:9 frame letterboxed equally, black like a player); the
   official logo sits on the closed guide's blank cover above its title, taking the paper's shading (multiply).
   Labels sit under each object's own centre (book 17.8%, tablet 49.2%, coupon 82.4%), not a 3-way split. */
.giftset{margin:0 calc(-1 * var(--pad));padding:0 calc(6 * var(--u))}
.giftset-art{position:relative;aspect-ratio:1921/819;overflow:hidden}
.giftset-stage{position:absolute;left:0;top:0;width:1921px;height:819px;transform:scale(var(--k,.18));transform-origin:0 0}
.giftset-stage>img,.gs-screen{position:absolute;display:block;max-width:none}
.gs-base{left:0;top:0;width:1921px;height:819px}
.gs-logo{left:171px;top:196px;width:196px;height:auto;mix-blend-mode:multiply}
.gs-screen{left:0;top:0;width:1000px;height:680.9px;background:#0b0d0e;transform-origin:0 0;overflow:hidden;border-radius:21px}
.gs-screen img{position:absolute;left:0;top:59.2px;width:1000px;height:562.5px}
.giftset-labels{position:relative;height:22px;margin-top:calc(6 * var(--u))}
.giftset-labels li{position:absolute;top:0;transform:translateX(-50%);font-size:max(11.5px,calc(13 * var(--u)));font-weight:700;line-height:1.4;white-space:nowrap;color:var(--ink)}
.giftset-labels .l-guide{left:17.8%}
.giftset-labels .l-video{left:49.2%}
.giftset-labels .l-coupon{left:82.4%}
.giftset-note{margin-top:4px;padding:0 var(--pad);text-align:right;font-size:10px;line-height:1.5;color:var(--muted)}
.gift-cond{margin:calc(6 * var(--u)) auto 0;max-width:330px;text-align:center;font-size:max(11px,calc(11.5 * var(--u)));font-weight:500;line-height:1.6;color:var(--muted);letter-spacing:.01em}

/* the thin booklet mock of the current LP (official logo, real inside page), used in the gift chapters */
.booklet{position:relative;display:block;width:104px;height:92px}
.booklet img{display:block;max-width:none}
.book-page{position:absolute;right:2px;top:4px;width:56px;height:80px;overflow:hidden;background:#f7fbfd;border-radius:1.5px;box-shadow:0 1.5px 4px rgba(20,50,60,.2),0 0 0 1px rgba(20,50,60,.07);transform:rotate(5deg);transform-origin:50% 100%}
.book-page img{height:100%;width:auto;margin-left:8px}
.book-cover{position:absolute;left:2px;bottom:0;width:62px;height:86px;overflow:hidden;border-radius:1.5px;background:radial-gradient(circle at 92% 14%,#e2f2f8 0 15px,transparent 15.5px),radial-gradient(circle at 70% 108%,#dff1f6 0 22px,transparent 22.5px),#fff;box-shadow:0 0 0 1px rgba(20,50,60,.1),-1.4px 1.4px 0 #e8eef0,-1px 3px 6px rgba(20,50,60,.22);transform:rotate(-4deg);transform-origin:50% 100%}
.book-logo{position:absolute;left:5px;top:8px;width:38px;height:auto}
.book-title{position:absolute;left:5px;top:26px;font-weight:900;line-height:1.08;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.book-title span{display:block;font-size:15px}
.book-title span+span{font-size:10.6px;letter-spacing:.01em}
.book-bar{position:absolute;left:5px;top:56px;width:20px;height:1.6px;background:linear-gradient(90deg,var(--cyan-d) 0 68%,var(--orange) 68%)}


/* ---------- invitation dialog (content and behaviour of the current LP's 招待状) ---------- */
body.gift-popup-open{overflow:hidden}
.gift-popup{width:min(400px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:8px;background:#fff;color:var(--ink);overflow:visible;box-shadow:0 18px 50px rgba(16,40,48,.3)}
.gift-popup::backdrop{background:rgba(18,38,44,.62)}
.gift-popup[open]{animation:gpIn .26s ease-out}
.gift-popup[open]::backdrop{animation:gpFade .26s ease-out}
@keyframes gpIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes gpFade{from{opacity:0}to{opacity:1}}
.gift-popup-content{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;border-radius:inherit;scrollbar-width:thin}
.gift-popup-close{position:absolute;right:10px;top:10px;z-index:2;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--ink);color:#fff;font-size:24px;font-weight:400;line-height:1}
.gift-popup-header{padding:22px 22px 16px;text-align:center;background:#fff}
.gift-popup-origin{display:flex;align-items:center;justify-content:center;gap:6px;padding-right:8px}
.gift-popup-origin img{width:132px;height:auto}
.gift-popup-origin span{font-size:15px;font-weight:700}
.gift-popup-header h2{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:20px;font-weight:900;line-height:1.35;white-space:nowrap}
.gift-popup-header h2 strong{display:inline-block;font-size:34px;line-height:1.15;letter-spacing:.04em;color:var(--orange)}
.gift-popup-body{padding:20px 22px 22px;text-align:center;background:#e4f6f7}
.gift-popup-promise{font-size:16px;font-weight:700;line-height:1.55}
.gift-popup-promise strong{display:inline-block;margin-top:2px;font-size:25px;font-weight:900;color:var(--cyan-t)}
.gift-popup-paper{margin-top:16px;padding:16px 14px 14px;background:#fff;border-radius:3px}
.gift-popup-kicker{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--cyan-t)}
.gift-popup-paper h3{margin:2px 0 12px;font-size:23px;font-weight:900;line-height:1.3}
.gift-popup-paper h3 strong{margin:0 2px;font-size:1.5em;line-height:1;color:var(--orange);vertical-align:-.06em}
.gift-popup-previews{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gift-popup-previews figure{min-width:0;margin:0}
.gift-popup-previews img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#f3f8f9}
.gift-popup-previews figcaption{margin-top:6px;font-size:12px;font-weight:700;line-height:1.5;color:var(--ink)}
.gift-popup-coupon{margin-top:12px;padding-top:10px;border-top:1px solid #dbe7e9;font-size:13px;font-weight:700;line-height:1.55}
.gift-popup-coupon strong{font-size:26px;font-weight:900;letter-spacing:.01em;color:var(--orange)}
.gift-popup-coupon small{font-size:14px;font-weight:900}
.gift-popup-condition{margin-top:4px;font-size:11px;line-height:1.6;color:var(--muted)}
/* the popup's three gifts: the pages' own set picture (r3 + official logo + real lesson), the names under each object */
.gift-popup-set{margin:2px 0 0}
.gift-popup-items{display:grid;grid-template-columns:33fr 29fr 38fr;gap:4px;margin-top:6px;font-size:12px;font-weight:700;line-height:1.45;color:var(--ink)}
.gift-popup-items li{min-width:0;text-align:center}
.gift-popup-items .gift-popup-coupon{margin:0;padding:0;border:0;font-size:12px;line-height:1.4}
/* readability candidate: the amount and 円 OFF (11–18px) in the existing ink, not the light orange (2.75:1 on white) */
.gift-popup-items .gift-popup-coupon strong{font-size:clamp(14px,4.2vw,18px);color:var(--ink)}
.gift-popup-items .gift-popup-coupon small{font-size:.7em}
/* a narrow column (or a wider fallback font) may break between 「68,000円」 and 「OFF」 rather than run out of the column */
@media (max-width:360px){.gift-popup-items .gift-popup-coupon strong.gift-nw{white-space:normal}}
.gift-popup-set .giftset-note{margin-top:4px;padding:0;text-align:right;font-size:10px}
.gift-popup .gift-icon{display:inline-block;position:relative;top:-1px;margin-right:4px;vertical-align:middle;width:calc(var(--gi) * var(--gi-w));height:calc(var(--gi) * var(--gi-h));--gi:20px}
.gift-popup .gift-icon--guide{--gi-w:.834;--gi-h:1.199}
.gift-popup .gift-icon--video{--gi-w:1.131;--gi-h:.994}
.gift-popup .gift-icon--coupon{--gi-w:1.273;--gi-h:.786}
.gift-popup .gift-popup-coupon .gift-icon{--gi:26px}
.gift-popup .gift-no{font-style:normal;font-size:.85em;font-weight:700;color:var(--muted)}
.gift-popup .gift-nw{white-space:nowrap}
.gift-popup .cta{width:100%;margin:18px 0 0;min-height:60px}
.gift-popup .cta-label{font-size:21px}
@media (max-height:700px){
  .gift-popup-header{padding:12px 16px 8px}
  .gift-popup-origin img{width:108px}
  .gift-popup-header h2{margin-top:6px}
  .gift-popup-header h2 strong{font-size:27px}
  .gift-popup-body{padding:10px 14px 14px}
  .gift-popup-promise{font-size:14px;line-height:1.45}
  .gift-popup-promise strong{font-size:21px}
  .gift-popup-paper{margin-top:10px;padding:10px 10px 8px}
  .gift-popup-paper h3{margin:0 0 6px;font-size:19px}
  .gift-popup-coupon{margin-top:8px;padding-top:6px}
  .gift-popup-coupon strong{font-size:22px}
  .gift-popup .cta{margin-top:10px;min-height:52px}
}
@media (max-width:374px){
  .gift-popup-header h2{gap:6px;font-size:17px}
  .gift-popup-header h2 strong{font-size:28px}
  .gift-popup-body{padding-inline:14px}
  .gift-popup-paper{padding-inline:10px}
  .gift-popup-previews{gap:9px}
  .gift-popup-previews figcaption{font-size:11px}
  .gift-popup .cta-label{font-size:19px}
  .gift-popup .cta-label small{font-size:12.5px}
  .gift-popup .cta{padding-inline:30px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
    .gift-popup[open],.gift-popup[open]::backdrop{animation:none}
  *{transition:none!important}
}

/* =====================================================================================================================
   Wider screens. The page is no longer a phone column on a grey slab: section colours run edge to edge and the
   content keeps its own width (--pad becomes the side margin). 600–1039px: one readable column (≈600px; the FV keeps
   its 390-design composition at 540px, centred). 1040px and up: a real desktop layout in a 1120px frame, built per
   chapter in a.css / b.css; type is set in px/clamp for the desktop, not scaled from the phone (no cqw/vw text).
   ===================================================================================================================== */
@media (min-width:600px){
  :root{--pad:max(32px,calc((100vw - 600px) / 2))}
  body{background:#fff}
  #lp{max-width:none;box-shadow:none}
  .sticky{width:100%;padding-inline:24px}
  .sticky .cta-block{max-width:420px;margin:0 auto}
  .lp-menu{left:auto;right:16px;width:340px}
}
@media (min-width:1040px){
  :root{--pad:max(48px,calc((100vw - 1120px) / 2))}
  body{font-size:16px}
  #lp{padding-bottom:92px}
  /* header: the official logo and five existing anchors; no drawer, no second big CTA */
  .site-head{height:72px;padding:0 var(--pad)}
  .site-logo img{width:156px}
  .menu-btn{display:none}
  .lp-menu{display:none!important}
  .desk--toc{position:absolute;top:0;right:var(--pad);z-index:20;display:flex;align-items:center;gap:30px;height:72px}
  .desk--toc a{color:var(--ink);font-size:14px;font-weight:700;letter-spacing:.04em;text-decoration:none}
  .desk--toc a:hover{color:var(--cyan-t)}
  /* chapters */
  .sec{padding-top:96px;padding-bottom:92px}
  .sec-head{margin-bottom:40px}
  .sec-head .kicker{font-size:14px}
  .sec-head h2{font-size:34px;line-height:1.45}
  .sec-lead{margin-top:14px;font-size:16px}
  .note{font-size:12px}
  .cta-block{max-width:400px;margin-top:36px}
  .cta{min-height:66px}
  .cta-label{font-size:21px}
  /* the bottom bar stays low and quiet: one line, the same words */
  .sticky{padding-block:4px 9px}
  .sticky .cta-block{max-width:440px}
  .sticky .cta-ribbon{font-size:13px}
  .sticky .cta{min-height:46px}
  .sticky .cta-label{font-size:16px}
  /* stories: a reading spread — the person and results on the left, the person's words and the real profile on the right */
  .story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:64px;align-content:start}
  .story-who{grid-column:1;grid-row:1}
  .story-after{grid-column:1;grid-row:2 / span 2}
  .story-voice{grid-column:2;grid-row:1;margin-top:0;font-size:16px}
  .story-proof{grid-column:2;grid-row:2;align-self:start}
  .story-more{grid-column:2;grid-row:3;align-self:start;margin-top:8px}
  .story-id h3{font-size:22px}
  .slider{margin-top:20px}
  /* the lesson frame, the event photo: real sizes, never wider than they read */
  .lesson-shot figcaption,.event-photo figcaption{font-size:12.5px}
  /* FAQ, letter and company: reading width */
  .faq-list summary{font-size:16px;padding-block:18px}
  .faq-list .answer{font-size:15px}
  .message,.foot{padding-inline:max(48px,calc((100vw - 760px) / 2))}
  .message{padding-top:96px;padding-bottom:88px}
  .message h2{font-size:34px}
  .message-copy{font-size:16px}
  .message .cta-block{margin-left:0}
  .foot{padding-top:48px}
  .company>div{grid-template-columns:120px minmax(0,1fr);font-size:14px}
  /* the flow: four steps in one row on one line */
  .flow{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .flow li{grid-template-columns:1fr;gap:12px;padding:0}
  .flow li:not(:last-child)::before{left:52px;right:-24px;top:17px;bottom:auto;width:auto;height:2px}
  .flow h3{font-size:17px;padding-top:0}
  .flow p{font-size:14px}
  .teacher{grid-template-columns:84px minmax(0,1fr);gap:16px}
  .teacher-name{font-size:17px}
}
}