﻿img{border-style:none;}

h1{ 
 font-size:100%;
 margin:0px;
 color:#fff;
 font-family:'MS Pゴシック';
 display:inline;
}
.fstr1{ 
 font-size:25px;
 margin:0px;
 font-weight:bold;
 color:#0000a7;
 font-family:'Trebuchet MS';
}


h2{ 
 font-size:90%;
 margin:0px;
 color:#555;
 font-family:'Platino Linotype';
 text-align:center;
}
h3{ 
 font-size:14px;
 margin:0px;
 font-family:'Trebuchet MS';
}



button{ cursor: pointer; }
label{ cursor: pointer; }

/* レイアウト*/
body{
    margin:0px;
    padding:0px;
    color:#525252;
    font-family:'arial';
}

pre{margin:0px;}

/* ヘッダ <現在不使用>*/
#head{
    height:auto;
    width:1000px;
    background-color:#fff;
}
/* ラッパー*/
#wrap{
    /*border: 7px solid #0f0;*/
    position:relative;
    width:100%;
    height:auto;
    background-color:#fff;
    margin:0;
    background-repeat: no-repeat;
}


/* ページ最上部 menu */
#toptitle {
  width: 100%;
  background-color: #56B51E;
  height: 32px;
  line-height: 32px;
  margin: 0;
  overflow: hidden; /* floatのはみ出し対策 */
}

#toptitle_l {
  width: 15%;
  height: 32px;
  float: left;
  background-color: #56B51E;
  margin-left: 15px;
  text-align: left;
}

#toptitle_r {
  width: 80%;
  height: 32px;
  float: right;
  background-color: #56B51E;
  text-align: left;
  margin-right: 15px;
}
#toptitle_b{
 width:100%;
 background-color:#ececec;
 border-bottom:1px solid #ccc;
 height:15px;
 margin:0;
}

/*メイン部分*/
#center{
    /*border: 1px solid #f0f;*/
    /*float:left; 不要,あるとﾚｲｱｳﾄが崩れる*/
    width:auto;
    height:auto;
    margin-left: 230px; /* 左側にカテゴリ部分とそのマージン分のマージンをとる */
    /*background-color:#fff;*/

}
/* カテゴリ部分 */
#right{
    /*border: 1px solid #f00;*/
    /*background-color:#aaff55;*/
    float:left;
    width:200px;
    height:auto;
    margin-left:26px;
    display: inline; /*ie5,6のmarginが2倍になってしまうバグへの対策*/
}
/* フッター*/
#foot{
    /*border: 1px solid #008;*/
    width:1000px;
    height:auto;
    background-color:#fff;
    text-align:center;
    color:#555;
    clear:both;
}


#foottitle_b{
 width:100%;
 background-color:#ececec;
 height:15px;
 margin:0;
}
/* ページ最下部 menu */
#foottitle{
 width:100%;
 background-color:#56B51E;
 height:92px;
 line-height:32px;/*縦方向中央揃えのため*/
 /*border: 1px solid #eee;*/
 margin:0;
 clear:both;
}
#foottitle_l{
 width:300px;
 height:92px;
 float:left;
 background-color:#56B51E;
 text-align:center
}
#foottitle_r{
 width:100%;
 height:92px;
 margin-left: 300px;
 background-color:#56B51E;
 text-align:left;
}



/* ページタイトル部分 */
.center_in_title{
   width:600px;
   height:auto;
   text-align:center;
}
/* 検索メニュー部分 */
.smenu{
   width:auto;
   margin:4px 0px;
}



/* 真ん中の中*/
.center_in{
   /*border: 1px solid #5f5;*/
   width:auto;
   height:auto;
   /*background-color:#e5e5e5;*/
   padding:0px 15px 0px 15px;
   text-align:left;

}

/* カテゴリの中 (カテゴリ内コンテンツの位置調整のため)*/
.right_in{
  /*border: 1px solid #000;*/
  width:180px;
  height:auto;
  text-align:left;
  margin-left:12px;
}

.menu_ti{
  width:160px;
  height:auto;
  font-weight:bold;
  border-bottom:1px solid #ccc;
  background-color:#ececec;
  font-size:68%;
  color:#000;
  text-align:center;
  letter-spacing: 0.1em;
}


/* 言語設定 部分 */
.header_lang{
   width:570px;
   height:auto;
   text-align:right;
}


