html {
	width: 100%;
	background: #000000;
/* 	font-family: 'Noto Serif JP', serif; */
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	position: relative;
}
	body.f #jujutsukaisen {
		margin-right: 15px;
	}
	
	body {
		line-height: 1;
		-webkit-text-size-adjust: 100%;
		margin: 0;
		width: 100%;
		position: relative;
		z-index: 1;
	}
		article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
			display: block
		}
		iframe { overflow-y: hidden; z-index: 1 !important; }
		
#jujutsukaisen {
	position: relative;
	z-index: 1;
	overflow: hidden;
	margin: 0 auto 0 auto;
	color: #ffffff;
}

#jujutsukaisen .fade {
	-webkit-transition: all .3s;
	transition: all .3s;
}

/*-----------------------------------------------------------
	base setting
-----------------------------------------------------------*/
p { margin: 0 0 0 0; }

a { text-decoration: underline; color: #ffffff; word-break: break-all; }
	a:hover { text-decoration: none; }
	a:focus { outline: none; }
	
.pc { display: block !important; }
.sp { display: none !important; }


.fade {
	filter: drop-shadow(0 0 0 #000000);
}
.fade img:hover {
	opacity: 0.7;

}

.sha01 {
	filter: drop-shadow(0 0 6px #0b2025);
}
.sha02 {
	filter: drop-shadow(0 0 8px #000000);
}
.sha03 {
	filter: drop-shadow(0 0 12px #000000);
}



					/*===================sp=*/@media screen and (max-width: 860px) {

.pc { display: none !important; }
.sp { display: block !important; }

.fade:hover img {
	opacity: 1;
}

.sha01 {
	filter: drop-shadow(0 0 2px #0b2025);
}
.sha02 {
	filter: drop-shadow(0 0 2px #000000);
}
.sha03 {
	filter: drop-shadow(0 0 8px #000000);
}

					}/*====================*/

/*-----------------------------------------------------------
	text setting
-----------------------------------------------------------*/

h2 img ,
h3 img ,
h4 img ,
.img img {
	pointer-events : none !important;
}

.flt {
	text-decoration: line-through;
}

.fcR { color: #e62a05; }
.fcG { color: #a4a4a4; }
.fcB { color: #abebef; }
.fcY { color: #ffa282; }

.note {
	color: #315b6d;
	font-size: 12px;
}

					/*===================sp=*/@media screen and (max-width: 860px) {

.note {
	font-size: 2.4vw;
}

					}/*====================*/

	
/*-----------------------------------------------------------
	header setting
-----------------------------------------------------------*/

#header {
	width: 100%;
	position: relative;
	margin: 0 0 0 0;
	z-index: 100;
}
.inner #header {
	display: none;
}
#header.fixed {
	position: fixed;
	top: 0;
	left: 0;
}
.inner #header.fixed {
	display: block;
}
	.headerWrap {
		width: 100%;
		padding: 20px 0 5px 0;
		margin: 0 auto 0 auto;
		z-index: 9999;
		position: absolute;
		top: 0;
		background: rgba(0, 0, 0, 0.60);
	}

	.fixed .headerWrap {
	}
	
		#g_navi {
			width: 100%;
			max-width: 800px;
			margin: 0 auto 0 auto;
			padding: 0 0 0 0;
			position: relative;
		}
		.inner #g_navi {
		}
			#g_navi #menuBtn {
				display: none;
			}
			#g_navi #menuClose {
				display: none;
			}
			#g_navi .navi {
				display: none;
			}
			#g_menu {
				width: 100%;
				padding: 0 0 0 0;
				position: relative;
			}
				#g_navi .navBox {
					width: 100%;
					margin: 0 0 0 0;
					padding: 0 0 0 0;
					border: none;
					background: none;
				}
					#g_menu .hdBox {
						display: none;
					}
	
					#g_navi .nav {
						width: auto;
						margin: 0 0 0 0;
					}
					.fixed #g_navi .nav {
					}
						#g_navi .nav .navtit {
							width: 70%;
							margin: 0 auto 0 auto;
							display: none;
						}
						#g_navi .nav .main {
							width: 100%;
							margin: 0 auto 0 auto;
							display: -webkit-flex;
							display: flex;
							-webkit-align-items: center;
							align-items:         center;
							-webkit-justify-content: center;
							justify-content:         center;
							-ms-flex-wrap: wrap;
							flex-wrap: wrap;
						}
							#g_navi .nav .main li {
								width: 24%;
								padding: 0 0 0 0;
								margin: 0 0 0 0;
								line-height: 0;
							}
								#g_navi .nav li a {
									display: block;
								}
								#g_navi .nav li.nav_logo {
									width: 31%;
									margin: 0 0 0 0;
										position: relative;
								}
									#g_navi .nav li.nav_logo a {
										margin-top: 0;
									}
									#g_navi .nav .main .nav_logo a:before {
										content: "";
										width: 100%;
										padding-top: 16%;
										display: block;
										position: relative;
									}
									#g_navi .nav .main .nav_logo a:after {
										content: "";
										width: 100%;
										padding-top: 50%;
										display: block;
										background: url(../img/logo_game.png) no-repeat center top;
										background-size: auto 100%;
										position: absolute;
										bottom: -80%;
										left: 2.5%;
									}
								#g_navi .nav li.nav_logo img {
									display: none;
								}
								#g_navi .nav li.nav_price {
									width: 11.5%;
									margin: 0 0 0 2%;
								}
								#g_navi .nav li.nav_news {
									width: 10.625%;
									margin: 0 0 0 2%;
								}
								#g_navi .nav li.nav_story {
									width: 12.25%;
									margin: 0 0 0 33%;
								}
								#g_navi .nav li.nav_character {
									width: 18.25%;
									margin: 0 0 0 2%;
								}
								#g_navi .nav li.nav_howto {
									width: 19.875%;
									margin: 0 0 0 8.5%;
								}
								#g_navi .nav li.nav_faq {
									width: 18.625%;
									margin: 0 2% 0 2%;
								}
									#g_navi .nav li.nav_faq img {
										margin-top: 1.5%;
									}
								#g_navi .nav li.nav_goods {
									width: 11.5%;
									margin: 0 0 0 2.5%;
								}
								
								



					/*===================sp=*/@media screen and (max-width: 860px) {

#header {
	top: 0;
	left: 0;
	z-index: 10;
	position: fixed;
}
.inner #header {
	display: block;
}
#header.fixed {
	position: fixed;
	display: block;
}
.inner #header.fixed {
	display: block;
}
	.headerWrap {
		width: 100%;
		padding: 0 0 0 0;
		margin: 0 auto 0 auto;
		position: absolute;
		top: 0;
		background: rgba(0, 0, 0, 0.60);
	}
	.fixed .headerWrap {
	}
	
		#g_navi {
			margin: 0;
			width: 100%;
			height: auto;
			text-align: center;
			padding: 0 0 0 0;
			top: 0;
			position: absolute;
		}
		#header.fix #g_navi {
			top: 0;
			position: fixed;
		}
		
			#g_menu {
				position: absolute;
				width: 100%;
				margin: 0 0 0 0;
				padding: 0 0 0 0;
				z-index: 1000;
				display: none;
				opacity: 0;
				top: 0;
				bottom: 0;
			}
				#g_menu.open{
					display: block;
					animation: show 0.5s ease-out 0s forwards;
				}
				@keyframes show{
				    from{
				        opacity: 0;
				    }
				    to{
				        opacity: 1;
				    }
				}

			.fix #g_menu {
				top: 0;
			}
				#g_menu .hdBox {
					position: relative;
					overflow: hidden;
					display: block;
					width: 100%;
					margin: 0 auto 0 auto;
					padding: 0 0 0 0;
				}
					#g_navi #menuBtn {
						width: 7%;
						max-width: 60px;
						margin: 15px 5% 10px 0;
						float: right;
						line-height: 0;
						display: block;
					}
					.f #g_navi #menuBtn {
						display: none;
					}
					#g_navi #menuClose {
						width: 7%;
						max-width: 60px;
						margin: 15px 5% 0 0;
						float: right;
						display: block;
					}
					
				#g_navi .navi {
					position: relative;
					overflow: hidden;
					display: block;
					width: 100%;
					margin: 0 auto 0 auto;
					padding: 0 0 0 0;
				}
					
				#g_navi .navBox {
					width: 100%;
					margin: 0 0 0 0;
					padding: 0 0 0 0;
					border: none;
					background: none;
					
					background: rgba(0, 0, 0, 0.95);
					width: 100%;
					margin: 0 auto 0 auto;
					overflow: hidden;
					padding: 0 0 200vw 0;
				}

					#g_navi .nav {
						width: auto;
						margin: 0 0 0 0;
						
						width: 80%;
						margin: 0 auto 0 auto;
						font-size: 23px;
						color: #EEEEEE;
						overflow: hidden;
		
					}
					.fixed #g_navi .nav {
						ma
					}
						#g_navi .nav .navtit {
							width: 70%;
							margin: 0 auto 0 auto;
							display: block;
						}
							#g_navi .nav .navtit img {
								display: block;
							}
						#g_navi .nav .main {
							width: 100%;
							display: block;
							width: 100%;
							
							
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
						}
							#g_navi .nav .main li {
								width: 100%;
								padding: 0 0 0 0;
								line-height: 0;
							}
								#g_navi .nav li a {
									display: block;
									width: 100%;
									height: 100%;
								}
								#g_navi .nav .main li img {
									display: none;
								}

								#g_navi .nav li.nav_logo {
									width: 70%;
									margin: -10px auto 10px auto;
									display: block;
									  -webkit-box-ordinal-group: -1;
									             -ms-flex-order: -1;
									                      order: -1;

								}
									#g_navi .nav li.nav_logo img {
										display: block;
									}
										#g_navi .nav .main .nav_logo a:before,
										#g_navi .nav .main .nav_logo a:after {
											display: none;
										}
								
								
								#g_navi .nav li.nav_price {
/* 									width: 45.5%; */
									width: 100%;
									margin: 0 auto 15px auto;
								}
									#g_navi .nav li.nav_price a:after {
										content: "";
										width: 100%;
										padding-top: 14%;
										display: block;
										background: url(../img/price_tit.svg) no-repeat center top;
									}
								#g_navi .nav li.nav_news {
/* 									width: 42.16666666666667%; */
									width: 100%;
									margin: 0 auto 15px auto;
								}
									#g_navi .nav li.nav_news a:after {
										content: "";
										width: 100%;
										padding-top: 14%;
										display: block;
										background: url(../img/news_tit.svg) no-repeat center top;
									}
								#g_navi .nav li.nav_story {
/* 									width: 48.833333333333336%; */
									width: 100%;
									margin: 0 auto 15px auto;
  -webkit-box-ordinal-group: 1;
             -ms-flex-order: 1;
                      order: 1;

								}
									#g_navi .nav li.nav_story a:after {
										content: "";
										width: 100%;
										padding-top: 14%;
										display: block;
										background: url(../img/story_tit.svg) no-repeat center top;
									}
								#g_navi .nav li.nav_character {
