body:not(.no-scroll) {
	@media (min-width: 768px) {
		#header.is-overlaying {
			/* mix-blend-mode: exclusion; */
			--color-smiling-park-logo: var(--color-white);

			.icon-hamburger {
				--icon-hamburger-color: var(--color-white);
			}
		}
	}
}

main {
	width: 100%;
	overflow-x: clip;

	/** 高齢者事業 */
	[data-term="elderly-support"] {
		--color-scheme-main: var(--color-elderly-support-main);
		--color-scheme-light: var(--color-elderly-support-light);
	}

	/** 子育て事業 */
	[data-term="child-support"] {
		--color-scheme-main: var(--color-child-support-main);
		--color-scheme-light: var(--color-child-support-light);
	}

	/** 障がい者事業 */
	[data-term="disability-support"] {
		--color-scheme-main: var(--color-disability-support-main);
		--color-scheme-light: var(--color-disability-support-light);
	}

	/** 収益事業 */
	[data-term="revenue-business"] {
		--color-scheme-main: var(--color-revenue-business-main);
		--color-scheme-light: var(--color-revenue-business-light);
	}

	/** 公益事業 */
	[data-term="public-benefit"] {
		--color-scheme-main: var(--color-public-benefit-main);
		--color-scheme-light: var(--color-public-benefit-light);
	}
}


/* ============================
//  coming soon
// ============================ */
.coming-soon-notice {
	&.size-fluid-clamp {
		--size-min: 18px;
		--size-max: 58px;
	}

	height: 100%;
	margin-block: 2em;
	padding-inline: var(--container-padding);
	font-weight: var(--font-weight--Medium);
	font-size: var(--size-fluid-clamp);
	text-align: center;
	color: var(--color-gray);
}


