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

html,body {
	color:#FFFFFF;
	background:url(../../img/bg.gif) center top repeat;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	height: 100%;
	width:100%;
	margin: 0;
}


img {
	vertical-align:bottom;
}

h3 {
	margin:0 16px 1em;
	font-size:120%;
	font-weight:bold;
}
p {
	margin:0 16px 1em;
}
hr{
	clear: both;
	margin: 26px 0px 30px 0px;
	padding: 0px;
	border: none;
	border-bottom: 1px dotted #999;
	color: #000;
	background-color: #000;
}

#box {
	background:url(../../img/bg_cosm.jpg) center top no-repeat;
	margin:0;
	padding:0;
	min-width:1024px;
	width: auto !important;
	width:100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
#top_box {
	background:url(../../img/bg2.jpg) center top no-repeat;
	margin:0;
	padding:0;
	min-width:1024px;
	width: auto !important;
	width:100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
/*--- wrapper -----------*/
#wrapper{
	width:970px;
	padding:0 37px 15px 0;
	margin:0 auto;
}
.wrapper_top {
	background:url(../../img/bg_top.png) right top no-repeat;
}
* html #wrapper{
	width:980px;
}
/*+++++++++++++++++++++++++++++++++++++++++++ clearfix */
#wrapper:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
#wrapper {display: inline-block;}
/* Hides from IE-mac \*/
* html #wrapper {height: 1%;}
#wrapper {display: block;}
/* End hide from IE-mac */

/*--- side -----------*/
#side{
	float:left;
	width:280px;
}

#side h1{
	padding:5px 0 0;
}

#side ul#menu{
	display:block;
	width:236px;
	height:353px;
	padding:15px 30px 0 24px;
	margin:0;
}

#side ul#menu li{
	display:block;
	width:236px;
	height:79px;
	text-indent:-9999px;
	margin-bottom:3px;
}

#side ul#menu li a{
	display:block;
	width:228px;
	height:79px;
	background:url(../img/menu.png) no-repeat;
	overflow:hidden;
}
* html #side ul#menu li a:hover{
	width:229px;
	margin-left:-1px;
}

#side ul#menu li {
	display:block;
	width:228px;
	height:79px;
	background:url(../img/menu.png) no-repeat;
	overflow:hidden;
}

#side ul#menu li.news a{
	background-position:-250px 0;
}
#side ul#menu li.news a:hover{
	background-position:-493px 0;
}
* html #side ul#menu li.news a:hover{
	background-position:-492px 0;
}
#side ul#menu li.news_on{
	background-position:-493px 0;
}
* html #side ul#menu li.news_on{
	background-position:-492px 0;
	margin-left:-1px;
}

#side ul#menu li.story a{
	background-position:-250px -79px;
}
#side ul#menu li.story a:hover{
	background-position:-493px -79px;
}
* html #side ul#menu li.story a:hover{
	background-position:-492px -79px;
}
#side ul#menu li.story_on {
	background-position:-493px -79px;
}
* html #side ul#menu li.story_on {
	background-position:-492px -79px;
	margin-left:-1px;
}

#side ul#menu li.character a{
	background-position:-250px -159px;
}
#side ul#menu li.character a:hover{
	background-position:-493px -159px;
}
* html #side ul#menu li.character a:hover{
	background-position:-492px -159px;
}
#side ul#menu li.character_off{
	background-position:-7px -159px;
}
#side ul#menu li.character_on{
	background-position:-493px -159px;
}
* html #side ul#menu li.character_on{
	background-position:-492px -159px;
	margin-left:-1px;
}

#side ul#menu li.staff a{
	background-position:-250px -237px;
}
#side ul#menu li.staff a:hover{
	background-position:-493px -237px;
}
* html #side ul#menu li.staff a:hover{
	background-position:-492px -237px;
}
#side ul#menu li.staff_on{
	background-position:-493px -237px;
}
* html #side ul#menu li.staff_on{
	background-position:-492px -237px;
	margin-left:-1px;
}

#side .banner{
	clear:both;
	width:278px;
	font-size:80%;
	text-align:center;
	padding:0 0 13px;
	margin:0;
}
#side .banner a img{
	vertical-align:top;
	margin-bottom:3px;
}
#side .banner a {
	color:#FFF; text-decoration:none;
}

/*--- main -----------*/
#main{
	float:right;
	width:679px;
}

* html #main{
	float:right;
	width:670px;
}

#main .mainvisual h2#pre{
	padding-top:95px;
}

#main .mainvisual{
	width:660px;
	margin:0 0 0 15px;
}

#main .info{
	display:block;
	width:625px;
	background:url(../img/info_bg.jpg) right top no-repeat;
	padding:7px 17px 30px 18px;
	margin:0 0 0 15px;
}
#main .infoBox{
	float:left;
	display:block;
	width:100%;
	height:173px;
	overflow-y: scroll;
	border:1px solid #000000;
	background:url(../img/info_bg2.png) left top repeat;
	padding:5px 0 0 0;
	margin:0;
}

