@charset "UTF-8";
/* CSS Document */

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

/*HeightMinというクラス名がついたら高さを小さく、上部固定に*/
#header.HeightMin{
	position: fixed;
    z-index: 9999;/*最前面へ*/
	background-color:rgba(8,69,157,0.5);
	animation: DownAnime 0.5s forwards;
	height:100px;
}
#header.HeightMin .gnavi__wrap nav ul li a,
#header.HeightMin .gnavi__wrap nav ul li div{
	padding:32px 0;
}
#header.HeightMin .header_wrapper h1{
	padding:23px 30px;
}
#header.HeightMin .gnavi__wrap nav li.has-child ul{
	top:100px;
}
#header.HeightMin  .gnavi__wrap nav ul li a,
#header.HeightMin .gnavi__wrap nav ul li div{
	border-bottom:none;
}

@media screen and (max-width: 768px) {
	#header.HeightMin{
		height:70px;
		animation: DownAnime2 0.5s forwards;
	}
}
@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-150px);
  }
  to {
  	opacity: 1;
	transform: translateY(150px);
  }
}

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