@charset "UTF-8";
/**
 * NJ-99959 - Japanese-learning LP (日本語PL LP) UI/UX改修
 *
 * Ported from the approved design artifact (nj-96895-responsive).
 * Single DOM, three layouts: mobile <=799 / tablet 800-1139 / desktop >=1140.
 *
 * Every rule is scoped under #board so nothing leaks into the shared global
 * stylesheets this layout also loads (html5reset.css, common.css).
 *
 * Deliberately NOT ported:
 *   - the artifact's language toggle      (FR-029 excludes it)
 *   - its placeholder header/footer       (FR-007, existing ones are reused)
 *   - its dark-canvas media block         (surrounding site chrome is not theme-aware)
 *
 * Assets: /assets/mobile/img/ja_lp/
 */

/* ========== tokens.css ========== */
#board{--brand-primary:#f1890e; --brand-secondary:#092846;
  --text-primary:#191919; --text-secondary:#6b6b6b; --text-onbrand:#fff;
  --surface-default:#fff; --surface-subtle:#f5f5f5;
  --border-default:#e3e3e3;
  --orange-50:#fcf8f3; --grey-25:#404040;
  --yellow-500:#f6d01b; --lightblue-500:#0bcafa; --green-500:#03c9a9;
  
  --brand-primary-hover:#e07c07;
  
  --canvas:#eceef1;
  --font:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;}
/* Per-locale font stack. data-lang is set server-side from the request locale,
   not by a toggle (FR-029). Each stack degrades to system fonts if Noto is absent. */
#board[data-lang="en"],
#board[data-lang="fr"]{--font:"Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
#board[data-lang="zh-tw"]{--font:"Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,sans-serif}
#board[data-lang="zh-cn"]{--font:"Noto Sans SC","PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif}
#board[data-lang="ko"]{--font:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",-apple-system,BlinkMacSystemFont,sans-serif}

/* ========== base.css ========== */
#board *{box-sizing:border-box}
#board{margin:0;background:var(--canvas);font-family:var(--font);-webkit-font-smoothing:antialiased;color:var(--text-primary)}
#board img{max-width:100%;display:block}
#board a{color:inherit}
#board{width:100%;margin:0 auto;background:var(--surface-default);overflow-x:hidden}
#board .stage{width:100%;background:var(--surface-default) url("/assets/mobile/img/ja_lp/bg_sp.svg") top center/100% auto no-repeat}
#board .imgfill{width:100%;height:100%;display:block}
#board .imgclip{overflow:hidden}

