@charset "utf-8";
/* CSS Document */

/*デフォルトスタイル初期化及び共通スタイル*/
*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-decoration: none;
	color: white;
	list-style-type: none;
}

/*--------------------------------*/
body{ background-color: black;}

/*ヘッド要素*/
#head{
	height: 199px;
	border-bottom: 1px solid red;
}

#visual{
	background-image: url(../images/css-sprite.jpg);
	width: 800px;
	height: 170px;
	position: absolute;
	left: 50%;
	margin-left: -400px;
}

#visual h1{
	background-image: url(../images/header.png);
	height: 30px;
	text-indent: -9999px;
}

#visual h1 a{
	display: block;
	width: 220px;
	height: 100%;
	outline: none;
}

#visual ul{
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 0.625em;
}

#visual ul li{
	float: left;
	margin-left: 20px;
	line-height: 30px;
}

#visual ul li a:hover{ color: red;}

/*グローバルナビゲーション*/
#glovalNavi{
	width: 800px;
	height: 30px;
	margin: -30px auto 20px auto;
}

#glovalNavi li{
	background-image: url(../images/css-sprite.jpg);
	width: 200px;
	height: 29px;
	float: left;
	border-bottom: 1px solid red;
	text-indent: -9999px;
}

#glovalNavi .navi01{ background-position: 0 -170px;}
#glovalNavi .navi02{ background-position: -200px -170px;}
#glovalNavi .navi03{ background-position: -400px -170px;}
#glovalNavi .navi04{ background-position: -600px -170px;}

#glovalNavi li a{
	display: block;
	width: 100%;
	height: 100%;
	outline: none;
}

#glovalNavi li a:hover{ background-image: url(../images/css-sprite.jpg);}

#glovalNavi .navi01 a:hover{ background-position: 0 -200px;}
#glovalNavi .navi02 a:hover{ background-position: -200px -200px;}
#glovalNavi .navi03 a:hover{ background-position: -400px -200px;}
#glovalNavi .navi04 a:hover{ background-position: -600px -200px;}

/*フット要素*/
#foot{
	height: 99px;
	border-top: 1px solid red;
	margin-top: 20px;
}

#foot ul{
	width: 800px;
	margin: 0 auto 0 auto;
	line-height: 30px;
	font-size: 0.625em;
}

#foot ul li{
	float: left;
	margin-right: 20px;
}

#foot ul li a{
	text-decoration: underline;
	color: red;
}

#foot ul li a:hover{ color: #ff7f7f;}

#foot p{
	clear: both;
	line-height: 60px;
	font-size: 0.625em;
	color: #404040;
	text-align: center;
}

/*--------------------------------*/
/*コンテンツページ用CSS*/
/*グローバルナビゲーション*/
#music #glovalNavi .navi01{
	width: 198px;
	border-top: 1px solid red;
	border-right: 1px solid red;
	border-bottom: none;
	border-left: 1px solid red;
	background-position: -1px -171px;
}

#illustration #glovalNavi .navi02{
	width: 198px;
	border-top: 1px solid red;
	border-right: 1px solid red;
	border-bottom: none;
	border-left: 1px solid red;
	background-position: -201px -171px;
}

#novel #glovalNavi .navi03{
	width: 198px;
	border-top: 1px solid red;
	border-right: 1px solid red;
	border-bottom: none;
	border-left: 1px solid red;
	background-position: -401px -171px;
}

#blog #glovalNavi .navi04{
	width: 198px;
	border-top: 1px solid red;
	border-right: 1px solid red;
	border-bottom: none;
	border-left: 1px solid red;
	background-position: -601px -171px;
}

#music #glovalNavi .navi01 a:hover{ background-position: -1px -201px;}
#illustration #glovalNavi .navi02 a:hover{ background-position: -201px -201px;}
#novel #glovalNavi .navi03 a:hover{ background-position: -401px -201px;}
#blog #glovalNavi .navi04 a:hover{ background-position: -601px -201px;}

/*コンテンツボックス*/
#contents{
	width: 800px;
	margin: 0 auto 0 auto;
}

#mainColumnBox{
	width: 600px;
	float: right;
	margin-left: -10px;
}

#upper,
#under{
	background-image: url(../images/css-sprite.jpg);
	width: 100%;
	height: 10px;
}

#upper.wide{ background-position: 0 -230px;}
#under.wide{ background-position: 0 -240px;}

#upper.slim{ background-position: 0 -370px;}
#under.slim{ background-position: 0 -380px;}

#mainColumn{
	background-color: white;
	padding: 10px 20px 10px 20px;
}

#mainColumn a{
	color: red;
	text-decoration: underline;
}

#mainColumn a:visited{ color: #800000;}
#mainColumn a:active{ color: #008000;}
#mainColumn a:hover{ color: #ff5959;}

