/* ============================================================
 * lp-premium.css — 英語のりん LP 専用・自己完結スタイル (standalone)
 * ------------------------------------------------------------
 * 承認済みモック /scratchpad/mockup-premium.html の <style> を土台にし、
 * 実コンテンツの追加セクション(問題提起/flow/発音/ボリューム/流れ/三本の矢/
 * 講師/料金/比較/伸び/note/フッター)を同じ近黒トークンで拡張したもの。
 *
 * 【なぜ別ファイルか】共有 css/style.css は 68KB 末尾に LP の :root トークン
 * ブロックがあり、ブラウザのCSSパーサがそこを取りこぼす → --lp-canvas 等が
 * 未定義 → body 背景が transparent(＝白地に落ちる)+ 見出しが黒、という白背景
 * バグを起こしていた。本ファイルはトークンを先頭で定義し、index.html だけが
 * 読み込む(他ページ app.html/mentor.html 等には一切波及しない)。
 * display 書体は既存 --font-display(DIN)を使用(2026-07-17にArial Narrow上書きをDINへ復元)。
 * ============================================================ */

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

:root{
  /* --- モックのトークン(正典) --- */
  --ink:#0A0A0B;          /* committed near-black, cool bias */
  --ink-2:#0E0E10;
  --surface:#141416;
  --paper:#F5F5F2;        /* warm off-white */
  --paper-mute:#8A8A85;   /* warm grey */
  --hair:#26262A;
  --hair-strong:#34343A;
  --brass:#C08A3E;        /* single whisper-accent */
  --lp-body:#C9C9C4;      /* 本文グレー(読み段落) */

  /* --- 移植ルール互換エイリアス(同値・取りこぼし防止の二重定義) --- */
  --lp-canvas:#0A0A0B; --lp-canvas-2:#0E0E10; --lp-surface:#141416;
  --lp-paper:#F5F5F2;  --lp-mute:#8A8A85;
  --lp-hair:#26262A;   --lp-hair-2:#34343A;
  --canvas-night:#0A0A0B; --on-primary:#F5F5F2; --hairline:#26262A;

  /* --- タイポ: ブランド正典のDIN系(style.cssと同一スタック) --- */
  --font-display:"D-DIN-Bold","DIN Condensed","Oswald","Archivo Narrow","Arial Narrow",Arial,sans-serif;
  --font-jp:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  --disp:var(--font-display); --jp:var(--font-jp);
  --mono:"SFMono-Regular",ui-monospace,Menlo,monospace;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --wrap:1180px;
}

/* ---- reset + 地の色を近黒で確定(白背景バグの構造的封じ込め) ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html,body{background:#0A0A0B}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-jp);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--brass);color:var(--ink)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:700;color:var(--paper)}
p{margin:0}
ul{margin:0;padding:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}

/* ---- kickers / labels ---- */
.kick{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-mute);display:inline-flex;align-items:center;line-height:1.5}
.kick .b{color:var(--brass)}
.num{font-variant-numeric:tabular-nums}

/* ---- top bar (nav) ---- */
.lp-nav.bar{position:sticky;top:0;z-index:20;background:rgba(10,10,11,.72);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--hair);padding:0}
.bar .wrap{height:68px;display:flex;align-items:center;justify-content:space-between}
.mark{font-family:var(--font-jp);font-weight:700;font-size:17px;letter-spacing:.02em;display:flex;align-items:center;gap:2px;color:var(--paper)}
.mark img{width:22px;height:22px;display:block;margin-right:7px;border-radius:5px}
.mark .dot{color:var(--brass)}
.bar .navlinks{display:flex;gap:26px;align-items:center}
.bar .navlinks a.l{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-mute);transition:color .3s var(--ease-out)}
.bar .navlinks a.l:hover{color:var(--paper)}
.nav-mobile-primary,.nav-toggle{display:none}
.nav-mobile-only{display:none}
@media(max-width:720px){
  html:not(.site-nav-ready) .bar .wrap{overflow-x:auto;justify-content:flex-start;gap:18px}
  html:not(.site-nav-ready) .bar .navlinks{flex:0 0 auto}
  html:not(.site-nav-ready) .bar .navlinks a.l{display:inline-flex}
}