/* ========== sections.css ========== */
#board .hero{position:relative;overflow:hidden;padding:32px 20px 0}
#board .heroWrap{position:relative;z-index:1;display:flex;flex-direction:column;gap:32px;align-items:center}
#board .heroBlock{width:100%;display:flex;flex-direction:column;gap:24px;align-items:center}
#board .heroImg{width:100%;aspect-ratio:333/242;border-radius:16px;display:flex;align-items:center;justify-content:center}
#board .heroLeft{width:100%;display:flex;flex-direction:column;gap:32px;align-items:flex-start}
#board .heroH{margin:0;font-family:var(--font);font-weight:700}
#board .heroH .l1{display:block;font-size:32px;line-height:1.2;letter-spacing:-.32px;color:var(--text-primary)}
#board .heroH .l2{display:block;font-size:36px;line-height:1.15;letter-spacing:-.36px;color:var(--brand-primary)}
#board .heroSub{margin:0;font-family:var(--font);font-weight:700;font-size:16px;line-height:1.5;color:var(--text-primary)}
#board .heroCta{width:100%;display:flex;flex-direction:column;gap:16px;align-items:center}
#board .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand-primary);color:var(--text-onbrand);padding:16px;border-radius:9999px;text-decoration:none;transition:background-color .2s ease}
#board .btn:hover{background:var(--brand-primary-hover)}
#board .btn .ico{flex:0 0 auto;width:24px;height:24px}
#board .btn .lbl{font-family:var(--font);font-weight:700;font-size:15px;line-height:1;letter-spacing:.08px;white-space:nowrap;text-align:center}
#board .fine{display:flex;gap:2px;margin:0;width:100%;font-family:var(--font);font-weight:400;font-size:12px;line-height:1.3;color:var(--text-secondary)}
#board .fine .mk{flex:0 0 auto}
#board .stats{width:100%;background:var(--surface-default);border:1px solid var(--surface-subtle);border-radius:12px;box-shadow:0 0 12px rgba(28,28,30,.06);display:flex;align-items:center;justify-content:center;padding:13px 9px}
#board .statNum{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center}
#board .statIcon{flex:0 0 auto;background:var(--orange-50);border-radius:8px;padding:4px;display:flex;align-items:center;justify-content:center}
#board .statIcon svg{width:16px;height:16px;display:block;color:var(--brand-primary)}
#board .statN{display:flex;align-items:flex-end;color:var(--brand-primary);font-weight:700;font-family:var(--font)}
#board .statN .big{font-size:20px;line-height:1.4}
#board .statN .sm{font-size:16px;line-height:1.5}
#board .statCap{font-family:var(--font);font-weight:500;font-size:12px;line-height:1.3;color:var(--text-secondary)}
#board .statDiv{flex:0 0 auto;width:1px;height:40px;background:var(--surface-subtle)}
#board .relax{background:transparent;padding:64px 20px}
#board .relaxWrap{display:flex;flex-direction:column;gap:32px;align-items:center}
#board .relaxTitle{width:100%;display:flex;flex-direction:column;gap:32px;align-items:center}
#board .relaxH{margin:0;font-family:var(--font);font-weight:700;font-size:32px;line-height:1.2;letter-spacing:-.4px;color:var(--brand-secondary);text-align:center;width:100%}
#board .relaxSub{margin:0;font-family:var(--font);font-weight:700;font-size:16px;line-height:1.5;color:var(--grey-25);text-align:center;width:100%}
#board .relaxGrid{width:100%;display:flex;flex-direction:column;gap:24px}
#board .fcard{position:relative;height:335px;border-radius:24px;overflow:hidden;padding:16px;display:flex;flex-direction:column}
#board .fcardImg{position:absolute;inset:0;border-radius:24px}
#board .fcardTxt{position:relative;z-index:2;flex:1 0 0;min-height:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;width:100%}
#board .fcardTag{background:var(--surface-default);color:var(--brand-secondary);font-family:var(--font);font-weight:400;font-size:12px;line-height:1.3;padding:6px 12px;border-radius:8px;white-space:nowrap}
#board .fcardBand{width:100%;background:var(--brand-primary);border-radius:8px;padding:24px 20px;display:flex;flex-direction:column;gap:4px;text-align:center}
#board .fcardBand .l1{margin:0;font-family:var(--font);font-weight:400;font-size:15px;line-height:1.6;color:var(--text-onbrand)}
#board .fcardBand .l2{margin:0;font-family:var(--font);font-weight:700;font-size:20px;line-height:1.4;color:var(--text-onbrand)}
#board .ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:56px;min-width:120px;padding:0 24px;background:var(--surface-default);border:2px solid var(--brand-primary);border-radius:9999px;color:var(--brand-primary);font-family:var(--font);font-weight:700;font-size:15px;line-height:1;letter-spacing:.08px;text-decoration:none;white-space:nowrap;transition:background-color .2s ease}
#board .ghost:hover{background:#fff6ec}
#board .pick{background:var(--brand-primary);padding:64px 20px}
#board .pickWrap{display:flex;flex-direction:column;gap:32px;align-items:center}
#board .pickTitle{width:100%;display:flex;flex-direction:column;gap:32px;align-items:center}
#board .pickH{margin:0;font-family:var(--font);font-weight:700;font-size:32px;line-height:1.2;letter-spacing:-.4px;color:var(--text-onbrand);text-align:center;width:100%}
#board .pickSub{margin:0;font-family:var(--font);font-weight:700;font-size:16px;line-height:1.5;color:var(--text-onbrand);text-align:center;width:100%}
#board .pickGroups{width:100%;display:flex;flex-direction:column;gap:32px;align-items:center}
#board .pickCards{width:100%;display:flex;flex-direction:column;gap:16px}
#board .lcard{width:100%;background:var(--surface-default);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 16px -4px rgba(0,0,0,.1),0 4px 12px 0 rgba(0,0,0,.1)}
#board .lcard.now{border:4px solid var(--lightblue-500)}
#board .lcard.rsv{border:4px solid var(--green-500)}
#board .lcardTxt{width:100%;display:flex;flex-direction:column;gap:16px;align-items:center;padding:40px 24px 0}
#board .lcardTitle{margin:0;font-family:var(--font);font-weight:700;font-size:20px;line-height:1.4;color:var(--brand-secondary);text-align:center;width:100%}
#board .lcardTag{display:inline-flex;align-items:center;padding:4px 16px;border-radius:9999px;color:var(--text-onbrand);font-family:var(--font);font-weight:700;font-size:16px;line-height:1.6;white-space:nowrap}
#board .lcard.now .lcardTag{background:var(--lightblue-500)}
#board .lcard.rsv .lcardTag{background:var(--green-500)}
#board .lcardDesc{margin:0;font-family:var(--font);font-weight:400;font-size:14px;line-height:1.6;color:var(--text-primary);text-align:center;width:100%}
#board .lcardFig{width:100%;aspect-ratio:335/274;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
#board .lcardFig img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
#board .pickNotes{width:100%;display:flex;flex-direction:column;gap:4px}
#board .pickNote{display:flex;gap:4px;align-items:flex-start;font-family:var(--font);font-weight:400;font-size:14px;line-height:1.6;color:var(--text-onbrand)}
#board .pickNote .mk{flex:0 0 auto}
#board .reason{background:transparent;padding:64px 20px}
#board .reasonWrap{display:flex;flex-direction:column;gap:32px;align-items:center}
#board .reasonH{margin:0;font-family:var(--font);font-weight:700;font-size:32px;line-height:1.2;letter-spacing:-.4px;color:var(--brand-secondary);text-align:center;width:100%}
#board .reasonGrid{width:100%;display:flex;flex-direction:column;gap:16px}
#board .rcard{width:100%;background:var(--surface-default);border:1px solid var(--border-default);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
#board .rcardFig{width:100%;aspect-ratio:335/188;position:relative}
#board .rcardFig img{width:100%;height:100%;object-fit:cover;display:block}
#board .rcardBody{padding:20px;display:flex;flex-direction:column;gap:16px;align-items:center}
#board .rcardTitle{margin:0;font-family:var(--font);font-weight:700;font-size:20px;line-height:1.4;color:var(--brand-secondary);text-align:center;width:100%}
#board .rcardText{margin:0;font-family:var(--font);font-weight:400;font-size:15px;line-height:1.6;color:var(--text-primary);width:100%}
#board .rcardText b{font-weight:700}
#board .ctaWrap{width:100%;display:flex;flex-direction:column;gap:24px;align-items:center}
#board .fineC{display:flex;gap:2px;margin:0;width:100%;font-family:var(--font);font-weight:400;font-size:12px;line-height:1.3;color:var(--text-secondary)}
#board .fineC .mk{flex:0 0 auto}
#board .voice{background:var(--surface-subtle);padding:64px 20px}
#board .voiceWrap{display:flex;flex-direction:column;gap:32px;align-items:center}
#board .voiceBlock{width:100%;display:flex;flex-direction:column;gap:32px;align-items:center}
#board .voiceH{margin:0;font-family:var(--font);font-weight:700;font-size:32px;line-height:1.2;letter-spacing:-.4px;color:var(--brand-secondary);text-align:center;width:100%}
#board .voiceScroll{align-self:stretch;margin:0 -20px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;-webkit-overflow-scrolling:touch;padding:0 0 2px 20px;scrollbar-width:none}
#board .voiceScroll::-webkit-scrollbar{display:none}
#board .vcard{flex:0 0 300px;scroll-snap-align:start;background:var(--surface-default);border:1px solid var(--border-default);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}
#board .vcard:last-child{margin-right:20px}
#board .vhead{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px}
#board .vheadL{flex:1 1 0;min-width:0;display:flex;gap:12px;align-items:center}
#board .vava{flex:0 0 auto;width:56px;height:56px;border-radius:9999px;overflow:hidden;background:var(--surface-subtle)}
#board .vava img{width:100%;height:100%;object-fit:cover;display:block}
#board .vperson{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start}
#board .vname{font-family:var(--font);font-weight:700;font-size:16px;line-height:1.5;color:var(--text-primary)}
#board .vmeta{font-family:var(--font);font-weight:400;font-size:12px;line-height:1.3;color:var(--text-secondary)}
#board .vstars{flex:0 0 auto;display:flex;align-items:flex-start}
#board .star{width:20px;height:20px;display:block}
#board .vtext{width:100%;margin:0;font-family:var(--font);font-weight:400;font-size:15px;line-height:1.6;color:var(--text-primary)}
#board .dots{display:flex;gap:10px;justify-content:center}
#board .dot{width:8px;height:8px;border-radius:50%;background:#cccccc;border:0;padding:0;cursor:pointer}
#board .dot.on{background:var(--brand-secondary)}
#board .tch{background:var(--brand-primary);padding:64px 20px}
#board .tchWrap{display:flex;flex-direction:column;gap:32px;align-items:center}
#board .tchH{margin:0;font-family:var(--font);font-weight:700;font-size:32px;line-height:1.2;letter-spacing:-.4px;color:var(--text-onbrand);text-align:center;width:100%}
#board .tchSub{margin:0;font-family:var(--font);font-weight:700;font-size:20px;line-height:1.5;color:var(--text-onbrand);text-align:center;width:100%}
#board .tchScroll{align-self:stretch;margin:0 -20px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;-webkit-overflow-scrolling:touch;padding:0 0 2px 20px;scrollbar-width:none}
#board .tchScroll::-webkit-scrollbar{display:none}
#board .tcard{flex:0 0 152px;scroll-snap-align:start;background:var(--surface-default);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:12px;align-items:center}
#board .tcard:last-child{margin-right:20px}
#board .tpic{flex:0 0 auto;width:120px;height:120px;border-radius:9999px;overflow:hidden;background:var(--surface-subtle)}
#board .tpic img{width:100%;height:100%;object-fit:cover;display:block}
#board .tinfo{width:100%;display:flex;flex-direction:column;gap:4px;text-align:center}
#board .texp{margin:0;font-family:var(--font);font-weight:700;font-size:16px;line-height:1.6;color:var(--brand-secondary)}
#board .trole{margin:0;font-family:var(--font);font-weight:400;font-size:14px;line-height:1.6;color:var(--text-secondary)}
#board .ttags{width:100%;display:flex;flex-direction:column;gap:6px;align-items:center}
#board .ttag{background:var(--surface-subtle);color:var(--brand-secondary);font-family:var(--font);font-weight:400;font-size:12px;line-height:1.3;padding:4px 10px;border-radius:12px;white-space:nowrap}
#board .tchNote{display:flex;gap:4px;align-items:flex-start;margin:0;width:100%;font-family:var(--font);font-weight:400;font-size:14px;line-height:1.6;color:var(--text-onbrand)}
#board .tchNote .mk{flex:0 0 auto}
#board .price{background:transparent;padding:64px 20px}
#board .priceWrap{display:flex;flex-direction:column;gap:32px;align-items:center}
#board .priceH{margin:0;font-family:var(--font);font-weight:700;font-size:32px;line-height:1.2;letter-spacing:-.4px;color:var(--brand-secondary);text-align:center;width:100%}
#board .planCard{width:100%;background:var(--surface-default);border:4px solid var(--brand-primary);border-radius:32px;overflow:hidden;padding:40px 20px 20px;display:flex;flex-direction:column;gap:16px}
#board .planPrice{width:100%;display:flex;flex-direction:column;gap:10px;align-items:center}
#board .planName{margin:0;font-family:var(--font);font-weight:700;font-size:20px;line-height:1.4;color:var(--text-primary);text-align:center}
#board .planDesc{margin:0;font-family:var(--font);font-weight:400;font-size:14px;line-height:1.6;color:var(--text-secondary);text-align:center}
#board .priceMain{display:flex;gap:3px;align-items:flex-end;justify-content:center;width:100%;color:var(--text-primary)}
#board .priceMain .cur{font-family:var(--font);font-weight:700;font-size:20px;line-height:1.4}
#board .priceMain .big{font-family:var(--font);font-weight:700;font-size:40px;line-height:1.12;letter-spacing:-.6px}
#board .priceMain .u{font-family:var(--font);font-weight:400;font-size:15px;line-height:1.6}
#board .priceDaily{background:var(--orange-50);border-radius:12px;padding:8px 16px;margin-top:8px;display:flex;flex-direction:column;align-items:center;text-align:center}
#board .priceDaily .d1{font-family:var(--font);font-weight:700;font-size:14px;line-height:1.6;color:var(--brand-primary)}
#board .priceDaily .d2{font-family:var(--font);font-weight:400;font-size:14px;line-height:1.6;color:var(--text-secondary)}
#board .planNote{margin:0;font-family:var(--font);font-weight:400;font-size:12px;line-height:1.3;color:var(--text-secondary);text-align:center}
#board .planFeatures{width:100%;background:var(--orange-50);border-radius:12px;padding:16px;display:flex;flex-direction:column;list-style:none;margin:0}
#board .pfeat{display:flex;gap:4px;align-items:center;padding:4px 0;width:100%}
#board .pfeat svg{flex:0 0 auto;width:24px;height:24px;color:var(--brand-primary)}
#board .pfeat span{font-family:var(--font);font-weight:400;font-size:15px;line-height:1.6;color:var(--text-primary)}
#board .cmp{background:var(--surface-subtle);padding:64px 20px}
#board .cmpWrap{display:flex;flex-direction:column;gap:32px;align-items:center}
#board .cmpAbout{display:flex;flex-direction:column;gap:32px;align-items:center;width:100%}
#board .cmpH{margin:0;font-family:var(--font);font-weight:700;font-size:32px;line-height:1.2;letter-spacing:-.32px;color:var(--brand-secondary);text-align:center;width:100%}
#board .cmpScroll{align-self:stretch;margin:0 -20px;overflow-x:auto;scroll-padding-left:20px;-webkit-overflow-scrolling:touch;padding:0 0 2px 20px;scrollbar-width:none}
#board .cmpScroll::-webkit-scrollbar{display:none}
#board .cmpTable{width:646px;margin-right:20px;display:flex;gap:2px;align-items:flex-end}
#board .cmpCol{display:flex;flex-direction:column;width:160px;flex:0 0 160px}
#board .cmpCol.nc{position:relative;border-radius:16px;overflow:hidden}
#board .cmpCol.nc::after{content:"";position:absolute;inset:0;border:4px solid var(--brand-secondary);border-radius:16px;pointer-events:none;z-index:5}
#board .cspace{height:115px}
#board .clabel{background:var(--border-default);border-bottom:2px solid #fff;height:133px;display:flex;align-items:center;justify-content:center;font-family:var(--font);font-weight:700;font-size:15px;line-height:1.6;color:var(--text-primary);text-align:center;padding:0 16px}
#board .clabel:last-child{border-bottom:0}
#board .ncHead{background:var(--brand-secondary);height:115px;display:flex;align-items:center;justify-content:center;padding:16px 24px}
#board .ncLogo{width:100%;height:auto;object-fit:contain;display:block}
#board .othHead{background:var(--text-secondary);height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#fff;padding:16px;text-align:center}
#board .othHead .t1{font-family:var(--font);font-weight:700;font-size:14px;line-height:1.6}
#board .othHead .t2{font-family:var(--font);font-weight:700;font-size:16px;line-height:1.5}
#board .cdata{height:133px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 16px;text-align:center}
#board .cmpCol.nc .cdata{background:var(--orange-50);border-bottom:2px solid #fff}
#board .cmpCol.nc .cdata:last-child{border-bottom:0}
#board .cmpCol.oth .cdata{background:#fff;border-bottom:2px solid var(--surface-subtle)}
#board .cmpCol.oth .cdata:last-child{border-bottom:0}
#board .cmpTx{font-family:var(--font);font-weight:700;font-size:15px;line-height:1.6}
#board .cmpCol.nc .cmpTx{color:var(--brand-primary)}
#board .cmpCol.oth .cmpTx{color:var(--text-secondary);font-weight:400;font-size:14px}
#board .cmpSub{font-family:var(--font);font-weight:400;font-size:13px;line-height:1.3;color:var(--text-secondary)}
#board .cmpIco{width:32px;height:32px;display:block;flex:0 0 auto}
#board .cmpIco.ok{color:var(--brand-primary)}
#board .cmpIco.no,#board .cmpIco.tri{color:var(--text-secondary)}
#board .cmpFoot{width:100%;margin:0;padding-bottom:16px;font-family:var(--font);font-weight:400;font-size:14px;line-height:1.6;color:var(--text-primary)}
#board .trial{background:transparent;padding:64px 20px}
#board .trialWrap{display:flex;flex-direction:column;gap:32px;align-items:center}
#board .trialBlock{display:flex;flex-direction:column;gap:24px;align-items:center;width:100%}
#board .trialH{margin:0;font-family:var(--font);font-weight:700;font-size:32px;line-height:1.2;letter-spacing:-.32px;color:var(--brand-secondary);text-align:center;width:100%}
#board .trialCard{width:335px;max-width:100%;background:var(--brand-primary);border-radius:16px;overflow:hidden}
#board .trialText{display:flex;flex-direction:column;gap:16px;padding:32px 24px}
#board .trialTitle{margin:0;font-family:var(--font);font-weight:700;font-size:24px;line-height:1.3;letter-spacing:-.16px;color:var(--text-onbrand);width:100%}
#board .trialList{display:flex;flex-direction:column;gap:8px;width:100%;list-style:none;margin:0;padding:0}
#board .trialLi{display:flex;gap:16px;align-items:flex-start;width:100%}
#board .trialLi svg{flex:0 0 auto;width:32px;height:32px;color:var(--text-onbrand)}
#board .trialLi span{flex:1;min-width:0;font-family:var(--font);font-weight:700;font-size:18px;line-height:1.5;color:var(--text-onbrand)}
#board .trialFig{width:100%;aspect-ratio:1/1;overflow:hidden}
#board .trialFig img{width:100%;height:100%;object-fit:cover;display:block}
#board .app{background:var(--brand-primary);padding:64px 20px}
#board .appWrap{display:flex;flex-direction:column;gap:24px;align-items:center;max-width:640px;margin:0 auto;width:100%}
#board .appPhoto{width:100%;max-width:518px;aspect-ratio:1/1;border-radius:16px;overflow:hidden}
#board .appPhoto img{width:100%;height:100%;object-fit:cover;display:block}
#board .appText{display:flex;flex-direction:column;gap:32px;align-items:flex-start;width:100%}
#board .appH{margin:0;font-family:var(--font);font-weight:700;font-size:32px;line-height:1.2;letter-spacing:-.32px;color:var(--text-onbrand);width:100%}
#board .appSub{margin:0;font-family:var(--font);font-weight:700;font-size:20px;line-height:1.5;color:var(--text-onbrand);width:100%}
#board .appBadges{display:flex;flex-wrap:wrap;gap:16px;width:100%}
#board .appBadge{flex:0 0 auto;display:block}
#board .appBadge img{display:block;height:59px;width:auto}
#board .faq{background:transparent;padding:64px 20px}
#board .faqWrap{max-width:846px;margin:0 auto;display:flex;flex-direction:column;gap:32px;align-items:center}
#board .faqH1{margin:0;font-family:var(--font);font-weight:700;font-size:32px;line-height:1.2;letter-spacing:-.32px;color:var(--brand-secondary);text-align:center;width:100%}
#board .faqGroup{width:100%;display:flex;flex-direction:column;gap:16px;list-style:none;margin:0;padding:0}
#board .qa{width:100%;background:#fff;border:1px solid var(--border-default);border-radius:12px;overflow:hidden}
#board .qaQ{display:flex;gap:16px;align-items:center;padding:20px 24px}
#board .qaBadge{flex:0 0 auto;width:32px;height:32px;border-radius:16px;background:var(--brand-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font);font-weight:700;font-size:15px;line-height:1;padding-bottom:3px}
#board .qaTitle{flex:1 1 0;min-width:0;font-family:var(--font);font-weight:700;font-size:15px;line-height:1.6;color:var(--text-primary)}
#board .qaTog{position:relative;flex:0 0 auto;width:32px;height:32px;display:block;color:#353535}
#board .qaTog::before,#board .qaTog::after{content:"";position:absolute;top:50%;left:50%;width:17px;height:2px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%);transition:transform .3s ease}
#board .qaTog::after{transform:translate(-50%,-50%) rotate(90deg)}
#board details.qa[open] .qaTog::after{transform:translate(-50%,-50%) rotate(180deg)}

