@charset "UTF-8";

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

#mainvisual::before
{
	z-index: 0;
	position: absolute;
	top: 0;	left: 0;

	content: "";
	display: block;
	width: 100%;	aspect-ratio: 1920/1235;

	background: url("../image/common/background1.webp") no-repeat top center/contain;
	pointer-events: none;
}
#mainvisual > .inner
{
	padding: calc(var(--headerH) + 20 * var(--v)) 0 0;
}

#mainvisual picture{	box-shadow: var(--shadow1);	}

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

#mainvisual{	padding: 0;	}
#mainvisual::before
{
	aspect-ratio: 750/1141;
	background: url("../image/common/background1_sp.webp") no-repeat top center/contain;
}
#mainvisual > .inner
{
	padding: var(--headerH) 0 0;
}

}

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

#pickup .items
{
	display: flex;	flex-wrap: wrap;	justify-content: space-between;
}

#pickup .item:nth-child(-n+4){	width: 100%;	}
#pickup .item:nth-child(n+5){	width: calc(358 * var(--u));	aspect-ratio: 358/183;	}

#pickup .item:nth-child(2),
#pickup .item:nth-child(3),
#pickup .item:nth-child(4)
{	margin-top: calc(15 * var(--v));	}
#pickup .item:nth-child(n+4){	margin-top: calc(30 * var(--v));	}

#pickup .item:nth-child(4):has( a[disabled] ){	display: none !important;	}

#pickup .item a
{
	position: relative;
	display: block;
}
#pickup .item a picture:nth-child(2)
{
	position: absolute;
	top: 0;	left: 0;
	width: 100%;	height: 100%;
	opacity: 0;
}
#pickup .item a[disabled]{	filter: var(--filterDisabled);	}

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

#pickup .item a picture{	transition: var(--T02);	}
#pickup .item a:hover picture{	transform: scale(1.02);	}

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

#pickup .item:nth-child(n+5){	width: calc(324 * var(--v));	aspect-ratio: 324/167;	}
#pickup .item:nth-child(2),
#pickup .item:nth-child(3),
#pickup .item:nth-child(4)
{	margin-top: calc(20 * var(--v));	}
#pickup .item:nth-child(n+4){	margin-top: calc(35 * var(--v));	}

}

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

#sns .items
{
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(20 * var(--v));
}
#sns .item{	width: calc(100 * var(--v));	}
#sns .item a[disabled]{	filter: var(--filterDisabled);	}

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

#sns .item a picture{	transition: var(--T02);	}
#sns .item a:hover picture{	transform: scale(1.05);	}

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

#sns .item{	width: calc(115 * var(--v));	}

}

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

#news::before
{
	z-index: 0;
	position: absolute;
	top: 50%;	left: 0;

	content: "";
	display: block;
	width: 100%;	aspect-ratio: 1920/477;

	background: url("../image/common/background2.webp") no-repeat center center/contain;
	transform: translateY(-50%);
	pointer-events: none;
}
#news > .inner
{
	display: flex;	justify-content: space-between;	align-items: center;
	gap: calc(10 * var(--v));
}
#news h2
{
	flex-shrink: 0;
	width: calc(185 * var(--v));	aspect-ratio: 185/155;
}

#news .newsFrame
{
	height: calc(100 * var(--v));
	padding: calc(15 * var(--v)) calc(15 * var(--v)) calc(15 * var(--v)) 0;

	border: 5px solid var(--Cmain1);
	background: white;
}
#news ul
{
	display: flex;	flex-direction: column;
	gap: calc(5 * var(--v));
	height: 100%;

	padding: 0 calc(15 * var(--v));

	overflow-y: scroll;
}
#news ul::-webkit-scrollbar
{
	width: calc(14 * var(--v));
	background: var(--Cgray3);;
}
#news ul::-webkit-scrollbar-thumb{	background: var(--Cmain1);	}
#news li{	display: flex;	}
#news li .date{	flex-shrink: 0;	width: calc(130 * var(--v));	}
#news li .date p
{
	font-size: var(--fzv18);
	font-weight: 500;
	line-height: 1.5;
}
#news li .content p
{
	font-size: var(--fzv18);
	font-weight: 500;
	line-height: 1.5;
}
#news li .content p a{	color: var(--Cmain1);	}

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

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

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

