@charset "utf-8";
/*----------------------------------------------------------------------------------
---------------------------------インポート------------------------------------------
----------------------------------------------------------------------------------*/
@import url("./font.css");
@import url("./reset.css");
/*----------------------------------------------------------------------------------
--------------------------------全デバイス共通---------------------------------------
----------------------------------------------------------------------------------*/

/*-----------------------------------ベース---------------------------------------*/
html{font-size:62.5%;}
body{
	font-family:'Noto Sans JP',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Osaka,sans-serif;
	font-weight: 400;
	font-size:2em;
	line-height:2;
	-webkit-text-size-adjust: none;
	letter-spacing: 0.04em;
	color: #fff;
	box-sizing: border-box;
	font-feature-settings: "palt";
	background-color: #090101;
}
::selection{background:#090101; color:#fff;}
::-moz-selection {background:#090101;color:#fff;}
a,
span,
i{
	color:inherit;
	font-weight: inherit;
}
a{
	text-decoration:none;
	transition:.4s;
}
.sp_only{display: none!important}
.tab_only{display: none!important}
img{
	max-width: 100%;
	height: auto;
}
ruby[data-ruby] {position:relative;}
ruby[data-ruby]::before {
	content: attr(data-ruby);
	position:absolute;
	left:-2em;
	top:-1em;
	right:-2em;
	text-align:center;
	font-size:.6em;
}
rt {
  display:none;
}
.preload * {
	-webkit-transition:none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}
.inview{
	opacity: 0;
	-webkit-transform: translateY(40px);
	-ms-transform: translateY(40px);
	transform: translateY(40px);
	transition: opacity 0.8s ease-out 0s, transform 0.8s ease-out 0s;
}
.inview.incontents{
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform:translateY(0);
}


#header_mv #mv{position: relative;}
#header_mv #mv > div{
	position: relative;
	overflow: hidden;
	display: block;
	max-height: 100vh;
}
#header_mv #mv > div::before{
	z-index: 2;
	position: absolute;
	content: " ";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-repeat: repeat;
	background-position: 0 0;
	background-image: url("../images/mv_mask.png");
}
#header_mv #mv > div img{
	display: block;
	transition: 3s 0.1s;
}
#header_mv #mv.inview_single > div img{
	opacity: 0;
	transform: scale(1.05);
}
#header_mv #mv.inview_single.incontents > div img{
	opacity: 1;
	transform: scale(1);
}

#header_mv #mv .mv_texts{
	z-index: 3;
	position: absolute;
}

#header_mv #mv h1{
	bottom: 35px;
	right: 35px;
	width: 15%;
	max-width: 140px;
}
#header_mv #mv h2{
	bottom: 35px;
	left: 35px;
	width: 40%;
	max-width: 450px;
	transition: 1.5s 3s;
}
#header_mv #mv p{
	top: 5vw;
	right: 5%;
	width: 20%;
	max-width: 420px;
	transition: .25s 2.5s;
}
#header_mv #mv.inview_single > div img{
	opacity: 0;
	transform: scale(1.05);
}
#header_mv #mv.inview_single.incontents > div img{
	opacity: 1;
	transform: scale(1);
}
#header_mv #mv.inview_single p{
	opacity: 0;
	transform: scale(1.5);
}
#header_mv #mv.inview_single.incontents p{
	opacity: 1;
	transform: scale(1);
}
#header_mv #mv.inview_single h2{
	opacity: 0;
}
#header_mv #mv.inview_single.incontents h2{
	opacity: 1;
}

#section1{
	background-repeat: no-repeat;
	background-position: center top;
	background-image: url("../images/section1_bg.jpg");
	padding: 100px 5% 200px;
	text-align: center;
}
#section1 h2{
	width: 20%;
	max-width: 200px;
	margin: 0 auto 110px;
}
#section1 .section1_movielist{
	max-width: 1300px;
	margin: 0 auto;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	/*align-items: center;*/
	justify-content: space-between;
	box-sizing: border-box;
}
#section1 .section1_movielist li{
	width: 47%;
	position: relative;
}
#section1 .section1_movielist li p{
	font-weight: 500;
	margin-top: 20px;
}
#section1 .section1_movielist li a{
	display: block;
	border: solid 5px #9a0606;
	position: relative;
	overflow: hidden;
}
#section1 .section1_movielist li a img{transition: .8s;}
#section1 .section1_movielist li a::before{
	z-index: 2;
	position: absolute;
	content: " ";
	width: 100px;
	height: 100px;
	left: 50%;
	top: 50%;
	margin: -50px 0 0 -50px;
	background-repeat: repeat;
	background-position: 0 0;
	background-image:url("../images/section1_icon.png");
	background-size: 100% auto;
}
#section2{
	position: relative;
	background-repeat: no-repeat;
	background-position: center top;
	background-image: url("../images/section2_bg01.jpg");
	padding: 50px 0 10px;
}
#section2::before{
	position: absolute;
	content: " ";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-repeat: no-repeat;
	background-position: center top;
	background-image: url("../images/section2_bg02.jpg");
	/*background-size: 100% auto;*/
	transition: 1s 1s;
	
}
#section2.inview_single::before{
	opacity: 1;
}
#section2.inview_single.incontents::before{
	opacity: 0;
}

