@charset "UTF-8";

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

#racer .racers
{
	display: grid;	grid-template-columns: repeat(4, 1fr);
	gap: calc(40 * var(--u));
}
#racer .racers li
{
	container-type: inline-size;
	background: var(--Ctheme2);
}
#racer .racers li > .inner
{
	width: 100%;	height: 100%;
	padding: 5cqw;
}
#racer .racers .line1
{
	display: flex;	justify-content: center;	align-items: center;
	gap: 3cqw;
}
#racer .racers .line1 .area
{
	color: white;
	font-size: 7cqw;
	font-weight: 700;
}
#racer .racers .line1 .class
{
	padding: 0.8cqw 2.8cqw 0.1cqw;
	background: white;

	font-family: var(--Roboto);
	font-size: 7cqw;
	font-weight: 500;
}
#racer .racers .line2
{
	display: flex;	justify-content: center;	align-items: center;
	gap: 3cqw;

	margin-top: 4cqw;
	transform: skewX(-10deg);
}
#racer .racers .line2 .number
{
	color: white;
	font-family: var(--Roboto);
	font-size: 9cqw;
	font-weight: 700;
}
#racer .racers .line2 .name
{
	color: white;
	font-family: var(--Roboto);
	font-size: 10cqw;
	font-weight: 700;
}
#racer .racers picture{	margin-top: 3cqw; }
#racer .racers .title1
{
	padding: 2cqw;
	margin-top: 4cqw;

	font-size: 7cqw;
	color: white;
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
}
#racer .racers .title1.gold{	background: #EDC523;	}
#racer .racers .title1.bronze{	background: #E29425;	}
#racer .racers .title2
{
	padding: 2cqw;
	margin-top: 4cqw;

	background: #C72F2B;

	font-size: 7cqw;
	color: white;
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
}
#racer .racers .results
{
	position: relative;
	display: grid;	grid-template-columns: 1fr 1fr;
	gap: 1px 2px;
	margin-top: 4cqw;
}
#racer .racers .results.noData::before
{
	z-index: 2;
	position: absolute;
	top: calc(11cqw + 1px);	left: calc(50% + 1px);

	content: "集計期間に\A 出走なし";
	white-space: pre-wrap;

	display: flex;	justify-content: center;	align-items: center;
	width: calc(50% - 1px);	height: calc(100% - 11cqw - 1px);

	background: rgb(255 255 255);

	font-size: 5.5cqw;
	color: var(--Cgray1);
	font-weight: 500;
	text-align: center;
	line-height: 1.5;
}


#racer .racers .results > *:nth-child(1),
#racer .racers .results > *:nth-child(2)
{
	height: 11cqw;
	padding: 2cqw;
	color: white;
	font-size: 6cqw;
	font-weight: 600;
	text-align: center;
}
#racer .racers .results > div
{
	display: grid;	grid-template-columns: 1fr 1fr;
	/* gap: 1cqw; */
	gap: 1px;
}
#racer .racers .results > div > p:nth-child(1)
{
	padding: 2cqw;
	background: #E49482;

	color: white;
	font-size: 5.5cqw;
	font-weight: 600;
	text-align: center;
}
#racer .racers .results > div > p:nth-child(2)
{
	padding: 2cqw;
	background: white;

	font-family: var(--Roboto);
	font-size: 5.5cqw;
	font-weight: 700;
	text-align: center;
}

#racer .note
{
	--fz:20;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

}
@media screen and (min-width: 768px)
{

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

#racer .racers
{
	display: grid;	grid-template-columns: repeat(3, 1fr);
	gap: calc(20 * var(--u));
}

}


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

#dream .contentsArea > .contents{	padding-inline: var(--pageP);	}

