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

@media screen and (min-width: 350px) { /*　画面サイズ 350pxから適用　*/
.btn { display: none  !important; }
.btn { display: block !important;
 width:    35px;
 height:   35px;
	position: relative;
 right:    15px;
 z-index:  999999999;
}
}
@media screen and (min-width: 700px) {/*　画面サイズ 500pxから適用　*/
.btn { display: block !important;
 width:    35px;
 height:   35px;
	position: relative;
 right:    15px;
 z-index:  999999999;
}
.btn { display: none  !important; }
}

.btn:before,
.btn:after,
.btn span{
 display:  block;
 width:    80%;
 position: absolute;
 left:     0;
 right:    0;
 margin:   auto;
 -webkit-transition: .35s ease-in-out;
 -moz-transition:    .35s ease-in-out;
 transition:         .35s ease-in-out;
}
.btn span{
 height:             2px;
 background-color:   #FFF;
 top:                calc(50% - 1.5px);
}

.btn:before{
 content: "";
 top:                calc(25% - 3px);
 border-top:         2px solid #FFF;
}
.btn:after{
 content: "";
 bottom:             calc(25% - 3px);
 border-bottom:      2px solid #FFF;
}
.btn.on span{
 display: none;
}

.btn.on:before{
 top:                calc(50% - 1.5px);
 -webkit-transform:  rotate(315deg);
 -moz-transform:     rotate(315deg);
 transform:          rotate(315deg);
}
.btn.on:after{
 bottom:             calc(50% - 1.5px);
 -webkit-transform:  rotate(-315deg);
 -moz-transform:     rotate(-315deg);
 transform:          rotate(-315deg);
}