@charset "UTF-8";
html { font-size: 62.5%; }
a:focus { outline: none; }
img { width: 100%; }

body {
	position: relative;
	width: 100%;
	font-family:  "游ゴシック", YuGothic, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	font-size: 12px;
	font-size: 1.2rem;
	background: #000;
	overflow-x: hidden;
}

/* COMMON -------------------------------------------*/
.wrapp {
	width: 100%;
}
.wrapp:after {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background: url(../img/abt/pageBg.jpg) no-repeat center center;
	background-size: 100% auto;
	z-index: -1;
	content: "";
}
/* INTRODUCTION -------------------------------------*/
#intro {
	width: 100%;
	padding: 0 0 12.5%;
	opacity: 0;
}
	#intro h2 {
		position: relative;
		width: 100%;
		margin: 0 0 12%;
		padding: 0 0 60%;
		background: url(../img/abt/intro/intro_bg01.png) no-repeat center top;
		background-size: 100% auto;
		overflow: hidden;
	}
		#intro h2 p {
			position: absolute;
			width: 87.5%;
			bottom: 0;
			left: 50%;
			-webkit-transform: translate( -50%, 0);
			   -moz-transform: translate( -50%, 0);
			    -ms-transform: translate( -50%, 0);
			     -o-transform: translate( -50%, 0);
			        transform: translate( -50%, 0);
		}
		#intro article {
			width: 87.5%;
			margin: 9.4% auto 0;
		}
			#intro article h3 {
				width: 100%;
				padding: 0 0 1.5%;
				color: #fff;
				font-size: 16px;
				font-size: 1.6rem;
				font-feature-settings : "palt";
				line-height: 1.5;
				border-bottom: 1px solid #d23918;
			}
			#intro article p {
				width: 100%;
				margin: 7% 0 0;
				color: #fff;
				font-size: 12px;
				font-size: 1.2rem;
				line-height: 1.5;
			}
/* STORY --------------------------------------------*/
#story {
	width: 100%;
	padding: 0 0 12.5%;
	opacity: 0;
}
	#story h2 {
		position: relative;
		width: 100%;
		margin: 0 0 12%;
		padding: 0 0 60%;
		background: url(../img/abt/story/story_bg01.png) no-repeat center top;
		background-size: 100% auto;
		overflow: hidden;
	}
		#story h2 p {
			position: absolute;
			width: 87.5%;
			bottom: 0;
			left: 50%;
			-webkit-transform: translate( -50%, 0);
			   -moz-transform: translate( -50%, 0);
			    -ms-transform: translate( -50%, 0);
			     -o-transform: translate( -50%, 0);
			        transform: translate( -50%, 0);
		}
	#story article {
		width: 87.5%;
		margin: 9.4% auto 0;
	}
		#story article p {
			margin: 7% 0 0;
			color: #fff;
			font-size: 12px;
			font-size: 1.2rem;
			line-height: 1.5;
		}
	.slL,
	.slR {
		width: 100%;
		margin: 9.4% 0 0;
		padding: 0 0 23.4vw;
	}
	.slL {
		background: url(../img/abt/story/story_img01.jpg);
		background-size: auto 100%;
	}
	.slR {
		background: url(../img/abt/story/story_img02.jpg);
		background-size: auto 100%;
	}
/* CAST ---------------------------------------------*/
#cast {
	width: 100%;
	padding: 0 0 12.5%;
	opacity: 0;
}
	#cast h2 {
		position: relative;
		width: 100%;
		margin: 0 0 12%;
		padding: 0 0 60%;
		background: url(../img/abt/cast/cast_bg01.png) no-repeat center top;
		background-size: 100% auto;
		overflow: hidden;
	}
		#cast h2 p {
			position: absolute;
			width: 87.5%;
			bottom: 0;
			left: 50%;
			-webkit-transform: translate( -50%, 0);
			   -moz-transform: translate( -50%, 0);
			    -ms-transform: translate( -50%, 0);
			     -o-transform: translate( -50%, 0);
			        transform: translate( -50%, 0);
		}
	#cast article {
		width: 87.5vw;
		margin: 9.4vw auto 0;
		font-feature-settings : "palt";
	}
		#cast h3 .castName {
			margin: 6.25vw 0 0;
			color: #d23918;
			font-size: 16px;
			font-size: 1.6rem;
			font-weight: bold;
			line-height: 1;
		}
		#cast h3 .castRole {
			margin: 3.75vw 0 0;
			color: #fff;
			font-size: 12px;
			font-size: 1.2rem;
			font-weight: bold;
			line-height: 1;
		}
		#cast article p {
			margin: 6.25vw 0 0;
			color: #fff;
			font-size: 12px;
			font-size: 1.2rem;
			line-height: 1.5;
		}
