@charset "UTF-8";

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

#racer .racer
{
	display: flex;	flex-wrap: wrap;	justify-content: center;
	gap: calc(35 * var(--v));
}
#racer .racer > li
{
	position: relative;
	width: calc((100% - 35 * 2 * var(--v))/3);	aspect-ratio: 314/264;
	max-width: calc(314 * var(--v));
	background: url("../image/race1/thumb_background.webp") no-repeat center/contain;
}
#racer .racer > li::after
{
	position: absolute;
	top: 0;	left: 0;

	content: "";
	display: block;
	width: 100%;	height: 100%;

	background: url("../image/race1/thumb_frame.webp") no-repeat center/contain;
}
#racer .racer > li .nameArea
{
	position: absolute;
	bottom: calc(20 * var(--u));
	/* left: calc(30 * var(--v)); */
	left: 0;	right: 0;

	width: calc(100% - 60 * var(--v));	height: calc(40 * var(--v));
	width: fit-content;

	padding: 2px;
	margin: 0 auto;

	background: var(--Grad1);
	box-shadow: var(--shadow0);
}
#racer .racer > li .nameArea .inner
{
	display: flex;	justify-content: center;	align-items: center;
	width: 100%;	height: 100%;
	padding: 0 calc(15 * var(--u));
	background: var(--Cgou1);
}
#racer .racer > li .nameArea .text
{
	display: flex;	justify-content: center;	align-items: end;
	gap: calc(5 * var(--v));
}
#racer .racer > li .nameArea p{	font-weight: 500;	letter-spacing: 0.05em;	}
#racer .racer > li .nameArea .number{	font-size: var(--fzv13);	}
#racer .racer > li .nameArea .name{	font-size: var(--fzv19);	}


#racer .racer picture{	width: 100%;	height: 100%;	}

#racer .racer > li:not([class]),
#racer .racer > li:not([class])::after
{
	width: calc((100% - 35 * 2 * var(--v))/3);	aspect-ratio: 314/264;
	background: unset;
}
#racer .pop
{
	z-index: 10000000;
	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)
{

#racer .racer{	gap: calc(20 * var(--v));	}
#racer .racer > li
{
	width: calc((100% - 22 * 1 * var(--v))/2);
	max-width: unset;
}
#racer .racer > li .nameArea .number{	font-size: var(--fzv10);	}
#racer .racer > li .nameArea .name{	font-size: var(--fzv15);	}



}
/* ================================================================================
pop
================================================================================ */
@media print, screen
{
.pop > .cover
{
	position: absolute;
	top: 0;	left: 0;
	width: 100%;	height: 100%;
}
.pop > .inner
{
	position: relative;
	width: calc(634 * var(--v));
	padding: calc(30 * var(--v)) calc(40 * var(--v));
	background: black;
	box-shadow: 0 0 calc(20 * var(--v)) rgb(255,255,255,0.4);
}
.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 .left,
.pop .right
{
	z-index: 10;
	position: absolute;
	top: calc(50% - 30 * var(--v));
	width: calc(40 * var(--v));	aspect-ratio: 40/60;
}
.pop .left{	left: calc(-60 * var(--v));	}
.pop .right{	right: calc(-60 * var(--v));	}

.pop .nameArea
{
	display: flex;	align-items: center;
	gap: calc(30 * var(--v));
}
.pop .names
{
	display: flex;	align-items: end;
	gap: calc(20 * var(--v));
}
.pop .prefecture
{
	display: flex;	justify-content: center;	align-items: center;
	padding: 2px;
	background: var(--Grad1);
}
.pop .prefecture p
{
	padding: 0.5em 1em;
	background: black;

	color: var(--Cmain5);
	font-size: var(--fzv24);
	font-weight: 500;
}

.pop .datas
{
	display: flex;	justify-content: space-between;
	padding: calc(20 * var(--v)) 0 0;
}
.pop .data{	width: calc((100% - 25 * var(--v))/2);	}

.pop .text1,
.pop .text2
{
	--Fcolor: #890e0c;

	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(--v)),
		var(--Fcolor) 0 0 calc(6 * var(--v)),
		var(--Fcolor) 0 0 calc(6 * var(--v));

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

	color: white;
	font-size: var(--fzv20);
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.05;
}
.pop .text5
{
	padding: calc(15 * var(--v)) 0;
	border-bottom: 3px solid white;
	color: white;
	font-size: var(--fzv16);
	text-align: center;
}
.pop .text6
{
	padding: calc(15 * var(--v)) 0 0;
	color: white;
	font-size: var(--fzv16);
	line-height: 1.7;
}

