@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*
#ranklist .h1 + .ranklist-body, #ranklist .h2 + .ranklist-body, #ranklist .ex + .ranklist-body,
#ranklist .h1 + .element, #ranklist .h2 + .element, #ranklist .ex + .element {
	margin-top: 20px;
}
*/
/*~~*/

#ranklist .srch-form + .ranklist-body {
	margin-top: 15px;
}

#ranklist .srch-form {
	padding: 20px; text-align: center; border: 1px solid #000;
}

#ranklist .srch-form label {
	display: none;
}

#ranklist .srch-form input {
	width: 100%;
}

#ranklist .srch-form button.search,
#ranklist .srch-form button.reload {
	width: 100%; margin-top: 10px;
}

/*~~*/

#ranklist .ranklist-body .frank {
	width: 100%; margin-bottom: 10px;
}

#ranklist .ranklist-body .frank div {
	padding: 7px 10px
}

#ranklist .ranklist-body .frank .head {
	text-align: center;
}

#ranklist .ranklist-body .frank .name {
	margin-top: 7px; padding-top: 7px; border-top: 1px solid #999; text-align: center;
}

#ranklist .ranklist-body .fnone {
	text-align: center;
}

#ranklist .ranklist-none {
	margin-top: 10px; text-align: center;
}

#ranklist .ranklist-none li {
	padding: 10px; border: 1px solid #000; text-align: center;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#ranklist .ranklist-body .frslt table {
	width: 100%; margin: -10px 0; border-collapse: separate; border-spacing: 0px 10px;
}

#ranklist .ranklist-body .frslt .trload {
	cursor: pointer;
}

#ranklist .ranklist-body .frslt .trload:hover {
	background: rgba(0,0,0,0.5);
}

#ranklist .ranklist-body .frslt th,
#ranklist .ranklist-body .frslt td {
	text-align: center; border-top: 1px solid #000; border-bottom: 1px solid #000;
}
	#ranklist .ranklist-body .frslt th:nth-child(1),
	#ranklist .ranklist-body .frslt td:nth-child(1) {
		border-left: 1px solid #000;
	}
	#ranklist .ranklist-body .frslt th:nth-last-of-type(1),
	#ranklist .ranklist-body .frslt td:nth-last-of-type(1) {
		border-right: 1px solid #000;
	}

#ranklist .ranklist-body .frslt th span,
#ranklist .ranklist-body .frslt td span {
	border-left: 1px solid #000; display: block;
}
	#ranklist .ranklist-body .frslt th:nth-child(1) span,
	#ranklist .ranklist-body .frslt td:nth-child(1) span {
		border-left: none;
	}

#ranklist .ranklist-body .frslt th {
	padding: 3px 0;
}

#ranklist .ranklist-body .frslt td {
	padding: 5px 0;
}

#ranklist .ranklist-body .frslt td span {
	padding: 5px;
}

#ranklist .ranklist-body .frslt .td-date {
	width: 20%;
}

#ranklist .ranklist-body .frslt .td-rslt {
	width: 15%;
}

#ranklist .ranklist-body .frslt .td-name {
	width: 45%;
}

#ranklist .ranklist-body .frslt .td-point {
	width: 20%;
}

#ranklist .ranklist-body .frslt td.td-name {
	text-align: left;
}

/*~~*/

#ranklist .ranklist-body .frslt .td-rslt-rank {
	width: 18%;
}

#ranklist .ranklist-body .frslt .td-rslt-mbid {
	width: 18%;
}

#ranklist .ranklist-body .frslt .td-rslt-name {
	width: 46%;
}

#ranklist .ranklist-body .frslt .td-rslt-point {
	width: 18%;
}

#ranklist .ranklist-body .frslt td.td-rslt-name {
	text-align: left;
}

/*~~*/

#ranklist .ranklist-page {
	margin-top: 5px; padding: 5px; border: 1px solid #000;
}

#ranklist .ranklist-page ul {
	display: flex; justify-content: center; flex-wrap: wrap;
}

#ranklist .ranklist-page li {
	padding: 5px;
}

#ranklist .ranklist-page li.now {
	border-bottom: 1px solid #000;
}

/*~~*/

#ranklist .rslt-back {
	margin-bottom: 10px; text-align: right;
}

#ranklist .rslt-back span {
	width: 30px; height: 30px; padding: 3px; border-radius: 30px; border: 1px solid #000; font-size: 24px; color: #000; cursor: pointer;
}

#ranklist .rslt-back span:hover {
	background: rgba(0,0,0,0.5);
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (min-width: 769px) {
/****************************************************************************************************************************************************************/
/*
#ranklist .h1 + .ranklist-body, #ranklist .h2 + .ranklist-body, #ranklist .ex + .ranklist-body,
#ranklist .h1 + .element, #ranklist .h2 + .element, #ranklist .ex + .element {
	margin-top: 25px;
}
*/
/*~~*/

#ranklist .srch-form {
	width: 80%; margin: 0 auto 15px; padding: 15px 15px; display: flex; justify-content: center;
}

#ranklist .srch-form form {
	display: flex;
}

#ranklist .srch-form label {
	width: 100px; border: 1px solid #000; font-size: 14px; font-weight: bold; display: flex; justify-content: center; align-items: center;
}

#ranklist .srch-form input {
	width: 350px; margin: 0 0 0 10px;
}

#ranklist .srch-form button.search {
	width: 100px; margin: 0 0 0 10px;
}

#ranklist .srch-form button.reload {
	width: 100px; margin: 0 0 0 10px;
}

/*~~*/

#ranklist .ranklist-body .frank {
	width: 40%; margin: 0px auto -1px; padding-bottom: 0; border-bottom: none; position: relative; z-index: 1;
}

/*~~*/

#ranklist .ranklist-body .frslt td span {
	padding: 5px 10px;
}

#ranklist .ranklist-body .frslt .td-date {
	width: 12.5%;
}

#ranklist .ranklist-body .frslt .td-rslt {
	width: 12.5%;
}

#ranklist .ranklist-body .frslt .td-name {
	width: 50%;
}

#ranklist .ranklist-body .frslt .td-point {
	width: 25%;
}

/*~~*/

#ranklist .ranklist-body .frslt .td-rslt-rank {
	width: 12.5%;
}

#ranklist .ranklist-body .frslt .td-rslt-mbid {
	width: 12.5%;
}

#ranklist .ranklist-body .frslt .td-rslt-name {
	width: 50%;
}

#ranklist .ranklist-body .frslt .td-rslt-point {
	width: 25%;
}

/*~~*/

#ranklist .rslt-back {
	margin: 0 0 -36px;
}

#ranklist .rslt-back span {
	width: 36px; height: 36px; border-radius: 36px; font-size: 30px;
}

/****************************************************************************************************************************************************************/
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/