@charset "UTF-8";

/* ================================================================================
main, content
================================================================================ */
@media print, screen
{

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

}

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

#mainvisual{	padding: 0;	}

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

}

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

#pickup{	padding-inline: 0;	}
#pickup > .inner{	padding-inline: var(--pageP);	}
#pickup .items
{
	display: grid;	grid-template-columns: repeat(3, 1fr);
	gap: calc(70 * var(--u));
}
#pickup .item a{	position: relative;	display: block;	}
#pickup .item a::before
{
	position: absolute;
	top: 0;	left: 0;

	content: "";
	display: block;
	width: 100%;	height: 100%;
	background: url("../image/index/pickupFrame.webp") no-repeat center / contain;
}
#pickup .item a[disabled]{	filter: var(--filterDisabled);	}

}
@media screen and (min-width: 768px)
{
#pickup .item a{	transition: var(--T05);	}
#pickup .item a:hover{	transform: translate(calc(-4 * var(--u)) , calc(-4 * var(--u)));	}

#pickup .item a::before{	transition: var(--T03);	}
#pickup .item a:hover::before{	transform: translate(calc(2 * var(--u)) , calc(2 * var(--u)));	}
}
@media screen and (max-width: 767px)
{
#pickup .items
{
	display: grid;	grid-template-columns: repeat(2, 1fr);
	gap: calc(70 * var(--u)) calc(30 * var(--u));
}
}

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

#news{	padding-inline: 0;	}
#news > .inner{	padding-inline: var(--pageP);	}
#news h2
{
	width: calc(220 * var(--u));	aspect-ratio: 220/56;
	margin-inline: auto;
}
#news .frameOuter
{
	position: relative;
	height: calc(220 * var(--v));
	padding: calc(30 * var(--u));

	background: white;
	border: 4px solid var(--Ctheme2);
	border-radius: calc(20 * var(--u));
}
#news .frameInner
{
	height: 100%;
	padding-right: calc(20 * var(--u));
	overflow-y: scroll;
}
#news .frameInner::-webkit-scrollbar
{
	width: calc(22 * var(--v));
	background: transparent;
}
#news .frameInner::-webkit-scrollbar-thumb
{
	height: calc(74 * var(--u));
	background: var(--Ctheme4);
	border: 2px solid var(--Ctheme2);
	border-radius: calc(6 * var(--u));
}
#news ul
{
	display: flex;	flex-direction: column;
	gap: calc(30 * var(--u));
}
#news li
{
	display: flex;	align-items: start;
	gap: calc(10 * var(--v)) calc(30 * var(--u));
}
#news li .date
{
	flex-shrink: 0;
	width: calc(120 * var(--v));
}
#news li .date p
{
	background: var(--Ctheme4);

	--fz:18;
	color: white;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}
#news li .content p
{
	--fz: 18;
	line-height: 1.5;
}
#news li .content p a
{
	color: var(--Ctheme4);
	font-weight: 500;
	text-decoration: underline;
}

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

#news li .content p a:hover{	text-decoration: unset;	}

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

#news .frameOuter
{
	height: calc(300 * var(--v));
	padding-inline: var(--pageP);
}
#news li{	flex-direction: column;	}

}

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

#dream .ancs .players
{
	display: grid;	grid-template-columns: repeat(6, 1fr);
	gap: calc(50 * var(--u)) calc(20 * var(--u));
}
#dream .ancs .players li
{
	container-type: inline-size;
	position: relative;
}
#dream .ancs .players .frame
{
	z-index: 2;
	position: relative;
	width: 100%;
}
#dream .ancs .players .frame img{	width: 100%;	}
#dream .ancs .players .racer
{
	z-index: 1;
	position: absolute;
	top: 19cqw;	left: 10cqw;
	width: 85cqw;
}
#dream .ancs .players .racer img{	width: 100%;	}
#dream .ancs .players .nameArea
{
	z-index: 3;
	position: absolute;
	top: 156cqw;	left: 10cqw;
	display: flex;	flex-wrap: wrap;	justify-content: center;	align-items: center;
	gap: 3cqw 5cqw;
	width: 85cqw;
}
#dream .ancs .players .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 .ancs .players li:nth-child(1) .nameArea p{	--color: var(--Cgou1t);	}
#dream .ancs .players li:nth-child(2) .nameArea p{	--color: var(--Cgou2);	}
#dream .ancs .players li:nth-child(3) .nameArea p{	--color: var(--Cgou3);	}
#dream .ancs .players li:nth-child(4) .nameArea p{	--color: var(--Cgou4);	}
#dream .ancs .players li:nth-child(5) .nameArea p{	--color: var(--Cgou5);	}
#dream .ancs .players li:nth-child(6) .nameArea p{	--color: var(--Cgou6);	}

#dream .ancs .players .nameArea .number
{
	font-family: var(--Oswald);
	font-size: 10cqw;
}
#dream .ancs .players .nameArea .area{	font-size: 9cqw;	}
#dream .ancs .players .nameArea .name
{
	font-size: 15cqw;
	letter-spacing: 0.05em;
}
#dream .ancs .note{	--fz: 16;	}

#dream .buttonDetail a
{
	position: relative;
	display: block;
	width: calc(318 * var(--v));
	margin-inline: auto;
}
#dream .buttonDetail a::before
{
	position: absolute;
	top: 0;	left: 0;

	content: "";
	display: block;
	width: 100%;	height: 100%;
	background: url("../image/common/buttonDetailFrame.webp") no-repeat center / contain;
}

}
@media screen and (min-width: 768px)
{
#dream .buttonDetail a{	transition: var(--T05);	}
#dream .buttonDetail a:hover{	transform: translate(calc(-4 * var(--u)) , calc(-4 * var(--u)));	}

#dream .buttonDetail a::before{	transition: var(--T03);	}
#dream .buttonDetail a:hover::before{	transform: translate(calc(2 * var(--u)) , calc(2 * var(--u)));	}
}
@media screen and (max-width: 767px)
{
#dream .ancs .players{	display: grid;	grid-template-columns: repeat(3, 1fr);	}
}



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