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

.sort-btn li{font-size:1.1em;color:#fff;
	background:#000;border-right:1px solid #888;
	width:25%;
	cursor: pointer;
	padding:0;line-height:2.5em;
	margin:0;
}
.sort-btn li:last-child{border:0;}

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



/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
.sort-btn{
	justify-content: space-between;
}
	
.sort-btn li{
	width:30%;
	margin:0;
	text-align:center;
	}

.sort-btn li:first-child{width:10%;}
.item {
  width: calc(50% - 1px);/*横並びで2つ表示*/
}
}



/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
  position: relative;/*並び替えの基準点を指定*/
margin:0 auto 8em;
max-width:1200px;
}
.grid li{padding:0 2px 2px 0;}

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: calc(25% - 1px);/*横並びで4つ表示*/
  z-index: 1;
list-style:none;
}

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

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

/*横幅が1024px以下になった際の指定*/
@media only screen and (max-width: 1024px) {
.grid {
  position: relative;/*並び替えの基準点を指定*/
margin:0 0.2% 8em 1.3%;
}
.grid li{padding:0 2px 2px 0;}
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
.grid {
  position: relative;/*並び替えの基準点を指定*/
margin:0 0.2% 8em 1.3%;
}
.grid li{padding:0 2px 2px 0;}

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: calc(20% - 1px);/*横並びで5つ表示*/
  z-index: 1;
list-style:none;
}
.item {
  width: calc(33.3% - 2px);/*横並びで3つ表示*/
}
}

@media only screen and (max-width: 480px) {.grid {
  position: relative;/*並び替えの基準点を指定*/
margin:0 0.2% 8em 1.3%;
}
.grid li{padding:0 2px 2px 0;}

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: calc(20% - 1px);/*横並びで5つ表示*/
  z-index: 1;
list-style:none;
}
.item {
  width: calc(50% - 2px);/*横並びで2つ表示*/
}
}








/*＝＝＝Muuriなしのレイアウトのための調整 */
.grid2 {
  position: ;/*並び替えの基準点を指定*/
margin:0 0.2% 8em 1.3%;
overflow:hidden;
}
.grid2 li{padding:0 2px 2px 0; }/*5列 0 2px 2px 0*/

/*各画像の横幅などの設定*/
.item2 {float:left;
  display: block;
  position:;
  width: calc(25% - 1px);/*横並びで5つ表示=20% - 1px*/

}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
.item2 {
  width: calc(33.3% - 2px);/*横並びで3つ表示*/
}
.grid2 li{padding:0 2px 2px 0; }
}

@media only screen and (max-width: 480px) {
.item2 {
  width: calc(50% - 2px);/*横並びで2つ表示*/
}
.grid2 li{padding:0 2px 2px 0; }
}







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

.fancybox-thumbs__list a:before {
    border: 2px solid #fff;
}

.fancybox-thumbs {
    top: auto;
    width: auto;
    bottom: 0;
    left: 0;
    right : 0;
    height: 95px;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0);
  }
  .fancybox-show-thumbs .fancybox-inner {
    right: 0;
    bottom: 95px;
  }
.fancybox__container{z-index:10050;}
.fancybox__caption{font-size:1.1em;line-height:1.6;padding:0.7em 0.5em 0 1em;letter-spacing:0.05em;}

/*v5*/
.fancybox__infobar{padding:0 5px;line-height:var(--f-button-height);text-align:center;font-size:10px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased;cursor:default;user-select:none;
color:#ccc;}

.fancybox__infobar span{padding:0 5px}


.is-modern .f-thumbs__slide{--clip-path: inset( 0 calc( (var(--f-thumb-width, 0) - var(--f-thumb-clip-width, 0)) * 0 * (1 - var(--progress, 0)) ) round var(--f-thumb-border-radius, 0) );transform:translate3d(calc(var(--shift, 0) * -1px), 0, 0);transition:none;pointer-events:none}
/*v5ed*/

/*v4*/
.fancybox__toolbar{font-size:10px;height:16px;
--carousel-button-svg-width: 14px;
--carousel-button-svg-height: 14px;
opacity:var(--fancybox-opacity, 0.6);
}
.fancybox__counter{min-width:30px;
padding:0 10px;
line-height:var(--carousel-button-height, 20px);
text-align:left;
font-size:10px;
font-variant-numeric:tabular-nums;
-webkit-font-smoothing:subpixel-antialiased;
}
.fancybox__thumbs .carousel__slide .fancybox__thumb::after{
border-width:2px;
border-color:var(--fancybox-accent-color, rgba(255, 255, 255, 0.96));border-radius:var(--fancybox-thumbs-border-radius, 0px)
}

.fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after{opacity:1}

.carousel__button.is-prev,.carousel__button.is-next{opacity:0.4;width:22px;}
.carousel__button.is-prev:hover,.carousel__button.is-next:hover{opacity:1;}



.custom-content{/*position:absolute;bottom:0;right:0;text-align:right;color:#fff; 画像に乗せる場合*/
	padding:0.2em;line-height:1.15;
}
.custom-content span{letter-spacing:0.15em;
display:inline-block;
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-ms-transform:scale(0.8);
-o-transform:scale(0.8);
transform:scale(0.8);
}



/*＝＝＝sort-btn2*/
.sort-btn2{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding:;
position:fixed;top:50px;width:100%;z-index:1000;
/*border-bottom:1px solid #888;*/
}

.sort-btn2 li{font-size:1.1em;color:#fff;
	background:#000;border-right:2px solid #999;
	width:25%;
	cursor: pointer;
	padding:0;line-height:30px;/*2.5em*/
	margin:0;
}
.sort-btn2 li:last-child{border:0;}

.sort-btn2 li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
	background:#666;	
}

.sort-btn2 a, .sort-btn2 span{font-weight:bold;}
.sort-btn2 .active a{color:#ebdc9b;}


/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
.sort-btn2{
	justify-content: space-between;
}
	
.sort-btn2 li{
/*	width:28%;*/
	margin:0;
	text-align:center;
	}

.sort-btn2 li:first-child{width:16%;}
.sort-btn2 li:nth-child(2){width:calc(28% - 2px);}
.sort-btn2 li:nth-child(3){width:calc(28% + 5px);}
.sort-btn2 li:last-child{width:calc(28% - 3px);}
}

.sort-btn2 a{color:#fff;display:inline-block;width:100%;height:100%;}



.mb1em{margin-bottom:1em;}
.mb2em{margin-bottom:2em;}