@charset "utf-8";

.nav {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-flow: wrap;
	margin: 5rem auto;
	max-width: 850px;
}



.map01.on,.map02.on,.map03.on,.map04.on,
.map01.off,.map02.off,.map03.off,.map04.off{
   width: 168px;
   min-height: 180px;
   cursor: pointer;
}

.map01.on:hover,.map02.on:hover,.map03.on:hover,.map04.on:hover,
.map01.off:hover,.map02.off:hover,.map03.off:hover,.map04.off:hover{
	transform: scale(1.1, 1.1);
    transition: 0.5s all;
}

.mapbg02{
	background: url(../img/bg_map02.jpg);
}

.map01.on {
	background: url(../img/map_nav01on.png);
	background-repeat: no-repeat;
	background-size: contain;
	/* background: #ccc; */
	color: #333;
}

.map01.off {
	background: url(../img/map_nav01off.png);
	background-repeat: no-repeat;
	background-size: contain;
	/* background: #ccc; */
	color: #333;
}

.map02.on {
	background: url(../img/map_nav02on.png);
	background-repeat: no-repeat;
	background-size: contain;
	color: #333;
}

.map02.off {
	background: url(../img/map_nav02off.png);
	background-repeat: no-repeat;
	background-size: contain;
	/* background: #ccc; */
	color: #333;
}
.map03.on {
	background: url(../img/map_nav03on.png);
	background-repeat: no-repeat;
	background-size: contain;
	/* background: #ccc; */
	color: #333;
}

.map03.off {
	background: url(../img/map_nav03off.png);
	background-repeat: no-repeat;
	background-size: contain;
	/* background: #ccc; */
	color: #333;
}

.map04.on {
	background: url(../img/map_nav04on.png);
	background-repeat: no-repeat;
	background-size: contain;
	/* background: #ccc; */
	color: #333;
}

.map04.off {
	background: url(../img/map_nav04off.png);
	background-repeat: no-repeat;
	background-size: contain;
	/* background: #ccc; */
	color: #333;
}


.main::-webkit-scrollbar{
	display: none;
  }

[class*=_assist] {
	width: 100%;

}

[class*=_assist] > * {
	list-style-type: none;
}

.prev {
	cursor: pointer;
	margin-top: 30%;
	width: 18%;
	z-index: 3;
	position: absolute;
	max-width: 100px;
	left: 0;
}
.next {
	cursor: pointer;
	margin-top:30%;
	width: 18%;
	position: absolute;
	max-width: 100px;
	z-index: 3;
	right: 0;
}

[class*=main]:not(ul) {
	overflow-x: hidden;
    margin: 0 auto;
    max-width: 1460px;
    width:100%;
    height: 100%;
    position: relative;
}

/* [class*=main]:not(ul) h2 {
	font-size: 80px;
	line-height: 130px;
	text-align: center;
} */

[class*=main]:not(ul) a {
	text-decoration: none;
	color: #fff;
}

[class*=main] .mapbox {
	background: #999;
	width: 100%;
}

.mapbox:nth-child(1) {
	background: rgba(255, 255, 255, 0.7);
	position: inherit;
	left: 0;
	top: 0;
}


[class*=main] .mapbox:nth-child(2) {
	background: rgba(255, 255, 255, 0.7);
	position: absolute;
	left: 0;
	top: 0;
}
[class*=main] .mapbox:nth-child(3) {
	background: rgba(255, 255, 255, 0.7);
	position: absolute;
	left: 0;
	top: 0;
}
[class*=main] .mapbox:nth-child(4) {
	background: rgba(255, 255, 255, 0.7);
	position: absolute;
	left: 0;
	top: 0;
}




[class*=main] div.on {
	/*display: block;*/
	z-index: 1;
}


@media screen and (min-width: 820px)  {
  [class*=main]:not(ul) {
	overflow: hidden;
    margin: 0 auto;
    max-width: 1460px;
    width:100%;
    height: 100%;
    position: relative;
}
	.prev,.next{
		padding-right: 0;
		margin-top: 0;
		top: 59%;
		width: 8%;
	}
	.prev{
		left: 30px;
	}
	.next{
		right: 30px;
	}
	 .main_assist{
		top: 50%;
		margin-top: 0;
	 }
	 .map01.on,.map02.on,.map03.on,.map04.on,
	 .map01.off,.map02.off,.map03.off,.map04.off{
		width: 190px;
		min-height: 200px;
	 }
}

@media screen and (min-width: 1920px){
	.next{
		right: calc(50% - 890px);
	}
	.prev{
		left: calc(50% - 890px);
	}
}