@charset "UTF-8";



.and-honda__contents .v-txt{
	font-family: "UD新ゴNT M", sans-serif;
}
.goodwood-txt h2,
.introduction-txt h2,
.sec-special-cs,
.sec-special-header h2,
.records-count li .counter,
.sec-flex-header h2,
.race-header h2,
.race-header p,
.related-list__item-header h2,
#photo-gallery .link-box-txt h2,
.bnr-machine .bnr-machine-txt h3,
.engine__list-item-txt-elm h3,
.side-title strong,
.memories-list li p,
.interview-txt h2,
.interview-txt span,
.and-honda-txt h2,
.and-honda-txt span,
.mansell-links-list li p{
	font-family: "UD新ゴNT M", sans-serif;
}

.motor-kv .motor-kv_logo a{
	font-family: "UD新ゴNT DB", sans-serif;
}
.motor-main{
	overflow: inherit;
}
#records .records-catch,
.introduction-catch1 span,
.introduction-catch2 span{
	font-family: "ナウ-GB",sans-serif;
}

#records:after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	z-index: 10;
	opacity: 0;
	transition: opacity 600ms ease;
}	
#records.on:after{
	opacity: 1;
}

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

	.sec-bg{
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
	}

	.sec-bg1 div{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: url(../img/bg_img1.jpg) 50% 50% no-repeat;
		background-size: cover;
	}
	.sec-bg2 div{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: url(../img/bg_img2.jpg) 50% 50% no-repeat;
		background-size: cover;
	}

	section{
		position: relative;
		overflow: hidden;
	}
	#engine{
		background: url(../img/bg_powerdbyhonda.jpg) 50% 50% no-repeat;
		background-size: cover;		
	}

/* top
====================================================================*/

	.sec-header-top h2{
		font-size: 36px;
	}


/* mansell-links-list
====================================================================*/

	#mansell-links{
		background: #fff;
	}
	.mansell-links-list{
		display: flex;
		justify-content: space-between;
		max-width: 1320px;
		margin: 0 auto;
	}
	.mansell-links-list li{
		width: calc(33.3333% - 10px);
	}
	.mansell-links-list li a{
		position: relative;
		display: flex;
		background: #F6F6F6;
		border: 1px solid #ccc;
		transition: opacity 600ms ease !important;
	}
	.mansell-links-list li a:after{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 10px;
		width: 14px;
		height: 14px;
		background: url(../../shared/img/icon_blank_gr.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		z-index: 20;
	}
	.mansell-links-list li a:hover{
		opacity: 0.7;
	}
	.mansell-links-list li a > *{
		width: 50%;
	}
	.mansell-links-list li figure{
		width: 180px;
		height: 125px;
	}
	.mansell-links-list li figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.mansell-links-list li p{
		display: flex;
		padding: 0 35px 0 15px;
		width: calc(100% - 180px);
		align-items: center;
		line-height: calc(28/18);
		font-size: min(15px,1vw);
	}
	.sec{
		background: none;
	}

/* introduction
====================================================================*/

	#introduction{
		position: relative;
		height: 100vh;
	}
	#introduction:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
	}
	.introduction-txt{
		position: relative;
		display: flex;
		width: 100%;
		padding: 0 20px;
		height: 100%;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: #fff;
		z-index: 30;
	}
	.introduction-lead{
		margin: 40px 0 0;
	}
	.introduction-lead p{
		line-height: 2;
		font-size: 18px;
	}
	.introduction-txt h2{
		margin: 30px 0 0;
	}
	.introduction-txt h2 span{
		font-size: 30px;
	}
	.introduction-txt h2 strong{
		display: block;
		margin: 20px 0 0;
		font-size: 40px;
		line-height: calc(76/60);
		color: #DC0017;
	}
	.introduction-catch1{
		position: absolute;
		top: -15px;
		left: 0;
		width: 100%;
		font-size: 108px;
		z-index: 20;
		color: rgba(255,255,255,0.2);
		text-align: right;
	}
	.introduction-catch1 span{
		position: relative;
		right: 0;
	}
	.introduction-catch2{
		position: absolute;
		bottom: -15px;
		left: 50%;
		width: 200vw;
		font-size: 108px;
		z-index: 20;
		color: rgba(255,255,255,0.2);
		transform: translateX(-50%);
		text-align: center;
	}
	.introduction-catch2 span{
		position: relative;
	}
	.introduction-catch2 span + span{
		margin: 0 0 0 40px;
	}