@media (prefers-reduced-motion:reduce){
#board .qaTog::before,#board .qaTog::after{transition:none}
}
#board summary.qaQ{cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
#board summary.qaQ::-webkit-details-marker{display:none}
#board summary.qaQ::marker{content:""}
#board .qaBody{overflow:hidden;transition:height .3s ease}

@media (prefers-reduced-motion:reduce){
#board .qaBody{transition:none}
}
#board .qaA{margin:0;padding:0 24px 20px;font-family:var(--font);font-weight:400;font-size:15px;line-height:1.6;color:var(--text-primary)}
#board .final{background:var(--brand-primary);padding:64px 20px}
#board .finalWrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:32px;align-items:center;width:100%}
#board .finalH{margin:0;font-family:var(--font);font-weight:700;font-size:32px;line-height:1.2;letter-spacing:-.32px;color:var(--text-onbrand);text-align:center;width:100%}
#board .btn.white{background:var(--surface-default)}
#board .btn.white:hover{background:#f7f7f7}
#board .btn.white .lbl{color:var(--brand-primary)}
#board .fineC.onbrand{color:var(--text-onbrand)}
#board .heroLeft>.heroSub{margin-top:-8px}

@media (max-width:1139px){
#board .cmpCol > :nth-child(2),#board .cmpCol > :nth-child(5){height:168px;padding:16px}
}

