/* ========================= HEADER ========================= */
.aa-header{
	position:fixed;
	inset:0 0 auto;
	z-index:var(--z-header);
	border-bottom:1px solid transparent;
	transition:background var(--dur-fast) linear, backdrop-filter var(--dur-fast) linear,
		border-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
/* スクロール後：Glassmorphism */
.aa-header.is-solid{
	background:rgb(247 249 252 / .68);
	backdrop-filter:blur(20px) saturate(1.4);
	-webkit-backdrop-filter:blur(20px) saturate(1.4);
	border-bottom-color:rgb(11 18 32 / .07);
}
/* 暗いセクション上では文字色を反転 */
.aa-header.is-dark{ color:var(--c-snow) }
.aa-header.is-dark.is-solid{
	background:rgb(16 26 46 / .62);
	border-bottom-color:rgb(255 255 255 / .1);
}

.aa-header__inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	max-width:var(--max-stage);
	margin-inline:auto;
	padding:clamp(14px,1.8svh,22px) var(--gutter);
}

.aa-logo{
	display:flex;
	align-items:center;
	gap:.5em;
	font-family:var(--font-display);
	font-weight:600;
	font-size:clamp(.95rem,1.1vw,1.1rem);
	letter-spacing:.14em;
}
.aa-logo__sep{ opacity:.34; font-weight:400 }
.custom-logo{ height:clamp(24px,3vh,36px); width:auto }

/* ハンバーガー */
.aa-burger{ display:none; width:44px; height:44px; place-items:center }
.aa-burger__line{
	display:block; width:20px; height:1px; background:currentColor;
	transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) linear;
}
.aa-burger__line + .aa-burger__line{ margin-top:6px }
.aa-burger[aria-expanded="true"] .aa-burger__line:first-child{ transform:translateY(3.5px) rotate(45deg) }
.aa-burger[aria-expanded="true"] .aa-burger__line:last-child{ transform:translateY(-3.5px) rotate(-45deg) }

@media (max-width:900px){ .aa-burger{ display:grid } }

/* ロゴの明暗切り替え（白版が登録されている場合のみ2枚重ねる） */
.aa-logo-image{ display:block }
.aa-logo-image--dual{ position:relative }
.aa-logo-image--dual .aa-logo-image__white{
	position:absolute;
	inset:0;
	opacity:0;
	transition:opacity var(--dur-fast) linear;
}
.aa-header.is-dark .aa-logo-image--dual .custom-logo{ opacity:0 }
.aa-header.is-dark .aa-logo-image--dual .aa-logo-image__white{ opacity:1 }
.aa-logo-image--dual .custom-logo{ transition:opacity var(--dur-fast) linear }