/* mybest の実測パレット。ブランド緑 #0EB03A → 同彩度・同明度の紫 #6C0EAF に置換 */
:root{
  --white:#FFFFFF; --bg:#F7F7F7; --text:#313131; --black:#000000;
  --muted:#666666; --faint:#999999; --line:#EFEFEF; --line-2:#C7C7C7;
  --brand:#6C0EAF; --brand-dark:#57098D; --brand-soft:#F4EBFB; --brand-line:#D9BEEE;
  --orange:#FF8800; --yellow:#FFD10F;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--text);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.75;
}
body.locked{overflow:hidden}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* ── header ─────────────────────────────── */
.top{position:sticky; top:0; z-index:30; background:var(--white); border-bottom:1px solid var(--line)}
.top-in{max-width:1180px; margin:0 auto; padding:11px 20px; display:flex; align-items:center; gap:22px}
.brand b{font-size:18px; font-weight:800}
.go2{color:var(--brand); font-style:italic}

.util{margin-left:auto; display:flex; gap:16px; font-size:12.5px; color:var(--muted)}
.util a:hover{color:var(--brand)}
@media (max-width:640px){ .util{display:none} }
.catbar{position:sticky; top:45px; z-index:29; background:var(--bg); border-bottom:1px solid var(--line)}
.catbar-in{max-width:1180px; margin:0 auto; padding:0 20px; display:flex; gap:2px; overflow-x:auto; scrollbar-width:none}
.catbar-in::-webkit-scrollbar{display:none}
.catbar a{flex:0 0 auto; font-size:12.5px; color:var(--muted); padding:10px 12px; border-bottom:2px solid transparent; white-space:nowrap}
.catbar a:hover{color:var(--text)}
.catbar a[aria-current="page"]{color:var(--brand); border-bottom-color:var(--brand); font-weight:600}

.wrap{max-width:1180px; margin:0 auto; padding:0 20px 120px}
.crumb{font-size:11.5px; color:var(--faint); padding:18px 0 0}
.crumb a:hover{color:var(--brand)}
.head{padding:12px 0 22px}
/* ⚠️ 2026-08-09: text-wrap:balance を外した。行を均等割りしようとして
   スマホで「42社の規約で確かめた」だけが3行目に落ち、右に大きな空白ができていた。
   pretty は最終行が1語だけになるのを防ぐだけで、途中行は詰めてくれる。 */
h1{margin:0 0 10px; font-size:clamp(23px,3.2vw,31px); line-height:1.35; font-weight:700; text-wrap:pretty}
/* ⚠️ 記事の導入文は 64ch で切ると PC で右half が空いて見える。
   .head 直下（記事の書き出し）だけ広く取る。一覧ページの .lede は 64ch のまま。 */
/* ⚠️ 2026-08-09: max-width:64ch を外した。
   記事本文のリスト（ul.lede）にも効いていて、右に不自然な余白ができていた。
   読み幅の制御は .head .lede（記事の書き出し）だけで足りる。 */
.lede{margin:0; color:var(--muted); font-size:13.5px}
.head .lede{font-size:14.5px; line-height:1.85; color:var(--text)}
.lede strong{color:var(--text); font-weight:600}
/* 記事本文中のリストは本文色。項目ごとに余白をつける */
.wrap ul.lede,.wrap ol.lede{color:var(--text); font-size:14.5px; line-height:1.85; padding-left:1.4em}
.wrap ul.lede li,.wrap ol.lede li{margin:6px 0}

.cols{display:grid; grid-template-columns:236px minmax(0,1fr); gap:32px; align-items:start}
@media (max-width:899px){ .cols{grid-template-columns:1fr} .side{display:none} }

