@charset "UTF-8";

@import url(base.css);
@import url(common.css);

/*
-----------------------------------
INDEX(id="index")
-----------------------------------
*/

.pc_none{
	display:none;
}

body{
	position:relative;
}

body#kidsindex{
	background:url(../img/index/bg_center.png) no-repeat center 130px;
}

#header{
	height:105px;
	background:url(../img/index/bg_head.png) repeat;
}

#header h1{
	width:980px;
	margin:0 auto;
	padding:18px 0;
	text-align:center;
}

.indexmenu{
	width:980px;
	margin:130px 0;	
}

.indexmenu li{
	width:471px;
}

.indexmenu li a{
	display:block;
	text-indent:-9999px;
}

.indexmenu li.kids a{
	height:328px;
	background:url(../img/index/btn_kids_on.png) no-repeat;
}


.indexmenu li.kids{
	float:left;
}

.indexmenu li.junior{
	float:right;
	width:468px;
}

.indexmenu li.junior a{
	height:327px;
	background:url(../img/index/btn_junior_on.png) no-repeat;
}
.indexmenu li.junior a:hover,
.indexmenu li.kids a:hover{
	background-position:left bottom;
}

.indexmenu:after{
	content:"";
	display:block;
	clear:both;
}

#footer{
	text-align:center;
	position:fixed;
	bottom:0px;
	padding:8px 0 4px 0;
	background:url(../img/index/bg_head.png) repeat;
}



/*PC用*/

/*スマホ用*/
@media (max-width: 640px) and (min-width: 0px) {

.pc_none,
.sp_only{
	display:block!important;
}

.sp_none,
.sp_only_none,
.pc_img,
.pc_btn{
	display:none!important;
}

.spw100{
	width:100%;
}

.mobile_clear{
	clear:both!important;
}

body{
	min-height:530px;
	}

	body,
	#header h1,
	.indexmenu,
	#wrapper{
		width:100%;
	}
	
	#header{
		height:auto;
	}
	
	#header h1 img{
		width:90%;
		text-align:center;
	}
	
	.indexmenu{
		margin:0;
	}
	
	.indexmenu li{
		width:80%;
		margin:20px auto;
		margin-bottom: 15px;
	}
	
	.indexmenu li.kids,
	.indexmenu li.junior{
		width:80%;
		float:none;
	}

	.indexmenu li.kids a,
	.indexmenu li.junior a{
		background:none!important;
		height:inherit;
		text-indent:0;
	}
	

	
	#wrapper{
		padding-bottom: 45px;
	}
	
	#footer{
		position:absolute;
	}
	
}