/* 									width: 72.16666666666667%; */
									width: 100%;
									margin: 0 auto 15px auto;
  -webkit-box-ordinal-group: 1;
             -ms-flex-order: 1;
                      order: 1;

								}
									#g_navi .nav li.nav_character a:after {
										content: "";
										width: 100%;
										padding-top: 14%;
										display: block;
										background: url(../img/character_tit.svg) no-repeat center top;
									}
								#g_navi .nav li.nav_howto {
/* 									width: 78.83333333333333%; */
									width: 100%;
									margin: 0 auto 15px auto;
								}
									#g_navi .nav li.nav_howto a:after {
										content: "";
										width: 100%;
										padding-top: 14%;
										display: block;
										background: url(../img/howto_tit.svg) no-repeat center top;
									}
								#g_navi .nav li.nav_faq {
/* 									width: 65.41666666666667%; */
									width: 100%;
									margin: 0 auto 15px auto;
  -webkit-box-ordinal-group: 1;
             -ms-flex-order: 1;
                      order: 1;

								}
									#g_navi .nav li.nav_faq a:after {
										content: "";
										width: 100%;
										padding-top: 14%;
										display: block;
										background: url(../img/faq_tit.svg) no-repeat center top;
									}
								#g_navi .nav li.nav_goods {
									width: 100%;
									margin: 0 auto 15px auto;
  -webkit-box-ordinal-group: 1;
             -ms-flex-order: 1;
                      order: 1;

								}
									#g_navi .nav li.nav_goods a:after {
										content: "";
										width: 100%;
										padding-top: 14%;
										display: block;
										background: url(../img/goods_tit.svg) no-repeat center top;
									}
								
							
				
					}/*====================*/
					
					/*===================sp=*/@media screen and (min-width: 860px) {

			#g_menu {
				display: block !important;
			}
				
					}/*====================*/
	
	
/*-----------------------------------------------------------
	#content setting
-----------------------------------------------------------*/
#content {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto 0 auto;
	padding: 0 0 0 0;
	z-index: -1;
	position: relative;
	font-size: 16px;
	line-height: 1.8;
	color: #ffffff;
	z-index: 0;
	overflow: hidden;
	
	background: url(../img/bg00_p.jpg) repeat-y;
	background-size: 100% auto;
	
}
	.contentWrap:before {
		content: "";
		width: 200px;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: linear-gradient(90deg, rgba(0,0,0,1) 0, rgba(0,0,0,0) 100%);
		z-index: 10;
	}
	.contentWrap:after {
		content: "";
		width: 200px;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
		z-index: 10;
	}
	.contentWrap {
		width: 100%;
		max-width: 1300px;
		margin: 0 auto 0 auto;
		position: relative;
	}
	
		.contentWrap.contenbg01 .bg {
			-webkit-mask-image: url(../img/mask_01.png);
			mask-image: url(../img/mask_01.png);
			mask-mode: luminance;
			-webkit-mask-repeat: repeat-x;
			mask-repeat: repeat-x;
			-webkit-mask-size: auto 100%;
			mask-size: auto 100%;
		}
		.contentWrap.contenbg02 .bg,
		.contentWrap.contenbg03 .bg,
		.contentWrap.contenbg04 .bg {
			-webkit-mask-image: url(../img/mask_02.png);
			mask-image: url(../img/mask_02.png);
			mask-mode: luminance;
			-webkit-mask-repeat: repeat-x;
			mask-repeat: repeat-x;
			-webkit-mask-size: auto 100%;
			mask-size: auto 100%;
		}

		/*intro*/
		.contentWrap.contenbg01 .bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			background: url(../img/bg01.png) no-repeat center top;
			background-size: cover;
		}
		/*point*/
		.contentWrap.contenbg02 .bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			background: url(../img/bg02.png) no-repeat center top;
			background-size: cover;
		}
		/*story*/
		.contentWrap.contenbg03 .bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			background: url(../img/bg03.png) no-repeat center top;
			background-size: cover;
		}
		/*howto*/
		.contentWrap.contenbg04 .bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			background: url(../img/bg04.png) no-repeat center top;
			background-size: cover;
		}
		
			.contentBox {
				max-width: 800px;
				margin: 0 auto 0 auto;
				padding: 60px 0 60px 0;
				position: relative;
			}
			.inner .contentBox {
				max-width: 800px;
				margin: 0 auto 0 auto;
				padding: 50px 0 60px 0;
				position: relative;
			}
		
#content h2 {
	width: 100%;
	max-width: 450px;
	margin: 0 auto 0 auto;
	text-align: center;
	line-height: 0;
}

	#content h2 img {
		width: 100%;
	}
	
.inner #content h2 {
	width: 100%;
	max-width: 600px;
	margin: 0 auto 40px auto;
	text-align: center;
	position: relative;
	padding-top: 8.5%;
}
	.inner #content h2 img {
		position: absolute;
		top: -100%;
		left: 0;
	}
	
#content h3 {
	width: 100%;
	margin: 0 auto 0 auto;
	text-align: center;
}
	#content h3 img {
		width: 100%;
		max-width: 600px;
	}
	
.contentBox .bnr {
	width: 100%;
	max-width: 300px;
	margin: 30px auto 0 auto;
}
.contentBox .btn {
	width: 100%;
	max-width: 420px;
	margin: 0 auto 0 auto;
}

	.movie {
		margin: 0 auto 0 auto;
		position: relative; 
		padding-bottom: 56.29%; 
		height: 0; 
		overflow: hidden; 
		max-width: 100%;
	}
		.movie iframe, .movie object, .movie embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	

.navArea { display: none; }


					/*===================sp=*/@media screen and (max-width: 1200px) {

	.contentWrap:before,
	.contentWrap:after {
		display: none;
	}

					}/*====================*/
					

					/*===================sp=*/@media screen and (max-width: 860px) {
						
#content {
	background: url(../img/bg00_s.jpg) repeat-y;
	background-size: 100% auto;
	
}
	.contentWrap:before,
	.contentWrap:after {
		display: none;
	}
	.contentBox {
		width: 86%;
		margin: 0 auto 0 auto;
		padding: 30px 0 30px 0;
	}
			.inner .contentBox {
				max-width: 800px;
				margin: 0 auto 0 auto;
				padding: 30px 0 60px 0;
				position: relative;
			}
					}/*====================*/
					


/*-----------------------------------------------------------
	mv setting
-----------------------------------------------------------*/
#main {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto 0 auto;
	padding: 0 0 0 0;
	position: relative;
	z-index: 2;
}
	#main:before {
		content: "";
		width: 200px;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: linear-gradient(90deg, rgba(0,0,0,1) 0, rgba(0,0,0,0) 100%);
		z-index: 1;
	}
	#main:after {
		content: "";
		width: 200px;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
		z-index: 1;
	}
	#main .mainWrap {
		width: 100%;
		margin: 0 auto 0 auto;
		background: url(../img/mv_img_p.jpg) no-repeat center top;
		background-size: auto 100%;
	}
		#main .img {
			width: 800px;
			margin: 0 auto 0 auto
		}
			#main .img:before {
				content: "";
				width: 100%;
				max-width: 100%;
				padding-top: 119%;
				display: block;
				margin: 0 auto 0 auto;
			}
			
	.faq #main .mainWrap {
		background: url(../img/mv_img_faq.jpg) no-repeat center top;
		background-size: auto 100%;
	}
			.faq #main .img:before {
				content: "";
				width: 100%;
				max-width: 100%;
				padding-top: 57.3%;
				display: block;
				margin: 0 auto 0 auto;
			}
	.goods #main .mainWrap {
		background: url(../img/mv_img_goods.jpg) no-repeat center top;
		background-size: auto 100%;
	}
			.goods #main .img:before {
				content: "";
				width: 100%;
				max-width: 100%;
				padding-top: 57.3%;
				display: block;
				margin: 0 auto 0 auto;
			}
	.beginner #main .mainWrap {
		background: url(../img/mv_img_beginner.jpg) no-repeat center top;
		background-size: auto 100%;
	}
			.beginner #main .img:before {
				content: "";
				width: 100%;
				max-width: 100%;
				padding-top: 57.3%;
				display: block;
				margin: 0 auto 0 auto;
			}
	.playtest #main .mainWrap {
		background: url(../img/mv_img_playtest.jpg) no-repeat center top;
		background-size: auto 100%;
	}
			.playtest #main .img:before {
				content: "";
				width: 100%;
				max-width: 100%;
				padding-top: 57.3%;
				display: block;
				margin: 0 auto 0 auto;
			}
	
	.practice #main .mainWrap {
		background: url(../img/mv_img_practice.jpg) no-repeat center top;
		background-size: auto 100%;
	}
	.practice.result_fail #main .mainWrap {
		background: url(../img/mv_img_practice_fail.jpg) no-repeat center top;
		background-size: auto 100%;
	}
	.practice.result_good #main .mainWrap {
		background: url(../img/mv_img_practice_good.jpg) no-repeat center top;
		background-size: auto 100%;
	}
	.practice.result_perfect #main .mainWrap {
		background: url(../img/mv_img_practice_perfect.jpg) no-repeat center top;
		background-size: auto 100%;
	}
			.practice #main .img:before {
				content: "";
				width: 100%;
				max-width: 100%;
				padding-top: 57.3%;
				display: block;
				margin: 0 auto 0 auto;
			}
			
			
			
	.inner #main .mainWrap:before {
		content: "";
		width: 100%;
		height: 6px;
		background: url(../img/line_01.png) no-repeat center top;
		background-size: 100% 100%;
		display: block;
	}
	.inner #main .mainWrap:after {
		content: "";
		width: 100%;
		height: 6px;
		background: url(../img/line_01.png) no-repeat center top;
		background-size: 100% 100%;
		display: block;
	}
	
	#main .mainWrap:after {
		content: "";
		width: 100%;
		height: 5px;
		background: url(../img/line_01.png) no-repeat center top;
		background-size: 100% 100%;
		display: block;
	}
	
	#main h3 {
		width: 84%;
		max-width: 500px;
		margin: 0 auto 0 auto;
		padding: 40px 0 30px 0;
	}
		
	.ribbon {
		background: #000000;
		padding: 15px 0 15px 0;
		text-align: center;
		line-height: 0;
		z-index: 1;
		position: relative;
		border-bottom: 2px solid #535353;
	}
	.inner .ribbon {
		padding: 10px 0 10px 0;
	}
		.ribbon img {
			width: 100%;
			max-width: 220px;
			margin: 0 auto 0 auto;
		}

					/*===================sp=*/@media screen and (max-width: 1200px) {
						
	#main:before,
	#main:after {
		display: none;
	}

					}/*====================*/

					/*===================sp=*/@media screen and (max-width: 800px) {
						
#main {
	z-index: 12;
	background: #000000;
}
	#main .mainWrap {
		width: 100%;
		margin: 0 auto 0 auto;
		background: url(../img/mv_img_s.jpg) no-repeat center top;
		background-size: 100% auto;
	}
	#main:before,
	#main:after {
		display: none;
	}
		#main .img {
			width: 100%;
		}
			#main .img:before {
				content: "";
				padding-top: 141%;
			}
			
	#main h3 {
		width: 84%;
		max-width: 500px;
		margin: 0 auto 0 auto;
		padding: 5% 0 4% 0;
	}
	.ribbon {
		padding: 5px 0 5px 0;
		border-bottom: 1px solid #535353;
	}
	.inner .ribbon {
		padding: 5px 0 5px 0;
	}
		.ribbon img {
			width: 35%;
			max-width: 35%;
			margin: -1% auto 0 auto;
		}

					}/*====================*/


