@charset "Shift_JIS";


/* INFORMATION =======================================================

	Regu.Ver.		: v1.3
	First-Author	: C Kato
	Last-Author	: Y Hatano
	Last-Update	: 2007/1/16
	About-This	: C21　テンプレート

----------------------------------------------------------------------

	共通設定
	ハンゲーム用簡易フッターを画面の下に表示するための設定
	ハンゲーム簡易ヘッダーの設定
	ヘッダーの設定
	グローバルナビゲーションの設定
	contentsの設定 
	extraの設定
	mainの設定
	
======================================================= INFORMATION */




/* 共通設定
------------------------------------------*/

#bg_body {
	background: #000 url(//images.hange.jp/_images/game/c21/common/bg_body.jpg) repeat-x 0 50px;
}
#container {
	background: url(//images.hange.jp/_images/game/c21/common/bg_container.jpg) repeat-y ;
}
#wrapper {
	background: url(//images.hange.jp/_images/game/c21/common/bg_wrapper.jpg) no-repeat 0 250px;
}

/*↓20090409まで使用したid*/
#game_header {
background: url(//images.hange.jp/_images/game/c21/common/bg_game_header.jpg) no-repeat 0 0;
}
/*↑20090409まで使用したid*/

/*↓20090410から使用するid*/
#game_header_new {
background: url(//images.hange.jp/_images/game/c21/common/bg_game_header_new.jpg) no-repeat 0 0;
}
/*↑20090410から使用するid*/

#globalnavi {
}
#extra {
	background: url(//images.hange.jp/_images/game/c21/common/bg_extra.jpg) no-repeat 0 0;
}
#main {
}


ul, ol {
	list-style: none;
}



/* ハンゲーム用簡易フッターを画面の下に表示するための設定
------------------------------------------*/

html,
body {
	height: 100%;
}

div#container {
	width: 100%;
	margin: 0;
	position: relative;
}
/* for WinIE5.0〜6.0 */
* html div#container {
	height: 100%;
}
/* for Firefox & IE7.0rc1 */
	body > #container {
	height: auto;
	min-height: 100%;
}

/* ハンゲーム用簡易フッターの高さを指定 */
div#wrapper {
	padding-bottom: 60px;
}

/* ハンゲーム用簡易フッター */
#hg_footer {
	position:absolute;
	bottom: -1px;
	width: 100%;
	height: 61px;
	background-color: #fff;
}



/* ハンゲーム簡易ヘッダーの設定 
---------------------------------------*/

#hg_header {
	width: 100%;
}



/* ゲームヘッダーの設定 
---------------------------------------*/
/*↓20090409まで使用したid*/
#game_header {
	position: relative;
	height: 200px;
}

/*↑20090409まで使用したid*/

/*↓20090410から使用するid*/
#game_header_new {
	position: relative;
	height: 195px;
}
/*↑20090410から使用するid*/

/* ロゴからトップページへのリンク */
h1 a {
	position: absolute;
	width: 300px;
	height: 160px;
	top: 0px;
	left: 0px;
	text-indent: -99em;
}


/* ゲームスタートボタン */
#btn_start a {
	position: absolute;
	width: 185px;
	height: 185px;
	top: 9px;
	left: 621px;
	background: url(//images.hange.jp/_images/game/c21/common/btn_start.jpg) no-repeat 0 -185px;
	text-indent: -99em;
}
#btn_start a:hover {
	background: url(//images.hange.jp/_images/game/c21/common/btn_start.jpg) no-repeat 0 0;
}



/* グローバルナビゲーションの設定 
---------------------------------------*/

/* globalNavi
------------------------------ */
#globalNavi{
position: relative;
z-index: 90;
width: 790px;
height: 60px;
}
#globalNavi ul li a{
display: block;
width: inherit;
height: inherit;
text-indent: -10000px;
}
#globalNavi:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }

