* {
		padding:0;
		margin:0;
	}

	
		
html, body {
margin: 0;
overscroll-behavior: none;
font-family: "Noto Sans JP"; 
-webkit-font-smoothing: antialiased;
font-size: 100%; 
 height:auto;
height:100%;
color: #42210b;
	
}
		
		
#fade {
	position: relative;
	width: 100%;
	height: 100%;
	display: none;
	background-color: #fff;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 99999;
	
}
	.skrollr-desktop body {
		height:100% !important;
	}

	body {
		font-family:sans-serif;
	}

	p {
		margin:1em 0;
	}



#skrollr-body {
width: 100%;
height:100%;
overflow:visible;
position:relative;
}

		

.gap {
background:transparent center no-repeat;
background-size:cover;
}

.gap-100 {
height:100%;position: relative;}

.m-images{
width: 100%;height:100%;position: relative;float: left;}

.header{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
overflow: hidden;
width: 100%;height: auto;
}

.head {
position: fixed;
top: 0;
left: 0;
background-color: rgba(255,255,255,0.90);
z-index: 999;
width: 100%;
height: 50px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}	
		
.header-l{width: 30%;float: left;font-size: 60%;text-align: left;font-weight: 600;border-top: 18px solid transparent;border-left: 15px solid transparent;box-sizing:border-box;}
.header-c{width: 40%;float: left;font-size: 100%;text-align: center;font-weight: 900;padding-top: 13px;}
.header-r{width: 30%;float: left;font-size: 80%;text-align: right;	
	

text-align: right;
border-top: 10px solid transparent;border-right: 15px solid transparent;
box-sizing: border-box;color: #000;
transition: all 0.5s;}


.sns-icon{width: 30px;height: 30px;float: right;}
.svg-fill{fill:#000;transition: all 0.5s;	}

.sns-icon a {
	transition: .2s;
	opacity: 1;

}
.sns-icon a:hover {
opacity: 0.3;
}


.sns-icon-b{width: 60px;height: 60px;float:left;}
.sns-icon-b a {
	transition: .2s;
	opacity: 1;

}
.sns-icon-b a:hover {
opacity: 0.3;
}


#scroll-arrow {
	
width: 100px;
height: 50px;
z-index: 2;
position: absolute;
left: 50%;
margin-left: -50px;
text-align: center;
bottom: 60px;
}

#scroll-arrow img{width: 100%;height: auto;}
#scroll-arrow a {
opacity: 1;
-webkit-transition: all .5s;
transition: all .5s;
}

#scroll-arrow a:hover {
opacity: 0.5;
}
		
.title{
width: 100%;height: 200px;
top: 50%;margin-top: -200px;
z-index: 2;
position: absolute;
text-align: center;

}
.title img{max-width: 800px; width: 100%;height: auto;}

.content {
overflow:hidden;
width: 100%;
height: auto;
float:left;
}

.content-about {width: 100%; height:700px;position:relative;float: left;}

.content-menu {
width: 100%; height:auto;
position:relative;
float: left;
box-sizing:border-box;
border-top: solid 50px transparent;
position: relative;  
}

.content-access {
width: 100%; height:auto;
position:relative;float: left;
background-color: #f5f1ed;
box-sizing:border-box;
border-top: solid 50px transparent;
}


.content-reserve{
width: 100%; height:auto;
text-align: center;
margin-bottom:100px;
position:relative;float: left;
box-sizing:border-box;
border-top: solid 50px transparent;
}	

.content-reserve-contact{width:120px;height: 60px;margin-left: auto;margin-right: auto;}
		
.box-1column{
margin-left: auto;
margin-right: auto;
width: 900px;
height: auto;
box-sizing:border-box;
border: solid 25px transparent;
}

.box-1column .box-eria{
width: 100%;
float: left;
}

.box-2column{width: 50%;float: left;box-sizing:border-box;border: solid 25px transparent;}
.box-titel{width: 100%;text-align: center;font-size: 200%;float: left;margin-top: 100px;height: 100px;}
.box-tagline{width: 100%;margin-bottom: 100px;font-size: 250%;float: left;font-weight: 600;}
.box-text{width: 100%;margin-bottom: 100px;font-size: 100%;line-height: 200%;float: left;}
		
