@charset "UTF-8";

#fb-root {
	display: none;
}

html {
	background-color: transparent;
/*	overflow-x: hidden; */
}

body {
	background: #000000;
	font-family: 'Lato',verdana,arial,clean,sans-serif;
}

a {
	color: #f03030;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	cursor: pointer;
}

a:focus {
	overflow: hidden;
}

#center_area {
	position: relative;
	width: 1053px;
	margin: 0px auto;
}

.clear {
	clear: both;
}

span.new {
	background: url(../img/new.png) no-repeat;
	width: 51px;
	height: 24px;
	text-indent: -9999em;
	position: absolute;
}

#bg {
	background: url(../img/bg.png) top center no-repeat;
	width: 1266px;
	height: 816px;
	position: absolute;
	top: 0px;
	left: -107px;	/* (1266-1053)/2 */
}

/*----------------------------------------------------------

.frame

----------------------------------------------------------*/
.frame {
	position: relative;
	width: 1053px;
}

.frame_top {
	background: url(../img/frame_top.png) top center no-repeat;
	padding-top: 101px;
	position: relative;
}

.frame_bottom {
	background: url(../img/frame_bottom.png) bottom center no-repeat;
	padding-bottom: 101px;
}

.frame_middle {
	background: url(../img/frame_middle.png) top center repeat-y;
}

.frame_wrapper {
	float: left;
	width: 983px;	/* 1053-35*2 */
	padding-left: 35px;
	padding-right: 35px;
	margin-top: -68px;
}

/*----------------------------------------------------------

header

----------------------------------------------------------*/
#header {
	position: relative;
	width: 1053px;
	height: 101px;
	z-index: 30;
}

#header .frame_header{
	background: url(../img/frame_header.png) top center no-repeat;
	width: 1266px;
	height: 240px;
	position: absolute;
	top: 0px;
	left: -107px;	/* (1266-1053)/2 */
	z-index: 10;
}

/*----------------------------------------------------------

nav

----------------------------------------------------------*/
#nav {
	position: absolute;
	top: 84px;
	left: 13px;
	z-index: 20;
}

#nav ul {
}

#nav li {
	float: left;
}

#nav li p,
#nav li a {
	display: block;
	text-indent: -9999px;
}

/* top */
#nav li.top p,
#nav li.top a {
	background: url(../img/nav_top.png) top left no-repeat;
	margin-right: 0px;
	margin-top: 0px;
	width: 71px;
	height: 37px;
}
#nav li.top a:hover,
#nav li.top a.selected {
	background-position: -0px -37px;
}

#nav li.top .new {
	left: 30px;
	top: -24px;
	visibility: hidden;
}

/* about */
#nav li.about p,
#nav li.about a {
	background: url(../img/nav_about.png) top left no-repeat;
	margin-right: 0px;
	margin-top: 0px;
	width: 111px;
	height: 37px;
}
#nav li.about a:hover,
#nav li.about a.selected {
	background-position: -0px -37px;
}

#nav li.about .new {
	left: 139px;
	top: -24px;
	visibility: hidden;
}

/* story */
#nav li.story p,
#nav li.story a {
	background: url(../img/nav_story.png) top left no-repeat;
	margin-right: 0px;
	margin-top: 0px;
	width: 107px;
	height: 37px;
}
#nav li.story a:hover,
#nav li.story a.selected {
	background-position: -0px -37px;
}

#nav li.story .new {
	left: 249px;
	top: -24px;
	visibility: hidden;
}

/* character */
#nav li.character p,
#nav li.character a {
	background: url(../img/nav_character.png) top left no-repeat;
	margin-right: 100px;
	margin-top: 0px;
	width: 184px;
	height: 37px;
}
#nav li.character a:hover,
#nav li.character a.selected {
	background-position: -0px -37px;
}

#nav li.character .new {
	left: 417px;
	top: -24px;
	visibility: hidden;
}

/* system */
#nav li.system p,
#nav li.system a {
	background: url(../img/nav_system.png) top left no-repeat;
	margin-right: 5px;
	margin-top: 0px;
	width: 124px;
	height: 37px;
}
#nav li.system a:hover,
#nav li.system a.selected {
	background-position: -0px -37px;
}

