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

	> :not(.section-staff-introduction, .diver-animation-marquee) {
		width: 100%;
		max-width: 1280px;
		margin-inline: auto;
	}

	/** 高齢者事業 */
	&[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);
}


/* ============================
//  INSPIRE THE FUTURE
// ============================ */
.section-hero-area {
	position: relative;
	margin-top: 0px;
	transition: margin-top 0.64s var(--ease);

	max-width: 1920px !important;
	/** 1280pxから上書き */

	@media (min-width: 768px) {
		margin-top: calc(var(--header--height) * -1);
	}

	.hero-title {
		/** &.visually-hidden <h1>要素非表示 */
	}

	.hero-content {
		position: absolute;
		z-index: 1;
		inset: 0;
		top: 15%;
		margin-inline: auto;
		width: calc(100% * 1280 / 1920);
		height: auto;

		/** HTML内svgで指定済み */
		.hero-content-image {
			&.no-image {}
		}

		.hero-content-title {
			translate: 0 100%;
			opacity: 0;
			transition: translate 0.64s var(--ease), opacity 0.64s var(--ease);

			@media (min-width: 768px) {
				translate: 0;
				opacity: 1;
			}
		}
	}

	.hero-background {
		position: relative;
		z-index: 0;
		width: 100%;
		height: auto;
		background-color: var(--color-background);
	}

	.hero-title--sp {
		position: relative;
		z-index: -1;

		min-height: 42px;
		align-content: center;
		background-color: var(--color-text);
		color: var(--color-white);
		text-align: center;

		font-size: 14px;
		font-weight: var(--font-weight--Medium);
		line-height: 17px;

		transition: translate 0.64s var(--ease), opacity 0.64s var(--ease);

		@media (min-width: 768px) {
			translate: 0 -100%;
			opacity: 0;
		}
	}
}


/* ============================
//  Title svg-combination
// ============================ */
.section-title--svg-combination {
	&.size-fluid-clamp {
		--size-min: 24px;
		--size-max: 84px;
		margin-top: clamp(48px, var(--size-fluid-value), var(--size-max));
		margin-bottom: var(--size-fluid-clamp);
	}

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

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


/* ============================
//  Staff Introduction
// ============================ */
.section-staff-introduction {
	padding-block: 1px;
	padding-inline: var(--container-padding);
	position: relative;

	&.size-fluid-clamp {
		/** --gif-background-image */
		--size-min: 80.5px;
		--size-max: 186.5px;
	}

	&::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0;
		z-index: -1;
		background-image: var(--gif-background-image);
		background-size: var(--size-fluid-clamp);
		opacity: 0.2;
	}

	.section-title--svg-combination {}

	.youtube-player {
		width: min(80vw, 800px);
		margin-inline: auto;

		&:last-child {
			margin-bottom: 24px;
		}
	}

	.button-arrow-rotate {
		--color-background: var(--color-scheme-main);
		--color-text: var(--color-white);

		&.size-fluid-clamp {
			--size-min: 50px;
			--size-max: 70px;
		}

		max-width: 380px;
		min-height: var(--size-fluid-clamp);
		margin-block: var(--size-fluid-clamp);
		margin-inline: auto;
		padding-block: initial;
		padding-inline: min(2.5vw, 2em);
		text-align: center;

		@media (min-width: 600px) {
			width: max(380px, 60vw);
			max-width: 700px;
		}

		.icon-animated-arrow-outward {
			--circle-size: clamp(15px, 4.6875cqw, 25px);
		}

		.rotate-text.size-fluid-clamp {
			--size-min: 14px;
			--size-max: 18px;
			font-size: clamp(10px, var(--size-fluid-value), var(--size-max));
			font-weight: var(--font-weight--Bold);
			line-height: 1.2;

			max-width: 20em;
			white-space: normal;
			word-break: keep-all;
			overflow-wrap: break-word;
		}
	}
}


