@charset "utf-8";




/* top */

.contents_top {
	position: absolute;
	left: calc((100% - 600px) / 2);
	left: -webkit-calc((100% - 600px) / 2);
	left: -moz-calc((100% - 600px) / 2);
	top: calc((100% - 450px) / 2);
	top: -webkit-calc((100% - 450px) / 2);
	top: -moz-calc((100% - 450px) / 2);
	width: 600px;
	height: 450px;
}

.top_welcome {
	max-width: 600px;
	width: 100%;
	height: auto;
	margin: 40px auto;
	padding: 0;
}

.top_course_select {
	width: 400px;
	height: auto;
	margin: 0 auto 20px auto;
	padding: 0;
	display:-webkit-box; 
	display:-moz-box; 
	display:-ms-box; 
	display:-webkit-flexbox; 
	display:-moz-flexbox; 
	display:-ms-flexbox; 
	display:-webkit-flex; 
	display:-moz-flex; 
	display:-ms-flex; 
	display:flex; 
	-webkit-box-lines:multiple; 
	-moz-box-lines:multiple; 
	-webkit-flex-wrap:wrap; 
	-moz-flex-wrap:wrap; 
	-ms-flex-wrap:wrap; 
	flex-wrap:wrap;
}
.top_course_select li {
	display: inline-block; 
	width: calc((100% - 65px) / 2);
	width: -webkit-calc((100% - 65px) / 2);
	width: -moz-calc((100% - 65px) / 2);
	height: auto; 
	font-size: 18px; 
	font-weight: bold; 
	text-align: center; 
	color: #000000;
	vertical-align: middle; 
	padding: 0 15px; 
	margin: 0; 
	overflow: hidden;
}
.top_course_select li:nth-child(2) {
	border-left: 1px solid #000000;
}

a .top_course_select_txt_ja {
	font-size: 28px;
	font-weight: normal;
	/*text-decoration: solid underline #D83544 10px;*/
	text-decoration-color: #D83544;
	text-decoration-line: underline;
	text-decoration-style: solid;	
	text-decoration-thickness: 10px;
	text-decoration-skip-ink: auto;
	text-underline-offset: -5px;
	color: #000000;
}

a:hover .top_course_select_txt_ja {
	/*text-decoration: solid underline #EEEEED 10px;*/
	text-decoration-color: #EEEEED;
	text-decoration-line: underline;
	text-decoration-style: solid;	
	text-decoration-thickness: 10px;
	text-underline-offset: -5px;
	color: #D83544;
}
a .top_course_select_txt_en {
	padding: 2px 0;
	font-size: 16px;
	text-decoration: none;
	color: #000000;
}
a:hover .top_course_select_txt_en {
	color: #D83544;
}


@media print, screen and (max-height: 600px) {

	.contents_top {
		top: 0;
	}

}

@media print, screen and (max-width: 768px) {

}


@media print, screen and (max-width: 580px) {

	.top_welcome {
		max-width: 600px;
		width: 100%;
		height: auto;
		margin: 25px auto;
		padding: 0;
	}

	.contents_top {
		position: absolute;
		left: 5%;
		top: 0;
		width: 90%;
		height: auto;
	}

	.top_course_select {
		width: 45%;
	}
	.top_course_select li {
		display: inline-block; 
		width: 100%;
		height: auto; 
		padding: 20px 0; 
		margin: 0; 
		overflow: hidden;
	}
	.top_course_select li:nth-child(2) {
		border-top: 1px solid #000000;
		border-left: 0px solid #000000;
	}
}





/* オープニング */

#contents_opening {
	position: relative;
	top: -20px;
	left: -20px;
	width: 100%;
	height: auto;
	border-radius: 20px;
	overflow: hidden;
}

#openingvideo {
	width: 100%;
	height: auto;
	/*
	padding: calc(1080 / 1920 * 100%) 0 0;
	*/
	position: relative;
}
#openingvideo video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.skip_btn {
	position: absolute;
	top: 5%;
	right: 15px;
	width: 80px;
	height: auto;
	z-index: 11;
}


