@charset "UTF-8";

.f1-videos__item-id .f1-videos__item-id-txt h3,
.photo-report-header h3,
.movie__detail-label{
	font-family: "UD新ゴNT M", sans-serif;
}
.movie__detail-main figure{
	position: relative;
	padding-top: 56.25%;
	text-align: center;
	z-index: 20;
}
.movie__detail-main figure iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.f1-videos__item-id figure{
	position: relative;
}
.f1-videos__item-id figure iframe{
	position: relative;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	z-index: 10;
}


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


/* f1-videos__item-id
========================================================*/
	.f1-videos__item-id{
	}
	.movie__detail-label + .f1-videos__item-id{
		margin-top: 40px;
	}
	.f1-videos__item-id .f1-videos__item-id-txt{
		margin: 25px 0 0;
	}
	.f1-videos__item-id .f1-videos__item-id-txt-lead{
		margin: 25px 0 0;
	}
	.f1-videos__item-id .f1-videos__item-id-txt h3{
		font-size: 36px;
		line-height: calc(52/36);
	}
	.f1-videos__item-id-txt-lead p{
		line-height: 2;
	}
	.f1-videos__item-id-txt-lead p + p{
		margin-top: 0.8em;
	}
	.f1-videos__item-id-txt-lead p.caution{
		margin-top: 1em;
		line-height: 2;
		font-size: 14px;
	}


/* f1-videos
============================================================*/

	.f1-videos__list{
		margin: 60px auto 0;
		max-width: 980px;
	}
	.f1-videos__list-item figure{
		position: relative;
	}
	.f1-videos__list-item figure iframe{
		position: relative;
		width: 100%;
		height: 100%;
		aspect-ratio: 16 / 9;
		z-index: 10;
	}


	.f1-videos__list-id{
		margin: 60px auto 0;
		max-width: 980px;
	}
	.f1-videos__list-id-item figure{
		position: relative;
	}
	.f1-videos__list-id-item figure iframe{
		position: relative;
		width: 100%;
		height: 100%;
		aspect-ratio: 16 / 9;
		z-index: 10;
	}





/* movie__detail-text
========================================================*/

	.movie__detail-text{
		margin: 50px 0 0;
	}
	.movie__detail-text h3{
		font-size: 36px;
		font-weight: 600;
		line-height: calc(52/36);
	}
	.movie__detail-text p{
		line-height: 2;
	}
	.movie__detail-text p.caution{
		margin-top: 1em;
		line-height: 2;
		font-size: 14px;
	}
	.movie__detail-text-box{
		margin: 25px 0 0;
	}
	.movie__detail + .movie__detail{
		margin-top: 50px;
		padding-top: 50px;
		border-top: 1px solid #CCCCCC;
	}
	.movie__detail-label{
		font-size: 36px;
	}
	.movie__detail-label span{
		position: relative;
	}
	.movie__detail-label span + span{
		padding: 0 0 0 20px;
		margin: 0 0 0 20px;
	}
	.movie__detail-label span + span:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		display: block;
		width: 1px;
		height: 36px;
		background: #ccc;
	}

	.movie__detail-label + .movie__detail-main{
		margin-top: 40px;
	}


/* photo-report-list
========================================================*/

	.motor-photo-report{
		margin-top: 50px;
		padding-top: 50px;
		border-top: 1px solid #ccc;
	}
	.photo-report-header h3{
		font-size: 36px;
	}
	.photo-report-list{
		margin: 40px -13px 0;
		display: flex;
		flex-wrap: wrap;
	}
	.photo-report-list .list-item{
		padding:  0 13px;
		width: 33.3333%;
	}
	.photo-report-list .list-item:nth-child(n+4){
		margin-top: 26px;
	}