#nav li.system .new {
	left: 651px;
	top: -24px;
	visibility: hidden;
}

/* movie */
#nav li.movie p,
#nav li.movie a {
	background: url(../img/nav_movie.png) top left no-repeat;
	margin-right: 6px;
	margin-top: 0px;
	width: 134px;
	height: 37px;
}
#nav li.movie a:hover,
#nav li.movie a.selected {
	background-position: -0px -37px;
}

#nav li.movie .new {
	left: 759px;
	top: -24px;
	visibility: hidden;
}

/* special */
#nav li.special p,
#nav li.special a {
	background: url(../img/nav_special.png) top left no-repeat;
	margin-right: 5px;
	margin-top: 0px;
	width: 129px;
	height: 37px;
}
#nav li.special a:hover,
#nav li.special a.selected {
	background-position: -0px -37px;
}

#nav li.special .new {
	left: 893px;
	top: -24px;
	visibility: hidden;
}

/* spec */
#nav li.spec p,
#nav li.spec a {
	background: url(../img/nav_spec.png) top left no-repeat;
	margin-top: 0px;
	width: 85px;
	height: 37px;
}
#nav li.spec a:hover,
#nav li.spec a.selected {
	background-position: -0px -37px;
}

#nav li.spec .new {
	left: 983px;
	top: -24px;
	visibility: hidden;
}

/*----------------------------------------------------------
.nav_frame
----------------------------------------------------------*/
#sub_nav {
	z-index: 150;
}
.nav_frame_top {
	background: url(../img/sub_nav_frame_top.png) top left no-repeat;
	width: 252px;
	padding-top: 48px;
}

.nav_frame_bottom {
	background: url(../img/sub_nav_frame_bottom.png) bottom left no-repeat;
	width: 252px;
	padding-bottom: 52px;
}

.nav_frame_middle {
	background: url(../img/sub_nav_frame_middle.png) top left repeat-y;
	width: 252px;
	position: relative;
}

/*----------------------------------------------------------

main

----------------------------------------------------------*/

#main h1 {
	background: url(../img/logo.png) top left no-repeat;
	width: 239px;
	height: 130px;
	text-indent: -9999px;
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 150;
}

#main_wrapper {
	position: absolute;
	top: 106px;
	left: 0px;
	width: 1000px;
	padding-left: 100px;
	padding-right: 100px;
}

#main {
	position: relative;
}

/*-- new --*/
#main_content h3 span.new {
	position: absolute;
	top: 6px;
	left: 9px;
}

/*----------------------------------------------------------

footer

----------------------------------------------------------*/
#footer {
	width: 1053px;
	position: relative;	
	text-align: center;	
	z-index: 20;
}

#footer .footer_logos {
	position: absolute;
	width: 800px;
	left: 110px;
	top: 150px;
	height: 100px;	
	color: #8C8FB0;
	font-size: 0.8em;
	line-height: 1em;
	z-index: 30;
}

.footer_logos img {
	padding: 0 20px;	
}

#footer .frame_footer {
	background: url(../img/frame_footer.png) top center no-repeat;
	width: 1266px;
	height: 291px;
	position: absolute;
	top: -104px;
	left: -107px;
	z-index: 20;	/* (1266-1053)/2 */
}


/*----------------------------------------------------------

social icons

----------------------------------------------------------*/

#social_icons {
	position: absolute;
	width: 640px;
	top: 310px;
	height: 100px;	
	z-index: 30;
}

#social_icons li {
	float: right;
	padding-right: 5px;	
}

.social_icon1 {
	width:40px;
	height:40px; /* Notice that the height is not the height of the whole sprite, but the height of one single button */
	display:block;
	background:url(../img/btn_fb.png) no-repeat; /*path to the sprite*/	 
	background-position:top;/* the background position (in combination with the height!) makes it possible that only the top of the whole sprite will be visible */
}

.social_icon1 span.hover{	
	width:40px;	
	height:40px;
	display:block;
	background:url(../img/btn_fb.png) no-repeat;	
	background-position: bottom;
}


