@charset "UTF-8";
/* CSS Document */
#header{
	height: auto;/*高さ指定*/
	width:100%;/*横幅指定*/
	/*以下はレイアウトのためのCSS*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	text-align: center;
	z-index: 997;
	background: #faeabb!important;
}
.backgray{
	height: auto;/*高さ指定*/
	width:100%;/*横幅指定*/
	/*以下はレイアウトのためのCSS*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	text-align: center;
	background:#eee;
}

/*JSを使いfixedクラスが付与された際の設定*/
#header.fixed,#header2.fixed{
	position: fixed;/*fixedを設定して固定*/
  z-index: 999;/*最前面へ*/
  top:0;/*位置指定*/
  left:0;/*位置指定*/
background:rgba(255,255,255,0.8)!important;
color:#000;	
}
#header.fixed a,#header2.fixed a{
color: #333;	
}

@media all and  (max-width:650px){
#header{
	height: auto;/*高さ指定*/
	width:100%;/*横幅指定*/
	/*以下はレイアウトのためのCSS*/
	display:flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	text-align: center;
	padding: 0px;
	background:rgba(255,255,255,0.0)!important;
	position: fixed;
}

/*JSを使いfixedクラスが付与された際の設定*/
#header.fixed{
	position:inherit;/*fixedを設定して固定*/
  z-index: 997;/*最前面へ*/
  top:0;/*位置指定*/
  left:0;/*位置指定*/
background:rgba(255,255,255,0.0);	
}
.backgray{
	height: auto;/*高さ指定*/
	width:100%;/*横幅指定*/
	/*以下はレイアウトのためのCSS*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	text-align: center;
	padding: 0px;
	background:#eee;
}	
}
/*========= 以下は検証用のレイアウトのためのCSS ===============*/
nav ul{
list-style: none;
display: flex;
justify-content: center;
}

nav ul li a{
text-decoration: none;
color: #666;
padding:10px 0;
}

section{
padding:300px 0;
}