/* popup
========================================================*/

	.entry__detail-figure a:hover{
		opacity: 0.7;
		transition: opacity 400ms ease;
	}

	.popup{
		position: fixed;
		top: 50%;
		left: 50%;
		padding: 50px 10px;
		width: 100%;
		height: 100%;
		max-width: 1100px;
		transform: translate(-50%,-50%);
		opacity: 0;
		visibility: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000000;

	}
	.is-popup-ease .popup{
		transition: opacity 400ms ease,visibility 400ms ease;
	}
	.is-popup .popup{
		opacity: 1;
		visibility: visible;
	}

	.popup-photo{
		position: relative;
		overflow: hidden;
		height: 100%;
	}
	.popup-photo figure{
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		transition: opacity 400ms ease;
		text-align: center;
	}
	.popup-photo figure img{
		object-fit: contain;
	    width:auto;
	    height:auto;
	    max-width:100%;
	    max-height:100%;
	}


	.popup-contents{
		position: relative;
		padding: 65px 50px;
		height: 100%;
		max-height: 680px;
	}

	.popup-contents p{
		margin: 30px 0 0;
		font-weight: 500;
		line-height: 1.6;
	}
	.popup-close{
		position: absolute;
		top: 50px;
		right: 5px;
		width: 40px;
		height: 40px;
	}
	.popup-close a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		transition: opacity 400ms ease;
	}
	.popup-close a:after,
	.popup-close a:before{
		position: absolute;
		margin: -1px 0 0 -25px;
		top: 50%;
		left: 50%;
		right: 0;
		bottom: 0;
		content: "";
		display: block;
		width: 50px;
		height: 2px;
		background: #fff;
	}
	.popup-close a:before{
		transform: rotate(45deg);
	}
	.popup-close a:after{
		transform: rotate(-45deg);
	}


	.popup-close a:hover{
		opacity: 0.5;
	}
	.popup-overlay{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(51,52,57,0.92);
		z-index: 900000;
		opacity: 0;
		visibility: hidden;
	}
	.is-popup-ease .popup-overlay{
		transition: opacity 400ms ease,visibility 400ms ease;
	}
	.is-popup .popup-overlay{
		opacity: 1;
		visibility: visible;
	}
	.popup-next{
		position: absolute;
		right: 0;
		width: 50px;
		height: 50px;
		background: url(../img/arrow_wh_r.svg) 50% 50% no-repeat;
		background-size: 8px 14px;
		text-indent: -9999px;
	}
	.popup-prev{
		position: absolute;
		left: 0;
		width: 50px;
		height: 50px;
		background: url(../img/arrow_wh_l.svg) 50% 50% no-repeat;
		background-size: 8px 14px;
		text-indent: -9999px;
	}



}




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


/* f1-videos__item-id
========================================================*/
	.f1-videos__item-id{
	}
	.movie__detail-label + .f1-videos__item-id{
		margin-top: 20px;
	}
	.f1-videos__item-id .f1-videos__item-id-txt{
		margin: 15px 0 0;
	}
	.f1-videos__item-id .f1-videos__item-id-txt-lead{
		margin: 15px 0 0;
	}
	.f1-videos__item-id .f1-videos__item-id-txt h3{
		font-size: 20px;
		line-height: calc(32/20);
	}
	.f1-videos__item-id-txt-lead p{
		line-height: 2;
	}
	.f1-videos__item-id-txt-lead p + p{
		margin-top: 0.8em;
	}
	.f1-videos__item-id-txt-lead p.caution{
		margin-top: 1em;
		line-height: 1.5;
		font-size: 12px;
	}

/* f1-videos
============================================================*/

	.f1-videos__list{
		margin: 40px auto 0;
		max-width: 980px;
	}
	.f1-videos__list-item figure{
		position: relative;
	}
	.f1-videos__list-item figure iframe{
		position: relative;
		width: 100%;
		height: 100%;
		aspect-ratio: 16 / 9;
		z-index: 10;
	}


	.f1-videos__list-id{
		margin: 40px auto 0;
		max-width: 980px;
	}
	.f1-videos__list-id-item figure{
		position: relative;
	}
	.f1-videos__list-id-item figure iframe{
		position: relative;
		width: 100%;
		height: 100%;
		aspect-ratio: 16 / 9;
		z-index: 10;
	}


	#f1-videos .f1-videos__list-button--prev2,
	#f1-videos .f1-videos__list-button--next2{
		display: block;
		position: relative;
		top: inherit !important;
		bottom: 0;
	}

	
	#f1-videos .list-pager-wrap{
		margin: 20px 0 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#f1-videos .f1-videos__list-pager{
		margin: 0;
		width: auto;
		bottom: inherit;
		top: inherit;
	}