/* interview
====================================================================*/
	
	#interview a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#interview a:before{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: min(80px,5.40vw);
		width: 13px;
		height: 22px;
		background: url(../../shared/img/arrow_wh_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		z-index: 20;
	}
	#interview figure{
		position: relative;
		height: 600px;
		transition: transform 1000ms ease-out;
	}
	#interview figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	#interview figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}
	#interview a:hover figure{
		transform: scale(1.1);
	}

	.interview-txt{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		width: 100%;
		padding: 0 80px;
		height: 100%;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 20;		
	}
	.interview-txt-inner{
		margin: auto;
		display: flex;
		justify-content: flex-end;
		width: 100%;
		max-width: 1000px;
	}
	.interview-txt h2{
		position: relative;
		font-size: 46px;
		line-height: 1.4;
	}
	.interview-txt h2 strong{
		color: #DC0017;
	}
	.interview-lead{
		margin: 20px 0 0;
		line-height: calc(36/16);
	}
	.interview-lead p{
		font-weight: 600;
	}
	.interview-txt-box{
		position: relative;
	}




/* and-honda
====================================================================*/
	
	#and-honda a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#and-honda a:before{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: min(80px,5.40vw);
		width: 13px;
		height: 22px;
		background: url(../../shared/img/arrow_wh_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		z-index: 20;
	}
	#and-honda figure{
		position: relative;
		height: 600px;
		transition: transform 1000ms ease-out;
	}
	#and-honda figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	#and-honda figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}
	#and-honda a:hover figure{
		transform: scale(1.1);
	}

	.and-honda-txt{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		width: 100%;
		padding: 0 80px;
		height: 100%;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 20;		
	}
	.and-honda-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1000px;
	}
	.and-honda-txt h2{
		font-size: 46px;
		line-height: 1.4;
	}
	.and-honda-txt h2 strong{
		color: #DC0017;
	}
	.and-honda-lead{
		margin: 20px 0 0;
		line-height: calc(36/16);
	}
	.and-honda-lead p{
		font-weight: 600;
	}



/* goodwood
====================================================================*/
	
	#goodwood .sec-inner{
		margin: auto;
		max-width: 1280px;
	}
	#goodwood a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	#goodwood a:before{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: min(20px,5.40vw);
		width: 13px;
		height: 22px;
		background: url(../../shared/img/arrow_wh_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		z-index: 20;
	}
	#goodwood figure{
		position: relative;
		height: 410px;
		transition: transform 1000ms ease-out;
	}
	#goodwood figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	#goodwood figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}
	#goodwood a:hover figure{
		transform: scale(1.1);
	}

	.goodwood-txt{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		width: 100%;
		padding: 0 80px;
		height: 100%;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 20;		
	}
	.goodwood-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1000px;
	}
	.goodwood-txt h2{
		font-size: 46px;
		line-height: 1.4;
	}
	.goodwood-txt h2 strong{
		color: #DC0017;
	}
	.goodwood-lead{
		margin: 20px 0 0;
		line-height: calc(36/16);
	}
	.goodwood-lead p{
		font-weight: 600;
	}




/* race
====================================================================*/
	
	#race a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#race a:before{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: min(80px,5.40vw);
		width: 13px;
		height: 22px;
		background: url(../../shared/img/arrow_wh_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		z-index: 20;
	}
	#race figure{
		position: relative;
		height: 600px;
		transition: transform 1000ms ease-out;
	}
	#race figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	#race figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.45);
	}
	#race a:hover figure{
		transform: scale(1.1);
	}
	.race-txt{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		width: 100%;
		padding: 0 80px;
		height: 100%;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 20;		
	}
	.race-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1100px;
	}
	.race-header h2{
		margin: 10px 0 0;
		font-size: 46px;
		line-height: 1.4;
	}
	.race-header h2 strong{
		color: #DC0017;
	}
	.race-header p{
		font-size: 28px;
	}
	.race-lead{
		margin: 20px 0 0;
		line-height: calc(36/16);
	}
	.race-lead p{
		font-weight: 600;
	}


