@charset "UTF-8";

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

#mainVisual .visual
{
	aspect-ratio: 1280/900;
	margin: 0 auto;
	box-shadow:
		0 0 calc(20 * var(--v)) rgb(255,255,255,1),
		0 0 calc(10 * var(--v)) rgb(255,255,255,1),
		0 0 calc(5 * var(--v)) rgb(255,255,255,1)
	;
}

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

#mainVisual{	padding: 0;	}
#mainVisual > .inner{	padding: 0;	}
#mainVisual .visual
{
	aspect-ratio: 766/1055;
	box-shadow: unset;
}

}

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

#pickup .menus
{
	display: flex;	flex-wrap: wrap;	justify-content: center;	align-items: center;
	gap: calc(40 * var(--v)) calc(45 * var(--u));
}
#pickup .menus > .item{	width: calc(344 * var(--u));	aspect-ratio: 344/199;	}
#pickup .menus > .item:nth-child(7)
{
	width: 100%;	max-width: calc(1200 * var(--v));
	aspect-ratio: unset;
	margin-top: calc(30 * var(--v));
}

#pickup .menus > .item a
{
	display: block;	position: relative;
	filter: drop-shadow(var(--shadow0));
}
#pickup .menus > .item:nth-child(7) a{	filter: unset;	}

#pickup .menus > .item a[disabled]{	filter: var(--filterDisabled);	}
#pickup .menus > .item:nth-child(7):has( a[disabled] ){	display: none;	}


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

#pickup .menus > .item a{	transition: var(--T02);	}
#pickup .menus > .item a:hover
{
	filter: drop-shadow(var(--shadow0)) brightness(1.2);
	transform: scale(1.05);
}
#pickup .menus > .item:nth-child(7) a:hover
{
	filter: brightness(1.2);
	transform: scale(1.05);
}


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

#pickup .menus > .item{	width: calc(310 * var(--u));	}

}

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

#campaignBanner .banner
{
	width: calc(1227 * var(--u));
	aspect-ratio: 1227/140;
	margin: 0 auto;

	/* filter: drop-shadow(var(--shadow0)); */
}
#campaignBanner .banner a{	display: block;	}

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

#campaignBanner .banner a{	transition: var(--T03);	}

#campaignBanner .banner a:hover
{
	filter: brightness(1.2);
	transform: scale(1.02);
}

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

/* #campaignBanner{	margin: 0 0 calc(60 * var(--u));	} */
#campaignBanner .banner{	width: calc(696 * var(--v));	}

}

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

#news .whiteBox
{
	padding: calc(20 * var(--v));
	margin: 0 auto;

	background: white;
	border-radius: calc(15 * var(--v));
}

#news .newsFrame
{
	height: calc(240 * var(--v));
	padding: calc(20 * var(--u)) calc(20 * var(--v));

	overflow-y: scroll;
}

#news .newsFrame::-webkit-scrollbar
{
	width: calc(20 * var(--v));
	background: linear-gradient(90deg,
		var(--Cgray4) 0%,
		var(--Cgray2) 100%		
	);
	border-radius: 4px;
}
#news .newsFrame::-webkit-scrollbar-thumb
{
	background: linear-gradient(90deg,
		var(--Ctheme2) 0%,
		var(--Ctheme1) 100%		
	);
	border-radius: 4px;
}

#news .newsFrame ul
{
	display: flex;	flex-direction: column;
	gap: calc(35 * var(--v));
}
#news .newsFrame li
{
	display: flex;	flex-wrap: wrap;	align-items: start;
	gap: calc(20 * var(--v));
}
#news .newsFrame li .date
{
	display: flex;	justify-content: center;	align-items: center;
	flex-shrink: 0;
	width: calc(160 * var(--v));	height: calc(40 * var(--v));
	background-color: var(--Ctheme2);

	clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 90% 0%);
}
#news .newsFrame li .date p
{
	padding-right: 0.3em;
	color: white;
	font-size: var(--fzv23);
	text-align: center;
	letter-spacing: 0.05em;
	line-height: 1.5;
}
#news .newsFrame li .content
{
	width: calc(100% - (190 + 20) * var(--v));
	padding-top: 0.2em;
}
#news .newsFrame li .content p
{
	font-size: var(--fzv23);
	line-height: 1.5;
}

#news .newsFrame li .content p a
{
	color: var(--Ctheme4);
	font-weight: 500;
	text-decoration: underline;
}

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

#news .newsFrame li .content p a:hover{	color: var(--Cred1);	text-decoration: none;	}

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

#news .newsFrame{	height: calc(320 * var(--v));	}
#news .newsFrame li .content{	width: 100%;	}
#news .newsFrame li .content p{	font-size: var(--fzu26);	}

}

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

#pohotoGallery
{
	padding: 0;
	background: url('../image/index/pohotoGallery_background.webp') no-repeat center/cover;
}
#pohotoGallery > .inner
{
	max-width: 100%;
	height: calc(730 * var(--v));
	padding: calc(80 * var(--v)) 0;
}
#pohotoGallery h2 picture
{
	width: calc(649 * var(--v));	aspect-ratio: 649/98;
	margin: 0 auto;
}

