/* bookList */
#bookList ul { font-size: 0; }
#bookList ul li {position: relative;width: calc((100% / 3) - 22px);display: inline-block;margin: 20px 10px;border: 1px solid rgb(162 155 134 / 28%);}
#bookList ul li a.photo { background-size: cover; transition-duration: 1s; }
#bookList ul li h3 { position: relative; padding: 15px 20px; left: 0; bottom: 0; }
#bookList ul li h3 a {height: auto;color: #3c3c3c;text-align: center;font-size: 18px;font-weight: 400;-webkit-line-clamp: 1;line-height: 200%;}

/* album-info */
#album-info {display: flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: -webkit-flex;flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;-o-flex-wrap: wrap;-webkit-flex-wrap: wrap;justify-content: center;}
#album-info::after { content: ''; flex-grow: 999999999; -moz-flex-grow: 999999999; -ms-flex-grow: 999999999; -o-flex-grow: 999999999; -webkit-flex-grow: 999999999; min-width: 200px; height: 0; }

/* bookBox */
#bookBox .wall { position: relative; overflow: hidden; display: block; }
#bookBox .wall-column {position: relative;float: left;width: 100%;display: flex;box-sizing: border-box;flex-wrap: wrap;}
#bookBox .wall-column .article { position: relative; margin: 15px; }
#bookBox .wall-column .album_box {box-shadow: 0 0 10px #c0c0c0;display: flex;flex-direction: column;align-items: center;justify-content: center;width: calc(100% - 30px);}
#bookBox .wall-column .article a {display: block;object-fit: cover;width: 100%;}
#bookBox .wall-column .article h3 { position: absolute; width: 100%; bottom: 0; left: 0; }
#bookBox .wall-column .article h3 a { margin: 10px; padding: 10px; background: rgba(255, 255, 255, .7); text-align: center; font-size: 18px; color: #444; }
#bookBox .wall-column {}
#bookBox .wall-column .album_box img {width: 100%;height: 400px;object-fit: cover;}

@media screen and (min-width: 1281px) {
	#bookList ul li:hover a.photo { filter: grayscale(50%); }
}
@media screen and (max-width: 1280px) {
	#bookList { padding: 50px 0 20px; }
	#bookBox .wall-column {width: 100%;}
	
}
@media screen and (max-width: 980px){
	#bookList ul li{width: calc((100% / 2) - 22px);}
	#bookBox .wall-column .album_box{
    width: calc(100% - 20px);
    margin: 10px;
}
	#bookBox .wall-column .album_box img{
	    height: 257px;
	}
}
@media screen and (max-width: 500px) {
	#bookList ul li {width: calc((100% / 1) - 22px);}
	#bookBox .wall-column { width: 100%; }
	#bookBox .wall-column .album_box img{
    height: 190px;
}
}