@charset "UTF-8";


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

#mainvisual > .inner{ padding-block: calc(40 * var(--v)) 0;	}
#mainvisual picture
{
	width: 100%;	aspect-ratio: 1200/780;
	box-shadow:
		0 0 1.0rem rgb(255 255 255/1),
		0 0 0.7rem rgb(255 255 255/1),
		0 0 0.4rem rgb(255 255 255/1);
}

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

#mainvisual{	padding: 0;	}
#mainvisual > .inner{ padding: 0;	}
#mainvisual picture
{
	width: 100%;	aspect-ratio: 750/1118;
	box-shadow: none;
}

}


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

.waveArea
{
	z-index: 2;
	position: relative;
	padding-block: calc(70 * var(--u)) calc(250 * var(--u));
	background: url('../../asset/image/index/backgroundWave.webp') no-repeat top center/cover;
}

.waveArea .accs
{
	position: relative;
	width: 100%;	max-width: var(--PWu);
	margin-inline: auto;
}
.waveArea .accs > li
{
	z-index: 10;
	position: absolute;
}
.waveArea .accs > li:nth-child(1)
{
	top: calc(120 * var(--u));	right: calc(-270 * var(--u));
	width: calc(488 * var(--u));	aspect-ratio: 488/284;
}

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

.waveArea
{
	padding-block: calc(120 * var(--u)) calc(250 * var(--u));
	margin-top: calc(-160 * var(--u));
	background: url('../../asset/image/index/backgroundWave_sp.webp') no-repeat top center/cover;
}
.waveArea .accs > li:nth-child(1)
{
	top: calc(450 * var(--u));	right: calc(-35 * var(--u));
	width: calc(240 * var(--u));
}

}



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

#pickup > .inner{	padding-inline: var(--PPu);	}
#pickup .items{	display: grid;	grid-template-columns: repeat(4, 1fr);	}
#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(4deg);	}
#pickup .item a:hover::before{	transform: translate(calc(2 * var(--u)) , calc(2 * var(--u)));	}
}
@media screen and (max-width: 767px)
{

#pickup > .inner{	padding-inline: 0;	}
#pickup .items
{
	display: grid;	grid-template-columns: repeat(2, 1fr);
	gap: calc(20 * var(--u)) 0;

	transform: translateX(-2vw);
}
}


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

#news .frameA > .inner{	padding-bottom: calc(20 * var(--v));	}

#news .scrollArea
{
	height: calc(150 * var(--v));
	overflow-y: scroll;
}
#news .scrollArea::-webkit-scrollbar
{
	width: calc(13 * var(--v));
	background: var(--Ctheme1);
}
#news .scrollArea::-webkit-scrollbar-thumb
{
	height: calc(42 * var(--u));
	background: var(--Ctheme2);
	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: var(--Ctheme2);
	border-radius: 0.3em;

	--fz:18;
	color: white;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}
#news li .content p
{
	--fz: 18;
	font-weight: 700;
	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 li{	flex-direction: column;	}
#news .scrollArea{	height: calc(180 * var(--v));	}

}

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

#tenbo
{
	z-index: 3;
	position: relative;
	margin-top: calc(-200 * var(--u));
}
#tenbo::after
{
	z-index: 1;
	position: absolute;
	top: 0;	left: 0;

	content: "";
	display: block;

	width: 100%;	aspect-ratio: 1920/157;
	background: url('../../asset/image/index/tenbo_backgroundT.webp') no-repeat top center/cover;
}
#tenbo::before
{
	z-index: 1;
	position: absolute;
	top: calc(100vw * 155/1920);	left: 0;

	content: "";
	display: block;

	width: 100%;	height: 110%;
	background: url('../../asset/image/index/tenbo_backgroundP.webp') repeat-y top center/100%;
}

#tenbo .accs
{
	position: relative;
	width: 100%;	max-width: var(--PWu);
	margin-inline: auto;
}
#tenbo .accs > li
{
	z-index: 10;
	position: absolute;
}
#tenbo .accs > li:nth-child(1)
{
	top: calc(-200 * var(--u));	left: calc(-320 * var(--u));
	width: calc(296 * var(--u));	aspect-ratio: 296/321;
}
#tenbo .accs > li:nth-child(2)
{
	top: calc(-130 * var(--u));	right: calc(-280 * var(--u));
	width: calc(262 * var(--u));	aspect-ratio: 262/286;
}

#tenbo > .inner
{
	z-index: 2;
	position: relative;
	padding-top: 8.5vw;
}

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

#tenbo > .inner{	padding-top: 12vw;	}
#tenbo .accs > li:nth-child(1)
{
	top: calc(20 * var(--u));	left: calc(20 * var(--u));
	width: calc(160 * var(--u));
}
#tenbo .accs > li:nth-child(2)
{
	top: calc(-10 * var(--u));	right: calc(-10 * var(--u));
	width: calc(160 * var(--u));
}


}


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

