@charset "utf-8";
#areaMV{ padding: 40px 3%;}
#areaMV .wrap{ display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
#areaMV .wrap .image2{ display: none; margin-bottom: 40px;}
#areaMV .wrap .page_ttl{ display: flex; flex-direction: column; margin-bottom: 40px;}
#areaMV .wrap .page_ttl h1{ display: block; font-size: 24px; margin-bottom: 15px;}
#areaMV .wrap .page_ttl h1 br{ display: none;}
#areaMV .wrap .page_ttl p{ display: block; font-size: 14px;}
@media screen and (max-width: 800px) {
#areaMV .wrap .image2{ display: block; width: 40%; margin-right: 3%;}
#areaMV .wrap .page_ttl { padding-left: 26vw; position: relative;}
#areaMV .wrap .page_ttl::before{ width: 24vw; height: 100%; content: ""; position: absolute; left: 0; top: 0; background: url(../img/kanto.jpg) 0 50% no-repeat; background-size: contain;}
#areaMV .wrap .page_ttl h1{ font-size: 3.8vw; margin-bottom: 20px;}
#areaMV .wrap .page_ttl h1 br{ display: block;}
#areaMV .wrap .page_ttl p{ font-weight: 300;}
#areaMV .wrap .page_ttl p br{ display: none;}
}
@media screen and (max-width: 600px) {
#areaMV{ padding: 30px 3%;}
#areaMV .wrap .page_ttl { padding-left: 0; margin-bottom: 20px;}
#areaMV .wrap .page_ttl::before{ display: none;}
#areaMV .wrap .page_ttl h1 { padding-left: 23vw; font-weight: bold; position: relative; font-size: 5.0vw; margin-bottom: 30px;}
#areaMV .wrap .page_ttl h1::before{ width: 22vw; height: 100%; content: ""; position: absolute; left: 0; top: 0; background: url(../img/kanto.jpg) 10% 50% no-repeat; background-size: contain;}
#areaMV .wrap .page_ttl p{ font-size: 14px; line-height: 1.4em; padding: 0 2%;}
}
/**/
#areaMV .wrap .image{ width: 42%;}
#areaMV .wrap .links{ width: 54%; display: flex; flex-direction: column; border: solid 3px #ccc; padding:0 13px; border-radius: 6px; }
#areaMV .wrap .links ul.area{ width: 100%; display: block;}
#areaMV .wrap .links ul.area li{ width: 100%; display: flex; margin: 5px auto;}
#areaMV .wrap .links ul.area li div{ width: 100%; padding:8px 20px; border-bottom: solid 1px #ddd; display: flex; align-items: center;}
#areaMV .wrap .links ul.area li:last-child div{ border-bottom: none;}
#areaMV .wrap .links ul.area li div b{ width: 80px;}
#areaMV .wrap .links ul.area li div span{ flex: 1; display: flex; align-items: flex-start;}
#areaMV .wrap .links ul.area li div span a{ width: 48%; display: flex; height: 44px; align-items: center; justify-content: center; border-radius: 4px; padding: 0 4px; margin: 0 10px; background: #ddd; border: solid 1px #ddd; font-size: 12px; font-weight: bold;}
#areaMV .wrap .links ul.type-links{ width: 100%; display: flex; flex-wrap: wrap; padding: 10px 0; border-top: solid 1px #ccc;}
#areaMV .wrap .links ul.type-links li{ width: 23%; display: block; margin: 0 1% 8px;}
#areaMV .wrap .links ul.type-links li a,
#areaMV .wrap .links ul.type-links li span{ height: 22px; display: flex; font-size: 10px; justify-content: center; align-items: center; padding: 0; border-radius: 4px;  font-size: 11px;}
#areaMV .wrap .links ul.type-links li a{ border: solid 1px #ccc;}
#areaMV .wrap .links ul.type-links li.now a{ background:#999; border: solid 1px #999; color: #fff; pointer-events: none;}
@media screen and (min-width: 800px){
#areaMV .wrap .links ul.area li div span a:hover{ border: solid 1px #000; background: var(--color2);}
#areaMV .wrap .links ul.type-links li a:hover{ border: solid 1px #000; background: var(--color2);}
}
@media screen and (max-width: 800px){
#areaMV .wrap .links{ padding:0 6px; background: #fff;}
#areaMV .txt-wrap{ position: relative;}
#areaMV .wrap .image{ display: none;}
#areaMV .wrap .links{ width: 100%;}
#areaMV .wrap .links ul.area li div{ padding:8px;}
#areaMV .wrap .links ul.area li div span a:nth-child(1){ background: var(--color1); color: #fff; border-bottom: solid 4px var(--color1-border);}
#areaMV .wrap .links ul.area li div span a:nth-child(2){ background: var(--color3); color: #fff; border-bottom: solid 4px var(--color3-border);}
#areaMV .wrap .links ul.type-links{ padding: 25px 0;}
#areaMV .wrap .links ul.type-links li{ width: 31%; display: block; margin: 0 1% 12px;}
#areaMV .wrap .links ul.type-links li a,
#areaMV .wrap .links ul.type-links li span{ height: 36px; }
#areaMV .wrap .links ul.type-links li a{ border: solid 1px #555;}
#areaMV .wrap .links ul.type-links li.now a{ background:#ccc; border: solid 1px #ccc;}
}
@media screen and (max-width: 600px){
#areaMV .wrap .links ul.area li div b{ width: 70px;}
#areaMV .wrap .links ul.area li div span { justify-content:space-between;}
#areaMV .wrap .links ul.area li div span a{ width: 49%; height: 60px; margin: 0; font-size: 3.8vw;}
}

