@charset "UTF-8";

.sec-header-60th p,
.sec-header-60th h2 span,
.trivia-list-item__hedaer p,
.trivia-list-item__hedaer h3 span,
.sec-60th-header h2,
.sec-header-60th h2 strong{
	font-family: "UD新ゴNT M", sans-serif;
}

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


	.sec-header-60th h2{
		font-size: 36px;
		font-size: min(36px,3.59vw);
		line-height: 1.2;
	}
	.sec-header-60th h2 span{
		display: block;
		line-height: 1.2;
	}
	.sec-header-60th h2 span + strong,
	.sec-header-60th h2 strong + span{
		margin-top: 15px;
	}

	.sec-header-60th h2 strong{
		display: inline-block;
		padding: 2px;
		font-size: min(50px,5vw);
		background-image: linear-gradient(#000 0%, #000 100%);
		background-size: 0 100%;
		background-size: 100% 100%;
		background-position: 0 100%;
		background-repeat: no-repeat;
	}

	.sec-header-60th h2 strong:nth-child(n+2){
		margin-top: 8px;
	}

	.sec-header-60th p{
		margin: 15px 0 0;
		font-size: 28px;
		font-weight: 600;
	}
	.sec-lead-60th{
		margin: 40px 0 0;
	}
	.sec-lead-60th p{
		font-weight: 600;
		line-height: calc(36/16);
	}
	.sec-lead-60th-center{
		text-align: center;
	}
	#trivia .sec-header-60th h2{
		text-align: center;
	}
	#trivia .sec-header-60th h2 strong{
		margin-top: 15px;
	}
	.sec-caption-60th{
		margin: 20px 0 0;
		font-size: 13px;
		line-height: 1.8;
	}


/* sec-bg
====================================================================*/

	.sec-bg{
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
	}
	.sec-bg2 div{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: url(../img/bg_img.jpg) 50% 50% no-repeat;
		background-size: cover;
	}


/* statement
====================================================================*/

	#statement .statement-inner{
		margin: auto;
		display: flex;
		flex-direction: row-reverse;
	}
	.statement-header-logo{
		width: 300px;
	}
	.statement-header-logo + h2{
		margin: 100px 0 0;
	}
	#statement .statement-inner figure{
		width: 50%;
	}
	#statement .statement-inner figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	#statement .statement-inner .statement-txt{
		display: flex;
		align-items: center;
		width: 50%;
		padding: 100px 75px;
	}
	.statement-header h2{
		font-size: 22px;
		font-weight: 600;
		line-height: 1.5;
	}
	.statement-lead{
		margin: 40px 0 0 0;
	}
	.statement-lead p{
		line-height: calc(36/16);
		font-weight: 600;
	}
	.statement-lead p + p{
		margin-top: 30px;
	}


/* demorun
====================================================================*/
	
	#demorun a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#demorun 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;
	}
	#demorun figure{
		position: relative;
		height: 800px;
		transition: transform 1000ms ease-out;
	}
	#demorun figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	#demorun figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}
	#demorun a:hover figure{
		transform: scale(1.1);
	}

	.demorun-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;		
	}
	.demorun-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1100px;
	}


/* overview
====================================================================*/
	
	#overview a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#overview 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;
	}
	#overview figure{
		position: relative;
		height: 800px;
		transition: transform 1000ms ease-out;
	}
	#overview figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	#overview figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}
	#overview a:hover figure{
		transform: scale(1.1);
	}

	.overview-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;		
	}
	.overview-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1100px;
	}

	.overview-catch{
		position: absolute;
		bottom: -15px;
		left: 50%;
		width: 200vw;
		font-size: 80px;
		z-index: 20;
		color: rgba(255,255,255,0.2);
		transform: translateX(-50%);
		text-align: center;
	}
	.overview-catch span{
		position: relative;
	}
	.overview-catch span + span{
		margin: 0 0 0 40px;
	}



/* memories
====================================================================*/
	
	#memories a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#memories 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;
	}
	#memories figure{
		position: relative;
		height: 600px;
		transition: transform 1000ms ease-out;
	}
	#memories figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	#memories figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}
	#memories a:hover figure{
		transform: scale(1.1);
	}
	.memories-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;		
	}
	.memories-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1100px;
	}


/* special
====================================================================*/
	
	#special a{
		position: relative;
		display: block;
		height: 670px;
	}
	#special 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;
	}
	#special figure{
		position: absolute;
		margin: auto 0 auto -320px;
		top: 0;
		left: 50%;
		bottom: 0;
		height: 566px;
		width: 1031px;
		transition: transform 1000ms ease-out;
	}
	#special figure img{
		height: 100%;
	}
	#special figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}
	#special a:hover figure{
		transform: scale(1.1);
	}
	.special-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;		
	}
	.special-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1100px;
	}



