/* @override http://61.206.114.199:8001/f_spot/f_files/2015/150124_new_structure/css/base.css */

html {

	height:100%;

	font-size:62.5%;

}



body {

	height:100%;

	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

	font-size:1.4em;

	

	background-color:#050505;

	color:#ffffff;

}



a{

	color:#ffffff;

}

li img{

	vertical-align:bottom;

}



#mcs_container .customScrollBox{overflow:auto;}

#mcs_container .dragger_container{display:none;}



/* clearfix ==================== */

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

.clearfix { *zoom: 1; }



/* layout ==================== */

#wrap{

	width:100%;

	height:100%;

	margin:0 auto;

	padding:0;

}



#main{

	width:100%;

	height:100%;

	margin:0 -120px 0 0;

	float:left;

	overflow:hidden;

	position:relative;

}

#main_content{
	position: relative;
	z-index: 0;

	margin:0 120px 0 0;

}



#nav{

	width:120px;

	height:100%;

	overflow:auto;

	float:right;

}



/* header ==================== */

#header{
	

	height:0;

	padding:0;
	position: relative;
	z-index: 500;

	background-color:#000000;

}

#header h1{
	height: auto;
	margin:0;

	font-size:12px; font-size:1.2rem;

}

#header h1 a{
	display: block;
	color: #ddd;
	height: 40px;
	margin-right: 20px;
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
	background-image: url(../img/mark_kf_emblem.png);
	background-repeat: no-repeat;
	background-position: 100% 12px;
	font-weight: 300;
	letter-spacing: 0.05em;
	text-align: right;
	padding-top: 32px;
	padding-right: 56px;
	padding-bottom: 6px;
}



/* footer ==================== */

#footer{
	position: relative;
	z-index: 500;
	top: -40px;


	height:0;

	padding:0px;
	margin: 0;

}


#footer div{
	height: 80px;
	background-image: url(../img/bg_footer_gr.png);

}


#footer p.copy{
	color:#ccc;
	font-size: 11px;
		font-family: 'Roboto', sans-serif;
	font-weight: 300;
	margin:0;

	padding:12px 0 0 12px;

}

#footer a{
	position: relative;
	text-align: center;
	display: block;
	float: right;
	width: 70px;
	height: 70px;
	text-indent: -9999px;
	overflow: hidden;
	top: -70px;
	right: 28px;

	background-image: url(../img/bg_btn_pagetop_arrow.png);
}

#footer a:hover{
	filter: alpha(opacity=80); /* % IE */
 -moz-opacity:0.8; /* decimal */
opacity:0.8; /* decimal safari */
}



/* nav ==================== */

#page_nav{

	width:102px;

	margin:0 auto;

	padding:0 0 10px;

	list-style:none;

	text-align:center;

}

	#page_nav li{

		padding:10px 0 0;

		margin:0;

	}

	#page_nav li.active a{

		display:block;

		border:1px solid #3E92EB;

	}



/* #contents ==================== */

#contents_wrap{
	
	position: relative;
	z-index: 0;

	width:100%;

	min-height:400px;

	overflow:auto;
}


#contents{

	position:relative;
	overflow:hidden;

}



.con{

	width:100%;

	margin:0 auto;

	padding:0;

	position:absolute;

	overflow:hidden;

}



div.bg {

	width:100%;

	height:0;

	line-height:0;

	position:relative;

}



div.bg img{

	display:block;

	vertical-align:bottom;

	width:100%;

	height:auto;

	position:absolute;

	top:0;

	left:0;

}





#loading{ text-align:center; }



/* ============ */

div.bg{
	padding-top:67.39583333%;
}


#con8 div.bg{
	padding-top:134.84375%;
}


#con45 div.bg{
	padding-top:81.04166667%;
}

#con46 div.bg{
	padding-top: 113.5416667%;
}

#con51 div.bg{
	padding-top: 110.0520833%;
	padding-bottom: 8%;
}

#con53 div.bg{
	padding-top: 87.29166667%;
	padding-bottom: 8%;
}

#con60 div.bg{
	padding-top: 99.322916671%;
}


.box_inner p{
	color: #ddd;
	font-size: 13px;
	line-height: 1.9;
	margin: 0 0 1em 0;
}

#con8_wrap,
#con11_wrap,
#con12_wrap,
#con16_wrap,
#con20_wrap,
#con22_wrap,
#con24_wrap,
#con26_wrap,
#con28_wrap,
#con30_wrap,
#con32_wrap,
#con34_wrap,
#con36_wrap,
#con38_wrap{
	width:100%;
	height: 100%;
position:absolute;
top:0;
left:0;
}

#con8_wrap .box_inner{
	margin-top: 25%;
	width: 45%;
	margin-left: 8%;
}

#con11_wrap .box_inner,
#con16_wrap .box_inner{
	margin-top: 12%;
	width: 35%;
	height: 50%;
	overflow-y: auto;
	margin-left: 10%;
	padding-right: 16px;
}



#con12_wrap .box_inner{
	margin-top: 12%;
	width: 35%;
	height: 50%;
	margin-left: 50%;
}


#con20_wrap .box_inner,
#con22_wrap .box_inner,
#con26_wrap .box_inner,
#con30_wrap .box_inner,
#con32_wrap .box_inner{
	margin-top: 15%;
	width: 25%;
	height: 50%;
	margin-left: 17%;
}

#con30_wrap .box_inner{
	height: auto;
}

#con24_wrap .box_inner,
#con28_wrap .box_inner,
#con34_wrap .box_inner,
#con36_wrap .box_inner,
#con38_wrap .box_inner{
	margin-top: 15%;
	width: 25%;
	height: 50%;
	margin-left: 57%;
}


.box_inner h3{
	font-size: 140px;
	line-height: 1;
	margin: -2%;
font-family: 'Roboto', sans-serif;
	font-weight: 400;	
}

.box_inner h3 span{
	color: #37a8ff;
}



#con11_wrap .box_inner,
#con12_wrap .box_inner,
#con16_wrap .box_inner,
#con30_wrap .box_inner{
	background-image: url(../img/bg_mark_arrow_down.png);
	background-repeat: no-repeat;
	background-position: 50% 99%;
	padding: 0 0 36px 0;
	border-bottom: 1px solid #888;
}

.box_inner .box_scroll{
	width: 100%;
	height: 100%;
	overflow-y: auto;
}


#con30_wrap .box_inner{
	height: 50%;
}

#con30_wrap .box_inner .box_scroll{
	height: 55%;
}