#pohotoGallery .swiper{	pointer-events: none;	}
#pohotoGallery .swiper-wrapper
{
	padding: calc(40 * var(--v)) 0;
	transition: 8.0s linear 0s;
}
#pohotoGallery .swiper-slide
{
	width: calc(315 * var(--v));
	/* aspect-ratio: 315/210; */
	border: calc(10 * var(--v)) solid white;
}
#pohotoGallery .swiper-slide:nth-child(2n){	transform: translate(0,6%);	}
#pohotoGallery .swiper-slide:nth-child(2n+1){	transform: translate(0,-6%);	}
#pohotoGallery .swiper-slide picture
{
	width: 100%;	height: 100%;
	aspect-ratio: 315/210;
}

#pohotoGallery .buttonArea
{
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(15 * var(--v));
}
#pohotoGallery .buttonArea .acc
{
	width: calc(196 * var(--v));	aspect-ratio: 196/57;
}
#pohotoGallery .buttonArea .acc:last-of-type{	transform: scaleX(-100%);	}
#pohotoGallery .buttonArea .button a
{
	display: block;
	background: white;
	border-radius: calc(30 * var(--v));
}
#pohotoGallery .buttonArea .button p
{
	padding: 0.3em 1em;
	color: var(--Ctheme2);
	font-size: var(--fzv38);
	font-weight: 700;
}

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

#pohotoGallery .buttonArea .button a{	transition: var(--T03);	}

#pohotoGallery .buttonArea .button a:hover
{
	filter: brightness(1.2);
	transform: scale(1.02);
}

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

#pohotoGallery{	background: url('../image/index/pohotoGallery_background_sp.webp') no-repeat center/cover;	}
#pohotoGallery > .inner
{
	height: calc(580 * var(--v));
	padding: calc(60 * var(--v)) 0;
}
#pohotoGallery h2 picture{	width: calc(508 * var(--v));	}
#pohotoGallery .swiper-slide{	width: calc(290 * var(--v));	}
#pohotoGallery .buttonArea .acc{	width: calc(160 * var(--v));	}
#pohotoGallery .buttonArea .button p{	font-size: var(--fzv28);	}

}

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

#tenbo > .inner
{
	box-shadow: var(--shadow1);
	border-radius: 0 0 calc(8 * var(--v)) calc(8 * var(--v));
	overflow: hidden;
}
#tenbo .whiteBox
{
	padding: 0 var(--pageP);
	background: white;
}
#tenbo .whiteBox p
{
	font-size: var(--fzv24);
	line-height: 1.8;
	letter-spacing: 0.05em;
}
#tenbo .whiteBox p:not(:last-child){	margin: 0 auto 1em;	}
#tenbo .whiteBox p .small{	font-size: 0.8em;	}
#tenbo .whiteBox p strong{	font-weight: 500;	}
#tenbo .whiteBox p a
{
	color: var(--Ctheme4);
	font-weight: 500;
	text-decoration: underline;
}

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

#tenbo p a:hover{	color: var(--Ctheme4);	text-decoration: none;	}

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

}

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

#dream .whiteBox
{
	padding: 0 var(--pageP);
	background: white;
}
#dream > .inner
{
	box-shadow: var(--shadow1);
	border-radius: 0 0 calc(8 * var(--v)) calc(8 * var(--v));
	overflow: hidden;
}

#dream ul
{
	display: flex;	flex-wrap: wrap;	justify-content: center;
	gap: calc(5 * var(--u));
	width: 100%;
}
#dream li
{
	container-type: inline-size;

	position: relative;
	width: calc(190 * var(--u));	aspect-ratio: 220/425;

	filter: drop-shadow(var(--shadow0));
}
#dream li .frame
{
	z-index: 2;
	position: absolute;
	top: 0;	left: 0;

	width: 100%;	height: 100%;
}
#dream li .racer
{
	z-index: 1;
	position: absolute;
	top: 25cqw;	left: 9cqw;

	width: 89cqw;	aspect-ratio: 170/240;
}

#dream li .texts1
{
	z-index: 3;
	position: absolute;
	top: 150cqw;	left: 9cqw;

	display: flex;	justify-content: center;	align-items: center;
	gap: 3cqw;
	width: 89cqw;	aspect-ratio: 170/34;

	transform: skewX(-10deg);
}
#dream li .texts1 .area
{
	padding: 0.3em;
	background: white;

	font-size: 5.5cqw;
	font-weight: 500;
	text-align: center;
}
#dream li .texts1 .id
{
	color: white;
	font-family: var(--Roboto);
	font-weight: 500;
	font-size: 13cqw;
	text-shadow: var(--shadow0);
}

#dream li .texts2
{
	z-index: 3;
	position: absolute;
	top: 166cqw;	left: 9cqw;

	display: flex;	justify-content: center;	align-items: center;
	width: 89cqw;	aspect-ratio: 170/46;

	transform: skewX(-10deg);
}
#dream li .texts2 .name
{
	color: white;
	font-size: 14cqw;
	font-weight: 500;
	text-align: center;
	text-shadow: var(--shadow0);
}

#dream .note
{
	font-size: var(--fzv20);
	line-height: 1.5;
}

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

#dream ul{	gap: calc(20 * var(--u)) calc(15 * var(--u)); 	}
#dream li{	width: calc(215 * var(--v))	}

}






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