/* POWEREDbyHONDA . Machine
====================================================================*/
	
	.sec-flex{
		position: relative;
		display: flex;
		z-index: 10;
	}
	.sec-flex > div{
		position: relative;
		display: block;
		width: 50%;
		overflow: hidden;
	}
	.sec-flex a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	.sec-flex a:before{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: min(40px,5.40vw);
		width: 13px;
		height: 22px;
		background: url(../../shared/img/arrow_wh_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		z-index: 20;
	}
	.sec-flex figure{
		position: absolute;
		width: 100%;
		height: 100%;
		transition: transform 1000ms ease-out;
	}
	.sec-flex figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.sec-flex figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
	}
	.sec-flex a:hover figure{
		transform: scale(1.1);
	}
	.sec-flex-txt{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		width: 100%;
		padding: 0 80px;
		height: 100%;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: #fff;
		z-index: 20;		
	}
	.sec-flex-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1000px;
	}
	.sec-flex-header h2{
		font-size: 36px;
		line-height: calc(76/60);
	}
	.sec-flex-lead{
		margin: 30px 0 0;
		line-height: calc(36/16);
	}
	.sec-flex-lead p{
		font-weight: 600;
	}
	#powerd-by-honda .sec-flex-header h2{
		margin: auto;
		max-width: 350px;
	}

	.sec-special-txt{
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		width: 100%;
		padding: 40px 80px 40px min(6.66vw,80px);
		height: 100%;
		min-height: 460px;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: #fff;
		z-index: 20;		
	}
	.sec-special-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1000px;
		text-align: left;
	}
	.sec-special-header h2{
		font-size: min(36px,3vw);
		line-height: calc(46/32);
	}
	.sec-special-header h2 strong{
		color: #DC0017;
	}
	.sec-special-header span{
		margin: 0 0 10px;
		display: block;
		font-size: 16px;
		font-size: min(16px,1.5vw);
		line-height: 1.5;
		font-weight: 600;
	}
	.sec-special-lead{
		margin: 30px 0 0;
		line-height: calc(36/16);
	}
	.sec-special-lead p{
		font-weight: 600;
		font-size: min(16px,1.33vw);
	}
	.sec-special-cs{
		font-size: 32px;
		text-align: center;
	}
	#special .bg-num{
		position: absolute;
		left: 50%;
		top: 10px;
		transform: translateX(-50%);
		width: 100%;
		font-size: 260px;
		text-align: center;
		z-index: 1;
		color: rgba(0,0,0,0.1);
	}


