/* ドロワーメニュー*/
#l-menu {
position: fixed;
width: 52px;height: 100%;
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;

}
#toggle-box {
position: relative;
width: 28px;
height: 12px;
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) {width: 0;}
#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(35deg) translatey(-5%);}
.is-open #toggle-box > span:nth-child(2) {width: 0;}
.is-open #toggle-box > span:nth-child(3) {top: 50%;transform: rotate(-35deg) translatey(-5%);}

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

#nav-content {
overflow: auto;
position: fixed;
z-index: 50 !important;
width: 100%;
height: 100%;
background: #FFF;
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: 14px;
font-family: "din", sans-serif;
}

#nav-content ul {list-style: none;margin: 30px 0 ;}
#nav-content a {
letter-spacing:0.1em;
display: block;
color:#7284B0;
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: ;
}

.first-contact {font-size: 10px;}

/*レスポンシブ対応------------------------------------------------------------------*/
@media screen and (max-width: 900px) {
#nav-content {padding-left: 0;}
}
@media screen and (max-width: 480px) {
#nav-content {font-size: 14px;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;}
}
/*--------------------------------------------------------------------------------*/