@charset "UTF-8";


.models__detail-year{

}
.link__arrow--l-jp{
	cursor: pointer;
}
.link__arrow--r-jp{
	cursor: pointer;
}

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

	.models__list{
		display: flex;
		flex-wrap: wrap;
		margin-left: -20px;
		margin-right: -20px;
	}

	.models__list-item{
		padding: 0 20px;
		width: calc(100% / 4);
	}
	.models__list-item-year{
		margin: auto;
		max-width: 300px;
/*		font-size: min(2.7vw,40px);
*/		font-size: min(4.72vw,70px);
	}
	.models__list-item:nth-child(n+5){
		margin-top: 94px;

	}
	.models__list-item figure{
		margin: auto;
		max-width: 300px;
	}
	.models__list-item a:after{
		content: "";
		position: absolute;
		top: -40px;
		left: 0;
		display: block;
		width: 100%;
		height: calc(100% + 80px);
		background: #1D1D1D;
		opacity: 0;
		transition: all 400ms ease;
	}
	.models__list-item.active a:after{
		opacity: 1;
	}
	.models__list-item.active .models__list-item-year{
		color: #fff;
	}
	.models__list-item.active h3{
		color: #fff;
	}
	.models__detail-main{
		position: relative;
	}
	.models__detail-year{
		position: absolute;
		top: 0;
		padding: 5% 0 0 0;
		width: 100%;
		color: #CEAF68;
		text-align: left;	
		font-size:min(10vw,130px);
		z-index: 10;
	}

	.models__detail-main figure{
		position: relative;
		top: 35px;
		text-align: center;
		z-index: 20;
	}
	.models__detail-main figure img{
		width: 100%;
		height: auto;
		max-width: 1020px;
	}
	.models__detail-text h3{
		font-size: 36px;
		font-weight: bold;
	}
	.models__detail-text h3 br{
		display: none;
	}
	.models__detail-text p{
		line-height: 2;
	}
	.models__detail-text-box-en p + p{
		margin-top: 15px;
	}
	.models__detail-text-box{
		margin: 30px 0 0;
		padding: 30px 0 0;
		border-top: 1px solid #CCC;
	}

	.models__detail-main-slide-item-wrap{
		position: relative;
		padding-top: calc(65400% / 1020)
	}
	.models__detail-main-slide-item-wrap figure{
		position: absolute;
		width: 100%;
		height: 100%;
		transition: opacity 400ms ease;
	}
	.models__detail-main-slide figure:nth-child(1){
		opacity: 1;
	}
	.models__detail-main-slide figure:nth-child(2){
		opacity: 0;
	}
	.models__detail-main-slide:hover figure:nth-child(2){
		opacity: 1;
	}
	.models__detail-main-slide:hover figure:nth-child(1){
		opacity: 0;
	}
	.models__list-pager{
		display: none;
	}

	.models__detail-movie{
		margin: 30px auto 0;
		max-width: 680px;
	}
	.models__detail-movie figure{
		width: 100%;
	}
	.models__detail-movie figure iframe{
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	.models__detail-text .button-box__btm {
		justify-content: center;
	}
	.models__detail-text .button-box__btm .button-link-s{
		margin: 40px auto 0;
		padding: 0 10px;
		width: 50%;
		max-width: 600px;
	}

}



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


	.models__list{
		display: flex;
		flex-wrap: wrap;
		margin-left: -8px;
		margin-right: -8px;
	}
	.models__list-item{
		padding: 0 10px;
		width: 50%;
	}
	.models__list-item-year{
		font-size:10.6vw;
	}

	.models__list-item:nth-child(n+3){
		margin-top: 40px;

	}
	.models__list-item figure{
		margin: auto;
	}
	.models__list-item a:after{
		content: "";
		position: absolute;
		top: -15px;
		left: 0;
		display: block;
		width: 100%;
		height: calc(100% + 30px);
		background: #1D1D1D;
		opacity: 0;
		transition: all 400ms ease;
	}
	.models__list-item.active a:after{
		opacity: 1;
	}
	.models__list-item.active .models__list-item-year{
		color: #fff;
	}
	.models__list-item.active h3{
		color: #fff;
	}
	.models__detail-main{
		position: relative;
	}
	.models__detail-year{
		position: absolute;
		top: 0;
		padding: 3% 0 0 0;
		width: 100%;
		color: #CEAF68;
		text-align: left;
		font-size:min(10vw,130px);
		z-index: 10;
	}

	.models__detail-main figure{
		position: relative;
		top: 15px;
		text-align: center;
		z-index: 20;
	}
	.models__detail-main figure img{
		width: 100%;
		height: auto;
		max-width: 1020px;
	}
	.models__detail-text h3{
		font-size: 20px;
		font-weight: bold;
		line-height: 1.5;
	}
	.models__detail-text p{
		line-height: 2;
	}
	.models__detail-text-box-en p + p{
		margin-top: 10px;
	}
	.models__detail-text-box{
		margin: 30px 0 0;
		padding: 30px 0 0;
		border-top: 1px solid #CCC;
	}

	.models__list-pager{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 10;
	}
	.link__arrow--r-jp,
	.link__arrow--l-jp{
		z-index: 100;
	}

	.models__detail-movie{
		margin: 30px auto 0;
		max-width: 640px;
	}
	.models__detail-movie figure{
		width: 100%;
	}
	.models__detail-movie figure iframe{
		width: 100%;
		aspect-ratio: 16 / 9;
	}


}


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


}




body{
	background-color: #1D1D1D;
}