/* ---- buttons (モック: 白ベタ / ゴースト枠 / radius 2px) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--paper);background-image:none;padding:12px 22px;border-radius:2px;border:1px solid var(--paper);box-shadow:none;transition:transform .3s var(--ease-out),background .3s,color .3s,border-color .3s}
.btn:hover{transform:translateY(-1px);background:var(--paper);color:var(--ink);box-shadow:none}
.btn:active{transform:none;background:#e2e2de;color:var(--ink)}
.btn.ghost,.btn.teal{background:transparent;background-image:none;color:var(--paper);border:1px solid var(--hair-strong);box-shadow:none}
.btn.ghost:hover,.btn.teal:hover{background:transparent;color:var(--paper);border-color:var(--paper)}
.btn.sm{padding:11px 16px;font-size:11px}
.btn.block{display:flex;width:100%}

/* ---- hero: クリーン近黒 + grain + 波形 ---- */
.hero{position:relative;display:block;min-height:0;padding:104px 0 88px;border-bottom:1px solid var(--hair);overflow:hidden;background:var(--ink)}
.hero:before{content:none;display:none}
.hero-grain{position:absolute;inset:0;opacity:.5;pointer-events:none;z-index:0;
  background:radial-gradient(120% 80% at 78% 12%,rgba(192,138,62,.10),transparent 55%),
             radial-gradient(90% 70% at 20% 100%,rgba(255,255,255,.04),transparent 60%)}