#main .infoBox dl.infoData{
	margin:5px 7px;
}
#main .infoBox dl.infoData dt{
	font-size:80%;
	padding:5px 0 0 0;
}
#main .infoBox dl.infoData dd{
	color:#FFFF00;
	background:url(../img/infobox_border.gif) left bottom repeat-x;
	padding:5px 2px 9px;
	margin:0 0 5px;
	font-size:80%;
}
#main .infoBox dl.infoData dd a:link{ color:#FFFF00; text-decoration:underline;}
#main .infoBox dl.infoData dd a:visited{ color:#FFFF00; text-decoration:underline;}
#main .infoBox dl.infoData dd a:hover{ color:#FFFF00; text-decoration:none;}
#main .infoBox dl.infoData dd a:active{ color:#FFFF00; text-decoration:none;}

#main .infoBanner{
	float:right;
	width:170px;
	padding:0;
	margin:0;
}

#main .infoBanner .miniBanner{
	width:162px;
	padding:0;
	margin:0 auto;
}

.episodeBorder {
	margin: 15px 0;
	padding: 15px 0;
	border: 5px solid #660000;
	text-align: center;
}
/*--- content -----------*/
#main .content{
	margin:30px 0 10px 15px;
	padding-bottom:30px;
	line-height:1.8;
	background:url(../img/content_bg.png);
}
* html #main .content{
	margin:30px 0 10px 7px;
	padding-bottom:30px;
	line-height:1.8;
	background:url(../img/content_bg.png);
}

#main .content .inner{
	width: 643px;
	padding: 43px 10px 0;
	margin:0;
	min-height:430px;
	height: auto !important;
	height:430px;

}

#main .content .inner p span {
	font-size: 85%;
}


#main .content .inner .contentText{
	background:url(http://www.beastsaga.tv/common/img/content_border.gif) left bottom no-repeat;
}
#main .content .inner .contentTextNone{
	background:none;
}


.pageTop {
	text-align:right;
	font-size:90%;
}

#correlation {
	padding:37px 0 17px 7px;
}

#correlation .crestLand {
	background:url(../../character/img/gb_character2.png) left top no-repeat;	width:649px;
	height:956px;
	position:relative;
}


#land_G4{
	position: absolute;
	top: 8px;
	left: 15px;
	width:331px;
	height:140px;
	_width:340px; /* IE6 */
}

#land_G4 p {
	width:331px;
	margin:0 0 5px 0;
	text-align:center;
}

#land_sokin{
	position: absolute;
	top: 8px;
	left: 388px;
	width:247px;
	height:140px;
	_width:260px; /* IE6 */
}

#land_sokin p {
	width:247px;
	margin:0 0 5px 0;
	text-align:center;
}

div.content div#CharacterBox{
	padding-left:14px;
}

#correlation .crestLand span.land {
	position: absolute;
	top: 155px;
	left: 202px;
}

#correlation .land1 {
	position: absolute;
	top: 211px;
	left: 260px;
}
#correlation .land_han {
	position: absolute;
	top: 314px;
	left: 366px;
}
#correlation .land3 {
	position: absolute;
	top: 211px;
	left: 112px;
}
#correlation .land4 {
	position: absolute;
	top: 149px;
	left: 163px;
}
#correlation .land5 {
	position: absolute;
	top: 214px;
	left: 15px;
}
#correlation .land6 {
	position: absolute;
	top: 211px;
	left: 437px;
}
#correlation .land_sub {
	float:left;
	display:block;
	width:82px;
	height:112px;
}
#correlation .land_sub1 {
	float:left;
	display:block;
	width:83px;
	height:112px;
}
#correlation .land_sub2 {
	float:left;
	display:block;
	width:82px;
	height:112px;
	margin:-63px 0 0 0;
}
#correlation .land8 {
	display:block;
	width:82px;
	height:112px;
}
#correlation .land9 {
	position: absolute;
	top: 428px;
	left: 227px;
}
#correlation .land10 {
	position: absolute;
	top: 249px;
	left: 351px;
}
#correlation .land11 {
	position: absolute;
	top: 246px;
	left: 15px;
}
#correlation .pirateDeathHeart span.pirate {
	position: absolute;
	top: 427px;
	left: 60px;
}

#combatant{
	position: absolute;
	top: 513px;
	left: 15px;
	width:166px;
	height:112px;
	_width:340px; /* IE6 */
}
#pirate_B3{
	position: absolute;
	top: -23px;
	left: 191px;
	width:247px;
	height:140px;
	_width:260px; /* IE6 */
}
#pirate_B3 p {
	width:247px;
	margin:0 0 4px 67px;
}
#correlation .deathheart_syu {
	position: absolute;
	top: -99px;
	left: 116px;
}

#correlation .pirate1 {
	position: absolute;
	top: -39px;
	left: 165px;
}
#pirate_sub{
	position: absolute;
	top: 148px;
	left: 54px;
	width:168px;
	height:120px;
	_width:260px; /* IE6 */
}
#PalaceA{
	position: absolute;
	top: 276px;
	left: 42px;
	width:84px;
	height:112px;
	_width:260px; /* IE6 */
}