/* ── filter panel ───────────────────────── */
.panel{border:1px solid var(--line); border-radius:6px; background:var(--white); overflow:hidden}
.side{position:sticky; top:100px}
.ptop{display:flex; align-items:center; padding:11px 13px; border-bottom:1px solid var(--line); background:var(--bg)}
.ptop b{font-size:13px; font-weight:700}
.ptop button{margin-left:auto; font:inherit; font-size:11.5px; color:var(--brand); background:none; border:0; cursor:pointer; padding:2px 0}
.ptop button:hover{text-decoration:underline}
.grp{border-bottom:1px solid var(--line)}
.grp:last-child{border-bottom:0}
.grp > summary{cursor:pointer; list-style:none; padding:11px 13px; font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:8px}
.grp > summary::-webkit-details-marker{display:none}
.grp > summary::after{content:""; margin-left:auto; width:7px; height:7px; border-right:1.5px solid var(--faint); border-bottom:1.5px solid var(--faint); transform:rotate(45deg) translateY(-2px)}
.grp[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.grp .n{font-size:10.5px; color:var(--brand); border:1px solid var(--brand-line); border-radius:9px; padding:0 6px; font-weight:700}
.gbody{padding:0 13px 12px; display:flex; flex-direction:column; gap:1px}
.ck{display:flex; align-items:center; gap:9px; padding:6px 4px; border-radius:4px; cursor:pointer; font-size:12.5px}
.ck:hover{background:var(--bg)}
.ck input{appearance:none; width:15px; height:15px; flex:0 0 auto; border:1.5px solid var(--line); border-radius:3px; background:var(--white); cursor:pointer; position:relative}
.ck input:checked{background:var(--brand); border-color:var(--brand)}
.ck input:checked::after{content:""; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg)}
.ck input:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.ck .c{margin-left:auto; font-size:11px; color:var(--faint)}
.ck.zero{opacity:.45}

/* ── selected chips ─────────────────────── */
.sel{display:flex; align-items:center; gap:7px; flex-wrap:wrap; padding:12px 0 0}
.sel .lab{font-size:11.5px; color:var(--faint)}
.chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:3px 6px 3px 10px;
  border:1px solid var(--brand-line); background:var(--brand-soft); color:var(--brand);
  border-radius:14px; font-weight:600;
}
.chip button{font:inherit; background:none; border:0; cursor:pointer; color:inherit; font-size:14px; line-height:1; padding:0 2px; opacity:.7}
.chip button:hover{opacity:1}
.clearall{font:inherit; font-size:11.5px; background:none; border:0; color:var(--muted); cursor:pointer; text-decoration:underline}
.clearall:hover{color:var(--brand)}

/* ── result bar ─────────────────────────── */
.bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 0 11px; border-bottom:1px solid var(--line)}
.count{font-size:13px; color:var(--muted)}
.count b{color:var(--text); font-size:19px; font-weight:700}
.sorts{margin-left:auto; display:flex; gap:3px}
.sorts button{font:inherit; font-size:12px; cursor:pointer; padding:5px 11px; border-radius:15px; background:none; border:1px solid var(--line); color:var(--muted)}
.sorts button:hover{border-color:var(--faint); color:var(--text)}
.sorts button[aria-pressed="true"]{color:var(--white); background:var(--brand); border-color:var(--brand); font-weight:600}

/* ── rows ───────────────────────────────── */
.rhead{display:grid; grid-template-columns:1fr 292px 132px; gap:20px; padding:9px 4px 8px; font-size:10.5px; letter-spacing:.08em; color:var(--muted); font-weight:600}
.row{display:grid; grid-template-columns:1fr 292px 132px; gap:20px; align-items:center; padding:16px 4px; border-top:1px solid var(--line)}
.row:hover{background:var(--bg)}
.who{display:flex; gap:12px; align-items:flex-start; min-width:0}
.ico{flex:0 0 auto; width:46px; height:46px; border-radius:10px; border:1px solid var(--line); background:var(--bg); overflow:hidden}
/* ⚠️ 実物のアイコンは正方形とは限らない（公式サイトのfaviconは横長のことがある）。
   cover で枠に合わせる。頭文字のSVGは元から正方形なので影響しない。 */
