@charset "utf-8";
/* CSS Document */


/* -------------------------------------
都道府県別リンク
------------------------------------- */
.search_area_links {
padding: 60px 0;
}
.search_area_links .inner {
max-width:1140px;
margin:0 auto;
}

.search_area_links h3{
text-align: center;
margin-bottom: 50px;
background-color: #3dafcd;
color: #fff;
font-size: 2.5rem;
padding: 14px;
}

.search_area_links .inner .pref{
  font-size: 2rem;
    color: #FFF;
    width: 122px;
    padding: 1.2% 0px 1% 0;   
} 

.search_area_links .inner .areabox{
display: flex;
border-radius: 10px;
padding: 10px;
margin-bottom: 3px;
}
.search_area_links .inner .areabox .area {
width: 130px;
text-align: center;
padding-top: 8px;
color: #fff;
}
.search_area_links dl {
font-size:16px;
font-weight:bold;
margin: 0;/* reset */
display: flex;
flex-wrap: wrap;
max-width:995px;
}
.search_area_links .areabox:not(:last-of-type) {
}
.search_area_links .areabox:nth-child(1) {
background:#45aadb;
}
.search_area_links .areabox:nth-child(2) {
background:#64c7c7;
}
.search_area_links .areabox:nth-child(3) {
background:#8ec367;
}
.search_area_links .areabox:nth-child(4) {
background:#d9ac46;
}
.search_area_links .areabox:nth-child(5) {
background:#e68142;
}
.search_area_links .areabox:nth-child(6) {
background:#d85b5b;
}
.search_area_links .areabox:nth-child(7) {
background:#b97bc7;
}
.search_area_links .areabox:nth-child(8) {
background:#5a76d0;
}
.search_area_links dl dt,
.search_area_links dl dd {
padding:6px 3px;
box-sizing:border-box;
margin: 0 1em;
}
.search_area_links dl dt {
width:8em;
text-align:center;
color:#FFF;
padding:0.5em;
width: 150px;
}
.search_area_links dl dd a {
display:block;
text-align:center;
background:#FFF;
border-radius:3px;
color:#222;
box-shadow:1px 1px 1px rgba(0,0,0,0.2);
transition: all 400ms ease;
padding:0.5em 0;
width: 100%;
padding-left: 0.5em;
padding-right: 0.5em;
}
.search_area_links dl dd a:hover,
.search_area_links dl dd a:active {
box-shadow:1px 1px 3px rgba(0,0,0,0.4);
background: #000;
color: #fff;
}

.search_area_links dl dd a.nolink {
display:block;
text-align:center;
background: #9f9f9f;
border-radius:3px;
color:#222;
box-shadow:1px 1px 1px rgba(0,0,0,0.2);
transition: all 400ms ease;
padding:0.5em 0;
width: 100%;
padding-left: 0.5em;
padding-right: 0.5em;
}

.search_area_links dl dd a:hover::before,
.search_area_links dl dd a:active::before {
content: '';
display:block;
width:100%;
height:100%;
position:absolute;
left:0; top:0;
background:rgba(100,100,100,0.2);
background-blend-mode: darken;
}

.search_area_links dl dd a.nolink:hover{
cursor: no-drop;
}




@media screen and (max-width: 767px){
    .search_area_links {
    padding: 22px 0;
    }
	.search_area_links h3{
	padding: 2%;
	}
	.search_area_links .inner {
	margin:0 1%;
	}
    .search_area_links .inner .areabox{
    display: block;
    }
    .search_area_links .inner .areabox .area {
    width: 100%;
    padding: 0;
    }
	.search_area_links dl {
    flex-wrap: wrap;
    justify-content: flex-start;
	row-gap:2px;
	padding-bottom:6px;
	}
	.search_area_links dl dd {
    width: 31%;
    padding: 1%;
    margin: 1%;
    margin-bottom: 5px;
	}
	.search_area_links dl dd a {
	font-size:1.2em;
	width:100%;
    padding: 2% 0;
	}
    .search_area_links dl dd a.nolink {
    font-size:1.2em;
	width:100%;
    padding: 2% 0;
        
    }
    .search_area_links .inner h3 {
    font-size: 170%;
    text-align: center;
    margin-bottom: 20px;
}
}


