@charset "utf-8";

@media screen and (min-width: 768px){
	html,body,#Container,#Content{
		min-height: 770px;
	}
}

/*-----------------------------------------------------
Container
-------------------------------------------------------*/
#Content{
	padding: 0;
}


/*-------------------------------------
Header
---------------------------------------*/
#Header{
	z-index: 3000;
}
#Header h1{
	position: fixed;
	top:50%;
	left:710px;
	margin: -45px 0 0;
	opacity: 0;
}

/* GlobalNavi
---------------------*/
#GlobalNavi{
	position: fixed;
	/*z-index: 1000;*/
}

/*-------------------------------------
MV
---------------------------------------*/
#MV{
	width: 100%;
	height: 100%;
	position: relative;
}
#MV p.gauge{
	width: 0%;
	height: 1px;
	display: block;
	position: absolute;
	top:79px;
	left:0;
	background: #888;
	z-index: 100;
}


#MV h2{
	position: absolute;
	margin: 0;
	left:105px;
	bottom: 140px;
	font-size: 30px;
	font-weight: 400;
	font-style: normal;
	font-family: 'Teko', sans-serif;
	-webkit-font-smoothing:antialiased;
	z-index:500;
}

/* ul
---------------------*/
#MV ul{
	width: 100%;
	height: 100%;
	position: relative;
}
#MV ul li{
	width: 100%;
	position: absolute;
	top:0;
	left:0;
	padding: 80px 0 90px;
	box-sizing:border-box;
	background: #fff;
	z-index: 1;
}
#MV ul li.active{
	z-index: 10;
}
#MV ul li span{
	width: 100%;
	display: block;
	position: relative;
	overflow: hidden;
}
#MV ul li span img{
	position: absolute;
	top:50%;
	left:50%;
}
#MV ul li em{
	opacity: 0;
	z-index: 300;
	position: absolute;
	bottom:20px;
	left:100px;
	font-size: 114px;
	font-weight: 300;
	font-style: normal;
	font-family: 'Teko', sans-serif;
	-webkit-font-smoothing:antialiased;
	line-height: 1;
	text-wrap:none;
	white-space: nowrap;
}
#MV ul li:first-child em{
	opacity: 1;
}

/* svg
---------------------*/
/* bg */
#MV svg.bg{
	overflow: hidden;
	position: absolute;
	top:80px;
	left:0;
	z-index: 100;
}

/* cover */
#MV svg.cover{
	overflow: hidden;
	position: absolute;
	top:80px;
	left:0;
	z-index: 100;
}

/* line */
#MV svg.line{
	position: absolute;
	bottom:0;
	left:40px;
	z-index: 100;
}

/* prev / next */
#MV p.prev{
	position: absolute;
	bottom:90px;
	right: 95px;
	z-index: 100;
}
#MV p.prev:after{
	width: 6px;
	height: 8px;
	position: absolute;
	top: 11px;
	left: 9px;
	margin: 0 0 0 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(-120deg) ;
	transform: rotate(-120deg);
	content: "";
	cursor: pointer;
	transition: all 0.2s;
}
#MV p.next{
	position: absolute;
	bottom:90px;
	right: 60px;
	z-index: 100;
}
#MV p.next:after{
	width: 6px;
	height: 8px;
	position: absolute;
	top: 11px;
	left: 6px;
	margin: 0 0 0 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(60deg) ;
	transform: rotate(60deg);
	content: "";
	cursor: pointer;
	transition: all 0.2s;
}
#MV p.prev svg path,
#MV p.next svg path{
	cursor: pointer;
	transition: all 0.2s;
}
#MV p.prev:hover svg path,
#MV p.next:hover svg path{
	fill: #fff;
}
#MV p.prev:hover:after,
#MV p.next:hover:after{
	border-top: 2px solid #111;
	border-right: 2px solid #111;
}

