@charset "UTF-8";
/*////////////////////////

windyfarm.jp/good-sunset-coffee/
teaser

///////////////////////*/


/*================================
top_main
================================*/
.top_main{
   background-image: url(/images/coffee/main_01.jpg);
}




/*================================
menu
================================*/
section.menu {
   padding: 0;
   margin-bottom: 100px;
}

.size_price{
   width: 100%;
   background: #EA5514;
   color: #FFF;
   text-align: center;
   padding: 50px 4% 40px;
   font-size: 1.2rem;
   margin-bottom: 50px;
}
.size_price.frozen{
   width: 100%;
   background-color: #E8AF30;
}
.set{
   max-width: 700px;
   text-align: left;
   margin: 0 auto .6em;
   line-height: 1.2em;
   font-size: 2.2rem;
}
.size_price dl{
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
}
.size_price dt{
   width: 82%;
   padding-bottom: .5em;
}
.size_price dd{
   text-align: right;
   width: 18%;
   padding-bottom: .5em;
}

.size_price img{
   width: 100%;
   max-width: 700px;
   height: auto;
   margin-bottom: 20px;
   /*border-radius: 10%;*/
}

.size_price .note{
   line-height: 1.6em;
   text-align: left;
   margin: 10px auto 0;
   max-width: 700px;
}
.menu h2{
   text-align: center;
   font-size: 3.5rem;
   line-height: 1.1em;
}
.menu h2 span{
   font-size: 1.4rem;
   padding-left: 0;
   display: block;
}
.size_price h2{
   margin: 0 0 20px;
}
.boxFlex{
   margin: 0 auto 0;
   /*width: 95%; */ 
   display: flex;
   flex-flow: wrap;
   justify-content:flex-start;
   /*align-items: center;*/
}
.boxCont{
   width: 33.3%;
   padding: 2% 2.5% 6%;
   /*text-align: center;*/
}
.boxContImg{
   width: 50%;
   text-align: center;
   position: relative;
}
.boxContImg .photo{
   border-radius: 10%;
}

.local{
   position: absolute;
   margin: 30px -10px;
   display: flex;
   justify-content: center;
    align-items: center;
   text-align: center;
   background: #E94530;
   border-radius: 50%;
   width: 50px;
   height: 50px;
}
.local span{
   padding-top: .3em;
   font-size: 1.4rem;
   font-weight: bold;
   line-height: 1.0em;
   color: #fff;
}
.local small{
   font-size: .6em;
   display: block;
}

.boxCont .photo{
   width: 100%;
   height: auto;
   margin-bottom: 15px;
   border-radius: 12%;
}
.wagyu{
   margin-bottom: 8px;
   text-align: center;
}
.wagyu span{
   color: #fff;
   background: #6A3906;
   border-radius: .8em;
   padding: .2em;
   font-weight: bold;
}
.boxCont h3{
   font-size: 1.5rem;
   text-align: center;
   line-height: 1.5em;
   margin-bottom: .5em;
}
.boxCont h3 span{
   font-size: 1.2rem;
   display: block;
}
.boxCont p{
   font-size: 1.2rem;
   text-align: center;
}
.boxCont .size{
   padding: 0 0 .8em;
}
.boxCont .price{
   font-size: 1.2rem;
   padding: 0 0 1.5em;
   font-weight: bold;
}
.boxCont .price strong{
   font-size: 1.8rem;
}
.boxCont .comment{
   text-align: left;
   font-size: 1.2rem;
    line-height: 1.8em;
}
.boxCont span{
   /*font-size: 1.4em;*/
}

@media screen and (max-width: 767px) {
   .size_price .set{
      font-size: 1.6rem;
   }

   
   .boxCont{
   padding: 20px 20px 40px;
   }
   .boxCont, .boxContImg{
      width: 100%;
   }
   .boxCont h3{
   font-size: 1.8rem;
   }
   .boxCont .comment{
   font-size: 1.3rem;
   }

}



/*================================
drink
================================*/
.drink {
   font-size: 1.4rem;
  }
.menu .drink h3{
   width: 100%;
   font-size: 2.5rem;
   line-height: 1.1em;
   padding-top: .8em;
   padding-bottom: 1.2em;
}

.menu-detail-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 40px;
}
.menu-detail {
  width: calc(50% - 60px);
   
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
   align-content: flex-start;
}
.menu-name{
  width: calc(100% - 100px);
  margin-bottom: 20px;
}
.menu-price {
  width: 80px;
  text-align: right;
  margin-bottom: 20px;
}
.menu-txt {
  width: 100%;
  padding: 0 10px 20px;
  margin-top: -10px;
  font-size: 1.4rem;
}
.more{
   width: 100%;
   margin-right: 5%;
   padding-bottom: 1em;
   text-align: right;
}

@media screen and (max-width: 767px) {
.menu-detail {
  width: calc(100% - 10%);
      
   }
   
}