.hero .wrap{position:relative;z-index:1}
.hero-top{display:flex;align-items:center;gap:16px;margin-bottom:44px}
.hero-top .line{height:1px;flex:1;background:var(--hair-strong)}
.hero .big{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(3.6rem,13.5vw,12rem);line-height:.86;letter-spacing:-.02em;text-wrap:balance;margin:0;color:var(--paper)}
.hero .big .mut{color:transparent;-webkit-text-stroke-width:1.4px;-webkit-text-stroke-color:var(--brass)}
@supports not ((-webkit-text-stroke:1px #000)){.hero .big .mut{color:var(--brass);-webkit-text-stroke:0}}
.hero-grid{display:grid;grid-template-columns:1fr;gap:48px;margin-top:52px}
@media(min-width:900px){.hero-grid{grid-template-columns:1.1fr .9fr;align-items:end;gap:80px}}
.hero-lead{font-family:var(--font-jp);font-size:17px;line-height:2;color:#d8d8d2;max-width:44ch;margin:0}
.hero-lead b{color:var(--paper);font-weight:700}
.hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.cta-note{font-family:var(--font-jp);font-size:.82rem;color:var(--paper-mute);margin:14px 0 0;line-height:1.7}

/* ---- liquid-metal WebGL背景 (2026-07-14 本人指示2回目: 「もっと薄く、
 * ダイナミックに文字の後ろを流れる液体金属。ポインタ追従も」。
 * 事前レンダ動画は画質が荒く追従不可 → js/liquid-metal.js のシェーダに置換。
 * 全面レイヤー・低不透明度。シェーダ側でも上端ほど薄くなるようフェード済み。 ---- */
.hero-liquid-gl{position:absolute;inset:0;z-index:0;pointer-events:none;display:block;
  width:100%;height:100%;opacity:.72}
@media(max-width:600px){.hero-liquid-gl{opacity:.58}}

/* ---- sound-wave motif (メタリック15本)
 * 2026-07-14 本人指示(2回目): 「薄くして大きくして、後ろでもっとゆっくり」。
 * レイアウト内ブロック(モバイルでCTA下に積まれて縦を浪費)をやめ、ヒーローの
 * 背景装飾に変更: absolute・右下寄せ・巨大化(バー幅16px)・低不透明度・周期13s。
 * 銀=白→温グレー / 金=真鍮の縦グラデ+inset左ハイライトの光沢は維持。 ---- */
.hero .wave{position:absolute;right:1%;bottom:0;z-index:0;pointer-events:none;
  display:flex;align-items:flex-end;gap:18px;height:clamp(320px,52vw,660px);
  justify-content:flex-end;opacity:.3}
/* 2026-07-14 本人指示(3回目): バーは太く・角形(角丸なし)・全体をさらに大きく(本文と少し被ってOK)。薄さは現状維持 */
.wave i{width:34px;flex:0 0 auto;transform-origin:bottom;border-radius:0;
  background:linear-gradient(180deg,#FFFFFF 0%,#EDEDE8 20%,#BDBDB7 52%,#77776F 80%,#4C4C47 100%);
  box-shadow:inset 3px 0 2px rgba(255,255,255,.45),inset -3px 0 2px rgba(0,0,0,.3);
  animation:lpEq 13s ease-in-out infinite}
.wave i:nth-child(3n){background:linear-gradient(180deg,#F2D49C 0%,#DCA95E 24%,#C08A3E 54%,#8A6128 82%,#5A4322 100%);
  box-shadow:inset 3px 0 2px rgba(255,236,200,.5),inset -3px 0 2px rgba(0,0,0,.32)}
@keyframes lpEq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.wave i{animation:none}}
@media(max-width:600px){.hero .wave{gap:9px;height:300px;opacity:.24}.wave i{width:17px}}

/* ---- sections ---- */
.sec{padding:88px 0;border-bottom:1px solid var(--hair);background:var(--ink);position:relative}
.sec.tint{background:var(--ink-2)}
.sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:44px;max-width:64ch}
.sec-head .h{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,5.2vw,3.6rem);line-height:1.02;letter-spacing:-.01em;margin:0;color:var(--paper)}
.sec-head .h-jp{font-family:var(--font-jp);font-weight:700;font-size:clamp(1.55rem,3.4vw,2.4rem);line-height:1.42;letter-spacing:.01em;color:var(--paper);margin:0;text-wrap:balance}
/* 2026-07-14 本人指示: 全セクション「THE 〇〇(英display)+日本語1行」体裁に統一。
 * .h の直後に来る .h-jp はサブ見出しサイズに落とす。改行(<br>)は原則入れない。 */
.sec-head .h + .h-jp{font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.55;margin-top:-6px;color:var(--paper)}
.sec-head .jp{font-family:var(--font-jp);color:var(--paper-mute);font-size:15.5px;line-height:1.95;max-width:58ch;margin:0}

/* ---- segment routes: 目的から入口を選ぶ4ルート ---- */
.segment-grid{display:grid;grid-template-columns:1fr;border-top:1px solid var(--hair)}
.segment-route{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:30px 0;border-bottom:1px solid var(--hair);min-width:0}
.segment-no{font-family:var(--font-display);font-weight:700;font-size:2.5rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--brass)}
.segment-copy{min-width:0}
.segment-copy h3{font-family:var(--font-jp);font-size:1.08rem;line-height:1.55;color:var(--paper);margin:0 0 8px}
.segment-copy p{font-family:var(--font-jp);font-size:.9rem;line-height:1.8;color:var(--lp-body);max-width:46ch;margin:0}
.segment-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.segment-links a,.segment-main{font-family:var(--font-jp);font-size:.82rem;font-weight:700;color:var(--paper);border:1px solid var(--hair-strong);border-radius:2px;padding:8px 12px;line-height:1.4;transition:border-color .2s var(--ease-out),color .2s var(--ease-out),transform .2s var(--ease-out)}
.segment-main{display:inline-flex;margin-top:18px}
.segment-links a:hover,.segment-main:hover{border-color:var(--paper);color:var(--brass);transform:translateY(-1px)}
.segment-links a:active,.segment-main:active{transform:translateY(0)}
@media(min-width:820px){
  .segment-grid{grid-template-columns:1fr 1fr}
  .segment-route{padding:34px 32px}
  .segment-route:nth-child(odd){padding-left:0;border-right:1px solid var(--hair)}
  .segment-route:nth-child(even){padding-right:0}
}
@media(max-width:520px){
  .segment-route{grid-template-columns:40px 1fr;gap:12px}
  .segment-no{font-size:2rem}
}

/* ---- method steps (hairline区切り + ゴースト番号 + tag) ---- */
.steps{display:grid;grid-template-columns:1fr;gap:0;background:transparent;border:none}
.step{display:grid;grid-template-columns:auto 1fr;gap:26px;padding:36px 0;border-top:1px solid var(--hair);align-items:start;background:transparent;box-shadow:none;border-radius:0}
.step:before{content:none}
.steps .step:last-child{border-bottom:1px solid var(--hair)}
.step:hover{transform:none;background:transparent}
.step .idx{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,6vw,4.2rem);line-height:.9;letter-spacing:-.02em;color:transparent;-webkit-text-stroke-width:1.2px;-webkit-text-stroke-color:#34343A;min-width:1.6em;font-variant-numeric:tabular-nums;margin:0}
.step.on .idx{color:var(--brass);-webkit-text-stroke:0}
.step h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:20px;letter-spacing:.04em;margin:0 0 10px;color:var(--paper)}
.step h3.jp{font-family:var(--font-jp);text-transform:none;font-size:1.05rem;letter-spacing:.02em}
.step p{font-family:var(--font-jp);color:var(--lp-body);font-size:15px;line-height:1.95;max-width:58ch;margin:0}
.tag{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-mute);border:1px solid var(--hair-strong);padding:6px 12px;border-radius:2px;display:inline-block;white-space:nowrap;background:transparent}
.tag.brand{color:var(--brass)}
@media(min-width:800px){.step{grid-template-columns:auto 1fr auto;gap:44px}.step .tag{justify-self:end;align-self:center}}
@media(max-width:520px){.step{grid-template-columns:1fr;gap:8px}.step .idx{font-size:2.2rem}}