/* ============================
//  DiverAnimation-Marquee
// ============================ */
.diver-animation-marquee {
	/* width: var(--marquee-width); */

	.animation-text-marquee {
		&.size-fluid-clamp {
			--size-min: 62px;
			--size-max: 180px;
		}

		width: auto;
		height: var(--size-fluid-clamp);
		aspect-ratio: 401.04 / 72.89;
		color: var(--color-scheme-main);
	}
}


/* ============================
//  Location Introduction
// ============================ */
.section-location-introduction {
	position: relative;
	z-index: 0;
	padding-block: 2px;

	&.size-fluid-clamp {
		--size-min: 350px;
		--size-max: 712px;
	}

	@media (min-width: 768px) {
		height: calc(var(--size-fluid-clamp) * 2);
	}

	.location-introduction-main {
		position: relative;
		z-index: 0;
		top: 0;
		min-height: var(--size-fluid-clamp);
		margin-block: calc(var(--size-fluid-clamp) * 0.0748);
		align-content: center;

		@media (min-width: 768px) {
			--margin-block: calc((100vh - var(--size-fluid-clamp)) / 2);
			position: sticky;
			margin-block: var(--margin-block);
			top: calc(var(--margin-block) + var(--global--admin-bar--height));
		}
	}

	.location-introduction-content {
		position: relative;
		z-index: 1;
		width: var(--size-fluid-clamp);
		max-width: calc(420px + var(--container-padding) * 2);
		text-align: center;
		margin-inline: auto;
		padding-inline: var(--container-padding);

		.location-introduction-title {
			&.size-fluid-clamp {
				--size-min: 18px;
				--size-max: 32px;
				font-size: var(--size-fluid-clamp);
				font-weight: var(--font-weight--Bold);
				line-height: 1.6;
				margin-bottom: 1.8em;
			}
		}

		.location-introduction-text {
			&.size-fluid-clamp {
				--size-min: 14px;
				--size-max: 16px;
				font-size: var(--size-fluid-clamp);
				font-weight: var(--font-weight--Regular);
				line-height: 1.8;
			}
		}
	}

	.location-introduction-background {
		position: absolute;
		z-index: -1;

		&.animation-text-circular {
			top: calc(50% - var(--size-fluid-clamp) / 2);
			left: calc(50% - var(--size-fluid-clamp) / 2);
			/* translate: -50% -50%; */
			width: var(--size-fluid-clamp);
			height: auto;
			aspect-ratio: 1096 / 1097;
			animation: animation-text-circular 20s linear infinite;
		}

		&.background-gridPattern {
			&.size-fluid-clamp {
				--size-min: 20px;
				--size-max: 27px;
			}

			top: 0;
			left: calc(50% - 50vw);
			width: 100vw;
			height: 100%;
			background-color: var(--color-scheme-light);
			mask-image: url("../../images/standard/mask-gridPattern.svg");
			mask-size: var(--size-fluid-clamp);
		}
	}

	.location-introduction-visuals {
		/* width: var(--marquee-width); */
		position: relative;
		z-index: 0;

		@media (min-width: 768px) {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
		}

		.visual-gallery__list {
			display: flex;
			gap: 10px;
			width: max-content;
			padding-right: 10px;

			@media (min-width: 768px) {
				display: none;
				padding-right: 0;

				&:first-child {
					display: block;
					position: absolute;
					z-index: 0;
					width: var(--size-fluid-clamp);
					height: 100%;
					inset: 0;
					margin: auto;
				}
			}
		}

		.visual-gallery__item {
			flex-shrink: 0;

			&.size-fluid-clamp {
				--size-min: 160px;
				--size-max: 220px;
				width: var(--size-fluid-clamp);
			}

			@media (min-width: 768px) {
				position: absolute;
				opacity: var(--opacity);
				transform: translate(0, var(--translate-y));

				&.image01 {
					top: calc(502 / 1422 * 100%);
					right: calc(619 / 711 * 100%);
				}

				&.image02 {
					top: calc(819 / 1422 * 100%);
					left: calc(619 / 711 * 100%);
				}

				&.image03 {
					top: calc(414 / 1422 * 100%);
					left: calc(577 / 711 * 100%);
				}

				&.image04 {
					top: calc(855 / 1422 * 100%);
					right: calc(581 / 711 * 100%);
				}
			}
		}

		.visual-gallery__image {
			width: 100%;
			height: auto;
			aspect-ratio: 4 / 3;
			object-fit: contain;
		}
	}
}