.main_menu li {
  width: 158px; 
  height: 38px;
  font-size: 0;
}
.main_menu_introduction{
  background: url("//images.hange.jp/_images/game/c21/common/off_about.png") 10% 50% no-repeat;
}
.main_menu_playguide{
  background: url("//images.hange.jp/_images/game/c21/common/off_play-guide.png") 18% 50% no-repeat;
}
.main_menu_community{
  background: url("//images.hange.jp/_images/game/c21/common/off_community.png") 11% 80% no-repeat;
}
.main_menu_shop{
  background: url("//images.hange.jp/_images/game/c21/common/off_shop.png") 40% 50% no-repeat;
}
.main_menu_support{
  background: url("//images.hange.jp/_images/game/c21/common/off_support.png") 41% 50% no-repeat;
}

.main_menu_introduction:hover{
  background: url("//images.hange.jp/_images/game/c21/common/on_about.png") 0% 50% no-repeat;
}
.main_menu_playguide:hover{
  background: url("//images.hange.jp/_images/game/c21/common/on_play-guide.png") 16% 50% no-repeat;
}
.main_menu_community:hover{
  background: url("//images.hange.jp/_images/game/c21/common/on_community.png") 10% 50% no-repeat;
}
.main_menu_shop:hover{
  background: url("//images.hange.jp/_images/game/c21/common/on_shop.png") 40% 50% no-repeat;
}
.main_menu_support:hover{
  background: url("//images.hange.jp/_images/game/c21/common/on_support.png") 40% 50% no-repeat;
}

#globalNavi .sub_menu{
  position: relative;
  top: -5px;
  width: 786px;
  margin: 0 0 0 4px;
  clear: both;
  display: none;
  background: url("//images.hange.jp/_images/game/c21/common/submenu_bg.png") no-repeat 0 0;
}
#globalNavi .sub_menu div{
  height: 25px;
  text-indent: -10000px;
  display: inline-block;
  overflow: hidden;
}
#globalNavi .sub_menu a{
  display: block;
  width: inherit;
  height: inherit;
}
#globalNavi .sub_menu_playguide {
  width: 733px;
  padding-left: 63px;
}
#globalNavi .sub_menu_community{
  text-align: center;
}
#globalNavi .sub_menu_shop{
  width: 476px;
  padding-left: 310px;
}
#globalNavi .sub_menu_support{
  text-align: right;
}

