@charset "utf-8";
@import url("reset.css");

/* 共通
---------------------------- */
body {
	background-color: #FFF;
	background-image: url(../img/bg.jpg);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	font-size: 12px;
	line-height: 135%;
	font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
#hdm {
	margin: 0px;
	background-color: #FFF;
	padding: 3px 0px;
	list-style-type: none;
	display: block;
}
.hdmenu {
	height: 30px;
	display: block;
	width: 546px;
	margin-right: auto;
	margin-left: auto;
}


.hdmenu li{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	float: left;
	display: block;
	height: 30px;
}
.hdmenu a {
	display:block;
	text-decoration:none;
	background-image: url(../img/hdm.jpg);
	background-repeat: no-repeat;
	height: 30px;
	}

.hdmenu a span{
	display:none;
}

/* nomal */
.hdmenu .ct1 {
	width: 96px;
	background-position: 0px 0px;
	}
.hdmenu .ct2 {
	width: 100px;
	background-position: -96px 0px;
	}
.hdmenu .ct3 {
	width: 100px;
	background-position: -196px 0px;
	}
.hdmenu .ct4 {
	width: 154px;
	background-position: -296px 0px;
	}
.hdmenu .ct5 {
	width: 96px;
	background-position: -450px 0px;
	}
/* hover */
.hdmenu .ct1:hover {
	width: 96px;
	background-position: 0px -30px;
	}
.hdmenu .ct2:hover {
	width: 100px;
	background-position: -96px -30px;
	}
.hdmenu .ct3:hover {
	width: 100px;
	background-position: -196px -30px;
	}
.hdmenu .ct4:hover {
	width: 154px;
	background-position: -296px -30px;
	}
.hdmenu .ct5:hover {
	width: 96px;
	background-position: -450px -30px;
	}

#ft {
	margin: 0px auto;
	padding: 10px;
	text-align: center;
	border-top: 1px solid #CCC;
	clear: both;
}
#ft .ftbnr {
	margin: 3px;

}

/* コンテンツ
---------------------------- */
#ctwrap {
	background-image: url(../img/ct_bg.png);
	background-repeat: no-repeat;
	background-position: center top;
	min-height:650px;
	clear: both;
}
#ctwrap h1 a {
	height: 200px;
	width:600px;
	text-decoration: none;
	text-indent: -999999px;
	display: block;
	margin: 0px auto;
	padding: 0px;
}
#contents {
	clear: both;
	width: 980px;
	margin: 0px auto;
	padding-bottom: 30px;
}
#contents .left {
	float: left;
	/*width: 210px;*/
width: 260px;
}
#ctwrap #contents cf .left {
	background-color: #00F;
	210px;
/*	width: 260px;*/
}
.leftmenu {
	display: block;
	width: 210px;
	background-image: url(../img/sidem.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	padding-top: 40px;
	padding-bottom: 30px;
	margin-bottom: 25px;
}
.leftmenu li{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	display: block;
	height: 55px;
}
.leftmenu a {
	display:block;
	text-decoration:none;
	background-image: url(../img/sidem.gif);
	background-repeat: no-repeat;
	height: 55px;
	}
.leftmenu a span{
	display:none;
}
/* nomal */
.leftmenu .leftm1 {
	background-position: 0px -40px;
	}
.leftmenu .leftm2 {
	background-position: 0px -95px;
	}
.leftmenu .leftm3 {
	background-position: 0px -150px;
	}
.leftmenu .leftm4 {
	background-position: 0px -205px;
	}
.leftmenu .leftm5 {
	background-position: 0px -260px;
	}
.leftmenu .leftm6 {
	background-position: 0px -315px;
	}
.leftmenu .leftm7 {
	background-position: 0px -370px;
	}
/* hover */
.leftmenu .leftm1:hover {
	background-position: -210px -40px;
	}
.leftmenu .leftm2:hover {
	background-position: -210px -95px;
	}
.leftmenu .leftm3:hover {
	background-position: -210px -150px;
	}
.leftmenu .leftm4:hover {
	background-position: -210px -205px;
	}
.leftmenu .leftm5:hover {
	background-position: -210px -260px;
	}
.leftmenu .leftm6:hover {
	background-position: -210px -315px;
	}
.leftmenu .leftm7:hover {
	background-position: -210px -370px;
	}
.left .device {
	background-color: #CCC;
	padding: 6px;
	background-image: url(../img/dot_bg.gif);
}
.left .device p {
	background-color: #FFF;
	display: block;
	padding: 8px;
}

#contents .main {
	/*width: 750px;*/
width: 700px;
	float: right;
	padding-bottom: 20px;
	text-align: center;
}
#contents .main .pankuzu {
	padding: 4px;
	font-size: 10px;
	color: #666;
	text-align: left;
}
#contents .main .pankuzu a {
	color: #413D56;
	text-decoration: none;
}
.totop {
	clear: both;
	padding: 5px;
	text-align: right;
}
.totop a img {
opacity:0.8;
filter: alpha(opacity=80);
}
.totop a:hover img {
opacity:1;
filter: alpha(opacity=100);
}

/* コンテンツ（ニュース）
---------------------------- */
.main .news {
	padding: 6px;
}
.main .news li {
	clear: both;
	border: 1px solid #FEC1C1;
	padding: 8px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	margin-bottom: 15px;
	text-align: left;
}

/* コンテンツ（リンク）
---------------------------- */
.main .links {
	padding: 6px;
}
.main .links li {
	clear: both;
	border: 1px solid #FEC1C1;
	padding: 8px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	margin-bottom: 15px;
}
.main .links li.link2 {
	clear: none;
	padding: 8px;
	-webkit-border-radius:6px;
	border-radius:6px;
	margin: 15px;
	float: left;
	width: 300px;
	text-align: center;
}

/* コンテンツ（メイキング）
---------------------------- */
.main .making {
	padding: 6px;
}
.main .making li {
	clear: both;
	border: 1px solid #FEC1C1;
	padding: 8px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	margin-bottom: 15px;
	text-align: center;
}

/* コンテンツ（キャスト）
---------------------------- */
.main .cast {
	text-align: left;
}
.main .cast dd {
	margin-top: 10px;
	margin-bottom: 20px;
}
.main .cast dd li {
	border-bottom: 1px dotted #CCC;
	display: block;
	padding: 8px;
	clear: both;
}
.main .cast li span{
	display: block;
	float: left;
	}
.main .cast .character {
	color: #F66;
	width: 13em;
}
.main .cast .cv {
	color: #333;
}
.main .cast dt.staff {
	margin-top: 30px;
}

.main .cast dd.staff {
	margin-bottom: 20px;
}

/* コンテンツ（グッズ）
---------------------------- */
.main .goods li {
	float: left;
	width: 150px;
	padding: 3px 3px 20px;
}
.main .goods li.goodscat {
	clear: left;
}

/* コンテンツ（キャラクター）
---------------------------- */
.main #character {
	text-align: left;
}
#character .tabdiv {
	background: #fff;
	padding:10px 0px 0px 0px;
	clear:both;
}
#character .ui-tabs-hide {
	display: none;
}
#character .tabnav li {
	float: left;
	height: 60px;
	width: 60px;
}

#hdm .lang li {
	display: block;
	float:left;
	padding:0px 3px;
	vertical-align: top;
}
#hdm .lang {
	padding:3px;
	height:30px;
}
.left .lang li {
	padding: 4px;
}