.ico img,.ico svg{display:block; width:100%; height:100%; object-fit:cover}
.name{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.name b{font-size:15.5px; font-weight:700}
.name em{font-style:normal; font-size:11px; color:var(--faint)}
.meta{margin-top:4px; display:flex; gap:6px; flex-wrap:wrap; font-size:11px; color:var(--muted)}
.tg{border:1px solid var(--line); border-radius:3px; padding:1px 6px}
.tg.hot{color:var(--brand); border-color:var(--brand-line); background:var(--brand-soft)}
.score{display:flex; flex-direction:column; gap:7px}
.stop{display:flex; align-items:center; gap:9px}
.g{font-size:15px; font-weight:800; line-height:1; min-width:26px; text-align:center; padding:5px 6px; border-radius:5px; border:1.5px solid}
.g[data-r="S"],.g[data-r="A"]{color:var(--white); background:var(--brand); border-color:var(--brand)}
.g[data-r="B"]{color:var(--brand); border-color:var(--brand)}
.g[data-r="C"]{color:var(--orange); border-color:var(--orange)}
.g[data-r="D"]{color:var(--muted); border-color:var(--muted)}
.g[data-r="?"]{color:var(--muted); border-color:var(--line-2); border-style:dashed; font-size:10.5px; font-weight:700}
.sv{font-size:12px; color:var(--muted); white-space:nowrap}
.sv b{font-size:15px; color:var(--text); font-weight:700}
.pbar{flex:1; height:7px; border-radius:4px; background:var(--line); overflow:hidden; min-width:40px}
.pbar i{display:block; height:100%; background:var(--brand); border-radius:4px}
.axes6{display:grid; grid-template-columns:repeat(6,1fr); gap:3px}
.ax{display:flex; flex-direction:column; align-items:center; gap:1px; padding:4px 0 5px; border-radius:5px; border:1px solid var(--line); background:var(--white)}
.ax b{font-size:9.5px; font-weight:600; color:var(--muted); line-height:1.2}
.ax i{font-style:normal; font-size:14px; line-height:1.1; font-weight:700}
.ax[data-v="2"]{background:var(--brand-soft); border-color:var(--brand-line)}
.ax[data-v="2"] i,.ax[data-v="2"] b{color:var(--brand)}
.ax[data-v="1"]{border-color:var(--brand-line)}
.ax[data-v="1"] i{color:var(--brand)}
.ax[data-v="0"]{background:var(--bg)}
.ax[data-v="0"] i{color:var(--faint)}
.ax[data-v="-"]{border-style:dashed}
.ax[data-v="-"] i{color:var(--line-2); font-size:12px}
/* ⚠️ 2026-08-09: 凡例と表の説明文がグレーで読みにくいという指摘。本文色に寄せた */
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--text); padding:10px 4px 0}
.legend span{display:inline-flex; align-items:center; gap:5px}
.legend i{font-style:normal; font-weight:700}
.legend .v2,.legend .v1{color:var(--brand)} .legend .v0{color:var(--muted)} .legend .vn{color:var(--line-2)}
.fact b{display:block; font-size:13.5px; font-weight:700; margin-bottom:8px}
.go{display:block; text-align:center; font-size:12.5px; padding:8px 12px; border-radius:20px; border:1px solid var(--brand); color:var(--brand); font-weight:700; white-space:nowrap}
.go:hover{background:var(--brand); border-color:var(--brand); color:var(--white)}
@media (max-width:900px){
  .rhead{display:none}
  .row{grid-template-columns:1fr; gap:13px; padding:18px 2px}
  .score{padding:12px; border:1px solid var(--line); border-radius:8px}
  .axes6{gap:4px}
  .ax b{font-size:10px}
  .fact{display:flex; align-items:center; gap:12px}
  .fact b{margin-bottom:0; flex:1}
  .go{padding:11px 20px}
}
.empty{padding:44px 4px; color:var(--muted); font-size:13.5px}

