@charset "utf-8";
.title{
  height: 310px;
  background-image: url(../image/spiceshop-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: black;
  text-shadow: 1px 1px 10px #fff;
}

.title h1{
  font-family: 'Montserrat',sans-serif;
  font-size: 2rem;
  font-weight: bold;
}

.pankuzu{
  margin: 20px ;
}

.pankuzu a{
  color: #0000EE;
  text-decoration: underline;
}

.title p{
  font-size: 0.875;
  margin-top: 15px;
}

.pankuzu{
  display: flex;
  flex-direction: row ;
}

.shop-contents{
  width: 1080px;
  max-width: 90%;
  margin: 75px auto 0;
  display: flex;
  justify-content: space-between;
  /* flex-direction: row-reverse; */
}

.shop-item{
  flex-grow: 1;
  max-width: 1500px;
  margin: 0 auto;
  
}

.shop-item h2{
  font-size: 22px;
  font-weight: bold;
  line-height: 30px;
}

.shop-item h2::after{
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background-color: #000;
  margin-top: 20px;
}

.item-list{
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 220px);
  /* minmax(220px, 1fr)余白をなくすように画像のサイズを大きくしてくれる */
  /* grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); */
  column-gap: 50px;
  row-gap: 80px;
}

.item-list li{
  position: relative;
}

/* aは小さい領域のためblock指定して要素の範囲をおおきくしておく */
.item-list li a{
  display: block;
  transition-duration: (0.2s);
  background-color: burlywood;
  padding: 15px;
  border-radius: 20px;
  text-align: center;
  position: absolute;
  top: 105%;
  left: 25%;
    
}

.item-list a:hover{
  background-color: #f4dd63;
  /* transform: scale(1.1); */

}


.item-list dl{
  margin-top: 20px;
}

.item-list dt{
  font-weight: bold;
}

.item-list dd{
  font-size: 0.88rem;
  line-height: 30px;
  margin-top: 10px;
}

.item-list li img{
  max-width: 100%;
}

.item-area{
  margin-top: 20px;
  display: flex;
}

.item-area img{
  width: 50%;
  max-width: 380px;
}

.about-item{
  margin-left: 30px;
}

.about-item .item-text{
  font-size: 0.88rem;
  line-height: 26px;
}

.about-item .item-price{
  font-weight: bold;
  margin-top: 20px;
}

.about-item a{
  background-color: #f4dd63;
  display: inline-block;
  min-width: 180px;
  line-height: 48px;
  border-radius: 24px;
  font-family: 'montserrat', sans-serif;
  font-size: 0.88rem;
  text-align: center;
  margin-top: 35px;
  /* アニメーションの持続時間にかんする記述 */
  transition: background-color, transform; 
  transition-duration: 1s;
  transition-timing-function: ease;
}

/* .about-item a:hover{
  background-color: rgb(235, 212, 13);
  transform: scale(1.2);

} */

.recommended{
  margin-top: 60px;
}

.footer{
  margin-top: 100px;
}

@media (max-width:800px){
  .shop-contents{
    display: block;
    max-width: 100%;
    margin-top: 60px;
  }

  .shop-item{
    max-width: 540px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .item-list{
    grid-template-columns: repeat(2,1fr);
    column-gap: 35px;
  }

  .item-list li a{
    left: 10%;
  }


  .shop-menu{
    background-color: #f8f8f8;
    padding: 50px 0;
    margin-top: 60px;
    margin-right: 0;
  }
  
  .shop-menu-inner{
    max-width: 540px;
    margin:0 auto ;
    padding: 0 20px;
  }

  .item-area{
    display: block;
  }
  
  .item-area img{
    width: 100%;
    max-width: 100%;

  }

  .about-item{
    margin-top: 20px;
    margin-left: 0;
  }

  .about-item a{
    width: 100%;
  }

}