#main, #header, #topbaner, #footer,.ft_break { /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); will-change: transform; }
#main, #header, #topbaner, #footer.ft_break { -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; }
/*.nav-trigger a { color: transparent !important; }
*/
.nav-trigger a { }
.nav-trigger span { /* hamburger icon in CSS */
    position: absolute; display: inline-block; height: 3px; width: 30px; background: #fff; }
.nav-trigger span::after {
    /* hamburger icon in CSS */
    position: absolute;
 display: inline-block;
 height: 3px;
 width: 30px;
 background: #fff;
}
 .nav-trigger span::before {
    /* hamburger icon in CSS */
    position: absolute;
 display: inline-block;
 height: 3px;
 width: 30px;
 background: #fff;
}
.nav-trigger span { /* line in the center */ position: absolute; top: 36%; right: 0; left:0; margin:-2px auto 0;  -webkit-transition: background 0.1s 0.1s; -moz-transition: background 0.1s 0.1s; transition: background 0.1s 0.1s; }
.nav-trigger span::after {
    /* other 2 lines */
    content: '';
 right: 0;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
 -moz-transform: translateZ(0);
 -ms-transform: translateZ(0);
 -o-transform: translateZ(0);
 transform: translateZ(0);
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transform-origin: 0% 50%;
 -moz-transform-origin: 0% 50%;
 -ms-transform-origin: 0% 50%;
 -o-transform-origin: 0% 50%;
 transform-origin: 0% 50%;
 -webkit-transition: -webkit-transform 0.1s 0.1s;
 -moz-transition: -moz-transform 0.1s 0.1s;
 transition: transform 0.1s 0.1s;
}
 .nav-trigger span::before {
    /* other 2 lines */
    content: '';
 right: 0;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
 -moz-transform: translateZ(0);
 -ms-transform: translateZ(0);
 -o-transform: translateZ(0);
 transform: translateZ(0);
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transform-origin: 0% 50%;
 -moz-transform-origin: 0% 50%;
 -ms-transform-origin: 0% 50%;
 -o-transform-origin: 0% 50%;
 transform-origin: 0% 50%;
 -webkit-transition: -webkit-transform 0.1s 0.1s;
 -moz-transition: -moz-transform 0.1s 0.1s;
 transition: transform 0.1s 0.1s;
}
 .nav-trigger span::before {
    /* menu icon top line */
    top: -8px;
}
.nav-trigger span::after {
    /* menu icon bottom line */
    top: 8px;
}
.drawer-open .nav-trigger span { /* hide line in the center */ background: rgba(46, 50, 51, 0); }


.drawer-open .nav_trigcs{ left:0; right:auto; }
.drawer-open .nav-trigger span::before, .drawer-open .nav-trigger span::after {
    /* keep visible other 2 lines */
    background: #fff;
}
.drawer-open .nav-trigger span::before {
 -webkit-transform: translateX(4px) translateY(-3px) rotate(45deg);
 -moz-transform: translateX(4px) translateY(-3px) rotate(45deg);
 -ms-transform: translateX(4px) translateY(-3px) rotate(45deg);
 -o-transform: translateX(4px) translateY(-3px) rotate(45deg);
 transform: translateX(4px) translateY(-3px) rotate(45deg);
}
.drawer-open .nav-trigger span::after {
 -webkit-transform: translateX(4px) translateY(2px) rotate(-45deg);
 -moz-transform: translateX(4px) translateY(2px) rotate(-45deg);
 -ms-transform: translateX(4px) translateY(2px) rotate(-45deg);
 -o-transform: translateX(4px) translateY(2px) rotate(-45deg);
 transform: translateX(4px) translateY(2px) rotate(-45deg);
}
/****** drawer Setting ********/

.drawer { position: fixed; top: 0; right: 0; height: 100%;  background: #333; overflow: auto; -webkit-overflow-scrolling: touch; z-index: 1001; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; }




/* Overlay */
.overlay { /* shadow layer visible when navigation is active */ position: fixed; z-index: 990; height: 100%; width: 100%; top: 0; left: 0; cursor: pointer; background-color: rgba(0, 0, 0, 0.5); visibility: hidden; opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s; transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s; }
.overlay.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s; transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s; }
@media only screen and (max-width: 1015px) {
 .drawer-open #header, .drawer-open #topbaner, .drawer-open #main, .drawer-open #footer, .drawer-open .ft_break {
 -webkit-transform: translateX(-200px);
 -moz-transform: translateX(-200px);
 -ms-transform: translateX(-200px);
 -o-transform: translateX(-200px);
 transform: translateX(-200px);
}
 .sp {
display: block !important;
}
 .drawer {
 height: 0;
 visibility: hidden;
 -webkit-transition: visibility 0s 0.3s;
 -moz-transition: visibility 0s 0.3s;
 transition: visibility 0s 0.3s;
}
 .drawer-open .drawer {
 height: 100%;
 visibility: visible;
 -webkit-transition: visibility 0s 0s;
 -moz-transition: visibility 0s 0s;
 transition: visibility 0s 0s;
}
 .category-nav a {
 will-change: transform, opacity;
}
    /****** Effect Setting ********/

    /* Overlay */
    .overlay.is-visible {
 -webkit-transform: translateX(-200px);
 -moz-transform: translateX(-200px);
 -ms-transform: translateX(-200px);
 -o-transform: translateX(-200px);
 transform: translateX(-200px);
}
 .overlay.is-visible.cart-is-visible {
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 -o-transform: translateX(0);
 transform: translateX(0);
}
	.drawer{width: 93%;}
	.drawer-open .nav_trigcs{width:7%}

}
@media only screen and (max-width: 800px) {
	.drawer{width: 92%;}
	.drawer-open .nav_trigcs{width:8%}
}

@media only screen and (max-width: 700px) {
	.drawer{width: 90%;}
	.drawer-open .nav_trigcs{width:10%}
}
@media only screen and (max-width: 568px) {
	.drawer{width: 88%;}
	.drawer-open .nav_trigcs{width:12%}
}

@media only screen and (max-width: 468px) {
	.drawer{width: 87%;}
	.drawer-open .nav_trigcs{width:13%}
}
@media only screen and (max-width: 421px) {
	.drawer{width: 86%;}
	.drawer-open .nav_trigcs{width:14%}
}
@media only screen and (max-width: 376px) {
	.drawer{width: 84%;}
	.drawer-open .nav_trigcs{width:16%}
}
@media only screen and (max-width: 336px) {
	.drawer{width: 82%;}
	.drawer-open .nav_trigcs{width:18%}
}


@media only screen and (min-width: 1016px) {
 .sp {
display: none !important;
}

    /****** Side Setting ********/

    #btn_menu {
 display: none;
}
 .drawer {
 position: static;
 height: auto;
 width: auto;
 margin: 0 auto;
 overflow: visible;
 background: transparent;
 text-align: center;
}
 .drawer:after {
 content: "";
 display: table;
 clear: both;
}
    /* Overlay */
    .overlay {
 display: none;
}


}