@charset "UTF-8";
/* =========================================================
   愛知水道ポータル / 業者ランキング（一覧表＋詳しいカード）
   inc/ranking.php が出力する markup 用。エリアページ・業者一覧で読み込む
   ========================================================= */

/* ---------- 一覧表 ---------- */
.rk-updated{margin-top:10px;text-align:right;font-size:12.5px;color:var(--ink-l)}
.sec-navy .rk-updated{color:#cfe4f7}
/* ★（company.css と同じ定義。ランキングは業者ページ以外でも出るのでここにも置く） */
.stars{
  --r:0;display:inline-block;font-size:18px;line-height:1;letter-spacing:2px;vertical-align:-2px;
  background:linear-gradient(90deg,#f5a623 calc(var(--r) / 5 * 100%),#d3dbe3 0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rk-table-wrap{margin-top:30px;background:#fff;color:var(--ink);border-radius:12px;box-shadow:var(--shadow-m);overflow-x:auto}
.rk-table{min-width:1040px;font-size:13px;border-collapse:separate;border-spacing:0} /* 左列を固定するため separate */
.rk-table th,.rk-table td{padding:8px 8px;text-align:center;vertical-align:middle;border-top:1px solid var(--line)}
.rk-table thead th{background:#045eb5;color:#fff;font-size:12px;font-weight:700;line-height:1.45;border-top:0;white-space:nowrap}
.rk-table tbody tr:nth-child(even){background:#f7fbfe}
.rk-td-no{font-size:17px;font-weight:700;color:var(--navy);width:44px;min-width:44px}
/* 横スクロールしても「順位」「業者名（サイト画像）」は左に固定する */
.rk-table thead th:nth-child(1),.rk-table thead th:nth-child(2){position:sticky;z-index:3;background:#045eb5}
.rk-table thead th:nth-child(1){left:0}
.rk-table thead th:nth-child(2){left:44px}
.rk-table .rk-td-no,.rk-table .rk-td-name{position:sticky;z-index:2;background:#fff}
.rk-table .rk-td-no{left:0}
.rk-table .rk-td-name{left:44px;box-shadow:7px 0 7px -7px rgba(10,45,85,.35)}
.rk-table thead th:nth-child(2){box-shadow:7px 0 7px -7px rgba(10,45,85,.35)}
.rk-table tbody tr:nth-child(even) .rk-td-no,.rk-table tbody tr:nth-child(even) .rk-td-name{background:#f7fbfe}
.rk-td-name{text-align:left;width:140px;min-width:140px;font-size:12.5px;line-height:1.45}
.rk-td-shot{position:relative;display:block;width:112px;aspect-ratio:3/2;margin-bottom:6px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#eef3f8}
.rk-td-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.rk-td-shot span{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;font-weight:500;color:#8a96a3}
.rk-td-name a{font-weight:700;color:var(--navy)}
.rk-td-rate{white-space:nowrap}
.rk-td-rate .stars{font-size:13px;letter-spacing:0}
.rk-td-rate b{margin-left:3px;font-size:15px;color:var(--navy)}
.rk-td-rate small{display:block;font-size:11.5px;color:var(--ink-l)}
.rk-td-price{white-space:nowrap;font-weight:700;color:var(--navy)}
.rk-td-pay{text-align:left;min-width:148px;font-size:12px;color:var(--ink-l);line-height:1.55}
.rk-yes{color:#1d7a45;font-weight:700;font-size:15px}
.rk-no-mark{color:#b0bac4}
.rk-td-cta{white-space:nowrap;width:104px}
.rk-td-cta .btn{display:flex;justify-content:center;width:100%;padding:7px 8px;font-size:12px;min-width:0}
.rk-td-cta .btn + .btn{margin-top:6px}
.rk-scroll-hint{margin-top:8px;text-align:right;font-size:12px;color:var(--ink-l)}
.sec-navy .rk-scroll-hint{color:#dbeeff}

/* ---------- 詳しいカード ---------- */
.rk-list{display:grid;gap:16px;margin-top:24px}
.rk-card{background:#fff;border-radius:12px;box-shadow:var(--shadow-m);padding:18px 20px 16px;color:var(--ink);position:relative}
.rk-card-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center}
.rk-badge-no{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:linear-gradient(180deg,#f4b53f,#dd9412);color:#fff;font-size:12px;font-weight:700;line-height:1}
.rk-badge-no b{display:block;font-size:21px;line-height:1}
.rk-card:nth-child(2) .rk-badge-no{background:linear-gradient(180deg,#b9c4cd,#8c9aa6)}
.rk-card:nth-child(3) .rk-badge-no{background:linear-gradient(180deg,#d79a5c,#b3762c)}
.rk-card:nth-child(n+4) .rk-badge-no{background:linear-gradient(180deg,#8fb6dd,#5d8cba)}
.rk-card-ttl h3{font-size:19px;font-weight:700;line-height:1.35}
.rk-card-ttl h3 a{color:var(--navy)}
.rk-card-rate{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px;font-size:13px;color:var(--ink-l)}
.rk-card-rate b{font-size:17px;color:var(--navy);line-height:1}
.rk-card-logo{width:90px;height:48px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;padding:6px}
.rk-card-logo img{max-width:100%;max-height:100%;width:auto;height:auto}

.rk-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.rk-badges li{font-size:11.5px;font-weight:700;line-height:1.6;color:var(--navy);background:var(--tint);border-radius:999px;padding:3px 10px}
.rk-badges li:first-child{background:var(--brand);color:#fff}

.rk-card-main{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:14px;align-items:start;margin-top:12px}
.rk-shot{position:relative;display:block;aspect-ratio:3/2;max-width:100%;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#eef3f8}
.rk-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .3s ease}
.rk-shot:hover img{transform:scale(1.03)}
.rk-shot span{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:13px;line-height:1.7;color:#8a96a3}
.rk-card-main .rk-spec,.rk-data{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rk-spec.rk-data{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
.rk-spec.rk-data .is-wide{grid-column:1/-1}
.rk-spec{margin:0;display:grid;gap:1px;background:var(--line)}
.rk-spec > div{display:grid;grid-template-columns:116px minmax(0,1fr);background:#fff}
.rk-spec dt{background:var(--sky);color:var(--navy);font-size:12px;font-weight:700;padding:7px 10px;display:flex;align-items:center}
.rk-spec dd{margin:0;padding:7px 10px;font-size:13px;line-height:1.6;display:flex;align-items:center}

.rk-feat{margin-top:12px}
.rk-feat h4,.rk-memo h4{font-size:14px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:6px}
.rk-feat h4 small{font-size:11.5px;font-weight:500;color:var(--ink-l)}
.rk-feat ul{margin-top:8px;display:grid;gap:6px}
.rk-feat li{position:relative;padding-left:1.4em;font-size:13.5px;line-height:1.7}
.rk-feat li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700}
.rk-memo{margin-top:12px;background:var(--sky-2);border-left:4px solid var(--brand);border-radius:0 10px 10px 0;padding:12px 14px}
.rk-memo h4 svg{color:var(--brand)}
.rk-memo p{margin-top:5px;font-size:13.5px;line-height:1.8}

.rk-card-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.rk-card-btns .btn{flex:1 1 220px;padding:12px 16px;font-size:14.5px;min-width:0}

@media (max-width:1080px){
  .rk-card-main{grid-template-columns:1fr}
  .rk-spec.rk-data{grid-template-columns:1fr}
}
@media (max-width:600px){
  .rk-table{min-width:900px;font-size:12.5px}
  .rk-td-no{width:34px;min-width:34px;font-size:15px}
  .rk-table thead th:nth-child(2),.rk-table .rk-td-name{left:34px}
  .rk-td-name{width:104px;min-width:104px}
  .rk-td-shot{width:96px}
  .rk-card{padding:18px 16px}
  .rk-card-head{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .rk-card-logo{display:none}
  .rk-badge-no{width:48px;height:48px}
  .rk-badge-no b{font-size:20px}
  .rk-card-ttl h3{font-size:18px}
  .rk-spec > div{grid-template-columns:106px minmax(0,1fr)}
  .rk-spec dt{font-size:11.5px;padding:8px 10px}
  .rk-spec dd{font-size:13px;padding:8px 10px}
  .rk-card-btns{gap:8px}
  .rk-card-btns .btn{flex:1 1 100%;padding:12px 14px;font-size:14px}
  .rk-memo{padding:12px 14px}
}

/* ---------- 業者の絞り込み検索 ---------- */
.cs-form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 26px;box-shadow:var(--shadow-m)}
.cs-ttl{font-size:20px;font-weight:700;color:var(--navy);text-align:center;margin-bottom:6px}
.cs-block{border-top:1px solid var(--line);padding:12px 0}
.cs-block:first-of-type{border-top:0}
.cs-block > summary{cursor:pointer;font-size:15.5px;font-weight:700;color:var(--navy);padding:8px 0 8px 26px;position:relative;list-style:none}
.cs-block > summary::-webkit-details-marker{display:none}
.cs-block > summary::before{content:"";position:absolute;left:6px;top:50%;width:8px;height:8px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.cs-block[open] > summary::before{transform:translateY(-30%) rotate(-135deg)}
.cs-sub{margin:10px 0 4px;font-size:12.5px;font-weight:700;color:var(--ink-l)}
.cs-checks{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.cs-checks label{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--sky-2);font-size:13.5px;cursor:pointer}
.cs-checks label:hover{border-color:var(--brand)}
.cs-checks input{width:15px;height:15px;margin:0}
.cs-checks input:checked + span{color:var(--navy);font-weight:700}
.cs-checks label:has(input:checked){background:var(--tint);border-color:var(--brand)}
.cs-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px}
.cs-note{margin-top:12px;font-size:12px;line-height:1.7;color:var(--ink-l);text-align:center}
@media (max-width:600px){
  .cs-form{padding:18px 16px}
  .cs-checks label{font-size:13px;padding:6px 10px}
  .cs-btns .btn{width:100%}
}