@charset "utf-8";

/*@header*/
.header-bg {
  width: 100%;
  position: relative;
  display: block;
}
.header-bg h1 {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  text-align: center;
  font-size: 44px;
  font-weight: normal;
  letter-spacing: 2px;
  line-height: 50px;
}
.header-bg span {
  font-size: 20px;
}

@keyframes flash {
  0%,100% {
    filter: drop-shadow(0 0 6px #ffb1d6)
  }
  50% {
    filter: none
  }
}

@media screen and (max-width:640px){
  .header-bg img {
    object-fit: cover;
    height: 250px;
    width: 100%;
  }
}
/*end@header*/

/*@section-common*/
#section-1 {
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
  margin: 0;
  /* background-color: #f27eb4; */
}
/*end@section-common*/




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

.sort-btn li {
  background: #ddd;
  border-radius: 10px;
  cursor: pointer;
  padding: 10px;
  margin: 0 10px;
  font-size: 0.9rem;
}

.sort-btn li.active {
  background-color: #ffd986; 
}

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

/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: auto;
  grid-gap: 20px;
}

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

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

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

.item-content{
  overflow: hidden;
}
.item-content img {
  transform: scale(1);
	transition: .5s ease-in-out;
}
.item-content img:hover {
  opacity: 0.7;
  transition: 0.5s;
  transform: scale(1.1);
}

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