@charset "UTF-8";

/*================================
menu
================================*/
.top_main.menu_top{
   background-image: url(../images/menu/main.jpg);
}
.top_main.morning{
   background-image: url(../images/menu/main_morning.jpg);
}
.top_main.lunch{
   background-image: url(../images/menu/main_lunch.jpg);
}
.top_main.cafe{
   background-image: url(../images/menu/main_cafe.jpg);
}
.top_main.dinner{
   background-image: url(../images/menu/main_dinner.jpg);
}
@media screen and ( max-width:750px) {
   /*.top_main{
   background-image: url(/images/menu/main_sp.jpg);
}*/
}



.contents{
   /*margin-top: 30px;*/
}

section.menu {
   padding: 0 5%;
   margin-bottom: 6em;
}
.menu h2{
   text-align: left;
   line-height: 1.1em;
  font-size: 4.5rem;
   letter-spacing: .02em;
   margin: 0;
}
.menu h2 span{
   font-size: 2.6rem;
   padding-left: 0;
   display: inline;
}
.menu h2 .limited{
   font-size: 1.4rem;
   display:block;
}
.menu h2.contTtl{
   margin: 0 0 0 -5px;
}
.menu .boxFlex{
   margin: 0 auto 30px;
   /*width: 95%; */ 
   display: flex;
   flex-flow: wrap;
   justify-content:flex-start;
   align-items: flex-start;
   gap: 2%;
}
.menu .boxCont{
   width: 49%;
   padding: 2% 5%;
   /*text-align: center;*/
}
.menu .boxContImg{
   width: 49%;
   padding: 1% 0 7% 7%;
   background-image: url(/images/menu/bg_menu_ph.svg);
   background-position: left top;
   background-repeat: no-repeat;
   background-size: contain;
   position: relative;
}
.menu .spRev .boxContImg{
   padding: 1% 7% 7% 0;
}
.menu .boxContImg .photo{
   width: 100%;
   height: auto;
   border-radius: 25px;
}
.menu .boxContImg .kids{
   position: absolute;
  top: 10px;
  left: -40px;
  width: 22%;
  height: auto;
}
.menu .boxContImg .shopLogo{
   /*border-radius: 30px;*/
   /*background: #C4C4C4;*/
   position: absolute;
   top: 0px;
   display: flex;
   justify-content: center;
   width: 100%;
   align-items: flex-start;
   height: 100%;
}
.menu .boxContImg .shopLogo img{
   width: 50%;
   height: auto;
}
.menu .boxCont p{
   text-align: left;
   padding: 0 0 2em;
}
.menu .boxCont .floor{
   padding: 0 0 .5em;
}
.menu .boxCont span{
   /*font-size: 1.4em;*/
}

@media screen and ( max-width:1000px) {

}

@media screen and ( max-width:750px) {
   section.menu {
  padding: 0;
}
   .contents{
   margin-top: 10px;
}
   
   .spRev{
   flex-wrap: wrap-reverse !important;
}
.menu .boxContImg{
   padding: 0% 5% 15% 5%;
   background-position-x: right 50px;
   }
.menu .spRev .boxContImg{
   padding: 0% 5% 15% 5%;
   background-position-x: left 60px;
   z-index: -1;
}
 .menu .boxCont, .menu .boxContImg{
      width: 100%;
   }
   .menu .boxContImg .kids{
  top: -8%;
  left: 7%;
  width: 18%;
}
.menu .boxCont {
  margin-top: -55px;
   z-index: 10;
}
}



/*================================
menu_details
================================*/
.menu_details{
   margin-bottom: 2em;
}
.menu_details .recommend{
   background: #FFF9D8;
   border-radius: 60px;
   padding: 100px 0 0;
}
.menu_details .contTtl{
   font-size: 5.0rem;
   line-height: 1.0;
   text-align: center;
   margin-bottom: -1.6em;
}
.menu_details .contTtl span{
   font-size: 3.0rem;
}
.menu_details .boxFlex{
   display: flex;
}
.menu_details .boxCont{
   padding-bottom: 1.5em;
}
.menu_details .boxContImg{
   text-align: center;
}
.menu_details img.photo{
   width: 70%;
   height: auto;
   border-radius: 50%;
   /*object-fit: cover;*/
}
.menu_details .menu_txt{
   width: 65%;
   margin: 2% 5% 5% auto;
   line-height: 1.3;
}
.menu_details .menu_txt .jp{
   font-size: 1.7rem;
   font-weight: bold;
}
.menu_details .menu_txt .en{
   font-size: 1.2rem;
   font-weight: bold;
   color: #000;
}
.menu_details .menu_txt small{
   font-size: 1.2rem;
}
.food-slider img.food{
   width: 100%;
   height: auto;
   padding: 2px;
   border-radius: 20px;
   object-fit: cover;
}
.menu_btn{
   margin-top: -2em;
   margin-bottom: 2em;
}


/* pizza */