/* ============================
//  Our Business
// ============================ */
.section-hero-area {
	max-width: 1920px;
	margin-inline: auto;

	position: relative;
	margin-top: 0px;
	transition: margin-top 0.64s var(--ease);

	@media (min-width: 768px) {
		margin-top: calc(var(--header--height) * -1);
		border-image: linear-gradient(#626262) fill 0 // 0 100vw;
	}

	/** video設定がされていない時 */
	&:not(:has(.hero-background)) .hero-content-title {
		background-color: #626262;
	}

	.hero-content {
		position: relative;
		z-index: 1;
		width: 100%;
		height: auto;

		@media (min-width: 768px) {
			aspect-ratio: 16 / 9;
			display: grid;
			place-content: center;
		}

		.hero-content-title {
			width: 100%;
			height: auto;
			aspect-ratio: 16 / 9;
			display: grid;
			place-content: center;
			color: var(--color-white);

			@media (min-width: 768px) {
				aspect-ratio: initial;
			}

			&.svg-combination {
				.svg-combination__heading.size-fluid-clamp {
					--size-min: 38px;
					--size-max: 103px;
					height: var(--size-fluid-clamp);
				}

				.svg-combination__subheading.size-fluid-clamp {
					--size-min: 14px;
					--size-max: 20px;
					display: block;
					text-align: center;
					font-size: var(--size-fluid-clamp);
					font-weight: var(--font-weight--Medium);
					line-height: 1.2;
					letter-spacing: 0.01;
				}
			}
		}

		.hero-content-introduction {
			margin-block: 40px;
			padding-inline: var(--container-padding);
			font-size: 14px;
			font-weight: var(--font-weight--Regular);
			line-height: 20px;
			letter-spacing: 0.01;
			text-align: center;

			@media (min-width: 768px) {
				margin-top: 55px;
				margin-bottom: 0px;
				font-size: 16px;
				line-height: 30px;
				color: var(--color-white);
			}
		}
	}

	.hero-background {
		position: absolute;
		z-index: 0;
		inset: 0;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
}


/* ============================
//  Location Support-Type Group
// ============================ */
.location-support-type-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	place-content: center;
	place-items: center;
	gap: 60px 40px;
	padding-inline: var(--container-padding);
	position: relative;

	@media (min-width: 768px) {
		grid-template-columns: minmax(min-content, 180px) auto;
		grid-template-areas: "nav content";
		align-items: start;
		max-width: calc(180px + 260px * 3 + 20px * 3 + var(--container-padding) * 2);
		margin-inline: auto;
		padding-block: 100px;
	}
}

.support-type-nav {
	display: grid;
	row-gap: 10px;
	width: 100%;
	max-width: 320px;

	@media (min-width: 768px) {
		grid-area: nav;
		position: sticky;
		top: calc(var(--header--height) + var(--global--admin-bar--height));
		max-width: 160px;
	}

	.support-type-nav-item {
		font-size: 16px;
		font-weight: var(--font-weight--Bold);
		line-height: 19px;
		letter-spacing: 0.001;
		color: var(--color-white);

		@media (min-width: 768px) {
			font-weight: var(--font-weight--Medium);
			color: var(--color-text);
		}
	}

	.support-type-nav-link {
		display: grid;
		place-content: center;
		width: 100%;
		height: 50px;
		border-radius: 10px;
		background-color: var(--color-scheme-main);
		transition: background-color .64s var(--ease);

		&:hover {
			background-color: var(--color-scheme-light);
		}

		@media (min-width: 768px) {
			justify-content: start;
			background-color: initial;
			transition: color .64s var(--ease);

			&:hover {
				background-color: initial;
				color: var(--color-scheme-main);
			}
		}
	}
}

.support-type-content {
	width: 100%;
	max-width: 420px;

	@media (min-width: 768px) {
		grid-area: content;
		max-width: 820px;
	}
}

.support-type-section {
	position: relative;
	padding-bottom: 60px;

	&::before {
		content: "";
		display: block;
		width: 100vw;
		height: 100%;
		position: absolute;
		z-index: -2;
		top: 0;
		left: calc(50% - 50vw);
		background-color: var(--color-scheme-light);
		mask-image: url("../../images/standard/mask-gridPattern.svg");
		mask-size: 20px;

		@media (min-width: 768px) {
			left: calc(50% - 50vw - 210px / 2);
			mask-size: 27px;
		}
	}

	&::after {
		content: "";
		display: block;
		width: 300px;
		height: auto;
		aspect-ratio: 1 / 1;
		position: absolute;
		top: 0;
		right: -160px;
		z-index: -1;
		border-radius: calc(infinity * 1px);
		background-color: var(--color-scheme-main);
		opacity: 0;
	}

	@media (min-width: 768px) {
		&:first-child::before {
			top: -100px;
			height: calc(100% + 100px);
		}

		&:last-child::before {
			height: calc(100% + 100px);
		}

		&::after {
			opacity: 1;
		}
	}

	.support-type-section-title {
		&.size-fluid-clamp {
			--size-min: 18px;
			--size-max: 32px;
			font-size: var(--size-fluid-clamp);
			font-weight: var(--font-weight--Medium);
			line-height: 1.2;
			letter-spacing: 0.01;
		}

		.first-letter::first-letter {
			color: var(--color-scheme-main);
		}

		padding-block: 40px;
		text-align: center;

		@media (min-width: 768px) {
			display: grid;
			grid-template-columns: minmax(6em, max-content) minmax(0, 100px);
			align-items: center;
			gap: 1em;
			text-align: left;

			&::after {
				content: "";
				width: 100%;
				height: 2px;
				background-color: var(--color-scheme-main);
			}
		}
	}
}

.location-posts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: 90px;
	row-gap: 10px;

	@media (min-width: 768px) {
		--column-width: 260px;
		--column-gap: 20px;
		--columns: 2;
		display: grid;
		grid-template-columns: repeat(auto-fill, var(--column-width));
		grid-auto-rows: 260px;
		gap: var(--column-gap);
		width: calc(260px * var(--columns) + var(--column-gap) * (var(--columns) - 1));
	}

	@media (min-width: 1080px) {
		--columns: 3;
	}

	.location-posts-item {
		.location-post-link {
			display: flex;
			width: auto;
			height: 100%;
			border-radius: 10px;
			background-color: var(--color-white);
			overflow: hidden;
			position: relative;
			transition: opacity .64s var(--ease);
			--thumbnail-hover: 0;

			&:hover {
				--thumbnail-hover: 1;
			}

			@media (min-width: 768px) {
				display: block;
			}
		}

		.location-post-thumbnail {
			flex-shrink: 0;
			display: grid;
			grid-template-areas: "thumbnail";
			width: auto;
			height: 100%;
			aspect-ratio: 1 / 1;
			position: relative;
			z-index: 1;

			&:not(:has(.thumbnail-image)) {
				background-color: var(--color-gray);

				&::before {
					content: "coming soon";
					display: grid;
					place-content: center;
					width: 100%;
					height: auto;
					aspect-ratio: 1 / 1;
					font-size: 12px;
					color: var(--color-white);

					@media (min-width: 768px) {
						max-width: var(--column-width);
						aspect-ratio: 260 / 203;
						font-size: 16px;
					}
				}
			}

			.thumbnail-image {
				grid-area: thumbnail;
				position: relative;
				transition: opacity .64s var(--ease);

				&.default {
					z-index: 1;
				}

				&.hover {
					z-index: 2;
					opacity: var(--thumbnail-hover);
				}
			}
		}

		.location-post-title {
			align-self: center;
			min-width: 0;
			padding: 20px;
			padding-left: 10px;
			font-size: 13px;
			font-weight: var(--font-weight--Medium);
			line-height: 16px;
			letter-spacing: 0.005;
			white-space: normal;
			word-break: keep-all;
			overflow-wrap: break-word;

			@media (min-width: 768px) {
				position: absolute;
				z-index: 2;
				bottom: 0;
				width: calc(100% - 10px * 2);
				height: 97px;
				margin: 10px;
				padding: 45px 13px 15px;
				border-radius: 10px;
				overflow: hidden;
				font-size: 14px;
				line-height: 17px;
				letter-spacing: 0.01;

				&::before {
					content: "";
					position: absolute;
					top: 15px;
					left: 0;
					z-index: -1;
					width: 100%;
					height: 125%;
					background-color: color-mix(in srgb, var(--color-white) 90%, transparent);
					border-radius: 10px;
					transform: skewY(-7deg);
				}
			}
		}

		.icon-animated-arrow-outward {
			--circle-color: var(--color-scheme-main);
			position: absolute;
			z-index: 3;
			top: 5px;
			right: 5px;

			@media (min-width: 768px) {
				--circle-size: 25px;
				top: 160px;
				right: 15px;
			}
		}
	}
}





.shape {
	width: 240px;
	height: 97px;
	background-color: #ffb5b5;
	border-radius: 10px;
	/* 全体の角丸 */
	/* transform: perspective(100px) rotateY(-2deg) scaleX(1.05);*/
	transform: skewY(-7deg);
}