@charset "utf-8";


/*----------------------------------------------------
	#top
--------------------------------------------------- */
#top{
	position:relative;
	top:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	background: url(../img/top/visual.jpg) no-repeat center center;
	background-size:cover;
}
#top .catch{
	position:absolute;
	top:96px;
	left:0%;
	margin-left:11.25%;
	width:93.75%;
	opacity:0;
	-webkit-transform: translate3d(0px,20px,0px);
	-moz-transform: translate3d(0px,20px,0px);
	-ms-transform: translate3d(0px,20px,0px);
	-o-transform: translate3d(0px,20px,0px);
	transform: translate3d(0px,20px,0px);
	color:#29ABE2;
	font-size:18px;
	line-height:100%;
	font-weight:normal;
}
#top .catch.view{
	opacity:1;
	-webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -ms-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
	transition: all 1.0s ease;
	-webkit-transform: translate3d(0px,0px,0px);
	-moz-transform: translate3d(0px,0px,0px);
	-ms-transform: translate3d(0px,0px,0px);
	-o-transform: translate3d(0px,0px,0px);
	transform: translate3d(0px,0px,0px);
	
}
#top h1{
	position:absolute;
	top:15.21%;
	left:0%;
	margin-left:9.6%;
	width:80.0%;
	opacity:0;
	-webkit-transform: scale3d(1.4,1.4,1.4); 
    -moz-transform: scale3d(1.4,1.4,1.4); 
    -o-transform: scale3d(1.4,1.4,1.4);    
    transform:scale3d(1.4,1.4,1.4);  
}
#top h1.view{
	opacity:1;
	-webkit-transition: all 2.0s ease;
    -moz-transition: all 2.0s ease;
    -ms-transition: all 2.0s ease;
    -o-transition: all 2.0s ease;
	transition:all 2.0s ease;
	-webkit-transform: scale3d(1.0,1.0,1.0); 
    -moz-transform: scale3d(1.0,1.0,1.0); 
    -o-transform:  scale3d(1.0,1.0,1.0); 
    transform: scale3d(1.0,1.0,1.0); 
	
}
#top .info{
	position:absolute;
	bottom:15px;
	left:8.13%;
	opacity:0;
	width:86.6%;
}
#top .info.view{
	opacity:1;
	-webkit-transition: all 1.3s ease;
    -moz-transition: all 1.3s ease;
    -ms-transition: all 1.3s ease;
    -o-transition: all 1.3s ease;
	transition: all 1.3s ease;
}
#top h2{
	position:absolute;
	top:26.14%;
	left:48.26%;
	opacity:0;
	width:3.6%;
}
#top h2.view{
	opacity:1;
	-webkit-transition: all 1.3s ease;
    -moz-transition: all 1.3s ease;
    -ms-transition: all 1.3s ease;
    -o-transition: all 1.3s ease;
	transition: all 1.3s ease;
}
#top .award{
	position:absolute;
	top:5.37%;
	left:72.53%;
	opacity:0;
	width:18.66%;
}
#top .award.view{
	opacity:1;
	-webkit-transition: all 1.3s ease;
    -moz-transition: all 1.3s ease;
    -ms-transition: all 1.3s ease;
    -o-transition: all 1.3s ease;
	transition: all 1.3s ease;
}
#top .pre{
	position:absolute;
	top:25.37%;
	left:72.53%;
	opacity:0;
	width:18.66%;
}
#top .pre.view{
	opacity:1;
	-webkit-transition: all 1.3s ease;
    -moz-transition: all 1.3s ease;
    -ms-transition: all 1.3s ease;
    -o-transition: all 1.3s ease;
	transition: all 1.3s ease;
}
#top .info ul{
	overflow:hidden;
	text-align:center;
	letter-spacing: -.40em;
}
#top .info ul li{
	display:inline-block;
	letter-spacing: normal;
	font-size:10px;
	line-height:100%;
	margin:0 6px 0.08% 6px;
}
#top .info ul li small{
	font-size:8px;
}

