@charset "UTF-8";

.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%;
}
.popup-photo figure img{
	opacity: 0;
	transition: opacity 500ms ease;
}
.popup-photo figure img.on{
	opacity: 1;
}
.movie__detail-text-box p + p{
	margin-top: 1em;
}

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



	.movie__detail-main + .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-label + .movie__detail,
	.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{
		margin-top: 40px;
	}
	.movie__detail-label-date{
		display: block;
		font-size: 24px;
	}
	.movie__detail-label-date + strong{
		display: block;
		margin-top: 20px;
		line-height: 1.5;
	}
	.movie__detail-label_cap{
		margin: 5px 0 0;
		font-size: 16px;
		font-weight: 600;
	}

/* video-report-list
========================================================*/

	.video-report-list-item figure iframe{
		width: 100%;
		height: 100%;
		aspect-ratio: 16/9;
	}
	.video-report-list-item__txt{
		margin: 50px 0 0;
	}
	.video-report-list-item__txt h3{
		font-size: 36px;
		font-weight: 600;
		line-height: calc(52/36);
	}
	.video-report-list-item__txt p{
		line-height: 2;
	}
	.video-report-list-item__txt p + p{
		margin-top: 0.8em;
	}
	.video-report-list-item__txt p.caution{
		margin-top: 1em;
		line-height: 2;
		font-size: 14px;
	}
	.video-report-list-item__txt-box{
		margin: 25px 0 0;
	}
	.video-report-list-item + .video-report-list-item{
		margin-top: 50px;
		padding-top: 50px;
		border-top: 1px solid #CCCCCC;
	}

	.motor-video-report + .motor-photo-report,
	.motor-photo-report + .motor-photo-report{
		margin-top: 50px;
		padding-top: 50px;
		border-top: 1px solid #ccc;		
	}


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

	.photo-report-header h3{
		font-size: 36px;
		line-height: 1.3;
	}
	.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(../../../shared/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(../../../shared/img/arrow_wh_l.svg) 50% 50% no-repeat;
		background-size: 8px 14px;
		text-indent: -9999px;
	}





}




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

	.movie__detail-main + .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: 50px;
		padding-top: 50px;
		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{
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid #CCCCCC;
	}
	.movie__detail-label-date{
		display: block;
		font-size: 14px;
	}
	.movie__detail-label-date + strong{
		display: block;
		margin-top: 10px;
		line-height: 1.3;
	}
	.movie__detail-label_cap{
		margin: 5px 0 0;
		font-size: 10px;
		font-weight: 600;
	}

/* video-report-list
========================================================*/

	.video-report-list-item figure iframe{
		width: 100%;
		height: 100%;
		aspect-ratio: 16/9;
	}
	.video-report-list-item__txt{
		margin: 20px 0 0;
	}
	.video-report-list-item__txt h3{
		font-size: 20px;
		font-weight: 600;
		line-height: calc(32/20);
	}
	.video-report-list-item__txt p{
		line-height: 2;
	}
	.video-report-list-item__txt p + p{
		margin-top: 0.8em;
	}
	.video-report-list-item__txt p.caution{
		margin-top: 1em;
		line-height: 1.5;
		font-size: 12px;
	}
	.video-report-list-item__txt-box{
		margin: 15px 0 0;
	}
	.video-report-list-item + .video-report-list-item{
		margin-top: 30px;
		padding-top: 30px;
		border-top: 1px solid #CCCCCC;
	}
	.motor-video-report + .motor-photo-report,
	.motor-photo-report + .motor-photo-report{
		margin-top: 30px;
		padding-top: 30px;
		border-top: 1px solid #ccc;		
	}



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

	.photo-report-header h3{
		font-size: 18px;
		line-height: 1.3;
	}
	.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(../../../shared/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(../../../shared/img/arrow_wh_l.svg) 50% 50% no-repeat;
		background-size: 8px 14px;
		text-indent: -9999px;
	}







}