@charset "UTF-8";

*,
*:after,
*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;	
}
body{
color: #333333;
font-size: 14px;
line-height: 1.65;
font-weight: 300;
font-family:  'Noto Sans JP', sans-serif;
letter-spacing: 0.1rem;
}

img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	background: rgba(255,255,255,0.01);
}
a{
	color: #333;
	text-decoration: none;	
}
a:hover{
	color: #333;
	text-decoration: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 5px;
}

/*
font-family: 'Cormorant Garamond', serif;
font-family: 'Noto Sans JP', sans-serif;
*/

.swiper-wrapper .swiper-slide {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.logo{
    position: absolute;
    width: 100%;
    text-align: center;
    color: white;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

menu{
margin-top: 3rem;
}
menu .box{
position: relative;
}
menu p{
position: absolute;
width: 100%;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'Amiri', serif;
font-size: 1.4rem;
letter-spacing: 0.3rem;
}
menu a{
display: inline-block;
margin: 0 1rem;
}
@media (max-width: 768px) {
menu p{font-size: 1.2rem;letter-spacing: 0.2rem;position: relative;}
menu a{margin: 1rem 0.5rem 0;}
}
@media (max-width: 576px) {
menu p{font-size: 1rem;}
}

#hinna{
margin-top: 3rem;
}
#hinna .col-md-6{
margin-top: 3rem;
line-height: 2rem;
}
#hinna h3{
font-family: 'Amiri', serif;
font-size: 1.2rem;
letter-spacing: 0.2rem;
}
#hinna .sns{
vertical-align: text-top;
}
#hinna .sns img{
width: 1.5rem;
vertical-align: text-top;
}

#menu{
margin-top: 3rem;
}
#menu .col-sm-6{
text-align: center;
}
#menu h3{
font-family: 'Amiri', serif;
font-size: 2rem;
text-align: center;
margin-bottom: 2rem;
letter-spacing: 0.5rem;
margin-top: 4rem;
}
#menu h2{
margin-top: 1rem;
font-size: 1.1rem;
}
#menu h2 img{
height: 1.3rem;
}
#menu .price{
font-family: 'Amiri', serif;
}
#menu p{
text-align: left;
}
#menu .col-12{
text-align: center;
margin-top: 2rem;
}
#menu .col-12 span{
display: inline-block;
padding: 1rem;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
#menu h4{
width: 100%;
font-size: 1.5rem;
font-family: 'Amiri', serif;
text-align: center;
margin-top: 2rem;
position: relative;
padding: 0 65px;
}
#menu .top{
margin-top: 1rem;
margin-bottom: 1rem;
}
#menu h4:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #aaa;
}
#menu h4 span {
  position: relative;
  padding: 0 1em;
  background: #fff;
}
#menu .drink-img{
margin-top: 4rem;
}
#menu .col-12 img{
height: 1.3rem;
}

#info{
margin-top: 5rem;
}
#info h3{
font-family: 'Amiri', serif;
font-size: 2rem;
text-align: center;
margin-bottom: 2rem;
letter-spacing: 0.5rem;
margin-top: 4rem;
}
#info div{
text-align: center;
}

footer{
background: #2b4932;
padding: 2rem 0 1.5rem;
color: #fff;
}
footer img{
width: 20rem;
}
footer .box{
position: relative;
}
footer p{
position: absolute;
width: 100%;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: 'Amiri', serif;
font-size: 1.4rem;
letter-spacing: 0.3rem;
}
footer a{
display: inline-block;
margin: 0 1rem;
color: #fff;
	text-decoration: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 5px;
}
footer a:hover{
color: #fff;
}
footer .col-12{
text-align: center;
margin-top: 1rem;
line-height: 1.8rem;
}
@media (max-width: 768px) {
footer img{width: 13rem;}
footer p{font-size: 1.2rem;letter-spacing: 0.2rem;position: relative;margin: 1rem 0.5rem 0;}
footer a{margin: 0 0.5rem;}
}
@media(min-width: 768px){
footer a[href^="tel:"]{pointer-events: none;}
}
@media (max-width: 576px) {
footer p{font-size: 1rem;}
}

.page_top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: none;
  z-index: 20000;
}

.page_top a{
-webkit-transition: .2s;
transition: .2s;
}

.page_top a:hover{ opacity: 0.6; }












@media (min-width: 768px) {
.sp-br{display: none;}
}