#top .enter{
	opacity:0;
}
#top .enter.view{
	opacity:1;
}
#top .enter a{
	background:url(../img/top/enter.png) no-repeat;
	background-size:contain;
	display:block;
	margin:0 auto;
	width:42px;
	height:42px;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/*----------------------------------------------------
	#introduction
--------------------------------------------------- */
#introduction{
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
	background:#FAFAF0;
}
#introduction .imageArea{
	position:absolute;
	top:0px;
	left:0px;
	width:50%;
	height:100%;
	overflow:hidden;
}
#introduction .imageArea ul{
	width:100%;
	height:100%;
	position:relative;
	
}
#introduction .imageArea ul li{
	width:100%;
	height:100%;
	position:absolute;
	-webkit-transform:scale3d(1.3,1.3,1.3); 
    -moz-transform:scale3d(1.3,1.3,1.3); 
    -o-transform:scale3d(1.3,1.3,1.3); 
    transform:scale3d(1.3,1.3,1.3); 
	-webkit-transition: all 1.3s ease;
    -moz-transition: all 1.3s ease;
    -ms-transition: all 1.3s ease;
    -o-transition: all 1.3s ease;
	transition: all 1.3s ease;
}
#introduction .imageArea ul li.image01{
	background:url(../img/introduction/image01-huge.jpg) no-repeat center center;
	background-size:cover;
}
@media (max-width: 1280px){
	#introduction .imageArea ul li.image01{
		background:url(../img/introduction/image01.jpg) no-repeat center center;
		background-size:cover;
	}
	
}
#introduction .imageArea ul li.view{
	-webkit-transform:scale3d(1.0,1.0,1.0); 
    -moz-transform:scale3d(1.0,1.0,1.0); 
    -o-transform:scale3d(1.0,1.0,1.0); 
    transform:scale3d(1.0,1.0,1.0); 
	
}