/*-----------------------------------------------------------
	#intro setting
-----------------------------------------------------------*/
#intro {
	
}
	#intro .contentBox {
		line-height: 0;
		padding-top: 100px;
		padding-bottom: 80px;
	}
		#intro .contentBox .txt01 {
			margin: 60px auto 0 auto;
		}
		#intro .contentBox .txt02 {
			margin: 30px auto 0 auto;
		}
		#intro .contentBox .txt03 {
			margin: -20px auto 0 auto;
			font-size: 12px;
			line-height: 1.6;
			text-align: center;
		}
		#intro .contentBox .txt {
			margin: 20px auto 0 auto;
		}
		#intro .contentBox .bnr {
			width: 90%;
			margin: 20px auto;
		}



					/*===================sp=*/@media screen and (max-width: 860px) {

#intro .contentBox {
	width: 100%;
	max-width: 100%;
	padding: 1px 0 65px 0;
}
		#intro .contentBox .txt01 {
			margin: 50px auto 0 auto;
		}
		#intro .contentBox .txt02 {
			margin: 0px auto 0 auto;
		}
		#intro .contentBox .txt03 {
			margin: -30px auto 0 auto;
			font-size: 2.4vw;
		}

					}/*====================*/
					
					

/*-----------------------------------------------------------
	#news setting
-----------------------------------------------------------*/
#news {
}
	#news .contentBox {
		padding: 30px 0 90px 0;
	}
		#news h2 {
		}
		#news .newsBox {
			width: 100%;
			margin: 50px auto 0 auto;
			
			height: 10em;
			overflow-y: scroll;
		}
			#news .newsBox::-webkit-scrollbar {
			    width: 10px;
			}
			#news .newsBox::-webkit-scrollbar-track {
			  border-radius: 0;
			  box-shadow: inset 0 0 6px rgba(0, 0, 0, 1);
			}
			#news .newsBox::-webkit-scrollbar-thumb {
			  background-color: rgba(13, 98, 184, 0.80);
			  border-radius: 0;
			  box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
			}
	
		#news .newsBox li {
			width: 100%;
			position: relative;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			font-weight: bold;
			margin: 0 0 0 0;
			padding: 0 0 0 0;
		}
			#news .newsBox li .date {
				width: 10em;
				padding: 0 0 0 0;
			}
			#news .newsBox li .txt {
				width: auto;
				font-size: 18px;
				padding: 0 0 0 0;
				
			position: relative;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;

			}
				#news .newsBox li .txt a {
					color: #ffffff;
					text-decoration: underline;
				}
			
					/*===================sp=*/@media screen and (max-width: 860px) {
						

#news .contentBox {
	padding: 30px 0 65px 0;
}

		#news .newsBox {
			width: 100%;
			margin: 20px auto 0 auto;
		}
		#news .newsBox li {
			display: block;
			text-align: left;
		}
				#news .newsBox li .txt p:first-child {
					width: 8em;
				}
				#news .newsBox li .txt p:last-child {
					width: auto;
					flex: 1;
				}

			#news .newsBox li .txt {
				width: auto;
				font-size: 3.4vw;
				padding: 0 0 0 0;
				text-align: left;
			}

					}/*====================*/
					
					
/*-----------------------------------------------------------
	#lead setting
-----------------------------------------------------------*/
#lead {

}
	#lead .contentBox {
		
	}
		#lead .txt01 {
			width: 90%;
			max-width: 660px;
			margin: 0 auto 0 auto;
			line-height: 0;
		}
			
					/*===================sp=*/@media screen and (max-width: 860px) {

#lead .contentBox {
	
}

					}/*====================*/
					
					
/*-----------------------------------------------------------
	#point setting
-----------------------------------------------------------*/
#point {
	
}
	#point .contentBox {
		padding: 0px 0 80px 0;
	}
	#point .point01Box {
		width: 100%;
		max-width: 580px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		margin: 50px auto 0 auto;
	}
		#point .point01Box li {
			width: 31%;
		}
			#point .point01Box li .txt {
				position: absolute;
				width: 100%;
				bottom: 0;
				line-height: 0;
			}
			
	#point .point02Box {
		width: 100%;
		max-width: 580px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
   -ms-flex-wrap: wrap;
      flex-wrap: wrap;

		margin: 40px auto 0 auto;
	}
		#point .point02Box li {
			width: 20%;
			margin: 0 10% 0 10%;
		}
		#point .point02Box li:first-child {
			margin-left: 0;
		}
		#point .point02Box li:nth-child(3) {
			margin-right: 0;
		}
		#point .point02Box li:nth-child(4),
		#point .point02Box li:nth-child(5) {
			margin-top: -5%;
		}
			#point .point02Box li .txt {
				width: 100%;
				line-height: 0;
			}

					/*===================sp=*/@media screen and (max-width: 860px) {

	#point .contentBox {
		padding: 0 0 40px 0;
	}

	#point .point01Box {
		margin: 20px auto 0 auto;
	}

	#point .point02Box {
		margin: 15px auto 0 auto;
		padding-bottom: 15px;
	}
		#point .point02Box li {
			width: 26%;
			margin: 0 4% 0 4%;
		}
		#point .point02Box li:nth-child(4),
		#point .point02Box li:nth-child(5) {
			margin-top: -1%;
		}

					}/*====================*/


/*-----------------------------------------------------------
	#photo setting
-----------------------------------------------------------*/
#photo {
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 9;
	margin: -30px auto 0 auto;
}

	#photo .slideWrap {
		
	}
	#photo .slideWrap:before {
		content: "";
		width: 100%;
		height: 5px;
		background: url(../img/line_01.png) no-repeat center top;
		background-size: 100% 100%;
		display: block;
	}
	#photo .slideWrap:after {
		content: "";
		width: 100%;
		height: 5px;
		background: url(../img/line_01.png) no-repeat center top;
		background-size: 100% 100%;
		display: block;
	}
	#photo .slideBox {
		width: 100%;
		position: relative;
	}
	#photo .slideBox:after {
		content: "";
		width: 100%;
		height: 100%;
		background: url(../img/photo_bg.png) repeat-x center top;
		background-size: auto 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}
	#photo .slide {
		width: 100%;
		position: relative;
		height: 187px;
	}
	#photo ul {
		list-style: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 2248px;
		height: 100%;
		margin-left: 0;
	}
	
		#photo ul li {
			width: 281px;
			line-height: 0;
			position: absolute;
			top: 0;
			left: 0;
		}
			#photo ul li img {
				width: 100%;
				height: auto;
			}
			
		#photo ul li:nth-child(1) { left: 0; }
		#photo ul li:nth-child(2) { left: 281px; }
		#photo ul li:nth-child(3) { left: 562px; }
		#photo ul li:nth-child(4) { left: 843px; }
		#photo ul li:nth-child(5) { left: 1124px; }
		#photo ul li:nth-child(6) { left: 1405px; }
		#photo ul li:nth-child(7) { left: 1686px; }
		#photo ul li:nth-child(8) { left: 1967px; }
/* 		#photo ul li:nth-child(12) { left: 3091px; } */
		
		#photo .loop {
			-webkit-animation: loop01 60s linear infinite;
			animation: loop01 50s linear infinite;
		}
		@-webkit-keyframes loop01 {
			0%{ transform: translateX(0%); }
			100%{ transform: translateX(-2248px); }
		}
		@keyframes loop01 {
			0%{ transform: translateX(0%); }
			100%{ transform: translateX(-2248px); }
		}


					/*===================sp=*/@media screen and (max-width: 860px) {

#photo {
	margin-top: -20px;
}

	#photo .slide {
		width: 100%;
		position: relative;
		height: 140px;
	}
	#photo ul {
		list-style: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 1680px;
		height: 100%;
		margin-left: 0;
	}
	
		#photo ul li {
			width: 210px;
			line-height: 0;
			position: absolute;
			top: 0;
			left: 0;
		}
			
		#photo ul li:nth-child(1) { left: 0; }
		#photo ul li:nth-child(2) { left: 210px; }
		#photo ul li:nth-child(3) { left: 420px; }
		#photo ul li:nth-child(4) { left: 630px; }
		#photo ul li:nth-child(5) { left: 840px; }
		#photo ul li:nth-child(6) { left: 1050px; }
		#photo ul li:nth-child(7) { left: 1260px; }
		#photo ul li:nth-child(8) { left: 1470px; }
/* 		#photo ul li:nth-child(12) { left: 2310px; } */
		
		#photo .loop {
			-webkit-animation: loop01 60s linear infinite;
			animation: loop01 50s linear infinite;
		}
		@-webkit-keyframes loop01 {
			0%{ transform: translateX(0%); }
			100%{ transform: translateX(-1680px); }
		}
		@keyframes loop01 {
			0%{ transform: translateX(0%); }
			100%{ transform: translateX(-1680px); }
		}


					}/*====================*/
					
					
/*-----------------------------------------------------------
	#special setting
-----------------------------------------------------------*/
#special {
	
}
	#special .contentBox {
		padding: 80px 0 100px 0;
	}
		#special .contentBox .btnBox {
			margin: 40px auto 0 auto;
		}
		#special .contentBox .btnBox .btn {
			width: 100%;
			max-width: 420px;
			margin: 0 auto 0 auto;
			position: relative;
			cursor: pointer;
			line-height: 0;
		}
			#special .contentBox .btnBox .btn:last-child {
				margin-bottom: 0;
			}
		#special .contentBox .btnBox .btngoods:before {
			content: "";
			position: absolute;
			left: -7.5%;
			top: -13%;
			width: 35%;
			height: 137%;
			background: url(../img/sp_btn_goods_dec.png) no-repeat left top;
			background-size: 100% auto;
			z-index: 1;
		}
		#special .contentBox .btnBox .btn:hover {
			opacity: .7;
		}
		#special .contentBox .btnBox .btn a {
			display: block;
		}
		#special .contentBox .btnBox .btn.cs {
			opacity: .5;
		}
		#special .contentBox .btnBox .note {
			text-align: center;
			color: #ffffff;
		}

				
					/*===================sp=*/@media screen and (max-width: 860px) {
#special {

}
	#special .contentBox {
		padding: 50px 0 65px 0;
	}
	#special .contentBox .btnBox {
		margin-top: 8%;
	}
		#special .contentBox .btnBox .btn {
			width: 94%;
			max-width: 94%;
			margin-bottom: 15px;
		}
	#special .contentBox {

	}
		#special .contentBox .btnBox .btn.icon_new:before {
			content: "";
			position: absolute;
			right: -5%;
			top: -1em;
			width: 12%;
			height: 100%;
			background: url(../img/icon_new.png) no-repeat right top;
			background-size: 100% auto;
		}


					}/*====================*/


	#cm .movieWrap{
		width: 100%;
		max-width: 600px;
		margin: 80px auto 0 auto;
	}
		
	#cm .movieBox {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
		
	}
	
		#cm .movieBox iframe{
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
		}


					/*===================sp=*/@media screen and (max-width: 860px) {

	#cm .movieWrap{
		margin: 12% auto 0 auto;
	}

					}/*====================*/