@media print, screen and (max-width: 580px) {

	.skip_btn {
		position: absolute;
		top: 25%;
		right: 15px;
		width: 70px;
		height: auto;
		z-index: 11;
	}
}




/* map */

#contents_map {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: auto;
	/*padding-bottom: 56.041%;*/
	margin: 0 auto;
	background-image: url(../images/map/base-1.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	z-index: 1;
	overflow: hidden;
}

#contents_map_block {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: auto;
	/*padding-bottom: 56.041%;*/
	margin: 0 auto;
	z-index: 1;
}
#map_base_0 {
	position: absolute;
	top: 0px;
	left: 12.5%;
	width: 100%;
	height: auto;
	/*padding-bottom: 67.1354%;*/
	margin: 0 auto;
	background-image: url(../images/map/base-0.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	z-index: 2;
}
#map_base_1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: auto;
	/*padding-bottom: 44%;*/
	margin: 0 auto;
	background-image: url(../images/map/base-11.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	z-index: 3;
}
#map_base_2 {
	position: absolute;
	top: 8%;
	right: 0px;
	width: 100%;
	height: auto;
	/*padding-bottom: 63.5%;*/
	margin: 0 auto;
	background-image: url(../images/map/base-12.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	z-index: 3;
}
#map_base_3 {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: auto;
	/*padding-bottom: 64.75%;*/
	margin: 0 auto;
	background-image: url(../images/map/base-13.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	z-index: 3;
}
#map_base_4 {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 100%;
	height: auto;
	/*padding-bottom: 134.625%;*/
	margin: 0 auto;
	background-image: url(../images/map/base-14.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	z-index: 3;
}

#map_base_5 {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 50%;
	height: 2%;
	margin: 0 auto;
	background-image: url(../images/map/base-15.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	z-index: 4;
}



#contents_ins_map {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: auto;
	/*padding-bottom: 56.041%;*/
	margin: 0 auto;
	background-image: url(../images/map/base.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%; 
	z-index: 1;
}



#btn_auto {
	position: absolute;
	top: 11.5%;
	left: 2.5%;
	width: 19vw;
	height: 3.99vw;
	z-index: 40;
	opacity: 1;
}

.btn_auto_1 {
	width: 19vw;
	height: 3.99vw;
	margin: 0 auto;
	background-image: url(../images/map/autoplay_btn.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	z-index: 50;
}
#btn_auto:hover .btn_auto_1 {
	background-image: url(../images/map/autoplay_btn_o.png);
}


#btn_01, #btn_02, #btn_03, #btn_04, #btn_05, #btn_06, #btn_07, #btn_08, #btn_09, #btn_10, 
#btn_11, #btn_12, #btn_13, #btn_14, #btn_15, #btn_16, #btn_17, #btn_18, #btn_19, #btn_20, 
#btn_21, #btn_22, #btn_23, #btn_24, #btn_25, #btn_26  {
	position: absolute;
	width: 3vw;
	height: auto;
	opacity: 1;
}


#btn_01 {
	top: 60%;
	left: 28%;
}

#btn_02 {
	top: 41%;
	left: 23%;
}

#btn_03 {
	top: 55%;
	left: 36%;
}

#btn_04 {
	top: 41%;
	left: 43%;
}

#btn_05 {
	top: 46%;
	left: 56%;
}

#btn_06 {
	top: 37%;
	left: 61%;
}

#btn_07 {
	top: 25.5%;
	left: 87.5%;
}

#btn_08 {
	top: 52%;
	left: 40%;
}

#btn_09 {
	top: 41%;
	left: 16.5%;
}

#btn_10 {
	top: 30%;
	left: 30%;
}

#btn_11 {
	top: 64%;
	left: 89%;
}

#btn_12 {
	top: 13%;
	left: 83%;
}

#btn_13 {
	top: 51%;
	left: 69%;
}

#btn_14 {
	top: 69%;
	left: 40%;
}

