@charset "utf-8";

/*----------共通----------*/

body {
	font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #384f83;
	margin: 0;
	padding: 0;
	background: url(../images/bg.png) repeat center top;
	width: 100%;
}
p {
	margin: 0;
	padding: 0;
}
img {
	border: 0;
	margin: 0;
	padding: 0;
}
dl,dt,dd {
	margin: 0;
	padding: 0;
}
ul,li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
a:link,
a:visited {
	color: #9a33aa;
	text-decoration: none;
	font-weight: bold;
}
a:hover,
a:active {
	color: #9a33aa;
	text-decoration: underline;
	font-weight: bold;
}
.f_clr {
    clear: both;
    margin: 0;
    padding: 0;
    width: auto;
}
/*clearfix hack*/
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */

/*----------wraper----------*/

#wrap {
	background: url(../images/bg_header.png) repeat-x left top, url(../images/bg_footer.png) repeat-x left bottom;
}
	@media screen and (min-width: 1301px){
		#wrap {
			background: url(../images/bg_header.png) repeat-x center top, url(../images/bg_footer.png) repeat-x center bottom;
		}
	}
	@media screen and (max-width: 619px){
		#wrap {
			background: none;
		}
	}

.wholeBox {
	width: 1300px;
	margin: 0 auto;
}
	@media screen and (max-width: 619px){
		.wholeBox {
			width: 100%;
			margin: 0;
		}
	}

/*----------全体----------*/

#container {
	width: 980px;
	float: left;
	background: url(../images/bg_footer.png) repeat-x left bottom, url(../images/menu_bg.png) repeat-y left -10px, url(../images/bg_header.png) repeat-x left top;
	position: relative;
}
	@media screen and (min-width: 1301px){
		#container {
			background: url(../images/bg_footer.png) repeat-x 155px bottom, url(../images/menu_bg.png) repeat-y left -10px, url(../images/bg_header.png) repeat-x 155px top;
		}
	}
	@media screen and (max-width: 619px){
		#container {
			width: auto;
			float: none;
			background: none;
		}
	}

/*----------メニュー----------*/

#nav {
	padding: 8px 6px 20px 0;
	width: 320px;
	float: left;
	box-sizing: border-box;
}
#nav ul {
	width: 253px;
	margin: 0 auto;
}
#nav ul li {
	margin-bottom: -6px;
}
#nav ul li a {
	display: block;
	width: 253px;
	height: 95px;
}
#nav ul li a:hover img {
	display: none;
}
#nav ul li.news a:hover {
	background: url(../images/menu_news_on.png) no-repeat left top;
}
#nav ul li.story a:hover {
	background: url(../images/menu_story_on.png) no-repeat left top;
}
#nav ul li.chara a:hover {
	background: url(../images/menu_chara_on.png) no-repeat left top;
}
#nav ul li.staff a:hover {
	background: url(../images/menu_staff_on.png) no-repeat left top;
}
#nav ul li.trailer a:hover {
	background: url(../images/menu_trailer_on.png) no-repeat left top;
}
#nav ul li.episodes a:hover {
	background: url(../images/menu_episodes_on.png) no-repeat left top;
}
#nav ul li.onair a:hover {
	background: url(../images/menu_onair_on.png) no-repeat left top;
}
#nav ul li.data a:hover {
	background: url(../images/menu_data_on.png) no-repeat left top;
}
#nav ul li.streaming a:hover {
	background: url(../images/menu_streaming_on.png) no-repeat left top;
}
#nav ul li.top a:hover {
	background: url(../images/menu_top_on.png) no-repeat left top;
}
#nav .bnr {
	margin: 10px 0 0;
	text-align: center;
}
#nav .bnr img {
	padding: 10px;
}
#nav .bnr_top {
	margin: 5px 0 15px;
	text-align: center;
}
.bnr_top_sp {
	display: none;
}
	@media screen and (max-width: 619px){
		#nav {
			width: 100%;
			margin: 4% 0 0;
			padding: 0 0 3%;
			float: none;
			background: url(../images/sp_menu_bg.png) repeat center top;
		}
		#nav ul {
			width: auto;
			margin: 0;
			padding: 2% 0;
			overflow: hidden;
		}
		#nav ul li a {
			width: 50%;
			height: auto;
			float: left;
		}
		#nav ul li a:hover img.spout {
			display: block;
		}
		#nav ul li.news a:hover,
		#nav ul li.story a:hover,
		#nav ul li.chara a:hover,
		#nav ul li.staff a:hover,
		#nav ul li.trailer a:hover,
		#nav ul li.episodes a:hover,
		#nav ul li.onair a:hover,
		#nav ul li.data a:hover,
		#nav ul li.streaming a:hover {
			background: none;
		}
		#nav .bnr {
			margin: 0 0 1%;
		}
		#nav .bnr img {
			padding: 2%;
		}
		#nav .bnr_top {
			display: none;
		}
		.bnr_top_sp {
			display: block;
			text-align: center;
			margin: 10px;
		}
	}

/*----------コンテンツエリア----------*/

#contents_area {
	width: 660px;
	padding: 0 20px 5px 0;
	float: right;
	box-sizing: border-box;
}
	@media screen and (max-width: 619px){
		#contents_area {
			width: auto;
			padding: 0;
			float: none;
		}
	}

/*----------フッター----------*/

.foot {
	clear: both;
	width: 100%;
	height: 175px;
	padding: 52px 12px 0;
	box-sizing: border-box;
	position: relative;
}
.foot ul {
	margin: 0 auto;
	font-size: 0;
}
.foot ul li {
	display: inline-block;
	width: 20%;
	padding: 0 3px 6px;
	box-sizing: border-box;
}
.foot ul li a {
	display: block;
	height: 32px;
	color: #117150;
	font-weight: bold;
	font-size: 15px;
	line-height: 32px;
	text-align: center;
	text-decoration: none;
	background: url(../images/footer_menu_icon.png) no-repeat 6px center #c8dfd7;
	border-radius: 5px;
}
.foot ul li a:hover {
	text-decoration: none;
	background: url(../images/footer_menu_icon.png) no-repeat 6px center #96c4c9;
}
#copyright {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 12px;
	text-align: center;
	font-size: 14px;
	color: #ea1066;
	line-height: 1;
}
	@media screen and (max-width: 619px){
		.foot {
			clear: none;
			height: auto;
			padding: 0;
		}
		.foot ul {
			display: none;
		}
		#copyright {
			position: static;
			margin: 0;
			height: 30px;
			font-size: 12px;
			color: #fff;
			line-height: 30px;
			background: #e95467;
		}
	}