.sub_menu_introduction_1{
  width: 124px; 
  background: url("//images.hange.jp/_images/game/c21/common/about_1_off.png") 50% 50% no-repeat;
}
.sub_menu_introduction_1:hover{
  background: url("//images.hange.jp/_images/game/c21/common/about_1_on.png") 50% 50% no-repeat;
}
.sub_menu_introduction_2{
  width: 103px; 
  background: url("//images.hange.jp/_images/game/c21/common/about_2_off.png") 50% 50% no-repeat;
}
.sub_menu_introduction_2:hover{
  background: url("//images.hange.jp/_images/game/c21/common/about_2_on.png") 50% 50% no-repeat;
}
.sub_menu_playguide_1{
  width: 124px; 
  background: url("//images.hange.jp/_images/game/c21/common/play-guide_1_off.png") 50% 50% no-repeat;
}
.sub_menu_playguide_2{
  width: 86px; 
  background: url("//images.hange.jp/_images/game/c21/common/play-guide_2_off.png") 50% 50% no-repeat;
}
.sub_menu_playguide_3{
  width: 130px; 
  background: url("//images.hange.jp/_images/game/c21/common/play-guide_3_off.png") 50% 50% no-repeat;
}
.sub_menu_playguide_4{
  width: 176px; 
  background: url("//images.hange.jp/_images/game/c21/common/play-guide_4_off.png") 50% 50% no-repeat;
}
.sub_menu_playguide_5{
  width: 139px; 
  background: url("//images.hange.jp/_images/game/c21/common/play-guide_5_off.png") 50% 50% no-repeat;
}
.sub_menu_playguide_1:hover{
  background: url("//images.hange.jp/_images/game/c21/common/play-guide_1_on.png") 50% 50% no-repeat;
}
.sub_menu_playguide_2:hover{
  background: url("//images.hange.jp/_images/game/c21/common/play-guide_2_on.png") 50% 50% no-repeat;
}
.sub_menu_playguide_3:hover{
  background: url("//images.hange.jp/_images/game/c21/common/play-guide_3_on.png") 50% 50% no-repeat;
}
.sub_menu_playguide_4:hover{
  background: url("//images.hange.jp/_images/game/c21/common/play-guide_4_on.png") 50% 50% no-repeat;
}
.sub_menu_playguide_5:hover{
  background: url("//images.hange.jp/_images/game/c21/common/play-guide_5_on.png") 50% 50% no-repeat;
}
.sub_menu_community_1{
  width: 125px; 
  background: url("//images.hange.jp/_images/game/c21/common/community_1_off.png") 50% 50% no-repeat;
}
.sub_menu_community_2{
  width: 113px; 
  background: url("//images.hange.jp/_images/game/c21/common/community_2_off.png") 50% 50% no-repeat;
}
.sub_menu_community_1:hover{
  background: url("//images.hange.jp/_images/game/c21/common/community_1_on.png") 50% 50% no-repeat;
}
.sub_menu_community_2:hover{
  background: url("//images.hange.jp/_images/game/c21/common/community_2_on.png") 50% 50% no-repeat;
}
.sub_menu_shop_1{
  width: 101px; 
  background: url("//images.hange.jp/_images/game/c21/common/shop_1_off.png") 50% 50% no-repeat;
}
.sub_menu_shop_2{
  width: 124px; 
  background: url("//images.hange.jp/_images/game/c21/common/shop_2_off.png") 50% 50% no-repeat;
}
.sub_menu_shop_3{
  width: 97px; 
  background: url("//images.hange.jp/_images/game/c21/common/shop_3_off.png") 50% 50% no-repeat;
}
.sub_menu_shop_4{
  width: 133px; 
  background: url("//images.hange.jp/_images/game/c21/common/shop_4_off.png") 50% 50% no-repeat;
}
.sub_menu_shop_1:hover{
  background: url("//images.hange.jp/_images/game/c21/common/shop_1_on.png") 50% 50% no-repeat;
}
.sub_menu_shop_2:hover{
  background: url("//images.hange.jp/_images/game/c21/common/shop_2_on.png") 50% 50% no-repeat;
}
.sub_menu_shop_3:hover{
  background: url("//images.hange.jp/_images/game/c21/common/shop_3_on.png") 50% 50% no-repeat;
}
.sub_menu_shop_4:hover{
  background: url("//images.hange.jp/_images/game/c21/common/shop_4_on.png") 50% 50% no-repeat;
}
.sub_menu_support_1{
  width: 153px; 
  background: url("//images.hange.jp/_images/game/c21/common/support_1_off.png") 50% 50% no-repeat;
}
.sub_menu_support_2{
  width: 154px; 
  background: url("//images.hange.jp/_images/game/c21/common/support_2_off.png") 50% 50% no-repeat;
}
.sub_menu_support_3{
  width: 86px; 
  background: url("//images.hange.jp/_images/game/c21/common/support_3_off.png") 50% 50% no-repeat;
}
.sub_menu_support_4{
  width: 100px; 
  background: url("//images.hange.jp/_images/game/c21/common/support_4_off.png") 50% 50% no-repeat;
}
.sub_menu_support_1:hover{ 
  background: url("//images.hange.jp/_images/game/c21/common/support_1_on.png") 50% 50% no-repeat;
}
.sub_menu_support_2:hover{ 
  background: url("//images.hange.jp/_images/game/c21/common/support_2_on.png") 50% 50% no-repeat;
}
.sub_menu_support_3:hover{ 
  background: url("//images.hange.jp/_images/game/c21/common/support_3_on.png") 50% 50% no-repeat;
}
.sub_menu_support_4:hover{ 
  background: url("//images.hange.jp/_images/game/c21/common/support_4_on.png") 50% 50% no-repeat;
}