#news::before
{
	aspect-ratio: 750/303;
	background: url("../image/common/background2_sp.webp") no-repeat top center/contain;
}
#news > .inner
{
	flex-direction: column;
	gap: calc(30 * var(--v));
}
#news h2{	width: calc(259 * var(--v));	aspect-ratio: 259/128;	}
#news .newsFrame{	height: calc(200 * var(--v));	}
#news ul{	gap: calc(15 * var(--v));	}
#news li{	flex-direction: column;	gap: calc(5 * var(--v));	}
#news li .date{	width: 100%;	}
/* #news li .date p{	font-size: var(--fzv12);	} */
/* #news li .content p{	font-size: var(--fzv12);	} */

}

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

#racer h2
{
	width: calc(514 * var(--v));	aspect-ratio: 514/138;
	margin: 0 auto calc(140 * var(--v));
}

#racer .MAP_wrap{	margin: 0 auto calc(30 * var(--v));	}
#racer .MAP
{
	position: relative;
	display: block;
	width: 100%;	aspect-ratio: 1197/915;	
}
#racer .MAP svg
{
	display: block;
	width: 100%;	height: 100%;
}
#racer .MAP .pin
{
	position: absolute;
	display: block;
	width: calc(82 * var(--u));	aspect-ratio: 82/114;

	transform: translate(-50%,-100%);
	pointer-events: none;
}
#racer .note
{
	font-size: var(--fzv22);
	font-weight: 500;
}

#racer .pop
{
	z-index: 10;
	position: absolute;
	top: calc(200 * var(--v));	left: 0;
}

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

#racer{	padding: 0;	}
/* #racer > .inner{	z-index: var(--priorityCover);	} */
#racer .MAP_wrap
{
	padding: 0 var(--pageP) calc(30 * var(--v));
	overflow-x: scroll;
}
#racer .MAP_wrap::-webkit-scrollbar
{
	height: calc(5 * var(--v));
	background: var(--Cgray3);;
}
#racer .MAP_wrap::-webkit-scrollbar-thumb{	background: var(--Cmain1);	}
#racer .MAP_wrap .scrollable
{
	position: absolute;
	top: calc(300 * var(--v));	left: calc((100% - 420 * var(--v))/2);
	display: block;
	width: calc(420 * var(--v));	aspect-ratio: 361/280;
	filter: drop-shadow(var(--shadow1));
}

#racer .MAP
{
	width: calc(1197 * var(--v))
}
#racer .note
{
	font-size: var(--fzv12);
	text-align: center;
}

#racer .pop
{
	position: fixed;
	top: 0;	left: 0;

	display: flex;	justify-content: center;	align-items: center;
	display: none;
	width: 100vw;	height: 100vh;
	padding: 0 var(--pageP);
	background: rgb(0,0,0,0.8);
}

}

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

#recommended::before
{
	z-index: 0;
	position: absolute;
	bottom: 0;	right: 0;

	content: "";
	display: block;
	width: 100%;	aspect-ratio: 1920/986;
	background: url("../image/common/background3.webp") no-repeat top center/contain;
	pointer-events: none;
}

