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

/* ヘッダー

/*-----------------------*/
/* headerの高さ */
:root{
	--header-height: calc(80rem/16);
	--header-height-is-change: calc(56rem/16);
	/* is clamp setting / max 280px min 180px / max-vw 1280px min-vw 320px */
	--header-logo-size: clamp(11.25rem, 9.167rem + 10.42vw, 17.5rem);
	--header-logo-size--fb: 280px;
}
@media(max-width:959px){
    :root{
		--header-height: calc(64rem/16);
        --header-logo-size--fb: 240px;
    }
}
@media(max-width: 559px){
	:root{
		--header-height: calc(48rem/16);
		--header-logo-size--fb: 180px;
	}
}
#header{
	width: 100%;
	height: var(--header-height);
	background-color: var(--color-main);

	display: flex;
	align-items: center;
	justify-content: flex-end;

	position: fixed;
	top: 0;
	left: 0;

	z-index: 10;
}
/*-----------------------------*/
/* ナビアニメーション headerの高さ */
@media(min-width: 960px){
	#header.is-change{
		height: var(--header-height-is-change);
		position: fixed;
		top: 0;
		left: 0;

		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
		z-index: 10;
	}
	#header.is-change[data-is-change="true"]{
		animation-name: header-shrink;
	}
	#header.is-change[data-is-change="false"]{
		animation-name: header-expand;
	}
	@keyframes header-shrink{
		from{
			height: var(--header-height);
		}
		to{
			height: var(--header-height-is-change);
		}
	}
	@keyframes header-expand{
		from{
			height: var(--header-height-is-change);
		}
		to{
			height: var(--header-height);
		}
	}
}
/* アンカーページ遷移時のヘッダーずれ対策 */
:target{
	scroll-margin-top: calc(var(--header-height) + 24px);
}
/* ロゴ */
#header-logo{
	width: calc(var(--header-logo-size--fb) + calc(2 * var(--space-lr-reg)));
	width: calc(var(--header-logo-size) + calc(2 * var(--space-lr-reg)));
	height: 100%;
	display: flex;
	align-items: center;
	margin-right: auto;
}
#header-logo > a{
	width: 100%;
	height: 100%;
	padding: 0 var(--space-lr-reg);
	display: flex;
	align-items: center;
	transition: opacity .2s var(--linear);
}
#header-logo > a > img{
	width: 100%;
	height: auto;
}
/* hover設定 */
@media(any-hover:hover){
	#header-logo > a:hover,
	#header-logo > a:focus{
		opacity: 0.7;
	}
}