#introduction .imageArea .caver{
	width:150%;
	height:160%;
	position:absolute;
	top:0px;
	left:0px;
	background:#FAFAF0;
	-webkit-transform:translate3d(0%,-5%,0px) rotate(30deg);
	-moz-transform: translate3d(0%,-5%,0px) rotate(30deg);
	-ms-transform: translate3d(0%,-5%,0px) rotate(30deg);
	-o-transform: translate3d(0%,-5%,0px) rotate(30deg);
	transform: translate3d(-10%,-20%,0px) rotate(30deg);
	-webkit-transition: all 1.3s ease;
    -moz-transition: all 1.3s ease;
    -ms-transition: all 1.3s ease;
    -o-transition: all 1.3s ease;
	transition: all 1.3s ease;
	-webkit-transition-delay:0.3s;
	-moz-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	transition-delay:0.3s;
	
	
}
#introduction .imageArea .caver.view{
	-webkit-transform: translate3d(65%,-5%,0px) rotate(-3deg);
	-moz-transform: translate3d(65%,-5%,0px) rotate(-3deg);
	-ms-transform:translate3d(65%,-5%,0px) rotate(-3deg);
	-o-transform:translate3d(65%,-5%,0px) rotate(-3deg);
	transform: translate3d(65%,-5%,0px) rotate(-3deg);
	
	
}
#introduction h2{
	font-family: 'Merriweather',"游明朝体", "Yu Mincho","ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "MSP明朝","MS PMincho","MS 明朝",serif;
	font-weight:bold;
	font-size:36px;
	color:#8CA9A5;
	position:absolute;
	top:105px;
	left:50%;
	width:42.45%;
	text-align:right;
	margin-left:30px;
	line-height:100%;
	opacity:0;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-transition-delay:0.8s;
	-moz-transition-delay:0.8s;
	-ms-transition-delay:0.8s;
	-o-transition-delay:0.8s;
	transition-delay:0.8s;
	-webkit-transform: translate3d(-20px,0px,0px);
	-moz-transform:  translate3d(-20px,0px,0px);
	-ms-transform: translate3d(-20px,0px,0px);
	-o-transform: translate3d(-20px,0px,0px);
	transform: translate3d(-20px,0px,0px);
}
#introduction h2.view{
	opacity:1;
	-webkit-transform: translate3d(-0px,0px,0px);
	-moz-transform:  translate3d(-0px,0px,0px);
	-ms-transform: translate3d(-0px,0px,0px);
	-o-transform: translate3d(-0px,0px,0px);
	transform: translate3d(-0px,0px,0px);
	
}
#introduction .line{
	position:absolute;
	top:153px;
	left:50%;
	/*background:url(../img/introduction/line01.png) no-repeat right;*/
	width:582px;
	height:18px;
	text-align:right;
	margin-left:30px;
	width:0px;
	overflow:hidden;
	-webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
	transition: all 0.8s ease;
	
	-webkit-transition-delay:0.8s;
	-moz-transition-delay:0.8s;
	-ms-transition-delay:0.8s;
	-o-transition-delay:0.8s;
	transition-delay:0.8s;
}
#introduction .line img{
	position:absolute;
	top:0px;
	right:0px;
}
#introduction .line.view{
	width:42.45%;
	
}
#introduction .textArea{
	position:absolute;
	top:180px;
	left:50%;
	margin-left:60px;
	width:40.26%;
	opacity:0;
	
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-transition-delay:1.2s;
	-moz-transition-delay:1.2s;
	-ms-transition-delay:1.2s;
	-o-transition-delay:1.2s;
	transition-delay:1.2s;

}
#introduction .textArea.view{
	opacity:1;
}
#introduction .textArea h3{
	font-size:18px;
	color:#605040;
	line-height:160%;
	margin-bottom:25px;
	font-weight:normal;
	
}
#introduction .textArea p{
	font-size:15px;
	line-height:200%;
	margin-bottom:15px;
	font-weight:normal;
	
}