/* ── 信頼性まわり ───────────────────────── */
.pr{display:flex; gap:10px; padding:11px 14px; margin:0 0 6px; border:1px solid var(--line); border-radius:6px; background:var(--bg); font-size:11.5px; color:var(--muted)}
.pr b{flex:0 0 auto; color:var(--text); font-size:10.5px; border:1px solid var(--line-2); border-radius:3px; padding:1px 6px; height:fit-content}
.pr a{color:var(--brand); text-decoration:underline}
.byline{display:flex; gap:18px; flex-wrap:wrap; padding:14px 0 0; margin-top:6px; border-top:1px solid var(--line); font-size:12px}
.byp{display:flex; gap:9px; align-items:center}
.byp .av{width:34px;height:34px;border-radius:50%;background:var(--bg);border:1px solid var(--line);flex:0 0 auto}
.byp .r{display:block; font-size:10px; color:var(--faint); letter-spacing:.06em}
.byp a{font-weight:700} .byp a:hover{color:var(--brand); text-decoration:underline}
.byp em{font-style:normal; display:block; font-size:10.5px; color:var(--muted)}
.dates{display:flex; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--faint); padding-top:10px}
.sitefoot{margin-top:52px; border-top:1px solid var(--line); background:var(--bg)}
.sf-in{max-width:1180px; margin:0 auto; padding:26px 20px 34px; display:flex; gap:34px; flex-wrap:wrap}
.sf-col{display:flex; flex-direction:column; gap:7px; font-size:12px}
.sf-col b{font-size:10.5px; letter-spacing:.1em; color:var(--faint); font-weight:700}
.sf-col a{color:var(--muted)} .sf-col a:hover{color:var(--brand); text-decoration:underline}
.sf-note{max-width:1180px; margin:0 auto; padding:0 20px 30px; font-size:11px; color:var(--faint); line-height:1.85}

/* ── mobile drawer ──────────────────────── */
.fab{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:40; padding:10px 16px 16px;
  background:linear-gradient(to top,var(--white) 70%,transparent);
}
.fab button{
  width:100%; font:inherit; font-size:14px; font-weight:700; cursor:pointer; padding:13px;
  border-radius:26px; border:0; background:var(--brand); color:var(--white);
  box-shadow:0 1px 3px rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center; gap:9px;
}
.fab .badge{background:#ffffff2e; border-radius:11px; padding:1px 8px; font-size:12px}
@media (max-width:899px){ .fab{display:block} }
.scrim{position:fixed; inset:0; background:#0b0a1066; z-index:45; opacity:0; pointer-events:none; transition:opacity .2s}
.drawer{
  position:fixed; left:0; right:0; bottom:0; top:8vh; z-index:50; background:var(--white);
  border-radius:14px 14px 0 0; display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .24s cubic-bezier(.32,.72,0,1);
}
body.open .scrim{opacity:1; pointer-events:auto}
body.open .drawer{transform:translateY(0)}
.dhead{display:flex; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line)}
.dhead b{font-size:15px; font-weight:700}
.dhead button{margin-left:auto; font:inherit; font-size:22px; line-height:1; background:none; border:0; color:var(--muted); cursor:pointer; padding:0 4px}
.dbody{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch}
.dfoot{display:flex; gap:10px; padding:12px 16px 20px; border-top:1px solid var(--line); background:var(--white)}
.dfoot .clr{flex:0 0 auto; font:inherit; font-size:13.5px; padding:13px 18px; border-radius:24px; border:1px solid var(--line); background:none; color:var(--muted); cursor:pointer}
.dfoot .apply{flex:1; font:inherit; font-size:14.5px; font-weight:700; padding:13px; border-radius:24px; border:0; background:var(--brand); color:var(--white); cursor:pointer}
@media (min-width:900px){ .scrim,.drawer{display:none} }

.crit{margin-top:44px; border:1px solid var(--line); border-radius:6px; background:var(--white)}
.crit > summary{cursor:pointer; padding:15px 18px; font-size:14px; font-weight:700; list-style:none; display:flex; gap:10px}
.crit > summary::-webkit-details-marker{display:none}
.crit > summary::after{content:"＋"; margin-left:auto; color:var(--faint)}
.crit[open] > summary::after{content:"−"}
.critbody{padding:0 18px 18px; border-top:1px solid var(--line)}
.critbody p{color:var(--text); font-size:13px; max-width:66ch}
/* ⚠️ 2026-08-09: 記事本文の p は黒。グレーは補足だけに使う。
   （グラフ・表の直前の説明文がグレーで読みにくいという指摘への対応） */
.wrap > h2 + p, .wrap > p{color:var(--text)}

/* ⚠️ 2026-08-09: 表が読みにくいという指摘を受けて調整。
   ①縦罫線を入れて列の境目を出す ②本文をグレーにしない（--text）
   ③ヘッダに背景を敷いて行との区別をつける ④1行おきに薄い地色 */
.axes{width:100%; border-collapse:collapse; font-size:13px; border:1px solid var(--line)}
.axes th,.axes td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line);
  border-right:1px solid var(--line); vertical-align:top; color:var(--text)}
