@charset "UTF-8";

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

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

}

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

#mainvisual
{
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 0;
	overflow: hidden;
	height: 821px;
	background: #08a9dc;
}
#mainvisual > .inner{ width: 100%; max-width: none; padding: 0; }
#mainvisual .mainvisualContent
{
	position: relative;
	left: 50%;
	display: block;
	width: 1920px;
	height: 821px;
	transform: translateX(-50%);
}
#mainvisual .mainvisualContent img
{
	display: block;
	width: 1920px;
	max-width: none;
	height: 821px;
	object-fit: contain;
}

}
@media screen and (max-width: 767px)
{
	#mainvisual{ height: auto; }
	#mainvisual .mainvisualContent,
	#mainvisual .mainvisualContent img{ width: 100vw; height: auto; }

}
@media screen and (min-width: 768px) and (max-width: 1279px)
{
	#mainvisual{ height: calc(100vw * 821 * 1.5 / 1920); }
	#mainvisual .mainvisualContent,
	#mainvisual .mainvisualContent img{ width: 150vw; height: auto; }
}
@media screen and (min-width: 1921px)
{
	#mainvisual{ height: calc(100vw * 821 / 1920); }
	#mainvisual .mainvisualContent,
	#mainvisual .mainvisualContent img{ width: 100vw; height: auto; }
}

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


#pickup
{
	position: relative;
	z-index: 2;
	margin-top: calc(-45 * var(--v));
	padding: calc(72 * var(--u)) 0 calc(90 * var(--u));
	background: url("../image/index/pickup_background.webp") repeat;
}
#pickup > .inner{	padding-inline: var(--pageP);	}
#pickup .items
{
	display: grid;	grid-template-columns: repeat(4, 1fr);
	/* gap: calc(24 * var(--u)); */
}
#pickup .item a{	position: relative;	display: block;	}
#pickup .item picture img
{
	width: 100%;
	height: auto;
	object-fit: contain;
}
#pickup .item a[disabled]{	filter: var(--filterDisabled);	}

}
@media screen and (min-width: 768px)
{
#pickup .item a{	transition: var(--T02);	}
#pickup .item a:hover{	transform: scale(1.04) rotate(5deg);	}
#pickup .item a:hover::before{	transform: translate(calc(2 * var(--u)) , calc(2 * var(--u)));	}
}
@media screen and (max-width: 767px)
{
	#pickup
	{
		padding: calc(60 * var(--u)) 0;
		margin-top: 0px;
	 background-image: url("../image/index/pickup_background_sp.webp");
	 background-size: 122px 630px;
	}
#pickup .items
{
	display: grid;	grid-template-columns: repeat(2, 1fr);
	gap: calc(40 * var(--u)) 0;
}
}


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

#news{ background: #fbf0d1;	}
#news h2
{
	position: relative;
	z-index: 2;
	width: calc(1000 * var(--u));	aspect-ratio: 1000/184;
	margin-inline: auto;
	margin-bottom: calc(-60 * var(--u));
}
#news .frameOuter
{
	--R: calc(20 * var(--v));

	height: calc(250 * var(--v));

	padding: calc(7 * var(--v));

	background: var(--Ctheme4);
	border: 1px solid black;
	border-radius: var(--R);
}
#news .frameMid
{
	height: 100%;
	padding: calc(55 * var(--v)) var(--pageP) calc(22 * var(--v));

	background: white;
	border: 1px solid black;
	border-radius: calc(0.6 * var(--R));
}
#news .frameInner
{
	height: 100%;
	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(--Clink0);
	border: none;
	border-radius: 0;
}
#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: black;

	--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(--Clink0);
	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 h2
{
	width: 100%; aspect-ratio: 728/166;
	margin-bottom: calc(-50 * var(--u));

	transform: scale(1.04);
}
#news .frameOuter
{
	height: calc(280 * var(--v));
}
#news li{	flex-direction: column;	}

}

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

#tenbo{	background: url("../image/common/yellowPattern.png") repeat;	}
#tenbo h2
{
	width: calc(1000 * var(--u));	aspect-ratio: 1000/204;
	margin-inline: auto;
	margin-bottom: calc(-80 * var(--u));
}

