/* =====================================================================================================================
   cohesion-r5 — one rule set for A and B (cohesion-r5-20261104/DESIGN-CONTRACT.md, 2026-11-04).
   Loaded last and UNLAYERED. Every older sheet (lp / a|b / editorial / sections / audit-r3 / detail-r4) is wrapped in
   @layer legacy, so what is written here wins by layer order, never by a specificity race. Role lists use :where()
   (no specificity), so inside this file the later, narrower rule wins by source order.
   Nothing here changes copy, order, links, CTA count or scripts: only rails, rhythm, type roles and decoration.
     §1 tokens  §2 rails  §3 chapter rhythm  §4 chapter heading  §5 type roles  §6 line breaks  §7 CTA
     §8 A chapters  §9 B chapters  §10 wide screens (1040+)  §11 small phones (≤374)  §12 instructor-r6
     §13 wire-audit (2026-11-05)
   --u (the 390-design unit) is left to figure proportions (FV stage, laurels, diagrams); text and spacing use §1.
   ===================================================================================================================== */

/* §1 tokens — one curve per role from 390px to 1440px */
:root{
  --fs-h2:clamp(28px,calc(24.97px + .762vw),36px);        /* chapter heading 28 → 36 */
  --fs-h3:clamp(22px,calc(19.77px + .571vw),28px);        /* sub-heading 22 → 28 */
  --fs-item:clamp(18px,calc(17.26px + .19vw),20px);       /* list entry title 18 → 20 */
  --fs-body:clamp(16px,calc(15.63px + .095vw),17px);      /* body 16 → 17 */
  --fs-label:clamp(13px,calc(12.63px + .095vw),14px);     /* label 13 → 14 */
  --fs-note:clamp(12px,calc(11.63px + .095vw),13px);      /* note 12 → 13 */
  --fs-fig:clamp(30px,calc(26.29px + .952vw),40px);       /* a result figure 30 → 40 (its unit at body size) */
  --fs-benefit:clamp(44px,calc(36.57px + 1.905vw),64px);  /* the coupon amount 44 → 64 */
  --fs-ord:clamp(32px,calc(29.03px + .762vw),40px);       /* list order numbers 32 → 40 */
  --lh-body:1.75;
  /* rhythm (4/8): chapter, heading→content, blocks of one chapter, sub-heading→text, figure→note, result→note,
     text→CTA, CTA→reassurance, dark band */
  --s-sec:64px;--s-head:28px;--s-block:40px;--s-sub:16px;--s-fig:8px;--s-res:12px;--s-cta:28px;--s-assure:10px;--s-band:48px;
  /* rails: main (max 1120, centred; gutters 24, 20 below 375px, ≥32 tablet, ≥48 PC) and text (720, from the main
     rail's left edge); the tablet keeps one readable 600px column */
  --rail:1120px;--rail-text:720px;--pad:24px;
  --tint:#eef8fa;
}
@media (max-width:374px){:root{--pad:20px}}
@media (min-width:600px){:root{--pad:max(32px,calc((100vw - 600px) / 2));--s-sec:80px;--s-head:32px;--s-block:48px;--s-cta:32px;--s-band:64px}}
@media (min-width:1040px){:root{--pad:max(48px,calc((100vw - 1120px) / 2));--s-sec:96px;--s-head:36px;--s-block:56px;--s-sub:20px;--s-cta:36px;--s-assure:12px;--s-band:72px}}

body{font-size:var(--fs-body);line-height:var(--lh-body)}

/* §2 rails — chapters keep padding-inline:var(--pad); inside, nothing adds private side margins or max-widths unless it
   is a text-rail block or a figure that needs the width (named in §8–§10) */
.sec,.message,.foot{padding-left:var(--pad);padding-right:var(--pad)}
.message>h2,.message>.message-copy{margin-left:0;margin-right:0;max-width:var(--rail-text)}
.faq-list{max-width:var(--rail-text);margin-left:0;margin-right:auto}
/* sub-headings and text never reach into the gutters */
:where(.a-gift .gift-item>h3,.gift-get,.gift-note,.b-support .b-block>h3,.b-support .b-skills>h3,.b-breakdown,.b-wins,.a-flow .flow h3){margin-left:0;margin-right:0;max-width:100%}

