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

*/

/*
body{background-color:#afc9b4;padding:0;margin:0;}
*/
header{
	/*padding:10px;*/
	box-sizing: border-box;
	/*position: sticky;*/
	top: 0;
	left: 0;
	font-size:1em;

	/*padding:10px;*/
	position: fixed;
	z-index:9;
	width:100%;

	background-color:#ffea3a;
	/*font-family: 'RocknRoll One', sans-serif;*/
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight:bold;
}

#header_inner{
	display:grid;
	grid-template-columns: 330px 1fr;
	place-items:center left;
	box-sizing: border-box;
	padding:10px;box-sizing: border-box;
	transition: all .4s;
	width:100%;max-width:1200px;margin:0 auto;
}

#header_logo{/*background-color:#E50112;*/}
#header_logo img{max-height:50px;width:auto;transition: all .4s;padding:5px 0;}

nav{
	width:100%;
}
#nav_inner{
	display:flex;
	width:100%;
	gap:5px;
	/*align-items: center;*/
	/*background-color:rgba(255,255,255,0.5);*/
	box-sizing: border-box;
	justify-content:flex-end;
}

#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:#000;
	text-align:right;
	font-size:12px;
	margin-left: auto;
}

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

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

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

.nav_open span:nth-of-type(3) {
	top:31px;
}
/*
.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: 15px;
	left:11px;
	transform: translateY(10px) rotate(-45deg);
	width: 55%;
}

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

.nav_open.active span:nth-of-type(3){
	top: 35px;
	left: 11px;
	transform: translateY(-10px) rotate(45deg);
	width: 55%;
}

/*--------------------
スクロール時の挙動
---------------------*/
#header_scroll {font-size:0.9em;}
#header_scroll #header_logo img{max-height:40px;}
#header_scroll #nav_teny img{width:60px;}
#header_scroll #header_inner{
	grid-template-columns: 320px 1fr;
	padding:5px 10px;
}

/*--------------------
メニューのリンクの挙動
---------------------*/
#nav_inner a{
	text-decoration: none;
	color:#000;
	/*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;
	}
}
*/


/*-メニューの下線ボーダー表示--------------------*/
#nav_inner div a {
	position: relative;
	padding: 0.1em 0.3em;
	display: inline-block;
	transition: .3s;
	color: #000;
}

#nav_inner div a::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background-color: #ff7f00;
	transition: .3s;
	transform: translateX(-50%);
}

#nav_inner div a:hover::after {
	width: 100%;
}

/*--------------------
640↓
---------------------*/
/*@media (min-width: 0px) and (max-width: 640px) { */
@media (min-width: 0px) and (max-width: 930px) { 
	/*header{background:none;}*/

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


 	}
  	.nav_open{display:block;}
	#header_logo{display:grid;grid-template-columns: auto 1fr;width:100%;padding:2px 10px;box-sizing: border-box;}
	#header_logo img{width:90%;}
	#nav_teny{margin-left: 0;}

	nav{display:none;position: fixed;}
	#nav_inner{
		background-color:rgba(255,234,58,0.9);
		height:calc(100vh - 50px);
		width:100%;
		flex-flow: column;
		justify-content: flex-start;
		text-align:left;
		padding-top:1em;
		font-size:18px;
	}

	#nav_inner div{width:90%;margin:0 auto;padding:5px 0;border-bottom:dashed #FFF 1px;}


	#nav_inner a{
		color:#000;
	}

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


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

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


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


#header_scroll .nav_open{
	width: 50px;
	height:45px;

}

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

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

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

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

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

	#header_scroll .nav_open.active span:nth-of-type(3){
		top: 32px;
		left: 11px;
		transform: translateY(-10px) rotate(45deg);
		width: 55%;
	}



}