:root{--bg:#fff6f1;--paper:#ffffff;--ink:#3a3340;--sub:#8a8090;--line:#f3e6ea;--accent:#ff6f91;--accent2:#ffd36e;--soft:#fdf0f4;--shadow:0 4px 18px rgba(255,111,145,.10)}
@media (prefers-color-scheme:dark){:root{--bg:#1e1a22;--paper:#29242e;--ink:#f3eef6;--sub:#b0a6b8;--line:#3a3340;--accent:#ff8fab;--accent2:#e0b84f;--soft:#352e3b;--shadow:none}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;line-height:1.7;-webkit-text-size-adjust:100%}
.wrap{max-width:960px;margin:0 auto;padding:16px 16px 64px}
nav.top{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;font-size:13px;margin:14px 0 0}
nav.top a{padding:4px 12px;border-radius:999px;background:var(--paper);box-shadow:var(--shadow)}
header.mast{text-align:center;margin:10px 0 22px}
.mast .logo{font-size:clamp(34px,8vw,54px);font-weight:900;letter-spacing:.04em;line-height:1.15;margin:0}
.mast .logo img{display:block;width:min(380px,82vw);height:auto;margin:0 auto}
.mast .logo a.x{text-decoration:none;background:linear-gradient(transparent 62%,var(--accent2) 62%,var(--accent2) 92%,transparent 92%);padding:0 6px}
.mast .emo{margin-left:6px;font-size:.8em}
.mast .tagline{font-size:13px;font-weight:700;color:var(--sub);margin-top:6px;letter-spacing:.08em}
.mast .meta{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--sub);margin-top:12px}
.mast .meta span{background:var(--paper);border-radius:999px;padding:2px 12px;box-shadow:var(--shadow)}
h1.ttl{font-size:17px;margin:0 0 18px;line-height:1.5;text-align:center;font-weight:700}
section{background:var(--paper);border-radius:22px;padding:20px 22px;margin-bottom:18px;min-width:0;box-shadow:var(--shadow)}
h2{margin:0 0 8px;display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
h2 .lbl{font-size:23px;font-weight:900;letter-spacing:.04em;line-height:1.3;background:linear-gradient(transparent 60%,var(--soft) 60%);padding:0 2px}
h2 small{font-size:12px;color:var(--sub);font-weight:500}
h3{font-size:14px;margin:18px 0 4px;color:var(--accent)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media (max-width:760px){.grid2{grid-template-columns:minmax(0,1fr)}}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
.g{display:inline-block;font-size:12px;font-weight:700;white-space:nowrap;color:#3a3340;line-height:1.6;padding:0 10px;border-radius:999px;
 background:color-mix(in srgb,var(--c) 55%,#fff);border:1px solid color-mix(in srgb,var(--c) 80%,#000 8%)}
.tag{display:inline-block;font-size:11px;color:var(--sub);background:var(--soft);border-radius:999px;padding:0 9px;white-space:nowrap}
.st{font-size:12px;color:var(--sub)}
ul.rows,ol.rank{list-style:none;margin:0;padding:0}
.rows li,.rank li{display:flex;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line);align-items:flex-start}
.rows li:last-child,.rank li:last-child{border-bottom:0}
.rows .time{flex:none;width:118px;font-variant-numeric:tabular-nums;font-weight:700;font-size:14px}
.rows.compact li{padding:8px 0}
.body{flex:1;min-width:0;overflow-wrap:anywhere}
.meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-bottom:3px}
.hp{font-size:12px;color:var(--accent);margin-left:6px;white-space:nowrap}
.left{display:inline-block;font-size:12px;background:var(--soft);color:var(--accent);border-radius:999px;padding:0 10px}
.left.hot{background:var(--accent);color:#fff}
.empty{color:var(--sub);font-size:14px}
.rank .no{flex:none;width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--accent);font-weight:900;display:grid;place-items:center;font-size:13px}
.rank li:nth-child(-n+3) .no{background:var(--accent);color:#fff}
.rank .nums{flex:none;text-align:right;font-variant-numeric:tabular-nums;font-size:13px}
ul.list{padding-left:18px}ul.list li{margin:4px 0}
footer{font-size:12px;color:var(--sub);text-align:center;margin-top:28px;line-height:1.8}
@media (max-width:760px){section{padding:16px 14px;border-radius:18px}.rows .time{width:86px;font-size:13px}}
.prose p{margin:0 0 12px}.prose ul{padding-left:20px;margin:0 0 12px}.prose li{margin:4px 0}
footer .fnav{display:flex;gap:12px;justify-content:center;margin-bottom:6px}
.gfilter{background:var(--paper);border-radius:22px;padding:14px 16px;margin:0 0 18px;box-shadow:var(--shadow);text-align:center}
.gf-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
button.gf{font:inherit;font-size:13px;line-height:1.9;padding:0 12px;cursor:pointer}
button.gf[aria-pressed=true]{background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 4px color-mix(in srgb,var(--c) 80%,#000 15%)}
button.gf.off{opacity:.35}
.gf-note{font-size:12px;color:var(--sub);margin-top:10px;display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.gf-all{font:inherit;font-size:12px;border:0;background:var(--soft);color:var(--accent);border-radius:999px;padding:2px 12px;cursor:pointer}
[hidden]{display:none!important}
/* YouTube：1行ずつ（グループ・タイトル・再生数） */
ul.yt,ol.yt{list-style:none;margin:0;padding:0}
.yt li{display:flex;gap:8px;align-items:baseline;padding:8px 0;border-bottom:1px dashed var(--line)}
.yt li:last-child{border-bottom:0}
.yt .g{flex:none}
.yt .t{flex:1;min-width:0;overflow-wrap:anywhere;font-size:14px;line-height:1.55}
.yt .v{flex:none;font-variant-numeric:tabular-nums;font-size:13px;color:var(--sub);white-space:nowrap}
.yt.rank .no{flex:none;width:22px;height:22px;font-size:12px;align-self:center}
.yt.rank li:nth-child(-n+3) .v{color:var(--accent);font-weight:700}
/* YouTube 新着：サムネのカード */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:6px}
.card{display:flex;flex-direction:column;background:var(--soft);border-radius:16px;overflow:hidden;transition:transform .15s}
.card:hover{transform:translateY(-2px);color:inherit}
.card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--line)}
.card .cb{padding:8px 10px 10px;display:flex;flex-direction:column;gap:4px}
.card .ct{font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cards .gf-empty{grid-column:1/-1;margin:0}
@media (max-width:760px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card .ct{font-size:12px}}
/* 推しボタン：幅は名前の長さのまま。パソコンは5個＋5個の2行になる幅で折り返す */
.gf-btns{max-width:600px;margin:0 auto}
@media (max-width:760px){.gf-btns{gap:6px}button.gf{font-size:12px;padding:0 10px}}
.yt .yb{flex:1;min-width:0;display:flex;gap:8px;align-items:baseline}
/* スマホ */
@media (max-width:760px){
 nav.top{gap:4px;font-size:11.5px;flex-wrap:wrap}
 nav.top a{padding:4px 9px;white-space:nowrap}
 .rows li{flex-wrap:wrap;gap:2px 10px}
 .rows .time{width:auto;flex-basis:100%;font-size:13px}
 .rows .time br{display:none}
 .rows .time .left{margin-right:6px}
 .yt .yb{flex-direction:column;gap:2px;align-items:flex-start}
 .yt li{align-items:flex-start}
 .yt.rank .no{align-self:flex-start;margin-top:2px}
 .wrap{padding:12px 12px 48px}
 h2 .lbl{font-size:21px}
}
.live{display:inline-block;font-size:11px;font-weight:700;color:#fff;background:#ff5a5a;border-radius:999px;padding:0 9px;white-space:nowrap}
.live::before{content:"●";font-size:8px;margin-right:4px;vertical-align:2px}
/* 号の日付（見出し）：黄色いふちの丸いラベルで目立たせる */
h1.ttl{display:table;margin:4px auto 20px;font-size:clamp(20px,5.2vw,27px);font-weight:900;letter-spacing:.04em;
 background:var(--paper);border:3px solid var(--accent2);border-radius:999px;padding:6px 26px;box-shadow:0 5px 0 color-mix(in srgb,var(--accent2) 55%,transparent)}
/* 週間：大きな発表は文字を大きく */
.rows.hl a{font-size:16px;font-weight:700}
details.fold{margin:16px 0 0;border-radius:14px;background:var(--soft)}
details.fold summary{cursor:pointer;padding:8px 14px;font-size:14px;font-weight:700;color:var(--accent)}
details.fold ul{background:var(--paper);border-radius:0 0 14px 14px;padding:0 14px}
.more{text-align:center;font-size:13px;margin:6px 0 0}.more a{color:var(--accent)}
.wk-lead{text-align:center;font-size:13px;color:var(--sub);margin:-8px 0 16px;font-weight:700}
/* 〆切：何の〆切かを大きく、元のニュースは小さく */
a.dl-what{display:block;font-weight:700;font-size:15px;line-height:1.5}
.dl-src{font-size:12px;color:var(--sub);line-height:1.5;margin-top:2px}
.hp.tver{color:#0a8fd8}
.fold .rows{list-style:none}
.hp.radiko{color:#00a0e9}
/* カレンダー登録 */
ul.cal-list{list-style:none;margin:0;padding:0}
.cal-list li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.cal-list li:last-child{border-bottom:0}
.cal-list .g{min-width:120px;text-align:center}
.cal-btn{font-size:13px;font-weight:700;padding:3px 14px;border-radius:999px;background:var(--soft);color:var(--accent)}
.cal-btn:hover{background:var(--accent);color:#fff}
/* カレンダー登録を目立たせる */
nav.top a.hl{background:var(--accent);color:#fff;font-weight:700}
.cal-cta{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;align-items:center;margin:-6px 0 18px;padding:12px 16px;border-radius:18px;
 background:linear-gradient(90deg,#ffe3ec,#fff3c9);box-shadow:var(--shadow);text-align:center}
.cal-cta b{font-size:15px}
.cal-cta span{font-size:12px;color:var(--accent);font-weight:700}
.cal-cta:hover{color:inherit;filter:brightness(1.02)}
.prose h2{font-size:16px;margin:18px 0 6px}.prose a{color:var(--accent);text-decoration:underline}