@charset "utf-8";




/*----------------------------------------
	for PC
----------------------------------------*/


@media screen and (min-width: 641px){



/*  */


.main{padding:90px 0 90px;}
.catch{background:url(../img/system/system_title.png);width:236px;height:67px;margin:0px auto 0px;}


#content{background:url(../img/system/bg.jpg);background-size:cover; padding:0px 0 0px;background-attachment:fixed;}
h3 .text{text-indent:-9999px;height:0px;display:block;}

#content .inner_centering{max-width:1200px;width:90%;padding:60px 0 60px;position:relative;}
#content .inner_centering:after{content:'';display:block;clear:both;}

.contentbox{background-color:rgba(0,0,0,0.7);position:relative;}
.contentbox:before{content:'';display:block;height:4px;background-color:#807029;top:0;width:100%;position:absolute;}
.contentbox:after{content:'';display:block;height:1px;background-color:#807029;top:7px;width:100%;position:absolute;}

.area{position:relative;background-image:url(../img/system/bg_section.png);background-position:center bottom;background-repeat:no-repeat;padding:60px 50px;width:980px;margin:0 auto;}

.headline{font-size:40px;font-weight:bold;color:#fff;background:url(../img/system/head_line.png) no-repeat center bottom;text-align:center;margin-bottom:25px;}
.readtext{color:#fff;margin-bottom:40px;}

.area:after{content:'';display:block;clear:both;}
.area .textarea{color:#fff;width:400px;float:left;}
.area .textarea p{color:#fff;}
.area.a01 .textarea:after{content:'';display:block;background-image:url(../img/system/icon_01.png);width:306px;height:316px;position:absolute;top:-10px;left:-40px;background-repeat:no-repeat;}



.area.a02 .textarea:after{content:'';display:block;background-image:url(../img/system/icon_02.png);width:182px;height:232px;position:absolute;top:50px;left:-40px;background-repeat:no-repeat;}
.area.a03 .textarea:after{content:'';display:block;background-image:url(../img/system/icon_03.png);width:244px;height:269px;position:absolute;top:30px;left:-40px;background-repeat:no-repeat;}
.area.a04 .textarea:after{content:'';display:block;background-image:url(../img/system/icon_04.png);width:246px;height:197px;position:absolute;top:70px;left:-40px;background-repeat:no-repeat;}

.area h4{font-weight:bold;font-size:30px;margin-bottom:14px;}
.area .image{border:1px solid #807029;width:500px;float:right;position:relative;}
.area .image img{width:100%;display:block;}

.area:before {content: '';position: absolute;bottom: 0;left: 0;right: 0;width: 100%;height: 1px;margin: 0 auto;text-align: center;background-image: -webkit-linear-gradient(left, transparent, #807029 25%, #807029 75%, transparent);background-image: linear-gradient(to right, transparent, #807029 25%, #807029 75%, transparent);background-position: center;background-repeat: no-repeat;z-index:20;}
/* .area:last-of-type:before {display:none;} */


/*  */

.centering{text-align:center;}


.cbox:after{content:'';display:block;width:40px;height:40px;background-image:url(../img/character/to_zoom.png);display:block;text-indent:-9999px;position:absolute;right:8px;bottom:8px;border-radius:50%;background-size:40px;box-shadow:rgba(0,0,0,0.5);overflow:hidden;box-shadow:0px 0px 3px rgba(0,0,0,0.5);transition:all 0.5s;}
.cbox:hover:after{box-shadow:3px 3px 10px rgba(0,0,0,0.5);background-color:#fff;}
.cbox:hover img{opacity:0.9;}


.textarea span{ color:#4d76e8;}
.head_visual{ text-align:center; padding-top:10px; width:100%; margin-bottom: -30px; text-align:center}
.head_visual img{ width:100%; max-width:1200px;}
.rules{ background-color: rgba(226, 216, 150, 0.8); border-radius: 10px; padding: 20px; width: 88%; margin: 0 auto; font-size: 95%; border: solid 1px #ffd300; box-shadow: 0 0 10px #fff; max-width: 960px; text-align:center;}
.rules h3{ padding-bottom: 10px; font-weight: 600;}
.rules ul{position: relative; display: inline-block; margin: 0 auto 10px; text-align:left; margin-left: 1em;}
.rules li{ list-style: disc;}
.movies{ margin: 50px auto; max-width: 980px;}
.iframe_box { width: 100%; padding-top: 56.25%; position: relative;}
.iframe_box iframe { position: absolute; top: 0; width: 100%; height: 100%;}



/* tabfunction */

div.none{display:none;}


/* tabstyle */

#tab{text-align:center;font-size:0;}
#tab a{display:inline-block;position: relative;background-image: none;background-position: center bottom;background-repeat: no-repeat;padding: 15px 60px;width: auto;margin: 0 auto;background-color:rgb(51, 38, 17);font-size:22px;color:#fff;box-shadow:0 0 5px rgba(0,0,0,0.5);}
#tab a.on{background-color:#816e21;color:#fff;z-index:5;}



.center_area{
	padding:0px 50px;width:980px;margin:0 auto;
}

.center_area p{color:#fff;}

.main_text h2{font-weight:800;color:#fff;font-size:40px;text-align:center;}
.main_text .leftSide{display:inline-block;vertical-align:middle;padding-left:40px;}
.main_text .rightSide{display:inline-block;width:500px;vertical-align:middle;font-size:20px;}


.tab_list{position:relative;font-size:0px;text-align:center;border-bottom:1px solid #807029;padding-bottom:12px;padding-top:50px;}
/* .tab_list:after{content: '';position: absolute;bottom: 0;left: 0;right: 0;width: 100%;height: 1px;margin: 0 auto;text-align: center;background-image: -webkit-linear-gradient(left, transparent, #807029 25%, #807029 75%, transparent);background-image: linear-gradient(to right, transparent, #807029 25%, #807029 75%, transparent);background-position: center;background-repeat: no-repeat;z-index:20;} */

.tab_list li a{color:#fff;font-size:23px;}
.tab_list li {color:#fff;border:2px solid #807029;padding: 5px 30px;display:inline-block;border-radius:27px;margin:0 2px;}
.tab_list li.active {background-color:#807029;}


/* tab s02 */

.tab.s02{padding:60px 0 0;}


.tab.s01 h4{font-weight:800;font-size:40px;text-shadow:0 0 15px rgba(214, 161, 0, 0.9),0 0 20px rgba(214, 161, 0, 0.9);text-align:center;padding:70px 0 50px;}

.tab{color:#fff;}


.absolute_area{position:relative;min-width:1000px;}

.absolute_area.n01 {height:1600px;}

.absolute_area.n01 .img_abs_01{width:70%;position:absolute;z-index:0;top:20px;}
.absolute_area.n01 .img_abs_02{width:1200px;position:absolute;z-index:2;top:500px;left:-500px;}

h5{font-size:24px;font-weight:800!important;color:#cebc6d;}

.absolute_area.n01 .abs_01{width:460px;position:absolute;z-index:5;right:5px;}
.absolute_area.n01 .abs_01 h5{text-shadow:0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9);}
.absolute_area.n01 .abs_01 img{width:100%;border:1px solid #cebc6d;box-shadow:0px 0px 8px rgba(0,0,0,0.9);}
.absolute_area.n01 .abs_01 p{text-shadow:0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9);}



.absolute_area.n01 .abs_01_1{width:auto;z-index:5;border:1px solid #807029;background-color:rgba(60, 48, 16, 0.8);padding:15px;border-radius:10px;font-size:14px;margin-top:23px;}
.absolute_area.n01 .abs_01_1 p{text-shadow:0 0 0 rgba(0,0,0,0),0 0 0 rgba(0,0,0,0),0 0 0 rgba(0,0,0,0);}
.absolute_area.n01 .abs_01_1 h5{font-size:19px;}
.absolute_area.n01 .abs_01_1 img{width:150px;border:none;box-shadow:none;}
.absolute_area.n01 .abs_01_1 .textarea{width:260px;float:right;}


.absolute_area.n01 .abs_02{width:800px;position:absolute;z-index:5;top:620px;right:0px;padding-top:40px;}
.absolute_area.n01 .abs_02 .textarea{float:left;width:310px;padding-top:60px;}
.absolute_area.n01 .abs_02 img{width:470px;float:right;margin-top:0px;border:1px solid #cebc6d;}
.absolute_area.n01 .abs_02:before{content: '';position: absolute;top: 0;left: 0;right: 0;width: 100%;height: 1px;margin: 0 auto;text-align: center;background-image: -webkit-linear-gradient(left, transparent, #807029 25%, #807029 75%, transparent);background-image: linear-gradient(to right, transparent, #807029 25%, #807029 75%, transparent);background-position: center;background-repeat: no-repeat;z-index:20;}


.absolute_area.n01 .abs_02_1{width:800px;position:absolute;z-index:5;top:880px;right:0px;}
.absolute_area.n01 .abs_02_1 .textarea{float:right;width:320px;padding-top:60px;}
.absolute_area.n01 .abs_02_1 img{width:450px;float:left;margin-top:0px;border:1px solid #cebc6d;}

.absolute_area.n01 .abs_02_2{width:770px;position:absolute;z-index:5;top:1180px;right:0px;border:1px solid #807029;background-color:rgba(60, 48, 16, 0.8);padding:15px;border-radius:10px;font-size:14px;}
.absolute_area.n01 .abs_02_2 .textarea{float:right;width:540px;padding-top:0px;}
.absolute_area.n01 .abs_02_2 img{width:190px;float:left;margin-top:0px;}


/* .absolute_area.n01 .abs_03{width:800px;position:absolute;z-index:5;top:1310px;right:25px;border:1px solid #807029;background-color:rgba(60, 48, 16, 0.8);padding:20px;border-radius:10px;}

.absolute_area.n01 .abs_03 .textarea{float:right;width:520px;}
.absolute_area.n01 .abs_03 img{width:220px;float:left;} */

.absolute_area.n01 .abs_03{width:770px;position:absolute;z-index:5;top:1340px;right:0px;border:1px solid #807029;background-color:rgba(60, 48, 16, 0.8);padding:15px;border-radius:10px;font-size:14px;}
.absolute_area.n01 .abs_03 .textarea{float:right;width:540px;padding-top:0px;}
.absolute_area.n01 .abs_03 img{width:190px;float:left;margin-top:0px;}


.absolute_area.n01 .direct01{position:absolute;bottom:-20px;left:40%;}


.absolute_area.n02{z-index:10;position:relative;}
.absolute_area.n02 h4{text-align:left;padding:0;}
.absolute_area .readtext{width:53%;}
.absolute_area .readimage{width:65%;}



.absolute_area.n02 .abs_01{width:450px;position:absolute;z-index:5;right:0px;top:90px;}
.absolute_area.n02 .abs_01 h5{text-shadow:0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9);}
.absolute_area.n02 .abs_01 img{width:100%;border:1px solid #cebc6d;box-shadow:0px 0px 8px rgba(0,0,0,0.9);}
.absolute_area.n02 .abs_01 p{text-shadow:0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9);}

.absolute_area.n02 .textarea{width:100%;float:right;}
.direct02{margin:20px 0;}
.endtext{font-size:25px;}

}



@media screen and (min-width: 1551px) {/*大画面用サイズ変更*/
#visual{padding-top:55%;background-position:center center;background-size:cover;}
#content_story_character{background-size:100%;}
}











/*----------------------------------------
	for SP
----------------------------------------*/


@media screen and (max-width: 640px) {
	.main{padding:30px 0 30px;}
	.catch{background:url(../img/system/system_title.png) no-repeat;width:140px;height:35px;margin:0px auto 0px;background-size:100%;}


	#content{background:url(../img/system/bg.jpg);background-size:cover; padding:0px 0 0px;background-attachment:fixed;}
	h3 .text{text-indent:-9999px;height:0px;display:block;}

	#content .inner_centering{max-width:100%;width:90%;padding:40px 0 0px;position:relative;}
	#content .inner_centering:after{content:'';display:block;clear:both;}

	.contentbox{background-color:rgba(0,0,0,0.7);position:relative;}
	.contentbox:before{content:'';display:block;height:4px;background-color:#807029;top:0;width:100%;position:absolute;}
	.contentbox:after{content:'';display:block;height:1px;background-color:#807029;top:7px;width:100%;position:absolute;}

	.area{position:relative;background-image:url(../img/system/bg_section.png);background-position:center bottom;background-repeat:no-repeat;padding:50px 0px 60px;width:100%;margin:0 auto;}

	.headline{font-size:30px;font-weight:bold;color:#fff;background:url(../img/system/head_line.png) no-repeat center bottom;text-align:center;margin-bottom:25px;}
	.readtext{color:#fff;margin-bottom:40px;font-size:14px;}

	.area:after{content:'';display:block;clear:both;}
	.area .textarea{color:#fff;width:100%;margin-bottom:15px;}
	.area .textarea p{color:#fff;font-size:14px;}
	.area.a01 .textarea:after{content:'';display:block;background-image:url(../img/system/icon_01.png);width:200px;height:206px;position:absolute;top:0px;right:-10px;background-repeat:no-repeat;background-size:100%;}
	.area.a02 .textarea:after{content:'';display:block;background-image:url(../img/system/icon_02.png);width:130px;height:165px;position:absolute;top:30px;right:10px;background-repeat:no-repeat;background-size:100%;}
	.area.a03 .textarea:after{content:'';display:block;background-image:url(../img/system/icon_03.png);width:160px;height:269px;position:absolute;top:20px;right:10px;background-repeat:no-repeat;background-size:100%;}

	.area.a04 .textarea:after{content:'';display:block;background-image:url(../img/system/icon_04.png);width:246px;height:197px;position:absolute;top:70px;right:-50px;background-repeat:no-repeat;background-size:100%;}

	.area:last-of-type{padding-bottom:60px;}
	.area:last-of-type:before{display:none!important;}

	.area h4{font-weight:bold;font-size:24px;margin-bottom:10px;}
	.area .image{border:1px solid #807029;width:100%;position:relative;}
	.area .image img{width:100%;display:block;}

	.area:before {content: '';position: absolute;bottom: 0;left: 0;right: 0;width: 100%;height: 1px;margin: 0 auto;text-align: center;background-image: -webkit-linear-gradient(left, transparent, #807029 25%, #807029 75%, transparent);background-image: linear-gradient(to right, transparent, #807029 25%, #807029 75%, transparent);background-position: center;background-repeat: no-repeat;z-index:20;}
	/* .area:last-of-type:before {display:none;} */

	.line{position:relative;}
	.line:before{content: '';position: absolute;bottom: 0;left: 0;right: 0;width: 100%;height: 1px;margin: 0 auto;text-align: center;background-image: -webkit-linear-gradient(left, transparent, #807029 25%, #807029 75%, transparent);background-image: linear-gradient(to right, transparent, #807029 25%, #807029 75%, transparent);background-position: center;background-repeat: no-repeat;z-index:20;}


		.cbox:after{content:'';display:block;width:30px;height:30px;background-image:url(../img/character/to_zoom.png);display:block;text-indent:-9999px;position:absolute;right:3px;bottom:3px;border-radius:50%;background-size:30px;box-shadow:rgba(0,0,0,0.5);overflow:hidden;box-shadow:0px 0px 3px rgba(0,0,0,0.5);transition:all 0.5s;}

		.textarea span{ color:#b4af77;margin-top:1em;display:inline-block;}
		.head_visual{ text-align:center; padding-top:10px; width:100%; margin-bottom: -30px; text-align:center}
		.head_visual img{ width:100%; max-width:1200px;}
		.rules{ background-color: rgba(226, 216, 150, 0.8); border-radius: 10px; padding: 20px; width: 88%; margin: 0 auto; font-size: 95%; border: solid 1px #ffd300; box-shadow: 0 0 10px #fff; max-width: 960px; text-align:center;}
		.rules h3{ padding-bottom: 10px; font-weight: 600;line-height:1.3;}
		.rules ul{position: relative; display: inline-block; margin: 0 auto 10px; text-align:left; margin-left: 1em;}
		.rules li{ list-style: disc;font-size:14px!important;}
		.movies{ margin: 50px auto; max-width: 980px;}
		.iframe_box { width: 100%; padding-top: 56.25%; position: relative;}
		.iframe_box iframe { position: absolute; top: 0; width: 100%; height: 100%;}

		#content .contentbox.online .inner_centering{padding-bottom:50px;}

		/* tabfunction */

		div.none{display:none;}


		/* tabstyle */

		#tab{text-align:center;font-size:0;}
		#tab a{display:inline-block;position: relative;background-image: none;background-position: center bottom;background-repeat: no-repeat;padding: 12px 30px;width: auto;margin: 0 auto;background-color:rgb(51, 38, 17);font-size:12px;color:#fff;box-shadow:0 0 5px rgba(0,0,0,0.5);}
		#tab a.on{background-color:#816e21;color:#fff;z-index:5;}



		.center_area{
			padding:0px 0px;width:100%;margin:0 auto;
		}

		.center_area p{color:#fff;}

		.main_text h2{font-weight:800;color:#fff;font-size:30px;text-align:center;}
		.main_text .leftSide{display:block;vertical-align:middle;width:60%;margin:0 auto;}
		.main_text .rightSide{display:inline-block;width:100%;vertical-align:middle;font-size:14px;}


		.tab_list{position:relative;font-size:0px;text-align:center;border-bottom:1px solid #807029;padding-bottom:12px;padding-top:50px;}
		/* .tab_list:after{content: '';position: absolute;bottom: 0;left: 0;right: 0;width: 100%;height: 1px;margin: 0 auto;text-align: center;background-image: -webkit-linear-gradient(left, transparent, #807029 25%, #807029 75%, transparent);background-image: linear-gradient(to right, transparent, #807029 25%, #807029 75%, transparent);background-position: center;background-repeat: no-repeat;z-index:20;} */

		.tab_list li a{color:#fff;font-size:14px;}
		.tab_list li {color:#fff;border:2px solid #807029;padding: 5px 30px;display:inline-block;border-radius:27px;margin:0 2px;}
		.tab_list li.active {background-color:#807029;}


		/* tab s02 */

		.tab.s02{padding:60px 0 0;}


		.tab.s01 h4{font-weight:800;font-size:25px;line-height:1.3;text-shadow:0 0 15px rgba(214, 161, 0, 0.9),0 0 20px rgba(214, 161, 0, 0.9);text-align:center;padding:30px 0 20px;}

		.tab{color:#fff;}


		.absolute_area{position:relative;}

		.absolute_area p{font-size:14px;}

		.absolute_area.n01 .img_abs_01{width:114%;z-index:0;margin-left:-7%;}
		.absolute_area.n01 .img_abs_02{width:750px;z-index:2;display:none;}

		h5{font-size:18px;font-weight:800!important;color:#cebc6d;}

		.absolute_area.n01 .abs_01{margin-top:30px;}
		.absolute_area.n01 .abs_01 img{width:100%;border:1px solid #cebc6d;box-shadow:0px 0px 8px rgba(0,0,0,0.9);}
		.absolute_area.n01 .abs_01 p{text-shadow:0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9);}

		.absolute_area.n01 .abs_01_1{z-index:5;border:1px solid #807029;background-color:rgba(60, 48, 16, 0.8);padding:15px;border-radius:10px;margin-top:20px;}
		.absolute_area.n01 .abs_01_1 img{width:40%;margin:0 auto 10px; display:block;border:1px solid #cebc6d;display:none;}
				.absolute_area.n01 .abs_01_1 p{font-size:12px;}

				.absolute_area.n01 .abs_02{margin-top:40px;position:relative;padding-top:40px;}
				.absolute_area.n01 .abs_02 img{width:100%;border:1px solid #cebc6d;box-shadow:0px 0px 8px rgba(0,0,0,0.9);}
				.absolute_area.n01 .abs_02 p{text-shadow:0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9);}


				.absolute_area.n01 .abs_02:before{content: '';position: absolute;top: 0;left: 0;right: 0;width: 100%;height: 1px;margin: 0 auto;text-align: center;background-image: -webkit-linear-gradient(left, transparent, #807029 25%, #807029 75%, transparent);background-image: linear-gradient(to right, transparent, #807029 25%, #807029 75%, transparent);background-position: center;background-repeat: no-repeat;z-index:20;}

				.absolute_area.n01 .abs_02_1{margin-top:30px;}
				.absolute_area.n01 .abs_02_1 img{width:100%;border:1px solid #cebc6d;box-shadow:0px 0px 8px rgba(0,0,0,0.9);}
				.absolute_area.n01 .abs_02_1 p{text-shadow:0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9);}

				.absolute_area.n01 .abs_02_2{z-index:5;border:1px solid #807029;background-color:rgba(60, 48, 16, 0.8);padding:15px;border-radius:10px;margin-top:30px;}
				.absolute_area.n01 .abs_02_2 .textarea p{font-size:12px;}
				.absolute_area.n01 .abs_02_2 img{width:100%;}


		.absolute_area.n01 .abs_03{z-index:5;border:1px solid #807029;background-color:rgba(60, 48, 16, 0.8);padding:15px;border-radius:10px;margin-top:20px;}
		.absolute_area.n01 .abs_03 .textarea p{font-size:12px;}
		.absolute_area.n01 .abs_03 img{width:100%;display:none;}

		.absolute_area.n01 .direct01{width:130px;margin:15px auto 40px;display:block;}


		.absolute_area.n02 h4{text-align:center;padding:0;font-size:35px;margin-bottom:10px;}
		.absolute_area .readtext{width:100%;margin-bottom:0;}
		.absolute_area .readimage{width:114%;margin-left:-7%;margin-top:20px;}



		.absolute_area.n02 .abs_01{z-index:5;margin-top:30px;margin-bottom:30px;}
		.absolute_area.n02 .abs_01 h5{text-shadow:0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9);}
		.absolute_area.n02 .abs_01 img{width:100%;border:1px solid #cebc6d;box-shadow:0px 0px 8px rgba(0,0,0,0.9);}
		.absolute_area.n02 .abs_01 p{text-shadow:0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9),0px 0px 8px rgba(0,0,0,0.9);}

		.absolute_area.n02 .textarea{width:100%;}
		.direct02{width:130px;margin:10px auto 0;display:block;}
		.endtext{font-size:18px;line-height:1.4;text-align:center;margin-top:30px;}



}