/* 先生のページ（/teachers/）と流行りの洋楽で英語を学ぶ（/trend/）だけで使う部品 */
.p-tc{--c1:#ff5a5f;--c2:#f5a524;--c3:#18a8d8;--c4:#7b5cff;--c5:#ff3d8b;--c6:#19b37d;--c7:#ff8a3d;--c8:#5b6cff}
.tc-page{padding-block:clamp(22px,4vw,40px) 60px}
.tc-sec{margin-bottom:clamp(48px,7vw,80px);scroll-margin-top:90px}
.tc-h{margin-bottom:22px;max-width:860px}
.tc-h h2{font-size:clamp(24px,3.4vw,36px);font-weight:900;line-height:1.3;letter-spacing:-.01em;margin:6px 0 10px}
.tc-h h2 small{font-size:.55em;font-weight:700;color:var(--hot);margin-left:6px;vertical-align:middle}
.tc-h>p:not(.sec-en){color:var(--tx2);font-size:15px}
.tc-h b,.tc-page .tc-note b{background:linear-gradient(transparent 62%,rgba(245,184,46,.38) 0)}
.tc-h3{font-size:18px;font-weight:900;margin:30px 0 12px}
.tc-more{margin-top:16px}
.tc-more a{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--gold)}
.tc-more a:hover{color:var(--hot)}
.tc-note{margin-top:14px;font-size:13px;color:var(--mut)}
.tc-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:90;background:var(--tx);color:#fff;padding:10px 22px;border-radius:99px;font-size:14px;font-weight:700;animation:fade .2s}

