img{border-style:none;}

/*index table*/
.idx td, .idx th{
padding: 8px 10px;
}
.idx th{
font-weight:normal;
background-color:#f2f2f2;
}

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';
    font-size: 115%; /* 全体の文字サイズはここで調整 */
}

/* 線 */
.hr01 {
	width: 90%;
	border: 1px solid #ccc;
}

pre{margin:0px;}


/* ラッパー*/
#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:auto;
 margin-left:10px;
 margin:0;
}

#toptitle_b{
 width:100%;
 background-color:#ececec;
 border-bottom:1px solid #ccc;
 height:2px;
 margin:0;
}


/*メイン部分*/
#center{
    /*border: 1px solid #f0f;*/
    /*float:left; 不要,あるとﾚｲｱｳﾄが崩れる*/
    width:100%;
    height:auto;
    /*margin-left: 230px;*/ /* 左側にカテゴリ部分とそのマージン分のマージンをとる */
    /*background-color:#fff;*/

}
/* カテゴリ部分 */
#right{
    /*border: 1px solid #f00;*/
    /*background-color:#aaff55;*/
    float:left;
    width:200px;
    height:100%;
    margin-left:26px;
}
#foottitle_b{
 width:100%;
 background-color:#ececec;
 height:15px;
 margin-top:30px;
}
/* フッター*/
#foot{
    width:100%;
    height:92px;
    background-color:#56B51E;
    text-align:center;
    padding-top:60px;
    color:#555;
}


/* 真ん中の中*/
.center_in{
   /*border: 3px solid #5f5;*/
   width:100%;
   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:auto;
 padding:3px 0px 0px;

 display: flex;
 justify-content: center; /* 主軸 中央寄せ */
 align-items: center; /* 交差軸 中央寄せ */

}
#form_ue_l{
 padding:5px 15px;
}
#form_ue_r{}

/* コンテンツ上部のフォーム、検索結果表示テーブル 枠 */
#m_con{
 width:100%;
 margin:20px auto 0px;
 text-align: center; /* inline-blockとなったm_con_topを中央寄せするため */
}

#m_con_top{
 display: flex;
 flex-direction: column; /* 縦並び */
 align-items: center; /* 中央寄せ */

 display:inline-block;  /* m_con_topブロックの幅をコンテンツ分に収縮させるため */
 width: auto;
 
}

#m_con_tbl{	/* メインコンテンツのテーブル一つとページインデックス部分の枠 */
	width:100%;
	display: flex;
	flex-direction: column; /* 縦並び */
	align-items: center; /* 中央寄せ */
	font-size: 110%;
	/*padding: 0 18px 0 3px;*/
}

#lupd_fbutton{
 display: flex;
 justify-content: space-around; /* 横軸 均等配置 */
 align-items: center; /* 縦軸 中央寄せ */

 margin-top:5px;
}
#ramp_ch{	/* ランプチェックbox */
 display: flex;
 align-items: center;
 justify-content: space-around;
}
#syu_ch{	/* 種族チェックbox */
 display: flex;
 align-items: center;
 justify-content: space-around;
 flex-wrap: wrap;
}
#zahyou_box{	/* 座標テキストbox */
 display: flex;
 justify-content: flex-start;
 margin:0 5px;
}
#zahyou_box2{	/* 座標テキストbox 範囲検索*/
 display: flex;
 justify-content: space-around;
 margin:0 5px 10px 5px;
}
#pop_box{
 display: flex;
 justify-content: space-around;
 margin:0 5px 10px 5px;
}

/* ------ ｻｲﾄの説明部分を囲む(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;
   text-align:center;
}

.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%;}

.str30{
 color:#919191;
}
.str31{color:#a5a5a5;}
.str40{color:#777;}
.str41{color:#008000;}
.str43{color:#fff;}
.str50{font-size:150%;}
.str51{font-size:130%;}
.bgwhite{
 background-color:#fff;
}
.bgglay{
 background-color:#eee;
}
.bgglay2{
 background-color:#ccc;
}
.bgglay3{
 background-color:#7f7f7f;
}
.ud_margin{
	margin:3px 0;
}

.mstr1{
  font-size:160%;
  font-weight:800;
  color:#606060;
}
.mstr2{
  font-size:130%;
  color:#606060;
}

.fade_line {
  height: 2px;
  $color: #acacac;
  color: $color;
  background-image: linear-gradient(
    90deg,
    rgba($color, 0),
    rgba($color, 1) 50%,
    rgba($color, 0) 100%);
}


/* --waku-- */
.bwaku{
 width:95%;
 text-align:right;
}

/* コンテンツ見出し */
.midashi{
  width:100%;
  text-align: left;
  font-size: 80%;
  margin-left:15px;
}
.midashi_b{
  width:100%;
  text-align: left;
  font-size: 80%;
}
#page_index{
	margin-left:20px;
}

/* *** 上に戻る *** */
.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外枠 */
.ad_sotowaku{
	width:90%;
	padding:5px 0;
	margin:0 auto;
	text-align:left;
}
.ad_ad_top{
	width:100%;
	height:90px;
	padding:5px 0;
	margin:0 auto;
	text-align:center;
}