.axes th:last-child,.axes td:last-child{border-right:0}
.axes thead th{font-size:11px; letter-spacing:.06em; color:var(--muted); font-weight:700;
  background:var(--bg); border-bottom:2px solid var(--brand-line); white-space:nowrap}
.axes tbody tr:nth-child(even){background:var(--bg)}
.axes tbody tr:last-child td{border-bottom:0}
.axes td:nth-child(2){font-weight:600}
/* 判定の記号を並べた表（軸の内訳）だけは1列目を細く */
.axes td.mono{white-space:nowrap; color:var(--text)}
.axes blockquote{color:var(--text) !important}
.note{margin-top:15px; padding:13px 15px; border-left:3px solid var(--line); background:var(--bg); font-size:12.5px; color:var(--muted); border-radius:0 4px 4px 0}
.note b{color:var(--text)}
.foot{margin-top:36px; padding-top:16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--faint); display:flex; gap:16px; flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ── トップページ用 ───────────────────────── */
.hero{padding:34px 0 30px; border-bottom:1px solid var(--line)}

.hero p{margin:0; max-width:62ch; color:var(--muted); font-size:13.5px}

.hero p strong{color:var(--text); font-weight:600}

.stat{margin-top:18px; display:flex; gap:26px; flex-wrap:wrap}

.stat div{display:flex; flex-direction:column}

.stat b{font-size:21px; font-weight:700; line-height:1.2}

.stat span{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}

/* ── section ─────────────────────────────────────────── */

section{padding:32px 0 4px}

.shead{display:flex; align-items:baseline; gap:12px; margin-bottom:14px; flex-wrap:wrap}

h2{margin:0; font-size:16px; font-weight:700; letter-spacing:.01em}

.shead p{margin:0; font-size:12px; color:var(--faint)}

.shead a{margin-left:auto; font-size:12px; color:var(--muted)}

.shead a:hover{color:var(--brand)}

.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:9px}

.tile{
  display:flex; flex-direction:column; justify-content:space-between; gap:8px;
  min-height:82px; padding:13px 14px; border:1px solid var(--line); border-radius:8px;
  background:var(--white); box-shadow:0 1px 3px rgba(0,0,0,.06);
  transition:border-color .13s, box-shadow .13s, transform .13s;
}

.tile:hover{border-color:var(--brand-line); box-shadow:0 2px 8px rgba(108,14,175,.10); transform:translateY(-1px)}

.tile .t{font-size:13.5px; font-weight:650; line-height:1.4; letter-spacing:.01em}

.tile .b{display:flex; align-items:baseline; justify-content:space-between; gap:8px}

.tile .v{font-size:11.5px; color:var(--muted)}

.tile .v i{font-style:normal; color:var(--faint); font-size:10px}

.tile .arrow{color:var(--faint); font-size:11px}

.tile:hover .arrow{color:var(--brand)}

.tile.lead{background:var(--brand-soft); border-color:var(--brand-line)}

.tile.lead .t{color:var(--brand)}

.chip{
  font-size:10.5px; padding:1px 6px; border-radius:2px; border:1px solid var(--line);
  color:var(--faint); letter-spacing:.04em;
}

.chip[data-r="B"]{color:var(--muted); border-color:var(--muted)}

.chip[data-r="C"]{color:var(--muted); border-color:var(--muted)}

.chip.new{color:var(--brand); border-color:var(--brand-line); background:var(--brand-soft); font-weight:700}

.strip{
  margin-top:34px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 16px; border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:6px;
  background:var(--white);
}

.strip .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:0 0 auto}

.strip b{font-size:13.5px; font-weight:650}

.strip span{font-size:12.5px; color:var(--muted)}

.strip a{margin-left:auto; font-size:12px; font-weight:600; color:var(--text); border:1px solid var(--line); border-radius:16px; padding:6px 14px}

.strip a:hover{background:var(--brand); border-color:var(--brand); color:var(--white)}

.note{
  margin-top:34px; padding:15px 17px; border:1px solid var(--line); border-radius:6px;
  background:var(--white); font-size:12.5px; color:var(--muted); max-width:74ch;
}

.note b{color:var(--text)}

