@charset "utf-8";
.booksWrap{
	width:86.6666%;
	max-width:1440px;
	margin:0 auto;
	position:relative;
	z-index:50;
	padding-top:min(calc(12 / var(--vw-min) * 100vw),12px);
}
@media screen and (max-width:768px){
	.booksWrap{
		width:calc(654 / var(--vw-min) * 100vw);
	}
}
.booksCatch{
	text-align:center;
	letter-spacing:0.2em;
	font-size:min(calc(24 / var(--vw-min) * 100vw),24px);
	margin-bottom:min(calc(32 / var(--vw-min) * 100vw),32px);
}
.booksCatch span{
	background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 88%,rgba(0,0,0,0) 88%,rgba(0,0,0,0) 100%);
	padding-left:0.2em;
	opacity:0;
	transform:translateY(min(calc(60 / var(--vw-min) * 100vw),60px));
	transition:all 0.3s ease;
}
.booksCatch span.efs{
	transform:translateY(0);
	opacity:1;
}
.booksLists{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	counter-reset:number 0;
}
@media screen and (max-width:768px){
	.booksLists{
		justify-content:space-between;
		margin-left:calc(-40 / var(--vw-min) * 100vw);
		width:calc(100% + calc(40 / var(--vw-min) * 100vw));
	}
}
.booksList{
	width:25%;
	padding:0 min(calc(10 / var(--vw-min) * 100vw),10px) min(calc(40 / var(--vw-min) * 100vw),40px);
	position:relative;
	opacity:0;
	transform:translateY(min(calc(60 / var(--vw-min) * 100vw),60px));
	transition:all 0.3s ease;
}
@media screen and (max-width:768px){
	.booksList{
		width:50%;
		padding:0 0 min(calc(40 / var(--vw-min) * 100vw),40px);
		padding-left:calc(40 / var(--vw-min) * 100vw);
	}
}
.booksList.efs{
	opacity:1;
	transform:translateY(0);
}
.booksList:before{
	counter-increment:number 1;
	content:'BOOK ' counter(number);
	position:absolute;
	left:0;
	top:0;
	writing-mode:vertical-rl;
	font-size:min(calc(10 / var(--vw-min) * 100vw),10px);
	font-family:"Silkscreen",sans-serif;
	color:#fff;
	white-space:nowrap;
	transform:scale(0.8);
	transform-origin:left top;
	line-height:0.66;
}
@media screen and (max-width:768px){
	.booksList:before{
		left:calc(24 / var(--vw-min) * 100vw);
	}
}
.bookList__link{
	display:block;
	text-decoration:none;
}
.bookList__thumb{
	display:block;
	border:1px solid rgba(255,255,255,.24);
	overflow:hidden;
	position:relative;
}
.bookList__thumb img{
	display:block;
	width:100%;
	height:auto;
	transition:all 0.3s ease;
}
@media screen and (hover:hover){
	.bookList__link:hover .bookList__thumb img{
		transform:rotate(5deg) scale(1.1);
	}
	.bookList__link .bookList__thumb:after{
		content:'';
		display:block;
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background:linear-gradient(45deg,transparent 3%,#fff 3%,transparent 5%,#fff 5%);
		text-shadow:-3px -3px 0px #FFF,3px 3px 0px #FFF;
		clip-path:var(--slice-0);
		}
	.bookList__link .bookList__thumb:after{
		--slice-0:inset(50% 50% 50% 50%);
		--slice-1:inset(80% -6px 0 0);
		--slice-2:inset(50% -6px 30% 0);
		--slice-3:inset(10% -6px 85% 0);
		--slice-4:inset(40% -6px 43% 0);
		--slice-5:inset(80% -6px 5% 0);
	}
	.bookList__link:hover .bookList__thumb:after{
		animation:0.2s glitch;
		animation-timing-function:steps(2,end);
	}
}
.bookList__name{
	display:block;
	font-size:min(calc(20 / var(--vw-min) * 100vw),20px);
	letter-spacing:0.2em;
	padding:0.4em 0 0.1em;
}
@media screen and (max-width:768px){
	.bookList__name{
		font-size:min(calc(28 / var(--vw-min) * 100vw),28px);
	}
}
.bookList__subName{
	display:block;
	font-size:min(calc(16 / var(--vw-min) * 100vw),16px);
	letter-spacing:0.2em;
}
@media screen and (max-width:768px){
	.bookList__subName{
		font-size:calc(24 / var(--vw-min) * 100vw);
		letter-spacing:0.2em;
		line-height:1.5;
	}
}