/* ============================================================
   秒速まとめ テーマ「速報板」（2026-08-24 全面刷新）
   ダーク先行・琥珀・等幅数字。html[data-mode] でライト/ダーク切替。
   モバイルは 900px（サイドバー折返し）/ 640px（行の縮退）/ 430px。
   ============================================================ */

html[data-mode="dark"]{
  --bg:#0e141b; --sf:#151d26; --sf2:#1a2430; --ln:#223041;
  --ink:#dce3ea; --sub:#8fa0b3; --acc:#ffb02e; --acc-ink:#151006;
  --gold:#ffb02e; --silver:#9fb6cc; --bronze:#c98a5b; --new:#43d67c;
  --shadow:0 6px 22px rgba(0,0,0,.35);
}
html[data-mode="light"]{
  --bg:#eef1f4; --sf:#ffffff; --sf2:#f5f7fa; --ln:#d6dde5;
  --ink:#1b242e; --sub:#5c6b7a; --acc:#e08900; --acc-ink:#ffffff;
  --gold:#e08900; --silver:#5c7f9e; --bronze:#a86a3d; --new:#1d9e56;
  --shadow:0 4px 16px rgba(30,40,50,.10);
}
/* JSが無効でも読める初期値（ダーク先行） */
html:not([data-mode]){
  --bg:#0e141b; --sf:#151d26; --sf2:#1a2430; --ln:#223041;
  --ink:#dce3ea; --sub:#8fa0b3; --acc:#ffb02e; --acc-ink:#151006;
  --gold:#ffb02e; --silver:#9fb6cc; --bronze:#c98a5b; --new:#43d67c;
  --shadow:0 6px 22px rgba(0,0,0,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'IBM Plex Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  font-size:14px;line-height:1.65}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
.num{font-family:'IBM Plex Mono',Consolas,monospace;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:2px}
.bs-shell{max-width:1140px;margin:0 auto;padding:0 14px}

/* ---------- ヘッダー ---------- */
.bs-head{background:var(--sf);border-bottom:1px solid var(--ln);position:relative;z-index:30}
.bs-head-in{display:flex;align-items:center;gap:14px;min-height:54px;padding:6px 0;flex-wrap:nowrap}
.bs-brand{font-weight:700;font-size:19px;letter-spacing:.02em;display:flex;align-items:center;gap:7px;flex:none}
.bs-brand .bolt{color:var(--acc)}
.bs-brand h1{font-size:inherit;font-weight:inherit;margin:0;display:inline}
.bs-live{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--new);
  display:flex;align-items:center;gap:5px;flex:none;letter-spacing:.1em}
.bs-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--new);animation:bs-blink 1.6s ease infinite}
@keyframes bs-blink{50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){.bs-live::before{animation:none}.bs-spin{animation:none}}
.bs-navwrap{flex:1;min-width:0;position:relative}
.bs-nav{display:flex;gap:2px;flex-wrap:wrap}   /* デスクトップは折返して全カテゴリを見せる */
@media (max-width:900px){
  .bs-navwrap{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bs-navwrap::-webkit-scrollbar{display:none}
  .bs-nav{flex-wrap:nowrap;white-space:nowrap;padding-right:26px}
  /* スクロールできることを示す右端のフェード */
  .bs-navwrap::after{content:"";position:absolute;top:0;right:0;width:26px;height:100%;
    pointer-events:none;background:linear-gradient(90deg,transparent,var(--sf))}
}
.bs-nav a{color:var(--sub);font-size:12.5px;padding:6px 9px;border-radius:3px;display:inline-block}
.bs-nav a:hover{color:var(--ink);background:var(--sf2)}
.bs-nav a.on{color:var(--acc);background:var(--sf2);font-weight:600}
.bs-iconbtn{appearance:none;cursor:pointer;flex:none;border:1px solid var(--ln);background:var(--sf2);
  color:var(--ink);border-radius:3px;font-size:13px;height:32px;min-width:38px;padding:0 9px;line-height:1}
.bs-iconbtn:hover{border-color:var(--acc)}

/* 検索バー（トグル表示） */
.bs-search{display:none;border-top:1px solid var(--ln);background:var(--sf)}
.bs-search.open{display:block}
.bs-search form{display:flex;gap:8px;padding:10px 0}
.bs-search input[type="text"]{flex:1;min-width:0;background:var(--bg);color:var(--ink);
  border:1px solid var(--ln);border-radius:3px;padding:9px 12px;font-size:14px}
.bs-search input[type="text"]:focus{border-color:var(--acc);outline:none}
.bs-search button{border:0;background:var(--acc);color:var(--acc-ink);font-weight:600;
  border-radius:3px;padding:0 20px;cursor:pointer}

/* ---------- 新規参加レール ---------- */
.bs-newrail{background:var(--sf2);border-bottom:1px solid var(--ln)}
.bs-newrail-in{display:flex;align-items:center;gap:12px;padding:8px 0;overflow-x:auto;scrollbar-width:none}
.bs-newrail-in::-webkit-scrollbar{display:none}
.bs-newrail .cap{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--new);
  letter-spacing:.14em;white-space:nowrap;flex:none}