#btn_15 {
	top: 50%;
	left: 29%;
}

#btn_16 {
	top: 45%;
	left: 35%;
}

#btn_17 {
	top: 85%;
	left: 89%;
}

#btn_18 {
	top: 37%;
	left: 29.5%;
}

#btn_19 {
	top: 51%;
	left: 49%;
}

#btn_20 {
	top: 12.5%;
	left: 90%;
}

#btn_21 {
	top: 26%;
	left: 35.5%;
}

#btn_22 {
	top: 22%;
	left: 92%;
}

#btn_23 {
	top: 9%;
	left: 55%;
}

#btn_24 {
	top: 9%;
	left: 87%;
}

#btn_25 {
	top: 69%;
	left: 82%;
}

#btn_26 {
	top: 27%;
	left: 82.5%;
}


.btn_01_1, .btn_02_1, .btn_03_1, .btn_04_1, .btn_05_1, .btn_06_1, .btn_07_1, .btn_08_1, 
.btn_09_1, .btn_10_1, .btn_11_1, .btn_12_1, .btn_13_1, .btn_14_1, .btn_15_1, .btn_16_1, 
.btn_17_1, .btn_18_1, .btn_19_1, .btn_20_1, .btn_21_1, .btn_22_1, .btn_23_1, .btn_24_1, 
.btn_25_1, .btn_26_1 {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 40;
}

#btn_01:hover .btn_01_2 {
	width: 8vw;
	width: fit-content;
}
#btn_02:hover .btn_02_2 {
	width: 8vw;
	width: fit-content;
}
#btn_03:hover .btn_03_2 {
	width: 8vw;
	width: fit-content;
}
#btn_04:hover .btn_04_2 {
	width: 5vw;
	width: fit-content;
}
#btn_05:hover .btn_05_2 {
	width: 5vw;
	width: fit-content;
}
#btn_06:hover .btn_06_2 {
	width: 5vw;
	width: fit-content;
}
#btn_07:hover .btn_07_2 {
	width: 5vw;
	width: fit-content;
}
#btn_08:hover .btn_08_2 {
	width: 5vw;
	width: fit-content;
}
#btn_09:hover .btn_09_2 {
	width: 5vw;
	width: fit-content;
}
#btn_10:hover .btn_10_2 {
	width: 7vw;
	width: fit-content;
}
#btn_11:hover .btn_11_2 {
	width: 5vw;
	width: fit-content;
}
#btn_12:hover .btn_12_2 {
	width: 5vw;
	width: fit-content;
}
#btn_13:hover .btn_13_2 {
	width: 9vw;
	width: fit-content;
}
#btn_14:hover .btn_14_2 {
	width: 4vw;
	width: fit-content;
}
#btn_15:hover .btn_15_2 {
	width: 8vw;
	width: fit-content;
}
#btn_16:hover .btn_16_2 {
	width: 6vw;
	width: fit-content;
}
#btn_17:hover .btn_17_2 {
	width: 4vw;
	width: fit-content;
}
#btn_18:hover .btn_18_2 {
	width: 5vw;
	width: fit-content;
}
#btn_19:hover .btn_19_2 {
	width: 5vw;
	width: fit-content;
}
#btn_20:hover .btn_20_2 {
	width: 3vw;
	width: fit-content;
}
#btn_21:hover .btn_21_2 {
	width: 4vw;
	width: fit-content;
}
#btn_22:hover .btn_22_2 {
	width: 4vw;
	width: fit-content;
}
#btn_23:hover .btn_23_2 {
	width: 4vw;
	width: fit-content;
}
#btn_24:hover .btn_24_2 {
	width: 4vw;
	width: fit-content;
}
#btn_25:hover .btn_25_2 {
	width: 8vw;
	width: fit-content;
}
#btn_26:hover .btn_26_2 {
	width: 8vw;
	width: fit-content;
}

