:root{
  --ink:#0d1219;--muted:#5c6672;--line:#e7eaee;--bg:#ffffff;--soft:#f5f7f9;
  --brand:#ff5a1f;--brand2:#1457d6;--navy:#0d1b2a;--gold:#f2a900;
  --radius:14px;--maxw:1080px;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.8;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff}
.hdr-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:20px;padding:12px 18px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo .mk{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#ff7a3d,#e2360b);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(226,54,11,.45);flex:0 0 auto}
.logo .mk svg{width:24px;height:24px}
.logo .wm{display:flex;flex-direction:column;line-height:1.05}
.logo .wm .t{font-weight:900;font-size:20px;letter-spacing:.01em;color:#fff}
.logo .wm .t em{font-style:normal;color:#ff7a3d}
.logo .wm .sub{font-weight:700;font-size:10.5px;color:#8aa0b6;letter-spacing:.14em;margin-top:2px}
.gnav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.gnav a{font-size:14px;font-weight:700;color:#cdd8e4;padding:7px 13px;border-radius:8px}
.gnav a:hover,.gnav a.on{background:rgba(255,255,255,.12);color:#fff}

/* layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:24px 18px 64px}
.layout{display:grid;grid-template-columns:1fr 300px;gap:30px}
@media(max-width:880px){.layout{grid-template-columns:1fr}.side{order:2}}

.sec-h{display:flex;align-items:center;gap:10px;margin:6px 0 16px}
.sec-h h2{font-size:20px;margin:0;font-weight:900;letter-spacing:.02em}
.sec-h .bar{width:5px;height:22px;background:var(--brand);border-radius:3px}

/* hero latest */
.hero{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--navy);color:#fff;margin-bottom:26px;border:1px solid var(--line)}
.hero .ph{aspect-ratio:16/7;background:linear-gradient(135deg,#16314e,#0d1b2a);display:flex;align-items:center;justify-content:center;color:#33526f;font-weight:800;font-size:14px}
.hero .body{padding:20px 22px}
.hero .cat{display:inline-block;background:var(--brand);font-size:12px;font-weight:800;padding:4px 12px;border-radius:999px;letter-spacing:.04em}
.hero h3{margin:12px 0 6px;font-size:24px;line-height:1.4;font-weight:900}
.hero .meta{color:#9fb0c3;font-size:13px}

/* news list */
.feed{display:flex;flex-direction:column;gap:2px}
.item{display:flex;gap:16px;padding:16px 6px;border-bottom:1px solid var(--line);transition:.12s}
.item:hover{background:var(--soft)}
.item .thumb{flex:0 0 132px;height:84px;border-radius:10px;background:linear-gradient(135deg,#e9eef3,#dde6ee);display:flex;align-items:center;justify-content:center;color:#9fb0c3;font-size:11px;font-weight:800;overflow:hidden}
.item .c{flex:1;min-width:0}
.tag{display:inline-block;font-size:11px;font-weight:800;padding:3px 9px;border-radius:6px;letter-spacing:.03em}
.tag.kekka{background:#e9f0ff;color:var(--brand2)}
.tag.sokuho{background:#ffe9e0;color:#d63b09}
.tag.iseki{background:#eaf7ee;color:#1f9d55}
.tag.data{background:#fff3d6;color:#9a7400}
.item h3{margin:8px 0 5px;font-size:17px;line-height:1.45;font-weight:800}
.item:hover h3{color:var(--brand2)}
.item .meta{color:var(--muted);font-size:12.5px}

/* sidebar */
.card{border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:20px;background:#fff}
.card h4{margin:0 0 12px;font-size:15px;font-weight:900;display:flex;align-items:center;gap:8px}
.card h4::before{content:"";width:4px;height:16px;background:var(--brand);border-radius:2px}
.rank{display:flex;gap:11px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px}
.rank:last-child{border:none}
.rank .n{flex:0 0 22px;height:22px;border-radius:6px;background:var(--soft);font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.rank .n.top{background:var(--brand);color:#fff}
.rank a{font-weight:700;line-height:1.4}
.rank a:hover{color:var(--brand2)}

.adbox{border:1px dashed #c7ced6;border-radius:12px;background:var(--soft);color:#9aa4af;text-align:center;padding:28px 12px;font-size:12px;font-weight:700;margin-bottom:20px}

/* article page */
.article{max-width:760px;margin:0 auto}
.breadcrumb{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.article h1{font-size:28px;line-height:1.45;font-weight:900;margin:8px 0 12px}
.article .pmeta{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:22px}
.article h2{font-size:21px;font-weight:900;margin:34px 0 12px;padding-left:12px;border-left:5px solid var(--brand)}
.article p{margin:14px 0}
.article .lead{font-size:17px;color:#26303c}
.tablewrap{overflow-x:auto;margin:18px 0}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:420px}
th,td{border:1px solid var(--line);padding:9px 12px;text-align:left}
th{background:var(--navy);color:#fff;font-weight:700;font-size:13px}
tr:nth-child(even) td{background:var(--soft)}
.source{margin-top:8px;font-size:13px;color:var(--muted)}
.source a{color:var(--brand2);text-decoration:underline}
.note{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:12px 16px;font-size:13px;color:var(--muted);margin:18px 0}

/* footer */
.ft{border-top:1px solid var(--line);background:var(--soft);color:var(--muted);font-size:13px;margin-top:30px}
.ft-in{max-width:var(--maxw);margin:0 auto;padding:28px 18px;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center}
.ft a{color:var(--muted)}.ft a:hover{color:var(--ink)}
.ft .cp{width:100%;color:#9aa4af;font-size:12px;border-top:1px solid var(--line);padding-top:14px;margin-top:6px}

/* ticker */
.ticker{background:var(--brand);color:#fff;font-size:13px;font-weight:700}
.ticker-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:12px;padding:7px 18px;overflow:hidden;white-space:nowrap}
.ticker .lbl{background:#fff;color:var(--brand);border-radius:5px;padding:2px 9px;font-weight:900;font-size:11px;letter-spacing:.06em;flex:0 0 auto}
.ticker .roll{display:flex;gap:34px;animation:roll 26s linear infinite}
.ticker .roll a{color:#fff}
.ticker .roll a:hover{text-decoration:underline}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* hero art */
.hero .ph{position:relative;overflow:hidden;padding:0}
.hero .ph svg{position:absolute;inset:0;width:100%;height:100%}
.hero .ph .court{position:absolute;inset:0}

/* pickup cards */
.pickrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
@media(max-width:640px){.pickrow{grid-template-columns:1fr 1fr}}
.pick{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:.14s;display:flex;flex-direction:column}
.pick:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(13,27,42,.12)}
.pick .pimg{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;position:relative}
.pick .pimg .ic{width:40px;height:40px;opacity:.92}
.pick .pimg.g1{background:linear-gradient(135deg,#ff7a3d,#e2360b)}
.pick .pimg.g2{background:linear-gradient(135deg,#2a7de1,#1240a6)}
.pick .pimg.g3{background:linear-gradient(135deg,#13a160,#0c7c46)}
.pick .pbody{padding:12px 14px}
.pick .pbody .tag{margin-bottom:7px}
.pick .pbody h3{margin:0;font-size:15px;line-height:1.45;font-weight:800}
.pick:hover h3{color:var(--brand2)}

/* icon thumb in feed */
.item .thumb{position:relative}
.item .thumb svg{width:30px;height:30px;opacity:.5}

/* image thumbnails */
.item .thumb img{width:100%;height:100%;object-fit:cover}
.pick .pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eyecatch{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;margin:2px 0 8px;display:block}
@media(max-width:600px){.eyecatch{aspect-ratio:16/9}}

/* mini standings */
.stand{font-size:13.5px}
.stand .row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.stand .row:last-child{border:none}
.stand .r{flex:0 0 24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;background:var(--soft);color:var(--muted)}
.stand .row.jp{background:#fff6ee;border-radius:8px}
.stand .row.jp .r{background:var(--brand);color:#fff}
.stand .nm{font-weight:700;flex:1}
.stand .mv{font-size:12px;color:var(--muted)}
.stand .mv.up{color:#1f9d55}.stand .mv.dn{color:#d63b09}

/* section subtitle */
.sec-h .more{margin-left:auto;font-size:13px;font-weight:700;color:var(--brand2)}

@media(max-width:600px){
  .gnav{display:none}
  .item .thumb{flex-basis:96px;height:66px}
  .hero h3{font-size:20px}
  .article h1{font-size:23px}
  .ticker .lbl{display:none}
}