@charset "utf-8";
/*==================================================
　5-2-1 3本線が×に
===================================*/
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn {
	/*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
z-index: 9999;
position: relative;
cursor: pointer;
width: 44px;
height:44px;
border-radius: 25px;
}

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

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

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

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

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

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

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

.openbtn.active span:nth-of-type(3){
top: 26px;
left: 11px;
transform: translateY(-6px) rotate(45deg);
width: 50%;
}

.header-container.hide {
display: none;
}

/*========= レイアウトのためのCSS ===============*/

a{
text-decoration: none;
}

.lead{
margin:20px 0 0 0;
}

.btn-block{
width:200px;  
padding: 30px;
}