/* records
====================================================================*/

	#records{
		position: relative;
		padding: 400px 0 80px;
	}
	#records .sec-header{
		position: relative;
		color: #fff;
		z-index: 20;
	}
	#records .sec-header strong{
		color: #DC0017;
	}
	#records .records-catch{
		position: absolute;
		left: 50%;
		width: 200vw;
		text-align: center;
		transform: translateX(-50%);
		top: -25px;
		font-size: 232px;
		color: #fff;
		opacity: 0.2;
		z-index: 40;
	}
	.records-list-wrap{
		margin: auto;
		padding: 0 20px;
		max-width: 940px;
	}
	.records-list{
		position: relative;
		margin: 0 -12px;
		display: flex;
		flex-wrap: wrap;
		z-index: 30;
		color: #fff;
	}
	.records-list-item{
		padding: 0 12px;
		width: 33.3333%;
	}
	.records-list-item.records-lapsraced,
	.records-list-item.records-lapsled{
		width: 50%;
	}
	.records-list-item:nth-child(n+4){
		margin: 30px 0 0;
	}

	.records-profile h3{
		font-weight: 600;
		font-size: 28px;
	}
	.records-profile dl{
		display: flex;
		padding: 20px 0;
		font-size: 14px;
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}
	.records-profile dl dt{
		width: 100px;
		font-weight: 600;
	}
	.records-profile dl dd{
		width: calc(100% - 100px);
		line-height: 1.3;
	}

	.records-profile .profile-box-jp dl dt{
		width: 80px;
	}
	.records-profile .profile-box-jp dl dd{
		width: calc(100% - 80px);
	}

	.profile-box{
		margin: 20px 0 0;
	}

	.records-list-item-box{
		position: relative;
		padding: 0 0 40px;
		height: 100%;
		border-width: 0 1px 1px 1px;
		border-style: solid;
		border-color: rgba(255,255,255,0.3);
		background: rgba(0,0,0,0.4);
	}
	.records-list-item-box h4{
		position: absolute;
		top:0;
		left: -1px;
		width: calc(100% + 2px);
		text-align: center;
		transform: translateY(-50%);
		overflow: hidden;
	}
	.records-list-item-box h4 em{
		font-size: 12px;
	}
	.records-list-item-box h4 span{
		padding: 0 12px;
		position: relative;
		font-weight: 600;
	}
	.records-list-item-box h4 span:before,
	.records-list-item-box h4 span:after{
		content: "";
		display: block;
		margin-top: -1px;
		top: 50%;
		transform: translateY(-50%);
		position: absolute;
		width: 100vw;
		height: 1px;
		background: rgba(255,255,255,0.3);
	}
	.records-list-item-box h4 span:before{
		left: 100%;
	}
	.records-list-item-box h4 span:after{
		right: 100%;
	}

	.records-list-item-box .icon{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 180px;
	}
	.records-count{
		display: flex;
	}
	.records-count li{
		position: relative;
		width: 50%;
		text-align: center;
	}
	.records-count li + li:before{
		content: "";
		position: absolute;
		left: 0;
		display: block;
		width: 1px;
		height: 80px;
		background: rgba(255,255,255,0.3);
	}
	.records-count li span{
		text-align: center;
		font-size: 14px;
		font-weight: 600;
	}
	.records-count li .counter{
		margin: 20px 0 0;
		text-align: center;
		font-size: min(40px,4.21vw);
		font-weight: 600;
	}
	.records-count li.records-count__honda{
		color: #DC0017;
	}

	.records-lapsraced .records-list-item-box,
	.records-lapsled .records-list-item-box{
		display: flex;
		padding: 35px 0;
		align-items: center;
	}
	.records-lapsraced .icon,
	.records-lapsled .icon{
		height: auto;
		width: 140px;
	}
	.records-lapsraced .records-count,
	.records-lapsled .records-count{
		width: calc(100% - 140px);
	}
	.records-racewin .icon img{
		width: 46px;
	}
	.records-poleposition .icon img{
		width: 53px;
	}
	.records-grandprix .icon img{
		width: 94px;
	}
	.records-totalpodiums .icon img{
		width: 63px;
	}
	.records-retirements .icon img{
		width: 63px;
	}
	.records-lapsraced .icon img{
		width: 62px;
	}
	.records-lapsled .icon img{
		width: 62px;
	}
	.records-list-attention{
		position: relative;
		margin: 20px 0 0;
		z-index: 20;
	}
	.records-list-attention ul{
		display: flex;
		flex-wrap: wrap;
		color: #fff;
		font-size: 13px;
	}
	.records-list-attention ul li{
		margin: 0 10px 0 0;
	}
	.records-list-attention p{
		margin: 10px 0 0;
		color: #fff;
		font-size: 14px;
		line-height: 1.5;
	}
	.records-list-attention p a{
		color: #fff;
		text-decoration: underline;
	}
	.records-list-attention p a:hover{
		text-decoration: none;
	}


