@charset "UTF-8";

.motor-main {
overflow: inherit;
}
section {
position: relative;
overflow: inherit;
}
section#engine,
section#machine,
section#f1-machine,
section#f1-race{
	overflow: hidden;
}
.col-driver-result h3{
	font-family: "UD新ゴNT M", sans-serif;
}

.f1-btm-link{
	position: relative;
	z-index: 10;
	background: #fff;
}
.driver-bg-name strong,
.motor-kv__driver-name-bg1{
	font-family: "ナウ-GB", sans-serif;
}
.motor-kv__driver-name-bg2{
	font-family: "ナウ-GE", sans-serif;
}
.is-noname .motor-kv__driver-name,
.is-noname .motor-kv__driver-name-bg{
	display: none;
}
#f1-movie{
	overflow: hidden;
}

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

	.logo_redbull{
		max-width: 141px;
	}
	#engine h2 img{
		width: 249px;
	}



	.motor-kv__driver-name{
		position: absolute;
		width: 100%;
		bottom: 110px;
		text-align: center;
		z-index: 100;
		color: #fff;
	}
	.motor-kv__driver-name h1{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.motor-kv__driver-name h1 div{
		position: relative;
		font-weight: 600;
	}
	.motor-kv__driver-name h1 div + div{
		margin: 0 0 0 15px;
		padding: 0 0 0 15px;
	}
	.motor-kv__driver-name h1 div + div:before{
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		display: block;
		width: 1px;
		height: 28px;
		background: rgba(255,255,255,0.3);
		transform: translateY(-50%);
	}
	.motor-kv__driver-flag{
		display: flex;
		align-items: center;
		width: 36px;
		margin: 0 0 0 20px;
	}
	.motor-kv__driver-caption{
		margin: 20px auto 0;
		font-weight: 600;
	}

	.motor-kv__driver-name-bg{
		position: absolute;
		width: 100%;
		bottom: 0;
		z-index: 50;
	}
	.motor-kv__driver-name-bg1{
		position: absolute;
		left: 0;
		bottom: -10px;
		font-size: min(210px,13.1vw);
		line-height: calc(180/210);
		color: rgba(255,255,255,0.3);
	}
	.motor-kv__driver-name-bg2{
		position: absolute;
		right: 40px;
		bottom: -50px;
		font-size: min(440px,27.5vw);
		letter-spacing: -0.1em;
		color: rgba(255,255,255,0.3);
	}


/* driver-bg-name
================================================*/

	.driver-bg-name{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.driver-bg-name strong{
		position: absolute;
		display: block;
		width: 200vw;
		top: -30px;
		left: 50%;
		text-align: center;
		color: rgba(255,255,255,0.2);		
		font-size: 220px;
		transform: translateX(-50%);
	}
	.driver-bg-name strong span{
		display: inline-block;
	}
	.driver-bg-name strong span + span{
		margin-left: 50px;
	}

/* driver-bg
================================================*/

	.driver-bg{
		position: sticky;
		top: 0;
		width: 100%;
		z-index: -1;
	}
	.driver-bg div{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
	}
	.driver-bg div:after{
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #1D1D1D;
		opacity: 0.7;
	}
	.driver-bg div img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

/* col-driver
================================================*/
	
	#driver-career .col-driver{
		padding: 450px 60px 200px;
	}
	#driver-profile .col-driver{
		padding: 450px 60px 200px;
	}

	.col-driver{
		margin: auto;
		max-width: 1020px;
	}
	.col-driver-header h2{
		font-size: 60px;
		font-weight: 600;
		color: #fff;
	}
	.col-driver-header h2 strong{
		color: #DC0018;
		font-weight: 600;
	}
	.col-driver-detail{
		margin: 60px 0 0;
		color: #fff;
	}
	.col-driver-lead p{
		line-height: 2;
	}
	.col-driver-lead p + p{
		margin-top: 40px;
	}

	.col-driver-profile dl{
		display: flex;
		padding: 20px 0;
		border-top: 1px solid rgba(255,255,255,0.3);
	}
	.col-driver-profile dl:last-child{
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}
	.col-driver-profile dl dt{
		width: 200px;
		padding: 5px 0 5px 50px;
		line-height: 2;
	}
	.col-driver-profile dl dd{
		width: calc(100% - 200px);
		padding: 5px 0 5px 50px;
		line-height: 2;
	}

	.col-driver-result{
		margin: 80px 0 0;
	}
	.col-driver-result h3{
		font-size: 36px;
	}
	.col-driver-result h3 + dl{
		margin: 40px 0 0;
	}
	.col-driver-result dl{
		display: flex;
		padding: 10px 0;
		border-top: 1px solid rgba(255,255,255,0.3);
	}
	.col-driver-result dl:last-child{
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}
	.col-driver-result dl dt{
		width: 165px;
		padding: 5px 0 5px 50px;
		line-height: 2;
	}
	.col-driver-result dl dd{
		position: relative;
		width: calc(100% - 165px);
		padding: 5px 0 5px 50px;
		line-height: 2;
	}
	.col-driver-result dl dd:before{
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		width: 1px;
		height: 100%;
		background: rgba(255,255,255,0.3);
	}

	.col-driver-social{
		margin: 75px 0 0;
	}
	.col-driver-social a{
		color: #fff;
	}
	.col-driver-social{
		margin: 75px 0 0;
	}
	.col-driver-social dl{
		display: flex;
	}
	.col-driver-social dl dd{
		margin: 0 0 0 20px;
		padding: 0 0 0 20px;
	}
	.col-driver-social dl dd a{
		text-decoration: underline;
	}
	.col-driver-social dl dd a:hover{
		text-decoration: none;
	}
	.col-driver-social dl dd a[target="_blank"]:after{
		content: "";
		display: inline-block;
		margin: 0 0 0 10px;
		width: 14px;
		height: 14px;
		background: url(../../../shared/img/icon_blank_wh.svg) 0 0 no-repeat;
		background-size: 100% 100%;
	}

	.col-driver-social ul{
		margin: 75px -10px 0;
		display: flex;
	}
	.col-driver-social ul li{
		padding: 0 10px;
		width: 25%;
	}
	.col-driver-social ul li a{
		position: relative;
		display: block;
	}
	.col-driver-social ul li a:before{
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		width: 100%;
		height: 100%;
		opacity: 0;
		background: #fff;
		z-index: 10;
		transition: opacity 600ms ease;
	}
	.col-driver-social ul li a:hover:before{
		opacity: 0.3;
	}

	.f1-driver__list{
		margin: 80px 0 0;
	}
	.f1-driver__list-item-wrap{
		display: flex;
		margin: 0 -15px;
	}
	.f1-driver__list-item-wrap .list-item{
		padding: 0 15px;
		width: 25%;
	}

	.f1-driver__list-slide .f1-driver__list-item-wrap{
		margin: 0;
	}
	.f1-driver__list-slide .f1-driver__list-item-wrap .list-item{
		padding: 0;
		width: inherit;
	}


	.f1-driver__list figure{
		position: relative;
	}
	.f1-driver__list figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		border: 2px solid #fff;
		opacity: 0;
	}
	.f1-driver__list .list-item.active figure:after{
		opacity: 1;
	}

}




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

	.logo_redbull{
		max-width: 141px;
	}
	#engine h2 img{
		width: 182px;
	}
	.motor-kv__driver-name{
		position: absolute;
		width: 100%;
		bottom: 65px;
		text-align: center;
		z-index: 100;
		color: #fff;
	}
	.motor-kv__driver-name h1{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: min(18px,4.8vw);
	}
	.motor-kv__driver-name h1 div{
		position: relative;
		font-weight: 600;
	}
	.motor-kv__driver-name h1 div + div{
		margin: 0 0 0 10px;
		padding: 0 0 0 10px;
	}
	.motor-kv__driver-name h1 div + div:before{
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		display: block;
		width: 1px;
		height: 28px;
		background: rgba(255,255,255,0.3);
		transform: translateY(-50%);
	}
	.motor-kv__driver-flag{
		display: flex;
		align-items: center;
		width: 24px;
		margin: 0 0 0 15px;
	}
	.motor-kv__driver-caption{
		margin: 15px auto 0;
		font-weight: 600;
		font-size: 12px;
		line-height: 1.5;
	}
	.motor-kv__driver-name-bg{
		position: absolute;
		width: 100%;
		height: 100%;
		bottom: 0;
		z-index: 50;
	}
	.motor-kv__driver-name-bg1{
		position: absolute;
		left: 0;
		bottom: -2px;
		font-size: 14.13vw;
		line-height: calc(180/210);
		color: rgba(255,255,255,0.3);
	}
	.motor-kv__driver-name-bg2{
		position: absolute;
		right: 5px;
		bottom: -12px;
		font-size: 28.7vw;
		letter-spacing: -0.1em;
		color: rgba(255,255,255,0.3);
	}