.pop .data ul
{
	display: flex;	flex-wrap: wrap;
	gap: 2px;
}
.pop .data li
{
	display: flex;
	gap: 2px;
	width: 100%;
}
.pop .data li h4,
.pop .data li p
{
	width: calc((100% - 2px)/2);
	padding: 0.3em;
	text-align: center;
}
.pop .data li h4
{
	background: #a61816;
	color: white;
	font-size: var(--fzv22);
}
.pop .data li p
{
	background: white;
	color: var(--Cmain3);
	font-size: var(--fzv24);
}

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

.pop > .inner
{
	width: 100%;
	padding: calc(40 * var(--v)) var(--pageP);
}
.pop .close
{
	top: calc(-45 * var(--v));	right: calc(-20 * var(--v));
	width: calc(88 * var(--v));	aspect-ratio: 1;
}
.pop .left,
.pop .right
{	width: calc(50 * var(--v));	}
.pop .left{	left: calc(-30 * var(--v));	}
.pop .right{	right: calc(-30 * var(--v));	}

.pop .prefecture p
{
	padding: 0.3em 0.7em;
	font-size: var(--fzv18);
}

.pop .datas{	padding: calc(40 * var(--v)) 0 0;	}
.pop .data{	width: calc((100% - 10 * var(--v))/2);	}

.pop .text1{	font-size: var(--fzv12);	}
.pop .text2{	font-size: var(--fzv24);	}
.pop .data .text3,
.pop .data .text4
{	font-size: var(--fzv16);	}
.pop .text5,
.pop .text6
{	font-size: var(--fzv15);	}

.pop .data li h4{	font-size: var(--fzv16);	}
.pop .data li p{	font-size: var(--fzv20);	}


}


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

#tenbo > .inner
{
	max-width: calc(1000 * var(--v));
	/* padding: calc(40 * var(--v)) 0; */
}
/* #tenbo [id^="anc"]:not(:last-child){	margin: 0 auto calc(60 * var(--v));	} */

#tenbo [id^="anc"]:has(picture),
#tenbo [id^="anc"]:has(p)
{	padding: calc(40 * var(--v)) 0;	}

#tenbo picture
{
	margin: 0 auto;
	/* background: var(--Cmain2); */
}
#tenbo picture:not(:last-child){	margin: 0 auto calc(40 * var(--v));	}
#tenbo picture img
{
	display: block;
	max-width: calc(900 * var(--v));
	margin: 0 auto;
}

#tenbo p
{
	font-size: var(--fzv20);
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.05em;
}
#tenbo p:not(:last-child){	margin: 0 auto 1em;	}
#tenbo p .small{	font-size: 0.8em;	}
#tenbo p strong{	font-weight: 500;	}
#tenbo p a
{
	color: var(--Cmain1);
	font-weight: 500;
	text-decoration: underline;
}

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

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

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

/* #tenbo p{	font-size: var(--fzv30);	} */

}

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

#dream #anc1{	margin-bottom: calc(80 * var(--v));	}

#dream h3
{
	width: fit-content;
	padding: 0 0.5em;
	margin: 0 auto calc(55 * var(--v));

	background: linear-gradient(180deg, transparent 0% 65%, var(--Cmain6) 65% 100%);

	font-size: var(--fzv32);
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
	text-shadow: var(--shadow2);
}