/* ---- flow compare (従来 vs りん) ---- */
.flow-compare{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair);margin:0}
@media(min-width:820px){.flow-compare{grid-template-columns:1fr 1fr}}
.flow-card{padding:36px 0;border-bottom:1px solid var(--hair);background:transparent;border-radius:0;box-shadow:none;border-left:none}
@media(min-width:820px){.flow-card{border-bottom:none;border-left:1px solid var(--hair);padding:8px 0 8px 40px}.flow-card:first-child{border-left:none;padding-left:0}}
@media(min-width:820px){.flow-card.us{border-left:1px solid var(--brass)}}
.flow-lbl{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:700;color:var(--paper-mute);margin-bottom:18px;display:block}
.flow-card.us .flow-lbl{color:var(--brass)}
.flow-chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.flow-node{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-weight:700;font-size:1rem;color:var(--paper);border:1px solid var(--hair-strong);border-radius:2px;padding:7px 14px;white-space:nowrap}
.flow-node.mut{color:var(--paper-mute);border-color:var(--hair)}
.flow-card.us .flow-node{border-color:var(--brass)}
.flow-arrow{font-family:var(--font-display);color:var(--paper-mute);font-weight:700;font-size:1rem}
.flow-note{font-family:var(--font-jp);font-size:.9rem;color:var(--lp-body);line-height:1.85;margin:18px 0 0;max-width:46ch}

/* ---- scoreboard (実績 990/8.0/80/1級) ---- */
.board{background:var(--ink-2);border-bottom:1px solid var(--hair)}
.board .wrap{padding:96px 32px}
.board-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:44px}
@media(min-width:820px){.board-grid{grid-template-columns:repeat(4,1fr)}}
.board .stat{padding:34px 20px;border-top:1px solid var(--hair);border-left:1px solid var(--hair);background:transparent;text-align:left;margin:0}
.board .stat:nth-child(1),.board .stat:nth-child(2){border-top:none}
@media(max-width:819px){.board .stat:nth-child(odd){border-left:none}}
@media(min-width:820px){.board .stat{border-top:none}.board .stat:first-child{border-left:none}}
.board .stat .v{font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,7vw,5.4rem);line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--paper);display:block}
.board .stat .v .u{font-size:.34em;color:var(--brass);vertical-align:super;letter-spacing:0}
.board .stat .k{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-mute);margin-top:14px;display:block}
.board-note{font-family:var(--font-jp);color:var(--paper-mute);font-size:13px;margin-top:40px;letter-spacing:.02em}
.board-note a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.board-note a:hover{color:var(--brass)}

