/* bookList */
#bookList ul { font-size: 0; }
#bookList ul li { position: relative; overflow: hidden; margin: 20px; width: calc((100% / 3) - 40px); display: inline-block; }
#bookList ul li a.photo img { width: 100%; }
#bookList ul li h3 { position: absolute; padding: 5px 20px; width: calc(100% - 40px); background: rgba(255, 255, 255, .6); bottom: -99px; left: 0; }
#bookList ul li h3 a { padding: 15px 25px; height: 32px; font-size: 19px; color: #222; -webkit-line-clamp: 1; }

/* album-info */
#album-info { display: flex; flex-wrap: wrap; }
#album-info >div { margin: 0 1px 1px 0; height: 300px; flex-grow: 1; }
#album-info >div a { display: block; }
#album-info >div img { width: auto; min-width: 100%; height: 300px; }

@media screen and (min-width:1281px) {
	#bookList ul li:hover a.photo img { background: rgba(44, 44, 44, .6); }
	#bookList ul li:hover h3 { bottom: 0; }
}
@media screen and (max-width:1280px) {
	#bookList ul li { margin: 20px 10px; width: calc((100% / 3) - 20px); }
}
@media screen and (max-width:980px) {
	#bookList ul li { margin: 20px; width: calc(50% - 40px); }
	#bookList ul li h3 { bottom: 0; }
	#album-info >div , #album-info >div img { height: 40vw; }
}
@media screen and (max-width:640px) {
	#bookList ul li { margin: 20px 10px; width: calc(50% - 20px); }
}
@media screen and (max-width:500px) {
	#bookList ul { text-align: center; }
	#bookList ul li { width: calc(80% - 20px); }
	#album-info >div , #album-info >div img { height: 50vw; }
}
@media screen and (max-width:400px) {
	#bookList ul li { width: calc(100% - 20px); }
}