/* 案A (テーブルレイアウト王道) の共通スタイル。
   トップと作品ページで同じ見た目にするため切り出したもの。 */
body {
  margin: 0; padding: 8px;
  background: #cceeff;
  background-image: repeating-linear-gradient(45deg, #d9f2ff 0 8px, #cceeff 8px 16px);
  font-family: "MS PGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 13px; color: #000; line-height: 1.55;
}
a { color: #0000cc; }
a:visited { color: #800080; }

.frame { border: 3px double #336699; background: #fff; }
.head {
  background: linear-gradient(#000080, #3355aa);
  border: 2px solid #99ccee; padding: 12px 10px; text-align: center;
}
.head h1 {
  margin: 0; font-size: 22px; color: #ffccff;
  text-shadow: 2px 2px 0 #ff00ff, -1px -1px 0 #ffff66;
}
.head p { margin: 5px 0 0; color: #99ddff; font-size: 12px; }
.crumb { padding: 4px 8px; background: #eef6ff; border-bottom: 1px solid #99ccee; font-size: 12px; }

.notice {
  background: #000; color: #33ff33; padding: 4px 8px; margin: 6px 0;
  font-size: 12px; overflow: hidden; white-space: nowrap;
}
.notice span { display: inline-block; animation: flow 24s linear infinite; }
@keyframes flow { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

.layout { display: table; width: 100%; border-spacing: 6px; }
.col { display: table-cell; vertical-align: top; }
.side { width: 190px; }
.box { border: 2px solid #6699cc; background: #ffffee; margin-bottom: 8px; }
.box h2 {
  margin: 0; font-size: 13px; padding: 4px 6px; text-align: center;
  background: #ffcccc; border-bottom: 2px solid #6699cc;
}
.box .in { padding: 6px 8px; }
.menu { list-style: none; margin: 0; padding: 6px; }
.menu li { padding: 3px 0; border-bottom: 1px dotted #99bbdd; }
.menu li::before { content: "▼ "; color: #cc3366; }

/* もくじ。details だが PC では常に開いた見た目にする (下の media query で
   閉じた状態を許可する)。h2 と同じ帯に見せたいので marker は消す */
details.nav > summary {
  margin: 0; font-size: 13px; font-weight: bold; padding: 4px 6px; text-align: center;
  background: #ffcccc; border-bottom: 2px solid #6699cc; list-style: none; cursor: default;
}
details.nav > summary::-webkit-details-marker { display: none; }

.main { background: #fff; border: 2px solid #6699cc; padding: 10px 12px; }
.rainbow {
  height: 7px; margin: 10px 0;
  background: repeating-linear-gradient(90deg,
    #f00 0 14px, #f90 14px 28px, #ff0 28px 42px, #0c0 42px 56px,
    #09f 56px 70px, #63c 70px 84px);
}
h3.sec { margin: 14px 0 6px; font-size: 15px; color: #cc3399; }
h3.sec::before { content: "＊"; }
h3.sec::after { content: "＊"; }

table.rank { border-collapse: collapse; width: 100%; font-size: 13px; }
table.rank th { background: #ccddff; border: 1px solid #6699cc; padding: 3px 5px; font-size: 12px; }
table.rank td { border: 1px solid #aaccee; padding: 3px 5px; }
table.rank tr:nth-child(even) td { background: #f2f6ff; }
table.rank .no { text-align: center; width: 34px; font-weight: bold; color: #cc3300; }
table.rank .num { text-align: right; white-space: nowrap; }

.up { color: #cc0000; font-weight: bold; }
.down { color: #0000cc; }
.small { font-size: 11px; color: #666; }
.badge {
  display: inline-block; background: linear-gradient(#ffe680, #e6b800);
  border: 2px outset #ffcc00; padding: 2px 10px; font-size: 12px; font-weight: bold;
}
.tag {
  display: inline-block; border: 1px solid #99bbdd; background: #eef6ff;
  padding: 0 6px; margin: 1px 2px 1px 0; font-size: 11px;
}
.meter { display: flex; height: 12px; border: 1px solid #999; background: #eee; margin: 4px 0; }
.meter .p { background: #ff66aa; } .meter .n { background: #6699ff; } .meter .g { background: #ddd; }
.pts { margin: 4px 0 0; }
.pts .lbl { font-weight: bold; font-size: 12px; }
.pts.pos .lbl { color: #cc3366; }
.pts.neg .lbl { color: #3366cc; }
.pts ul { margin: 2px 0 0 18px; padding: 0; }
.pts li { margin-bottom: 1px; }

dl.info { display: grid; grid-template-columns: 92px 1fr; gap: 3px 8px; margin: 0; font-size: 12.5px; }
dl.info dt { color: #336699; }
dl.info dd { margin: 0; }

.foot {
  margin-top: 8px; background: #000080; color: #fff; text-align: center;
  padding: 8px; font-size: 12px;
}
.foot a { color: #99ddff; }
select { font-size: 12px; max-width: 100%; }

@media (max-width: 700px) {
  .layout { display: flex; flex-direction: column; }
  .col { display: block; width: auto; }
  .side { width: auto; }
  .head h1 { font-size: 17px; }
  dl.info { grid-template-columns: 78px 1fr; }

  /* サイドの箱をレイアウト直下の並びに引き出して順番を決める。
     もくじ → 本文 → 更新履歴。従来はサイドが丸ごと本文の上にあり、
     ランキングが最初の画面に1行も入らなかった */
  .side { display: contents; }
  details.nav { order: 0; }
  .main-col { order: 1; }
  .box.hist { order: 2; }

  details.nav > summary { cursor: pointer; text-align: left; }
  details.nav > summary::before { content: "▼ "; }
  details.nav[open] > summary::before { content: "▲ "; }
}

/* ───────── 各話の反応 (一覧表型) ───────── */
table.eps { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.eps th { background: #ccddff; border: 1px solid #6699cc; padding: 3px 4px; font-size: 11.5px; }
table.eps td { border: 1px solid #aaccee; padding: 3px 4px; vertical-align: middle; }
table.eps tr.row:nth-child(4n+1) td { background: #f2f6ff; }
table.eps tr.row:hover td { background: #ffffcc; cursor: pointer; }
table.eps .ep { text-align: center; width: 52px; font-weight: bold; color: #cc3300; }
table.eps .num { text-align: right; white-space: nowrap; }
table.eps .mini { display: flex; height: 9px; border: 1px solid #999; background: #eee; min-width: 80px; }
table.eps .mini .p { background: #ff66aa; }
table.eps .mini .n { background: #6699ff; }
table.eps .mini .g { background: #ddd; }
tr.detail td { background: #fffff0 !important; }
tr.detail.hidden { display: none; }
.mark { color: #cc3300; }
.two { display: table; width: 100%; border-spacing: 6px 0; }
.two > div { display: table-cell; width: 50%; vertical-align: top; }

/* ホームのハイライト (何があった / 番狂わせ) */
.card { border: 1px solid #cc99cc; background: #fff5ff; padding: 8px 10px; margin: 8px 0; }
.card .ttl { font-weight: bold; color: #993399; }
.card .rel { color: #666; font-size: 11px; margin-left: 6px; }
.card ul { margin: 4px 0 0 18px; padding: 0; }
.card li { margin-bottom: 1px; }
.warn { color: #0000cc; border: 1px solid #6699cc; padding: 0 4px; font-size: 11px; }
.blink { animation: blink 1.1s step-end infinite; color: #cc0000; font-weight: bold; }
@keyframes blink { 50% { opacity: 0; } }
.empty { color: #666; font-size: 12px; padding: 6px 0; }

/* 全作品一覧 */
.toolbar { margin: 8px 0; }
.toolbar input { font-size: 13px; padding: 2px 6px; border: 2px inset #ccddff; }
.table-wrap { overflow-x: auto; }
table.all { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 12.5px; }
table.all th {
  background: #ccddff; border: 1px solid #6699cc; padding: 3px 5px; font-size: 11.5px;
  cursor: pointer; user-select: none; position: sticky; top: 0;
}
table.all td { border: 1px solid #aaccee; padding: 3px 5px; }
table.all tr:nth-child(even) td { background: #f2f6ff; }
table.all .num { text-align: right; white-space: nowrap; }

/* ランキングページのタブ。当時のボタンらしく outset/inset で押下を表す */
.tabs { margin: 6px 0 10px; }
.tabs button {
  font: inherit; font-size: 13px; border: 2px outset #ccddff; background: #eef6ff;
  padding: 3px 14px; margin-right: 4px; cursor: pointer; color: #000080;
}
.tabs button.on { border-style: inset; background: #ffffcc; font-weight: bold; color: #cc3300; }
.toolbar button {
  font: inherit; font-size: 12px; border: 2px outset #ccddff; background: #eef6ff;
  padding: 2px 8px; cursor: pointer;
}
.toolbar button:disabled { opacity: .4; cursor: default; }
.toolbar select { font: inherit; font-size: 12px; border: 2px inset #ccddff; padding: 1px 4px; }

/* PFごとの縦並び。列数は幅にまかせる。
   grid だと行の高さが最も高い列 (DMM TVは30件で1200px超) に揃うため、
   折り返した列が遥か下に押し下げられて大きな空白ができる。
   段組みにすると各サービスの箱が上から詰まって流れる。 */
.pfgrid { column-width: 220px; column-gap: 8px; }
.pfcol { break-inside: avoid; margin-bottom: 8px; }
/* 広い画面では7サービスを横一列に。見出しの高さが揃って見比べやすい。
   7列には最低1588px要るので、1列が214pxを下回る幅では段組みのままにする
   (192pxまで詰めるとタイトルが4〜5行に折り返して読みにくくなる) */
@media (min-width: 1600px) {
  .pfgrid {
    column-width: auto; column-count: auto;
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 8px; align-items: start;
  }
  .pfcol { margin-bottom: 0; }
}
.pfcol { border: 2px solid #99bbdd; background: #fff; }
.pfcol h4 {
  margin: 0; background: #ccddff; border-bottom: 2px solid #99bbdd;
  padding: 3px 6px; font-size: 12.5px; color: #000080;
}
.pfcol .empty { padding: 6px; }
ol.pflist { list-style: none; margin: 0; padding: 0; font-size: 12px; }
ol.pflist li { border-bottom: 1px dotted #bbd; padding: 2px 6px; }
ol.pflist li:nth-child(even) { background: #f6faff; }
/* 複数サービスにランクインしている作品。1サービスだけの上位と区別する */
ol.pflist li.cross { border-left: 4px solid #cc3399; }
.cross-mark { color: #cc3399; }
ol.pflist .no {
  display: inline-block; min-width: 20px; text-align: right; margin-right: 5px;
  color: #cc3300; font-weight: bold;
}
/* 今クール以外の作品。作品ページが無いのでリンクは張らない */
.out { color: #888; }
.pfcol button.more {
  font: inherit; font-size: 11.5px; width: 100%; border: 0; border-top: 1px dotted #99bbdd;
  background: #eef6ff; color: #000080; padding: 3px; cursor: pointer;
}
.pfcol button.more:hover { background: #ffffcc; }

@media (max-width: 700px) {
  .two, .two > div { display: block; width: auto; }
  table.eps .hide-sp { display: none; }
  .pfgrid { column-width: auto; column-count: 1; }
  .tabs button { padding: 3px 8px; font-size: 12px; }
}