/* photo-gallery
====================================================================*/

	.photo-gallery-box{
		position: relative;
	}
	.photo-gallery-box a{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 100%;
		height: 100%;
		background: #fff;
	}
	.photo-gallery-box figure{
		height: 460px;
	}
	.photo-gallery-box figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.photo-gallery-box .link-box {
		position: absolute;
		padding: 0 20px;
		width: 100%;
		max-width: 940px;
		top: 50%;
		left: 50%;
		height: 242px;
		transform: translate(-50%,-50%);
	}
	.photo-gallery-box .link-box-txt h2 {
		font-size: 36px;
	}	
	.photo-gallery-box .link-box-txt h2 + p{
		margin: 25px 0 0;
	}	
	.photo-gallery-box a:before{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 40px;
		width: 13px;
		height: 22px;
		background: url(../../shared/img/arrow_gr_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		z-index: 20;
	}
	.photo-gallery-box a:after{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		transition: opacity 500ms ease;
		opacity: 0;
		z-index: 30;
	}
	.photo-gallery-box a:hover:after{
		opacity: 0.4;
	}


	.related-list__item a {
		position: relative;
		display: block;
		overflow: hidden;
	}
	.related-list__item a figure {
		transition: transform 1000ms ease-out;
	}
	.related-list__item a figure img{
		width: 100%;
		height: auto;
	}
	.related-list__item a:hover figure {
		transform: scale(1.1);
	}
	.related-list__item-header {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 100%;
		padding: 0 30px 0 20px;
		max-width: 1140px;
		color: #fff;
		z-index: 25;
	}
	.related-list__item a:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		z-index: 20;
	}
	.related-list__item-header h2 {
		position: relative;
		color: #fff;
		font-size: 46px;
		line-height: 1.2;
	}
	.related-list__item-movie .related-list__item-header h2 {
		padding: 0 0 0 60px;
	}
	.related-list__item-header p {
		margin: 35px 0 0;
		font-weight: 600;
		line-height: 1.5;
	}
	.related-list__item-header p:after {
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 20px;
		width: 8px;
		height: 14px;
		background: url(../../shared/img/arrow_wh_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.icon-play {
		position: absolute;
		display: block;
		top: 3px;
		left: 0;
		width: 40px;
		height: 40px;
		border-radius: 20px;
		background: #fff;
	}
	.icon-play:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -8px 0 0 -6px;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 8px 0 8px 16px;
		border-color: transparent transparent transparent #555555;
	}

}



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

	.mansell-links-list{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		max-width: 1320px;
		margin: 0 auto;
	}
	.mansell-links-list li{
		width: 640px;
	}
	.mansell-links-list li + li{
		margin-top: 20px;
	}
	.mansell-links-list li p{
		font-size: 15px;
	}
}



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


	.sec-bg{
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
	}

	.sec-bg1 div{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: url(../img/bg_img1.jpg) 50% 50% no-repeat;
		background-size: cover;
	}
	.sec-bg2 div{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: url(../img/bg_img2.jpg) 50% 50% no-repeat;
		background-size: cover;
	}


	section{
		position: relative;
		overflow: hidden;
	}


	#engine{
		background: url(../img/bg_powerdbyhonda_sp.jpg) 50% 50% no-repeat;
		background-size: cover;		
	}
	#engine .sec-header h2,
	#machine .sec-header h2,
	#gallery .sec-header h2{
		text-align: left;
	}
/* top
====================================================================*/

	.sec-header-top h2{
		font-size: 26px;
		text-align: center;
	}

/* mansell-links-list
====================================================================*/

	#mansell-links{
		padding: 15px;
		background: #fff;
	}
	.mansell-links-list li + li{
		margin-top: 15px;
	}
	.mansell-links-list li a{
		position: relative;
		display: flex;
		background: #F6F6F6;
		border: 1px solid #ccc;
	}
	.mansell-links-list li a:after{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 15px;
		width: 14px;
		height: 14px;
		background: url(../../shared/img/icon_blank_gr.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		z-index: 20;
	}
	.mansell-links-list li figure img{
		width: auto;
		height: 80px;
	}
	.mansell-links-list li p{
		display: flex;
		padding: 0 35px 0 12px;
		align-items: center;
		line-height: calc(18/12);
		font-size: 12px;
	}
	.sec{
		background: none;
	}


/* introduction
====================================================================*/

	#introduction{
		position: relative;
		height: 100vh;
	}
	#introduction:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
	}
	.introduction-txt{
		position: relative;
		display: flex;
		width: 100%;
		padding: 0 32px;
		height: 100%;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 30;
	}
	.introduction-lead{
		margin: 40px 0 0;
	}
	.introduction-lead p{
		line-height: 2;
		font-size: min(14px,3.73vw);
	}
	.introduction-txt h2{
		margin: 30px 0 0;
		font-size: 20px;
	}
	.introduction-txt h2 strong{
		display: block;
		margin: 10px 0 0;
		font-size: 26px;
		line-height: 1.5;
		color: #DC0017;
	}
	.introduction-catch1{
		position: absolute;
		top: -5px;
		left: 3px;
		width: 100%;
		font-size: 46px;
		z-index: 20;
		color: rgba(255,255,255,0.2);
		text-align: right;
	}
	.introduction-catch1 span{
		position: relative;
		right: 0;
	}
	.introduction-catch2{
		position: absolute;
		bottom: -5px;
		left: 0;
		width: 100%;
		font-size: 46px;
		z-index: 20;
		color: rgba(255,255,255,0.2);
		text-align: center;
	}
	.introduction-catch2 span{
		position: relative;
		display: block;
	}


