@charset "UTF-8";

/****** 下層ページはヘッダー固定 ******/
.header{
  top: 0;
}

/****** ここからh1 ******/

.title_wrap{
  background: url(../images/menu/mainvisual_menu.png) no-repeat 30% bottom;
  background-size: cover;
  position: relative;
}

/****** ここからh2 ******/
h2{
  width: 300px;
}

/****** ここからflex共通 ******/
.recmenu_flex{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 80px;
}

/****** ここからrecmenu共通 ******/
.main .pic_rec{
  width: 50%;
}

.main .pic_rec img{
  width: 100%;
}

.main .text_rec span{
  font-size: 32px;
}

.text_rec .menu_title{
  padding-bottom: 40px;
}


/****** ここからgrandmenu共通 ******/

.grandmenu_flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main .grandmenu{
  max-width: 340px;
  margin-bottom: 50px;
}

.main .grandmenu img{
  filter: drop-shadow(2px 2px 2px rgba(160, 160, 160, 0.8));
}

.main .pic{
  margin-bottom: 20px;
}



.main .text{
  text-align: center;
}



/****** ここからドリンクセットメニュー共通 ******/

.setmenu_innerwrap{
  padding: 30px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 10px 10px 0px #34548f;
}

.setmenu_wrap{
  position: relative;
}

