@charset "utf-8";
/*-----------------------------------------------
 * SPECIAL - illustration
-------------------------------------------------*/
.illustLists{	
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: min(calc(16 / var(--vw-min) * 100vw), calc(16px * var(--max-percent)));
	row-gap: min(calc(32 / var(--vw-min) * 100vw), calc(32px * var(--max-percent)));
}
.illustList{
	width: 100%;
}
.btn_illustList{
	width:100%;
	font-family: var(--font-ja);
	display:block;
	font-size: 100%;
	line-height: 1.8667;
	text-align: center;
}

.illustList__img{
	display: block;
	width: 100%;
	padding-top: 70.7061%;
	position: relative;
	overflow: hidden;
}
.illustList__img:after{
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid var(--color-main);
	z-index: 1;
}
.illustList__img--main{
	position: absolute;
	inset: 0;
	z-index: 1;
}
.illustList__img--main img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.illustList__img--bg{
	position: absolute;
	inset: 0;
}
.illustList__img--bg img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(8px);
	transform: scale(102.5%);
}
.illustList__title{
	display: block;
	padding-top: 1em;
}

@media screen and (hover:hover) and (pointer: fine){
	.illustList__title span{
		background: linear-gradient(var(--color-main), var(--color-main)) right bottom / 0 1px no-repeat;
		transition: background-size 0.8s;
	}
	.btn_illustList:hover .illustList__title span{
		background-size: 100% 1px;
		background-position: left bottom;
	}
	.illustList__img--main img{
		transition: transform .3s ease, filter .3s ease;
	}
	.btn_illustList:hover .illustList__img--main img{
		transform: scale(102.5%);
		filter: brightness(110%);
	}
}

@media screen and (max-width:768px){
	.illustLists{
		grid-template-columns: repeat(2, 1fr);
		column-gap: calc(32 / var(--vw-min) * 100vw);
		row-gap: calc(40 / var(--vw-min) * 100vw);
	}
	.btn_illustList{
		line-height: 1.75;
	}
	.illustList__title{
		padding-top: 0.8em;
	}
}