.ad728in{
 width:728px;
 height:90px;
}
/* ad 160*600 */
.ad160in{
 width:160px;
 height:600px;
}
/* ad 300*250 */
.ad300in{
  width:300px;
  height:250px;
  margin-top:5px;
  margin-bottom:5px;
}
/* ad 336*280 */
.ad336in{
  width:338px;
  height:auto;
  margin-top:5px;
  margin-bottom:5px;
}

.kth{
 text-align:center;
}
.delptn1{
background-color:#dedede;
}
.delptn2{
background-color:#dddddd;
}
.delptn2b{
background-color:#d5d5d5;
}

.topmenu{
 margin:5px 20px; 
}
a.topmenu{/*リンク文字*/
    color:#fff;
    font-style:normal;
    text-decoration:underline;
}
a:link.topmenu{/*未訪問*/
    color:#fff;
    font-style:normal;
    text-decoration:underline;
}
a:visited.topmenu{/*訪問後*/
    color:#fff;
    text-decoration:underline;
}
a:hover.topmenu{/*マウスon*/
    color:#0000cc;
    font-style:normal;
    text-decoration:underline;
}

/* サーバ名, 最終更新 */
#sn_ld{
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin:3px 0 8px 0;
	width:100%;
	background-color:#ececec;
	flex-wrap: wrap;
}
.sn_ld_ch{
	display: flex;
	justify-content: center;
	margin:0 10px;
}
#sn_sn{
	margin-right:10px;
	font-weight:bold;
}
.sn_url{
	margin-right:10px;
	font-size: 70%;
}

a.sn_url{/*リンク文字*/
    color:#777;
    font-style:normal;
    text-decoration:none;
}
a:link.sn_url{/*未訪問*/
    color:#555
    font-style:normal;
    text-decoration:none;
}
a:visited.sn_url{/*訪問後*/
    color:#555;
    text-decoration:none;
}
a:hover.sn_url{/*マウスon*/
    color:#0000cc;
    font-style:normal;
    text-decoration:underline;
}




/* コンテンツメニュー */
ul{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 0 auto;
padding: 0;
list-style: none; /* <li>の点なし */
width: 100%;
text-align: center;
}
ul li{
width: calc(33.3% - 10px);	/* 1列に表示するアイコンの数 3 */
min-width: 50px;
border-bottom:1px groove #ccc;	/* 項目ごとの装飾となる線 */
}
ul li a{
display: block;
width: 100%;
padding: 3px 0;
text-decoration: none;
color: #555;
/*font-weight: bold;*/
font-size:70%;
}
ul li.current{
background-color: #DEEBF7;
}
ul li.current a{
color: #555;
}
ul li:hover{
background-color: #FFF2CC;
}
/* ↑コンテンツメニュー */

.me_con{	/* コンテンツメニューの画像とテキストの枠 */
	display:flex;	
	flex-direction:column; /* 縦並び */
	align-items:center;	/* 画像とテキスト中央揃え */
	justify-content: center;
}
img.me_con_img{	/* コンテンツメニューの画像に関して */
	width:10%;	/* 画像の縮小 親のBOX要素に対する%であることに注意 */
}



/* bbcode */
.bbco{ width:90%; margin-left:15px; }


/* flag counter */
#flag_counter{
	margin-top:30px;
	width:160px;
}



/*ここからタブレット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; }

	/* ad 336*280 */
	.ad336in{
	width:338px;	height:auto;
	margin-top:5px;	margin-bottom:5px; margin-left:auto; margin-right:auto;
	}
	
	/* ad外枠 */
	.ad_sotowaku{
		width:600px;
		margin:0 atuo;
		text-align: left;
	}

	/* bbcode */
	.bbco{
	width:60%;
	margin-left:auto; margin-right:auto;
	}
	
	#toptitle{
	 text-align:cente;
	}
	



}

/*ここからタブレット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; }

	/* フォームテーブル */
	.formtablewrap{ width:100%; }

	/* 動向データ */
	#doukou{ margin:auto; }

	/* ad 336*280 */
	.ad336in{
	width:338px;	height:auto;
	margin-top:5px;	margin-bottom:5px; margin-left:auto; margin-right:auto;
	}

	/* ad外枠 */
	.ad_sotowaku{
		width:480px;
		margin:0 atuo;
		text-align: left;
	}

	/* bbcode */
	.bbco{
	width:60%;
	margin-left:auto; margin-right:auto;
	}
	
	#toptitle{
	 text-align:center;
	}

	
	#form_ue{
	 flex-direction: column;
	}
}


/*ここからスマートフォン用（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; }

	/* ad 336*280 */
	.ad336in{
	width:338px;	height:auto;
	margin-top:5px;	margin-bottom:5px; margin-left:auto; margin-right:auto;
	}
	
	/* ad外枠 */
	.ad_sotowaku{
		width:340px;
		margin:0 atuo;
		text-align: left;
	}


	/* bbcode */
	.bbco{
	width:60%;
	margin-left:auto; margin-right:auto;
	}

	#toptitle{
	 text-align:center;
	}
	
	#form_ue{
	 flex-direction: column;
	}

}