/* ---- volume numbers (教材ボリューム 5指標: hairline格子) ---- */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--hair);background:transparent}
@media(min-width:760px){.stat-grid{grid-template-columns:repeat(5,1fr)}}
.stat-grid .stat{padding:32px 16px;border-top:1px solid var(--hair);border-left:1px solid var(--hair);text-align:left;background:transparent;min-width:0}
.stat-grid .stat:nth-child(1),.stat-grid .stat:nth-child(2){border-top:none}
@media(max-width:759px){.stat-grid .stat:nth-child(odd){border-left:none}}
@media(min-width:760px){.stat-grid .stat{border-top:none}.stat-grid .stat:first-child{border-left:none}}
.stat-grid .num{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,4vw,3.2rem);letter-spacing:-.01em;color:var(--paper);line-height:.9;display:block;font-variant-numeric:tabular-nums}
.stat-grid .lbl{font-family:var(--font-jp);font-size:.72rem;color:var(--paper-mute);margin-top:12px;display:block;line-height:1.45}
.extras-h{font-family:var(--font-jp);color:var(--paper);font-size:1rem;font-weight:700;margin:56px 0 18px}
.extras{display:flex;flex-wrap:wrap;gap:8px}
.extra{font-family:var(--font-jp);font-size:.86rem;color:var(--lp-body);border:1px solid var(--hair-strong);border-radius:2px;padding:7px 14px;white-space:nowrap}

/* ---- three arrows (教える/管理する/設計する) ---- */
.arrows-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair);background:transparent;border-radius:0}
@media(min-width:760px){.arrows-grid{grid-template-columns:repeat(3,1fr)}}
.arrow-item{padding:36px 0;border-bottom:1px solid var(--hair);background:transparent;border-radius:0;box-shadow:none}
@media(min-width:760px){.arrow-item{border-bottom:none;border-left:1px solid var(--hair);padding:8px 0 8px 32px}.arrow-item:first-child{border-left:none;padding-left:0}}
.arrow-item .ax{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,2.8rem);color:transparent;-webkit-text-stroke-width:1.2px;-webkit-text-stroke-color:#34343A;display:block;margin-bottom:16px;line-height:1;font-variant-numeric:tabular-nums;opacity:1}
.arrow-item h3{font-family:var(--font-jp);font-weight:700;font-size:1.1rem;color:var(--paper);margin:0 0 .5em}
.arrow-item p{font-family:var(--font-jp);color:var(--lp-body);font-size:.95rem;line-height:1.85;margin:0}

