/*========= 3本線メニュー ===============*/

.openbtn{
	position: absolute;
	top: 15px;
	right: 1rem;
	z-index: 99999;
	background: #036EB8;
	color: #FFFFFF;
	cursor: pointer;
	width: 100px;
	height: 100px;
	border-radius: 8px;
	display: none;
}

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

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

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

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

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

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

.openbtn.active span:nth-of-type(2) {
	opacity: 0;/*真ん中の線は透過*/
}

.openbtn.active span:nth-of-type(3){
	top: 74px;
	left: 8px;
	transform: translateY(-27px) rotate(45deg);
	width: 85%;
}

/* ~~ スマホ ~~ */
@media screen and (max-width:767px) {

	nav {
		display: none;
	}

	.openbtn {
		display: block;
	}

}