/*----------------------------------------------------
	#trailer
--------------------------------------------------- */
#trailer{
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
	background:#FAFAF0;
}
#trailer .bg{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:#FAFAF0 url(../img/trailer/bg-huge.jpg) no-repeat center bottom;
	background-size:cover;
	opacity:0;
	-webkit-transition: all 1.3s ease;
    -moz-transition: all 1.3s ease;
    -ms-transition: all 1.3s ease;
    -o-transition: all 1.3s ease;
	transition: all 1.3s ease;
	-webkit-transform:scale3d(1.2,1.2,1.2); 
    -moz-transform:scale3d(1.2,1.2,1.2); 
    -o-transform:scale3d(1.2,1.2,1.2); 
    transform:scale3d(1.2,1.2,1.2); 
}
@media (max-width: 1280px){
	#trailer .bg{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		background:#FAFAF0 url(../img/trailer/bg.jpg) no-repeat center bottom;
		background-size:cover;
		opacity:0;
		-webkit-transition: all 1.3s ease;
	    -moz-transition: all 1.3s ease;
	    -ms-transition: all 1.3s ease;
	    -o-transition: all 1.3s ease;
		transition: all 1.3s ease;
		-webkit-transform:scale3d(1.2,1.2,1.2); 
	    -moz-transform:scale3d(1.2,1.2,1.2); 
	    -o-transform:scale3d(1.2,1.2,1.2); 
	    transform:scale3d(1.2,1.2,1.2); 
	}
	
}
#trailer .bg.view{
	opacity:1;
	-webkit-transform:scale3d(1.0,1.0,1.0); 
    -moz-transform:scale3d(1.0,1.0,1.0); 
    -o-transform:scale3d(1.0,1.0,1.0); 
    transform:scale3d(1.0,1.0,1.0); 
}
#trailer h2{
	font-family: 'Merriweather',"游明朝体", "Yu Mincho","ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "MSP明朝","MS PMincho","MS 明朝",serif;
	font-weight:bold;
	font-size:36px;
	color:#CAD2CE;
	position:absolute;
	bottom:125px;
	left:50%;
	margin-left:430px;
	line-height:100%;
}
#trailer .videoMoniter{
	position:absolute;
	top:10.41%;
	left:50%;
	margin-left:-426px;
	overflow:hidden;
	width:853px;
	height:480px;
	
	opacity:0;
	
	-webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
	transition: all 0.8s ease;
	-webkit-transform: translate3d(-0px,120px,0px);
	-moz-transform:  translate3d(-0px,120px,0px);
	-ms-transform: translate3d(-0px,120px,0px);
	-o-transform: translate3d(-0px,120px,0px);
	transform: translate3d(-0px,120px,0px);
	-webkit-transition-delay:0.4s;
	-moz-transition-delay:0.4s;
	-ms-transition-delay:0.4s;
	-o-transition-delay:0.4s;
	transition-delay:0.4s;
	
}
#trailer .videoMoniter.view{
	opacity:1;
	-webkit-transform: translate3d(-0px,0px,0px);
	-moz-transform:  translate3d(-0px,0px,0px);
	-ms-transform: translate3d(-0px,0px,0px);
	-o-transform: translate3d(-0px,0px,0px);
	transform: translate3d(-0px,0px,0px);
	
}
#trailer .videoMoniter a span.icon{
	position:absolute;
	top:130px;
	left:50%;
	margin-left:-75px;
	background:url(../img/trailer/btn_icon.png) no-repeat center center;
	background-size:cover;
	width:150px;
	height:150px;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	
}
#trailer .videoMoniter a span.text{
	position:absolute;
	top:320px;
	left:0%;
	width:100%;
	text-align:center;
	color:#FFFFFF;
	line-height:100%;
	font-size:24px;
	font-weight:bold;
	font-family: 'Merriweather',"游明朝体", "Yu Mincho","ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "MSP明朝","MS PMincho","MS 明朝",serif;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	
}
#trailer .videoMoniter a:hover span.icon{
	-webkit-transform:rotate(-122deg) scale3d(1.2,1.2,1.2);
	-moz-transform:rotate(-122deg) scale3d(1.2,1.2,1.2);
	-ms-transform:rotate(-122deg) scale3d(1.2,1.2,1.2);
	-o-transform:rotate(-122deg) scale3d(1.2,1.2,1.2);
	transform:rotate(-122deg) scale3d(1.2,1.2,1.2);
	
}
#trailer .videoMoniter a:hover span.text{
	-webkit-transform: scale3d(0.9,0.9,0.9);
	-moz-transform: scale3d(0.9,0.9,0.9);
	-ms-transform: scale3d(0.9,0.9,0.9);
	-o-transform: scale3d(0.9,0.9,0.9);
	transform: scale3d(0.9,0.9,0.9);
	
}

#trailer .videoMoniter .video{
	position:absolute;
	top:0px;
	left:0px;
}
#trailer .navi{
	position:absolute;
	top:74.47%;
	left:50%;
	margin-left:-426px;
	overflow:hidden;
	width:853px;
	opacity:0;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	
}
#trailer .navi.view{
	opacity:1;
	
}
#trailer .navi ul{
	overflow:hidden;
	padding-top:10px;
}
#trailer .navi li{
	float:left;
}
#trailer .navi li a{
	color:#605040;
	width:160px;
	height:30px;
	display:block;
	font-size:18px;
	line-height:100%;
	text-align:center;
	
}
#trailer .navi li a:hover,
#trailer .navi li a.active{
	color:#8CA9A5;
	background:url(../img/trailer/active_star.png) no-repeat center bottom;
	
}


