@charset "utf-8";
:root{
	--mv_max-percent: 1.2;
}
/*-----------------------------------------------
 * TIE-UP - INDEX
-------------------------------------------------*/
.tieupListsWrap{
	width: 100%;
	position: relative;
	padding: 0 min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--mv_max-percent)));
}
.tieupLists{
	width: 100%;
	max-width: calc(1040px * var(--mv_max-percent));
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--mv_max-percent)));
	row-gap: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--mv_max-percent)));
}
.tieupList{
	width: 100%;
}
.tieupList__link{
	width: 100%;
	display: block;
	text-align: unset;
	line-height: 2;
	font-size: min(calc(16 / var(--vw-min) * 100vw), calc(16px * var(--max-persent)));
	text-decoration: none;
}
.tieupList__image{
	display: block;
	width: 100%;
	padding-top: 32%;
	position: relative;
	border: 1px solid var(--color-black);
	overflow: hidden;
}
.tieupList__image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}

.tieupList__title{
	display: block;
	font-weight: 700;
	padding-top: 1em;
}

@media screen and (hover:hover) and (pointer: fine){
	.tieupList__title span{
		background: linear-gradient(var(--color-yellow), var(--color-yellow)) right bottom / 0 40% no-repeat;
		transition: background-size 0.8s;
	}
	.tieupList__image img{
		transition: transform .4s ease, filter .4s ease;
	}

	.tieupList__link:hover .tieupList__title span {
		background-size: 100% 40%;
		background-position: left bottom;
	}
	.tieupList__link:hover .tieupList__image img{
		transform: scale(1.075);
	}
	.tieupList__link:hover .btn_moviePlay__circle:before{
		animation-play-state: paused;
	}
}

@media screen and (max-width:768px){
	.tieupListsWrap{
		padding: 0 6.4%;/* 0 48 */
	}
	.tieupLists{
		max-width: 100%;
		grid-template-columns: repeat(1, 1fr);
		column-gap: calc(48 / var(--vw-min) * 100vw);
	}
	.tieupList__link{
		font-size: calc(24 / var(--vw-min) * 100vw);
	}
	.tieupList__image{
		border-width: calc(2 / var(--vw-min) * 100vw);
	}
	.tieupList__image:before{
		content: unset;
	}
}