@charset "UTF-8";

/*--------------------------------------
loading
----------------------------------------*/

.layout-loading{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000;
	z-index:9999;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:center;
	justify-content:center;
	-ms-flex-align:center;
	align-items:center;
	transition:.2s cubic-bezier(.39,.575,.565,1);
}

#loading_img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
}

#loading_img video{
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%,-50%);
}

.is_loaded .layout-loading{
	opacity:0;
	visibility:hidden;
}

/* --------------------------------------------------
layout
-------------------------------------------------- */
.l-wrap {
  position: relative;
  width: 100%;
	z-index:100;
}

.l-wrap > * {
  width: 100%;
}

.l-cont {
  /*max-width: 660rem;*/
	width: 100%;
  margin: 0 auto;
}

/*--------------------------------------
mainvisual
----------------------------------------*/
#poster{
	width:100%;
	position:relative;
}

#date{
	width:100%;
	position:relative;
	background-color:#000;
	padding:20rem 0;
}

#date h2{
	width:450rem;
	position:relative;
	margin:0 auto;
}

/*--------------------------------------
contents
----------------------------------------*/
#contents{
	width:100%;
	position:relative;
	margin:0 auto;
	background-color:#C30205;
	padding:120rem 0 0;
}

#contents #js-firstTrailer{
	width:640rem;
	height:320rem;
	position:relative;
	border-radius:160rem;
	overflow:hidden;
	box-sizing:border-box;
	border:4rem solid #FA0001;
	margin:0 auto;
}

#contents #js-firstTrailer::before {
  content: '';
  position: absolute;
  top: 116rem;
  left: 276rem;
  width: 88rem;
  height: 88rem;
	background: url(../../../assets/img/play_icon.png) no-repeat center center;
	background-size:cover;
	z-index:10;
}

#contents #js-firstTrailer::after {
  content: '';
  position: absolute;
  top: 127rem;
  right: 0;
  width: 246rem;
  height: 66rem;
	background: url(../../../assets/img/play.png) no-repeat center center;
	background-size:cover;
	z-index:10;
}

#contents #js-firstTrailer video{
	width:100%;
	height:100%;
}

#contents ul.navi{
	width:480rem;
	margin:80rem auto 0;
}

#contents ul.navi li{
	margin-bottom:30rem;
}

#contents ul.navi li:last-child{
	margin-bottom:0;
}

#contents ul.navi li a{
	display:block;
	width:100%;
	height:100rem;
	font-size:42rem;
	font-weight:600;
	text-align:center;
	color:#fff;
	line-height:1.0;
	border:3rem solid #fff;
	letter-spacing:5rem;
	display:flex;
	justify-content:center;
	align-items:center;
}

#contents #bnr_mvtk{
	width:480rem;
	margin:30rem auto 0;
}

#contents #bnr_mvtk a{
	display:block;
	width:100%;
	height:100rem;
	border:3rem solid #fff;
}

#contents #x_btn{
	width:36rem;
	margin:50rem auto 0;
}
/*
#contents #credit{
	background-color:#000;
	width:100%;
	margin:50rem auto 0;
	padding:60rem 0 30rem;
	text-align:center;
}

#contents #credit img{
	width:640rem;
}
*/
/*--------------------------------------
mvtkWidget
----------------------------------------*/
#mvtkWidget{
	position:relative;
	z-index:10;
	padding-top:60rem;
}

#mvtk-widgets-container{
	margin:0 auto;
}

ul.mvtk{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
	margin:40rem auto 0;
}

ul.mvtk li{
	width:232rem;
}

/*--------------------------------------
intro
----------------------------------------*/
#introduction{
	width:100%;
	position:relative;
	margin:0 auto;
	padding:120rem 0 0;
}

#intro_img{
	width:100%;
	position:relative;
}

#intro_img::after {
  content: '';
  position: absolute;
  top: -40rem;
	left:0;
  right: 0;
  width: 2px;
  height: 80rem;
	margin:auto;
	background-color:#EDB116;
	z-index:10;
}

#introduction h2{
	color: #EDB116;
	font-size: 92rem;
	font-weight: 400;
	line-height: 1.0;
	letter-spacing: -2rem;
	text-align:center;
	padding:20rem 0 80rem;
}

.char {
	display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}

#introduction p{
  position: relative;
  width: 600rem;
	margin:0 auto;
	font-size:32rem;
	font-weight:500;
	color:#fff;
	line-height:1.8;
	padding-bottom:40rem;
}

#introduction h3{
  position: relative;
  width: 600rem;
	margin:0 auto;
	font-size:48rem;
	font-weight:500;
	color:#fff;
	line-height:1.6;
	padding-top:40rem;
}

/*--------------------------------------
story
----------------------------------------*/
#story {
  position: relative;
  width: 100%;
	padding:100rem 0 100rem;
}

#story_img {
  width: 100%;
  position: relative;
}

