/* マンションdeネット 全国トップ
   配色は tokyo.mansion-de-net.jp の実測値に準拠 */
:root{
  --navy:#04384c;
  --head:#2C5282;
  --head-accent:#2C7CB8;  /* 東京 .mdn-h2 の左ボーダー色 */
  --link:#1176d4;
  --text:#333;
  --bg:#fdfdfd;
  --line:#E5E7EB;
  --muted:#6B7280;
  --hover:#F5F9FC;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"游ゴシック体","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.6;  /* 東京サイト実測 25.6px/16px に合わせる */
}
img{max-width:100%;height:auto}
a{color:var(--link)}

.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* ---- ヘッダー ---- */
.topbar{background:var(--navy);height:6px}
.hdr{background:#fff;border-bottom:1px solid var(--line)}
.hdr__in{max-width:1100px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hdr__logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy)}
.hdr__logo img{width:38px;height:38px;display:block;border-radius:8px}
.hdr__name{font-weight:700;font-size:19px;letter-spacing:.02em}
.hdr__nav{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
.hdr__nav a{color:var(--text);text-decoration:none;font-size:14px}
.hdr__nav a:hover{color:var(--link)}

/* ---- ヒーロー ---- */
.hero{padding:44px 0 8px}
.hero h1{
  margin:0 0 18px;
  font-size:28px;
  line-height:1.55;
  font-weight:700;
  color:var(--head);
}
.lead{margin:0 0 28px;font-size:16px}
.lead strong{color:var(--head)}

/* ---- 統計 ---- */
.stats{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stats li{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px 10px;text-align:center}
.stats .num{display:block;font-size:26px;font-weight:700;color:var(--head);line-height:1.3}
.stats .num small{font-size:14px;font-weight:700;margin-left:2px}
.stats .lbl{display:block;font-size:12px;color:var(--muted);margin-top:4px}

/* ---- セクション ---- */
.sec{margin:46px 0 0}
/* 東京サイト .mdn-h2 の実測値に合わせる
   （22.4px / bg #2C5282 / border-left 5.6px #2C7CB8 / radius 3px / pad 11.2px 0 11.2px 16px） */
.sec > h2{
  background:var(--head);
  color:#fff;
  font-size:22.4px;
  font-weight:700;
  margin:0 0 24px;
  padding:11.2px 16px;
  border-left:5.6px solid var(--head-accent);
  border-radius:3px;
  line-height:1.5;
}
.sec__note{font-size:13px;color:var(--muted);margin:-12px 0 22px}

/* ---- エリアカード ---- */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.area{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:18px 16px 16px;
  text-decoration:none;color:var(--text);
  transition:background .15s,border-color .15s;
}
a.area:hover{background:var(--hover);border-color:#B7CBDD}
.area__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.area__name{font-size:19px;font-weight:700;color:var(--head)}
.area__count{font-size:20px;font-weight:700;color:var(--head);white-space:nowrap}
.area__count small{font-size:12px;font-weight:normal;color:var(--muted);margin-left:2px}
.area__prefs{margin:0 0 10px;font-size:12.5px;line-height:1.7;color:var(--muted)}
.area__local{
  align-self:flex-start;
  background:#FFF3E0;color:#E65100;
  border-radius:3px;font-size:12px;font-weight:700;
  padding:2px 8px;margin:0 0 8px;
}
/* 地域回線が無いエリアでも行の高さを揃えるためのプレースホルダ */
.area__local--none{visibility:hidden}
.area__brands{margin:0 0 14px;font-size:12.5px;line-height:1.7;color:var(--muted)}
/* 東京トップの区リンク(.mdn-ward)と同じ色に揃える */
.area__go{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--head-accent);white-space:nowrap}

/* 準備中 */
.area--soon{background:#FAFAFA;border-style:dashed}
.area--soon .area__name{color:var(--muted)}
.area--soon .area__prefs{color:#9CA3AF}
.area__soon{
  font-size:12px;font-weight:700;color:#6B7280;
  background:#EEF0F2;border-radius:3px;padding:2px 8px;white-space:nowrap;
}
.area__note{margin:0;font-size:12.5px;line-height:1.7;color:#9CA3AF}

/* ---- 回線ブランド ---- */
.subh{font-size:15px;font-weight:700;color:var(--head);margin:0 0 12px}
.subh--2{margin-top:26px}
.brands{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.brands li{background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px 16px}
.brands .bname{display:block;font-weight:700;color:var(--head);font-size:15px;line-height:1.6}
.brands .bdesc{display:block;font-size:13px;line-height:1.75;color:var(--muted);margin-top:3px}

.localtbl{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
.localtbl th,.localtbl td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.localtbl thead th{background:var(--head);color:#fff;font-weight:700;white-space:nowrap}
.localtbl td:first-child{font-weight:700;color:var(--head);white-space:nowrap}
.localtbl td:nth-child(2){white-space:nowrap}
.tblwrap{overflow-x:auto}

/* ---- テキストセクション ---- */
.box{background:#fff;border:1px solid var(--line);border-radius:6px;padding:20px 22px}
.box h3{font-size:15px;color:var(--head);margin:20px 0 6px}
.box h3:first-child{margin-top:0}
/* 行間は body（東京実測 1.6）に統一する。ここだけ1.9だと同じ白カード内で行間が2種類になる */
.box p{margin:0 0 6px;font-size:14px;line-height:1.6}
.box ul{margin:0 0 6px;padding-left:1.3em;font-size:14px;line-height:1.6}
.box dl{margin:0;font-size:14px}
.box dt{font-weight:700;color:var(--head);margin-top:12px}
.box dt:first-child{margin-top:0}
.box dd{margin:0 0 0 0;padding:0 0 0 0}

/* ---- フッター ---- */
.ftr{margin-top:56px;background:#fff;border-top:1px solid var(--line);padding:26px 0 30px}
.ftr .wrap{max-width:1240px}  /* 7サイトのリンクを1行に収める */
.ftr__nav{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin:0 0 16px;padding:0;list-style:none}
.ftr__nav a{font-size:12.5px;color:var(--text);text-decoration:none;white-space:nowrap}
.ftr__nav a:hover{color:var(--link);text-decoration:underline}
.copy{text-align:center;font-size:12px;color:var(--muted);margin:0}

/* ---- レスポンシブ ---- */
@media screen and (max-width:1000px){
  .areas{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(4,1fr)}
}
@media screen and (max-width:700px){
  body{font-size:15px}
  .wrap{padding:0 14px}
  .hdr__in{padding:10px 14px;gap:10px}
  .hdr__name{font-size:16px}
  .hdr__nav{margin-left:0;width:100%;gap:14px;justify-content:flex-start}
  .hdr__nav a{font-size:13px}
  .hero{padding:26px 0 4px}
  .hero h1{font-size:21px}
  .lead{font-size:14.5px}
  .stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .stats .num{font-size:22px}
  .sec{margin-top:34px}
  /* 東京SP(375px)実測: font-size 18.0096px / border-left 5.6px（SPでも細くしていない） */
  .sec > h2{font-size:18px;padding:10px 13px}
  .areas{grid-template-columns:1fr;gap:12px}
  .area__local--none{display:none}  /* 縦積みでは高さ揃えが不要 */
  .brands{grid-template-columns:1fr}
  .box{padding:16px 15px}
}