/* race-60th
====================================================================*/
	
	#race-60th a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#race-60th 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-60th figure{
		position: relative;
		height: 700px;
		transition: transform 1000ms ease-out;
	}
	#race-60th figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	#race-60th figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}
	#race-60th a:hover figure{
		transform: scale(1.1);
	}
	.race-60th-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-60th-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1100px;
	}

	.race-60th-lead{
		margin: 40px 0 0;	
	}
	.race-60th-lead-list{
		display: flex;
	}
	.race-60th-lead li{
		text-indent: -1em;
		padding: 0 0 0 1em;
		line-height: calc(28/16);
	}
	.race-60th-lead ul + ul{
		margin: 0 0 0 15px;
	}
	.race-60th-lead li + li{
		margin-top: 5px;
	}




/* trivia
====================================================================*/

	.trivia-list{
		display: flex;
		margin: 60px -5px 0;
		padding: 0 0 30px;
	}
	.trivia-list-item{
		padding: 0 5px;
		width: 33.3333%;
	}
	.trivia-list-item__figwrap{
		position: relative;
	}

	.trivia-list-item__hedaer{
		position: absolute;
		bottom: -30px;
		padding: 0 min(30px,2.02vw);
	}
	.trivia-list--en .trivia-list-item__hedaer{
		bottom: 0;
		padding: 0 min(30px,2.02vw) min(30px,2.02vw);
	}
	.trivia-list-item__hedaer h3{
		line-height: 1.2;
	}
	.trivia-list-item__hedaer h3 span{
		padding: 2px 0;
		display: inline-block;
		font-size: min(28px,1.86vw);
		background-image: linear-gradient(#000 0%, #000 100%);
		background-size: 100% 100%;
		background-position: 0 100%;
		background-repeat: no-repeat;
	}
	.trivia-list-item__hedaer p{
		margin-top: 20px;
	}
	.trivia-list-item__hedaer p span{
		display: inline-block;
		font-size: min(18px,1.21vw);
		background-image: linear-gradient(#000 0%, #000 100%);
		background-size: 100% 100%;
		background-position: 0 100%;
		background-repeat: no-repeat;
	}
	.trivia-list-item__hedaer p span:nth-child(n+2){
		margin-top: 8px;
	}
	.trivia-list-item figure{
		overflow: hidden;
	}
	.trivia-list-item figure img{
		transition: transform 1000ms ease-out;
	}
	.trivia-list-item figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}
	.trivia-list-item a:hover figure img{
		transform: scale(1.1);
	}


/* document
====================================================================*/
	

	#document figure.document-bg{
		position: relative;
		height: 700px;
	}
	#document figure.document-bg img{
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	#document figure.document-bg:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.7);
	}
	.document-contents{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		width: 100%;
		padding: 0 80px;
		height: 100%;
		color: #fff;
		z-index: 20;		
	}
	.document-contents-inner{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
		max-width: 1100px;
		height: 100%;
	}
	.document-txt{
		margin: auto;
		padding: 0 90px 0 0;
		width: calc(100% - 260px);
	}
	.document-contents figure{
		width: 260px;
	}
	.document-contents .button-link{
		margin: 60px 0 0;
	}


/* related
====================================================================*/
	
	.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: 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-flex-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1000px;
		text-align: center;
	}



/* engine
====================================================================*/

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



}



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


}



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


	.sec-header-60th h2{
		font-size: 20px;
		line-height: 1.4;
	}
	.sec-header-60th h2 span{
		display: block;
		line-height: 1.2;
	}
	.sec-header-60th h2 span + strong,
	.sec-header-60th h2 strong + span{
		margin-top: 8px;
	}
	.sec-header-60th h2 strong:nth-child(n+2){
		margin-top: 5px;
	}
	.sec-header-60th h2 strong{
		display: inline-block;
		padding: 2px;
		font-size: min(26px,6.93vw);
		background-image: linear-gradient(#000 0%, #000 100%);
		background-size: 0 100%;
		background-size: 100% 100%;
		background-position: 0 100%;
		background-repeat: no-repeat;
	}
	.sec-header-60th p{
		margin: 15px 0 0;
		font-size: 16px;
		font-weight: 600;
	}
	.sec-lead-60th{
		margin: 15px 0 0;
	}
	.sec-lead-60th p{
		font-weight: 600;
		font-size: 12px;
		line-height: calc(22/12);
	}
	.sec-lead-60th-center{
		text-align: center;
	}
	#trivia .sec-header-60th h2{
		text-align: center;
	}
	#trivia .sec-header-60th h2 strong{
		margin-top: 10px;
	}
	.sec-caption-60th{
		margin: 10px 0 0;
		font-size: 12px;
		line-height: 1.8;
	}

/* sec-bg
====================================================================*/

	.sec-bg{
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
	}
	.sec-bg2 div{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: url(../img/bg_img.jpg) 50% 50% no-repeat;
		background-size: cover;
	}




