@charset "utf-8";
/* CSS Document */
.section-top__image {
  height: 66vw;
  background-image: url("../images/menu/menu-top.jpg");
  opacity: 0.8;
  background-position: center;
  background-size:cover;
  background-repeat: no-repeat;
  position: relative;
}
 .section-top__image p{
  top: 50%;
  left: 50%;
  transform: translate(-40%, -20%);
  position: absolute;
  color: #fff;
  font-size: 4rem;
  letter-spacing: 0.4em;
 }

 .pc{
  display: none;
 }
@media(min-width: 480px) {
  .section-top__image {
    height: 16vw;
    background-size:100%;
  }
  .section-top img {
    width: 40%;
    margin-top: 0%;
  }
  .section-top__image p{
    font-size: 8rem;
    transform: translate(-50%, -20%);

  }
  .pc{
    display: block;
  }

}
/*--menu--------------*/
.menu {
  background-image: url("../images/top/frame-top.png");
  background-repeat: no-repeat;
  background-size: 40%;
  padding: 56px 0px 24px;
}
.menu2 {
  background-image: url("../images/top/menu-bg.png");
  background-size: 200%;
  background-repeat: repeat;
}
 .menu h2{
 padding: 0px 24px;
 line-height: 4rem;
 } 
 .menu p{
 padding: 8px 24px 24px;
 font-size: 1.2rem;
 }
.menu h3{
  font-size: 2.3rem;
}
.menulist{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
 padding: 8px 24px 40px;
}
.menu ul li{
 font-size: 1.4rem;
 line-height: 3.2rem;
 list-style: none;
 text-align: left;
}
.menu ._flex ul{
  display: flex;
  flex-wrap: wrap;
  padding: 0px 16px;
}

.menu ._flex img{
  width: 100%;
  object-fit: cover;
  
}

@media(min-width: 720px) {
.menu {
  padding: 40px 100px 24px;
}
 .menu h2{
  padding: 40px 24px 60px;
  font-size: 3.2rem;
  letter-spacing: 0.4em;
}
.menu h3{
  font-size: 2.8rem;
}
.menu-box{
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
.menulist{
 padding: 40px 80px 40px;
 justify-content: space-around;
}
.menu ul li{
 font-size: 1.6rem;
 list-style: none;
 line-height: 4.2rem;
 text-align: left;
}
.menu-name{
 padding-right: 40px;
}
.menu p{
 display: none;
}
.menu ._flex ul{
  gap:40px;
}
.menu ._flex ul li{
  width: 30%;
}
.menu ._flex img{
  width: 100%;
}
.menu2{
  padding-bottom: 100px;
}
}
/*--reserve--*/
.reserve{
background-image: url("../images/menu/plant.png");
background-size:cover; 
background-repeat: no-repeat;
background-position: center;
 padding: 72px 0px 56px;
}
.reserve h2 {
color: #fff;
  padding: 8px 24px 24px;
}
.reserve p{
  color: #fff;
  padding: 0px 24px 24px;
}
/*--ボタン----------------*/
a.btn-flat {
  overflow: hidden;
  padding: 2.0rem 6rem;
  color: #393939;
  border-radius: 0;
  background: #fff;
  border: solid 393939 1px;
  text-decoration: none;
}
a.btn-flat span {
  position: relative;
}
a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-96%);
  transform: translateX(-96%);
}
a.btn-flat:hover:before {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

@media(min-width: 480px) {
  .reserve {
    padding: 140px 32px 140px;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .reserve h2{
  font-size: 3.2rem;
  letter-spacing: 0.4em;
  margin-bottom: 32px;
  }
  .reserve p{
    font-size: 1.8rem;
  }
}