@charset "Shift-JIS";
/* CSS Document */
/* 
------------------------------------------------------------
file name: index.css
/* page body
------------------------------------------------------------ */
body {
	background: url(http://image.mgame.jp/new_rpg/hero5/index/bg_herotop.gif) repeat-x;
	background-color:#000000;
	position:relative;
}

/* logo */
#all #topspace{
	position:absolute;
	top:0px;
	left:47px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/top_space.gif) no-repeat;
	height:24px;
	width:175px;
}

#all #herologo{
	position:absolute;
	top:24px;
	left:47px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/logo.jpg) no-repeat;
	height:129px;
	width:175px;
	}
/* gamestartflash */
#all #gamestartflash{
	position:absolute;
	top:153px;
	left:47px;
	height:139px;
	width:175px;
	}


/*top leftbanner*/
#all #bgleftbanner{
	position:absolute;
	top:398px;
	left:0;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/bg_leftbanner.jpg) no-repeat;
	height:539px;
	width:222px;
	}
#all #bgleftbanner #topleftbanner05{
	position:relative;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/left_banner0126.jpg) no-repeat;
	height:87px;
	width:175px;
	margin:27px 0 0 42px;
	overflow:hidden;
	}	
#all #bgleftbanner #topleftbanner01{
	position:relative;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/left_20090114banner.gif) no-repeat;
	height:87px;
	width:175px;
	margin:7px 0 0 42px;
	overflow:hidden;
	}
#all #bgleftbanner #topleftbanner02{
	position:relative;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/left_banner4.gif) no-repeat;
	height:85px;
	width:175px;
	margin:7px 0 0 42px;
	overflow:hidden;
	}
#all #bgleftbanner #topleftbanner03{
	position:relative;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/left_banner.gif) no-repeat;
	height:52px;
	width:175px;
	margin:7px 0 0 42px;
	overflow:hidden;
	}
#all #bgleftbanner #topleftbanner04{
	position:relative;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/left_banner1.gif) no-repeat;
	height:52px;
	width:175px;
	margin:7px 0 0 42px;
	overflow:hidden;
	}


/*top rightbanner*/
#all #bgrightbanner{
	position:absolute;
	top:364px;
	left:759px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/bg_rightbanner.jpg) no-repeat;
	height:573px;
	width:245px;
	}
	
#all #bgrightbanner #toprightbanner01{
	position:relative;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/right_banner1.gif) no-repeat;
	height:106px;
	width:173px;
	margin:62px 0 0 24px;
	overflow:hidden;
	}
#all #bgrightbanner #toprightbanner02{
	position:relative;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/right_banner2.gif) no-repeat;
	height:106px;
	width:173px;
	margin:7px 0 0 24px;
	overflow:hidden;
	}
#all #bgrightbanner #toprightbanner03{
	position:relative;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/right_banner3.gif) no-repeat;
	height:61px;
	width:173px;
	margin:7px 0 0 24px;
	overflow:hidden;
	}
#all #bgrightbanner #toprightbanner04{
	position:relative;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/right_banner4.gif) no-repeat;
	height:61px;
	width:173px;
	margin:7px 0 0 24px;
	overflow:hidden;
	}
#all #bgrightbanner #toprightbanner05{
	position:relative;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/right_banner5.gif) no-repeat;
	height:57px;
	width:173px;
	margin:7px 0 0 24px;
	overflow:hidden;
	}

	
/*top center*/
#all #topcenter{
	position:absolute;
	top:364px;
	left:222px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/bg_topcenter_.jpg) no-repeat;
	height:573px;
	width:537px;
	}
/*top main flash*/
#all #mainflash{
	position:absolute;
	top:0px;
	left:222px;
	height:364px;
	width:782px;
	}




	
/*top center step*/
#all #topcenter #stepspace{
	position:absolute;
	top:0px;
	left:22px;
	height:81px;
	width:515px;
	}
	
#all #topcenter #stepspace #step01{
	position:absolute;
	top:12px;
	left:7px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/step1_off_.gif) no-repeat;
	height:55px;
	width:112px;
	overflow: hidden;
}
#all #topcenter #stepspace a:hover#step01{
	background: url(http://image.mgame.jp/new_rpg/hero5/index/step1_on_.gif) no-repeat;
}
#all #topcenter #stepspace #step02{
	position:absolute;
	top:12px;
	left:147px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/step2_off_.gif) no-repeat;
	height:55px;
	width:187px;
	overflow: hidden;
}
#all #topcenter #stepspace a:hover#step02{
	background: url(http://image.mgame.jp/new_rpg/hero5/index/step2_on_.gif) no-repeat;
}
#all #topcenter #stepspace #step03{
	position:absolute;
	top:12px;
	left:366px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/step3_off_.gif) no-repeat;
	height:55px;
	width:130px;
	overflow: hidden;
}
#all #topcenter #stepspace a:hover#step03{
	background: url(http://image.mgame.jp/new_rpg/hero5/index/step3_on_.gif) no-repeat;
}

/*top center newsspace*/
#all #topcenter #newsspace{
	position:absolute;
	top:99px;
	left:24px;
	height:191px;
	width:321px;
}

#all #topcenter #newsspace .title{ 
	position:absolute;
	top:5px;
	left:0;
	height:17px;
	width:318px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/tit_news.gif) no-repeat;
}
#all #topcenter #newsspace .title .more{ 
	position:absolute;
	top:5px;
	left:270px;
	height:11px;
	width:44px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/bt_more.gif) no-repeat;
}