/* statement
====================================================================*/

	#statement .statement-inner figure{
		margin: 30px auto 0;
	}
	.statement-header-logo{
		width: 180px;
	}
	.statement-header-logo + h2{
		margin: 50px 0 0;
	}
	#statement .statement-inner{
		padding: 50px 30px 30px;
	}
	.statement-header h2{
		font-size: 16px;
		font-weight: 600;
		line-height: 1.5;
	}
	.statement-lead{
		margin: 20px 0 0;
	}
	.statement-lead p{
		line-height: 2;
		font-weight: 600;
	}
	.statement-lead p + p{
		margin-top: 15px;
	}


/* demorun
====================================================================*/
	
	#demorun a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#demorun 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;
	}
	#demorun figure{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#demorun figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
		object-position: 50% 50%;
	}
	#demorun figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}

	.demorun-txt{
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		width: 100%;
		padding: 30px 32px;
		height: 100%;
		min-height: 400px;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 20;		
	}
	.demorun-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1000px;
	}


/* overview
====================================================================*/
	
	#overview a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#overview 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;
	}
	#overview figure{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#overview figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
		object-position: 50% 50%;
	}
	#overview figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}

	.overview-txt{
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		width: 100%;
		padding: 30px 32px;
		height: 100%;
		min-height: 400px;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 20;		
	}
	.overview-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1000px;
	}

	.overview-catch{
		position: absolute;
		bottom: -5px;
		left: 0;
		width: 100%;
		font-size: 32px;
		z-index: 20;
		color: rgba(255,255,255,0.2);
		text-align: center;
	}
	.overview-catch span{
		position: relative;
		display: block;
	}


/* memories
====================================================================*/
	
	#memories a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#memories 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;
	}
	#memories figure{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#memories figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
		object-position: 50% 50%;
	}
	#memories figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}

	.memories-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;		
	}
	.memories-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1000px;
	}


/* special
====================================================================*/
	
	#special a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#special 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;
	}
	#special figure{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#special figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
		object-position: 50% 50%;
	}
	#special figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}

	.special-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;		
	}
	.special-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1000px;
	}


/* race-60th
====================================================================*/
	
	#race-60th a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}
	#race-60th 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-60th figure{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#race-60th figure img{
		object-fit: cover;
		width: 100%;
		height: 100%;
		object-position: 50% 50%;
	}
	#race-60th figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}

	.race-60th-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;		
	}
	.race-60th-txt-inner{
		margin: auto;
		width: 100%;
		max-width: 1000px;
	}

	.race-60th-lead{
		margin: 20px 0 0;	
	}
	.race-60th-lead li{
		text-indent: -1em;
		padding: 0 0 0 1em;
		line-height: 1.5;
		font-size: 12px;
	}
	.race-60th-lead li + li{
		margin-top: 5px;
	}


/* trivia
====================================================================*/

	.trivia-list{
		margin: 40px 0 0;
	}
	.trivia-list-item + .trivia-list-item{
		margin-top: 40px;
	}
	.trivia-list-item__figwrap{
		position: relative;
	}
	.trivia-list-item__hedaer{
		position: absolute;
		bottom: 0;
		padding: 0 15px 15px;
	}
	.trivia-list-item__hedaer h3 span{
		padding: 2px 0;
		display: inline-block;
		font-size: 20px;
		background-image: linear-gradient(#000 0%, #000 100%);
		background-size: 100% 100%;
		background-position: 0 100%;
		background-repeat: no-repeat;
	}
	.trivia-list-item__hedaer p{
		margin-top: 20px;
	}
	.trivia-list-item__hedaer p span{
		display: inline-block;
		font-size: 14px;
		background-image: linear-gradient(#000 0%, #000 100%);
		background-size: 100% 100%;
		background-position: 0 100%;
		background-repeat: no-repeat;
	}
	.trivia-list-item__hedaer p span:nth-child(n+2){
		margin-top: 8px;
	}
	.trivia-list-item figure{
		overflow: hidden;
	}
	.trivia-list-item figure img{
		transition: transform 1000ms ease-out;
	}
	.trivia-list-item figure:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}

/* document
====================================================================*/
	

	#document figure.document-bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#document figure.document-bg img{
		object-fit: cover;
		width: 100%;
		height: 100%;
		object-position: 50% 50%;
	}
	#document figure.document-bg:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.7);
	}
	.document-contents{
		width: 100%;
		height: 100%;
		width: 100%;
		padding: 30px 32px;
		height: 100%;
		color: #fff;
		z-index: 20;		
	}
	.document-contents-inner{
		display: flex;
		flex-direction: column-reverse;
		margin: auto;
		max-width: 1100px;
		height: 100%;
	}
	.document-txt{
		margin: 40px auto 0;
	}
	.document-contents figure{
		margin: auto;
		width: 180px;
	}


/* related
====================================================================*/
	
	.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: 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: 360px;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: #fff;
		z-index: 20;		
	}
	.sec-flex-txt-inner{
		margin: auto;
		width: 100%;
		text-align: center;
	}



/* engine
====================================================================*/

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




}