@charset "UTF-8";

.slick-dots {
	bottom: -40px;
}
.slick-dots li button:before {
	font-size: 8px;
}
.slick-list { overflow: visible !important; }
.slick-slide { opacity: 0.3; }
.slick-slide iframe { border: 0; border-radius: 20px; }
.slick-slide.slick-active { opacity: 1.0; }
#youtube { width: 100%; overflow: visible; }
.section_inner { width: 1200px; margin: 0 auto;}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before { color: #fff33f !important; }
.slick-dots li button:before { opacity: 1 !important; color: #f0f0f0 !important; }
.slick-dots li.slick-active button:before { opacity: 1 !important; color: #fff33f !important; }
.yt_play img { border-radius: 20px; }

/* arrow
------------------------------------------------------------ */
a.arrow_wht {
	background-image: url("../icons/icon_arrow_wht.svg");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 20px;
	padding: 0 0 0 30px;
	text-decoration: none;
}
a.arrow_wht:hover{ text-decoration: underline;}

ul.arrow_wht { margin-bottom: 40px;}
ul.arrow_wht li { line-height: 130%; margin-bottom: 20px;}
ul.arrow_wht li a{
	background-image: url("../icons/icon_arrow_wht.svg");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 16px;
	padding: 0 0 0 30px;
	text-decoration: none;
	display: block;
}
ul.arrow_wht li a:hover{
	text-decoration: underline;
}

/* news
------------------------------------------------------------ */
#news { width: 100%; padding: 100px 0; background: #122332; position: relative;}
#news h3 { font-size: 500%; font-family: "Venera900", sans-serif; line-height: 100%; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); writing-mode: vertical-rl; white-space: nowrap; color: #fff;}
#news #news_inner { width: 1200px; margin: 0 auto;}
#news #news_inner h4 {font-size: 200%; font-family: "Venera500", sans-serif; margin-bottom: 20px; color: #fff;}

#news #news_inner .news_list { display: flex; justify-content: flex-start; gap: 20px; margin-bottom: 20px; flex-wrap: wrap;}
#news #news_inner .news_list .news_box { width: 285px; background: #fff; border-radius: 20px;}
#news #news_inner .news_list .news_box img { border-radius: 20px 20px 0 0; object-fit: cover; }
#news #news_inner .news_list .news_box .news_text { border-radius: 0 0 10px 10px; padding: 10px 14px; box-sizing: border-box;}
#news #news_inner .news_list .news_box .news_text a { color: #000; text-decoration: none;}
#news #news_inner .news_list .news_box .news_text a:hover{ text-decoration: underline;}
#news #news_inner a { color: #fff;}


@media screen and (max-width:1200px){
	#news h3 { display: none;}
	#news { padding: 60px 0;}
	#news #news_inner { width: 90%;}
	#news #news_inner .news_list { display: block;}
	#news #news_inner .news_list .news_box { width: 100%; background: #fff; border-radius: 20px; margin-bottom: 20px;}
	#news #news_inner .news_list .news_box img { width: 100%; height: auto; border-radius: 20px 20px 0 0;}
	#news #news_inner h4 { text-align: center;}
	#news #news_inner a { color: #fff;}
	}


/*  calendar
------------------------------------------------------------ */
#calendar { width: 100%; padding: 100px 0; background: #122332; position: relative; color: #fff;}
#calendar h3 { font-size: 500%; font-family: "Venera900", sans-serif; line-height: 100%; position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); writing-mode: vertical-rl; white-space: nowrap; color: #fff;}
#calendar #calendar_inner { width: 1200px; margin: 0 auto;}
#calendar #calendar_inner h4 {font-size: 200%; font-family: "Venera500", sans-serif; margin-bottom: 20px;}
#calendar #calendar_inner table { width: 100%;}
#calendar #calendar_inner table tr td{ padding: 20px; font-size: 120%;}
#calendar #calendar_inner table tr td a { color: #fff; text-decoration: underline;}
#calendar #calendar_inner table tr:nth-child(odd){background: #1c3144;}

#calendar #calendar_inner table tr td:nth-child(1){ width: 18%;}
#calendar #calendar_inner table tr td:nth-child(2){ width: 20%;}
#calendar #calendar_inner table tr td:nth-child(3){ width: 24%;}
#calendar #calendar_inner table tr td:nth-child(4){ width: 38%;}

p.next_race {
	background: #ffe33f;
	background-image: url("../icons/icon_arrow_next_race.svg");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 20px;
	font-family: "Venera900", sans-serif;
	font-size: 60%;
	padding: 6px 30px 4px 20px;
	text-align: center;
	border-radius: 10px;
	font-family: "Venera500";
	color: #000;
}

@media screen and (max-width:1200px){
	#calendar { width: 100%; padding: 60px 0;}
	#calendar h3 { display: none;}
	#calendar #calendar_inner { width: 90%;}
	#calendar #calendar_inner h4 { text-align: center; line-height: 100%;}
	#calendar #calendar_inner table tr td{ padding:12px 4px; font-size: 100%;}
	#calendar #calendar_inner table tr:nth-child(odd){background: #1c3144;}
	
	#calendar #calendar_inner table tr td:nth-child(1){ width: 0; padding: 0}
	#calendar #calendar_inner table tr td:nth-child(2){ width: auto;}
	#calendar #calendar_inner table tr td:nth-child(3){ width: auto; white-space: nowrap; font-size: 80%;}
	#calendar #calendar_inner table tr td:nth-child(4){ width: auto;}
	
	p.next_race { display: none;}
	}

/*  date
------------------------------------------------------------ */
.fraction { position: relative; display: inline-block; width: 120px; height: 18px;}
.fraction .numerator {
	font-size: 100%;
	position: absolute;
	top: -10px;
	left: 4px;
	font-family: "Venera500", sans-serif;
	color: #fff;
}
.fraction .denominator {
	font-size: 120%;
	position: absolute;
	top: 4px;
	left: 31px;
	white-space: nowrap;
	font-family: "Venera500", sans-serif;
	color: #fff;
}
.fraction .denominator .numerator2 {
	font-size: calc(100% / 1.2);
    position: absolute;
    top: -14px;
    left: calc(100% + 3px);
    font-family: "Venera500", sans-serif;
    color: #fff;
}
.fraction .denominator .denominator2 {
	font-size: 100%;
    position: absolute;
    top: 0;
    left: calc(100% + 31px);
    white-space: nowrap;
    font-family: "Venera500", sans-serif;
    color: #fff;
}
.fraction .denominator .date_line2 {
	position: absolute;
    top: 6px;
    left: calc(100% + 4px);
    width: 40px;
    height: 1px;
    transform: rotate(-45deg);
    transform-origin: center;
    background: #fff;
}
.fraction .date_line {
	position: absolute;
	top: 10px;
	left: 3px;
	width: 40px;
	height: 1px;
	background: #000;
	transform: rotate(-45deg);
	transform-origin: center;
	background: #fff;
}
.fraction.color_blk{}
.fraction.color_blk .numerator{color:#000;}
.fraction.color_blk .denominator{color:#000;}
.fraction.color_blk .date_line{background: #000;}



@media screen and (max-width:1200px){
	.fraction { position: relative; display: inline-block; width: 70px; height: 16px;}
	.fraction .numerator {
		font-size: 80%;
		position: absolute;
		top: -10px;
		left: 0;
		font-family: "Venera500", sans-serif;
	}
	.fraction .denominator {
		font-size: 80%;
		position: absolute;
		top: 4px;
		left: 22px;
		white-space: nowrap;
		font-family: "Venera500", sans-serif;
	}
	.fraction .date_line {
		position: absolute;
		top: 10px;
		left: 0;
		width: 30px;
		height: 1px;
		background: #fff;
		transform: rotate(-45deg);
		transform-origin: center;
	}

	
	}

/*  reports
------------------------------------------------------------ */
#reports { width: 100%; padding: 100px 0; background: #fafafa; position: relative; color: #000;}
#reports h3 { font-size: 500%; font-family: "Venera900", sans-serif; line-height: 100%; position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); writing-mode: vertical-rl; white-space: nowrap; color: #000;}
#reports #reports_inner { width: 1200px; margin: 0 auto;}
#reports #reports_inner h4 {font-size: 200%; font-family: "Venera500", sans-serif; margin-bottom: 20px;}
#reports #reports_inner table tr td{ padding: 20px 10px; font-size: 140%;}
#reports #reports_inner table tr td a { color: #000; text-decoration: underline;}


/*  ranking
------------------------------------------------------------ */
#ranking { width: 100%; padding: 100px 0; position: relative;}
#ranking h3 { font-size: 500%; font-family: "Venera900", sans-serif; line-height: 100%; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); writing-mode: vertical-rl; white-space: nowrap; color: #999;}
#ranking #ranking_inner { width: 1200px; margin: 0 auto;}
#ranking #ranking_inner h4 {font-size: 200%; font-family: "Venera500", sans-serif; margin-bottom: 20px; color: #999;}
#ranking #ranking_inner .best3 { width: 1200px; height: 440px; position: relative; margin-bottom: 100px;}
#ranking #ranking_inner .best3 .driver_box { border-radius: 20px; position: relative;}
#ranking #ranking_inner .best3 .driver_box.driver01 { width: 440px; position: absolute; left: 400px; bottom: 0;}
#ranking #ranking_inner .best3 .driver_box.driver02 { width: 380px; position: absolute; left: 0; bottom: 0;}
#ranking #ranking_inner .best3 .driver_box.driver03 { width: 340px; position: absolute; left: 860px; bottom: 0;}
#ranking #ranking_inner .best3 .driver_box .rank { position: absolute; top: 4px; left: 10px;}
#ranking #ranking_inner .best3 .driver_box .point { position: absolute; top: 20px; right: 20px; font-family: "Venera900", sans-serif; font-size: 180%; color: #999;}
#ranking #ranking_inner .best3 .driver_box .driver_image img { border-radius: 20px 20px 0 0; width: 100%;}
#ranking #ranking_inner .best3 .driver_box.driver01 .driver_image img { height: calc(440px * (600 / 760)); object-fit: cover; object-position: 50% 0; }
#ranking #ranking_inner .best3 .driver_box.driver02 .driver_image img, #ranking #ranking_inner .best3 .driver_box.driver03 .driver_image img { height: calc(380px * (600 / 760)); object-fit: cover; object-position: 50% 0; }
#ranking #ranking_inner .best3 .driver_box .each_text { padding: 20px; border-radius: 0 0 20px 20px; background: #122332;}
#ranking #ranking_inner .best3 .driver_box .each_text .name_team { float: left;}
#ranking #ranking_inner .best3 .driver_box .each_text .name_team p { color: #fff;}
#ranking #ranking_inner .best3 .driver_box .each_text a { color: #fff;}
#ranking #ranking_inner .best3 .driver_box .each_text .bib {padding:6px 10px; border: 1px solid #000; text-align:center; background: #fff; float: right; font-family: "Venera900", sans-serif;}

#ranking #ranking_inner table {
	width: 100%;
	border-spacing: 0;
	border-collapse: separate;
	border-radius: 20px;
	background: #f0f0f0;
	box-sizing: border-box;
	margin-bottom: 100px;
}
#ranking #ranking_inner table tr:first-child th:first-child { border-radius: 20px 0 0 0;}
#ranking #ranking_inner table tr:first-child th:last-child { border-radius: 0 20px 0 0;}
#ranking #ranking_inner table tr:last-child td:first-child { border-radius: 0 0 0 20px;}
#ranking #ranking_inner table tr:last-child td:last-child { border-radius: 0 0 20px 0;}

#ranking #ranking_inner table tr th { padding: 10px 20px; text-align: center; border-bottom: 1px solid #fff; border-right: 1px solid #fff; font-family: "Venera500", sans-serif;}
#ranking #ranking_inner table tr th:last-child { border-right: none;}
#ranking #ranking_inner table tr td { padding: 10px 20px; border-bottom: 1px solid #fff; border-right: 1px solid #fff;}
#ranking #ranking_inner table tr tr:last-child td { border-bottom: none;}

#ranking #ranking_inner table tr td:nth-child(1){ text-align: right; font-family: "Venera500", sans-serif;}
#ranking #ranking_inner table tr td:nth-child(2){ text-align: right; font-family: "Venera500", sans-serif;}
#ranking #ranking_inner table tr td:nth-child(5){ text-align: right; font-family: "Venera500", sans-serif;}

.driver_icon {
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 60px;
	padding: 20px 0 20px 70px;
}
.driver_icon.driver_cam01{background-image: url("../drivers/driver_cam01.png");}
.driver_icon.driver_cam02{background-image: url("../drivers/driver_cam02.png");}
.driver_icon.driver_cam03{background-image: url("../drivers/driver_cam03.png");}
.driver_icon.driver_cam04{background-image: url("../drivers/driver_cam04.png");}
.driver_icon.driver_cam05{background-image: url("../drivers/driver_cam05.png");}

.driver_icon.driver_ind01{background-image: url("../drivers/driver_ind01.png");}
.driver_icon.driver_ind02{background-image: url("../drivers/driver_ind02.png");}
.driver_icon.driver_ind03{background-image: url("../drivers/driver_ind03.png");}
.driver_icon.driver_ind04{background-image: url("../drivers/driver_ind04.png");}
.driver_icon.driver_ind05{background-image: url("../drivers/driver_ind05.png");}

@media screen and (max-width:1200px){
	#ranking { padding: 40px 0; background: white; margin-top: -40px;}
	#ranking h3 { position: static; text-align: center; writing-mode: horizontal-tb; font-size: 200%; font-family: "Venera500", sans-serif; transform: translate(0, 0);}
	#ranking #ranking_inner { width: 90%;}
	#ranking #ranking_inner h4 { text-align: center; font-size: 160%;}
	#ranking #ranking_inner .best3 { width: 100%; height: auto; position: relative; margin-bottom: 40px;}
	#ranking #ranking_inner .best3 .driver_box { border-radius: 20px; position: static;}
	#ranking #ranking_inner .best3 .driver_box.driver01 { width: 100%; position: relative; left: 0; margin-bottom: 20px;}
	#ranking #ranking_inner .best3 .driver_box.driver02 { width: 100%; position: relative; left: 0; margin-bottom: 20px}
	#ranking #ranking_inner .best3 .driver_box.driver03 { width: 100%; position: relative; left: 0; margin-bottom: 20px}
	
	#ranking #ranking_inner table {
	margin-bottom: 40px;
}
	#ranking #ranking_inner table tr th { padding:10px 6px; font-size: 80%; line-height: 100%;}
	#ranking #ranking_inner table tr td { padding:10px 6px; font-size: 90%;}

	#ranking #ranking_inner table tr td:nth-child(1){ text-align: right; font-family: "Venera500", sans-serif; font-size: 80%;}
	#ranking #ranking_inner table tr td:nth-child(2){ text-align: right; font-family: "Venera500", sans-serif; font-size: 80%;}
	#ranking #ranking_inner table tr td:nth-child(5){ text-align: right; font-family: "Venera500", sans-serif; font-size: 80%;}
	}