/* ══════════════════════════════════════════════════════════════════════
   白まとめ 共通スタイル（トップ一覧＋各サイト＋記事ページ共通）── ゼロベース改稿
   方針: "まとめサイトらしさ"（番号付き人気グリッド／画像前面フィード／墨紺タブ帯／
         サイト識別色／【】署名／勢い熱量／レス数）は死守。その上でトークン駆動で
         全コンポーネントの余白・枠・型を揃え、最新CSS（container queries / color-mix /
         clamp / :has / scroll-snap）を"見やすさの道具"として使う。
   書体: 本文・レス・一覧＝システムゴシック（まとめの"野暮ったさ"の正体）のまま。
         Adobe Fonts（凸版文久見出しゴシック）はロゴ／見出し／サムネ＝"ブランド面"だけ。
   ════════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}

:root{
  color-scheme:light;

  /* ── ブランド／識別色 ── */
  --brand:#c0281c;            /* まとめの顔＝深めの朱赤 */
  --brand-ink:#a51f14;
  --sc:var(--brand);          /* サイト識別色（カード/ページに inline で上書き。既定＝ブランド） */

  /* ── 墨（文字）階調 ── */
  --ink:#1b1f24;              /* 見出し・主要テキスト */
  --ink-2:#39404a;            /* 本文 */
  --sub:#6b7178;              /* 補助（白地でAA: 約4.7:1） */

  /* ── 面 ── */
  --canvas:#e7e9ee;           /* ページ地＝白カードとハッキリ差がつく薄グレー（溶けさせない） */
  --card:#ffffff;
  --card-2:#f7f8fb;           /* カード内の淡い塗り分け */

  /* ── 罫線（"見える1px"。細くしすぎてカードをぼやけさせない） ── */
  --line:#d3d8df;             /* カード外枠 */
  --line-2:#e7eaef;           /* カード内ヘアライン */

  /* ── 信号色（色は信号に絞る：勢い＝熱量／緑＝名無し／赤＝ランキング・レス数・オチ） ── */
  --green:#1a8f2e;
  --hot:#d93025;              /* 勢い ≥5000＝激熱 */
  --warm:#e8710a;             /* 勢い ≥1000＝熱い */
  --cool:#7b828b;             /* 勢い <1000＝通常 */
  --nav:#242a31;              /* タブ帯＝中立の墨紺（赤看板・各サイト色どちらともケンカしない） */
  --gold:#f4b400; --silver:#aab0b6; --bronze:#cd7f32;   /* ランキング表彰台 */
  --focus:#ffd23e;            /* フォーカスリング（墨紺・写真の上で視認できる黄） */

  /* ── 影（3段の統一エレベーション） ── */
  --e1:0 1px 2px rgba(20,25,35,.05),0 1px 3px rgba(20,25,35,.05);
  --e2:0 2px 6px rgba(20,25,35,.08),0 5px 14px rgba(20,25,35,.06);
  --e3:0 8px 22px rgba(20,25,35,.16);

  /* ── 角丸・余白のスケール（丁寧さ＝一貫した刻み） ── */
  --r1:5px; --r2:7px; --r3:10px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px;

  /* ── 書体 ── */
  --midashi:"toppan-bunkyu-midashi-go-std","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  --gothic:"Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo","Yu Gothic","YuGothic","MS PGothic",sans-serif;

  --wrapmax:980px;
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--canvas);color:var(--ink-2);font-family:var(--gothic);
  font-size:15px;line-height:1.7;
  /* 面のわずかな陰影で"のっぺり白背景"を避ける（色は増やさない） */
  background-image:radial-gradient(1200px 480px at 50% -8%,#eef0f4,transparent 70%)}
a{color:#1666c4;text-decoration:none;-webkit-tap-highlight-color:rgba(192,40,28,.12)}
a:hover{text-decoration:underline}
img{max-width:100%}
b{font-weight:700}
/* テキスト選択＝ブランドの朱を薄く。文字色は据え置き（暗地・明地どちらでも読める）＝細部まで作った"丁寧さ"の隠し味 */
::selection{background:rgba(192,40,28,.22)}

/* 勢い＝色付きの熱量表示（全サーフェス共通・数字は実計算） */
.ik{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ik-hot{color:var(--hot)} .ik-warm{color:var(--warm)} .ik-cool{color:var(--cool)}
.ik .fire{margin-right:1px;font-size:.92em}
/* 相対時刻（3時間前）＝控えめのサブ色。絶対時刻は title 属性に保持（正直さ） */
.tm{color:var(--sub);white-space:nowrap}
/* タイトル中の【タグ】＝実まとめの視覚署名。色は足さず"太さ"だけで立てる（信号色を濁さない） */
.tg{font-weight:800;font-style:normal;color:#0f151b}

/* 共通フォーカスリング（キーボード操作の可視化＝ちゃんと感の基本） */
a:focus-visible,button:focus-visible{outline:2px solid var(--sc);outline-offset:2px;border-radius:3px}

/* ══════════════════ サイトの顔：ロゴバナー（自作SVGヘッダー） ══════════════════ */
.topbar{position:relative;box-shadow:0 1px 0 rgba(0,0,0,.14),0 3px 8px rgba(20,25,35,.10);
  overflow:hidden;background:var(--nav)}
.banner-link{display:block;max-width:var(--wrapmax);margin:0 auto;color:#fff}
.banner-link:hover{text-decoration:none}
.banner-svg{display:block;width:100%;height:auto}
/* 仮想サイト内から白まとめ一覧へ戻る導線／PC表示トグル（バナーに重ねる小ボタン） */
.hublink,.viewtgl{position:absolute;z-index:2;color:#fff;font:800 12px/1 var(--gothic);
  background:rgba(0,0,0,.30);padding:6px 12px;border:0;border-radius:999px;white-space:nowrap;
  cursor:pointer;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:background .14s}
.hublink{top:12px;right:max(14px,calc((100% - var(--wrapmax))/2 + 14px));letter-spacing:.01em}
.viewtgl{bottom:12px;right:max(14px,calc((100% - var(--wrapmax))/2 + 14px))}
.hublink:hover,.viewtgl:hover{text-decoration:none;background:rgba(0,0,0,.46)}
.hublink:focus-visible,.viewtgl:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media(max-width:520px){
  .hublink{top:9px;right:10px;font-size:12px;padding:5px 10px}
  .viewtgl{bottom:9px;right:10px;font-size:12px;padding:5px 10px}
}

/* ══════════════════ カテゴリ・タブ帯（ハブ専用ナビ・上端に吸着・横スクロール可） ══════════════════
   色は中立の墨紺（--nav）固定＝常に"白まとめのナビ"に見える。各サイトへの動線はここ（集約側）だけ。 */
.catnav{position:sticky;top:0;z-index:30;background:var(--nav);
  box-shadow:0 2px 8px rgba(0,0,0,.20)}
/* 右端の墨紺フェード＝タブが画面外に続くこと（横スクロール）を示す */
.catnav::after{content:"";position:absolute;inset:0 0 0 auto;width:34px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--nav))}
.cn-inner{max-width:var(--wrapmax);margin:0 auto;display:flex;overflow-x:auto;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cn-inner::-webkit-scrollbar{display:none}
.catnav a{position:relative;scroll-snap-align:start;color:#c3cad4;font-size:13px;font-weight:800;
  padding:12px 15px;white-space:nowrap;border-bottom:3px solid transparent;letter-spacing:.02em;
  transition:color .14s,background .14s}
.catnav a:hover{color:#fff;text-decoration:none;background:rgba(255,255,255,.08)}
.catnav a.home{color:#fff}
.catnav a.active{color:#fff;background:rgba(0,0,0,.28);border-bottom-color:var(--focus)}
.catnav a.active .cd{box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 6px var(--cc)}
/* タブ内のサイト識別色ドット＝どのまとめかが一目で分かる */
.catnav a .cd{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cc);
  margin-right:6px;vertical-align:middle;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.catnav a:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}

/* ══════════════════ パンくず ══════════════════ */
.crumb{max-width:var(--wrapmax);margin:0 auto;padding:9px 14px 0;font-size:12px;color:var(--sub)}
.crumb a{color:#3a6bb0}
/* パンくず現在地は識別色。roster色が薄い場合でもAA(4.5:1)を割らぬよう墨へ寄せる（色相＝信号は保持） */
.crumb .cur{color:color-mix(in srgb,var(--sc) 68%,var(--ink));font-weight:700}

/* ══════════════════ 本文＋サイド 2カラム（サイド無しは :has で自動1カラム） ══════════════════ */
.wrap{max-width:var(--wrapmax);margin:0 auto;padding:10px 14px 46px;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
/* サイド（ランキング等）が無いページ＝about は1カラムに。
   .solo＝全ブラウザで効く明示クラス（普遍フォールバック）。:has版は将来 .solo 未指定の
   サイド無しページも自動で1カラム化する上乗せ（:has 非対応環境は .solo が担保）。 */
.wrap.solo{grid-template-columns:minmax(0,1fr);max-width:760px}
@supports selector(:has(*)){
  .wrap:not(:has(.col-side)){grid-template-columns:minmax(0,1fr);max-width:760px}
}
/* 本文カラムを container 化＝グリッド/フィードの段組を"実際のカラム幅"で決める（VPでなく） */
.col-main{container-type:inline-size;container-name:main;min-width:0}
@media(max-width:860px){
  .wrap{grid-template-columns:1fr;max-width:660px;gap:0}
  .col-side{display:none}
}

/* ══════════════════ セクション見出し ══════════════════ */
.listhead{display:flex;align-items:baseline;gap:10px;margin:20px 2px 12px}
.listhead:first-child{margin-top:6px}
.listhead h1{font-family:var(--midashi);font-weight:800;color:var(--ink);letter-spacing:.02em;
  font-size:clamp(16px,2.4cqi + 12px,18px);line-height:1.2;
  border-left:4px solid var(--sc);padding-left:10px;text-wrap:balance}
.listhead .cnt{font-size:12px;color:var(--sub);font-weight:600}

/* ══════════════════ 人気まとめ＝番号付きグリッド（"いつものまとめ"の顔） ══════════════════
   アルファルファ「人気記事TOP6」/ JIN系の型。番号バッジ（1-3は表彰台色）＋大きめ画像＋レス数。
   広告・けばけばしい文字入りサムネは入れない。段組は container query で本文幅に追従。 */
.pgrid{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 4px}
@container main (min-width:380px){.pgrid{grid-template-columns:1fr 1fr}}
@container main (min-width:560px){.pgrid{grid-template-columns:repeat(3,1fr)}}
/* container 非対応の保険（古い環境）＝VPで段組 */
@supports not (container-type:inline-size){
  .pgrid{grid-template-columns:repeat(3,1fr)}
  @media(max-width:640px){.pgrid{grid-template-columns:1fr 1fr}}
}
.pcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
  overflow:hidden;box-shadow:var(--e1);transition:box-shadow .16s,border-color .16s,transform .16s}
.pcard:hover{text-decoration:none;border-color:var(--sc);box-shadow:var(--e2)}
.pcard:focus-visible{outline:2px solid var(--sc);outline-offset:2px}
.pthumb{display:block;position:relative;width:100%;aspect-ratio:16/10;background:var(--canvas);overflow:hidden}
.pthumb .rthumb{object-position:top center}
.pno{position:absolute;left:0;top:0;background:var(--nav);color:#fff;font-size:15px;font-weight:900;
  min-width:27px;height:25px;display:flex;align-items:center;justify-content:center;padding:0 7px;
  border-bottom-right-radius:8px;font-variant-numeric:tabular-nums;box-shadow:0 1px 4px rgba(0,0,0,.3)}
/* 上位3枚＝表彰台色（"人気ランキング"の記号性を番号にも与える） */
.pgrid .pcard:nth-child(1) .pno{background:var(--gold);color:#5a4400}
.pgrid .pcard:nth-child(2) .pno{background:var(--silver);color:#2c3036}
.pgrid .pcard:nth-child(3) .pno{background:var(--bronze);color:#3a1e07}
.pcc{position:absolute;right:0;bottom:0;background:rgba(16,20,26,.84);color:#fff;font-size:13px;
  font-weight:900;line-height:1;padding:3px 7px;border-top-left-radius:6px;font-variant-numeric:tabular-nums}
.pcc span{font-size:12px;font-weight:700;margin-left:1px;color:#eef1f4}
.pbody{display:block;padding:8px 10px 10px}
.ptitle{font-size:13.5px;font-weight:700;line-height:1.36;color:var(--ink);text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.72em}
.pcard:hover .ptitle{color:var(--sc)}
.pmeta{margin-top:6px;font-size:12px;color:var(--sub);display:flex;align-items:center;gap:6px;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.pmeta .ps{font-weight:800;color:color-mix(in srgb,var(--sc) 68%,var(--ink));display:inline-flex;align-items:center;gap:4px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.pmeta .ps .sd{flex:0 0 auto}
.pmeta .ik{flex:0 0 auto}
.pmeta .d{color:#c4cad0;flex:0 0 auto}

/* ══════════════════ 新着まとめフィード（画像前面の行を白箱に積む＝一覧の本体） ══════════════════ */
.antfeed{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;
  box-shadow:var(--e1)}
.ant-card{display:flex;gap:13px;padding:12px 13px;align-items:center;cursor:pointer;
  border-bottom:1px solid var(--line-2);transition:background .14s}
.ant-card:last-child{border-bottom:0}
.ant-card:hover{text-decoration:none;background:color-mix(in srgb,var(--sc) 6%,#fff)}
.ant-thumb{position:relative;flex:0 0 118px;aspect-ratio:16/10;height:auto;background:var(--canvas);
  border-radius:var(--r1);overflow:hidden}
.ant-thumb .rthumb{object-position:top center}
.ant-cc{position:absolute;right:0;bottom:0;background:rgba(16,20,26,.84);color:#fff;font-size:13px;
  font-weight:900;line-height:1;padding:3px 6px;border-top-left-radius:var(--r1);font-variant-numeric:tabular-nums}
.ant-cc span{font-size:12px;font-weight:700;margin-left:1px;color:#eef1f4}
.ant-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.ant-title{font-size:15px;font-weight:700;line-height:1.38;color:#16233a;text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ant-card:hover .ant-title{color:var(--sc)}
.ant-card:focus-visible{outline:2px solid var(--sc);outline-offset:-2px}
/* メタ行＝出典サイト名（識別色ドット）＋勢い＋時刻。1行固定＝長いサイト名だけ省略し区切りが折れない */
.ant-meta{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--sub);
  font-variant-numeric:tabular-nums;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.ant-site{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:color-mix(in srgb,var(--sc) 68%,var(--ink));
  min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.ant-site .sd{flex:0 0 auto}
.ant-meta .ik,.ant-meta .tm,.ant-meta .d{flex:0 0 auto}
.ant-meta .d{color:#ccd1d7}
@container main (max-width:440px){
  .ant-card{gap:11px;padding:11px}
  .ant-thumb{flex-basis:104px}
  .ant-title{font-size:14.5px}
}

/* サイト識別色ドット（フィード・サイド・タブ共通の"どのまとめか"記号） */
.sd{width:9px;height:9px;border-radius:50%;background:var(--sc);flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset}

/* ══════════════════ 各サイトページの一覧（個別ブログを読む体裁・ゆったりの行） ══════════════════ */
.alist{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;
  box-shadow:var(--e1)}
.acard{display:flex;gap:12px;padding:12px 13px;align-items:center;cursor:pointer;overflow:hidden;
  border-bottom:1px solid var(--line-2);transition:background .14s}
.acard:last-child{border-bottom:0}
.acard:hover{text-decoration:none;background:color-mix(in srgb,var(--sc) 6%,#fff)}
.acard:hover .at{color:var(--sc)}
.acard:focus-visible{outline:2px solid var(--sc);outline-offset:-2px}
.acard .thumb{position:relative;flex:0 0 116px;aspect-ratio:16/10;background:var(--canvas);
  border-radius:var(--r1);overflow:hidden;display:flex;align-items:center;justify-content:center;
  color:#9298a0;font-size:12px;font-weight:700}
.acard .body{min-width:0;flex:1}
.acard .at{font-size:16px;font-weight:800;line-height:1.42;color:var(--ink);text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard .amt{margin-top:6px;font-size:12px;color:var(--sub);display:flex;gap:8px;align-items:center;
  flex-wrap:wrap;font-variant-numeric:tabular-nums}
.acard .amt .c{color:var(--brand);font-weight:700}
.acard .amt .dot{color:#c9ced4}
@container main (max-width:440px){.acard .thumb{flex-basis:100px}}

/* 自動生成アイキャッチSVG／実写サムネ＝container を埋める */
.thumb-svg{display:block;width:100%;height:100%}
.rthumb,.eyeimg{display:block;width:100%;height:100%;object-fit:cover;background:var(--canvas)}
/* ホバーで画像をわずかに寄る（上品なマイクロ操作・hover環境のみ／モーション配慮は下部で無効化） */
.ant-thumb .rthumb,.pthumb .rthumb,.acard .thumb .rthumb{transition:transform .3s ease}
@media(hover:hover){
  .ant-card:hover .rthumb,.pcard:hover .rthumb,.acard:hover .thumb .rthumb{transform:scale(1.05)}
}

/* ══════════════════ サイド：まとめサイト一覧 ══════════════════ */
.col-side{position:sticky;top:56px;display:flex;flex-direction:column;gap:16px}
.sitelist{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;
  box-shadow:var(--e1)}
.sitelist h2{background:var(--nav);color:#fff;font-family:var(--midashi);font-size:13.5px;font-weight:800;
  padding:10px 13px;letter-spacing:.04em}
.sl-item{display:flex;align-items:center;gap:8px;padding:9px 13px;color:var(--ink-2);
  border-bottom:1px solid var(--line-2);transition:background .12s}
.sl-item:last-child{border-bottom:0}
.sl-item:hover{text-decoration:none;background:color-mix(in srgb,var(--sc) 7%,#fff)}
.sl-item:hover .sl-name{color:var(--sc)}
.sl-item:focus-visible{outline:2px solid var(--sc);outline-offset:-2px}
.sl-name{flex:1;min-width:0;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 記事数バッジ＝左の識別色ドットが"どのサイトか"を担うのでこちらは中立の灰（色の二重掛けを避ける） */
.sl-cnt{flex:0 0 auto;font-size:12px;font-weight:800;color:#5b636b;background:#eceff3;border-radius:999px;
  min-width:22px;text-align:center;padding:1px 8px;font-variant-numeric:tabular-nums}

/* ══════════════════ サイド：人気記事ランキング（自サイト内・飛ばしwidgetではない） ══════════════════ */
.rank{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--e1);overflow:hidden}
.rank h2{background:var(--brand);color:#fff;font-family:var(--midashi);font-size:13.5px;font-weight:800;
  padding:10px 13px;letter-spacing:.04em}
.rank ol{list-style:none}
.rank li{border-bottom:1px solid var(--line-2)}
.rank li:last-child{border-bottom:0}
.rank a{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);width:100%;padding:10px 12px;
  transition:background .12s}
.rank a:hover{text-decoration:none;background:var(--card-2)}
.rank a:hover .rt{color:var(--brand)}
.rank .no{flex:0 0 22px;height:22px;background:#9aa1a8;color:#fff;font-weight:900;font-size:12px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.rank li:nth-child(1) .no{background:var(--gold);color:#5a4400}
.rank li:nth-child(2) .no{background:var(--silver);color:#2c3036}
.rank li:nth-child(3) .no{background:var(--bronze);color:#3a1e07}
.rank .th{flex:0 0 62px;aspect-ratio:3/2;background:var(--canvas);border-radius:var(--r1);overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#9298a0;font-size:12px}
.rank .th .rthumb{object-position:top center}
.rank .rt{font-size:12.5px;line-height:1.42;font-weight:600;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rank .rc{margin-top:2px;font-weight:700;font-size:12px;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.rank .rc .cc{color:var(--brand);font-weight:700}
.rank .rc .dot{color:#ccd1d7}
.rank a:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.side-note{font-size:12px;color:var(--sub);text-align:center}

/* ══════════════════ 記事ページ ══════════════════ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--e1);overflow:hidden}
.chead{padding:16px 16px 0}
.title{font-weight:800;color:var(--ink);text-wrap:balance;
  font-size:clamp(20px,2.2cqi + 15px,24px);line-height:1.4}
.meta{margin-top:10px;padding-bottom:12px;border-bottom:2px solid var(--sc);
  font-size:12.5px;color:var(--sub);display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-variant-numeric:tabular-nums}
.meta .cc{color:var(--brand);font-weight:700}
.meta .pick{color:#5b636b;font-weight:700}
.meta .dot{color:#c9ced4}

/* アイキャッチ（実写1枚 or 生成SVG）。比率固定で"切れて見える"を防ぐ */
.eyecatch{margin:13px 16px 0;aspect-ratio:16/9;max-height:360px;border-radius:var(--r2);overflow:hidden;
  border:1px solid var(--line-2);background:var(--canvas)}

.thread{padding:2px 16px 6px}
.res{padding:12px 2px;border-bottom:1px solid var(--line-2)}
.res:last-child{border-bottom:0}
/* OP＝わずかなクリーム地で"1レス目"を立てる（色は増やさず地色でだけ差をつける） */
.res.op{background:#fffdf3;margin:0 -16px;padding:13px 16px;border-bottom:1px solid #f1ebd4}
.rh{font-size:13px;margin-bottom:5px;line-height:1.5}
.rh .rn{color:var(--brand);font-weight:700}
.rh .rname{color:var(--green);font-weight:700}
.rh .rd{color:#8a9097}
.rh .rid{color:#a8afb6}
.rh .sep{color:#c4cad0}
.rb{font-size:15.5px;line-height:1.72;color:var(--ink-2);white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.rb b{font-weight:700;color:var(--ink)}
.rb .hot{color:#d1281a;font-weight:700}          /* 管理人の赤字強調（＝信号の赤） */
.rb .big{font-size:22px;line-height:1.5}          /* オチの大文字 */
/* パンチライン(.big)を含むレスの直前に"タメ"の余白＝オチの前に一拍おく（色でなく間合いで立てる）。
   :has 非対応環境はタメ無しで素直に表示（本文render契約は不可侵なのでマーカー付与はしない＝許容する劣化）。 */
@supports selector(:has(*)){
  .res:has(.big){margin-top:20px;padding-top:20px}
}
.rb a{color:#1666c4}
.rb img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r1);margin:6px 0;display:block}
.rb blockquote{border-left:3px solid #c9ced4;background:var(--card-2);color:#555;padding:3px 10px;margin:5px 0;font-size:15px}

/* 返信クラスタ（親の直下に子レスを寄せる） */
.res.reply{border-left:3px solid color-mix(in srgb,var(--sc) 45%,#c7d0dc);padding-left:12px;
  background:var(--card-2)}
.rcon{color:#8a94a2;font-weight:700;margin-right:3px}
.rb .anchor{color:#1666c4;font-weight:600;cursor:pointer}
.rb .anchor:hover{text-decoration:underline}

.artfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;
  background:var(--card-2);border-top:1px solid var(--line-2);font-size:12.5px;color:var(--sub)}
.artfoot .cc2{color:var(--brand);font-weight:700}
.artfoot .srclink{color:#1666c4;font-weight:600;white-space:nowrap}
.artfoot .srclink:hover{text-decoration:underline}
.cleanmark{display:inline-block;margin-top:4px;color:#4f8a3f;font-weight:700}

/* 記事下：同カテゴリの次の記事 */
.morewrap{margin-top:20px}
.morewrap h2{font-family:var(--midashi);font-size:15px;font-weight:800;color:var(--ink);margin:0 2px 9px;
  padding-left:10px;border-left:4px solid var(--sc)}

/* ══════════════════ 本文中メディアカード（画像/動画/外部リンク＝"スレの中身"、広告ではない） ══════════════════ */
.media-wrap{display:flex;flex-wrap:wrap;gap:10px;margin:9px 0 2px}
.media{display:block;max-width:300px;border:1px solid var(--line-2);border-radius:var(--r3);overflow:hidden;
  background:#faf9f5;text-decoration:none}
.media-img img,.media-vid video{display:block;width:100%;height:auto;max-height:380px;object-fit:cover;background:#eceae3}
.media figcaption{font-size:12px;color:#6b7178;padding:6px 10px}
.media figcaption a{color:#1666c4}
.media figcaption a:hover{text-decoration:underline}
.media-x{display:flex;align-items:center;gap:8px;padding:12px 14px;font-size:13px;color:var(--ink-2);font-weight:700}
.media-x .x-ico{font-size:17px}
.exlink{color:#1666c4;word-break:break-all}
.exlink:hover{text-decoration:underline}
@media(max-width:520px){.media{max-width:100%}}

/* ══════════════════ このサイトについて（静的ページ・色は増やさず可読性優先） ══════════════════ */
.about{padding:18px 20px 24px;font-size:14px;line-height:1.9;color:var(--ink-2)}
.about h2{margin:22px 0 8px;font-size:15.5px;font-weight:800;color:var(--ink);
  border-left:3px solid var(--sc);padding-left:10px}
.about h2:first-child{margin-top:2px}
.about p{margin:7px 0}
.about ul{margin:7px 0 7px 1.2em;padding:0}
.about li{margin:5px 0}
.about .contact{background:var(--card-2);border:1px solid var(--line-2);border-radius:var(--r2);padding:11px 13px;margin-top:9px}

/* ══════════════════ モーション配慮（前庭障害等）＝アニメ/ホバー変形を無効化 ══════════════════ */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .ant-card:hover .rthumb,.pcard:hover .rthumb,.acard:hover .thumb .rthumb{transform:none}
}