:root {
	--sainou-header-blue: #2b537b;
	--sainou-header-panel-width: 690px;
	--sainou-header-height: 120px;
	--sainou-header-max-width: 1920px;
}

.sainou-site-header {
	position: fixed;
	z-index: 1000;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	max-width: var(--sainou-header-max-width);
	height: var(--sainou-header-height);
	margin: 0 auto;
	color: var(--sainou-header-blue);
	pointer-events: none;
	transform: translateY(0);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;

	container-name: sainou-header-viewport;
	container-type: inline-size;
}

.sainou-site-header:is(.alignfull, .vk_outer-width-full),
.is-layout-constrained .sainou-site-header:is(.alignfull, .vk_outer-width-full) {
	max-width: var(--sainou-header-max-width) !important;
}

.sainou-site-header.is-hidden {
	transform: translateY(calc(-100% - 8px));
}

.sainou-site-header__panel {
	position: relative;
	width: min(var(--sainou-header-panel-width), calc(100cqi - 130px));
	height: var(--sainou-header-height);
	color: inherit;
	background: #fff;
	border-radius: 0 0 80px 0;
	pointer-events: auto;
	transition:
		color 0.3s ease,
		background-color 0.3s ease;
}

.sainou-site-header[data-front-page="true"]:not(.is-over-hero) .sainou-site-header__panel {
	background-color: #fff;
}

.sainou-site-header[data-front-page="true"].is-over-hero {
	color: #fff;
}

.sainou-site-header[data-front-page="true"].is-over-hero .sainou-site-header__panel {
	background-color: transparent;
}

/*
 * 1920px以上ではヘッダー内部の配置を維持したまま、
 * 左パネルの背景だけをviewport左端まで延長する。
 */
@media (width >= 1920px) {
	.sainou-site-header__panel::before {
		position: absolute;
		top: 0;
		right: 100%;
		width: max(0px, calc((100vw - var(--sainou-header-max-width)) / 2));
		height: 100%;
		background-color: inherit;
		pointer-events: none;
		content: "";
	}
}

/*
 * トップページ先頭のカバー上（白背景なし）では、
 * PC/タブレット側のヘッダー要素を少し下げる。
 * 720px未満は後段のスマホ指定を優先する。
 */
.sainou-site-header[data-front-page="true"].is-over-hero
	.sainou-site-header__logo-heading {
	top: 40px;
}

.sainou-site-header[data-front-page="true"].is-over-hero
	.sainou-site-header__address {
	top: 64px;

	letter-spacing: 0.06em;
}

.sainou-site-header[data-front-page="true"].is-over-hero
	.sainou-site-header__phone {
	top: 62px;
}

.sainou-site-header__logo,
.sainou-site-header__phone {
	color: inherit;
	text-decoration: none;
}

.sainou-site-header__logo,
.sainou-site-header__logo-heading {
	position: absolute;
	top: 25px;
	left: 40px;
	display: block;
	width: 140px;
	height: 66px;
}

.sainou-site-header__logo-heading {
	margin: 0;
	padding: 0;
	font: inherit;
}

.sainou-site-header__logo-heading .sainou-site-header__logo {
	position: static;
}

.sainou-site-header__logo-svg,
.sainou-site-header__logo-svg svg {
	display: block;
	width: 140px;
	height: 66px;
}

.sainou-site-header__logo-svg path,
.sainou-site-header__logo-svg rect,
.sainou-site-header__phone-icon path {
	fill: currentcolor;
}

.sainou-site-header__address {
	position: absolute;
	top: 50px;
	left: 220px;
	width: 250px;
	height: 20px;
	margin: 0;
	margin-top: -2px;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 20px;
	white-space: nowrap;
}

.sainou-site-header__phone {
	position: absolute;
	top: 49px;
	left: 487px;
	display: flex;
	align-items: center;
	height: 24px;
	margin-top: -2px;
	font-weight: 500;
	letter-spacing: 0.075em;
	line-height: 1;
}

.sainou-site-header__phone-icon,
.sainou-site-header__phone-icon svg {
	display: block;
	flex: 0 0 14px;
	width: 14px;
	height: 19px;
}

.sainou-site-header__phone-number {
	display: block;
	width: 124px;
	height: 24px;
	margin-left: 6px;
	font-size: 18px;
	line-height: 24px;
	white-space: nowrap;

	margin-top: -4px;
}

.sainou-site-header__navigation-slot {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 50px;
	height: 44px;
	pointer-events: auto;
}

