@charset "utf-8";

/*==================================================
ギャラリーのためのcss
===================================*/
/*＝＝＝並び替えボタンチェックマークのCSS*/
.sort-btn{
background: #f3f3f3;
padding: 20px;
margin:50px 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.sort-btn dt{
font-weight: bold;
margin:0 0 10px 0;
}

.sort-btn dd{
margin:0 0 10px 0;
}

.sort-btn ul{
display: flex;
flex-wrap: wrap;
}

.sort-btn li{
margin:0 10px;
}

.sort-btn ul li{
position: relative;
cursor: pointer;
padding:0 0 0 30px;
margin:0 10px 0 0;
}

/*横幅が810px以下になった際の指定*/
@media only screen and (max-width: 810px) {
.sort-btn li{
width:100%;
margin:0;
}

.sort-btn ul li{
width:auto;
}

}

/*チェックマークの設定*/
.sort-btn ul li::before{
content:'';
position: absolute;
left:0;
width:20px;
height:20px;
border:2px solid #ccc;
}

.sort-btn ul li.active::after{/*現在地＝activeというクラス名がついたらチェックマークを出現*/
content:'';
position: absolute;
left:5px;	
top:0;
/*チェックマークの色や形*/
border-left:2px solid #333;
border-bottom:2px solid #333;
width:16px;
height:9px;
transform:rotate(-45deg);
}



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

/*各画像の横幅などの設定*/
.grid_gallery .item {
display: block;
position: absolute;
width: 33%;/*横並びで3つ表示*/
z-index: 1;
}

/*内側のボックスの高さが崩れないように維持*/
.grid_gallery .item-content {
position: relative;
width: 100%;
height: 100%;
padding: 20px;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid_gallery img{
width:100%;
height:auto;
vertical-align: bottom;/*画像の下にできる余白を削除*/
}
.grid_gallery .item-content p{
	margin-top: 10px;
}
@media only screen and (max-width: 767px) {
.grid_gallery {
	margin-bottom: 30px;
}
.grid_gallery .item {
width: 99%; /*横並びで2つ表示49.5%*/
}
.grid_gallery .item-content {
	padding: 0px;
	margin-bottom: 30px;
}
.grid_gallery .item-content p {
	font-size: 3.3vw;
	line-height: 1.8em;
}
}


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

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