#section2 .section2_lrbox{
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 3.5% 50px;
}

#section2 .section2_lrbox .leftbox{
	width: 10%;
}
#section2 .section2_lrbox .rightbox{
	width: 40%;
	max-width: 630px;
}
#section2 .sliderbox{
	position: relative;
}
#section2 .sliderbox h3{
	z-index: 3;
	width: 260px;
	position: absolute;
	left: 50%;
	top: -70px;
	margin-left: -130px;
}
#section2 .sliderbox ul li{
	margin: 0 5px;
	box-sizing: border-box;
	border: solid 1px rgba(255,255,255,.2);
}
#footer{
	text-align: center;
}
#footer .footer_box{
	background-position: center top;
	background-repeat: no-repeat;
	background-color: #130101;
	background-image: url("../images/footer_bg.png");
	box-sizing: border-box;
	padding: 70px 5% 55px;
}
#footer .footer_box dl{}
#footer .footer_box dl dt{
	width: 60%;
	max-width: 500px;
	margin:0 auto 45px;
}
#footer .footer_box dl dd{
	width: 20%;
	max-width: 150px;
	margin:0 auto 100px;
}
#footer .footer_box {
	font-size: 1.55rem;
}
#footer footer{
	font-size: 1.42rem;
	letter-spacing: 0.085em;
	padding: 10px 5%; 
}
/*----------------------------------------------------------------------------------
PCのみ
----------------------------------------------------------------------------------*/
@media screen and (min-width:1201px){
	html{overflow-x: hidden;}
	#section1 .section1_movielist li a:hover img{
		transform: scale(1.074);
		filter: brightness(220%);
	}

	
}
/*----------------------------------------------------------------------------------
タブレット・SP
----------------------------------------------------------------------------------*/
@media screen and (max-width:1200px){
	.pc_only{display: none;}
	#section2 .sliderbox ul li{}

}
/*----------------------------------------------------------------------------------
タブレット
----------------------------------------------------------------------------------*/
@media screen and (max-width:1200px) and (min-width:641px){
	.tab_only{display: block!important;}
	br.tab_only{display: inline-block!important;}

}
/*----------------------------------------------------------------------------------
SP
----------------------------------------------------------------------------------*/
@media screen and (max-width: 640px){
	body{
		font-size:1.35em;
		letter-spacing: 0.025em;
	}
	.sp_only{display: block!important;}
	br.sp_only{display: inline-block!important;}
	
	
	
	#header_mv #mv > div::before{background-size: auto 1px;}


	#header_mv #mv h1{
		bottom: auto;
		right: 5%;
		top: 5vw;
	}
	#header_mv #mv h2{
		bottom: 5vw;
		left: auto;
		right: 5%;
		width: 45%;
	}
	#header_mv #mv p{
		top: 25vw;
		right: auto;
		left: 6%;
		width: 26%;
	}


	#section1{
		background-size: cover;
		background-position: center top;
		padding: 50px 7%;
	}
	#section1 h2{margin: 0 auto 30px;}
	#section1 .section1_movielist{display: block;}
	#section1 .section1_movielist li{
		width: 100%;
		margin-top: 30px;
	}
	#section1 .section1_movielist li p{margin-top: 5px;}

	#section1 .section1_movielist li a::before{
		width: 50px;
		height: 50px;
		margin: -25px 0 0 -25px;
	}
	#section2{
		padding: 40px 0 10px;
		background-size: cover;
	}
	#section2::before{
		background-size: cover;
	}


	#section2 .section2_lrbox{
	padding: 0 5% 60px 0.5%;
		align-items: flex-start;
}

	#section2 .section2_lrbox .leftbox{width: 12%;}
	#section2 .section2_lrbox .rightbox{width: 70%;}
	#section2 .sliderbox h3{
	z-index: 3;
	width: 100px;
	position: absolute;
	left: 50%;
	top: -25px;
	margin-left: -50px;
}
	#section2 .sliderbox ul li{width: 58%;}
	#footer .footer_box{
		background-size: 200% auto;
		background-position: center bottom;
		padding: 50px 5%;
	}
	#footer .footer_box dl dt{margin:0 auto 35px;}
	#footer .footer_box dl dd{margin:0 auto 50px;}
	#footer .footer_box {font-size: 1.35rem;}
	#footer footer{
	font-size: 1.25rem;
}

}