:root{
  --paper:#fff; --ink:#14161a; --ink2:#434955; --muted:#6b7280;
  --rule:#e3e6eb; --rule2:#c9cfd8; --tint:#f7f8fa;
  --accent:#c8102e; --accent-d:#94091f; --navy:#0b2a6b;
  --wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",
    "Yu Gothic Medium","Meiryo",system-ui,sans-serif;
  font-size:16px; line-height:1.75; letter-spacing:.01em;
  font-feature-settings:"palt" 1;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{line-height:1.4; letter-spacing:0; margin:0; font-weight:700}
p{margin:0}
ul,ol{margin:0; padding:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ── マストヘッド ───────────────────────────────── */
.mast{border-bottom:1px solid var(--rule)}
.mast-in{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-top:18px; padding-bottom:14px}
.brand{display:inline-flex; align-items:baseline; gap:8px; text-decoration:none}
.brand-mark{
  font:700 20px/1 -apple-system,system-ui,sans-serif; letter-spacing:.06em;
  color:#fff; background:var(--accent); padding:8px 9px;
}
.brand-name{font-size:23px; font-weight:700; letter-spacing:.02em}
.brand-tag{color:var(--muted); font-size:13px; margin-left:2px; flex:1 1 200px}
.search{display:flex; border:1px solid var(--rule2); flex:0 0 auto}
.search input{
  border:0; padding:8px 12px; font:inherit; font-size:14px; width:180px;
  background:transparent; color:inherit; min-width:0;
}
.search input:focus{outline:2px solid var(--navy); outline-offset:-2px}
.search button{
  border:0; border-left:1px solid var(--rule2); background:var(--tint);
  font:inherit; font-size:13px; padding:8px 14px; cursor:pointer; color:var(--ink2);
}
.search button:hover{background:var(--ink); color:#fff}

/* ── ナビ ──────────────────────────────────────── */
.nav{border-bottom:2px solid var(--ink); background:var(--paper)}
.nav-in{display:flex; align-items:stretch; gap:2px; overflow-x:auto; scrollbar-width:none}
.nav-in::-webkit-scrollbar{display:none}
.nav a{
  display:inline-flex; align-items:center; padding:11px 13px; text-decoration:none;
  font-size:14px; white-space:nowrap; color:var(--ink2); border-bottom:3px solid transparent;
}
.nav a:hover{color:var(--ink); border-bottom-color:var(--rule2)}
.nav a[aria-current]{color:var(--ink); font-weight:700; border-bottom-color:var(--accent)}
.nav .cta{margin-left:auto; background:var(--accent); color:#fff; font-weight:700; border-bottom-color:var(--accent)}
.nav .cta:hover{background:var(--accent-d); color:#fff; border-bottom-color:var(--accent-d)}

/* ── レイアウト ────────────────────────────────── */
main{padding:28px 0 56px}
.cols{display:grid; grid-template-columns:1fr; gap:36px}
@media(min-width:960px){ .cols{grid-template-columns:minmax(0,1fr) 300px; gap:44px} }

/* 更新状況の 1 行。派手にしない — 点滅も動きも入れない。
   「動いているように見せる」ためではなく、実際の更新時刻を出すためのもの。 */
.pulse{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted); border-bottom:1px solid var(--rule);
  padding-bottom:12px; margin-bottom:22px;
}
.pulse .sep{color:var(--rule2)}
.dot-live{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:0 0 auto}

.sec-head{
  display:flex; align-items:baseline; gap:12px; justify-content:space-between;
  border-bottom:2px solid var(--ink); padding-bottom:7px; margin-bottom:18px;
}
.sec-head h2{font-size:17px; letter-spacing:.04em}
.sec-head .more{font-size:13px; color:var(--muted); text-decoration:none}
.sec-head .more:hover{color:var(--accent)}

/* ── 記事カード ────────────────────────────────── */
.lede{display:grid; gap:18px; margin-bottom:34px}
@media(min-width:700px){ .lede{grid-template-columns:1.35fr 1fr; align-items:start; gap:28px} }
.lede-main .thumb{margin-bottom:14px}
.lede-main h3{font-size:23px; line-height:1.42}
@media(min-width:700px){ .lede-main h3{font-size:26px} }
.lede-side{display:grid; gap:16px; align-content:start}
.lede-side .item{border-top:1px solid var(--rule); padding-top:14px}
.lede-side .item:first-child{border-top:0; padding-top:0}
.lede-side h3{font-size:16px}

.feed{list-style:none; border-top:1px solid var(--rule)}
.feed>li{border-bottom:1px solid var(--rule)}
.item{display:block}
.item a.tt{text-decoration:none; display:block}
.item a.tt:hover h3{color:var(--accent)}
.row{display:grid; grid-template-columns:1fr; gap:12px; padding:16px 0}
@media(min-width:560px){ .row{grid-template-columns:1fr 168px; gap:18px} }
.row h3{font-size:17px}
.row .sum{color:var(--ink2); font-size:14px; margin-top:7px; line-height:1.7}
.row .thumb{order:-1}
@media(min-width:560px){ .row .thumb{order:0} }
.thumb{background:var(--tint); border:1px solid var(--rule); overflow:hidden}
.thumb img{width:100%; aspect-ratio:16/9; object-fit:cover}

.meta{display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-bottom:8px}
.meta .src{color:var(--ink2)}
.meta time{font-variant-numeric:tabular-nums}
.dot{width:3px; height:3px; background:var(--rule2); border-radius:50%; flex:0 0 auto}

.tag{
  display:inline-block; font-size:11px; letter-spacing:.06em; padding:3px 7px;
  border:1px solid var(--rule2); color:var(--ink2); text-decoration:none; white-space:nowrap;
}
a.tag:hover{border-color:var(--ink); color:var(--ink)}
.badge{font-size:11px; letter-spacing:.06em; padding:3px 7px; white-space:nowrap; font-weight:700}
.badge.pr{background:var(--accent); color:#fff}
.badge.media{background:var(--tint); color:var(--ink2); border:1px solid var(--rule2); font-weight:400}

/* ── サイドバー ────────────────────────────────── */
.side{display:grid; gap:28px; align-content:start}
.panel{border:1px solid var(--rule); padding:16px}
.panel h2{font-size:14px; letter-spacing:.05em; border-bottom:1px solid var(--rule); padding-bottom:8px; margin-bottom:12px}
.catlist{list-style:none; display:grid; gap:1px}
.catlist a{display:flex; justify-content:space-between; gap:8px; text-decoration:none; padding:6px 0; font-size:14px; border-bottom:1px dotted var(--rule)}
.catlist a:hover{color:var(--accent)}
.catlist .n{color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums}
.colist{list-style:none; display:grid; gap:10px}
.colist a{display:flex; gap:10px; align-items:center; text-decoration:none; font-size:14px}
.colist a:hover{color:var(--accent)}
.colist .n{color:var(--muted); font-size:12px; margin-left:auto; font-variant-numeric:tabular-nums}
.note{font-size:12.5px; color:var(--muted); line-height:1.7}
.panel-cta{border:1px solid var(--accent); padding:16px}
.panel-cta h2{border-bottom-color:#f0c4cc}
.btn{
  display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  font-weight:700; font-size:14px; padding:11px 18px; border:0; cursor:pointer; font-family:inherit;
}
.btn:hover{background:var(--accent-d)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--rule2); font-weight:400}
.btn.ghost:hover{background:var(--tint); color:var(--ink)}

/* ── 記事本文 ──────────────────────────────────── */
.article{max-width:720px}
.article h1{font-size:26px; line-height:1.45; margin:10px 0 14px}
@media(min-width:700px){ .article h1{font-size:31px} }
.orig-title{font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:16px}
.hero{margin:20px 0 24px; border:1px solid var(--rule)}
.hero img{width:100%}
.hero figcaption{font-size:12px; color:var(--muted); padding:8px 10px; border-top:1px solid var(--rule)}
.summary{
  font-size:16.5px; line-height:1.9; border-left:3px solid var(--accent);
  padding:2px 0 2px 16px; margin:22px 0;
}
/* list-style は ul に当てること。section 側に書くと既定の中黒が残り、
   自前の赤いダッシュと二重に出る。 */
.points{border:1px solid var(--rule); padding:16px 18px; margin:24px 0; background:var(--tint)}
.points ul{list-style:none; margin:0; padding:0}
.points h2{font-size:13px; letter-spacing:.06em; color:var(--ink2); margin-bottom:10px}
.points li{padding-left:18px; position:relative; margin-top:8px; font-size:15px; line-height:1.75}
.points li::before{content:""; position:absolute; left:0; top:.72em; width:8px; height:2px; background:var(--accent)}
.body p{margin:0 0 1.35em; line-height:1.95}
.origin{border:1px solid var(--rule2); padding:16px 18px; margin:28px 0}
.origin h2{font-size:13px; letter-spacing:.06em; color:var(--ink2); margin-bottom:8px}
.origin a{font-size:15px; word-break:break-word}
.origin .why{font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.7}
.cobox{border:1px solid var(--rule); padding:16px 18px; margin:28px 0; display:flex; gap:14px; align-items:flex-start}
.cobox img{width:48px; height:48px; object-fit:contain; border:1px solid var(--rule); background:#fff; flex:0 0 auto}
.cobox h2{font-size:16px; margin-bottom:4px}
.cobox .d{font-size:13px; color:var(--muted)}
.disc{font-size:12.5px; color:var(--muted); border-top:1px solid var(--rule); padding-top:14px; margin-top:32px; margin-bottom:44px; line-height:1.8}

/* ── 企業ページ ────────────────────────────────── */
.cohead{display:flex; gap:18px; align-items:flex-start; border-bottom:2px solid var(--ink); padding-bottom:18px; margin-bottom:22px; flex-wrap:wrap}
.cohead img{width:64px; height:64px; object-fit:contain; border:1px solid var(--rule); background:#fff}
.cohead h1{font-size:24px}
.cohead .sub{color:var(--muted); font-size:13.5px; margin-top:6px}
.grid-co{list-style:none; display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:620px){ .grid-co{grid-template-columns:1fr 1fr} }
.grid-co li{border:1px solid var(--rule); padding:14px}
.grid-co a{text-decoration:none; display:block}
.grid-co a:hover strong{color:var(--accent)}
.grid-co strong{font-size:15px; display:block; margin-bottom:4px}
.grid-co .n{font-size:12px; color:var(--muted)}

/* ── フォーム ──────────────────────────────────── */
.form{max-width:720px; display:grid; gap:20px}
.field{display:grid; gap:6px}
.field label{font-size:13.5px; font-weight:700}
.field .hint{font-size:12.5px; color:var(--muted); line-height:1.7}
.field input,.field textarea,.field select{
  font:inherit; font-size:15px; padding:10px 12px; border:1px solid var(--rule2);
  background:#fff; color:inherit; width:100%; border-radius:0;
}
.field textarea{min-height:220px; line-height:1.8; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--navy); outline-offset:-2px}
.req{color:var(--accent); font-size:11px; margin-left:4px}
.msg{border:1px solid var(--rule2); padding:14px 16px; font-size:14px; line-height:1.8}
.msg.ok{border-color:var(--navy); background:#f4f7fd}
.msg.ng{border-color:var(--accent); background:#fdf4f6}

/* ── 一覧・ページャ・その他 ─────────────────────── */
.page-head{border-bottom:2px solid var(--ink); padding-bottom:10px; margin-bottom:20px}
.page-head h1{font-size:22px}
.page-head p{color:var(--muted); font-size:13.5px; margin-top:6px}
.pager{display:flex; gap:10px; justify-content:center; margin-top:32px; font-size:14px}
.pager a,.pager span{padding:9px 16px; border:1px solid var(--rule2); text-decoration:none}
.pager a:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.pager span{color:var(--muted)}
.empty{border:1px dashed var(--rule2); padding:28px; text-align:center; color:var(--muted); font-size:14px}
.prose{max-width:720px}
.prose h1{font-size:24px; margin-bottom:18px; border-bottom:2px solid var(--ink); padding-bottom:10px}
.prose h2{font-size:17px; margin:32px 0 10px}
.prose p{margin:0 0 1.2em; line-height:1.95}
.prose ul{margin:0 0 1.2em 1.2em; padding:0}
.prose li{margin-bottom:.5em; line-height:1.85}
.prose table{border-collapse:collapse; width:100%; font-size:14px; margin:0 0 1.4em}
.prose th,.prose td{border:1px solid var(--rule); padding:8px 10px; text-align:left; vertical-align:top}
.prose th{background:var(--tint); font-weight:700; white-space:nowrap}
/* 表・整形済みテキストは、ページ本体ではなく自分の枠の中で横スクロールさせる。
   body ごと横に伸びると、狭い端末で全ページが左右に揺れる。 */
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%}
pre{
  font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap;
  word-break:break-word; background:var(--tint); border:1px solid var(--rule);
  padding:12px 14px; margin:0 0 14px; max-height:340px; overflow:auto;
}
/* 蜜壺。人間の目にも支援技術にも触れさせない。 */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ── フッタ ────────────────────────────────────── */
footer{border-top:2px solid var(--ink); padding:30px 0 48px; font-size:13px; color:var(--ink2)}
.foot{display:grid; gap:26px}
@media(min-width:760px){ .foot{grid-template-columns:1.3fr 1fr 1fr} }
.foot h2{font-size:12px; letter-spacing:.08em; color:var(--muted); margin-bottom:10px}
.foot ul{list-style:none; display:grid; gap:7px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot .brand-mark{font-size:16px; padding:6px 7px}
.foot .about{line-height:1.85; color:var(--muted); margin-top:12px; font-size:12.5px}
.foot .legal{border-top:1px solid var(--rule); margin-top:26px; padding-top:16px; color:var(--muted); font-size:12px; line-height:1.8}