@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;
	z-index:-1;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:177.777777vh; /* (横2048 / 縦1152)*100 */
	height:56.25vw; /* (縦1152 / 横2048)*100 */
	min-height:100%;
	min-width:100%;
}

#loading_img video{
	width:100%;
	height:100%;
}

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


/*--------------------------------------
bg
----------------------------------------*/
#bg_block{
	width:100%;
	min-width: 1200rem;
	position:fixed;
	left:0;
	top:0;
	height:100vh;
	z-index:0;
	overflow:hidden;
	border-bottom:2px solid #000;
}

#bg1{
	width:50%;
	position:absolute;
	left:0;
	top:0;
	height:100vh;
	background-color:#FA0001;
	z-index:0;
}

#bg2{
	width:50%;
	position:absolute;
	right:0;
	top:0;
	height:100vh;
	background-color:#2749AA;
	z-index:0;
}

@media (max-width: 1200px) {
	#bg1,#bg2{
		width:600px;
	}
	#bg2{
		left:600px;
	}
}

/*--------------------------------------
menu
----------------------------------------*/
#menu{
	width:100%;
	height:100rem;
	position:absolute;
	right:20rem;
	top:20rem;
	z-index:1000;
}

#menu ul{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30rem;
  /*transition: opacity .5s;*/
}

#menu ul li{
	font-size:15rem;
	line-height:1.6;
	color:#fff;
	font-weight:600;
	letter-spacing:1.5rem;
}

#menu ul li a.active{
	color:#FA0001;
}

.x_icon{
	width:20rem;
}

#bnr_mvtk{
	width:240rem;
	position:absolute;
	right:0;
	bottom:0;
}
/*--------------------------------------
coin
----------------------------------------*/
#coin{
	width:710rem;
	margin:0 auto;
}

/*--------------------------------------
block
----------------------------------------*/
#block{
	width:680rem;
	position:absolute;
	left:0;
	top:20%;
}

#block #logo{
	width:100%;
	position:relative;
	margin:0 auto;
}

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

.p-hero__box{
	width:1850rem;
	margin:0 auto;
	position:relative;
}

/*--------------------------------------
btn_trailer
----------------------------------------*/
#btn_trailer{
	width:536rem;
	height:160rem;
	position:absolute;
	right:30rem;
	bottom:30rem;
	z-index:1000;
}

#btn_trailer #js-firstTrailer{
	width:320rem;
	height:160rem;
	position:absolute;
	right:0;
	top:0;
	border-radius:80rem;
	overflow:hidden;
	box-sizing:border-box;
	border:1px solid #FA0001;
}

#btn_trailer #js-firstTrailer::before {
  content: '';
  position: absolute;
  top: 58rem;
  left: 138rem;
  width: 44rem;
  height: 44rem;
	background: url(../img/play_icon.png) no-repeat center center;
	background-size:cover;
	z-index:10;
}

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

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

#credit{
  width: 1160rem;
	position:relative;
	margin:0 auto;
	padding:60rem 0;
}

/*--------------------------------------
mvtkWidget
----------------------------------------*/
#mvtkWidget{
	position:relative;
	z-index:10;
	padding-top:60rem;
}

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

#bottom{
	width:100%;
	position:relative;
	text-align:center;
	background-color:#000;
}

#bottom ul{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16rem;
	margin:40rem auto 0;
}

#bottom ul li{
	width:232rem;
}

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

#bg1{
	transform:scale(0,1);
	transform-origin:left top;
}

#bg2{
	transform:scale(0,1);
	transform-origin:right top;
}

@keyframes slideLeft {
  from {
    opacity: 0;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
  }
}

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slide_credit {
  from {
    opacity: 0;
	-webkit-transform: translateX(500rem);
	transform: translateX(500rem);
  }
  to {
    opacity: 1;
	-webkit-transform: translateX(500rem);
	transform: translateX(0);
  }
}

.is_loaded #bg1{
  animation: slideLeft 0.6s cubic-bezier(.02,.65,.28,.8) 0.6s forwards;
}

.is_loaded #bg2{
  animation: slideRight 0.6s cubic-bezier(.02,.65,.28,.8) 0.6s forwards;
}

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

.is_loaded #logo{
  animation: fadeInUp 1.8s cubic-bezier(.17,.67,.3,.92) 1.4s forwards;
}

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


#coin,
#block #logo,
#date{
	opacity:0;
}