/* ---- mentor (story) ---- */
.mentor{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
.mentor-body p{font-family:var(--font-jp);color:var(--lp-body);line-height:1.95;margin:0 0 1.2em;font-size:15.5px;max-width:66ch}
.mentor-body p:last-child{margin-bottom:0}
.mentor-board{margin-top:56px}
.mentor-board .board-grid{margin-top:0}
.mentor-board .stat{padding:34px 20px;border-top:1px solid var(--hair);border-left:1px solid var(--hair);background:transparent;text-align:left;margin:0}
.mentor-board .stat:nth-child(1),.mentor-board .stat:nth-child(2){border-top:none}
@media(max-width:819px){.mentor-board .stat:nth-child(odd){border-left:none}}
@media(min-width:820px){.mentor-board .stat{border-top:none}.mentor-board .stat:first-child{border-left:none}}
.mentor-board .stat .v{font-family:var(--font-display);font-weight:700;font-size:clamp(3rem,7vw,5.4rem);line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--paper);display:block;white-space:nowrap}
.mentor-board .stat .k{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-mute);margin-top:14px;display:block}
.mentor-board .score-note{display:block;margin-top:7px;font-family:var(--font-jp);font-size:11px;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--paper-mute)}
.mentor-board .board-note{margin-bottom:0}
.mentor-proof{margin-top:64px}
.mentor-subhead{max-width:66ch}
.mentor-subhead h3,.mentor-press-body h3{font-family:var(--font-jp);font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.45;margin:12px 0 14px;color:var(--paper)}
.mentor-subhead p,.mentor-press-body p{font-family:var(--font-jp);font-size:15px;line-height:1.9;color:var(--lp-body)}
.mentor-certs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,82vw);gap:14px;margin-top:28px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding-bottom:8px}
@media(min-width:720px){.mentor-certs{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,1fr);gap:18px;overflow:visible;padding-bottom:0}}
.mentor-cert{margin:0;background:var(--surface);border:1px solid var(--hair);overflow:hidden;min-width:0;scroll-snap-align:start}
.mentor-cert img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;object-position:center top;background:#ecebe7}
.mentor-cert figcaption{font-family:var(--font-jp);font-size:.9rem;font-weight:700;line-height:1.55;color:var(--paper);padding:16px 18px;border-top:1px solid var(--hair)}
.mentor-cert figcaption span{font-size:.78rem;font-weight:400;color:var(--paper-mute)}
.mentor-proof-note{font-family:var(--font-jp);font-size:.78rem!important;line-height:1.75!important;color:var(--paper-mute)!important;margin-top:16px}
.mentor-press{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;margin-top:64px}
@media(min-width:820px){.mentor-press{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:56px}}
.mentor-press-image{display:block;border:1px solid var(--hair);background:var(--surface);overflow:hidden}
.mentor-press-image img{display:block;width:100%;height:auto}
.mentor-press-body .mentor-proof-note{margin-top:18px}
@media(max-width:719px){
  .mentor-proof,.mentor-press{margin-top:48px}
  .mentor-board{margin-top:44px}
  .mentor-press-image img{height:220px;object-fit:cover;object-position:center top}
}

/* ---- plans (料金) ---- */
.plan-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair);background:transparent;align-items:stretch}
@media(min-width:820px){.plan-grid{grid-template-columns:repeat(3,1fr)}}
.plan{background:transparent;border:none;border-bottom:1px solid var(--hair);border-radius:0;box-shadow:none;padding:38px 0;display:flex;flex-direction:column;min-width:0}
@media(min-width:820px){.plan{border-bottom:none;border-left:1px solid var(--hair);padding:10px 32px}.plan:first-child{border-left:none;padding-left:0}.plan:last-child{padding-right:0}}
.plan.pop{background:transparent}
.plan .tag{margin-bottom:16px}
.plan h3{font-family:var(--font-jp);font-weight:700;font-size:1.25rem;margin:0 0 4px;color:var(--paper)}
.plan .lvl{font-family:var(--font-jp);font-size:.8rem;color:var(--paper-mute);margin-bottom:18px;text-transform:none;letter-spacing:0}
.plan .price-lead{font-family:var(--font-display);font-weight:700;font-size:2rem;letter-spacing:.01em;color:var(--paper);line-height:1.1;margin:0 0 22px;font-variant-numeric:tabular-nums}
.plan .price-lead small{font-family:var(--font-jp);font-size:.8rem;font-weight:400;color:var(--paper-mute)}
.plan ul{list-style:none;padding:0;margin:0 0 28px}
.plan li{font-family:var(--font-jp);padding-left:18px;position:relative;margin:.55em 0;color:var(--lp-body);font-size:.92rem;line-height:1.7}
.plan li:before{content:"・";position:absolute;left:0;color:var(--paper-mute)}
.plan .btn{margin-top:auto}

/* ---- comparison table ---- */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:none;border-radius:0;background:transparent}
.cmp-table{border-collapse:collapse;width:100%;min-width:640px;font-family:var(--font-jp);font-size:.92rem;color:var(--paper)}
.cmp-table th,.cmp-table td{padding:16px;text-align:left;border-bottom:1px solid var(--hair);vertical-align:top}
.cmp-table thead th{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--paper-mute);white-space:nowrap;background:transparent;font-weight:700}
.cmp-table thead th.us{color:var(--paper)}
.cmp-table .rh{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;font-weight:700;color:var(--paper-mute);white-space:nowrap}
.cmp-table td{color:var(--paper-mute)}
.cmp-table td.us{color:var(--paper)}
.cmp-table col.us-col{background:rgba(192,138,62,.07)}
.cmp-table th.us,.cmp-table td.us{border-left:1px solid var(--brass);border-right:1px solid var(--brass)}
.cmp-table thead th.us{border-top:1px solid var(--brass)}
.cmp-table tbody tr:last-child td.us{border-bottom:1px solid var(--brass)}
.cmp-callout{font-family:var(--font-jp);font-size:.92rem;color:var(--paper-mute);margin:24px 0 0;max-width:66ch;line-height:1.9}
.cmp-callout strong{color:var(--paper)}

