@charset "utf-8";

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

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

.sort-btn li{
  background:#eee;
  border-radius:10px;
  cursor: pointer;
  padding: 10px;
  margin:0 10px;
}

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

/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
  position: relative;/*並び替えの基準点を指定*/
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex ;
}

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

/*内側のボックスの高さが崩れないように維持*/

.image-wrap{
  position: relative;
  overflow: hidden;
  padding-top: 60%;
  margin: 10px 5px;
}

.image-wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}








/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {

    .item {
      width: 49%;/*横並びで2つ表示*/
      margin-right:0.8%;
    }
    }