/*==================================================
ギャラリーのためのcss
===================================*/

/*＝＝＝並び替えボタンのCSS*/
.sort-btn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding:0 20px 50px;
}

.sort-btn li{
  list-style:none;
	cursor: pointer;
	padding: 10px;
	margin:0 10px;
}

.sort-btn li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
	border-bottom: solid 2px #679bd3;
}

.sort-btn li{
	margin:0 0 10px 0;
	text-align:center;
	padding: 10px 20px;
	border-bottom: solid 2px #fff;
	}

/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
  position: relative;/*並び替えの基準点を指定*/
	padding-left: 1%;
}

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: 33%;/*横並びで3つ表示*/
  margin-bottom: 30px;
  padding-left: 1%;
  z-index: 1;
list-style:none;
box-sizing: border-box;
}

/*内側のボックスの高さが崩れないように維持*/
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.item-content .content {
	position: relative;
	width: 100%;/*　トリミングしたい枠の幅（固定にしたい場合はサイズを入力）　*/
	padding-top: 55.9%;/*　トリミングしたい枠の高さを比率で指定。（固定にしたい場合はサイズを入力）　*/
	margin: 0 auto;
	background-color: #2b2b2b;
}
.content-caption {
	position: absolute;
	left: 3%;
	bottom: 3%;
	color: #fff;
	font-size: 0.75em;
	text-shadow:1px 1px 2px rgb(0, 0, 0, 0.8);
}

.content-caption.text-black {
	color: #000;
	text-shadow:1px 1px 2px rgb(255, 255, 255, 0.8);
}

.item-content .content:hover .content-caption {
	display: none;
}

 
/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
	/* width:100%;
	height:auto;
	vertical-align: bottom;画像の下にできる余白を削除 */
	position: absolute;
	width: 100%;
	height: 100%; 
	top: 0;
	object-fit: contain;
}
/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 700px) {
	.sort-btn{
		 /* justify-content: space-around; */
			 padding:0 10px 50px;
	}
	
	.sort-btn li{
		margin:0 0 10px 0;
		text-align:center;
		padding: 10px 20px;
		border-bottom: solid 2px #fff;
		}
	}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 700px) {
	.grid {
		padding-left: -1%;
	}
.item {
  width: 49.5%;/*横並びで2つ表示*/
	padding-left: 1%;
	margin-bottom: 7px;
}
}

/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
/* .fancybox-thumbs {
    background: transparent!important;
}

.fancybox-thumbs__list a:before {
    border: 6px solid #FA999B;
} */