#globalNavi ul{
  width: 790px;
}
#globalNavi ul:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
#globalNavi li{
  float: left;
}



/* contentsの設定 
---------------------------------------*/

#contents {
	width: 790px;
}



/* extraの設定
---------------------------------------*/

#extra {
	float: left;
	width: 190px;
}

/* ログインパネル */
#login {
	margin: 7px 7px 10px;
	padding: 3px;
	background: #084a72;
}

/* ボタン */
#extra-btn {
	text-indent: -99em;
	margin-left: 11px;
}
#extra-btn a {
	display: block;
	width: 170px;
}

/* 初心者向けリンクボタン */
#extra-btn #beginner a {
	height: 80px;
	background: url(//images.hange.jp/_images/game/c21/common/btn_extra01.jpg) no-repeat 0 -80px;
	margin-bottom: 10px;
}
#extra-btn #beginner a:hover {
	background: url(//images.hange.jp/_images/game/c21/common/btn_extra01.jpg) no-repeat 0 0;
}

/* ダウンロードボタン */
#extra-btn #download a {
	height: 49px;
	background: url(//images.hange.jp/_images/game/c21/common/btn_extra02.jpg) no-repeat 0 -49px;
	margin-bottom: 6px;
}
#extra-btn #download a:hover {
	background: url(//images.hange.jp/_images/game/c21/common/btn_extra02.jpg) no-repeat 0 0;
}

/* 利用規約ボタン */
#extra-btn #rule a {
	height: 49px;
	background: url(//images.hange.jp/_images/game/c21/common/btn_extra03.jpg) no-repeat 0 -49px;
}
#extra-btn #rule a:hover {
	background: url(//images.hange.jp/_images/game/c21/common/btn_extra03.jpg) no-repeat 0 0;
}


/* テキスト情報 */
#extra-txt {
	margin: 16px 0 0 22px;
	line-height: 1;
}
#extra-txt a{
	color: #fff;
}
#extra-txt li {
	color: #fff;
	font-size: 11px;
}

#extra-txt li.copylight {
	padding-top: 15px;
}

/* maintenance
------------------------------ */
dl.mainte{
position: relative;
margin:15px 0 0 18px;
padding: 5px;
width:138px;
color:#ccc;
background:#00293b;
}

.mainte dt{
color:#FFF;
font-weight:bold;
font-size:12px;
text-align:center;
margin:3px 0;
}

.mainte dd.orange{
color: #ffcc00;
font-size:12px;
text-align:center;
margin-bottom:10px;
}



/* フラッシュプラグイン表記 */
#flashplayer {
	margin: 10px 15px;
}

#flashplayer a {
	display: block;
	width: 155px;
	height: 50px;
	background: url(//images.hange.jp/_images/game/c21/common/bg_flashplayer.gif) no-repeat 0 0;
	text-indent: -99em;
}


/* メンテナンス情報 */
#mainte {
	margin: 15px 18px;
	width: 150px;
	height: 80px;
	background: url(//images.hange.jp/_images/game/c21/common/btn_mainte.gif) no-repeat;
}
#mainte p {
	text-indent: -99em;
}

/* modify 080228 メンテナンス情報  */
#regularMainte{
	margin: 15px 18px;
	width: 150px;
	height: 80px;
}

/* addition 080228 for windows Vista Button*/
#useVistaBtn{
margin: 15px 0 0 17px;


}


/* mainの設定
---------------------------------------*/
#main {
	float: right;
	width: 600px;
	margin: 11px auto 0;
	padding-bottom: 30px;
}

.subTtl{
margin-top: 5px;
}

/* soming soonの設定
---------------------------------------*/
.comingSoon{
width: 560px;
margin: 15px auto 0;
}