/* STAFF --------------------------------------------*/
#staff {
	width: 100%;
	padding: 0 0 12.5%;
	opacity: 0;
}
	#staff h2 {
		position: relative;
		width: 100%;
		margin: 0 0 12%;
		padding: 0 0 60%;
		background: url(../img/abt/staff/staff_bg01.png) no-repeat center top;
		background-size: 100% auto;
		overflow: hidden;
	}
		#staff h2 p {
			position: absolute;
			width: 87.5%;
			bottom: 0;
			left: 50%;
			-webkit-transform: translate( -50%, 0);
			   -moz-transform: translate( -50%, 0);
			    -ms-transform: translate( -50%, 0);
			     -o-transform: translate( -50%, 0);
			        transform: translate( -50%, 0);
		}
	#staff article {
		width: 87.5vw;
		margin: 9.4vw auto 0;
		font-feature-settings : "palt";
	}
		#staff h3 .staffName {
			margin: 6.25vw 0 0;
			color: #3858d0;
			font-size: 16px;
			font-size: 1.6rem;
			font-weight: bold;
			line-height: 1;
		}
		#staff h3 .staffRole {
			margin: 3.75vw 0 0;
			color: #fff;
			font-size: 12px;
			font-size: 1.2rem;
			font-weight: bold;
			line-height: 1;
		}
		#staff article p {
			margin: 6.25vw 0 0;
			color: #fff;
			font-size: 12px;
			font-size: 1.2rem;
			line-height: 1.5;
		}
/* PRODUCTION NOTE ----------------------------------*/
#prono {
	width: 100%;
	padding: 0 0 12.5%;
	opacity: 0;
}
	#prono h2 {
		position: relative;
		width: 100%;
		margin: 0 0 12%;
		padding: 0 0 60%;
		background: url(../img/abt/prono/prono_bg01.png) no-repeat center top;
		background-size: 100% auto;
		overflow: hidden;
	}
		#prono h2 p {
			position: absolute;
			width: 100%;
			bottom: 0;
			left: 50%;
			-webkit-transform: translate( -50%, 0);
			   -moz-transform: translate( -50%, 0);
			    -ms-transform: translate( -50%, 0);
			     -o-transform: translate( -50%, 0);
			        transform: translate( -50%, 0);
		}
	.comingsoon {
		width: 87.5%;
		margin: 12.5vw auto 20vw;
	}
	#prono article {
		width: 87.5%;
		margin: 0 auto;
		color: #fff;
	}
		#prono article.prono02,
		#prono article.prono03,
		#prono article.prono04 {
			margin: 12.5vw auto 0;
		}
	#prono article h3 {
		color: #BE3314;
		font-size: 18px;
		font-size: 1.8rem;
		font-weight: bold;
		line-height: 1.8;
	}
	#prono article p {
		margin: 6.25vw 0 0;
		font-size: 12px;
		font-size: 1.2rem;
		line-height: 1.6;
	}
/* FOOTER -------------------------------------------*/
footer {
	width: 100%;
	padding: 0 0 12.5%;
}
	.billing_eng {
		width: 87.5%;
		margin: 0 auto;
	}
	.billing_jpn {
		width: 86.5%;
		margin: 4% auto 0;
	}
	.copyright {
		margin: 11% 0 0;
		color: #fff;
		font-size: 10px;
		font-size: 1.0rem;
		line-height: 1;
		text-align: center;
	}
/*---------------------------------------------------*/