/* 建設業版の記事（/guide と記事8本。2026-10-29）。色・字・ボタンは style.css（LP）のまま、記事の部分だけここに足す。スマホ（375px）が先 */
.art{max-width:800px}
.art-sec{padding:24px 0 48px}
.crumbs{font-size:13px; color:var(--ink-2); margin:0 0 16px; line-height:1.7}
.crumbs a{color:var(--ink-2)}
.art h1{font-size:24px; line-height:1.5; font-weight:900; margin:0 0 12px}
.byline{font-size:13px; color:var(--ink-2); margin:0 0 28px}
.art h2{font-size:20px; line-height:1.5; font-weight:700; margin:44px 0 16px; padding:20px 0 0; border-top:2px solid var(--sky-200)}
.art h3{font-size:18px; line-height:1.5; margin:28px 0 12px}
.art p{margin:0 0 18px}
.art ul{margin:0 0 20px; padding-left:1.3em}
.art li{margin:0 0 6px}
.art a{overflow-wrap:anywhere}
.tbl{overflow-x:auto; margin:0 0 22px; -webkit-overflow-scrolling:touch}
.tbl table{border-collapse:collapse; min-width:100%; background:#fff; font-size:14px; line-height:1.65}
.tbl th,.tbl td{border:1px solid var(--rule); padding:8px 10px; text-align:left; vertical-align:top}
.tbl thead th{background:var(--sky-100); font-weight:700; white-space:nowrap}
.tbl td{min-width:5.5em}
.art .cta-row{margin:8px 0 28px}
.sources li{font-size:13px; line-height:1.8; color:var(--ink-2)}
.sources a{color:var(--ink-2)}
.more{background:#fff; border-radius:var(--radius); padding:18px 20px; margin:40px 0 0}
.more p{margin:0 0 8px; font-size:14px; font-weight:700}
.more ul{margin:0; padding-left:1.2em}
.more li{margin:0 0 4px}
.lead{margin:0 0 28px}
.art .cards{list-style:none; margin:0 0 32px; padding:0; display:grid; gap:14px}
.card{background:#fff; border-radius:var(--radius); padding:18px 18px 16px; box-shadow:0 2px 0 var(--rule)}
.card a{font-size:17px; font-weight:700; line-height:1.55}
.card p{margin:8px 0 0; font-size:13px; line-height:1.8; color:var(--ink-2)}
/* ひな形のダウンロード */
.dl{display:flex; flex-direction:column; gap:12px; margin:0 0 24px}
.btn-dl{background:var(--sky-700); color:#fff; width:100%}
.btn-dl:hover{background:var(--sky-800)}
.btn-dl::before{content:""; width:18px; height:18px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center/contain no-repeat}
/* 出来高の計算機 */
.calc{background:#fff; border:2px solid var(--sky-200); border-radius:var(--radius); padding:18px 14px; margin:8px 0 24px}
.art .calc h3{margin:0 0 14px}
.calc-grid{display:grid; gap:12px; margin:0 0 16px}
.calc label{display:flex; flex-direction:column; gap:4px; font-size:14px; font-weight:700}
.calc input,.calc select{font:inherit; font-size:16px; font-weight:400; min-height:44px; padding:8px 10px; width:100%;
  border:1px solid var(--sky-300); border-radius:8px; background:#fff; color:var(--ink)}
.calc input[readonly]{background:var(--sky-50)}
.calc small{font-size:12px; font-weight:400; color:var(--ink-2)}
.calc .tbl td{padding:4px; min-width:7em}
.calc .tbl td input{min-height:40px; padding:6px 8px}
.calc-rows td:first-child{min-width:9em}
.btn-sm{min-height:40px; padding:6px 18px; font-size:14px; margin:0 0 18px}
#dc-out td,#dc-out th{white-space:nowrap; text-align:right}
#dc-out td:first-child,#dc-out th:first-child{text-align:left; white-space:normal}
.calc-out{margin:0; padding:0}
.calc-out div{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--rule)}
.calc-out div[hidden]{display:none}
.calc-out dt{font-size:14px}
.calc-out dd{margin:0; font-weight:700; text-align:right; white-space:nowrap}
.calc-out .calc-total dd{font-size:20px; color:var(--sky-800)}
.art .calc-warn{color:#C62828; font-weight:700; font-size:14px; margin:12px 0 0}
.art .calc-warn:empty{display:none}
@media (min-width:600px){ .calc-grid{grid-template-columns:1fr 1fr} .calc{padding:22px 24px} .dl{flex-direction:row; flex-wrap:wrap} .btn-dl{width:auto} }
@media (min-width:768px){
  .art h1{font-size:32px}
  .art h2{font-size:24px}
  .art h3{font-size:20px}
  .tbl table{font-size:15px}
  .card a{font-size:18px}
  .card p{font-size:14px}
  .art .btns{flex-direction:row}
  .art .btns .btn{width:auto; min-width:240px}
}