:root{--lqw:30px;
  --paper:#f5f2ec; --ink:#1c1d21; --ink2:#55575e; --rule:#dcd6cb; --rule2:#ebe6dc;
  --head:#17181c; --head2:#26282e; --accent:#f2c230;
  --colw:92px; --dayw:44px; --timew:62px; --rowh:54px;
  --font:"Noto Sans JP","Noto Sans CJK JP","Hiragino Sans","Yu Gothic",sans-serif;
  --num:"Barlow Condensed","Noto Sans JP",sans-serif;
  --ud:"BIZ UDGothic","Noto Sans JP",sans-serif;   /* 時刻の字（UDフォント。数字が半角の等幅） */
  /* 局の色：塗り / 帯 */
  --c-ex:#fbd3d0; --a-ex:#d9473f;   /* テレビ朝日 */
  --c-nt:#fde0bd; --a-nt:#e47f12;   /* 日本テレビ */
  --c-tb:#d2e2fa; --a-tb:#2f74d0;   /* TBS */
  --c-cx:#d4ecce; --a-cx:#33923a;   /* フジテレビ */
  --c-tx:#e6d9fa; --a-tx:#8152cf;   /* テレビ東京 */
  --c-nh:#e1e1df; --a-nh:#6d6d6a;   /* NHK */
  --c-mx:#cdece6; --a-mx:#1d8a7f;   /* TOKYO MX */
  --c-tk:#f1e2c2; --a-tk:#a26f12;   /* テレビ神奈川 */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6}
a{color:inherit}

/* 見出し帯 */
.masthead{background:var(--head);color:#f4f1ea;position:sticky;top:0;z-index:30;box-shadow:0 1px 0 #000}
.masthead-inner{max-width:1600px;margin:0 auto;padding:8px 20px;display:flex;gap:10px 22px;align-items:center;flex-wrap:wrap}
.brand-kicker{display:block;font-family:var(--num);font-weight:600;letter-spacing:.24em;font-size:10px;color:var(--accent);line-height:1.2}
.brand h1{margin:0;font-weight:900;font-size:19px;letter-spacing:.04em;line-height:1.25;white-space:nowrap}
.search{display:flex;align-items:center;gap:6px;background:var(--head2);border:1px solid #3a3c43;border-radius:999px;padding:5px 14px;min-width:220px;margin-left:auto}
.search svg{width:16px;height:16px;fill:none;stroke:#a9abb3;stroke-width:2;stroke-linecap:round}
.search input{background:none;border:0;outline:0;color:#f4f1ea;font:inherit;font-size:14px;width:100%}
.search input::placeholder{color:#8d9098}
.controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--head2);border-radius:10px;padding:3px}
.seg button{all:unset;cursor:pointer;padding:4px 12px;border-radius:8px;font-size:14px;font-weight:700;color:#b9bbc2}
.seg button[aria-selected=true]{background:var(--accent);color:var(--head)}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button,.tabs a{all:unset;cursor:pointer;padding:4px 10px;font-size:14px;font-weight:500;color:#b9bbc2;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button[aria-selected=true]{color:#fff;border-color:var(--accent)}
.seg button:focus-visible,.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

main{max-width:1600px;margin:0 auto;padding:10px 20px 60px}
.bar{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;margin-bottom:8px}
.summary{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.summary h2{margin:0;font-size:17px;font-weight:900}
.summary .range{font-family:var(--num);font-size:18px;font-weight:600;color:var(--ink2);letter-spacing:.02em}
.summary .count{font-size:12px;color:var(--ink2)}
.density{display:inline-flex;margin-left:auto;background:#fff;border:1px solid var(--rule);border-radius:8px;padding:2px}
.density button{all:unset;cursor:pointer;font-size:12px;font-weight:500;padding:3px 10px;border-radius:6px;color:var(--ink2)}
.density button[aria-checked=true]{background:var(--head);color:#fff}
.density button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* 凡例（絞り込み） */
.legend{display:flex;gap:5px;flex-wrap:wrap;margin:0}
.legend button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:2px 9px 2px 7px;border-radius:999px;background:#fff;border:1px solid var(--rule)}
.legend button i{width:12px;height:12px;border-radius:3px;display:inline-block}
.legend button[aria-pressed=false]{opacity:.4}
.legend button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 番組表 */
.grid-wrap{overflow:auto;background:#fff;border:1px solid var(--rule);border-radius:12px;max-height:calc(100vh - 128px);position:relative}
.grid{display:grid;min-width:max-content;position:relative}
.h{position:sticky;top:0;z-index:4;background:#fff;border-bottom:1px solid var(--rule)}
.h-year{font-family:var(--num);font-weight:700;font-size:18px;text-align:center;height:28px;line-height:28px;letter-spacing:.03em;border-left:1px solid var(--rule)}
.h-half{position:sticky;top:28px;z-index:4;background:#fff;font-size:11px;color:var(--ink2);text-align:center;border-bottom:1px solid var(--rule);border-left:1px solid var(--rule2);padding:0 0 4px}
.h-half.y{border-left-color:var(--rule)}
.corner{position:sticky;left:0;top:0;z-index:6;background:#fff;border-bottom:1px solid var(--rule)}
.corner2{position:sticky;left:0;top:28px;z-index:6;background:#fff;border-bottom:1px solid var(--rule)}
.day{position:sticky;left:0;z-index:3;background:var(--head);color:#fff;font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center;border-bottom:2px solid var(--paper)}
.day.obi{font-size:14px;writing-mode:vertical-rl;letter-spacing:.2em}
.time{position:sticky;left:var(--dayw);z-index:3;background:#faf8f4;font-family:var(--num);font-weight:600;font-size:16px;display:flex;align-items:flex-start;justify-content:center;padding-top:6px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.time.cont{border-bottom-color:var(--rule2)}
.slot{border-bottom:1px solid var(--rule2);border-left:1px solid var(--rule2);padding:3px;min-height:var(--rowh)}
.slot.y{border-left-color:var(--rule)}
.slot.last{border-bottom-color:var(--rule)}
.prog{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;min-height:calc(var(--rowh) - 7px);border-radius:7px;padding:4px 8px 4px 10px;position:relative;overflow:hidden;font-size:12.5px;font-weight:500;line-height:1.35;transition:transform .12s,box-shadow .12s}
.prog::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.prog span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.prog small{font-size:10.5px;opacity:.7;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.12)}
.prog:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.prog.hl{outline:3px solid var(--accent);outline-offset:1px;animation:pulse 1.2s ease 2}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(242,194,48,.45)}}
.empty{display:block;height:100%;min-height:calc(var(--rowh) - 7px);border-radius:7px;background:repeating-linear-gradient(135deg,transparent 0 6px,#f3f0ea 6px 7px)}
.dim .prog{opacity:.18}
.st-テレビ朝日{background:var(--c-ex)}.st-テレビ朝日::before{background:var(--a-ex)}
.st-日本テレビ{background:var(--c-nt)}.st-日本テレビ::before{background:var(--a-nt)}
.st-TBS{background:var(--c-tb)}.st-TBS::before{background:var(--a-tb)}
.st-フジテレビ{background:var(--c-cx)}.st-フジテレビ::before{background:var(--a-cx)}
.st-テレビ東京{background:var(--c-tx)}.st-テレビ東京::before{background:var(--a-tx)}
.st-NHK{background:var(--c-nh)}.st-NHK::before{background:var(--a-nh)}

/* 表に入らなかった番組 */
.outlist{margin:18px 0 0;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:12px 16px}
.outlist summary{cursor:pointer;font-weight:700}
.outlist .hint{font-size:13px;color:var(--ink2);margin:6px 0}
.outlist ul{list-style:none;padding:0;margin:0;columns:2 340px;column-gap:24px;font-size:13.5px}
.outlist li{break-inside:avoid;padding:3px 0;border-bottom:1px dotted var(--rule)}
.outlist li button{all:unset;cursor:pointer}
.outlist li button:hover{text-decoration:underline}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:0 6px;border-radius:4px;margin-right:6px;color:#fff;vertical-align:1px}

.about{margin-top:28px;font-size:14px;color:var(--ink2)}
.about h2{font-size:16px;color:var(--ink);margin:0 0 6px}
.about ul{padding-left:1.2em;margin:0 0 8px}
.credit{font-size:12px}

/* 詳細 */
.sheet{position:fixed;inset:0;z-index:50}
.sheet-backdrop{position:absolute;inset:0;background:rgba(15,16,20,.45)}
.sheet-card{position:absolute;right:24px;top:96px;width:min(420px,calc(100% - 32px));background:#fff;border-radius:14px;padding:20px 22px 18px;box-shadow:0 18px 50px rgba(0,0,0,.3);max-height:calc(100vh - 120px);overflow:auto}
.sheet-close{all:unset;cursor:pointer;position:absolute;right:14px;top:10px;font-size:24px;color:var(--ink2);line-height:1}
.sheet-station{display:inline-block;font-size:12px;font-weight:700;color:#fff;padding:2px 10px;border-radius:999px}
.sheet h3{margin:8px 0 10px;font-size:20px;font-weight:900;line-height:1.4}
.sheet dl{display:grid;grid-template-columns:7em 1fr;gap:6px 10px;margin:0;font-size:14px}
.sheet dt{color:var(--ink2)}
.sheet dd{margin:0}
.sheet dd a{text-underline-offset:3px}

/* 検索結果 */
.results{position:fixed;z-index:40;top:62px;right:20px;width:min(420px,calc(100% - 32px));max-height:60vh;overflow:auto;background:#fff;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.25);padding:6px}
.results button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:8px;align-items:center;width:100%;padding:8px 10px;border-radius:8px;font-size:14px}
.results button:hover,.results button:focus-visible{background:#f3f0ea}
.results .meta{margin-left:auto;font-size:12px;color:var(--ink2);white-space:nowrap}
.results .none{padding:10px;color:var(--ink2);font-size:14px}

/* 密度 */
body.d-compact,body.d-fit{--rowh:38px}
body.d-compact{--colw:66px}
.d-compact .slot,.d-fit .slot{padding:2px}
.d-compact .prog,.d-fit .prog{font-size:11px;padding:2px 5px 2px 8px;border-radius:5px;line-height:1.3;min-height:calc(var(--rowh) - 5px)}
.d-compact .prog::before,.d-fit .prog::before{width:3px}
.d-compact .prog small,.d-fit .prog small{display:none}
.d-compact .empty,.d-fit .empty{min-height:calc(var(--rowh) - 5px)}
.d-compact .time,.d-fit .time{font-size:14px;padding-top:3px}
.d-compact .day,.d-fit .day{font-size:15px}
body.d-fit{--rowh:34px}
.d-fit .prog{font-size:10px;padding:1px 3px 1px 6px}
.d-fit .h-half{font-size:10px}

@media (max-width:720px){
  :root{--colw:76px;--dayw:34px;--timew:50px;--rowh:50px}
  :root{--colw:70px;--dayw:28px;--timew:44px}
  body{font-size:14px}
  .masthead{position:static}
  .masthead-inner{padding:8px 14px;gap:6px 10px}
  .brand-kicker{display:none}
  .brand h1{font-size:17px}
  .search{min-width:0;flex:1 1 100%;padding:4px 12px;margin-left:0;order:3}
  .search input{font-size:16px}
  .controls{gap:6px 10px;order:2;min-width:0;max-width:100%}
  .tabs{max-width:100%}
  .seg button{padding:4px 12px;font-size:13px}
  .tabs button,.tabs a{padding:4px 8px;font-size:13px}
  main{padding:10px 12px 40px}
  .summary{gap:2px 10px;margin-bottom:8px}
  .summary h2{font-size:16px}
  .summary .range{font-size:16px}
  .summary .count{flex-basis:100%;font-size:12px;line-height:1.4}
  .legend{gap:4px;margin-bottom:8px}
  .legend button{font-size:12px;padding:2px 8px 2px 6px}
  .legend button i{width:10px;height:10px}
  .grid-wrap{max-height:calc(100vh - 120px);border-radius:10px}
  .density{margin-left:0}
  body.d-compact{--colw:58px}
  .h-year{font-size:17px}
  .prog{font-size:11.5px;padding:3px 5px 3px 8px}
  .prog small{display:none}
  .day{font-size:15px}
  .time{font-size:14px}
  .sheet-card{left:0;right:0;bottom:0;top:auto;width:100%;border-radius:16px 16px 0 0;max-height:75vh}
  .results{top:118px;right:16px}
}

/* 全日帯と深夜帯のページの行き来 */
.seg a{all:unset;cursor:pointer;padding:5px 16px;border-radius:7px;font-size:14px;font-weight:700;color:#c9cbd2;white-space:nowrap}
.seg a[aria-current=page]{background:var(--accent);color:var(--head)}
.seg a:hover{color:#fff}
.seg a[aria-current=page]:hover{color:var(--head)}

/* 深夜帯の表 */
.lgrid{display:grid;position:relative;min-width:max-content;--lcolw:128px;--lrowh:50px}
body.d-compact .lgrid{--lcolw:104px;--lrowh:44px}
body.d-fit .lgrid{--lrowh:40px}
.lgrid .ly{grid-column:1;background:var(--head);color:#f4f1ea;font-family:var(--num);font-weight:700;font-size:22px;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.02em;border-bottom:2px solid var(--paper);position:sticky;left:0;z-index:4}
.lgrid .lq{grid-column:2;background:var(--head2);color:#e8e6df;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #3a3c43;position:sticky;left:var(--dayw);z-index:4}
.lgrid .lc{border-bottom:1px solid var(--rule2);border-left:1px solid var(--rule2);padding:2px;min-height:var(--lrowh)}
.lgrid .lhead{position:sticky;top:30px;z-index:3;background:var(--paper);border-bottom:2px solid var(--ink)}
.lgrid .lab{display:flex;align-items:flex-end;justify-content:center;text-align:center;font-size:11px;font-weight:700;line-height:1.3;color:var(--ink2);padding:4px 4px 3px}
.lgrid .lab i{display:block;width:100%;height:3px;border-radius:2px;margin-top:3px}
.lgrid .mark{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--ink2);letter-spacing:.1em}
.lgrid .mark.gap{background:repeating-linear-gradient(135deg,transparent 0 6px,#ece7dd 6px 7px)}
.lgrid .prog{min-height:calc(var(--lrowh) - 5px);text-align:center;align-items:center;padding:3px 6px 3px 9px;font-size:12px;line-height:1.3}
.lgrid .prog small{display:block;font-size:10.5px;opacity:.85}
body.d-compact .lgrid .prog,body.d-fit .lgrid .prog{font-size:11px}
.st-MX{background:var(--c-mx)}.st-MX::before{background:var(--a-mx)}
.st-テレビ神奈川{background:var(--c-tk)} .st-テレビ神奈川::before{background:var(--a-tk)}
.lnote{font-size:12.5px;color:var(--ink2);margin:8px 2px 0}
.lgrid .lday{grid-row:1;position:sticky;top:0;z-index:5;height:30px;min-height:0;padding:0;display:flex;align-items:center;justify-content:center;background:var(--head2);color:#f4f1ea;font-size:12.5px;font-weight:700;letter-spacing:.08em;border-left:2px solid var(--paper)}
.dayseg button{min-width:38px;display:flex;flex-direction:column;align-items:center;line-height:1.15;padding:4px 8px}
.dayseg button small{font-size:10px;opacity:.7;font-family:var(--num)}
.dayseg button.none{opacity:.4}

/* スマホの前半・後半の切り替え */
.halfseg button{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.halfseg button small{font-size:10px;opacity:.7;font-family:var(--num)}
.halfseg[hidden]{display:none}

/* 再放送の表示の切り替え */
.rerun{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink2);background:#fff;border:1px solid var(--rule);border-radius:999px;padding:5px 12px;white-space:nowrap}
.rerun b{font-family:var(--num);font-size:12px;letter-spacing:.04em;padding:1px 8px;border-radius:999px;background:#e9e5dc;color:var(--ink2)}
.rerun[aria-pressed=true] b{background:var(--ink);color:#fff}

.inner{margin-top:14px;font-size:13px;color:var(--ink2)}
.inner summary{font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;padding:4px 0}
.inner ul{margin-top:6px!important}
.inner ul{padding-left:1.2em;margin:0;columns:2;column-gap:28px}
.inner li{break-inside:avoid;margin:0 0 2px}
@media (max-width:720px){.inner ul{columns:1}}

/* ==== PC の大きさ（tools/pc_sizes.py が作る。手で直さない） ==== */
@media (min-width:900px){
  :root{--lqw:22.5px;--colw:69px;--dayw:33px;--timew:46.5px;--rowh:40.5px}
  body{font-size:11px}
  .masthead{box-shadow:0 1px 0 #000}
  .masthead-inner{max-width:1200px;padding:6px 15px;gap:7.5px 16.5px}
  .brand-kicker{font-size:8px}
  .brand h1{font-size:14px}
  .search{gap:4.5px;border:1px solid #3a3c43;border-radius:749px;padding:4px 10.5px;min-width:165px}
  .search svg{width:12px;height:12px}
  .search input{font-size:10.5px}
  .controls{gap:9px}
  .seg{border-radius:7.5px;padding:2px}
  .seg button{padding:3px 9px;border-radius:6px;font-size:10.5px}
  .tabs{gap:3px}
  .tabs button,.tabs a{padding:3px 7.5px;font-size:10.5px;border-bottom:2px solid transparent}
  .seg button:focus-visible,.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  main{max-width:1200px;padding:7.5px 15px 45px}
  .bar{gap:6px 13.5px;margin-bottom:6px}
  .summary{gap:7.5px}
  .summary h2{font-size:13px}
  .summary .range{font-size:13.5px}
  .summary .count{font-size:9px}
  .density{border:1px solid var(--rule);border-radius:6px;padding:2px}
  .density button{font-size:9px;padding:2px 7.5px;border-radius:4.5px}
  .density button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
  .legend{gap:4px}
  .legend button{gap:4px;font-size:9px;padding:2px 7px 2px 5px;border-radius:749px;border:1px solid var(--rule)}
  .legend button i{width:9px;height:9px;border-radius:2px}
  .legend button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .grid-wrap{border:1px solid var(--rule);border-radius:9px;max-height:calc(100vh - 96px)}
  .h{border-bottom:1px solid var(--rule)}
  .h-year{font-size:13.5px;height:21px;line-height:21px;border-left:1px solid var(--rule)}
  .h-half{top:21px;font-size:8px;border-bottom:1px solid var(--rule);border-left:1px solid var(--rule2);padding:0 0 3px}
  .corner{border-bottom:1px solid var(--rule)}
  .corner2{top:21px;border-bottom:1px solid var(--rule)}
  .day{font-size:13.5px;border-bottom:2px solid var(--paper)}
  .day.obi{font-size:10.5px}
  .time{font-size:12px;padding-top:4.5px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
  .slot{border-bottom:1px solid var(--rule2);border-left:1px solid var(--rule2);padding:2px}
  .prog{min-height:calc(var(--rowh) - 5px);border-radius:5px;padding:3px 6px 3px 7.5px;font-size:9.5px}
  .prog::before{width:3px}
  .prog small{font-size:8px}
  .prog:hover{transform:translateY(-1px);box-shadow:0 2px 7.5px rgba(0,0,0,.12)}
  .prog:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
  .prog.hl{outline:2px solid var(--accent);outline-offset:1px}
  .empty{min-height:calc(var(--rowh) - 5px);border-radius:5px;background:repeating-linear-gradient(135deg,transparent 0 4.5px,#f3f0ea 4.5px 5px)}
  .outlist{margin:13.5px 0 0;border:1px solid var(--rule);border-radius:9px;padding:9px 12px}
  .outlist .hint{font-size:10px;margin:4.5px 0}
  .outlist ul{columns:2 255px;column-gap:18px;font-size:10px}
  .outlist li{padding:2px 0;border-bottom:1px dotted var(--rule)}
  .tag{font-size:8px;padding:0 4.5px;border-radius:3px;margin-right:4.5px;vertical-align:1px}
  .about{margin-top:21px;font-size:10.5px}
  .about h2{font-size:12px;margin:0 0 4.5px}
  .about ul{margin:0 0 6px}
  .credit{font-size:9px}
  .sheet-card{right:18px;top:72px;width:min(315px,calc(100% - 24px));border-radius:10.5px;padding:15px 16.5px 13.5px;box-shadow:0 13.5px 37.5px rgba(0,0,0,.3);max-height:calc(100vh - 90px)}
  .sheet-close{right:10.5px;top:7.5px;font-size:18px}
  .sheet-station{font-size:9px;padding:2px 7.5px;border-radius:749px}
  .sheet h3{margin:6px 0 7.5px;font-size:15px}
  .sheet dl{gap:4.5px 7.5px;font-size:10.5px}
  .sheet dd a{text-underline-offset:2px}
  .results{top:46.5px;right:15px;width:min(315px,calc(100% - 24px));border-radius:9px;box-shadow:0 10.5px 30px rgba(0,0,0,.25);padding:4.5px}
  .results button{gap:6px;padding:6px 7.5px;border-radius:6px;font-size:10.5px}
  .results .meta{font-size:9px}
  .results .none{padding:7.5px;font-size:10.5px}
  body.d-compact,body.d-fit{--rowh:28.5px}
  body.d-compact{--colw:49.5px}
  .d-compact .slot,.d-fit .slot{padding:2px}
  .d-compact .prog,.d-fit .prog{font-size:8px;padding:2px 4px 2px 6px;border-radius:4px;min-height:calc(var(--rowh) - 4px)}
  .d-compact .prog::before,.d-fit .prog::before{width:2px}
  .d-compact .empty,.d-fit .empty{min-height:calc(var(--rowh) - 4px)}
  .d-compact .time,.d-fit .time{font-size:10.5px;padding-top:2px}
  .d-compact .day,.d-fit .day{font-size:11px}
  body.d-fit{--rowh:25.5px}
  .d-fit .prog{font-size:8px;padding:1px 2px 1px 4.5px}
  .d-fit .h-half{font-size:8px}
  .seg a{padding:4px 12px;border-radius:5px;font-size:10.5px}
  .lgrid{--lcolw:96px;--lrowh:37.5px}
  body.d-compact .lgrid{--lcolw:78px;--lrowh:33px}
  body.d-fit .lgrid{--lrowh:30px}
  .lgrid .ly{font-size:16.5px;border-bottom:2px solid var(--paper)}
  .lgrid .lq{font-size:9px;border-bottom:1px solid #3a3c43}
  .lgrid .lc{border-bottom:1px solid var(--rule2);border-left:1px solid var(--rule2);padding:2px}
  .lgrid .lhead{top:22.5px;border-bottom:2px solid var(--ink)}
  .lgrid .lab{font-size:8px;padding:3px 3px 2px}
  .lgrid .lab i{height:2px;border-radius:2px;margin-top:2px}
  .lgrid .mark{font-size:9px}
  .lgrid .mark.gap{background:repeating-linear-gradient(135deg,transparent 0 4.5px,#ece7dd 4.5px 5px)}
  .lgrid .prog{min-height:calc(var(--lrowh) - 4px);padding:2px 4.5px 2px 7px;font-size:9px}
  .lgrid .prog small{font-size:8px}
  body.d-compact .lgrid .prog,body.d-fit .lgrid .prog{font-size:8px}
  .lnote{font-size:9.5px;margin:6px 2px 0}
  .lgrid .lday{height:22.5px;font-size:9.5px;border-left:2px solid var(--paper)}
  .dayseg button{min-width:28.5px;padding:3px 6px}
  .dayseg button small{font-size:8px}
  .halfseg button small{font-size:8px}
  .rerun{gap:4.5px;font-size:10px;border:1px solid var(--rule);border-radius:749px;padding:4px 9px}
  .rerun b{font-size:9px;padding:1px 6px;border-radius:749px}
  .inner{margin-top:10.5px;font-size:10px}
  .inner summary{font-size:10.5px;padding:3px 0}
  .inner ul{margin-top:4.5px!important}
  .inner ul{column-gap:21px}
  .inner li{margin:0 0 2px}
}
/* スマホ・タブレット：PCの大きさとスマホ向けの大きさをそれぞれ0.75倍 */
@media (max-width:899px){
  :root{--lqw:22.5px;--colw:69px;--dayw:33px;--timew:46.5px;--rowh:40.5px}
  body{font-size:11px}
  .masthead{box-shadow:0 1px 0 #000}
  .masthead-inner{max-width:1200px;padding:6px 15px;gap:7.5px 16.5px}
  .brand-kicker{font-size:8px}
  .brand h1{font-size:14px}
  .search{gap:4.5px;border:1px solid #3a3c43;border-radius:749px;padding:4px 10.5px;min-width:165px}
  .search svg{width:12px;height:12px}
  .search input{font-size:10.5px}
  .controls{gap:9px}
  .seg{border-radius:7.5px;padding:2px}
  .seg button{padding:3px 9px;border-radius:6px;font-size:10.5px}
  .tabs{gap:3px}
  .tabs button,.tabs a{padding:3px 7.5px;font-size:10.5px;border-bottom:2px solid transparent}
  .seg button:focus-visible,.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  main{max-width:1200px;padding:7.5px 15px 45px}
  .bar{gap:6px 13.5px;margin-bottom:6px}
  .summary{gap:7.5px}
  .summary h2{font-size:13px}
  .summary .range{font-size:13.5px}
  .summary .count{font-size:9px}
  .density{border:1px solid var(--rule);border-radius:6px;padding:2px}
  .density button{font-size:9px;padding:2px 7.5px;border-radius:4.5px}
  .density button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
  .legend{gap:4px}
  .legend button{gap:4px;font-size:9px;padding:2px 7px 2px 5px;border-radius:749px;border:1px solid var(--rule)}
  .legend button i{width:9px;height:9px;border-radius:2px}
  .legend button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .grid-wrap{border:1px solid var(--rule);border-radius:9px;max-height:calc(100vh - 96px)}
  .h{border-bottom:1px solid var(--rule)}
  .h-year{font-size:13.5px;height:21px;line-height:21px;border-left:1px solid var(--rule)}
  .h-half{top:21px;font-size:8px;border-bottom:1px solid var(--rule);border-left:1px solid var(--rule2);padding:0 0 3px}
  .corner{border-bottom:1px solid var(--rule)}
  .corner2{top:21px;border-bottom:1px solid var(--rule)}
  .day{font-size:13.5px;border-bottom:2px solid var(--paper)}
  .day.obi{font-size:10.5px}
  .time{font-size:12px;padding-top:4.5px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
  .slot{border-bottom:1px solid var(--rule2);border-left:1px solid var(--rule2);padding:2px}
  .prog{min-height:calc(var(--rowh) - 5px);border-radius:5px;padding:3px 6px 3px 7.5px;font-size:9.5px}
  .prog::before{width:3px}
  .prog small{font-size:8px}
  .prog:hover{transform:translateY(-1px);box-shadow:0 2px 7.5px rgba(0,0,0,.12)}
  .prog:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
  .prog.hl{outline:2px solid var(--accent);outline-offset:1px}
  .empty{min-height:calc(var(--rowh) - 5px);border-radius:5px;background:repeating-linear-gradient(135deg,transparent 0 4.5px,#f3f0ea 4.5px 5px)}
  .outlist{margin:13.5px 0 0;border:1px solid var(--rule);border-radius:9px;padding:9px 12px}
  .outlist .hint{font-size:10px;margin:4.5px 0}
  .outlist ul{columns:2 255px;column-gap:18px;font-size:10px}
  .outlist li{padding:2px 0;border-bottom:1px dotted var(--rule)}
  .tag{font-size:8px;padding:0 4.5px;border-radius:3px;margin-right:4.5px;vertical-align:1px}
  .about{margin-top:21px;font-size:10.5px}
  .about h2{font-size:12px;margin:0 0 4.5px}
  .about ul{margin:0 0 6px}
  .credit{font-size:9px}
  .sheet-card{right:18px;top:72px;width:min(315px,calc(100% - 24px));border-radius:10.5px;padding:15px 16.5px 13.5px;box-shadow:0 13.5px 37.5px rgba(0,0,0,.3);max-height:calc(100vh - 90px)}
  .sheet-close{right:10.5px;top:7.5px;font-size:18px}
  .sheet-station{font-size:9px;padding:2px 7.5px;border-radius:749px}
  .sheet h3{margin:6px 0 7.5px;font-size:15px}
  .sheet dl{gap:4.5px 7.5px;font-size:10.5px}
  .sheet dd a{text-underline-offset:2px}
  .results{top:46.5px;right:15px;width:min(315px,calc(100% - 24px));border-radius:9px;box-shadow:0 10.5px 30px rgba(0,0,0,.25);padding:4.5px}
  .results button{gap:6px;padding:6px 7.5px;border-radius:6px;font-size:10.5px}
  .results .meta{font-size:9px}
  .results .none{padding:7.5px;font-size:10.5px}
  body.d-compact,body.d-fit{--rowh:28.5px}
  body.d-compact{--colw:49.5px}
  .d-compact .slot,.d-fit .slot{padding:2px}
  .d-compact .prog,.d-fit .prog{font-size:8px;padding:2px 4px 2px 6px;border-radius:4px;min-height:calc(var(--rowh) - 4px)}
  .d-compact .prog::before,.d-fit .prog::before{width:2px}
  .d-compact .empty,.d-fit .empty{min-height:calc(var(--rowh) - 4px)}
  .d-compact .time,.d-fit .time{font-size:10.5px;padding-top:2px}
  .d-compact .day,.d-fit .day{font-size:11px}
  body.d-fit{--rowh:25.5px}
  .d-fit .prog{font-size:8px;padding:1px 2px 1px 4.5px}
  .d-fit .h-half{font-size:8px}
  .seg a{padding:4px 12px;border-radius:5px;font-size:10.5px}
  .lgrid{--lcolw:96px;--lrowh:37.5px}
  body.d-compact .lgrid{--lcolw:78px;--lrowh:33px}
  body.d-fit .lgrid{--lrowh:30px}
  .lgrid .ly{font-size:16.5px;border-bottom:2px solid var(--paper)}
  .lgrid .lq{font-size:9px;border-bottom:1px solid #3a3c43}
  .lgrid .lc{border-bottom:1px solid var(--rule2);border-left:1px solid var(--rule2);padding:2px}
  .lgrid .lhead{top:22.5px;border-bottom:2px solid var(--ink)}
  .lgrid .lab{font-size:8px;padding:3px 3px 2px}
  .lgrid .lab i{height:2px;border-radius:2px;margin-top:2px}
  .lgrid .mark{font-size:9px}
  .lgrid .mark.gap{background:repeating-linear-gradient(135deg,transparent 0 4.5px,#ece7dd 4.5px 5px)}
  .lgrid .prog{min-height:calc(var(--lrowh) - 4px);padding:2px 4.5px 2px 7px;font-size:9px}
  .lgrid .prog small{font-size:8px}
  body.d-compact .lgrid .prog,body.d-fit .lgrid .prog{font-size:8px}
  .lnote{font-size:9.5px;margin:6px 2px 0}
  .lgrid .lday{height:22.5px;font-size:9.5px;border-left:2px solid var(--paper)}
  .dayseg button{min-width:28.5px;padding:3px 6px}
  .dayseg button small{font-size:8px}
  .halfseg button small{font-size:8px}
  .rerun{gap:4.5px;font-size:10px;border:1px solid var(--rule);border-radius:749px;padding:4px 9px}
  .rerun b{font-size:9px;padding:1px 6px;border-radius:749px}
  .inner{margin-top:10.5px;font-size:10px}
  .inner summary{font-size:10.5px;padding:3px 0}
  .inner ul{margin-top:4.5px!important}
  .inner ul{column-gap:21px}
  .inner li{margin:0 0 2px}
}
@media (max-width:720px){
  :root{--colw:57px;--dayw:25.5px;--timew:37.5px;--rowh:37.5px}
  :root{--colw:52.5px;--dayw:21px;--timew:33px}
  body{font-size:10.5px}
  .masthead-inner{padding:6px 10.5px;gap:4.5px 7.5px}
  .brand h1{font-size:13px}
  .search{padding:3px 9px}
  .search input{font-size:12px}
  .controls{gap:4.5px 7.5px}
  .seg button{padding:3px 9px;font-size:10px}
  .tabs button,.tabs a{padding:3px 6px;font-size:10px}
  main{padding:7.5px 9px 30px}
  .summary{gap:2px 7.5px;margin-bottom:6px}
  .summary h2{font-size:12px}
  .summary .range{font-size:12px}
  .summary .count{font-size:9px}
  .legend{gap:3px;margin-bottom:6px}
  .legend button{font-size:9px;padding:2px 6px 2px 4.5px}
  .legend button i{width:7.5px;height:7.5px}
  .grid-wrap{max-height:calc(100vh - 90px);border-radius:7.5px}
  body.d-compact{--colw:43.5px}
  .h-year{font-size:13px}
  .prog{font-size:8.5px;padding:2px 4px 2px 6px}
  .day{font-size:11px}
  .time{font-size:10.5px}
  .sheet-card{border-radius:12px 12px 0 0}
  .results{top:88.5px;right:12px}
}
@media (max-width:720px){
  :root{--dayw:18px;--timew:28px;--lqw:15px}
  body.d-std{--colw:44px;--rowh:27px}
  body.d-compact{--colw:calc((100vw - 76px) / 10);--rowh:30px}   /* 前半・後半の5年（10列）がちょうど画面に入る幅 */
  body.d-fit{--rowh:24px}
  .h-year{font-size:11px;height:18px;line-height:18px}
  .h-half{top:18px;font-size:8px;line-height:12px}
  .corner2{top:18px}
  .day{font-size:10px}
  .day.obi{font-size:8px;letter-spacing:.05em}
  .time,.d-compact .time,.d-fit .time{font-family:var(--ud);font-weight:700;font-size:9.5px;padding:2px 1px 0;letter-spacing:0;white-space:nowrap;overflow:hidden}
  .slot,.d-compact .slot,.d-fit .slot{padding:1px}
  .prog,.d-compact .prog,.d-fit .prog{font-size:8px;line-height:1.15;padding:1px 2px 1px 4px;border-radius:3px;min-height:calc(var(--rowh) - 3px);font-feature-settings:"palt"}
  .prog::before,.d-compact .prog::before,.d-fit .prog::before{width:2px}
  .slot.one .prog{font-size:8px;line-height:1.2;padding:1px 1px 1px 3px}   /* 1マスだけの番組名：字の大きさは app.js の fitOne() が 8・6・4px から選ぶ */
  .empty,.d-compact .empty,.d-fit .empty{min-height:calc(var(--rowh) - 3px)}
  .grid-wrap:has(.lgrid){max-height:none}   /* 深夜の表は高さを切らずに全部出す（縦はページごとスクロール、横だけ表の中でスクロール） */
  .lgrid,body.d-compact .lgrid,body.d-fit .lgrid{--lcolw:62px;--lrowh:30px}
  .lgrid .ly{font-size:11px}
  .lgrid .lq{font-size:8px}
  .lgrid .lday{height:16px;font-size:8px;letter-spacing:.02em}
  .lgrid .lhead{top:16px}
  .lgrid .lab{font-size:8px;line-height:1.15;padding:2px 2px 2px}
  .lgrid .lab i{height:2px;margin-top:2px}
  .lgrid .lc{padding:1px}
  .lgrid .mark{font-size:8px;letter-spacing:.02em}
  .lgrid .prog,body.d-compact .lgrid .prog{font-size:8px;line-height:1.15;padding:1px 2px 1px 4px;min-height:calc(var(--lrowh) - 3px);font-feature-settings:"palt"}
  .lgrid .prog small{font-family:var(--ud);font-size:8px;letter-spacing:0;opacity:.75}
}