#correlation .ScutePalace span.palace {
	position: absolute;
	top: 391px;
	left: 15px;
}




















/* Wind */
#correlation .crestLand span.wind {
	position: absolute;
	top: 171px;
	left: 517px;
}
#correlation .wind1 {
	position: absolute;
	top: 56px;
	left: 328px;
}
#correlation .wind2 {
	position: absolute;
	top: 56px;
	left: 453px;
}
#correlation .wind3 {
	position: absolute;
	top: 11px;
	left: 553px;
}
#correlation .wind4 {
	position: absolute;
	top: 235px;
	left: 563px;
}
#correlation .wind5 {
	position: absolute;
	top: 359px;
	left: 527px;
}

/*  Sea  */
#correlation #Sea {
	width:650px;
	height:284px;
	position:relative;
}
#correlation #Sea span {
	position: absolute;
	top: 16px;
	left: 189px;
}
#correlation .sea1 {
	position: absolute;
	top: 17px;
	left: 17px;
}
#correlation .sea2 {
	position: absolute;
	top: 17px;
	left: 96px;
}
#correlation .sea3 {
	position: absolute;
	top: 67px;
	left:317px;
}
#correlation .sea4 {
	position: absolute;
	top: 0px;
	left: 470px;
}
#correlation .sea5 {
	position: absolute;
	top: 0px;
	left: 562px;
}
#correlation .sea6 {
	position: absolute;
	top: 174px;
	left: 17px;
}
#correlation .sea7 {
	position: absolute;
	top: 145px;
	left: 150px;
}
#correlation .sea8 {
	position: absolute;
	top: 145px;
	left: 233px;
}
#correlation .sea9 {
	position: absolute;
	top: 161px;
	left: 445px;
}
#correlation .sea10 {
	position: absolute;
	top: 161px;
	left: 529px;
}









#kamon img,
#mitsuru img,
#subaru img {
	margin:0 0 10px;
}
	

#correlation a {
	background:#FFF;
}

#correlation a:hover img {
	opacity:0.7;
	-moz-opacity: 0.7; /* Firefox */
	filter:alpha(opacity=70);  /* IE6/7 */
	-ms-filter: "alpha( opacity=70 )"; /* IE8 */
}



/*--- download -----------*/

.D_inner{ margin:0 auto;
width:503px;
height:367px; }

.Inner_1{ float:left;
width:190px; }

.Inner_2{ float:right;
width:253px;
margin-top:48px; }

.D_btnA{ width:149px;
margin:15px auto 0; }

.D_btnB{ width:149px;
margin:62px auto 0; }

/* IE6Hack */
* html .D_btnA{ margin-top:-13px; }
* html .D_btnB{ margin-top:34px; }
* html .D_btn2{ margin-top:-29px; }
* html .D_btn4{ margin-top:-29px; }

.inner_{ height: auto !important;
margin: 0;
min-height: 430px;
padding: 43px 10px;
width: 643px; }

.D_btn1 a {
	display:block;
	width: 149px;
	height: 31px;
	margin:0;
	background: url(../../download/img/640-960_off.png) center top no-repeat;
	text-indent: -9999px;

}
.D_btn1 a:hover {
	display:block;
	width: 149px;
	height: 31px;
	margin:0;
	background: url(../../download/img/640-960_on.png) center top no-repeat;
	text-indent: -9999px;

}

.D_btn2 a {
	display:block;
	width: 149px;
	height: 31px;
	margin:5px 0 0;
	background: url(../../download/img/1024-1024_off.png) center top no-repeat;
	text-indent: -9999px;

}
.D_btn2 a:hover {
	display:block;
	width:149px;
	height: 31px;
	margin:5px 0 0;
	background: url(../../download/img/1024-1024_on.png) center top no-repeat;
	text-indent: -9999px;

}

.D_btn3 a {
	display:block;
	width: 149px;
	height: 31px;
	margin:0;
	background: url(../../download/img/1024-768_off.png) center top no-repeat;
	text-indent: -9999px;

}
.D_btn3 a:hover {
	display:block;
	width:149px;
	height: 31px;
	margin:0;
	background: url(../../download/img/1024-768_on.png) center top no-repeat;
	text-indent: -9999px;

}

.D_btn4 a {
	display:block;
	width: 149px;
	height: 31px;
	margin:5px 0 0;
	background: url(../../download/img/1280-1024_off.png) center top no-repeat;
	text-indent: -9999px;

}
.D_btn4 a:hover {
	display:block;
	width:149px;
	height: 31px;
	margin:5px 0 0;
	background: url(../../download/img/1280-1024_on.png) center top no-repeat;
	text-indent: -9999px;

}





/*--- footer -----------*/
#footer{
	clear:both;
	text-align:right;
	padding:5px 5px 0 0;
	margin:0;
}
#footer p {
	margin:0 0 25px 0;
	padding:0 2px 0 0;
	font-size:85%;
}