/* ---- results (伸びの例) ---- */
.growth-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--hair);max-width:840px;background:transparent}
@media(min-width:720px){.growth-grid{grid-template-columns:repeat(4,1fr)}}
.growth-cell{padding:34px 20px;border-top:1px solid var(--hair);border-left:1px solid var(--hair);text-align:left;background:transparent}
.growth-cell:nth-child(1),.growth-cell:nth-child(2){border-top:none}
@media(max-width:719px){.growth-cell:nth-child(odd){border-left:none}}
@media(min-width:720px){.growth-cell{border-top:none}.growth-cell:first-child{border-left:none}}
.growth-cell .g{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,5vw,3.4rem);letter-spacing:-.01em;color:var(--paper);display:block;line-height:.9;font-variant-numeric:tabular-nums}
.growth-cell .gl{font-family:var(--font-jp);font-size:.74rem;color:var(--paper-mute);margin-top:12px;display:block;letter-spacing:.02em}

/* ---- note cards (ダーク・モック美意識) ---- */
.note-cards{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair);background:transparent}
@media(min-width:820px){.note-cards{grid-template-columns:repeat(3,1fr)}}
.note-card{display:flex;flex-direction:column;gap:12px;padding:34px 0;border-bottom:1px solid var(--hair);background:transparent;border-radius:0;box-shadow:none;text-decoration:none;transition:opacity .2s ease}
@media(min-width:820px){.note-card{border-bottom:none;border-left:1px solid var(--hair);padding:10px 32px}.note-card:first-child{border-left:none;padding-left:0}.note-card:last-child{padding-right:0}}
.note-card:hover{transform:none;background:transparent}
.note-flag{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.18em;font-size:.68rem;font-weight:700;color:var(--brass);align-self:flex-start}
/* 有料記事フラグ=温グレー(ブラスは無料の1箇所だけ)。全カードにフラグ行を置き行位置を揃える */
.note-flag.mut{color:var(--paper-mute)}
.note-card h3{font-family:var(--font-jp);font-weight:700;font-size:1.05rem;color:var(--paper);margin:0;line-height:1.5}
.note-card p{font-family:var(--font-jp);color:var(--lp-body);font-size:.9rem;line-height:1.8;margin:0;flex:1}
.note-more{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--paper-mute);margin-top:2px}
.note-card:hover .note-more{color:var(--paper)}
.note-card:hover h3{color:var(--paper)}

/* ---- closing CTA (1日1ユニット) ---- */
.cta-lead{font-family:var(--font-jp);color:var(--lp-body);max-width:58ch;margin:0 0 30px;font-size:16px;line-height:1.95}

