@charset "UTF-8";
/* CSS Document */

#slideMenu { pointer-events:auto; opacity: 1.0;}
.toggle { display: none;}

@media screen and (max-width:1080px){
/* TOGGLE */
.toggle { width:30px; height:30px; display:block; background: url("../images/bg_toggle@2x.png") center bottom no-repeat; background-size: 28px auto; pointer-events:all; cursor: pointer; position: absolute; top:35px; right:15px; z-index: 9999;}
.toggle .in { padding:0; box-sizing: border-box; }

.toggle span { display:block; width:30px; height:2px; background:#000;}
.toggle span.t1 {}
.toggle span.t2 { margin:5px 0;}
.toggle span.t3 {}
.toggle { display:block; }

.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 { transform: translate(0px, 7px) rotate(135deg); }
.open .toggle span.t3 { transform: translate(0px, -7px) rotate(-135deg); }

#slideMenu { width:100%; height:100vh; padding:120px 60px 80px; display:block; overflow-y:scroll; background-color: rgba(255,255,255,0.96); box-sizing:border-box; position:relative; position:fixed; top:0; left:0; z-index:8000; pointer-events:none; opacity: 0;}

}


@media screen and (max-width:680px){
/* header --------------------*/
.toggle { width:20px; height:24px; background-size: 20px auto; top:20px; right:17px;}

.toggle span { width:20px;}
.toggle span.t2 { margin:4px 0;}

.open .toggle span.t1 { transform: translate(0px, 6px) rotate(135deg); }
.open .toggle span.t3 { transform: translate(0px, -6px) rotate(-135deg); }

#slideMenu { padding:80px 40px 60px;}
}