@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;
}
.bnrjw{
	position: relative;
	margin: 10px auto;
	width: calc(100% - 5px);
}
.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: 680px;
	opacity: 0;
}
#banner .bnr{
	position: relative;
	margin: 0 auto 10px auto;
}

.modal01{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	height: 100svh;
	background-image: url("../img/world/bg.jpg");
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 3000;
	display: none;
	overflow-y: scroll;
}
.modal01 .closeWin{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3001;
}
.modal01 .closeT{
	position: absolute;
	top:0;
	right: 0;
	width: 30px;
	height: 30px;
	padding: 5px;
	cursor: pointer;
	z-index: 3002;
}
.modal01 .worldWrap{
	position: relative;
	margin:  0 auto;
	width: 100%;
	max-width: 960px;
	color: #ffffff;
}
.modal01 h2{
	position: relative;
	margin: 0;
	width: 70%;
	max-width: 305px;
}
.modal01 .catchw{
	position: relative;
	margin: 30px auto;
	width: 88%;
}
.modal01 .catchw img{
	position: relative;
	margin: 0;
	display: block;
	width: 100%;
	max-width: 640px;
}
.modal01 .aboutjw{
	position: relative;
	margin: 0 auto;
	width: 88%;
}
.modal01 .aboutjw h3{
	position: relative;
	margin: 0 auto 5px auto;
	font-size: 120%;
	font-weight: bold;
}
.modal01 .aboutjw p{
	position: relative;
	margin: 0 auto;
	font-size: 94%;
	line-height: 1.4em;
}
.modal01 .world{
	position: relative;
	margin: 0 auto;
	width: 88%;
	padding-bottom: 40px;
}
.modal01 .world h3{
	position: relative;
	margin: 20px auto;
}
.modal01 .world ul{
	position: relative;
	margin: 0 auto;
	width: 100%;
	gap: 30px 20px;
}
.modal01 .world ul li{
	position: relative;
	margin: 0;
	width: 100%;
}
.modal01 .world ul li h4{
	position: relative;
	margin: 0 auto;
	border-radius: 100px;
	background: #E73E90;
	background: linear-gradient(270deg,rgba(0, 86, 168, 1) 0%, rgba(231, 62, 144, 1) 100%);
	color: #ffffff;
	text-align: center;
	line-height: 1em;
	padding: 7px 0;
}
.modal01 .world ul li h4 span{font-size: 80%;}
.modal01 .world ul li h4.margin{margin: 30px auto 0 auto;}
.modal01 .world ul li h5{
	position: relative;
	margin:  10px auto;
	border-bottom: solid 1px #ffffff;
}
.modal01 .world ul li .text{
	position: relative;
	margin: 0 auto;
	width: 100%;
	gap: 10px 20px;
}
.modal01 .world ul li .text .Txt{
	position: relative;
	margin: 0;
	width: 100%;
	font-size: 86%;
	line-height: 1.4em;
}
.modal01 .world ul li .text .Img{
	position: relative;
	margin: 0 0 10px 0;
	width: 100%;
}
.modal01 .world ul li .text .Img.margin{margin: 10px 0;}
.modal01 .world ul li .text .Img img{
	position: relative;
	margin: 0 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%;
		max-width: 100%;
		height: 100%;
		z-index: 20;
		border: solid 1px;
	}
	#banner .bnr{
		position: absolute;
		margin: auto;
		/*width: 29%;*/
		width: 12%;
		transition: all .3s ease-out;
	}
	#banner .bnr:hover{opacity: 0.8;}
	#banner .bnr.bnr01{
		top: 10px;
		left: 1%;
	}
	#banner .bnr.bnr02{
		top: 10px;
		left: 13.5%;
	}
	#banner .bnr.bnr03{
		top: 10px;
		left: 26%;
	}
	#banner .bnr.bnr04{
		top: min(10%, 420px);
		left: 1%;
	}
	#banner .bnr.bnr05{
		top: 10px;
		right: 190px;
		cursor: pointer;
	}
	
	.modal01{background-image: url("../img/world/bg_pc.jpg");}
	.modal01 .closeT{
		width: 40px;
		height: 40px;
	}
	.modal01 .catchw{
		position: absolute;
		top:40px;
		right: 20px;
		margin: auto;
		width: 20%;
		max-width: 96px;
	}
	.modal01 .catchw img{max-width: 96px;}
	.modal01 .aboutjw{
		margin: 40px auto;
		width: 94%;
	}
	.modal01 .aboutjw h3{font-size: 130%;}
	.modal01 .aboutjw p{
		font-size: 94%;
		line-height: 1.6em;
	}
	.modal01 .world{
		width: 94%;
		padding-bottom: 50px;
	}
	.modal01 .world ul{
		margin: 0;
		max-width: 960px;
		gap: 0 30px;
	}
	.modal01 .world ul li{width: calc(50% - 15px);}
	.modal01 .world ul li h4.margin{margin:20px auto 0 auto;}
	.modal01 .world ul li .text.flexbox .Txt{width: calc(50% - 10px);}
	.modal01 .world ul li .text.flexbox .Img{
		margin: 0;
		width: calc(50% - 10px);
	}
	.modal01 .world ul li .text .Img.margin{margin: 10px 0 0 0;}


}