#all #topcenter #newsspace #newsmenu{ 
	position:absolute;
	top:30px;
	left:0;
	height:21px;
	width:318px;
}

#all #topcenter #newsspace #newsmenu #newstab01{
	position:absolute;
	top:0;
	left:3px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/tab_all_off.gif) no-repeat;
	height:21px;
	width:74px;
	overflow: hidden;
}
#all #topcenter #newsspace #newsmenu a:hover#newstab01{
	background: url(http://image.mgame.jp/new_rpg/hero5/index/tab_all_on.gif) no-repeat;
}
#all #topcenter #newsspace #newsmenu #newstab02{
	position:absolute;
	top:0;
	left:81px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/tab_news_off.gif) no-repeat;
	height:21px;
	width:74px;
	overflow: hidden;
}
#all #topcenter #newsspace #newsmenu a:hover#newstab02{
	background: url(http://image.mgame.jp/new_rpg/hero5/index/tab_news_on.gif) no-repeat;
}
#all #topcenter #newsspace #newsmenu #newstab03{
	position:absolute;
	top:0;
	left:159px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/tab_event_off.gif) no-repeat;
	height:21px;
	width:74px;
	overflow: hidden;
}
#all #topcenter #newsspace #newsmenu a:hover#newstab03{
	background: url(http://image.mgame.jp/new_rpg/hero5/index/tab_event_on.gif) no-repeat;
}
#all #topcenter #newsspace #newsmenu #newstab04{
	position:absolute;
	top:0;
	left:237px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/tab_maintenance_off.gif) no-repeat;
	height:21px;
	width:74px;
	overflow: hidden;
}
#all #topcenter #newsspace #newsmenu a:hover#newstab04{
	background: url(http://image.mgame.jp/new_rpg/hero5/index/tab_maintenance_on.gif) no-repeat;
}

#all #topcenter #newsspace #newsdata{
	position:absolute;
	top:60px;
	left:4px;;
	height:130px;
	width:317px;
	line-height:18px;
}

#all #topcenter #newsspace #newsdata div{
	position:relative;
	width:321px;
	
}
#all #topcenter #newsspace #newsdata div a{
	position:absolute;
	top:0;
	left:40px;
	width:271px;
	text-indent:70px;
}
#all #topcenter #newsspace #newsdata div a.event{
	background: url(http://image.mgame.jp/new_rpg/hero5/index/icon_event.gif) no-repeat;
	background-position:0 3px;
}#all #topcenter #newsspace #newsdata div a.mainte{
	background: url(http://image.mgame.jp/new_rpg/hero5/index/icon_maintenance.gif) no-repeat;
	background-position:0 3px;
}
#all #topcenter #newsspace #newsdata div a.info{
	background: url(http://image.mgame.jp/new_rpg/hero5/index/icon_news.gif) no-repeat;
	background-position:0 3px;
}




/*top center communityspace*/
#all #topcenter #communityspace{
	position:absolute;
	top:290px;
	left:24px;
	height:95px;
	width:321px;
}

#all #topcenter #communityspace .title{ 
	position:absolute;
	top:5px;
	left:0;
	height:17px;
	width:318px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/tit_commu.gif) no-repeat;
}
#all #topcenter #communityspace .title .more{ 
	position:absolute;
	top:5px;
	left:270px;
	height:11px;
	width:44px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/bt_more.gif) no-repeat;
}
#all #topcenter #communityspace #communitydata{
	position:absolute;
	top:32px;
	left:4px;;
	height:59px;
	width:317px;
	line-height:18px;
}
#all #topcenter #communityspace #communitydata div{
	position:relative;
	width:321px;
	
}
#all #topcenter #communityspace #communitydata div a{
	position:absolute;
	top:0;
	left:40px;
	width:271px;
}

/*top center infospace*/
#all #topcenter #infospace{
	position:absolute;
	top:99px;
	left:346px;
	height:287px;
	width:191px;
}
#all #topcenter #infospace #info01{
	position:absolute;
	top:5px;
	left:7px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/center_banner_1_txt.gif) no-repeat;
	height:69px;
	width:184px;
	overflow: hidden;
}
#all #topcenter #infospace #info01 .txt{
	position:absolute;
	top:38px;
	left:15px;
}
#all #topcenter #infospace #info02{
	position:absolute;
	top:85px;
	left:7px;
	background: url(http://image.mgame.jp/new_rpg/hero5/index/center_banner_2.gif) no-repeat;
	height:186px;
	width:184px;
	padding-left:50px;
}

/*top center ssspace*/
#all #topcenter #ssspace{
	position:absolute;
	top:389px;
	left:24px;
	height:140px;
	width:508px;
}
#all #topcenter #ssspace #ss01{
	position:absolute;
	top:15px;
	left:17px;
	height:120px;
	width:146px;
}
#all #topcenter #ssspace #ss02{
	position:absolute;
	top:15px;
	left:184px;
	height:120px;
	width:146px;
}
#all #topcenter #ssspace #ss03{
	position:absolute;
	top:15px;
	left:350px;
	height:120px;
	width:146px;
}
#all #topcenter #ssspace #ss01 div,
#all #topcenter #ssspace #ss02 div,
#all #topcenter #ssspace #ss03 div{
	position:absolute;
	text-align:center;
	top:103px;
	left:3px;
	height:18px;
	width:146px;
	overflow:hidden;
}


/*top footer*/
#all #topfooter{
	position:absolute;
	top:937px;
	left:0px;
	height:164px;
	width:1004px;
	background: url(http://image.mgame.jp/new_rpg/hero5/common/mgame_logo.gif) no-repeat;
	background-position:280px 74px;
}