/* ドロワーメニュー*/
#l-menu {
position: fixed;
width: 52px;height: 120%;
display: block;
top: 0;right: 0;
z-index: 100;
}
/*レスポンシブ対応------------------------------------------------------------------*/
@media screen and (max-width: 900px) {
#l-menu {display: none;}
.l-menu-logo{position: fixed;top: 10px;left:11px;}
.l-menu-logo img{width: 60px;height:auto;}
}
@media screen and (max-width: 480px) {
.l-menu-logo img{width: 50px;height:auto;}
}
/*--------------------------------------------------------------------------------*/

#toggle {
position: fixed;
top: 30px;
right: 30px;
background:#4D4D4D ;
border-radius: 18px;-webkit-border-radius: 18px;-moz-border-radius:  18px;
}
#toggle-box {
position: relative;
width: 100px;
height: auto;
cursor: pointer;font-size: 12px;
text-align: center;
color: #fff;padding: 8px 22px;
  display: block
}

#toggle:hover {opacity: 0.6;}
#toggle-box img:hover {
animation: r7 1s linear infinite;
}
 
@keyframes r7 {
0%   { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
#toggle-box > span {
width: 100%;
height: 2px;
left: 0;
display: block;
background: #000;
position: absolute;
transition: transform .6s ease-in-out, top .5s ease, bottom .5s ease;
}

#toggle-box > span:nth-child(1) {top: 0;}
#toggle-box > span:nth-child(2) {top: 50%;transform: translatey(-50%);}
#toggle-box > span:nth-child(3) {bottom: 0;}

.is-open #toggle-box > span {background: #000;}
.is-open #toggle-box > span:nth-child(1) {top: 50%;transform: rotate(45deg) translatey(-15%);}
.is-open #toggle-box > span:nth-child(2) {width: 0;}
.is-open #toggle-box > span:nth-child(3) {top: 50%;transform: rotate(-45deg) translatey(-15%);}

/* z-index */
#toggle {z-index: 100;}

#nav-content {
overflow: auto;
position: fixed;
z-index: 50 !important;
width: 100%;
height: 100%;
background: #EDF1FC;
color:;
top: 0;
right: 0;
padding: 60px 0 ;
text-align:center;
transform: translateX(100%); 
transition:transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
font-size: 26px;
}

#nav-content ul {list-style: none;margin: 30px 0 ;}
#nav-content a {
letter-spacing:0.1em;
display: block;
color:#4d4d4d;
text-decoration: none;
padding: 14px 0;
transition: opacity .6s ease;
pointer-events: none;
}
#nav-content a:hover {opacity: 0.6;}
#nav-content .social a {display: inline-block;margin: 20px 10px 10px 10px;}
.is-open {overflow: hidden;}
.is-open #nav-content {z-index: 1;transform: translateX(0);}
.is-open #nav-content a {pointer-events: auto;}

.logo-box{
position: absolute;
top:20px;left:30px;width: ;
}


#nav-content .reserve-btn{display: inline-block;vertical-align:middle;line-height:1;margin:14px 5px 0 5px;border-radius: 18px;-webkit-border-radius: 18px;-moz-border-radius: 18px;background:#4D4D4D;font-size: 18px;min-width: 200px;}

#nav-content .reserve-btn a{display: block;padding:10px; color:#fff;}
#nav-content .reserve-btn a:hover{text-decoration:none;}
#nav-content .reserve-btn:hover{filter: alpha(opacity=70);-moz-opacity:0.70;opacity:0.70;}

/*レスポンシブ対応------------------------------------------------------------------*/
@media screen and (max-width: 900px) {
#nav-content {padding-left: 0;}
}

@media screen and (max-width: 480px) {
#toggle {
position: fixed;
top: 20px;
right: 20px;
background:#4D4D4D ;
border-radius: 18px;-webkit-border-radius: 18px;-moz-border-radius:  18px;
}
#toggle-box {
position: relative;
width: 80px;
height: auto;
cursor: pointer;font-size: 10px;
text-align: center;
color: #fff;padding: 6px 22px;
  display: block
}
#nav-content {font-size: 16px;padding: 40px 0 ;}
#nav-content ul {list-style: none;margin: 30px 0 20px 0 ;}
#nav-content a {padding: 8px 0;}
.logo-box{top:12px;left:20px;}
.logo-box img{width:100px;height:auto;}
#nav-content .reserve-btn{margin:10px 0 5px 0 5px;font-size: 14px;min-width: 150px;}
}
/*--------------------------------------------------------------------------------*/