#tenbo .contents
{
	--R: calc(20 * var(--v));

	padding: calc(7 * var(--v));
	background: #f8b868;
	border: 1px solid black;
	border-radius: var(--R);
}
#tenbo .contents > .inner
{
	padding-inline: var(--pageP);

	background: white;
	border: 1px solid black;
	border-radius: calc(0.6 * var(--R));
}

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

#tenbo h2
{
	width: 100%; aspect-ratio: 728/147;
	margin-bottom: calc(-50 * var(--u));

	transform: scale(1.04);
}

}


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

#dream{	background: url("../image/index/dream_backgroud.webp") no-repeat center center/cover;	}
#dream h2
{
	width: calc(1000 * var(--u));	aspect-ratio: 1000/159;
	margin-inline: auto;
}

#dream .ancs [id*="anc"]
{
	position: relative;

	width: 100%;	aspect-ratio: 1214/519;
	padding-top: calc(60 * var(--u));
	padding-inline: calc(20 * var(--u)) calc(35 * var(--u));
	background: url("../image/index/dream_ancBackground.webp") no-repeat center center/contain;
}

#dream .ancs .date
{
	width: calc(200 * var(--u));

	--fz:20;	--fzUnit:var(--u);
	color: white;
	font-weight: 700;
	text-align: center;
}
#dream .ancs h3
{
	position: absolute;
	top: calc(55 * var(--u));	left: calc(240 * var(--u));

	--fz:30;	--fzUnit:var(--u);
	font-weight: 700;
}

#dream .ancs .players
{
	display: grid;	grid-template-columns: repeat(6, 1fr);
	gap: calc(50 * var(--u)) calc(20 * var(--u));

	margin-top: calc(40 * 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: 26cqw;	left: 5cqw;
	width: 90cqw;
}
#dream .ancs .players .racer img{	width: 100%;	}

#dream .ancs .players .infoArea
{
	z-index: 3;
	position: absolute;
	top: 143cqw;	left: 10cqw;
	width: 80cqw;
}
#dream .ancs .players .infoArea :is(.number , .area)
{
	color: white;
	font-size: 8.5cqw;
	font-weight: 700;
	text-align: right;
	line-height: 1.2;
}


#dream .ancs .players .nameArea
{
	z-index: 3;
	position: absolute;
	top: 175cqw;	left: 5cqw;
	display: flex;	flex-wrap: wrap;	justify-content: center;	align-items: center;
	width: 90cqw;
}
#dream .ancs .players .nameArea .name
{
	--color: white;
	color: black;
	font-size: 14cqw;
	font-weight: 700;
	letter-spacing: 0.05em;

	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);
}
#dream .ancs .note{	--fz: 16;	}

#dream .buttonDetail a
{
	position: relative;
	display: block;
	width: calc(498 * var(--v));	aspect-ratio: 498/93;
	margin-inline: auto;

	filter: drop-shadow(calc(10 * var(--u)) calc(10 * var(--u)) 0 rgb(0 0 0/0.5));
}

}
@media screen and (min-width: 768px)
{
#dream .buttonDetail a{	transition: var(--T02);	}
#dream .buttonDetail a:hover
{
	transform: translate(calc(5 * var(--u)), calc(5 * var(--u)));
	filter: drop-shadow(0 0 0 rgb(0 0 0/0.5));
}

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

#dream h2
{
	width: 100%; aspect-ratio: 728/116;
	transform: scale(1.04);
}

#dream .ancs [id*="anc"]
{
	width: 100%;	aspect-ratio: 711/1062;
	padding-top: calc(48 * var(--u));
	padding-inline: calc(24 * var(--u)) calc(35 * var(--u));
	background: url("../image/index/dream_ancBackground_sp.webp") no-repeat center center/contain;
}
#dream .ancs .date
{
	width: 38vw;
	--fz:30;
}
#dream .ancs h3
{
	position: static;
	margin-top: calc(30 * var(--v));
	--fz:35;
}
#dream .ancs .players
{
	display: grid;	grid-template-columns: repeat(3, 1fr);
	gap: calc(30 * var(--u)) calc(20 * var(--u));

	margin-top: calc(30 * var(--u));
}



}



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