/* §3 chapter rhythm — one chapter gap; where two chapters share a ground the second does not add its own */
.sec{padding-top:var(--s-sec);padding-bottom:var(--s-sec)}
.a-support,.a-voice,.a-gift,.b-about,.b-earn,.b-consult{background-color:var(--tint)}
.b-foryou{background-color:#fff}
[data-lp=a] :is(#service,#voice,#gift,#flow,#faq),
[data-lp=b] :is(#for-you,#support,#consult,#compare,#faq){padding-top:0}
.a-band{padding-top:var(--s-band);padding-bottom:var(--s-band)}
.message{padding-top:var(--s-sec);padding-bottom:var(--s-sec)}

/* §4 chapter heading — the same block for every chapter: [small label] h2 [lead], from the main rail's left edge.
   A marks it with a teal bar (A draft), B with a short orange rule under it (B draft). Key words in teal. */
.sec .sec-head{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:auto;max-width:none;margin:0 0 var(--s-head);padding:0;border:0;background:none;text-align:left;transform:none}
.sec .sec-head::before,.sec .sec-head::after{content:none}
.sec-head>.sec-en{order:-1;position:static;display:block;margin:0;padding:0;font-family:'Barlow Condensed',var(--jp);font-size:var(--fs-label);font-weight:600;font-style:normal;line-height:1.2;letter-spacing:.16em;color:var(--cyan-t);opacity:1;transform:none;white-space:nowrap}
.sec-head>.kicker{position:static;margin:0;font-size:var(--fs-label);font-weight:600;line-height:1.5;letter-spacing:.06em;color:var(--cyan-t)}
.sec .sec-head h2{position:relative;display:block;width:auto;margin:0;padding:0;font-size:var(--fs-h2);font-weight:800;line-height:1.4;letter-spacing:.02em;color:var(--ink);text-align:left;white-space:normal;background:none;transform:none}
.sec .sec-head h2::before,.sec .sec-head h2::after{content:none}
.sec .sec-head h2 em{display:inline;position:static;font-size:1em;font-weight:inherit;color:var(--teal);background:none;transform:none}
.sec .sec-head h2 em::before,.sec .sec-head h2 em::after{content:none}
.sec .sec-head h2 .p{font-size:.8em;font-weight:inherit}
.sec .sec-head>.sec-lead{margin:8px 0 0;max-width:var(--rail-text);font-size:var(--fs-body);font-weight:500;line-height:var(--lh-body);color:var(--muted);text-align:left}
.sec .sec-head>.sec-lead :is(em,b,strong){font-weight:700;color:var(--ink)}
[data-lp=a] .sec .sec-head h2{padding-left:16px}
[data-lp=a] .sec .sec-head h2::before{content:'';position:absolute;left:0;top:.24em;bottom:.24em;width:4px;border-radius:2px;background:var(--teal)}
[data-lp=b] .sec .sec-head h2::after{content:'';display:block;width:32px;height:3px;margin-top:12px;border-radius:2px;background:var(--orange)}
/* B-06 / B-07 (wire): the colour band and the 「＋」 stay; the band's heading on the same scale and the same left line */
.b-support>.b-band-head{text-align:left}
.b-support>.b-band-head h2{font-size:var(--fs-h2);font-weight:800;line-height:1.4;letter-spacing:.02em;white-space:normal}

/* §5 type roles — every text of a chapter takes one; figure-internal words of diagrams keep their --u sizes.
   Order matters: body → item → sub-heading → label → note → order numbers → result figures → CTA headlines. */
/* body: explanations, list entries, quotes, answers (never 900) */
:where(.sec-lead,.a-course-desc,.a-fit2 dd,.svc-breakdown,.svc-chat-text,.svc-archive,.support-list li>p,.story-voice,.gift-checks li,.gift-get,.a-flow .flow li div>p,details .answer p,.message-copy p,.b-text,.b-skills-body p,.b-archive,.b-breakdown,.b-course-desc,.b-type-text,.b-next-copy,.tcard-list li,.b-define,.recv-free){font-size:var(--fs-body);font-weight:500;line-height:var(--lh-body);letter-spacing:.02em}
:where(.sec-lead,.a-course-desc,.a-fit2 dd,.svc-breakdown,.svc-chat-text,.svc-archive,.support-list li>p,.story-voice,.gift-checks li,.gift-get,.a-flow .flow li div>p,details .answer p,.message-copy p,.b-text,.b-skills-body p,.b-archive,.b-breakdown,.b-course-desc,.b-type-text,.b-next-copy,.tcard-list li) :where(em,strong,b,mark,span){font-size:1em;line-height:inherit}
:where(.sec-lead,.a-course-desc,.a-fit2 dd,.svc-breakdown,.svc-chat-text,.svc-archive,.support-list li>p,.story-voice,.gift-checks li,.gift-get,.b-text,.b-skills-body p,.b-archive,.b-breakdown,.b-course-desc,.b-type-text,.b-next-copy,.tcard-list li) :where(em,strong,b,mark){font-weight:700}
:where(.svc-breakdown,.svc-chat-text,.support-list li>p,.b-breakdown,.tcard-list li,.b-next-copy) :where(b,em){font-size:1.12em}
:where(.gift-get,.b-archive,.svc-archive){font-weight:700}
/* item title: one entry of a list (a step, a person, a question, a promise) */
:where(.a-flow .flow h3,.a-voice .story-id h3,.tcard .tcard-name,.a-panel-teachers .a-course-th,.a-panel-teachers .b-course-th,.b-why .b-step-text h3,.bstory-id>b,.b-skill,.recv-free){font-size:var(--fs-item);font-weight:700;line-height:1.5;letter-spacing:.02em}
:where(details>summary>span.ap){font-size:var(--fs-body);font-weight:700;line-height:1.6}
:where(details>summary>span.q){font-family:'Barlow Condensed',var(--jp);font-size:20px;font-weight:700;line-height:1;color:var(--teal)}
/* sub-heading: the heading of a block inside a chapter */
:where(.a-reasons .r-top h3,.a-panel>h3.a-catch,.a-service .svc>h3,.a-gift .gift-item>h3,.b-support .b-block>h3,.b-support .b-skills>h3,.b-earn .b-card>h3,.b-courses-sec .b-course>h3,.b-why .b-why-lead){font-size:var(--fs-h3);font-weight:800;line-height:1.45;letter-spacing:.02em;color:var(--ink);text-align:left;white-space:normal;background:none;transform:none}
:where(.a-reasons .r-top h3,.a-panel>h3.a-catch,.a-service .svc>h3,.a-gift .gift-item>h3,.b-support .b-block>h3,.b-support .b-skills>h3,.b-earn .b-card>h3,.b-courses-sec .b-course>h3,.b-why .b-why-lead)::after{content:none}
:where(.a-reasons .r-top h3,.a-panel>h3.a-catch,.a-service .svc>h3,.a-gift .gift-item>h3,.b-support .b-block>h3,.b-support .b-skills>h3,.b-earn .b-card>h3,.b-courses-sec .b-course>h3,.b-why .b-why-lead) :where(em,strong,b,small,span){font-size:1em;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
:where(.a-reasons .r-top h3,.a-panel>h3.a-catch,.a-service .svc>h3,.a-gift .gift-item>h3,.b-support .b-block>h3,.b-support .b-skills>h3,.b-earn .b-card>h3,.b-courses-sec .b-course>h3,.b-why .b-why-lead) :where(.num){font-size:1.25em;line-height:1}
:where(.a-reasons .r-top h3,.a-panel>h3.a-catch,.a-service .svc>h3,.a-gift .gift-item>h3,.b-support .b-block>h3,.b-support .b-skills>h3,.b-earn .b-card>h3,.b-courses-sec .b-course>h3,.b-why .b-why-lead) :where(.p){font-size:.8em}
/* label: the small words that name a block (サービス 01 / 特典 01 / POINT / STEP / channel / tag) */
:where(.svc-no,.gift-badge,.b-point-tag,.b-point-no,.a-course-channel,.b-course-channel,.a-income-label,.chip-label,.b-win-tag,.b-duo-tag,.b-type-tag,.b-about-kicker,.b-consult-top,.b-super,.flow-no,.b-step-no){font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;line-height:1.4}
:where(.svc-no,.gift-badge) :where(span,b){font-size:1em;font-weight:inherit}
:where(.svc-no,.gift-badge) b{font-family:'Barlow Condensed',var(--jp);font-size:1.3em;font-weight:700}
:where(.tag,.ba-tag){font-size:12px;font-weight:600;letter-spacing:.06em}
/* note: captions, sources, conditions, image notes */
:where(.sec .note,.sec figcaption,.r01-note,.r02-note,.r03-note,.r05-when,.story-handle,.coupon-cond,.recv-cond,.ticket-card-cond,.rm-hint,.wall-cap,.cta-assure){font-size:var(--fs-note);font-weight:400;line-height:1.6;letter-spacing:.02em}
:where(.story-proof figcaption,.bstory-screen figcaption,.a-panel-main>figure figcaption,.b-course-photo figcaption){font-size:10px}
:where(.coupon-cond,.recv-cond,.ticket-card-cond,.cta-assure){font-weight:500}
/* order numbers — one face, weight and colour; reasons keep the wire's large italic numbers, lists a smaller one */
:where(.flow-no b,.b-step-no b,.b-skill>b){font-family:'Barlow Condensed',var(--jp);font-size:var(--fs-ord);font-weight:700;line-height:1;letter-spacing:0;color:var(--teal)}
:where(.a-reasons .r-no){margin:0;font-family:'Barlow Condensed',var(--jp);font-size:clamp(48px,calc(42.06px + 1.52vw),64px);font-weight:700;line-height:1;letter-spacing:0;color:var(--teal);transform:skewX(-10deg);transform-origin:0 100%}
/* result figures — one face and weight (Noto Sans JP 900, the exception the contract allows); the unit at body size */
:where(.story-main .fig strong,.bstory-after .fig strong,.a-income-fig strong){font-family:var(--jp);font-size:var(--fs-fig);font-weight:900;line-height:1;letter-spacing:-.02em}
:where(.story-main .fig .unit,.bstory-after .fig,.a-income-fig b,.story-main .fig .approx){font-size:var(--fs-body);font-weight:800}
:where(.story-sub .fig b,.bstory-sub .fig b,.tcard-list li b){font-family:var(--jp);font-size:1.3em;font-weight:900;letter-spacing:-.01em}
:where(.story-sub .fig,.bstory-sub .fig){font-size:var(--fs-body);font-weight:800}
:where(.story-main .lbl,.story-sub .lbl,.bstory-after .lbl,.bstory-before>span:not(.ba-tag),.story-before-text,.bstory-sub>span:not(.fig)){font-size:var(--fs-label);font-weight:600;line-height:1.5}
/* CTA headlines (bands, the CTA card, the receive panel) take the chapter size; the closing message is the one larger
   declaration */
:where(.a-band-copy,.b-next-kicker,.a-receive .recv-h){font-size:var(--fs-h2);font-weight:800;line-height:1.4;letter-spacing:.02em}
:where(.a-band-copy,.a-receive .recv-h) :where(em,span){font-size:1em;font-weight:inherit}
:where(.message h2){font-size:clamp(32px,calc(26.06px + 1.52vw),48px);font-weight:800;line-height:1.35}
:where(.message h2 em){font-size:1.15em}

/* §6 line breaks — text breaks between phrases (Chrome: word-break:auto-phrase; elsewhere the generator's <wbr> and
   .nw phrases), never leaves a lone 1-2 character or punctuation line */
:where(.sec-lead,.a-course-desc,.a-fit2 dd,.svc-breakdown,.svc-chat-text,.svc-archive,.support-list li>p,.story-voice,.gift-checks li,.gift-get,.a-flow .flow li div>p,details .answer p,.message-copy p,.b-text,.b-skills-body p,.b-archive,.b-breakdown,.b-course-desc,.b-type-text,.b-next-copy,.tcard-list li,.b-define,.a-flow .flow h3,.tcard .tcard-name,.b-why .b-step-text h3,.b-skill,details>summary>span.ap){word-break:auto-phrase;text-wrap:pretty;white-space:normal}
:where(.sec-lead,.a-course-desc,.a-fit2 dd,.svc-chat-text,.support-list li>p,.story-voice,.gift-checks li,.gift-get,.a-flow .flow li div>p,details .answer p,.message-copy p,.b-text,.b-skills-body p,.b-course-desc,.b-type-text,.b-next-copy,.tcard-list li,.b-define) .kp{word-break:auto-phrase}
.sec .sec-head h2,:where(.a-reasons .r-top h3,.a-panel>h3.a-catch,.a-service .svc>h3,.a-gift .gift-item>h3,.b-support .b-block>h3,.b-support .b-skills>h3,.b-earn .b-card>h3,.b-courses-sec .b-course>h3,.b-why .b-why-lead){word-break:auto-phrase;text-wrap:balance}

/* §7 CTA — body CTAs at most 520px, centred on the rail; the reassurance close under the button */
:is(.sec,.message,.a-band) .cta-block{width:100%;max-width:520px;margin-left:auto;margin-right:auto}
:is(.sec,.message,.a-band) .cta-block .cta-assure{margin-top:var(--s-assure)}

/* §8 A chapters */
/* FV: the two laurels are one group, centred on the copy column (PC) / the page rail (phone, tablet) */
.a-fv .a-laurels{width:max-content;max-width:100%;margin-left:auto;margin-right:auto;justify-self:center}
/* reasons: number | heading in one shared column for all six */
.a-reasons .reason .r-top{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start}
.a-reasons .reason .r-top h3{margin-top:.15em}
/* reason 04: the three rows (監修 / 指導 / 伴走) as list entries, label beside its words, on the rail */
.a-reasons .r04-row{display:flex;align-items:center;column-gap:12px;font-size:var(--fs-item);font-weight:800;line-height:1.35;white-space:normal;word-break:auto-phrase}
.a-reasons .r04-row>span{flex:none;font-size:var(--fs-label)}
/* reason 02 on tablets: only the figure takes the wider measure; its heading stays on the rail with the others */
@media (min-width:768px) and (max-width:1039px){
  .a-reasons>.reason--loop{margin-left:0;margin-right:0}
  .a-reasons>.reason--loop>.r02-flow{margin-left:calc(32px - var(--pad));margin-right:calc(32px - var(--pad))}
}
/* courses: the photo above its words on phones, so the description never runs in a 6-character column */
.a-panel-main{grid-template-columns:minmax(0,1fr);row-gap:12px}
.a-panel-main>figure{aspect-ratio:16 / 9}
.a-panel-main>figure figcaption,.b-course-photo figcaption{white-space:nowrap}
/* teachers: every card one row — photo, then name / role / record beside it (no 4-word columns) */
@media (max-width:599px){
  .tcards{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .tcards>.tcard{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:14px;align-items:start}
  .tcards>.tcard>.t-photo{grid-column:1;grid-row:1 / span 3;width:96px;height:auto;aspect-ratio:1;margin:0}
  .tcards>.tcard>:not(.t-photo){grid-column:2}
}
/* services: every block left-aligned; 01's three counts break between themselves; the pictures inside the rail */
.a-service .svc--chat,.a-service .svc--chat .svc-no{text-align:left;justify-content:flex-start}
.svc-breakdown{white-space:normal}
.svc-breakdown .nb{display:inline-block}
.svc-archive{flex-wrap:wrap;row-gap:6px;white-space:normal}
.a-service .laptop{max-width:100%;margin-left:0;margin-right:0}
/* voice: the result's label above its figure at every width (no 「SNS総フォ／ロワー」 column) */
.a-voice .story .story-main,.a-voice .story .story-sub{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px}
.a-voice .story .story-main .lbl,.a-voice .story .story-sub .lbl{flex-direction:row;flex-wrap:wrap;column-gap:.35em}
/* gifts: 特典01 / 02 / 03 set the same way — the badge on the left of its heading with one gap, nothing laid over the
   words (03's badge used to sit on its heading); 03's amount is the one large figure */
.a-gift .gift-item{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:0;align-items:center;text-align:left}
.a-gift .gift-item>*{grid-column:1 / -1;grid-row:auto}
.a-gift .gift-item>.gift-badge{grid-column:1;grid-row:1;position:static;align-self:center;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:52px;margin:0;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #d4aa4e,var(--shadow-s)}
.a-gift .gift-item>.gift-badge::before,.a-gift .gift-item>.gift-badge::after{content:none}
.a-gift .gift-item>.gift-badge span{display:block;margin:0;font-size:10px;font-weight:700;line-height:1.2;letter-spacing:.04em;color:var(--ink)}
.a-gift .gift-item>.gift-badge b{display:block;margin:0;font-family:'Barlow Condensed',var(--jp);font-size:18px;font-weight:700;line-height:1;color:var(--ink)}
.a-gift .gift-item>h3{grid-column:2;grid-row:1;align-self:center;margin:0}
.a-gift .gift-item>h3+*{margin-top:var(--s-sub)}
.a-gift .gift-item--3 h3{text-indent:0}
.a-gift .gift-item--3 .gift-h-lead{font-size:var(--fs-h3)}
.a-gift .gift-item--3 .gift-amt{gap:8px;margin-top:4px}
.a-gift .gift-item--3 .gift-amt b{font-family:var(--jp);font-size:var(--fs-benefit);font-weight:900;line-height:1;letter-spacing:-.02em}
.a-gift .gift-item--3 .gift-amt span{font-size:calc(var(--fs-h3) * .82);font-weight:800;line-height:1.2}
.a-receive .recv-zero{font-size:var(--fs-item);font-weight:700}
.a-receive .recv-zero em{font-size:1.6em}
/* phone figures drawn for the old 350px column: scaled to the 342px rail (their --u only), not cut by it */
@media (max-width:599px){
  .a-reasons .r01-flow,.b-earn .b-cmt-visual{--u:calc((min(100vw,540px) - 2 * var(--pad)) / 350)}
  .a-service .lecture-wall,.b-support .b-wins{max-width:100%;margin-left:0;margin-right:0}
}

/* §9 B chapters */
/* for-you and why: cards on the rail, the words column wide enough for each phrase */
.b-foryou .b-types,.b-why .b-steps{margin-left:0;margin-right:0}
.b-foryou .b-type-text{margin-top:26px}
.b-foryou .b-type-text>span{flex:1 1 auto;min-width:0}
.b-foryou .b-type-text .nw{display:inline}
@media (max-width:599px){
  .b-foryou .b-type{grid-template-columns:minmax(0,1fr) 40%}
  .b-why .b-step{grid-template-columns:minmax(0,1fr) 44%}
  .b-support .b-wins li{flex:1 1 0;width:auto;min-width:0}
  .b-support .b-wins .b-win{width:100%;max-width:100%}
}
/* earn and consult */
.b-earn>.b-card{width:auto;max-width:100%;margin-left:0;margin-right:0}
.b-consult-card .b-consult-kicker{margin:0;font-size:var(--fs-item);font-weight:700;line-height:1.5}
.b-consult-card h2{margin:4px 0 0;font-size:calc(var(--fs-h2) * 1.15);font-weight:800;line-height:1.3;letter-spacing:.02em}
/* gift: 68,000 and 円OFF on one baseline as one figure, the ticket picture beside it as the aside, its lead above */
.b-gift .b-gift-kicker{font-size:var(--fs-label);font-weight:600;letter-spacing:.06em}
.b-gift .b-gift-lead{font-size:var(--fs-h3);font-weight:800;line-height:1.45}
.b-gift .b-gift-lead em{font-size:1em}
.b-gift .b-gift-amt{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;column-gap:4px;row-gap:6px;margin-left:0;margin-right:0}
.b-gift .b-gift-amt strong{order:1;font-family:var(--jp);font-size:var(--fs-benefit);font-weight:900;line-height:1;letter-spacing:-.02em}
.b-gift .b-gift-side{display:contents}
.b-gift .b-gift-side>b{order:2;font-size:calc(var(--fs-h3) * .82);font-weight:800;line-height:1}
.b-gift .b-gift-side>img{order:3;align-self:center;width:auto;height:clamp(30px,calc(26.29px + .952vw),40px);margin-left:10px}
.b-gift .b-pair{margin-left:0;margin-right:0}
.b-gift .b-pair li>p{font-size:var(--fs-label);white-space:normal;text-align:center}
/* courses: cards on the rail */
.b-courses-sec .b-course{margin-left:0;margin-right:0}
/* compare: a real table width — scrolls sideways on phones (the wire's B-11), the rail from the tablet up */
.b-compare .compare-scroll{max-width:none;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 6px;overflow-x:auto}
.b-compare table.compare{width:100%;max-width:none;min-width:480px;margin:0}
.b-compare table.compare thead th:nth-child(1){width:20%}
.b-compare table.compare thead th:nth-child(2){width:44%}
.b-compare table.compare thead th:nth-child(3){width:36%}
.b-compare table.compare :is(th,td){font-size:14px;line-height:1.6}
.b-compare table.compare tbody th{font-size:13px;font-weight:600}
.b-compare table.compare thead th{font-size:14px;font-weight:700}
.b-compare table.compare thead th.me{font-size:16px;font-weight:800}
@media (min-width:600px){
  .b-compare .compare-scroll{margin:0;padding:0 0 6px}
  .b-compare table.compare{min-width:0}
}

/* §10 wide screens (1040px and up): blocks use the rail; two columns only where the content pairs up */
@media (min-width:1040px){
  /* A services: chat and live each fill their half (they were 234px inline-blocks); the wall's caption under the wall */
  .a-service .svc--chat,.a-service .svc--live{display:block;width:auto;margin-right:0;vertical-align:baseline}
  .a-service .svc--wall>.wall-cap{grid-column:2}
  /* A courses: the panel spans the rail under its tabs — words and photo on the left, the teachers on the right */
  .a-course .a-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:none;column-gap:56px;align-items:start;max-width:none;margin-left:0;margin-right:0}
  .a-course .a-panel>*{grid-column:1;grid-area:auto}
  .a-course .a-panel>.a-panel-teachers{grid-column:2;grid-row:1 / span 6;margin-top:0}
  .a-course .a-panel>.a-panel-note{grid-column:1 / -1}
  .a-course .a-panel-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
  .a-course .a-panel-main>figure{grid-area:auto;aspect-ratio:4 / 3}
  /* A voice: the results carousel spans the rail like B's story */
  .a-voice .carousel{max-width:none;margin-left:0;margin-right:0}
  /* B story: the right column reads top-down — quote, the second figure, the details — with no gap between them */
  .b-story .story.bstory{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:"fig quote" "fig sub" "fig more" "id .";align-content:start}
  .b-story .story.bstory>.bstory-screen{grid-area:fig}
  .b-story .story.bstory>.story-voice{grid-area:quote;align-self:start}
  .b-story .story.bstory>.bstory-sub{grid-area:sub;align-self:start}
  .b-story .story.bstory>.story-more{grid-area:more;align-self:start}
  .b-story .story.bstory>.bstory-id{grid-area:id}
  /* B-06 blocks on the rail: words on the left, the pictures / list on the right */
  .b-support>.b-block,.b-support>.b-skills{max-width:none;margin-left:0;margin-right:0;text-align:left}
  .b-support .b-block--lecture{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;align-items:start}
  .b-support .b-block--lecture>*{grid-column:1}
  .b-support .b-block--lecture>.b-wins{grid-column:2;grid-row:1 / span 6;justify-content:flex-start;margin:0}
  .b-support .b-block--lecture>:is(.b-breakdown,.b-archive,.b-wins-note){text-align:left;justify-content:flex-start}
  .b-support .b-skills{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;align-items:start}
  .b-support .b-skills>*{grid-column:1}
  .b-support .b-skills>.b-skills-list{grid-column:2;grid-row:1 / span 4;margin-top:0}
  .b-support .b-block--roadmap,.b-support .roadmap-scroll{max-width:none;margin-left:0;margin-right:0}
  /* B earn: the two POINT cards side by side on the rail */
  .b-earn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:start}
  .b-earn>*{grid-column:1 / -1}
  .b-earn>.b-card{grid-column:auto;max-width:none;width:auto}
  /* B gift: the amount stays with its explanation (kicker, lead, amount, condition in one column); the gifts beside */
  .b-gift{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:center}
  .b-gift>*{grid-column:1 / -1}
  .b-gift>.b-gift-kicker,.b-gift>.b-gift-lead,.b-gift>.b-gift-amt,.b-gift>.ticket-card-cond{grid-column:1;justify-self:start;text-align:left;margin-left:0;margin-right:0}
  .b-gift>.b-gift-amt{justify-content:flex-start}
  .b-gift>.b-pair{grid-column:2;grid-row:1 / span 4;max-width:100%;margin:0}
  .b-gift>.b-gift-note{grid-column:2;text-align:right}
  /* B courses: each card spans the rail, its photo on the left and its words and teachers on the right */
  .b-courses-sec .b-courses{max-width:none;margin-left:0;margin-right:0}
  .b-courses-sec .b-course{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:48px;row-gap:0;align-items:start}
  .b-courses-sec .b-course>*{grid-column:2}
  .b-courses-sec .b-course .a-panel-main{display:contents}
  .b-courses-sec .b-course .a-panel-main>figure{grid-column:1;grid-row:1 / span 5;aspect-ratio:4 / 3;margin:0}
  .b-courses-sec .b-course .a-panel-side{grid-column:2;margin:12px 0 0}
}

/* §11 small phones (374px and down): the CTA label keeps its words together */
@media (max-width:374px){.cta .cta-label{font-size:min(1em,17px);word-break:keep-all}}

/* §12 instructor-r6 (instructor-r6-20261104/BRIEF.md) — B-06: the skill rows (their one open / close is now four, §13); A-06 service 03: the
   laptop body and the real lesson as two files. (The r6 A FV teachers graphic was rolled back to the r5 FV on the
   user's instruction, 2026-11-05.) */
/* B-06: the skill rows and their mark (the open / close itself: §13) */
.b-skill{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--fs-item);font-weight:700;line-height:1.5;color:var(--ink)}
.b-skill>b{min-width:1.3em;font-family:'Barlow Condensed',var(--jp);font-size:var(--fs-ord);font-weight:700;line-height:1;color:var(--teal)}
.b-skills-mark{position:absolute;right:8px;top:50%;width:12px;height:12px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.b-skills-body{padding:14px 0 0}
.b-skills-body p{margin:0}
.b-skills-body p+p{margin-top:8px}
@media (prefers-reduced-motion:reduce){.b-skills-mark{transition:none}}
/* A-06 service 03: the laptop body and the real lesson stay two files; the lesson sits inside the screen opening
   measured on the body (build_site.py LAPTOP_R6_SCREEN), whole, on black — never stretched, never over the bezel */
.a-service .laptop--r6{position:relative;margin-top:var(--s-sub)}
.a-service .laptop--r6>img{display:block;width:100%;height:auto}
.laptop-r6-screen{position:absolute;left:12.1024%;top:5.0885%;width:75.8645%;height:69.6903%;overflow:hidden;background:#000}
.laptop-r6-screen>img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 50%}

/* §13 wire-audit (wire-audit-20261105/IMPLEMENTATION-BRIEF.md, 2026-11-05) — the remaining differences from Kato's wire,
   in the current design: the sticky CTA from 0px with its line of reassurance, B-06 four open / close, A-09 guide pages */

/* sticky CTA: shown from the first screen — the wire's common H10 「追従はSHElikes・JET新LPの型（0pxから）を維持」. The
   audit-r3 wait for the FV's own CTA to scroll out (a scroll-driven animation in the legacy layer) is lifted: the wire wins
   over that later note; the FV's CTA and the bar are the same LINE link. Under the button one small line of reassurance
   (the wire's common rule 「CTAの下に安心の一言を1行」, the existing 登録は10秒で完了); the bar keeps its look otherwise. */
#sticky-cta{animation:none;translate:none;visibility:visible}
.sticky .cta-assure{margin:1px 0 0;font-size:11px;font-weight:500;line-height:1.3;color:var(--muted);letter-spacing:.02em}
/* the page ends clear of the bar (its height plus the safe area), so the last lines and buttons can always come above it */
#lp{padding-bottom:calc(var(--sticky-clear) + env(safe-area-inset-bottom))}
:root{--sticky-clear:100px}
.lp-menu .cta-assure{margin-top:6px;text-align:center}

/* B-06: the four skills, each its own open / close — closed at first, its own mark turns; the row looks as before (the
   rule moves from the row to the item so an opened sentence sits inside it); the two common lines follow the four once */
.b-skills-list{margin-top:var(--s-sub)}
.b-skill-disc{border-bottom:1px solid var(--line)}
.b-skill-disc>summary{position:relative;display:block;padding-right:40px;list-style:none;cursor:pointer}
.b-skill-disc>summary::-webkit-details-marker{display:none}
.b-skill-disc .b-skill{border-bottom:0}
.b-skill-disc[open] .b-skills-mark{transform:translateY(-30%) rotate(-135deg)}
.b-skill-disc>summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.b-skill-body{padding:0 40px 14px calc(1.3 * var(--fs-ord) + 14px)}   /* under the skill's words: the number's box (1.3em of --fs-ord) + the gap */
.b-skill-body p{margin:0;font-size:var(--fs-body);font-weight:500;line-height:var(--lh-body);letter-spacing:.02em;color:var(--ink);word-break:auto-phrase;text-wrap:pretty}
/* the two common lines are now always in view (they were inside the one disclosure): they break between phrases too */
.b-skills>.b-skills-body p{word-break:auto-phrase;text-wrap:pretty}

/* A-09 gift 01: three real inner pages of the guide, one over another, beside the same standing cover: the front page in
   the old single page's width and paper, a little lower, the two behind it showing their tops and right edges; softened,
   more the further back, so they read as pages of the book (all inside the 390 design and the visual's own box) */
.a-gift .g1-stack{position:absolute;z-index:1;left:calc(140 * var(--u));top:0;width:calc(237.5 * var(--u));height:calc(175 * var(--u))}
.a-gift .g1-sheet{position:absolute;left:0;width:100%;height:calc(138.8 * var(--u));padding:calc(6 * var(--u));background:#fff;border-radius:calc(2 * var(--u));
  box-shadow:0 0 0 .5px rgba(20,50,60,.1),0 calc(12 * var(--u)) calc(20 * var(--u)) calc(-8 * var(--u)) rgba(20,48,56,.34)}
.a-gift .g1-sheet img{display:block;width:100%;height:auto}
.a-gift .g1-sheet--1{top:calc(36 * var(--u));filter:blur(calc(.45 * var(--u)))}
.a-gift .g1-sheet--2{top:calc(18 * var(--u));transform:translateX(calc(5 * var(--u)));filter:blur(calc(1.1 * var(--u)))}
.a-gift .g1-sheet--3{top:0;transform:translateX(calc(10 * var(--u)));filter:blur(calc(1.8 * var(--u)))}

/* Codex review of the 44 chapter images (2026-11-05), three local fixes in the current design:
   B-07 POINT-1: the tag over the comment bubbles keeps every word — two words, two lines where the column is narrow */
.b-cmts-tag{white-space:normal;text-wrap:balance}
/* A-08 on the desktop: BEFORE above AFTER on the left, as in the wire and on the phone (the reading spread of lp.css placed
   AFTER only, so BEFORE fell to the last row); the right column (words, profile, details) keeps its order */
@media (min-width:1040px){
  .a-voice .story{grid-template-rows:auto auto auto 1fr}
  .a-voice .story>.story-before{grid-column:1;grid-row:2}
  .a-voice .story>.story-after{grid-column:1;grid-row:3 / span 2}
  .a-voice .story>.story-voice{grid-row:1 / span 2}
  .a-voice .story>.story-proof{grid-row:3}
  .a-voice .story>.story-more{grid-row:4}
}