/* ---------- 先生のページをつなぐバー ---------- */
/* 2026-11-14 ユーザー「切れてるし・。。。基本横スクロールはなしで！」→ 横スクロールをやめて折り返す（折り返すと高くなるので、上に貼りつけない） */
.tnav{position:relative;z-index:30;background:rgba(251,248,242,.94);border-bottom:1px solid var(--line)}
.tnav-in{display:flex;align-items:center;gap:14px}
.tnav-l{flex:none;font-size:12px;font-weight:900;line-height:1.2;color:var(--tx2)}
.tnav-l b{display:block;font:400 13px/1 var(--disp);letter-spacing:.16em;color:var(--hot)}
.tnav-s{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px;padding:10px 2px}
.tnav-s a{flex:1 1 auto;display:grid;grid-template-columns:auto 1fr;column-gap:7px;align-items:center;padding:7px 13px 7px 9px;border-radius:12px;border:1px solid var(--line);background:var(--card);transition:.2s}
.tnav-s a small{grid-row:span 2;font:400 18px/1 var(--disp);color:var(--gold);letter-spacing:.02em}
.tnav-s a b{font-size:13px;line-height:1.25;white-space:nowrap}
.tnav-s a span{font-size:10.5px;color:var(--mut);line-height:1.2;white-space:nowrap}
.tnav-s a:hover{border-color:var(--gold);transform:translateY(-1px)}
.tnav-s a[aria-current]{background:var(--tx);border-color:var(--tx);color:#fff}
.tnav-s a[aria-current] small{color:var(--sun)}
.tnav-s a[aria-current] span{color:#cfc8d8}
@media(max-width:700px){.tnav-l{display:none}.tnav-s a span{display:none}}

/* ---------- いま、何がしたいですか？ ---------- */
.need{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.need-i{--c:var(--c1);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:22px 20px 18px;border-radius:18px;background:var(--card);border:1px solid var(--line);transition:.25s;isolation:isolate}
.need-i::before{content:"";position:absolute;right:-46px;top:-46px;width:130px;height:130px;border-radius:50%;background:var(--c);opacity:.14;z-index:-1;transition:.35s}
.need-i:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 18px 40px rgba(60,45,20,.15);border-color:var(--c)}
.need-i:hover::before{transform:scale(1.6);opacity:.2}
.need-n{font:400 34px/1 var(--disp);color:var(--c)}
.need-i strong{font-size:17px;font-weight:900;line-height:1.45}
.need-i span{font-size:13.5px;color:var(--tx2);line-height:1.7;flex:1}
.need-i em{font-style:normal;font-weight:900;font-size:13.5px;color:var(--c);display:inline-flex;align-items:center;gap:6px}
.need-i.c2{--c:var(--c2)}.need-i.c3{--c:var(--c3)}.need-i.c4{--c:var(--c4)}.need-i.c5{--c:var(--c5)}.need-i.c6{--c:var(--c6)}.need-i.c7{--c:var(--c7)}.need-i.c8{--c:var(--c8)}

/* ---------- We Are the World バナー ---------- */
.watw-ban{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-radius:22px;overflow:hidden;background:linear-gradient(120deg,#1c1a21,#3a1f3c 55%,#6b2a3a);color:#fff;box-shadow:0 20px 50px rgba(28,26,33,.25);transition:.3s}
.watw-ban:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(28,26,33,.32)}
.watw-ban-img{position:relative;min-height:220px}
.watw-ban-img img,.watw-ban-img .noimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.watw-ban-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,#3a1f3c)}
.watw-ban-t{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:28px 30px}
.watw-ban-t small{font:400 14px/1 var(--disp);letter-spacing:.22em;color:var(--sun)}
.watw-ban-t b{font-size:clamp(24px,3vw,34px);font-weight:900;line-height:1.25}
.watw-ban-t>span{font-size:14px;line-height:1.75;color:#e9e1ee}
.watw-ban-t em{font-style:normal;font-weight:900;color:var(--sun);display:inline-flex;align-items:center;gap:6px}
@media(max-width:760px){.watw-ban{grid-template-columns:1fr}.watw-ban-img::after{background:linear-gradient(180deg,transparent 40%,#3a1f3c)}}

/* ---------- 5か条 ---------- */
.rules{display:grid;gap:16px;counter-reset:r}
.rules>li{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;padding:22px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.rules-n{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--sun2),var(--sun) 60%,#e39a12);font:400 46px/1 var(--disp);color:#1c1a21;box-shadow:0 8px 22px rgba(242,193,78,.35);transform:rotate(-8deg)}
.rules-n small{display:block;font-size:12px;letter-spacing:.2em;margin-bottom:-14px}
.rules h3{font-size:20px;font-weight:900;margin-bottom:12px}
.rules-ab{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.rules-ab p{position:relative;padding:12px 14px 12px 14px;border-radius:12px;font-size:14px;line-height:1.65}
.rules-ab b{display:block;font-size:11.5px;letter-spacing:.06em;margin-bottom:3px}
.rules-ab .ng{background:#f4efe9;color:#6d6672}
.rules-ab .ng b{color:#9b8f9e}
.rules-ab .ng b::before{content:"✕ "}
.rules-ab .ok{background:#fff4d1;color:var(--tx)}
.rules-ab .ok b{color:var(--gold)}
.rules-ab .ok b::before{content:"◎ "}
.rules-w{font-size:13.5px;color:var(--tx2);line-height:1.75}
.rules.small>li{grid-template-columns:72px 1fr;padding:18px}
.rules.small .rules-n{width:62px;height:62px;font-size:32px}
.rules.small .rules-n small{font-size:10px;margin-bottom:-8px}
.rules.small h3{font-size:17px;margin-bottom:4px}
@media(max-width:640px){.rules>li{grid-template-columns:1fr;gap:10px}.rules-n{width:64px;height:64px;font-size:34px}.rules-ab{grid-template-columns:1fr}}

/* ---------- 3段階の流れ ---------- */
.flow3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:f}
.flow3-i{position:relative;padding:22px 20px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.flow3-i:not(:last-child)::after{content:"";position:absolute;right:-13px;top:50%;width:14px;height:14px;background:var(--card);border-top:1px solid var(--line);border-right:1px solid var(--line);transform:translateY(-50%) rotate(45deg);z-index:1}
.flow3-k{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.flow3-k small{font:400 15px/1 var(--disp);letter-spacing:.2em;color:var(--hot)}
.flow3-k b{font-size:22px;font-weight:900}
.flow3-k em{font-style:normal;margin-left:auto;padding:2px 10px;border-radius:99px;background:var(--tx);color:#fff;font-size:12px;font-weight:700}
.flow3-i h3{font-size:14px;color:var(--gold);margin:6px 0 10px}
.flow3-i li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.65;margin:6px 0}
.flow3-i li::before{content:"♪";position:absolute;left:0;color:var(--sun);font-weight:900}
.flowbars{display:grid;gap:8px;margin-top:18px}
.flowbars>div{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:10px}
.flowbars b{font:400 20px/1 var(--disp);letter-spacing:.06em}
.fb{display:flex;gap:3px;border-radius:99px;overflow:hidden;font-size:12px;font-weight:700}
.fb span{padding:6px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#ffe9a8}
.fb span:nth-child(2){background:#ffc8d8}
.fb span:nth-child(3){background:#bfe8f6}
@media(max-width:760px){.flow3{grid-template-columns:1fr}.flow3-i:not(:last-child)::after{right:50%;top:auto;bottom:-8px;transform:translateX(50%) rotate(135deg)}}

/* ---------- 指導案の5つの箱 ---------- */
.box5{display:grid;gap:10px}
.box5>li{display:grid;grid-template-columns:54px minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:center;padding:16px 18px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.box5 .box5-n{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--tx);color:var(--sun);font:400 28px/1 var(--disp)}
.box5 h3{font-size:16.5px;font-weight:900;margin-bottom:2px}
.box5 p{font-size:13.5px;color:var(--tx2);line-height:1.65}
.box5-ex{position:relative;padding:10px 14px 10px 14px;border-radius:10px;background:repeating-linear-gradient(0deg,#fffdf6,#fffdf6 25px,#efe6d2 26px);border:1px solid #efe6d2;font-size:13px!important;color:var(--tx)!important}
.box5-ex small{position:absolute;top:-9px;left:12px;padding:0 8px;border-radius:4px;background:var(--hot);color:#fff;font-size:11px;font-weight:900;line-height:18px}
@media(max-width:760px){.box5>li{grid-template-columns:46px 1fr}.box5-ex{grid-column:1/-1}}
.tpl{margin-top:20px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--card)}
.tpl-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:var(--card2);font-size:13.5px}
.tpl pre{margin:0;padding:16px 18px;max-height:260px;overflow:auto;font:13px/1.75 var(--jp);white-space:pre-wrap;color:var(--tx2)}
.maker-ban{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding:28px 30px;border-radius:22px;background:linear-gradient(120deg,var(--sun2),var(--sun) 50%,#ff9f5a);transition:.25s;isolation:isolate}
.maker-ban::before{content:"";position:absolute;right:-40px;bottom:-60px;width:240px;height:240px;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.35) 0 2px,transparent 3px 9px);z-index:-1}
.maker-ban:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(232,150,20,.35)}
.maker-ban>span{display:flex;flex-direction:column;gap:8px;max-width:640px}
.maker-ban small{font:400 14px/1 var(--disp);letter-spacing:.22em;color:#7a3d00}
.maker-ban b{font-size:clamp(20px,2.6vw,28px);font-weight:900;line-height:1.35}
.maker-ban>span>span{font-size:14px;color:#3d2a10}
.maker-ban em{font-style:normal;font-weight:900;background:var(--tx);color:#fff;padding:12px 22px;border-radius:99px;display:inline-flex;align-items:center;gap:8px}

/* ---------- 4週間・カレンダー ---------- */
.wk4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.wk4>div{position:relative;padding:18px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.wk4 small{display:inline-block;padding:2px 10px;border-radius:99px;background:var(--hot);color:#fff;font-size:11.5px;font-weight:900}
.wk4>div:nth-child(2) small{background:var(--c7)}.wk4>div:nth-child(3) small{background:var(--c3)}.wk4>div:nth-child(4) small{background:var(--c6)}
.wk4 b{display:block;font-size:17px;font-weight:900;margin:8px 0 4px}
.wk4 p{font-size:13.5px;color:var(--tx2);line-height:1.7}
@media(max-width:860px){.wk4{grid-template-columns:1fr 1fr}}
.cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cal a{position:relative;overflow:hidden;padding:14px 14px 12px;border-radius:14px;background:var(--card);border:1px solid var(--line);transition:.2s}
.cal a::after{content:"";position:absolute;right:-18px;bottom:-18px;width:54px;height:54px;border-radius:50%;background:var(--sun);opacity:.22}
.cal a:hover{border-color:var(--gold);transform:translateY(-2px)}
.cal small{font:400 20px/1 var(--disp);color:var(--hot)}
.cal b{display:block;font-size:14px;line-height:1.35;margin:4px 0 2px}
.cal span{font-size:11.5px;color:var(--mut)}

/* ---------- 学年タイル ---------- */
.gtl{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.gtl-i{--g:var(--c3);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:22px 20px;border-radius:20px;color:#fff;background:var(--g);transition:.25s;isolation:isolate}
.gtl-i::before{content:"";position:absolute;inset:auto -30px -60px auto;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.14);z-index:-1}
.gtl-i::after{content:"50";position:absolute;right:16px;top:8px;font:400 64px/1 var(--disp);color:rgba(255,255,255,.22);z-index:-1}
.gtl-i:hover{transform:translateY(-4px) rotate(.4deg);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.gtl-i small{font:400 13px/1 var(--disp);letter-spacing:.2em;opacity:.85}
.gtl-i b{font-size:26px;font-weight:900;line-height:1.2}
.gtl-i>span{font-size:13.5px;line-height:1.6;opacity:.95}
.gtl-i ul{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.gtl-i li{padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.2);font-size:12px;font-weight:700}
.gtl-i li.more{background:rgba(0,0,0,.18)}
.gtl-j1{--g:linear-gradient(135deg,#ff8a3d,#ff5a5f)}.gtl-j2{--g:linear-gradient(135deg,#f5a524,#e26d0e)}.gtl-j3{--g:linear-gradient(135deg,#ff3d8b,#b0287a)}.gtl-h1{--g:linear-gradient(135deg,#18a8d8,#1d6fd1)}.gtl-h2{--g:linear-gradient(135deg,#7b5cff,#4a35c9)}.gtl-h3{--g:linear-gradient(135deg,#19b37d,#0f7f6a)}

.faq details{border-bottom:1px solid var(--line);padding:14px 4px}
.faq summary{cursor:pointer;font-weight:900;font-size:15.5px;list-style:none;display:flex;gap:10px}
.faq summary::before{content:"Q";font:400 20px/1.2 var(--disp);color:var(--hot)}
.faq details p{margin-top:8px;padding-left:22px;font-size:14px;color:var(--tx2)}
.deep{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.deep a{padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);transition:.2s}
.deep a:hover{border-color:var(--gold)}
.deep b{display:block;font-size:15px}
.deep span{font-size:12.5px;color:var(--mut)}
.tips3{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tips3 li{padding:18px;border-radius:16px;background:var(--card);border:1px solid var(--line);font-size:13.5px;color:var(--tx2);line-height:1.75}
.tips3 b{display:block;font-size:15.5px;color:var(--tx);margin-bottom:4px}
.pt3{display:grid;gap:8px;counter-reset:p}
.pt3 li{counter-increment:p;position:relative;padding:14px 16px 14px 56px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:14.5px}
.pt3 li::before{content:counter(p);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sun);font:400 20px/1 var(--disp)}

/* ---------- 指導案メーカー ---------- */
.mk-steps{display:grid;gap:14px}
.mk-step{border:1px solid var(--line);border-radius:18px;background:var(--card);padding:16px 18px 18px;margin:0;min-width:0}
.mk-step legend{display:flex;align-items:center;gap:10px;font-weight:900;font-size:16px;padding:0 6px}
.mk-step legend b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tx);color:var(--sun);font:400 20px/1 var(--disp)}
.mk-opts{display:flex;flex-wrap:wrap;gap:8px}
.mk-opts button{padding:10px 18px;border-radius:12px;border:1px solid var(--line);background:var(--bg);font-weight:900;font-size:15px;line-height:1.25;transition:.15s}
.mk-opts button small{display:block;font-size:11px;font-weight:700;color:var(--mut)}
.mk-opts button:hover{border-color:var(--gold)}
.mk-opts button[aria-pressed=true]{background:var(--sun);border-color:var(--gold);box-shadow:0 4px 14px rgba(242,193,78,.4);transform:translateY(-1px)}
.mk-hint{font-size:13px;color:var(--mut);margin-bottom:10px}
.mk-songs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.mk-songs button{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:8px 8px 10px;border-radius:14px;border:2px solid var(--line);background:var(--bg);transition:.15s}
.mk-songs button img,.mk-songs .noimg{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:6px;display:grid;place-items:center;background:var(--card2)}
.mk-songs b{font-size:13.5px;line-height:1.3}
.mk-songs small{font-size:11.5px;color:var(--mut)}
.mk-songs em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--gold);margin-top:3px}
.mk-songs i{position:absolute;top:12px;left:12px;font-style:normal;font-size:10.5px;font-weight:900;background:var(--hot);color:#fff;padding:1px 7px;border-radius:99px}
.mk-songs button:hover{border-color:var(--gold)}
.mk-songs button[aria-pressed=true]{border-color:var(--hot);background:#fff;box-shadow:0 6px 18px rgba(232,23,79,.18)}
.mk-songs button[aria-pressed=true]::after{content:"✓";position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--hot);color:#fff;font-weight:900}
.mk-all{display:block;margin-top:12px;font-size:13px;color:var(--tx2)}
.mk-all select{max-width:100%;margin-top:4px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);font:inherit;font-size:13.5px}
.mk-act{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:22px 0}
.mk-out{scroll-margin-top:120px}
.mk-empty{text-align:center;padding:40px 16px;border:2px dashed var(--line);border-radius:18px;color:var(--mut)}
.mk-lp{animation:mkin .45s ease-out}
@keyframes mkin{from{opacity:0;transform:translateY(16px)}}

/* ---------- 学年別セトリ ---------- */
.rmap{display:grid;gap:8px}
.rmap-g{display:grid;grid-template-columns:76px repeat(3,minmax(0,1fr));gap:8px}
.rmap-l{display:grid;place-items:center;border-radius:14px;background:var(--tx);color:#fff;text-align:center;padding:8px 4px}
.rmap-l small{font:400 9.5px/1.1 var(--disp);letter-spacing:.1em;color:var(--sun)}
.rmap-l b{font-size:20px;font-weight:900;line-height:1}
.rmap-g a{padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);transition:.2s;min-width:0}
.rmap-g a:hover{border-color:var(--gold);transform:translateY(-1px)}
.rmap-g a small{font-size:11px;font-weight:900;color:var(--hot)}
.rmap-g a b{display:block;font-size:13.5px;line-height:1.35}
.rmap-g a span{display:block;font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){.rmap-g{grid-template-columns:1fr 1fr 1fr}.rmap-l{grid-column:1/-1;display:flex;gap:8px;justify-content:center}}
.gnav{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 6px}
.gnav a{padding:8px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-weight:900;font-size:16px;line-height:1.1;text-align:center}
.gnav a small{display:block;font:400 9.5px/1 var(--disp);letter-spacing:.1em;color:var(--gold)}
.gnav a[aria-current]{background:var(--tx);color:#fff;border-color:var(--tx)}
.gnav a:hover{border-color:var(--gold)}
.gacha-out{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:16px 20px;border-radius:18px;background:var(--tx);color:#fff;max-width:640px}
.gacha-out .g-spin{font:400 26px/1.2 var(--disp);letter-spacing:.04em;color:var(--sun)}
.gacha-out small{width:100%;font:400 13px/1 var(--disp);letter-spacing:.22em;color:var(--sun)}
.gacha-out a b{display:block;font-size:22px;line-height:1.3}
.gacha-out a span{font-size:13px;color:#d8d0e0}
.gacha-out.hit{animation:pop .4s}
@keyframes pop{50%{transform:scale(1.03)}}
.term{scroll-margin-top:130px}
.term-h{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:2px dashed var(--line)}
.term-t b{display:inline-block;font-size:28px;font-weight:900;margin-right:12px;line-height:1}
.term-t span{font-size:14px;font-weight:700;color:var(--gold)}
.term-r{display:flex;align-items:center;gap:10px;font:400 20px/1 var(--disp);color:var(--mut)}
.sls{display:grid;gap:8px}
.sl{display:grid;grid-template-columns:30px 40px 120px minmax(0,1fr) minmax(0,270px);gap:14px;align-items:center;padding:10px 14px 10px 10px;border-radius:14px;background:var(--card);border:1px solid var(--line);transition:.2s}
.sl:hover{border-color:var(--gold)}
.sl.is-done{background:#f6fbf2;border-color:#cfe6bf}
.sl.is-done .sl-t{color:#4c7a33}
.sl.flash{box-shadow:0 0 0 3px var(--hot)}
.sl-ck{position:relative;width:26px;height:26px;cursor:pointer}
.sl-ck input{position:absolute;opacity:0;inset:0;cursor:pointer}
.sl-ck span{position:absolute;inset:0;border-radius:8px;border:2px solid var(--line);background:var(--bg)}
.sl-ck input:checked+span{background:#5aa83a;border-color:#5aa83a}
.sl-ck input:checked+span::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:900}
.sl-ck input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.sl-no{font:400 26px/1 var(--disp);color:var(--gold);text-align:center}
.sl-img img,.sl-img .noimg{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.sl-t{font-weight:900;font-size:16px;line-height:1.3}
.sl-t:hover{color:var(--hot)}
.sl-a{display:block;font-size:12.5px;color:var(--mut)}
.sl-a i{font-style:normal;margin-left:8px}
.sl-x{font-size:12.5px;color:var(--tx2);line-height:1.6;margin-top:3px}
.sl-s{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.sl-tag{padding:3px 12px;border-radius:99px;background:#fff1c7;font-size:13px;font-weight:900;line-height:1.5}
.sl-meta{display:flex;flex-wrap:wrap;gap:4px}
.sl-meta em{font-style:normal;font-size:11px;font-weight:700;padding:1px 7px;border-radius:6px;background:var(--card2);color:var(--tx2)}
.sl-ws{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:900;color:var(--hot)}
.sl-ws:hover{text-decoration:underline}
@media(max-width:860px){.sl{grid-template-columns:28px 34px 96px minmax(0,1fr)}.sl-img img,.sl-img .noimg{width:96px}.sl-s{grid-column:3/-1;flex-direction:row;flex-wrap:wrap;align-items:center}}
@media(max-width:520px){.sl{grid-template-columns:26px 30px minmax(0,1fr);gap:10px}.sl-img{display:none}.sl-s{grid-column:2/-1}.sl-no{font-size:22px}}
@media print{
  .p-tc .hd,.p-tc .tnav,.p-tc .bc,.p-tc .ft,.p-tc .tabbar,.p-tc .buddy,.p-tc .hero-btns,.p-tc .gnav,.p-tc .t-pager,.p-tc .totop,.p-tc .term-r .btn,.p-tc .sl-img,.p-tc .sl-ws,.p-tc .tc-note{display:none!important}
  .p-tc .sl{grid-template-columns:22px 30px minmax(0,1fr) 200px;padding:4px 8px;gap:8px;break-inside:avoid;border-radius:6px}
  .p-tc .sl-x{display:none}.p-tc .tc-sec{margin-bottom:16px}.p-tc .ph-hero{padding:10px 0}.p-tc .ph-hero h1{font-size:26px;margin:0}
}

/* ---------- 定番ソング ---------- */
.clnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.clnav a{padding:8px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-weight:900;font-size:14px;line-height:1.2}
.clnav a small{display:block;font:400 10.5px/1 var(--disp);letter-spacing:.14em;color:var(--gold)}
.clnav a.hot{background:linear-gradient(120deg,#1c1a21,#6b2a3a);color:#fff;border-color:transparent}
.clnav a.hot small{color:var(--sun)}
.clnav a:hover{border-color:var(--gold)}
.clq{display:flex;flex-wrap:wrap;gap:8px}
.clq a{padding:8px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);line-height:1.3;transition:.2s}
.clq a:hover{border-color:var(--gold);transform:translateY(-1px)}
.clq b{display:block;font-size:14px}
.clq span{font-size:11.5px;color:var(--mut)}
.clg .tc-h{margin-bottom:18px}
.clc{scroll-margin-top:130px;margin-bottom:18px;border-radius:22px;background:var(--card);border:1px solid var(--line);overflow:hidden}
.clc-h{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:center;padding:18px;background:linear-gradient(135deg,#fffaf0,var(--card2))}
.clc-img{position:relative;display:block;border-radius:14px;overflow:hidden;box-shadow:0 10px 26px rgba(60,45,20,.18)}
.clc-img img,.clc-img .noimg{width:100%;aspect-ratio:16/9;object-fit:cover}
.clc-y{font-size:12.5px;font-weight:700;color:var(--gold)}
.clc-ti h3{font-size:clamp(24px,3vw,34px);font-weight:900;line-height:1.2;margin:2px 0 4px;font-family:"Playfair Display",var(--jp);font-style:italic}
.clc-ti h3 a:hover{color:var(--hot)}
.clc-a{font-weight:700;color:var(--tx2)}
.clc-a small{margin-left:10px;font-size:12.5px;color:var(--mut)}
.clc-m{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12.5px}
.clc-m div{display:flex;align-items:center;gap:6px}
.clc-m dt{color:var(--mut)}
.clc-m dd{font-weight:900}
.clc-b{padding:20px 22px 22px}
.clc-k{font:400 13px/1 var(--disp);letter-spacing:.16em;color:var(--hot);margin-bottom:6px}
.clc-why{position:relative;padding:16px 18px;border-radius:14px;background:#fff4d1;margin-bottom:16px}
.clc-why p:not(.clc-k){font-size:15px;line-height:1.85}
.clc-g{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.clc-g>div{padding:12px 0;border-top:1px dashed var(--line)}
.clc-g p:not(.clc-k){font-size:14px;color:var(--tx2);line-height:1.8}
.clc-g a{color:var(--gold);font-weight:700}
.clc-g li{font-size:13.5px;margin:4px 0;color:var(--tx2)}
.clc-g li b{margin-right:8px;color:var(--tx)}
.clc-tip,.clc-tv{position:relative;margin-top:14px;padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.75}
.clc-tip{background:#eaf7ff}
.clc-tv{background:#fdeef3}
.clc-tip b,.clc-tv b{display:inline-block;margin-right:10px;padding:1px 10px;border-radius:99px;background:var(--c3);color:#fff;font-size:12px}
.clc-tv b{background:var(--hot)}
.clc-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
@media(max-width:760px){.clc-h{grid-template-columns:1fr}.clc-g{grid-template-columns:1fr}}

/* ---------- We Are the World 特集 ---------- */
.watw-hero{position:relative;overflow:hidden;padding:clamp(44px,7vw,90px) 0 clamp(30px,5vw,56px);color:#fff;background:#1c1a21;isolation:isolate}
.watw-hero::before{content:"";position:absolute;inset:0;background:var(--img) center/cover;opacity:.32;filter:saturate(1.2);z-index:-2}
.watw-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1c1a21 30%,rgba(28,26,33,.55)),radial-gradient(600px 300px at 90% 10%,rgba(245,184,46,.3),transparent);z-index:-1}
.watw-hero h1{margin:10px 0 18px;line-height:1.1}
.watw-hero h1 span{display:block;font:italic 700 clamp(40px,8vw,96px)/1 "Playfair Display",serif;letter-spacing:-.01em;background:linear-gradient(90deg,#ffe08a,#f5b82e,#ff7a59);-webkit-background-clip:text;background-clip:text;color:transparent}
.watw-hero h1 small{display:block;font-size:clamp(18px,2.6vw,28px);font-weight:900;margin-top:12px;color:#fff}
.watw-lead{max-width:780px;font-size:15.5px;line-height:1.95;color:#e9e1ee}
.watw-lead b{color:var(--sun)}
.watw-hero .hero-btns{margin-top:22px}
.watw-hero .btn:not(.gold){background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.3)}
.watw-hero .t-stats li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.watw-hero .t-stats b{color:var(--sun)}
.watw-toc{display:flex;flex-wrap:wrap;gap:6px;padding:16px 0 4px}
.watw-toc a{flex:none;padding:7px 14px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:700}
.watw-toc a:hover{border-color:var(--gold);color:var(--gold)}
.why4{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.why4>div{position:relative;overflow:hidden;padding:20px 18px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.why4>div::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:var(--sun);opacity:.18}
.why4 b{font:400 32px/1 var(--disp);color:var(--hot)}
.why4 h3{font-size:16.5px;font-weight:900;margin:6px 0}
.why4 p{font-size:13.5px;color:var(--tx2);line-height:1.75}
.wfacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-bottom:18px}
.wfacts div{padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.wfacts dt{font-size:11.5px;font-weight:900;color:var(--gold)}
.wfacts dd{font-size:14px;font-weight:700;line-height:1.5}
.wstory{position:relative;padding:24px 26px;border-radius:18px;background:#1c1a21;color:#eee6f2;font-size:15px;line-height:2}
.wstory::before{content:"“";position:absolute;right:20px;top:-20px;font:italic 700 130px/1 "Playfair Display",serif;color:var(--sun);opacity:.35}
.wtv{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-top:16px;counter-reset:t}
.wtv li{counter-increment:t;position:relative;padding:16px 16px 16px 54px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:13.5px;line-height:1.75;color:var(--tx2)}
.wtv li::before{content:counter(t,decimal-leading-zero);position:absolute;left:14px;top:14px;font:400 26px/1 var(--disp);color:var(--hot)}
.solo{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.solo li>a,.solo-in{position:relative;display:flex;flex-direction:column;height:100%;padding:8px 8px 12px;border-radius:14px;background:var(--card);border:1px solid var(--line);transition:.2s}
.solo li>a:hover{transform:translateY(-3px);border-color:var(--hot);box-shadow:0 10px 24px rgba(60,45,20,.14)}
.solo-n{position:absolute;top:12px;left:12px;z-index:1;font:400 22px/1 var(--disp);color:#fff;background:var(--hot);padding:3px 8px 2px;border-radius:8px}
.solo-img img,.solo-img .noimg,.solo-img i{display:grid;place-items:center;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:9px;background:linear-gradient(135deg,#2a2530,#4a2240);color:var(--sun);font-size:30px;font-style:normal}
.solo strong{font-size:14.5px;line-height:1.3;margin-top:8px}
.solo small{font-size:12px;color:var(--mut)}
.solo em{font-style:normal;margin-top:6px;font-size:12px;font-weight:900;color:var(--hot);display:flex;align-items:center;gap:4px}
.solo li.no .solo-n{background:var(--tx2)}
.weng{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px}
.weng-g{padding:22px;border-radius:18px;background:#fff4d1}
.weng-g h3{font-size:22px;font-weight:900;margin-bottom:8px}
.weng-g h3 small{display:block;font-size:13px;color:var(--gold)}
.weng-g>p{font-size:14px;line-height:1.85}
.weng-f{margin:12px 0}
.weng-f li{padding:8px 12px;margin:6px 0;border-radius:10px;background:#fff;font-weight:700;font-size:14px}
.weng-s{font-size:13px;line-height:1.75;margin-top:8px;color:var(--tx2)}
.weng-s b{display:inline-block;margin-right:8px;padding:0 8px;border-radius:6px;background:var(--tx);color:#fff;font-size:11.5px}
.weng-p{display:grid;gap:10px}
.wph{padding:16px 18px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.wph-e{font:italic 700 22px/1.2 "Playfair Display",serif;color:var(--hot)}
.wph-j{font-weight:900;margin:2px 0 6px}
.wph-n{font-size:13px;color:var(--tx2);line-height:1.7}
.wph-x{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:13.5px}
.wph-x small{display:block;color:var(--mut)}
@media(max-width:760px){.weng{grid-template-columns:1fr}}
.wqz{display:grid;gap:12px}
.wq{padding:18px 20px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.wq-q{display:flex;gap:12px;align-items:baseline;font-size:17px;font-weight:900;margin-bottom:12px}
.wq-q b{font:400 26px/1 var(--disp);color:var(--hot)}
.wq-c{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.wq-c button{padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--bg);font-weight:700;text-align:left;transition:.15s}
.wq-c button:hover{border-color:var(--gold)}
.wq-c button.ok{background:#e4f6dc;border-color:#5aa83a}
.wq-c button.ng{background:#fde4ea;border-color:var(--hot)}
.wq-c button.off{opacity:.45}
.wq-r{margin-top:10px;font-weight:700;font-size:14px}

/* ---------- 流行りの洋楽 ---------- */
.tr-hero{position:relative;overflow:hidden;padding:clamp(44px,7vw,90px) 0 0;background:linear-gradient(120deg,#fff0f6,#fff7e0 50%,#e8f7ff);border-bottom:1px solid var(--line);isolation:isolate}
.tr-hero::before{content:"";position:absolute;right:-120px;top:-120px;width:460px;height:460px;border-radius:50%;background:conic-gradient(from 0deg,#ff3d8b,#f5b82e,#18a8d8,#7b5cff,#ff3d8b);opacity:.2;filter:blur(30px);animation:spin 18s linear infinite;z-index:-1}
@keyframes spin{to{transform:rotate(360deg)}}
.tr-hero h1{font-size:clamp(38px,7vw,84px);font-weight:900;line-height:1.08;letter-spacing:-.03em;margin:10px 0 18px}
.tr-hero h1 em{font-style:normal;background:linear-gradient(90deg,#ff3d8b,#f5a524,#18a8d8);-webkit-background-clip:text;background-clip:text;color:transparent}
.tr-lead{max-width:760px;font-size:15.5px;color:var(--tx2)}
.tr-hero .hero-btns{margin-top:22px}
.tr-tick{margin-top:34px;padding:12px 0;overflow:hidden;border-top:1px solid var(--line);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tr-tick>div{display:flex;gap:28px;width:max-content;animation:tick 50s linear infinite}
.tr-tick span{font:400 22px/1 var(--disp);letter-spacing:.06em;color:var(--tx2);white-space:nowrap}
.tr-tick span:nth-child(3n+1){color:var(--hot)}
@keyframes tick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tr-tick>div,.tr-hero::before{animation:none}}
.bb10{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;counter-reset:b}
.bb10 li>a,.bb-n{display:flex;flex-direction:column;padding:12px 14px 12px 64px;border-radius:14px;background:var(--card);border:1px solid var(--line);min-height:72px;justify-content:center;transition:.2s}
.bb10 li{position:relative}
.bb10 li>a:hover{border-color:var(--hot)}
.bb-r{position:absolute;left:12px;top:50%;transform:translateY(-50%);font:400 38px/1 var(--disp);color:var(--hot);z-index:1}
.bb10 li.no .bb-r{color:var(--mut)}
.bb10 span[lang]{font-weight:900;font-size:15px;line-height:1.3}
.bb10 small{font-size:12px;color:var(--mut)}
.bb10 em{font-style:normal;font-size:11.5px;font-weight:900;color:var(--hot);display:flex;align-items:center;gap:4px}
.kuses{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.kuse{position:relative;overflow:hidden;padding:20px 18px;border-radius:18px;background:var(--card);border:1px solid var(--line);isolation:isolate}
.kuse::after{content:"";position:absolute;left:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(255,61,139,.16),transparent 70%);z-index:-1}
.kuse-n{font:400 40px/1 var(--disp);background:linear-gradient(135deg,#ff3d8b,#f5a524);-webkit-background-clip:text;background-clip:text;color:transparent}
.kuse h3{font-size:18px;font-weight:900;margin:4px 0 8px}
.kuse>p:not(.kuse-n):not(.kuse-s){font-size:13.5px;color:var(--tx2);line-height:1.8}
.kuse-s{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kuse-s a{padding:5px 10px;border-radius:10px;background:#fff1f6;font-size:11.5px;color:var(--tx2);line-height:1.3}
.kuse-s a b{display:block;font-size:13px;color:var(--tx)}
.kuse-s a:hover{background:#ffe0ec}
.tq{border-radius:22px;background:linear-gradient(135deg,#1c1a21,#3b1f45);color:#fff;padding:clamp(22px,4vw,40px);min-height:260px;display:grid;place-items:center;text-align:center}
.tq-start p{margin-bottom:14px;color:#d9d0e2}
.tq-q{width:100%;max-width:720px}
.tq-top{display:flex;justify-content:space-between;font:400 18px/1 var(--disp);letter-spacing:.1em;color:var(--sun)}
.tq-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.15);margin:10px 0 22px;overflow:hidden}
.tq-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff3d8b,#f5b82e)}
.tq-e{font:italic 700 clamp(30px,5vw,48px)/1.15 "Playfair Display",serif}
.tq-from{margin:8px 0 20px;font-size:13px;color:#bfb6c9}
.tq-c{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tq-c button{padding:14px;border-radius:14px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18);color:#fff;font-weight:700;font-size:15px;transition:.15s}
.tq-c button:hover:not(:disabled){background:rgba(255,255,255,.16);border-color:var(--sun)}
.tq-c button.ok{background:#3b8f2a;border-color:#7ad35c}
.tq-c button.ng{background:#a3173f;border-color:#ff5c86}
.tq-c button.off{opacity:.35}
.tq-end small{font:400 15px/1 var(--disp);letter-spacing:.3em;color:var(--sun)}
.tq-end>b{display:block;font:400 84px/1 var(--disp);margin:6px 0}
.tq-end>b span{font-size:28px;margin-left:4px}
.tq-rank{display:inline-block;font:400 22px/1 var(--disp);letter-spacing:.2em;padding:6px 16px;border-radius:99px;background:var(--sun);color:#1c1a21;margin-bottom:8px}
.tq-rev{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;margin:18px 0;text-align:left}
.tq-rev a{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.08);font-size:12.5px;color:#d9d0e2}
.tq-rev a b{display:block;color:#fff;font-size:14px}
.tq-rev a small{display:block;color:var(--sun)}
@media(max-width:520px){.tq-c{grid-template-columns:1fr}}
.tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.tr-c{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line);transition:.2s}
.tr-c:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(60,45,20,.15);border-color:var(--gold)}
.tr-img{position:relative}
.tr-img img,.tr-img .noimg{width:100%;aspect-ratio:16/9;object-fit:cover}
.tr-img i{position:absolute;right:8px;bottom:8px;font-style:normal;font-size:11px;font-weight:900;padding:2px 8px;border-radius:99px;background:rgba(0,0,0,.7);color:#fff}
.tr-b{display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px;flex:1}
.tr-b small{font:400 13px/1 var(--disp);letter-spacing:.14em;color:var(--hot)}
.tr-b b{font-size:16px;line-height:1.3}
.tr-a{font-size:12.5px;color:var(--mut)}
.tr-p{margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--card2);font-size:12.5px;color:var(--tx2);line-height:1.5}
.tr-p em{display:block;font-style:normal;font-weight:900;color:var(--tx)}
.tr-f{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:8px}
.tr-f em{font-style:normal;font-size:11px;font-weight:900;padding:2px 8px;border-radius:6px}
.tr-f .okb{background:#e4f6dc;color:#3b7a22}
.tr-f .cau{background:#fff0d6;color:#9a5a00}
.tr-gi{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.tr-gi>div{padding:16px 18px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.tr-gi h3{font-size:15.5px;font-weight:900;margin-bottom:8px}
.tr-gi p{display:flex;flex-wrap:wrap;gap:6px}
.tr-gi a{padding:4px 10px;border-radius:99px;background:#eef8fd;font-size:12.5px;font-weight:700}
.tr-gi a:hover{background:var(--c3);color:#fff}
.pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.pair{padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.pair-t{font-weight:900;font-size:16px;margin-bottom:10px}
.pair-s{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.pair-s a{padding:10px 12px;border-radius:12px;background:var(--card2);line-height:1.3;transition:.2s;min-width:0}
.pair-s a.new{background:linear-gradient(135deg,#ffe3ef,#fff1cf)}
.pair-s a:hover{transform:translateY(-2px)}
.pair-s small{display:block;font:400 11px/1 var(--disp);letter-spacing:.14em;color:var(--gold)}
.pair-s a.new small{color:var(--hot)}
.pair-s b{display:block;font-size:14px;margin:3px 0 1px}
.pair-s span{font-size:11.5px;color:var(--mut)}
.pair-s i{font:400 26px/1 var(--disp);font-style:normal;color:var(--hot)}
.pair-d{margin-top:10px;font-size:13px;color:var(--tx2);line-height:1.7}

/* ---------- 授業で使える100 のヒーローの案内 ---------- */
.c100-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px;max-width:900px}
.c100-how li{padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:13.5px;line-height:1.6;color:var(--tx2)}
.c100-how b{display:block;font-size:15px;color:var(--tx)}
.c100-how small{font:400 22px/1 var(--disp);color:var(--hot);margin-right:6px}
@media(max-width:700px){.c100-how{grid-template-columns:1fr}}
/* サムネイル：img の width/height 属性より aspect-ratio を優先させる */
.sl-img img,.mk-songs img,.tr-img img,.solo-img img,.clc-img img{height:auto}