/*-----------------------------------------------------------
	#story setting
-----------------------------------------------------------*/
#story {
}
	#story .contentBox {
		padding: 0 0 60px 0;
	}
	
	#story .prxBox {
		padding-top: 55px;
	}

	#story h2 {
	}
	#story .txtBox {
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		color: #ffffff;
		line-height: 1.8;
		margin: 50px auto 0 auto;
		padding: 0 0 0 0;
		position: relative;
	}
		#story .txtBox .txt {
			position: relative;
			margin: 1em 0 0 0;
		}
		
		
					/*===================sp=*/@media screen and (max-width: 860px) {
						
	#story .contentBox {
		padding: 0 0 40px 0;
	}
	#story .txtBox {
		margin-top: 20px;
		font-size: 3.2vw;
	}

					}/*====================*/


.hwWrap {
	position: relative;
	padding-bottom: 4em;
}
.hwWrap label {
	width: 100%;
	display: block;
	text-align: center;
	position: absolute;
	z-index: 1;
	bottom: 1em;
	cursor: pointer;
}
.hwWrap .hwBox {
	overflow: hidden;
	height: 13em;
	transition: all 0.5s;
	font-size: 17px;
}
.hwWrap input:checked + label {
	background: none;
}
.hwWrap label:after {
	content: "続きを読む";
	width: 54%;
	margin: 0 auto 0 auto;
	color: #ded684;
	text-decoration: underline;
	font-size: 18px;
	font-weight: bold;
	position: relative;
	z-index: 2;
}
.hwWrap input:checked + label {
}
.hwWrap input:checked + label:after {
	content: "閉じる";
}
.hwWrap input:checked ~ .hwBox {
	height: auto;
	transition: all 0.8s;
}
.hwWrap input { display: none !important; }



					/*===================sp=*/@media screen and (max-width: 860px) {

.hwWrap .hwBox {
	overflow: hidden;
	height: 20em;
	transition: all 0.5s;
	font-size: 3.4vw;
}
.hwWrap label:after {
	content: "続きを読む";
	width: 54%;
	margin: 0 auto 0 auto;
	color: #ded684;
	text-decoration: underline;
	font-size: 3.4vw;
	font-weight: bold;
	position: relative;
	z-index: 2;
}

					}/*====================*/
					

/*-----------------------------------------------------------
	#character setting
-----------------------------------------------------------*/
#character {
}
	#character .contentBox {
		padding-bottom: 100px;
	}
		#character .characterBox {
			width: 100%;
			margin: 30px auto 0 auto;
			
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-box-align: end;
			-ms-flex-align: end;
			align-items: flex-end;
		}
			#character .characterBox li {
				width: 23%;
				margin: 0 0 0 0;
				position: relative;
			}
				#character .characterBox li .img {
					line-height: 0;
				}
				#character .characterBox li .name {
					position: absolute;
					left: 9%;
					bottom: 0;
					width: 10%;
					padding-top: 100%;
				}
					#character .characterBox li .name p {
						display: block;
						position: absolute;
						top: 10%;
					}
					#character .characterBox li .name p:after {
						content: "";
						width: 60%;
						padding-top: 121%;
						margin-left: 20%;
						display: block;
						background: url(../img/arrow_01_w.svg) no-repeat center center;
						background-size: 100% 100%;
					}
					
			.popBoxop {
				display: none;
			}
			
				.characterdetails {
					width: 92%;
					max-width: 600px;
					margin: 0 auto 0 auto;
					padding: 0 0 0 0;
					
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-ms-flex-wrap: wrap;
					flex-wrap: wrap;
					-webkit-box-pack: center;
					-ms-flex-pack: center;
					justify-content: center;
					-webkit-box-align: end;
					-ms-flex-align: end;
					align-items: flex-end;
					position: relative;
				}
				
				#character01 .characterdetails {
					background: url(../img/character_01_bg.png) no-repeat center bottom;
					background-size: 100% auto;
				}
				#character02 .characterdetails {
					background: url(../img/character_02_bg.png) no-repeat center bottom;
					background-size: 100% auto;
				}
				#character03 .characterdetails {
					background: url(../img/character_03_bg.png) no-repeat center bottom;
					background-size: 100% auto;
				}
				#character04 .characterdetails {
					background: url(../img/character_04_bg.png) no-repeat center bottom;
					background-size: 100% auto;
				}
					.characterdetails .txtBox {
						width: 45%;
						position: absolute;
						left: 14%;
						bottom: 5%;
					}
						.characterdetails .txtBox .name {
							width: 8%;
							margin: 0 auto 60px auto;
						}
						.characterdetails .txtBox .txt {
							width: 100%;
							font-size: 16px;
							line-height: 1.8;
							color: #ffffff;
						}
					.characterdetails .img {
						width: 60%;
						margin-left: auto;
						margin-right: -5%;
						margin-bottom: -9%;
					}
				
			#character .btn {
				margin: 30px auto 0 auto;
				line-height: 0;
			}
				#character .btn a {
					display: block;
				}

				
					/*===================sp=*/@media screen and (max-width: 860px) {

	#character .contentBox {
		padding: 30px 0 60px 0;
	}
		#character .characterBox {
			width: 100%;
			margin: 5px auto 0 auto;
			
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-box-align: end;
			-ms-flex-align: end;
			align-items: flex-end;
		}
		
			#character .characterBox li {
				width: 47%;
				margin: 0 0 10px 0;
				position: relative;
			}
			#character .btn {
				margin: 20px auto 0 auto;
				line-height: 0;
			}
			
			
				.characterdetails {
					width: 92%;
					max-width: 600px;
					margin: 0 auto 0 auto;
					padding: 0 0 0 0;
				}
					.characterdetails .txtBox {
						width: 42%;
						position: absolute;
						left: 17%;
						bottom: 5%;
					}
						.characterdetails .txtBox .name {
							width: 10%;
							margin: 0 auto 40px auto;
						}
						.characterdetails .txtBox .txt {
							width: 100%;
							font-size: 2.6vw;
							line-height: 2;
							color: rgba(255, 255, 255, 0.80);
						}
					.characterdetails .img {
						width: 55%;
						margin-left: auto;
						margin-right: -5%;
						margin-bottom: -7%;
					}
				
			#character .btn {
				margin: 20px auto 0 auto;
				line-height: 0;
			}
				#character .btn a {
					display: block;
				}
			
					}/*====================*/
					
					

				.aboutdetails {
					width: 100%;
				}
					.aboutBox {
						width: 90%;
						max-width: 800px;
						margin: 0 auto 0 auto;
						padding: 3% 5% 3% 5%;
						position: relative;

						background: url(../img/bg10.png) no-repeat center bottom;
						background-size: 100% 95%;
					}
					.aboutBox:last-child {
						margin-top: 0;
						background: url(../img/bg11.png) no-repeat center bottom;
						background-size: 100% 98%;
					}

	.aboutBox:before {
		content: "";
		width: 10%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: linear-gradient(90deg, rgba(0,0,0,1) 0, rgba(0,0,0,0) 100%);
		z-index: 1;
	}
	.aboutBox:after {
		content: "";
		width: 10%;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
		z-index: 1;
	}
					.aboutdetails .tit {
						width: 100%;
						max-width: 600px;
						margin: 0 auto 2em auto;
						line-height: 0;
					}
					.aboutdetails .txtBox {
						width: 100%;
						max-width: 600px;
						margin: 0 auto 3em auto;
					}
						.aboutdetails .txtBox .tit {
							width: 100%;
							margin: 0 auto .5em auto;
							font-size: 24px;
							line-height: 1;
							color: #ded684;
							text-align: center;
							font-weight: 700;
						}
						.aboutdetails .txtBox .txt {
							width: 100%;
							font-size: 16px;
							line-height: 1.8;
							color: #ffffff;
						}
						
					/*===================sp=*/@media screen and (max-width: 860px) {

					.aboutBox {
						width: 90%;
						max-width: 800px;
						margin: 0 auto 0 auto;
						padding: 3% 5% 3% 5%;
						position: relative;

						background: url(../img/bg10.png) no-repeat center bottom;
						background-size: 100% 95%;
					}
					.aboutBox:last-child {
						margin-top: 0;
						background: url(../img/bg11.png) no-repeat center bottom;
						background-size: 100% 100%;
					}
					.aboutdetails .txtBox .tit {
						font-size: 4.2vw;
					}
					.aboutdetails .txtBox .txt {
						font-size: 3.2vw;
					}

	.aboutBox:before,
	.aboutBox:after {
		display: none;
	}
			
					}/*====================*/
											
/*-----------------------------------------------------------
	#howto setting
-----------------------------------------------------------*/
#howto {
}
	#howto .contentBox {
		padding-top: 0px;
	}
		#howto .howtoBox {
			width: 100%;
			max-width: 580px;
			margin: 30px auto 0 auto;
		}
			#howto .howtoBox li {
				width: 100%;

				margin: 0 0 25px 0;
				position: relative;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				justify-content: space-between;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
			}
				#howto .howtoBox li .img {
					width: 21%;
					line-height: 0;
				}
				#howto .howtoBox li .txtBox {
					width: 73%;
				}
					#howto .howtoBox li .txtBox .tit {
						font-size: 21px;
						font-weight: 700;
						line-height: 1.4;
					}
					#howto .howtoBox li .txtBox .txt {
						font-size: 15px;
						font-weight: 400;
						margin: 10px 0 0 0;
					}
				
			#howto .btn {
				line-height: 0;
				margin: 50px auto 0 auto;
			}
				#howto .btn a {
					display: block;
				}
				
					/*===================sp=*/@media screen and (max-width: 860px) {
						
						

	#howto .contentBox {
		padding: 30px 0 40px 0;
	}
			#howto .howtoBox li {
				width: 100%;
				margin: 0 0 15px 0;
			}
				#howto .howtoBox li .img {
					width: 28%;
					line-height: 0;
				}
				#howto .howtoBox li .txtBox {
					width: 67%;
				}
					#howto .howtoBox li .txtBox .tit {
						font-size: 3.8vw;
						font-weight: 700;
						line-height: 1.4;
					}
					#howto .howtoBox li .txtBox .txt {
						font-size: 3.2vw;
						font-weight: 400;
						line-height: 1.6;
						margin: 5px 0 0 0;
					}
			#howto .btn {
				line-height: 0;
				margin: 30px auto 0 auto;
			}

					}/*====================*/