.sainou-site-header__navigation-slot .sainou-site-header__menu-toggle {
	width: 50px;
	height: 44px;
	margin: 0;
}

.sainou-site-header__menu-toggle {
	position: relative;
	display: grid;
	width: 50px;
	height: 44px;
	margin: 0;
	padding: 0;
	color: var(--sainou-header-blue);
	background: #fff;
	border: 0 !important;
	border-radius: 5px;
	cursor: pointer;
	pointer-events: auto;
	place-items: center;
	appearance: none;
}

.sainou-site-header__menu-toggle:hover {
	background: #f7f9fb;
}

.sainou-site-header[data-front-page="true"].is-over-hero
	.sainou-site-header__menu-toggle,
.sainou-site-header[data-front-page="true"].is-over-hero
	.sainou-site-header__menu-toggle:hover {
	color: var(--sainou-header-blue);
	background: transparent;
}

.sainou-site-header__menu-toggle:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 3px;
}

.sainou-site-header__menu-icon {
	width: 20px;
	height: 15px;
	background:
		linear-gradient(
			to bottom,
			currentcolor 0 1px,
			transparent 1px 7px,
			currentcolor 7px 8px,
			transparent 8px 14px,
			currentcolor 14px 15px
		);
}



.sainou-site-header.is-menu-open {
	height: 100vh;
	height: 100dvh;
	transform: none;
}


.sainou-site-header__menu-panel[hidden] {
	display: none;
}

.sainou-site-header__menu-panel {
	position: fixed;
	z-index: 1001;
	inset: 0;
	overflow-y: auto;
	overflow-x: clip;
	scrollbar-gutter: stable;
	color: var(--sainou-header-blue);
	background: #fff;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.16s ease-out;
}

.sainou-site-header__menu-panel-inner {
	position: relative;
	box-sizing: border-box;
	min-height: 100%;
	margin-inline: auto;
	padding: 80px 0 10px;
	opacity: 0;
	transform: translateY(-6px);
	transition:
		opacity 0.24s ease-out,
		transform 0.24s ease-out;
}

.sainou-site-header.is-menu-open .sainou-site-header__menu-panel {
	opacity: 1;
	pointer-events: auto;
	transition-duration: 0.24s;
}

.sainou-site-header.is-menu-open .sainou-site-header__menu-panel-inner {
	opacity: 1;
	transform: translateY(0);
}

/*
 * 閉じる時は位置を戻さず、短いフェードだけでスッと消します。
 */
.sainou-site-header.is-menu-closing .sainou-site-header__menu-panel-inner {
	opacity: 0;
	transform: translateY(0);
	transition-duration: 0.16s;
}

/*
 * 開くボタンと閉じるボタンで同じヘッダー幅制約とnavigation-slotを共有する。
 * 閉じるボタンはmenu-panel-innerのアニメーションから独立。
 */
.sainou-site-header__menu-close-header {
	position: sticky;
	z-index: 1002;
	top: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--sainou-header-max-width);
	height: 0;
	margin-inline: auto;
	pointer-events: none;
}

.sainou-site-header__navigation-slot--close {
	pointer-events: auto;
}

.sainou-site-header__menu-close {
	display: grid;
	box-sizing: border-box;
	width: 50px;
	height: 44px;
	margin: 0;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
	pointer-events: auto;
	place-items: center;
	appearance: none;
}

.sainou-site-header__menu-close span {
	position: relative;
	width: 22px;
	height: 22px;
}

.sainou-site-header__menu-close span::before,
.sainou-site-header__menu-close span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 1px;
	background: currentColor;
}

.sainou-site-header__menu-close span::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.sainou-site-header__menu-close span::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.sainou-site-header__menu-missing {
	margin: 0;
	padding: 25px;
	text-align: center;
}



@container sainou-header-viewport (width < 800px) {
	.sainou-site-header__menu-panel-inner {
		width: 100%;
		padding-top: 80px;
		padding-bottom: 20px;
	}
}


/* ブロックエディター／パターン編集画面 */
.editor-styles-wrapper .sainou-site-header,
.acf-block-preview .sainou-site-header {
	position: relative;
	inset: auto;
	width: 100%;
	pointer-events: auto;
}

.editor-styles-wrapper .sainou-site-header__panel,
.acf-block-preview .sainou-site-header__panel {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	pointer-events: auto;
}

