/*
メニューロゴの高さ70px
横115px
メニューの横幅変える場合はheader_innerのgrid-template-columns: 110px 1fr;の110pxのとこの数字上げる

*/

header{
	box-sizing: border-box;
	top: 0;
	left: 0;
	font-size:1em;
	position: fixed;
	z-index:9;
	width:100%;
}

#header_inner{
	display:grid;
	grid-template-columns: 110px 1fr;
	place-items:center left;
	box-sizing: border-box;
	/*background-color:#E50112;*/
	gap:10px;

	padding:10px;box-sizing: border-box;
	transition: all .4s;
	border-bottom:1px solid #FFF;
}

.header_inner_bg{
	background-color:rgba(49,191,172,0.5);

}

.header_inner_bg.active{
	/*background-color:rgba(0,0,0,1);
	background: #ffd9f0;
	background: linear-gradient(90deg, rgba(255, 217, 240, 1) 0%, rgba(209, 255, 252, 1) 100%);
	*/
	background-color:rgba(49,191,172,0.9);


}

nav{
	width:100%;
}
#nav_inner{
	display:flex;
	width:100%;
	gap:20px;
	align-items: center;
	/*background-color:rgba(255,255,255,0.5);*/

	box-sizing: border-box;
}

#header_logo{/*background-color:#E50112;*/transition: all .4s;}
#header_logo img{max-height:100px;width:auto;transition: all .4s;}
#nav_teny{margin-left: auto;}
#nav_teny img{width:80px;transition: all .4s;}



/*--------------------
ハンバーガーメニュー
---------------------*/
.nav_open{
	display:none;
	position: relative;
	cursor: pointer;
	width: 50px;
	height:50px;
	color:#FFF;
	text-align:center;
	/*font-size:24px;*/

	margin-left: auto;
}

.nav_open span{
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 6px;
	height: 3px;
	border-radius: 2px;
	background: #FFF;
	width: 70%;
}

.nav_open span:nth-of-type(1) {
	top:8px;
}

.nav_open span:nth-of-type(2) {
	top:17px;
}

.nav_open span:nth-of-type(3) {
	top:26px;
}

.nav_open span:nth-of-type(4) {
	background: none;
	font-size:9px;
	top:30px;
	left: 5px;
}

/*activeクラス付与　線を回転して×に*/
.nav_open.active span:nth-of-type(1) {
	top: 8px;
	left: 6px;
	transform: translateY(6px) rotate(-45deg);
	width: 70%;
}

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

.nav_open.active span:nth-of-type(3){
	top: 20px;
	left: 6px;
	transform: translateY(-6px) rotate(45deg);
	width: 70%;
}

/*--------------------
スクロール時の挙動
---------------------*/
#header_scroll {font-size:0.9em;}
#header_scroll #header_logo {grid-template-columns: 110px 1fr;}
#header_scroll #header_logo img{max-height:50px;}
#header_scroll #nav_teny img{width:60px;}
#header_scroll #header_inner{
	grid-template-columns: 70px 1fr;
	padding:5px 10px;
}
/*--------------------
メニューのリンクの挙動
---------------------*/
#nav_inner a{
	text-decoration: none;
	color:#FFF;
	/*font-weight:bold;*/
}


/*上下２段計6個の例　使わないかも*/
/*
@media (min-width: 0px) and (max-width: 1200px) {

	header{
		display:grid;
		grid-template-columns: 80px 1fr 1fr 1fr 80px;
		gap:20px;
	}

	header div:first-child{
		grid-row: 1 / 3;
	}

	header div:last-child{
		grid-column: 5 / 6;
		grid-row: 1 / 3;
	}
}
*/


/*--------------------
640↓
---------------------*/
@media (min-width: 0px) and (max-width: 640px) { 

	/*--------------------
	header
	---------------------*/
  	#header_inner{ 
		display:block;
 		grid-template-columns: 1fr;
		padding:0;
 	}

  	.nav_open{display:block;}

	#header_logo{
		/*place-content: center;
		place-items: center;*/
		border-top:1px #CCC;display:grid;grid-template-columns: 170px 1fr;width:100%;padding:10px 10px;box-sizing: border-box;
	}

	#header_logo img{
		max-height:50px;
	}

	#nav_teny{margin-left: 0;}

	nav{display:none;position: fixed;}
	#nav_inner{
		/*background-color:rgba(0,0,0,1);*/
/*
		background: #ffd9f0;
		background: linear-gradient(90deg, rgba(255, 217, 240, 1) 0%, rgba(209, 255, 252, 1) 100%);
*/
		background-color:rgba(49,191,172,0.9);


		height:calc(100vh - 70px);
		width:100%;

		flex-flow: column;
		justify-content: center;

		text-align:center;
		gap:20px;
		border-top:1px solid #CCC;
	}

	#nav_inner a{
		color:#FFF;font-size:25px;
	}

	#header_scroll #nav_teny img{width:80px;}



	/*--------------------
	header スクロール時
	---------------------*/
  	#header_scroll #header_inner{ 
		padding:0;
 	}

	#header_scroll #nav_inner{
		height:calc(100vh - 70px);
	}

	#header_scroll #header_logo{/*padding:18px 10px;*/padding:10px 10px;}

	/*------------------------------------
	ハンバーガーメニュー　スクロール時
	-------------------------------------*/

	#header_scroll .nav_open
		background-color:rgba(0,0,0,0.5);
	}

	#header_scroll .nav_open span{
		height: 3px;
	}

	#header_scroll .nav_open span:nth-of-type(1) {
		top:8px; 
	}

	#header_scroll .nav_open span:nth-of-type(2) {
		top:17px;
	}

	#header_scroll .nav_open span:nth-of-type(3) {
		top:26px;
	}

	#header_scroll .nav_open span:nth-of-type(4) {
		top:30px;
	}

	/*activeクラス付与　線を回転して×に*/
	#header_scroll .nav_open.active span:nth-of-type(1) {
		top: 8px;
		left: 8px;
		width: 70%;
	}

	#header_scroll .nav_open.active span:nth-of-type(3){
		top: 20px;
		left: 8px;
		width: 70%;
	}
}