/*==================================================
　5-2-2 2本線が×に
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
    /*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
    position: relative;
    width: 50px;
    height:50px;
    cursor: pointer;
    /*background:#fff;*/
}
    
/*ボタン内側*/

.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 13px;
    height: 2px;
    /*background-color: #666;*/
    background-color: #fff;
  }


.openbtn span:nth-of-type(1) {
    top:22px;   
    width: 50%;
}

.openbtn span:nth-of-type(2) {
    top:29px;
    width:30%;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn.-active span:nth-of-type(1) {
    top: 20px;
    left: 16px;
    transform: translateY(6px) rotate(-45deg);
    width: 35%;
}

.openbtn.-active span:nth-of-type(2) {
    top: 32px;
    left: 16px;
    transform: translateY(-6px) rotate(45deg);
    width: 35%;
}