@charset "UTF-8";
/* CSS Document */
#menu{
width: 100%;
padding: 204px 0 0;
}
#menu h2{
font-size: 4.2rem;
font-weight: 300;
padding-bottom: 16px;
}
#menu h2{
font-size: 4.2rem;
font-weight: 300;
padding-bottom: 16px;
}
.title{
color: #A09D77;
padding: 0 0 60px;
}
.title p{
font-size: 2.2rem;
font-weight: 300;
}
.low-glass{
width: 67px;
height: 91px;
padding: 26px 2px 0 0;
}
.high-glass{
width: 57px;
height: 115px;
}
.peace{
width: 38px;
height: 47px;
top: 110px;
left: 10px;
}
.board{
width: 197px;
height: 100px;
padding-top: 13px;
top: 126;
left: 0;
}
.menu-link{
width: 480px;
}
.triangle {
width: 0;
height: 0;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
border-top: 16px solid #fff;
margin-left: 10px;
}
.menu-link a{
padding: 60px 0 160px;
}
.menu-link a:hover{
opacity: 100;
}
.drink-menu--link p{
padding: 26px 40px 0 0 ;
line-height: 1.5;
}
.food-menu--link p{
padding: 24px 40px 0 0 ;
line-height: 1.5;
white-space: nowrap;
}

.menu-link img{
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-webkit-transition: .3s ease-in-out;
transition: .4s ease-in-out;
}
.drink-menu--link:hover .low-glass{
-webkit-transform: rotate(15deg) scale(1);
transform: rotate(15deg) scale(1);
}
.drink-menu--link:hover .high-glass{
-webkit-transform: rotate(-15deg) scale(1);
transform: rotate(-15deg) scale(1);
}
.food-menu--link:hover .peace{
transform: translate(-20px,-60px) rotate(-40deg);
}
.food-menu--link:hover .board{
-webkit-transform: rotate(-5deg) scale(1);
transform: rotate(-10deg) scale(1);
}
.menu-pc img{
width: 996px;
padding: 0 0 160px;
}

@media(max-width:1200px){
  #drink-menu , #food-menu{
  width: 80%
  }
  .menu-pc img{
  width:100%;
/*  padding:0px 0 160px 0;*/
  }
} 

@media(max-width:800px){
  #menu{
  padding-top: 104px;
  }
  #menu h2{
  font-size: 2.6rem;
  padding-bottom: 4px;
  }
  .title{
  padding-bottom: 0;
  font-size: 2.6rem;
  }
  .title p{
  font-size: 1.2rem;
  }
  .menu-link{
  width: 320px;
  }
  .drink-menu--link p , .food-menu--link p{
  font-size: 1.4rem;
  padding-right: 20px;
  }
  .low-glass{
  width: 40px;
  height: 52px;
  /*padding: 26px 2px 0 0;*/
  }
  .high-glass{
  width: 28px;
  height: 77px;
  }
  .peace{
  width: 20px;
  height: 24px;
  top: 100px;
  left: 0;
  }
  .board{
  width: 118px;
  height: 60px;
  padding-top: 13px;
  top: 126;
  left: 0;
  }
  .triangle {
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 12px solid #fff;
  margin: 4px 0 0 8px;
  }
  #drink-menu , #food-menu{
  width: 86%
  }
  .menu-pc img{
  display: none;
  }
  .menu--sp{
  display: block;
  margin: 0 auto 122px;
  width: 320px;
  }
  .drink-kinds ul li , .food-kinds ul li{
  padding: 3px 0;
  }
  .food-kinds{
  margin: 42px auto 0;
  }  
  .drink-kinds{
  margin: 42px auto 0;
  }
  .drink-kinds p{
  font-size: 2.1rem;
  }
  .k-bourbon p{
  padding-right: 134px;
  }
  .v-bourbon{
  padding-right: 34px;
  }
  .k-wine p{
  padding-right: 167px;
  }
  .v-wine{
  padding-right: 20px;
  }
  .volume{
  font-size: 1rem;
  }
  .digits3{
  padding-right: 30px;
  }
  .digits4{
  padding-right: 21px;
  }
  .price{
  padding-top: 23px;
  }
  .note{
  font-size: 1rem;
  padding: 24px 0 0 ;
  }
}
@media(max-width:500px){
  .triangle{
  display: block;
  text-align: center;
  margin: 12px 0 0 48px ;
  /*  margin: 0 auto;  */
  }
    .menu-link{
  width: 300px;
  }
  .drink-menu--link p , .food-menu--link p{
  padding-top: 12px;
  }
}