.rank {
margin-bottom: 20px;
}
.rank-wrap {
display: flex;
margin-bottom: 8px;
border: 1px #ccc solid;
border-radius: 4px;
width: 100%;
}
.rank-no {
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
background: #666;
color: #fff;
width: 24px;
border-radius: 4px 0 0 4px;
}
.rank-right,.newsite-right {
width: 100%;
padding: 8px;
}
.list-setsu {
margin-bottom: 8px;
letter-spacing: 0.1em;
font-weight: bold;
color: #525252;
line-height: 1.5;
}
.list-site {
font-size: 15px;
margin-bottom: 8px;
line-height: 1.5;
}
.list-place {
font-size: 15px;
padding-left: 22px;
background-image: url('/assets/img/guide2.svg');
background-repeat: no-repeat;
background-size: 15px auto;
background-position: 0 2px;
line-height: 1.5;
}
.rank-time {
text-align: right;
margin: 12px 4px 12px 0;
}
.newsite-date {
font-size: 15px;
margin: 0 0 8px 4px;
}
.area-grid, .area-grid-side {
display: flex;
flex-wrap: wrap;
padding: 8px 8px 0 8px;
border: 1px #bbb solid;
background: #EFF0EF;
border-radius: 2px;
margin-bottom: 32px;
gap: 2%;
}
.area-grid-side {
margin-bottom: 0;
}
ul.mb-20 {
margin-bottom: 20px;
}
.area-grid li, .area-grid-side li {
text-align: center;
border: 1px #bbb solid;
background: #fff;
margin-bottom: 8px;
position: relative;
border-radius: 2px;
}
.area-grid li a, .area-grid-side li a {
display:block;
padding: 12px 8px;
}
.city-last {
margin-bottom: 32px;
}
.city-last a {
display: inline-block;
font-weight: bold;
text-decoration: underline;
letter-spacing: 0.1em;
background-image: url('../img/right_arrow.svg');
background-repeat: no-repeat;
background-position: right center; 
background-size: 20px 20px; 
padding-right: 30px;
}
.cam-list {
margin-bottom: 32px;
}
.cam-list-wrap {
margin-bottom: 0;
border-bottom: 1px #dadada dashed;
padding: 8px 4px;
}

@media screen and (max-width: 520px) {

}
@media screen and (max-width: 1023px) and (min-width: 521px) {

.city-last {
margin-bottom: 40px;
}
div.mb-20 {
margin-bottom: 20px;
}
.area-grid- li {
width: 23.5%;
}
}
@media screen and (min-width: 1024px) {
.no-white {
background: inherit;
color: #333;
padding: 0 6px;
}
.newsite-right {
background: #fff;
}

.city-last {
margin-bottom: 52px;
}
.rank-wrap {
background: #fff;
}
.rank-right:hover {
background: #efefef;
}
.list-setsu {
font-size: 17px;
}
div.mb-20 {
margin-bottom: 20px;
}
.area-grid li:hover, .area-grid-side li:hover {
background: #efefef;
}
}

}