/*---------------------
市区からみる
-----------------------*/
#search_list{ width: 94%; margin: 30px 3% 50px; background: #fff; padding:30px 20px; border-radius: 10px;}
#search_list .ttl-area{ width: 100%; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 30px;}
#search_list .ttl-area h2{ display: block; font-size: 15px; font-weight: bold;}
#search_list .ttl-area ul{ display: flex; justify-content: flex-start; align-items: center; margin-left: 20px;}
#search_list .ttl-area ul li{ display: flex; height: 26px; margin: 0 5px; font-size: 13px; line-height: 1em; align-items: center; justify-content: center; padding: 0 20px; border-radius: 30px; border: solid 1px #aaa; color: #999; transition: 0.4s; cursor: pointer;}
#search_list .ttl-area ul li:hover{ background: #777; color: #fff; border: solid 1px #000;}
#search_list .ttl-area ul li.view{ color: #000; background: var(--color2); border: solid 1px #000; pointer-events: none;}

/**/
#search_list .tabBox{ display: none;}
#search_list .tabBox.view{ display: flex;}
/**/
#search_list .select-box{ width: 100%; display: flex; flex-direction: row; justify-content: flex-start; padding: 30px 0 10px; border-top: dashed 1px #ddd;}
#search_list .select-box:nth-child(1){ padding: 10px 0; border-top: none;}
#search_list .select-box h3{ width: 100px; font-size: 14px; display: block; padding-top: 2px;}
#search_list .select-box ul{ width: 100%; display: flex; flex-wrap: wrap; padding-left: 20px;}
#search_list .select-box ul li.item{ display: flex; margin: 0 10px 20px;}
#search_list .select-box ul li.item .item-checkBox .checkBox + span div{ display: none;}
#search_list .select-box ul li.item a{ display: flex; flex-direction: row; align-items: center;}
#search_list .select-box ul li.item a p{ font-size: 14px; text-decoration: underline; color: var(--color5);}
#search_list .select-box ul li.item a span{ min-width: 22px; display: flex; justify-content: center; align-items: center; padding: 3px; border-radius: 4px; background:#eee; margin-left: 10px; font-size: 12px;}
#search_list .select-box p.noarea{ padding: 0 2%;}

@media screen and (min-width: 600px){
#search_list .select-box ul li.item a:hover p{ text-decoration: none; color:#999;}
#search_list .select-box ul li.item a:hover span{ color:#fff; background: var(--color5);}

}

@media screen and (max-width: 900px){
#search_list .select-box ul li.item{ margin: 0 5px 12px;}
#search_list .select-box ul li.item a{ padding: 4px 12px; border: solid 1px #aaa; border-radius: 4px;}
}


@media screen and (max-width: 800px){
#search_list{ padding:15px 10px;}
#search_list .ttl-area{ flex-direction: column; align-items: flex-start; margin-bottom:0px;}
#search_list .ttl-area h2{ font-size: 14px; padding: 0 2% 10px;}
#search_list .ttl-area ul{ width: 100%; margin-left:0px; border-bottom: solid 1px #111;}
#search_list .ttl-area ul li{ width: 24%; height: 40px; margin: 0 0.5%; padding: 0; border-radius: 4px 4px 0 0; border: solid 1px #111; border-bottom: none; color: #111;}
#search_list .ttl-area ul li.view{ border-bottom: none;}
/**/
#search_list .select-box{ flex-direction: column; border-top: solid 1px #aaa; padding: 30px 0;}
#search_list .select-box:nth-child(1){ padding: 30px 0;}
#search_list .select-box h3{ padding: 2px 5px 5px;}
#search_list .select-box ul{ padding-left: 0px;}
/**/
#search_list .select-box p.noarea br{ display: none;}

}
@media screen and (max-width: 600px){
#search_list .select-box ul li.item{ width: 50%; margin: 0; padding:5px 4px; }
#search_list .select-box ul li.item a{ width: 100%; height: 46px; justify-content: space-between; border: solid 1px #777;}
#search_list .select-box ul li.item a p{ text-decoration: none; line-height: 1.2em; font-weight: bold;}

}