:root {
	--site-navigation-max-width: 920px;

	&:has(.header) {
		--header-fluid-value: calc((100vw - 375px) * 12 / 905 + 70px);
		--header--height: clamp(70px, var(--header-fluid-value), 82px);
	}
}

/* ============================
// header
// ============================ */
#header {
	--color-header-background: var(--color-background);
	--color-header-text: var(--color-text);
	--color-smiling-park-logo: var(--color-header-text);

	background-color: var(--color-header-background);
	color: var(--color-header-text);
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
	width: 100%;
	padding: 20px;
	transition: background-color 0.64s var(--ease), box-shadow 0.64s var(--ease);

	@media (min-width: 768px) {
		background-color: transparent;
		box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0);
	}

	.header__top-bar {
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 20;

		&.size-fluid-clamp {
			--size-min: 30px;
			--size-max: 42px;
		}

		.header__sitetop-link {
			width: auto;
			height: clamp(32px, var(--size-fluid-value), var(--size-max));
			aspect-ratio: 640 / 150;
			transition: translate 0.64s var(--ease), opacity 0.64s var(--ease);

			&:hover {
				--color-smiling-park-logo: initial;
			}

			.no-scroll & {
				translate: -100dvw;
				opacity: 0;
			}
		}

		.header__menu-toggle {
			flex-shrink: 0;

			&.icon-hamburger {
				--icon-hamburger-size: clamp(var(--size-min), var(--size-fluid-value), var(--size-max));
			}
		}
	}

	.header__nav-panel {
		position: fixed;
		z-index: 10;
		top: var(--global--admin-bar--height);
		left: 0;
		width: 100dvw;
		height: calc(100dvh - var(--global--admin-bar--height));
		padding-inline: var(--container-padding);
		background-color: var(--color-header-background);
		align-content: center;
		overflow-y: auto;
		scrollbar-gutter: stable;

		transition: translate 0.64s var(--ease);
		translate: 100%;

		.no-scroll & {
			translate: 0%;
		}
	}

	.header__nav-content--container {
		container-type: inline-size;
		container-name: header__nav-content;
		max-width: var(--site-navigation-max-width);
		margin-inline: auto;
	}

	.header__nav-content {
		max-width: 420px;
		margin-inline: auto;

		@container header__nav-content (min-width: 730px) {
			width: 85vw;
			max-width: 100%;
		}
	}

	.header__site-logo {
		display: grid;
		justify-content: center;

		&.size-fluid-clamp {
			--size-min: 40px;
			--size-max: 60px;
			margin-block: var(--size-fluid-clamp);
		}

		.site-navigation-logo:hover {
			--color-smiling-park-logo: initial;
		}
	}

	.header__navigation {
		.button-arrow-rotate {
			--color-background: var(--color-header-text);
			--color-text: var(--color-white);
		}
	}
}


/* ============================
// footer
// ============================ */
#footer {
	--color-footer-background: var(--color-text);
	--color-footer-text: var(--color-white);
	--color-smiling-park-logo: var(--color-footer-text);
	--column-contact-w: 210px;
	--footer-container-max-width: calc(var(--column-contact-w) + 70px + 870px);

	padding-inline: var(--container-padding);
	background-color: var(--color-footer-background);
	color: var(--color-footer-text);

	.footer--container {
		container-type: inline-size;
		container-name: footer;
		width: 100%;
		max-width: var(--footer-container-max-width);
		margin-inline: auto;
	}

	.footer__site-logo {
		display: grid;
		justify-content: center;

		&.size-fluid-clamp {
			--size-min: 40px;
			--size-max: 60px;
			margin-block: var(--size-fluid-clamp);
		}

		.site-navigation-logo:hover {
			--color-smiling-park-logo: initial;
		}
	}

	.footer__nav-contact {
		display: grid;
		width: 100%;
		max-width: 392px;
		margin-inline: auto;

		@container footer (min-width: 680px) {
			max-width: 760px;
		}


		@container footer (min-width: 1000px) {
			grid-template-columns: 240px minmax(0, 870px);
			justify-content: space-between;
			column-gap: 40px;
			width: 90vw;
			max-width: 100%;

			.footer__contact {
				margin-right: 30px;
			}
		}
	}

	.footer__contact {
		width: var(--column-contact-w);
		margin-bottom: 50px;
		margin-inline: auto;
		font-size: 14px;
		font-weight: var(--font-weight--Medium);
		line-height: 17px;
		text-align: center;

		@container footer (min-width: 1000px) {
			text-align: unset;
		}

		.contact-info {
			display: grid;
			row-gap: 0.8em;
			margin-bottom: 1.6em;

			.contact-note-label {}

			.contact-info-tel {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 18px;
				font-weight: var(--font-weight--Medium);
				line-height: 22px;
				--phone-size: 25px;

				@container footer (min-width: 680px) {
					justify-content: start;
					font-size: 24px;
					line-height: 29px;
					--phone-size: 27px;
				}

				&::before {
					content: "";
					display: block;
					width: var(--phone-size);
					aspect-ratio: 27 / 23;
					margin-top: 2px;
					margin-right: 0.15em;
					background-color: var(--color-footer-text);
					clip-path: url(#clippath-phone);
				}
			}
		}

		.contact-note {
			.contact-note-link {
				display: inline-block;
				border-bottom: 1px solid var(--color-footer-text);
				transition: opacity .21s var(--ease);

				&:hover {
					opacity: 0.68;
				}
			}
		}
	}

	.footer__navigation {
		.button-arrow-rotate {
			--color-background: var(--color-footer-text);
			--color-text: var(--color-footer-background);
		}
	}

	.footer__copyright {
		font-size: 10px;
		font-weight: var(--font-weight--Medium);
		line-height: 12px;
		text-align: center;

		&.size-fluid-clamp {
			--size-min: 30px;
			--size-max: 60px;
			margin-block-start: 60px;
			margin-block-end: var(--size-inverse-fluid-clamp);
		}
	}
}