.acf-block-preview .sainou-site-header {
	position: relative;
	z-index: 1;
	transform: none !important;
}

@container sainou-header-viewport (720px <= width < 1220px) {
	.sainou-site-header__panel {
		width: min(var(--sainou-header-panel-width), calc(100cqi - 140px));
	}
}

/*
 * 950px以上では690px幅のパネルを確保できるため、
 * contactは1220px以上と同じ絶対配置をそのまま使用する。
 * 720px〜950px未満だけ、狭い幅向けの可変配置へ切り替える。
 */
@container sainou-header-viewport (720px <= width < 950px) {
	.sainou-site-header__contact {
		position: absolute;
		top: 49px;
		right: clamp(8px, calc(46.36% - 260.9px), 59px);
		left: clamp(188px, calc(29.1% + 19.2px), 220px);
		display: flex;
		min-width: 0;
		align-items: flex-start;
		justify-content: space-between;
		gap: 8px;
	}

	.sainou-site-header__address,
	.sainou-site-header__phone {
		position: static;
		flex: 0 0 auto;
	}

	.sainou-site-header__address {
		width: auto;
		margin-top: -1px;
		letter-spacing: clamp(0px, calc(0.763636cqi - 5.498182px), 0.06em);
	}

	.sainou-site-header__phone {
		letter-spacing: clamp(0px, calc(1.227273cqi - 8.836364px), 0.075em);
	}

	.sainou-site-header__phone-number {
		margin-left: clamp(2px, calc(3.636364cqi - 24.181818px), 6px);
	}
}

@container sainou-header-viewport (width < 950px) {
	.sainou-site-header[data-front-page="true"].is-over-hero
		.sainou-site-header__contact {
		display: none;
	}
}

@container sainou-header-viewport (width < 720px) {
	.sainou-site-header {
		--sainou-header-height: 115px;
	}

	.sainou-site-header__panel {
		width: 230px;
		height: 115px;
		border-radius: 0 0 60px 0;
	}

	.sainou-site-header__logo,
	.sainou-site-header__logo-heading {
		top: 25px;
		left: 35px;
		width: 140px;
		height: 66px;
	}

	.sainou-site-header[data-front-page="true"].is-over-hero
		.sainou-site-header__logo-heading {
		top: 25px;
	}

	.sainou-site-header__logo-svg,
	.sainou-site-header__logo-svg svg {
		width: 140px;
		height: 66px;
	}

	.sainou-site-header__contact {
		display: none;
	}

	.sainou-site-header__navigation-slot {
		top: 25px;
		right: 25px;
	}


	.sainou-site-header[data-front-page="true"].is-over-hero
		.sainou-site-header__menu-toggle,
	.sainou-site-header[data-front-page="true"].is-over-hero
		.sainou-site-header__menu-toggle:hover {
		color: #fff;
		border: 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sainou-site-header,
	.sainou-site-header__panel,
	.sainou-site-header__menu-panel,
	.sainou-site-header__menu-panel-inner {
		transition-duration: 0.01ms;
	}
}

/*
 * PCでメニューを開いた際に縦スクロールバーが消えても、
 * viewport幅が変わらないようスクロールバー領域を常時確保する。
 */
html {
	scrollbar-gutter: stable;
}

/*
 * メニュー表示中はルート側の予約スクロールバー領域を解除する。
 * menu-panel 自身が縦スクロールを担当するため、stable gutter を残すと
 * ブラウザ右端の予約領域の内側にもう1本スクロールバーが見えてしまう。
 */
html:has(body.sainou-site-menu-open) {
	scrollbar-gutter: auto;
}

/* メニュー表示中は背景ページのスクロールを固定する。 */
html:has(body.sainou-site-menu-open),
body.sainou-site-menu-open {
	overflow: hidden;
	overscroll-behavior: none;
}

body.sainou-site-menu-open {
	padding-right: var(--sainou-menu-scrollbar-width, 0px);
}

/*
 * メニュー表示中は header 自身の transform / will-change を解除し、
 * 内部の position: fixed メニューパネルを viewport 基準へ戻す。
 * これにより、ワイド画面でもメニュー用スクロールバーが
 * ブラウザ右端に表示され、内側に二重に見える状態を防ぐ。
 */
body.sainou-site-menu-open .sainou-site-header {
	transform: none;
	will-change: auto;
}

/* メニュー本体は必要に応じて縦スクロール可能。 */
body.sainou-site-menu-open .sainou-site-header__menu-panel {
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}