.social_icon2 {
	width:40px;
	height:40px; 
	display:block;
	background:url(../img/btn_twitter.png) no-repeat; 
	background-position: top; 	
}

.social_icon2 span.hover{
	width:40px;	
	height:40px;
	display: block;
	background:url(../img/btn_twitter.png) no-repeat;
	background-position: bottom;	
}

.social_icon3 {
	width:40px;
	height:40px; 
	display:block;
	background:url(../img/btn_youtube.png) no-repeat; 
	background-position: top;
}

.social_icon3 span.hover{
	width:40px;
	height:40px;
	display: block;
	background:url(../img/btn_youtube.png) no-repeat;
	background-position: bottom;
}

.social_icon4 {
	width:40px;
	height:40px; 
	display:block;
	background:url(../img/btn_forum.png) no-repeat; 
	background-position: top;
}

.social_icon4 span.hover{
	width:40px;	
	height:40px;
	display:block;
	background:url(../img/btn_forum.png) no-repeat;
	background-position: bottom;
}

/* end social icons */

/*----------------------------------------------------------

sns_nav

----------------------------------------------------------*/
#sns_nav {
	margin-top: 10px;
	margin-bottom: 8px;
	float: right;
}

#sns_nav li {
	float: left;
}

#sns_nav li a {
	display: block;
	background: url(../img/sns_nav.png) no-repeat;
	text-indent: -9999em;
	height: 33px;
}

/*----- BLOG -----*/
#sns_nav .blog a {
	background-position: -0px -0px;
	width: 91px;
}

#sns_nav .blog a:hover {
	background-position: -0px -33px;
}

/*----- TWITTER -----*/
#sns_nav .twitter a {
	background-position: -91px -0px;
	width: 148px;
}

#sns_nav .twitter a:hover {
	background-position: -91px -33px;
}

/*----- FACEBOOK -----*/
#sns_nav .facebook a {
	background-position: -239px -0px;
	width: 164px;
}

#sns_nav .facebook a:hover {
	background-position: -239px -33px;
}

/*----- sns_wrapper -----*/
#sns_wrapper {
	position: absolute;
	width: 410px;
	top: -17px;
	left: 617px;
	z-index: 30;
}

/*----------------------------------------------------------

#sub_frame

----------------------------------------------------------*/

/*-- 上部にキャプションのついたフレーム --*/
.sub_frame_top {
	background: url(../img/sub_frame_top.png) center top no-repeat;
	width: 700px;
	padding-top: 63px;
	position: relative;
}

.sub_frame_bottom {
	background: url(../img/sub_frame_bottom.png) center bottom no-repeat;
	width: 700px;
	padding-bottom: 30px;
}

.sub_frame_middle {
	background: url(../img/sub_frame_middle.png) center top repeat-y;
	width: 700px;
}

/*-- 上部にキャプションのついたフレーム(キャプション2行version) --*/
.sub_frame_top_of_2line_caption {
	background: url(../img/sub_frame_top_of_2line_caption.png) center top no-repeat;
	width: 700px;
	padding-top: 92px;
	position: relative;
}

.sub_frame_wrapper {
	padding-left: 23px;
	margin-top: 16px;
	float: left;
}

/*-- 上部にキャプションがないフレーム --*/
.simple_sub_frame_top {
	background: url(../img/simple_sub_frame_top.png) center top no-repeat;
	width: 700px;
	padding-top: 26px;
	position: relative;
}

.simple_sub_frame_bottom {
	background: url(../img/simple_sub_frame_bottom.png) center bottom no-repeat;
	width: 700px;
	padding-bottom: 26px;
}

.simple_sub_frame_middle {
	background: url(../img/simple_sub_frame_middle.png) center top repeat-y;
	width: 700px;
}

/*-- 下部にコウモリのオブジェクトが付いたフレーム --*/
.simple_sub_frame_bottom_of_bat_object {
	background: url(../img/simple_sub_frame_bottom_of_bat_object.png) center bottom no-repeat;
	width: 700px;
	padding-bottom: 223px;
}

.simple_sub_frame_wrapper {
	padding-left: 23px;
	margin-top: 0px;
	float: left;
}