/* driver-bg-name
================================================*/

	.driver-bg-name{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.driver-bg-name strong{
		position: absolute;
		display: block;
		width: 200vw;
		top: -10px;
		left: 50%;
		text-align: center;
		color: rgba(255,255,255,0.2);		
		font-size: min(16vw,60px);
		line-height: -0.5em;
		transform: translateX(-50%);
	}
	.driver-bg-name strong span{
		display: block;
	}
	.driver-bg-name strong span:nth-child(2){
		position: relative;
		top: -10px;
	}

/* driver-bg
================================================*/

	.driver-bg{
		position: sticky;
		top: 0;
		width: 100%;
		z-index: -1;
	}
	.driver-bg div{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
	}
	.driver-bg div:after{
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #1D1D1D;
		opacity: 0.7;
	}
	.driver-bg div img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

/* col-driver
================================================*/

	
	#driver-career .col-driver{
		padding: 200px 32px 80px;
	}
	#driver-profile .col-driver{
		padding: 200px 32px 80px;
	}

	.col-driver{
		margin: auto;
	}
	.col-driver-header h2{
		font-size: 26px;
		font-weight: 600;
		color: #fff;
	}
	.col-driver-header h2 strong{
		color: #DC0018;
		font-weight: 600;
	}
	.col-driver-detail{
		margin: 30px 0 0;
		color: #fff;
	}
	.col-driver-lead p{
		line-height: 2;
	}
	.col-driver-lead p + p{
		margin-top: 20px;
	}

	.col-driver-profile dl{
		display: flex;
		padding: 8px 0;
		border-top: 1px solid rgba(255,255,255,0.3);
	}
	.col-driver-profile dl:last-child{
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}
	.col-driver-profile dl dt{
		width: 130px;
		padding: 5px 0 5px 25px;
		line-height: 2;
	}
	.col-driver-profile dl dd{
		position: relative;
		width: calc(100% - 130px);
		padding: 5px 0 5px 25px;
		line-height: 2;
	}
	.col-driver-profile dl dd:before{
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		width: 1px;
		height: 100%;
		background: rgba(255,255,255,0.3);
	}

	.col-driver-result{
		margin: 50px 0 0;
	}
	.col-driver-result h3{
		font-size: 18px;
	}
	.col-driver-result h3 + dl{
		margin: 20px 0 0;
	}
	.col-driver-result dl{
		display: flex;
		padding: 8px 0;
		border-top: 1px solid rgba(255,255,255,0.3);
	}
	.col-driver-result dl:last-child{
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}
	.col-driver-result dl dt{
		width: 100px;
		padding: 5px 0 5px 25px;
		line-height: 2;
	}
	.col-driver-result dl dd{
		position: relative;
		width: calc(100% - 120px);
		padding: 5px 0 5px 25px;
		line-height: 2;
	}
	.col-driver-result dl dd:before{
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		width: 1px;
		height: 100%;
		background: rgba(255,255,255,0.3);
	}

	.col-driver-social{
		margin: 40px 0 0;
	}
	.col-driver-social a{
		color: #fff;
	}
	.col-driver-social{
		margin: 40px 0 0;
	}

	.col-driver-social dl dd{
		margin: 20px 0 0;
	}
	.col-driver-social dl dd a{
		text-decoration: underline;
	}
	.col-driver-social dl dd a[target="_blank"]:after{
		content: "";
		display: inline-block;
		margin: 0 0 0 10px;
		width: 14px;
		height: 14px;
		background: url(../../../shared/img/icon_blank_wh.svg) 0 0 no-repeat;
		background-size: 100% 100%;
	}

	.col-driver-social ul{
		margin: 75px -5px 0;
		display: flex;
		flex-wrap: wrap;
	}
	.col-driver-social ul li{
		padding: 0 5px;
		width: 50%;
	}
	.col-driver-social ul li:nth-child(n+3){
		margin-top: 10px;
	}

	.col-driver-social ul li a{
		position: relative;
		display: block;
	}
	.col-driver-social ul li a:before{
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		width: 100%;
		height: 100%;
		opacity: 0;
		background: #fff;
		z-index: 10;
	}

	.f1-driver__list{
		margin: 40px 0 0;
	}
	.f1-driver__list-item-wrap .list-item + .list-item{
		margin-top: 25px;
	}

	.f1-driver__list-slide .f1-driver__list-item-wrap .list-item + .list-item{
		margin-top: 0;
	}


	.f1-driver__list figure{
		position: relative;
	}
	.f1-driver__list figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		border: 1px solid #fff;
		opacity: 0;
	}
	.f1-driver__list .list-item.active figure:after{
		opacity: 1;
	}


}