#dream .players
{
	display: flex;	flex-direction: column;
	gap: calc(50 * var(--u)) calc(70 * var(--u));
}
#dream .players li{	display: flex;	justify-content: space-between;	}
#dream .players li:nth-child(1){	--color: var(--Cgou1);	}
#dream .players li:nth-child(2){	--color: var(--Cgou2);	}
#dream .players li:nth-child(3){	--color: var(--Cgou3);	}
#dream .players li:nth-child(4){	--color: var(--Cgou4);	}
#dream .players li:nth-child(5){	--color: var(--Cgou5);	}
#dream .players li:nth-child(6){	--color: var(--Cgou6);	}

#dream .players li > .box:nth-child(1){	width: 48%;	}
#dream .players .thumb
{
	container-type: inline-size;

	position: relative;
	aspect-ratio: calc(580/422);
}
#dream .players .thumb .frame
{
	z-index: 2;
	position: absolute;
	top: 0;	left: 0;
	width: 100%;	height: 100%;
}
#dream .players .thumb .racer
{
	z-index: 1;
	position: absolute;
	top: 13cqw;	left: 11cqw;
	width: 85cqw;	aspect-ratio: 495/325;
}
#dream .players .name span:first-child{	font-size: 3.5cqw;	font-style: italic;	}
#dream .players .name span:last-child{	font-size: 6.5cqw;	font-style: italic;	}

#dream .players .thumb .nameArea
{
	z-index: 3;
	position: absolute;
	top: 35cqw;	left: 12cqw;

	display: flex;	flex-wrap: wrap;	justify-content: center;	align-items: center;
	gap: 1cqw 2cqw;
	width: 45%;
}
#dream .players .thumb .nameArea p
{
	--color: var(--Cgou1);
	color: white;
	font-weight: 900;

	text-shadow:
		-2px -2px 0 var(--color),  2px -2px 0 var(--color), -2px  2px 0 var(--color),  2px  2px 0 var(--color),
		-2px  0px 0 var(--color),  2px  0px 0 var(--color),  0px -2px 0 var(--color),  0px  2px 0 var(--color),
		
		3px 3px 0 var(--color),  4px 4px 0 var(--color),  5px 5px 0 var(--color);

	transform: skewX(-10deg);
}
#dream .players li:nth-child(1) .thumb .nameArea p{	--color: var(--Cgou1t);	}
#dream .players li:nth-child(2) .thumb .nameArea p{	--color: var(--Cgou2);	}
#dream .players li:nth-child(3) .thumb .nameArea p{	--color: var(--Cgou3);	}
#dream .players li:nth-child(4) .thumb .nameArea p{	--color: var(--Cgou4);	}
#dream .players li:nth-child(5) .thumb .nameArea p{	--color: var(--Cgou5);	}
#dream .players li:nth-child(6) .thumb .nameArea p{	--color: var(--Cgou6);	}

#dream .players .thumb .nameArea .number
{
	font-family: var(--Oswald);
	font-size: 4cqw;
}
#dream .players .thumb .nameArea .area{	font-size: 4cqw;	}
#dream .players .thumb .nameArea .name
{
	font-size: 6cqw;
	letter-spacing: 0.05em;
}

#dream .players li > .box:nth-child(2)
{
	container-type: inline-size;
	width: 48%;
}
#dream .players .title
{
	display: flex;	justify-content: center;	align-items: center;
	width: 100%;	aspect-ratio: 570/70;

	margin: 9.3cqw 0 2.5cqw;

	font-size: 4.5cqw;
	font-weight: 500;
	text-align: center;
}
#dream .players li:nth-child(1) .title{	background: var(--Cgou1);	border: 2px solid var(--Cgray0);	}
#dream .players li:nth-child(2) .title{	background: var(--Cgou2);	color: white;	}
#dream .players li:nth-child(3) .title{	background: var(--Cgou3);	color: white;	}
#dream .players li:nth-child(4) .title{	background: var(--Cgou4);	color: white;	}
#dream .players li:nth-child(5) .title{	background: var(--Cgou5);	color: white;	}
#dream .players li:nth-child(6) .title{	background: var(--Cgou6);	color: white;	}


