@charset "utf-8";

.title{
  height: 310px;
  background-image: url(../image/menu-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  /* justify-content,aline-itemsのcenterで天地中央揃え */
  justify-content: center;
  align-items: center;
  color: #fff;
  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;
}

.item-list{
  width: 930px;
  max-width: 90%;
  margin: 75px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, 240px);
  column-gap: 95px;
  row-gap: 70px;
  justify-content: center;
}

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

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

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

.item-list .time{
  font-weight: bold;
  margin-top: 15px;
}

.item-list li{
  position: relative;
}

.item-list img{
  max-width: 100%;
  border-radius: 20px;
}

.item-list img:hover{
  transform: scale(1.2);
}

.item-list .item-label{
  position: absolute;
  top: 0;
  left: calc(100% + 18px);
  font-size: 0.625rem;
  white-space: nowrap;
  transform-origin: top left;
  transform: rotate(90deg);
  /* translate: 20px; */

}

.icon {
  
  display: flex;
  align-items: center;
  width: 250px;
  position: absolute;
  top: 105%;
  left: 10%;
}

.coock-time{
  background-image: url(../image/icon/timer.png);
  background-size: contain;
  font-weight: bold;
  
}

.coock-time span{
  /* display: block; */
  margin-left: 20px;
  
}

.caloli{
  background-image: url(../image/icon/calori.png);
  background-size: contain;
  font-weight: bold;
  /* margin-top: 15px; */
}

.caloli span{
  margin-left: 20px;
}

.spicy{
  background-image: url(../image/icon/spicy.png);
  background-size: contain;
  font-weight: bold;
  /* margin-top: 15px; */
}

.spicy span{
  margin-left: 20px;
}

.footer{
  margin-top: 100px;
}


@media (max-width: 800px){

  .item-list{
    margin-top: 45px;
    row-gap: 40px;
  }

  
  
}