/* 自動車整備工場くらべ 追加スタイル(regional-ds 1.0.0 の上に重ねる。ジャンル定義 design.css_file)
   世界観: 整備工場の計器と工具。鋼の濃紺の面に、トルクゲージの目盛り(細い縦線)と、注意色の橙の斜めの帯。数値は等幅。
   共通 CSS の緑系の色は build.mjs が design.recolor で鋼の青へ付け替える。 */
.brandname{font-weight:800;letter-spacing:.02em}
/* 地域トップの帯: 下端に目盛りの線と橙の斜めの帯(整備の計器・安全標識) */
.regionTop{position:relative;background:linear-gradient(180deg,#dde6f0 0%,var(--base) 100%)}
.regionTop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(135deg,#e8833a 0 14px,#1d3557 14px 28px);opacity:.9}
.regionTop::before{content:"";position:absolute;left:0;right:0;bottom:10px;height:12px;background:repeating-linear-gradient(90deg,rgba(29,53,87,.38) 0 1px,transparent 1px 12px);-webkit-mask:linear-gradient(180deg,transparent,#000);mask:linear-gradient(180deg,transparent,#000)}
.eyebrow::before{background:#e8833a;box-shadow:0 0 0 5px #ffd9a8}
.tag.on{background:#ffe3c2;color:#4a2300;border-color:#f0b878}
.chip.active,.chip[aria-pressed=true]{background:#ffd9a8;border-color:#e8a45c;color:#3a1d00}
.resultCard,.card,.findBox,.pDataCard,.filterSide .body{border-radius:12px}
.resultMeta{font-variant-numeric:tabular-nums}
/* 詳細: カードの上辺に橙の短い印、項目名は鋼の青の面 */
.card{position:relative}
.card>h2{position:relative;padding-top:12px}
.card>h2::before{content:"";position:absolute;left:0;top:0;width:34px;height:4px;border-radius:2px;background:#e8833a}
.dl dt{background:#e9eff6;color:#1d3557}
.dl dd{font-variant-numeric:tabular-nums}
/* 値のない項目をまとめた札 */
.emptyCard{background:#f7f9fb}
.emptyList{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;padding:0}
.emptyList span{display:inline-block;padding:6px 12px;border-radius:999px;border:1px dashed #9aabbd;color:#3f5a78;font-size:13px;font-weight:700;background:#fff}
/* 条件の取り消し(×)は 44px 以上 */
.chip.pill{padding:0 0 0 14px}
.chip.pill button{min-width:44px;min-height:44px}
/* 全国版のヒーロー: 見出しの行を揃える(1 行目が折り返さない) */
.pTitle{max-width:11em}
.pTitle em{color:#ffc58a}
/* 全国版の地図タイル: 県内の事業所のうち「板金・塗装」の分類の割合(鋼の淡色 → 橙の段階) */
.portal{--a0:#c9d6e6;--a1:#cdd9e6;--a2:#dfe6ee;--a3:#d2dbe7;--a4:#c4d2e3;--a5:#d8e0ea}
.pTile.tb0,.pLegend i.tb0{background:#dce6f1;color:#12263f}
.pTile.tb1,.pLegend i.tb1{background:#ffc58a;color:#3a1d00}
.pTile.tb2,.pLegend i.tb2{background:#e8833a;color:#1b1000}
.pLegend i.tb0,.pLegend i.tb1,.pLegend i.tb2{border:1px solid rgba(255,255,255,.55)}
a.pTile.tb2:hover,a.pTile.tb2.sel,a.pTile.tb1:hover,a.pTile.tb1.sel,a.pTile.tb0:hover,a.pTile.tb0.sel{color:#12263f;outline:2px solid #fff}
.pLegend.bands{grid-template-columns:1fr;gap:5px}
.pMapBandNote{margin:9px 0 0;font-size:13px;line-height:1.6;color:#d3deec;max-width:23em}
/* スマホ: 固定の比較トレイが本文の末尾に重ならないよう、本文の下に余白をとる(トレイは約 76px) */
@media (max-width:700px){
  main,#main{padding-bottom:96px}
  .regionTop::after{height:8px}
}
/* 地域トップの帯: 分類のワンタップ検索(鋼の面+橙の縁) */
.quickTimes{margin-top:22px;max-width:760px}
.qtTitle{margin:0 0 8px;font-size:13px;font-weight:800;color:var(--deep)}
.quickTimes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.quickTime{display:grid;grid-template-columns:1fr auto;column-gap:8px;align-items:baseline;min-height:64px;padding:9px 12px 9px 14px;border-radius:10px;background:#fff;border:1px solid var(--line);border-left:7px solid #e8833a;color:var(--ink);text-decoration:none}
.quickTimes li:nth-child(odd) .quickTime{border-left-color:#1d3557}
.qtLabel{font-size:15px;font-weight:800;color:var(--deep)}
.qtNote{font-size:12px;font-weight:700;color:var(--muted);text-align:right}
.qtCount{grid-column:1/-1;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.qtCount strong{font-size:18px;color:var(--ink)}
.qtFoot{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.6}
.quickTime:hover{background:#ffe3c2;border-color:#e8a45c}
@media (max-width:700px){.quickTimes ul{grid-template-columns:repeat(2,minmax(0,1fr))}}