@charset "utf-8";

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





Archive

@eureka





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

.section{

	width:100%;

	overflow:hidden;

	background: #000;

	color: #fff;

	border-bottom: 1px solid #151515;

}



#top.section {

	border-bottom: none;

}



.sectionInner{

	width:100%;

	width: 1180px;

	height:850px;

	margin:0 auto;

	position:relative;

}



/*.sectionInner:not(.top):before{

	content:"";

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

	width:calc(50vw - 370px);

	height:1px;

	background:#000;

	position:absolute;

	bottom:0px;

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

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

	z-index:2;

}



.sectionInner:not(.top):after{

	content:"";

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

	width:calc(50vw - 370px);

	height:1px;

	background:#000;

	position:absolute;

	top:100px;

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

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

	z-index:2;

}*/



.sectionTtl{

	position:absolute;

	z-index:1;

	top:40px;

	left:0px;

	font-weight:bold;

	font-size:18px;

	letter-spacing:3px;

}



.sectionNavi{

	font-weight:bold;

	position:absolute;

	z-index:2;

	top:125px;

	left:30px;

}



.sectionNavi ul li{

	padding:8px 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 p:after{

	content: "";

    width: 20px;

    height: 1px;

    background: #fff;

    display: block;

    position: absolute;

    top: 11px;

    left: -30px;

	-webkit-transition: all 0.2s ease;

	transition: all 0.2s ease;

}



.sectionNavi ul li p.active,.sectionNavi ul li p:hover{

	color:#ff4588;

}



.sectionNavi ul li p.active:after,.sectionNavi ul li p:hover:after{

    background: #ff4588;

}



.sectionNavi ul li p span{

	letter-spacing:-5.2px;

}



.control{

	position:absolute;

	z-index:3;

	bottom:40px;

	right:20px;

	display:flex;

}



.prevBtn{

	width:60px;

	height:60px;

	border:1px solid #eee;

	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:#eee;

	transform:rotate(-45deg);

	position:absolute;

    top: 22px;

    left: 20px;

}



.prevBtn:before{

	content:"";

	display:block;

	width:20px;

	height:2px;

	background:#eee;

	transform:rotate(45deg);

	position:absolute;

	top: 36px;

    left: 20px;

}



.nextBtn{

	width:60px;

	height:60px;

	border:1px solid #eee;

	box-sizing:border-box;

	-webkit-box-sizing:border-box;

	cursor:pointer;

	position:relative;

}



.nextBtn:after{

	content:"";

	display:block;

	width:20px;

	height:2px;

	background:#eee;

	transform:rotate(45deg);

	position:absolute;

    top: 21px;

    left: 20px;

}



.nextBtn:before{

	content:"";

	display:block;

	width:20px;

	height:2px;

	background:#eee;

	transform:rotate(-45deg);

	position:absolute;

	top: 35px;

    left: 20px;

}







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



#top



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

#top{

	width:100%;

	height:800px;

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

}



#top .sectionInner{

	display:flex;

	width:1180px;

	margin:0 auto;

	padding:20px 0 0 0;

}



.sectionLeft{

	width: 640px;

	text-align: left;

}



.ttl{

    padding: 10px 0 0 60px;

}



.intro{

	padding: 40px 0 0 0;

}



.sectionRight{

	width:539px;

}



.mainImg{

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

	line-height:0em;

}





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



#chara



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

.charaContainer{

	height:850px;

	position:relative;

}



.charaPreloader{

	position:absolute;

	z-index:1;

	top:50%;

	left:50%;

	margin:-10px 0 0 -10px;

	display:none;

}



.charaImgBox{

	width:1024px;

	position:absolute;

	z-index:0;

	top:0px;

	left:50%;

	margin-left:-512px;

}



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



#mecha



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

.mechaContainer{

	height:800px;

	position:relative;

}



.mechaPreloader{

	position:absolute;

	z-index:1;

	top:50%;

	left:50%;

	margin:-10px 0 0 -10px;

	display:none;

}



.mechaImgBox{

	width:1024px;

	position:absolute;

	z-index:0;

	top:0px;

	left:50%;

	margin-left:-512px;

}



.mechaSubNavi{

	position:absolute;

	z-index:5;

	top: 260px;

	left:-webkit-calc(50% + 80px);

	left:calc(50% + 80px);

}



.mechaSubNaviInner{

	display:-webkit-flex;

	display:flex;

}



.mechaSubNavi p{

	font-size:12px;

	font-weight:bold;

	color:#fff;

	padding:5px 10px;

	border:1px solid #fff;

	margin:0 0 10px 0;

	cursor:pointer;

}



.mechaSubNavi p:nth-child(1){

	margin:0 10px 10px 0;

}



.mechaSubNavi p.active{

	color:#fff;

	background:#ff4588;

	border:1px solid #ff4588;	

}







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



#keyword



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

.keyContainer{

	width:650px;

	height:600px;

	padding: 125px 0 0 310px;	

}



.keyContainerInner{

	width:650px;

	height:600px;

	overflow-y:scroll;

}



#keywordsNavi ul li{

	padding:0 0 8px;

}



.keyBox{

	width:620px;

	display:flex;

	padding:0 0 20px 0;

}



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

	margin-bottom: 460px;

}



.keyBoxLeft{

	width:238px;

	margin:0 30px 0 0;

}



.keyImg{

	

}



.keyBoxRight{

	width:100%;

	min-height:120px;

	border-top:2px solid #fff;

	border-bottom:1px solid #fff;

}



.keyTtl{

	font-size:18px;

	font-weight:bold;

	padding:10px 0;

	line-height:1em;

	border-bottom:1px solid #fff;

}



.keyTxt{

	padding:20px 0;

	line-height:1.5em;

}



.creditTxt{

	text-align:center;

}



.jspDrag {

    background: #ff4588;

}



.jspTrack {

    background: url(../img/common/scrollBg02.png) repeat-y;

    position: relative;

}



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



#preloader



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

.preloaderTtl{

	width:420px;

	height:168px;

	position:relative;

	background:url(../img/eureka_ao/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;

}



.preloaderAnime{

	top:170px;

}



.footerNavi {

    padding: 0 0 20px 0;

}



.footerNavi ul li p {

    color: #000000;

}