@charset "utf-8";

/*========= スクロール途中でヘッダーが表示＆非表示するためのCSS ===============*/

#header{
    /*fixedで上部固定*/
	position: fixed;
	inset: 0;
	/* margin: auto; */
	max-width: 1280px;
	height: 80px;
	width:100%;
    z-index: 995;/*最前面へ*/
	/*以下はレイアウトのためのCSS*/
	display: none;
	justify-content: space-between;
	align-items: center;
	/* background:rgba(238,236,231,0.8); */
	/* background-image: url(../img/dairiseki05.jpg); */
	color:#1E0405;
	text-align: center;
	padding: 0 12.8rem;
	/* ヘッダー上に固定の時 */
    /* margin: 0 auto; */
	/* ヘッダー下に固定の時 */
	margin: auto auto 4rem;
	/* border-radius: 10px; */
	/* background-color: #ad976e; */
	/* background-color: #494949; */
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	overflow:hidden
}

/* 　上に上がる動き　

#header.UpMove{
	animation: UpAnime 0.5s forwards;
}

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

　下に下がる動き　

#header.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-100px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
} */

/* タブレット版 */
@media screen and (min-width:481px) and (max-width:1280px){
	#header{
		padding: 0 4.8rem;
		margin-bottom: 0;
		background-color: #ad976e;
		top: auto;
		bottom: 0;
		/* height:104px; */
		height: 8rem;
		display: flex;
	}

	.header-logo{
		/* width: 4.8rem; */
		width: 8rem;
		height: auto;
		padding: 2.4rem;
	}
}

/* スマホ版 */

@media screen and (max-width:480px){
	#header{
		padding: 0 2.4rem;
		margin-bottom: 0;
		/* background-color: rgba(173,151,110,0.6); */
		background-color: #ad976e;
		top: auto;
		bottom: 0;
		height:60px;
		display: flex;
	}
}