/* ========== desktop.css ========== */

@media (min-width:800px){
#board .stage{background-image:url("/assets/mobile/img/ja_lp/bg_pc.svg"); background-size:100% auto;}
}

@media (min-width:800px) and (max-width:1139px){
/* NJ-99959 — tablet measure cap.
   The design supplies SP (375) and PC (>=1140) only; the 800-1139 band has no
   Figma reference, so the artifact simply stretches the SP layout to fill. At
   1139px that makes the hero image ~1139x827. Capping the measure keeps the SP
   composition at a readable width and centres it, rather than scaling it up. */
#board .hero{padding:48px 40px 0}
#board .heroWrap,
#board .relaxWrap,
#board .pickWrap,
#board .reasonWrap,
#board .voiceWrap,
#board .tchWrap,
#board .priceWrap,
#board .trialWrap,
#board .appWrap,
#board .faqWrap,
#board .cmpWrap,
#board .finalWrap{max-width:760px;margin-left:auto;margin-right:auto}
#board .heroImg{max-width:600px;margin:0 auto}
#board .relaxGrid{flex-direction:row;align-items:flex-start;gap:16px}
#board .relaxGrid>.fcard{flex:1 1 0;min-width:0;height:auto;aspect-ratio:1/1}
#board .pickCards{flex-direction:row;align-items:stretch;gap:16px}
#board .pickCards>.lcard{flex:1 1 0;min-width:0}
#board .cmpScroll{display:flex;justify-content:center;margin:0;padding:0 0 2px 0}
#board .cmpTable{margin-right:0}
#board .trialCard{width:100%;max-width:none;display:grid;grid-template-columns:1fr 1fr}
#board .trialText{justify-content:center}
#board .fine,#board .fcardTag,#board .fineC,#board .vmeta,#board .planNote,#board .statCap{font-size:13px}
#board .btn .lbl,#board .fcardBand .l1,#board .ghost,#board .rcardText,#board .vtext,#board .priceMain .u,#board .pfeat span,#board .clabel,#board .cmpTx,#board .qaBadge,#board .qaTitle,#board .qaA{font-size:16px}
}

