/* COACHING ZERO 見本の共通（色・文字・動き・ボタン・上の帯）。index.html と同じ値 */
:root{
  --ground:#000;--surface:#1c1c1e;--ink:#f5f5f7;--ink-2:#a1a1a6;--ink-3:#9a9a9f;--ink-4:#7d7d82;
  --line-1:#2c2c2e;--line-2:#3a3a3c;--line-3:#48484a;--fill-chip:rgba(255,255,255,.08);
  --mint:#7ff0c8;--sky:#7cc4ff;--blue:#2f6bff;--green:#148a6b;--coral:#ff6b5a;
  --grad-text:linear-gradient(100deg,#f5f5f7 5%,#7ff0c8 45%,#7cc4ff 90%);
  --grad-essence:linear-gradient(100deg,#f5f5f7,#7ff0c8);
  --grad-action:linear-gradient(100deg,#2f6bff,#148a6b);
  --ease:cubic-bezier(.2,.8,.2,1);
  --jp:"Noto Sans JP",system-ui,sans-serif;--lab:"Inter",system-ui,sans-serif;--disp:"Archivo","Inter",sans-serif;
  --acc:#7ff0c8;--acc-rgb:127,240,200;--acc2:#7cc4ff;--acc2-rgb:124,196,255;--btn-rgb:47,107,255;--surface-rgb:28,28,30;--deep:#0b0b0c;--on-acc:#04140e;--on-btn:#fff;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ground:#000}}
:root[data-theme="dark"]{--ground:#000}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--jp);-webkit-font-smoothing:antialiased}
html,body{overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 40px}}
section{padding:120px 0}
@media (max-width:719px){section{padding:88px 0}}

/* 文字（日本語は文節で折る） */
h1,h2,h3,.big-q,.future li b,.voices blockquote b,.lead,.fit li{word-break:auto-phrase;text-wrap:pretty}
h1,h2,.big-q{text-wrap:balance}
.eb{font:600 14px/1 var(--lab);letter-spacing:.42em;color:var(--ink-3);text-transform:uppercase}
.h1{font:700 clamp(34px,7.4vw,60px)/1.2 var(--jp);letter-spacing:-.03em;margin:0}
.h2{font:700 clamp(30px,5.6vw,56px)/1.25 var(--jp);letter-spacing:-.025em;margin:0;text-wrap:balance}
.lead{font:500 clamp(16px,2.2vw,21px)/1.75 var(--jp);color:var(--ink-2);margin:0}
.lead b{color:var(--ink);font-weight:700}
.g{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.ge{background:var(--grad-essence);-webkit-background-clip:text;background-clip:text;color:transparent}
.center{text-align:center}

/* 動き：画面に入ったら、ぼかしから現れる（止め絵＝最後の形） */
.m{opacity:0;transform:translateY(24px);filter:blur(12px);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.2s var(--ease) var(--d,0s),filter 1.1s var(--ease) var(--d,0s)}
.m.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.m,.ak{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important}}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 32px;border-radius:999px;background:var(--grad-action);color:var(--on-btn);font:700 17px/1 var(--jp);text-decoration:none;letter-spacing:.02em;box-shadow:0 10px 40px rgba(var(--btn-rgb),.25);transition:transform .3s var(--ease),box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 50px rgba(var(--btn-rgb),.35)}
.btn:focus-visible,.lk:focus-visible,.top a:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.btn.wide{width:100%}
.lk{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font:500 15px/1 var(--jp);text-decoration:none;padding:12px 4px;border-bottom:1px solid var(--line-3)}
.lk:hover{border-color:var(--mint)}
.ic{width:18px;height:18px;flex:none}

/* 上の帯 */
.top{position:fixed;inset:0 0 auto;z-index:20;transition:background .4s,backdrop-filter .4s}
.top.solid{background:rgba(0,0,0,.72);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 1px 0 var(--line-1)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;height:56px}
.top .brand{font:700 14px/1 var(--lab);letter-spacing:.32em;text-decoration:none}
.top .login{font:500 14px/1 var(--jp);color:var(--ink-2);text-decoration:none;padding:15px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2)}

footer{padding:56px 0 calc(48px + env(safe-area-inset-bottom));text-align:center;font:600 14px/1 var(--lab);letter-spacing:.3em;color:var(--ink-4)}
.note{font-size:14px;color:var(--ink-4);text-align:center;padding:0 16px 32px;margin:0}

/* ---- 動きの道具（motion.js と組で使う） ---- */
h1,h2,h3{word-break:auto-phrase;text-wrap:balance}
/* 一文字ずつ：画面に入ったら下から・ぼかしから。.ak の種類で入り方を変える */
.ak{display:inline-block;white-space:pre;opacity:0;transform:translateY(.5em) rotate(4deg);filter:blur(10px)}
.in .ak,.ak.in{animation:akIn 1s var(--ease) both;animation-delay:calc(var(--d,0s) + min(var(--i) * 38ms, .8s))}
[data-kin="drop"] .ak{transform:translateY(-.8em) scale(1.3)}
[data-kin="wide"] .ak{transform:translateX(calc((var(--i) - var(--n,10) / 2) * .35em));filter:blur(14px)}
[data-kin="flip"] .ak{transform:perspective(400px) rotateX(-90deg);transform-origin:50% 100%}
@keyframes akIn{to{opacity:1;transform:none;filter:none}}
.kl{display:inline-block}
[data-scrub] .kl{display:inline}
/* 文字がスクロールに合わせて灯る（Apple の説明文のように） */
[data-scrub] .sc{color:var(--ink);opacity:var(--o,.48);transition:opacity .25s linear}
[data-scrub] b .sc,[data-scrub] .ge .sc{opacity:var(--o,.48)}
/* 写真は下から開く幕で現れ、少しずつ寄る */
.wipe img{clip-path:inset(100% 0 0 0 round var(--r));transform:scale(1.18);transition:clip-path 1.4s var(--ease),transform 2.2s var(--ease)}
.wipe.in img{clip-path:inset(0 0 0 0 round var(--r));transform:scale(1)}
/* 数字は数え上がる */
[data-count]{font-variant-numeric:tabular-nums}
/* 押せるものに光が走る */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:shine 4.5s var(--ease) infinite var(--shd,1.5s)}
@keyframes shine{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
/* 流れる帯（教科書の章の名前） */
.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq .tr{display:flex;gap:14px;width:max-content;animation:marq 70s linear infinite}
.marq.rev .tr{animation-direction:reverse;animation-duration:90s}
.marq span{font:700 clamp(15px,1.8vw,18px)/1 var(--jp);padding:14px 22px;border-radius:999px;background:var(--fill-chip);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:var(--ink-2);white-space:nowrap}
.marq span.e{color:var(--on-acc);background:var(--grad-essence)}
@keyframes marq{to{transform:translateX(-50%)}}
/* 散らばった文字が、スクロールで一つの言葉に集まる */
.asm{position:relative}
.asm .pin{height:220svh}
.asm .stick{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden;text-align:center}
.asm .word{font:800 clamp(36px,10vw,150px)/1.1 var(--jp);letter-spacing:-.01em;margin:0;word-break:keep-all}
html body .asm .word{font-feature-settings:"palt"}
.asm .word .al{display:inline-block;will-change:transform,filter,opacity}
.asm .sub{position:absolute;left:0;right:0;bottom:12svh;font:500 clamp(15px,2vw,19px)/1.7 var(--jp);color:var(--ink-2);opacity:var(--s,0);transform:translateY(calc((1 - var(--s,0)) * 20px));padding:0 16px}
@media (prefers-reduced-motion:reduce){
  .ak{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  [data-scrub] .sc{opacity:1!important}
  .wipe img{clip-path:none!important;transform:none!important;transition:none!important}
  .btn::after,.marq .tr{animation:none!important}
  .asm .pin{height:auto}.asm .stick{position:static;height:auto;padding:120px 16px}.asm .sub{position:static;opacity:1;transform:none;margin-top:24px}
}
/* 動きの強さ（見本だけ）：なし＝止めた時と同じ／控えめ＝ぼかし・一文字ずつ・散らばりをやめ、ふわっと出るだけ */
html[data-mo="off"] :is(.m,.ak){opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important}
html[data-mo="off"] [data-scrub] .sc{opacity:1!important}
html[data-mo="off"] .wipe img{clip-path:none!important;transform:none!important;transition:none!important}
html[data-mo] .btn::after{animation:none!important}
html[data-mo="off"] .marq .tr{animation:none!important}
html[data-mo] .asm .pin{height:auto}html[data-mo] .asm .stick{position:static;height:auto;padding:120px 16px}html[data-mo] .asm .sub{position:static;opacity:1;transform:none;margin-top:24px}
html[data-mo="calm"] .m{filter:none;transform:translateY(10px);transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s)}
html[data-mo="calm"] .m.in{transform:none}
html[data-mo="calm"] .ak{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
html[data-mo="calm"] :is(.kin-auto,[data-k]){transition:opacity .6s var(--ease)}
html[data-mo="calm"] :is(.kin-auto,[data-k]):not(.in){opacity:0}
html[data-mo="calm"] [data-scrub] .sc{opacity:1!important}
html[data-mo="calm"] .wipe img{transform:none;transition:clip-path .8s var(--ease)}

/* 写真の色：全部の写真に同じ「あたたかめ」の色調（2026-11-13 本人：冷たい色調で顔色が悪く見えた→B） */
.grade img,img.grade,.ph.grade{filter:url(#zgrade) saturate(1.02) contrast(1.05)}
/* ゆっくり現れる（見せ場以外の見出し） */
.m.calm{transform:translateY(18px);filter:blur(5px);transition:opacity 1.1s ease var(--d,0s),transform 1.3s var(--ease) var(--d,0s),filter 1.1s var(--ease) var(--d,0s)}
.m.calm.in{transform:none;filter:none}

/* ---- 色の見比べ（見本だけ）。html[data-c] で全体の色を入れ替える ---- */
html:root[data-c]{--mint:var(--acc);--sky:var(--acc2)}
html:root[data-c="navy"]{
  --ground:#070c18;--surface:#121a2c;--surface-rgb:18,26,44;--deep:#0b1222;
  --ink:#f4efe4;--ink-2:#bdb6a6;--ink-3:#a39c8c;--ink-4:#857f72;
  --line-1:#1e2940;--line-2:#2a3652;--line-3:#3b4866;--fill-chip:rgba(217,182,115,.08);
  --acc:#d9b673;--acc-rgb:217,182,115;--acc2:#f1dcae;--acc2-rgb:241,220,174;--green:#9c7a3c;
  --grad-text:linear-gradient(100deg,#f4efe4 5%,#ecd5a0 45%,#c9a35b 90%);
  --grad-essence:linear-gradient(100deg,#f4efe4,#d9b673);
  --grad-action:linear-gradient(100deg,#ecd29a,#c39a52);--btn-rgb:217,182,115;--on-btn:#141006;--on-acc:#141006}
html:root[data-c="navymint"]{
  --ground:#091020;--surface:#141d32;--surface-rgb:20,29,50;--deep:#0c1428;
  --line-1:#1d2842;--line-2:#29365a;--line-3:#3a4870;--fill-chip:rgba(127,240,200,.08);
  --acc:#7ff0c8;--acc-rgb:127,240,200;--acc2:#f0cf8a;--acc2-rgb:240,207,138;--green:#2aa58a;
  --grad-text:linear-gradient(100deg,#f5f5f7 5%,#a8f3d8 45%,#f0cf8a 92%);
  --grad-essence:linear-gradient(100deg,#f5f5f7,#7ff0c8);
  --grad-action:linear-gradient(100deg,#86f2cc,#5cc8e6);--btn-rgb:127,240,200;--on-btn:#061420;--on-acc:#061420}
html:root[data-c="tealgold"]{
  --ground:#04100f;--surface:#0f2020;--surface-rgb:15,32,32;--deep:#081816;
  --ink:#f4f2ec;--ink-2:#b7c0bb;--ink-3:#9aa59f;--ink-4:#7d8984;
  --line-1:#173130;--line-2:#224442;--line-3:#315a57;--fill-chip:rgba(233,199,126,.08);
  --acc:#ebc97f;--acc-rgb:235,201,127;--acc2:#7fe3c9;--acc2-rgb:127,227,201;--green:#1f8f7a;
  --grad-text:linear-gradient(100deg,#f4f2ec 5%,#f1d495 48%,#7fe3c9 95%);
  --grad-essence:linear-gradient(100deg,#f4f2ec,#ebc97f);
  --grad-action:linear-gradient(100deg,#35b89d,#e6bd6c);--btn-rgb:53,184,157;--on-btn:#03120f;--on-acc:#1a1305}
html:root[data-c="champagne"]{
  --ground:#070a14;--surface:#161b29;--surface-rgb:22,27,41;--deep:#0d111d;
  --line-1:#222838;--line-2:#2e3548;--line-3:#40485e;--fill-chip:rgba(242,217,166,.08);
  --acc:#f2d9a6;--acc-rgb:242,217,166;--acc2:#8fc8ff;--acc2-rgb:143,200,255;--green:#5a86c4;
  --grad-text:linear-gradient(100deg,#f5f5f7 5%,#f2d9a6 48%,#8fc8ff 95%);
  --grad-essence:linear-gradient(100deg,#f5f5f7,#f2d9a6);
  --grad-action:linear-gradient(100deg,#9fd0ff,#f2d9a6);--btn-rgb:143,200,255;--on-btn:#0a0f1c;--on-acc:#1a1406}
html:root[data-c="tealgold"] .grade img,html:root[data-c="tealgold"] img.grade,html:root[data-c="tealgold"] .ph.grade,html:root[data-c="champagne"] .grade img,html:root[data-c="champagne"] img.grade,html:root[data-c="champagne"] .ph.grade{filter:url(#zgradew) saturate(.92) contrast(1.05) brightness(.97)}
/* 要所に金：小見出し・印・強調の言葉・球は金（--acc）、ボタンと光は主役の色（赤 / 空色） */
html:root[data-c="redgold"]{
  --ground:#000;--surface:#1a1718;--surface-rgb:26,23,24;--deep:#0d0a0b;
  --line-1:#2c2627;--line-2:#3b3334;--line-3:#4d4344;--fill-chip:rgba(232,197,126,.08);
  --acc:#e8c57e;--acc-rgb:232,197,126;--acc2:#ff3b4f;--acc2-rgb:255,59,79;--green:#9c1020;
  --grad-text:linear-gradient(100deg,#f5f5f7 5%,#ff6b6b 50%,#E4002B 95%);
  --grad-essence:linear-gradient(100deg,#fbf3df,#e8c57e);
  --grad-action:linear-gradient(100deg,#E4002B,#ff3b30);--btn-rgb:228,0,43;--on-btn:#fff;--on-acc:#1a1305}
html:root[data-c="skygold"]{
  --ground:#000;--surface:#17191d;--surface-rgb:23,25,29;--deep:#0b0c0f;
  --line-1:#262a31;--line-2:#333943;--line-3:#454c58;--fill-chip:rgba(124,196,255,.08);
  --acc:#e8c57e;--acc-rgb:232,197,126;--acc2:#7cc4ff;--acc2-rgb:124,196,255;--green:#2f6bff;
  --grad-text:linear-gradient(100deg,#f5f5f7 5%,#9fd3ff 50%,#4f9dff 95%);
  --grad-essence:linear-gradient(100deg,#fbf3df,#e8c57e);
  --grad-action:linear-gradient(100deg,#9fd3ff,#4f9dff);--btn-rgb:79,157,255;--on-btn:#03101f;--on-acc:#1a1305}
html:root[data-c="navysky"]{
  --ground:#081022;--surface:#121c33;--surface-rgb:18,28,51;--deep:#0b1429;
  --line-1:#1c2846;--line-2:#28375e;--line-3:#394a75;--fill-chip:rgba(124,196,255,.09);
  --acc:#ecc982;--acc-rgb:236,201,130;--acc2:#7cc4ff;--acc2-rgb:124,196,255;--green:#2f6bff;
  --grad-text:linear-gradient(100deg,#f5f5f7 5%,#a6d6ff 50%,#ecc982 95%);
  --grad-essence:linear-gradient(100deg,#fbf3df,#ecc982);
  --grad-action:linear-gradient(100deg,#8fcbff,#3f8cff);--btn-rgb:63,140,255;--on-btn:#03101f;--on-acc:#1a1305}
/* 黒×赤のバリエーション */
html:root[data-c="redmono"]{
  --acc:#f5f5f7;--acc-rgb:245,245,247;--acc2:#ff3b4f;--acc2-rgb:255,59,79;--green:#9c1020;--fill-chip:rgba(255,255,255,.08);
  --grad-text:linear-gradient(100deg,#fff 10%,#ffd0d0 55%,#ff4d5a 100%);
  --grad-essence:linear-gradient(100deg,#fff,#ffb3b8);
  --grad-action:linear-gradient(100deg,#E4002B,#c4001f);--btn-rgb:228,0,43;--on-btn:#fff;--on-acc:#000}
html:root[data-c="wine"]{
  --ground:#0c0306;--surface:#1c0f13;--surface-rgb:28,15,19;--deep:#130709;
  --ink:#f6efee;--ink-2:#c3b2b3;--ink-3:#a89496;--ink-4:#8a7577;
  --line-1:#2e1a1f;--line-2:#40252b;--line-3:#58343b;--fill-chip:rgba(255,120,130,.08);
  --acc:#ff8a8f;--acc-rgb:255,138,143;--acc2:#E4002B;--acc2-rgb:228,0,43;--green:#7a0016;
  --grad-text:linear-gradient(100deg,#f6efee 5%,#ff9aa0 50%,#E4002B 95%);
  --grad-essence:linear-gradient(100deg,#f6efee,#ff8a8f);
  --grad-action:linear-gradient(100deg,#ff2a45,#b8001f);--btn-rgb:228,0,43;--on-btn:#fff;--on-acc:#1c0508}
/* ミント×空色のバリエーション */
html:root[data-c="aqua"]{
  --acc:#7ff0c8;--acc-rgb:127,240,200;--acc2:#7cc4ff;--acc2-rgb:124,196,255;
  --grad-action:linear-gradient(100deg,#8af3cf,#7cc4ff);--btn-rgb:124,220,230;--on-btn:#04121c;--on-acc:#04140e}
html:root[data-c="ice"]{
  --ground:#02060a;--surface:#121820;--surface-rgb:18,24,32;--deep:#080d13;
  --line-1:#1f2833;--line-2:#2b3644;--line-3:#3c4a5b;--fill-chip:rgba(170,225,255,.08);
  --acc:#a8e4ff;--acc-rgb:168,228,255;--acc2:#9ef5d6;--acc2-rgb:158,245,214;--green:#3a8fd6;
  --grad-text:linear-gradient(100deg,#fff 5%,#c8eeff 45%,#9ef5d6 95%);
  --grad-essence:linear-gradient(100deg,#fff,#a8e4ff);
  --grad-action:linear-gradient(100deg,#e8f7ff,#a8e4ff);--btn-rgb:168,228,255;--on-btn:#04101c;--on-acc:#04101c}
/* 黒×金のバリエーション */
html:root[data-c="blackgold"]{
  --ground:#000;--surface:#1a1916;--surface-rgb:26,25,22;--deep:#0c0b09;
  --line-1:#2b2924;--line-2:#3a3730;--line-3:#4c4840;--fill-chip:rgba(232,197,126,.08);
  --acc:#ecca85;--acc-rgb:236,202,133;--acc2:#fff1cf;--acc2-rgb:255,241,207;--green:#a07a34;
  --grad-text:linear-gradient(100deg,#fff 5%,#f6dfa8 45%,#d8a94f 95%);
  --grad-essence:linear-gradient(100deg,#fff6e0,#ecca85);
  --grad-action:linear-gradient(100deg,#f7dea0,#d9a84c);--btn-rgb:236,202,133;--on-btn:#140f04;--on-acc:#140f04}
html:root[data-c="goldmono"]{
  --ground:#000;--acc:#e8c57e;--acc-rgb:232,197,126;--acc2:#8e8e93;--acc2-rgb:142,142,147;--green:#6e6e73;--fill-chip:rgba(255,255,255,.08);
  --grad-text:linear-gradient(100deg,#fff 10%,#e9e9ee 50%,#e8c57e 100%);
  --grad-essence:linear-gradient(100deg,#fff6e0,#e8c57e);
  --grad-action:linear-gradient(100deg,#f5f5f7,#d2d2d7);--btn-rgb:255,255,255;--on-btn:#000;--on-acc:#140f04}
html:root[data-c="blackgold"] .grade img,html:root[data-c="blackgold"] img.grade,html:root[data-c="blackgold"] .ph.grade,html:root[data-c="wine"] .grade img,html:root[data-c="wine"] img.grade,html:root[data-c="wine"] .ph.grade{filter:url(#zgradew) saturate(.9) contrast(1.06) brightness(.96)}
/* その他（おまかせ） */
html:root[data-c="orange"]{
  --ground:#000;--surface:#1b1917;--surface-rgb:27,25,23;--deep:#0d0b0a;
  --line-1:#2c2825;--line-2:#3b3632;--line-3:#4e4742;--fill-chip:rgba(255,138,61,.08);
  --acc:#ff9a52;--acc-rgb:255,154,82;--acc2:#ffd2a8;--acc2-rgb:255,210,168;--green:#b84a12;
  --grad-text:linear-gradient(100deg,#f5f5f7 5%,#ffc08a 48%,#ff7a2f 95%);
  --grad-essence:linear-gradient(100deg,#fff4ea,#ff9a52);
  --grad-action:linear-gradient(100deg,#ff8a3d,#e8562a);--btn-rgb:255,122,47;--on-btn:#170800;--on-acc:#170800}
html:root[data-c="cobalt"]{
  --ground:#030712;--surface:#0f1730;--surface-rgb:15,23,48;--deep:#081025;
  --line-1:#1a2547;--line-2:#253462;--line-3:#35467c;--fill-chip:rgba(255,255,255,.07);
  --acc:#ffffff;--acc-rgb:255,255,255;--acc2:#3d6bff;--acc2-rgb:61,107,255;--green:#1c3fd1;
  --grad-text:linear-gradient(100deg,#fff 10%,#c9d6ff 55%,#6f8fff 100%);
  --grad-essence:linear-gradient(100deg,#fff,#b9c9ff);
  --grad-action:linear-gradient(100deg,#3d6bff,#1c3fd1);--btn-rgb:61,107,255;--on-btn:#fff;--on-acc:#030712}
html:root[data-c="mono"]{
  --acc:#f5f5f7;--acc-rgb:245,245,247;--acc2:#a1a1a6;--acc2-rgb:161,161,166;--green:#6e6e73;
  --grad-text:linear-gradient(100deg,#fff 10%,#d2d2d7 55%,#8e8e93 100%);
  --grad-essence:linear-gradient(100deg,#fff,#c7c7cc);
  --grad-action:linear-gradient(100deg,#f5f5f7,#d2d2d7);--btn-rgb:255,255,255;--on-btn:#000;--on-acc:#000}
html:root[data-c="red"]{
  --ground:#000;--acc:#ff4d5a;--acc-rgb:255,77,90;--acc2:#ff9e7a;--acc2-rgb:255,158,122;--green:#a3001f;
  --grad-text:linear-gradient(100deg,#f5f5f7 5%,#ff7a6b 50%,#E4002B 95%);
  --grad-essence:linear-gradient(100deg,#f5f5f7,#ff5a64);
  --grad-action:linear-gradient(100deg,#E4002B,#ff5a3c);--btn-rgb:228,0,43;--on-btn:#fff;--on-acc:#fff}
html:root[data-c="one"]{
  --acc:#b9a6ff;--acc-rgb:185,166,255;--acc2:#ffb59a;--acc2-rgb:255,181,154;--green:#6a4bd8;
  --grad-text:linear-gradient(100deg,#f5f5f7 5%,#c7b6ff 45%,#ffb59a 90%);
  --grad-essence:linear-gradient(100deg,#f5f5f7,#c3b2ff);
  --grad-action:linear-gradient(100deg,#7b5cff,#ff6b8a);--btn-rgb:123,92,255;--on-btn:#fff;--on-acc:#140b26}
html:root[data-c="navy"] .grade img,html:root[data-c="navy"] img.grade,html:root[data-c="navy"] .ph.grade{filter:url(#zgradew) saturate(.9) contrast(1.05) brightness(.97)}
html:root[data-c="mono"] .grade img,html:root[data-c="mono"] img.grade,html:root[data-c="mono"] .ph.grade{filter:grayscale(1) contrast(1.08) brightness(.95)}
body,.top.solid,.box,.where,.tools,.list,.hello,.fit .card,.four li,.board .theme,.board .post{transition:background-color .6s,color .6s}
/* 色えらび */
.cpick{position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:40;font-family:var(--jp)}
@media (max-width:879px){body:has(.dock.show) .cpick{bottom:calc(92px + env(safe-area-inset-bottom))}}
.cpick>button{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 8px;border:0;border-radius:999px;background:rgba(var(--surface-rgb),.82);backdrop-filter:saturate(1.6) blur(20px);-webkit-backdrop-filter:saturate(1.6) blur(20px);color:var(--ink);font:700 14px/1 var(--jp);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 12px 40px rgba(0,0,0,.5);cursor:pointer}
.cpick .sw{width:32px;height:32px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.cpick ul{position:absolute;right:0;bottom:calc(100% + 10px);max-height:min(560px,calc(100svh - 140px));overflow:auto;list-style:none;margin:0;padding:8px;width:270px;border-radius:24px;background:rgba(var(--surface-rgb),.9);backdrop-filter:saturate(1.6) blur(24px);-webkit-backdrop-filter:saturate(1.6) blur(24px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 20px 60px rgba(0,0,0,.6);opacity:0;transform:translateY(10px) scale(.97);transform-origin:100% 100%;pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
.cpick.open ul{opacity:1;transform:none;pointer-events:auto}
.cpick li button{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 10px;border:0;border-radius:16px;background:none;color:var(--ink);font:700 15px/1.3 var(--jp);text-align:left;cursor:pointer}
.cpick li button:hover{background:rgba(255,255,255,.06)}
.cpick li button[aria-pressed="true"]{background:rgba(255,255,255,.1)}
.cpick li.gh{font:700 12px/1 var(--lab);letter-spacing:.2em;color:var(--ink-3);padding:14px 12px 6px}
.cpick li small{display:block;font:500 13px/1.3 var(--jp);color:var(--ink-3)}
.cflash{position:fixed;inset:0;z-index:39;pointer-events:none;background:var(--ground);opacity:0}
.cflash.go{animation:cfl .7s var(--ease)}
@keyframes cfl{0%{opacity:0}35%{opacity:.55}100%{opacity:0}}

/* 形をそろえる：角丸は2種類（写真・カード 24px、ボタン・札は丸）。光る色は1ページに1つ */
:root{--r:24px}
/* 文字は3段だけ：見出し（H）・本文（B）・補足（S 14px）。各ページの個別の大きさより後に読み込まれるよう、ここでまとめて上書き */
:root{--fs-h:clamp(30px,5.6vw,52px);--fs-b:clamp(16px,1.9vw,19px);--fs-s:14px}
html .h1,html .h2,html .voices blockquote b,html .vow b,html .steps b,html .hello b,html .col h1{font-size:var(--fs-h)!important;line-height:1.25!important;font-weight:800!important;letter-spacing:-.025em}
html .lead,html .simple .essay .lead,html .teacher .big-q,html .future li b,html .pillar h3,html .floors b,html .teacher .line,html .resume .ttl,html .sh,html .fit li,html .list .t,html .tools b,html .rec p b,html .hero .how,html .hero .ld{font-size:var(--fs-b)!important;line-height:1.7!important}
html .future li b,html .pillar h3,html .floors b,html .teacher .line,html .resume .ttl,html .sh,html .tools b,html .rec p b{font-weight:700!important;letter-spacing:0}
html .teacher .big-q{font-weight:700!important}
html .steps .soon-t b{font-size:var(--fs-b)!important}
@media (max-width:599px){.cpick>button{padding:0 8px}.cpick>button .cn{display:none}}

/* ---- v12 洗練（相談で決めた5つ）---- */
/* 2 文字組み：見出し・ボタンは詰め組み（palt）。本文は詰めず、括弧の連続だけ詰める */
body{text-spacing-trim:space-first}
html body .h1,html body .h2,html body h1,html body h2,html body .big-q,html body .voices blockquote b,html body .future li b,html body .vow b,html body .steps b,html body .hello b,html body .resume .ttl,html body .floors b,html body .teacher .line,html body .pillar h3,html body .sh,html body .st,html body .btn,html body .lk,html body .marq span,html body .four b,html body .board .t,html body .top .login,html body .chip,html body .kick,html body .hero .kicker,html body .hero .lab{font-feature-settings:"palt";text-spacing-trim:trim-start}
html .h1,html .h2,html .voices blockquote b,html .vow b,html .steps b,html .hello b,html .col h1,.big-q{letter-spacing:-.005em}
html body .kick,html body .hero .kicker{letter-spacing:.12em}
html body .eb.ja{font-family:var(--jp);letter-spacing:.16em;text-transform:none;font-feature-settings:"palt"}
/* 言葉の途中で折らない */
dd,.legal,.teacher li span,.list .t,.tools small,.fit li,.floors p,.cap,.hello>span,.steps p,.enroll .parts li,.board .q,.where>span,.teacher .line,.future li p,.voices blockquote p,.enroll .head small,.pillar .cap,.board .theme p{word-break:auto-phrase;line-break:strict}
.teacher .line{text-wrap:balance}.teacher .line .ge{white-space:nowrap}
.future li p,.voices blockquote p,.enroll .head small{text-wrap:pretty}
.legal a{display:inline-block;white-space:nowrap}
.nw{white-space:nowrap}
.teacher li span{display:block}
/* 4 押した感触：押すと縮み、離すと少し弾んで戻る。浮き上がりはマウスの時だけ */
.btn:not(.m){transition:transform .38s cubic-bezier(.3,1.5,.5,1),box-shadow .3s,filter .2s}
.btn.m,.lk.m{transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.2s var(--ease) var(--d,0s),filter 1.1s var(--ease) var(--d,0s),box-shadow .3s}
.btn.m:active,.lk.m:active{transition-delay:0s}
@media (hover:none){.btn:hover{transform:none;box-shadow:0 10px 40px rgba(var(--btn-rgb),.25)}}
.btn:active,.resume:active .btn{transform:scale(.96);filter:brightness(1.08);transition-duration:.12s}
.lk:not(.m),.pages a,.top .login,.cpick>button,.tools a{transition:transform .38s cubic-bezier(.3,1.5,.5,1),background .3s,border-color .3s,opacity .4s}
.lk:active,.pages a:active,.top .login:active,.cpick>button:active,.tools a:active{transform:scale(.97);transition-duration:.12s}
/* 色えらびは、下の申し込みバーと一緒に上がる。最後の行にかぶらない余白 */
.cpick{transition:bottom .6s var(--ease)}
.note{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
/* 5 数字が回って止まる（[data-roll]） */
[data-roll]{display:inline-flex;font-variant-numeric:tabular-nums}
[data-roll] .rl{display:inline-block;height:1.2em;overflow:hidden;line-height:1.2}
[data-roll] .rs{display:flex;flex-direction:column;transition:transform 1.6s cubic-bezier(.2,.8,.1,1) calc(var(--j) * 90ms)}
[data-roll] .rs i{font-style:normal;height:1.2em}
[data-roll].go .rs{transform:translateY(-12em)}
/* 3 PC：講師は写真を大きく左、言葉を右に（案内・玄関とも） */
@media (min-width:1024px){
  html .teacher .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
  html .teacher .cut{max-width:520px;width:100%;margin:0}
}
/* v13 r1：講師の切り抜きは四辺をやわらかく消す（指先が切れて見えないように） */
html .teacher .cut img{-webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 98%),linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 68%,transparent 98%),linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
/* ---- v13 r3 仕上げ ---- */
:root{--fs-d:clamp(36px,10vw,150px)}
html{-webkit-tap-highlight-color:transparent}
.kick{font:700 14px/1 var(--jp);letter-spacing:.12em;color:var(--mint);margin:0 0 18px}
.legal2{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:56px 0 0;padding:0 16px;font-size:14px}
.legal2 a{color:var(--ink-3);text-decoration:none;white-space:nowrap}
.endlogo{width:120px;opacity:.7;margin:96px auto 0}
/* ページ間の移動：ZERO のロゴが次のページへ移り、ほかは上へ抜けて下から現れる（対応ブラウザだけ） */
@view-transition{navigation:auto}
.top .brand{view-transition-name:brand}.top .login{view-transition-name:toplink}.cpick{view-transition-name:cpick}.pages{view-transition-name:pages}
::view-transition-old(root){animation:vtOut .32s var(--ease) both}
::view-transition-new(root){animation:vtIn .7s var(--ease) both}
::view-transition-group(zlogo){animation-duration:.7s;animation-timing-function:var(--ease)}
@keyframes vtOut{to{opacity:0;transform:translateY(-12px);filter:blur(8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(24px);filter:blur(12px)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* 色えらびは、スクロール中は小さく薄く、止まると弾んで戻る */
.cpick .cbtn{transition:transform .5s cubic-bezier(.3,1.5,.5,1),opacity .4s,padding .4s}
.cpick .cn{max-width:12em;overflow:hidden;white-space:nowrap;transition:max-width .4s var(--ease),opacity .3s}
.cpick.away:not(.open) .cbtn{opacity:.35;transform:scale(.78)}
.cpick.away:not(.open) .cn{max-width:0;opacity:0}
/* 上の帯の下に、読んだ分だけ伸びる線 */
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad-action);transform:scaleX(var(--sp,0));transform-origin:0 50%;opacity:0;transition:opacity .4s}
.top.solid::after{opacity:1}
/* 数字は同じ書体で */
.teacher li small,.resume .top2 em{font-family:var(--disp);font-weight:800;font-variant-numeric:tabular-nums lining-nums}
.teacher li small{min-width:6.2em}
.floors li:active{transform:scale(.98);transition:transform .12s}
.hero .logo,.col .logo{view-transition-name:zlogo}
/* 整理（2026-10-16 ごちゃごちゃ対策）：薄い文字は1色、浮いている部品を減らす、ページの終わりを1つに */
html body{--ink-4:var(--ink-3)}
.top::after{display:none}
.cpick:not(.open):not(:hover):not(:focus-within) .cbtn{opacity:.35;transform:scale(.78)}
.cpick:not(.open):not(:hover):not(:focus-within) .cn{max-width:0;opacity:0}
@media (max-width:879px){body:has(.dock.show) .cpick{opacity:0;pointer-events:none;bottom:calc(20px + env(safe-area-inset-bottom))}}
.cpick{transition:bottom .6s var(--ease),opacity .4s}
html body .pages{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;padding:0 16px 20px}
html body .pages a{padding:0;border:0;box-shadow:none;background:none;font-size:14px;color:var(--ink-3);text-decoration:none;min-height:0}
html body .pages a[aria-current]{color:var(--ink-2)}
html body footer{padding-top:28px;padding-bottom:28px}
html body .legal2{margin-top:72px}
.resume .dots{max-width:none;margin:2px 0 4px}
html body .pages a[aria-current]{box-shadow:none;color:var(--ink-2)}
html body .dock{padding:8px}
html body .dock .btn{flex:1;justify-content:center}

/* v16 コートの線：センターサークル（FIBA 直径3.6m）とセンターライン。ページごとの光の中に1つだけ */
.court{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;color:var(--line-3);stroke:currentColor;stroke-width:1.4;pointer-events:none}
.court line,.court circle{stroke-dasharray:1;stroke-dashoffset:1;animation:courtIn 2s var(--ease) .5s forwards}
.court line{animation-delay:.2s}
@keyframes courtIn{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.court line,.court circle{animation:none;stroke-dashoffset:0}}

/* v16 読み上げ用（見た目には出さない） */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 小さなリンクも指で押しやすく（見た目は変えず、当たり判定だけ44px） */
.legal2 a,.legal a,.top .brand{display:inline-flex;align-items:center;min-height:44px}

/* ---- 2026-11-12 キビキビ化（本人「モーショングラフィックスがもたついてる」）----
   出るまでの長さを約半分に・動く距離を短く・ぼかし（filter: blur＝スマホで重い）をやめる。止め絵（最後の形）は同じ */
.m,.m.calm,.btn.m,.lk.m{transform:translateY(14px);filter:none;transition:opacity .5s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s),box-shadow .3s}
.m.in,.m.calm.in,.btn.m.in,.lk.m.in{transform:none}
.ak{filter:none;transform:translateY(.35em)}
[data-kin="wide"] .ak{filter:none}
.in .ak,.ak.in{animation-duration:.5s;animation-delay:calc(var(--d,0s) + min(var(--i) * 20ms, .3s))}
.wipe img{transform:scale(1.06);transition:clip-path .75s var(--ease),transform 1s var(--ease)}
[data-roll] .rs{transition-duration:.9s;transition-delay:calc(var(--j) * 50ms)}
.court line,.court circle{animation-duration:1.1s;animation-delay:.15s}
.top{transition:background .25s,backdrop-filter .25s}
::view-transition-old(root){animation:vtOut .18s var(--ease) both}
::view-transition-new(root){animation:vtIn .35s var(--ease) both}
::view-transition-group(zlogo){animation-duration:.4s}
@keyframes vtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(12px)}}
.asm .word .al{will-change:transform,opacity}
html body .slide.shots img{transition-duration:.6s}
html body .video img{transition-duration:.6s}
html body .dock{transition-duration:.35s}
@media (min-width:880px){html body .hcta{transition-duration:.3s}}