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

.storyArea {
	width: 600px;
	margin: 30px auto;
	position: relative;
	}
	
div.gameStory {
	background: url(../img/game/bg_yellowgreen.gif) repeat-y center left;
	border-bottom: 5px solid #b2cf0e;}
	
div.gameStory .blackBox {
	clear: both;
	margin: 0 5px;
	padding-bottom: 20px;
	color: #fff;
	font-weight: bold;
	background: url(../img/game/bg_black_yellowgreen.gif) center left;}
	
div.gameStory .blackBox .storyReal {
	float: left;
	width: 280px;}
div.gameStory .blackBox .storyReal dt{
	margin-top: 10px;
	margin-left: 25px;}
div.gameStory .blackBox .storyReal dd {
	margin-left: 25px;}
	
div.gameStory .blackBox .storyBrain {
	margin-top: 10px;
	float: right;
	width: 280px;}
div.gameStory .blackBox .storyBrain .text {
	padding: 20px 20px 0 10px;}
div.gameStory .blackBox .storyPlugin {
	float: left;
	text-align: right;
	width: 284px;}
	
div.gameStory p.rockman {
	margin-right: 5px;
	height: 600px;
	position: relative;	
	background: url(../img/game/pic_story1_rockman.gif) no-repeat top right;}
div.gameStory p.rockman img {
	position: absolute;
	top: 397px;
	right: 0;}

/* game_scenario -----------------*/

/* scenarioAdd */
div.scenarioAdd {
	background: url(../img/ds/bg_blue.gif) repeat-y center left;
	border-bottom: 5px solid #009;}

div.scenarioAdd dl {
	width: 558px;
	height: 250px;
	margin: 0 auto;}
div.scenarioAdd dl dd {
	padding: 20px 10px;
	line-height: 150%;}
div.scenarioAdd dl.part1 {
	margin-top: 10px;
	background: url(../img/game/pic_scenario_add_ss1.gif) no-repeat right top;}
div.scenarioAdd dl.part2 {
	height: 210px;
	background: url(../img/game/pic_scenario_add_ss2.gif) no-repeat right top;}
div.scenarioAdd dl.part3 {
	background: url(../img/game/pic_scenario_add_ss3.gif) no-repeat right top;}
	
div.scenarioAdd dl.part1 dt {
	padding-top: 23px;}
div.scenarioAdd dl.part3 dt {
	padding-top: 23px;}
	
div.scenarioAdd h4 {
	text-align: center;}
div.scenarioAdd .blackBox {
	clear: both;
	margin: 0 5px;
	padding-bottom: 20px;
	color: #fff;
	background: url(../img/ds/bg_black_blue.gif) center left;}

/* scenario1 */
div.scenario1 {
	background: url(../img/exe/bg_story.gif) repeat-y center left;
	border-bottom: 5px solid #900;}

div.scenario1 .fireman {
	background: url(../img/game/bg_fireman.gif) no-repeat right 25px;}
	
div.scenario1 .blackBox {
	clear: both;
	margin: 0 5px;
	padding-bottom: 20px;
	background: url(../img/game/bg_black_red.gif) center left;}

/* scenario2 */
div.scenario2 {
	background: url(../img/ds/bg_green.gif) repeat-y center left;
	border-bottom: 5px solid #217e4c;}
	
div.scenario2 .numberman {
	background: url(../img/game/bg_numberman.gif) no-repeat right 25px;}
	
div.scenario2 .blackBox {
	clear: both;
	margin: 0 5px;
	padding-bottom: 20px;
	background: url(../img/ds/bg_black_green.gif) center left;}
	
	
/* scenario */
div.scenario1 h4, 
div.scenario2 h4 {
	text-align: center;
	margin-top: -35px;}
div.scenario1 .blackBox ul, 
div.scenario2 .blackBox ul {
	width: 565px;
	margin: 25px 0 0 25px;}
div.scenario1 .blackBox li.no1, 
div.scenario2 .blackBox li.no1 {
	width: 560px;}
div.scenario1 .blackBox li, 
div.scenario2 .blackBox li {
	width: 280px;
	margin-bottom: 15px;
	float: left;}
	
/* game_battle -----------------*/

/* battle */
.battle h4 {
	clear: both;
	background: url(../img/game/bg_battle_top.gif) no-repeat top center;}
.battle div {
	width: 600px;
	margin-bottom: 20px;
	background: url(../img/game/bg_battle_all.gif) top center;}
.battle dl {
	color: #fff;
	padding: 0 0 22px;
	background: #000 url(../img/game/bg_battle_btm.gif) no-repeat bottom center;}
	
.battle dl dt {
	float: left;
	padding: 20px 15px 15px 25px;
	text-align: center;
	font-size: 80%;
	background: url(../img/game/bg_battle.gif) repeat-y bottom left;}
.battle p img, 
.battle dl dt img {
	vertical-align: middle;}
.battle p, 
.battle dl dt.full {
	float: none;
	padding: 20px 15px 0;
	background: url(../img/game/bg_battle.gif) repeat-y bottom center;}
.battle dl dd {
	padding: 20px 25px 5px 0;
	height: 192px;
	line-height: 150%;
	background: url(../img/game/bg_battle.gif) repeat-y bottom right;}
.battle dl dd.full {
	padding: 15px 30px 5px;
	height: auto;
	background: url(../img/game/bg_battle.gif) repeat-y bottom center;}
	
/* powerup */
.powerup div {
	width: 600px;
	margin-bottom: 20px;
	background: url(../img/game/bg_powerup_all.gif) top center;}
.powerup dl {
	color: #fff;
	padding: 0 0 22px;
	background: url(../img/game/bg_powerup_btm.gif) no-repeat bottom center;}
.powerup dl dt {
	color: #fff;
	padding: 15px 30px 0px;
	line-height: 150%;
	background: url(../img/game/bg_powerup.gif) repeat-y bottom left;}
.powerup dl dd {
	padding: 15px 15px 5px;
	text-align: center;
	background: url(../img/game/bg_powerup.gif) repeat-y bottom right;}
.powerup dl dd img {
	vertical-align: middle;}
	
/* operatSS */
.operatSS div {
	margin-bottom: 20px;
	width: 600px;
	color: #fff;
	background: url(../img/game/bg_powerup_all.gif) top center;}
.operatSS dl {
	padding: 0 0 22px;
	background: #000 url(../img/game/bg_powerup_btm.gif) no-repeat bottom center;}
.operatSS dl dt {
	float: left;
	padding: 20px 15px 15px 25px;
	text-align: center;
	font-size: 80%;
	background: url(../img/game/bg_powerup.gif) repeat-y bottom left;}
.operatSS dl dd {
	padding: 20px 25px 5px 0;
	height: 192px;
	line-height: 150%;
	background: url(../img/game/bg_powerup.gif) repeat-y bottom right;}
.operatSS .aboutSS {
	float: none;
	width: 595px;
	margin-bottom: 0px;
	padding: 0;
	background: url(../img/game/bg_powerup.gif) repeat-y bottom left;}
	
.operatSS .aboutSS .bg {
	width: 590px;
	position: relative;
	padding-left: 0px;
	margin-bottom: 0px;
	background: url(../img/game/bg_ss_operat.jpg) no-repeat top right;}
	
.operatSS .aboutSS .system {
	padding-top: 257px;
	text-align: right;}
.operatSS .aboutSS .system img {
	margin-top: 20px;}
.operatSS .aboutSS a {
	top: 385px;
	right: 20px;
	position: absolute;}
.operatSS .attack {
	top: 200px;
	left: 0;
	position: absolute;
	text-align: center;}
.operatSS .attack img {
	margin-top: 5px;}
/* chip */
.chip {
	color: #fff;}
.chip h4 {
	clear: both;
	background: url(../img/game/bg_chip_top.gif) no-repeat top center;}
.chip div {
	width: 600px;
	margin-bottom: 20px;
	background: url(../img/game/bg_chip_all.gif) top center;}
.chip dl {
	padding: 0 0 22px;
	background: url(../img/game/bg_chip_btm.gif) no-repeat bottom center;}
.chip dl dt {
	padding: 15px 30px 0px;
	line-height: 150%;
	background: url(../img/game/bg_chip.gif) repeat-y bottom center;}
.chip dl dd {
	padding: 15px 15px 5px;
	text-align: center;
	background: url(../img/game/bg_chip.gif) repeat-y bottom center;}
.chip dl dd img {
	vertical-align: middle;}
	
.chip p {
	background: url(../img/game/bg_chip.gif) repeat-y bottom center;}
.chip ol {
	width: 600px;
	background: url(../img/game/bg_chip.gif) repeat-y bottom center;}
.chip ol {
	padding-top: 10px;}
.chip ol li {
	float: left;
	width: 250px;
	padding-left: 30px;
	height: 300px;
	text-align: center;}
.chip ol li img {
	margin: 0 auto 10px;}
.chip ol li.last {
	float: none;
	padding: 0;
	width: 600px;
	height: auto;
	clear: both;
	background: url(../img/game/bg_chip_all.gif) bottom center;}
.chip ol li.last dl {
	margin: 0 auto;
	padding: 0 0 22px;
	background: url(../img/game/bg_chip_btm.gif) no-repeat bottom center;}
.chip ol li.last dl dt {
	padding: 20px 0 0;
	text-align: center;
	background: url(../img/game/bg_chip.gif) repeat-y bottom center;}
.chip ol li.last dl dd {
	background: none;
	height: 192px;
	padding: 0 30px 5px;
	text-align: left;
	background: url(../img/game/bg_chip.gif) repeat-y bottom center;}
.chip ol li.last dl dd img {
	float: left;
	margin-right: 15px;}
	
.storyArea p {
	line-height: 150%;
	padding: 20px 25px 0;}
	
/* colosseum */
.textArea600 .colosseum div {
	width: 600px;
	margin-bottom: 20px;
	background: url(../img/game/bg_colosseum_all.gif) top center;}

.textArea600 .colosseum p {
	color: #fff;
	padding: 15px 30px 0;
	background: url(../img/game/bg_colosseum.gif) repeat-y bottom center;}

.colosseum dl {
	color: #fff;
	padding: 0 0 22px;
	background: url(../img/game/bg_colosseum_btm.gif) no-repeat bottom center;}
.colosseum dl dt {
	color: #fff;
	padding: 15px 30px 0px;
	line-height: 150%;
	background: url(../img/game/bg_colosseum.gif) repeat-y bottom center;}
.colosseum dl dd {
	padding: 15px 15px 5px;
	text-align: center;
	background: url(../img/game/bg_colosseum.gif) repeat-y bottom center;}
.colosseum dl dd img {
	vertical-align: middle;}

.colosseum dl.single {
	padding: 0 0 5px;
	background: url(../img/game/bg_colosseum.gif) repeat-y bottom center;}
.colosseum dl.last {
	padding: 0 0 22px;
	background: url(../img/game/bg_colosseum_btm.gif) no-repeat bottom center;}
.colosseum dl.none {
	background: url(../img/game/bg_colosseum.gif) repeat-y bottom center;}
.colosseum dl.single dt {
	float: left;
	clear: both;
	width: 275px;
	height: 212px;
	margin-right: 15px;
	padding: 0 0 0 30px;
	background: none;}
	
.colosseum dl.single dt img {
	margin-bottom: 5px;}
.colosseum dl.single dd {
	padding: 10px 0;
	line-height: 150%;
	text-align: left;
	background: url(../img/game/bg_colosseum.gif) repeat-y bottom center;}
	
.colosseum dl.last dt {
	height: 192px;}
.colosseum dl.last dd {
	padding-bottom: 0px;}
	
/* clockman */
div.clockman {
	background: url(../img/ds/bg_green.gif) repeat-y center left;
	border-bottom: 5px solid #217e4c;}
div.clockman .blackBox {
	clear: both;
	margin: 0 5px;
	background: url(../img/ds/bg_black_green.gif) center left;}
div.clockman .clockbg {
	width: 588px;
	margin: 0 auto;
	height: 347px;
	text-align: left;
	background: url(../img/ds/bg_clockman.gif) no-repeat center right;}
	
.blackBox dl.firsttime {
	margin: 10px auto;
	padding-bottom: 15px;
	width: 540px;
	text-align: center;
	position: relative;
	background: url(../img/ds/bg_frame_green_btm.gif) no-repeat bottom center;}
.blackBox dl.firsttime dd {
	text-align: left;
	margin: -30px 0 0 25px;}
	
div.clockman .skill1, 
div.clockman .skill2, 
div.clockman .skill3, 
div.clockman .skill4 {
	paddng-left: 260px;
	height: 220px;
	margin: 0 20px 0 35px;
	text-align: left;
	}
div.clockman .skill1 {
	margin-top: 20px;
	background: url(../img/game/pic_clock_skill1.gif) no-repeat top left;}
div.clockman .skill2 {
	background: url(../img/game/pic_clock_skill2.gif) no-repeat top left;}
div.clockman .skill3 {
	background: url(../img/game/pic_clock_skill3.gif) no-repeat top left;}
div.clockman .skill4 {
	background: url(../img/game/pic_clock_skill4.gif) no-repeat top left;}
div.clockman .skill1 dt,
div.clockman .skill2 dt,
div.clockman .skill3 dt,
div.clockman .skill4 dt {
	padding-left: 260px;}
div.clockman .skill1 dd, 
div.clockman .skill2 dd, 
div.clockman .skill3 dd, 
div.clockman .skill4 dd {
	color: #fff;
	line-height: 150%;
	padding: 15px 0 0 280px;}
ul.gameNavi {
	text-align: center;
	margin: 0 auto 20px;}
ul.gameNavi li {
	display: inline;
	padding: 0 5px;
	font-weight: bold;
	border-right: 1px solid #6CBBD3;}
ul.gameNavi li a {
	font-weight: normal;
	}
ul.gameNavi li.start {
	border-left: 1px solid #6CBBD3;}
/* gameMenu -----------------*/
	
#gameMenu h3 {
	width: 610px;
	padding-top: 20px;
	margin: 0 auto;}
#gameMenu .menuBox {
	width: 610px;
	margin: 0 auto;
	background: url(../img/game/bg_menu.gif) repeat-y top right;}
#gameMenu .colosseum {
	background: url(../img/game/bg_menu_colosseum.gif) repeat-y top right;}
#gameMenu .pv {
	background: url(../img/game/bg_menu_pv.gif) repeat-y top right;}
	
#gameMenu h3#pvTtl {
	height: 37px;
	color: #000;
	padding: 0;
	font-size: 14px;
	font-weight: bold;
	text-align: left;
	line-height: 32px;
	text-indent: 50px;
	margin-top: 20px;
	background: url(../img/game/bg_pv_title.gif) no-repeat top right;}
#gameMenu .pv p.attention {
	font-size: 9px;
	text-align: left;
	padding: 10px 20px 5px 30px;
	color: #fff;}
#gameMenu .pv p.movieFla {
	width: 600px;
	padding: 20px 2px 20px 8px;
	}
#gameMenu .menuBox p {
	text-align: right;
	clear: both;}
#gameMenu .menuBox ul {
	padding: 0 0 0 30px;}
#gameMenu li {
	float: left;
	width: 284px;
	height: 84px;}
#gameMenu li a {
	display: block;
	position: relative;
	padding-left: 100px;
	margin-right: 10px;
	height: 74px;
	text-align: left;
	color: #FF0;
	font-size: 80%;
	text-decoration: none;
	background: url(../img/game/btn_game_menu.gif) no-repeat top left;}
#gameMenu li a:hover {
	text-decoration: underline;
	background: url(../img/game/btn_game_menu_r.gif) no-repeat top left;}
#gameMenu li img {
	position: absolute;
	left: 7px;
	top: 7px;}
#gameMenu li img.png {
	position: absolute;
	right: 3px;
	left: auto;
	top: -5px;}
#gameMenu li strong {
	display: block;
	padding: 20px 0 3px;
	font-size: 120%;}
#gameMenu .pv li strong {
	padding: 15px 0 3px;
	line-height: 15px;
	font-size: 100%;}
#gameMenu li.single strong {
	display: block;
	padding: 30px 0 0;}