@charset "utf-8";
/**
* ドロワー開放時のスタイル
**/
@media(max-width: 767px) {
#page {
padding-top: 50px;
position: relative;
z-index: 2;
left: 0;
background: #fff;
-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
-moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
-o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
}

#drawernav {
position: fixed;
top: 0;
right: -240px;
width: 240px;
height: 100%;
background: #333;
color: #fff;
z-index: 1;
padding-top: 40px;
-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
-moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
-o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
}

#humberger {
position: absolute;
top: 0;
right: 0;
z-index: 3;
width: 45px;
padding: 17px 10px 10px;
cursor: pointer;
}

.fixed-content {
right: inherit;
width: 100%;
z-index: 2;
-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
-moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
-o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
}
#overlay {
z-index:-1;
opacity: 0;
background: #000;
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
-moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
-o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
}

#drawernav ul {
list-style: none;
padding: 0;
}
#drawernav ul li {
}
#drawernav ul li a {
color: #fff;
display: block;
padding: 16px 20px;
text-decoration: none;
}
#drawernav ul li a:hover {
color: #ddd;
background: #222;
}
#drawernav h4 {
padding: 0 15px;
}

.icon-bar {
height: 2px;
background: #333;
display: block;
margin-bottom: 6px;
-webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
-moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
-o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
}




 body.drawer-opened #page {
 left: -240px;
 box-shadow: 1px 0 2px #000;
 -webkit-box-shadow: 1px 0 2px #000;
}
 body.drawer-opened .fixed-content {
 left: -240px;
}
 body.drawer-opened #drawernav {
 right: 0;
}
 body.drawer-opened #humberger .icon-bar {
 background: #fff;
}
 body.drawer-opened #humberger :nth-child(1) {
 transform:translate(0, 8px) rotate(45deg);
 -webkit-transform:translate(0, 8px) rotate(45deg);
}
 body.drawer-opened #humberger :nth-child(2) {
 transform:translate(-20px, 0);
 -webkit-transform:translate(-20px, 0);
 opacity:0;
}
 body.drawer-opened #humberger :nth-child(3) {
 transform:translate(0, -8px) rotate(-45deg);
 -webkit-transform:translate(0, -8px) rotate(-45deg);
}
 body.drawer-opened #overlay {
 z-index: 3;
 opacity: 0.3;
 left: -240px;
}
}