/*-----------------------------------------------------------
	#price setting
-----------------------------------------------------------*/
#price {
}
	#price .contentBox {
		padding-top: 30px;
	}
	
	#price .gotoBox {
		text-align: center;
		background: rgba(0, 0, 0, 0.40);
		padding: 20px 0 10px 0;
		width: 100%;
		margin: 30px auto 50px auto;
	}
		#price .gotoBox .btn,
		#price .gotoBox .txt {
			margin: 0 auto 20px auto;
		}
		#price .gotoBox .btn {
			max-width: 400px;
		}
		#price .gotoBox .txtbtn {
			text-decoration: none;
			display: inline-block;
			padding: 10px 15px 10px 15px;
			margin: 15px 0 0 0;
			border: 2px solid #ffffff;
			color: #ffffff;
		}
	
		.priceBox {
			width: 100%;
			margin: 10px auto 0 auto;
		}
			.priceBox li {
				width: 100%;
				margin: 0 auto 25px auto;
				position: relative;
			}
			.inner .priceBox li {
				margin: 0 auto 10px auto;
			}
				.priceBox li .img {
					width: 44%;
					margin-right: 6%;
					line-height: 0;
					text-align: right;
					position: relative;
				}
					.priceBox li.price01 .img img {
						width: 56%;
					}
					.priceBox li.price02 .img img {
						width: 100%;
					}
						.priceBox li.price02 .img img.c {
							width: 27%;
							position: absolute;
							top: -7%;
							left: -15%;
						}
					
				.priceBox li .txtBox {
					width: 50%;
				}
					.priceBox li .txtBox .tit {
						font-size: 21px;
						font-weight: 700;
						line-height: 1.2;
					}
					.priceBox li .txtBox .price {
						font-size: 16px;
						font-weight: 400;
						margin: 5px 0 0 0;
					}
						.priceBox li .txtBox .price span {
							font-size: 11px;
						}
					.priceBox li .txtBox .txt1 {
						font-size: 18px;
						font-weight: 400;
						line-height: 1.4;
						margin: 10px 0 0 0;
						color: #ded684;
					}
					.priceBox li .txtBox .txt2 {
						font-size: 14px;
						font-weight: 400;
						line-height: 1.4;
						margin: 10px 0 0 0;
					}
					.priceBox li .txtBox .txt3 {
						font-size: 12px;
						font-weight: 400;
						line-height: 1.4;
						margin: 20px 0 0 0;
					}
					.priceBox li .txtBox .txt4 {
						font-size: 12px;
						font-weight: 400;
						line-height: 1.4;
						margin: 20px 0 0 0;
					}
				.priceBox li .btn {
					width: 100%;
					max-width: 832px;
					line-height: 0;
					margin: 0 auto 0 auto;
				}
					.priceBox li .btn a {
						display: block;
					}
				
		.priceBox.off {
			opacity: .5;
			pointer-events: none;
			
		}
		.confirmBox .priceBox {
			width: 80%;
			margin-top: 30px;
		}
		.confirmBox .confirmform {
			text-align: center;
		}
		.confirmBox .txt {
			text-align: center;
			font-weight: bold;
			margin: 40px auto 0 auto;
		}
		.confirmBox .priceBox {
			display: flex;
			margin-top: 20px;
		}
		.confirmBox .priceBox li {
			width: 48%;
		}
		
.confirmbtn {
	display: none;
}
.confirmbtn:checked,
.confirmbtn:checked + label:after {
	opacity: 1;
}

.confirmform label {
	position: relative;
	padding-left: 45px;
	font-size: 22px;
	cursor: pointer;
	color: #ffffff;
}
.confirmform label:before,
.confirmform label:after {
	content: "";
	position: absolute;
	display: block;
}
.confirmform label:before {
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	width: 30px;
	height: 30px;
	background: rgba(13, 98, 184, 0.80);
}
.confirmform label:after {
	top: -5px;
	left: 8px;
	width: 10px;
	height: 22px;
	border-bottom: 4px solid #ffffff;
	border-right: 4px solid #ffffff;
	transform: rotate(45deg);
	opacity: 0;
}

		#price .noteBox {
			margin: 0 0 20px 0;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
		}
			#price .noteBox p {
				width: auto;
				font-size: 14px;
				color: rgba(255, 255, 255, 0.90);
			}
		
					/*===================sp=*/@media screen and (max-width: 860px) {

	#price .contentBox {
		padding-bottom: 60px;
	}

#price .gotoBox {
	width: 100%;
	margin: 20px auto 30px auto;
}
	#price .gotoBox .btn,
	#price .gotoBox .txt {
		font-size: 3.4vw;
	}
	#price .gotoBox .fb {
		font-size: 3.6vw;
		line-height: 1.4;
	}
	#price .gotoBox .btn {
		width: 90%;
	}
	#price .gotoBox .txtbtn {
		font-size: 3.4vw;
		line-height: 1.4;
	}
	
		.priceBox {
			margin: 20px 0 0 0;
		}
			.priceBox li {
				width: 106%;
				margin: 0 0 20px -3%;
				position: relative;
			}
				.priceBox li .img {
					width: 76%;
					margin: 0 auto 0 auto;
					text-align: center;
					margin-top: -20px;
				}
					.priceBox li .img img {
						width: 100%;
					}
				.priceBox li .txtBox {
					width: 100%;
					text-align: center;
					margin: 14px 0 0 0;
				}
					.priceBox li .txtBox .tit {
						font-size: 4.0vw;
					}
					.priceBox li .txtBox .price {
						font-size: 3.4vw;
						margin-top: 0;
					}
						.priceBox li .txtBox .price span {
							font-size: 2.8vw;
						}
					.priceBox li .txtBox .txt1 {
						font-size: 4.0vw;
					}
					.priceBox li .txtBox .txt2 {
						font-size: 3.4vw;
					}
					.priceBox li .txtBox .txt3 {
						font-size: 2.8vw;
					}
					.priceBox li .txtBox .txt4 {
						font-size: 2.8vw;
						text-align: left;
					}
				.priceBox li .btn {
					margin: 0 auto 0 auto;
				}
					.priceBox li .btn a {
						display: block;
					}
			#price .noteBox {
				margin-top: -6px;
			}
			#price .noteBox p {
				font-size: 2.8vw;
			}
			
		.confirmBox .confirmform {
			text-align: center;
		}
		.confirmBox .txt {
			text-align: center;
			font-weight: bold;
			margin: 40px auto 0 auto;
		}
		.confirmBox .priceBox {
			display: block;
			margin: 20px auto 0 auto;
		}
		.confirmBox .priceBox li {
			width: 100%;
		}
			

.confirmform label {
	padding-left: 35px;
	font-size: 3.4vw;
}
.confirmform label:before,
.confirmform label:after {
	content: "";
	position: absolute;
	display: block;
}
.confirmform label:before {
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	width: 25px;
	height: 25px;
	background: rgba(13, 98, 184, 0.80);
}
.confirmform label:after {
	top: -6px;
	left: 8px;
	width: 6px;
	height: 18px;
	border-bottom: 4px solid #ffffff;
	border-right: 4px solid #ffffff;
	transform: rotate(45deg);
	opacity: 0;
}
					
					
					}/*====================*/



/*-----------------------------------------------------------
	.faq setting
-----------------------------------------------------------*/
#faq {

}
	#faq .contentBox {
		padding-bottom: 0;
	}
	#faq .img {
		line-height: 0;
	}
	#faq .img:before {
		content: "";
		width: 100%;
		height: 5px;
		background: url(../img/line_01.png) no-repeat center top;
		background-size: 100% 100%;
		display: block;
	}
	#faq .img:after {
		content: "";
		width: 100%;
		height: 5px;
		background: url(../img/line_01.png) no-repeat center top;
		background-size: 100% 100%;
		display: block;
	}
	#faq .btnBox {
		width: 100%;
		line-height: 0;
	}
	#faq .btnBox .btn {
		width: 100%;
		max-width: 420px;
		margin: 0 auto 0 auto;
		position: relative;
	}
			#faq .btn img {
				margin-top: -8.3%;
			}
			
	#faq .faqWrap {
		width: 100%;
		max-width: 700px;
		padding: 30px 0 30px 0;
		text-align: left;
		margin: 0 auto 0 auto;
	}
	#faq .faqWrap h3 {
		margin-bottom: 30px;
	}
		#faq .faqWrap .faqBox {
			width: 100%;
			margin: 0 auto 10px auto;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
		}
		#faq .faqWrap .head {
			width: 19%;
			padding: 10px 3% 10px 3%;
			font-size: 16px;
			color: #ffffff;
			font-weight: bold;
			background: rgba(13, 98, 184, 0.80);
		}
		#faq .faqWrap ul {
			width: 67.5%;
			margin-left: 1.5%;
			padding: 10px 3% 10px 3%;
			color: #ffffff;
			background: rgba(48, 48, 48, 0.80);
		}
			#faq .faqWrap ul li {
				width: 100%;
				padding: 0 0 0 0;
				font-weight: bold;
			}
			#faq .faqWrap ul li .tit {
				color: #000000;
				font-size: 16px;
				margin-bottom: 15px;
			}
			#faq .faqWrap ul li .q {
				font-size: 16px;
				display: block;
				padding: 10px 1em 10px 3em;
				margin: 0 0 2% 0;
			}
			#faq .faqWrap ul li .q::before {
				content: "Q.";
				display: block;
				float: left;
				margin-left: -2em;
				width: 2em;
				text-align: center;
				font-weight: bold;
			}
			#faq .faqWrap ul li .a {
				font-size: 16px;
				line-height: 1.8;
				display: block;
				padding: 10px 1em 10px 3em;
				margin: 0 0 2% 0;
			}
			#faq .faqWrap ul li .a::before {
				content: "A.";
				font-size: 16px;
				display: block;
				float: left;
				margin-left: -2em;
				width: 2em;
				text-align: center;
				font-weight: bold;
			}
			#faq .faqWrap ul li .n {
				font-size: 16px;
				line-height: 1.8;
				display: block;
				padding-left: 1.5em;
				margin: 0 0 0 0;
				font-weight: bold;
			}
			#faq .faqWrap ul li .n::before {
				content: "・";
				font-size: 16px;
				font-weight: bold;
				display: block;
				float: left;
				margin-left: -1.5em;
				width: 1em;
				text-align: center;
			}
			#faq .faqWrap ul li .n:last-child {
				margin-bottom: 0;
			}
				#faq .faqWrap .bnr {
					width: 100%;
					max-width: 250px;
					margin: 0 auto 0 auto;
				}
				#faq .faqWrap .note {
					font-size: 14px;
					color: #ffffff;
				}
				#faq .faqWrap a {
					color: #ffffff;
					text-decoration: underline;
				}
				#faq .faqWrap a:hover {
					text-decoration: none;
				}
				
				
		#faq #question .faqWrap .faqBox {
			width: 100%;
			padding: 0 0 0 0;
		}
		#faq #question .faqWrap .faqBox ul {
			width: 100%;
			margin: 0 0 0 0;
			padding:  0 0 0 0;
			background: none;
		}
			#faq #question .faqWrap .faqBox ul .q {
				background: rgba(13, 98, 184, 0.80);
			}
			#faq #question .faqWrap .faqBox ul .a {
				background: rgba(48, 48, 48, 0.80);
			}
			
			

	#faq .faqWrap .faqlist {
		width: 100%;
		margin: 20px auto 0 auto;
		padding: 0 0 0 0;
		background: none;
	}
		#faq .faqWrap .faqlist li {
			width: 100%;
			margin: 0 0 0 0;
			padding: 0 0 10px 0;
			display: flex;
			justify-content: space-between;
			text-align: left;
		}
		#faq .faqWrap .faqlist li:last-child {
			margin-bottom: 0;
		}

			#faq .faqWrap .faqlist .tit {
				width: 24%;
				padding: 15px 3% 15px 3%;
				color: #ffffff;
				font-size: 16px;
				background: rgba(13, 98, 184, 0.80);
				margin: 0 0 0 0;
			}
			#faq .faqWrap .faqlist .txt {
				width: 62.5%;
				margin-left: 1.5%;
				font-size: 16px;
				font-weight: bold;
				padding: 15px 3% 15px 3%;
				background: rgba(48, 48, 48, 0.80);
				color: #ffffff;
			}
			#faq .faqWrap .faqlist .txt span {
				font-size: 14px;
				color: #ffffff;
			}

	
					/*===================sp=*/@media screen and (max-width: 860px) {

	#faq .btnBox {
		width: 100%;
		line-height: 0;
	}
	#faq .btnBox .btn {
		width: 80%;
		max-width: 420px;
		margin: 0 auto 0 auto;
		position: relative;
	}
			#faq .btn img {
				margin-top: -8.3%;
			}
			
			