/* ── 記事本文のデザイン（2026-08-09 追加） ─────────────
   aizeal-job.com/column/ の実装をブラウザで実測して移植した。
   実測値: h2 = 背景 oklch(0.97 .01 264) + 左4pxバー + padding 12/16 + 角丸 0 4 4 0
           マーカー = #FFEFB3 / padding 1.6px 4px
           囲み枠 = 薄い地色 + 左4pxバー + 角丸10px + padding 16/20
   ⚠️ 色はあちらの青ではなく、当サイトの紫（--brand）に置き換える。
   ⚠️ 赤文字は使わない（指摘による）。 */

/* 見出し */
.wrap > h2{
  font-size:22px; font-weight:700; color:var(--text);
  background:var(--brand-soft); border-left:4px solid var(--brand);
  padding:12px 16px; border-radius:0 4px 4px 0; margin:40px 0 14px;
}
.wrap > h3{
  font-size:17px; font-weight:700; color:var(--text);
  margin:28px 0 10px; padding-left:12px; border-left:3px solid var(--brand-line);
}
@media (max-width:640px){ .wrap > h2{font-size:19px; padding:10px 13px} }

/* 本文 */
.wrap > p{font-size:15px; line-height:1.9; margin:0 0 16px}
.wrap > p strong{font-weight:700}

/* 黄色マーカー。⚠️ 太字と併用すると強すぎるので、マーカー側は太字にしない */
.mk{background:linear-gradient(transparent 62%, #FFEFB3 62%); padding:1.6px 2px; font-weight:600}

/* 囲み枠。ポイントを1つだけ立てるときに使う */
.box{
  background:var(--brand-soft); border-left:4px solid var(--brand);
  border-radius:0 10px 10px 0; padding:16px 20px; margin:22px 0;
}
.box > b{display:block; font-size:14px; margin-bottom:6px; color:var(--brand-dark)}
.box p{margin:0 0 8px; font-size:14.5px; line-height:1.85}
.box p:last-child{margin-bottom:0}

/* チェックつきリスト */
ul.chk{list-style:none; padding-left:0; margin:14px 0}
ul.chk li{position:relative; padding-left:26px; margin:8px 0; font-size:14.5px; line-height:1.85}
ul.chk li::before{
  content:""; position:absolute; left:4px; top:.55em; width:6px; height:11px;
  border:solid var(--brand); border-width:0 2.5px 2.5px 0; transform:rotate(42deg);
}

/* 目次。⚠️ .crit（判定基準の折りたたみ）とは別物として持つ */
.toc{
  margin:26px 0 30px; padding:22px 26px;
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
}
.toc > b{display:block; font-size:15px; font-weight:700; margin-bottom:14px; color:var(--text)}
.toc ol{margin:0; padding-left:1.5em; counter-reset:none}
.toc li{margin:11px 0; font-size:14.5px; line-height:1.7}
.toc li::marker{color:var(--brand); font-weight:700}
.toc a{color:var(--text); text-decoration:none; border-bottom:1px solid transparent}
.toc a:hover{color:var(--brand); border-bottom-color:var(--brand-line)}
@media (max-width:640px){ .toc{padding:18px 20px} .toc li{margin:10px 0} }

/* ── 本文中のリンク（2026-08-09 追加） ─────────────────
   ⚠️ サイト全体では a{color:inherit} でリンク色を消しているが、
   記事本文の中ではリンクだと分かる必要がある。本文の中だけ色と下線を戻す。
   ⚠️ 青ではなくブランド色（紫）。赤は使わない。 */
.wrap > p a, .wrap ul.lede a, .wrap ul.chk a, .wrap ol.lede a,
.box a, .axes td a, .lede a{
  color:var(--brand); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:var(--brand-line);
}
.wrap > p a:hover, .wrap ul.lede a:hover, .wrap ul.chk a:hover, .wrap ol.lede a:hover,
.box a:hover, .axes td a:hover, .lede a:hover{
  color:var(--brand-dark); text-decoration-color:var(--brand);
}
/* 外部リンク（一次情報のURL）には印をつける。⚠️ 別タブで開く前提 */
a.ext::after{content:"↗"; font-size:.85em; margin-left:2px; opacity:.7}