.box-tagline-s{width: 100%;font-size: 150%;text-align: center;float: left;font-weight: 600;}
.box-text-m{width: 100%;margin-bottom: 25px;font-size: 120%;font-weight: 600; line-height: 140%;float: left;}
.box-text-s{width: 100%;margin-bottom: 50px;font-size: 85%;line-height: 170%;float: left;}
.box-tagline-m{width: 100%;font-size: 150%;text-align: left;float: left;margin-bottom: 50px;font-weight: 600;}
.text-red{color: #ff958d;font-size: 50%;width: 100%;float: left;font-weight: 900;}
.text-bl{font-size: 80%;margin-bottom: 20px;width: 100%;float: left;font-weight: 100;}	
.text-big{font-size: 200%;margin-bottom: 20px;width: 100%;float: left;font-weight: 600;}	
.text-small{font-size: 100%;margin-bottom: 20px;width: 100%;float: left;font-weight: 900;color: #ff958d;}
	
.menu{width: 100%;position: relative;}
.access{width: 100%;background-color: #ededed;position: relative;}

.price{width: 100%;float: left;box-sizing:border-box;border-bottom: solid 25px transparent;border-top: solid 25px transparent;}
.price img{width: 300px;height: auto;}
.menu-photo{width: 100%;float: left;box-sizing:border-box;border: solid 50px transparent;}
.menu-photo img{width: 100%;height: auto;}
.map{width: 100%;float: left;box-sizing:border-box;border: solid 0px transparent;}
.map img{width: 100%;height: auto;}
.google{width: 100%;float: left;box-sizing:border-box;border: solid 25px transparent;font-size: 90%;text-align: center;}

a:link { transition: color 0.3s; color: #42210b; text-decoration: none;}
a:visited { color: #42210b; }
a:hover { color: #ff958d; }
a:active { color: #000; }

/* -- typo --*/
.a{position: absolute;z-index:1;left: 50px;top: 0px;width: 10%; overflow: hidden;}
.b{position: absolute;z-index:1;right: 50px;bottom: 0px;width: 10%; overflow: hidden;}
.r{position: absolute;z-index:1;left: 30%;top: 100px;width: 10%; overflow: hidden;}
.i{position: absolute;z-index:1;right: 30%;bottom: 100px;width: 10%; overflow: hidden;}
.l{position: absolute;z-index:1;left: 50px;top: 0px;width: 10%; overflow: hidden;}
.e{position: absolute;z-index:1;right: 50px;top: 0px;width: 10%; overflow: hidden;}
.a img,.b img,.r img, .i img,.ll,.e img {width: 100%;height: auto;}		
/* -- typo --*/

/* -- drawer-nav --*/
.d-space{
width: 100%;
height:100vh;
position: absolute;
top: 0;  
left: 0;
right: 0;
bottom: 0;

	}

.d-menu{
float: left;
width: 100%;
height: 100vh;
font-weight: lighter;
text-align: left;
position: relative;
}

.d-menu-in{
top: 50%;
left: 50%;
	
width:250px;height:250px;
position: absolute;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);

}

.d-menu-m{font-size: 200%;font-weight: 800;margin-left: 30px;}

.d-menu-m a {
	width:auto;
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: #fff;
	transition: .2s;
	opacity: 1;
	margin-bottom: 10px;
	
}

.d-menu-m li a::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .2s;		
}

.d-menu-m li a:hover::after {
  transform: scale(1, 1);
}


.d-menu-s{font-size: 60%;font-weight: 600;width: 100%;float: left;}

		

/* inview */

.inviewfadeInUp {
opacity: 0;
transform: translate(0, 100px); 
-webkit-transform: translate( 0, 100px);
transition: all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
	
.fadeInUp {
animation:show-fadeInUp 2s cubic-bezier(0.190, 1.000, 0.220, 1.000) both;
}
.d1 {animation-delay:0s;}
.d2 {animation-delay:0.4s;}
.d3 {animation-delay:0.8s;}
.d4 {animation-delay:1s;}
.d5 {animation-delay:1.2s;}
.d6 {animation-delay:1.4s;}

@keyframes show-fadeInUp {
0% {transform:translate(0,100px);opacity:0;
	
}

100% {transform:translate(0,0);opacity:1;
	  
	}
}

.inviewfadeInUp-r {
opacity: 0;
transform: translate(0, 100px); 
-webkit-transform: translate( 0, 100px);
transition: all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
	
.fadeInUp-r {
animation:show-fadeInUp-r 2s cubic-bezier(0.190, 1.000, 0.220, 1.000) both;
}
.d1 {animation-delay:0s;}
.d2 {animation-delay:0.4s;}
.d3 {animation-delay:0.8s;}
.d4 {animation-delay:1s;}
.d5 {animation-delay:1.2s;}
.d6 {animation-delay:1.4s;}

@keyframes show-fadeInUp-r {
0% {transform:translate(0,100px);
	opacity:0;transform: rotate(-90deg);
}

100% {transform:translate(0,0);
	  opacity:1;transform: rotate(0deg);
	}
}


.inviewzoomIn {
	 
	 opacity: 0;
     transform: scale(0.5, 0.5);
     -webkit-transform: scale(1.2, 1.2);
	 transition: all 1s cubic-bezier(0.190, 1.000, 0.220, 1.000);	
}
    

.zoomIn {
animation:show-zoomIn 1s cubic-bezier(0.190, 1.000, 0.220, 1.000) both;
}
.d1 {animation-delay:0s;}
.d2 {animation-delay:0.4s;}
.d3 {animation-delay:0.8s;}
.d4 {animation-delay:1s;}
.d5 {animation-delay:1.2s;}
.d6 {animation-delay:1.4s;}

@keyframes show-zoomIn {
0% {transform: scale(0.5, 0.5);
	opacity:0;
}

100% {transform: scale(1, 1);
	  opacity:1;
	}
}
	

/* inview */