@charset "UTF-8";

/*--------------------------------------
opening
----------------------------------------*/
#opening{
	width:100%;
	min-width: 1100rem;
	position:fixed;
	height:100vh;
	background-color:#000;
	z-index:8000;
	left:0;
	top:0;
	display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
	will-change: opacity;
}

#opening #catch_op{
	width:640rem;
	position:relative;
	overflow:hidden;
	transform-origin: center center;
  will-change: transform;
}

#opening #catch_op #shadow{
	width:1830rem;
	position:absolute;
	left:0;
	top:0;
	will-change: transform;
}

/*--------------------------------------
bg
----------------------------------------*/
#bg{
	width:100%;
	min-width: 1100rem;
	position:fixed;
	height:100vh;
	background: url(../img/bg.jpg) no-repeat center center;
	background-size:cover;
	z-index:0;
}

/*--------------------------------------
main
----------------------------------------*/
#main{
	width:1020rem;
	position:relative;
}

#catch_cross{
	width:760rem;
	position:relative;
	margin:0 auto 0;
}

#main ul.catch{
	width:940rem;
	height:80rem;
	display: flex;
  justify-content: start;
  align-items: start;
	flex-wrap: wrap;
	margin:0 auto;
}

#main ul.catch li:nth-child(1){
	width:15.4%;
}

#main ul.catch li:nth-child(2){
	width:16.4%;
}

#main ul.catch li:nth-child(3){
	width:11.6%;
}

#main ul.catch li:nth-child(4){
	width:4.2%;
}

#main ul.catch li:nth-child(5){
	width:36.2%;
}

#main ul.catch li:nth-child(6){
	width:16.2%;
}

#logo{
	width:1020rem;
	height:330rem;
	position:relative;
	margin:0 auto 0;
}

#logo ul.logo_parts{
	width:100%;
	height:100%;
	position:relative;
}

#logo ul.logo_parts li{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}

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

/* --------------------------------------------------
bnr
-------------------------------------------------- */
#bnr {
  width: 150rem;
  position: absolute;
  left: 10rem;
  bottom: 100rem;
}

#bnr ul li{
  width: 150rem;
	position:absolute;
}

/* --------------------------------------------------
mvtk
-------------------------------------------------- */
#movie_ticket{
	background-color: rgba(0, 0, 0, 0.7);
	padding: 70rem 0;
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 999;
	transform: translateY(100%);
	visibility: hidden;
	opacity: 0;
}

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

#movie_ticket .close{
	width:40rem;
	height:40rem;
  position: absolute;
  right: 20rem;
  top: 20rem;
	z-index:1;
}

#movie_ticket .close:before{
	display:block;
	position:absolute;
	left:0;
	top:20rem;
	content:"";
	width:45rem;
	height:3rem;
	background-color:#ba894e;
	transform:rotate(-45deg);
	z-index:2;
}

#movie_ticket .close:after{
	display:block;
	position:absolute;
	left:0;
	top:20rem;
	content:"";
	width:45rem;
	height:3rem;
	background-color:#ba894e;
	transform:rotate(45deg);
	z-index:2;
}

/* --------------------------------------------------
footer
-------------------------------------------------- */
.l-footer {
  position: absolute;
  left: 0;
  bottom: 5rem;
  width: 100%;
  min-width: 1100rem;
	height:25rem;
  justify-content: start;
  align-items: center;
	display: flex;
	flex-wrap: wrap;
}

.l-footer__copyright {
	width:100%;
	color:#5f5b55;
}

.l-footer__copyright p{
	text-align:center;
  font-size: 10rem;
  line-height: 1;
	font-weight:400;
	padding-left:10rem;
}

#credit{
	width:260rem;
	position:absolute;
  left: 10rem;
  bottom: 0;
}

.l-footer__copyright ul{
	width:280rem;
	height:25rem;
  position: absolute;
  right: 10rem;
  bottom: 0;
  justify-content: space-between;
  align-items: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	font-size:11rem;
	font-weight:400;
}

.l-footer__copyright ul li:nth-child(1){
	margin-top:1rem;
}

.l-footer__copyright ul li:nth-child(2){
	width:80rem;
}

.l-footer__copyright ul li:nth-child(3){
	width:77rem;
}

