@charset "utf-8";

:root {
	--header-font: "BIZ UDPGothic", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, Arial, sans-serif;
	--normal-font: "ヒラギノ角ゴ Pro W3", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック";
}

@import url('https://fonts.googleapis.com/css2?family=Kosugi&display=swap&text=○●△■□◎－');

nav { margin: 0 4px; font-size: 0.95rem; text-align: right; }
.uptime { margin-top: 1em; text-align: right; font-size: 80%; }
.tb_navi { margin-bottom: 1em; background: #999; font-size: 80%; }
.tb_navi tr { background: #fff; text-align: center; }
.mode, .mode li {
	box-sizing: border-box;
}
.mode {
	margin: 3px 0 1em 0; padding: 0;
	border: 1px solid #999;
	font-size: 90%;
	list-style: none;
	overflow: auto;
}
.mode li {
	float: left;
	height: 28px;
	line-height: 28px;
	width: 16.66%;
	border-right: 1px solid #999;
	text-align: center;
	white-space: nowrap;
}
.mode li:nth-last-of-type(1) {
	border-right: none;
}
.mode li a {
	display: block;
	height: 100%;
}
.mode li a:hover {
	background: #f8f0cc;
}
.col8 li { width: 12.5%; }
.col5 li { width: 20%; }
.col18 li { width: 11.11%; }
.col18 li:nth-child(-n+9) { border-bottom: 1px solid #999; }
.col18 li:nth-child(9) { border-right: none; }
.col20 li { width: 9.99%; }
.col20 li:nth-child(-n+10) { border-bottom: 1px solid #999; }
.col20 li:nth-child(10) { border-right: none; }
h3 {
	margin: 1.5rem 0 2px;
	font-family: var(--header-font);
	font-size: 1.1rem;
	font-weight: bold;
}
.amount {
	padding-left: 1rem;
	font-family: var(--normal-font);
	font-size: 0.85rem;
	font-weight: normal;
}

.tb {
	width: 100%;
	border-collpapse: separate;
	border-spacing: 1px;
	font-size: 0.9rem;
	line-height: 1;
}
.tb th {
	padding: 4px 2px 3px;
	font-weight: normal; 
	background: #e5d5d0;
	border-right: 1px solid #ccb0b0;
	border-bottom: 1px solid #ccb0b0;
	white-space: nowrap;
}
.tb td { padding: 5px 2px; text-align: right; }
.tb tr:nth-child(odd) { background: #f8f0f0; }

td.rank, td.c { text-align: center; }
td.name { text-align: left; }
td.rank a, td.fp a { padding: 0px 4px; color: inherit; text-decoration: none; white-space: nowrap; }
td.team, td.score { text-align: left; white-space: nowrap; }
.mark { font-family: 'Kosugi', Roboto, sans-serif; }
.act { font-weight: bold; background: #fc9 url(../img/act.gif) left top no-repeat; }
* html body table td.gh { padding: 5px 2px 0px; }
.bar {background: url(../img/bar.gif) repeat-x; height:10px;}
.up, .dn, .ti { margin: 0px auto; }
.up { background: url(../img/up.gif) no-repeat; width:12px; height:12px;}
.dn { background: url(../img/down.gif) no-repeat; width:12px; height:12px;}
.ti { background: url(../img/tie.gif) no-repeat; width:12px; height:12px;}
.detail { margin: 4px 0 1em; text-align: right; }
.ad { font-size: 80%; text-align: center; }
td.add { padding: 0; text-align: center; }
td.add img { border: 0; }
#bottom_link {
	clear: both;
	margin: 1em 0em; padding: 4px;
	border-top: 1px dashed #999;
	text-align: center;
	font-size: 80%;
	line-height: 1.8;
}
@media screen and (max-width:679px) {
	.player th:nth-child(7), .player td:nth-child(7) {
		display: none;
	}
	.system th:nth-child(7), .system td:nth-child(7) {
		display: none;
	}
	.team th:nth-child(4), .team td:nth-child(4) {
		display: none;
	}
	.bench th:nth-child(6), .bench td:nth-child(6) {
		display: none;
	}
	.sc-nav { width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
	.mode { min-width: 400px; }
	.mode li { height: 30px; line-height: 30px; }
	.col8, .col5, .col18, .col20 { min-width: auto; }
	.col8 li { width: 25%; }
	.col8 li:nth-child(-n+4) { border-bottom: 1px solid #999; }
	.col8 li:nth-child(4) { border-right: none; }
	.col18 li,.col20 li { width: 16.66%; }
	.col18 li:nth-child(-n+12), .col20 li:nth-child(-n+18) { border-bottom: 1px solid #999; }
	.col18 li:nth-child(6), .col18 li:nth-child(12), .col20 li:nth-child(6), .col20 li:nth-child(12), .col20 li:nth-child(18) { border-right: none; }
	.col18 li:nth-child(9), .col20 li:nth-child(10), .col20 li:nth-child(20) { border-right: 1px solid #999; }
}
@media screen and (max-width:499px) {
	.player {
		font-size: 100%;
		border-top: 1px solid #999;
	}
	.player tr {
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1px dashed #999;
		padding: 3px 0px;
	}
	.player tr::after {
		content: '';
		width: 100%;
	}
	.player tr.thd { display: none; }
	.player td:nth-child(n+5) {
		order: 2;
		font-size: 90%;
	}
	.player td:nth-child(1) {
		padding-top: 7px;
	}
	.player td:nth-child(4) {
		max-width: calc(100% - 4em);
	}
	.player td:nth-child(5) {
		margin-left: 5em;
	}
	.player td:nth-child(n+6)::before {
		content: " / ";
	}
	.add img { position: relative; top: 4px; }
}