@charset "UTF-8";

/* ================================================================================
interview
================================================================================ */
@media print, screen
{

#interview .dates
{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: calc(12 * var(--v));
	width: 90%;
	margin-inline: auto;
}
#interview .dates > li
{
	border-radius: calc(5 * var(--v));
	overflow: hidden;

	cursor: pointer;
}
#interview .dates > li.selected{	pointer-events: none;	}
#interview .dates > li[disabled]{	filter: grayscale(1);	}

#interview .dates > li p
{
	color: white;
	font-weight: 500;
	text-align: center;
}
#interview .dates > li p:nth-child(1)
{
	padding: 0.1em;
	background: var(--Ctheme2);

	--fz:38;
	font-family: var(--Oswald);
	opacity: 0.7;
	transition: var(--T02);
}
#interview .dates > li p:nth-child(2)
{
	padding: 0.2em;
	background: var(--Ctheme1);
	--fz:20;
	opacity: 0.7;
	transition: var(--T02);
}
#interview .dates > li:hover p:nth-child(1),
#interview .dates > li.selected p:nth-child(1)
{
	background: var(--Ctheme2);
	opacity: 1;
}
#interview .dates > li:hover p:nth-child(2),
#interview .dates > li.selected p:nth-child(2)
{
	background: var(--Ctheme1);
	opacity: 1;
}


#interview .racers
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(36 * var(--v)) calc(24 * var(--v));
}
#interview .racers > li
{
	container-type: inline-size;
	display: flex;	justify-content: center;	align-items: center;

	aspect-ratio: 326/104;

	background: white;
	border: calc(4 * var(--v)) solid var(--Ctheme1);
	border-radius: calc(8 * var(--v));
	cursor: pointer;
}
#interview .racers.d1 > li:not(.d1),
#interview .racers.d2 > li:not(.d2),
#interview .racers.d3 > li:not(.d3),
#interview .racers.d4 > li:not(.d4),
#interview .racers.d5 > li:not(.d5),
#interview .racers.d6 > li:not(.d6),
#interview .racers.d7 > li:not(.d7),
#interview .racers.d8 > li:not(.d8),
#interview .racers.d9 > li:not(.d9),
#interview .racers.d10 > li:not(.d10)
{	display: none;	}

#interview .racers > li .round
{
	font-size: 9cqw;

	color: var(--Ctheme1);
	font-family: var(--Oswald);
	font-weight: 600;
	text-align: center;
	transform: skewX(-10deg);
}
#interview .racers > li .nameArea
{
	display: flex;	justify-content: center;	align-items: end;
	gap: 3cqw;
	padding-top: 2cqw;
}
#interview .racers > li .nameArea p
{
	--fzUnit:var(--u);
	--Fcolor: var(--Ctheme1);
	color: white;
	transform: skewX(-10deg);
}
#interview .racers > li .nameArea .number{	font-size: 8cqw;	}
#interview .racers > li .nameArea .name{	font-size: 10cqw;	}
#interview .racers > li .nameArea .racer{	font-size: 6cqw;	}

}
@media screen and (max-width: 767px)
{

#interview .dates{	grid-template-columns: repeat(3, 1fr);	width: 100%;	}
#interview .racers{	grid-template-columns: repeat(2, 1fr);	}

}

/* ================================================================================
pop
================================================================================ */
@media print, screen
{
.pop
{
	z-index: 10000000;
	position: fixed;
	top: 0;	left: 0;

	display: flex;	justify-content: center;	align-items: center;
	display: none;
	width: 100vw;	height: 100vh;
	padding: 0 var(--pageP);
	background: rgb(0,0,0,0.8);
}

.pop > .cover
{
	position: absolute;
	top: 0;	left: 0;
	width: 100%;	height: 100%;
}
.pop > .inner
{
	position: relative;
	width: 100%;	max-width: calc(1000 * var(--v));
	padding: calc(30 * var(--v)) calc(40 * var(--v));
	background: black;
	box-shadow: 0 0 calc(20 * var(--v)) rgb(255,255,255,0.4);
}
.pop .close
{
	z-index: 10;
	position: absolute;
	top: calc(-60 * var(--v));	right: calc(-10 * var(--v));
	/* width: calc(60 * var(--v));	aspect-ratio: 1; */
	color: white;
	font-size: var(--fzv40);
}

.pop .movieArea
{
	max-width: calc(1000 * var(--v));
	margin: 0 auto;
	/* background: var(--Cgray0); */
}

.pop .movie,
.pop iframe.youtube
{
	position: relative;
	display: block;
	width: 100%;	aspect-ratio: calc(640/360);
}

}
@media screen and (max-width: 767px)
{

.pop > .inner
{
	width: 100%;
	/* padding: calc(40 * var(--v)) var(--pageP); */
}
.pop .close
{
	/* top: calc(-45 * var(--v));	right: calc(-20 * var(--v)); */
	/* width: calc(88 * var(--v));	aspect-ratio: 1; */
}

}




/* ======================================== end ======================================== */