@charset "UTF-8";

/* 歴代優勝記録用スタイル */

:root {
	--field: #1f4e79;
	--field-dark: #163a58;
	--panel: #ffffff;
	--ink: #1f2937;
	--muted: #6b7280;
	--line: #d8dee5;
	--accent: #b91c1c;
	--void: #9ca3af;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	background: #eef1f5;
	color: var(--ink);
	font-family: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	line-height: 1.8;
}

.wrap {
	max-width: 1000px;
	margin: 0 auto;
	padding: 1rem;
}

.site-header {
	padding: 1rem;
	margin: 0 0 1rem;
	background: var(--field);
	border-radius: 10px;
	color: #ffffff;
	text-align: center;
}

.site-header h1 {
	margin: 0;
	font-size: 1.5rem;
	letter-spacing: 0.1em;
}

.site-header h1 a {
	color: #ffffff;
	text-decoration: none;
}

.site-header__sub {
	margin: 0.25rem 0 0;
	font-size: 0.85rem;
	color: #cfdced;
}

.site-footer {
	padding: 0.5rem 0 2rem;
	font-size: 0.85rem;
	text-align: center;
}

.site-footer__note {
	margin: 0 0 0.5rem;
	color: var(--muted);
	text-align: left;
}

.panel {
	background: var(--panel);
	border-radius: 10px;
	padding: 1rem 1.25rem;
	margin: 0 0 1rem;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.panel h2 {
	margin: 0 0 0.75rem;
	padding-bottom: 0.35rem;
	font-size: 1.15rem;
	border-bottom: 2px solid var(--field);
}

.lead {
	margin: 0 0 0.5rem;
}

.note {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--muted);
}

.breadcrumb {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	color: var(--muted);
}

.nowrap {
	white-space: nowrap;
}

code {
	padding: 0 0.25rem;
	background: #f3f4f6;
	border-radius: 3px;
	font-size: 0.9em;
}

/* ---- ジャンル一覧 ---- */

.genre-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.genre-card {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--line);
}

.genre-card:last-child {
	border-bottom: none;
}

.genre-card h3 {
	margin: 0;
	font-size: 1.05rem;
}

.genre-card__meta {
	margin: 0.1rem 0;
	font-size: 0.8rem;
	color: var(--muted);
}

.genre-card__summary {
	margin: 0.25rem 0 0;
	font-size: 0.9rem;
}

/* ---- 大会の説明 ---- */

.series-list {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
}

.series-list dt {
	margin-top: 0.5rem;
	padding-left: 0.5rem;
	border-left: 4px solid var(--field);
	font-weight: bold;
}

.series-list dd {
	margin: 0.15rem 0 0 0.5rem;
	color: var(--muted);
}

/* ---- 表 ---- */

/*
 * 大会の数だけ列が増えるので、狭い画面では表だけ横に流す。
 * .wrap ごと横スクロールさせないための入れ物。
 */
.table-scroll {
	overflow-x: auto;
}

.grid {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.grid th,
.grid td {
	padding: 0.35rem 0.5rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.grid thead th {
	background: #eff3f8;
	color: var(--field-dark);
	font-size: 0.8rem;
	white-space: nowrap;
}

.grid thead tr:first-child th[colspan] {
	background: #dde6f0;
	text-align: center;
}

.grid tbody tr:hover {
	background: #f8fbff;
}

.grid .num {
	white-space: nowrap;
}

/*
 * 大会と大会の境目に縦線を入れて、どの列がどの大会か分かるようにする。
 * 大会ごとの列数は has_runner_up で変わるので、位置を nth-child で
 * 数えず、テンプレート側で先頭の列に .series-start を付けている。
 */
.record-table .series-start {
	border-left: 2px solid #c7d4e2;
}

.record-table tbody th[scope="row"] {
	background: #f7f9fc;
	color: var(--field-dark);
	white-space: nowrap;
}

/* 記録が無い・大会が無かった欄 */
.is-void {
	color: var(--void);
	text-align: center;
}

/* 中止になった回 */
.is-cancelled {
	color: var(--accent);
	font-size: 0.85rem;
}

.cell-note {
	display: block;
	color: var(--muted);
	font-size: 0.75rem;
}

.badge {
	display: inline-block;
	margin-left: 0.25rem;
	padding: 0 0.3rem;
	background: var(--field);
	border-radius: 4px;
	color: #ffffff;
	font-size: 0.7rem;
	white-space: nowrap;
}

.rank-table .total {
	font-weight: bold;
	color: var(--field-dark);
}

/* ---- 年度別順位表 ---- */

/*
 * 年が増えるほど縦に伸びるので <details> で畳む。開閉は HTML だけで
 * 済ませたいので、三角の印はブラウザ既定のものをそのまま使う。
 */
.standing-year {
	margin: 0 0 0.5rem;
	border: 1px solid var(--line);
	border-radius: 6px;
}

.standing-year > summary {
	padding: 0.4rem 0.75rem;
	background: #f7f9fc;
	border-radius: 6px;
	color: var(--field-dark);
	cursor: pointer;
	font-weight: bold;
}

.standing-year[open] > summary {
	border-bottom: 1px solid var(--line);
	border-radius: 6px 6px 0 0;
}

.standing-year > .table-scroll,
.standing-year > .standing-extra {
	padding: 0.5rem 0.75rem;
}

.standing-table caption {
	padding: 0.25rem 0;
	color: var(--field-dark);
	font-size: 0.85rem;
	font-weight: bold;
	text-align: left;
}

.standing-table tbody th[scope="row"] {
	white-space: nowrap;
}

.standing-table .num {
	text-align: right;
}

.standing-extra {
	margin: 0;
	font-size: 0.9rem;
}

a {
	color: #1d4ed8;
}

a:hover {
	color: var(--accent);
}

@media (max-width: 480px) {
	.wrap {
		padding: 0.5rem;
	}

	.panel {
		padding: 0.75rem;
	}

	.grid {
		font-size: 0.8rem;
	}
}