/* しゃろ勉ニュース（方向 B・兄弟型）。tools/build-news.mjs が書き出す。手で直さない */
:root{
  --navy:#1f4b8e;--navy-deep:#163a70;--ink:#17213a;--sub:#56627a;
  --paper:#ffffff;--wash:#f2f5fa;--line:#dce3ee;--chip:#dfe7f8;--marker:#ffe36e;
  --cat-study:#1f3f8f;--cat-study-bg:#e8eef9;--cat-law:#8f1f2f;--cat-law-bg:#f9e8ea;
  --cat-hire:#1f6f4f;--cat-hire-bg:#e8f5ee;--cat-hr:#5f3f8f;--cat-hr-bg:#efe8f9;--cat-other:#56627a;--cat-other-bg:#eef0f4;
  --display:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --num:"Barlow","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --navy:#8fb0ea;--navy-deep:#1c3563;--ink:#e7ecf5;--sub:#a4b0c6;--paper:#111a2b;--wash:#0b1322;--line:#26344d;--chip:#233a63;--marker:rgba(255,215,80,.42);
  --cat-study:#9db8f0;--cat-study-bg:#1b2a4d;--cat-law:#f0a0ac;--cat-law-bg:#4a1f27;--cat-hire:#8fd4b0;--cat-hire-bg:#173a2b;--cat-hr:#c7aef0;--cat-hr-bg:#33244d;--cat-other:#a4b0c6;--cat-other-bg:#1b2436;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --navy:#8fb0ea;--navy-deep:#1c3563;--ink:#e7ecf5;--sub:#a4b0c6;--paper:#111a2b;--wash:#0b1322;--line:#26344d;--chip:#233a63;--marker:rgba(255,215,80,.42);
  --cat-study:#9db8f0;--cat-study-bg:#1b2a4d;--cat-law:#f0a0ac;--cat-law-bg:#4a1f27;--cat-hire:#8fd4b0;--cat-hire-bg:#173a2b;--cat-hr:#c7aef0;--cat-hr-bg:#33244d;--cat-other:#a4b0c6;--cat-other-bg:#1b2436;
  color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wash);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.85}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