/*ヘッドスタイル*/
#mainColumn h2{
	background-color: red;
	background-image: url(../images/css-sprite.jpg);
	background-position: 0 -250px;
	margin: -10px -20px -20px -20px;
	padding: 10px 0 20px 0;
	line-height: 50px;
	color: #333333;
	font-size: 1.125em;
	font-weight: bold;
	text-align: center;
}

#mainColumn h3{
	background-image: url(../images/css-sprite.jpg);
	line-height: 40px;
	margin: 20px 0 20px 0;
	padding: 0 10px 0 30px;
	font-size: 0.875em;
	font-weight: bold;
}

#mainColumn.wide h3{ background-position: 0 -330px;}
#mainColumn.slim h3{ background-position: 0 -390px;}

#mainColumn h4{
	line-height: 39px;
	border-left: 10px solid #800000;
	border-bottom: 1px solid #800000;
	margin: 20px 0 20px 0;
	padding-left: 20px;
	color: #333333;
	font-weight: bold;
}

#mainColumn h5{
	background-image: url(../images/css-sprite.jpg);
	background-position: -720px -370px;
	background-repeat: no-repeat;
	line-height: 20px;
	color: black;
	font-size: 0.875em;
	margin: 20px 0 20px 0;
	padding-left: 25px;
}

/*--------------------------------*/
#mainColumn p{
	color: #1a1a1a;
	margin: 20px 0 20px 0;
	font-size: 0.875em;
	line-height: 1.5em;
}

#mainColumn ul{
	margin: 20px 0 20px 0;
	padding-left: 10px;
}

#mainColumn ul li{
	background-image: url(../images/list-icon.png);
	background-repeat: no-repeat;
	background-position: left top;
	line-height: 20px;
	padding-left: 30px;
	color: #1a1a1a;
	font-size: 0.75em;
}

#mainColumn ul li ul li{
	font-size: 1em;
}

#mainColumn dl{ margin: 20px 0 20px 0;}

#mainColumn dt{
	width: 180px;
	color: #1a1a1a;
	font-weight: bold;
	float: left;
	font-size: 0.875em;
	line-height: 1.5em;
}

#mainColumn dd{
	paddding-left: 180px;
	color: #1a1a1a;
	font-size: 0.875em;
	line-height: 1.5em;
	margin-bottom: 10px;
}

#mainColumn ol{ margin: 20px 0 20px 0;}

#mainColumn ol li{
	color:  #1a1a1a;
	font-size: 0.875em;
	line-height: 1.5em;
	list-style-type: decimal;
	margin-left: 20px;
}

#mainColumn #locateButton{ margin: 20px 0 20px 0;}

#mainColumn #next{
	background-image: url(../images/css-sprite.jpg);
	background-position: -400px -430px;
	width: 80px;
	height: 30px;
	float: right;
	text-indent: -9999px;
}

#mainColumn #back{
	background-image: url(../images/css-sprite.jpg);
	background-position: -310px -430px;
	width: 90px;
	height: 30px;
	float: left;
	text-indent: -9999px;
}

#mainColumn #locateButton a{
	display: block;
	height: 100%;
	outline: none;
}

#mainColumn #next a:hover{
	background-image: url(../images/css-sprite.jpg);
	background-position: -400px -460px;
}

#mainColumn #back a:hover{
	background-image: url(../images/css-sprite.jpg);
	background-position: -310px -460px;
}

#mainColumn #pageTop{
	background-color: green;
	background-image: url(../images/css-sprite.jpg);
	background-position: -190px -430px;
	width: 60px;
	height: 60px;
	margin: 50px auto 20px auto;
	text-indent: -9999px;
}

#mainColumn #pageTop a{
	display: block;
	height: 100%;
	outline: none;
}

#mainColumn #pageTop a:hover{
	background-image: url(../images/css-sprite.jpg);
	background-position: -250px -430px;
}

/*2カラム用ナビゲーションボックス*/

#sideColumn{
	width: 188px;
	float: left;
	margin: 10px 0 10px 0;
	padding-right: 20px;
	border: 1px solid #730000;
}

#sideColumn h2{
	background-color: #730000;
	margin: 20px 0 20px 0;
	padding-right: 10px;
	line-height: 30px;
	font-size: 0.875em;
	font-weight: bold;
	text-align: right;
}

#sideColumn ul{ margin: 20px 0 20px 0;}

#sideColumn ul li{
	background-image: url(../images/list-icon.png);
	background-repeat: no-repeat;
	background-position: left top;
	line-height: 20px;
	padding-left: 25px;
	font-size: 0.75em;
}

#sideColumn ul li ul{ margin: 0 0 0 -10px;}
#sideColumn ul li ul li{ font-size: 1em;}

#sideColumn ul a{
	color: red;
	text-decoration: underline;
}

#sideColumn ul a:hover{ color: #ff7f7f;}
#sideColumn ul a:visited{ color: #800000;}
#sideColumn ul a:active{ color: green;}
#sideColumn ul a:hover{ color: #ff7f7f;}