/* ドロワーメニュー*/
#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: 12px;
right: 16px;
background: #fff;
padding: 10px;
border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;
}
#toggle-box {
position: relative;
width: 18px;
height: 16px;
cursor: pointer;
}


#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: #F9F8F3;
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:#3F665C;
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:5px;left:20px;width: ;
}


#nav-content .user-guide{display: inline-block;vertical-align:middle;line-height:1;background:#F1E3D3;margin:14px 5px 0 5px;border-radius: 18px;-webkit-border-radius: 18px;-moz-border-radius: 18px;background:#F1E3D3 url(../images/shosinsha.png) no-repeat 15px center;background-size: 14px auto;font-size: 14px;}
#nav-content .order-form{display: inline-block;vertical-align:middle;line-height:1;background:#CC3300;margin:14px 5px 0 5px;border-radius: 18px;-webkit-border-radius: 18px;-moz-border-radius: 18px;background:#CC3300 url(../images/cart-white.png) no-repeat 15px center;background-size: 14px auto;font-size: 14px;}

#nav-content .user-guide a,#nav-content .order-form a{display: block;padding:10px 20px 10px 38px;}
#nav-content .order-form a{color:#fff;}
#nav-content .user-guide a:hover,#nav-content .order-form a:hover{text-decoration:none;}
#nav-content .user-guide:hover,#nav-content .order-form:hover{filter: alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;}

/*レスポンシブ対応------------------------------------------------------------------*/
@media screen and (max-width: 900px) {
#nav-content {padding-left: 0;}
}
@media screen and (max-width: 480px) {
#nav-content {font-size: 18px;padding: 40px 0 ;}
#nav-content ul {list-style: none;margin: 30px 0 10px 0 ;}
#nav-content ul {list-style: none;margin: 30px 0 ;}
#nav-content a {padding: 10px 0;}
}
/*--------------------------------------------------------------------------------*/