/* interview
====================================================================*/
	
	#interview a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#interview a:before{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 16px;
		width: 8px;
		height: 14px;
		background: url(../../shared/img/arrow_wh_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		z-index: 20;
	}
	#interview figure{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#interview figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
		object-position: 50% 50%;
	}
	#interview figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}

	.interview-txt{
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		width: 100%;
		padding: 30px 32px;
		height: 100%;
		min-height: 255px;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 20;		
	}
	.interview-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1000px;
	}
	.interview-txt h2{
		position: relative;
		font-size: 26px;
		line-height: calc(34/26);
	}
	.interview-txt h2 strong{
		color: #DC0017;
	}
	.interview-lead{
		margin: 15px 0 0;
		line-height: calc(22/12);
		font-size: 12px;
	}
	.interview-lead p{
		font-weight: 600;
	}
	.interview-txt-box{
		position: relative;
	}





/* and-honda
====================================================================*/
	
	#and-honda a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#and-honda a:before{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 16px;
		width: 8px;
		height: 14px;
		background: url(../../shared/img/arrow_wh_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		z-index: 20;
	}
	#and-honda figure{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#and-honda figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
		object-position: 50% 50%;
	}
	#and-honda figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}

	.and-honda-txt{
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		width: 100%;
		padding: 30px 32px;
		height: 100%;
		min-height: 255px;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 20;		
	}
	.and-honda-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1000px;
	}
	.and-honda-txt h2{
		font-size: 26px;
		line-height: calc(34/26);
	}
	.and-honda-txt h2 strong{
		color: #DC0017;
	}
	.and-honda-lead{
		margin: 15px 0 0;
		line-height: calc(22/12);
		font-size: 12px;
	}
	.and-honda-lead p{
		font-weight: 600;
	}


/* goodwood
====================================================================*/

	#goodwood a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#goodwood a:before{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 16px;
		width: 8px;
		height: 14px;
		background: url(../../shared/img/arrow_wh_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		z-index: 20;
	}
	#goodwood figure{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#goodwood figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
		object-position: 50% 50%;
	}
	#goodwood figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}

	.goodwood-txt{
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		width: 100%;
		padding: 30px 32px;
		height: 100%;
		min-height: 255px;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 20;		
	}
	.goodwood-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1000px;
	}
	.goodwood-txt h2{
		font-size: 26px;
		line-height: calc(34/26);
	}
	.goodwood-txt h2 strong{
		color: #DC0017;
	}
	.goodwood-lead{
		margin: 15px 0 0;
		line-height: calc(22/12);
		font-size: 12px;
	}
	.goodwood-lead p{
		font-weight: 600;
	}



/* race
====================================================================*/
	
	#race a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#race a:before{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 16px;
		width: 8px;
		height: 14px;
		background: url(../../shared/img/arrow_wh_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		z-index: 20;
	}
	#race figure{
		position: relative;
		height: 360px;
	}
	#race figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	#race figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.45);
	}
	.race-txt{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		width: 100%;
		padding: 0 32px;
		height: 100%;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 20;		
	}
	.race-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1000px;
	}
	.race-header h2{
		margin: 5px 0 0;
		font-size: 26px;
		line-height: calc(76/60);
	}
	.race-header h2 strong{
		color: #DC0017;
	}
	.race-lead{
		margin: 15px 0 0;
		line-height: calc(22/12);
		font-size: 12px;
	}
	.race-lead p{
		font-weight: 600;
	}