#faq {

}
	#faq .faqWrap h3 {
		margin-bottom: 15px;
	}
		#faq .faqWrap .faqBox {
			width: 100%;
			margin: 0 auto 5px auto;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
		}
		#faq .faqWrap .head {
			font-size: 2.8vw;
			width: 24%;
			padding: 10px 3% 10px 3%;
		}
		#faq .faqWrap ul {
			width: 61.5%;
		}

			#faq .faqWrap ul li .tit {
			font-size: 2.8vw;
			}
			#faq .faqWrap ul li .q {
			font-size: 2.8vw;
			}
			#faq .faqWrap ul li .a {
			font-size: 2.8vw;
			}
			#faq .faqWrap ul li .a::before {
				font-size: 2.8vw;
			}
			#faq .faqWrap ul li .n {
				font-size: 2.8vw;
			}
			#faq .faqWrap ul li .n::before {
				font-size: 2.8vw;
			}
				#faq .faqWrap .note {
					font-size: 2.6vw;
				}

			#faq .faqWrap .faqlist .tit {
				font-size: 2.8vw;
			}
			#faq .faqWrap .faqlist .txt {
				font-size: 2.8vw;
			}
			#faq .faqWrap .faqlist .txt span {
				font-size: 2.8vw;
			}

			
			
					}/*====================*/

/*-----------------------------------------------------------
	.goods setting
-----------------------------------------------------------*/
#goods {

}
	#goods .contentBox {
		padding-bottom: 0;
	}
			
	#goods .goodsWrap {
		width: 100%;
		max-width: 580px;
		padding: 30px 0 30px 0;
		text-align: left;
		margin: 0 auto 0 auto;
	}
	#goods .goodsWrap h3 {
		margin-bottom: 30px;
	}
		#goods .goodsWrap .goodstitBox {
			width: 100%;
			background: #ffffff;
			border: 2px solid #ffffff;
			color: #000000;
			font-size: 22px;
			font-weight: 500;
			text-align: center;
			margin: 0 0 40px 0;
			padding: 17px 0 15px 0;
			line-height: 1;
		}
		#goods .goodsWrap .goodstitBox2 {
			width: 100%;
			background: #ded684;
			border: 2px solid #ded684;
			color: #000000;
			font-size: 22px;
			font-weight: 500;
			text-align: center;
			margin: -10px 0 110px 0;
			padding: 17px 0 15px 0;
			line-height: 1.2;
		}
			#goods .goodsWrap .goodstitBox2 span {
				text-decoration: line-through;
				display: block;
				
				margin-bottom: 5px;
			}
		#goods .goodsWrap .goodsBox {
			width: 100%;
			margin: 0 auto 110px auto;
			padding: 0 0 20px 0;
			border: 2px solid #ffffff;
			position: relative;
		}
		#goods .goodsWrap .goodsspBox {
			border: 2px solid #ded684;
			margin-bottom: 30px;
		}

			#goods .goodsWrap .goodsBox .img {
				width: 100%;
				margin: 0 auto 0 auto;
				margin-top: -110px;
			}
				#goods .goodsWrap .goodsBox .img img {
					width: 100%;
				}
		
			#goods .goodsWrap .goodsBox .txtBox {
				width: 90%;
				margin: 5px auto 0 auto;
			}
				#goods .goodsWrap .goodsBox .txtBox .tit {
					font-size: 22px;
				}
				#goods .goodsWrap .goodsBox .txtBox .stit {
					font-size: 22px;
					margin-top: 20px;
				}
				#goods .goodsWrap .goodsBox .txtBox .price {
					font-size: 16px;
					margin-top: 5px;
				}
					#goods .goodsWrap .goodsBox .txtBox span {
						color: #cccccc;
					}
				#goods .goodsWrap .goodsBox .txtBox .txt {
					font-size: 16px;
					margin: 20px 0 0 0;
				}
				
			#goods .noteBox {
				font-size: 16px;
				color: #cccccc;
				margin-top: -80px;
			}
	
					/*===================sp=*/@media screen and (max-width: 860px) {
						
		#goods .goodsWrap .goodstitBox {
			font-size: 4.0vw;
			margin: 0 0 10% 0;
			padding: 12px 0 10px 0;
		}
		#goods .goodsWrap .goodstitBox2 {
			font-size: 4.0vw;
			text-align: center;
			margin: -10px 0 18% 0;
			padding: 12px 0 10px 0;
		}
		
		#goods .goodsWrap .goodsBox {
			width: 100%;
			margin-bottom: 18%;
		}
			#goods .goodsWrap .goodsBox .img {
				width: 100%;
				margin-top: -16%;
			}
				#goods .goodsWrap .goodsBox .img img {
					width: 100%;
				}
		
			#goods .goodsWrap .goodsBox .txtBox {
			}
				#goods .goodsWrap .goodsBox .txtBox .tit {
					font-size: 4.0vw;
				}
				#goods .goodsWrap .goodsBox .txtBox .price {
					font-size: 3.4vw;
					margin-top: 0;
				}
					#goods .goodsWrap .goodsBox .txtBox .price span {
						font-size: 3.4vw;
					}
				#goods .goodsWrap .goodsBox .txtBox .txt {
					font-size: 3.4vw;
					margin-top: 10px;
				}
				
			#goods .noteBox {
				font-size: 3.4vw;
				color: #cccccc;
				margin-top: -10%;
			}
			
					}/*====================*/
				
					
					
/*-----------------------------------------------------------
	.beginner setting
-----------------------------------------------------------*/
#beginner {

}
	#beginner .contentBox {
		padding-bottom: 0;
	}
			
	#beginner .beginnerWrap {
		width: 100%;
		max-width: 700px;
		padding: 30px 0 30px 0;
		text-align: left;
		margin: 0 auto 0 auto;
	}
	#beginner .beginnerWrap h3 {
		width: 100%;
		margin-bottom: 30px;
		font-size: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
	}
		#beginner .beginnerWrap h3 span {
			width: auto;
			padding: 0 .5em 0 .5em;
  -ms-flex-negative: 0;
        flex-shrink: 0;
		}
		#beginner .beginnerWrap h3:before {
			content: "";
			width: 100%;
			height: 2px;
			background: #ffffff;
			position: relative;
  -ms-flex-negative: -1;
        flex-shrink: -1;
		}
		#beginner .beginnerWrap h3:after {
			content: "";
			width: 100%;
			height: 2px;
			background: #ffffff;
			position: relative;
  -ms-flex-negative: -1;
        flex-shrink: -1;
		}
		
		#beginner .beginnerWrap .beginnerBox {
			width: 100%;
			margin: 20px auto 0 auto;
		}
			#beginner .beginnerWrap .beginnerBox .beginnerItem {
				width: 100%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
			}
				#beginner .beginnerWrap .beginnerBox .beginnerItem .num {
					width: 40px;
					margin-right: 13px;
					position: relative;
				}
					#beginner .beginnerWrap .beginnerBox .beginnerItem .num img {
						width: 100%;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
					}
					#beginner .beginnerWrap .beginnerBox .beginnerItem .num::after {
						content: "";
						width: 2px;
						height: 100%;
						margin-left: -1px;
						background: #ffffff;
						position: absolute;
						top: 0;
						left: 50%;
						z-index: 0;
					}
					#beginner .beginnerWrap .beginnerBox .beginnerItem:last-child .num::after {
						display: none;
					}
					
				#beginner .beginnerWrap .beginnerBox .beginnerItem .main {
					width: 100%;
					margin: 0 0 50px 0;
				}
				#beginner .beginnerWrap .beginnerBox .beginnerItem:last-child .main {
					margin-bottom: 0;
				}
					#beginner .beginnerWrap .beginnerBox .beginnerItem.beginner05 .main {
						margin-bottom: 0;
					}
					#beginner .beginnerWrap .beginnerBox .beginnerItem .main .head {
						font-size: 22px;
					}
					#beginner .beginnerWrap .beginnerBox .beginnerItem .main .imgBox {
						width: 85%;
						margin: 20px 0 0 0;
					}
					#beginner .beginnerWrap .beginnerBox .beginnerItem .main .txtBox {
						font-size: 18px;
						margin: 20px auto 0 auto;
					}
					#beginner .beginnerWrap .beginnerBox .beginnerItem .main .txtBox span {
						font-weight: bold;
						color: #dc2c33;
					}
					#beginner .beginnerWrap .beginnerBox .beginnerItem .main .txtBox span a {
						color: #dc2c33 ;
					}
					#beginner .beginnerWrap .beginnerBox .beginnerItem .main .txtBox a {
						color: #0082ff ;
					}
				#beginner .beginnerWrap .beginnerBox .beginnerItem .main .priceBox {
						width: 85%;
						margin: 30px 0 0 0;
				}
				#beginner .beginnerWrap .beginnerBox .beginnerItem .main .priceBox .btn {
					position: relative;
				}
				#beginner .beginnerWrap .beginnerBox .beginnerItem .main .priceBox img.c {
					position: absolute;
					left: -10%;
					top: -44%;
					width: 24%;
					z-index: 1;
				}

					/*===================sp=*/@media screen and (max-width: 860px) {
						
	#beginner .beginnerWrap h3 {
		margin-bottom: 20px;
		font-size: 4.2vw;
	}
				#beginner .beginnerWrap .beginnerBox .beginnerItem .num {
					width: 7vw;
					margin-right: 13px;
					position: relative;
				}
				#beginner .beginnerWrap .beginnerBox .beginnerItem .main {
					width: 100%;
					margin: 0 0 40px 0;
				}
				
					#beginner .beginnerWrap .beginnerBox .beginnerItem .main .head {
						font-size: 4.2vw;
						line-height: 7vw;
					}
					#beginner .beginnerWrap .beginnerBox .beginnerItem .main .imgBox {
						margin: 15px 0 0 0;
					}
					#beginner .beginnerWrap .beginnerBox .beginnerItem .main .txtBox {
						font-size: 3.4vw;
						margin: 10px 0 0 0;
					}
				#beginner .beginnerWrap .beginnerBox .beginnerItem .main .priceBox {
					margin-top: 40px;
					margin-left: -2%;
				}
				#beginner .beginnerWrap .beginnerBox .beginnerItem .main .priceBox li:last-child {
					margin-bottom: 0;
				}
					
					}/*====================*/
				

					
