/* 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{
/* =====================================================================================================================
   AUDIT-REVISION r3 (imagegen-master-20261104/briefs/AUDIT-REVISION.md): the corrected drafts *-r3.png, at 390 × --u.
   Loaded after sections.css. Real photos, profiles, lessons and the fixed copy stay the sources; screens are images (noted).
   ===================================================================================================================== */

/* ---- shared: the player bar under a video (play, time, progress, full screen) ---- */
.pbar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:calc(6 * var(--u));height:calc(15 * var(--u));padding:0 calc(8 * var(--u));background:linear-gradient(transparent,rgba(0,0,0,.62));color:#fff;font-size:max(7px,calc(7.4 * var(--u)));font-weight:600;line-height:1;letter-spacing:.02em}
.pbar-play{flex:none;width:0;height:0;border-left:calc(6.4 * var(--u)) solid #fff;border-top:calc(3.8 * var(--u)) solid transparent;border-bottom:calc(3.8 * var(--u)) solid transparent}
.pbar-t{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.pbar-line{position:relative;flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.42)}
.pbar-line i{position:absolute;left:0;top:0;width:28%;height:100%;border-radius:2px;background:#fff}
.pbar-line i::after{content:'';position:absolute;right:calc(-3 * var(--u));top:50%;width:calc(6 * var(--u));height:calc(6 * var(--u));margin-top:calc(-3 * var(--u));border-radius:50%;background:#fff}
.pbar-fs{flex:none;width:calc(8 * var(--u));height:calc(8 * var(--u));background:linear-gradient(#fff,#fff) 0 0/35% 1.5px no-repeat,linear-gradient(#fff,#fff) 0 0/1.5px 35% no-repeat,linear-gradient(#fff,#fff) 100% 0/35% 1.5px no-repeat,linear-gradient(#fff,#fff) 100% 0/1.5px 35% no-repeat,linear-gradient(#fff,#fff) 0 100%/35% 1.5px no-repeat,linear-gradient(#fff,#fff) 0 100%/1.5px 35% no-repeat,linear-gradient(#fff,#fff) 100% 100%/35% 1.5px no-repeat,linear-gradient(#fff,#fff) 100% 100%/1.5px 35% no-repeat}

/* ---- A reason 01 (A-reason-01-r3): the made vertical video in the player; the two labels inside their frames ---- */
.r01-tablet--video{padding:calc(5 * var(--u));background:#2b3033;border-radius:calc(12 * var(--u))}
.r01-screen{position:relative;display:block;height:calc(139 * var(--u));overflow:hidden;border-radius:calc(4 * var(--u));background:#111}
.r01-screen .r01-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(6px) brightness(.55);transform:scale(1.12)}
.r01-screen .r01-vid{position:absolute;left:50%;top:0;width:59%;height:100%;object-fit:cover;object-position:52% 50%;transform:translateX(-50%);border-radius:0}
.r01-you{width:calc(140 * var(--u));height:calc(33 * var(--u));font-size:calc(12.2 * var(--u))}
.r01-you .ic-film{width:calc(27 * var(--u))}
.r01-cmt{width:calc(140 * var(--u));height:calc(33 * var(--u));padding:0 calc(6 * var(--u));gap:calc(6 * var(--u));font-size:calc(11.4 * var(--u))}
.r01-cmt .ic-chat{width:calc(25 * var(--u))}

/* ---- A gift 03 (gift-03-coupon-r3): the 01 ring, 受講料に使える, 68,000 with the band, the condition right under it, the TICKET ---- */
.gift-item--3 .gift-badge{display:inline-flex;align-items:center;justify-content:center;width:calc(62 * var(--u));height:calc(46 * var(--u));border:calc(2.6 * var(--u)) solid transparent;border-radius:50%;background:#fff padding-box,linear-gradient(140deg,#f6dc8c,#d2a23c 48%,#b98523) border-box;box-shadow:0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(120,90,20,.2);line-height:1}
.gift-item--3 .gift-badge span,.gift-item--3 .gift-badge b{display:inline;margin:0;font-size:calc(15.6 * var(--u));font-weight:900;letter-spacing:0;color:var(--ink)}
.gift-item--3 .gift-badge b{font-size:calc(16.6 * var(--u));letter-spacing:-.01em}
.a-gift .gift-item--3{display:block;position:relative;margin-bottom:calc(28 * var(--u));text-align:left}
.a-gift .gift-item--3>.gift-badge{position:absolute;left:calc(4 * var(--u));top:calc(-6 * var(--u))}
.a-gift .gift-item--3 h3{margin:0 calc(-6 * var(--u)) 0 0;text-indent:calc(76 * var(--u));font-size:calc(29.5 * var(--u));line-height:1.2}
.a-gift .gift-item--3 h3 br{display:block}
.a-gift .gift-item--3 .gift-h-lead{position:relative;font-size:1em}
.a-gift .gift-item--3 .gift-h-lead::after{content:'';position:absolute;left:calc(100% + 6 * var(--u));top:calc(-8 * var(--u));width:calc(22 * var(--u));height:calc(23 * var(--u));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 23'%3E%3Cg fill='none' stroke='%23ff9419' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5.2 11.2 3.4 2.6'/%3E%3Cpath d='M10.4 14.2l6.4-6.6'/%3E%3Cpath d='M12.6 20.2l7.8-.6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.a-gift .gift-item--3 .gift-amt{display:flex;align-items:center;gap:calc(6 * var(--u));margin:calc(6 * var(--u)) 0 0;padding-bottom:calc(6 * var(--u));text-indent:0;background:linear-gradient(#d4f1f5,#d4f1f5) 0 100%/100% calc(5 * var(--u)) no-repeat}
.a-gift .gift-item--3 .gift-amt b{font-family:'Barlow Condensed',var(--jp);font-size:calc(96 * var(--u));font-weight:700;line-height:.82;letter-spacing:.005em;color:var(--teal)}
.a-gift .gift-item--3 .gift-amt span{font-size:calc(26 * var(--u));font-weight:900;line-height:1.05;color:var(--ink)}
.a-gift .gift-item--3 .coupon-cond{margin-top:calc(8 * var(--u));font-size:max(11px,calc(13.2 * var(--u)));font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.a-gift .gift-item--3 .gift-visual--coupon{margin-top:calc(22 * var(--u))}
.a-gift .gift-item--3 .gift-visual--coupon img{width:calc(232 * var(--u));border-radius:0;filter:drop-shadow(0 calc(6 * var(--u)) calc(7 * var(--u)) rgba(20,48,56,.22))}

/* ---- A: 3大特典の受け取り (shared-gift-receive-r3): its own band after gift 03 — the heading, the three things, 0円, the CTA ---- */
.a-receive{padding:calc(14 * var(--u)) var(--pad) calc(26 * var(--u));background:#fff;text-align:center}
.a-receive::before{content:'';display:block;height:2px;margin:0 calc(-5 * var(--u)) calc(16 * var(--u));background:var(--teal)}
.recv-h{position:relative;display:inline-block;margin:0;font-size:calc(40 * var(--u));font-weight:900;line-height:1.15;letter-spacing:.01em;color:var(--ink);white-space:nowrap;font-feature-settings:'palt'}
.recv-h em{color:var(--teal)}
.recv-h::after{content:'';position:absolute;left:calc(100% + 3 * var(--u));top:calc(-6 * var(--u));width:calc(22 * var(--u));height:calc(23 * var(--u));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 23'%3E%3Cg fill='none' stroke='%23ff9419' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5.2 11.2 3.4 2.6'/%3E%3Cpath d='M10.4 14.2l6.4-6.6'/%3E%3Cpath d='M12.6 20.2l7.8-.6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.recv-panel{margin:calc(10 * var(--u)) calc(-1 * var(--pad)) 0;padding:calc(14 * var(--u)) var(--pad) 0;background:linear-gradient(180deg,#e6f6f9,#f2fafc 60%,#fff)}
.recv-items{display:flex;align-items:flex-end;justify-content:center;gap:calc(8 * var(--u));margin:0 calc(-6 * var(--u))}
.recv-items li{flex:none}
.recv-book .stand-cover{--cw:57}
.recv-tablet{display:block;width:calc(124 * var(--u));padding:calc(5 * var(--u));background:#1b2224;border-radius:calc(8 * var(--u));box-shadow:0 0 0 1px #3a4447 inset,0 calc(6 * var(--u)) calc(10 * var(--u)) calc(-5 * var(--u)) rgba(20,40,46,.4)}
.recv-tablet img{display:block;width:100%;height:auto;border-radius:calc(2 * var(--u))}
.recv-ticket img{display:block;width:calc(94 * var(--u));height:auto;filter:drop-shadow(0 calc(4 * var(--u)) calc(5 * var(--u)) rgba(20,48,56,.22))}
.recv-free{margin-top:calc(14 * var(--u))}
.recv-free span{display:inline-block;padding:0 calc(6 * var(--u));font-size:calc(24.5 * var(--u));font-weight:900;line-height:1.3;color:var(--ink);white-space:nowrap;background:linear-gradient(transparent 70%,#ccecf2 70%)}
.recv-zero{display:flex;align-items:center;justify-content:center;gap:calc(12 * var(--u));margin-top:calc(8 * var(--u));line-height:1.2}
.recv-zero::before,.recv-zero::after{content:'';width:calc(43 * var(--u));height:1.5px;background:var(--teal)}
.recv-zero span{font-size:calc(20 * var(--u));font-weight:900;color:var(--ink);white-space:nowrap}
.recv-zero em{font-size:1.5em;color:var(--teal)}
.recv-zero span em+*,.recv-zero span{letter-spacing:.01em}
.a-receive .cta-block{max-width:none;margin:calc(14 * var(--u)) calc(23 * var(--u)) 0}
.a-receive .cta{min-height:calc(60 * var(--u));padding:0 calc(30 * var(--u)) 0 calc(18 * var(--u))}
.a-receive .cta-label{font-size:calc(24 * var(--u));letter-spacing:.02em;white-space:nowrap}
.a-receive .cta-label small{font-size:calc(18 * var(--u))}
.a-receive .cta-assure{display:flex;flex-direction:column;align-items:center;margin-top:calc(9 * var(--u));font-size:max(11px,calc(13 * var(--u)));line-height:1.5}

/* ---- B-05 STEP 1 (B-three-steps-r3): the learning image ---- */
.b-step:first-child .b-step-pic img{object-position:50% 50%}

/* ---- B-06 POINT 1 (B-learning-support-r3): the colour band, POINT-1, two round windows, 40/30/30, archive ---- */
.b-band-head{margin:0 calc(-1 * var(--pad));padding:calc(6 * var(--u)) var(--pad) calc(7 * var(--u));background:linear-gradient(90deg,#0c97a4,#13a9b5 55%,#0c97a4);text-align:center}
.b-band-head h2{margin:0;font-size:calc(27 * var(--u));font-weight:900;line-height:1.25;letter-spacing:.02em;color:#fff;white-space:nowrap;font-feature-settings:'palt'}
.b-support .b-block--lecture{margin-top:calc(10 * var(--u))}
.b-support .b-block--lecture>.b-point-tag{position:relative;display:block;width:max-content}
.b-support .b-block--lecture>.b-point-tag::after{content:'';position:absolute;left:calc(100% + 8 * var(--u));top:50%;width:calc(266 * var(--u));height:1.5px;background:#bfe7ed}
.b-support .b-block--lecture h3{margin:calc(6 * var(--u)) calc(-8 * var(--u)) 0;padding-bottom:calc(4 * var(--u));text-align:center;font-size:calc(32 * var(--u));font-weight:900;line-height:1.24;color:var(--ink);white-space:nowrap;background:linear-gradient(transparent calc(100% - 5 * var(--u)),#d4f1f5 0);font-feature-settings:'palt'}
.b-support .b-block--lecture h3 em{color:var(--teal)}
.b-support .b-block--lecture h3 .num{font-size:1.62em;letter-spacing:-.02em;line-height:.9}
.b-wins{display:flex;justify-content:center;gap:calc(4 * var(--u));margin:calc(4 * var(--u)) calc(-6 * var(--u)) 0}
.b-wins li{position:relative;flex:none;width:calc(177 * var(--u))}
.b-win{display:block;width:calc(177 * var(--u));height:calc(177 * var(--u));overflow:hidden;border-radius:50%}
.b-win img{display:block;width:100%;height:100%}
.b-win-tag{position:absolute;z-index:1;left:50%;top:calc(20 * var(--u));transform:translateX(-50%);margin:0;padding:calc(2 * var(--u)) calc(14 * var(--u));border-radius:999px;background:#0e9aa7;color:#fff;font-size:calc(15 * var(--u));font-weight:900;line-height:1.3;white-space:nowrap}
.b-support .b-block--lecture .b-breakdown{margin:calc(8 * var(--u)) calc(-10 * var(--u)) 0;text-align:center;font-size:calc(18.6 * var(--u));font-weight:900;letter-spacing:-.01em;color:var(--ink);font-feature-settings:'palt'}
.b-support .b-block--lecture .b-breakdown b{font-size:1.4em;font-weight:900;color:var(--orange)}
.b-archive{display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--u));margin-top:calc(6 * var(--u))}
.b-archive::before,.b-archive::after{content:'';flex:1;max-width:calc(52 * var(--u));height:1.5px;background:var(--teal)}
.b-archive span{font-size:calc(16 * var(--u));font-weight:900;color:var(--ink);white-space:nowrap}
.b-wins-note{margin-top:calc(4 * var(--u));text-align:center}

/* ---- B-07 (B-income-support-r3): the plain + , POINT-1 = the made video + three comments, POINT-2 = two round windows ---- */
.b-earn .b-plus{width:calc(32 * var(--u));height:calc(32 * var(--u));top:calc(4 * var(--u));transform:translateX(-50%);border-radius:0;background:none;box-shadow:none}
.b-earn .b-plus::before,.b-earn .b-plus::after{width:calc(32 * var(--u));height:calc(7 * var(--u));margin:calc(-3.5 * var(--u)) 0 0 calc(-16 * var(--u));border-radius:calc(1.5 * var(--u));background:var(--teal)}
.b-cmt-visual{display:grid;grid-template-columns:calc(240 * var(--u)) minmax(0,1fr);column-gap:calc(13 * var(--u));align-items:start;margin:calc(12 * var(--u)) 0 0;padding:0}
.b-video{position:relative;height:calc(142 * var(--u));margin:0;overflow:hidden;border-radius:calc(6 * var(--u));background:#111;box-shadow:0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(20,48,56,.16)}
.b-video>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.b-video-tag{position:absolute;z-index:1;left:calc(6 * var(--u));top:calc(5 * var(--u));padding:calc(2 * var(--u)) calc(7 * var(--u));border-radius:999px;background:#0e9aa7;color:#fff;font-size:max(8px,calc(9.4 * var(--u)));font-weight:900;line-height:1.3}
.b-cmts{display:flex;flex-direction:column;align-items:stretch;gap:calc(5 * var(--u))}
.b-cmts-tag{margin:0;padding:calc(2 * var(--u)) 0;border-radius:999px;background:#0e9aa7;color:#fff;text-align:center;font-size:max(8px,calc(9.4 * var(--u)));font-weight:900;line-height:1.3;white-space:nowrap}
.b-cmts .b-bubbles{position:static;display:block;width:100%;height:auto}
.b-earn .b-duo{gap:calc(14 * var(--u));margin-top:calc(14 * var(--u))}
.b-earn .b-duo-tag{margin:0 0 calc(-12 * var(--u));padding:calc(2 * var(--u)) calc(16 * var(--u));font-size:calc(14.5 * var(--u))}
.b-earn .b-duo-pic{width:calc(142 * var(--u));height:calc(142 * var(--u));background:none}
.b-earn .b-duo-pic img{position:static;display:block;width:100%;height:100%;transform:none}

/* ---- B-02 (B-story-r3): the real profile screen with BEFORE / AFTER over its lower part, then the person and the words ---- */
.sec-head--bstory{margin-bottom:calc(10 * var(--u))}
.sec-head--bstory .sec-en{font-size:calc(22 * var(--u));color:#7fd0da}
.sec-head--bstory h2{margin-top:calc(1 * var(--u));font-size:calc(22.4 * var(--u));font-weight:900;line-height:1.3;color:var(--ink);white-space:nowrap;font-feature-settings:'palt'}
.sec-head--bstory h2 em{position:relative;color:var(--ink);background:linear-gradient(transparent 80%,var(--orange) 80%,var(--orange) 92%,transparent 92%)}
.b-story .carousel .story.bstory{padding:0 0 calc(12 * var(--u));overflow:hidden;background:#fff;border-radius:calc(12 * var(--u));box-shadow:0 calc(3 * var(--u)) calc(14 * var(--u)) rgba(0,60,70,.1)}
.bstory-screen{position:relative;height:calc(250 * var(--u));margin:0;overflow:hidden;background:#000}
.bstory-shot{display:block;width:calc(223 * var(--u));height:auto;margin:0 auto}
.bstory-shot--line{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding-top:calc(22 * var(--u));background:#fff}
.bstory-ava{width:calc(92 * var(--u));height:calc(92 * var(--u));border-radius:50%}
.bstory-line{width:calc(300 * var(--u));height:auto;margin-top:calc(14 * var(--u))}
.bstory-bands{position:absolute;left:0;right:0;bottom:0}
.bstory-before,.bstory-after{display:flex;align-items:center;gap:calc(10 * var(--u));margin:0;padding:0 calc(12 * var(--u));color:#fff;font-weight:900;white-space:nowrap}
.bstory-before{height:calc(25 * var(--u));background:rgba(70,76,80,.93);font-size:calc(14.4 * var(--u))}
.bstory-after{height:calc(37 * var(--u));background:#0e9aa7;font-size:calc(14.4 * var(--u))}
.bstory .ba-tag{flex:none;display:inline-grid;place-items:center;min-width:calc(60 * var(--u));height:calc(17 * var(--u));padding:0 calc(6 * var(--u));border-radius:calc(4 * var(--u));background:#fff;color:#4a5054;font-size:max(10px,calc(11.5 * var(--u)));font-weight:900;letter-spacing:.04em}
.bstory .ba-tag--after{color:#0e8f9b}
.bstory-before>span:last-child{position:relative;padding-left:calc(10 * var(--u))}
.bstory-before>span:last-child::before,.bstory-after .lbl::before{content:'';position:absolute;left:0;top:15%;bottom:15%;width:1.5px;background:rgba(255,255,255,.7)}
.bstory-after .lbl{position:relative;padding-left:calc(10 * var(--u))}
.bstory-after .fig{margin-left:auto;font-size:calc(22 * var(--u));line-height:1}
.bstory-after .fig strong{font-size:1.6em;letter-spacing:-.02em}
.bstory-screen figcaption{position:absolute;right:calc(8 * var(--u));top:calc(6 * var(--u));padding:calc(1 * var(--u)) calc(6 * var(--u));border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:max(9px,calc(9.4 * var(--u)));font-weight:600}
.bstory-shot--line~.bstory-bands+figcaption,.bstory-screen:has(.bstory-shot--line) figcaption{background:rgba(36,62,67,.75)}
.bstory-id{display:flex;align-items:center;gap:calc(10 * var(--u));margin:calc(12 * var(--u)) calc(12 * var(--u)) 0;flex-wrap:wrap}
.bstory-id .tag{margin:0}
.bstory-id b{font-size:calc(22 * var(--u));font-weight:900;color:var(--ink);line-height:1.2}
.bstory-sub{display:flex;align-items:baseline;justify-content:center;gap:calc(6 * var(--u));margin:calc(8 * var(--u)) calc(12 * var(--u)) 0;padding:calc(6 * var(--u)) calc(8 * var(--u));border-radius:calc(6 * var(--u));background:#e3f5f8;font-size:calc(14.6 * var(--u));font-weight:900;color:var(--ink);white-space:nowrap}
.bstory-sub .fig{color:var(--teal);font-size:calc(19 * var(--u))}
.bstory-sub .fig b{font-size:1.5em;letter-spacing:-.02em}
.b-story .bstory .story-voice{margin:calc(10 * var(--u)) calc(12 * var(--u)) 0;font-size:calc(15.6 * var(--u));line-height:1.6}
.b-story .bstory .story-more{margin:calc(8 * var(--u)) calc(12 * var(--u)) 0}

/* ---- 600+ / 1040+ ---- */
@media (min-width:600px){
  .a-receive>*{max-width:calc(390 * var(--u));margin-left:auto;margin-right:auto}
  .recv-panel{max-width:none;margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad))}
}
@media (min-width:1040px){
  .a-receive{--u:1.42px}
  .recv-panel>*{max-width:calc(390 * var(--u));margin-left:auto;margin-right:auto}
  .recv-items{max-width:calc(380 * var(--u))}
  .a-receive .cta-block{width:calc(320 * var(--u));margin-left:auto;margin-right:auto}
  .b-band-head{margin:0 calc(-1 * var(--pad))}
}

/* ---- r3 fixes after the first real-screen comparison ---- */
/* B-02: the AFTER and second-result lines at the draft's sizes so they stay inside the 350u card */
.bstory-after{font-size:calc(12.6 * var(--u))}
.bstory-after .fig{font-size:calc(18 * var(--u))}
.bstory-after .fig strong{font-size:2em}
.bstory-sub{justify-content:center;gap:calc(5 * var(--u));padding:calc(5 * var(--u)) calc(6 * var(--u));font-size:calc(12.2 * var(--u))}
.bstory-sub .fig{font-size:calc(15.6 * var(--u))}
.bstory-sub .fig b{font-size:1.58em}
/* B-02 次はあなたの番 (B-story-r3): a pale box, the kicker large between two orange strokes */
.b-story .b-next{margin:calc(18 * var(--u)) calc(-10 * var(--u)) 0;padding:calc(12 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));border-radius:calc(12 * var(--u));background:#e6f6f9}
.b-story .b-next-kicker{display:flex;align-items:center;justify-content:center;gap:calc(12 * var(--u));font-size:calc(22 * var(--u));font-weight:900;letter-spacing:.02em;color:var(--ink)}
.b-story .b-next-kicker::before,.b-story .b-next-kicker::after{content:'';width:calc(3 * var(--u));height:calc(16 * var(--u));border-radius:2px;background:var(--orange);transform:rotate(-35deg)}
.b-story .b-next-kicker::after{transform:rotate(35deg)}
.b-story .b-next-copy{margin-top:calc(2 * var(--u));font-size:calc(16 * var(--u));font-weight:900;line-height:1.5;color:var(--ink)}
.b-story .b-next-copy em{font-size:1.3em;color:var(--teal)}
.b-story .b-next .cta-block{margin-top:calc(10 * var(--u))}
/* B-06: 40 / 30 / 30 on one line inside the page */
.b-support .b-block--lecture .b-breakdown{margin:calc(8 * var(--u)) calc(-12 * var(--u)) 0;font-size:calc(15.4 * var(--u))}
.b-support .b-block--lecture .b-breakdown b{font-size:1.45em}
/* B-07: the cards as wide as the draft's (370u) so the comment column holds its label; no rule under the heading */
.b-earn>.sec-head{padding:0;border:0;text-align:center}
.b-earn>.sec-head h2{display:inline-block;padding:0 calc(6 * var(--u)) calc(2 * var(--u));background:linear-gradient(transparent 78%,#d4f1f5 78%)}
.b-earn .b-card{margin-left:calc(-10 * var(--u));margin-right:calc(-10 * var(--u));padding:calc(12 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u))}
.b-earn .b-entry li{flex:none;padding:0;border:0;font-size:calc(24 * var(--u));white-space:nowrap}

/* ---- B-10 (B-course-creator/liver/commercer-r3): three cards always shown — the same white label, ○○になるなら, the photo with
   the description and the figure, the teacher (one teacher: photo left, words right; two: side by side) ---- */
.b-courses-sec .b-course{margin:0 calc(-8 * var(--u));padding:calc(14 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u));border-radius:calc(14 * var(--u));background:linear-gradient(170deg,#e2f4f7,#eef9fb 60%,#e5f6f9)}
.b-courses-sec .b-course-channel{display:inline-block;padding:calc(3 * var(--u)) calc(12 * var(--u));border-radius:999px;background:#fff;color:var(--ink);font-size:calc(16 * var(--u));font-weight:900;letter-spacing:0;box-shadow:0 1px 2px rgba(0,60,70,.06)}
.b-courses-sec .b-course h3{margin:calc(6 * var(--u)) calc(-6 * var(--u)) 0 0;font-size:calc(28 * var(--u));line-height:1.18;white-space:nowrap}
.b-courses-sec .b-course h3 em{font-size:1.42em;letter-spacing:-.01em}
.b-courses-sec .a-panel-main{grid-template-columns:calc(223 * var(--u)) minmax(0,1fr);column-gap:calc(12 * var(--u));margin-top:calc(8 * var(--u))}
.b-courses-sec .a-panel-main>figure{aspect-ratio:223/146}
.b-courses-sec .a-panel-side .b-course-desc{font-size:calc(16.2 * var(--u));font-weight:900;line-height:1.32}
.b-courses-sec .a-income-label{margin-top:calc(9 * var(--u));padding:calc(2 * var(--u)) calc(8 * var(--u));font-size:max(10px,calc(12 * var(--u)))}
.b-courses-sec .a-income-fig strong{font-size:calc(40 * var(--u))}
.b-courses-sec .a-income-fig b{font-size:calc(19 * var(--u))}
.b-courses-sec .a-panel-teachers{margin-top:calc(14 * var(--u));padding-top:calc(12 * var(--u));border-top:1.5px solid #bfe6ec}
.b-courses-sec .a-panel-teachers .b-course-th{font-size:calc(19.5 * var(--u))}
.b-courses-sec .tcards:has(>.tcard:only-child){grid-template-columns:1fr}
.b-courses-sec .tcard:only-child{display:grid;grid-template-columns:calc(162 * var(--u)) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:calc(14 * var(--u));align-items:start}
.b-courses-sec .tcard:only-child .t-photo{grid-row:1 / span 3;aspect-ratio:162/128}
.b-courses-sec .tcard:only-child .tcard-name{margin-top:0;font-size:calc(27 * var(--u));line-height:1.15}
.b-courses-sec .tcard:only-child .tcard-role{font-size:max(10px,calc(12.6 * var(--u)))}
.b-courses-sec .tcard:only-child .tcard-list li{font-size:calc(15.2 * var(--u))}
.b-courses-sec .tcard:not(:only-child) .tcard-name{font-size:calc(21 * var(--u))}
.b-courses-sec .tcard:not(:only-child) .tcard-list li{font-size:calc(14 * var(--u))}
/* B-07 headings at the draft's size */
.b-earn .b-card h3{font-size:calc(21.4 * var(--u))}

/* B-10: the description in the draft's narrow column with ordinary Japanese wrapping (the words are the source's, longer
   than the draft's); the figure a size down so 1,000万円超 stays inside the card */
.b-courses-sec .a-panel-main{grid-template-columns:calc(212 * var(--u)) minmax(0,1fr)}
.b-courses-sec .a-panel-main>figure{aspect-ratio:212/142}
.b-courses-sec .a-panel-side .b-course-desc{font-size:calc(15.2 * var(--u));line-height:1.36;word-break:normal;line-break:strict}
.b-courses-sec .a-panel-side{margin-right:calc(-6 * var(--u))}
.b-courses-sec .a-income-fig strong{font-size:calc(31 * var(--u))}
.b-courses-sec .a-income-fig b{font-size:calc(15 * var(--u))}

.b-courses-sec .tcard-list li{font-feature-settings:'palt';word-break:keep-all;overflow-wrap:anywhere}

/* A receive: the coupon's condition again, under the ticket (the popup's own words; not only under gift 03) */
.recv-cond{margin-top:calc(7 * var(--u));font-size:max(10.5px,calc(11.6 * var(--u)));font-weight:700;line-height:1.5;color:var(--ink)}
.recv-free{margin-top:calc(10 * var(--u))}
/* A FV: the slanted gift names stay inside 320–430 */
.a-fv-gift-names{font-size:calc(17.8 * var(--u))}

@media (min-width:1040px){
  /* A gift 03 across both columns: the amount and its condition left, the ticket right */
  .a-gift .gift-item--3{grid-column:1 / -1;display:block;width:calc(390 * var(--u));max-width:100%;margin-left:auto;margin-right:auto;padding-top:36px}
  .a-gift .gift-item--3>.gift-badge{top:30px}
  /* the gift-01 picture follows its column (1040: narrower than 390u at 1.42px) */
  .a-gift .gift-item--1{container-type:inline-size}
  .a-gift .gift-item--1 .gift-visual--guide{--u:min(1.42px,calc(100cqw / 390));margin-left:auto;margin-right:auto}
  /* B-06 POINT 1 and B-07's cards at the drafts' width, centred */
  .b-support .b-block--lecture{max-width:calc(390 * var(--u));margin-left:auto;margin-right:auto}
  .b-earn .b-card{max-width:calc(370 * var(--u));margin-left:auto;margin-right:auto}
  .b-earn .b-cmt-visual{grid-template-columns:calc(240 * var(--u)) calc(97 * var(--u));justify-content:center}
  .b-earn .b-entry{display:block;text-align:center}
}
.a-fv-gift-names{width:max-content;max-width:100%;margin-left:auto;margin-right:auto}

@media (min-width:1040px){
  /* B-06 at the desktop: POINT 1, the roadmap (the whole table, no scroll needed) and the four skills in one centred column */
  .b-support>.b-block.b-block--lecture,.b-support>.b-block.b-block--roadmap{display:block}
  .b-support>.b-block.b-block--roadmap{max-width:760px;margin-left:auto;margin-right:auto}
  .b-support>.b-block.b-block--roadmap h3 br{display:none}
  .b-support .b-skills{display:block;max-width:calc(390 * var(--u));margin-left:auto;margin-right:auto}
  .b-support .b-skills>ol{display:block;margin-top:calc(14 * var(--u))}
  .b-support .b-skills>p{margin-top:calc(10 * var(--u))}
}
@media (min-width:1040px){.b-support .roadmap-scroll{--u:1.18px}.b-support .rm-hint{display:none}}

/* fixes from the text-in-box check (320–430) */
/* B-02: BEFORE / AFTER keep inside their bands for the longer source lines (ハル): the label may take two lines */
.bstory-before{font-size:calc(12.8 * var(--u))}
.bstory-before>span:last-child,.bstory-after .lbl{flex:1 1 auto;min-width:0;white-space:normal;line-height:1.22}
.bstory-after{min-height:calc(37 * var(--u));height:auto;padding-top:calc(3 * var(--u));padding-bottom:calc(3 * var(--u))}
.bstory-before{min-height:calc(25 * var(--u));height:auto;padding-top:calc(2 * var(--u));padding-bottom:calc(2 * var(--u))}
.bstory-after .fig{flex:none;font-size:calc(17 * var(--u))}
/* A reason 04: the names at the draft's measured width (row 1 ≈ 271u, row 3 ≈ 271u) */
.r04-row{font-size:calc(34.6 * var(--u))}
.r04-row--sup{font-size:calc(22.4 * var(--u))}
/* MESSAGE: line 2 inside 375 with room */
.message h2{font-size:calc(44 * var(--u))}

/* The FV grew (A-fv-cta-r3 keeps every required line at a readable size): the sticky CTA waits until the FV's own CTA has
   scrolled out, so the two never cover each other on the first screen. CSS only (scroll-driven animation; lp.js unchanged);
   where it is not supported the sticky stays as before. */
@supports (animation-timeline: view()) {
  body{timeline-scope:--fvcta}
  .a-fv>.cta-block,.b-fv-gift .cta-block{view-timeline:--fvcta block}
  #sticky-cta{animation:jet-sticky-in linear both;animation-timeline:--fvcta;animation-range:exit 0% exit 100%}
  /* the individual translate property, never transform: lp.css centres .sticky with left:50% + transform:translateX(-50%),
     and a transform keyframe replaced it (the bar sat from 50% to 150% of the width) */
  @keyframes jet-sticky-in{from{translate:0 110%;visibility:hidden}to{translate:0 0;visibility:visible}}
}

/* B-02 bands: break only between the period and the measure (開始1ヶ月で / 月間収益), never one stray character */
.bstory-before>span:last-child,.bstory-after .lbl{word-break:keep-all;overflow-wrap:anywhere}
.bstory .ba-tag{min-width:calc(54 * var(--u))}

/* B: the operators' figures keep the non-guarantee note next to them (FV laurel, B-04 laurel) — the same words as A */
.b-fv-fine{margin:calc(6 * var(--u)) 0 0;padding:0 var(--pad);text-align:center;font-size:max(10px,calc(10.4 * var(--u)));line-height:1.5;color:var(--muted)}
.b-about-fine{margin-top:calc(6 * var(--u));text-align:center}
@media (min-width:1040px){.b-fv-fine{font-size:12px;margin-top:8px}}

/* Final QA (CODEX-QA.md): A reason 01 — the two labels end inside the text column (368u at 390), not 4px from the edge;
   the tablet a little narrower, the photos and the heading where they were */
.r01-flow{grid-template-columns:calc(200 * var(--u)) minmax(0,1fr);column-gap:calc(4 * var(--u))}
.r01-screen{height:calc(131 * var(--u))}
.r01-you{width:calc(138 * var(--u))}
.r01-cmt{left:calc(6 * var(--u));width:calc(138 * var(--u));font-size:calc(11.2 * var(--u))}

/* VISUAL-FINAL 1 — A reason 01: the four real photos zoomed so each head is about the same size (≈34% of the tile, hair just
   under the top) and centred, as A-reason-01-r3 shows them; no cut-out exists, so the photos keep their own backgrounds */
.r01-teachers .t-photo img{object-position:var(--ox,50%) 0;transform:scale(var(--z,1));transform-origin:var(--fx,50%) var(--fy,0%)}
.r01-teachers .t-photo--mctaka{--ox:52%;--z:1.31;--fx:50%;--fy:24.1%}
.r01-teachers .t-photo--kishida{--ox:0%;--z:1.62;--fx:31.1%;--fy:6.9%}
.r01-teachers .t-photo--nanase{--ox:65%;--z:1.51;--fx:50%;--fy:22.3%}
.r01-teachers .t-photo--asu{--ox:5%;--z:1.36;--fx:50%;--fy:33.2%}
.r01-teachers .t-photo--mctaka{--z:1.22;--fy:30.7%}

/* VISUAL-FINAL 2 — the two 68,000 only: Noto Sans JP 900 (wide, heavy, as the drafts draw them) instead of Barlow
   Condensed; fitted to the drafts' widths (gift 03 ≈252u, B-09 ≈249–262u). Units and conditions unchanged. */
.a-gift .gift-item--3 .gift-amt b{font-family:var(--jp);font-size:calc(79 * var(--u));font-weight:900;line-height:.86;letter-spacing:-.035em}
.b-gift-amt strong{font-family:var(--jp);font-size:calc(82 * var(--u));font-weight:900;line-height:.86;letter-spacing:-.035em}

/* VISUAL-FINAL 3 — B-09 at the draft's rhythm (B-benefits-r3 at 390): less above the kicker, the pair closer to the
   condition, the labels → CTA gap ≈12u (the image note stays, small, right under the labels), a shorter end */
.b-gift{padding-top:calc(4 * var(--u));padding-bottom:calc(16 * var(--u))}
.b-gift .b-pair{margin-top:calc(14 * var(--u))}
.b-gift .b-gift-note{margin-top:calc(2 * var(--u))}
.b-gift>.cta-block{margin-top:calc(6 * var(--u))}
.b-gift>.cta-block .cta-assure{margin-top:calc(6 * var(--u))}

@media (min-width:1040px){
  /* the old desktop rules in a.css (.reason h3 → column 1, every child → rows 1–2) predate the Stage-2 reasons: the heading
     sits beside its number again and the right column's parts stack instead of overlapping */
  .a-reasons .reason .r-top h3{grid-column:2;grid-row:1}
  .a-reasons .reason>:not(.r-top){grid-row:auto;align-self:start}
  .a-reasons .reason>.r01-flow{margin-top:calc(14 * var(--u))}
}
}