@charset "utf-8";
/* loadong */
#loading{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 100;
	background-color: #ffffff;
	z-index:20000;
}
#loading .loadCont{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, calc(-50% - 80px));
	width: 220px;
}
@keyframes loadanimation{
	0% {transform: translateX(0);}
	100% {transform: translateX(100%);}
}
#progressBar{
	position: absolute;
	top: 50%;
	left: 0;
	width: 0;
	height: 1px;
	background-color: #33293E;
}
#progressTxt{
	position: absolute;
	top: calc(50% + 10px);
	text-align: center;
	color: #33293E;
	font-style: italic;
	width: 100%;
	font-size: .24rem;
	font-family: 'Pathway Gothic One', sans-serif;
}
#progressTxt span{font-size: .16rem;}

#header{
	position: relative;
	margin: 0 auto;
	width: 100%;
}
/* keyvisual */
#keyvisual{
	position: relative;
	margin: 0;
	width: 100%;
	z-index: 10;
	overflow: hidden;
}
#keyvisual #keyvisualImg{
	position: relative;
	margin: 0;
	width: 100%;
	height: 0;
	padding-top:141.25%;
	background-image:url("../img/index/main.jpg");
	background-position: 50% 0;
	background-size: cover;
	background-repeat: no-repeat;
}
#keyvisual #logo{
	position: absolute;
	bottom: 10%;
	left: 51%;
	transform: translateX(-50%);
	width: 58%;
	opacity: 0;
}
#keyvisual #logo img{position: relative;margin: 0 auto;}
#keyvisual #catch{
	position: absolute;
	top: 43%;
	left: 66%;
	width: 3.6%;
	opacity: 0;
}
#keyvisual #roadshow{
	position: absolute;
	bottom: 3%;
	left: 50%;
	transform: translateX(-50%);
	width: 17%;
	opacity: 0;
}
#keyvisual #catch01{
	position: absolute;
	bottom: 9%;
	left: 50%;
	transform: translateX(-50%);
	width: 94%;
	opacity: 0;
}
#credit{
	position: relative;
	margin: 10px auto  auto;
	width: 88%;
	max-width:717px;
	opacity: 0;
}
#logo01{
	position: relative;
	margin: 10px auto 0 auto;
	padding-bottom: 10px;
	width: 60%;
	gap: 0 20px;
	opacity: 0;
}
#logo01 div{
	position: relative;
	margin: 0;
	width: calc(50% - 20px);
	max-width: 60px;
}
#logo01 div img{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: auto;
}

#snsBox{
	position: relative;
	margin: 0 auto;
	width: 100%;
	opacity: 0;
}
#snsBox .snsBoxInner{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 720px;
	min-height: 160px;
}
#snsBox .snsBoxInner #twitter-widget-0{background-color: #111010;z-index: 200;}

#social{
	position: relative;
	margin: 0 auto;
	padding: 10px 0 5px 0;
	width: 100%;
	text-align: center;
	gap:0 5px;
	opacity: 0;
	z-index: 50;
}
#social li{
	position: relative;
	margin: 0;
	vertical-align: bottom;
}

#mvtkW{
	position: relative;
	opacity: 0;
}
.mvtkLinks{
	position: relative;
	margin: 10px auto;
	width: calc(100% - 5px);
}
.mvtkLinks ul{position: relative;gap: 5px;}
.mvtkLinks ul li{
	position: relative;
	margin: 0;
	width: calc(50% - 5px);
}
.mvtk{
	position: relative;
	margin: 15px auto 0 auto;
	max-width: 840px;
}
.mvtk #mvtk-widgets-container{margin: 0 auto;width: calc(100% - 30px);}

#banner{
	position: relative;
	margin: 15px auto 0 auto;
	width: calc(100% - 10px);
	max-width: 580px;
	opacity: 0;
}
#banner .bnr{
	position: relative;
	margin: 0 auto 10px auto;
}

/* ----- pc ----- */
@media screen and (min-width: 799px) and (orientation: landscape) {


	/* keyvisual */
	#header{margin: 0 0 0 auto;width: calc(100% - 240px); }
	#keyvisual #keyvisualImg{background-image:url("../img/index/main_pc.jpg");padding-top: 132.5%;}
	#keyvisual #logo{
	bottom: 45%;
}
	#keyvisual #catch{
		top: 8%;
		left: 88%;
		width: 2.8%;
	}
	#keyvisual #roadshow{
		bottom: 4%;
		width: 13%;
	}
	#keyvisual #catch01{
		bottom: 12%;
		width: 85%;
	}
	#credit_pc{
		position: absolute;
		bottom: 8%;
		left: 50%;
		transform: translateX(-50%);
		width: 50%;
		opacity: 0;
	}
	#logo01_pc{
		position: absolute;
		bottom: 0.5%;
		left: 50%;
		transform: translateX(-50%);
		width: 95%;
		opacity: 0;
	}
	#logo01_pc div{
		position: absolute;
		bottom: 0.5%;
		width: 8%;
	}
	#logo01_pc div.kino{
		left: 0;
	}
	#logo01_pc div.lionsgate{
		right: 0;
	}
	#logo01_pc div img{
		position: relative;
		margin: 0 auto;
		width: 100%;
		max-width: auto;
	}
	
	#snsBox{
		margin: 20px auto 0 auto;
		width: calc(100% - 30px);
		border-radius: 5px;
		overflow: hidden;
	}
	#snsBox .snsBoxInner{
		max-width: 720px;
		min-height: 160px;
		max-height: 180px;
	}
	
	#social{
		position: absolute;
		margin: auto;
		top: 10px;
		right: 10px;
		justify-content: flex-end;
	}
	
	#banner{
		position: absolute;
		margin:auto;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 20;
	}
	#banner .bnr{
		position: absolute;
		margin: auto;
		width: 29%;
		transition: all .3s ease-out;
	}
	#banner .bnr:hover{opacity: 0.8;}
	#banner .bnr.bnr01{
		top: 10px;
		left: 3%;
	}
	#banner .bnr.bnr02{
		top: 10px;
		left: 34%;
	}

}