/* form上部 */
#form_ue{
 width:100%;
 height:72px;
 background-color:#fff;
 padding:3px 0px 0px;
}
#form_ue_l{
 width:20%;
 height:72px;
 float:left;
}
#form_ue_r{
 width:80%;
 height:72px;
 padding:0px 0px 0px 10px;
 margin-left:90px; /* form_ue_lのwidth分のmargin */
}




/* ------ ｻｲﾄの説明部分を囲む(index.htmlで使用) ----- */
.index_setumei2{
   width:660px;
   border: 1px solid #00f;
   text-align:left;
   font-size:80%;
   line-height:130%;
}
.leftyose{
  width:660px;
  text-align:left;
}


/* ------ ｻｲﾄの説明部分を囲む(index.htmlで使用) ----- */
.index_setumei{
   width:660px;
   border: 0px solid #00f;
   text-align:left;
   font-size:90%;
}


/* ----- main.cgi説明部分 ---- */
.main_setumei{
  width:700px;
  border: 0px solid #00f;
  text-align:left;
  font-size:70%;
  color:#606060;
}

/* --- マップチェックボタン --- */
.syo_data{
	width:604px;
	height:100px;
	text-align:center;
	padding: 7px;
}

.str1{
 color:#888;
}
.str2{
 color:#606060;
}
.str3{
 font-size:30%;
}
.str4{
 font-size:80%;
 color:#222;
}
.str5{font-size:80%;}
.str6{font-size:90%;}
.str7{font-size:70%;}
.str8{font-size:60%;}
.str9{font-size:50%;}
.str10{font-size:10%;}
.str11{font-size:40%;}
.str12{font-size:20%;}
.str13{font-size:75%;}
.str14{font-size:45%;}
.str15{font-size:85%;}
.str16{font-size:65%;}
.str17{font-size:50%;}
.str18{font-size:55%;}
.str19{font-size:95%;}
.str20{font-size:30%;}
.str21{font-size:120%;}

.str30{
 color:#919191;
}
.str31{color:#a5a5a5;}
.str40{color:#777;}
.str41{color:#008000;}
.str43{color:#fff;}
.str44{color:#808080;}
.str45{color:#555;}
.str50{font-size:150%;}
.str51{font-size:130%;}

.str200{font-size:200%;}
.str250{font-size:250%;}

.bgwhite{
 background-color:#fff;
}
.bgglay{
 background-color:#eee;
}
.bgglay2{
 background-color:#ccc;
}

.mstr1{
  font-size:160%;
  font-weight:800;
  color:#606060;
}
.mstr2{
  font-size:130%;
  color:#606060;
}


/* --waku-- */
.bwaku{
 width:95%;
 height:auto;
 text-align:right;
/* border: 1px solid #f0f;*/
}


/* *** 上に戻る *** */
.ret_ue{
  width: 628px;
  font:normal 100  14px 'MSｺﾞｼｯｸ';
  color:#777;
  text-align:center;
}

/* *** ｺﾋﾟｰﾗｲﾄ *** */
.copyr{
  width: 628px;
  height:auto;
  font:normal 100  13px 'MSｺﾞｼｯｸ';
  color:#777;
  text-align:center;
}

/* 右メニューのカテゴリの文字 */
.gray{
  color:#828282;
  font-size:80%;
  font-weight:bold;
}
/* 右メニューのlinkの先頭に表示するポイント*/
.min1{
  font-size:50%;  
  color:#0010d0;
}
/* 更新情報 */
.upd{
  font-size:80%;
  color:#606060;
  text-align:left;
}

/* ad 728*90 */
.ad728out{
 width:728px;
 height:130px;
}
.ad728in{
 width:728px;
 height:90px;
 position:relative; top:8px; /*垂直方向のmarginは相殺があるため使用しない*/
}
/* ad 160*600 */
.ad160in{
 width:160px;
 height:600px;
 text-align:center;
}
/* ad 300*250 */
.ad300in{
  width:300px;
  height:250px;
  margin-top:5px;
  margin-bottom:5px;
}
/* ad 336*280 */
.ad336in{
  width:338px;
  /*height:280px;*/
  height:auto;
  margin-top:5px;
  margin-bottom:5px;
}
.kth{
 text-align:center;
}
.delptn1{
background-color:#d5d5d5;
}
.delptn2{
background-color:#d5d5d5;
}
.delptn2b{
background-color:#cccccc;
}

a.topmenu{/*リンク文字*/
    color:#ffffff;
    font-style:normal;
    text-decoration:underline;
}
a:link.topmenu{/*未訪問*/
    color:#ffffff;
    font-style:normal;
    text-decoration:underline;
}
a:visited.topmenu{/*訪問後*/
    color:#ffffff;
    text-decoration:underline;
}
a:hover.topmenu{/*マウスon*/
    color:#0000cc;
    font-style:normal;
    text-decoration:underline;
}








#loading{
	border:1px dashed #888;
	padding:15px;
	position: fixed;
	top:50%;
	left:50%;
	background-color:#FFF;
	filter:alpha(opacity=85);
	-moz-opacity:0.85;
	opacity:0.85;
}
 
#loading .loadingMsg{
	text-align:center;
	padding-top:100px;
	width:100px;
	background-image:url("image/loading.gif");
	background-position: center top;
	background-repeat: no-repeat;
	font-family: 'fantasy';
	font-weight: bold;
}



/*** suggest ***/
#suggest {
	position: absolute;
	background-color: #FFFFFF;
	border: 1px solid #CCCCFF;
	font-size: 100%;
	width:300px;
	height:300px;
	overflow:auto;
}
#suggest div {
	display: block;
	width: 300px;
	overflow: hidden;
	white-space: nowrap;
}
#suggest div.select{ /* キー上下で選択した場合のスタイル */
	color: #FFFFFF;
	background-color: #3366FF;
}
#suggest div.over{ /* マウスオーバ時のスタイル */
	background-color: #99CCFF;
}