@keyframes animation-text-circular {
	to {
		rotate: 1turn;
	}
}

/** 参考URL */
/** https://yuito-blog.com/text-shadow-loop-text-animation/ */
/** https://design-levelup.com/webdesign/html-css/making-13/#i-6 */
.background-marquee-track {
	width: var(--marquee-width);
	display: flex;
	will-change: translate;

	&.diver-animation-marquee {
		animation: background-marquee 10s linear infinite;
		animation-direction: normal;
	}

	&.location-introduction-visuals {
		animation: background-marquee 10s linear infinite;
		animation-direction: reverse;

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

	.background-marquee-item {
		width: max-content;
	}
}

@keyframes background-marquee {
	0% {
		translate: 0%;
	}

	100% {
		translate: -100%;
	}
}


/* ============================
//  Outline
// ============================ */
.section-outline {
	padding-inline: var(--container-padding);

	.outline-list {
		--column-title: 200px;
		--column-gap: clamp(10px, 0.8em, 20px);

		&.size-fluid-clamp {
			--size-min: 14px;
			--size-max: 16px;
			font-size: var(--size-fluid-clamp);
			font-weight: var(--font-weight--Regular);
			line-height: 1.2;
		}

		max-width: 670px;
		margin-inline: auto;

		.outline-list__group {
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			gap: var(--column-gap);
			padding-block: 25px;

			&:not(:last-of-type) {
				border-bottom: 1px solid var(--color-text);

				@media (min-width: 768px) {
					&::after {
						content: "";
						display: block;
						width: var(--column-gap);
						height: 100%;
						position: absolute;
						top: 1em;
						left: var(--column-title);
						background-color: var(--color-background);
					}
				}
			}

			@media (min-width: 768px) {
				grid-template-columns: var(--column-title) 1fr;
				position: relative;
			}
		}

		.outline-list__title {}

		.outline-list__data {}
	}

	.location-part {
		display: inline-block;

		&.postal_code {
			&::before {
				content: '〒';
			}

			margin-right: 0.5em;
		}

		&.address {}
	}

	.access-content {
		&.guide {}

		&.google_map {
			display: none;
			margin-top: 1em;

			>iframe {
				width: 100%;
				height: 280px;
				/* aspect-ratio: 600 / 450; */
			}

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

	.sns-list {
		--item-size: 1.6em;
		display: flex;
		column-gap: 1em;
		height: var(--item-size);

		--color-sns-facebook-1: currentcolor;
		--color-sns-facebook-2: none;
		--color-sns-instagram-1: currentcolor;
		--color-sns-instagram-2: none;

		.sns-item {
			width: var(--item-size);

			&.facebook:hover {
				--color-sns-facebook-1: initial;
				--color-sns-facebook-2: initial;
			}

			&.instagram:hover {
				--color-sns-instagram-1: initial;
				--color-sns-instagram-2: initial;
			}
		}

		.sns-link {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.website {
		transition: opacity .21s var(--ease);

		&:hover {
			opacity: 0.6;
		}
	}
}


/* ============================
//  DiverAnimation-Gif
// ============================ */
.diver-animation-gif {
	max-width: 1920px !important;
	/** 1280pxから上書き */
	height: auto;
	aspect-ratio: 1920 / 500;

	.animation-gif-image {
		display: none;

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


/* ============================
//  last-child Spacer
// ============================ */
main>section:last-child:not(.diver-animation-gif) {
	margin-bottom: 60px;

	@media (min-width: 768px) {
		margin-bottom: 120px;
	}
}