/* POWEREDbyHONDA . Machine
====================================================================*/
	
	.sec-flex{
		position: relative;
		z-index: 10;
	}
	.sec-flex > div{
		position: relative;
		display: block;
	}
	.sec-flex a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	.sec-flex a:before{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 16px;
		width: 8px;
		height: 14px;
		background: url(../../shared/img/arrow_wh_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		z-index: 20;
	}
	.sec-flex figure{
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.sec-flex figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.sec-flex figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
	}
	.sec-flex-txt{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		width: 100%;
		padding: 0 32px;
		height: 100%;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 20;		
	}
	.sec-flex-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1000px;
	}
	.sec-flex-header h2{
		font-size: 20px;
		line-height: calc(28/20);
	}
	.sec-flex-header h2 br{
		display: none;
	}

	.sec-flex-lead{
		margin: 20px 0 0;
		line-height: calc(22/12);
		font-size: 12px;
	}
	.sec-flex-lead p{
		font-weight: 600;
	}
	#powerd-by-honda .sec-flex-header h2{
		max-width: 200px;
	}

	.sec-special-txt{
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		width: 100%;
		padding: 20px 32px;
		height: 100%;
		min-height: 360px;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: #fff;
		z-index: 20;		
	}
	.sec-special-txt-inner{
		margin: auto;
		width: 100%;
		text-align: left;
	}
	.sec-special-header h2{
		font-size: 20px;
		line-height: calc(34/26);
	}
	.sec-special-header h2 strong{
		display: block;
		color: #DC0017;
	}
	.sec-special-header span{
		margin: 0 0 10px;
		display: block;
		font-size: 12px;
		line-height: 1.5;
		font-weight: 600;
	}
	.sec-special-lead{
		margin: 10px 0 0;
		line-height: calc(36/16);
	}
	.sec-special-lead p{
		font-weight: 600;
		font-size: 12px;
	}
	.sec-special-cs{
		font-size: 20px;
		text-align: center;
	}
	#special .bg-num{
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		width: 100%;
		font-size: 95px;
		text-align: center;
		z-index: 1;
		color: rgba(0,0,0,0.1);
	}



/* records
====================================================================*/

	#records{
		position: relative;
		padding: 400px 32px 40px;
	}
	#records .sec-header{
		position: relative;
		color: #fff;
		z-index: 20;
	}
	#records .sec-header strong{
		color: #DC0017;
	}
	#records .records-catch{
		position: absolute;
		left: 50%;
		width: 200vw;
		text-align: center;
		transform: translateX(-50%);
		top: -10px;
		font-size: 95px;
		color: #fff;
		opacity: 0.2;
		z-index: 40;
	}

	#records .records-catch span{
		display: block;
		width: 100%;
	}
	#records .records-catch span:nth-child(1){
		position: relative;
		left: -30px;
	}
	#records .records-catch span:nth-child(2){
		position: relative;
		top: -10px;
		right: -60px;
	}

	.records-list{
		position: relative;
		z-index: 30;
		color: #fff;
	}
	.records-list-item + .records-list-item{
		margin-top: 20px;
	}

	.records-profile h3{
		font-weight: 600;
		font-size: 18px;
	}
	.records-profile dl{
		display: flex;
		padding: 20px 0;
		font-size: 12px;
		border-bottom: 1px solid rgba(255,255,255,0.3);
	}
	.records-profile dl dt{
		width: 75px;
		font-weight: 600;
	}
	.records-profile dl dd{
		width: calc(100% - 75px);
		line-height: 1.3;
	}

	.records-list-item-box{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25px 0;
		height: 100%;
		border-width: 0 1px 1px 1px;
		border-style: solid;
		border-color: rgba(255,255,255,0.3);
		background: rgba(0,0,0,0.4);
	}
	.records-list-item-box h4{
		position: absolute;
		top:0;
		left: -1px;
		width: calc(100% + 2px);
		text-align: center;
		transform: translateY(-50%);
		overflow: hidden;
	}
	.records-list-item-box h4 em{
		font-size: 9px;
	}
	.records-list-item-box h4 span{
		padding: 0 12px;
		position: relative;
		font-weight: 600;
	}
	.records-list-item-box h4 span:before,
	.records-list-item-box h4 span:after{
		content: "";
		display: block;
		margin-top: -1px;
		top: 50%;
		transform: translateY(-50%);
		position: absolute;
		width: 100vw;
		height: 1px;
		background: rgba(255,255,255,0.3);
	}
	.records-list-item-box h4 span:before{
		left: 100%;
	}
	.records-list-item-box h4 span:after{
		right: 100%;
	}
	.records-list-item-box .icon{
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(100% - 180px);
	}
	.records-count{
		display: flex;
		justify-content: center;
		width: 180px;
	}
	.records-count li{
		position: relative;
		width: 50%;
		text-align: center;
	}
	.records-count li + li:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		display: block;
		width: 1px;
		height: 40px;
		background: rgba(255,255,255,0.3);
	}
	.records-count li span{
		text-align: center;
		font-size: 9px;
		font-weight: 600;
	}
	.records-count li .counter{
		margin: 5px 0 0;
		text-align: center;
		font-size: 28px;
		font-weight: 600;
	}
	.records-count li.records-count__honda{
		color: #DC0017;
	}
	.records-racewin .icon img{
		width: 32px;
	}
	.records-poleposition .icon img{
		width: 34px;
	}
	.records-grandprix .icon img{
		width: 60px;
	}
	.records-totalpodiums .icon img{
		width: 42px;
	}
	.records-retirements .icon img{
		width: 40px;
	}
	.records-lapsraced .icon img{
		width: 36px;
	}
	.records-lapsled .icon img{
		width: 36px;
	}
	.records-list-attention{
		position: relative;
		margin: 15px 0 0;
		z-index: 20;
	}
	.records-list-attention ul{
		color: #fff;
	}
	.records-list-attention ul li + li{
		margin-top: 10px;
	}
	.records-list-attention p{
		margin: 10px 0 0;
		color: #fff;
		font-size: 14px;
		line-height: 1.5;
	}

	.records-list-attention p{
		color: #fff;
		font-size: 12px;
		line-height: calc(20/12);
	}
	.records-list-attention p a{
		color: #fff;
		text-decoration: underline;
	}


