/* 商品詳細「この型番の工事実績」（/include/pd_track.php）2026-10-24
   色は商品詳細の共通アクセント（--d-acc）だけを使う。左だけ太い線は使わない。 */
.pd-trk { margin: 0 0 40px; }
.pd-trk__lead { margin: 0 0 14px; font-size: 14px; line-height: 1.8; color: #333; }

/* 数字の帯：高さをそろえて横並び。SPは1列 */
.pd-trk__kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0 0 12px; padding: 0; list-style: none; }
.pd-trk__kpi li { display: grid; grid-template-rows: auto 1fr; align-items: center; text-align: center; padding: 14px 10px 12px; border: 1px solid #dfe6dc; border-radius: 8px; background: #fbfdfa; }
.pd-trk__kpi .k { font-size: 13px; font-weight: 700; color: #444; }
.pd-trk__kpi b { display: block; margin: 6px 0 4px; font-size: 28px; line-height: 1.2; color: var(--d-acc, #209512); white-space: nowrap; }
.pd-trk__kpi b.is-s { font-size: 22px; }
.pd-trk__kpi b small { margin-left: 2px; font-size: 14px; font-weight: 700; color: #333; }
.pd-trk__kpi .d { font-size: 12px; color: #666; }

.pd-trk__note { margin: 0 0 18px; padding: 10px 12px; font-size: 13.5px; line-height: 1.8; background: #f6f8f5; border-radius: 6px; }
.pd-trk__note b { white-space: nowrap; }

.pd-trk__h3 { margin: 18px 0 6px; font-size: 16px; font-weight: 700; color: #222; }
.pd-trk__sub { margin: 0 0 8px; font-size: 13px; line-height: 1.7; color: #555; }

/* 追加工事の表：数字は右寄せ・折り返さない。はみ出さないよう列幅を決める */
.pd-trk__tbl { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.pd-trk__tbl col.c-n { width: 72px; }
.pd-trk__tbl col.c-bar { width: 38%; }
.pd-trk__tbl th, .pd-trk__tbl td { padding: 8px 8px; border-bottom: 1px solid #e6e6e6; vertical-align: middle; }
.pd-trk__tbl thead th { font-size: 12.5px; font-weight: 700; color: #555; background: #f4f6f3; text-align: left; }
.pd-trk__tbl tbody th { text-align: left; font-weight: 400; word-break: break-word; }
.pd-trk__tbl td.n { text-align: right; white-space: nowrap; }
.pd-trk__tbl td.bar { white-space: nowrap; }
.pd-trk__bar { display: inline-block; width: calc(100% - 44px); height: 10px; vertical-align: middle; background: #eef1ec; border-radius: 5px; overflow: hidden; }
.pd-trk__bar i { display: block; height: 100%; background: var(--d-acc, #209512); border-radius: 5px; }
.pd-trk__tbl td.bar em { display: inline-block; width: 40px; text-align: right; font-style: normal; font-size: 13px; vertical-align: middle; }

/* お住まいの形態・地域：2つ並べるときは同じ高さ */
.pd-trk__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; margin: 6px 0 10px; }
.pd-trk__cols.is-one { grid-template-columns: 1fr; }
.pd-trk__col { padding: 2px 0 0; }
.pd-trk__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #e6e6e6; }
.pd-trk__list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #e6e6e6; font-size: 14px; }
.pd-trk__list b { white-space: nowrap; font-weight: 700; }

@media (max-width: 767px) {
	.pd-trk__kpi { grid-template-columns: 1fr; }
	.pd-trk__kpi b { font-size: 26px; }
	.pd-trk__cols { grid-template-columns: 1fr; }
	.pd-trk__tbl { font-size: 13px; }
	.pd-trk__tbl col.c-bar { width: 42%; }
	.pd-trk__tbl col.c-n { width: 60px; }
}

/* 兄弟型番との違い（#diff）。型番の列は折り返さず、違いの列は等幅で折り返す */
.pd-trk__sib col.c-m { width: 30%; }
.pd-trk__sib tbody th { white-space: normal; word-break: break-all; font-weight: 700; }
.pd-trk__sib tbody th a { color: inherit; text-decoration: underline; }
.pd-trk__sib td { font-size: 13px; line-height: 1.6; word-break: break-word; }
.pd-trk__lead b { white-space: nowrap; }
@media (max-width: 767px) { .pd-trk__sib col.c-m { width: 34%; } .pd-trk__sib td { font-size: 12px; } }