@charset "utf-8";

/*========= スクロール途中からヘッダーの高さが小さくなるためのCSS ===============*/
#header2{
    /*はじめの高さを設定*/
	height: 170px;
	width:100%;
   /*以下はレイアウトのためのCSS*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	background:#ffffff;
	color:#000000;
	text-align: center;
	padding: 20px;
}

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

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