/* 原田英語の超絶洋楽イングリッシュ：明るいレコード店の色（クリーム・ゴールド・ネオンピンク） */
:root{--bg:#fbf8f2;--bg2:#f4efe5;--card:#fff;--card2:#f3eee4;--line:#e6dfd1;--tx:#1c1a21;--tx2:#45414d;--mut:#77727f;--gold:#a86b00;--gold2:#8f5600;--sun:#f5b82e;--sun2:#ffe08a;--hot:#e8174f;--cy:#0a9fd6;--r:12px;--disp:"Bebas Neue","Oswald",Impact,sans-serif;--jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.8 var(--jp);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(900px 500px at 85% -10%,rgba(255,46,99,.07),transparent 60%),radial-gradient(800px 500px at 0% 20%,rgba(242,193,78,.08),transparent 60%)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
svg{width:1em;height:1em;flex:none}
[lang=en],[lang=es]{font-feature-settings:"palt" 0}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:99;background:var(--sun);color:#000;padding:8px 14px;border-radius:6px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ヘッダー */
.hd{position:sticky;top:0;z-index:50;background:rgba(251,248,242,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hd-in{width:min(1320px,100% - 32px);margin-inline:auto;display:flex;align-items:center;gap:18px;height:64px}
.logo{display:flex;align-items:center;gap:10px;color:var(--gold);flex:none}
.logo svg{width:38px;height:38px;transition:transform 1.2s}
.logo:hover svg{transform:rotate(360deg)}
.logo b{display:block;font:400 26px/1 var(--disp);letter-spacing:.06em;color:var(--tx)}
.logo b i{font-style:normal;color:var(--gold);margin-left:.22em}
.logo small{display:block;font-size:10px;line-height:1.3;color:var(--mut);letter-spacing:.04em}
/* 広い画面だけ出る横並びメニュー */
.qnav{display:none;gap:4px;margin-left:auto}
.qnav a{padding:8px 13px;border-radius:8px;font-size:13.5px;font-weight:700;line-height:1.25;white-space:nowrap;transition:background .2s}
.qnav a small{display:block;font:400 10.5px/1 var(--disp);letter-spacing:.14em;color:var(--gold)}
.qnav a:hover,.qnav a[aria-current]{background:var(--card2)}
.qnav a[aria-current]{box-shadow:inset 0 -2px var(--gold)}
.hd-search{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:18px;margin-left:auto;flex:none}
.hd-search:hover{border-color:var(--gold);color:var(--gold)}
@media(min-width:1100px){.qnav{display:flex}.hd-search{margin-left:0}}
/* ハンバーガー（どの画面幅でも出す） */
.burger{display:block;flex:none;width:44px;height:44px;position:relative;border-radius:50%;background:var(--tx);transition:background .2s}
.burger:hover{background:var(--hot)}
.burger i{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:#fff;transition:.25s}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:27px}
.burger[aria-expanded=true] i:nth-child(1){top:21px;transform:rotate(45deg)}.burger[aria-expanded=true] i:nth-child(2){opacity:0}.burger[aria-expanded=true] i:nth-child(3){top:21px;transform:rotate(-45deg)}
/* 右から出るメニュー */
.nav{position:fixed;top:64px;right:0;bottom:0;z-index:49;width:min(440px,100%);display:flex;flex-direction:column;padding:10px 22px 40px;overflow:auto;overscroll-behavior:contain;background:var(--bg);border-left:1px solid var(--line);box-shadow:-24px 0 60px rgba(60,45,20,.16);transform:translateX(100%);visibility:hidden;transition:transform .3s,visibility 0s .3s}
.nav.open{transform:none;visibility:visible;transition:transform .3s}
.nav>a{display:block;padding:12px 6px;border-bottom:1px solid var(--line);font-size:18px;font-weight:700;line-height:1.3;transition:color .15s,padding .15s}
.nav>a small{display:block;font:400 11.5px/1 var(--disp);letter-spacing:.14em;color:var(--gold);margin-bottom:4px}
.nav>a:hover{color:var(--gold);padding-left:12px}
.nav>a[aria-current]{color:var(--gold);box-shadow:inset 3px 0 var(--sun);padding-left:14px}
.nav-more{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
.nav .nav-more a{font-size:13.5px;font-weight:700;padding:12px 8px;border:1px solid var(--line);border-radius:10px;text-align:center;background:var(--card)}
.nav .nav-more a:hover{border-color:var(--gold);color:var(--gold)}
.nav-bg{position:fixed;inset:64px 0 0;z-index:48;background:rgba(28,26,33,.32);backdrop-filter:blur(2px);animation:fade .25s}
@keyframes fade{from{opacity:0}}
@media(max-width:520px){.logo small{display:none}.logo b{font-size:22px}}

/* パンくず */
.bc{padding-top:14px;font-size:12px;color:var(--mut)}
.bc ol{display:flex;flex-wrap:wrap;gap:4px 8px}
.bc li+li::before{content:"/";margin-right:8px;opacity:.5}
.bc a:hover{color:var(--gold)}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:700;font-size:14.5px;line-height:1.3;transition:.2s}
.btn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px)}
.btn.gold{background:linear-gradient(135deg,var(--sun2),var(--sun) 55%,#e39a12);color:#111;border-color:transparent;box-shadow:0 6px 24px rgba(242,193,78,.25)}
.btn.gold:hover{color:#000;box-shadow:0 8px 30px rgba(242,193,78,.45)}
.btn.big{padding:15px 28px;font-size:16.5px}
.btn.sm{padding:7px 13px;font-size:12.5px}
.tlink{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-weight:700;font-size:14px}
.tlink:hover{text-decoration:underline}

/* ホームのヒーロー */
.hero{position:relative;min-height:min(88vh,820px);display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-wall{position:absolute;inset:-12% -10%;display:flex;flex-direction:column;justify-content:center;gap:14px;transform:rotate(-7deg) scale(1.08);opacity:.5;filter:saturate(1.15)}
.wall-row{display:flex;gap:14px;width:max-content;animation:slide 90s linear infinite}
.wall-row.r1{animation-direction:reverse;animation-duration:110s}.wall-row.r2{animation-duration:130s}
.wall-row img{width:300px;height:169px;object-fit:cover;border-radius:10px}
@keyframes slide{to{transform:translateX(-50%)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,248,242,.97) 0%,rgba(251,248,242,.86) 45%,rgba(251,248,242,.3) 100%),linear-gradient(0deg,var(--bg) 2%,transparent 45%)}
.hero-in{position:relative;z-index:1;padding:90px 0 54px}
.hero-k{display:flex;align-items:center;gap:12px;font:400 clamp(14px,1.6vw,19px)/1.2 var(--disp);letter-spacing:.2em;color:var(--gold)}
.eq{display:inline-flex;align-items:flex-end;gap:3px;height:20px}
.eq i{width:4px;background:var(--hot);border-radius:1px;animation:eq 1s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-duration:.7s}.eq i:nth-child(3){animation-duration:1.3s}.eq i:nth-child(4){animation-duration:.85s}.eq i:nth-child(5){animation-duration:1.1s}
@keyframes eq{from{height:20%}to{height:100%}}
.hero-h1{font-size:clamp(13px,1.5vw,17px);font-weight:700;line-height:1.6;color:var(--tx2);margin-top:14px;max-width:900px}
.hero-h1>span{display:inline-block}
.hero-copy{font-size:clamp(52px,10.5vw,138px);font-weight:900;line-height:1.02;letter-spacing:-.03em;margin:18px 0 22px}
.hero-copy em,.ph-hero h1 em{font-style:normal;background:linear-gradient(100deg,#e08a00,var(--hot) 75%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{max-width:640px;font-size:clamp(15px,1.5vw,18px);color:var(--tx2)}
.hero-lead b{color:var(--tx)}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.stats{display:flex;flex-wrap:wrap;gap:14px 44px;margin:44px 0 0}
.stats dt{font:400 clamp(38px,5vw,62px)/1 var(--disp);color:var(--tx)}
.stats dd{font:400 13px/1.4 var(--disp);letter-spacing:.24em;color:var(--gold)}

/* ティッカー */
.ticker{display:flex;background:var(--sun);color:#0b0b0e;overflow:hidden;font-size:14px}
.ticker-l{flex:none;background:#1c1a21;color:var(--sun);font:400 16px/1 var(--disp);letter-spacing:.16em;padding:13px 18px;display:flex;align-items:center;border-block:1px solid var(--gold)}
.ticker-t{overflow:hidden;flex:1;display:flex;align-items:center}
.ticker-t>div{display:flex;width:max-content;animation:slide 70s linear infinite}
.ticker-t:hover>div{animation-play-state:paused}
.ticker a{padding:0 22px;white-space:nowrap;border-right:1px solid rgba(0,0,0,.25)}
.ticker a b{font-weight:900;margin-right:8px}
.ticker a:hover{text-decoration:underline}

/* セクション */
.sec{padding-block:clamp(44px,6vw,80px) 0}
.sec.band{background:linear-gradient(180deg,var(--bg2),transparent);border-top:1px solid var(--line);margin-top:clamp(44px,6vw,80px);padding-top:clamp(40px,5vw,64px)}
main>.sec:last-child,main>article>.sec:last-child{padding-bottom:clamp(50px,7vw,90px)}
.sec-h{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 20px;margin-bottom:26px;border-bottom:1px solid var(--line);padding-bottom:16px;position:relative}
.sec-h::after{content:"";position:absolute;left:0;bottom:-1px;width:72px;height:3px;background:var(--sun)}
.sec-en{width:100%;font:400 15px/1.2 var(--disp);letter-spacing:.22em;color:var(--gold)}
.sec-h h2{font-size:clamp(24px,3.4vw,40px);font-weight:900;line-height:1.25;letter-spacing:-.01em}
.sec-h h2 small{font-size:.45em;color:var(--gold);border:1px solid var(--gold);border-radius:99px;padding:2px 10px;vertical-align:middle;margin-left:8px;font-weight:700}
.more{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--gold)}
.more:hover{text-decoration:underline}
.note,.src{color:var(--mut);font-size:13.5px;margin:10px 0 18px}
.src{margin-top:18px}
.src a,.note a,.prose a,.box a:not(.btn):not(.tlink),.ft-legal a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.src a svg{vertical-align:-2px;margin-left:2px}

/* チャート（順位つきの行） */
.chart{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:64px 128px 1fr auto;gap:18px;align-items:center;padding:14px 6px;border-bottom:1px solid var(--line);transition:background .2s}
.row:hover{background:var(--bg2)}
.rk{font:400 44px/1 var(--disp);color:#c2bbcb;text-align:center}
.row.top .rk{color:var(--gold);font-size:54px}
.row-img{display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--card)}
.row-img img,.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.row:hover .row-img img{transform:scale(1.06)}
.row-main{min-width:0}
.row-t{display:block;overflow-wrap:anywhere;font-size:clamp(16px,1.7vw,20px);font-weight:900;line-height:1.35}
.row-t:hover{color:var(--gold)}
.row-a{display:block;color:var(--mut);font-size:13.5px}
.row-a i{font-style:normal;margin-left:10px;font:400 14px/1 var(--disp);letter-spacing:.08em;color:#77748a}
.row-x{color:var(--tx2);font-size:13.5px;line-height:1.6;margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-side{display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-align:right}
.vw{font:400 21px/1 var(--disp);letter-spacing:.04em;color:var(--tx);white-space:nowrap;display:flex;align-items:center;gap:8px}
.lv{font:400 13px/1 var(--disp);letter-spacing:.1em;padding:4px 8px 3px;border-radius:4px;background:var(--card2);color:var(--mut);font-style:normal}
.lv1{color:#14864a}.lv2{color:#4f7f0c}.lv3{color:var(--gold)}.lv4{color:#cc5a0e}.lv5{color:var(--hot)}
.noimg{display:grid;place-items:center;width:100%;height:100%;aspect-ratio:16/9;font:400 46px/1 var(--disp);color:rgba(255,255,255,.85);background:linear-gradient(135deg,hsl(var(--h) 60% 28%),hsl(calc(var(--h) + 60) 60% 14%))}
.dots{display:inline-flex;gap:3px}.dots i{width:7px;height:7px;border-radius:50%;background:#ddd6c8}.dots i.on{background:var(--sun)}
@media(max-width:700px){.row{grid-template-columns:38px 92px 1fr;gap:11px;padding:12px 0}.rk{font-size:28px}.row.top .rk{font-size:34px}.row-side{grid-column:2/-1;flex-direction:row;align-items:center;justify-content:flex-start}.vw{font-size:16px}.row-x{display:none}}

/* カード */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:26px 18px}
/* 横スクロールはなし（2026-11-14 ユーザー指示）：.scroll がついていても折り返すグリッドのまま */
.grid.scroll{display:grid}
.grid.mini{grid-template-columns:repeat(4,1fr);gap:18px 12px}
.card{display:flex;flex-direction:column;min-width:0}
.card-img{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--card);box-shadow:0 8px 24px rgba(60,45,20,.16)}
.card:hover .card-img img{transform:scale(1.07)}
.card-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);opacity:0;transition:.25s;font-size:40px;color:var(--sun)}
.card:hover .card-play{opacity:1}
.card-rk{position:absolute;left:0;top:0;background:var(--sun);color:#000;font:400 20px/1 var(--disp);padding:6px 9px 4px;border-radius:0 0 8px 0}
.card-t{margin-top:10px;font-weight:900;font-size:15px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card:hover .card-t{color:var(--gold)}
.card-a{color:var(--mut);font-size:12.5px;line-height:1.4;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-m{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.card-m em{font:400 12.5px/1 var(--disp);letter-spacing:.08em;font-style:normal;padding:4px 7px 3px;border-radius:4px;background:var(--card2);color:var(--mut)}
.card-m .ws{font:700 10.5px/1.2 var(--jp);color:#111;background:var(--sun);letter-spacing:0;padding:4px 7px}
@media(max-width:560px){.grid{grid-template-columns:repeat(2,1fr);gap:20px 12px}.grid.mini{grid-template-columns:repeat(2,1fr)}.grid.scroll .card{flex-basis:170px}}

/* 特集タイル・タイル */
.atiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.atiles.scroll{display:grid}
.atiles.scroll .atile{flex:0 0 230px}
.atile{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;background:#2a2530;color:#fff;isolation:isolate;border:1px solid var(--line)}
.atile::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--img,none) center/cover;filter:grayscale(.5) contrast(1.1);transition:.5s;transform:scale(1.02)}
.atile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,8,11,.96) 8%,rgba(8,8,11,.35) 55%,rgba(255,46,99,.18))}
.atile:hover::before{filter:none;transform:scale(1.1)}
.atile:hover{border-color:var(--gold)}
.atile small{font:400 12px/1 var(--disp);letter-spacing:.2em;color:var(--sun)}
.atile b{font:400 clamp(30px,3vw,40px)/.95 var(--disp);letter-spacing:.02em;margin:6px 0 4px}
.atile span{font-size:13px;color:rgba(255,255,255,.88);font-weight:700}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px 56px 24px 24px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(135deg,var(--card),var(--bg2));transition:.25s}
.tile:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 14px 40px rgba(60,45,20,.16)}
.tile small{font:400 13px/1 var(--disp);letter-spacing:.2em;color:var(--gold)}
.tile b{font-size:20px;font-weight:900;line-height:1.35}
.tile span{color:var(--mut);font-size:13.5px;line-height:1.65}
.tile.hot{background:linear-gradient(135deg,#1c1a21,#4a2240);border-color:#1c1a21;color:#fff}
.tile.hot small{color:var(--sun)}.tile.hot span{color:#e2dbe8}
.tile>svg{position:absolute;right:20px;top:26px;font-size:22px;color:var(--gold)}
.split{display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:start}
.split-t p{margin-bottom:16px;color:var(--tx2)}
.split-t .btn{margin-top:18px}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.check li{position:relative;padding-left:28px;margin:7px 0}
.check li::before{content:"";position:absolute;left:2px;top:.55em;width:14px;height:8px;border-left:3px solid var(--gold);border-bottom:3px solid var(--gold);transform:rotate(-45deg)}
.decades{display:grid;grid-template-columns:repeat(9,1fr);gap:8px}
.decades a{padding:20px 4px 14px;text-align:center;border:1px solid var(--line);border-radius:10px;background:var(--card);transition:.2s}
.decades a:hover{background:var(--sun);color:#000;border-color:var(--gold);transform:translateY(-4px)}
.decades b{display:block;font:400 clamp(22px,2.6vw,34px)/1 var(--disp)}
.decades small{color:var(--mut);font-size:11.5px}.decades a:hover small{color:#000}
@media(max-width:820px){.decades{grid-template-columns:repeat(3,1fr)}}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.promo{position:relative;display:flex;flex-direction:column;gap:8px;padding:34px 30px;border-radius:16px;overflow:hidden;min-height:230px;justify-content:flex-end;transition:.25s}
.promo.es{background:linear-gradient(135deg,#ff2e63,#ff8a3c 60%,#f2c14e);color:#150806}
.promo.asia{background:linear-gradient(135deg,#5b2eff,#b03cff 55%,#39d5ff);color:#fff}
.promo:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(60,45,20,.16)}
.promo small{font:400 14px/1 var(--disp);letter-spacing:.22em}
.promo b{font-size:clamp(26px,3.4vw,40px);font-weight:900;line-height:1.15}
.promo span{font-size:14px;font-weight:700;opacity:.9}
.promo>svg{position:absolute;right:26px;top:26px;font-size:30px}
@media(max-width:760px){.duo{grid-template-columns:1fr}}
.today{border:1px solid var(--gold);border-radius:16px;padding:30px clamp(20px,4vw,44px);background:linear-gradient(135deg,rgba(242,193,78,.1),transparent)}
.today-t{font-size:clamp(17px,2vw,22px);font-weight:700;line-height:1.75;margin:10px 0 14px}

/* 下層ページのヒーロー */
.ph-hero{padding:clamp(40px,6vw,76px) 0 clamp(26px,4vw,44px);border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(242,193,78,.06),transparent)}
.ph-hero h1{font-size:clamp(32px,5.6vw,68px);font-weight:900;line-height:1.14;letter-spacing:-.02em;margin:8px 0 16px}
.ph-lead{max-width:780px;color:var(--tx2);font-size:clamp(15px,1.4vw,17px)}
.era-nav{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px}
.era-nav a{font:400 17px/1 var(--disp);letter-spacing:.06em;padding:9px 13px 7px;border:1px solid var(--line);border-radius:6px}
.era-nav a:hover,.era-nav a[aria-current]{background:var(--sun);color:#000;border-color:var(--gold)}
.eras{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.era{padding:26px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);display:flex;flex-direction:column;gap:4px;transition:.25s}
.era:hover{border-color:var(--gold);transform:translateY(-3px)}
.era b{font:400 56px/1 var(--disp);color:var(--gold)}
.era small{font:400 13px/1 var(--disp);letter-spacing:.2em;color:var(--mut)}
.era span{font-size:14px;color:var(--tx2);margin-top:8px}
.pn{display:flex;justify-content:space-between;padding-block:40px 80px;font:400 24px/1 var(--disp);letter-spacing:.06em}
.pn a:hover{color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chips button{padding:8px 15px;border-radius:99px;border:1px solid var(--line);background:var(--card);font-size:13.5px;font-weight:700}
.chips button.on,.chips button:hover{background:var(--sun);color:#000;border-color:var(--gold)}

/* 曲ページ */
.song-hero,.a-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);isolation:isolate}
.song-hero::before,.a-hero::before{content:"";position:absolute;inset:-60px;z-index:-2;background:var(--img,none) center/cover;filter:blur(46px) saturate(1.4);opacity:.5}
.song-hero::after,.a-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--bg) 0%,rgba(251,248,242,.5) 60%,rgba(251,248,242,.7))}
.song-hero-in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(30px,5vw,64px)}
.kicker{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.kicker>*{font:400 14px/1 var(--disp);letter-spacing:.12em;padding:6px 10px 4px;border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.7)}
.kicker a{background:var(--sun);color:#000;border-color:var(--gold);font:700 12px/1.2 var(--jp);letter-spacing:0;padding:5px 10px}
.kicker a:first-child{font:400 14px/1 var(--disp);letter-spacing:.12em;padding:6px 10px 4px}
.song h1{font-size:clamp(34px,5.4vw,70px);font-weight:900;line-height:1.05;letter-spacing:-.02em;overflow-wrap:anywhere}
.song-ja{color:var(--tx2);font-size:15px;margin-top:8px}
.song-artist{font-size:clamp(19px,2.2vw,26px);font-weight:700;margin-top:12px;color:var(--gold)}
.song-artist small{font-size:13px;color:var(--mut);margin-left:10px;font-weight:400}
.meters{display:grid;gap:9px;margin:24px 0;max-width:420px}
.meter{display:grid;grid-template-columns:120px 1fr 110px;gap:12px;align-items:center;font-size:12.5px}
.meter span{color:var(--mut)}.meter em{font-style:normal;font-weight:700}
.bar{display:flex;gap:4px}
.bar i{flex:1;height:12px;border-radius:2px;background:rgba(0,0,0,.09)}
.bar i.on{background:var(--sun);box-shadow:0 0 10px rgba(242,193,78,.6)}
.ytwrap{width:100%}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 24px 70px rgba(60,45,20,.16),0 0 0 1px rgba(0,0,0,.06)}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:.4s}
.yt:hover img{transform:scale(1.04);opacity:1}
.yt i{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;background:var(--sun);color:#000;display:grid;place-items:center;font-size:44px;box-shadow:0 0 0 10px rgba(242,193,78,.25);transition:.25s}
.yt:hover i{transform:scale(1.1);box-shadow:0 0 0 16px rgba(242,193,78,.2)}
.yt iframe,.ytwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;font-size:12px;color:var(--mut);margin-top:10px}
.yt-cap a{color:var(--gold);display:inline-flex;align-items:center;gap:4px;font-weight:700}
.ytwrap.none{aspect-ratio:16/9;display:grid;place-items:center;border:1px dashed var(--line);border-radius:14px}
.song-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,56px);padding-block:clamp(34px,5vw,60px) 10px}
.song-main{min-width:0;overflow-wrap:anywhere}
.song-main>section{margin-bottom:44px}
.song-main h2,.prose h2{font-size:clamp(21px,2.4vw,28px);font-weight:900;line-height:1.35;margin-bottom:16px}
.song-main h2 small,.prose h2 small{display:block;font:400 14px/1.3 var(--disp);letter-spacing:.22em;color:var(--gold)}
.lead{font-size:clamp(16px,1.6vw,18.5px);line-height:1.95}
.point{position:relative;margin-top:22px!important;padding:20px 20px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 22px rgba(60,45,20,.07)}.point::before{content:"";position:absolute;top:-9px;left:20px;width:76px;height:18px;border-radius:2px;background:color-mix(in srgb,var(--sun) 60%,transparent);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(60,45,20,.12)}
.phs{display:grid;gap:14px}
.ph{padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.ph-h{display:flex;align-items:center;gap:12px;justify-content:space-between}
.ph-h b{font-size:clamp(20px,2.4vw,26px);font-weight:900;line-height:1.25;color:var(--gold2)}
.say{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:19px;color:var(--gold);transition:.2s}
.say:hover,.say.on{background:var(--sun);color:#000;border-color:var(--gold)}
.say.sm{width:28px;height:28px;font-size:14px;display:inline-grid;vertical-align:middle;margin-left:8px}
.ph-ja{font-weight:700;margin-top:4px}
.ph-note{color:var(--tx2);font-size:14px;margin-top:8px}
.ph-ex{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:15px}
.ph-ex small{display:block;color:var(--mut);font-size:13px}
.trivia li{position:relative;padding:16px 18px 16px 54px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin-bottom:10px}
.trivia li::before{content:"?";position:absolute;left:16px;top:16px;width:26px;height:26px;border-radius:50%;background:var(--hot);color:#fff;display:grid;place-items:center;font:400 18px/1 var(--disp);padding-top:2px}
.box{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--card);margin-bottom:16px;font-size:14px}
.box h3{font-size:16px;font-weight:900;margin-bottom:8px}
.box p{color:var(--tx2);line-height:1.75}
.box .tlink{margin-top:10px}
.box.wide{padding:26px clamp(20px,3vw,34px);font-size:15px}
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.links a{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border:1px solid var(--line);border-radius:99px;font-size:13px;font-weight:700;background:var(--bg2);text-decoration:none!important;color:var(--tx)!important}
.links a:hover{border-color:var(--gold);color:var(--gold)!important}
.links.col{flex-direction:column}.links.col a{border-radius:8px}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.share span{font:400 15px/1 var(--disp);letter-spacing:.2em;color:var(--mut);margin-right:6px}
.share a,.share button{padding:8px 16px;border:1px solid var(--line);border-radius:99px;font-size:13px;font-weight:700}
.share a:hover,.share button:hover{border-color:var(--gold);color:var(--gold)}
@media(max-width:900px){.song-hero-in{grid-template-columns:1fr}.song-video{order:-1}.song-body{grid-template-columns:minmax(0,1fr)}.meter{grid-template-columns:104px 1fr 96px}}
.a-hero .wrap{padding-block:clamp(50px,9vw,120px) clamp(30px,4vw,50px)}
.a-hero h1{font:400 clamp(56px,11vw,150px)/.9 var(--disp);letter-spacing:.01em}
.a-ja{font-size:clamp(17px,2vw,22px);font-weight:900;margin-top:12px}
.a-ja span{display:inline-block;margin-left:14px;color:var(--gold);font-size:.85em}
.song-main p+p{margin-top:14px}
.tl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px}
.tl dt{font:400 17px/1.5 var(--disp);color:var(--gold)}.tl dd{color:var(--tx2)}

/* 文章ページ */
.prose{max-width:860px;padding-block:clamp(34px,5vw,60px)}
.prose section{margin-bottom:54px}
.prose p{margin-bottom:14px}
.prose ul:not(.check) li{position:relative;padding-left:20px;margin:8px 0}
.prose ul:not(.check) li::before{content:"";position:absolute;left:4px;top:.75em;width:6px;height:6px;border-radius:50%;background:var(--sun)}
.prose b{color:var(--tx);background:linear-gradient(transparent 62%,rgba(245,184,46,.38) 0)}
.num{counter-reset:n}.num li{counter-increment:n;position:relative;padding-left:46px;margin:14px 0}
.num li::before{content:counter(n);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;font:400 19px/1 var(--disp);padding-top:2px}
.step{border-top:1px solid var(--line);padding-top:30px}
.step-n{display:flex;align-items:baseline;gap:14px;margin-bottom:4px}
.step-n b{font:400 76px/1 var(--disp);color:var(--gold)!important}
.step-n span{font:400 16px/1 var(--disp);letter-spacing:.24em;color:var(--mut)}
.tip{border:1px dashed var(--gold);border-radius:10px;padding:14px 18px;font-size:14.5px;background:rgba(242,193,78,.06)}
.snd{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px}
.snd th,.snd td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.snd thead th{font-size:12px;color:var(--mut);font-weight:400}
.snd tbody th{font-size:17px;font-weight:900;white-space:nowrap}
.snd td:nth-child(2){color:var(--gold2);font-weight:700}
.snd td:nth-child(3){color:var(--tx2);font-size:13.5px}
@media(max-width:600px){.snd td:nth-child(3){display:none}}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.plan{padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.plan-t{font:400 44px/1 var(--disp);color:var(--gold)}
.plan h3{font-size:17px;margin:4px 0 8px}.plan p{font-size:14px;color:var(--tx2);margin:0}
.acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.act{padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.act-n{font:400 34px/1 var(--disp);color:var(--hot)}
.act h3{font-size:16.5px;line-height:1.4;margin:2px 0}
.act-t{font-size:11.5px;color:var(--gold);font-weight:700;margin-bottom:8px!important}
.act p{font-size:13.5px;color:var(--tx2);line-height:1.75;margin:0}
.lvlinks{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px}
.lvlinks a{padding:16px 8px;text-align:center;border:1px solid var(--line);border-radius:10px;background:var(--card);text-decoration:none!important;color:var(--tx)!important}
.lvlinks a:hover{border-color:var(--gold)}
.lvlinks b{display:block;font:400 30px/1 var(--disp);color:var(--gold)!important}
.lvlinks span{display:block;font-size:12.5px;font-weight:700}.lvlinks small{color:var(--mut);font-size:11.5px}
@media(max-width:600px){.lvlinks{grid-template-columns:repeat(2,1fr)}}
.gr{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.gr h3{font-size:16px;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:6px}
.gr li{padding:0!important;margin:0!important}.gr li::before{display:none}
.gr a{display:block;padding:6px 0;text-decoration:none!important;color:var(--tx)!important;font-weight:700;font-size:14px;line-height:1.4}
.gr a:hover span{color:var(--gold)}
.gr small{display:block;color:var(--mut);font-weight:400;font-size:11.5px}
.qa dt{font-weight:900;padding:16px 0 4px 34px;position:relative;border-top:1px solid var(--line)}
.qa dt::before{content:"Q";position:absolute;left:0;top:14px;font:400 26px/1 var(--disp);color:var(--gold)}
.qa dd{padding:0 0 16px 34px;color:var(--tx2);font-size:14.5px}

/* さがす */
.finder{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.fsearch{flex:1 1 260px;display:flex;align-items:center;gap:10px;padding:0 16px;border:1px solid var(--line);border-radius:99px;background:var(--card);font-size:18px;color:var(--mut)}
.fsearch:focus-within{border-color:var(--gold)}
.fsearch input{flex:1;min-width:0;background:none;border:0;color:var(--tx);font:16px var(--jp);padding:13px 0;outline:0}
.finder select{background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:99px;padding:0 14px;font:14px var(--jp);height:50px}
.count{color:var(--mut);font-size:13px;margin:6px 0 22px}.count b{font:400 26px/1 var(--disp);color:var(--gold);margin-right:4px}
.empty{text-align:center;color:var(--mut);padding:50px 0}
[hidden]{display:none!important}
.slang-q{margin:22px 0;max-width:460px;flex:none}
.slang{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.sl{padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.sl-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sl h2{font-size:24px;font-weight:900;color:var(--gold2);line-height:1.3}
.sl-ja{font-weight:700}.sl-ja span{color:var(--mut);font-weight:400;margin-left:10px;font-size:14px}
.sl-note{font-size:13.5px;color:var(--tx2);margin-top:8px}
.sl-songs{font-size:12.5px;color:var(--mut);margin-top:10px}.sl-songs a{color:var(--gold);text-decoration:underline}
.phlist{columns:3 300px;column-gap:28px}
.phlist li{break-inside:avoid;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.5}
.phlist b{display:block;font-size:16px;color:var(--gold2)}
.phlist span{display:block}.phlist a{color:var(--mut);font-size:12px}.phlist a:hover{color:var(--gold)}
.tv-list{columns:2 380px;column-gap:18px}
.tv-list li{break-inside:avoid;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin-bottom:14px;font-size:14.5px}
.tv-list a{display:block;margin-top:8px;color:var(--gold);font-size:12.5px;font-weight:700}

/* ガチャ・クイズ */
.gacha{display:grid;justify-items:center;gap:22px}
.gacha-card{width:min(760px,100%);min-height:230px;display:grid;place-content:center;gap:14px;text-align:center;padding:34px clamp(20px,4vw,48px);border-radius:20px;border:1px solid var(--gold);background:radial-gradient(circle at 50% 0%,rgba(242,193,78,.16),transparent 70%),var(--card)}
.gacha-card.pop{animation:pop .45s}
@keyframes pop{from{transform:scale(.92) rotate(-1.5deg);opacity:.2}}
.g-t{font-size:clamp(17px,2.2vw,23px);font-weight:700;line-height:1.8}
.gacha-card a{color:var(--gold);font-weight:700;font-size:14px}
.quiz{width:min(720px,100%);margin-inline:auto;text-align:center;display:grid;gap:18px;justify-items:center}
.q-n{font:400 18px/1 var(--disp);letter-spacing:.2em;color:var(--gold)}
.q-t{font-size:clamp(19px,2.6vw,27px);font-weight:900;line-height:1.5}
.q-img{width:min(420px,100%);aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.q-opts{display:grid;gap:10px;width:100%}
.q-opts button{padding:15px 18px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-weight:700;font-size:16px;transition:.15s}
.q-opts button:hover:not(:disabled){border-color:var(--gold)}
.q-opts .ok{background:#1f9a57;border-color:#1f9a57;color:#fff}.q-opts .ng{background:var(--hot);border-color:var(--hot);color:#fff}
.q-score{font:400 clamp(70px,14vw,130px)/1 var(--disp);color:var(--gold)}

/* ワークシート（A4 の紙。単位は mm と pt。1枚目=生徒用、2枚目=先生用ガイド） */
.ws-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-block:22px 8px}
.ws-bar div{display:flex;flex-wrap:wrap;gap:8px}
.ws-hint{color:var(--mut);font-size:12.5px;margin-bottom:18px}
.sheets{display:grid;gap:28px;justify-content:center;padding-bottom:44px;transform-origin:top center}
.sheet{--ac:#e4003a;--ink:#111;--k:1;width:210mm;height:297mm;background:#fff;color:var(--ink);font:9pt/1.5 var(--jp);box-shadow:0 30px 80px rgba(60,45,20,.16);overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.sheet-in{box-sizing:border-box;transform:scale(var(--k));transform-origin:0 0;width:calc(100% / var(--k));height:calc(100% / var(--k));padding:8mm 10mm 6mm;display:flex;flex-direction:column;gap:2.6mm}
.sheet h1,.sheet h2,.sheet p{margin:0}
.sh{position:relative;display:flex;align-items:center;gap:5mm;background:var(--ink);color:#fff;border-radius:3mm;padding:4.5mm 5mm 4.5mm 6mm;overflow:hidden;flex:none}
.sh-disc{position:absolute;right:54mm;top:-16mm;width:66mm;height:66mm;opacity:.95}
.sh-l{position:relative;z-index:1;min-width:0;flex:1}
.sh-k{display:flex;align-items:center;gap:2.5mm;font:400 10pt/1 var(--disp);letter-spacing:.16em;color:#cfcfcf}
.sh-k b{font-weight:400;background:var(--ac);color:#fff;padding:1.1mm 2.4mm .7mm;border-radius:1mm}
.sh-k span:last-child{font:700 7pt/1 var(--jp);letter-spacing:.08em}
.sh .sh-t{font-size:24pt;font-weight:900;line-height:1.08;letter-spacing:-.01em;margin:2.2mm 0 1mm;text-shadow:0 0 3mm #111,0 0 3mm #111}
.sh .sh-t.long{font-size:17pt}
.sh-a{font-size:11pt;font-weight:700;line-height:1.3;text-shadow:0 0 2mm #111}
.sh-a small{font-size:7.5pt;font-weight:400;margin-left:2.5mm;color:#ddd}
.sh-m{display:flex;flex-wrap:wrap;gap:1.4mm;margin-top:2.2mm}
.sh-m span{display:inline-flex;align-items:center;gap:1mm;font-size:7pt;line-height:1;border:.25mm solid rgba(255,255,255,.55);border-radius:1mm;padding:1mm 1.8mm;background:rgba(17,17,17,.7)}
.pips{display:inline-flex;gap:.6mm}
.pips b{width:1.7mm;height:1.7mm;border-radius:50%;border:.25mm solid currentColor}
.pips b.on{background:currentColor}
.sh-qrs{position:relative;z-index:1;display:flex;gap:2.5mm;flex:none}
.sh-qrs figure{margin:0;width:23.5mm;background:#fff;color:#111;border-radius:1.5mm;padding:1mm 1mm 1.2mm;text-align:center}
.sh-qrs svg{display:block;width:100%;height:auto}
.sh-qrs figcaption{font-size:6pt;line-height:1.25;font-weight:700}
.sh-qrs figcaption b{display:block;font:400 8.5pt/1.1 var(--disp);letter-spacing:.16em;color:var(--ac)}
.sh.t{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 .6mm var(--ink)}
.sh.t .sh-k{color:#555}.sh.t .sh-k b{background:var(--ink)}
.sh.t .sh-t,.sh.t .sh-a{text-shadow:0 0 3mm #fff,0 0 3mm #fff}
.sh.t .sh-a small{color:#555}
.sh.t .sh-m span{border-color:#111;background:#fff}
.sh.t .sh-disc{opacity:.12}
.sh.t .sh-qrs figure{box-shadow:inset 0 0 0 .25mm #999}
.sh-name{display:flex;gap:5mm;font:400 9pt/1 var(--disp);letter-spacing:.12em;color:#444;flex:none}
.sh-name span{display:flex;align-items:flex-end;gap:1.5mm}
.sh-name i{display:block;width:17mm;height:6mm;border-bottom:.3mm solid var(--ink)}
.sh-name .w{flex:1}.sh-name .w i{flex:1;width:auto}
.ws-about{display:grid;grid-template-columns:1.5fr 1fr;gap:3mm;flex:none}
.ws-about>:only-child{grid-column:1/-1}
.ab,.tv{border-radius:2mm;padding:2.2mm 3.2mm 2.4mm;font-size:8.3pt;line-height:1.55}
.ab{background:#f2f0ea}
.tv{box-shadow:inset 0 0 0 .4mm var(--ac)}
.ws-about h2,.tg h2{display:flex;align-items:baseline;gap:2mm;margin-bottom:.8mm}
.ws-about h2 span,.tg h2 span{font:400 10pt/1.2 var(--disp);letter-spacing:.14em;color:var(--ac)}
.ws-about h2 small,.tg h2 small{font-size:7pt;font-weight:700;color:#444}
.ws-sec{flex:none}
.ws-sec h2{display:flex;align-items:center;gap:2mm;border-bottom:.5mm solid var(--ink);padding-bottom:.9mm;margin-bottom:1.6mm}
.ws-sec h2 b{flex:none;width:5.4mm;height:5.4mm;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:400 10.5pt/1 var(--disp);padding-top:.3mm}
.ws-sec h2 span{font:400 12.5pt/1 var(--disp);letter-spacing:.1em;padding-top:.4mm;white-space:nowrap}
.ws-sec h2 small{min-width:0}
.ws-sec h2 small{font-size:7.3pt;font-weight:400;color:#444}
.sheet .q{counter-reset:q}
.sheet .q li{counter-increment:q;position:relative;padding-left:5.5mm;margin-bottom:1mm}
.sheet .q li::before{content:"("counter(q)")";position:absolute;left:0;top:0;font-size:8pt;color:var(--ac);font-weight:700}
.sheet .q small{display:block;color:#555;font-size:7.3pt;line-height:1.35}
.ln{display:block;border-bottom:.25mm solid #9a9a9a;height:5.5mm}
.ck{display:inline-block;flex:none;width:3.2mm;height:3.2mm;border:.3mm solid var(--ink);border-radius:.5mm;vertical-align:-.5mm;margin-right:.6mm}
.wd{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4mm 4.5mm}
.wd li{display:flex;align-items:flex-end;gap:1.2mm;min-width:0}
.wd b{font-size:10.5pt;line-height:1.2;white-space:nowrap}
.wd span{flex:1;min-width:8mm;height:5.6mm;border-bottom:.25mm solid #9a9a9a}
.times{font-size:7.8pt;color:#333;margin-bottom:1.2mm!important}
.kp{display:grid;gap:3mm;grid-template-columns:repeat(3,1fr)}
.kp.n2{grid-template-columns:repeat(2,1fr)}.kp.n1{grid-template-columns:1fr}
.kp>div{position:relative;border-radius:1.6mm;padding:2.6mm 2.6mm 1.6mm;margin-top:1.4mm;box-shadow:inset 0 0 0 .25mm #b5b5b5;background:radial-gradient(circle at 100% 0,#ffe3ea 0 7mm,transparent 7.1mm);display:flex;flex-direction:column}
.kp-en{font-size:11.5pt;font-weight:900;line-height:1.25;margin-top:.8mm!important}
.kp-ja{font-size:8.3pt;font-weight:700}
.kp-ex{font-size:7.8pt;line-height:1.4;margin-top:1mm!important;color:#222}
.kp-ex small{display:block;color:#666;font-size:6.8pt}
.kp-you{font:400 8pt/1 var(--disp);letter-spacing:.12em;color:var(--ac);margin-top:auto!important;padding-top:1.4mm}
.kp-you .ln{height:4.6mm}
.ws-two{display:grid;grid-template-columns:1.15fr 1fr;gap:5mm;flex:none}
.wr{font-size:8.5pt;line-height:1.5}
.ws-check{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:3mm;background:var(--ink);color:#fff;border-radius:2mm;padding:1.5mm 3.5mm;font-size:7.8pt;flex:none}
.ws-check b{font:400 10.5pt/1 var(--disp);letter-spacing:.14em;background:var(--ac);padding:1mm 2.2mm .6mm;border-radius:1mm}
.stars{font-size:10.5pt;letter-spacing:.2mm;margin-left:.6mm;vertical-align:-.3mm}
.sh-f{display:flex;justify-content:space-between;gap:4mm;font-size:6.2pt;line-height:1.3;color:#555;border-top:.25mm solid #999;padding-top:1.2mm;flex:none}
.sh-f span:first-child{white-space:nowrap}.sh-f b{font:400 7.5pt/1 var(--disp);letter-spacing:.14em;color:var(--ink);margin-right:1.5mm}
.teacher .sh-f{margin-top:auto}
.tg{display:grid;grid-template-columns:1.62fr 1fr;gap:6mm;font-size:8.8pt;line-height:1.6;margin-top:1.5mm}
.tg section{margin-bottom:4.2mm}
.tg h2{border-bottom:.4mm solid var(--ink);padding-bottom:.6mm;margin-bottom:1.6mm}
.tg-side{background:#f2f0ea;border-radius:2.5mm;padding:4mm 4mm 1mm;align-self:start}
.lp{width:100%;border-collapse:collapse}
.lp th{white-space:nowrap;text-align:left;vertical-align:top;font:400 10pt/1.5 var(--disp);letter-spacing:.04em;color:var(--ac);padding:1.1mm 3mm 1.1mm 0}
.lp td{padding:1.1mm 0;border-bottom:.2mm dotted #aaa}
.lp td b:not(:first-child){display:inline-grid;place-items:center;width:3.8mm;height:3.8mm;border-radius:50%;background:var(--ink);color:#fff;font:400 8pt/1 var(--disp);vertical-align:.2mm}
.tg-n{font-size:8pt;margin-top:1.6mm!important;color:#333}
.tg-n b{display:inline-grid;place-items:center;width:3.6mm;height:3.6mm;border-radius:50%;background:var(--ink);color:#fff;font:400 7.5pt/1 var(--disp)}
.tg-ph{margin:0}
.tg-ph dt{font-size:10.5pt;font-weight:900;line-height:1.35}
.tg-ph dt small{font-size:8pt;font-weight:700;color:#444;margin-left:2.5mm}
.tg-ph dd{margin:0 0 2.2mm;font-size:8.3pt;color:#222}
.ans-t{width:100%;border-collapse:collapse}
.ans-t th,.ans-t td{text-align:left;padding:.9mm 0;border-bottom:.2mm solid #cfcabd}
.ans-t th{font-size:10pt;padding-right:3mm}
.ans-t td{color:var(--ac);font-weight:700;font-size:8.5pt}
.tg-tv li{position:relative;padding-left:3.6mm;margin-bottom:1.6mm;font-size:8.2pt;line-height:1.55}
.tg-tv li::before{content:"";position:absolute;left:0;top:1.9mm;width:1.6mm;height:1.6mm;border-radius:50%;background:var(--ac)}
/* 作りこんだ版のワークシート */
.sh.s2{padding-block:3mm}.sh.s2 h1{font-size:18pt;margin:1.4mm 0 .4mm}.sh.s2 .sh-a{font-size:9.5pt}.sh.s2 .sh-disc{top:-26mm}.sh.s2 .sh-qrs figure{width:19mm}
.ff{display:grid;grid-template-columns:1.25fr 1fr;gap:3mm;flex:none}
.ff>div{border-radius:2mm;padding:2mm 3mm 2.2mm;font-size:7.8pt;line-height:1.45}
.ff-facts{background:#f2f0ea}.ff-tv{box-shadow:inset 0 0 0 .4mm var(--ac);background:#fff7f9}
.ff-tv ul{display:grid;gap:1mm}.ff-tv li{position:relative;padding-left:3.4mm}.ff-tv li::before{content:"!";position:absolute;left:0;top:.3mm;width:2.4mm;height:2.4mm;border-radius:50%;background:var(--ac);color:#fff;font:900 6pt/2.4mm var(--jp);text-align:center}
.ff h2{display:flex;align-items:baseline;gap:2mm;margin-bottom:.8mm}
.ff h2 span{font:400 10pt/1.2 var(--disp);letter-spacing:.14em;color:var(--ac)}.ff h2 small{font-size:7pt;font-weight:700;color:#444}
.ff dl{display:grid;grid-template-columns:auto 1fr;gap:.3mm 2.5mm;margin:0}
.ff dt{font-weight:700;color:#555;white-space:nowrap}.ff dd{margin:0}
.rd{display:grid;gap:1.4mm;margin-bottom:1.6mm}
.rd-en{font:9.6pt/1.62 Georgia,"Times New Roman",serif;color:#111}.rd-en p{margin:0;text-indent:4mm}.rd-en p:first-child{text-indent:0}
.rd-w{background:#f2f0ea;border-radius:1.6mm;padding:1.2mm 2.4mm;font-size:7.2pt;line-height:1.3;display:flex;flex-wrap:wrap;align-items:baseline;gap:.6mm 4mm}
.rd-w b{font:400 9pt/1 var(--disp);letter-spacing:.14em;color:var(--ac)}
.rd-w i{font:italic 700 8.6pt/1.2 Georgia,serif;color:#111;margin-right:1.2mm}
.rd-q{display:grid;grid-template-columns:1.1fr 1fr;gap:4mm}
.rd-h{font-size:7.8pt;font-weight:700;margin-bottom:.8mm!important}
.tf{counter-reset:q}.tf li{counter-increment:q;display:flex;justify-content:space-between;align-items:baseline;gap:2mm;padding:.5mm 0 .5mm 5mm;position:relative;border-bottom:.2mm dotted #aaa;font-size:8.4pt}
.tf li::before{content:"("counter(q)")";position:absolute;left:0;font-size:7.5pt;color:var(--ac);font-weight:700}
.tf em{font:400 9pt/1 var(--disp);letter-spacing:.16em;font-style:normal;white-space:nowrap;color:#444}
.wm2{display:grid;grid-template-columns:1fr 1fr;gap:6mm}
.wm{display:grid;grid-template-columns:1fr 1.25fr;gap:9mm;padding:0 1mm}
.wm2 .wm+.wm{border-left:.25mm dashed #bbb;padding-left:5mm}
.wm li{display:flex;align-items:center;gap:1.6mm;height:5.4mm}
.wm-r li{line-height:1.15}
.wm-l b{font-size:10.5pt;flex:1}.wm-r li{font-size:8.4pt}.wm-r em{font:700 8.4pt/1 var(--jp);font-style:normal;color:var(--ac);width:3mm}
.wm .dot{flex:none;width:2mm;height:2mm;border-radius:50%;background:var(--ink)}
.wm-l{counter-reset:w}.wm-l li{counter-increment:w}
.gs{display:grid;grid-template-columns:1.2fr 1fr;gap:4mm}
.gs-rule{position:relative;border-radius:2mm;box-shadow:inset 0 0 0 .3mm #b5b5b5;padding:3mm 3mm 2mm;margin-top:1.2mm;font-size:8pt;line-height:1.5}
.gs-form{margin:1.2mm 0;display:grid;gap:.6mm}.gs-form li{font-weight:700;font-size:8pt;background:#f2f0ea;border-radius:1mm;padding:.5mm 2mm}
.gs-ex li{margin-top:.7mm}.gs-ex b{display:block;font:italic 700 9.4pt/1.3 Georgia,serif}.gs-ex small{font-size:7.3pt;color:#555}
.gs-c{margin-top:1.2mm!important;font-size:7.3pt;color:#333}.gs-c b{background:var(--ink);color:#fff;font-size:6.8pt;padding:.2mm 1.4mm;border-radius:.8mm;margin-right:1.4mm}
.gs-pr .q li{font-size:8.3pt}
.gs-song{margin-top:1.4mm!important;font-size:7.4pt;line-height:1.45;background:#fff7f9;border-radius:1.5mm;padding:1.4mm 2.2mm}
.gs-song b{color:var(--ac);display:block;font:400 9pt/1.1 var(--disp);letter-spacing:.14em}
.bingo{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6mm}
.bingo div{position:relative;height:10.5mm;border-radius:1.6mm;box-shadow:inset 0 0 0 .3mm var(--ink);padding:1.4mm 2mm;display:flex;flex-direction:column;justify-content:space-between}
.bingo div:nth-child(5){background:#fff7f9;box-shadow:inset 0 0 0 .5mm var(--ac)}
.bingo span{font:700 8.6pt/1.2 Georgia,serif;font-style:italic}
.bingo i{font:400 6.8pt/1 var(--disp);letter-spacing:.14em;color:#999;font-style:normal;border-bottom:.25mm solid #9a9a9a;padding-bottom:.6mm}
.frame{counter-reset:f;display:grid;grid-template-columns:1fr 1fr;gap:.4mm 4mm;margin-bottom:1mm}
.frame li{font:italic 8.2pt/1.45 Georgia,serif;color:#333;padding-left:3.6mm;position:relative}
.frame li::before{content:"▸";position:absolute;left:0;color:var(--ac);font-style:normal}
.wlines .ln{height:6.1mm}
.wr-c{font-size:7.8pt;font-weight:700;margin-top:1.8mm!important}
.tg-model{font:italic 9pt/1.6 Georgia,serif;background:#f2f0ea;border-radius:2mm;padding:2mm 3mm}
.ans-h{font:400 9pt/1.2 var(--disp);letter-spacing:.12em;color:var(--ac);margin:2mm 0 .6mm!important}
.ans-tf li{font-size:7.6pt;line-height:1.4;margin-bottom:.6mm;display:flex;gap:1.4mm}
.ans-tf b{flex:none;width:3.6mm;height:3.6mm;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:400 7.5pt/1 var(--disp)}
.ans-tf em{font-style:normal;font-weight:900;color:var(--ac);flex:none}
.ans-o{counter-reset:a}.ans-o li{counter-increment:a;font-size:8pt;line-height:1.45;padding-left:4.6mm;position:relative;margin-bottom:.4mm}
.ans-o li::before{content:"("counter(a)")";position:absolute;left:0;color:var(--ac);font-weight:700;font-size:7.4pt}
.deep .ws-two{grid-template-columns:1fr 1fr}
.deep .sheet-in{gap:2mm;padding-top:7mm}.deep .sh{padding:3.4mm 5mm 3.4mm 6mm}.deep .sh-qrs figure{width:21mm}.deep .ws-sec h2{margin-bottom:1.2mm}.deep .q li{margin-bottom:.6mm}.deep .ws-two .q li{font-size:8.7pt;line-height:1.42}.deep .ws-two .ln{height:5.2mm}
.tab-l{position:absolute;top:-1.9mm;left:2.6mm;font:400 7pt/1 var(--disp);letter-spacing:.14em;font-style:normal;color:#fff;background:var(--ink);padding:.9mm 1.8mm .6mm;border-radius:.8mm}
.kp .tab-l{background:var(--ac)}
.rd-h small{font-weight:400;color:#555;font-size:7pt;margin-left:1.4mm}
.cnt{display:block;font:400 9pt/1 var(--disp);letter-spacing:.1em;text-align:right;margin-top:1mm;color:#333}
.sh.s3 .sh-k b{background:#ffc400;color:#111}
.qz{display:grid;grid-template-columns:repeat(3,1fr);gap:3mm;padding-top:1.6mm}
.qz>div{position:relative;border-radius:2mm;padding:3.2mm 3mm 2.2mm;background:#f2f0ea}
.qz-n{position:absolute;top:-2.6mm;left:2.4mm;font:400 13pt/1 var(--disp);font-style:normal;letter-spacing:.06em;color:#fff;background:var(--ac);border-radius:1mm;padding:.8mm 2mm .4mm}
.qz-q{font:700 8.8pt/1.35 Georgia,serif;margin-bottom:1.4mm!important;min-height:9mm}
.qz ol{display:grid;gap:1mm}.qz li{display:flex;align-items:center;gap:1.8mm;font-size:8.4pt;line-height:1.2;background:#fff;border-radius:5mm;padding:1mm 2mm 1mm 1mm}
.qz li b{flex:none;width:4.4mm;height:4.4mm;border-radius:50%;box-shadow:inset 0 0 0 .3mm var(--ink);display:grid;place-items:center;font:400 8.5pt/1 var(--disp)}
.fun-two{display:grid;grid-template-columns:1fr 1fr;gap:5mm;flex:none}
.wsr-g{display:grid;grid-template-columns:repeat(var(--n),1fr);width:100%;aspect-ratio:1;border-radius:1.6mm;box-shadow:inset 0 0 0 .4mm var(--ink);padding:1mm;box-sizing:border-box}
.wsr-g span{display:grid;place-items:center;font:700 10.5pt/1 "Courier New",monospace;color:#111}
.wsr-l{display:grid;grid-template-columns:repeat(3,1fr);gap:.8mm 2mm;margin-top:1.8mm;font:italic 700 8.6pt/1.2 Georgia,serif}
.wsr-l li{display:flex;align-items:center;gap:.6mm}
.tvc{display:grid;gap:2.6mm}
.tvc li{position:relative;border-radius:2mm;padding:2.6mm 2.8mm 2mm 11.5mm;background:radial-gradient(circle at 0 0,#ffe3ea 0 9mm,transparent 9.1mm),#fff;box-shadow:inset 0 0 0 .25mm #b5b5b5;font-size:8.3pt;line-height:1.58}
.tvc b{position:absolute;left:2.2mm;top:1.6mm;font:400 17pt/1 var(--disp);color:var(--ac)}
.hee{display:block;text-align:right;font-size:6.8pt;color:#666;margin-top:.4mm}.hee i{font-style:normal;color:#fff;-webkit-text-stroke:.25mm #999;font-size:9pt;margin-left:.6mm}
.rvw{display:grid;grid-template-columns:1.7fr .75fr .55fr;gap:4mm;align-items:start}
.rvw-r{display:flex;align-items:center;gap:2mm;margin-bottom:1.4mm!important}.rvw-r b{font:400 10pt/1 var(--disp);letter-spacing:.12em;color:var(--ac)}
.rvw-st{font-size:15pt;letter-spacing:.08em;color:#fff;-webkit-text-stroke:.3mm #111}.rvw-r small{font-size:6.8pt;color:#666}
.rvw-f{font:italic 9pt/1 Georgia,serif;padding:4.2mm 0 .4mm;white-space:nowrap;overflow:hidden}
.rvw-c p{font-size:7pt;color:#444;margin-bottom:1mm!important}.rvw-c b{display:block;font:400 9pt/1.1 var(--disp);letter-spacing:.12em;color:var(--ac)}
.rvw-box{aspect-ratio:1;max-height:40mm;margin-inline:auto;border-radius:1.4mm;border:.35mm dashed #999;display:flex;align-items:flex-end;padding:1.6mm;font:700 7pt/1.1 Georgia,serif;color:#bbb}
.rvw-s{text-align:center;font-size:6.8pt;color:#666}.rvw-s p{margin-top:1mm!important}
.stamp{aspect-ratio:1;border-radius:50%;border:.5mm dashed var(--ac);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6mm;color:var(--ac)}
.stamp b{font:400 9pt/1 var(--disp);letter-spacing:.08em}.stamp span{font:400 7pt/1.05 var(--disp);letter-spacing:.14em;color:#d9a3b0}.stamp small{font:700 6.2pt/1 var(--jp)}
.ans-wm{display:grid;grid-template-columns:1fr 1fr;gap:.3mm 3mm;font-size:8pt}.ans-wm span{display:flex;justify-content:space-between;border-bottom:.2mm solid #cfcabd;padding:.4mm 0;color:var(--ac);font-weight:900}.ans-wm b{color:#111;font-weight:700}
.wsr-g.ans{width:44mm;padding:.6mm;background:#fff;margin-top:.6mm}.wsr-g.ans span{font-size:5.6pt;color:#aaa}.wsr-g.ans .on{background:#ffd0db;color:#111;font-weight:900}
.deep .ws-sec h2 small{overflow:hidden;text-overflow:ellipsis}
.ws-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:28px;align-items:center;padding-block:26px 6px}
.ws-top h2{font-size:clamp(22px,2.6vw,32px);line-height:1.35;font-weight:900;margin:6px 0 10px}
.ws-top h2 em{font-style:normal;background:linear-gradient(transparent 62%,var(--sun) 62%)}
.ws-top-t>p:not(.sec-en){color:var(--mut);font-size:14.5px;line-height:1.8}
.ws-dl{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 12px}
.ws-dl .btn.big{display:grid;grid-template-columns:auto auto;column-gap:8px;row-gap:1px;justify-content:start;text-align:left;padding:11px 22px}
.ws-dl .btn.big small{grid-column:2;font-size:11.5px;font-weight:500;opacity:.8}
.ws-feat{display:flex;flex-wrap:wrap;gap:6px}
.ws-feat li{font-size:12px;font-weight:700;padding:5px 11px;border-radius:99px;background:color-mix(in srgb,var(--sun) 22%,var(--card))}
.ws-feat li::before{content:"✓ ";color:var(--hot)}
.ws-pages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ws-pages a{display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.5;color:var(--mut)}
.ws-pages img,.ws-pg{display:block;width:100%;height:auto;aspect-ratio:210/297;border-radius:4px;background:#fff;box-shadow:0 10px 26px rgba(60,45,20,.16),0 0 0 1px rgba(0,0,0,.05);transition:.2s}
.ws-pg{display:grid;place-items:center;font:400 40px/1 var(--disp);color:#ddd}
.ws-pages li:nth-child(odd) img{rotate:-1.2deg}.ws-pages li:nth-child(even) img{rotate:1deg}
.ws-pages a:hover img{rotate:0deg;translate:0 -4px;box-shadow:0 18px 36px rgba(60,45,20,.22)}
.ws-pages a>b{color:var(--tx);font:400 13px/1.2 var(--disp);letter-spacing:.08em;margin-top:8px}
.ws-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;padding-bottom:20px}
.ws-nav a{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);min-width:0}
.ws-nav a:last-child{text-align:right}.ws-nav b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-nav small{font:400 12px/1 var(--disp);letter-spacing:.12em;color:var(--hot)}
.ws-nav .ws-all{text-align:center;background:var(--tx);color:#fff;border-color:var(--tx)}.ws-nav .ws-all small{color:var(--sun)}
.sheet{scroll-margin-top:90px}
@media(max-width:900px){.ws-top{grid-template-columns:1fr}.ws-pages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ws-nav{grid-template-columns:1fr 1fr}.ws-nav .ws-all{grid-column:1/-1;order:-1}}
.ws-after{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:80px;align-items:start}
@media(max-width:800px){.ws-after{grid-template-columns:1fr}}
@media print{@page{size:A4;margin:0}
html,body{background:#fff!important}
body::before,.hd,.ft,.bc,.ws-bar,.ws-hint,.ws-after,.ws-top,.ws-nav,.p-ws .sec,.tabbar,.totop{display:none!important}
.sheets{display:block;padding:0;zoom:1!important;margin:0!important}
.sheet{box-shadow:none;margin:0;break-after:page;page-break-after:always}
.sheet:last-child{break-after:auto;page-break-after:auto}
.print-student .sheet.teacher{display:none}
.print-student .sheet{break-after:auto;page-break-after:auto}}


/* 曲ページ：データ・文法講座・英文読解・英作文 */
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.facts div{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--sun) 16%,transparent) 0 46px,transparent 47px),var(--card)}
.facts dt{font:400 13px/1 var(--disp);letter-spacing:.18em;color:var(--gold);margin-bottom:6px}.facts dd{font-weight:700;font-size:14.5px;line-height:1.6}
.gl-card,.rdg-card{position:relative;padding:24px clamp(18px,3vw,30px);border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:0 14px 40px rgba(60,45,20,.08)}
.gl-card{z-index:0}
.gl-sub{font-size:clamp(18px,2vw,22px);font-weight:900;color:var(--hot);margin-bottom:8px!important}
.gl-form{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.gl-form li{padding:7px 14px;border-radius:99px;background:var(--card2);font-weight:700;font-size:14px}
.gl-form li:first-child{background:var(--tx);color:#fff}
.gl-ex li{padding:10px 0;border-top:1px dashed var(--line)}
.gl-ex b{font:italic 700 clamp(17px,1.9vw,20px)/1.4 Georgia,"Times New Roman",serif}
.gl-ex small{display:block;color:var(--mut);font-size:13.5px}
.gl-note{margin-top:12px!important;font-size:14px;color:var(--tx2)}
.gl-note b{display:inline-block;background:var(--tx);color:#fff;font-size:11.5px;padding:2px 9px;border-radius:5px;margin-right:8px}
.gl-song{margin-top:16px!important;padding:14px 16px;border-radius:12px;background:linear-gradient(135deg,rgba(255,46,99,.08),rgba(245,184,46,.14));font-size:14.5px}
.gl-song b{display:block;font:400 15px/1.2 var(--disp);letter-spacing:.2em;color:var(--hot)}
.gl-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:18px;font-weight:900;margin:26px 0 12px}
.gl-h small{font-size:12.5px;color:var(--mut);font-weight:400}
.gl-pr{counter-reset:p;display:grid;gap:8px}
.gl-pr li{counter-increment:p}
.gl-pr details,.tfq li{border:1px solid var(--line);border-radius:12px;background:var(--card);transition:.2s}
.gl-pr summary{cursor:pointer;list-style:none;padding:14px 16px 14px 52px;position:relative;font-weight:700;font-size:15px}
.gl-pr summary::-webkit-details-marker{display:none}
.gl-pr summary::before{content:"Q"counter(p);position:absolute;left:14px;top:13px;font:400 20px/1 var(--disp);color:var(--hot)}
.gl-pr summary::after{content:"答え";float:right;font-size:11.5px;color:var(--gold);border:1px solid var(--gold);border-radius:99px;padding:1px 9px;margin-left:10px}
.gl-pr details[open]{border-color:var(--sun);background:#fffaf0}
.gl-pr details[open] summary::after{content:"とじる"}
.gl-pr details p{padding:0 16px 14px 52px;font:italic 700 18px/1.5 Georgia,serif;color:#1a7a43}
.rdg-card{background:#fffdf8}
.rdg-card>.say{position:absolute;right:18px;top:18px}
.rdg-en{font:clamp(17px,1.8vw,19.5px)/1.85 Georgia,"Times New Roman",serif;padding-right:46px}
.rdg-en p+p{margin-top:12px}
.rdg-w{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px!important}
.rdg-w span{font-size:12.5px;padding:5px 11px;border-radius:99px;background:var(--card2)}
.rdg-w b{font-family:Georgia,serif;font-style:italic;margin-right:6px}
.rdg-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:10px 14px;border-radius:12px;background:var(--card2)}
.rdg-note-h{flex:none;width:26px;height:26px;border-radius:50%;background:var(--tx);color:#fff;display:grid;place-items:center;font-size:12.5px;margin-top:1px}
.rdg-note ul{list-style:none;display:grid;gap:6px;font-size:13.5px;line-height:1.7;color:var(--tx2)}
.rdg-note li b{font-family:Georgia,serif;font-style:italic;color:var(--tx);margin-right:8px}
.rdg-note li b::after{content:" ＝"}
.rdg-ja{margin-top:14px;border-top:1px dashed var(--line);padding-top:10px}
.rdg-ja summary{cursor:pointer;color:var(--gold);font-weight:700;font-size:14px}
.rdg-ja p{margin-top:10px;color:var(--tx2);font-size:14.5px}
.tfq{display:grid;gap:8px;counter-reset:t}
.tfq li{counter-increment:t;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;padding:12px 14px 12px 48px;position:relative}
.tfq li::before{content:counter(t);position:absolute;left:14px;top:12px;width:24px;height:24px;border-radius:50%;background:var(--tx);color:#fff;display:grid;place-items:center;font:400 15px/1 var(--disp);padding-top:2px}
.tfq p{font:600 16px/1.5 Georgia,serif}
.tfq div{display:flex;gap:6px}
.tfq button{padding:8px 14px;border-radius:99px;border:2px solid var(--line);font:400 16px/1 var(--disp);letter-spacing:.12em;background:var(--card)}
.tfq button:hover{border-color:var(--tx)}
.tfq small{grid-column:1/-1;font-size:13.5px;color:var(--tx2)}
.tfq li.done button{pointer-events:none;opacity:.45}
.tfq li.done button.pick{opacity:1}
.tfq li.ok{border-color:#1f9a57;background:#f0fbf4}.tfq li.ok button.pick{background:#1f9a57;border-color:#1f9a57;color:#fff}
.tfq li.ng{border-color:var(--hot);background:#fff2f5}.tfq li.ng button.pick{background:var(--hot);border-color:var(--hot);color:#fff}
.tfq li.ok::after,.tfq li.ng::after{position:absolute;right:-8px;top:-10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;animation:pop .3s}
.tfq li.ok::after{content:"○";background:#1f9a57}.tfq li.ng::after{content:"×";background:var(--hot)}
.tfq-score{margin-top:14px!important;font-size:18px;font-weight:900;color:var(--hot);animation:pop .4s}
.wrt-f{display:grid;gap:6px;margin:14px 0}
.wrt-f li{font:italic 16px/1.5 Georgia,serif;padding:10px 14px 10px 36px;border-radius:10px;background:var(--card);border:1px solid var(--line);position:relative}
.wrt-f li::before{content:"✎";position:absolute;left:13px;top:10px;color:var(--hot);font-style:normal}
.wrt-m{font:italic 17px/1.8 Georgia,serif!important;color:var(--tx)!important}
.wrt-c{margin-top:14px!important;padding:12px 16px;border-radius:12px;border:2px dashed var(--sun);font-weight:700;font-size:14.5px}
@media(max-width:700px){.tfq li{grid-template-columns:1fr;padding-left:44px}.rdg-en{padding-right:0;padding-top:34px}.gl-pr summary::after{display:none}}

/* フッター */
.ft{margin-top:clamp(60px,8vw,110px);border-top:1px solid var(--line);background:var(--bg2);padding:54px 0 30px;font-size:14px}
.ft-in{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:34px}
.ft-brand p{color:var(--mut);margin-top:14px;font-size:13px;max-width:300px}
.ft-col h3{font:400 16px/1 var(--disp);letter-spacing:.22em;color:var(--gold);margin-bottom:12px}
.ft-col a{display:block;padding:5px 0;color:var(--tx2)}.ft-col a:hover{color:var(--gold)}
.ft-legal{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);color:var(--mut);font-size:12px}
.ft-legal p+p{margin-top:8px}.ft-legal a{margin-left:10px}.ft-legal p:first-child a{margin:0}
@media(max-width:820px){.ft-in{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* 追加：講座の表・よくある質問・マイリスト・動き */
.hero-btns.sm{margin-top:6px}
.fav.on{border-color:var(--hot);color:var(--hot)}
.fav-i{font-size:18px;line-height:1}
.fav-go{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;background:#ff1f3d;color:#fff;font-weight:900;font-size:13.5px;line-height:1.3;box-shadow:0 4px 14px rgba(255,31,61,.3)}
.fav-go:hover{background:#e3122f}
.fav-go[hidden]{display:none}
.my-yt{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:22px;padding:16px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.my-yt[hidden]{display:none}
.my-yt-go{background:#ff1f3d;color:#fff;border-color:#ff1f3d}
.my-yt-go:hover{color:#fff;background:#e3122f;border-color:#e3122f}
.my-yt p{flex-basis:100%;font-size:13px;color:var(--mut)}
.my-yt p a{color:var(--hot);font-weight:700}
.box h3.mt{margin-top:18px}
.prose.wide{max-width:1040px}
.prose h3{font-size:18px;font-weight:900;margin:26px 0 8px}
.estable{margin:16px 0 20px;border:1px solid var(--line);border-radius:var(--r)}
.estable table{width:100%;border-collapse:collapse;font-size:14.5px}
.estable th,.estable td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.estable thead th{font-size:12px;color:var(--mut);font-weight:400;background:var(--bg2)}
.estable tbody th{font-size:18px;font-weight:900;color:var(--gold2);white-space:nowrap}
.estable tbody tr:last-child>*{border-bottom:0}
.estable td:nth-child(2){font-weight:700;white-space:nowrap}
.estable td a{color:var(--gold);font-size:12.5px;text-decoration:none}
.estable td b{color:var(--tx)}
.esg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.esg>div{padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.esg h3{margin:0 0 8px;font-size:16.5px}
.esg-e{font-size:20px;font-weight:900;color:var(--gold2);margin-bottom:8px!important}
.esg-e small{display:block;font-size:13px;color:var(--mut);font-weight:400}
.esg p:last-child{font-size:14px;color:var(--tx2);margin:0}
.cog{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:16px 0 20px}
.cog>div{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);display:flex;flex-direction:column;line-height:1.4}
.cog b{font-size:17px;color:var(--gold2)}.cog span{font-size:14px}.cog small{font-size:12px;color:var(--mut)}
.lessonban{position:relative;display:flex;flex-direction:column;gap:6px;padding:30px 70px 30px 30px;border-radius:16px;background:linear-gradient(135deg,#ff2e63,#ff8a3c 60%,#f2c14e);color:#150806;transition:.25s}
.lessonban:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(60,45,20,.16)}
.lessonban small{font:400 14px/1 var(--disp);letter-spacing:.22em}
.lessonban b{font-size:clamp(22px,3vw,34px);font-weight:900;line-height:1.3}
.lessonban span{font-size:14.5px;font-weight:700}
.lessonban>svg{position:absolute;right:26px;top:50%;margin-top:-16px;font-size:32px}
.lvlinks.home{margin-bottom:14px}.lvlinks.home small{display:block;margin-top:4px;line-height:1.4}
.moods{display:flex;flex-wrap:wrap;gap:8px}
.moods a{padding:10px 16px;border:1px solid var(--line);border-radius:99px;background:var(--card);font-weight:700;font-size:14px;transition:.2s}
.moods a small{color:var(--gold);margin-left:8px;font:400 14px/1 var(--disp)}
.moods a:hover{border-color:var(--gold);color:var(--gold)}
.era-nav.jp a{font:700 13px/1.2 var(--jp);padding:9px 13px}
.plan a{color:var(--gold);text-decoration:underline}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 40px;font-weight:900;font-size:clamp(16px,1.7vw,19px);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";position:absolute;left:0;top:16px;font:400 30px/1 var(--disp);color:var(--gold)}
.faq summary::after{content:"+";position:absolute;right:8px;top:14px;font:400 30px/1 var(--disp);color:var(--mut);transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--gold)}
.faq p{padding:0 0 22px 40px;color:var(--tx2);max-width:860px}
.faq-more{display:flex;align-items:center;gap:6px;width:fit-content;margin-top:10px;font-weight:900;color:var(--tx);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}.faq-more svg{width:16px;height:16px}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ゲームコーナー・レコードくん */
.gtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.gtiles.sm{grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:12px}
.gtile{position:relative;display:flex;flex-direction:column;gap:8px;min-height:210px;padding:26px;border-radius:18px;color:#fff;overflow:hidden;transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s;isolation:isolate}
.gtiles.sm .gtile{min-height:150px;padding:18px;gap:5px}
.gtile::after{content:"";position:absolute;right:-50px;bottom:-50px;width:190px;height:190px;border-radius:50%;z-index:-1;background:repeating-radial-gradient(circle,rgba(0,0,0,.28) 0 2px,transparent 2px 9px),rgba(0,0,0,.22);transition:transform .8s}
.gtile:hover{transform:translateY(-6px) rotate(-1.2deg) scale(1.02);box-shadow:0 22px 50px rgba(60,45,20,.16)}
.gtile:hover::after{transform:rotate(200deg)}
.gtile small{font:400 14px/1 var(--disp);letter-spacing:.22em;opacity:.9}
.gtile b{font-size:clamp(22px,2.6vw,30px);font-weight:900;line-height:1.25}
.gtiles.sm .gtile b{font-size:18px}
.gtile span{font-size:14px;font-weight:700;opacity:.92;line-height:1.6}
.gtiles.sm .gtile span{font-size:12.5px;font-weight:400}
.gtile i{margin-top:auto;font:400 20px/1 var(--disp);font-style:normal;letter-spacing:.16em;display:inline-flex;align-items:center;gap:6px}
.c1{background:linear-gradient(135deg,#ff2e63,#ff7a3c)}.c2{background:linear-gradient(135deg,#6a2cff,#c13cff)}.c3{background:linear-gradient(135deg,#0a9d6e,#39d5a0)}.c4{background:linear-gradient(135deg,#0d6efd,#39d5ff)}.c5{background:linear-gradient(135deg,#d89a1f,#f2c14e);color:#150d00}.c6{background:linear-gradient(135deg,#e6007a,#ff5fb0)}
.game{width:min(860px,100%);margin-inline:auto;min-height:340px;display:grid;gap:18px;justify-items:center;align-content:start;text-align:center;padding:clamp(18px,3vw,34px);border:1px solid var(--line);border-radius:22px;background:radial-gradient(circle at 50% 0,rgba(242,193,78,.1),transparent 65%),var(--card)}
.game>#g-start{align-self:center;margin-block:90px;font-size:22px;padding:20px 56px;animation:pulse 1.4s infinite}
@keyframes pulse{50%{transform:scale(1.07);box-shadow:0 0 0 14px rgba(242,193,78,.12)}}
.g-hud{display:flex;gap:10px;align-items:stretch;width:100%;justify-content:center;flex-wrap:wrap}
.g-hud div{min-width:120px;padding:8px 16px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.g-hud small{display:block;font-size:11px;color:var(--mut)}.g-hud b{font:400 30px/1 var(--disp);color:var(--gold)}
.g-mute{font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:12px;padding:0 14px}
.g-card{display:flex;flex-direction:column;gap:4px;width:100%;text-align:center;align-items:center}
.g-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;box-shadow:0 12px 30px rgba(60,45,20,.16)}
.g-card b{font-size:clamp(17px,2.2vw,22px);font-weight:900;line-height:1.3;margin-top:8px}.g-card span{color:var(--mut);font-size:13px}
.g-card.sm{width:220px}.g-card em{margin-top:12px;font-style:normal}
.hl{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start;width:100%}
.hl-vs{align-self:center;font:400 34px/1 var(--disp);color:var(--hot);background:var(--bg);border:2px solid var(--hot);border-radius:50%;width:64px;height:64px;display:grid;place-items:center}
.hl-v{font:400 clamp(30px,5vw,48px)/1.1 var(--disp);color:var(--gold);margin-top:8px}.hl-v.ok{color:#14864a}.hl-v.ng{color:var(--hot)}
.hl-btn{display:grid;gap:8px;margin-top:10px}
@media(max-width:640px){.hl{grid-template-columns:1fr}.hl-vs{justify-self:center;width:48px;height:48px;font-size:24px}}
.q-opts button b{display:block}.q-opts button small{color:var(--mut);font-weight:400;font-size:12.5px}
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}
.mem-c{position:relative;aspect-ratio:4/3;border-radius:12px;perspective:600px}
.mem-f,.mem-b{position:absolute;inset:0;display:grid;place-items:center;border-radius:12px;backface-visibility:hidden;transition:transform .4s;padding:6px;font-weight:900;line-height:1.3}
.mem-f{background:linear-gradient(135deg,#fff,#f3eee4);border:1px solid var(--line);font-size:30px;color:var(--gold)}
.mem-b{background:#fff;color:#111;box-shadow:inset 0 0 0 1px var(--line);transform:rotateY(180deg);font-size:clamp(11px,1.6vw,15px)}.mem-b.en{background:var(--sun);font-size:clamp(12px,1.8vw,17px)}
.mem-c.on .mem-f{transform:rotateY(180deg)}.mem-c.on .mem-b{transform:none}
.mem-c.hit .mem-b{box-shadow:0 0 0 3px #3ddc84;animation:pop .4s}
.ty{display:grid;gap:14px;width:100%;justify-items:center}
.ty-card{display:flex;gap:14px;align-items:center;text-align:left}.ty-card img{width:150px;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.ty-card b{display:block;font-size:20px;font-weight:900;line-height:1.3}.ty-card span{color:var(--mut);font-size:13px}
.ty-target{font:400 clamp(26px,5vw,46px)/1.2 ui-monospace,Consolas,monospace;letter-spacing:.04em;color:#a7a1b0;word-break:break-word}
.ty-target b{color:var(--gold);font-weight:400}.ty-target.ng{color:var(--hot)}
.ty-in{width:min(560px,100%);padding:16px 20px;border-radius:14px;border:2px solid var(--line);background:var(--bg);color:var(--tx);font:20px ui-monospace,Consolas,monospace;text-align:center;outline:0}
.ty-in:focus{border-color:var(--gold)}
.rl{display:grid;gap:22px;justify-items:center}
.rl-disc{width:220px;height:220px;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 3px,#1c1c22 3px 6px);border:3px solid var(--gold);display:grid;place-items:center;box-shadow:0 20px 50px rgba(60,45,20,.16)}
.rl-disc span{width:76px;height:76px;border-radius:50%;background:conic-gradient(var(--hot),var(--gold),var(--hot));border:6px solid #0b0b0e}
.rl-disc.spin{animation:spin .5s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.rl-out{min-height:150px;display:grid;place-items:center;width:min(420px,100%)}
.g-end{display:grid;gap:10px;justify-items:center}.q-score small{font-size:.3em;margin-left:6px}
.g-rank{font-size:20px}.g-rank b{color:var(--gold);font-size:1.3em}.g-new{color:var(--hot);animation:pulse 1s infinite;display:inline-block}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:99}
.buddy{position:fixed;left:16px;bottom:16px;z-index:40;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.buddy-b{width:66px;height:66px;border-radius:50%;filter:drop-shadow(0 8px 18px rgba(60,45,20,.16));transition:transform .3s cubic-bezier(.3,1.8,.5,1);animation:bob 3.2s ease-in-out infinite}
.buddy-b svg{width:100%;height:100%}
.buddy-b:hover{transform:scale(1.14) rotate(-10deg)}
@keyframes bob{50%{translate:0 -6px}}
.buddy-menu{width:260px;padding:16px;border-radius:18px 18px 18px 4px;background:#fff;border:1px solid var(--line);color:#111;box-shadow:0 18px 50px rgba(60,45,20,.16);display:grid;gap:8px;animation:pop .3s}
.buddy-menu p{font-weight:700;font-size:14px;line-height:1.6;margin-bottom:4px}
.buddy-menu button,.buddy-menu a{display:block;text-align:left;padding:10px 14px;border-radius:10px;background:#f2f0ea;font-weight:700;font-size:13.5px;color:#111}
.buddy-menu button:hover,.buddy-menu a:hover{background:var(--sun)}
.p-ws .buddy,.p-game .buddy{display:none}
@media print{.buddy{display:none}}
.estable td:last-child{white-space:nowrap}

/* 上へもどる・下のタブバー・スマホ向けの短い見せ方 */
.totop{position:fixed;right:20px;bottom:24px;z-index:40;width:52px;height:52px;border-radius:50%;background:var(--tx);color:#fff;display:grid;place-items:center;font-size:22px;box-shadow:0 10px 26px rgba(28,26,33,.28);transition:.2s;animation:pop .3s}
.totop:hover{background:var(--sun);color:#111;transform:translateY(-3px)}
.tabbar{display:none}
.more-btn{display:flex;margin:20px auto 0}
.toc{display:flex;flex-wrap:wrap;gap:8px;padding:10px max(20px,calc((100% - 1200px)/2));background:rgba(251,248,242,.94);border-bottom:1px solid var(--line)}
.toc::-webkit-scrollbar{display:none}
.toc a{flex:none;font-size:12.5px;font-weight:700;padding:6px 13px;border:1px solid var(--line);border-radius:99px;white-space:nowrap}
.toc a:hover{border-color:var(--gold);color:var(--gold)}
.prose h2,.step{scroll-margin-top:124px}
@media(max-width:700px){
body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
.tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(251,248,242,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 7px;font-size:10px;font-weight:700;line-height:1;color:var(--mut)}
.tabbar svg{font-size:22px}
.tabbar [aria-current]{color:var(--gold)}
.nav,.nav-bg{bottom:calc(60px + env(safe-area-inset-bottom))}
.nav>a{font-size:17px;padding:11px 6px}
.buddy{left:10px;bottom:calc(72px + env(safe-area-inset-bottom))}.buddy-b{width:52px;height:52px}
.totop{right:14px;bottom:calc(76px + env(safe-area-inset-bottom));width:46px;height:46px;font-size:19px}
.wrap{width:calc(100% - 32px)}
.hero{min-height:0}.hero-in{padding:34px 0 28px}
.hero-k{font-size:12px;letter-spacing:.14em}.hero-lead{font-size:14px}
.hero-btns{margin-top:18px;gap:8px}.btn.big{padding:13px 20px;font-size:15px}
.stats{gap:8px 22px;margin-top:22px}.stats dt{font-size:34px}.stats dd{font-size:11px}
.sec{padding-top:38px}.sec-h{margin-bottom:16px;padding-bottom:12px}
.ph-hero{padding:26px 0 20px}.ph-lead{font-size:14px;line-height:1.75}
.p-home .chart .row:nth-child(n+6){display:none}
.tiles,.gtiles,.gtiles.sm,.eras,.plans,.duo{display:grid;grid-template-columns:1fr}
.tiles::-webkit-scrollbar,.gtiles::-webkit-scrollbar,.eras::-webkit-scrollbar,.plans::-webkit-scrollbar,.duo::-webkit-scrollbar{display:none}
.tile,.gtile,.era,.plan,.promo{flex:0 0 80%;scroll-snap-align:center}
.gtiles.sm .gtile{flex-basis:56%;min-height:132px}
.gtile{min-height:170px;padding:20px}.promo{min-height:180px;padding:24px}
.atiles:not(.scroll){grid-template-columns:1fr 1fr;gap:10px}.atile{padding:12px}.atile b{font-size:24px}
.lvlinks.home{display:grid;grid-template-columns:1fr 1fr}
.moods{flex-wrap:wrap}
.split-t p{font-size:14px}
.song-hero-in{padding-block:18px 26px;gap:18px}
.song h1{font-size:30px}.meters{margin:16px 0}
.song-body{padding-top:26px;gap:22px}.song-main>section{margin-bottom:30px}
.lead{font-size:15.5px;line-height:1.85}
.lead.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ph{padding:14px 16px;cursor:pointer}
.ph:not(.open) .ph-note,.ph:not(.open) .ph-ex{display:none}
.ph:not(.open)::after{content:"タップで使い方と例文";display:block;font-size:11px;color:var(--mut);margin-top:4px}
.ph-h b{font-size:19px}
.trivia li{padding:13px 14px 13px 48px;font-size:14.5px}
.box{padding:16px}
.prose{padding-block:24px}.prose section{margin-bottom:34px}.step-n b{font-size:54px}
.faq summary{padding:15px 36px 15px 34px;font-size:15px}.faq p{padding-left:34px;font-size:14px}
.ft{padding:34px 0 20px;margin-top:50px}.ft-in{gap:22px}
.game{padding:14px;border-radius:16px}.g-hud div{min-width:92px;padding:6px 10px}.g-hud b{font-size:24px}
.mem{gap:6px}
.toc{top:64px;padding-inline:16px}
}

/* レコードくんの絵・大きなバナー・動き（2026-11-13「もう少し楽しく！」） */
@keyframes float{50%{transform:translateY(-14px) rotate(3deg)}}
@keyframes wob{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.hero-rk{position:absolute;z-index:1;right:max(16px,calc((100% - 1260px)/2));bottom:60px;width:min(27vw,360px);height:auto;filter:drop-shadow(0 22px 30px rgba(60,45,20,.28));animation:float 4.5s ease-in-out infinite;cursor:pointer}
.hero-in{z-index:2}
/* ボタンがキャラにかぶらないよう、キャラの幅だけ右をあける（2026-11-14「キャラが隠れちゃっている」） */
@media(min-width:701px){.hero-btns,.hero .stats{max-width:calc(100% - min(27vw,360px) - 12px)}}
.sec-h.has-rk{padding-left:108px;min-height:100px}
.sec-rk{position:absolute;left:-6px;bottom:4px;width:100px;height:100px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(60,45,20,.18));transition:transform .3s cubic-bezier(.3,1.8,.5,1);cursor:pointer}
.sec-h.has-rk::after{left:108px}
.sec-rk:hover,.deco-rk:hover,.box-rk:hover{animation:wob .5s ease-in-out}
.gl,.rdg,.wrt,.deco{position:relative}
.deco-rk{position:absolute;right:-4px;top:-34px;width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(60,45,20,.18));z-index:2;cursor:pointer}
.gl>h2,.rdg>h2,.wrt>h2,.deco>h2{padding-right:110px}
.box.teach{position:relative;border:2px solid var(--sun);background:linear-gradient(135deg,#fffaf0,#fff)}
.box-rk{float:right;width:86px;height:86px;margin:-14px -8px 0 6px}
.box.teach .tlink{display:flex;margin-top:8px}
.buddy-b img{width:100%;height:100%;object-fit:contain}
.bigban{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);border-radius:26px;overflow:hidden;background:linear-gradient(135deg,var(--hot),#ff7a3c 55%,var(--sun));color:#fff;box-shadow:0 22px 50px rgba(232,23,79,.22);isolation:isolate;transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.bigban:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 30px 60px rgba(232,23,79,.3)}
.bigban img{width:100%;height:100%;object-fit:cover;order:2;transition:transform .6s}
.bigban:hover img{transform:scale(1.05)}
.bigban-t{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(24px,4vw,48px)}
.bigban-t small{font:400 16px/1 var(--disp);letter-spacing:.22em;background:#fff;color:var(--hot);align-self:flex-start;padding:7px 12px 5px;border-radius:6px;animation:pulse 1.8s infinite}
.bigban-t b{font-size:clamp(26px,3.6vw,46px);font-weight:900;line-height:1.2;text-shadow:0 3px 0 rgba(0,0,0,.12)}
.bigban-t>span{font-size:15px;font-weight:700;line-height:1.7;opacity:.95}
.bigban-t .btn{align-self:flex-start;font-style:normal;margin-top:6px}
.bigban.stage{display:block;background:#fbf5e8;color:var(--tx);box-shadow:0 22px 50px rgba(60,45,20,.14)}
.bigban.stage img{position:absolute;top:0;right:0;bottom:0;left:auto;width:70%;z-index:-1;object-position:60% center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
.bigban.stage .bigban-t{max-width:min(520px,55%);min-height:clamp(300px,34vw,440px);background:linear-gradient(90deg,rgba(251,245,232,.96) 60%,transparent)}
.bigban.stage .bigban-t small{background:var(--tx);color:var(--sun)}
.bigban.stage .bigban-t b{text-shadow:none}
.bigban.stage .bigban-t b,.bigban.stage .bigban-t>span{color:var(--tx)}
.card-img{transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .35s}
.card:hover .card-img{transform:translateY(-6px) rotate(-1.2deg);box-shadow:0 18px 34px rgba(60,45,20,.22)}
.has-motion .sec-rk,.has-motion .deco-rk,.has-motion .box-rk{opacity:0}
.mconf{position:fixed;top:0;left:0;z-index:99;pointer-events:none;width:10px;height:14px;border-radius:2px}
@media(max-width:700px){
.hero-rk{width:112px;right:8px;bottom:auto;top:178px}
.hero-copy{padding-right:0}
.sec-h.has-rk{padding-left:76px;min-height:72px}.sec-rk{width:70px;height:70px;left:-4px}.sec-h.has-rk::after{left:76px}
.deco-rk{width:72px;height:72px;top:-22px}.gl>h2,.rdg>h2,.wrt>h2,.deco>h2{padding-right:76px}
.bigban{grid-template-columns:1fr}.bigban img{order:0;aspect-ratio:16/9;height:auto}
.bigban.stage img{position:static;z-index:0;width:100%;-webkit-mask-image:none;mask-image:none}.bigban.stage .bigban-t{max-width:none;min-height:0;background:none}
}
@media(prefers-reduced-motion:reduce){.hero-rk,.bigban-t small{animation:none}}
/* ホームを短く（2026-11-13「ずらーっと長すぎる」） */
.p-home .hero{min-height:min(72vh,660px)}
.p-home .hero-in{padding:56px 0 40px}
.p-home .stats{margin-top:30px}
.p-home .faq{columns:2 440px;column-gap:32px}
.p-home .faq details{break-inside:avoid}
.p-home .sec{padding-top:clamp(36px,4.5vw,60px)}
.p-home .tiles{display:grid}
.p-home .tile{flex:0 0 300px;scroll-snap-align:start}
/* LESSONS をコンパクトに（2026-11-14「歌で学ぶ、歌を学ぶ ココ長い」） */
.p-home .tiles.cmp{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.p-home .tiles.cmp .tile{flex:none;justify-content:center;gap:5px;min-height:76px;padding:14px 40px 14px 16px;border-radius:14px}
.p-home .tiles.cmp .tile small{font-size:10.5px;letter-spacing:.12em;line-height:1.2}
.p-home .tiles.cmp .tile b{font-size:15.5px;line-height:1.35}
.p-home .tiles.cmp .tile>svg{top:50%;right:14px;font-size:17px;transform:translateY(-50%)}
@media(max-width:700px){.p-home .tiles.cmp{grid-template-columns:1fr 1fr;gap:8px}.p-home .tiles.cmp .tile{min-height:68px;padding:12px 30px 12px 12px}.p-home .tiles.cmp .tile b{font-size:13.5px}.p-home .tiles.cmp .tile small{font-size:9.5px;letter-spacing:.06em}.p-home .tiles.cmp .tile>svg{right:10px;font-size:14px}}
.p-home .atile{aspect-ratio:1}

/* ラップで覚える英語スラング講座（/learn/rap/） */
.rap-toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.rap-toc a{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);font-weight:900;font-size:14px;line-height:1.4;transition:.2s}
.rap-toc a:hover{border-color:var(--gold);transform:translateY(-2px)}
.rap-toc b{font:400 30px/1 var(--disp);color:var(--hot)}.rap-toc small{font:400 12px/1 var(--disp);letter-spacing:.2em;color:var(--gold)}
.rap-toc a.g{background:linear-gradient(135deg,#1c1a21,#3a2550);color:#fff;border-color:transparent}.rap-toc a.g b{color:var(--sun)}
.rap .step{margin-bottom:56px}
.studio{--neon:#ff2e63;margin:22px 0;padding:clamp(16px,3vw,28px);border-radius:20px;background:radial-gradient(700px 300px at 90% 0,rgba(255,46,99,.28),transparent 60%),radial-gradient(600px 300px at 0 100%,rgba(57,213,255,.18),transparent 60%),#16131c;color:#f4efe6;position:relative}
.studio::before{content:"ON AIR";position:absolute;right:20px;top:16px;font:400 13px/1 var(--disp);letter-spacing:.24em;color:#777;padding:5px 10px;border:1px solid #444;border-radius:6px}
.studio.counting::before{content:"COUNT " attr(data-count);color:#16131c;background:var(--sun);border-color:var(--sun)}
.st-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 90px 18px 0}
.st-tabs button{padding:9px 15px;border-radius:12px;border:1px solid #3b3446;background:#221d2b;color:#cfc8d8;font-weight:900;font-size:14px;line-height:1.3;text-align:left}
.st-tabs button small{display:block;font:400 11px/1 var(--disp);letter-spacing:.18em;color:var(--sun)}
.st-tabs button i{font-style:normal;font-size:11px;color:#9a93a6;margin-left:6px;font-weight:700}
.st-tabs button.on{background:var(--neon);border-color:var(--neon);color:#fff}.st-tabs button.on small,.st-tabs button.on i{color:#ffe6ee}
.st-bars{display:grid;gap:8px}
.st-bar{display:grid;grid-template-columns:26px repeat(4,1fr) 34px;gap:6px;align-items:center;padding:6px;border-radius:12px;transition:background .15s}
.st-bar.on{background:rgba(255,255,255,.06)}
.st-n{font:400 20px/1 var(--disp);color:#6d6578;text-align:center}
.st-c{padding:10px 8px;border-radius:9px;background:#221d2b;border:1px solid #2f2839;font-size:clamp(14px,1.9vw,18px);line-height:1.3;color:#a59db0;text-align:center;transition:transform .08s,background .08s}
.st-c b{color:#fff;font-weight:900;background:none!important}
.st-c.on{background:var(--sun);border-color:var(--sun);color:#3a2a00;transform:scale(1.06)}.st-c.on b{color:#000}
.st-bar .say{color:#cfc8d8}
.st-ja{grid-column:2/-1;font-size:12px;color:#8d8598;margin-top:-2px}
.st-rh{margin:12px 0 0!important;font-size:13.5px;color:#cfc8d8}.st-rh span{color:var(--sun);font-weight:700}
.st-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:20px}
.st-bpm,.st-cnt{display:flex;align-items:center;gap:8px;font-size:14px;color:#cfc8d8}
.st-bpm input{accent-color:var(--neon);width:140px}.st-bpm output{font:400 24px/1 var(--disp);color:#fff;min-width:2.2em;text-align:right}
.st-help{margin:12px 0 0!important;font-size:12.5px;color:#8d8598}
.rh-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:18px 0}
.rh-types>div{padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.rh-types h3{margin:0 0 6px!important;font-size:16px}.rh-types p{font-size:13.5px;color:var(--tx2);margin:0}
.rh-types .rh-ex{font-size:17px;font-weight:900;color:var(--hot);margin:0 0 6px}
.rh-find{margin-top:22px;padding:22px;border-radius:16px;border:2px solid var(--sun);background:linear-gradient(135deg,#fffaf0,#fff)}
.rh-find h3{margin:0 0 6px!important}.rh-find .fsearch{max-width:420px;margin-top:10px}
.rh-out{margin-top:14px;font-size:14px}.rh-out ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.prose .rh-out li{padding:6px 14px;margin:0;border-radius:99px;background:var(--sun2);font-weight:900;font-size:16px}.prose .rh-out li::before{display:none}
.rs-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;margin-top:6px}
.rs{padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);display:flex;flex-direction:column}
.rs[hidden]{display:none}
.rs-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.rs h3{margin:0!important;font-size:23px;color:var(--gold2);line-height:1.3}
.prose .rs p{margin:0}
.rs-r{font-size:12.5px;color:var(--mut);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rs-c{font-size:11px;font-weight:700;padding:1px 9px;border-radius:99px;background:#e3f4ea;color:#1b7a46}.rs-c.c1{background:#fff1d6;color:#8f5600}
.prose .rs .rs-ja{margin-top:6px;font-weight:900}
.prose .rs .rs-note{margin-top:6px;font-size:13.5px;color:var(--tx2);line-height:1.7}
.prose .rs .ph-ex{margin-top:auto;padding-top:12px}
.rs-more{margin-top:10px;font-size:12.5px;color:var(--gold);font-weight:700;display:inline-flex;align-items:center;gap:4px}.rs-more:hover{text-decoration:underline}
.rs-dict{margin-top:20px}
.aave{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px}
.aave th,.aave td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.aave thead th{font-size:12px;color:var(--mut);font-weight:400}
.aave tbody th{font-size:13.5px;white-space:nowrap;color:var(--hot)}
.aave td b{font-size:16px;background:none!important;color:var(--tx)}
.aave tr.aave-n td{font-size:13px;color:var(--tx2);padding-top:0;border-bottom:2px solid var(--line)}
.aave tr:not(.aave-n) th,.aave tr:not(.aave-n) td{border-bottom:0}
.aq{margin:22px 0;padding:20px 22px;border-radius:16px;background:var(--bg2);border:1px solid var(--line)}
.aq h3{margin:0 0 10px!important}
.aq-q small{display:block;font:400 14px/1 var(--disp);letter-spacing:.2em;color:var(--gold)}.aq-q b{font-size:22px;background:none!important}
.aq-o{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.aq-o button{padding:13px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-weight:700}
.aq-o button:hover:not(:disabled){border-color:var(--gold)}
.aq-o .ok{background:#1f9a57;border-color:#1f9a57;color:#fff}.aq-o .ng{background:var(--hot);border-color:var(--hot);color:#fff}
.prose .aq-w{margin-top:12px;font-size:14px}.aq-w .btn{margin-left:8px}
.aq-end{font-size:18px}.aq-end b{font-size:30px;color:var(--gold);background:none!important}
.rap-tl{position:relative;margin:20px 0}
.prose .rap-tl li{display:grid;grid-template-columns:86px 1fr;gap:14px;padding:12px 0;margin:0;border-bottom:1px dashed var(--line)}
.prose .rap-tl li::before{display:none}
.rap-tl b{font:400 28px/1.1 var(--disp);color:var(--hot);background:none!important}
.prose .rap-tl p{margin:0;font-size:14.5px}
.rap-tpl{margin:20px 0;padding:20px 24px;border-radius:16px;background:#16131c;color:#f4efe6}
.prose .rap-tpl p{margin:4px 0;font-size:clamp(15px,2vw,18px)}
.rap-tpl b{color:var(--sun);background:none!important}
.prose .rap-tpl .rap-tpl-h{font-size:12.5px;color:#9a93a6;margin-bottom:8px}
.rap-acts{margin-top:18px}
.rap-games{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.rap-g{min-height:380px;align-content:center}
.q-opts.two{grid-template-columns:1fr 1fr}
.rap-g mark{background:var(--sun2);padding:0 4px;border-radius:4px}
.rap-ban{background:linear-gradient(135deg,#16131c,#3a2550 60%,#ff2e63);color:#fff}
.rap-ban small{color:var(--sun)}
.prose a.lessonban{color:#150806;text-decoration:none;margin-top:22px}
.prose a.rap-ban{color:#fff}
.prose a.lessonban b,.prose a.lessonban span,.prose a.lessonban small{color:inherit;background:none;text-decoration:none}
.prose a.rap-ban small{color:var(--sun)}
.prose a.rap-ban span{color:#e9e2f2}
@media(max-width:600px){
.st-bar{grid-template-columns:20px repeat(2,1fr) 30px}.st-bar .st-c:nth-of-type(3){grid-column:2}.st-bar .say{grid-row:1;grid-column:4}
.st-tabs{margin-right:0;margin-top:26px}
.aave thead{display:none}.aave tbody th{white-space:normal}
.aq-o,.q-opts.two{grid-template-columns:1fr}
.prose .rap-tl li{grid-template-columns:62px 1fr}
}

/* 伝説級トリビア */
.wow-b{display:inline-block;font-size:11.5px;font-weight:900;letter-spacing:.08em;color:#fff;background:linear-gradient(135deg,var(--hot),var(--gold));border-radius:99px;padding:2px 10px;margin:0 8px 6px 0;vertical-align:2px}
.trivia li.wow{border-color:var(--gold);background:radial-gradient(circle at 0 0,rgba(242,193,78,.13),transparent 60%),var(--card)}
.trivia li.wow::before{content:"!";background:var(--gold);color:#fff}
.gacha-card .wow-b{justify-self:center;margin:0}
.lead-s{color:var(--tx2);font-size:14px;margin:-6px 0 18px}
.tv-list.legend li{border-color:rgba(242,193,78,.45)}

/* ヒップホップ史 超上級講座（/learn/rap/history/） */
.hx-warn{display:flex;gap:16px;align-items:flex-start;padding:18px 22px;border-radius:14px;border:2px solid var(--hot);background:#fff5f7;font-size:14.5px}
.hx-warn>b{flex:none;padding:4px 12px;border-radius:99px;background:var(--hot);color:#fff;font-size:13px}
.hx-warn p{margin:0;color:var(--tx2)}.hx-warn a{color:var(--hot);text-decoration:underline}
.hx-intro{padding:24px 26px;border-radius:16px;background:var(--bg2);border:1px solid var(--line)}
.prose .hx-y{margin:-2px 0 4px;font:400 22px/1 var(--disp);letter-spacing:.12em;color:var(--hot)}
.hx-facts,.hx-tl{margin:18px 0}
.prose .hx-facts li,.prose .hx-tl li{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:13px 0;margin:0;border-bottom:1px dashed var(--line)}
.prose .hx-facts li::before,.prose .hx-tl li::before{display:none}
.hx-facts li>b,.hx-tl li>b{font:400 24px/1.15 var(--disp);color:var(--gold);background:none!important}
.prose .hx-facts p,.prose .hx-tl p{margin:0;font-size:14.5px;line-height:1.8}
.hx-tl{border-left:3px solid var(--hot);padding-left:16px}
.hx-words{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:18px 0}
.hx-w{padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:grid;gap:2px}
.prose .hx-w p{margin:0;font-size:19px;font-weight:900;color:var(--gold2)}
.hx-w b{font-size:13.5px;background:none!important}.hx-w span{font-size:12.5px;color:var(--tx2);line-height:1.65}
.rb{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.rb-c{padding:20px;border-radius:16px;color:#fff}
.rb-c.blue{background:linear-gradient(135deg,#0b3d91,#1565c0)}.rb-c.red{background:linear-gradient(135deg,#8e0e1f,#c62828)}
.prose .rb-c p{margin:0;font-size:13.5px;line-height:1.75;color:#f1f1f6}
.prose .rb-c .rb-k{font:400 30px/1 var(--disp);letter-spacing:.2em;color:rgba(255,255,255,.55);margin-bottom:4px}
.prose .rb-c h3{margin:0 0 8px;color:#fff}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:20px 0}
.vs-p{padding:20px;border-radius:16px;background:#16131c;color:#f4efe6}
.vs-p.w{box-shadow:inset 0 0 0 1px rgba(57,213,255,.5),0 14px 36px -16px rgba(57,213,255,.8)}.vs-p.e{box-shadow:inset 0 0 0 1px rgba(245,184,46,.55),0 14px 36px -16px rgba(245,184,46,.85)}.prose .vs-p.w .vs-k{color:#39d5ff}.prose .vs-p.e .vs-k{color:var(--sun)}
.prose .vs-p p{margin:0;font-size:13.5px;color:#cfc8d8}
.prose .vs-p .vs-k{font:400 16px/1 var(--disp);letter-spacing:.24em;color:#8d8598;margin-bottom:4px}
.prose .vs-p h3{margin:0 0 6px;color:#fff;font-size:22px}
.prose .vs-x{margin:0;font:400 44px/1 var(--disp);color:var(--hot)}
.beatlab{margin:24px 0;padding:22px;border-radius:18px;background:#16131c;color:#f4efe6}
.prose .beatlab h3{margin:0 0 6px;color:#fff}.prose .beatlab p{color:#cfc8d8;font-size:14px}
.bl-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.bl-b{display:grid;gap:4px;padding:18px;border-radius:14px;border:2px solid #3b3446;background:#221d2b;text-align:left;transition:.15s}
.bl-b small{font:400 12px/1 var(--disp);letter-spacing:.2em;color:var(--sun)}
.bl-b b{font-size:20px;color:#fff}.bl-b span{font-size:12.5px;color:#a59db0}
.bl-b:hover{border-color:var(--sun)}
.bl-b.on{border-color:var(--hot);background:#3a1826;box-shadow:0 0 0 4px rgba(255,46,99,.25)}
.prose .bl-now{margin:12px 0 0;min-height:1.6em;color:var(--sun2)!important;font-weight:700}
.hx-travel{border:2px solid var(--sun)}
.hx-ls{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:16px 0}
.prose .hx-ls li{padding:0;margin:0}.prose .hx-ls li::before{display:none}
.hx-ls a{display:grid;gap:2px;padding:14px 16px 6px;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:var(--card)}
.hx-ls a:hover b{text-decoration:underline}
.hx-ls b{font-size:16px;background:none!important;color:var(--tx)}.hx-ls span{font-size:12.5px;color:var(--mut)}
.hx-ls small{display:block;padding:0 16px 12px;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;background:var(--card);font-size:12.5px;color:var(--gold2)}
.hx-q{margin-top:16px}
.q-opts.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:600px){
.hx-warn{flex-direction:column;gap:8px}
.prose .hx-facts li,.prose .hx-tl li{grid-template-columns:64px 1fr;gap:10px}
.hx-facts li>b,.hx-tl li>b{font-size:19px}
.rb,.bl-btns{grid-template-columns:1fr}
.vs{grid-template-columns:1fr}.prose .vs-x{text-align:center;font-size:32px}
.q-opts.three{grid-template-columns:1fr}
}

/* 歌詞で学ぶ文法 超絶解説（scripts/grammar-lesson.mjs） */
.gl-lead{color:var(--tx2);margin-bottom:14px!important}
.gl-toc{display:grid;gap:6px;margin:0 0 18px;padding:14px 16px;border-radius:12px;background:var(--card2)}
.gl-toc li{display:flex;gap:10px;align-items:baseline;font-weight:700;font-size:14.5px}
.gl-toc span{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--hot);color:#fff;font:400 14px/1 var(--disp)}
.gl-pt,.gl-snd{margin:32px 0 0}
.gl-no{position:absolute;top:-13px;left:clamp(16px,3vw,28px);display:flex;align-items:baseline;gap:6px;margin:0!important;padding:6px 12px 5px;border-radius:7px;background:var(--hot);box-shadow:0 5px 14px rgba(232,23,79,.28)}
.gl-no b{font:400 15px/1 var(--disp);letter-spacing:.18em;color:#fff}
.gl-no span{font-size:11.5px;color:rgba(255,255,255,.82)}
.gl-snd .gl-no{background:var(--gold);box-shadow:0 5px 14px rgba(168,107,0,.28)}
.gl-pt::after{content:attr(data-n);position:absolute;z-index:-1;top:8px;right:clamp(14px,2.4vw,24px);font:400 clamp(70px,9vw,104px)/1 var(--disp);color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--hot) 30%,transparent);pointer-events:none}
.gl-snd::after{content:"";position:absolute;z-index:-1;top:18px;right:clamp(14px,2.4vw,24px);width:120px;height:44px;background:color-mix(in srgb,var(--gold) 34%,transparent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44'%3E%3Crect x='2' y='17' width='4' height='10' rx='2'/%3E%3Crect x='10' y='11' width='4' height='22' rx='2'/%3E%3Crect x='18' y='5' width='4' height='34' rx='2'/%3E%3Crect x='26' y='13' width='4' height='18' rx='2'/%3E%3Crect x='34' y='2' width='4' height='40' rx='2'/%3E%3Crect x='42' y='9' width='4' height='26' rx='2'/%3E%3Crect x='50' y='15' width='4' height='14' rx='2'/%3E%3Crect x='58' y='7' width='4' height='30' rx='2'/%3E%3Crect x='66' y='3' width='4' height='38' rx='2'/%3E%3Crect x='74' y='12' width='4' height='20' rx='2'/%3E%3Crect x='82' y='16' width='4' height='12' rx='2'/%3E%3Crect x='90' y='8' width='4' height='28' rx='2'/%3E%3Crect x='98' y='4' width='4' height='36' rx='2'/%3E%3Crect x='106' y='14' width='4' height='16' rx='2'/%3E%3Crect x='114' y='18' width='4' height='8' rx='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44'%3E%3Crect x='2' y='17' width='4' height='10' rx='2'/%3E%3Crect x='10' y='11' width='4' height='22' rx='2'/%3E%3Crect x='18' y='5' width='4' height='34' rx='2'/%3E%3Crect x='26' y='13' width='4' height='18' rx='2'/%3E%3Crect x='34' y='2' width='4' height='40' rx='2'/%3E%3Crect x='42' y='9' width='4' height='26' rx='2'/%3E%3Crect x='50' y='15' width='4' height='14' rx='2'/%3E%3Crect x='58' y='7' width='4' height='30' rx='2'/%3E%3Crect x='66' y='3' width='4' height='38' rx='2'/%3E%3Crect x='74' y='12' width='4' height='20' rx='2'/%3E%3Crect x='82' y='16' width='4' height='12' rx='2'/%3E%3Crect x='90' y='8' width='4' height='28' rx='2'/%3E%3Crect x='98' y='4' width='4' height='36' rx='2'/%3E%3Crect x='106' y='14' width='4' height='16' rx='2'/%3E%3Crect x='114' y='18' width='4' height='8' rx='2'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
.gl-t{font-size:clamp(18px,2.1vw,23px);font-weight:900;line-height:1.4;margin:6px 0 6px}
.gl-pt .gl-sub{font-size:clamp(15px,1.6vw,17px)}
.gl-pt .gl-song{margin:10px 0 14px!important}
.gl-p{line-height:1.95}
.gl-toc a{display:flex;gap:10px;align-items:baseline;color:inherit}.gl-toc a:hover{color:var(--hot)}
.gl-pt{scroll-margin-top:90px}
.gl-snd .gl-t{padding-right:132px}
@media(max-width:560px){.gl-snd::after{width:78px;height:30px;top:20px}.gl-snd .gl-t{padding-right:86px}}
.gl-rest{margin-top:28px}
.gl-rest>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:16px 18px 16px 22px;border-radius:16px;background:var(--tx);color:#fff;box-shadow:0 7px 0 -2px #3d3846,0 14px 0 -5px #9a94a3;transition:transform .2s}
.gl-rest>summary::-webkit-details-marker{display:none}
.gl-rest>summary::after{content:"▼";flex:none;margin-left:auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sun);color:var(--tx);font-size:12px}
.gl-rest>summary:hover{transform:translateY(-2px)}
.gl-open b{display:block;font-size:17px;font-weight:900}
.gl-open small{display:block;margin-top:3px;font-size:12.5px;color:rgba(255,255,255,.75)}
.gl-shut{display:none}
.gl-rest[open]>summary{width:max-content;margin-left:auto;padding:7px 14px;gap:6px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--tx2);box-shadow:none;font-size:13px;font-weight:700}
.gl-rest[open]>summary::after{content:"▲";width:auto;height:auto;background:none;color:inherit;font-size:10px}
.gl-rest[open] .gl-open{display:none}.gl-rest[open] .gl-shut{display:inline}
.gl-rest[open]>.gl-body{animation:glin .45s ease}
@keyframes glin{from{opacity:0;transform:translateY(10px)}}
.gl-fold{display:block;margin:26px auto 0;padding:10px 22px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--tx2);font-weight:700;font-size:13.5px}
.gl-fold::after{content:" ▲";font-size:10px}.gl-fold:hover{border-color:var(--tx);color:var(--tx)}
.gl-more{display:grid;gap:8px;margin-bottom:18px}
.gl-more div{padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.gl-more dt{font:italic 700 17px/1.4 Georgia,"Times New Roman",serif;color:var(--hot)}
.gl-more dd{margin:4px 0 0;font-size:14.5px;color:var(--tx2)}
/* ホームの子ども英語ソングのバナー */
.kidsban{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:18px;border-radius:24px;background:linear-gradient(135deg,#fff3d6,#ffe1ea);border:3px solid #ffd27a;overflow:hidden}
.kidsban img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:18px;border:3px solid #fff;box-shadow:0 6px 16px rgba(120,80,20,.15)}
.kidsban-t{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.kidsban-t small{font:400 14px/1 var(--disp);letter-spacing:.14em;color:#e0584f}
.kidsban-t b{font-size:clamp(22px,3vw,32px);font-weight:900}
.kidsban-t span{font-size:14.5px;color:var(--tx2)}
@media(max-width:560px){.kidsban{grid-template-columns:repeat(3,1fr)}.kidsban img:nth-child(n+4){display:none}}

/* クリスマス特集への入口（曲ページ・特集ページ・ホーム） */
.xm-promo{display:grid;gap:2px;color:#fff!important;background:radial-gradient(300px 120px at 90% 0,rgba(255,215,106,.35),transparent 70%),linear-gradient(140deg,#8e0b20,#c8102e 55%,#0f6b3f);border:0;box-shadow:0 12px 26px -14px rgba(142,11,32,.7);transition:transform .2s}
.xm-promo small{font:400 13px/1 var(--disp);letter-spacing:.26em;color:#ffd76a}
.xm-promo b{font-size:17px;font-weight:900}
.xm-promo span{font-size:12.5px;color:#ffe6ea}
.xm-promo:hover{transform:translateY(-2px)}
.xm-promo.big{margin-top:22px;padding:20px 24px;border-radius:18px}
.xm-promo.big b{font-size:clamp(19px,2.4vw,24px)}
.tile.xm-tile{background:linear-gradient(140deg,#8e0b20,#c8102e 55%,#0f6b3f);color:#fff;border-color:transparent}
.tile.xm-tile small{color:#ffd76a}.tile.xm-tile span{color:#ffe6ea}

/* EDM 超絶特集への入口（トップのボタン・曲ページの案内・タイル） */
.btn.ed-hbtn{position:relative;overflow:hidden;color:#fff;border:0;background:linear-gradient(110deg,#7b2cff,#ff2d87 50%,#ff8a00);background-size:200% 100%;box-shadow:0 10px 26px -10px rgba(255,45,135,.75),0 0 0 2px rgba(255,255,255,.6) inset;animation:ed-hb 4s linear infinite}
.btn.ed-hbtn:hover{color:#fff;transform:translateY(-2px) scale(1.02)}
.btn.ed-hbtn small{font:400 12px/1 var(--disp);letter-spacing:.14em;background:#fff;color:#ff2d87;padding:4px 7px 3px;border-radius:6px;margin-left:2px}
.ed-hbtn-eq{display:inline-flex;align-items:flex-end;gap:2px;height:16px}
.ed-hbtn-eq i{width:3px;height:100%;background:#fff;border-radius:2px;transform-origin:bottom;animation:ed-hbq .9s ease-in-out infinite}
.ed-hbtn-eq i:nth-child(2){animation-delay:-.3s}.ed-hbtn-eq i:nth-child(3){animation-delay:-.6s}.ed-hbtn-eq i:nth-child(4){animation-delay:-.15s}
@keyframes ed-hb{to{background-position:-200% 0}}
@keyframes ed-hbq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.ed-promo{display:grid;gap:2px;color:#fff!important;border:0;background:radial-gradient(260px 120px at 90% 0,rgba(0,224,255,.45),transparent 70%),linear-gradient(130deg,#4b12b8,#ff2d87 60%,#ff8a00);box-shadow:0 12px 26px -14px rgba(123,44,255,.7);transition:transform .2s}
.ed-promo small{font:400 13px/1 var(--disp);letter-spacing:.26em;color:#b8f7ff}
.ed-promo b{font-size:17px;font-weight:900}
.ed-promo span{font-size:12.5px;color:#ffe3f1}
.ed-promo:hover{transform:translateY(-2px)}
.tile.ed-tile{background:radial-gradient(220px 120px at 100% 0,rgba(0,224,255,.4),transparent 70%),linear-gradient(130deg,#4b12b8,#ff2d87 65%,#ff8a00);color:#fff;border-color:transparent}
.tile.ed-tile small{color:#b8f7ff}.tile.ed-tile span{color:#ffe3f1}
@media (prefers-reduced-motion:reduce){.btn.ed-hbtn,.ed-hbtn-eq i{animation:none}}

/* トップのヒーロー：子ども英語ソングのボタン（絵本の色） */
.btn.kids-hbtn{color:#5a2d0c;border:0;background:linear-gradient(135deg,#ffe066,#ffb3a7 60%,#ffc6e0);box-shadow:0 10px 24px -10px rgba(255,140,90,.8),0 0 0 2px rgba(255,255,255,.7) inset;font-family:"M PLUS Rounded 1c",var(--sans,sans-serif)}
.btn.kids-hbtn:hover{color:#5a2d0c;transform:translateY(-2px) rotate(-1deg)}
.btn.kids-hbtn small{font:400 12px/1 var(--disp);letter-spacing:.14em;background:#fff;color:#ff6f61;padding:4px 7px 3px;border-radius:6px;margin-left:2px}
.kids-hbtn-i{display:inline-block;animation:kids-hb 2.4s ease-in-out infinite}
@keyframes kids-hb{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(12deg) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.kids-hbtn-i{animation:none}}
.tile.kids-tile{background:linear-gradient(135deg,#fff6d6,#ffe3ec);color:#3b2350;border-color:#f3c8d6}
.tile.kids-tile small{color:#e0457b}.tile.kids-tile span{color:#5b4a66}.tile.kids-tile>svg{color:#e0457b}
/* このサイトについて：運営者カード・作った理由 */
.ab-card{position:relative;margin-top:30px;padding:30px clamp(20px,4vw,34px) 26px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 34px rgba(60,45,20,.08)}
.ab-card::after{content:"";position:absolute;top:0;right:0;width:118px;height:118px;border-radius:0 18px 0 100%;background:radial-gradient(circle at 100% 0,var(--sun) 0 15px,var(--tx) 16px 19px,transparent 20px),repeating-radial-gradient(circle at 100% 0,#1c1a21 0 3px,#34303d 3px 5px);opacity:.92;pointer-events:none}
.ab-tab{position:absolute;top:-15px;left:24px;padding:5px 16px;border-radius:99px;background:var(--hot);color:#fff;font-size:13px;font-weight:900;letter-spacing:.12em;box-shadow:0 6px 14px rgba(232,23,79,.28);transform:rotate(-2deg)}
.prose .ab-role{margin:0 120px 2px 0;font-size:13px;font-weight:700;color:var(--gold)}
.prose .ab-name{margin-bottom:14px;font-size:clamp(28px,4vw,36px);font-weight:900;line-height:1.3}
.ab-name small{margin-left:12px;font-size:14px;font-weight:700;color:var(--mut);letter-spacing:.08em}
.ab-road{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:16px 0}
.prose .ab-road li{display:inline-flex;align-items:center;white-space:nowrap;margin:0;padding:5px 12px;border-radius:99px;background:var(--card2);font-size:13px;font-weight:700}
.prose .ab-road li::before{display:none}
.prose .ab-road li:not(:last-child)::after{content:"→";margin:0 -2px 0 8px;color:var(--mut);font-weight:400}
.prose .ab-road li.now{background:var(--sun2);box-shadow:0 0 0 2px var(--sun) inset}
.ab-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 20px}
.ab-badges span{padding:6px 14px;border-radius:10px;border:1.5px solid var(--gold);color:var(--gold2);font-size:14px;font-weight:900;background:color-mix(in srgb,var(--sun2) 30%,#fff)}
.ab-badges em{font-style:normal;font-size:13px;color:var(--mut)}
.prose .ab-btns{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.prose .ab-btns a{text-decoration:none;color:inherit}
.prose .ab-btns .ab-xbtn{background:var(--tx);border-color:var(--tx);color:#fff}
.prose .ab-btns .ab-xbtn:hover{background:#000;color:#fff}
.prose .ab-btns .btn:not(.ab-xbtn):hover{color:var(--gold)}
/* 作った理由 */
.prose .ab-quote{position:relative;margin:26px 0 24px;padding:24px clamp(20px,4vw,30px);border-radius:20px;background:var(--tx);color:#fff;font-size:clamp(20px,3vw,28px);font-weight:900;line-height:1.5}
.ab-quote::after{content:"";position:absolute;left:42px;bottom:-14px;border:14px solid transparent;border-top-color:var(--tx);border-bottom:0}
.ab-quote span{display:block;margin-top:6px;font-size:clamp(14px,1.8vw,16px);font-weight:700;color:var(--sun2)}
.prose .ab-track{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:46px 0 12px;font-size:clamp(18px,2.4vw,22px);line-height:1.45}
.ab-track small{display:inline-flex;align-items:center;gap:7px;padding:4px 12px 3px 8px;border-radius:99px;background:var(--tx);color:var(--sun);font:400 15px/1 var(--disp);letter-spacing:.16em}
.ab-track small::before{content:"";width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,var(--sun) 0 2px,#1c1a21 3px 4px,#4a4554 5px)}
.prose .ab-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 18px}
.prose .ab-chips a{padding:6px 14px 6px 12px;border-radius:99px;background:#fff;border:1.5px solid var(--hot);color:var(--hot);font-size:14px;font-weight:900;text-decoration:none;transition:.2s}
.ab-chips a::before{content:"♪";margin-right:6px}
.prose .ab-chips a:hover{background:var(--hot);color:#fff}
.ab-four{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0 22px}
.ab-f{position:relative;overflow:hidden;padding:20px 20px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.ab-f::after{content:"";position:absolute;right:0;bottom:0;width:70px;height:70px;border-radius:100% 0 0 0;background:var(--c,var(--sun2));opacity:.7}
.ab-f:nth-child(2){--c:#ffd0dc}.ab-f:nth-child(3){--c:#c9ecf8}.ab-f:nth-child(4){--c:#dcefc9}
.ab-fn{position:absolute;top:8px;right:14px;font:400 46px/1 var(--disp);color:transparent;-webkit-text-stroke:1.5px var(--line)}
.ab-f small{display:block;font:400 14px/1.2 var(--disp);letter-spacing:.2em;color:var(--gold)}
.prose .ab-f b{display:block;margin:4px 0 6px;font-size:17px;background:none}
.prose .ab-f p{position:relative;z-index:1;margin:0;font-size:14.5px;line-height:1.75;color:var(--tx2)}
.prose .ab-sign{margin-top:28px;text-align:right;font-weight:900;letter-spacing:.08em}
.prose .ab-sign::before{content:"";display:inline-block;width:40px;height:1px;margin-right:12px;vertical-align:middle;background:var(--tx)}
@media(max-width:600px){.ab-four{grid-template-columns:1fr}.ab-card::after{width:84px;height:84px}.prose .ab-role{margin-right:70px}}
.prose .ab-story{margin:18px 0 6px;font-size:15.5px}
.prose .ab-story .ab-story-h{display:block;margin-bottom:6px;font-size:16.5px;background:none}
/* トップのヒーロー：先生のページ・流行りの洋楽のボタン */
.btn.tc-hbtn{color:#fff;border:0;background:linear-gradient(120deg,#1c1a21,#3a1f3c 60%,#6b2a3a);box-shadow:0 10px 24px -10px rgba(28,26,33,.7),0 0 0 2px rgba(255,255,255,.5) inset}
.btn.tc-hbtn:hover{color:var(--sun);transform:translateY(-2px)}
.btn.tr-hbtn{color:#1c1a21;border:0;background:linear-gradient(110deg,#ff9ac2,#ffd36b 50%,#8fdcff);background-size:200% 100%;box-shadow:0 10px 24px -10px rgba(255,61,139,.6),0 0 0 2px rgba(255,255,255,.7) inset;animation:ed-hb 5s linear infinite}
.btn.tr-hbtn:hover{color:#000;transform:translateY(-2px)}
.btn.tc-hbtn small,.btn.tr-hbtn small{font:400 12px/1 var(--disp);letter-spacing:.14em;background:var(--hot);color:#fff;padding:4px 7px 3px;border-radius:6px;margin-left:2px}
@media(prefers-reduced-motion:reduce){.btn.tr-hbtn{animation:none}}
/* 動画の下の「この曲の動画をえらぶ」（メインの動画と、本人が歌うライブ映像） */
.yt-more{margin-top:14px}
.yt-more-h{font-size:12px;font-weight:700;color:var(--mut);letter-spacing:.06em;margin-bottom:8px}
.yt-alts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.yt-alt{display:flex;gap:10px;align-items:center;text-align:left;padding:6px;border-radius:12px;background:var(--card);box-shadow:0 0 0 1px var(--line);transition:.2s}
.yt-alt:hover{box-shadow:0 0 0 1px var(--sun),0 8px 20px rgba(60,45,20,.08)}
.yt-alt.on{box-shadow:0 0 0 2px var(--sun);background:color-mix(in srgb,var(--sun2) 28%,var(--card))}
.yt-alt-img{position:relative;flex:none;width:88px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.yt-alt-img img{width:100%;height:100%;object-fit:cover}
.yt-alt-img i{position:absolute;inset:0;margin:auto;width:26px;height:26px;border-radius:50%;background:var(--sun);color:#000;display:grid;place-items:center;font-size:13px}
.yt-alt.on .yt-alt-img i{background:#fff}
.yt-alt-t{min-width:0;display:grid;line-height:1.35}
.yt-alt-t b{font-size:13px}
.yt-alt-t small{font-size:11px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* トップのボタン：洋楽フレーズ解剖くん・フレーズ特集（2026-11-14） */
.btn.pf-hbtn{color:#fff;border:0;background:linear-gradient(120deg,#15121a,#3b1430 55%,#e8174f);box-shadow:0 10px 24px -10px rgba(232,23,79,.6)}
.btn.pf-hbtn:hover{color:var(--sun);transform:translateY(-2px)}
.pf-hbtn-i{display:inline-block;transform:rotate(-90deg);margin-right:2px}
.btn.ps-hbtn{color:#1c1a21;border:0;background:linear-gradient(120deg,#ffe08a,#ffd0dc 60%,#d4f1ff);box-shadow:0 10px 24px -12px rgba(168,107,0,.6)}
.btn.ps-hbtn:hover{transform:translateY(-2px)}
.btn.pf-hbtn small,.btn.ps-hbtn small{font:400 12px/1 var(--disp);letter-spacing:.14em;background:var(--hot);color:#fff;padding:4px 7px 3px;border-radius:6px;margin-left:2px}
/* トリビアの場所カード（MVのロケ地など）：写真はテープでとめたポラロイド風、地図・ストリートビュー・写真検索のチップ */
.plc{display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:18px;align-items:start;margin:14px 0 2px;padding:14px;border-radius:10px;background:var(--bg2)}
.plc-ph{position:relative;display:block;padding:7px 7px 24px;background:#fff;box-shadow:0 6px 16px rgba(60,45,20,.16);transform:rotate(-1.6deg);transition:transform .2s}
.plc-ph::before{content:"";position:absolute;top:-9px;left:50%;width:64px;height:18px;margin-left:-32px;background:rgba(245,184,46,.55);transform:rotate(3deg)}
.plc-ph:hover{transform:rotate(0) scale(1.03)}
.plc-ph img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.plc-tag{position:absolute;left:8px;bottom:4px;display:flex;align-items:center;gap:3px;font:700 11px/1 var(--jp);color:var(--hot);letter-spacing:.06em}
.plc-tag svg,.plc-btns svg{width:13px;height:13px;flex:none}
.plc-n{margin:2px 0 10px;line-height:1.35}.plc-n b{display:block;font-size:16px}.plc-n small{color:var(--mut);font-size:12.5px}
.plc-btns{display:flex;flex-wrap:wrap;gap:6px}
.plc-btns a{display:inline-flex;align-items:center;gap:4px;padding:6px 11px;border:1px solid var(--line);border-radius:99px;background:var(--card);font-size:12.5px;font-weight:700;color:var(--tx2);text-decoration:none}
.plc-btns a:first-child{background:var(--hot);border-color:var(--hot);color:#fff}
.plc-btns a:hover{border-color:var(--gold);color:var(--gold)}.plc-btns a:first-child:hover{color:#fff;filter:brightness(1.08)}
.plc-map{margin-top:10px}.plc-map summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--cy);width:max-content}
.plc-map iframe{display:block;width:100%;height:260px;margin-top:8px;border:0;border-radius:8px;background:var(--card2)}
.plc-cr{margin:10px 0 0;font-size:10.5px;line-height:1.5;color:var(--mut)}.plc-cr a{color:inherit}
@media(max-width:600px){.plc{grid-template-columns:1fr;gap:14px;margin-left:-34px}.plc-ph{max-width:260px;margin:4px auto 0}.plc-map iframe{height:220px}}

/* 洋楽で英語を勉強する方法（/learn/study/）へのトップのボタンとタイル：蛍光ペンと方眼ノート */
.btn.sx-hbtn{position:relative;color:#1b2559;border:2px solid #1b2559;background:linear-gradient(transparent 58%,#ffe45c 0),linear-gradient(rgba(47,156,240,.14) 1px,transparent 1px) 0 0/12px 12px,linear-gradient(90deg,rgba(47,156,240,.14) 1px,#fffdf6 1px) 0 0/12px 12px;box-shadow:4px 4px 0 #1b2559}
.btn.sx-hbtn:hover{color:#1b2559;transform:translate(-2px,-2px);box-shadow:6px 6px 0 #ff6a13}
.sx-hbtn-i{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ff6a13;color:#fff;font-size:14px}
.btn.sx-hbtn small{font:400 12px/1 var(--disp);letter-spacing:.14em;background:#ff4f9a;color:#fff;padding:4px 7px 3px;border-radius:6px;margin-left:2px}
.tile.sx-tile{background:linear-gradient(rgba(47,156,240,.12) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(90deg,rgba(47,156,240,.12) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(135deg,#fffdf6,#fff3d1);color:#1b2559;border-color:#1b2559}
.tile.sx-tile small{color:#ff6a13}.tile.sx-tile span{color:#45414d}.tile.sx-tile b{background:linear-gradient(transparent 60%,#ffe45c 0)}.tile.sx-tile>svg{color:#1b2559}
/* アスリート応援ソング特集：トップのボタン・曲ページの案内 */
.btn.sp-hbtn{color:#fff;border:0;background:radial-gradient(120px 50px at 85% 0,rgba(255,207,63,.55),transparent 70%),linear-gradient(120deg,#0a1a46,#13296b 45%,#0fa958);box-shadow:0 10px 26px -10px rgba(15,169,88,.7),0 0 0 2px rgba(255,255,255,.6) inset}
.btn.sp-hbtn:hover{color:#fff;transform:translateY(-2px) scale(1.02)}
.btn.sp-hbtn small{font:400 12px/1 var(--disp);letter-spacing:.14em;background:#ffcf3f;color:#0a1a46;padding:4px 7px 3px;border-radius:6px;margin-left:2px}
.sp-hbtn-i{display:inline-block;animation:sp-hbi 2.4s ease-in-out infinite}
@keyframes sp-hbi{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-25deg) translateY(-2px)}90%{transform:rotate(15deg)}}
@media (prefers-reduced-motion:reduce){.sp-hbtn-i{animation:none}}
.sp-promo{display:grid;gap:2px;color:#fff!important;border:0;background:radial-gradient(260px 120px at 90% 0,rgba(255,207,63,.5),transparent 70%),linear-gradient(130deg,#0a1a46,#13296b 45%,#0fa958);box-shadow:0 12px 26px -14px rgba(10,26,70,.7);transition:transform .2s}
.sp-promo small{font:400 13px/1 var(--disp);letter-spacing:.26em;color:#ffcf3f}
.sp-promo b{font-size:17px;font-weight:900}
.sp-promo span{font-size:12.5px;color:#e3fff0}
.sp-promo:hover{transform:translateY(-2px)}
/* アーティスト超絶特集（ピットブル・ウエストライフ…）：トップのボタン・タイル・曲ページの案内（pages-spot.mjs） */
.btn.spot-hbtn{color:#fff;border:0;background:linear-gradient(115deg,#ff2d7a,#ff8a00 55%,#ffc94a);box-shadow:0 10px 26px -10px rgba(255,45,122,.7),0 0 0 2px rgba(255,255,255,.6) inset}
.btn.spot-hbtn-westlife{background:radial-gradient(120px 50px at 80% 0,rgba(255,230,140,.55),transparent 70%),linear-gradient(115deg,#06302a,#0f9d6b 55%,#d4a017)}
.btn.spot-hbtn:hover{color:#fff;transform:translateY(-2px) scale(1.02)}
.btn.spot-hbtn small{font:400 12px/1 var(--disp);letter-spacing:.14em;background:#fff;color:#c2185b;padding:4px 7px 3px;border-radius:6px;margin-left:2px}
.btn.spot-hbtn-westlife small{color:#06302a;background:#ffe27a}
.spot-hbtn-i{display:inline-block;animation:spot-hbi 2.6s ease-in-out infinite}
@keyframes spot-hbi{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-4px) rotate(-8deg)}90%{transform:translateY(0) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.spot-hbtn-i{animation:none}}
.spot-promo{display:grid;gap:2px;color:#fff!important;border:0;background:radial-gradient(260px 120px at 90% 0,rgba(255,201,74,.55),transparent 70%),linear-gradient(130deg,#3a0a3f,#ff2d7a 55%,#ff8a00);box-shadow:0 12px 26px -14px rgba(255,45,122,.7);transition:transform .2s}
.spot-promo-westlife{background:radial-gradient(260px 120px at 90% 0,rgba(255,226,122,.5),transparent 70%),linear-gradient(130deg,#06302a,#0f9d6b 60%,#11507a);box-shadow:0 12px 26px -14px rgba(15,157,107,.7)}
.spot-promo small{font:400 13px/1 var(--disp);letter-spacing:.26em;color:#ffe27a}
.spot-promo b{font-size:17px;font-weight:900}
.spot-promo span{font-size:12.5px;color:#fff3e6}
.spot-promo:hover{transform:translateY(-2px)}
.tile.spot-tile{background:radial-gradient(220px 120px at 100% 0,rgba(255,201,74,.35),transparent 70%),linear-gradient(135deg,#fff6ef,#ffe3ee)}
.tile.spot-tile-westlife{background:radial-gradient(220px 120px at 100% 0,rgba(212,160,23,.3),transparent 70%),linear-gradient(135deg,#f1fbf6,#dff3ea)}
.tile.spot-tile small{color:#c2185b}.tile.spot-tile-westlife small{color:#0b7a53}
.spot-promo-beatles{background:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 14px,transparent 14px 26px),linear-gradient(130deg,#14213d,#1d3a8a 60%,#d62839);box-shadow:0 12px 26px -14px rgba(20,33,61,.7)}
.spot-promo-carpenters{background:radial-gradient(260px 120px at 90% 0,rgba(255,226,168,.55),transparent 70%),linear-gradient(130deg,#3b2414,#c4511f 60%,#f0a35e);box-shadow:0 12px 26px -14px rgba(196,81,31,.7)}
.tile.spot-tile-beatles{background:repeating-linear-gradient(90deg,rgba(20,33,61,.06) 0 16px,transparent 16px 30px),linear-gradient(135deg,#f3f6fb,#e4ebf5)}
.tile.spot-tile-beatles small{color:#d62839}
.tile.spot-tile-carpenters{background:radial-gradient(220px 120px at 100% 0,rgba(240,163,94,.35),transparent 70%),linear-gradient(135deg,#fff8ee,#fbe8d2)}
.tile.spot-tile-carpenters small{color:#c4511f}
.btn.spot-hbtn-wham{background:radial-gradient(circle,rgba(255,255,255,.25) 1.5px,transparent 2px) 0 0/14px 14px,linear-gradient(115deg,#ff5fa2,#7b4dd8 60%,#13a8b8)}
.btn.spot-hbtn-wham small{color:#7b4dd8;background:#ffd23f}
.spot-promo-wham{background:radial-gradient(circle,rgba(255,255,255,.2) 1.5px,transparent 2px) 0 0/16px 16px,linear-gradient(130deg,#ff5fa2,#7b4dd8 60%,#3b2a8a);box-shadow:0 12px 26px -14px rgba(123,77,216,.7)}
.tile.spot-tile-wham{background:radial-gradient(circle,rgba(232,51,109,.14) 2px,transparent 3px) 0 0/20px 20px,linear-gradient(135deg,#fff4f9,#efe8ff)}
.tile.spot-tile-wham small{color:#7b4dd8}
.btn.spot-hbtn-onedirection{background:radial-gradient(120px 50px at 80% 0,rgba(255,224,102,.5),transparent 70%),linear-gradient(115deg,#0b1736,#1d6fe8 60%,#e63946)}
.btn.spot-hbtn-onedirection small{color:#0b1736;background:#ffe066}
.spot-promo-onedirection{background:radial-gradient(260px 120px at 90% 0,rgba(255,224,102,.45),transparent 70%),linear-gradient(130deg,#0b1736,#1d6fe8 60%,#e63946);box-shadow:0 12px 26px -14px rgba(29,111,232,.7)}
.tile.spot-tile-onedirection{background:radial-gradient(220px 120px at 100% 0,rgba(255,224,102,.4),transparent 70%),linear-gradient(135deg,#f2f6ff,#e3ecff)}
.tile.spot-tile-onedirection small{color:#1d6fe8}

/* 横スクロールはなし（2026-11-14 ユーザー指示）：表はスマホでは1行ずつカードに積む。列の名前は app.js が data-l に入れる */
@media(max-width:640px){
.estable table,.estable tbody,.estable tr,.estable th,.estable td,.t-table,.t-table tbody,.t-table tr,.t-table th,.t-table td,.lp-flow,.lp-flow tbody,.lp-flow tr,.lp-flow th,.lp-flow td{display:block;width:auto!important;min-width:0!important}
.estable thead,.t-table thead,.lp-flow thead{display:none}
.estable tr,.t-table tr,.lp-flow tr{padding:10px 14px;border-bottom:1px solid var(--line)}
.lp-flow{border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.estable tbody tr:last-child,.t-table tbody tr:last-child,.lp-flow tbody tr:last-child{border-bottom:0}
.estable th,.estable td,.t-table th,.t-table td,.lp-flow th,.lp-flow td{padding:3px 0;border:0!important;white-space:normal!important;background:none!important}
.estable td[data-l]::before,.t-table td[data-l]::before,.lp-flow td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:700;color:var(--mut);letter-spacing:.04em}
.t-table{border-radius:var(--r)}
}

/* 2種類のワークシート：完成ワークシート（金・紙のアイコン）と ワークシートくん（青・AI の星） */
.wskind{display:inline-flex;align-items:center;gap:4px;font:700 11.5px/1.2 var(--jp);font-style:normal;padding:4px 9px 4px 7px;border-radius:99px;letter-spacing:.02em;vertical-align:middle;white-space:nowrap}
.wskind svg{width:13px;height:13px}
.wskind.ready{background:#fff3cf;color:#7a4b00;box-shadow:inset 0 0 0 1px #f0d48a}
.wskind.ai{background:#e3f4fc;color:#05658f;box-shadow:inset 0 0 0 1px #a9dcf1}
.wspick{margin:26px 0 6px;padding:22px;border-radius:18px;background:var(--card2)}
.wspick-q{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:18px}
.wspick-q b{font-size:18px;line-height:1.4}
.wspick-q span{font-size:13.5px;color:var(--tx2)}
.wspick-g{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch}
.wspick-or{align-self:center;font:400 22px/1 var(--disp);letter-spacing:.1em;color:var(--mut)}
.wspick-c{position:relative;display:flex;flex-direction:column;padding:30px 20px 18px;border-radius:14px;background:var(--card);border:2px solid var(--line);transition:transform .2s,box-shadow .2s,border-color .2s}
.wspick-c:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.08)}
.wspick-tag{position:absolute;top:-13px;left:16px;display:inline-flex;align-items:center;gap:5px;padding:5px 12px 5px 10px;border-radius:99px;font:700 12.5px/1.2 var(--jp)}
.wspick-tag svg{width:14px;height:14px}
.wspick-here{position:absolute;top:10px;right:12px;font:700 11px/1 var(--jp);font-style:normal;padding:5px 8px;border-radius:6px;background:var(--tx);color:#fff}
.wspick-n{font-size:22px;line-height:1.3}
.wspick-s{font-size:12px;color:var(--mut);margin-bottom:10px}
.wspick-c ul{font-size:14px;line-height:1.6;color:var(--tx2);margin-bottom:14px}
.wspick-c li{position:relative;padding-left:18px;margin:5px 0}
.wspick-c li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;border-radius:50%}
.wspick-go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14.5px}
.wspick-c.ready .wspick-tag{background:var(--sun);color:#111}
.wspick-c.ready .wspick-n,.wspick-c.ready .wspick-go{color:#7a4b00}
.wspick-c.ready li::before{background:var(--sun)}
.wspick-c.ready:hover,.wspick-c.ready[aria-current]{border-color:var(--sun)}
.wspick-c.ai .wspick-tag{background:#0b86bd;color:#fff}
.wspick-c.ai .wspick-n,.wspick-c.ai .wspick-go{color:#05658f}
.wspick-c.ai li::before{background:#38b4e6}
.wspick-c.ai:hover,.wspick-c.ai[aria-current]{border-color:#38b4e6}
.wspick-c[aria-current]{box-shadow:0 0 0 4px rgba(0,0,0,.04)}
.wspick.slim{padding:18px}
.wspick.slim .wspick-c ul{display:none}
.btn.aib{background:#0b86bd;color:#fff;border-color:transparent}
.btn.aib:hover{background:#05658f;color:#fff}
.ws-kindnote{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 12px;font-size:13.5px;color:var(--tx2)}
@media(max-width:760px){.wspick{padding:18px 14px}.wspick-g{grid-template-columns:1fr;gap:22px}.wspick-or{justify-self:center;margin:-8px 0}.wspick-n{font-size:20px}}
.tlink.ai{color:#05658f}
/* スマホのトップを短く・見て選べる形に（2026-11-14「ボタンがうざったい」「下までずらーっと長すぎる」「フッターも長い」「横スクロールなし」） */
.sec-h h2 small{display:inline-block;white-space:nowrap}
.hero-btns.hero-sp{margin-top:12px}
.hs-m,.h-allbtn{display:none}
.ft-tg{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;color:inherit;cursor:default;text-align:left}
.ft-tg i{display:none}
@media(max-width:700px){
.p-home .hero-in{padding:20px 0 18px}
.p-home .hero-h1{font-size:11.5px;line-height:1.55;margin-top:8px;padding-right:4px}
.p-home .hero-copy{font-size:38px;margin:10px 0 0;padding-right:0}
.p-home .hero-rk{width:80px;top:100px;right:4px}
.p-home .hero-lead{display:none}
.p-home .hero-btns{margin-top:16px}
.p-home .hero-btns:not(.hero-sp){display:grid;grid-template-columns:1fr 1fr;gap:8px}
.p-home .hero-btns:not(.hero-sp) .btn{padding:12px 8px;font-size:14px}
.p-home .hero-sp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.p-home .hero-sp .btn{position:relative;justify-content:flex-start;gap:9px;min-height:52px;padding:7px 8px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.93);color:var(--tx);box-shadow:0 4px 14px rgba(60,45,20,.08);animation:none;transform:none;font:700 12.5px/1.3 var(--jp,inherit);letter-spacing:0;text-align:left;overflow:visible}
.p-home .hero-sp .btn:hover{color:var(--tx);transform:none;box-shadow:0 4px 14px rgba(60,45,20,.12)}
.p-home .hero-sp .btn::before{content:attr(data-i);flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;font-size:18px;line-height:1;background:var(--hs,linear-gradient(135deg,var(--sun2),var(--sun)));box-shadow:0 0 0 2px #fff inset}
.p-home .hero-sp .btn>span[aria-hidden]{display:none}
.p-home .hero-sp .btn small{position:absolute;top:-6px;right:-4px;margin:0;padding:3px 5px 2px;border-radius:5px;font:400 9.5px/1 var(--disp);letter-spacing:.08em;background:var(--hot);color:#fff;box-shadow:0 2px 6px rgba(232,23,79,.35)}
.p-home .hero-sp .sx-hbtn{--hs:linear-gradient(135deg,#fff3a6,#ffd34d)}
.p-home .hero-sp .tc-hbtn{--hs:linear-gradient(135deg,#3a1f3c,#6b2a3a)}
.p-home .hero-sp .tr-hbtn{--hs:linear-gradient(135deg,#ff9ac2,#ffd36b 50%,#8fdcff)}
.p-home .hero-sp .sp-hbtn{--hs:linear-gradient(135deg,#13296b,#0fa958)}
.p-home .hero-sp .cm-hbtn{--hs:linear-gradient(135deg,#a3112a,#d7263d 55%,#f6b81a)}
.p-home .hero-sp .ed-hbtn{--hs:linear-gradient(135deg,#7b2cff,#ff2d87 55%,#ff8a00)}
.p-home .hero-sp .kids-hbtn{--hs:linear-gradient(135deg,#ffe066,#ffb3a7 60%,#ffc6e0)}
.p-home .hero-sp .ps-hbtn{--hs:linear-gradient(135deg,#ffe08a,#ffd0dc 60%,#d4f1ff)}
.p-home .hero-sp .hs-m{display:flex;--hs:linear-gradient(135deg,#2b2140,#5b3cc4)}
.p-home .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:18px;padding-bottom:4px}
.p-home .stats dt{font-size:27px}.p-home .stats dd{font-size:9.5px;letter-spacing:.1em}
.p-home .sec{padding-top:32px}
.p-home .sec-h{margin-bottom:14px}
/* YouTube TOP5 は1行ずつ細く */
.p-home .h-yt .row{grid-template-columns:30px 96px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 10px;padding:8px 0}
.p-home .h-yt .rk{grid-row:1/3;font-size:24px}.p-home .h-yt .row.top .rk{font-size:30px}
.p-home .h-yt .row-img{grid-row:1/3}
.p-home .h-yt .row-main{align-self:end}
.p-home .h-yt .row-t{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-home .h-yt .row-a{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.p-home .h-yt .row-a i{display:none}
.p-home .h-yt .row-side{grid-column:3;grid-row:2;align-self:start;gap:8px}.p-home .h-yt .vw{font-size:15px}
/* 曲カードは3列の小さなジャケット（文字はタイトルだけ） */
.p-home .h-c100 .grid,.p-home .h-now .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
.p-home .h-c100 .card:nth-child(n+7),.p-home .h-now .card:nth-child(n+10){display:none}
.p-home .h-c100 .card-a,.p-home .h-c100 .card-m,.p-home .h-now .card-a,.p-home .h-now .card-m{display:none}
.p-home .h-c100 .card-t,.p-home .h-now .card-t{font-size:11.5px;line-height:1.35;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-home .h-c100 .card-img,.p-home .h-now .card-img{border-radius:8px}
.p-home .h-c100 .card-play,.p-home .h-now .card-play{display:none}
.p-home .h-c100 .split{gap:16px}
.p-home .h-c100 .split-t p{font-size:13.5px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.p-home .h-c100 .check,.p-home .h-c100 .split-t .btn:not(.gold){display:none}
.p-home .h-c100 .split-t .btn.gold{display:flex;width:100%;margin-top:12px}
.p-home .h-c100 .wspick{margin-top:18px;padding:14px 10px 12px}
.p-home .h-c100 .wspick-q{margin-bottom:16px}.p-home .h-c100 .wspick-q b{font-size:14.5px}.p-home .h-c100 .wspick-q span{display:none}
.p-home .h-c100 .wspick-g{grid-template-columns:1fr 1fr;gap:8px}
.p-home .h-c100 .wspick-or,.p-home .h-c100 .wspick-c ul{display:none}
.p-home .h-c100 .wspick-c{padding:20px 10px 10px}
.p-home .h-c100 .wspick-tag{left:8px;top:-11px;padding:4px 8px;font-size:10.5px}
.p-home .h-c100 .wspick-n{font-size:15.5px}.p-home .h-c100 .wspick-s{font-size:10.5px;margin-bottom:6px}.p-home .h-c100 .wspick-go{font-size:11.5px;white-space:nowrap}.p-home .h-c100 .wspick-go svg{display:none}
/* バナーは絵と見出しだけ */
.p-home .h-wsk .bigban img{aspect-ratio:2/1}
.p-home .h-wsk .bigban-t{padding:16px 18px 18px;gap:8px}
.p-home .h-wsk .bigban-t b{font-size:21px}.p-home .h-wsk .bigban-t small{font-size:12px}
.p-home .h-wsk .bigban-t>span,.p-home .h-kids .kidsban-t>span,.p-home .h-sing{display:none}
.p-home .h-kids .kidsban{padding:12px;gap:8px}
/* レジェンド特集は3列の正方形 */
.p-home .h-legend .atiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.p-home .h-legend .atile{padding:8px;border-radius:12px}
.p-home .h-legend .atile small{font-size:9px;letter-spacing:.1em}
.p-home .h-legend .atile b{font-size:17px;margin:3px 0 0}
.p-home .h-legend .atile span,.p-home .h-legend .atile:nth-child(n+13){display:none}
/* レベル・気分 */
.p-home .h-find .lvlinks{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-bottom:10px}
.p-home .h-find .lvlinks a{padding:9px 2px}.p-home .h-find .lvlinks b{font-size:20px}.p-home .h-find .lvlinks span{font-size:9.5px;letter-spacing:-.02em;white-space:nowrap}.p-home .h-find .lvlinks small{display:none}
.p-home .h-find .moods{gap:6px}.p-home .h-find .moods a{padding:7px 11px;font-size:12.5px}.p-home .h-find .moods a small{font-size:12px;margin-left:5px}
.p-home .h-find .moods a:nth-child(n+13){display:none}
/* 講座は8つ＋「すべて見る」 */
.p-home .h-lessons .tiles.cmp .tile:nth-child(n+9){display:none}
.p-home .h-allbtn{display:flex;width:100%;margin-top:10px}
/* ゲームは2列の小さなタイル */
.p-home .h-play .gtiles.sm{grid-template-columns:1fr 1fr;gap:8px}
.p-home .h-play .gtile{flex:none;min-height:82px;padding:12px;gap:4px;border-radius:14px}
.p-home .h-play .gtile small{font-size:10px;letter-spacing:.1em}
.p-home .h-play .gtile b{font-size:15px}
.p-home .h-play .gtile span{display:none}
.p-home .h-play .gtile::after{width:90px;height:90px;right:-30px;bottom:-30px}
/* コラムは4本、横長の小さなカード */
.p-home .h-col .ccgrid{grid-template-columns:1fr;gap:10px}
.p-home .h-col .cc:nth-child(n+5){display:none}
.p-home .h-col .cc{flex-direction:row;border-radius:12px}
.p-home .h-col .cc-img{flex:0 0 124px;aspect-ratio:auto;min-height:86px}
.p-home .h-col .cc-img img{position:absolute;inset:0}
.p-home .h-col .cc-cat{left:6px;top:6px;font-size:9.5px;padding:2px 6px;border-radius:4px}
.p-home .h-col .cc-body{padding:10px 12px;gap:4px}
.p-home .h-col .cc-t{font-size:13.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.p-home .h-col .cc-x{display:none}.p-home .h-col .cc-m{font-size:11px}
.p-home .faq summary{padding:12px 32px 12px 30px;font-size:14px}
/* フッター（全ページ共通）：リンクは見出しを押すと開く */
.ft{padding:22px 0 14px;margin-top:36px}
.ft-in{grid-template-columns:1fr;gap:0}
.ft-brand{margin-bottom:10px}.ft-brand p{display:none}
.ft-col{border-top:1px solid var(--line)}
.ft-col h3{margin:0}
.ft-tg{display:flex;align-items:center;gap:10px;width:100%;padding:13px 2px;cursor:pointer}
.ft-tg i{display:inline;font:700 12.5px/1 var(--jp,sans-serif);font-style:normal;letter-spacing:0;color:var(--tx2)}
.ft-tg::after{content:"+";margin-left:auto;font:400 22px/1 var(--disp);color:var(--gold)}
.ft-col.open .ft-tg::after{content:"−"}
.ft-col a{display:none}
.ft-col.open{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;padding-bottom:10px}
.ft-col.open h3{grid-column:1/-1}
.ft-col.open a{display:block;padding:7px 0;font-size:12.5px;line-height:1.45}
.ft-legal{margin-top:0;padding-top:12px;font-size:10.5px;line-height:1.6}
}

/* ---------- 若葉マーク：はじめての方へ（/welcome/）への入口 ---------- */
.wkb-i{width:17px;height:20px;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.hd-wkb{display:flex;align-items:center;gap:7px;height:44px;padding:0 15px 0 12px;margin-left:auto;flex:none;border-radius:999px;background:linear-gradient(135deg,#fffbd1,#e4f7e6);border:1.5px solid rgba(22,163,74,.35);color:#14532d;font-weight:900;font-size:13px;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.hd-wkb:hover{transform:translateY(-1px) rotate(-1deg);box-shadow:0 6px 18px rgba(22,163,74,.22)}
.hd-wkb[aria-current]{background:#16a34a;color:#fff;border-color:#16a34a}
.hd-wkb:hover .wkb-i{animation:wkb-wig .5s}
@keyframes wkb-wig{30%{transform:rotate(-14deg)}65%{transform:rotate(10deg)}}
.hd-wkb+.hd-search{margin-left:0}
@media(min-width:1100px){.hd-wkb{margin-left:0}}
/* せまい画面（スマホ）と、横並びメニューが出て混む幅では、マーク＋「はじめて」の小さいボタンに */
@media(max-width:520px),(min-width:1100px) and (max-width:1399px){
.hd-wkb{flex-direction:column;justify-content:center;gap:2px;width:50px;padding:0;border-radius:14px}
.hd-wkb span{display:none}.hd-wkb::after{content:"はじめて";font-size:9.5px;line-height:1;letter-spacing:-.02em}
}
@media(max-width:520px){.hd-in{gap:9px}}
@media(max-width:360px){.logo b{font-size:19px}.logo svg{width:32px;height:32px}}
.nav>a.nav-wkb{display:flex;align-items:center;gap:12px;margin:8px 0 6px;padding:13px 14px;border:1.5px dashed rgba(22,163,74,.45);border-radius:14px;background:linear-gradient(135deg,#fffbd1,#e4f7e6);color:#14532d}
.nav>a.nav-wkb .wkb-i{width:26px;height:30px}
.nav>a.nav-wkb small{color:#16a34a}
.nav>a.nav-wkb:hover{padding-left:18px;color:#14532d}
.wkb-pill{display:inline-flex;align-items:center;gap:11px;margin:16px 0 2px;padding:8px 16px 8px 12px;border-radius:999px;background:#fff;border:2px solid #16a34a;color:#14532d;box-shadow:0 6px 0 rgba(22,163,74,.18);transition:transform .2s,box-shadow .2s}
.wkb-pill .wkb-i{width:24px;height:28px}
.wkb-pill b{display:block;font-size:15px;font-weight:900;line-height:1.25}
.wkb-pill small{display:block;font-size:11.5px;color:var(--mut);line-height:1.3}
.wkb-pill>svg:last-child{color:#16a34a}
.wkb-pill:hover{transform:translateY(-2px);box-shadow:0 8px 0 rgba(22,163,74,.22)}
@media(max-width:700px){.wkb-pill{margin-top:12px;padding:6px 14px 6px 10px}.wkb-pill small{display:none}}
.buddy-menu a.buddy-wkb{display:flex;align-items:center;gap:8px;background:#e4f7e6;color:#14532d}
.buddy-menu a.buddy-wkb:hover{background:#c9efce}
.buddy-hint{position:relative;max-width:230px;padding:12px 30px 12px 14px;border-radius:16px 16px 16px 4px;background:#fff;border:2px solid #16a34a;box-shadow:0 14px 36px rgba(60,45,20,.18);font-size:13px;line-height:1.55;font-weight:700;color:#14532d;animation:pop .35s}
.buddy-hint b{display:block;font-size:15px;font-weight:900}
.buddy-hint button{position:absolute;top:4px;right:6px;width:24px;height:24px;font-size:16px;line-height:1;color:var(--mut)}

/* 曲ページ：動画のすぐ下の「この曲が出てくる特集」の大きな帯（.sbn）。色は各特集の色（style か spot-promo-<key> などのクラス） */
.sbn-list{display:grid;gap:12px;margin-top:clamp(18px,3vw,28px)}
a.sbn{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:6px 20px;padding:14px 22px 14px 12px;border-radius:22px;color:#fff!important;text-decoration:none;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);overflow:hidden;isolation:isolate;transition:transform .2s,box-shadow .2s}
:where(a.sbn){background:radial-gradient(260px 120px at 90% 0,rgba(255,201,74,.55),transparent 70%),linear-gradient(130deg,#3a0a3f,#ff2d7a 55%,#ff8a00);}
a.sbn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.12) 55%,rgba(0,0,0,0))}
a.sbn::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:sbn-shine 4.5s ease-in-out infinite}
@keyframes sbn-shine{0%,55%{left:-40%}100%{left:130%}}
a.sbn:hover{transform:translateY(-3px);box-shadow:0 26px 46px -20px rgba(0,0,0,.7)}
.sbn-rk{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));animation:sbn-bob 2.6s ease-in-out infinite}
@keyframes sbn-bob{50%{transform:translateY(-5px) rotate(-3deg)}}
.sbn-t{display:grid;gap:4px;min-width:0;text-shadow:0 1px 8px rgba(0,0,0,.35)}
a.sbn .sbn-t small{font:400 13px/1 var(--disp);letter-spacing:.18em;color:#ffe27a}
a.sbn .sbn-t b{font-size:clamp(21px,2.6vw,28px);font-weight:900;line-height:1.2}
a.sbn .sbn-t span{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.92)}
.sbn-th{display:flex;padding-left:26px}
.sbn-th img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:9px;border:2px solid #fff;margin-left:-26px;box-shadow:0 8px 16px -6px rgba(0,0,0,.5);transform:rotate(-4deg)}
.sbn-th img:nth-child(2){transform:rotate(2deg) translateY(-6px)}
.sbn-th img:nth-child(3){transform:rotate(6deg)}
a.sbn .sbn-go{display:inline-flex;align-items:center;gap:6px;padding:13px 20px;border-radius:999px;background:#fff;color:#1b1b1f;font-weight:900;font-size:15px;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(0,0,0,.5);transition:transform .2s}
.sbn-go svg{width:17px;height:17px}
a.sbn:hover .sbn-go{transform:translateX(4px)}
@media(max-width:960px){.sbn-th{display:none}a.sbn{grid-template-columns:auto minmax(0,1fr) auto}}
@media(max-width:640px){a.sbn{grid-template-columns:auto minmax(0,1fr);gap:10px 12px;padding:14px 14px 16px}.sbn-rk{width:70px;height:70px}a.sbn .sbn-t b{font-size:21px}a.sbn .sbn-t span{font-size:12.5px}.sbn-th{display:flex;grid-column:1/-1;padding:0;gap:8px}.sbn-th img{flex:1;min-width:0;width:auto;height:auto;margin:0;transform:none!important}a.sbn .sbn-go{grid-column:1/-1;justify-content:center}a.sbn+a.sbn{grid-template-columns:auto minmax(0,1fr);padding:12px 14px}.sbn+.sbn .sbn-th{display:none}.sbn+.sbn .sbn-rk{width:52px;height:52px}a.sbn+a.sbn .sbn-t b{font-size:18px}a.sbn+a.sbn .sbn-t span{display:none}a.sbn+a.sbn .sbn-go{padding:10px 16px;font-size:14px}}
@media(prefers-reduced-motion:reduce){a.sbn::before,.sbn-rk{animation:none}}

/* サイト内検索から飛んできたことば（スラング辞典・ラップ講座・ラップ史・文法）を光らせる */
.sl,.rs,.hx-w,#grammar{scroll-margin-top:96px}
.sl:target,.rs:target,.hx-w:target,.gl-card:target{animation:srHit 2.4s ease-out 1;outline:3px solid var(--sun);outline-offset:3px}
@keyframes srHit{0%,30%{box-shadow:0 0 0 10px rgba(245,184,46,.45)}100%{box-shadow:0 0 0 0 rgba(245,184,46,0)}}
/* 全曲リスト → サイト内検索 */
.count .q-all{display:inline-flex;align-items:center;gap:6px;margin-left:14px;padding:4px 12px;border-radius:99px;border:1px dashed var(--gold);color:var(--gold2);font-size:13px;font-weight:700;vertical-align:middle}
.count .q-all:hover{background:var(--sun2)}

/* 音楽映画・ドラマ特集（/cinema/）のトップのボタン・曲ページの帯・タイル（ベルベットの赤 × マーキーの金） */
.btn.cm-hbtn{color:#fff;border:0;background:radial-gradient(circle,#ffe08a 0 1.6px,transparent 2.2px) 0 0/14px 14px,linear-gradient(120deg,#7a0c1f,#d7263d 55%,#f6b81a);box-shadow:0 10px 26px -10px rgba(215,38,61,.75),0 0 0 2px rgba(255,224,138,.8) inset}
.btn.cm-hbtn:hover{color:#fff;transform:translateY(-2px) scale(1.02)}
.btn.cm-hbtn small{font:400 12px/1 var(--disp);letter-spacing:.14em;background:#ffe08a;color:#7a0c1f;padding:4px 7px 3px;border-radius:6px;margin-left:2px}
.cm-hbtn-i{display:inline-block;animation:sp-hbi 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.cm-hbtn-i{animation:none}}
a.sbn.cm-promo{background:radial-gradient(circle,rgba(255,224,138,.35) 0 1.6px,transparent 2.2px) 0 0/16px 16px,linear-gradient(120deg,#5a0a1a,#d7263d 60%,#f6b81a)}
.tile.cm-tile{background:linear-gradient(135deg,#fff4e0,#ffe1e6);color:#3a1420;border-color:#f0c4cc}
.tile.cm-tile small{color:#c21f3a}.tile.cm-tile span{color:#5e4a50}.tile.cm-tile>svg{color:#c21f3a}

/* 曲のリクエスト募集（はがき風） */
.req{position:relative;margin:40px auto 8px;max-width:860px;padding:26px 150px 26px 30px;background:#fffdf8;border:2px dashed #d9c9a6;border-radius:16px;box-shadow:0 10px 24px rgba(60,40,0,.07)}
.req-stamp{position:absolute;top:18px;right:20px;width:104px;padding:10px 8px 7px;background:#fff;border:3px dotted #e8174f;border-radius:6px;text-align:center;transform:rotate(6deg);box-shadow:0 3px 8px rgba(0,0,0,.08)}
.req-stamp svg{width:66px;height:66px;margin:0 auto}
.req-stamp small{display:block;margin-top:3px;font:400 14px/1 var(--disp);letter-spacing:.14em;color:#e8174f}
.req-en{display:flex;align-items:center;gap:8px;font:400 15px/1 var(--disp);letter-spacing:.16em;color:#16a34a}
.req-h{margin:8px 0 10px;font-size:clamp(19px,2.6vw,24px);font-weight:900;line-height:1.45}
.req-p{color:var(--tx2);font-size:15px;line-height:1.85}
.req-p b{color:var(--tx);background:linear-gradient(transparent 62%,#ffe08a 62%)}
.req-btn{margin-top:16px}
@media(max-width:640px){.req{padding:22px 18px 22px;margin-top:32px}.req-stamp{width:76px;top:-14px;right:12px;padding:7px 5px 5px}.req-stamp svg{width:46px;height:46px}.req-stamp small{font-size:11px}.req-h{padding-right:88px}}

/* ===== What's NEW（トップのヒーローの更新情報パネル：pages-news.mjs の newsHome）。一覧ページは news.css ===== */
.wn{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:0 18px;margin-top:22px;max-width:760px}
@media(min-width:701px){.wn{max-width:min(760px,calc(100% - min(27vw,360px) - 12px))}}
.wn-stamp{position:relative;z-index:2;display:grid;place-content:center;justify-items:center;width:104px;height:104px;margin-top:4px;color:#fff;text-decoration:none;transform:rotate(-9deg);animation:wn-wob 3.2s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(232,23,79,.32))}
.wn-stamp::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 32% 28%,#ff6f9a,#e8174f 62%,#c40d3e);clip-path:polygon(50% 0,59.6% 14.2%,75% 6.7%,76.1% 23.9%,93.3% 25%,85.8% 40.4%,100% 50%,85.8% 59.6%,93.3% 75%,76.1% 76.1%,75% 93.3%,59.6% 85.8%,50% 100%,40.4% 85.8%,25% 93.3%,23.9% 76.1%,6.7% 75%,14.2% 59.6%,0 50%,14.2% 40.4%,6.7% 25%,23.9% 23.9%,25% 6.7%,40.4% 14.2%)}
.wn-stamp::after{content:"";position:absolute;inset:17px;z-index:-1;border-radius:50%;border:1.5px dashed rgba(255,255,255,.7)}
.wn-stamp span{font:italic 700 15px/1 "Playfair Display",serif;letter-spacing:.02em}
.wn-stamp b{font:400 33px/.9 var(--disp);letter-spacing:.04em;text-shadow:0 2px 0 rgba(120,0,30,.35)}
.wn-stamp small{margin-top:3px;padding:2px 6px 1px;border-radius:99px;background:#ffe08a;color:#7a2a00;font:700 9.5px/1.2 var(--jp);letter-spacing:0;white-space:nowrap}
.wn-stamp:hover{animation-play-state:paused;transform:rotate(-4deg) scale(1.06)}
@keyframes wn-wob{0%,100%{transform:rotate(-9deg) scale(1)}50%{transform:rotate(-3deg) scale(1.05)}}
.wn-box{min-width:0;padding:12px 14px 10px;border-radius:18px;background:rgba(255,255,255,.95);border:1px solid var(--line);box-shadow:0 10px 30px rgba(60,45,20,.12),0 0 0 4px rgba(255,224,138,.35);backdrop-filter:blur(6px)}
.wn-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px;font-size:12.5px;color:var(--mut)}
.wn-live{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 2px;border-radius:99px;background:#fff0f4;color:var(--hot);font:400 13px/1 var(--disp);letter-spacing:.16em}
.wn-live i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--hot)}
.wn-live i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--hot);opacity:0;animation:wn-ping 1.6s ease-out infinite}
@keyframes wn-ping{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.wn-ht{font-weight:900;font-size:14px;color:var(--tx)}
.wn-last time{font:400 16px/1 var(--disp);letter-spacing:.06em;color:var(--tx)}
.wn-auto{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:3px 9px;border-radius:99px;background:#eaf8ff;color:#06739c;font-size:11.5px;font-weight:700;text-decoration:none}
.wn-auto i{width:7px;height:7px;border-radius:50%;background:#16b364;box-shadow:0 0 0 3px rgba(22,179,100,.2)}
.wn-auto span{font:400 13px/1 var(--disp);letter-spacing:.06em}
.wn-auto:hover{background:#d6f1ff}
.wn-list{list-style:none;margin:0;padding:0}
.wn-list li+li{border-top:1px dashed var(--line)}
.wn-list a{display:flex;align-items:center;gap:9px;min-height:40px;padding:5px 6px;border-radius:10px;color:var(--tx);text-decoration:none;transition:background .15s,transform .15s}
.wn-list a:hover{background:#fff7dc;transform:translateX(3px)}
.wn-list time{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:46px;padding:4px 6px 3px;border-radius:8px;background:var(--bg2);font:400 17px/1 var(--disp);letter-spacing:.05em;color:var(--tx)}
.wn-list time small{margin-top:2px;font:700 9px/1 var(--jp);letter-spacing:.04em;color:var(--hot)}
.wn-today time{background:linear-gradient(135deg,#ffe08a,#ffc94d);box-shadow:0 0 0 2px #fff inset}
.wn-tg{flex:none;display:inline-block;padding:3px 7px 2px;border-radius:6px;font:700 10.5px/1.3 var(--jp);font-style:normal;color:#fff;white-space:nowrap}
.wn-tg.t-new{background:var(--hot)}
.wn-tg.t-special{background:linear-gradient(135deg,#d99a00,#b46d00)}
.wn-tg.t-tool{background:linear-gradient(135deg,#0a9fd6,#6a4cf0)}
.wn-tg.t-up{background:#13a35c}
.wn-i{flex:none;font-size:18px;line-height:1}
.wn-list b{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14.5px;font-weight:900}
.wn-list a>svg{flex:none;width:16px;height:16px;color:var(--gold)}
.wn-all{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;padding:8px 10px;border-radius:12px;background:#1c1a21;color:#fff;font-size:13px;font-weight:900;text-decoration:none;transition:background .15s}
.wn-all small{padding:1px 7px;border-radius:99px;background:var(--sun);color:#1c1a21;font:400 13px/1.3 var(--disp);letter-spacing:.06em}
.wn-all svg{width:15px;height:15px}
.wn-all:hover{background:var(--hot);color:#fff}
@media(max-width:700px){
.wn{grid-template-columns:minmax(0,1fr);margin-top:14px}
.wn-stamp{position:absolute;top:-16px;right:-6px;width:70px;height:70px;margin:0}
.wn-stamp::after{inset:11px}
.wn-stamp span{font-size:10.5px}.wn-stamp b{font-size:22px}.wn-stamp small{display:none}
.wn-box{padding:10px 10px 8px;border-radius:14px}
.wn-h{padding-right:62px;font-size:11.5px}
.wn-auto{margin-left:0}
.wn-list li:nth-child(n+4){display:none}
.wn-list a{gap:7px;min-height:38px;padding:4px 2px}
.wn-list time{min-width:40px;font-size:15px}
.wn-tg{font-size:9.5px;padding:2px 5px 1px}
.wn-list b{font-size:13px}
.wn-i{display:none}
.wn-all{font-size:12.5px;padding:7px 10px}
}
@media(prefers-reduced-motion:reduce){.wn-stamp,.wn-live i::after{animation:none}.wn-list a:hover{transform:none}}

/* 誕生日No.1タイムマシン・YOGAKUDLE のトップのボタン（2026-11-15） */
.btn.bd-hbtn{color:#1c1a21;border:0;background:linear-gradient(120deg,#ffd23f,#ff8a3d 50%,#ff2e63);box-shadow:0 10px 24px -10px rgba(255,46,99,.7),0 0 0 2px rgba(255,255,255,.6) inset}
.btn.dl-hbtn{color:#fff;border:0;background:linear-gradient(90deg,#16a34a 0 33%,#f5b400 33% 66%,#4a4656 66%);box-shadow:0 10px 24px -10px rgba(22,163,74,.7),0 0 0 2px rgba(255,255,255,.6) inset;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.btn.bd-hbtn:hover,.btn.dl-hbtn:hover{transform:translateY(-2px)}
.btn.bd-hbtn small,.btn.dl-hbtn small{font:400 12px/1 var(--disp);letter-spacing:.14em;background:#1c1a21;color:#fff;padding:4px 7px 3px;border-radius:6px;margin-left:2px;text-shadow:none}
.p-home .hero-sp .bd-hbtn{--hs:linear-gradient(135deg,#ff8a3d,#ff2e63)}
.p-home .hero-sp .dl-hbtn{--hs:linear-gradient(135deg,#16a34a,#f5b400)}
/* What's NEW のアイコン（Codex が描いた assets/ic/*.webp。無いときは絵文字） */
.wn-i img{display:block;width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(60,45,20,.18))}
@media(max-width:700px){.wn-i:has(img){display:block}.wn-i img{width:22px;height:22px}}
/* フッター上の空きをそろえる（2026-11-15 ユーザー「フッターとコンテンツまでの距離が長い」）
   これまでは .ft の margin-top（最大110px）＋最後のブロックの padding-bottom（50〜90px）＋最後の子の margin-bottom（50〜80px）が重なって 200px 超になっていた。
   フッターの上の空きは .ft の margin-top だけにする（色つきの帯 .band で終わるページは帯の中の余白を残す） */
main>:not(script,link,style,template):not(:has(~ :not(script,link,style,template))):not(.band):not(.ph-hero),main>:not(script,link,style,template):not(:has(~ :not(script,link,style,template)))>:last-child:not(.band){padding-bottom:0!important;margin-bottom:0!important}
main>:not(script,link,style,template):not(:has(~ :not(script,link,style,template)))>:last-child,main>:not(script,link,style,template):not(:has(~ :not(script,link,style,template)))>:last-child>:last-child,main>:not(script,link,style,template):not(:has(~ :not(script,link,style,template)))>:last-child>:last-child>:last-child{margin-bottom:0!important}
.ft{margin-top:clamp(44px,5vw,64px)}
@media(max-width:700px){.ft{margin-top:36px}}
/* 絶対聞いたことある洋楽100（/heard100/）：曲ページの帯とトップのタイル。テレビのカラーバーを淡く */
a.sbn.hd-promo{background:radial-gradient(260px 130px at 92% 10%,rgba(255,210,31,.45),transparent 70%),radial-gradient(circle,rgba(255,255,255,.14) 0 1.6px,transparent 2.2px) 0 0/16px 16px,linear-gradient(120deg,#1d1a24,#3b2a78 55%,#1597b8)}
.tile.hd-tile{background:linear-gradient(90deg,rgba(255,210,31,.18) 0 14.28%,rgba(25,198,230,.16) 0 28.57%,rgba(37,194,110,.15) 0 42.85%,rgba(255,79,168,.14) 0 57.14%,rgba(255,90,78,.14) 0 71.42%,rgba(75,107,255,.13) 0 85.71%,rgba(255,243,214,.6) 0),#fffaf0}
.tile.hd-tile{color:#2a2140;border-color:#ecd9a8}
.tile.yt-tile{background:radial-gradient(260px 140px at 100% 0%,rgba(255,31,61,.2),transparent 70%),linear-gradient(135deg,#fff5f3,#f6f0ff);border-color:#ffc2cb}
.tile.yt-tile small,.tile.yt-tile>svg{color:#ff1f3d}
.btn.yt-red{background:#ff1f3d;color:#fff;border-color:#ff1f3d}
.btn.yt-red:hover{background:#e3122f;color:#fff;border-color:#e3122f}
.tile.hd-tile small{color:#d6336c}.tile.hd-tile span{color:#544a60}.tile.hd-tile>svg{color:#d6336c}