#recommended{	padding-bottom: calc(70 * var(--v));	}
#recommended h2
{
	width: calc(220 * var(--v));	aspect-ratio: 220/53;
	margin: 0 auto calc(30 * var(--v));
}
#recommended .racer
{
	display: flex;	flex-wrap: wrap;	align-items: center;
	width: calc((20 * 2 + 343 * 3) * var(--u));
	gap: calc(25 * var(--u)) calc(20 * var(--u));
	margin: 0 auto calc(70 * var(--v));
}
#recommended .racer > li
{
	display: flex;	justify-content: center;	align-items: end;
	gap: calc(10 * var(--u));

	width: calc(343 * var(--u));	aspect-ratio: 343/70;
	padding-bottom: calc(18 * var(--u));
	background: url("../image/index/recommended_plate.webp") no-repeat top center/contain;
}
#recommended .racer > li p
{
	font-size: var(--fzu26);
	font-weight: 600;
}
#recommended .racer > li h3
{
	font-size: var(--fzu34);
	font-weight: 600;
}

#recommended .button
{
	width: calc(565 * var(--v));	aspect-ratio: 565/115;
	margin: 0 auto;
}

#recommended .pop
{
	position: fixed;
	top: 0;	left: 0;

	display: flex;	justify-content: center;	align-items: center;
	display: none;
	width: 100vw;	height: 100vh;
	padding: 0 var(--pageP);
	background: rgb(0,0,0,0.8);
}

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

#recommended::before
{
	aspect-ratio: 750/648;
	background: url("../image/common/background3_sp.webp") no-repeat top center/contain;
}

#recommended .racer
{
	justify-content: space-between;
	width: 100%;
	gap: calc(20 * var(--v));
}
#recommended .racer > li
{
	width: calc((100% - 20 * var(--v))/2);
	padding-bottom: calc(18 * var(--u));
}
#recommended .racer > li p{	font-size: var(--fzv12);	}
#recommended .racer > li h3{	font-size: var(--fzv18);	}
#recommended .button{	width: calc(481 * var(--v));	}

}

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

.pop > .inner
{
	position: relative;
	width: calc(634 * var(--u));	aspect-ratio: 634/504;
	background: url("../image/index/racer_data_background.webp") no-repeat top center/contain;
}

.pop > .inner::after
{
	z-index: 3;
	position: absolute;
	top: 0;	left: 0;

	content: "";
	display: block;
	width: calc(634 * var(--u));	aspect-ratio: 634/504;
	background: url("../image/index/racer_data_frame.webp") no-repeat top center/contain;
}
.pop .close
{
	z-index: 10;
	position: absolute;
	top: calc(-30 * var(--v));	right: calc(-20 * var(--v));

	width: calc(60 * var(--v));	aspect-ratio: 1;
}
.pop .photo
{
	z-index: 1;
	position: absolute;
	top: 0;	left: 0;
	width: calc(260 * var(--u));	height: 100%;
}
.pop .photo picture{	width: 100%;	height: 100%;	}
.pop .photo img{	object-fit: cover;	}

.pop .prefecture
{
	z-index: 2;
	position: absolute;
	top: 0;	left: calc(15 * var(--u));

	display: flex;	justify-content: center;	align-items: center;
	width: calc(78 * var(--u));	aspect-ratio: 78/199;

	padding-bottom: calc(20 * var(--u));

	background: url("../image/index/racer_data_prefecture.webp") no-repeat top center/contain;

	color: white;
	font-size: var(--fzu26);
	font-weight: 500;
	writing-mode: vertical-lr;
}

.pop .data
{
	width: calc(100% - 255 * var(--u));

	padding: calc(20 * var(--u));
	margin: 0 0 0 auto;
}
.pop .data .line
{
	width: calc(316 * var(--u));	aspect-ratio: 316/11;
	margin: 0 auto calc(10 * var(--u));
}