/* ============================
// site-navigation
// ============================ */

.site-navigation--container {
	container-type: inline-size;
	container-name: site-navigation;
}

.site-navigation-list--container {
	container-type: inline-size;
	container-name: site-navigation-list;
}

.site-navigation {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 98px;

	@container site-navigation (min-width: 680px) {
		grid-template-columns: minmax(0, 510px) 320px;
		justify-content: space-between;
		column-gap: 30px;
		max-width: var(--site-navigation-max-width);
	}

	.site-navigation-list {
		--column-w: 170px;
		--sitetop-row: 1;

		display: grid;
		grid-template-columns: min-content;
		grid-auto-rows: min-content;
		justify-content: center;
		column-gap: 40px;
		row-gap: 10px;

		width: 100%;
		max-width: calc(var(--column-w) * 3);

		@container site-navigation-list (min-width: 285px) {
			grid-template-columns: min-content min-content;
		}

		@container site-navigation-list (min-width: 460px) {
			grid-auto-flow: column;
			grid-template-columns: repeat(3, minmax(min-content, var(--column-w)));
			grid-template-rows: repeat(var(--column3-rows), auto);
			column-gap: 0px;
			margin-inline: auto;
		}

		.navigation-item {
			font-size: 0;
			line-height: 0;
			align-content: center;

			&.animate-intro {
				@container site-navigation-list (min-width: 460px) {
					grid-row: 2 / -1;
					align-self: start;
				}
			}

			&.youtubu-com {}
		}

		.hover-rotate-text {
			font-size: 14px;
			font-weight: var(--font-weight--Medium);
			line-height: 17px;
			padding: 5px;

			.about & {
				--rotate-text-shadow: var(--color-about-main);
			}

			.elderly-support & {
				--rotate-text-shadow: var(--color-elderly-support-main);
			}

			.child-support & {
				--rotate-text-shadow: var(--color-child-support-main);
			}

			.disability-support & {
				--rotate-text-shadow: var(--color-disability-support-main);
			}

			.revenue-business & {
				--rotate-text-shadow: var(--color-revenue-business-main);
			}

			.public-benefit & {
				--rotate-text-shadow: var(--color-public-benefit-main);
			}

			.news & {
				--rotate-text-shadow: var(--color-news-main);
			}

			.recruitment & {
				--rotate-text-shadow: var(--color-recruitment-main);
			}

			.ict-dx & {
				--rotate-text-shadow: var(--color-ict-dx-main);
			}
		}
	}

	.site-special-links {
		--row-gap: 10px;
		--navigation-item-h: 50px;

		display: flex;
		flex-direction: column;
		row-gap: var(--row-gap);
		width: 100%;
		max-width: 320px;
		margin-inline: auto;

		@container site-navigation (min-width: 810px) {
			--row-gap: 25px;
			--navigation-item-h: 60px;
		}

		.navigation-item {
			font-size: 14px;
			font-weight: var(--font-weight--Bold);
			line-height: 17px;
		}

		.button-arrow-rotate.hover-rotate-text {
			--icon-animated-arrow-outward-size: clamp(15px, 4.6875cqw, 25px);
			min-height: var(--navigation-item-h);
			padding-inline: calc(15px + 1em);

			.icon-animated-arrow-outward {
				--circle-size: var(--icon-animated-arrow-outward-size);
			}
		}
	}
}

.site-navigation-logo {
	display: block;
	width: clamp(137px, 36.53vw, 260px);
}



/* ============================
// icon-hamburger
// ============================ */
.icon-hamburger {
	--icon-hamburger-size: 60px;
	--icon-hamburger-color: currentcolor;

	display: grid;
	place-items: center;

	width: var(--icon-hamburger-size);
	height: auto;
	aspect-ratio: 1 / 1;
	cursor: pointer;

	div {
		position: relative;
		width: 50%;
		height: auto;
		aspect-ratio: 15 / 14;
	}

	span {
		position: absolute;
		background-color: var(--icon-hamburger-color);
		border-radius: calc(infinity * 1px);
		height: 14.28%;
		transition: all 0.3s ease-out;

		&:nth-of-type(1) {
			top: 0%;
			width: 100%;

			.active & {
				top: 50%;
				left: 50%;
				width: 130%;
				transform: translate(-50%, -50%) rotate(-45deg);
			}
		}

		&:nth-of-type(2) {
			top: 50%;
			transform: translateY(-50%);
			width: 100%;

			.active & {
				opacity: 0;
			}
		}

		&:nth-of-type(3) {
			bottom: 0%;
			width: 62.5%;

			.active & {
				top: 50%;
				left: 50%;
				width: 130%;
				transform: translate(-50%, -50%) rotate(45deg);
			}
		}
	}
}