/* 誕生日No.1タイムマシン（/birthday/ と /birthday/<年>/）
   明るい夕焼けの空＋レトロなタイムマシンの操作盤。結果は年代ごとに柄が変わるレコードジャケット */
.p-bd{--bk:#1c1a21;--bp:#ff2e63;--bo:#ff8a3d;--bs:#ffd23f;--bl:#7c5cff;--bc:#19c3e6}
.p-bd .bc{display:none}
.p-bdy .bc{display:block}
body.bd-lock{overflow:hidden}

/* ---------- 年代の色（--e1 主役 / --e2 さし色 / --e3 文字 / --eb 地 / --ep 柄） ---------- */
.bd-e40s{--e1:#b5562b;--e2:#d9a441;--e3:#2b2118;--eb:#f7ecd6;--ep:repeating-linear-gradient(90deg,rgba(181,86,43,.12) 0 2px,transparent 2px 14px)}
.bd-e50s{--e1:#ff4f6d;--e2:#38c6b0;--e3:#24161c;--eb:#fff3e8;--ep:repeating-conic-gradient(rgba(255,79,109,.12) 0 25%,transparent 0 50%) 0 0/34px 34px}
.bd-e60s{--e1:#e0218a;--e2:#ff9a00;--e3:#2a0e2b;--eb:#fff4e0;--ep:radial-gradient(circle at 20% 30%,rgba(255,154,0,.25) 0 14px,transparent 15px),radial-gradient(circle at 70% 70%,rgba(224,33,138,.2) 0 22px,transparent 23px) 0 0/90px 90px}
.bd-e70s{--e1:#d9480f;--e2:#f59f00;--e3:#3b1d0b;--eb:#fff1dc;--ep:repeating-linear-gradient(180deg,rgba(217,72,15,.18) 0 10px,rgba(245,159,0,.18) 10px 20px,rgba(124,45,18,.14) 20px 30px,transparent 30px 60px)}
.bd-e80s{--e1:#ff2fa0;--e2:#00b8f5;--e3:#1d1036;--eb:#fdf0ff;--ep:linear-gradient(115deg,transparent 46%,rgba(0,184,245,.22) 46% 54%,transparent 54%) 0 0/60px 60px,linear-gradient(65deg,transparent 46%,rgba(255,47,160,.18) 46% 54%,transparent 54%) 0 0/60px 60px}
.bd-e90s{--e1:#7c3aed;--e2:#14b8a6;--e3:#1e1530;--eb:#f3f0ff;--ep:radial-gradient(rgba(20,184,166,.28) 2px,transparent 2.5px) 0 0/16px 16px}
.bd-e00s{--e1:#3b82f6;--e2:#ff6fcf;--e3:#141b33;--eb:#eef6ff;--ep:linear-gradient(135deg,rgba(255,255,255,.7),rgba(170,200,255,.25) 40%,rgba(255,111,207,.18) 70%,rgba(255,255,255,.7))}
.bd-e10s{--e1:#ef6f6c;--e2:#3fc1a5;--e3:#22313f;--eb:#f2fbf7;--ep:radial-gradient(circle at 0 0,rgba(63,193,165,.2) 0 30px,transparent 31px) 0 0/60px 60px}
.bd-e20s{--e1:#ff3d6e;--e2:#3d5afe;--e3:#140f24;--eb:#f6f3ff;--ep:conic-gradient(from 210deg at 50% 50%,rgba(255,61,110,.18),rgba(61,90,254,.18),rgba(255,184,0,.18),rgba(255,61,110,.18))}

/* ---------- ヒーロー ---------- */
.bd-hero{position:relative;overflow:hidden;padding:clamp(30px,5vw,64px) 0 26px;background:linear-gradient(180deg,#ffd9a8 0%,#ffb3c4 38%,#d9c6ff 72%,#fbf8f2 100%);border-bottom:1px solid var(--line)}
.bd-hero::before{content:"";position:absolute;left:50%;bottom:-38vw;width:120vw;height:60vw;transform:translateX(-50%);border-radius:50%;background:repeating-radial-gradient(circle at 50% 100%,rgba(255,255,255,.0) 0 26px,rgba(255,255,255,.35) 26px 30px);pointer-events:none}
.bd-sky i{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff;animation:bd-tw 3s ease-in-out infinite}
.bd-sky i:nth-child(1){left:8%;top:18%}.bd-sky i:nth-child(2){left:26%;top:8%;animation-delay:.6s}.bd-sky i:nth-child(3){left:47%;top:22%;animation-delay:1.2s}.bd-sky i:nth-child(4){left:63%;top:6%;animation-delay:1.8s}.bd-sky i:nth-child(5){left:84%;top:16%;animation-delay:.3s}.bd-sky i:nth-child(6){left:93%;top:40%;animation-delay:2.2s}
@keyframes bd-tw{50%{opacity:.2;transform:scale(.5)}}
.bd-hero-in{position:relative;display:grid;gap:26px;align-items:center}
@media(min-width:980px){.bd-hero-in{grid-template-columns:1fr 470px;gap:40px}}
.bd-k{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 5px 8px;border-radius:999px;background:var(--bk);color:#fff;font:400 15px/1 var(--disp);letter-spacing:.16em}
.bd-k span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;font-size:14px}
.bd-h1{margin:16px 0 14px;font-size:clamp(32px,5.6vw,64px);font-weight:900;line-height:1.12;letter-spacing:-.03em;color:var(--bk)}
.bd-h1 em{font-style:normal;background:linear-gradient(100deg,var(--bp),var(--bo) 60%,var(--bs));-webkit-background-clip:text;background-clip:text;color:transparent}
.bd-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}
.bd-lead{font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.95;color:#3d2f42}
.bd-lead b{color:var(--bk);background:linear-gradient(transparent 60%,rgba(255,255,255,.85) 60%)}

/* タイムマシンの操作盤 */
.bd-tm{position:relative;padding:22px 20px 18px;border-radius:28px;background:linear-gradient(170deg,#2a2440,#1c1a21);color:#fff;border:3px solid var(--bk);box-shadow:0 10px 0 #0d0b12,0 30px 60px rgba(60,20,80,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.bd-pilot{position:absolute;right:-18px;top:-74px;width:150px;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.3));animation:bd-fly 3.4s ease-in-out infinite;pointer-events:none}
@keyframes bd-fly{50%{transform:translateY(-10px) rotate(4deg)}}
.bd-tm-k{display:flex;align-items:center;gap:10px;font:400 22px/1 var(--disp);letter-spacing:.2em;color:var(--bs)}
.bd-tm-k small{font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.2em}
.bd-led{width:12px;height:12px;border-radius:50%;background:#3dff8a;box-shadow:0 0 10px #3dff8a;animation:dl-blink 1.4s infinite}
@keyframes dl-blink{50%{opacity:.35}}
.bd-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 4px}
.bd-mode label{cursor:pointer}
.bd-mode input{position:absolute;opacity:0;pointer-events:none}
.bd-mode span{display:block;height:100%;padding:9px 12px;border-radius:14px;border:2px solid rgba(255,255,255,.18);line-height:1.3;transition:.2s}
.bd-mode b{display:block;font-size:14.5px}
.bd-mode small{font-size:11px;color:rgba(255,255,255,.6)}
.bd-mode input:checked+span{background:linear-gradient(135deg,var(--bp),var(--bo));border-color:transparent;box-shadow:0 4px 0 #8c1235}
.bd-mode input:checked+span small{color:#fff}
.bd-mode input:focus-visible+span{outline:2px solid var(--bs);outline-offset:2px}
.bd-dial{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:8px;margin-top:12px}
.bd-dial label{position:relative;display:block;padding:8px 8px 6px;border-radius:14px;background:#0f0d16;box-shadow:inset 0 2px 8px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.08)}
.bd-dial small{display:block;font:400 11px/1 var(--disp);letter-spacing:.2em;color:#ff9b6b}
.bd-dial select{width:100%;margin-top:2px;padding:0 18px 0 2px;border:0;background:transparent;color:#ffd23f;font:400 clamp(30px,4vw,40px)/1.15 var(--disp);letter-spacing:.06em;appearance:none;-webkit-appearance:none;cursor:pointer;text-shadow:0 0 12px rgba(255,210,63,.55)}
.bd-dial select option{background:#1c1a21;color:#fff;font-size:16px}
.bd-dial i{position:absolute;right:8px;bottom:9px;font-style:normal;font-size:12px;color:rgba(255,255,255,.55)}
.bd-name{display:block;margin-top:10px}
.bd-name small{display:block;font-size:11px;color:rgba(255,255,255,.6);margin-bottom:4px}
.bd-name input{width:100%;height:44px;padding:0 14px;border-radius:12px;border:2px solid rgba(255,255,255,.18);background:#0f0d16;color:#fff;font:700 15px var(--jp)}
.bd-name input:focus{outline:0;border-color:var(--bs)}
.bd-go{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;width:100%;margin-top:14px;padding:14px 18px;border-radius:18px;background:linear-gradient(135deg,var(--bs),var(--bo) 55%,var(--bp));color:var(--bk);text-align:left;box-shadow:0 6px 0 #9a2c14;transition:transform .12s,box-shadow .12s}
.bd-go:hover{transform:translateY(-2px);box-shadow:0 8px 0 #9a2c14}
.bd-go:active{transform:translateY(4px);box-shadow:0 2px 0 #9a2c14}
.bd-go b{font-size:clamp(20px,2.6vw,26px);font-weight:900;line-height:1.2}
.bd-go small{grid-column:2;font-size:12px;font-weight:700}
.bd-lever{grid-row:1/3;position:relative;width:34px;height:52px;border-radius:10px;background:var(--bk)}
.bd-lever i{position:absolute;left:50%;top:6px;width:6px;height:30px;margin-left:-3px;border-radius:3px;background:#ddd;transform-origin:50% 100%;transform:rotate(-25deg);transition:transform .3s}
.bd-lever i::after{content:"";position:absolute;left:-6px;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--bp);box-shadow:inset -3px -3px rgba(0,0,0,.25)}
.bd-go:hover .bd-lever i{transform:rotate(25deg)}
.bd-safe{margin-top:10px;font-size:11.5px;color:rgba(255,255,255,.6);text-align:center}
.bd-quick{position:relative;margin-top:22px}
.bd-quick>p{font-size:12.5px;font-weight:900;color:#4d3b52;margin-bottom:8px}
.bd-quick>div{display:flex;flex-wrap:wrap;gap:6px}
.bd-quick button{display:grid;padding:6px 12px 5px;border-radius:12px;background:rgba(255,255,255,.75);border:1.5px solid rgba(28,26,33,.12);text-align:left;line-height:1.25;transition:.2s}
.bd-quick button:hover{background:#fff;border-color:var(--bk);transform:translateY(-2px)}
.bd-quick b{font-size:12.5px}
.bd-quick small{font:400 11px/1 var(--disp);letter-spacing:.1em;color:var(--bp)}
@media(max-width:979px){.bd-pilot{width:110px;top:-64px;right:-6px}.bd-tm{margin-top:40px}}

/* タイムスリップの演出 */
.bd-warp{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:radial-gradient(circle,#2a1a4a 0,#0b0716 70%);overflow:hidden}
.bd-warp::before,.bd-warp::after{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,rgba(255,210,63,.0) 0 4deg,rgba(255,210,63,.35) 4deg 5deg,rgba(255,46,99,0) 5deg 11deg,rgba(25,195,230,.35) 11deg 12deg);animation:bd-warpspin 2.2s linear infinite;mask:radial-gradient(circle,transparent 8%,#000 40%);-webkit-mask:radial-gradient(circle,transparent 8%,#000 40%)}
.bd-warp::after{animation-direction:reverse;animation-duration:3s;opacity:.6}
@keyframes bd-warpspin{to{transform:rotate(360deg) scale(1.3)}}
.bd-warp.out{animation:bd-flash .35s ease forwards}
@keyframes bd-flash{0%{filter:brightness(1)}50%{filter:brightness(4)}100%{opacity:0}}
.bd-warp-in{position:relative;z-index:1;text-align:center;color:#fff}
.bd-warp-in p{font:400 18px/1 var(--disp);letter-spacing:.4em;color:var(--bc)}
.bd-warp-in b{display:block;font:400 clamp(90px,22vw,200px)/1 var(--disp);letter-spacing:.04em;color:var(--bs);text-shadow:0 0 30px rgba(255,210,63,.8),0 0 80px rgba(255,46,99,.6);font-variant-numeric:tabular-nums}
.bd-warp-in small{display:block;font-size:15px;font-weight:700;margin-top:6px}
.bd-warp-skip{margin-top:20px;padding:6px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);color:#fff;font-size:12px}

/* ---------- 結果 ---------- */
.bd-res{position:relative;padding:clamp(34px,5vw,64px) 0;background:var(--ep),var(--eb);border-bottom:3px solid var(--e3);scroll-margin-top:64px}
.bd-rh{text-align:center}
.bd-rh-k{display:inline-block;padding:5px 14px 4px;border-radius:999px;background:var(--e3);color:var(--eb);font:400 15px/1 var(--disp);letter-spacing:.24em}
.bd-rh h2{margin:12px 0 6px;font-size:clamp(28px,4.6vw,52px);font-weight:900;line-height:1.15;letter-spacing:-.02em;color:var(--e3)}
.bd-rh-d{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 12px;font-weight:700;color:var(--e3)}
.bd-rh-d b{font:400 26px/1 var(--disp);color:var(--e1)}
.bd-era{padding:3px 10px;border-radius:6px;background:var(--e2);color:#fff;font-size:12.5px}
.bd-warn{margin:14px auto 0;max-width:640px;padding:8px 14px;border-radius:10px;background:#fff;font-size:13px;text-align:center}
.bd-stage{display:grid;gap:28px;margin-top:30px;align-items:center}
@media(min-width:960px){.bd-stage{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px}}

/* レコードとジャケット */
.bd-rec{position:relative;width:min(100%,520px);margin:0 auto;aspect-ratio:1;perspective:1600px}
.bd-vinyl{position:absolute;top:13%;left:3%;width:74%;height:74%;border-radius:50%;background:repeating-radial-gradient(circle,#151418 0 2px,#232128 2px 4px);box-shadow:0 18px 40px rgba(0,0,0,.35);display:grid;place-items:center;animation:bd-slide 1.2s .4s cubic-bezier(.3,1.4,.5,1) both,bd-spin 6s 1.6s linear infinite}
.bd-vinyl::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 20deg,rgba(255,255,255,.14) 30deg,transparent 45deg 200deg,rgba(255,255,255,.1) 215deg,transparent 230deg)}
@keyframes bd-slide{from{transform:translateX(0)}to{transform:translateX(31%)}}
@keyframes bd-spin{from{transform:translateX(31%) rotate(0)}to{transform:translateX(31%) rotate(360deg)}}
.bd-vl{position:relative;z-index:1;width:36%;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--e1),var(--e2));display:grid;place-content:center;text-align:center;color:#fff;padding:10%;box-shadow:0 0 0 4px rgba(0,0,0,.25)}
.bd-vl span{font:400 clamp(11px,1.6vw,15px)/1.1 var(--disp);letter-spacing:.04em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bd-vl small{font:400 12px/1 var(--disp);opacity:.8;margin-top:4px}
.bd-sleeve{position:absolute;z-index:2;left:0;top:11%;width:78%;height:78%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,1.4,.5,1)}
.bd-rec[data-side=b] .bd-sleeve{transform:rotateY(180deg)}
.bd-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,3vw,28px);border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 22px 50px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.3)}
.bd-face.a{background:radial-gradient(circle at 75% 25%,rgba(255,255,255,.55),transparent 40%),var(--ep),linear-gradient(150deg,var(--e2),var(--e1));color:#fff}
.bd-face.b{transform:rotateY(180deg);background:radial-gradient(circle at 25% 25%,rgba(255,255,255,.18),transparent 40%),var(--ep),linear-gradient(150deg,var(--e3),#000);color:#fff}
.bd-face::before{content:"";position:absolute;left:-30%;top:-40%;width:110%;height:110%;border-radius:50%;border:clamp(18px,3vw,30px) solid rgba(255,255,255,.14);pointer-events:none}
.bd-sd-k{position:absolute;left:clamp(16px,3vw,28px);top:clamp(16px,3vw,24px);display:flex;flex-direction:column;gap:2px}
.bd-sd-k b{font:400 clamp(28px,4.4vw,44px)/1 var(--disp);letter-spacing:.06em;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.bd-sd-k span{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.28);width:max-content}
.bd-sd-t{position:relative;font:400 clamp(30px,5.4vw,58px)/.98 var(--disp);letter-spacing:.01em;text-shadow:0 4px 0 rgba(0,0,0,.18);word-break:break-word}
.bd-sd-a{position:relative;margin-top:6px;font-weight:900;font-size:clamp(14px,1.8vw,18px);line-height:1.3}
.bd-sd-j{position:relative;margin-top:8px;display:inline-block;width:max-content;max-width:100%;padding:4px 10px;border-radius:8px;background:#fff;color:var(--e3);font-weight:900;font-size:clamp(13px,1.6vw,16px);line-height:1.4}
.bd-sd-m{position:relative;display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:10px}
.bd-sd-m span{padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.3);font-size:11.5px;font-weight:700}
.bd-sd-w{position:relative;margin-top:6px;font-size:12px}
.bd-stk{position:absolute;right:clamp(14px,3vw,22px);top:clamp(14px,3vw,22px);width:clamp(68px,10vw,92px);aspect-ratio:1;border-radius:50%;display:grid;place-content:center;text-align:center;background:var(--bs);color:var(--bk);font:400 clamp(24px,3.4vw,32px)/1 var(--disp);transform:rotate(12deg);box-shadow:0 4px 0 rgba(0,0,0,.2)}
.bd-face.b .bd-stk{background:#fff}
.bd-stk small{font-size:clamp(9px,1.2vw,11px);letter-spacing:.1em}

.bd-side{display:grid;gap:14px}
.bd-flipbtns{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:16px;background:rgba(255,255,255,.7)}
.bd-flipbtns button{padding:10px;border-radius:12px;font-weight:900;font-size:16px;line-height:1.2}
.bd-flipbtns small{display:block;font-size:11px;font-weight:700;color:var(--mut)}
.bd-flipbtns [aria-selected=true]{background:var(--e3);color:#fff;box-shadow:0 3px 0 var(--e1)}
.bd-flipbtns [aria-selected=true] small{color:var(--e2)}
.bd-pane{display:grid;gap:10px}
.bd-pt{padding:12px 14px;border-radius:14px;background:#fff;font-size:14px;line-height:1.75;box-shadow:0 4px 0 rgba(0,0,0,.06)}
.bd-pt b{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:6px;background:var(--e1);color:#fff;font-size:12px}
.bd-acts,.bd-mine,.bd-again,.bd-14a,.bd-more{display:flex;flex-wrap:wrap;gap:8px}
.bd-player{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.bd-player iframe{width:100%;height:100%;border:0}
.bd-mine{padding-top:12px;border-top:2px dashed rgba(0,0,0,.12)}
.bd-both{padding:10px 14px;border-radius:12px;background:var(--bs);font-weight:900;font-size:14px}
.bd-facts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:30px}
.bd-facts div{padding:14px 16px;border-radius:16px;background:#fff;box-shadow:0 5px 0 rgba(0,0,0,.07)}
.bd-facts b{display:block;font:400 42px/1 var(--disp);color:var(--e1)}
.bd-facts b small{font-family:var(--jp);font-size:14px;font-weight:900;margin-left:2px}
.bd-facts span{font-size:12.5px;line-height:1.6;color:var(--tx2)}

/* 見出し（共通） */
.bd-sh{margin-bottom:16px}
.bd-sh p{font:400 15px/1 var(--disp);letter-spacing:.22em;color:var(--bp)}
.bd-res .bd-sh p{color:var(--e1)}
.bd-sh h2{margin:6px 0 4px;font-size:clamp(21px,2.8vw,30px);font-weight:900;line-height:1.35}
.bd-sh span{font-size:13px;color:var(--mut)}

/* 14歳の洋楽 */
.bd-14{margin-top:34px;padding:clamp(18px,3vw,30px);border-radius:24px;background:linear-gradient(160deg,#1c1a21,#2d1f47);color:#fff;position:relative;overflow:hidden}
.bd-14::before{content:"14";position:absolute;right:-10px;top:-40px;font:400 220px/1 var(--disp);color:rgba(255,255,255,.05);pointer-events:none}
.bd-14.main{margin-top:26px;box-shadow:0 0 0 4px var(--bs)}
.bd-14.soon{background:#fff;color:var(--tx)}
.bd-14h{position:relative}
.bd-14k{font:400 16px/1 var(--disp);letter-spacing:.22em;color:var(--bs)}
.bd-14h h2{margin:8px 0 8px;font-size:clamp(24px,3.6vw,40px);font-weight:900;line-height:1.2}
.bd-14h h2 em{font-style:normal;margin-left:.2em;font:400 1.3em/1 var(--disp);color:var(--bs);letter-spacing:.04em}
.bd-14h>p{font-size:14px;line-height:1.8;color:rgba(255,255,255,.82);max-width:760px}
.bd-14h b{color:var(--bs)}
.bd-14bday{position:relative;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:16px}
.bd-14c{padding:14px 16px;border-radius:16px;background:linear-gradient(140deg,var(--bp),var(--bo));line-height:1.35}
.bd-14c.uk{background:linear-gradient(140deg,var(--bl),var(--bc))}
.bd-14c small{display:block;font-size:11.5px;font-weight:700;opacity:.9}
.bd-14c b{display:block;margin:4px 0 2px;font:400 clamp(26px,3.4vw,36px)/1 var(--disp);letter-spacing:.02em}
.bd-14c span{font-weight:700;font-size:14px}
.bd-14c em{display:block;font-style:normal;font-weight:900;margin-top:6px;font-size:13.5px}
.bd-14c p{font-size:12.5px;margin-top:6px;padding:6px 10px;border-radius:8px;background:rgba(0,0,0,.2)}
.bd-14tops{position:relative;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:16px}
.bd-14 .bd-ytop{background:rgba(255,255,255,.07);color:#fff}
.bd-14 .bd-ytop li small{color:rgba(255,255,255,.65)}
.bd-14 .bd-ytop a{color:#fff}
.bd-14l{position:relative;margin:20px 0 10px;font-size:17px;font-weight:900}
.bd-14g{position:relative;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.bd-14p{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:10px;border-radius:14px;background:#fff;color:var(--tx);line-height:1.35}
.bd-14i img{width:96px;height:54px;object-fit:cover;border-radius:8px}
.bd-14t{display:block;font-weight:900;font-size:14px}
.bd-14p small{font-size:11.5px;color:var(--mut)}
.bd-14ph{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin-top:6px;font-size:12.5px}
.bd-14ph b{color:var(--bp);font-size:14px}
.bd-14ph span{flex:1 1 100%;color:var(--tx2)}
.bd-14ph .say{width:26px;height:26px;border-radius:50%;background:var(--bk);color:#fff;font-size:11px}
.bd-14a{position:relative;margin-top:18px}
.bd-14 .btn:not(.gold){background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}

/* 人生のサウンドトラック */
.bd-life,.bd-eng{margin-top:40px}
.bd-ltabs{display:flex;gap:6px;margin-bottom:10px}
.bd-ltabs button{padding:8px 16px;border-radius:999px;background:#fff;font-weight:900;font-size:14px;border:2px solid transparent}
.bd-ltabs [aria-selected=true]{background:var(--e3);color:#fff}
.bd-life-l{display:grid;gap:4px;max-height:560px;overflow-y:auto;padding:6px;border-radius:18px;background:rgba(255,255,255,.65)}
.bd-life-l li{display:grid;grid-template-columns:52px 64px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 12px;border-radius:12px;background:#fff}
.bd-life-l li.ms{background:linear-gradient(90deg,#fff,#fff7d6)}
.bd-life-l li.now{box-shadow:0 0 0 3px var(--e1)}
.bd-la{display:flex;align-items:baseline;gap:1px}
.bd-la b{font:400 30px/1 var(--disp);color:var(--e1)}
.bd-la small{font-size:11px;font-weight:700}
.bd-ly{font:400 18px/1.1 var(--disp);color:var(--mut)}
.bd-ly em{display:block;font:900 10.5px/1.3 var(--jp);font-style:normal;color:var(--e3);margin-top:2px}
.bd-ls{min-width:0;line-height:1.3}
.bd-ls b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-ls b a{text-decoration:underline;text-decoration-color:var(--e2);text-underline-offset:3px}
.bd-ls small{display:block;font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-learn{font-style:normal;font-size:11px;font-weight:900;padding:2px 8px;border-radius:999px;background:var(--e2);color:#fff}
@media(max-width:560px){.bd-life-l li{grid-template-columns:44px minmax(0,1fr) auto}.bd-ly{grid-column:2;grid-row:1;font-size:14px}.bd-ly em{display:inline;margin-left:6px}.bd-ls{grid-column:1/-1}.bd-la b{font-size:24px}}
.bd-onsite{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:12px;padding:12px 16px;border-radius:14px;background:#fff;font-size:14px}
.bd-eng-g{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.bd-eng-g div{position:relative;padding:14px 16px 14px;border-radius:14px;background:#fff;line-height:1.5}
.bd-eng-g div::before{content:"";position:absolute;left:16px;top:-7px;width:54px;height:14px;background:var(--e2);opacity:.7;transform:rotate(-3deg)}
.bd-eng-g b{display:block;font-size:15px}
.bd-eng-g small{font-size:11.5px;color:var(--mut)}
.bd-eng-g p{margin-top:6px;font-size:13.5px}
.bd-again{justify-content:center;margin-top:34px}

/* 棚 */
.bd-shelf{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));padding:16px;border-radius:18px;background:linear-gradient(180deg,#f3e6d0,#e7d3b2);box-shadow:inset 0 -10px 0 #c9a97a}
.bd-sl{position:relative}
.bd-sl-b{display:grid;width:100%;aspect-ratio:1;padding:12px;border-radius:8px;background:var(--ep),linear-gradient(150deg,var(--e2),var(--e1));color:#fff;text-align:left;align-content:end;overflow:hidden;position:relative;box-shadow:0 6px 12px rgba(0,0,0,.2);transition:transform .2s}
.bd-sl-b:hover{transform:translateY(-4px) rotate(-1deg)}
.bd-sl-v{position:absolute;right:-30%;top:-30%;width:80%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#151418 0 2px,#232128 2px 4px)}
.bd-sl-b b{position:relative;font-size:15px;font-weight:900}
.bd-sl-b small{position:relative;font:400 14px/1 var(--disp);letter-spacing:.06em}
.bd-sl-b em{position:relative;font-style:normal;font-size:11.5px;font-weight:700;margin-top:4px;line-height:1.3}
.bd-sl-x{position:absolute;right:-6px;top:-6px;width:26px;height:26px;border-radius:50%;background:var(--bk);color:#fff;font-size:15px;line-height:1}

/* 下のセクション */
.bd-sec{margin-top:clamp(40px,6vw,72px)}
.bd-how{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.bd-how div{position:relative;padding:20px 18px 18px;border-radius:18px;background:#fff;border:2px solid var(--line)}
.bd-hn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-bottom:8px;background:repeating-radial-gradient(circle,#151418 0 2px,#2a2830 2px 4px);color:var(--bs);font:400 22px/1 var(--disp);box-shadow:0 0 0 3px var(--bs)}
.bd-how h3{font-size:17px;font-weight:900;margin-bottom:4px}
.bd-how p{font-size:14px;line-height:1.8;color:var(--tx2)}
.bd-nyt-g{display:grid;gap:24px;align-items:start}
@media(min-width:960px){.bd-nyt-g{grid-template-columns:1.25fr 1fr}}
.bd-nyt-t>p{font-size:15px;line-height:1.95;color:var(--tx2)}
.bd-nyt-t>p b{color:var(--tx)}
.bd-nyt-l{display:grid;gap:8px;margin:16px 0}
.bd-nyt-l li{position:relative;padding:12px 14px 12px 44px;border-radius:14px;background:#fff;font-size:14.5px;line-height:1.75;border:2px solid var(--line)}
.bd-nyt-l li::before{content:"♪";position:absolute;left:14px;top:12px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--bk);color:var(--bs);font-size:12px}
.bd-nyt-l em{font-style:normal;font-weight:900;color:var(--bp);background:linear-gradient(transparent 62%,rgba(255,210,63,.55) 62%)}
.bd-nyt-n{font-size:12.5px!important;color:var(--mut)!important}
.bd-nyt-src{margin-top:8px;font-size:12.5px!important}
.bd-nyt-src a{text-decoration:underline;color:var(--bl)}
.bd-age{margin:0;padding:22px 18px 18px;border-radius:22px;background:linear-gradient(160deg,#1c1a21,#2d1f47);color:#fff}
.bd-age figcaption{font-weight:900;font-size:15px;margin-bottom:14px}
.bd-age-r{display:grid;grid-template-columns:repeat(14,1fr);gap:2px}
.bd-age-r span{display:grid;place-items:center;height:42px;border-radius:6px;background:rgba(255,255,255,.08);font:400 18px/1 var(--disp)}
.bd-age-r span.pk{background:var(--bs);color:var(--bk);transform:scale(1.12);box-shadow:0 0 14px rgba(255,210,63,.6)}
.bd-age-band{position:relative;display:grid;grid-template-columns:repeat(14,1fr);margin-top:8px}
.bd-age-band span{grid-column:var(--a)/var(--b);padding:5px 8px;border-radius:999px;font-size:11.5px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-age-band.f span{background:var(--bp)}
.bd-age-band.m span{background:var(--bc);color:var(--bk)}
.bd-age-band.h span{background:rgba(255,255,255,.18);font-weight:700}
.bd-age-pk{margin-top:12px;font-size:12.5px}
.bd-age-pk .f{color:var(--bp)}.bd-age-pk .m{color:var(--bc)}
.bd-nyt-go{margin-top:18px;text-align:center}
.bd-years{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.bd-yr{padding:14px;border-radius:16px;background:var(--ep),var(--eb);border:2px solid rgba(0,0,0,.06)}
.bd-yr p{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.bd-yr p b{font:400 26px/1 var(--disp);color:var(--e1);letter-spacing:.04em}
.bd-yr p small{font-size:12px;font-weight:700;color:var(--e3)}
.bd-yr div{display:flex;flex-wrap:wrap;gap:5px}
.bd-yr a{padding:4px 9px;border-radius:8px;background:#fff;font:400 16px/1.1 var(--disp);letter-spacing:.04em;color:var(--e3);transition:.15s}
.bd-yr a:hover{background:var(--e1);color:#fff}
.bd-more{margin-top:20px}
.bd-toast{position:fixed;left:50%;bottom:90px;z-index:300;transform:translate(-50%,30px);opacity:0;padding:12px 20px;border-radius:999px;background:var(--bk);color:#fff;font-weight:700;font-size:14px;pointer-events:none;transition:.3s;max-width:calc(100% - 32px);text-align:center}
.bd-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 年のページ ---------- */
.bd-yhero{padding:clamp(28px,4vw,52px) 0;background:var(--ep),var(--eb);border-bottom:3px solid var(--e3)}
.bd-yh1{margin:14px 0 10px;font-size:clamp(28px,4.6vw,52px);font-weight:900;line-height:1.15;color:var(--e3)}
.bd-yh1 em{font:400 1.5em/1 var(--disp);font-style:normal;color:var(--e1);letter-spacing:.02em;margin-right:.08em}
.bd-yh1 small{display:block;margin-top:10px;font-size:clamp(13px,1.6vw,17px);font-weight:700;color:var(--tx2)}
.bd-ylead{font-size:15px;line-height:1.9;max-width:820px}
.bd-ylead b{color:var(--e1)}
.bd-yact{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.bd-y14{background:var(--bk);color:#fff;border-color:var(--bk)}
.bd-ynav{display:flex;justify-content:space-between;gap:10px;margin-top:16px;font-weight:900}
.bd-ynav a{padding:6px 14px;border-radius:999px;background:#fff;border:2px solid var(--line)}
.bd-ytops{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.bd-ytop{padding:16px;border-radius:18px;background:#fff;border:2px solid var(--line)}
.bd-ytop h2,.bd-ytop h3{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:900;margin-bottom:10px}
.bd-ytop h2 span,.bd-ytop h3 span{padding:3px 9px;border-radius:6px;background:var(--bp);color:#fff;font:400 14px/1 var(--disp);letter-spacing:.1em}
.bd-ytop.uk h2 span,.bd-ytop.uk h3 span{background:var(--bl)}
.bd-ytop ol{display:grid;gap:6px}
.bd-ytop li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;line-height:1.3}
.bd-tr{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--bk);color:var(--bs);font:400 15px/1 var(--disp)}
.bd-ytop li b{font-size:14.5px}
.bd-ytop li a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bo)}
.bd-ytop li small{display:block;font-size:12px;color:var(--mut)}
.bd-ytop li i{font-style:normal;font:400 17px/1 var(--disp);color:var(--bp)}
.bd-tbl{width:100%;border-collapse:separate;border-spacing:0 4px}
.bd-tbl thead th{font-size:12.5px;font-weight:900;color:var(--mut);text-align:left;padding:4px 10px}
.bd-tbl tbody th{width:60px;padding:8px 10px;font:400 18px/1 var(--disp);color:var(--mut);text-align:left;vertical-align:top}
.bd-tbl td{padding:8px 10px;background:#fff;vertical-align:top}
.bd-tbl tr td:first-of-type{border-radius:12px 0 0 12px}
.bd-tbl tr td:last-child{border-radius:0 12px 12px 0}
.bd-mrow th{padding:16px 10px 4px!important;font:900 15px/1 var(--jp)!important;color:var(--tx)!important}
.bd-c{display:block;line-height:1.35}
.bd-c b{display:block;font-size:14px}
.bd-c b a{text-decoration:underline;text-decoration-color:var(--bo);text-underline-offset:3px}
.bd-c small{display:block;font-size:11.5px;color:var(--mut)}
.bd-c em{display:block;font-style:normal;font-size:12px;color:var(--tx2)}
.bd-c.na{color:var(--mut);font-size:12px}
@media(max-width:640px){
  .bd-tbl,.bd-tbl tbody,.bd-tbl tr,.bd-tbl td,.bd-tbl th{display:block;width:auto}
  .bd-tbl thead{display:none}
  .bd-tbl tbody tr:not(.bd-mrow){display:grid;grid-template-columns:52px 1fr;gap:0;margin-bottom:6px;background:#fff;border-radius:12px;overflow:hidden}
  .bd-tbl tbody tr:not(.bd-mrow) th{grid-row:1/3}
  .bd-tbl td{border-radius:0!important;padding:6px 10px}
  .bd-tbl td+td{border-top:1px dashed var(--line)}
  .bd-tbl td .bd-c.us::before{content:"全米1位";font-size:10.5px;font-weight:900;color:var(--bp)}
  .bd-tbl td .bd-c.uk::before{content:"全英1位";font-size:10.5px;font-weight:900;color:var(--bl)}
}
@media(max-width:600px){
  .bd-dial select{font-size:30px}
  .bd-sd-t{font-size:clamp(26px,8vw,40px)}
}
@media(prefers-reduced-motion:reduce){.bd-vinyl,.bd-pilot,.bd-sky i,.bd-led{animation:none!important}.bd-vinyl{transform:translateX(31%)}}
.bd-h1 .nw{display:inline-block}
