@charset "UTF-8";
/* CSS Document */

.area .bgarea figure {
	position: relative;
}
.area .bgarea figure > div {
	background: #fff;
    text-align: center;
    width: 170px;
	height: 60px;
    position: absolute;
}
#sub.area .bgarea figure > div a {
	color: #fff;
    font-size: 22px;
    font-weight: bold;
	display: block;
	border-radius: 4px;
    padding: 18px 10px 0 45px;
	height: 100%;
	line-height: 1;
}
#sub.area .bgarea figure > div a:hover {
	opacity: 0.8;
}

#sub.area .bgarea figure .tohoku {
	top: 25%;
    right: 0;
}
#sub.area .bgarea figure .kanto {
	bottom: 38%;
    right: 0;
}
#sub.area .bgarea figure .tokai {
	bottom: 14%;
	right: 14%;
}
#sub.area .bgarea figure .kinki {
	top: 42%;
	right: 47%;
}
#sub.area .bgarea figure .kyushu {
	bottom: 21%;
	left: 0;
}
#sub.area .bgarea figure .kyushu {
	bottom: 21%;
	left: 0;
}
#sub.area .bgarea figure .shikoku {
	bottom: 4%;
	left: 38%;
}
#sub.area .bgarea figure .chugoku {
	top: 49%;
	left: 9%;
}
#sub.area .bgarea figure .koshinetsu {
	top: 25%;
    left: 34%;
    width: auto;
}

#sub.area .bgarea figure .tohoku a {
	background: #4dc8f0 url("../images/area/arr_blue_right.jpg") no-repeat left 10px center;
}
#sub.area .bgarea figure .kanto a {
	background: #84dbd4 url("../images/area/arr_green_right.jpg") no-repeat left 10px center;
}
#sub.area .bgarea figure .tokai a {
	background: #84bf85 url("../images/area/arr_lgreen_right.jpg") no-repeat left 10px center;
}
#sub.area .bgarea figure .kinki a {
	background: #83b54c url("../images/area/arr_ygreen_right.jpg") no-repeat left 10px center;
}
#sub.area .bgarea figure .kyushu a {
	background: #f68732 url("../images/area/arr_orange_right.jpg") no-repeat left 10px center;
}
#sub.area .bgarea figure .off a {
	background: #babcbe url("../images/area/arr_gray_right.jpg") no-repeat left 10px center;
	pointer-events: none;
}
#sub.area .bgarea figure .off span {
	color: #babcbe;
	font-size: 15px;
}



@media (max-width: 767px) {
.area .bgarea figure > div {
    width: auto;
	height: auto;
    position: absolute;
	background: none;
}
#sub.area .bgarea figure > div a {
    font-size: 10px;
	border-radius: 3px;
    padding: 8px 8px 8px 16px;
	height: 100%;
}
#sub.area .bgarea figure > div a:hover {
	opacity: 1;
}

#sub.area .bgarea figure .tohoku {
	top: 53%;
    left: calc(100% - 21%);
    right: auto;
}
#sub.area .bgarea figure .kanto {
	bottom: 28%;
    left: calc(100% - 21%);
    right: auto;
}
#sub.area .bgarea figure .tokai {
	bottom: 9%;
	left: calc(100% - 35%);
    right: auto;
}
#sub.area .bgarea figure .kinki {
	top: calc(100% - 44%);
	right: calc(100% - 62%);
}
#sub.area .bgarea figure .kyushu {
	bottom: 21%;
	right: calc(100% - 21%);
	left: auto;
}
#sub.area .bgarea figure .shikoku {
	bottom: -2%;
	left: 38%;
}
#sub.area .bgarea figure .chugoku {
	top: 60%;
    right: calc(100% - 40%);
    left: auto;
}
#sub.area .bgarea figure .koshinetsu {
	top: 41%;
    right: calc(100% - 65%);
	left: auto;
    width: auto;
}

#sub.area .bgarea figure .tohoku a {
	background: #4dc8f0 url("../images/area/arr_blue_right.jpg") no-repeat left 5px center;
	background-size: 10px auto;
}
#sub.area .bgarea figure .kanto a {
	background: #84dbd4 url("../images/area/arr_green_right.jpg") no-repeat left 5px center;
	background-size: 10px auto;
}
#sub.area .bgarea figure .tokai a {
	background: #84bf85 url("../images/area/arr_lgreen_right.jpg") no-repeat left 5px center;
	background-size: 10px auto;
}
#sub.area .bgarea figure .kinki a {
	background: #83b54c url("../images/area/arr_ygreen_right.jpg") no-repeat left 5px center;
	background-size: 10px auto;
}
#sub.area .bgarea figure .kyushu a {
	background: #f68732 url("../images/area/arr_orange_right.jpg") no-repeat left 5px center;
	background-size: 10px auto;
}
#sub.area .bgarea figure .off a {
	background: #babcbe url("../images/area/arr_gray_right.jpg") no-repeat left 5px center;
	background-size: 10px auto;
}
#sub.area .bgarea figure .off span {
	font-size: 10px;
}
	
	
	
	
	
	
	
}