@media (min-width:1140px){
#board .stage{background-size:auto;background-position:top center}
#board .hero{padding:80px 0 16px}
#board .heroWrap{max-width:1440px;margin:0 auto;padding:0 80px;gap:48px}
#board .heroBlock{flex-direction:row;align-items:center;justify-content:space-between;gap:0}
#board .heroLeft{order:1;flex:1 1 0;min-width:0;gap:40px;padding-right:32px;align-items:flex-start}
#board .heroImg{order:2;flex:0 0 auto;width:clamp(440px,46.67vw,672px);height:auto;aspect-ratio:672/488;border-radius:24px}
#board .heroH .l1{font-size:clamp(38px,3.9vw,56px);line-height:1.12;letter-spacing:-.84px;line-break:strict}
#board .heroH .l2{font-size:clamp(44px,4.45vw,64px);line-height:1.1;letter-spacing:-1.28px;line-break:strict}
#board .heroSub{font-size:clamp(17px,1.67vw,24px);line-height:1.4;line-break:strict}
#board .heroCta{align-items:flex-start;gap:24px}
#board .btn .lbl{font-size:16px}
#board .stats{padding:17px 26px}
#board .statNum{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;
    column-gap:24px;row-gap:2px;align-items:center;justify-content:center}
#board .statIcon{grid-row:1/3;padding:8px}
#board .statIcon svg{width:32px;height:32px}
#board .statN{grid-column:2;grid-row:1;justify-self:center}
#board .statN .big{font-size:32px}
#board .statN .sm{font-size:20px;position:relative;top:-3px}
/* NJ-99959: nowrap removed. The design assumes short English captions, but
   "Des leçons à toute heure" and "일본인 원어민 강사" are far longer and would
   overflow the column instead of wrapping (FR-028). Wrapping is the safe
   failure mode; English still fits on one line at this width. */