/*
.map_table{width:680px; height:452px;}
	.map_table table td{
		width:6%;
		height:5%;
	}
*/


/* 分布マップ */
.map_table {width:600px; height:440px;}

/* 同盟,王国,プレイヤ検索 各ランク部分 */
.kr_akp{ width:600px; }




/*ここからタブレット1 用（601px～800px）環境の設定
=================================================================================================*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (min-width:601px) and (max-width:800px){
	/* 分布マップ */
	.map_table  { 
		width:480px;
		height:352px;
	}
	/* マップチェックボタン */
	.syo_data{
		width:480px;
		text-align:center;
	}
	/* 同盟,王国,プレイヤ検索 各ランク部分 */
	.kr_akp{ width:480px; }

	/* メインコンテンツ */
	#center{
		width:100%;
		margin-left:0px;
	 }

	/* サイドメニュー */
	#right{ display:none; }

	/* フォームテーブル */
	.formtablewrap{ width:90%; margin:auto;}

	/* 動向データ */
	#doukou{ margin:auto; }

	/* キャンドルチャート */
	#content{ width:80%; height:auto; margin:auto; }
}

/*ここからタブレット2 用（481px～600px）環境の設定
=================================================================================================*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (min-width:481px) and (max-width:600px){
	/* 分布マップ */
	.map_table  { 
		width:480px;
		height:352px;
	}
	/* マップチェックボタン */
	.syo_data{
		width:480px;
		text-align:center;
	}
	/* 同盟,王国,プレイヤ検索 各ランク部分 */
	.kr_akp{ width:480px; }

	/* メインコンテンツ */
	#center{
		width:100%;
		margin-left:0px;
	 }

	/* サイドメニュー */
	#right{ display:none; }

	/* 動向データ */
	#doukou{ margin:auto; }

	/* フォームテーブル */
	.formtablewrap{ width:100%; }

	/* キャンドルチャート */
	#content{ width:100%; height:auto; margin:auto; }
}


/*ここからスマートフォン用（480px以下）環境の設定
=================================================================================================*/
/* 表示を切り替えるウィンドウサイズの指定 */
@media (max-width : 480px){
	.map_table  {
		width:310px;
		height:227px;
	}
	/* マップチェックボタン */
	.syo_data{
		width:310px;
		text-align:center;
	}
	/* 同盟,王国,プレイヤ検索 各ランク部分 */
	.kr_akp{ width:100%; }

	/* メインコンテンツ */
	#center{
		width:100%;
		margin-left:0px;
	 }

	/* サイドメニュー */
	#right{ display:none; }

	/* フォームテーブル */
	.formtablewrap{ width:100%; }

	/* 動向データ */
	#doukou{ margin:auto; }

	/* キャンドルチャート */
	#content{ width:80%; height:auto; margin:auto; }
}