.waveArea + #dream{	margin-top: calc(-80 * var(--v));	}

#dream
{
	z-index: 3;
	position: relative;
}
#dream::after
{
	z-index: 1;
	position: absolute;
	top: 0;	left: 0;

	content: "";
	display: block;

	width: 100%;	aspect-ratio: 1920/59;
	background: url('../../asset/image/index/dream_backgroundT.webp') no-repeat top center/cover;
}
#dream::before
{
	z-index: 1;
	position: absolute;
	top: calc(100vw * 59/1920);	left: 0;

	content: "";
	display: block;

	width: 100%;	height: 110%;
	background: url('../../asset/image/common/patternDotsG.webp') repeat top center;
}

#dream .accs{	position: relative;	}
#dream .accs > li
{
	z-index: 10;
	position: absolute;
	top: calc(20 * var(--u));	

	width: 37.5vw;	aspect-ratio: 745/226;
	max-width: calc(745 * var(--u));
}
#dream .accs > li:nth-child(1){	left: calc(-1 * var(--PPu));	}
#dream .accs > li:nth-child(2){	right: calc(-1 * var(--PPu));	}

#dream > .inner
{
	z-index: 2;
	position: relative;
	padding-top: min(8.5vw, calc(120 * var(--v)));
}

#dream .link1
{
	margin-top: calc(30 * var(--v));

	--fz:32;
	color: var(--Ctheme2);
	font-weight: 600;
	text-align: center;
}
#dream .link1 a
{
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

#dream hr.line
{
	height: 5px;
	background: url('../image/index/lineDotP.webp') repeat-x center center;
	margin-block: calc(30 * var(--v));
}

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

	margin-top: calc(50 * var(--u));
}
#dream .players.mode0{	margin-top: 0;	}

#dream .players li
{
	container-type: inline-size;
	position: relative;
}
#dream .players .frame
{
	z-index: 2;
	position: relative;
	width: 100%;
}
#dream .players .frame img{	width: 100%;	}
#dream .players .racer
{
	z-index: 1;
	position: absolute;
	top: 34cqw;	left: 2cqw;
	width: 96cqw;
}
#dream .players .racer img{	width: 100%;	}

#dream .players .infoArea
{
	z-index: 3;
	position: absolute;
	top: 184cqw;	right: 8cqw;
	width: 80cqw;
}
#dream .players .infoArea :is(.number , .area)
{
	--color: #c1a64f;

	color: white;
	font-size: 8.5cqw;
	font-weight: 700;
	text-align: right;
	line-height: 1.2;

	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),
		0.2em 0.2em 0.2em rgb(0 0 0/0.7)
		;
}
#dream .players:not(.mode0) li:nth-child(1) .infoArea :is(.number , .area){	--color: #818181;	}
#dream .players:not(.mode0) li:nth-child(2) .infoArea :is(.number , .area){	--color: #000000;	}
#dream .players:not(.mode0) li:nth-child(3) .infoArea :is(.number , .area){	--color: #C50602;	}
#dream .players:not(.mode0) li:nth-child(4) .infoArea :is(.number , .area){	--color: #0266D2;	}
#dream .players:not(.mode0) li:nth-child(5) .infoArea :is(.number , .area){	--color: #E88300;	}
#dream .players:not(.mode0) li:nth-child(6) .infoArea :is(.number , .area){	--color: #268801;	}

#dream .players .nameArea
{
	z-index: 3;
	position: absolute;
	top: 210cqw;	right: 8cqw;
	display: flex;	flex-wrap: wrap;	justify-content: center;	align-items: center;
}
#dream .players .nameArea .name
{
	--color: white;
	color: black;
	font-size: 13cqw;
	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 .notesA{	margin-top: calc(30 * var(--v));	}
#dream .notesA li{	text-align: center;	}

#dream .frameA{	padding-bottom: calc(30 * var(--v));	}
#dream .buttonDetail{	padding-top: calc(30 * var(--v));	}
#dream .buttonDetail a
{
	position: relative;
	display: block;
	width: calc(400 * var(--v));	aspect-ratio: 400/80;
	margin-inline: auto;
}

}
@media screen and (min-width: 768px)
{
#dream .link1 a:hover{	text-decoration: none;	}
}
@media screen and (max-width: 767px)
{

#dream::after
{
	aspect-ratio: 750/35;
	background: url('../../asset/image/index/dream_backgroundT_sp.webp') no-repeat top center/cover;
}
#dream::before
{
	top: calc(100vw * 35/750);	left: 0;
	background: url('../../asset/image/common/patternDotsG.webp') repeat top center/2.1vw;
}

#dream .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 ======================================== */