#board .statCap{grid-column:2;grid-row:2;font-size:13px;text-align:center;text-wrap:balance}
#board .statCap br{display:none}
#board .statDiv{height:40px}
}

@media (min-width:1140px){
#board .ctaWrap{max-width:846px;margin:0 auto}
#board .fineC{font-size:13px}
#board .relax{padding:120px 80px}
#board .relaxWrap{max-width:1280px;margin:0 auto;gap:40px}
#board .relaxTitle{gap:40px}
#board .relaxH{font-size:40px;letter-spacing:-.4px}
#board .relaxSub{font-size:18px}
#board .relaxGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
#board .relaxGrid>.fcard{height:410px;aspect-ratio:auto}
#board .fcardBand .l1{font-size:16px}
#board .fcardBand .l2{font-size:24px}
#board .fcardTag{font-size:13px}
#board .pick{padding:120px 80px}
#board .pickWrap{max-width:846px;margin:0 auto;gap:40px}
#board .pickTitle{gap:40px}
#board .pickH{font-size:40px;letter-spacing:-.4px}
#board .pickSub{font-size:18px}
#board .pickGroups{gap:32px}
#board .pickCards{flex-direction:row;align-items:stretch;gap:24px}
#board .pickCards>.lcard{flex:1 1 0;min-width:0;height:452px}
#board .lcardTitle{font-size:24px}
#board .lcardTag{font-size:16px}
#board .lcardDesc{font-size:14px}
#board .lcardFig{flex:1 1 0;min-height:0;aspect-ratio:auto}
#board .lcardFig img{object-fit:contain}
#board .pickNote{font-size:14px}
#board .reason{padding:120px 80px}
#board .reasonWrap{max-width:1280px;margin:0 auto;gap:40px}
#board .reasonH{font-size:40px;letter-spacing:-.4px}
#board .reasonGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
#board .reasonGrid>.rcard:nth-child(1){grid-column:1/-1;justify-self:center;width:628px;max-width:628px}
#board .rcardFig{height:320px}
#board .rcardBody{padding:32px;gap:16px}
#board .rcardTitle{font-size:24px}
#board .rcardText{font-size:16px}
#board .voice{padding:120px 80px}
#board .voiceWrap{max-width:1280px;margin:0 auto;gap:40px}
#board .voiceBlock{gap:40px}
#board .voiceH{font-size:40px;letter-spacing:-.4px}
#board .voiceScroll{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;overflow:visible;margin:0;padding:0}
#board .voiceScroll>.vcard{margin-right:0;padding:32px 24px;gap:16px}
#board .voiceScroll>.vcard.clone{display:none}
#board #voiceDots{display:none}
#board .vname{font-size:20px;line-height:30px}
#board .vtext{font-size:16px}
#board .vmeta{font-size:13px}
#board .tch{padding:120px 80px}
#board .tchWrap{max-width:1280px;margin:0 auto;gap:40px}
#board .tchH{font-size:40px;letter-spacing:-.4px}
#board .tchSub{font-size:20px}
#board .tchScroll{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;overflow:visible;margin:0;padding:0}
#board .tchScroll>.tcard{margin-right:0}
#board .tchScroll>.tcard.clone{display:none}
#board #tchDots{display:none}
#board .tcard{padding:16px}
#board .texp{font-size:16px}
#board .trole{font-size:14px}
#board .ttag{font-size:12px}
#board .tchNote{font-size:14px}
#board .price{padding:120px 80px}
#board .priceWrap{max-width:846px;margin:0 auto;gap:40px}
#board .priceH{font-size:40px;letter-spacing:-.4px}
#board .planCard{flex-direction:row;gap:24px;padding:24px;width:846px;max-width:100%}
#board .planPrice{flex:0 0 292px;height:384px;justify-content:center}
#board .planName{font-size:24px}
#board .planFeatures{flex:1 1 0;min-width:0;height:384px;padding:24px 32px;justify-content:center}
#board .priceMain .big{font-size:56px}
#board .priceMain .cur{font-size:24px}
#board .priceMain .u{font-size:16px}
#board .planNote{font-size:13px}
#board .pfeat{padding:8px 0}
#board .pfeat svg{width:32px;height:32px}
#board .pfeat span{font-size:16px}
#board .cmp{padding:120px 80px}
#board .cmpWrap{max-width:1280px;margin:0 auto;gap:40px}
#board .cmpAbout{gap:40px}
#board .cmpH{font-size:40px;letter-spacing:-.4px}
#board .cmpScroll{overflow:visible;margin:0;padding:0}
#board .cmpTable{width:100%;margin:0}
#board .ncLogo{width:200px;max-width:100%;height:auto}
#board .cmpCol{flex:1 1 0;width:auto;min-width:0}
#board .cspace,#board .clabel,#board .cdata,#board .ncHead{height:115px}
#board .othHead{height:89px}
#board .clabel{font-size:16px}
#board .cmpTx{font-size:16px}
#board .cmpSub{font-size:13px}
#board .othHead .t1{font-size:14px}
#board .othHead .t2{font-size:18px}
#board .cmpFoot{padding-bottom:0}
#board .trial{padding:120px 80px}
#board .trialWrap{max-width:846px;margin:0 auto;gap:40px}
#board .trialH{font-size:40px;letter-spacing:-.4px}
#board .trialCard{display:grid;grid-template-columns:1fr 1fr;width:846px;max-width:100%}
#board .trialText{padding:40px;gap:40px;justify-content:center}
#board .trialTitle{font-size:32px}
#board .trialLi span{font-size:18px}
#board .trialFig{aspect-ratio:1/1}
#board .app{padding:120px 80px}
#board .appWrap{flex-direction:row;max-width:1280px;gap:24px;align-items:center;justify-content:center}
#board .appText{order:1;flex:1 1 0;min-width:0;gap:32px}
#board .appPhoto{order:2;flex:1 1 0;min-width:0;max-width:518px}
#board .appH{font-size:40px}
#board .appSub{font-size:20px}
#board .faq{padding:120px 80px}
#board .faqWrap{max-width:846px;margin:0 auto;gap:40px}
#board .faqH1{font-size:40px;letter-spacing:-.4px}
#board .qaTitle{font-size:16px}
#board .qaA{font-size:16px}
#board .final{padding:120px 80px}
#board .finalWrap{max-width:1280px;margin:0 auto;gap:40px}
#board .finalH{font-size:40px;letter-spacing:-.4px}
}

@media (min-width:1140px){
#board .cmpCol > :nth-child(2){height:136px;padding:16px}
}

/* NJ-99959 — desktop below the design frame (1140-1439).
   The Figma PC frame is 1440, where an 80px gutter + a 672px image + 56px type
   all fit. Between 1140 and 1439 those fixed values leave the text column at
   276px and the Japanese headline breaks mid-word. Gutters tighten here and
   restore to the design values at 1440. */
@media (min-width:1140px) and (max-width:1439px){
#board .heroWrap{padding:0 40px}
#board .heroLeft{padding-right:16px}
}

/* NJ-99959 — below the design's 375 SP frame.
   At 320 the base 32/36px headline overruns the 280px content box. Fluid type
   keeps the design's exact sizes at 375 and above. */
@media (max-width:374px){
#board .heroH .l1{font-size:clamp(24px,8.5vw,32px)}
#board .heroH .l2{font-size:clamp(28px,9.6vw,36px)}
}