@charset "utf-8";
/*------------------------*
 * 1369px以上
 *------------------------*/
@media screen and (max-width: 768px) {
	.backlink {
		margin-top:0px;
	}
	.rankindex_wrapper {
	}
	.rankindex {
		width:100%;
	}
	.rankindex table th.header_stage,
	.rankindex table th.header_round,
	.rankindex table th.header_color,
	.rankindex table th.header_miss,
	.rankindex table th.header_accuracy,
	.rankindex table th.header_kpm,
	.rankindex table th.header_datetime{
		display:none;
	}
	.rankindex table td.data_stage,
	.rankindex table td.data_round,
	.rankindex table td.data_color,
	.rankindex table td.data_miss,
	.rankindex table td.data_accuracy,
	.rankindex table td.data_kpm,
	.rankindex table td.data_datetime{
		display:none;
	}

}
/*------------------------*
 * 769px以上
 *------------------------*/
@media (min-width: 769px){
	.backlink {
		margin-top:-75px;
	}
	.rankindex_wrapper {
	}
	.rankindex {
		width:100%;
	}
	.rankindex table th.header_stage,
	.rankindex table th.header_round,
	.rankindex table th.header_color,
	.rankindex table th.header_miss,
	.rankindex table th.header_datetime{
		display:none;
	}
	.rankindex table td.data_stage,
	.rankindex table td.data_round,
	.rankindex table td.data_color,
	.rankindex table td.data_miss,
	.rankindex table td.data_datetime{
		display:none;
	}
}
/*------------------------*
 * 1000px以上
 *------------------------*/
@media (min-width: 1001px){
	.rankindex table th.header_stage,
	.rankindex table th.header_round,
	.rankindex table th.header_color,
	.rankindex table th.header_miss,
	.rankindex table th.header_datetime{
		display:table-cell;
	}
	.rankindex table td.data_stage,
	.rankindex table td.data_round,
	.rankindex table td.data_color,
	.rankindex table td.data_miss,
	.rankindex table td.data_datetime{
		display:table-cell;
	}
}
/*------------------------*
 * 1700px以上
 *------------------------*/
@media (max-width: 1701px){
	.sidebar-r {
		display:none;
	}
}
/*------------------------*
 * 1750px以上
 *------------------------*/
@media (min-width: 1751px){
	.sidebar-r {
		display:block;
	}
	.rankindex_wrapper {
	}
	.rankindex {
		width:100%;
	}
	.rankindex table th.header_name{
		width: auto;
	}
}
/*-----------------------------*
 * backlink
 *-----------------------------*/
.backlink {
	text-align:right;
	font-size:14px;
}
/*-----------------------------*
 * rankindex
 *-----------------------------*/
.rankindex_wrapper {
	display:flex;
	flex-wrap:no-wrap;
	gap:40px;
}
.rankindex {
	padding: 20px;
	background: #09131c;
	border: 1px solid #00d8ff;
	border-radius: 8px;
	box-shadow: 0 0 20px rgba(0,216,255,.15);
}
.rankindex legend{
	padding: 0 12px;
}
.rankindex legend h3{
	margin: 0;
	color: #00d8ff;
	font-size: 1.1rem;
	text-shadow: 0 0 8px rgba(0,216,255,.6);
}
.rankindex .roundsort {
	margin-top:-20px;
}
.rankindex .roundsort ul{
	display:flex;
	gap:10px;
	justify-content: flex-end;
	font-size:14px;
}
.rankindex .roundsort ul li{
}
.rankindex .roundsort ul li a{
	border: 0.08rem solid rgba(0, 229, 255, 0.55);
	display:block;
	padding:0 10px;
	border-color: #00e5ff;

	border: 0.08rem solid rgba(0, 229, 255, 0.55);
	background: rgba(0, 229, 255, 0.08);
	box-shadow: 0 0 0.5rem rgba(0, 229, 255, 0.25);
}
.rankindex .roundsort ul li a.is-active{
	color: #001014;
	background: #00e5ff;
	border-color: #00e5ff;
	box-shadow: 0 0 0.8rem rgba(0, 229, 255, 0.9), 0 0 1.5rem rgba(0, 229, 255, 0.45);
	cursor: default;
	pointer-events: none;
}
.rankindex .roundsort ul a.is-active{
	color: #001014 !Important;
}
.rankindex .roundsort ul li a:hover {
	color: #4dc5ff;
	text-decoration: none;
	border-color: #00e5ff;
	background: rgba(0, 229, 255, 0.22);
	box-shadow: 0 0 0.8rem rgba(0, 229, 255, 0.65), inset 0 0 0.5rem rgba(0, 229, 255, 0.3);
}



.rankindex table{
	margin-top:30px;
	margin-bottom:30px;
	width:100%;
	table-layout:fixed;
}
.rankindex table tr:hover {
  background-color: rgba(0, 229, 255, 0.2);
}
.rankindex table th {
	color: #00d8ff;
	line-height:1.5;
}
.rankindex table th,
.rankindex table td{
	vertical-align:middle;
	text-align:center;
	white-space: nowrap;
	padding: 4px 5px;
	font-size: 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
}
.rankindex table img{
	width:40px;
	vertical-align:middle;
	margin-right:5px;
}
/*=======*
 * th
 *=======*/
