@charset "utf-8";
/* /mansion/kanrihi/ 管理費・修繕積立金 相場データベース 専用の追加スタイル。
   /mansion/assets/style.css を読んだ上で、その差分だけをここに書く。
   色は style.css の CSS変数(--acc / --ink / --line …)をそのまま使い、トーンを揃える。 */

/* --- 築年帯 × 面積帯 のマトリクス表 ------------------------------------- */
.mx table{font-variant-numeric:tabular-nums}
.mx th.rh{text-align:left;white-space:nowrap;background:var(--soft);font-weight:700}
.mx td{text-align:right;white-space:nowrap}
.mx td.na{color:#b9c5ca;text-align:center}
/* 高い / 安いを地の濃さで示す。文字色は常に十分なコントラストを保つ */
.mx td.h1{background:#f0faf9} .mx td.h2{background:#dcf2f0}
.mx td.h3{background:#c3e8e5} .mx td.h4{background:#a5dcd7}
.mx td.h5{background:#86cfc9}
.mx td b{font-weight:700}
.mx td small{display:block;font-size:10.5px;color:var(--mut);font-weight:400}
.mxleg{display:flex;gap:6px;align-items:center;flex-wrap:wrap;
       margin:10px 0 0;font-size:11.5px;color:var(--mut)}
.mxleg i{display:inline-block;width:26px;height:12px;border-radius:3px;
         border:1px solid var(--line)}

/* --- 家賃に対する負担率 --------------------------------------------------- */
.brate{margin:14px 0 0;background:#fff;border:1px solid var(--line);
       border-radius:12px;padding:16px 18px}
.brate .big{font-size:clamp(28px,7vw,40px);font-weight:800;color:var(--acc-d);
            line-height:1.15;font-variant-numeric:tabular-nums}
.brate .big small{font-size:14px;font-weight:600;margin-left:3px;color:var(--mut)}
.bbar{position:relative;height:16px;border-radius:999px;background:var(--acc-soft);
      margin:14px 0 6px;overflow:hidden}
.bbar span{position:absolute;left:0;top:0;bottom:0;background:var(--acc);
           border-radius:999px}
.bscale{display:flex;justify-content:space-between;font-size:11px;color:var(--mut)}

/* --- 見分けポイントの箇条書き -------------------------------------------- */
.points{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
        margin:12px 0 0}
.point{background:#fff;border:1px solid var(--line);border-radius:12px;
       padding:15px 17px}
.point h3{margin:0 0 6px;font-size:14.5px;color:var(--ink-str);
          padding-left:0;border:0}
.point p{margin:0;font-size:13px;line-height:1.95;color:var(--ink)}
.point .tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;
            color:var(--acc-d);background:var(--acc-soft);border-radius:999px;
            padding:2px 9px;margin:0 0 7px}

/* --- 市区一覧の並び替え表 ------------------------------------------------- */
.ranktb td.num,.ranktb th.num{text-align:right;white-space:nowrap;
                              font-variant-numeric:tabular-nums}
.ranktb td small{display:block;font-size:10.5px;color:var(--mut)}

@media(max-width:600px){
  .mx td small{display:none}
  .mx table{font-size:12px}
}