.menu_details .boxCont.pizza_g{
   background-image: url(/images/menu/bg_pizza_g.svg);
   background-position: 80% 0;
  background-repeat: no-repeat;
  background-size: 145%;
  position: relative;
  left: -5%;
  width: 110%;
  padding-top: 2%;
}
.menu_details .boxCont.pizza_r{
   background-image: url(/images/menu/bg_pizza_r.svg);
   background-position: 0 0;
   background-repeat: no-repeat;
   background-size: 140%;
   position: relative;
   right: -5%;
  width: 110%;
   padding-top: 4%;
}
.menu_details .pizza_g .boxContImg{
   left: 10%;
  margin-bottom: 3%;
  position: relative;
}
.menu_details .pizza_r .boxContImg{
   right: 10%;
   position: relative;
}
.menu_details .pizza_g img.photo,
.menu_details .pizza_r img.photo{
   width: 67%;
   height: auto;
   border-radius: 50%;
   position: relative;
}
.menu_details .pizza_g img.photo{
   margin-left: 5%;
}
.menu_details .pizza_r img.photo{
   margin-left: 5%;
}
.menu_details .pizza_r img.spicy{
   position: absolute;
  bottom: 0;
  right: 18%;
  width: 12%;
  height: auto;
}
.menu_details .pizza_g .menu_txt{
   position: relative;
   left: 10%;
}
.menu_details .pizza_r .menu_txt{
   position: relative;
   right: 10%;
}

@media screen and ( max-width:1000px) {
   
/* pizza */
   
.menu_details .boxCont.pizza_g{
  left: -2%;
   width: 104%;
}
.menu_details .boxCont.pizza_r{
   right: -2%;
   width: 104%;
   padding-top: 4%;
}
.menu_details .pizza_g .boxContImg{
   left: 4%;
}
.menu_details .pizza_r .boxContImg {
  right: 4%;
}
.menu_details .pizza_g img.photo{
   margin-left: 15%;
}
.menu_details .pizza_r img.photo{
   margin-left: -8%;
}
.menu_details .pizza_r img.spicy{
  right: 25%;
}
.menu_details .pizza_g .menu_txt{
   left: 4%;
}
.menu_details .pizza_r .menu_txt{
   right: 4%;
}
   
}
@media screen and ( max-width:750px) {
.menu_details .boxFlex{
   display: block;
}
   .menu_details .left .boxContImg {
  text-align: left;
  padding-left: 5%;
}
   .menu_details .right .boxContImg {
  text-align: right;
  padding-right: 5%;
}
   .menu_details .menu_txt{
   width: 65%;
   }
   .menu_details .boxCont.right .menu_txt{
       margin: 2% auto 5% 5% ;
   }
   
/* pizza */
  .menu_details .boxCont.pizza_g {
   background-position: 120% 0;
   background-size: 130%;
   left: -5%;
    width: 110%;
  }
  .menu_details .boxCont.pizza_r {
   background-position: -30% 0;
   background-size: 130%;
   right: 5%;
   width: 110%;
  padding-top: 8%;
  }
   .menu_details .pizza_g .boxContImg{
      left: 0;
      margin-bottom: 0%;
    text-align: center;
    padding-left: 0;
   }
   .menu_details .pizza_r .boxContImg{
     right: 0;
    text-align: center;
   }
   .menu_details .pizza_g img.photo,
   .menu_details .pizza_r img.photo{
   width: 65%
   }
   .menu_details .pizza_g img.photo{
      margin-left: 10%;
   }
   .menu_details .pizza_r img.photo{
      margin-left: 0;
   }
   .menu_details .boxCont.pizza_g .menu_txt{
      left: 0;
      margin: 2% 10% 5% auto;
   }
   .menu_details .boxCont.pizza_r .menu_txt{
      right: 0;
      margin: 2% auto 5% 10%;
   }
}





/*================================
menu_navi
================================*/

section.menu_navi {
   /*padding: 0;*/
}
.menu_navi .ttlFlex{
}
.menu_navi .boxFlex{
   margin: 15px auto 2em;
   width: 100%;  
   /*display: flex;*/
}
.menu_navi .boxCont{
   width: 20%;
  padding: 15px 1% 0;
  /* flex-shrink: 0;*/
    position: relative;
}
.menu_navi .boxCont img.photo{
   width: 100%;
  object-fit: cover;
  border-radius: 20px;
  min-height: 250px;
}
.menu_navi .boxCont .kids{
   position: absolute;
   top: 5px;
  right: 10px;
   width: 60px;
}
.menu_navi .boxContImg{
   width: 60%;
   /*padding: 2% 3%;*/
   text-align: center;
   position: relative;
}
.menu_navi .boxContImg .photo{
   /*border-radius: 30px;*/
}

.menu_navi h3{
   text-align: center;
   font-size: 2.8rem;
   line-height: 1.1em;
  /* margin-top: -12px;*/
  margin-bottom: .2em;
}
.menu_navi h3 span.red{
   font-size: 1.2rem;
   padding-left: 0;
   display: block;
   line-height: 1.2em;
   letter-spacing: .02em;
   padding: 5px 0 10px;
}
.menu_navi .boxCont p{
   text-align: left;
   padding: 0 0 2em;
}
.menu_navi .boxCont a.btn{
   font-size: 1.2rem;
   padding: 16px 15px 16px 0px;
}

.menu_navi .speech {
  position: relative;
  display: table;
 margin: -2.8em auto .8em;
  padding: 5px 10px;
  min-width: 100px;
  max-width: 100%;
  color: #fff;
  background: #C37C40;;
}
.menu_navi .speech:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #C37C40;;
}
.menu_navi .boxCont .speech p {
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.menu_navi .boxCont span{
   /*font-size: 1.4em;*/
}


@media screen and ( max-width:1000px) {
   
   .menu_navi h2{
   line-height: 1.1em;
}
   .menu_navi .boxFlex{
      display: flex;
   }
}

@media screen and ( max-width:750px) {
   .menu_navi .boxCont{
      width: 50%;
   }
   
}