#dream .players table
{
	width: 100%;
	margin: 0 auto 3cqw;

	border: 2px solid var(--Cgray0);
	border-collapse: collapse;
	background: white;
}
#dream .players table tr:nth-child(2n+3){	background-color: rgb(245,245,245);	}
#dream .players table th
{
	background-color: black;
	border: 1px solid var(--Cgray1);

	padding: 0.3em;

	color: white;
	font-size: 3.5cqw;
	font-weight: 500;
	text-align: center;
	line-height: 1.2;
}
#dream .players table th:nth-child(1){	width: 5em;	}
#dream .players table th:nth-child(2){	width: 6em;	}
#dream .players table th:nth-child(3){	width: 4em;	}
#dream .players table th:nth-child(4){	width: 6em;	}

#dream .players table td
{
	border: 1px solid var(--Cgray1);

	padding: 0.25em 0;

	font-size: 4.2cqw;
	/* font-weight: 500; */
	text-align: center;
}
#dream .players table td:first-child{	font-weight: 700;	}
#dream .players table tr:nth-child(2) td:first-child{	background-color: var(--Cgou1);	}
#dream .players table tr:nth-child(3) td:first-child{	background-color: var(--Cgou2); color: white;	}
#dream .players table tr:nth-child(4) td:first-child{	background-color: var(--Cgou3); color: white;	}
#dream .players table tr:nth-child(5) td:first-child{	background-color: var(--Cgou4); color: white;	}
#dream .players table tr:nth-child(6) td:first-child{	background-color: var(--Cgou5);	}
#dream .players table tr:nth-child(7) td:first-child{	background-color: var(--Cgou6); color: white;	}

#dream .players table td:last-child .bar{	display: flex;	align-items: center;	}
#dream .players table td:last-child hr{	height: 2.9cqw;	}
#dream .players table td:last-child hr:nth-child(1){	background-color: var(--Cgou3);	}
#dream .players table td:last-child hr:nth-child(2){	background-color: var(--Cgou4);	}
#dream .players table td:last-child hr:nth-child(3){	background-color: var(--Cgou6);	}

#dream .players .guide
{
	display: flex;	justify-content: center;	align-items: center;
	gap: 2cqw;
	text-align: center;
}
#dream .players .guide p
{
	display: flex;	align-items: center;
	font-size: 3.5cqw;
}

#dream .players .guide span{	font-size: 1.4em;	margin-right: 0.2em;	}
#dream .players .guide p:nth-child(1) span{	color: var(--Cgou3);	}
#dream .players .guide p:nth-child(2) span{	color: var(--Cgou4);	}
#dream .players .guide p:nth-child(3) span{	color: var(--Cgou6);	}

#dream .note
{
	--fz:20;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

}
@media screen and (max-width: 767px)
{
#dream .players li
{
	flex-direction: column;
	gap: calc(30 * var(--u));
}
#dream .players li > .box:nth-child(1){	width: 100%;	}
#dream .players li > .box:nth-child(2){	width: 100%;	}
#dream .players .thumb
{
	margin: 0 auto;
	transform: translateX(-2.5cqw) scale(1.02);
}
#dream .players .title{	margin: 0 0 2.5cqw;	}
}


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

#panf .thumb
{
	position: relative;
	width: fit-content;
	margin: 0 auto;
}
#panf .thumb::before
{
	z-index: 1;
	position: absolute;
	top: 0;	left: 0;

	content: "";
	display: block;
	width: 100%;	height: 100%;
	background: url('../image/common/pdf_cover.webp') no-repeat center/cover;

	pointer-events: none;
	opacity: 0;
}
#panf .thumb picture img
{
	display: block;
	max-width: calc(900 * var(--v));
	margin: 0 auto;
}
#panf p
{
	--fz:24;
	text-align: center;
}

}
@media screen and (min-width: 768px)
{

#panf .thumb::before{	transition: var(--T03);	}
#panf .thumb:hover::before{	opacity: 1;	}

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

}


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