/* いまバズ — 3視点ボード */
:root {
  --bg: #ffffff; --surface: #ffffff; --ink: #0f172a; --ink-2: #334155; --ink-3: #64748b; --line: #e2e8f0; --line-2: #f1f5f9;
  --head: #0f172a; --head-ink: #ffffff; --head-sub: #94a3b8;
  --accent: #ea580c; --accent-soft: #fb923c; --link: #2563eb;
  --c1: #eff6ff; --c1-ink: #1d4ed8; --c2: #fff7ed; --c2-ink: #c2410c; --c3: #f5f3ff; --c3-ink: #6d28d9;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1120; --surface: #111827; --ink: #e5e7eb; --ink-2: #cbd5e1; --ink-3: #94a3b8; --line: #1f2937; --line-2: #1f2937;
    --head: #020617; --link: #93c5fd;
    --c1: #0f1d3a; --c1-ink: #93c5fd; --c2: #2a1708; --c2-ink: #fdba74; --c3: #1e1636; --c3-ink: #c4b5fd;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1120; --surface: #111827; --ink: #e5e7eb; --ink-2: #cbd5e1; --ink-3: #94a3b8; --line: #1f2937; --line-2: #1f2937;
  --head: #020617; --link: #93c5fd;
  --c1: #0f1d3a; --c1-ink: #93c5fd; --c2: #2a1708; --c2-ink: #fdba74; --c3: #1e1636; --c3-ink: #c4b5fd;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  font-size: 16px; line-height: 1.75; font-feature-settings: "palt" 1;
}
a { color: var(--link); text-underline-offset: 3px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* header */
.top { background: var(--head); color: var(--head-ink); }
.hd { max-width: 1180px; margin: 0 auto; padding: 18px 16px; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 22px; font-weight: 900; letter-spacing: .04em; color: var(--head-ink); text-decoration: none; }
.logo span { color: var(--accent-soft); }
.hd nav { display: flex; gap: 4px; }
.hd nav a { color: var(--head-sub); text-decoration: none; font-size: 14px; padding: 6px 10px; border-radius: 8px; }
.hd nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.hero { max-width: 1180px; margin: 0 auto; padding: 4px 16px 26px; }
.hero.has-qr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; }
.hero.has-qr > .old { grid-column: 1 / -1; }
.qr { background: #fff; border-radius: 12px; padding: 8px 8px 6px; text-align: center; line-height: 1; }
.qr img { display: block; width: 104px; height: 104px; }
.qr span { display: block; font-size: 11px; font-weight: 700; color: #0f172a; margin-top: 4px; }
.hero h1 { font-size: clamp(24px, 4vw, 30px); line-height: 1.35; margin: 0 0 4px; }
.hero p { margin: 0; color: var(--head-sub); font-size: 14px; }
.hero p a { color: var(--head-sub); }
.hero .old { background: rgba(251,146,60,.15); color: #fed7aa; border-radius: 10px; padding: 8px 12px; margin: 0 0 14px; font-size: 14px; }
.hero .old a { color: #fdba74; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 13px; color: #cbd5e1; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend .l1 { background: #60a5fa; } .legend .l2 { background: #fb923c; } .legend .l3 { background: #a78bfa; }

/* layout */
.layout { max-width: 1180px; margin: 0 auto; padding: 24px 16px 40px; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; }
.rank { position: sticky; top: 16px; align-self: start; border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--surface); max-height: calc(100vh - 32px); overflow: auto; }
.rank h2 { font-size: 12.5px; color: var(--ink-3); margin: 0 0 6px; letter-spacing: .08em; }
.rank ol { margin: 0; padding: 0; list-style: none; }
.rank li a { display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line-2); font-size: 13.5px; line-height: 1.5; color: var(--ink); text-decoration: none; }
.rank li:first-child a { border-top: 0; }
.rank li a:hover span { text-decoration: underline; }
.rank h2 small { font-size: 11px; font-weight: 700; color: var(--accent); background: rgba(234,88,12,.1); padding: 1px 6px; border-radius: 6px; margin-left: 4px; letter-spacing: 0; }
.rank li b i { font-style: normal; font-size: 10px; font-weight: 700; margin-left: 1px; }
.rank li span em { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.rank li.cur a { background: var(--line-2); border-radius: 8px; }
.rank-empty { font-size: 13px; color: var(--ink-3); margin: 6px 0; }
.card h3 a.tl { color: inherit; text-decoration: none; }
.card h3 a.tl:hover { text-decoration: underline; }
.crumb { font-size: 13px; margin: 0 0 6px !important; }
.crumb a { color: var(--head-sub); }
.hero h1.news-h1 { font-size: clamp(21px, 3.2vw, 27px); line-height: 1.45; margin-bottom: 6px; }
.rank li b { font-size: 15px; color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; }

/* card */
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin-bottom: 18px; }
.card .ch { padding-right: 40px; }
.share-btn { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); display: grid; place-items: center; cursor: pointer; padding: 0; }
.share-btn:hover, .share-btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.share-menu { position: fixed; z-index: 50; width: 330px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: 8px; }
.share-menu .sm-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 8px; font-size: 15px; }
.share-menu .sm-close { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 2px 6px; }
.share-menu a, .share-menu button[data-k] { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 15px; text-decoration: none; cursor: pointer; text-align: left; white-space: nowrap; }
.share-menu a:hover, .share-menu button[data-k]:hover { background: var(--line-2); }
.si { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; font-family: Arial, Helvetica, sans-serif; }
.si-x { background: #000; } .si-fb { background: #1877f2; font-size: 16px; } .si-hb { background: #00a4de; font-size: 11px; letter-spacing: -.5px; }
.si-mail { background: #e2445c; } .si-link { background: #475569; }
.share-menu.sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; border-radius: 18px 18px 0 0; padding: 10px 12px calc(14px + env(safe-area-inset-bottom)); }
.ch { display: flex; gap: 16px; align-items: flex-start; }
.badge { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: conic-gradient(var(--accent) var(--p), var(--line-2) 0); position: relative; }
.badge::after { content: ""; position: absolute; inset: 6px; background: var(--surface); border-radius: 50%; }
.badge b, .badge small { position: relative; z-index: 1; line-height: 1; }
.badge b { font-size: 21px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.badge b i { font-style: normal; font-size: 11px; font-weight: 700; margin-left: 1px; }
.badge small { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); margin-top: 2px; }
.cat { font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.card h3 { font-size: 21px; line-height: 1.45; margin: 2px 0 8px; }
.sum { font-size: 15.5px; line-height: 1.85; color: var(--ink-2); margin: 0; }
.cols { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
.col { border-radius: 12px; padding: 12px 16px; font-size: 15px; line-height: 1.85; }
.col { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; }
.chara { width: 72px; height: 72px; border-radius: 14px; background: #fbfbf9; display: block; }
.col h4 { margin: 0 0 4px; font-size: 13px; }
.col p { margin: 0; color: var(--ink-2); }
.c1 { background: var(--c1); } .c1 h4 { color: var(--c1-ink); }
.c2 { background: var(--c2); } .c2 h4 { color: var(--c2-ink); }
.c3 { background: var(--c3); } .c3 h4 { color: var(--c3-ink); }
.cf { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-3); margin-top: 12px; line-height: 1.7; }
.cf b { font-weight: 700; margin-right: 8px; color: var(--ink-3); }
.cf a { color: var(--ink-3); word-break: break-all; }
.cf .sep { margin: 0 4px; }

.issue + .issue { margin-top: 34px; }
.issue-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 15px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.issue-time { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.issue-lbl { color: var(--ink-2); font-weight: 700; }
.issue-h a { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.notes { font-size: 13.5px; color: var(--ink-3); border: 1px dashed var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 18px; }
.notes p { margin: 2px 0; }
.about { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 18px; color: var(--ink-2); font-size: 14px; }
.about h2 { font-size: 15px; margin: 0 0 6px; color: var(--ink); }
.about p { margin: 6px 0; }
.fine { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }

.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; margin-top: 24px; font-size: 14px; }
.pager a { text-decoration: none; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink); background: var(--surface); }
.pager .newer { text-align: right; } .pager .all { text-align: center; }

/* archive */
.archive { padding-top: 8px; padding-bottom: 40px; max-width: 820px; }
.day h2 { font-size: 15px; color: var(--ink-3); margin: 26px 0 8px; }
.day-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.day-list a { display: grid; grid-template-columns: 64px 36px 1fr; gap: 10px; align-items: center; padding: 11px 16px; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line-2); }
.day-list li:first-child a { border-top: 0; }
.day-list a:hover { background: var(--line-2); }
.day-list time { white-space: nowrap; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.day-list .sc { color: var(--accent); font-variant-numeric: tabular-nums; }
.day-list .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { color: var(--ink-3); padding: 40px 0; text-align: center; }

.site-footer { border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; padding: 20px 0 32px; }

@media (max-width: 860px) {
  .qr { display: none; }
  .hero.has-qr { display: block; }
  .layout { grid-template-columns: 1fr; gap: 18px; }
  .rank { position: static; max-height: none; order: 2; }
  .layout > main { order: 1; }
}
@media (max-width: 700px) {
  .card { padding: 16px; }
  .share-btn { top: 12px; right: 12px; width: 32px; height: 32px; }
  .card .ch { padding-right: 34px; }
  .card h3 { font-size: 18px; }
  .ch { gap: 12px; }
  .badge { width: 54px; height: 54px; }
  .badge b { font-size: 18px; }
  .col { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .chara { width: 56px; height: 56px; border-radius: 12px; }
  .day-list a { grid-template-columns: 56px 30px 1fr; padding: 10px 12px; }
  .pager { grid-template-columns: 1fr 1fr; }
  .pager .all { grid-column: 1 / -1; order: 3; }
}

/* 関連記事（個別ページ） */
.related{margin:20px 0;padding:20px 24px;border:1px solid var(--line,#e5e5ea);border-radius:20px;background:var(--bg,#fff)}
.related h2{font-size:17px;margin:0 0 10px}
.related ul{list-style:none;margin:0;padding:0}
.related li{padding:12px 0;border-top:1px solid var(--line,#e5e5ea);line-height:1.6}
.related li:first-child{border-top:0}
.related a{color:inherit;text-decoration:none;overflow-wrap:anywhere}
.related a:hover{text-decoration:underline}
.related a::after{content:" ↗";color:var(--muted,#6e6e73);font-size:.85em}

/* 関連動画（個別ページ） */
.rel-video{margin:20px 0;padding:20px 24px;border:1px solid var(--line,#e5e5ea);border-radius:20px;background:var(--bg,#fff)}
.rel-video h2{font-size:17px;margin:0 0 12px}
.rel-video .yt{display:flex;flex-wrap:wrap;gap:16px;align-items:center;color:inherit;text-decoration:none}
.rel-video .yt-thumb{position:relative;flex:0 1 320px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.rel-video .yt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rel-video .yt-play{position:absolute;left:50%;top:50%;width:64px;height:44px;margin:-22px 0 0 -32px;border-radius:12px;background:rgba(255,0,0,.9)}
.rel-video .yt-play::after{content:"";position:absolute;left:26px;top:13px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.rel-video .yt-title{flex:1 1 220px;font-weight:700;line-height:1.6;overflow-wrap:anywhere}
.rel-video .yt-title small{display:block;font-weight:400;color:var(--muted,#6e6e73);margin-top:4px}
.rel-video .yt:hover .yt-title{text-decoration:underline}

/* 関連ニュース（サイト内の個別ページ3件） */
.rel-pages{margin:20px 0}
.rel-pages h2{font-size:17px;margin:0 0 12px}
.rp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:720px){.rp-grid{grid-template-columns:1fr}}
.rp-card{display:flex;flex-direction:column;border:1px solid var(--line,#e5e5ea);border-radius:18px;overflow:hidden;background:var(--bg,#fff);color:inherit;text-decoration:none;min-width:0}
.rp-card:hover .rp-title{text-decoration:underline}
.rp-img{display:block;aspect-ratio:16/9;background:#0f172a;overflow:hidden}
.rp-img img{width:100%;height:100%;object-fit:cover;display:block}
.rp-ph{display:flex;align-items:center;justify-content:center;height:100%;color:#fff;font-weight:700}
.rp-text{display:flex;flex-direction:column;gap:6px;padding:12px 14px 16px}
.rp-meta{font-size:12px;color:var(--muted,#6e6e73);display:flex;gap:8px;align-items:center}
.rp-meta b{background:var(--accent,#ffd60a);color:#1d1d1f;border-radius:6px;padding:1px 7px}
.rp-title{font-size:15px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}

/* 関連ニュース：YouTubeサムネイルは動画へ、見出しは個別ページへ */
.rp-img{position:relative}
.rp-card a.rp-text{color:inherit;text-decoration:none}
.rp-card a.rp-text:hover .rp-title{text-decoration:underline}
.rp-img .yt-badge{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:5px;max-width:calc(100% - 16px);padding:3px 9px;border-radius:980px;background:rgba(0,0,0,.78);color:#fff;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-img .yt-badge i{flex:none;width:14px;height:10px;border-radius:3px;background:#f00}
.yt-badge i{position:relative}.yt-badge i::after{content:"";position:absolute;left:5px;top:2.5px;border-style:solid;border-width:2.5px 0 2.5px 4.5px;border-color:transparent transparent transparent #fff}

/* ブログ機能：フッターの案内・固定ページ・カテゴリ一覧・編集部のひとこと・ランキングバナー */
.foot-nav,.foot-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:0 0 10px;font-size:13px}
.foot-nav a,.foot-cats a{color:inherit;text-decoration:none}
.foot-nav a:hover,.foot-cats a:hover{text-decoration:underline}
.foot-cats{font-size:12px;opacity:.85}
.rank-banner{display:flex;justify-content:center;margin:0 0 14px}
.rank-banner img{max-width:100%;height:auto}
.rank-banner-news{margin:20px 0}
.static-page,.cat-page{max-width:820px;margin:0 auto;padding:36px 20px 64px;line-height:1.9}
.static-page h1,.cat-page h1{font-size:28px;margin:0 0 20px}
.static-page h2{font-size:19px;margin:28px 0 8px}
.static-page ul{padding-left:1.3em}
.contact-btn{display:inline-block;padding:12px 22px;border-radius:12px;background:#ffd60a;color:#1d1d1f;font-weight:800;text-decoration:none}
.cat-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.cat-nav a{padding:6px 14px;border-radius:980px;border:1px solid #d2d2d7;text-decoration:none;color:inherit;font-size:14px}
.cat-nav a[aria-current="page"]{background:#ffd60a;border-color:#ffd60a;color:#1d1d1f;font-weight:700}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li a{display:flex;gap:14px;padding:14px 4px;border-bottom:1px solid #e5e5ea;text-decoration:none;color:inherit}
.cat-list li a:hover span{text-decoration:underline}
.cat-list b{flex:none;width:52px;font-size:18px}
.cat-list b small{font-size:11px}
.cat-list span{line-height:1.6}
.cat-list em{display:block;font-style:normal;font-size:12px;opacity:.7}
.owner-note{margin:14px 0 0;padding:12px 16px;border-left:4px solid #ffd60a;background:rgba(255,214,10,.12);border-radius:8px;line-height:1.8}
.owner-note b{display:block;font-size:12px;margin-bottom:2px}
.owner-note p{margin:0}
.e-owner{margin:6px 0 0;font-size:13px;line-height:1.7}
.e-owner b{display:inline-block;margin-right:8px;padding:1px 8px;border-radius:6px;background:#ffd60a;color:#1d1d1f;font-size:11px}