/* 洋楽DNA診断（/shindan/）
   明るい「音楽の研究所」：ミントとピンクの二重らせん、ミキサー卓のような質問画面、結果はカルテ風 */
.p-sd{--k:#1c1a21;--pk:#ff2e63;--mt:#19d3a2;--sk:#3ab7ff;--yl:#ffd23f;--vi:#7c5cff}
body.sd-lock{overflow:hidden}

/* ---------- ヒーロー ---------- */
.sd-hero{position:relative;overflow:hidden;padding:clamp(30px,5vw,64px) 0 30px;background:radial-gradient(700px 380px at 82% 20%,rgba(255,46,99,.18),transparent 70%),radial-gradient(640px 420px at 6% 90%,rgba(25,211,162,.22),transparent 70%),linear-gradient(180deg,#fff5fa,#f2fffb 60%,var(--bg));border-bottom:1px solid var(--line)}
.sd-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(28,26,33,.07) 1.2px,transparent 1.6px) 0 0/22px 22px;mask-image:linear-gradient(180deg,#000,transparent 80%);pointer-events:none}
.sd-helix{position:absolute;right:max(2vw,8px);top:0;bottom:0;width:120px;display:flex;flex-direction:column;justify-content:space-around;opacity:.5;pointer-events:none}
.sd-helix i{position:relative;display:block;height:4px;margin:0 auto;width:90px;animation:sd-tw 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.23s)}
.sd-helix i::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--pk),var(--yl),var(--mt));border-radius:2px;opacity:.5}
.sd-helix b{position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--pk);box-shadow:0 0 0 3px #fff}
.sd-helix b+b{background:var(--mt);right:0}
@keyframes sd-tw{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
@media(max-width:979px){.sd-helix{opacity:.22;right:-20px}}
.sd-hero-in{position:relative;z-index:1;display:grid;gap:22px;align-items:center}
@media(min-width:980px){.sd-hero-in{grid-template-columns:1fr 420px;gap:40px}}
.sd-k{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 5px 8px;border-radius:999px;background:var(--k);color:#fff;font:400 15px/1 var(--disp);letter-spacing:.16em}
.sd-k span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;font-size:14px}
.sd-h1{margin:16px 0 14px;font-size:clamp(34px,6vw,70px);font-weight:900;line-height:1.1;letter-spacing:-.03em;color:var(--k)}
.sd-h1 em{font-style:normal;background:linear-gradient(100deg,var(--pk),#ff8a3d 45%,var(--mt));-webkit-background-clip:text;background-clip:text;color:transparent}
.sd-h1 small{display:block;margin-top:14px;font-size:clamp(13px,1.5vw,16px);font-weight:700;letter-spacing:0;line-height:1.55;color:#4d3b52}
.sd-lead{font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.95;color:#3d2f42;max-width:640px}
.sd-lead b{color:var(--k);background:linear-gradient(transparent 62%,rgba(255,210,63,.6) 62%)}
.sd-what{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:18px 0 0;max-width:640px}
@media(min-width:1180px){.sd-what{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sd-what li{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:9px 12px;border-radius:16px;background:#fff;border:2px solid var(--k);box-shadow:3px 3px 0 var(--k);font-weight:900;font-size:14px;line-height:1.25}
.sd-what b{grid-row:1/3;font-size:22px}
.sd-what small{font-size:11px;font-weight:700;color:var(--mut)}
.sd-start{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.sd-go{position:relative;display:grid;padding:16px 34px 13px;border-radius:22px;background:linear-gradient(135deg,var(--pk),#ff7a59 50%,var(--yl));color:#fff;text-align:left;line-height:1.2;border:3px solid var(--k);box-shadow:0 7px 0 var(--k);transition:transform .12s,box-shadow .12s;overflow:hidden}
.sd-go::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sd-shine 2.8s ease-in-out infinite}
@keyframes sd-shine{60%,100%{left:130%}}
.sd-go b{font-size:clamp(22px,2.8vw,28px);font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.sd-go small{font-size:12.5px;font-weight:700}
.sd-go:hover{transform:translateY(-2px);box-shadow:0 9px 0 var(--k)}
.sd-go:active{transform:translateY(5px);box-shadow:0 2px 0 var(--k)}
.sd-last{font-weight:900;font-size:14px;padding:10px 16px;border-radius:999px;background:#fff;border:2px solid var(--k)}
.sd-last:hover{background:var(--yl)}
.sd-safe{margin-top:12px;font-size:12px;color:var(--mut)}
.sd-doc{position:relative;justify-self:center;width:min(380px,80vw)}
.sd-doc img{width:100%;height:auto;filter:drop-shadow(0 18px 20px rgba(80,30,90,.22));animation:sd-fl 3.6s ease-in-out infinite}
@keyframes sd-fl{50%{transform:translateY(-10px) rotate(-2deg)}}
.sd-doc-say{position:absolute;left:-6%;top:2%;padding:10px 14px;border-radius:18px;background:#fff;border:2px solid var(--k);box-shadow:3px 3px 0 var(--k);font-size:13px;font-weight:900;line-height:1.5}
.sd-doc-say::after{content:"";position:absolute;right:24px;bottom:-11px;width:16px;height:16px;background:#fff;border-right:2px solid var(--k);border-bottom:2px solid var(--k);transform:rotate(45deg)}
@media(max-width:979px){.sd-doc{grid-row:1;justify-self:end;width:150px;margin:-8px 0 -14px}.sd-doc-say{left:auto;right:calc(100% + 4px);top:18%;width:max-content;font-size:12px}.sd-doc-say::after{right:-11px;bottom:auto;top:18px;transform:rotate(-45deg)}}

/* 友達のリンクから */
.sd-friend{position:relative;z-index:1;margin:0 0 22px}
.sd-fr{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 18px;border-radius:22px;background:linear-gradient(120deg,var(--f2),#fff);border:2px solid var(--k);box-shadow:4px 4px 0 var(--k)}
.sd-fr img{width:76px;height:auto}
.sd-fr p{flex:1 1 220px;display:grid;line-height:1.4}
.sd-fr small{font:400 13px/1 var(--disp);letter-spacing:.16em;color:var(--f1)}
.sd-fr b{font-size:18px;font-weight:900}
.sd-fr span{font-size:13px;color:var(--tx2)}

/* ---------- 質問画面（全画面） ---------- */
.sd-lab{position:fixed;inset:0;z-index:300;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(600px 400px at 100% 0,rgba(255,46,99,.14),transparent 70%),radial-gradient(600px 400px at 0 100%,rgba(25,211,162,.18),transparent 70%),#fffaf4}
.sd-lab-top{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:12px 0 10px;background:linear-gradient(#fffaf4 70%,rgba(255,250,244,0))}
.sd-prog{grid-column:1/-1;height:8px;border-radius:4px;background:rgba(28,26,33,.1);overflow:hidden}
.sd-prog i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--mt),var(--sk),var(--pk));transition:width .4s}
.sd-dots{display:flex;flex-wrap:wrap;gap:4px 10px}
.sd-dots li{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--mut)}
.sd-dots b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(28,26,33,.1);font:400 13px/1 var(--disp)}
.sd-dots li.done b{background:var(--mt);color:#fff}
.sd-dots li.on{color:var(--k)}
.sd-dots li.on b{background:var(--pk);color:#fff;box-shadow:0 0 0 3px rgba(255,46,99,.25)}
@media(max-width:560px){.sd-dots small{display:none}.sd-dots li.on small{display:inline}}
.sd-quit{width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--k);font-weight:900}
.sd-quit:hover{background:var(--yl)}
.sd-lab-in{position:relative;max-width:860px;padding-bottom:60px}
.sd-lab-rk{position:absolute;right:-10px;top:-6px;width:110px;height:auto;pointer-events:none;animation:sd-fl 3.6s ease-in-out infinite}
@media(max-width:640px){.sd-lab-rk{width:72px;right:-6px;top:-2px}}
.sd-step.in{animation:sd-in .35s ease-out}
@keyframes sd-in{from{opacity:0;transform:translateY(14px)}}
.sd-qh{margin:10px 0 18px;padding-right:110px}
@media(max-width:640px){.sd-qh{padding-right:70px}}
.sd-qn{display:flex;align-items:baseline;gap:10px}
.sd-qn b{font:400 20px/1 var(--disp);letter-spacing:.14em;color:var(--pk)}
.sd-qn small{font:400 14px/1 var(--disp);letter-spacing:.2em;color:var(--mut)}
.sd-qh h2{margin-top:6px;font-size:clamp(24px,3.6vw,34px);font-weight:900;line-height:1.3}
.sd-qs{margin-top:6px;font-size:13.5px;color:var(--tx2)}
.sd-sub{margin:18px 0 8px;font-size:14px;font-weight:900}
.sd-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.sd-opts button{position:relative;display:grid;justify-items:start;gap:2px;padding:14px 14px 12px;border-radius:18px;background:#fff;border:2px solid rgba(28,26,33,.16);text-align:left;line-height:1.35;transition:transform .15s,border-color .15s,box-shadow .15s}
.sd-opts button:hover{border-color:var(--k);transform:translateY(-2px);box-shadow:3px 3px 0 var(--k)}
.sd-opts button[aria-pressed=true]{border-color:var(--k);background:linear-gradient(135deg,#fff,#ffe6ef);box-shadow:4px 4px 0 var(--k)}
.sd-opts button[aria-pressed=true]::after{content:"✓";position:absolute;right:10px;top:8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--pk);color:#fff;font-weight:900;font-size:14px}
.sd-opts span{font-size:28px;line-height:1}
.sd-opts b{font-size:15.5px;font-weight:900}
.sd-opts small{font-size:12px;color:var(--mut)}
.sd-self{grid-template-columns:1fr}
@media(min-width:700px){.sd-self{grid-template-columns:repeat(5,1fr)}}
.sd-self i{margin-top:4px;padding:2px 8px;border-radius:6px;background:var(--k);color:var(--yl);font:400 13px/1.4 var(--disp);letter-spacing:.06em;font-style:normal}
.sd-genre{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.sd-genre button{border-width:2px;border-color:color-mix(in srgb,var(--fc) 35%,transparent)}
.sd-genre button small{font:400 15px/1 var(--disp);letter-spacing:.14em;color:var(--fc)}
.sd-genre button[aria-pressed=true]{background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--fc) 22%,#fff))}
.sd-genre button[aria-pressed=true]::after{background:var(--fc)}
.sd-chips{display:flex;flex-wrap:wrap;gap:8px}
.sd-chips button{padding:8px 15px;border-radius:999px;background:#fff;border:2px solid rgba(28,26,33,.16);font-weight:700;font-size:14px;transition:.15s}
.sd-chips button:hover{border-color:var(--k)}
.sd-chips button[aria-pressed=true]{background:var(--k);color:#fff;border-color:var(--k)}
.sd-nav{display:flex;align-items:center;gap:10px;margin-top:24px}
.sd-nav>:first-child{margin-right:auto}
.sd-back{padding:10px 6px;font-weight:700;color:var(--tx2)}
.sd-skip{padding:10px 14px;font-size:13px;font-weight:700;color:var(--mut);text-decoration:underline}
.sd-next{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;background:var(--k);color:#fff;font-weight:900;font-size:16px;box-shadow:0 5px 0 #000;transition:transform .12s,box-shadow .12s}
.sd-next:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 0 #000}
.sd-next:disabled{opacity:.35;cursor:not-allowed}
.sd-step[data-step=vibe] .sd-next{background:linear-gradient(135deg,var(--pk),#ff7a59 50%,var(--yl));color:#fff;border:3px solid var(--k);box-shadow:0 5px 0 var(--k)}

/* 年齢 */
.sd-age{display:grid;justify-items:center;gap:10px;padding:22px 18px;border-radius:26px;background:#fff;border:2px solid var(--k);box-shadow:5px 5px 0 var(--k)}
.sd-age-n{display:flex;align-items:baseline;gap:4px}
.sd-age-n b{font:400 clamp(80px,14vw,120px)/1 var(--disp);background:linear-gradient(180deg,var(--pk),#ff8a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
.sd-age-n small{font-size:22px;font-weight:900}
.sd-age.off .sd-age-n b{background:var(--mut);-webkit-background-clip:text;background-clip:text}
.sd-age input[type=range]{width:min(560px,100%);accent-color:var(--pk);height:30px}
.sd-age-p{display:flex;gap:10px}
.sd-age-p button{width:48px;height:48px;border-radius:50%;background:var(--yl);border:2px solid var(--k);font-size:22px;font-weight:900;box-shadow:0 3px 0 var(--k)}
.sd-age-p button:active{transform:translateY(3px);box-shadow:none}
.sd-age-info{min-height:4.5em;max-width:560px;text-align:center;font-size:15px;line-height:1.75}
.sd-age-info b.y{font:400 26px/1 var(--disp);color:var(--pk);letter-spacing:.04em}
.sd-age-info small{font-size:12.5px;color:var(--tx2)}
.sd-chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tx2);cursor:pointer}
.sd-chk input{width:18px;height:18px;accent-color:var(--k)}

/* ミニテスト */
.sd-tq,.sd-tend{padding:22px 20px;border-radius:26px;background:#fff;border:2px solid var(--k);box-shadow:5px 5px 0 var(--k)}
.sd-tq-n{display:flex;align-items:baseline;gap:6px}
.sd-tq-n b{font:400 30px/1 var(--disp);color:var(--pk)}
.sd-tq-n span{font:400 18px/1 var(--disp);color:var(--mut)}
.sd-tq-lv{margin-left:auto;font-style:normal;font-size:13px;color:#e39a12;letter-spacing:.06em}
.sd-tq-src{margin-top:10px;font-size:13px;color:var(--tx2)}
.sd-tq-ctx{margin-top:8px;padding:8px 12px;border-radius:12px;background:#f4efe5;font-size:15px;font-weight:700;color:var(--tx2);font-style:italic}
.sd-tq-en{margin:6px 0 0;font-size:clamp(28px,5vw,42px);font-weight:900;line-height:1.2;color:var(--k);word-break:break-word}
.sd-tq-ask{font-size:15px;font-weight:700;color:var(--tx2)}
.sd-tq-o{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:14px}
.sd-tq-o button{padding:13px 14px;border-radius:14px;background:#fffaf4;border:2px solid rgba(28,26,33,.16);font-weight:700;font-size:15px;text-align:left;transition:.15s}
.sd-tq-o button:hover:not(:disabled){border-color:var(--k);background:#fff}
.sd-tq-o button.dk{color:var(--mut);font-size:13.5px}
.sd-tq-o button.ok{background:#d9fbe9;border-color:#13a86b;color:#0b6b44}
.sd-tq-o button.ng{background:#ffe1e7;border-color:var(--pk);color:#a30f35}
.sd-tq-fb{display:grid;gap:4px;margin-top:14px;padding:14px 16px;border-radius:16px;background:#f6f3ff}
.sd-tq-fb b{font-size:18px;font-weight:900}
.sd-tq-fb b.ok{color:#0b8a57}.sd-tq-fb b.ng{color:var(--pk)}
.sd-tq-fb span{font-size:16px;font-weight:700}
.sd-tq-fb small{font-size:13px;color:var(--tx2)}
.sd-tq-go{justify-self:end;margin-top:6px;padding:10px 20px;border-radius:999px;background:var(--k);color:#fff;font-weight:900}
.sd-tq-pips{display:flex;gap:6px;margin-top:16px}
.sd-tq-pips i{flex:1;height:8px;border-radius:4px;background:rgba(28,26,33,.1)}
.sd-tq-pips i.now{background:var(--yl)}.sd-tq-pips i.ok{background:var(--mt)}.sd-tq-pips i.ng{background:var(--pk)}
.sd-tend{text-align:center}
.sd-tend-k{font:400 16px/1 var(--disp);letter-spacing:.2em;color:var(--mut)}
.sd-tend-s{margin-top:8px;font-size:18px;font-weight:900}
.sd-tend-s b{font:400 56px/1 var(--disp);color:var(--pk)}
.sd-tend-l{margin-top:6px;display:grid;font-size:16px;font-weight:700}
.sd-tend-l b{font:400 52px/1.1 var(--disp);color:var(--k)}
.sd-tend-l span{font-size:14px;color:var(--tx2)}
.sd-tend-n{margin:8px auto 0;max-width:520px;font-size:13.5px;color:var(--tx2)}
.sd-retest{margin-top:10px;font-size:13px;font-weight:700;color:var(--mut);text-decoration:underline}

/* サウンドチェック */
.sd-sc{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.sd-sc-c{display:grid;grid-template-rows:auto 1fr auto;padding:8px;border-radius:18px;background:#fff;border:2px solid rgba(28,26,33,.14);transition:.2s}
.sd-sc-c[data-r="1"]{border-color:var(--pk);box-shadow:0 0 0 3px rgba(255,46,99,.18)}
.sd-sc-c[data-r="-1"]{opacity:.62}
.sd-sc-v{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.sd-sc-v img{width:100%;height:100%;object-fit:cover}
.sd-sc-v i{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.9);color:var(--pk);font-style:normal;font-size:16px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.sd-sc-v small{position:absolute;left:8px;top:6px;font:400 18px/1 var(--disp);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.sd-sc-v iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sd-sc-t{display:grid;padding:8px 4px 6px;line-height:1.35}
.sd-sc-t b{font-size:14.5px;font-weight:900}
.sd-sc-t span{font-size:12px;color:var(--mut)}
.sd-sc-t em{justify-self:start;margin-top:4px;padding:1px 8px;border-radius:6px;background:color-mix(in srgb,var(--fc) 15%,#fff);color:var(--fc);font-style:normal;font-size:11px;font-weight:900}
.sd-sc-b{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sd-sc-b button{height:40px;border-radius:12px;background:#f4efe5;font-size:18px;font-weight:900;color:var(--tx2);transition:.15s}
.sd-sc-b button:hover{background:#ece5d6}
.sd-sc-b button[data-r="1"][aria-pressed=true]{background:var(--pk);color:#fff;transform:scale(1.06)}
.sd-sc-b button[data-r="0"][aria-pressed=true]{background:var(--k);color:#fff}
.sd-sc-b button[data-r="-1"][aria-pressed=true]{background:#6b6f80;color:#fff}

/* 気分 */
.sd-energy{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px 18px;border-radius:18px;background:#fff;border:2px solid rgba(28,26,33,.14);font-size:13px;font-weight:900}
.sd-energy input{width:100%;accent-color:var(--pk);height:30px}
@media(max-width:480px){.sd-energy{grid-template-columns:1fr 1fr}.sd-energy input{grid-column:1/-1;grid-row:1}.sd-energy span:last-child{text-align:right}}
.sd-purpose{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}

/* ---------- 解析中 ---------- */
.sd-scan{position:fixed;inset:0;z-index:320;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#3a2462,#120d1c 70%);color:#fff;text-align:center}
.sd-scan-in{display:grid;justify-items:center;gap:12px;padding:20px}
.sd-scan-helix{display:flex;flex-direction:column;gap:12px;height:220px;justify-content:center}
.sd-scan-helix i{position:relative;display:block;width:110px;height:4px;animation:sd-tw 1.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.12s)}
.sd-scan-helix i::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--pk),var(--yl),var(--mt));opacity:.6;border-radius:2px}
.sd-scan-helix b{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--pk);box-shadow:0 0 12px var(--pk)}
.sd-scan-helix b+b{right:0;background:var(--mt);box-shadow:0 0 12px var(--mt)}
.sd-scan p{font:400 22px/1 var(--disp);letter-spacing:.26em;color:var(--yl)}
.sd-scan-in>b{font-size:17px;font-weight:900;min-height:1.6em}
.sd-scan-bar{width:min(320px,70vw);height:8px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden}
.sd-scan-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--mt),var(--sk),var(--pk));animation:sd-bar 2.9s linear forwards}
@keyframes sd-bar{from{width:0}to{width:100%}}
.sd-scan-skip{margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.6);text-decoration:underline}

/* ---------- 結果 ---------- */
.sd-res{padding-bottom:10px}
.sd-rhero{position:relative;overflow:hidden;padding:clamp(28px,4vw,52px) 0;background:linear-gradient(140deg,var(--c2),#fffaf2 55%,var(--c2));border-bottom:2px solid var(--k)}
.sd-rhero::before{content:"";position:absolute;inset:0;background:radial-gradient(color-mix(in srgb,var(--c1) 30%,transparent) 1.4px,transparent 1.8px) 0 0/20px 20px;opacity:.6;pointer-events:none}
.sd-karte{position:relative;display:grid;gap:18px}
@media(min-width:960px){.sd-karte{grid-template-columns:1.25fr 1fr;align-items:stretch}}
.sd-kt,.sd-dna{padding:22px 22px 20px;border-radius:28px;background:#fff;border:3px solid var(--k);box-shadow:7px 7px 0 var(--k)}
.sd-kt-k{display:flex;align-items:center;gap:8px;font:400 18px/1 var(--disp);letter-spacing:.18em}
.sd-kt-k span{font-size:18px}
.sd-kt-k small{margin-left:auto;font:700 12px/1 var(--jp);letter-spacing:0;color:var(--mut)}
.sd-kt-m{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin-top:10px}
.sd-kt-rk{width:clamp(110px,18vw,180px);height:auto;filter:drop-shadow(0 10px 10px rgba(0,0,0,.15));animation:sd-pop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes sd-pop{from{transform:scale(.2) rotate(-20deg);opacity:0}}
.sd-kt-pre{font-size:14px;font-weight:700;color:var(--tx2)}
.sd-kt-n{font-size:clamp(28px,4.4vw,46px);font-weight:900;line-height:1.15;letter-spacing:-.02em;color:var(--k)}
.sd-kt-n small{font-size:.45em;margin-left:4px;color:var(--tx2)}
.sd-kt-en{margin-top:4px;font:400 clamp(20px,2.6vw,28px)/1 var(--disp);letter-spacing:.14em;color:var(--c1)}
.sd-kt-c{margin-top:6px;font-size:14.5px;font-weight:900}
.sd-kt-mods{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.sd-kt-mods span{padding:4px 12px;border-radius:999px;border:2px solid var(--k);font-size:13px;font-weight:900;background:color-mix(in srgb,var(--c2) 60%,#fff)}
.sd-kt-mods span.lv{background:var(--k);color:var(--yl);font-family:inherit;line-height:inherit;letter-spacing:normal}/* 共通の .lv（曲カード用：英字フォント・行の高さ1）を打ち消す。残すと隣のチップに引き伸ばされて文字が上に寄る */
.sd-kt-d{margin-top:14px;font-size:14.5px;line-height:1.9;color:var(--tx2)}
.sd-dna{display:grid;align-content:start;justify-items:center}
.sd-dna-k{justify-self:start;font:400 18px/1 var(--disp);letter-spacing:.2em;color:var(--c1)}
.sd-radar{width:min(340px,100%);height:auto;overflow:visible}
.sd-radar .rg{fill:none;stroke:rgba(28,26,33,.12);stroke-width:1.2}
.sd-radar .ax{stroke:rgba(28,26,33,.12);stroke-width:1}
.sd-radar .pl{fill:color-mix(in srgb,var(--c1) 40%,transparent);stroke:var(--c1);stroke-width:3;stroke-linejoin:round}
.sd-radar text{font:400 14px var(--disp);letter-spacing:.06em}
.sd-radar.grow .pl,.sd-radar.grow circle{transform-origin:160px 155px;animation:sd-grow 1s cubic-bezier(.2,1.3,.4,1) .2s backwards}
@keyframes sd-grow{from{transform:scale(0)}}
.sd-dna-top{width:100%;display:grid;gap:6px;margin-top:6px}
.sd-dna-top li{position:relative;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:#faf7f0;font-size:14px;font-weight:900;overflow:hidden}
.sd-dna-top li b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--fc);color:#fff;font:400 15px/1 var(--disp)}
.sd-dna-top li i{position:absolute;left:0;bottom:0;height:4px;width:var(--w);background:var(--fc)}
.sd-dna-top li small{font:400 16px/1 var(--disp);color:var(--fc)}
.sd-rsec{padding-top:clamp(30px,4vw,48px)}
.sd-sh{margin-bottom:16px}
.sd-sh p{font:400 16px/1 var(--disp);letter-spacing:.22em;color:var(--pk)}
.sd-sh h2{margin-top:4px;font-size:clamp(22px,3vw,30px);font-weight:900;line-height:1.3}
.sd-sh span{display:block;margin-top:4px;font-size:13.5px;color:var(--tx2)}
.sd-trait{display:grid;gap:14px}
@media(min-width:900px){.sd-trait{grid-template-columns:1fr 1.3fr 1fr}}
.sd-trait>div{padding:18px;border-radius:22px;background:#fff;border:2px solid var(--line)}
.sd-trait h3{font-size:15px;font-weight:900;margin-bottom:8px}
.sd-trait li{position:relative;padding-left:22px;font-size:14px;line-height:1.7;margin-bottom:4px}
.sd-trait li::before{content:"♪";position:absolute;left:2px;color:var(--pk);font-weight:900}
.sd-trait p{font-size:14px;line-height:1.85;color:var(--tx2)}
.sd-trait-m p{display:grid;gap:4px;margin-bottom:10px}
.sd-trait-m span{font-size:12px;font-weight:900;color:var(--mut)}
.sd-trait-m a{display:flex;align-items:center;gap:8px;font-weight:900;color:var(--k)}
.sd-trait-m a:hover{color:var(--pk)}
.sd-trait-m img{width:44px;height:auto}

/* テーマ曲 */
.sd-theme{display:grid;gap:18px;padding:18px;border-radius:28px;background:linear-gradient(130deg,color-mix(in srgb,var(--fc) 14%,#fff),#fff 60%);border:3px solid var(--k);box-shadow:7px 7px 0 var(--k)}
@media(min-width:860px){.sd-theme{grid-template-columns:1.1fr 1fr;align-items:center;padding:22px}}
.sd-theme-v{position:relative;display:block;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000}
.sd-theme-v img{width:100%;height:100%;object-fit:cover}
.sd-theme-v i{position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px 0 0 -35px;display:grid;place-items:center;border-radius:50%;background:var(--pk);color:#fff;font-style:normal;font-size:24px;box-shadow:0 0 0 8px rgba(255,255,255,.45);animation:sd-pulse 1.8s infinite}
@keyframes sd-pulse{50%{box-shadow:0 0 0 16px rgba(255,255,255,.15)}}
.sd-theme-v iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sd-theme-no{font:400 18px/1 var(--disp);letter-spacing:.2em;color:var(--fc)}
.sd-theme-t h3{margin-top:4px;font-size:clamp(26px,3.6vw,40px);font-weight:900;line-height:1.15}
.sd-theme-a{margin-top:6px;font-size:14px;color:var(--tx2);font-weight:700}
.sd-theme-w,.sd-card-w{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.sd-theme-w em,.sd-card-w em{padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--fc) 14%,#fff);color:color-mix(in srgb,var(--fc) 80%,#000);font-style:normal;font-size:12px;font-weight:900}
.sd-theme-ph{display:grid;margin-top:14px;padding:12px 16px;border-radius:16px;background:var(--k);color:#fff}
.sd-theme-ph small{font-size:11.5px;color:#ff9ac2;font-weight:900}
.sd-theme-ph b{font-size:20px;font-weight:900}
.sd-theme-ph span{font-size:13px;color:rgba(255,255,255,.8)}
.sd-theme-b{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* 処方箋 */
.sd-pl-act{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.sd-rx{margin-bottom:24px}
.sd-rx h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:12px;font-size:18px;font-weight:900}
.sd-rx h3 b{padding:3px 10px;border-radius:8px;background:var(--k);color:var(--yl);font:400 17px/1.2 var(--disp);letter-spacing:.06em}
.sd-rx h3 small{flex-basis:100%;font-size:13px;font-weight:700;color:var(--tx2)}
.sd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.sd-grid.one{grid-template-columns:minmax(0,340px)}
.sd-card{display:grid;align-content:start;padding:8px 8px 12px;border-radius:18px;background:#fff;border:2px solid var(--line);transition:transform .2s,box-shadow .2s,border-color .2s}
.sd-card:hover{transform:translateY(-3px);border-color:var(--k);box-shadow:4px 4px 0 var(--k)}
.sd-card-i{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#eee}
.sd-card-i img{width:100%;height:100%;object-fit:cover}
.sd-card-lv{position:absolute;right:6px;top:6px;padding:2px 7px;border-radius:6px;background:var(--k);color:var(--yl);font:400 14px/1.2 var(--disp);letter-spacing:.06em}
.sd-card-no{position:absolute;left:6px;top:4px;font:400 30px/1 var(--disp);color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);font-style:normal}
.sd-card-t{margin-top:8px;padding:0 4px;font-size:15px;font-weight:900;line-height:1.3}
.sd-card-a{padding:0 4px;font-size:12.5px;color:var(--mut)}
.sd-card-w{padding:0 4px;margin-top:6px}
.sd-rx-x .sd-card{background:linear-gradient(135deg,#fff,#fff6d6);border-color:var(--yl)}

/* 英語レベル */
.sd-lvbox{display:grid;gap:18px;padding:20px;border-radius:26px;background:#fff;border:2px solid var(--line)}
@media(min-width:860px){.sd-lvbox{grid-template-columns:1.2fr 1fr;align-items:center}}
.sd-lvm{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;align-items:end}
.sd-lvm span{display:grid;justify-items:center;align-content:end;gap:2px;padding:8px 2px;border-radius:12px;background:#f4efe5;color:var(--mut);text-align:center;line-height:1.25}
.sd-lvm span:nth-child(1){height:70px}.sd-lvm span:nth-child(2){height:95px}.sd-lvm span:nth-child(3){height:120px}.sd-lvm span:nth-child(4){height:145px}.sd-lvm span:nth-child(5){height:170px}
.sd-lvm span.on{background:linear-gradient(180deg,var(--mt),var(--sk));color:#fff}
.sd-lvm span.me{background:linear-gradient(180deg,var(--pk),#ff8a3d);box-shadow:0 0 0 3px var(--k)}
.sd-lvm b{font:400 18px/1 var(--disp)}
.sd-lvm small{font-size:10.5px;font-weight:700}
.sd-lv-big{font-size:18px;font-weight:900}
.sd-lv-big b{font:400 54px/1 var(--disp);color:var(--pk);margin-right:8px}
.sd-lvt2 p:nth-child(2){display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sd-lvt2 p:nth-child(2) span{padding:3px 10px;border-radius:999px;background:#f4efe5;font-size:12.5px;font-weight:900}
.sd-lv-n{margin:10px 0 12px;font-size:14px;color:var(--tx2)}

/* アーティスト */
.sd-arts{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.sd-arts a{position:relative;display:grid;padding:8px 8px 10px;border-radius:18px;background:#fff;border:2px solid var(--line);transition:.2s}
.sd-arts a:hover{border-color:var(--k);transform:translateY(-2px)}
.sd-arts img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.sd-arts b{position:absolute;left:14px;top:12px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--fc);color:#fff;font:400 18px/1 var(--disp);box-shadow:0 0 0 3px #fff}
.sd-arts span{margin-top:8px;font-size:14.5px;font-weight:900;line-height:1.3}
.sd-arts small{justify-self:start;margin-top:4px;padding:1px 8px;border-radius:6px;background:var(--yl);font-size:11px;font-weight:900}

/* 7日間 */
.sd-plan{display:grid;gap:8px}
.sd-plan li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;background:#fff;border:2px solid var(--line)}
.sd-plan label{display:flex;align-items:center;gap:8px;cursor:pointer}
.sd-plan input{width:22px;height:22px;accent-color:var(--mt)}
.sd-plan b{font:400 18px/1 var(--disp);letter-spacing:.08em;color:var(--pk);white-space:nowrap}
.sd-plan a{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;line-height:1.5}
.sd-plan a span{margin-left:auto;color:var(--mut)}
.sd-plan a:hover{color:var(--pk)}
.sd-plan li:has(input:checked){background:#eafff6;border-color:var(--mt)}
.sd-plan li:has(input:checked) a{text-decoration:line-through;color:var(--mut)}

/* おすすめページ */
.sd-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.sd-pages a{position:relative;display:grid;padding:14px 40px 14px 16px;border-radius:18px;background:#fff;border:2px solid var(--line);line-height:1.4;transition:.2s}
.sd-pages a:hover{border-color:var(--k);box-shadow:3px 3px 0 var(--k)}
.sd-pages b{font-size:15px;font-weight:900}
.sd-pages small{font-size:12.5px;color:var(--tx2)}
.sd-pages span{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-weight:900;color:var(--pk)}

/* 相性 */
.sd-cp{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:20px;border-radius:26px;background:linear-gradient(120deg,#fff,var(--f2));border:3px solid var(--k);box-shadow:6px 6px 0 var(--k)}
.sd-cp-p{display:grid;justify-items:center;text-align:center;line-height:1.35}
.sd-cp-p img{width:clamp(70px,14vw,110px);height:auto}
.sd-cp-p b{font-size:14px;font-weight:900}
.sd-cp-p small{font-size:12px;color:var(--tx2)}
.sd-cp-m{display:grid;justify-items:center;text-align:center}
.sd-cp-m b{font:400 clamp(60px,10vw,96px)/1 var(--disp);color:var(--pk)}
.sd-cp-m b small{font-size:.4em}
.sd-cp-m span{font-size:14px;font-weight:900}
.sd-cp-n{margin-top:12px;font-size:14px;color:var(--tx2)}

/* シェア */
.sd-sh-b,.sd-again{display:flex;flex-wrap:wrap;gap:8px}
.sd-again{margin-top:14px}

/* ---------- タイプ図鑑など（いつも見える部分） ---------- */
.sd-sec{padding-top:clamp(40px,5vw,64px)}
.sd-zks{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.sd-zk{position:relative;display:grid;align-content:start;gap:10px;padding:18px;border-radius:24px;background:#fff;border:2px solid var(--line);scroll-margin-top:90px;overflow:hidden}
.sd-zk::before{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;border-radius:50%;background:var(--c2);opacity:.6}
.sd-zk:target{border-color:var(--k);box-shadow:5px 5px 0 var(--k)}
.sd-zk-h{position:relative;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.sd-zk-h img{width:84px;height:auto}
.sd-zk-h p{display:grid;line-height:1.3}
.sd-zk-h small{font:400 14px/1.2 var(--disp);letter-spacing:.14em;color:var(--c1)}
.sd-zk-h b{font-size:19px;font-weight:900}
.sd-zk-h em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--tx2)}
.sd-zk-d{position:relative;font-size:13.5px;line-height:1.85;color:var(--tx2)}
.sd-zk-t{display:flex;flex-wrap:wrap;gap:5px}
.sd-zk-t li{padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--c2) 55%,#fff);font-size:11.5px;font-weight:700}
.sd-zk-s{display:grid;gap:4px;font-size:13px}
.sd-zk-s small{font-size:11px;font-weight:900;color:var(--mut)}
.sd-zk-s a{font-weight:900;line-height:1.35}
.sd-zk-s a:hover{color:var(--c1)}
.sd-zk-s i{margin-left:6px;font-style:normal;font-weight:400;font-size:12px;color:var(--mut)}
.sd-zk-m{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--mut)}
.sd-zk-m a{font-weight:900;color:var(--k);text-decoration:underline}
.sd-lvt{display:grid;gap:10px}
.sd-lv{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;padding:14px 18px;border-radius:18px;background:#fff;border:2px solid var(--line);transition:.2s}
.sd-lv:hover{border-color:var(--k)}
.sd-lv>b{grid-row:1/3;font:400 36px/1 var(--disp);letter-spacing:.04em;color:var(--pk)}
.sd-lv span{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.sd-lv strong{font-size:16px;font-weight:900}
.sd-lv small{font-size:12.5px;font-weight:700;color:var(--tx2)}
.sd-lv p{font-size:13.5px;color:var(--tx2)}
.sd-lv2>b{color:#ff7a3d}.sd-lv3>b{color:#e3a000}.sd-lv4>b{color:var(--mt)}.sd-lv5>b{color:var(--vi)}
.sd-how{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.sd-how>div{padding:18px;border-radius:22px;background:#fff;border:2px solid var(--line)}
.sd-how b{font:400 34px/1 var(--disp);color:var(--mt)}
.sd-how h3{margin:4px 0 6px;font-size:16px;font-weight:900}
.sd-how p{font-size:13.5px;color:var(--tx2);line-height:1.8}
.sd-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sd-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));z-index:400;transform:translate(-50%,20px);padding:10px 18px;border-radius:999px;background:var(--k);color:#fff;font-size:14px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;max-width:calc(100% - 32px)}
.sd-toast.on{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.sd-helix i,.sd-doc img,.sd-go::after,.sd-lab-rk,.sd-theme-v i{animation:none}}