.pop .data .text1,
.pop .data .text2
{
	--Fcolor: var(--Cmain3);

	text-shadow:
		var(--Fcolor) 2px 0px 0px,
		var(--Fcolor) -2px 0px 0px,
		var(--Fcolor) 0px -2px 0px,
		var(--Fcolor) 0px 2px 0px,
		var(--Fcolor) 2px 2px 0px,
		var(--Fcolor) -2px 2px 0px,
		var(--Fcolor) 2px -2px 0px,
		var(--Fcolor) -2px -2px 0px,
		var(--Fcolor) 1px 2px 0px,
		var(--Fcolor) -1px 2px 0px,
		var(--Fcolor) 1px -2px 0px,
		var(--Fcolor) -1px -2px 0px,
		var(--Fcolor) 2px 1px 0px,
		var(--Fcolor) -2px 1px 0px,
		var(--Fcolor) 2px -1px 0px,
		var(--Fcolor) -2px -1px 0px,
		var(--Fcolor) 1px 1px 0px,
		var(--Fcolor) -1px 1px 0px,
		var(--Fcolor) 1px -1px 0px,
		var(--Fcolor) -1px -1px 0px,
		var(--Fcolor) 0 0 calc(6 * var(--u)),
		var(--Fcolor) 0 0 calc(6 * var(--u)),
		var(--Fcolor) 0 0 calc(6 * var(--u));

	color: white;
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.05;
}
.pop .data .text1{	font-size: var(--fzu22);	margin-bottom: calc(5 * var(--u));	}
.pop .data .text2{	font-size: var(--fzu50);	margin-bottom: calc(10 * var(--u));	}
.pop .data .text3,
.pop .data .text4
{
	margin-bottom: calc(5 * var(--u));

	color: white;
	font-size: var(--fzu24);
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.05;
}
.pop .data .text5
{
	color: white;
	font-size: var(--fzu16);
	text-align: center;
}
.pop .data ul
{
	display: flex;	flex-wrap: wrap;
	gap: 2px;
	margin-bottom: calc(10 * var(--u));
}
.pop .data li:nth-child(-n+3){	width: calc((100% - 4px)/3);	}
.pop .data li:nth-child(n+4){	width: calc((100% - 2px)/2);	}
.pop .data li h4
{
	padding: 0.3em;
	background: var(--Cmain3);
	color: white;
	font-size: var(--fzu20);
	text-align: center;
}
.pop .data li p
{
	padding: 0.3em;
	background: white;
	color: var(--Cmain3);
	font-size: var(--fzu20);
	text-align: center;
}

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

.pop > .inner
{
	width: 100%;	aspect-ratio: 694/934;
	background: url("../image/index/racer_data_background_sp.webp") no-repeat top center/contain;
}
.pop > .inner::after
{
	width: 100%;	aspect-ratio: 694/934;
	background: url("../image/index/racer_data_frame_sp.webp") no-repeat top center/contain;
}
.pop .close
{
	top: calc(-45 * var(--v));	right: calc(-20 * var(--v));
	width: calc(88 * var(--v));	aspect-ratio: 1;
}
.pop .photo{	width: 100%;	height: calc(270 * var(--v));	}
.pop .prefecture
{
	left: calc(110 * var(--v));
	font-size: var(--fzv15);
}
.pop .data
{
	width: 100%;
	padding: calc((270 + 15) * var(--v)) calc(30 * var(--v)) 0;
	margin: 0 auto;
}
.pop .data .line
{
	width: 100%;	aspect-ratio: 612/11;
	margin: 0 auto calc(20 * var(--v));
}
.pop .data .nameArea
{
	display: flex;	justify-content: center;	align-items: end;
	gap: calc(20 * var(--v));
	margin-bottom: calc(10 * var(--v));
}
.pop .data .text1{	font-size: var(--fzv18);	margin: 0;	}
.pop .data .text2{	font-size: var(--fzv30);	margin: 0;	}
.pop .data .text3,
.pop .data .text4
{
	margin-bottom: calc(10 * var(--v));
	font-size: var(--fzv16);
}
.pop .data .text5{	font-size: var(--fzv15);	}
.pop .data ul{	margin-bottom: calc(20 * var(--u));	}
.pop .data li:nth-child(-n+3){	width: calc((100% - 4px)/3);	}
.pop .data li:nth-child(n+4){	width: calc((100% - 2px)/2);	}
.pop .data li h4,
.pop .data li p
{
	padding: 0.3em;
	font-size: var(--fzv16);
}

}

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