#dream .players
{
	display: flex;	flex-direction: column;
	gap: calc(80 * var(--u));

	padding: 0 calc(20 * var(--u));
	margin: 0 auto calc(50 * var(--u));
}
#dream .players li{	display: flex;	justify-content: space-between;	}
#dream .players li:nth-child(1){	--color: var(--Cgou1);	}
#dream .players li:nth-child(2){	--color: var(--Cgou2);	}
#dream .players li:nth-child(3){	--color: var(--Cgou3);	}
#dream .players li:nth-child(4){	--color: var(--Cgou4);	}
#dream .players li:nth-child(5){	--color: var(--Cgou5);	}
#dream .players li:nth-child(6){	--color: var(--Cgou6);	}

#dream .players li > .box:nth-child(1){	width: 48%;	}
#dream .players .thumb
{
	position: relative;
	display: flex;	justify-content: center;	align-items: end;
	aspect-ratio: calc(600/440);

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

	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
#dream .players .frame
{
	position: absolute;
	top: 0;	left: 0;
	width: 100%;	height: 100%;
}
#dream .players .boatNumber
{
	position: absolute;
	top: calc(-20 * var(--u));	left: calc(-20 * var(--u));
	width: calc(94 * var(--u)); aspect-ratio: 119/140;
}
#dream .noindex .players .boatNumber{	display: none;	}

#dream .players .nameArea
{
	width: calc(315 * var(--u));	aspect-ratio: 400/118;
	padding: calc(15 * var(--u)) 0 0;
	background: url('../image/race3/name.webp') no-repeat center/contain;
}
#dream .players .nameArea p,
#dream .players .nameArea h4
{
	color: white;
	text-align: center;
	font-weight: 500;
	text-shadow: 
		#9a0c60 0 0 calc(6 * var(--u)),
		#9a0c60 0 0 calc(6 * var(--u)),
		#9a0c60 0 0 calc(6 * var(--u));
}
#dream .players .nameArea p{	font-size: var(--fzu20);	margin-bottom: calc(15 * var(--u));	}
#dream .players .nameArea h4{	font-size: var(--fzu28);	}

#dream .players li > .box:nth-child(2){	width: 48%;	}
#dream .players .title
{
	padding: 3px;
	margin: 0 0 calc(12 * var(--u));

	background: var(--Grad1);
}
#dream .players .title p
{
	display: flex;	justify-content: center;	align-items: center;
	width: 100%;	height: calc(58 * var(--u));

	background: var(--color);

	font-size: var(--fzu22);
	text-align: center;
	font-weight: 500;
	letter-spacing: 0.05em;
}
#dream .players li:nth-child(2) .title p,
#dream .players li:nth-child(3) .title p,
#dream .players li:nth-child(4) .title p,
#dream .players li:nth-child(6) .title p
{	color: white;	}


#dream .players table
{
	width: 100%;
	margin: 0 auto calc(15 * var(--u));

	background: var(--Cgray2);
	border-collapse: separate; 	
	border-spacing: 1px 1px;
}
#dream .players table tr:nth-child(2n+3){	background-color: var(--Ctable2N)	}
#dream .players table th
{
	background-color: black;
	padding: 0.3em 0;

	color: white;
	font-size: var(--fzu20);
	font-weight: 600;
	text-align: center;
	line-height: 1.2;
}
#dream .players table th:nth-child(1){	width: 5em;	}
#dream .players table th:nth-child(2){	width: 6em;	}
#dream .players table th:nth-child(3){	width: 4em;	}
#dream .players table th:nth-child(4){	width: 6em;	}

#dream .players table td
{
	background: white;
	padding: 0.3em 0;

	font-size: var(--fzu22);
	font-weight: 500;
	text-align: center;
}
#dream .players table td:first-child{	font-weight: 700;	}
#dream .players table tr:nth-child(2) td:first-child{	background: var(--Cgou1);	}
#dream .players table tr:nth-child(3) td:first-child{	background: var(--Cgou2); color: white;	}
#dream .players table tr:nth-child(4) td:first-child{	background: var(--Cgou3); color: white;	}
#dream .players table tr:nth-child(5) td:first-child{	background: var(--Cgou4); color: white;	}
#dream .players table tr:nth-child(6) td:first-child{	background: var(--Cgou5);	}
#dream .players table tr:nth-child(7) td:first-child{	background: var(--Cgou6); color: white;	}

#dream .players table td:last-child .bar{	display: flex;	align-items: center;	}
#dream .players table td:last-child hr{	height: calc(12 * var(--u));	}
#dream .players table td:last-child hr:nth-child(1){	background-color: var(--Cgou3);	}
#dream .players table td:last-child hr:nth-child(2){	background-color: var(--Cgou4);	}
#dream .players table td:last-child hr:nth-child(3){	background-color: var(--Cgou6);	}

#dream .players .guide
{
	font-size: var(--fzu20);
	text-align: center;
}
#dream .players .guide span:nth-child(1){	color: var(--Cgou3);	}
#dream .players .guide span:nth-child(2){	color: var(--Cgou4);	}
#dream .players .guide span:nth-child(3){	color: var(--Cgou6);	}
/* 
#dream .note
{
	font-size: var(--fzv20);
	font-weight: 500;
	line-height: 1.5;
}
 */
}
@media screen and (max-width: 767px)
{

#dream h3{	font-size: var(--fzv18);	}

#dream .players li
{
	flex-direction: column;
	gap: calc(40 * var(--u));
}
#dream .players li > .box:nth-child(1){	width: 100%;	}
#dream .players li > .box:nth-child(2){	width: 100%;	}
#dream .players .boatNumber
{
	top: calc(-30 * var(--u));	left: calc(-30 * var(--u));
	width: calc(119 * var(--v));
}
#dream .players .nameArea
{
	width: calc(400 * var(--u));
	padding: calc(20 * var(--u)) 0 0;
}
#dream .players .nameArea p{	font-size: var(--fzu14);	margin-bottom: calc(17 * var(--u));	}
#dream .players .nameArea h4{	font-size: var(--fzu20);	}
#dream .players .title p
{
	height: calc(70 * var(--v));
	font-size: var(--fzv14);
}

#dream .players table th{	font-size: var(--fzv12);	}
#dream .players table td{	font-size: var(--fzv14);	}
#dream .players .guide{	font-size: var(--fzv14);	}

/* #dream .note{	font-size: var(--fzv16);	} */

}

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