.bs-newsite{display:flex;align-items:center;gap:8px;border:1px solid var(--ln);background:var(--sf);
  border-radius:3px;padding:4px 11px 4px 5px;white-space:nowrap;font-size:12.5px;flex:none}
.bs-newsite:hover{border-color:var(--new)}
.bs-newsite .tag{background:var(--new);color:#04170c;font-family:'IBM Plex Mono',monospace;
  font-size:10px;font-weight:600;padding:2px 6px;border-radius:2px;letter-spacing:.08em}
.bs-newsite .d{color:var(--sub);font-size:11px}

/* ---------- 期間タブ（新着/24時間/週間/月間） ---------- */
.bs-tabs{display:flex;gap:6px;padding:12px 0 0;overflow-x:auto;scrollbar-width:none}
.bs-tabs::-webkit-scrollbar{display:none}
.bs-tabs a{border:1px solid var(--ln);background:var(--sf);color:var(--sub);
  border-radius:3px;padding:6px 14px;font-size:12.5px;white-space:nowrap}
.bs-tabs a.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:600}
.bs-tabs a:hover:not(.on){color:var(--ink);border-color:var(--sub)}

/* ---------- 2カラム ---------- */
.bs-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start;padding:16px 0 30px}
.bs-cols.one{grid-template-columns:minmax(0,1fr)}
.bs-main{min-width:0}
.bs-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:12px;
  /* 画面に収まらないぶんはサイドバー内でスクロールさせる。
     これが無いと sticky で固定された高さを超えた部分が永久に見えなくなる。 */
  max-height:calc(100vh - 24px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--ln) transparent}
.bs-side::-webkit-scrollbar{width:8px}
.bs-side::-webkit-scrollbar-track{background:transparent}
.bs-side::-webkit-scrollbar-thumb{background:var(--ln);border-radius:4px}
.bs-side::-webkit-scrollbar-thumb:hover{background:var(--sub)}

/* ---------- セクション見出し ---------- */
.bs-secttl{display:flex;align-items:baseline;gap:9px;margin:18px 0 10px}
.bs-secttl b{font-size:15px;letter-spacing:.03em;font-weight:700}
.bs-secttl span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--sub);letter-spacing:.16em}
.bs-secttl:first-child{margin-top:0}

