@charset "UTF-8";

/* 第5-F：現行21ページ共通 社名入りヘッダー＋追従ナビ */
.phase5f-sticky-page .header-inner {
	display: grid;
	grid-template-columns: 220px minmax(300px, 350px) auto;
	align-items: center;
	justify-content: space-between;
	width: calc(100% - 64px);
	max-width: 1120px;
	min-height: 104px;
	margin: 0 auto;
	padding: 14px 0;
	column-gap: clamp(18px, 2.2vw, 32px);
}

.phase5f-sticky-page #header h1 {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
}

.phase5f-sticky-page #header h1 a {
	display: block;
	width: auto;
	height: auto;
	background: none;
	text-indent: 0;
	overflow: visible;
}

.phase5f-sticky-page #header h1 img {
	display: block;
	width: 220px;
	max-width: 100%;
	height: auto;
	margin: 0;
}

.phase5f-sticky-page .header-company-name {
	min-width: 0;
	text-align: center;
}

.phase5f-sticky-page .header-company-name-image {
	display: block;
	width: 350px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.phase5f-sticky-page .header-contact {
	margin-left: 0;
	gap: 18px;
}

.phase5f-sticky-page .mobile-nav-controls {
	display: none;
}

.phase5f-sticky-page #navigation {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #ffffff;
	border-bottom: 1px solid #d5e1d7;
	box-shadow: 0 3px 10px rgba(28, 72, 40, .08);
}

.phase5f-sticky-page #sidebar {
	position: sticky;
	top: 68px;
	z-index: 20;
	align-self: start;
	max-height: calc(100vh - 84px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #ffffff;
}

.phase5f-sticky-page #content [id] {
	scroll-margin-top: 72px;
}

@media screen and (max-width: 1023px) {
	.phase5f-sticky-page .header-inner {
		grid-template-columns: auto minmax(0, 1fr);
		width: 100%;
		min-height: 86px;
		padding: 12px 20px;
		column-gap: 22px;
	}

	.phase5f-sticky-page #header h1 img {
		width: 160px;
		margin: 0;
	}

	.phase5f-sticky-page .header-company-name {
		justify-self: center;
		width: 100%;
		max-width: 360px;
	}

	.phase5f-sticky-page .header-company-name-image {
		width: 100%;
	}

	.phase5f-sticky-page #navigation {
		position: static;
		display: contents;
		padding: 0;
		border: 0;
		box-shadow: none;
	}

	.phase5f-sticky-page .mobile-nav-controls {
		display: flex;
		position: sticky;
		top: 0;
		z-index: 100;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		max-width: none;
		min-height: 56px;
		margin: 0 auto;
		padding: 0 20px;
		gap: 10px;
		background: #ffffff;
		border-bottom: 1px solid #d5e1d7;
		box-shadow: 0 3px 10px rgba(28, 72, 40, .08);
	}

	.phase5f-sticky-page #global-nav-list {
		position: static;
		z-index: auto;
		background: #ffffff;
		scroll-margin-top: 56px;
	}

	.phase5f-sticky-page .mobile-nav-controls .menu-toggle {
		margin-left: 0;
	}

	.phase5f-sticky-page #sidebar {
		top: 72px;
		max-height: calc(100vh - 88px);
	}

	.phase5f-sticky-page #content [id] {
		scroll-margin-top: 76px;
	}
}

@media screen and (max-width: 768px) {
	.phase5f-sticky-page .header-inner {
		grid-template-columns: 1fr;
		justify-items: center;
		min-height: 0;
		padding: 10px 16px 12px;
		row-gap: 8px;
	}

	.phase5f-sticky-page #header h1 img {
		width: 150px;
	}

	.phase5f-sticky-page .header-company-name {
		max-width: 280px;
	}

	.phase5f-sticky-page #navigation {
		padding: 0;
	}

	.phase5f-sticky-page .mobile-nav-controls {
		min-height: 52px;
		padding: 0 10px;
		gap: 8px;
	}

	.phase5f-sticky-page #global-nav-list {
		scroll-margin-top: 52px;
	}

	.phase5f-sticky-page .mobile-nav-controls .menu-toggle,
	.phase5f-sticky-page .mobile-nav-controls .header-mobile-contact {
		height: 44px;
		min-height: 44px;
	}

	.phase5f-sticky-page:not(.index-page) #main {
		margin-top: 8px;
	}

	.phase5f-sticky-page #sidebar {
		display: contents;
	}

	.phase5f-sticky-page .service-menu-toggle {
		position: sticky;
		top: 58px;
		z-index: 90;
		min-height: 48px;
		margin: 0 0 32px;
		padding: 9px 14px;
		box-shadow: 0 3px 8px rgba(28, 72, 40, .10);
	}

	.phase5f-sticky-page .service-menu-toggle[aria-expanded="true"] {
		margin-bottom: 0;
	}

	.phase5f-sticky-page .service-menu-panel {
		position: static;
		margin: 0 0 32px;
		scroll-margin-top: 106px;
	}

	.phase5f-sticky-page #content [id] {
		scroll-margin-top: 112px;
	}

	.phase5f-sticky-page.contact-page #contact-form {
		scroll-margin-top: 116px;
	}
}

@media screen and (max-width: 340px) {
	.phase5f-sticky-page .header-company-name {
		max-width: 260px;
	}

	.phase5f-sticky-page #header h1 img {
		width: 140px;
	}
}