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


body{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: url(../images/Bg.jpg) repeat-y top center #FFF;
}

main,
header,
footer{
	position: relative;
	width: 970px;
	margin: 0 auto;
}

main{
	display: block;
	margin-top: -121px;
}

header {
  z-index: 10;
  overflow: hidden;
}

header h1{
	float: left;
}

header nav{
	position: absolute;
	top: 19px;
	left: 449px;
	width: 376px;
	height: 14px;
	 }
	 
nav ul li{
	display: inline;
	float: left;
	text-indent: -9999px;
}

nav ul li a{
	height: 14px;
	display: block;
}
	
nav ul li#MenuTop{
	padding-right: 73px;
}

nav ul li#MenuTop a{
	width: 30px;
	background: url(../images/MenuTop.png) no-repeat left top;
}

nav ul li#MenuTop a:hover{
	background: url(../images/MenuTop.png) no-repeat left bottom;
}

nav ul li#MenuStory{
	padding-right: 41px;
}

nav ul li#MenuStory a{
	width: 51px;
	background: url(../images/MenuStory.png) no-repeat left top;
}

nav ul li#MenuStory a:hover{
	background: url(../images/MenuStory.png) no-repeat left bottom;
}

nav ul li#MenuCharacter{
	padding-right: 46px;
}

nav ul li#MenuCharacter a{
	width: 93px;
	background: url(../images/MenuCharacter.png) no-repeat left top;
}

nav ul li#MenuCharacter a:hover{
	background: url(../images/MenuCharacter.png) no-repeat left bottom;
}

nav ul li#MenuBook a{
	width: 42px;
	background: url(../images/MenuBook.png) no-repeat left top;
}

nav ul li#MenuBook a:hover{
	background: url(../images/MenuBook.png) no-repeat left bottom;
}
	
/*---------------------------------index.html---------------------------------*/

body#index main{
	overfloaw: hidden;
}

body#index main h2#indexdesc{
	position: relative;
}

body#index main h2#indexdesc span#btnBook03Detail{
	position: absolute;
	bottom: 77px;
	right: 51px;
}

body#index main h2#indexdesc span#btnBook03Detail a{
	display: block;
	text-indent: -9999px;
	width: 176px;
	height: 238px;
	background: url(../images/BtnBook03Detail.png) no-repeat top left;
}

body#index main h2#indexdesc span#btnBook03Detail a:hover{
	background: url(../images/BtnBook03Detail.png) no-repeat bottom left;
}

/*body#index main h2#indexdesc p#BtnTwitter{
	position: absolute;
	bottom: 102px;
	right: 82px;
}

body#index main h2#indexdesc p#BtnTwitter a{
	display: block;
	text-indent: -9999px;
	width: 105px;
	height: 25px;
	background: url(../images/BtnTwitter.png) no-repeat top left;
}

body#index main h2#indexdesc p#BtnTwitter a:hover{
	background: url(../images/BtnTwitter.png) no-repeat bottom left;
}*/

body#index main h2#indexdesc p#BtnSign{
	position: absolute;
	bottom: 27px;
	right: 17px;
}

body#index main h2#indexdesc p#BtnSign a{
	display: block;
	text-indent: -9999px;
	width: 242px;
	height: 242px;
	background: url(../images/BtnSign.png) no-repeat top left;
}

body#index main h2#indexdesc p#BtnSign a:hover{
	background: url(../images/BtnSign.png) no-repeat bottom left;
}


/*---------------------------------story---------------------------------*/

section#story p#storydesc{
	padding-left: 591px;
	background: url(../images/StoryDescBg.jpg) no-repeat top left;
}

/*---------------------------------chara---------------------------------*/

section#character{
	overflow: hidden;
}

section#character p.charaDetail{
	float: left;	
}
	
/*---------------------------------book---------------------------------*/

section#book{
	position: relative;
}

div#book01,
div#book02{
	position: relative;
}

section#book div#book01 p#book01desc{
	padding-left: 407px;
	background: url(../images/Book01DescBg.jpg) no-repeat top left;
}

section#book div#book02 p#book02desc{
	padding-left: 407px;
	background: url(../images/Book02DescBg.jpg) no-repeat top left;
}

p.BtnTrial a{
	text-indent: -9999px;
	display: block;
	width: 198px;
	height: 42px;
	background: url(../images/BtnTrial.png) no-repeat top left;
}
p.BtnTrial a:hover{
	background: url(../images/BtnTrial.png) no-repeat bottom left;
}

div#book01 p#btn01Posi{
	position: absolute;	
	bottom: 239px;
	left: 109px;
}

div#book02 p#btn02Posi{
	position: absolute;	
	bottom: 41px;
	left: 109px;
}


/*------------------------------index.htmlここまで-----------------------------*/


footer{
	z-index: 20;
	clear: both;
	height: 40px;
	background-color: #745600;
	color: #fff;
	font-weight: bold;
	font-size: 10px;
}

footer small{
	line-height: 40px; 
	margin-left: 10px;
}

footer a{
	color: #fff;
	text-decoration: none;
}

footer a:hover{
	text-decoration: underline;
}

div#tw{
	position: absolute;
	top: 13px;
	right: 10px;
}