/*========= スクロール途中からヘッダーの高さが小さくなるためのCSS ===============*/
#header{
    /*はじめの高さを設定*/
	height: 100px;
	width:100%;
}

#header #logo-small {
	display:none;
}

/*HeightMinというクラス名がついたら高さを小さく、上部固定に*/
#header.HeightMin{
	position: fixed;
	z-index: 999;/*最前面へ*/
	height:20px;
	animation: DownAnime 0.5s forwards;
}

#header.HeightMin #logo-header {
	display:none;
}

#header.HeightMin #logo-small {
	display:block;
}



@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-170px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}

/* 以下は検証用のレイアウトのための CSS*/
/*
nav ul{
list-style: none;
display: flex;
justify-content: center;
}

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

section{
padding:300px 0;
}
*/