#btn_01 .btn_01_2, #btn_02 .btn_02_2, #btn_03 .btn_03_2, #btn_04 .btn_04_2,
#btn_05 .btn_05_2, #btn_06 .btn_06_2, #btn_07 .btn_07_2, #btn_08 .btn_08_2, #btn_09 .btn_09_2,
#btn_10 .btn_10_2, #btn_11 .btn_11_2, #btn_12 .btn_12_2, #btn_13 .btn_13_2, #btn_14 .btn_14_2,
#btn_15 .btn_15_2, #btn_16 .btn_16_2, #btn_17 .btn_17_2, #btn_18 .btn_18_2, #btn_19 .btn_19_2,
#btn_20 .btn_20_2, #btn_21 .btn_21_2, #btn_22 .btn_22_2, #btn_23 .btn_23_2, #btn_24 .btn_24_2,
#btn_25 .btn_25_2, #btn_26 .btn_26_2 {
	position: absolute;
	top: 8px;
	right: 2.5vw;
	content: "";
	display: block;
	width: 0;
	height: 0;
	padding: 5px;
	font-size: 0;
	white-space: nowrap;
	color: #ffffff;
	background: rgba(0,0,0,0);
	z-index: 60;
	opacity: 0;
	transition: opacity 0.5s;
}
#btn_01:hover .btn_01_2, #btn_02:hover .btn_02_2, #btn_03:hover .btn_03_2, #btn_04:hover .btn_04_2,
#btn_05:hover .btn_05_2, #btn_06:hover .btn_06_2, #btn_07:hover .btn_07_2, #btn_08:hover .btn_08_2,
#btn_09:hover .btn_09_2, #btn_10:hover .btn_10_2, #btn_11:hover .btn_11_2, #btn_12:hover .btn_12_2,
#btn_13:hover .btn_13_2, #btn_14:hover .btn_14_2, #btn_15:hover .btn_15_2, #btn_16:hover .btn_16_2,
#btn_17:hover .btn_17_2, #btn_18:hover .btn_18_2, #btn_19:hover .btn_19_2, #btn_20:hover .btn_20_2,
#btn_21:hover .btn_21_2, #btn_22:hover .btn_22_2, #btn_23:hover .btn_23_2, #btn_24:hover .btn_24_2,
#btn_25:hover .btn_25_2, #btn_26:hover .btn_26_2 {
	height: auto;
	font-size: 0.8vw;
	font-weight: bold;
	text-align: center;
	color: #ffffff;
	background: #D83544;
	border-radius: 5px;
	opacity: 1;
}

#btn_01:hover a img, #btn_02:hover a img, #btn_03:hover a img, #btn_04:hover a img, 
#btn_05:hover a img, #btn_06:hover a img, #btn_07:hover a img, #btn_08:hover a img, 
#btn_09:hover a img, #btn_10:hover a img, #btn_11:hover a img, #btn_12:hover a img, 
#btn_13:hover a img, #btn_14:hover a img, #btn_15:hover a img, #btn_16:hover a img, 
#btn_17:hover a img, #btn_18:hover a img, #btn_19:hover a img, #btn_20:hover a img, 
#btn_21:hover a img, #btn_22:hover a img, #btn_23:hover a img, #btn_24:hover a img, 
#btn_25:hover a img, #btn_26:hover a img {
	opacity: 1;
}