.setmenu_wrap::before{
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../images/menu/pin/pin_pink.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.main .setmenu_wrap .kaisei{
  font-size: 24px;
  margin-bottom: 30px;
  text-align: center;
}

.main table{
  width: 90%;
  margin: 0 auto;
}

.main table tbody th{
  font-weight: bold;
}

.main table tbody td{
  font-size: 14px;
}

/****** ここからアレルギー表示 ******/

.text_rec .allergie_wrap{
  width: 250px;
  margin: 40px auto 0;
}
.allergie_wrap_sub{
  margin-top: 20px;
}
/* .allergie_wrap_sub .allergie_item{
  width: 40px;
} */
.allergie_wrap_sub .allergie_item .allergie_pic{
  width: 40px;
  height: 40px;
}

.grandmenu .allergie_wrap{
  width: 100%;
  margin: 20px auto 0;
}

.allergie_lead,
.allergie_lead_sub{
  text-align: center;
  font-size: 14px;
}

.allergie_flex,
.allergie_flex_sub{
  display: flex;
  justify-content: space-around;
}

.grandmenu .allergie_flex,
.grandmenu .allergie_flex_sub{
  width: 230px;
  margin: 0 auto;
  justify-content: space-around;
  flex-wrap: wrap;
}

.allergie_item{
  /* width: 50px; */
  margin-top: 20px;
  text-align: center;
}

.allergie_item .allergie_pic{
  width: 50px;
  height: 50px;
  margin: 0 auto;
}
.egg{
  background: url(../images/menu/allergie/egg.svg) no-repeat center center;
  background-size: contain;
}
.milk{
  background: url(../images/menu/allergie/milk.svg) no-repeat center center;
  background-size: contain;
}
.wheat{
  background: url(../images/menu/allergie/wheat.svg) no-repeat center center;
  background-size: contain;
}
/* .mackerel{
  background: url(../images/menu/allergie/mackerel.svg) no-repeat center center;
  background-size: contain;
} */
.crab{
  background: url(../images/menu/allergie/crab.svg) no-repeat center center;
  background-size: contain;
}
.shrimp{
  background: url(../images/menu/allergie/shrimp.svg) no-repeat center center;
  background-size: contain;
}
/* .beef{
  background: url(../images/menu/allergie/beef.svg) no-repeat center center;
  background-size: contain;
} */
.walnuts{
  background: url(../images/menu/allergie/walnuts.svg) no-repeat center center;
  background-size: contain;
}

.allergie_item .allergie_text{
  font-size: 14px;
}


/****** ここからフード ******/

.food_flex{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: calc(100% - 330px - 20px);
}

.food_flex .grandmenu{
  width: 40%;
}

.food .text_rec{
  width: 40%;
}

.food .setmenu_wrap{
  width: 330px;
  margin-top: 70px;
}

.food dl{
  display: flex;
  flex-wrap: wrap;
}

.food dt{
  width: 70%;
}

.food dd{
  width: 30%;
}

/****** ここからデザート ******/

.dessert_flex{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.dessert_flex .grandmenu{
  width: 30%;
}

.dessert .text_rec{
  width: 40%;
}

.dessert .setmenu_wrap{
  max-width: 340px;
  width: 30%;
}

.set_large{
  margin-top: 30px;
}

.dessert .set_min{
  display: none;
}


/****** ここからドリンク ******/

.drink_flex{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: calc(100% - 330px - 20px);
}

.drink_flex .grandmenu{
  width: 40%;
}

.drink .text_rec{
  width: 40%;
}

.drink .setmenu_wrap{
  width: 330px;
  margin-top: 70px;
}

.drink dl{
  display: flex;
  flex-wrap: wrap;
}

.drink dt{
  width: 70%;
}

.drink dd{
  width: 30%;
}

.drink ul li{
  list-style-type: disc;
  font-size: 14px;
  margin-left: 35px;
} 

/****** ここからメディアクエリ ******
*********************************/

@media screen and (max-width:1200px) {
  .grandmenu_flex{
    display: block;
  }

  .dessert .setmenu_wrap{
    max-width: 330px;
    width: 30%;
  }


/****** ここからフード ******/

  .food_flex{
    width: 100%;
  }

  .food_flex .grandmenu{
    width: 40%;
  }

  .food .setmenu_wrap{
    width: 400px;
    margin: 30px auto 0;
  }


  /****** ここからデザート ******/

  .dessert_flex{
    justify-content: space-around;
  }

  .dessert_flex .grandmenu{
    width: 40%;
  }

  .dessert .text_rec{
    width: 40%;
  }

  /* .dessert .setmenu_wrap{
    max-width: 330px;
    width: 30%;
  } */

  .set_large{
    display: none;
  }

  .dessert .set_min{
    display: block;
    width: 400px;
    margin: 30px auto 0;
  }

/****** ここからドリンク ******/

  .drink_flex{
    width: 100%;
  }

  .drink_flex .grandmenu{
    width: 40%;
  }

  .drink .setmenu_wrap{
    width: 400px;
    margin: 30px auto 0;
  }
}

@media screen and (max-width:900px) {
/****** ここからh1 ******/
  .title_wrap{
    background-image: url(../images/menu/mainvisual_menu\ _min.png);
  }

/****** ここからh2 ******/
  h2{
    width: 250px;
  }

/****** ここからflex共通 ******/
  .recmenu_flex{
    display: block;
    margin-bottom: 50px;
  }

/****** ここからrecmenu共通 ******/
  .main .pic_rec{
    width: 80%;
    margin: 0 auto;
  }

  .main .text_rec span{
    font-size: 28px;
  }

  .food .text_rec,
  .dessert .text_rec,
  .drink .text_rec{
    width: 80%;
    margin: 0 auto;
  }


  .food .setmenu_wrap,
  .dessert .setmenu_wrap,
  .drink .setmenu_wrap{
    margin: 50px auto 0;
  }


/****** ここからアレルギー表示 ******/
  .text_rec .allergie_wrap{
    width: 160px;
    margin: 40px auto 0;
  }

  .grandmenu .allergie_wrap{
    width: 100%;
    margin: 20px auto 0;
  }

  .grandmenu .allergie_flex,
  .grandmenu .allergie_flex_sub{
    width: 140px;
  }
}/* 900px */

@media screen and (max-width:480px) {
/****** ここからh2 ******/
  h2{
    width: 200px;
  }

/****** ここからflex共通 ******/
  .recmenu_flex{
    display: block;
    margin-bottom: 50px;
  }

/****** ここからrecmenu共通 ******/

  .main .text_rec span{
    font-size: 24px;
  }

  .food .text_rec,
  .dessert .text_rec,
  .drink .text_rec{
    width: 80%;
    margin: 0 auto;
  }

  .food .setmenu_wrap,
  .dessert .setmenu_wrap,
  .drink .setmenu_wrap{
    width: 280px;
  }


/****** ここからアレルギー表示 ******/
.text_rec .allergie_wrap{
  width: 130px;
  margin: 20px auto 0;
}

.grandmenu .allergie_wrap{
  width: 100%;
  margin: 20px auto 0;
}

.grandmenu .allergie_flex,
.grandmenu .allergie_flex_sub{
  width: 110px;
}

/* .allergie_item{
  width: 40px;
} */

.allergie_item .allergie_pic{
  width: 40px;
  height: 40px;
}

  /* .allergie_wrap_sub .allergie_item{
    width: 30px;
  } */
  .allergie_wrap_sub .allergie_item .allergie_pic{
    width: 30px;
    height: 30px;
  }
.allergie_item .allergie_text{
  font-size: 12px;
}


/****** ここからgrandmenu共通 ******/

.main .grandmenu{
  margin-bottom: 30px;
}
}/* 480px */