/*-----------------------------------------------------------
	.playtest setting
-----------------------------------------------------------*/
#playtest {

}
	#playtest .contentBox {
		padding-bottom: 0;
	}
			
	#playtest .playtestWrap {
		width: 100%;
		max-width: 700px;
		padding: 30px 0 30px 0;
		text-align: left;
		margin: 0 auto 0 auto;
	}
	#playtest .playtestWrap h3 {
		width: 100%;
		margin-bottom: 30px;
		font-size: 32px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
		#playtest .playtestWrap h3 span {
			width: auto;
			padding: 0 .5em 0 .5em;
  -ms-flex-negative: 0;
        flex-shrink: 0;
		}
		#playtest .playtestWrap h3:before {
			content: "";
			width: 100%;
			height: 2px;
			background: #ffffff;
			position: relative;
  -ms-flex-negative: -1;
        flex-shrink: -1;
		}
		#playtest .playtestWrap h3:after {
			content: "";
			width: 100%;
			height: 2px;
			background: #ffffff;
			position: relative;
  -ms-flex-negative: -1;
        flex-shrink: -1;
		}
		#playtest .playtestWrap .movieBox {
			width: 100%;
			margin: 0 auto 0 auto;
		}
		#playtest .playtestWrap .playtestBox {
			width: 92%;
			margin: 30px auto 0 auto;
			padding: 25px 4% 25px 4%;
			background: rgba(0, 0, 0, 0.70);
		}
			#playtest .playtestWrap .playtestBox ul {
				
			}
				#playtest .playtestWrap .playtestBox ul li {
					font-size: 16px;
					line-height: 1.8;
					display: block;
					padding-left: 1.5em;
					margin: 0 0 0 0;
					font-weight: bold;
				}
				#playtest .playtestWrap .playtestBox ul li::before {
					content: "※";
					font-size: 16px;
					font-weight: bold;
					display: block;
					float: left;
					margin-left: -1.5em;
					width: 1em;
					text-align: center;
				}
			#playtest .playtestWrap .playtestBox .btn {
				text-align: center;
				margin: 15px auto 0 auto;
			}
			#playtest .playtestWrap .playtestBox .btn a {
				color: #0c61b5;
				font-size: 18px;
				line-height: 1.4;
				text-decoration: none;
				border-bottom: 1px solid #0c61b5;
			}

	
					/*===================sp=*/@media screen and (max-width: 860px) {
						
	#playtest .playtestWrap h3 {
		margin-bottom: 20px;
		font-size: 4.2vw;
	}
		#playtest .playtestWrap .playtestBox {
			width: 92%;
			margin: 20px auto 0 auto;
			padding: 20px 4% 20px 4%;
			background: rgba(0, 0, 0, 0.70);
		}
				#playtest .playtestWrap .playtestBox ul li {
					font-size: 2.8vw;
				}
				#playtest .playtestWrap .playtestBox ul li::before {
					font-size: 2.8vw;
				}
			#playtest .playtestWrap .playtestBox .btn a {
				font-size: 3.2vw;
			}
			
					}/*====================*/
					

.confirm {
	color: #ffffff;
	padding-bottom: 30px;
}
	.confirm .ptit {
		width: 84%;
		max-width: 500px;
		margin: 0 auto 0 auto;
		padding: 40px 0 30px 0;
	}
	.confirm .cs {
		font-size: 22px;
		text-align: center;
	}
	.confirm h3 {
		width: 100%;
		margin-bottom: 30px;
		font-size: 32px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
		.confirm h3 span {
			width: auto;
			padding: 0 .5em 0 .5em;
        flex-shrink: 0;
		}
		.confirm h3:before {
			content: "";
			width: 100%;
			height: 2px;
			background: #ffffff;
			position: relative;
        flex-shrink: -1;
		}
		.confirm h3:after {
			content: "";
			width: 100%;
			height: 2px;
			background: #ffffff;
			position: relative;
        flex-shrink: -1;
		}
		.confirm .movieBox {
			width: 100%;
			margin: 0 auto 0 auto;
		}
		.confirm .playtestBox {
			width: 92%;
			margin: 30px auto 0 auto;
			padding: 25px 4% 25px 4%;
			background: rgba(0, 0, 0, 0.70);
		}
			.confirm .playtestBox ul {
				
			}
				.confirm .playtestBox ul li {
					font-size: 16px;
					line-height: 1.8;
					display: block;
					padding-left: 1.5em;
					margin: 0 0 0 0;
					font-weight: bold;
				}
				.confirm .playtestBox ul li::before {
					content: "※";
					font-size: 16px;
					font-weight: bold;
					display: block;
					float: left;
					margin-left: -1.5em;
					width: 1em;
					text-align: center;
				}
				.confirm .playtestBox ul li.link a {
					color: #0082ff;
				}
				.confirm .playtestBox ul li.link::before {
					content: "";
					height: 28px;
					width: 12px;
					background: url(../img/arrow_01_b.png) no-repeat center center;
					background-size: contain;
					color: #0082ff;
				}
			.confirm .playtestBox .btn {
				text-align: center;
				margin: 15px auto 0 auto;
			}
			.confirm .playtestBox .btn a {
				color: #0c61b5;
				font-size: 18px;
				line-height: 1.4;
				text-decoration: none;
				border-bottom: 1px solid #0c61b5;
			}
			
.confirm table {
  width: 100%;
  border-collapse:separate;
  border-spacing: 5px;
  font-size: 16px;
  line-height: 1.8;
}
.confirm table .top td {
	background: rgba(13, 98, 184, 0.80);
}
.confirm table tr {
  text-align: center;

}
.confirm table td {
	background: rgba(48, 48, 48, 0.80);
	padding: 10px;
	vertical-align: middle;
}

	
					/*===================sp=*/@media screen and (max-width: 860px) {
						
	.confirm .ptit {
		width: 84%;
		max-width: 500px;
		margin: 0 auto 0 auto;
		padding: 5% 0 4% 0;
	}
	.confirm .cs {
		font-size: 4.2vw;
		text-align: center;
	}
	.confirm h3 {
		margin-bottom: 20px;
		font-size: 4.2vw;
	}
		.confirm .playtestBox {
			width: 92%;
			margin: 20px auto 0 auto;
			padding: 20px 4% 20px 4%;
			background: rgba(0, 0, 0, 0.70);
		}
				.confirm .playtestBox ul li {
					font-size: 2.8vw;
				}
				.confirm .playtestBox ul li::before {
					font-size: 2.8vw;
				}
				.confirm .playtestBox ul li.link::before {
					content: "";
					height: 3.0vw;
					width: 2.8vw;
					background: url(../img/arrow_01_b.png) no-repeat center center;
					background-size: contain;
					color: #0082ff;
				}
			.confirm .playtestBox .btn a {
				font-size: 3.2vw;
			}
			
.confirm table {
  font-size: 2.8vw;
  line-height: 1.4;
}
			
					}/*====================*/

				.confirmdetails {
					width: 100%;
				}
					.confirmBox {
						width: 90%;
						max-width: 800px;
						margin: 0 auto 0 auto;
						padding: 3% 5% 3% 5%;
						position: relative;
/*
						background: url(../img/bg11.png) no-repeat center bottom;
						background-size: 100% 98%;
*/
					}

/*
	.confirmBox:before {
		content: "";
		width: 10%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: linear-gradient(90deg, rgba(0,0,0,1) 0, rgba(0,0,0,0) 100%);
		z-index: 1;
	}
	.confirmBox:after {
		content: "";
		width: 10%;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
		z-index: 1;
	}
*/

						
					/*===================sp=*/@media screen and (max-width: 860px) {

					.confirmBox {
						width: 90%;
						max-width: 800px;
						margin: 0 auto 0 auto;
						padding: 3% 5% 3% 5%;
						position: relative;
/*

						background: url(../img/bg11.png) no-repeat center bottom;
						background-size: 100% 100%;
*/
					}

	.confirmBox:before,
	.confirmBox:after {
		display: none;
	}
			
					}/*====================*/
					
					
/*-----------------------------------------------------------
	.practice setting
-----------------------------------------------------------*/
#practice {

}
	#practice .contentBox {
		padding-bottom: 0;
	}
		#practice .practice_print{
			display: flex;
			justify-content: center;
			align-items: center;
		}
			#practice .practice_print .getnum{
				position: absolute;
				font-size: 120px;
				color: #000000;
				padding-bottom: 40%;
			}
		#practice .btnBox{
			margin-top: 30px;
		}
			#practice .btnBox .note {
				text-align: center;
				color: #ffffff;
				font-size: 18px;
				margin-bottom: 10px;
			}
		
			.practice_result_share{
				background-color: rgba(0, 255, 255, 0.2);
				width: 100%;
				max-width: 420px;
				margin: 0 auto 0 auto;
				
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				
				margin-top: 60px;
			}
				.practice_result_share .tit{
					width: 80%;
					max-width: 300px;
					margin: 40px auto 20px auto;
				}
				.practice_result_share ul{
					width: 94%;
					margin: 0 auto 0 auto;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 40px;
				}
					.practice_result_share ul li {
						width: 72px;
						margin: 0 15px;
					}
						.practice_result_share ul li img {
						    width: 100%;
						    height: auto;
						}
				
			
					/*===================sp=*/@media screen and (max-width: 860px) {
						
			#practice .practice_print .getnum{
				font-size: 15vw;
				padding-bottom: 40%;
				top: 18%;
			}
				.practice_result_share .tit{
					width: 60%;
					margin: 30px auto 15px auto;
				}
				.practice_result_share ul{
					width: 70%;
					margin-bottom: 20px;
				}
				
				#practice .btnBox .note {
					font-size: 13px;
				}
					
					}/*====================*/


					