/* ---- footer (big-mark 装飾英語 + サイトマップ/法務) ---- */
.lp-foot{background:var(--ink);border-top:1px solid var(--hair);padding:80px 0 56px;color:var(--paper-mute);font-family:var(--font-jp)}
.lp-foot .wrap{display:block}
.big-mark{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(2.4rem,8vw,5rem);line-height:.9;letter-spacing:-.01em;color:transparent;-webkit-text-stroke-width:1.2px;-webkit-text-stroke-color:#34343A;margin:0 0 8px}
.foot-grid{display:grid;grid-template-columns:1fr;gap:40px;padding:52px 0;border-top:1px solid var(--hair);margin-top:44px}
@media(min-width:720px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}}
.foot-brand .foot-mark{display:flex;align-items:center;gap:8px;font-family:var(--font-jp);font-weight:700;letter-spacing:.02em;font-size:16px;color:var(--paper);text-transform:none}
.foot-brand .foot-mark img{width:22px;height:22px;display:block;border-radius:5px}
.foot-col h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;font-weight:700;color:var(--paper-mute);margin:0 0 16px}
.foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.foot-col a,.foot-col span{font-family:var(--font-jp);color:var(--paper-mute);font-size:.9rem;opacity:1}
.foot-col a:hover{color:var(--paper);text-decoration:none}
.foot-social{display:flex;align-items:center;gap:10px;margin-top:2px}
.foot-social .foot-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid var(--hair-strong);border-radius:2px;color:var(--paper-mute);opacity:1;transition:color .2s ease,border-color .2s ease}
.foot-social .foot-ico svg{width:16px;height:16px;display:block}
.foot-social .foot-ico.wordmark{width:auto;padding:0 14px;font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.03em;text-transform:lowercase}
.foot-social .foot-ico:hover{color:var(--paper);border-color:var(--paper)}
.foot-legal{border-top:1px solid var(--hair);padding-top:28px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-family:var(--font-jp);font-size:.8rem;color:var(--paper-mute)}
.foot-legal a{color:var(--paper-mute);opacity:1}
.foot-legal a:hover{color:var(--paper);text-decoration:none}
.foot-legal .sep{opacity:.5}

/* ---- prefers-reduced-motion ---- */
@media(prefers-reduced-motion:reduce){.wave i{animation:none !important}}

/* 本人指示 2026-07-14: eyebrow(kick)を全消し + ボタン風タグ(.tag)を削除 */
.lp .hero-top{display:none !important}
.lp .kick{display:none !important}
.lp .tag{display:none !important}
.lp .step{grid-template-columns:auto 1fr}

/* ---- compact mobile rhythm + progressively enhanced navigation ---- */
@media(max-width:720px){
  .wrap{padding-left:20px;padding-right:20px}
  .hero{padding:80px 0 68px}
  .sec{padding:64px 0}
  .sec-head{margin-bottom:34px;gap:14px}
  .lp-foot{padding:64px 0 42px}

  html.site-nav-ready .bar .wrap{
    height:64px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:8px;
    overflow:visible;
  }
  html.site-nav-ready .bar .mark{min-width:0;white-space:nowrap}
  html.site-nav-ready .bar .mark img{flex:0 0 auto}
  html.site-nav-ready .bar .nav-mobile-primary,
  html.site-nav-ready .bar .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    border-radius:2px;
    font-family:var(--font-display);
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  html.site-nav-ready .bar .nav-mobile-primary{
    padding:9px 12px;
    border:1px solid var(--paper);
    background:var(--paper);
    color:var(--ink);
  }
  html.site-nav-ready .bar .nav-toggle{
    min-width:44px;
    padding:9px 10px;
    border:1px solid var(--hair-strong);
    background:transparent;
    color:var(--paper);
  }
  html.site-nav-ready .bar .navlinks{
    position:absolute;
    inset:64px 0 auto;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:12px 20px 20px;
    background:rgba(10,10,11,.98);
    border-bottom:1px solid var(--hair);
  }
  html.site-nav-ready .bar.nav-open .navlinks{display:flex}
  html.site-nav-ready .bar .navlinks a,
  html.site-nav-ready .bar .navlinks a.l,
  html.site-nav-ready .bar .navlinks .btn{
    display:flex;
    width:100%;
    min-height:48px;
    justify-content:flex-start;
    padding:13px 0;
    border:0;
    border-bottom:1px solid var(--hair);
    border-radius:0;
    background:transparent;
    color:var(--paper);
    box-shadow:none;
  }
  html.site-nav-ready .bar .navlinks .nav-mobile-diagnosis-source{display:none}
}

@media(max-width:374px){
  .wrap{padding-left:16px;padding-right:16px}
  html.site-nav-ready .bar .wrap{gap:6px}
  html.site-nav-ready .bar .mark{font-size:14px}
  html.site-nav-ready .bar .mark img{width:19px;height:19px;margin-right:4px}
  html.site-nav-ready .bar .nav-mobile-primary{padding:8px 9px;font-size:10px}
  .mentor-board .stat{padding:26px 12px}
  .mentor-board .stat .v{font-size:2.65rem}
}