/*-------------------------------------
loading
---------------------------------------*/
#Content p.loading{
	width: 636px;
	height: 34px;
	overflow: hidden;
	position: fixed;
	top:50%;
	left:60px;
	margin: -15px 0 0;
	background: #ccc;
}
#Content p.loading img{
	position: relative;
	z-index: 10;

}
#Content p.loading span{
	width: 0;
	height: 34px;
	display: block;
	position: absolute;
	top:0;
	left:0;
	background: #080404;
	z-index: 1;
}
#Content p.fire{
	width: 92px;
	height: 92px;
	position: fixed;
	left:700px;
	top:50%;
	margin: -60px 0 0;
	overflow: hidden;
	display: none;
}
#Content p.fire img{
	position: absolute;
	top:0;
	left:0;
}

/*-------------------------------------
Footer
---------------------------------------*/
#Footer{
	width: auto;
	height: auto;
	padding: 0;
	position: absolute;
	bottom:27px;
	right: 60px;
	z-index: 3000;
}
#Footer p.pagetop,
#Footer p.logo{
	display: none;
}

@media screen and (min-width: 768px){
	#Footer p.privacy{
		float: right;
	}
	#Footer p.copy{
		width: 170px;
		height: 9px;
		float: left;
		clear: both;
		margin: 0;
	}
	#Footer ul{
		position: absolute;
		top:23px;
		right:193px;
	}
}

@media screen and (max-width: 767px){
	#Header h1{
		top:50%;
		left:50%;
		margin: -17px 0 0 115px;
		opacity: 0;
	}

	/*-------------------------------------
	loading
	---------------------------------------*/
	#Content p.loading{
		width: 257px;
		height: 14px;
		position: fixed;
		top:50%;
		left:50%;
		margin: -6px 0 0 -145px;
	}
	#Content p.loading span{
		height: 14px;
	}
	#Content p.fire{
		width: 36px;
		height: 36px;
		top:50%;
		left:50%;
		margin: -24px 0 0 113px;
		overflow: hidden;
		display: none;
	}
	#Content p.fire img{
		width: 36px;
		height: auto;
	}
	/*-------------------------------------
	MV
	---------------------------------------*/
	#MV{
		min-height: 320px;
		padding: 45px 0 0;
	}
	#MV h2{
		display: none;
	}
	#MV p.gauge{
		display: none;
	}
	#MV ul li{
		padding: 0;
	}
	#MV ul li em{
		visibility: hidden;
	}
	/* svg
	---------------------*/
	#MV svg.cover,
	#MV svg.line,
	#MV p.prev,
	#MV p.next{
		display: none;
	}
	/* bg */
	#MV svg.bg{
		top:45px;
	}
	/*-------------------------------------
	Footer
	---------------------------------------*/
	#Footer{
		width: 100%;
		position: fixed;
		bottom:0;
		left:0;
		background: #fff;
	}
	#Footer p.pagetop,
	#Footer p.logo{
		display: none;
	}
	/* privacy
	---------------------*/
	#Footer p.privacy{
		margin: 0 0 7px 15px;
		background: url(/common/images/footer_btn_privacy.png) no-repeat 0 0;
		background-size: 71px 9px;
	}
	/* copy
	---------------------*/
	#Footer p.copy{
		margin: 0 0 15px 15px;
		background: url(/common/images/footer_txt_copyright.png) no-repeat 0 0;
		background-size: 170px 9px;
	}
	/* ul
	---------------------*/
	#Footer ul{
		margin: -12px 15px 0 0;
		float: right;
	}
}

/*-------------------------------------
Loading用
---------------------------------------*/
#MV,
#Footer,
#GlobalNavi p.btn{
	opacity: 0;
}
#GlobalNavi p.btn{
	top:-110px;
}

#Loading{
	display: none;
}

@media screen and (max-width: 767px){
	#GlobalNavi p.btn{
		top:-60px;
	}
	#Footer{
		/*bottom:-10px;*/
	}
}