* {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: #222;
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
	line-height: 1.6;
}

header,
main,
footer {
	width: min(100% - 2rem, 1200px);
	margin-inline: auto;
}

header {
	padding-block: 1rem;
}

h1 {
	margin: 0;
	font-size: clamp(1.4rem, 4vw, 2rem);
}

h2 {
	margin-top: 1.5rem;
}

h3 {
	margin-bottom: 0.5rem;
}

a {
	color: #005ea8;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
.table-scroll:focus-visible {
	outline: 3px solid #ffbf47;
	outline-offset: 2px;
}

.display-switcher,
.date-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-block: 1rem;
}

.btn,
input[type="submit"] {
	padding: 0.65rem 1rem;
	border: 1px solid #666;
	border-radius: 0.35rem;
	background: #fff;
	color: #222;
	font: inherit;
	cursor: pointer;
}

.btn.is-active {
	border-color: #005ea8;
	background: #005ea8;
	color: #fff;
	font-weight: 700;
}

input[type="date"] {
	min-height: 2.75rem;
	padding-inline: 0.5rem;
	font: inherit;
}

.table-scroll {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #aaa;
	border-radius: 0.35rem;
	background: #fff;
}

.timetable {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
}

.timetable-all {
	min-width: 920px;
}

.timetable-current {
	min-width: 100%;
}

.timetable caption {
	padding: 0.75rem;
	text-align: left;
	font-weight: 700;
	background: #f5f5f5;
	border-bottom: 1px solid #aaa;
}

.timetable th,
.timetable td {
	padding: 0.7rem;
	border-right: 1px solid #bbb;
	border-bottom: 1px solid #bbb;
	vertical-align: top;
	text-align: left;
}

.timetable tr > :last-child {
	border-right: 0;
}

.timetable tbody tr:last-child > * {
	border-bottom: 0;
}

.timetable thead th {
	background: #e9eef3;
	font-weight: 700;
	white-space: nowrap;
}

.timetable tbody th[scope="row"] {
	min-width: 10rem;
	background: #f8f8f8;
	font-weight: 700;
}

.sticky-column {
	position: sticky;
	left: 0;
	z-index: 2;
	box-shadow: 2px 0 0 rgba(0, 0, 0, 0.16);
}

.timetable thead .sticky-column {
	z-index: 4;
	background: #dfe7ee;
}

.current-period {
	background: #ffcf66 !important;
	color: #111;
}

.current-period-cell {
	background: #fff6d8;
}

.period-time {
	font-size: 0.82rem;
	font-weight: 400;
}

.empty {
	color: #666;
}

footer {
	padding-block: 1.5rem;
	font-size: 0.9rem;
}

@media (max-width: 600px) {
	header,
	main,
	footer {
		width: min(100% - 1rem, 1200px);
	}

	.timetable th,
	.timetable td {
		padding: 0.55rem;
		font-size: 0.9rem;
	}

	.timetable tbody th[scope="row"] {
		min-width: 8rem;
		max-width: 10rem;
		white-space: normal;
	}

	.display-switcher .btn,
	.date-form input[type="submit"] {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
	}
}