@charset "utf-8";
/* CSS Document */
/*==================================================
　5-2-2 2本線が×に
===================================*/

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

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


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

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

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

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

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