@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;
}






/*非会員用のギャラリー　2つ目はぼかし　3つ目以降は非表示*/
.grid_gallery2 {
  display: grid;
  gap: 50px;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  margin: 0 auto 40px;
  width: 80%;
  box-sizing: border-box;
}

.grid_gallery2 .item {
}

.grid_gallery2 .item figure {
  height: auto;
  width: 100%;
}

.grid_gallery2 .item img {
  height: auto;
  width: 100%;
  display: block;
}

.grid_gallery2 .item p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
}

/* ブラー効果 */
.grid_gallery2 .item.blur .item-content {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .grid_gallery2 {
    grid-template-columns: 1fr;
    width: 100%;
    padding: 0 20px;
  }
  .grid_gallery2 .item {
    width: 100%;
  }
}



/* Muuriのレイアウト確定前は非表示 */
.grid_gallery {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
}

/* レイアウト確定後に表示 */
.grid_gallery.is-ready {
	opacity: 1;
	visibility: visible;
}