@charset "UTF-8";

:root{
  --page:#f4f9fd;
  --surface:#fff;
  --blue:#286497;
  --blue2:#4d85b4;
  --blue-soft:#dcecf8;
  --mint:#d7f3e8;
  --coral:#f1725d;
  --coral-soft:#ffe4dc;
  --text:#315f80;
  --muted:#6689a1;
  --line:#bad0df;
  --max:1320px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--page);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--coral);outline-offset:3px}

.site-header,.site-footer,.page-shell{
  width:min(calc(100% - 36px),var(--max));
  margin-inline:auto;
}

.site-header{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}

.logo{
  display:inline-flex;
  gap:.28rem;
  align-items:baseline;
  letter-spacing:-.04em;
  font-size:1rem;
}
.logo span{color:var(--muted)}
.logo strong{color:var(--blue);font-size:1.08rem}

.top-nav{display:flex;align-self:stretch}
.top-nav a{
  display:grid;
  place-items:center;
  padding:0 18px;
  border-left:1px solid var(--line);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.top-nav a:hover{background:var(--mint)}

.page-shell{
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  background:var(--surface);
}

.intro{
  min-height:190px;
  display:grid;
  grid-template-columns:1fr 160px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,var(--blue-soft) 0 76%,var(--mint) 76% 100%);
}
.intro>div:first-child{padding:30px 38px 26px}
.kicker{
  margin:0 0 14px;
  color:var(--blue2);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
h1{
  margin:0;
  font-size:clamp(2.35rem,4.6vw,4rem);
  line-height:.94;
  letter-spacing:-.055em;
}
.intro-mark{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:22px;
  border-left:1px solid var(--line);
}
.intro-mark span{
  color:var(--coral);
  font-size:3.7rem;
  font-weight:900;
  line-height:.82;
  letter-spacing:-.08em;
}
.intro-mark small{
  margin-top:10px;
  color:var(--muted);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.content-section{border-bottom:1px solid var(--line)}
.section-title{
  min-height:70px;
  display:grid;
  grid-template-columns:58px 1fr;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.section-title>span{
  align-self:stretch;
  display:grid;
  place-items:center;
  border-right:1px solid var(--line);
  color:var(--coral);
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.08em;
}
.section-title h2{
  margin:0;
  padding:0 20px;
  font-size:clamp(1.4rem,2.4vw,2rem);
  letter-spacing:-.04em;
}

.city-index{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.city-index a{
  min-height:72px;
  padding:12px 14px;
  display:grid;
  grid-template-columns:26px 1fr;
  align-items:center;
  gap:5px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.city-index a:nth-child(5n){border-right:0}
.city-index a:nth-last-child(-n+5){border-bottom:0}
.city-index a:hover{background:var(--mint)}
.city-index b,.region-index b{
  color:var(--coral);
  font-size:.6rem;
  letter-spacing:.06em;
}
.city-index span{
  font-size:clamp(.88rem,1.15vw,1.03rem);
  font-weight:800;
  letter-spacing:-.02em;
}

.region-index{
  display:block;
}
.region-block{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-bottom:1px solid var(--line);
}
.region-block:last-child{border-bottom:0}
.region-block a{
  min-height:58px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:8px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.region-block a:nth-child(4n){border-right:0}
.region-block a:nth-child(n+5){border-bottom:0}
.region-block a:hover{background:var(--blue-soft)}
.region-main{
  background:var(--mint);
  font-weight:900;
}
.region-main b{
  color:var(--coral);
  font-size:.6rem;
  letter-spacing:.06em;
}
.region-main span{
  font-size:.9rem;
  letter-spacing:-.015em;
}
.region-city span{
  font-size:.84rem;
  font-weight:800;
  letter-spacing:-.015em;
}

.county-link{
  min-height:68px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:var(--mint);
  border-top:1px solid var(--line);
}
.county-link:hover{background:var(--coral-soft)}
.county-link span{
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:-.02em;
}
.county-link strong{
  color:var(--blue2);
  font-size:.7rem;
  letter-spacing:.04em;
}

.new-section{background:var(--blue-soft)}
.section-title-new{background:var(--blue-soft)}
.new-index{
  min-height:78px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.5) 0,
      rgba(255,255,255,.5) 1px,
      transparent 1px,
      transparent 25%
    );
}
.new-index:not(:empty){
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.new-index a{
  min-height:72px;
  padding:11px 14px;
  display:grid;
  grid-template-columns:46px 1fr;
  align-items:center;
  gap:8px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.new-index a:hover{background:var(--coral-soft)}
.new-index time{
  color:var(--coral);
  font-size:.63rem;
  font-weight:900;
}
.new-index span{
  font-size:.9rem;
  font-weight:800;
}

.site-footer{
  min-height:82px;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:22px;
  color:var(--muted);
  font-size:.72rem;
}
.site-footer>a:not(.logo){font-weight:800}

@media(max-width:980px){
  .city-index{grid-template-columns:repeat(3,minmax(0,1fr))}
  .city-index a:nth-child(5n),
  .city-index a:nth-last-child(-n+5){
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .city-index a:nth-child(3n){border-right:0}
  .new-index:not(:empty){grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:680px){
  .site-header,.site-footer,.page-shell{width:100%}
  .site-header{min-height:56px;padding:0 12px}
  .top-nav a{padding:0 9px;font-size:.62rem}
  .top-nav a:nth-child(3){display:none}
  .page-shell{border-left:0;border-right:0}

  .intro{
    min-height:164px;
    grid-template-columns:1fr 88px;
  }
  .intro>div:first-child{padding:24px 16px 22px}
  h1{font-size:clamp(2.15rem,11vw,3.15rem)}
  .intro-mark{padding:12px}
  .intro-mark span{font-size:2.8rem}
  .intro-mark small{font-size:.56rem}

  .section-title{min-height:60px;grid-template-columns:46px 1fr}
  .section-title h2{padding:0 13px;font-size:1.35rem}

  .city-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .city-index a,
  .city-index a:nth-child(3n),
  .city-index a:nth-child(5n){
    min-height:62px;
    border-right:1px solid var(--line);
  }
  .city-index a:nth-child(2n){border-right:0}

  .region-block{grid-template-columns:repeat(2,minmax(0,1fr))}
  .region-block a,
  .region-block a:nth-child(4n),
  .region-block a:nth-child(n+5){
    min-height:56px;
    padding-inline:11px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .region-block a:nth-child(2n){border-right:0}
  .region-block a:nth-last-child(-n+2){border-bottom:0}
  .county-link{min-height:62px;padding-inline:13px}
  .county-link strong{display:none}
  .new-index:not(:empty){grid-template-columns:1fr}
  .site-footer{min-height:78px;padding:0 12px}
}

@media(max-width:430px){
  .top-nav a:nth-child(2){display:none}
  .city-index span,.region-main span,.region-city span{font-size:.8rem}
  .site-footer{grid-template-columns:1fr auto}
  .site-footer>span{display:none}
}