@charset "utf-8";
/*-----------------------------------------------
 * special - visual
-------------------------------------------------*/
.visualLists{
	width:100%;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	column-gap:min(calc(20 / var(--def-ww) * 100vw),calc(20px * var(--max-percent)));
	row-gap:min(calc(32 / var(--def-ww) * 100vw),calc(32px * var(--max-percent)));
	position:relative;
	padding-top:8px;
}
.btn_visualList{
	width:100%;
	display:block;
	font-family:var(--font-noto);
	font-weight:400;
	color:#222;
	line-height:2;
}
.visualList__img{
	display:block;
	width:100%;
	padding-top:133.375%;
	position:relative;
	overflow:hidden;
}
.visualList__img:after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	border:1px solid rgba(0,0,0,25%);
}
.visualList__img img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
}
.visualList__title{
	display:block;
	padding-top:1em;
}

@media screen and (max-width:767px){
	.visualLists{
		grid-template-columns:repeat(2,1fr);
		column-gap:calc(48 / var(--def-ww) * 100vw);
		row-gap:calc(48 / var(--def-ww) * 100vw);
		padding-top:var(--sp-size-12);
	}
}

@media screen and (hover:hover) and (pointer:fine){
	.visualList__img--deco{
		z-index:2;
	}
	.visualList__img--deco,
	.visualList__img--deco span{
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
	}
	.visualList__img--deco:before,
	.visualList__img--deco:after,
	.visualList__img--deco span:before,
	.visualList__img--deco span:after{
		content:'';
		position:absolute;
		background-color:var(--color-main-red);
		transition:.4s cubic-bezier(.45,.1,.42,1);
	}
	.visualList__img--deco:before{
		top:0;
		left:0;
		right:100%;
		height:2px;
	}
	.visualList__img--deco:after{
		top:0;
		bottom:100%;
		left:0;
		width:2px;
	}
	.visualList__img--deco span:before{
		top:100%;
		bottom:0;
		right:0;
		width:2px;
	}
	.visualList__img--deco span:after{
		bottom:0;
		left:100%;
		right:0;
		height:2px;
	}
	.btn_visualList:hover .visualList__img--deco:before{
		right:0%;
	}
	.btn_visualList:hover .visualList__img--deco:after{
		bottom:0%;
	}
	.btn_visualList:hover .visualList__img--deco span:before{
		top:0%;
	}
	.btn_visualList:hover .visualList__img--deco span:after{
		left:0%;
	}
	.visualList__img img{
		transition:transform .4s ease;
	}
	.btn_visualList:hover .visualList__img img{
		transition-delay:.2s;
		transform:scale(105%);
	}
	.visualList__title{
		transition:color .4s ease;
	}
	.btn_visualList:hover .visualList__title{
		color:var(--color-main-red);
	}
}