@charset "UTF-8";

@media all {
	.timetable-lead {
		margin-top: 50rem;
		font-weight: bold;
		text-align: center;
		line-height: 2.333;
	}

	.next-event {
		font-weight: bold;
		color: var(--red);
		text-align: center;
		line-height: 1.3;
	}

	/* .timetable-select {
		position: sticky;
		transition: top .5s;
		z-index: 1;
	} */


	.select-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 auto;
	}

	.select-item a {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		font-weight: bold;
	}
	.select-item a .date {
		display: block;
		border-radius: 50%;
		width: 100%;
		aspect-ratio: 1;
		background-color: #000;
	}

	.select-item.end a .date {
		background-color: #c8c8c8 !important;
	}

	/* .select-item.active a .date, */
	.select-item a:hover .date {
		background-color: #f8df2d;
	}





	/* sp & tab */
	@media screen and (max-width: 1024px) {
		.timetable-select {
			top: 0;
		}
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.site-footer {
			margin-top: 120rem;
		}

		.timetable-lead {
			font-size: 12rem;
		}

		.timetable-select {
			margin-top: 40rem;
		}
		
		.select-list {
			width: 360rem;
			row-gap: 20rem;
		}
		.select-item {
			width: 20%;
		}

		.select-item:nth-child(6n+1) {
			margin-left: 1px;
		}

		.select-item a .date {
			margin-top: 3rem;
		}



		.next-event {
			margin-top: 40rem;
			font-size: 18rem;
		}

		.next-event small {
			font-size: 12rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.site-footer {
			margin-top: 200rem;
		}


		.timetable-select {
			margin-top: 80rem;
			top: 87rem;
			height: 105rem;
		}

		.select-list {
			max-width: 883rem;
			height: 100%;
		}

		.select-item {
			width: calc(12.5% - 2rem);
			max-width: 84rem;
			height: 100%;
		}

		.select-item a .date {
			margin-top: 6rem;
			transition: background-color .3s;
		}

		.next-event {
			margin-top: 80rem;
			font-size: 20rem;
		}

		.next-event small {
			font-size: 15rem;
		}
	}

}



/* time table */
@media all {
	.timetable-list {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.timetable-item {position: relative;}
	.timetable-item:nth-child(even) {
		background-color: #f9f8ef;
	}
	.timetable-item.end {
		order: 1;
	}
	.timetable-item-target {position: absolute;}
	.timetable-date {
		position: relative;
		margin: 0 auto;
		background: center / contain no-repeat url(../img/timetable/timetable-base.svg);
	}
	.timetable-date img {position: absolute;}

	.timetable-frame {
		display: block;
		margin: 0 auto;
		width: calc(100% - 20rem);
		max-width: 800rem;
		border-top: var(--max1px) solid #ccc;
		border-right: var(--max1px) solid #ccc;
	}

	.timetable-item:nth-child(even)::before,
	.timetable-item:nth-child(even)::after {
		content: '';
		position: absolute;
		left: 0;
		display: block;
		width: 100%;
		background: center / cover no-repeat url(../img/common/wave-be.svg);
	}
	.timetable-item:nth-child(even)::before {bottom: calc(100% - 1px);}
	.timetable-item:nth-child(even)::after {
		top: calc(100% - 1px);
		transform: scaleY(-1);
	}
	/* sp */
	@media (max-width: 767px) {
		.timetable-list {margin-top: 40rem;}
		.timetable-item {
			padding-top: 40rem;
			height: 850rem;
		}
		.timetable-item:nth-child(even)::before,
		.timetable-item:nth-child(even)::after {height: 20rem;}
		.site-main {padding-bottom: 20rem;}

		.timetable-item-target {top: -30rem;}
		.timetable-date {
			width: 380rem;
			height: 115rem;
		}
		.timetable-date img {
			top: 30rem;
			right: 75rem;
			width: auto;
			height: 30rem;
		}
		.timetable-frame {
			margin-top: 10rem;
			margin-left: 20rem;
			width: 120vw;
			height: 800rem;
			scale: .75;
			transform-origin: top left;
		}
	}

	/* tab & pc */
	@media print,
	(min-width: 768px) {
		.timetable-frame {height: 800rem;}
		
		.timetable-item {padding: 100rem 0;}
		.timetable-item:nth-child(odd) {padding-bottom: 140rem;}
		.timetable-item:nth-child(even)::before,
		.timetable-item:nth-child(even)::after {height: 40rem;}
		.site-main {padding-bottom: 40rem;}
		.timetable-item-target {top: -100rem;}
		.timetable-date {
			width: 440rem;
			height: 140rem;
		}
		.timetable-date img {
			top: 38rem;
			right: 85rem;
			width: auto;
			height: 35rem;
		}
		.timetable-frame {margin-top: 30rem;}

		/* tab */
		@media (max-width: 1024px) {}
		
		/* pc */
		@media (min-width: 1025px) {}
	}
	
}





/* template */
@media all {

	/* sp */
	@media (max-width: 767px) {}

	/* tab & pc */
	@media print,
	(min-width: 768px) {
		
		/* tab */
		@media (max-width: 1024px) {}
		
		/* pc */
		@media (min-width: 1025px) {}
	}
	
}