/*-----------------------------------------------------------
	#pagetopBtn setting
-----------------------------------------------------------*/

#pagetopBtn {
	width: 100%;
	padding: 80px 0 80px 0;
}
	#pagetopBtn p {
		width: 18%;
		max-width: 148px;
		margin: 0 auto 0 auto;
	}
		#pagetopBtn p a {
			display: block;
			cursor: pointer;
		}

					/*===================sp=*/@media screen and (max-width: 860px) {

#pagetopBtn {
	width: 100%;
	padding: 12% 0 12% 0;
}
	#pagetopBtn p {
		width: 30%;
		max-width: 200px;
		margin: 0 auto 0 auto;
	}

					}/*====================*/

/*-----------------------------------------------------------
	#footer setting
-----------------------------------------------------------*/
#footer {
	width: 100%;
	text-align: center;
	margin: 0 auto 0 auto;
	padding: 70px 0px 120px 0px;
	position: relative;
	background: #000000;
}
	.footerWrap {
		max-width: 800px;
		margin: 0 auto 0 auto;
	}
		.mailmagazine {
			width: 100%;
		}
			.mailmagazine .bnr {
				width: 50%;
				max-width: 400px;
				margin: 0 auto 10px auto;
			}
	
		#footer .logoBox {
			width: 100%;
			margin: 40px auto 0 auto;
		}
			#footer .logoBox .logo01 {
				width: 26%;
				max-width: 210px;
				line-height: 0;
				margin: 0 auto 30px auto;
			}
			#footer .logoBox .logo02 {
				width: 30%;
				max-width: 310px;
				line-height: 0;
				margin: 0 auto 0 auto;
			}

		#footer .copyright {
			font-size: 15px;
			line-height: 1.8;
			margin: 40px auto 0 auto;
			color: #ffffff;
		}


					/*===================sp=*/@media screen and (max-width: 860px) {
						
#footer {
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 12% 0 35% 0;
}
	.footerWrap {
		width: 86%;
		margin: 0 auto 0 auto;
	}
	
		.mailmagazine {
			width: 100%;
		}
			.mailmagazine .bnr {
				width: 100%;
			}
	
		#footer .logoBox {
			width: 100%;
			margin: 40px auto 0 auto;
		}
			#footer .logoBox .logo01 {
				width: 40%;
				max-width: 210px;
				line-height: 0;
				margin: 0 auto 30px auto;
			}
			#footer .logoBox .logo02 {
				width: 45%;
				max-width: 310px;
				line-height: 0;
				margin: 0 auto 0 auto;
			}

		#footer .copyright {
			font-size: 3.2vw;
			font-weight: 400;
			line-height: 1.8;
			margin: 40px auto 0 auto;
			color: #ffffff;
		}

				
						
					}/*====================*/




					/*===================sp=*/@media screen and (max-width: 860px) {



					}/*====================*/
					

/*----------------------------------#popup setting----------*/
#popupBtn {
	width: 20%;
	max-width: 200px;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 100;
	cursor: pointer;
	line-height: 0;
	transform: translateX(200px);
}
	#popupBtn.in{transform: translateX(0);}
	#popupBtn a {
		cursor: pointer;
	}
		#popupBtn img {
			width: 100%;
		}

					/*===================sp=*/@media screen and (max-width: 860px) {
					
#popupBtn {
	width: 40%;
	right: 0;
	bottom: 0;
	transform: translateX(200px);
}
	#popupBtn.in{transform: translateX(0);}
	
					}/*====================*/


/*----------------------------------#popup setting----------*/
#share {
	width: 20%;
	width: 160px;
	line-height: 0;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	position: fixed;
	bottom: 5px;
	left: 0;
	z-index: 15;
	transform: translateX(-160px);
}
	#share.in{transform: translateX(0);}
		#share ul {
			width: 100%;
			margin: 20px 0 0 0;
		}
		#share ul li {
			width: 100%;
			margin: 0 0 5px 0 ;
		}
		#share ul li img {
			width: 100%;
			height: auto;
		}
		
#shareop {
	width: 100%;
	margin: 0 auto 0 auto;
}
	#shareop ul {
		width: 50%;
		width: 200px;

		margin: 20px auto 0 auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				justify-content: space-between;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
	}
	#shareop ul li.tit {
		width: 100%;
		margin: 0 0 15px 0 ;
	}
	#shareop ul li {
		width: 28%;
		margin: 0 0 5px 0 ;
	}
		#shareop ul li img {
			width: 100%;
			height: auto;
		}
	
					/*===================sp=*/@media screen and (max-width: 860px) {
					
#share {
	width: 28%;
	left: 0;
	bottom: 0;
	transform: translateX(-160px);
}
	#share.in{transform: translateX(0);}
					
					}/*====================*/


#infopop .bg {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1042;
	overflow: hidden;
	position: fixed;
	background: #0b0b0b;
	opacity: 0.8;
}
#infopop {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1500;
	transition: all .7s ease;
	display: none;
}
#infopop.show {
	display: block;
}
#infopop.end {
	display: none;
}

#infopop .infoWrap {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1043;
	position: fixed;
	outline: none !important;
	-webkit-backface-visibility: hidden;
	overflow-y: auto;
	overflow-x: hidden;
}
#infopop .infoBox {
	text-align: center;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	padding: 0 8px;
	box-sizing: border-box;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 6px;
	padding-right: 6px;
}
#infopop .infoBox:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
  
#infopop .infoBox .info {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin: 0 auto 0 auto;
	text-align: left;
	z-index: 1045;
	cursor: auto;
	line-height: 0;
	width: 90%;
	max-width: 600px;
	opacity: 0;
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
	opacity: 1;
}

	#infopop .infoBox .info .img {
		width: 100%;
		overflow: hidden;
	}
	#infopop .infoBox .info .img a {
		display: block;
	}
	#infopop .btn {
		position: absolute;
		top: -45px;
		right: 0;
		width: 30px;
	}


.mfp-bg {
	background: rgba(0, 0, 0, 0.95);
	opacity: 1;
}
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close, .mfp-close-btn-in .mfp-close {
    color: #FFF;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%;
}
.mfp-iframe-holder .mfp-close {
	
}

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close, .mfp-close-btn-in .mfp-close {
	background: url(../img/btn_close.svg) no-repeat right top;
	background-size: auto 100%;
	font-size: 0;
		opacity: 1;
}
.mfp-iframe-holder .mfp-close {
	top: -60px;
}
.mfp-iframe-holder {
	padding-right: 5%;
	padding-left: 5%;
}

.mfp-inline-holder #character01 .mfp-close,
.mfp-inline-holder #character02 .mfp-close,
.mfp-inline-holder #character03 .mfp-close,
.mfp-inline-holder #character04 .mfp-close {
	right: 5%;
	opacity: 1;
}

.mfp-arrow-left:before {
	display: none;
}
.mfp-arrow-right:before {
	display: none;
}
.mfp-arrow-left:after {
	margin-left: 20px;
	margin-top: 35px;
}
.mfp-arrow-right:after {
	margin-left: 38px;
	margin-top: 18px;
}



.popcbtn {
	width: 100%;
	max-width: 600px;
	margin: 30px auto 30px auto;
	text-align: right;
}
	.popcbtn p {
	margin: 0 0 0 auto;
	width: 40px;
	height: 40px;
	background: url(../img/btn_close.svg) no-repeat right top;
	background-size: auto 100%;
}
#shareop .popcbtn {
	width: 100%;
	max-width: 200px;
}

					/*===================sp=*/@media screen and (max-width: 860px) {
					
.popcbtn {
	margin: 0 auto 80px auto;
	text-align: right;
}
	.popcbtn p {
	margin: 0 0 0 auto;
	width: 40px;
	height: 40px;
	background: url(../img/btn_close.svg) no-repeat right top;
	background-size: auto 100%;
}

#shareop {
	margin-bottom: 80px;
}
#shareop .popcbtn {
	width: 90%;
	max-width: 90%;
	
}
.confirm .popcbtn,
#about .popcbtn {
	width: 90%;
	max-width: 90%;
	margin: 20px auto 20px auto;
	
}

				
					}/*====================*/



/*-----------------------------------------------------------
	#loading setting
-----------------------------------------------------------*/

#loading {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 1;
	background: #000000;
	color: #000000;
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	z-index: 101;
	margin: 0;
	padding: 0;
}
	#loading.comp {
		animation: loading_out 1s forwards;
	}
		@keyframes loading_out{
			0%{
				opacity: 1;
				height: 100%;
			}
			99%{
				opacity: 0;
				height: 100%;
			}
			100%{
				opacity: 0;
				height: 0;
			}
		}
	
	#loading p {
		color: #ffffff;
	}
		#loading div{
			background-repeat: no-repeat;
			background-size: contain;
			position: absolute;
		}
		#loading .parts_icon{
			width: 150px;
			animation: loadinganimation 2s infinite;
		}
					/*===================sp=*/@media screen and (max-width: 860px) {
		#loading .parts_icon{
			width: 30vw;
			animation: loadinganimation 2s infinite;
		}
					}/*====================*/
		
		
			@keyframes loadinganimation{
				0%{
					opacity: 0.5;
				}
				90%{
					opacity: 1;
				}
				100%{
					opacity: 0.5;
				}
			}
			
/*-----------------------------------------------------------
	prallax
-----------------------------------------------------------*/
.prx .prxBox {
	opacity: 0;
	transform: translateY(20px);
	transition: all 1s ease-out;
}
	.prx.in .prxBox {
		opacity: 1;
		transform: translateY(0px);
	}
	.popup {
	position: fixed;
	top: 0;
	left: 0;
	width: calc(100% + 20px);
	height: 100%;
	z-index: 1500;
	background-color: rgba(0, 0, 0, 0.692);
	overflow-y: auto;
	transition: all 0.3s ease-out;
  }
  
  .popup .close_win {
	z-index: 1501;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 1501;
	overflow: hidden;
  }
  
  .popup .btn_win {
	top: 0;
	padding: 10px;
	opacity: 1;
  }
  
  .popup a {
	position: absolute;
	top: 50%;
	left: calc(50% - 10px);
	transform: translate(-50%, -50%);
	display: block;
	z-index: 1508;
	width:80%;
	margin:auto;
	text-align: center;
  }

  .popup a img{
	width:100%;
	max-width: 450px;
	margin:auto;
	text-align: center;
  }

  .popup .lum-close-button{
	right:10px !important;
  }