@charset "UTF-8";
/* CSS Document */
.toggle { display:none; }

#slideMenu { pointer-events:auto}

/* tablet -------------------- */
@media screen and (max-width:1100px) {
/* TOGGLE */
.toggle { width:36px; height:36px; border-radius:2px; border:1px solid #430a16; display: block; background:url(../images/bg_toggle@2x.png) no-repeat #FFF; background-position:center calc(100% - 4px); background-size:24px auto; position: fixed; z-index: 9999; right:225px; top:22px; cursor:pointer; pointer-events:all;}
.toggle .in { padding:8px 9px 16px; box-sizing: border-box; }

.toggle span { display:block; width:18px; height:2px; background:#58493f; }
.toggle span.t2 { margin:4px 0; }
.toggle { display:block; }

#slideMenu { width:126px; height:calc(100% - 82px); display: block; overflow: hidden; box-sizing:border-box; position:relative; position:fixed; top:82px; right:-136px; z-index:9999;}

/* MENU */
.toggle, .toggle span { transition:all 0.4s cubic-bezier(0.42, 0.02, 0.33, 1.05);}
.open .toggle span.t2 { opacity:0; }
.open .toggle {}
.open .toggle span.t1 { -webkit-transform: translate(0px, 6px) rotate(135deg); -ms-transform: translate(0px, 6px) rotate(135deg); transform: translate(0px, 6px) rotate(135deg); }
.open .toggle span.t3 { -webkit-transform: translate(0px, -6px) rotate(-135deg); -ms-transform: translate(0px, -6px) rotate(-135deg); transform: translate(0px, -6px) rotate(-135deg); }

}


@media screen and (max-width:680px) {
.toggle { right:15px; top:12px;}

#slideMenu { width:100.8px; height:calc(100% - 62px); top:62px; right:-100.8px;}

}