body {
	width:100%;
}

table, td{
border: solid 1px #000000;
border-collapse: collapse;
padding:0.2em 0.5em;
}

.contents_wrap {
	margin: 0 auto;
	max-width:1000px;
	min-width:500px;
	
}

.tab {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1px;
    max-width: 1000px;
}

.tab > label {
    flex: 1 1;
    order: -1;
    opacity: .5;
    min-width: 70px;
    padding: .6em 1em;
    border-radius: 5px 5px 0 0;
    background-color: #2589d0;
    color: #fff;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}

@media screen and (max-width: 700px) {
	/* 500px以下に適用されるCSS（タブレット用） */
	.contents_wrap {
		margin: 0 auto;
		width:100%;
	}

	.tab {
	    display: flex;
		width:100%;
	    flex-wrap: wrap;
	    gap: 0 1px;
	}
}

.tab > label:hover {
    opacity: .8;
}

.tab input.noradio {
    display: none;
}

.tab > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
}

.tab label:has(:checked) {
    opacity: 1;
}

.tab label:has(:checked) + div {
    display: block;
}


.tab_contents {
	width: 100%;
/*	background-color: silver;*/
	padding: 0px;
/*	margin: 20px auto;*/
}

.tab_wrap {
/*	width: 50%; */
/*	margin: 50px auto;*/
	opacity: 0.8;
}
/*
@media screen and (max-width:900px) {
	.tab_wrap {
		width: 100%;
		margin: 0 auto;
		opacity: 0.8;
	}
}

*/
/*タブボタンデザイン*/
.tab_lab1, .tab_lab2, .tab_lab3 {
	background: #242424;
	color: #fff;
	padding: 15px;
}

/*タブにチェック入ったとき*/
#tab1:checked~.tab_lab1 {
	background: #e05551;
	color: #242424;
}
#tab2:checked~.tab_lab2 {
	background: #dcdc3d;
	color: #242424;
}
#tab3:checked~.tab_lab3 {
	background: #639aa4;
	color: #242424;
}

#tab1:checked~.panels #area1 {
	display: block;
/*	background: #e05551;*/
}

#tab2:checked~.panels #area2 {
	display: block;
/*	background: #dcdc3d;*/
}

#tab3:checked~.panels #area3 {
	display: block;
/*	background: #639aa4;*/
}

.panel {
	border:1px solid #000000;
	padding: 10px;
	display: none;
}

input[name="check"] {
	display: none;
}


/*アニメーション設定*/
@keyframes SlideUp {
	0% {
		transform: translateY(50px);
		/* Y軸方向に50px */
		opacity: 0;
		/* 透明 */
	}
	100% {
		transform: translateY(0);
		/* Y軸方向に0px */
		opacity: 1;
		/* 不透明 */
	}
}
/*アニメーション設定end*/

/*ボックスを下から上へ*/
.panel_content {
	animation-name: SlideUp;
	animation-duration: 2s;
	background-color: #fff;
	width: 100%;
}

#player_rank {
	margin:1em 0em 0.5em 0em;
	padding:1em;
/*	border:1px solid #000000;*/
	border:3px solid #2589d0;
/*	background:#2589d0;*/
	background:#ffffff;
	color:#000000;
	font-weight:900;
	
}

#getrank_result {
 user-select: none;
/*	display:none;*/
	
}

#updated_at {
	color:#000000;
	font-weight:normal;
}

#exe_api {
	display:none;
}

.spinner {
	display:none;
  width: 32px;
  height: 32px;
  margin: 10px auto;
  border: 4px #ddd solid;
  border-top: 4px #2e93e6 solid;
  border-radius: 50%;
  animation: sp-anime 1.0s infinite linear;
}

@keyframes sp-anime {
  100% { 
    transform: rotate(360deg); 
  }
}