@charset "utf-8";
.mainContents{
	width: 100%;
	position: relative;
}
.contSection{
	width: 100%;
	max-width: calc(1200px * var(--max-percent));
	position: relative;
	padding-left: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	padding-right: min(calc(80 / var(--vw-min) * 100vw), calc(80px * var(--max-percent)));
	margin: 0 auto;
}
.cont__secTitle{
	margin-left: max(calc(-30 / var(--vw-min) * 100vw), -30px);
}
.contSection___inner{
	position: relative;
	width: 100%;
	padding-top: min(calc(80 / var(--vw-min) * 100vw), 80px);
}
@media screen and (max-width:768px){
	.contSection{
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	.cont__secTitle{
		margin-left: 0;
	}
	.contSection___inner{
		padding: calc(96 / var(--vw-min) * 100vw) calc(48 / var(--vw-min) * 100vw) 0;
	}
}
.comicsLists{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)));
}
.comicsList{
	width: calc((100% - calc(min(calc(40 / var(--vw-min) * 100vw), calc(40px * var(--max-percent)))) * 3) / 4);
}
.comicsList__link{
	display: block;
	width: 100%;
	text-decoration: none;
	pointer-events: none;
}
.comicsList__img{
	width: 100%;
	overflow: hidden;
	pointer-events: auto;
	position: relative;
	border: 1px solid #000;
}
.comicsList__img img{
	width: 100%;
}
.comicsList__title{
	width: 100%;
	pointer-events: auto;
	margin-top: min(calc(20 / var(--vw-min) * 100vw), 20px);
	font-weight: 700;
	line-height: 1.5;
}
@media (hover: hover) and (pointer: fine){
	.comicsList__img img{
		transition: transform .3s ease;
	}
	.comicsList__img:after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,40%);
		opacity: 0;
		transition: opacity .3s ease;
	}
	.comicsList__title{
		transition: color .4s ease;
	}
	.comicsList__title span{
		background: linear-gradient(#000, #000) right bottom / 0 100% no-repeat;
		transition: background-size 0.4s ease;
	}
	.comicsList__link:hover .comicsList__img img{
		transform: scale(102.5%);
	}
	.comicsList__link:hover .comicsList__img:after{
		opacity: 1;
	}
	.comicsList__link:hover .comicsList__title{
		color: var(--color-main-yellow);
	}
	.comicsList__link:hover .comicsList__title span{
		background-size: 100% 100%;
		background-position: left bottom;
	}
}
@media screen and (max-width: 767px){
	#comics .contentIn{
		padding: var(--sp-size-96) var(--sp-size-48) 0;
	}
	.comicsLists{
		gap: var(--sp-size-24);
	}
	.comicsList{
		width: calc((100% - var(--sp-size-24) * 2) / 3);
	}
	.comicsList__img{
		border-width: var(--sp-size-2);
	}
	.comicsList__title{
		font-size: var(--sp-size-24);
		margin-top: var(--sp-size-12);
	}
}