@charset "utf-8";

/*==================================================
　5-2-6 3本線が回転して×に
===================================*/


/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
	position: relative;
	cursor: pointer;
    width: 40px;
    height:30px;
	border-radius: 5px;
    margin-top: 7px;
}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 2px;
	background: #F5F5B5;
  }


.openbtn span:nth-of-type(1) {
	top:0px;	
  	width: 40px;
}

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

.openbtn span:nth-of-type(3) {
	top:28px;
  	width: 40px;
}

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

/* 好きなサイズ・位置に調整できるパラメータ */
.openbtn{
  --x-len: 34px;   /* バツの棒の長さ（大きさ） */
  --x-off-x: 0px;  /* 右(+)・左(-) へ微調整 */
  --x-off-y: 0px;  /* 下(+)・上(-) へ微調整 */
}

/* × になるときだけ中央基準に配置して回転 */
.openbtn.active span{
  width: var(--x-len);
  left: calc(50% + var(--x-off-x));
  top:  calc(50% + var(--x-off-y));
  height: 2px;   
}

.openbtn.active span:nth-of-type(1){
  transform: translate(-50%, -50%) rotate(45deg);
}

.openbtn.active span:nth-of-type(2){
  opacity: 0;
}

.openbtn.active span:nth-of-type(3){
  transform: translate(-50%, -50%) rotate(-45deg);
}
.openbtn.active span:nth-of-type(1),
.openbtn.active span:nth-of-type(3){
  left: 40px;
  top: 26;

}