#pickupColumn > .inner
{
	max-width: calc(1000 * var(--v));
	padding: calc(40 * var(--v)) 0;
}
#pickupColumn [id^="anc"]:not(:last-child){	border-bottom: 2px solid var(--Cmain1);	}

#pickupColumn [id^="anc"]:has(picture),
#pickupColumn [id^="anc"]:has(p)
{	padding: calc(40 * var(--v)) 0;	}

#pickupColumn picture
{
	width: 100%;
	margin: 0 auto;
	/* background: var(--Cmain2); */
}
#pickupColumn picture:not(:last-child){	margin: 0 auto calc(40 * var(--v));	}
#pickupColumn picture img
{
	display: block;
	max-width: calc(900 * var(--v));
	margin: 0 auto;
}
#pickupColumn p
{
	font-size: var(--fzv20);
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.05em;
}
#pickupColumn p:not(:last-child){	margin: 0 auto 1em;	}
#pickupColumn p .small{	font-size: 0.8em;	}
#pickupColumn p strong{	font-weight: 500;	}
#pickupColumn p a
{
	color: var(--Cmain1);
	font-weight: 500;
	text-decoration: underline;
}

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

#pickupColumn p a{	transition: var(--T03);	}
#pickupColumn p a:hover{	opacity: 0.7;	}

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

/* #pickupColumn p{	font-size: var(--fzv30);	} */

}

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