/* まなクエ共通の部品: 問題文の資料(表・図)の見た目。assets/js/mq-shiryo.js が作るHTML用(FP3の出題画面・用語記事) */
/* [図表CFT-…]形式の問題文を、実際の表として組み立て直したもの(questionHtml()が生成) */
.cft{margin:6px 0 10px}
.cft__fam{font-size:12.5px;color:var(--mq-muted);margin:0 0 6px;line-height:1.6}
.cft__t{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
.cft__t th,.cft__t td{border:1px solid var(--mq-line);padding:5px 4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cft__t thead th{background:var(--mq-soft);font-weight:800;color:var(--mq-muted);font-size:11px}
.cft__t tbody th{text-align:left;font-weight:700;background:var(--mq-soft);font-size:11.5px;padding-left:6px}
.cft__t td.q{border:2px solid var(--mq-brand);color:var(--mq-brand);font-weight:800}
.kv__t{width:100%;border-collapse:collapse;font-size:13px}
.kv__t th,.kv__t td{border:1px solid var(--mq-line);padding:6px 8px;text-align:left}
.kv__t th{width:42%;background:var(--mq-soft);font-weight:700;color:var(--mq-ink)}
.kv__t td.q{border:2px solid var(--mq-brand);color:var(--mq-brand);font-weight:800}
@media (min-width:821px){.kv__t{font-size:14.5px}}
@media (min-width:821px){.cft__t{font-size:14px}.cft__fam{font-size:13.5px}}
/* 実技の資料: 図(SVG)と複数列の表。横に長い表はスマホで横にスクロール */
.qfig{margin:6px 0 10px}.qfig img{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;border:1px solid var(--mq-line);background:#fff}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.cft__t--multi{table-layout:auto;min-width:100%}.cft__t--multi td,.cft__t--multi th{white-space:nowrap}
/* 記事の中の「本番の形で解いてみる」(assets/js/mq-kata-article.js)。黒の細線・答え合わせだけ緑(コア J-11) */
.kq{border:1px solid var(--mq-ink);padding:12px 14px 6px;margin:14px 0}
.kq__lab{font-size:12px!important;font-weight:800;color:var(--mq-muted);margin:0 0 6px!important}
.kq .mq-question{font-size:15px;font-weight:700;line-height:1.7;margin:6px 0}
.kq .mq-note{font-size:13px;color:var(--mq-muted)}
.kq__hint{font-size:13px!important;color:var(--mq-muted);margin:4px 0!important}
.kq__ch{margin:6px 0 8px;padding-left:1.6em}
.kq__ch li{font-size:14.5px;line-height:1.7;margin:2px 0}
.kq__a{margin:8px 0;border-top:1px solid var(--mq-line);padding-top:8px}
.kq__a summary{cursor:pointer;font-weight:800;font-size:14px}
.kq__a p{font-size:14px!important;line-height:1.8}
.kq__ok{color:var(--mq-ok);font-weight:800;margin-top:6px!important}
.kq__more{font-size:12.5px!important;color:var(--mq-muted);display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between}
.kq__next{appearance:none;border:1px solid var(--mq-ink);background:var(--mq-paper,#fff);color:var(--mq-ink);font:inherit;font-weight:800;font-size:13px;padding:6px 12px;cursor:pointer}
.src{font-size:12px!important;color:var(--mq-muted);line-height:1.8}
/* 用語記事(2版): 時系列・手順の流れ(図の代わり)と「FP3級での出方」の表。黒の細線だけ(コア J-11) */
.flow{list-style:none;counter-reset:fl;margin:6px 0 4px;padding:0}
.flow li{position:relative;counter-increment:fl;padding:0 0 12px 34px;border-left:1px solid var(--mq-ink);margin-left:11px;font-size:14px;line-height:1.75}
.flow li:last-child{border-left-color:transparent}
.flow li::before{content:counter(fl);position:absolute;left:-12px;top:0;width:22px;height:22px;line-height:22px;text-align:center;font-size:12px;font-weight:800;background:var(--mq-paper,#fff);border:1px solid var(--mq-ink)}
.flow li strong{display:block;font-size:13.5px}
.dbox table td:first-child{white-space:nowrap}
.asked{list-style:none;margin:8px 0 6px;padding:0;border-top:1px solid var(--mq-line)}
.asked li{padding:8px 0;border-bottom:1px solid var(--mq-line);font-size:14px;line-height:1.7}
.asked__when{display:block;font-size:12px;font-weight:700;color:var(--mq-muted)}
.mis__i{border-top:1px solid var(--mq-line);padding:10px 0 4px}
.mis__i:first-child{border-top:1px solid var(--mq-ink)}
.mis__i p{margin:0 0 6px!important;font-size:14px!important;line-height:1.75}
.mis__i p span{display:inline-block;min-width:5.5em;margin-right:6px;font-size:12px;font-weight:800;color:var(--mq-muted)}
.mis__w{font-weight:800}
.mis__w span{color:var(--mq-ng)!important}