/*--------------------------------------
mvtkWidget
----------------------------------------*/
#mvtk{
	width:100%;
	min-width: 1100rem;
	margin:80rem auto 0;
}

#mvtkWidget{
	position:relative;
}

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

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

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

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
		pointer-events: none;
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
		pointer-events: auto;
  }
}

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

@keyframes slideX {
  from {
    opacity: 0;
    transform: translateX(-200rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes zoomOut {
  from {
    -webkit-transform: scale(1.2);
    transform:scale(1.2);
  }
  to {
    -webkit-transform: scale(1.0);
    transform:scale(1.0);
  }
}

#main #catch_cross,
#main ul.catch li,
#main #logo ul.logo_parts li,
#date,
#bnr,
.p-topNav ul li,
.c-sns{
	opacity:0;
}

.start_cont #main #catch_cross{
  animation: blur 1.0s cubic-bezier(.17,.67,.3,.92) 1.0s forwards;
}

.start_cont #main ul.catch li:nth-child(2){
  animation: blur 1.0s cubic-bezier(.17,.67,.3,.92) 1.6s forwards;
}

.start_cont #main ul.catch li:nth-child(4){
  animation: blur 1.0s cubic-bezier(.17,.67,.3,.92) 2.0s forwards;
}

.start_cont #main ul.catch li:nth-child(1){
  animation: blur 1.0s cubic-bezier(.17,.67,.3,.92) 2.4s forwards;
}

.start_cont #main ul.catch li:nth-child(5){
  animation: blur 1.0s cubic-bezier(.17,.67,.3,.92) 2.8s forwards;
}

.start_cont #main ul.catch li:nth-child(3){
  animation: blur 1.0s cubic-bezier(.17,.67,.3,.92) 3.2s forwards;
}

.start_cont #main ul.catch li:nth-child(6){
  animation: blur 1.0s cubic-bezier(.17,.67,.3,.92) 3.6s forwards;
}

.start_cont #main #logo{
  animation: zoomOut 4.0s cubic-bezier(.17,.67,.3,.92) 3.0s forwards;
}

.start_cont #main #logo ul.logo_parts li:nth-child(1){
  animation: fadeIn 4.0s cubic-bezier(.17,.67,.3,.92) 3.0s forwards;
}

.start_cont #main #logo ul.logo_parts li:nth-child(2){
  animation: fadeIn 4.0s cubic-bezier(.17,.67,.3,.92) 3.2s forwards;
}

.start_cont #main #logo ul.logo_parts li:nth-child(3){
  animation: fadeIn 4.0s cubic-bezier(.17,.67,.3,.92) 3.4s forwards;
}

.start_cont #main #logo ul.logo_parts li:nth-child(4){
  animation: fadeIn 4.0s cubic-bezier(.17,.67,.3,.92) 3.6s forwards;
}

.start_cont #main #logo ul.logo_parts li:nth-child(5){
  animation: fadeIn 4.0s cubic-bezier(.17,.67,.3,.92) 3.8s forwards;
}

.start_cont #main #logo ul.logo_parts li:nth-child(6){
  animation: fadeIn 4.0s cubic-bezier(.17,.67,.3,.92) 4.0s forwards;
}

.start_cont #main #logo ul.logo_parts li:nth-child(7){
  animation: fadeIn 4.0s cubic-bezier(.17,.67,.3,.92) 4.2s forwards;
}

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

.start_cont .p-topNav ul li:nth-child(1){
  animation: fadeInUp 1.0s cubic-bezier(.17,.67,.3,.92) 5.8s forwards;
}

.start_cont .p-topNav ul li:nth-child(2){
  animation: fadeInUp 1.0s cubic-bezier(.17,.67,.3,.92) 6.0s forwards;
}

.start_cont .p-topNav ul li:nth-child(3){
  animation: fadeInUp 1.0s cubic-bezier(.17,.67,.3,.92) 6.2s forwards;
}

.start_cont #bnr{
  animation: slideX 1.0s cubic-bezier(.17,.67,.3,.92) 6.4s forwards;
}

.start_cont .c-sns{
	animation: fadeInDown 1.0s cubic-bezier(.17,.67,.3,.92) 6.6s forwards;
}