@charset "UTF-8";

.area-list {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.5em;
row-gap: 1em;
align-items: center;
font-size: 0.95em;
line-height: 1.4;
margin: 0;
padding: 0;
}

.area-list dt {
margin: 0;
padding: 0;
background-color: #29619e;
border: 1px solid #29619e;
border-radius: 4px;
}

.area-list dt a {
display: block;
width: 100%;
padding: 0.3rem 0.6rem;
color: #fff;
font-weight: 300;
text-decoration: none;
box-sizing: border-box;
}

.area-list dt a:hover {
background-color: #3370b0;
color: #ffffff;
}

.area-list dd {
margin: 0;
padding: 0;
}

@media screen and (max-width: 768px) {
.area-list {
display: block;
}

.area-list dt, .area-list dd {
margin-bottom: 0.5em;
}
}