/*========= 途中からハンバーガーメニューを表示させるためのCSS ===============*/

/*========= ボタンのためのCSS ===============*/

/*ボタン全体の形状*/
.openbtn{
    /*はじめは非表示に*/
	display: none;
    /*ボタンの位置*/

    /*ボタンの形状*/
	cursor: pointer;
    width: 100%;
    height:50px;
}

.openbtn>div{
	width: calc(100% / 3);
	background:rgb(239,130,0);
	margin-left: 1px;
	text-align: center;
}

.openbtn>div:first-of-type{
	margin-left: 0;
}


.openbtn a{
	text-decoration: none;
	color: #fff;
	font-size: 1.6rem;
	line-height: 50px;
	font-weight: 700;
}
.btn3{
	color: #fff;
}

.btn3 p{
	margin-top: 2px;
	position:relative;
	font-size:1.4rem;
}

.btn3 p::after{
	font-family: "Font Awesome 6 Free";
	font-weight: 600; 
	content:'\f0c9';
	font-size: 2.8rem;
	
	position:absolute;
	top:10px;
	left:50%;
	transform:translateX(-50%);
}


/*======================
activeがついたときの動作
========================*/

#header.active{
}

.openbtn.active{
	display: flex;
	z-index: 110;
}

.header-p.active{
	display: none;
}

#kotei.active{
	display: none;
}

#reqruit-button.active{
	display: inline-block;
}

.header-upper.active{
	margin: 20px auto;
}


/*======================
btn3プッシュされたとき
========================*/

.btn3.push p::after{
	font-family: "Font Awesome 6 Free";
	font-weight: 600; 
	content: '\58';
	font-size:2.4rem;
	top:15px;
}

#kotei.push{
	display: block;
	margin-top: -9px;
}

#kotei.push ul a{
	background-color: #663300;
}



/*======================
表示されている時のkotei
========================*/
#kotei{
	width: 100%;
}

/*======================
========================*/

@media screen and (min-width:1080px){
	.top-middle.active{

	}

}