/* movie__detail-text
========================================================*/


	.movie__detail-text{
		margin: 20px 0 0;
	}
	.movie__detail-text h3{
		font-size: 20px;
		font-weight: 600;
		line-height: calc(32/20);
	}
	.movie__detail-text p{
		line-height: 2;
	}
	.movie__detail-text p.caution{
		margin-top: 1em;
		line-height: 1.5;
		font-size: 12px;
	}
	.movie__detail-text-box{
		margin: 15px 0 0;
	}
	.movie__detail + .movie__detail{
		margin-top: 25px;
		padding-top: 25px;
		border-top: 1px solid #CCCCCC;
	}

	.movies-popup__box{
		padding: 0 15px;
	}
	.movies-popup__close{
		position: absolute;
		top: -50px;
		right: 0;
		width: 28px;
		height: 28px;
	}
	.movies-popup__close i{
		position: absolute;
		margin: -1px 0 0 -18px;
		top: 50%;
		left: 50%;
		display: block;
		width: 36px;
		height: 2px;
		background: #fff;
	}
	.movie__detail-label{
		font-size: 18px;
	}
	.movie__detail-label span{
		position: relative;
	}
	.movie__detail-label span + span{
		padding: 0 0 0 15px;
		margin: 0 0 0 15px;
	}
	.movie__detail-label span + span:before{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		display: block;
		width: 1px;
		height: 18px;
		background: #ccc;
	}

	.movie__detail-label + .movie__detail-main{
		margin-top: 20px;
	}


/* photo-report-list
========================================================*/

	.motor-photo-report{
		margin-top: 30px;
		padding-top: 30px;
		border-top: 1px solid #ccc;
	}
	.photo-report-header h3{
		font-size: 18px;
	}
	.photo-report-list{
		margin: 25px -4px 0;
		display: flex;
		flex-wrap: wrap;
	}
	.photo-report-list .list-item{
		padding:  0 4px;
		width: 50%;
	}
	.photo-report-list .list-item:nth-child(n+3){
		margin-top: 8px;
	}


/* popup
========================================================*/

	.popup{
		position: fixed;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		padding: 60px 0;
		max-width: 900px;
		transform: translate(-50%,-50%);
		z-index: 5000;
		opacity: 0;
		visibility: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000000;

	}
	.is-popup-ease .popup{
		transition: opacity 400ms ease,visibility 400ms ease;
	}
	.is-popup .popup{
		opacity: 1;
		visibility: visible;
	}


	.popup-photo{
		position: relative;
		overflow: hidden;
		height: 100%;
	}

	.popup-photo figure{
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		transition: opacity 400ms ease;
		text-align: center;
		
	}
	.popup-photo figure img{
		object-fit: contain;
	    width:auto;
	    height:auto;
	    max-width:100%;
	    max-height:100%;
	}
	.popup-contents{
		position: relative;
		padding: 0 40px;
		height: 100%;
		max-height: 680px;
	}

	.popup-contents p{
		margin: 30px 0 0;
		font-weight: 500;
		line-height: 1.6;
	}
	.popup-close{
		position: absolute;
		top: 10px;
		right: 0px;
		width: 40px;
		height: 40px;
	}
	.popup-close a{
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		transition: opacity 400ms ease;
	}
	.popup-close a:after,
	.popup-close a:before{
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		content: "";
		display: block;
		width: 30px;
		height: 2px;
		background: #fff;
	}
	.popup-close a:before{
		transform: rotate(45deg);
	}
	.popup-close a:after{
		transform: rotate(-45deg);
	}

	.popup-overlay{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(51,52,57,0.92);
		z-index: 900000;
		opacity: 0;
		visibility: hidden;
	}
	.is-popup-ease .popup-overlay{
		transition: opacity 400ms ease,visibility 400ms ease;
	}
	.is-popup .popup-overlay{
		opacity: 1;
		visibility: visible;
	}
	.popup-next{
		position: absolute;
		right: 0;
		width: 40px;
		height: 40px;
		background: url(../img/arrow_wh_r.svg) 50% 50% no-repeat;
		background-size: 8px 14px;
		text-indent: -9999px;
	}
	.popup-prev{
		position: absolute;
		left: 0;
		width: 40px;
		height: 40px;
		background: url(../img/arrow_wh_l.svg) 50% 50% no-repeat;
		background-size: 8px 14px;
		text-indent: -9999px;
	}




}