/* photo-gallery
====================================================================*/

	.photo-gallery-box{
		position: relative;
	}
	.photo-gallery-box a{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 100%;
		height: 100%;
		background: #fff;
	}
	.photo-gallery-box figure{
		height: 254px;
	}
	.photo-gallery-box figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.photo-gallery-box .link-box {
		position: absolute;
		padding: 0 32px;
		width: 100%;
		top: 50%;
		left: 50%;
		height: 130px;
		transform: translate(-50%,-50%);
	}
	.photo-gallery-box .link-box-txt h2 {
		font-size: 20px;
		line-height: 1.3;
	}	
	.photo-gallery-box .link-box-txt h2 + p{
		margin: 15px 0 0;
		line-height: 1.5;
		font-size: 12px;
	}	
	.photo-gallery-box a:before{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 15px;
		width: 9px;
		height: 14px;
		background: url(../../shared/img/arrow_gr_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
		z-index: 20;
	}
	.photo-gallery-box a:after{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		transition: opacity 500ms ease;
		opacity: 0;
		z-index: 30;
	}

/* related
====================================================================*/

	.related-list__item a{
		position: relative;
		display: block;
		overflow: hidden;
		height: 210px;
	}
	.related-list__item figure{
		height: 100%;
	}
	.related-list__item figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	.related-list__item-header{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		padding: 0 20px 0;
		color: #fff;
		height: 100%;
		z-index: 25;
	}
	.related-list__item-header h2{
		position: absolute;
		top: 25px;
		padding: 0 40px 0 0;
		color: #fff;
		font-size: 24px;
		line-height: calc(32/24);
	}
	.related-list__item-movie .related-list__item-header h2{
		padding: 0 40px 0 60px;
	}
	.related-list__item-header p{
		position: absolute;
		bottom: 16px;
		padding: 0 40px 0 0;
		margin: 35px 0 0;
		font-weight: 600;
		line-height: 1.5;
	}
	.related-list__item-header p:after{
		content: "";
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 20px;
		width: 8px;
		height: 14px;
		background: url(../../shared/img/arrow_wh_r.svg) 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.related-cs{
		padding: 35px 16px;
		background: #fff;
	}
	.related-cs h3{
		font-size: 24px;
		text-align: center;
	}
	.related-cs p{
		margin: 30px 0 0;
		line-height: calc(28/16);
	}

	.icon-play{
		position: absolute;
		display: block;
		top: -4px;
		left: 0;
		width: 40px;
		height: 40px;
		border-radius: 20px;
		background: #fff;
	}
	.icon-play:after{
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -8px 0 0 -6px;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 8px 0 8px 16px;
		border-color: transparent transparent transparent #555555;
	}



}