/* --------- 並列配置 テーブル --------*/

/* ・uti_wakuの外側を囲むBOX */
.soto_waku{
  display: flex;
  flex-wrap: wrap; /* 複数行レイアウト */
  align-items: flex-start; /* 縦 上寄せ */
  justify-content: center; /* 横 中央寄せ */
  padding-left:40px;

  width:98%;
}

/* ・テーブルのページインデックス部分のBOX */
.page_box{
  width:98%;
  padding-left:40px;
  text-align:left; /* 左寄せ */
}

/* ・2つのテーブルとボタンを入れるBOX */
.uti_waku{
  display: flex;
  width: calc(50.0%);	/* 2カラム */
  padding-bottom: 5px;
  justify-content: center; /* 横 中央寄せ */
}

/* uti_wakuの中 */
.in_uti_waku{
}

/* ・複数同盟検索ボタン */
#alli_button{
  max-width: 470px; /* テーブル一つの幅と同 */
  text-align: right;
  padding: 10px 5px 10px 0;
  margin:0 auto;
}

/* --------- 円チャート --------- */

/* ・全 円チャート大枠 */
#soto_alli_en_chart{
  display: flex;
  flex-wrap: wrap; /* 複数行レイアウト */
  justify-content: center; /* 横 中央寄せ */
}
/* ・サーバ全体の円チャートを囲む枠 */
.uti_alli_en_chart0{
  display: flex;
  flex-wrap: wrap; /* 複数行レイアウト */
  justify-content: center;
  width: calc(100% - 50px);	/* 1カラム */
}
/* ・方角別の円チャートを囲む枠 */
.uti_alli_en_chart1{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: calc(50% - 50px);	/* 2カラム */
  border: 1px solid #ccc;
  padding-bottom:5px;
}




/* プレイヤランク プレイヤー部分 */
.player_box{
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-end;
	padding-left:8px;
}
.player_l{
	width: auto;
	padding-left: 2px;
}
.player_r{
	font-family:'Yu Gothic';
	word-break: break-all;
	width: 120px;
	text-align: left;
}



@media (max-width: 790px) {
  /* ----- 円チャート部分 ------*/
  /* ・全 円チャート大枠 */
  #soto_alli_en_chart{
  }
  /* ・方角別の円チャートを囲む枠 */
  .uti_alli_en_chart1{
    display: flex;
    width: calc(100% - 50px);	/* 1カラム */
    flex-direction: column;	/* 縦横 軸入れ替え */
    align-items: center;	/* 中央寄せ */
  }
  
  
  /* プレイヤランク プレイヤー部分 */
  .player_box{
    flex-direction: column;	/* 縦横 軸入れ替え */
    align-items: flex-end;
	justify-content: flex-end;
	padding-left:2px;
  }
  .player_l{
    text-align: right;
  	width: 100%;
  	padding-right: 5px;
  }
  .player_r{
  	text-align: right;
  	vertical-align: bottom;
  	width: 100px;
    word-break: normal;
    padding-bottom: 0px;
  }
}


@media (max-width: 985px) {
  /* ------ 並列配置 テーブル部分 ------*/
  /* ・uti_wakuの外側を囲むBOX */
  .soto_waku{
	padding-left:3px;
  }
  .uti_waku{
    width: calc(100%);	/* 1カラム */
  }
  .uti_waku table{
  	margin:0 auto;
  }
  .page_box{
    text-align: center; /* 中央に */
  }
}