:root { --accent:#e8590c; --bg:#faf7f2; --card:#fff; --text:#333; --muted:#888; --line:#eee; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
header { background:var(--accent); color:#fff; padding:16px 20px; }
header h1 { font-size:1.3rem; }
header h1 a { color:inherit; text-decoration:none; }
header h1 .tagline { font-size:.78rem; font-weight:normal; opacity:.9; white-space:nowrap; }
header .meta { font-size:.8rem; opacity:.9; }
.pr-notice { max-width:960px; margin:0 auto; padding:6px 16px 0; font-size:.72rem; color:var(--muted); }
main { max-width:960px; margin:0 auto; padding:16px; }
section { margin-bottom:32px; }
h2 { font-size:1.1rem; border-left:4px solid var(--accent); padding-left:8px; margin-bottom:12px; }
.search { width:100%; padding:10px 12px; font-size:1rem; border:1px solid #ccc; border-radius:8px; margin-bottom:10px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
/* カテゴリ・サイトの絞り込み行はカード状の枠で囲み、行同士の境界を分かりやすくする */
#category-chips, #site-chips { background:var(--card); border:1px solid #ddd; border-radius:10px; padding:8px 10px; }
#site-chips { margin-bottom:16px; }
.chips .label { align-self:center; color:var(--muted); font-size:.75rem; white-space:nowrap; width:3.5em; flex-shrink:0; }
.chip { border:1px solid #ccc; background:var(--card); border-radius:999px; padding:4px 12px; font-size:.82rem; cursor:pointer; white-space:nowrap; }
.chip.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.chip .cnt { opacity:.7; font-size:.72rem; margin-left:2px; }
/* サイト絞り込みチップはロゴ＋サイト名を表示。ロゴは白背景の小バッジにして、非選択(白)・選択(オレンジ)どちらのチップ上でも見やすくする */
.site-chip { display:inline-flex; align-items:center; gap:4px; padding-left:8px; padding-right:10px; }
.site-logo { width:18px; height:18px; object-fit:contain; background:#fff; border-radius:3px; padding:1px; flex-shrink:0; }
.cat { display:inline-block; background:#f1e7dc; color:#7a4a1f; font-size:.7rem; border-radius:4px; padding:1px 6px; margin-left:6px; vertical-align:middle; white-space:nowrap; }
.cond { color:var(--muted); font-size:.78rem; }
.group { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.group h3 { font-size:1rem; margin-bottom:6px; }
.group table { width:100%; border-collapse:collapse; font-size:.9rem; }
.group td { padding:4px 6px; border-top:1px solid var(--line); }
.group td.site { white-space:nowrap; color:var(--muted); width:11em; }
.group td.pts { text-align:right; white-space:nowrap; }
.best { color:var(--accent); font-weight:bold; }
.pts .yen { font-weight:normal; font-size:.78rem; opacity:.85; }
.badge { display:inline-block; background:var(--accent); color:#fff; font-size:.72rem; border-radius:999px; padding:1px 8px; margin-left:6px; vertical-align:middle; }
.newlist, .alllist { list-style:none; }
.newlist li, .alllist li { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 12px; margin-bottom:6px; font-size:.9rem; display:grid; grid-template-columns:11em 1fr auto; gap:2px 10px; align-items:baseline; }
.newlist .site, .alllist .site { color:var(--muted); white-space:nowrap; }
.newlist .pts, .alllist .pts { color:var(--accent); font-weight:bold; white-space:nowrap; }
a { color:inherit; }
.note { color:var(--muted); font-size:.8rem; margin-bottom:8px; }
.allcount { font-size:.85rem; font-weight:normal; color:var(--muted); }
.pager { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px; }
.pager button { border:1px solid #ccc; background:var(--card); border-radius:8px; padding:6px 14px; font-size:.85rem; cursor:pointer; }
.pager button:disabled { opacity:.4; cursor:default; }
.pager .pageinfo { color:var(--muted); font-size:.85rem; min-width:5em; text-align:center; }
.sitelinks { display:flex; flex-wrap:wrap; gap:8px; }
.sitelinks a { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:6px 12px; font-size:.85rem; text-decoration:none; }
footer { max-width:960px; margin:0 auto; padding:20px 16px 40px; font-size:.75rem; color:var(--muted); }
footer .footlinks { margin-bottom:8px; }
footer .footlinks a { margin-right:16px; }
.empty { color:var(--muted); font-size:.9rem; }

/* 固定ページ（運営者情報・プライバシーポリシー） */
.page h3 { font-size:.95rem; margin:20px 0 6px; }
.page p, .page ul, .page dl { margin-bottom:10px; font-size:.9rem; }
.page ul { padding-left:1.4em; }
.page a { color:var(--accent); }
.page dt { font-weight:bold; }
.page dd { margin:0 0 8px; }
.revision { color:var(--muted); font-size:.8rem; margin-top:24px; }

/* スマホ: チップ列は横スクロール1行に、新着リスト・比較表は2段組（1段目=サイト名/ポイント、2段目=案件名）に組み替える */
@media (max-width: 640px) {
  header { padding:12px 14px; }
  header h1 { font-size:1.1rem; }
  header h1 .tagline { display:block; white-space:normal; }
  main { padding:12px; }
  .chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; padding-bottom:2px; }
  .chip { padding:6px 12px; }
  .newlist li, .alllist li { grid-template-columns:1fr auto; }
  .newlist .site, .alllist .site { grid-row:1; font-size:.75rem; }
  .newlist .pts, .alllist .pts { grid-row:1; justify-self:end; white-space:normal; text-align:right; }
  .newlist .ttl, .alllist .ttl { grid-column:1 / -1; grid-row:2; }
  .pts .yen { display:block; line-height:1.3; }
  .group { padding:10px 12px; }
  .group table, .group tbody { display:block; }
  .group tr { display:grid; grid-template-columns:1fr auto; gap:0 8px; border-top:1px solid var(--line); padding:5px 0; }
  .group tr:first-child { border-top:none; }
  .group td { display:block; border-top:none; padding:0; width:auto; }
  .group td.site { grid-row:1; font-size:.75rem; }
  .group td.pts { grid-row:1; justify-self:end; white-space:normal; }
  .group td.deal { grid-column:1 / -1; }
}