@media print, screen and (max-width: 768px) {

	#contents_map {
		background-image: url(../images/map/base-3.png);
		background-position: top center;
		background-size: contain; 
	}

	#contents_ins_map {
		background-image: url(../images/map/base-3.png);
	}

	#btn_auto {
		top: 5%;
		left: 4%;
		width: 40vw;
		height: 8vw;
	}

	.btn_auto_1 {
		width: 40vw;
		height: 8vw;
	}


	#btn_01 {
		top: 41%;
		left: 29%;
	}

	#btn_02 {
		top: 33%;
		left: 23%;
	}

	#btn_03 {
		top: 38.5%;
		left: 36%;
	}

	#btn_04 {
		top: 33%;
		left: 46%;
	}

	#btn_05 {
		top: 36%;
		left: 61%;
	}

	#btn_06 {
		top: 33%;
		left: 66%;
	}

	#btn_07 {
		top: 67%;
		left: 60%;
	}

	#btn_08 {
		top: 37%;
		left: 41%;
	}

	#btn_09 {
		top: 34%;
		left: 15%;
	}

	#btn_10 {
		top: 29%;
		left: 31%;
	}

	#btn_11 {
		top: 85%;
		left: 39%;
	}

	#btn_12 {
		top: 58%;
		left: 50%;
	}

	#btn_13 {
		top: 38.5%;
		left: 75%;
	}

	#btn_14 {
		top: 44%;
		left: 42%;
	}

	#btn_15 {
		top: 38%;
		left: 30%;
	}

	#btn_16 {
		top: 34%;
		left: 36%;
	}

	#btn_17 {
		top: 87%;
		left: 69%;
	}

	#btn_18 {
		top: 33%;
		left: 30%;
	}

	#btn_19 {
		top: 37.5%;
		left: 53%;
	}

	#btn_20 {
		top: 57%;
		left: 66%;
	}

	#btn_21 {
		top: 28%;
		left: 37%;
	}

	#btn_22 {
		top: 65%;
		left: 70%;
	}

	#btn_23 {
		top: 24%;
		left: 60%;
	}

	#btn_24 {
		top: 56%;
		left: 60%;
	}

	#btn_25 {
		top: 88%;
		left: 24%;
	}

	#btn_26 {
		top: 68%;
		left: 51%;
	}


}


@media print, screen and (min-width: 1268px) {

	#contents_map {
		background-image: url(../images/map/base-2.png);
		background-position: center;
		background-size: 100% 100%; 
	}

	#contents_ins_map {
		background-image: url(../images/map/base-2.png);
	}

	#btn_auto {
		top: 9%;
		left: 1.7%;
		width: 18vw;
		height: 4vw;
	}

	.btn_auto_1 {
		width: 18vw;
		height: 4vw;
	}


	#btn_01 {
		top: 54%;
		left: 29.5%;
	}

	#btn_02 {
		top: 36%;
		left: 26%;
	}

	#btn_03 {
		top: 49%;
		left: 35%;
	}

	#btn_04 {
		top: 36%;
		left: 41.5%;
	}

	#btn_05 {
		top: 42%;
		left: 52%;
	}

	#btn_06 {
		top: 32%;
		left: 56.5%;
	}

	#btn_07 {
		top: 23%;
		left: 90%;
	}

	#btn_08 {
		top: 46%;
		left: 40%;
	}

	#btn_09 {
		top: 34%;
		left: 21.5%;
	}

	#btn_10 {
		top: 24%;
		left: 32%;
	}

	#btn_11 {
		top: 62%;
		left: 91%;
	}

	#btn_12 {
		top: 9%;
		left: 86%;
	}

	#btn_13 {
		top: 48%;
		left: 62.5%;
	}

	#btn_14 {
		top: 62%;
		left: 39%;
	}

	#btn_15 {
		top: 46%;
		left: 32%;
	}

	#btn_16 {
		top: 38%;
		left: 36%;
	}

	#btn_17 {
		top: 82%;
		left: 91%;
	}

	#btn_18 {
		top: 34%;
		left: 31.5%;
	}

	#btn_19 {
		top: 46%;
		left: 47%;
	}

	#btn_20 {
		top: 9%;
		left: 92%;
	}

	#btn_21 {
		top: 21%;
		left: 35.5%;
	}

	#btn_22 {
		top: 17.5%;
		left: 93.5%;
	}

	#btn_23 {
		top: 3.5%;
		left: 51%;
	}

	#btn_24 {
		top: 5.5%;
		left: 89%;
	}

	#btn_25 {
		top: 68%;
		left: 86%;
	}

	#btn_26 {
		top: 24%;
		left: 86%;
	}


}


/* デバイスが横向きの場合のスタイルを記述 */
@media (orientation: landscape){



}