/* ---------- ピックアップ ---------- */
.bs-pickbox{background:var(--sf);border:1px solid var(--ln);border-radius:4px;padding:13px 14px 14px;margin-bottom:4px}
.bs-pickbox .cap{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--acc);letter-spacing:.16em;margin-bottom:10px}
.bs-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.bs-pc{min-width:0;display:block}
.bs-pc .im{display:block;width:100%;height:92px;border-radius:3px;overflow:hidden;margin-bottom:7px;position:relative}
.bs-pc .im img{width:100%;height:100%;object-fit:cover}
.bs-pc .tt{display:block;font-size:12.5px;font-weight:500;line-height:1.5;min-height:3em;max-height:3em;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bs-pc:hover .tt{color:var(--acc)}

/* ---------- 記事リスト（1行=1記事） ---------- */
.bs-list{background:var(--sf);border:1px solid var(--ln);border-radius:4px;overflow:hidden}
.bs-row{display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--ln);padding:9px 11px}
.bs-row:last-child{border-bottom:0}
.bs-row:hover{background:var(--sf2)}
.bs-tick{flex:none;width:3px;height:34px;border-radius:2px}
.bs-row .im{display:block;flex:none;width:78px;height:46px;border-radius:3px;overflow:hidden}
.bs-row .im img{width:100%;height:100%;object-fit:cover}
.bs-body{min-width:0;flex:1}
.bs-tt{font-size:14px;font-weight:500;line-height:1.5;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bs-row:hover .bs-tt{color:var(--acc)}
.bs-meta{display:flex;gap:10px;margin-top:3px;font-size:11px;color:var(--sub);flex-wrap:wrap}
.bs-meta .tm{font-family:'IBM Plex Mono',monospace}
.bs-rankn{flex:none;width:2em;text-align:center;font-family:'IBM Plex Mono',monospace;
  font-weight:600;font-size:17px;color:var(--sub)}
.bs-rankn.r1{color:var(--gold);font-size:26px;text-shadow:0 0 14px rgba(255,176,46,.45)}
.bs-rankn.r2{color:var(--silver);font-size:21px}
.bs-rankn.r3{color:var(--bronze);font-size:21px}

/* サムネ無しのプレースホルダ（カテゴリ色） */
.bs-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff}
.bs-noimg i{font-style:normal;font-weight:700;opacity:.4;font-size:15px}
.bs-c0{background:linear-gradient(135deg,#3d6ea8,#274a74)}
.bs-c1{background:linear-gradient(135deg,#3d9a6c,#276648)}
.bs-c2{background:linear-gradient(135deg,#8a63c9,#5d3f8e)}
.bs-c3{background:linear-gradient(135deg,#d07b2e,#96541c)}
.bs-c4{background:linear-gradient(135deg,#d95e8f,#a03763)}
.bs-c5{background:linear-gradient(135deg,#3aa0a8,#256e74)}
.bs-c6{background:linear-gradient(135deg,#c9a227,#8f7115)}
.bs-c7{background:linear-gradient(135deg,#5588cc,#35619c)}

/* ---------- サイドバー ---------- */
.bs-panel{background:var(--sf);border:1px solid var(--ln);border-radius:4px;padding:12px 13px 7px}
.bs-panel .cap{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.bs-panel .cap b{font-size:13.5px;letter-spacing:.02em}
.bs-panel .cap span{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--sub);letter-spacing:.14em}
.bs-vr{display:flex;align-items:center;gap:10px;padding:7px 2px;border-top:1px solid var(--ln)}
.bs-vr:first-of-type{border-top:0}
.bs-vr .rn{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:18px;line-height:1;
  color:var(--sub);flex:none;width:1.6em;text-align:right}
.bs-vr.r1{border:1px solid var(--gold);border-radius:4px;background:linear-gradient(160deg,var(--sf2),var(--sf));
  padding:11px 9px;margin-bottom:4px}
.bs-vr.r1 .rn{font-size:36px;color:var(--gold);text-shadow:0 0 16px rgba(255,176,46,.45)}
.bs-vr.r2 .rn{color:var(--silver)}
.bs-vr.r3 .rn{color:var(--bronze)}
.bs-vr .nm{font-weight:600;font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-vr.r1 .nm{font-size:14.5px}
.bs-vr .in{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--sub);white-space:nowrap}
.bs-vr.r1 .in{color:var(--acc)}
.bs-vr:hover .nm{color:var(--acc)}
.bs-hot{display:flex;gap:9px;align-items:flex-start;padding:7px 2px;border-top:1px solid var(--ln)}
.bs-hot:first-of-type{border-top:0}
.bs-hot .hn{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:14px;color:var(--acc);flex:none;width:1.3em}
.bs-hot .tt{font-size:12px;font-weight:500;line-height:1.55;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bs-hot:hover .tt{color:var(--acc)}
.bs-morebtn{display:block;width:100%;margin:8px 0 6px;appearance:none;cursor:pointer;
  border:1px solid var(--ln);background:var(--sf2);color:var(--sub);border-radius:3px;
  padding:8px;font-size:12px;font-family:inherit;text-align:center}
.bs-morebtn:hover{color:var(--ink);border-color:var(--sub)}
.bs-adslot{text-align:center}
.bs-adslot:empty{display:none}
.bs-sidelinks{display:flex;flex-direction:column}
.bs-sidelinks a{padding:8px 2px;border-top:1px solid var(--ln);font-size:12.5px;color:var(--sub)}
.bs-sidelinks a:first-child{border-top:0}
.bs-sidelinks a:hover{color:var(--acc)}

/* ---------- ページャ・無限スクロール ---------- */
.bs-pager{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;padding:18px 0 6px}
.bs-pager a,.bs-pager span{border:1px solid var(--ln);background:var(--sf);color:var(--sub);
  border-radius:3px;min-width:36px;text-align:center;padding:7px 10px;font-size:13px;font-family:'IBM Plex Mono',monospace}
.bs-pager a:hover{color:var(--ink);border-color:var(--sub)}
.bs-pager .cur{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:600}
.js-inf .bs-pager{display:none}   /* JS有効時はページャを隠して無限スクロール */
.bs-more{display:none;align-items:center;justify-content:center;gap:10px;padding:20px 0;
  color:var(--sub);font-family:'IBM Plex Mono',monospace;font-size:12px}
.js-inf .bs-more{display:flex}
.bs-spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:bs-sp 1s linear infinite}
@keyframes bs-sp{to{transform:rotate(360deg)}}

/* ---------- 記事ページ ---------- */
.bs-art{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px;align-items:start}
.bs-art-main{min-width:0}
.bs-art-hero{background:var(--sf);border:1px solid var(--ln);border-radius:4px;overflow:hidden;margin-bottom:16px}
.bs-art-hero .im{display:block;width:100%;height:290px;overflow:hidden}
.bs-art-hero .im img{width:100%;height:100%;object-fit:cover}
.bs-art-hero .bd{padding:14px 16px 12px}
.bs-art-hero h2{margin:0 0 8px;font-size:19px;font-weight:700;line-height:1.55}
.bs-art-hero h2 a:hover{color:var(--acc)}
.bs-art-hero .meta{display:flex;gap:14px;color:var(--sub);font-size:12px;flex-wrap:wrap}
.bs-art-hero .meta .tm{font-family:'IBM Plex Mono',monospace}
.bs-excerpt{margin:10px 16px 0;color:var(--sub);font-size:13px;line-height:1.85}
.bs-goto{display:block;text-align:center;background:var(--acc);color:var(--acc-ink);
  font-weight:700;border-radius:3px;padding:11px;margin:12px 16px 16px;font-size:14px}
.bs-goto:hover{filter:brightness(1.07)}
.bs-art-side{min-width:0}

/* ---------- テーブル（サイト一覧・サイトについて） ---------- */
.bs-card{background:var(--sf);border:1px solid var(--ln);border-radius:4px;padding:16px}
.bs-tablewrap{overflow-x:auto}
.bs-table{width:100%;border-collapse:collapse;font-size:13px}
.bs-table th,.bs-table td{border-bottom:1px solid var(--ln);padding:9px 10px;text-align:left;vertical-align:middle}
.bs-table th{color:var(--sub);font-weight:500;white-space:nowrap}
.bs-table a:hover{color:var(--acc)}
.bs-sitefav{width:16px;height:16px;vertical-align:-3px;margin-right:7px;display:inline-block}

/* ---------- フォーム ---------- */
.bs-form label{display:block;font-size:13px;color:var(--sub);margin:14px 0 5px}
.bs-form input[type="text"],.bs-form input[type="email"],.bs-form textarea{
  width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--ln);
  border-radius:3px;padding:10px 12px;font-size:14px;font-family:inherit}
.bs-form input:focus,.bs-form textarea:focus{border-color:var(--acc);outline:none}
.bs-form .submit{margin-top:18px;width:100%;border:0;background:var(--acc);color:var(--acc-ink);
  font-weight:700;border-radius:3px;padding:12px;font-size:14px;cursor:pointer}
.bs-form .submit:hover{filter:brightness(1.07)}

/* ---------- フッター ---------- */
.bs-footer{border-top:1px solid var(--ln);background:var(--sf);margin-top:10px}
.bs-footer-in{max-width:1140px;margin:0 auto;padding:22px 14px 26px;text-align:center}
.bs-footer-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.bs-footer-links a{border:1px solid var(--ln);border-radius:3px;padding:6px 14px;font-size:12.5px;color:var(--sub)}
.bs-footer-links a:hover{color:var(--ink);border-color:var(--sub)}
.bs-copy{color:var(--sub);font-size:11.5px}
.bs-top{position:fixed;right:16px;bottom:18px;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--ln);background:var(--sf);color:var(--ink);font-size:17px;cursor:pointer;
  box-shadow:var(--shadow);display:none;align-items:center;justify-content:center;z-index:40}
.bs-top.show{display:flex}

/* ---------- 404 / メッセージ ---------- */
.bs-msg{background:var(--sf);border:1px solid var(--ln);border-radius:4px;padding:26px;text-align:center}
.bs-msg h2{margin:0 0 10px;font-size:18px}
.bs-msg p{color:var(--sub);margin:0 0 6px}
.bs-msg a{color:var(--acc);font-weight:600}

/* ============ レスポンシブ ============ */
@media (max-width:900px){
  .bs-cols{grid-template-columns:minmax(0,1fr)}
  .bs-side{position:static;max-height:none;overflow-y:visible}
  .bs-art{grid-template-columns:minmax(0,1fr)}
  .bs-pick{grid-template-columns:repeat(2,1fr)}
  .bs-pc .im{height:110px}
}
@media (max-width:640px){
  body{font-size:13.5px}
  .bs-head-in{height:50px;gap:10px}
  .bs-brand{font-size:17px}
  .bs-live{display:none}
  .bs-row{gap:9px;padding:8px 9px}
  .bs-row .im{width:64px;height:40px}
  .bs-tt{font-size:13px}
  .bs-meta{gap:8px;font-size:10.5px}
  .bs-art-hero .im{height:190px}
  .bs-rankn{width:1.6em;font-size:15px}
  .bs-rankn.r1{font-size:22px}
  .bs-rankn.r2,.bs-rankn.r3{font-size:18px}
  .bs-pager a,.bs-pager span{padding:8px 9px;min-width:34px}
}
@media (max-width:430px){
  .bs-pick{grid-template-columns:repeat(2,1fr);gap:8px}
  .bs-pc .im{height:88px}
  .bs-newsite .d{display:none}
}