/*----------------------------------------------------
	#staff
--------------------------------------------------- */
#staff{
	position:relative;
	width:100%;
	min-width:1000px;
	height:100%;
	overflow:hidden;
	background:#FAFAF0 ;
}
#staff .bg{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:#FAFAF0 url(../img/staff/bg-huge.jpg) no-repeat center bottom;
	background-size:cover;
	opacity:0;
	-webkit-transition: all 1.3s ease;
    -moz-transition: all 1.3s ease;
    -ms-transition: all 1.3s ease;
    -o-transition: all 1.3s ease;
	transition: all 1.3s ease;
	-webkit-transform:scale3d(1.2,1.2,1.2); 
    -moz-transform:scale3d(1.2,1.2,1.2); 
    -o-transform:scale3d(1.2,1.2,1.2); 
    transform:scale3d(1.2,1.2,1.2); 
}
@media (max-width: 1280px){
	#staff .bg{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		background:#FAFAF0 url(../img/staff/bg.jpg) no-repeat center bottom;
		background-size:cover;
		opacity:0;
		-webkit-transition: all 1.3s ease;
	    -moz-transition: all 1.3s ease;
	    -ms-transition: all 1.3s ease;
	    -o-transition: all 1.3s ease;
		transition: all 1.3s ease;
		-webkit-transform:scale3d(1.2,1.2,1.2); 
	    -moz-transform:scale3d(1.2,1.2,1.2); 
	    -o-transform:scale3d(1.2,1.2,1.2); 
	    transform:scale3d(1.2,1.2,1.2); 
	}
		
}
#staff .bg.view{
	opacity:1;
	-webkit-transform:scale3d(1.0,1.0,1.0); 
    -moz-transform:scale3d(1.0,1.0,1.0); 
    -o-transform:scale3d(1.0,1.0,1.0); 
    transform:scale3d(1.0,1.0,1.0); 
}

#staff h2{
	font-family: 'Merriweather',"游明朝体", "Yu Mincho","ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "MSP明朝","MS PMincho","MS 明朝",serif;
	font-weight:bold;
	font-size:36px;
	color:#8CA9A5;
	position:absolute;
	top:94px;
	left:0%;
	width:100%;
	text-align:center;
	line-height:100%;
	
	opacity:0;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#staff h2.view{
	opacity:1;
}
#staff .column{
	text-align:center;
	letter-spacing: -.40em;
	opacity:0;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#staff .column dl{
	width:240px;
	display:inline-block;
	letter-spacing: normal;
	text-align:center;
}
#staff .column.view{
	opacity:1;
}
#staff .column dl dt{
	text-align:center;
	font-size:14px;
	margin-bottom:3px;
	font-weight:normal;
}
#staff .column dl dd{
	text-align:center;
	font-size:15px;
	line-height:180%;
	position:relative;
}
#staff .column dl dd .btn_more{
	position:absolute;
	top:5px;
	right:0px;
	background:url(../img/staff/more_info.png) no-repeat;
	width:60px;
	height:15px;
	display:block;
	color:#FFFFFF;
	font-size:9px;
	text-align:left;
	padding-left:4px;
	line-height:17px;
	
}
#staff .column dl dd span{
	font-size:11px;
}
#staff .column.staff01{
	position:absolute;
	top:150px;
	left:0%;
	width:100%;
}
#staff .column.staff02{
	position:absolute;
	top:222px;
	left:0%;
	width:100%;
}
#staff .column.staff03{
	position:absolute;
	top:296px;
	left:0%;
	width:100%;
}
#staff .column.staff04{
	position:absolute;
	top:357px;
	left:0%;
	width:100%;
}
#staff .column.staff05{
	position:absolute;
	top:422px;
	left:0%;
	width:100%;
}
#staff .column.staff06{
	position:absolute;
	top:498px;
	left:0%;
	width:100%;
}
#staff .column.staff01 dl{
	width:230px;
}