.rankindex table th.header_rank{
	width: 50px;;
}
.rankindex table th.header_name{
	width:auto;
}
.rankindex table th.header_stage{
	width: 70px;
}
.rankindex table th.header_round{
	width: 70px;
}
.rankindex table th.header_color{
	width: 70px;
}
.rankindex table th.header_miss{
	width: 70px;
}
.rankindex table th.header_accuracy{
	width: 90px;
}
.rankindex table th.header_kpm{
	width: 90px;
}
.rankindex table th.header_score{
	width:100px;
}
.rankindex table th.header_datetime{
	width:130px;
}
/*=======*
 * td
 *=======*/
.rankindex table td.data_rank{
	text-align:center;
}
.rankindex table td.data_name{
	text-align:left;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.rankindex table td.data_stage{
	text-align:center;
}
.rankindex table td.data_round{
	text-align:center;
}
.rankindex table td.data_color{
	text-align:center;
}
.rankindex table td.data_miss{
	text-align:center;
}
.rankindex table td.data_accuracy{
	text-align:center;
}
.rankindex table td.data_kpm{
	text-align:center;
}
.rankindex table td.data_score{
	text-align:center;
}
.rankindex table td.data_score span{
	font-size: 14px;
	font-weight: bold;
	color: #f7ff00;
	background: linear-gradient(to left, #ff34f2, #ffa3ff, #ff34f2) 0% center/200%;
	background-size: 200% auto;
	background-clip: border-box;
	background-size: 200% auto;
	background-clip: border-box;
	background-size: 200% auto;
	background-clip: text;
	color: transparent;
	font-weight: bold;
	animation: game_score 2.0s linear infinite;
	text-align: right;
}
@keyframes game_score {
  to {
    background-position: 200% center;
  }
}
/*---------------*
 * data_score
 *---------------*/
.data_score span::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 4px;
	vertical-align: -2px;
	background-image: url("/common/img/icon/crown/star.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.data_score span[data-rank="1"]::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 4px;
	vertical-align: -2px;
	background-image: url("/common/img/icon/crown/1.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.data_score span[data-rank="2"]::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 4px;
	vertical-align: -2px;
	background-image: url("/common/img/icon/crown/2.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.data_score span[data-rank="3"]::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 4px;
	vertical-align: -2px;
	background-image: url("/common/img/icon/crown/3.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
/*---------------*
 * data_stage
 *---------------*/
.data_stage {
}
.data_stage span {
	background-image: url("/img/battle/guage/stagemedal/1.webp");
	background-repeat: no-repeat;
	background-size: 350px;
	width: 40px;
	height: 40px;
	display:block;
	margin: 0 auto;
}
/* stage 1 */
.data_stage span[data-stage="1"] {
	background-position-x: -56px;
}
/* stage 2 */
.data_stage span[data-stage="2"] {
	background-position-x: -106px;
}
/* stage 3 */
.data_stage span[data-stage="3"] {
	background-position-x: -156px;
}
/* stage 4 */
.data_stage span[data-stage="4"] {
	background-position-x: -206px;
}
/* stage 5 */
.data_stage span[data-stage="5"] {
	background-position-x: -256px;
}
/* stage 6 */
.data_stage span[data-stage="6"] {
	background-position-x: -306px;
}


.data_stage span[data-stage="1"][data-finish="a"],
.data_stage span[data-stage="2"][data-finish="a"],
.data_stage span[data-stage="3"][data-finish="a"],
.data_stage span[data-stage="4"][data-finish="a"],
.data_stage span[data-stage="5"][data-finish="a"],
.data_stage span[data-stage="6"][data-finish="a"] {
	background-position-y: -6px;
}


.data_stage span[data-stage="1"][data-finish="b"],
.data_stage span[data-stage="2"][data-finish="b"],
.data_stage span[data-stage="3"][data-finish="b"],
.data_stage span[data-stage="4"][data-finish="b"],
.data_stage span[data-stage="5"][data-finish="b"],
.data_stage span[data-stage="6"][data-finish="b"] {
	background-position-y: -56px;
}

.data_stage span[data-finish="c"] {
	background-image: url("/img/battle/guage/stagemedal/unknown.webp");
	background-repeat: no-repeat;
	background-size: 50px;
	background-position-x: -6px;
	background-position-y: -6px;
}

/*---------------*
 * data_round
 *---------------*/
.data_round {
}
.data_round span {
	background-image: url("/img/battle/guage/roundmedal/1.webp");
	background-repeat: no-repeat;
	background-position-y: -138px;
	background-size: 126px;
	display:block;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}
.data_round span[data-round="1"] {
	background-position-x: -12px;
}
.data_round span[data-round="2"] {
	background-position-x: -75px;
}
.data_round span[data-round="Final"] {
	background-image: none;
}
.data_round span[data-round="Final"]::before {
	content: "Final";
}
/*---------------*
 * data_color
 *---------------*/
.data_color {
}
.data_color span {
	background-image: url("/img/battle/guage/louisamedal/1.webp");
	background-repeat: no-repeat;
	background-position-y: 0px;
	background-size: 240px;
	display:block;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}
.data_color span[data-color="red"] {
	background-position-x: -200px;
}
.data_color span[data-color="purple"] {
	background-position-x: -160px;
}
.data_color span[data-color="green"] {
	background-position-x: -120px;
}
.data_color span[data-color="yellow"] {
	background-position-x: -80px;
}
.data_color span[data-color="blue"] {
	background-position-x: -40px;
}
.data_color span[data-color=""] {
	background-position-x: 0px;
}
/*---------------*
 * data_datetime
 *---------------*/
.rankindex table td.data_datetime{
	text-align:center;
}
.rankindex .showmore {
	text-align:right;
	font-size:14px;
}