@charset "utf-8";

/*==================================================
レイアウトのためのcss
===================================*/

* {
	margin: 0px;
	padding: 0px;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
h1 {
	margin: 0px;
}
a {
	color: #333;
}
a:hover,
a:active {
	text-decoration: none;
}

/*==================================================
	フィルターボタン
===================================*/

/*＝＝＝並び替えボタンのCSS*/
.sort-btn {
	display: flex;
	justify-content: center;
	flex-flow: row wrap;
	padding: 10px 5px 15px;
	gap: 8px 10px;
}
.sort-btn li {
	width: auto;
	font-size: clamp( 10px, 2vw, 20px);
	text-align: center;
    color: #fff;
    background: #ac9f8d;
	border-radius: 25px;
	cursor: pointer;
	padding: 10px 30px;
}
.sort-btn li.active {
	/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
	color: #fff;
    background: #4c3414;
}


/*==================================================
	ギャラリーエリア
===================================*/

/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
	position: relative;
	z-index: 10;
	/*並び替えの基準点を指定*/
	width: 100%;
	margin: 0 auto;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	/*画像の下にできる余白を削除*/
}

/*各画像の横幅などの設定*/
/* 4つの場合：24%、3つの場合：32%、2つの場合：49%、1つの場合：98% */
.item {
	display: block;
	position: absolute;
	width: calc( 24% - 30px );		/*横並びで4つ表示*/
	height: calc( var(--book_height) + 25px );
	z-index: 2;
	text-align: center;
	padding-left: 30px;
}

/*内側のボックスの高さが崩れないように維持*/
.item-content {
	position: relative;
	width: 100%;
	height: 100%;
    text-align: center;
}
.item-content .item-content_inner {
	display: flex;
	flex-flow: row wrap;
	/* align-items: flex-end; */
	text-decoration: none;
	padding: 30px 0 0 0;
	gap: 0 2%;
}
.item-content .bookThumb {
	width: auto;
    height: var(--book_img_height);
}
.item-content .bookThumb .bookShadow {
	height: var(--book_img_height);
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.item-content .bookThumb img {
    width: clamp( calc( var(--book_img_width) * 0.6 ), 19vw, var(--book_img_width) );
    height: clamp( calc( var(--book_img_height) * 0.6 ), 27vw, var(--book_img_height) ) ;
	border: 1px solid #a9a9a9;
	box-sizing: border-box;
}
.item-content .bookThumb img.yoko {
    max-width: 155px;
    height: auto;
	border: 1px solid #a9a9a9;
	box-sizing: border-box;
}
.item-content .bookTxt {
	width: calc( 98% - var(--book_img_width) );
	text-align: left;
	position: relative;
	font-size: clamp( 14px, 1.7vw, 18px );
}
.item-content .bookTxt p {
	font-weight: bold;
	position: absolute;
	top: 45%;
	left: 0;
	transform: translateY(-50%) translateX(0%);
	-webkit-transform: translateY(-50%) translateX(0%);
	width: 100%;
}
.item-content .bookTxt p span {
	display: block;
	font-size: clamp( 7px, 1vw, 10px );
	margin-bottom: 3px;
}
.item-content .bookTxt p span.typeTxt {
	text-indent: 0em;
	background: #9d3602;
	color: #fff;
	font-size: 9px;
	padding: 3px 5px;
	border-radius: 10px;
	display: inline-block;
}
.item-content .bookTxt .btnList {
	position: absolute;
	top: 70%;
	left: 0;
	transform: translateY(-50%) translateX(0%);
	-webkit-transform: translateY(-50%) translateX(0%);
}
.item-content .bookTxt .btnList li {
	margin-bottom: 5px;
}
.item-content .bookTxt .btnList li a {
	margin: 0;
}




/*
=====================================================================================================
    レスポンシブ記述
=====================================================================================================
=====================================================================================================
*/

/* 横幅が1400px以下 */
@media only screen and (max-width: 1400px) {
	/* ------------------------------------------
	 ギャラリーエリア  */
	.item {
		width: calc( 32% - 30px );		/*横並びで3つ表示*/
	}
}
/* 横幅が1030px以下 */
@media only screen and (max-width: 1030px) {
	/* ------------------------------------------
	 ギャラリーエリア  */
	.item {
		width: calc( 49% - 30px );		/*横並びで2つ表示*/
	}
}
/* 横幅が768px以下 */
@media only screen and (max-width: 768px) {
	/* ------------------------------------------
	 ギャラリーエリア  */
	.item {
		width: calc( 80% - 30px );		/*横並びで1つ表示*/
		left: 10% !important;
		height: calc( var(--sp_book_height) + 30px );
	}
	.item-content .item-content_inner {
		padding: 18px 0 0 0;
	}
	.item-content .bookThumb {
		height: var(--sp_book_img_height);
	}
	.item-content .bookThumb .bookShadow {
		height: var(--sp_book_img_height);
	}
	.item-content .bookTxt {
		bottom: 10px;
	}
}
/* 横幅が480px以下 */
@media only screen and (max-width: 480px) {
	/* ------------------------------------------
	 フィルターボタン  */
	.sort-btn li {
		width: 49%;
		text-align: center;
	}
	/* ------------------------------------------
	 ギャラリーエリア  */
	.item-content .bookTxt {
		width: calc( 98% - calc( var(--book_img_width) * 0.6 ) );
	}
}
/* 横幅が370px以下 */
@media only screen and (max-width: 370px) {
	/* ------------------------------------------
	 フィルターボタン  */
	.sort-btn li {
		width: 32%;
		text-align: center;
	}
}