a:focus-visible,button:focus-visible{outline:3px solid var(--marker);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--display);line-height:1.45;margin:0;text-wrap:balance}
.wrap{max-width:1080px;margin:0 auto;padding-inline:16px}
.narrow{max-width:760px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.site{background:var(--paper);border-bottom:1px solid var(--line)}
.site .top{display:flex;align-items:flex-end;gap:16px;padding-block:16px 8px;flex-wrap:wrap}
.brand{text-decoration:none;color:var(--ink);line-height:1.2;display:grid;gap:6px}
.brand img{height:30px;width:auto}
@media (min-width:600px){.brand img{height:36px}}
.brand .tagline{display:block;font-size:12px;color:var(--sub);letter-spacing:.06em;padding-left:2px}
.site .x{margin-left:auto;font-size:13px;color:var(--sub);text-decoration:none;display:flex;align-items:center;gap:6px}
.site .x svg{width:16px;height:16px;fill:currentColor}
.cats{display:flex;gap:4px;overflow-x:auto;padding-block:6px 0;scrollbar-width:none;margin-bottom:-1px}
.cats a{flex:0 0 auto;font-family:var(--display);font-weight:700;font-size:14px;text-decoration:none;color:var(--sub);padding:8px 12px;border-bottom:3px solid transparent}
.cats a[aria-current="page"]{color:var(--ink);border-color:var(--navy)}
.label{display:inline-block;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.08em;padding:2px 8px;border-radius:4px;line-height:1.6;white-space:nowrap;text-decoration:none}
.label.law{color:var(--cat-law);background:var(--cat-law-bg)}.label.hr{color:var(--cat-hr);background:var(--cat-hr-bg)}
.label.hire{color:var(--cat-hire);background:var(--cat-hire-bg)}.label.study{color:var(--cat-study);background:var(--cat-study-bg)}.label.other{color:var(--cat-other);background:var(--cat-other-bg)}
.label.series{color:var(--navy);background:var(--chip)}
.meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12px;color:var(--sub)}
.pr{border:1px solid currentColor;border-radius:3px;padding:0 4px;line-height:1.5;font-size:11px}
.card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;min-width:0}
.card:hover{border-color:var(--navy)}
.card .img{aspect-ratio:1200/630;background:var(--chip);overflow:hidden}
.card .img img{width:100%;height:100%;object-fit:cover}
.card .body{padding:12px 14px 14px;display:grid;gap:6px}
.card h3,.card h2{font-size:15px;font-weight:700}
.hero{display:grid;gap:14px;margin-top:18px}
@media (min-width:760px){.hero{grid-template-columns:3fr 2fr}.hero .side{display:grid;gap:14px;align-content:start}}
.hero .lead h2{font-size:22px;font-weight:900}
.hero .lead .body{padding:16px 18px 18px}
.hero .side .card{display:grid;grid-template-columns:120px 1fr}
.hero .side .card .img{aspect-ratio:1}
.hero .side .card .body{padding:10px 12px}
.hero .side .card h3{font-size:14px;line-height:1.5}
.band{margin-top:40px}
.band-head{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.band-head h2,.page-title{font-size:21px;font-weight:900;padding-left:12px;border-left:5px solid var(--navy)}
.band-head h2.law,.page-title.law{border-color:var(--cat-law)}.band-head h2.hr,.page-title.hr{border-color:var(--cat-hr)}
.band-head h2.hire,.page-title.hire{border-color:var(--cat-hire)}.band-head h2.study,.page-title.study{border-color:var(--cat-study)}
.band-head .desc{font-size:13px;color:var(--sub)}
.band-head .more{margin-left:auto;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.page-title{margin-top:24px}
.page-desc{font-size:14px;color:var(--sub);margin:8px 0 0 17px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:14px}
.band .grid{margin-top:0}
.list{display:grid;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.list a{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 16px;text-decoration:none;color:inherit;border-top:1px solid var(--line);min-width:0}
.list a:first-child{border-top:0}
.list a:hover{background:var(--wash)}
.list .t{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.5;display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0}
.list time{font-family:var(--num);font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.series-grid{display:grid;gap:14px}
@media (min-width:760px){.series-grid{grid-template-columns:1fr 1fr 1fr}}
.digest{background:#163a70;color:#fff;border-radius:12px;padding:22px 22px 20px;display:grid;gap:10px;grid-template-columns:1fr auto;align-items:center;margin-top:14px}
.digest h3{font-size:19px;font-weight:900;color:#fff}
.digest p{margin:0;font-size:14px;color:#c9d6ee;line-height:1.7}
.digest a{color:#fff;font-weight:700;font-size:14px;white-space:nowrap;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:8px;padding:8px 14px;text-decoration:none}
@media (max-width:600px){.digest{grid-template-columns:1fr}}
.btn{font-family:var(--display);font-weight:700;font-size:13px;text-decoration:none;border-radius:8px;padding:7px 14px;border:1px solid var(--line);color:var(--ink);background:var(--paper);cursor:pointer}
.btn.primary{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.banner{text-decoration:none;position:relative;display:grid;grid-template-columns:1fr auto;gap:0 20px;align-items:end;background:linear-gradient(135deg,#163a70,#1f4b8e 70%,#2d62b3);color:#fff;border-radius:14px;overflow:hidden;padding:22px 0 0 22px;min-height:190px;margin-top:14px}
.banner .text{display:grid;gap:10px;padding-bottom:22px;min-width:0;align-self:center}
.banner .tag{justify-self:start;font-size:10px;letter-spacing:.08em;color:#c9d6ee;border:1px solid rgba(255,255,255,.35);border-radius:3px;padding:0 6px;line-height:1.7}
.banner .app{display:flex;align-items:center;gap:10px}
.banner .app img{width:44px;height:44px;border-radius:11px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.banner .app .nm{font-family:var(--display);font-weight:900;font-size:17px;line-height:1.2;color:#fff}
.banner .app .nm small{display:block;font-weight:500;font-size:11px;color:#c9d6ee;letter-spacing:.06em;margin-top:3px}
.banner h3{font-family:var(--display);font-weight:900;font-size:22px;line-height:1.4;color:#fff}
.banner h3 mark{background:none;color:#ffe36e;padding:0;display:inline-block}
.banner p{margin:0;font-size:13.5px;line-height:1.75;color:#dbe4f5}
.banner .stores{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.banner .stores img{height:40px;width:auto}
.banner .shot{align-self:end;width:150px;margin-right:22px;border-radius:14px 14px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.3);display:block}
@media (max-width:640px){.banner{grid-template-columns:1fr;padding:20px 18px 0}.banner .text{padding-bottom:18px}.banner .shot{justify-self:center;width:170px;margin-right:0}}
.banner.compact{min-height:0}
.banner.compact h3{font-size:18px}
.banner.compact .shot{width:120px}
footer{margin-top:40px;background:var(--paper);border-top:1px solid var(--line);padding-block:24px 40px;font-size:13px;color:var(--sub)}
footer p{margin:0 0 6px;line-height:1.7}
footer .links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
footer a{color:var(--sub)}
.crumb{font-size:13px;color:var(--sub);margin-top:16px}
.crumb a{text-decoration:none}
article{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:12px}
article .img{aspect-ratio:1200/630;background:var(--chip)}
article .img img{width:100%;height:100%;object-fit:cover}
article .content{padding:20px 20px 28px}
@media (min-width:600px){article .content{padding:26px 32px 34px}}
article h1{font-size:25px;font-weight:900;line-height:1.5;margin-top:10px}
@media (min-width:600px){article h1{font-size:29px}}
.notice{margin-top:14px;background:var(--cat-law-bg);color:var(--cat-law);border-radius:8px;padding:8px 12px;font-size:13px}
.points{margin-top:20px;background:var(--wash);border-radius:10px;padding:14px 18px 14px 16px;border-left:4px solid var(--navy)}
.points .ttl{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--navy)}
.points ol{margin:6px 0 0;padding-left:1.3em;font-size:15px;line-height:1.75}
.points li+li{margin-top:4px}
.md{font-size:17px;line-height:1.95;margin-top:8px;overflow-wrap:anywhere}
.md h2{font-size:20px;font-weight:700;margin:32px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--line)}
.md h2::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--navy);margin-right:10px;vertical-align:.2em}
.md h3{font-size:18px;font-weight:700;margin:26px 0 6px}
.md p{margin:14px 0}
.md ul{padding-left:1.3em;margin:12px 0}
.md li{margin:4px 0}
.md strong{background:linear-gradient(transparent 62%,var(--marker) 62%,var(--marker) 92%,transparent 92%)}
.exam{margin-top:30px;border:1.5px solid var(--navy);border-radius:12px;padding:16px 18px;display:grid;gap:8px;background:var(--paper)}
.exam .ttl{font-family:var(--display);font-weight:900;font-size:15px;color:var(--navy)}
.exam p{margin:0;font-size:15px;line-height:1.8}
.exam .btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.linkbtn{display:block;text-align:center;border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:26px;text-decoration:none;font-weight:700;font-family:var(--display)}
.linkbtn:hover{border-color:var(--navy)}
.share{margin-top:28px;border-top:1px dashed var(--line);padding-top:18px;display:grid;gap:12px}
.share .row{display:flex;gap:8px;flex-wrap:wrap}
.share .row .btn{display:inline-flex;align-items:center;gap:6px}
.share .row .btn svg{width:15px;height:15px;fill:currentColor}
.memo{background:var(--wash);border-radius:10px;padding:12px 14px;display:grid;gap:8px}
.memo .ttl{font-family:var(--display);font-weight:700;font-size:13px;color:var(--sub);letter-spacing:.06em}
.memo pre{margin:0;font:inherit;font-size:13.5px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.memo .copy{justify-self:start}
.status{font-size:12px;color:var(--sub);min-height:1.2em}
.related{margin-top:28px}
.related h2{font-size:17px;font-weight:900;margin-bottom:10px}
.back{display:inline-block;margin-top:22px;font-size:14px;font-weight:700;text-decoration:none}
.prose{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px 22px 26px;margin-top:14px;font-size:15px;line-height:1.9}
.prose h2{font-size:17px;font-weight:900;margin:22px 0 6px}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.3em;margin:6px 0}
.prose p{margin:8px 0}
.empty{color:var(--sub);padding:24px 0}
