/* 課題の種（/issues/…）の組版。共通の部品（見出し・節・登場の図・語られたところ・右段）は
   /shared/libpage.css、案のカードは /shared/idea.css（紙面と同じ）。ここは課題の種だけの欄。
   形はモックの「モノを動かす仕事の課題の種」。 */

.tp .shelfpill.sp-issue{background:#F6EED9;color:#8A6D3B}
.tp .defn{font-size:12.5px;line-height:1.85;color:var(--muted);max-width:72ch;margin-top:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.tp .defn b{color:var(--ink)}

/* 業界ごとの最近の挑戦案。案のカードは紙面と同じ（.idea） */
.tp .igroups{display:grid;gap:14px}
.tp .igroup h3{font-family:var(--serif);font-size:16px;color:var(--teal);display:flex;align-items:baseline;gap:10px;margin:0 0 6px}
.tp .igroup h3 a{color:var(--teal);text-decoration:none}
.tp .igroup h3 .ct{font-family:inherit;font-size:12px;color:var(--muted);font-weight:600}
.tp .idea{border-color:#E6DCC6;max-width:76ch}
.tp .idea h5{font-family:var(--serif);font-size:15px}
.tp .chip.ind{background:#F6EED9;border-color:#E6DCC6;color:#8A6D3B;font-weight:700}
.tp .idea .cite{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.7}
.tp .idea .cite a{color:var(--teal-mid);overflow-wrap:anywhere}
.tp .idea .cite a.toread{font-weight:700;margin-left:6px;white-space:nowrap}


/* 横棒：業界ごとの案の数・このページと全体の割合 */
.tp .hbars,.tp .cmpbars{display:grid;gap:6px}
.tp .hbar,.tp .cmp{display:grid;grid-template-columns:9em minmax(0,1fr) 4em;gap:10px;align-items:center;font-size:12.5px}
.tp .cmp{grid-template-columns:9em minmax(0,1fr) 7.5em}
.tp .hbar .nm,.tp .cmp .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp .hbar .nm a{color:var(--teal-mid);text-decoration:none}
.tp .bb{display:grid;gap:2px}
.tp .bb i{display:block;height:9px;border-radius:0 3px 3px 0;background:#C0962F;min-width:1px}
.tp .cmp .bb i{height:7px;background:#9DB8BF}
.tp .cmp .bb i.me,.tp .cmpkey i.me{background:#C0962F}
.tp .hbar .v,.tp .cmp .v{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.tp .cmp .v small{font-size:11px}
/* 全体との差が大きい型（課題の型） */
.tp .cmp.hl .nm,.tp .cmp.hl .v{font-weight:700;color:var(--ink)}
.tp .cmpbars{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.tp .cmpkey{display:flex;gap:4px 16px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-bottom:4px}
.tp .cmpkey i{display:inline-block;width:12px;height:7px;border-radius:2px;background:#9DB8BF;margin-right:5px}
@media (max-width:480px){
  .tp .hbar{grid-template-columns:6.5em minmax(0,1fr) 3em}
  .tp .cmp{grid-template-columns:6.5em minmax(0,1fr) 6.5em}
}

/* 一覧（/issues/） */
.tp .lead2{color:var(--muted);font-size:12.5px;margin:0 0 8px}
.tp .tcard h2{font-family:var(--serif);font-size:16px;margin-bottom:4px}
.tp .tcard .inc{font-size:12.5px}
.tp .tcard .ct{font-size:11.5px;color:var(--muted);margin-top:2px}
.tp ul.indl{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px}
.tp ul.indl small{color:var(--muted);margin-left:4px}

/* 業界・くくりのページ */
.tp .chip.gov{background:#E7EEF0;border-color:#C9D9DE;color:var(--teal);font-weight:700}
.tp .eyebrow .chip.sect{font-size:11.5px;padding:1px 8px;border:1px solid #E6DCC6;border-radius:999px;background:#FBF7EE}
.tp .eyebrow .chip.sect a{color:#8A6D3B;text-decoration:none}
.tp .igroup h3 small{font-family:var(--sans,inherit);font-size:11.5px;color:var(--muted);font-weight:400}
.tp .inds{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;font-size:13px;margin:10px 0 4px;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.tp .inds .lab{font-size:11.5px;color:var(--muted);font-weight:700}
.tp .inds small{color:var(--muted);margin-left:4px}
.tp .sparse{font-size:13px;line-height:1.8;color:var(--ink);background:#FBF7EE;border:1px solid #E6DCC6;border-radius:8px;padding:8px 12px;margin:14px 0 0;max-width:76ch}
.tp .tcard h3{font-family:var(--serif);font-size:15px;margin-bottom:4px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.tp .tcard h3 a.sect{font-family:inherit;font-size:12px;font-weight:700;color:var(--teal-mid);text-decoration:none}
.tp .tcard ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;padding:0;margin:0}
.tp .tcard ul small{color:var(--muted);margin-left:4px}
/* くくりの「含む」は業界の名前を並べるので長い。見出しの添え字を折り返す */
.tp.issues h1 small{white-space:normal;overflow-wrap:anywhere}

/* 種類のある札（業界｜・業務の場｜・行政の仕事｜）。角を立てて、誰に向くか・動き方・切り口の丸い札と分ける。押せる */
.tp .chip.kd{border-radius:4px;text-decoration:none;font-weight:600}
.tp .chip.kd i{font-style:normal;font-weight:400;opacity:.75}
.tp .chip.kd.ind{background:#F6EED9;border-color:#E6DCC6;color:#8A6D3B}
.tp .chip.kd.biz{background:#EEF3EC;border-color:#D3DECF;color:#4D6B45}
.tp .chip.kd.gov{background:#E7EEF0;border-color:#C9D9DE;color:var(--teal)}
.tp a.chip.kd:hover{text-decoration:underline}
.tp .legend{font-size:12px;line-height:2;color:var(--muted);max-width:76ch;margin-top:6px}
.tp .legend .chip{font-size:11px;padding:0 6px;margin:0 2px}
.tp .allgo{display:inline-block;font-size:12.5px;font-weight:700;color:var(--teal-mid);text-decoration:none;margin:2px 0 4px}

/* 目録（/issues/all/） */
.tp .cfilter{display:flex;flex-wrap:wrap;gap:8px 14px;margin:14px 0 6px;padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:10px}
.tp .cfilter .cf{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--muted);font-weight:700}
.tp .cfilter select{font:inherit;font-size:13px;font-weight:400;color:var(--ink);padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:#fff;max-width:15em}
.tp .conds{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12.5px;margin:6px 0 4px}
.tp .conds .cond{background:var(--teal-soft);border-radius:999px;padding:2px 10px}
.tp .conds .cond a{margin-left:6px;color:var(--teal);text-decoration:none;font-weight:700}
.tp .conds .clr{color:var(--teal-mid);font-weight:700}
.tp .clist{border-top:1px solid var(--line)}
.tp .crow{display:grid;grid-template-columns:7.5em 1fr;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--line)}
.tp .crow .d{font-size:12px;color:var(--muted)}
.tp .crow .ct1{font-family:var(--serif);font-size:15px;font-weight:700;line-height:1.6}
.tp .crow .ct1 a{color:var(--ink);text-decoration:none}
.tp .crow .ct1 a:hover{text-decoration:underline}
.tp .crow .fold{font-family:var(--sans,inherit);font-size:11px;font-weight:400;color:var(--muted);margin-left:8px}
.tp .crow .cwhy{font-size:13px;line-height:1.8;margin:2px 0 6px;max-width:72ch}
.tp .crow .chips{margin-bottom:0}
.tp .chip.kd.work{background:#F3EEF6;border-color:#DDD2E5;color:#5E4A6E}
.tp .chip.kd.on{outline:2px solid currentColor;outline-offset:-1px}
.tp .cmore{text-align:center;margin:14px 0}
.tp .catmore{font:inherit;font-size:13px;font-weight:700;color:var(--teal);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 18px;cursor:pointer}
.tp .allcat{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;color:var(--teal-mid)}
@media (max-width:560px){.tp .crow{grid-template-columns:1fr}}