#story_img::after {
  content: '';
  position: absolute;
  top: -40rem;
	left:0;
  right: 0;
  width: 2px;
  height: 80rem;
	margin:auto;
	background-color:#EDB116;
	z-index:10;
}

#story h2{
	color:#EDB116;
	font-size: 92rem;
	font-weight: 400;
	letter-spacing: -1rem;
	text-align:center;
  position: relative;
	line-height:1.0;
	padding-top:20rem;
}

#story p{
  position: relative;
  width: 600rem;
	margin:0 auto;
	font-size:32rem;
	font-weight:500;
	color:#fff;
	line-height:1.8;
	padding-top:80rem;
}

/*--------------------------------------
cast
----------------------------------------*/
#cast {
  position: relative;
  width: 100%;
	background: url(../img/waku.png) no-repeat center top;
	background-size:100% auto;
	box-sizing:border-box;
	margin-top:20rem;
	padding:100rem 0 0;
}

#cast h2{
	color:#EDB116;
	font-size: 92rem;
	font-weight: 400;
	letter-spacing: -1rem;
	text-align:center;
  position: relative;
	line-height:1.0;
	padding-top:20rem;
}

#cast dl{
  width: 600rem;
	margin:50rem auto 0;
	display: flex;
  justify-content: space-between;
  align-items: start;
	flex-wrap: wrap;
	border-bottom:1px solid #e28788;
	padding-bottom:80rem;
	margin-bottom:80rem;
}

#cast dl:nth-of-type(3){
	padding-bottom:80rem;
	margin-bottom:0;
}

#cast dl dt{
	width:100%;
}

#cast dl dd{
	width:100%;
}

#cast dl dd h3,
.other h3{
	font-size:48rem;
	font-weight:500;
	padding-top:100rem;
}

#cast dl dd p,
.other p{
	font-size:32rem;
	font-weight:500;
	color:#fff;
	line-height:1.8;
	padding-top:60rem;
}

#cast dl dd .profile,
.other .profile{
	width:100%;
	background: linear-gradient(to left, #C30205 10%, #9C712D 70%, #9C712D 100%);
	margin-top:60rem;
	border-radius: 150rem 0 0 150rem;
	padding:30rem 0 80rem 70rem;
	box-sizing:border-box;
}

#cast dl dd .profile p,
.other .profile p{
	font-size:40rem;
	font-weight:500;
	line-height:1.0;
}

#cast dl dd .profile span,
.other .profile span{
	display:block;
	font-size:32rem;
	font-weight:500;
	line-height:1.8;
	margin-top:10rem;
}

.other{
  width: 600rem;
	margin:0 auto 0;
}

.other:nth-of-type(1){
	border-bottom:1px solid #e28788;
	padding-bottom:70rem;
	margin-bottom:0rem;
}

/*--------------------------------------
staff
----------------------------------------*/
#staff {
  position: relative;
  width: 100%;
	margin-top:20rem;
	padding:150rem 0 100rem;
}

#staff h2{
	color:#EDB116;
	font-size: 92rem;
	font-weight: 400;
	letter-spacing: -1rem;
	text-align:center;
  position: relative;
	line-height:1.0;
	padding-top:20rem;
}

#staff ul{
  width: 600rem;
	margin:70rem auto 0;
	display: flex;
  justify-content: start;
  align-items: start;
	flex-wrap: wrap;
}

#staff ul li{
	width:100%;
	border-bottom:1px solid #e28788;
	padding-bottom:70rem;
	margin-bottom:80rem;
}

#staff ul li:last-child{
	width:100%;
	border-bottom:0;
	padding-bottom:0;
	margin-bottom:0;
}

#staff ul li p{
	font-size:36rem;
	font-weight:500;
	line-height:1.0;
}

#staff ul li h3{
	font-size:48rem;
	font-weight:500;
	line-height:1.0;
	margin-top:20rem;
}

#staff ul li span{
	display:block;
	font-size:32rem;
	font-weight:500;
	line-height:2.0;
	margin-top:40rem;
}

/* --------------------------------------------------
footer
-------------------------------------------------- */
#footer{
	width:100%;
	background-color:#000;
	padding:120rem 0 60rem;
}

#footer #credit{
	width:650rem;
	margin:0 auto;
}

/* --------------------------------------------------
animation
-------------------------------------------------- */

@keyframes blur {
  0% {
	  opacity: 0;
    filter: blur(40rem);
    transform:scale(1.2);
  }
  100% {
	  opacity: 1;
    filter: blur(0);
    transform:scale(1.0);
  }
}

@keyframes fadeIn {
  0% {
	  opacity: 0;
  }
  100% {
	  opacity: 1;
  }
}


.poster,
#date{
	opacity:0;
}

.is_loaded .poster{
  animation: fadeIn 1.2s cubic-bezier(.17,.67,.3,.92) 0.8s forwards;
}

.is_loaded #date{
  animation: blur 1.8s cubic-bezier(.17,.67,.3,.92) 1.0s forwards;
}