@charset "utf-8";

/*--****************************************





Archive

@eureka





*****************************************--*/

.section{

	width:100%;

	overflow:hidden;

	border-bottom: 1px solid #f0f0f0;

}



.sectionInner{

    width: 1110px;

    text-align: center;

	height:850px;

	margin:0 auto;

	position:relative;

}



.sectionInner:not(.top):after{

	content:"";

	/*width:-webkit-calc(50vw - 370px);

	width:calc(50vw - 370px);*/

	width: 8px;

	height:100px;

	background:#ffcc00;

	position:absolute;

	top: 0;

	left: 0;

	/*right:-webkit-calc((100vw - 1024px)/-2);

	right:calc((100vw - 1024px)/-2);*/

	z-index:2;

}



.sectionTtl{

	position:absolute;

	z-index:1;

	width:130px;

	padding:0 0 0 20px;

	top:80px;

	left:0px;

	font-weight:bold;

	font-size:18px;

	letter-spacing:3px;

	color: #999;

}



.sectionNavi{

	font-weight:bold;

	position:absolute;

	z-index:2;

	top:120px;

	left: 20px;

	text-align: left;

}



.sectionNavi ul li{

	padding:10px 0;

}



.sectionNavi ul li p{

	padding:5px 0;

	cursor:pointer;

	position:relative;

	-webkit-transition: all 0.2s ease;

	transition: all 0.2s ease;

}



.sectionNavi ul li.not p{

  cursor: default;

}





.sectionNavi ul li p:after{

    content: url(../img/eureka/arw.gif);

	opacity: 0;

	top: 5px;

	left: -25px;

    display: block;

	-webkit-transition: all 0.2s ease;

	transition: all 0.2s ease;

	position: absolute;

}



.sectionNavi ul li p.active,.sectionNavi ul li:not(.not) p:hover{

	color:#ffcc00;

}



.sectionNavi ul li p.active:after,.sectionNavi ul li:not(.not) p:hover:after{

	opacity: 1;

	left: -18px;	

}



.sectionNavi ul li p span{

	letter-spacing: -2.6px;

}



.control{

	position:absolute;

	z-index:3;

	bottom:40px;

	right:20px;

	display:flex;

}



.prevBtn{

	width:60px;

	height:60px;

	border:1px solid #999;

	box-sizing:border-box;

	-webkit-box-sizing:border-box;

	margin:0 20px 0 0;

	cursor:pointer;

}



.prevBtn:after{

	content:"";

	display:block;

	width:20px;

	height:2px;

	background:#999;

	transform:rotate(-45deg);

	position:absolute;

    top: 22px;

    left: 20px;

}



.prevBtn:before{

	content:"";

	display:block;

	width:20px;

	height:2px;

	background:#999;

	transform:rotate(45deg);

	position:absolute;

	top: 36px;

    left: 20px;

}



.nextBtn{

	width:60px;

	height:60px;

	border:1px solid #999;

	box-sizing:border-box;

	-webkit-box-sizing:border-box;

	cursor:pointer;

	position:relative;

}



.nextBtn:after{

	content:"";

	display:block;

	width:20px;

	height:2px;

	background:#999;

	transform:rotate(45deg);

	position:absolute;

    top: 21px;

    left: 20px;

}



.nextBtn:before{

	content:"";

	display:block;

	width:20px;

	height:2px;

	background:#999;

	transform:rotate(-45deg);

	position:absolute;

	top: 35px;

    left: 20px;

}







/********************



#top



********************/

#top{

	width:100%;

	height:800px;

	background:url(../img/eureka/top_bg.jpg) repeat-x center center;

}



#top .sectionInner{

	display:flex;

	width:1010px;

	margin:0 auto;

	padding:20px 0 0 0;

}



.sectionLeft{

	width:470px;

	text-align:left;

}



.intro{

	padding:70px 0 0 30px;

}



.sectionRight{

	width:540px;

}



.mainImg{

	box-shadow:0px 0px 10px rgba(0,0,0,0.70);

	line-height:0em;

}





/********************



#chara



********************/

.charaContainer{

	position:relative;

}



.charaPreloader{

	position:absolute;

	z-index:1;

	top:50%;

	left:50%;

	margin:-10px 0 0 -10px;

	display:none;

}



/********************



#mecha



********************/

.mechaContainer{

	position:relative;

}



.mechaPreloader{

	position:absolute;

	z-index:1;

	top:50%;

	left:50%;

	margin:-10px 0 0 -10px;

	display:none;

}



/********************



#keyword



********************/

.keyContainer{

	width:650px;

	height:600px;

	margin: 0 0 0 260px;

	padding:100px 0 0 0;

}



.keyContainerInner{

	width:650px;

	height:600px;

	overflow-y:scroll;

}



.keyBox{

	width:620px;

	display:flex;

	padding:0 0 20px 0;

	margin:0 0 20px 0;

	border-bottom:1px dotted #000;

}



.keyBox:nth-last-child(1){

	margin-bottom: 200px;

}



.keyBoxLeft{

	width:238px;

	margin:0 30px 0 0;

}



.keyImg{

	

}



.keyBoxRight{

	width:352px;

	min-height:178px;

	border-top:2px solid #000;

	border-bottom:1px solid #000;

}



.keyTtl{

	font-size:18px;

	font-weight:bold;

	padding:10px 0;

	line-height:1em;

	border-bottom:1px solid #000;

}



.keyTxt{

	padding:20px 0;

	line-height:1.5em;

	text-align: left;

}







/********************



#preloader



********************/

.preloaderTtl{

	width:420px;

	height:114px;

	position:relative;

	background:url(../img/eureka/preloader_base.png) no-repeat;

}



.preloaderTtl span{

	height:0px;

	bottom:0px;

	left:0px;

	right:0px;

	overflow:hidden;

	position:relative;

	display:block;

}



.preloaderTtl span img{

	position:absolute;

}