/* ============================
// design-2026
// CSS standard
// ============================ */
body:not(.no-scroll):has([data-area-type="image"], [data-area-type="video"]) {
	@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.design-2026 {
	width: 100%;
	padding-block-end: 120px;
	overflow-x: clip;

	.design-2026-title {
		align-content: center;
		width: 100%;
		max-width: 100%;
		height: 72px;
		padding-inline: 1em;
		background-color: var(--wr-color-gray-dark);
		font-size: 22px;
		font-weight: var(--font-weight--SemiBold);
		color: var(--color-white);
		line-height: 1.5;
		text-align: center;
	}

	.design-2026-content {
		max-width: calc(800px + var(--container-padding) * 2);
		padding-inline: var(--container-padding);
		margin-inline: auto;
	}
}




/* ============================
//  HeroArea
// ============================ */
.section-hero-area {
	position: relative;
	max-width: 1280px;
	margin-top: 0px;
	margin-inline: auto;
	transition: margin-top 0.64s var(--ease);

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


/* ============================
//  HeroArea: feature
// ============================ */
.section-hero-area.feature {
	.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;
		}
	}
}


/* ============================
//  HeroArea: image
// ============================ */
.section-hero-area.image {
	--video-background: #626262;
	border-image: linear-gradient(var(--video-background)) fill 0 /1/ 0 100vw;

	.hero-content {
		width: 100%;
		height: auto;

		.hero-content-image {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 16 / 9;
			object-fit: cover;
		}
	}
}


/* ============================
//  HeroArea: video
// ============================ */
.section-hero-area.video {
	--video-background: #626262;
	border-image: linear-gradient(var(--video-background)) fill 0 /1/ 0 100vw;

	.hero-content {
		position: relative;
		z-index: 1;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		display: grid;
		place-content: center;

		.hero-content-title.svg-title {
			display: grid;
			place-content: center;
			color: var(--color-white);

			.svg-title--en.size-fluid-clamp {
				--size-min: 36px;
				--size-max: 96px;
				height: var(--size-fluid-clamp);
				fill: currentColor;
			}

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

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




/* ============================
// design-2026
// content
// ============================ */
.design-2026-content {
	font-weight: var(--font-weight--Regular);
	font-size: 14px;
	line-height: 20px;

	@media (min-width: 420px) {
		font-size: 16px;
		line-height: 30px;
	}

	p {
		margin-block: 1em;

		&:empty {
			display: none;
		}
	}

	.color-title {
		color: var(--color-scheme-main);
		font-weight: var(--font-weight--Bold);
		font-size: 18px;
		line-height: 30px;

		@media (min-width: 768px) {
			font-size: 20px;
		}
	}

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

	.icon-phone::before {
		content: "";
		display: inline-block;
		width: 1.25em;
		aspect-ratio: 27 / 23;
		margin-bottom: -0.125em;
		margin-right: 0.15em;
		background-color: currentColor;
		clip-path: url(#clippath-phone);
	}

	.margin-block-30 {
		margin-block: 30px;
	}

	.margin-block-60 {
		margin-block: 60px;
	}

	.margin-block-40-60 {
		margin-block: 40px;

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

	.text-align-left {
		text-align: left;
	}

	.text-align-center {
		text-align: center;
	}

	.text-align-right {
		text-align: right;
	}

	.list-standard {
		display: grid;
		gap: 0.5em;
		padding-left: 1.5rem;

		ol& {
			list-style: decimal;
		}

		ul& {
			list-style: disc;
		}
	}

	.button-group {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 20px;

		>br {
			display: none;
		}

		.button-arrow-rotate {
			margin-inline: unset;
		}
	}

	.list-group {
		display: grid;
		grid-template-columns: minmax(0, auto);
		justify-content: center;
		gap: 0.5em 30px;

		@media (min-width: 768px) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			padding-inline: 30px;
		}
	}

	.layout-2column {
		display: grid;
		grid-template-columns: minmax(0, 600px);
		justify-content: center;
		gap: 20px;

		@media (min-width: 768px) {
			--column-image: 320px;
			gap: 30px;

			&.column-equal {
				/* grid-template-columns: 1fr 1fr; */
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}

			&.image-left {
				grid-template-columns: var(--column-image) 1fr;
				grid-template-areas: "image text";
			}

			&.image-right {
				grid-template-columns: 1fr var(--column-image);
				grid-template-areas: "text image";
			}

			.column-image {
				grid-column: image;
			}

			.column-text {
				grid-area: text;
				display: flex;
				flex-direction: column;
				row-gap: 0.75em;

				p {
					margin-block: 0;
				}
			}
		}
	}

	.all-columns {
		grid-column: 1 / -1;
	}

	.data-table {
		margin-block: 30px;

		.data-table-group {
			display: grid;
			grid-template-columns: minmax(0, 1fr);
			column-gap: 10px;
			padding-block: 20px;

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

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

				&:not(:last-of-type)::after {
					content: "";
					display: block;
					width: var(--column-gap);
					height: 2em;
					position: absolute;
					bottom: -1em;
					left: var(--column-title);
					background-color: var(--color-background);
				}
			}

			dd {
				display: flex;
				flex-direction: column;
				row-gap: 0.75em;
			}

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

	.profile-table {
		--image-size: 230px;
		display: grid;
		gap: 40px 60px;

		@media (min-width: 768px) {
			grid-template-columns: var(--image-size) minmax(0, 1fr);
		}

		.profile-table-image {
			justify-self: center;
			width: 100%;
			max-width: var(--image-size);
			height: auto;
			aspect-ratio: 1 / 1;

			img {
				object-fit: cover;
			}
		}

		.profile-table-text {
			.profile-header {
				display: grid;
				row-gap: 1.25em;
				padding-bottom: 1em;
				line-height: 1.2;
				border-bottom: 1px solid currentColor;

				.profile-role {}

				.profile-name {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					gap: 0.25em 1em;
				}

				.profile-name-main {
					font-size: 16px;

					@media (min-width: 768px) {
						font-size: 24px;
					}
				}

				.profile-name-sub {}
			}

			.profile-body {}
		}
	}
}




/* ============================
// design-2026
// specific : ICT・DX推進
// ============================ */
.design-2026[data-slug="ict-dx"] {
	.tool-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		column-gap: 1em;

		img {
			height: 40px;
		}

		br {
			display: none;
		}
	}
}


/* ============================
// design-2026
// specific : 採用情報
// ============================ */
.design-2026[data-slug="recruit"] {
	.data-view-list {
		--data-size: 192.5px;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(0, var(--data-size)));
		justify-content: center;
		gap: 10px;

		.data-item {
			display: grid;
			grid-template-rows: minmax(19px, auto) 1fr minmax(13px, auto);
			place-items: center;
			gap: 10px;
			width: 100%;
			min-height: var(--data-size);
			padding: 10px;
			border-radius: 10px;
			background-color: var(--color-white);
			font-weight: var(--font-weight--Medium);
			text-align: center;
		}

		.data-label {
			font-size: 16px;
			line-height: 19px;
		}

		.data-value {
			color: var(--color-scheme-main);

			.value-line {
				font-size: 24px;
				line-height: 29px;
			}

			.value-num {
				font-size: 40px;
				line-height: 48px;
			}
		}

		.data-note {
			font-size: 10px;
			line-height: 13px;
		}
	}

	.data-view-note {
		grid-column: 1 / -1;
		padding-top: 20px;
		font-size: 10px;
		line-height: 12px;
		text-align: right;
	}

	.recruitment-contact-tel {
		color: var(--color-scheme-main);
		font-weight: var(--font-weight--Medium);
		font-size: 24px;
		line-height: 29px;
		text-align: center;
	}
}


/* ============================
// design-2026
// specific : 採用情報
// DiverAnimation-Marquee
// ============================ */
.diver-animation-marquee {
	/* width: var(--marquee-width); */
	width: 100vw;
	translate: calc(50% - 50vw);

	.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);
	}
}


/* ============================
// design-2026
// specific : 採用情報
// 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%;
	}
}


/* ============================
// design-2026
// specific : 沿革
// ============================ */
.design-2026[data-slug="history"] {
	.after-circle::after {
		content: "";
		display: block;
		width: var(--circle);
		height: var(--circle);
		border-radius: var(--circle);
		border: 2px solid var(--color-scheme-main);
		background-color: var(--color-background);
		position: absolute;
		top: var(--top, auto);
		bottom: var(--bottom, auto);
		left: var(--left, auto);
		right: var(--right, auto);
	}

	.history-list {
		--year-en: 40px;
		--year-en-line: var(--year-en) * 1.2;
		--year-column: 188px;
		--history-line-gap: 60px;
		--circle: 10px;
		display: grid;
		gap: 60px;
		margin-block-start: 120px;
		margin-block-end: 60px;
		padding-inline: var(--history-line-gap);
		position: relative;

		&::before {
			content: "";
			display: block;
			width: 2px;
			height: calc(100% - var(--year-en-line));
			background-color: var(--color-scheme-main);
			position: absolute;
			top: calc(var(--year-en-line) / 2);
			left: calc(var(--history-line-gap)/2 - 1px);

			@media (min-width: 768px) {
				left: calc(var(--year-column) - 1px);
			}
		}

		&.after-circle::after {
			--bottom: calc(var(--year-en-line) / 2);
			--left: calc((var(--history-line-gap) - var(--circle))/2);

			@media (min-width: 768px) {
				--left: calc(var(--year-column) - var(--circle)/2);
			}
		}

		@media (min-width: 768px) {
			--year-en: 50px;
			padding-inline: 0;
		}

		.history-year {
			display: grid;
			gap: 1em 60px;

			@media (min-width: 768px) {
				grid-template-columns: var(--year-column) minmax(0, 1fr);
			}
		}

		.history-year-label {
			.year-en {
				font-size: var(--year-en);
				font-weight: var(--font-weight--Bold);
				line-height: 1.2;
				color: var(--color-scheme-main);
				position: relative;

				&.after-circle::after {
					--top: calc((100% - var(--circle)) / 2);
					--left: calc((var(--history-line-gap) + var(--circle)) / -2);

					@media (min-width: 768px) {
						--left: calc(100% - var(--circle) /2);
					}
				}
			}

			.year-ja {
				font-weight: var(--font-weight--Medium);
			}
		}

		.history-year-events {
			display: grid;
			row-gap: 60px;
		}

		.history-year-event {
			display: grid;
			gap: 30px;

			@media (min-width: 768px) {
				grid-template-columns: 220px minmax(0, 1fr);
				grid-template-areas: "image text";
			}

			.event-image {
				width: 100%;
				height: auto;
				aspect-ratio: 4 / 3;
				object-fit: cover;

				@media (min-width: 768px) {
					grid-area: image;
				}
			}

			.event-text {
				display: grid;
				gap: 1em;

				@media (min-width: 768px) {
					grid-area: text;
				}
			}

			.event-text-item {
				margin-block: 0;
				font-weight: var(--font-weight--Medium);
				line-height: 1.2;

				.text-item-date {
					color: var(--color-scheme-main);
				}

				.text-item-detail {}
			}
		}
	}
}


/* ============================
// design-2026
// specific : 施設見学
// ============================ */
.design-2026[data-slug="facility-tours"] {
	.section-reservation {
		position: relative;
		--background-visible: 0;

		&::before {
			content: "";
			display: block;
			width: 141.5%;
			height: auto;
			aspect-ratio: 1132 / 2630;
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: -1;
			transform: translate(-50%, -50%);
			background-image: url("../../images/template/design-2026/section-reservation-background.svg");
			background-repeat: no-repeat;
			background-size: contain;
			opacity: var(--background-visible);
		}

		@media (min-width: 480px) {
			margin-block-end: 180px;
		}

		@media (min-width: 680px) {
			margin-block-end: 240px;
			--background-visible: 1;
		}

		.background-white {
			margin-block-end: 120px;

			@media (min-width: 480px) {
				margin-block-end: 60px;
				border-radius: 10px;
				padding-block: 60px;
				padding-inline: 30px;
				background-color: var(--color-white);
			}
		}

		.reservation-text {
			max-width: 460px;
			margin-inline: auto;
		}

		.reservation-contact {
			display: grid;
			row-gap: 12px;
			padding-block: 20px;
			padding-inline: 18px;
			border-radius: 10px;
			background-color: var(--color-white);
			box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25);
			font-weight: var(--font-weight--Medium);
			line-height: 1.2;
			text-align: center;

			.contact-text {
				font-size: 14px;
			}

			.contact-tel {
				font-size: 24px;
			}
		}

		.reservation-guidance {
			font-size: 12px;
			font-weight: var(--font-weight--Medium);
			line-height: 16px;
			text-align: center;
			color: #949090;
		}

		.reservation-request-title {
			padding-left: 6px;
			border-left: 4px solid currentColor;
			font-weight: var(--font-weight--Medium);
		}

		.reservation-request-caption {
			margin-bottom: 2em;
		}

		.request-list-title {
			margin-block: 1.5em 0.75em;
		}

		.list-standard {
			line-height: 1.5;
		}

		.reservation-form-title {
			font-size: 16px;
			font-weight: var(--font-weight--Medium);
			line-height: 1.2;
			text-align: center;

			@media (min-width: 480px) {
				font-size: 18px;
			}
		}

		.reservation-form-caption {
			line-height: 1.2;
			text-align: center;
			margin-block: 30px;

			@media (min-width: 480px) {
				margin-block: 60px;
			}
		}
	}

	.facility-tours {
		display: grid;
		grid-template-columns: minmax(0px, 480px);
		justify-content: center;
		gap: 80px 60px;
		margin-block: 60px;

		@media (min-width: 680px) {
			grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		}
	}

	.facility-tours-item {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		row-gap: 30px;

		.facility-name {
			font-weight: var(--font-weight--Bold);
			text-align: center;
		}

		.facility-tour {
			iframe {
				display: block;
				width: 100%;
				height: auto;
				aspect-ratio: 400 / 280;
			}
		}

		.facility-links {
			display: grid;
			grid-template-columns: minmax(0, 320px);
			justify-content: center;
			gap: 14px;

			@media (min-width: 480px) {
				gap: 24px;
			}
		}

		.facility-link {
			font-weight: var(--font-weight--Bold);

			&.view {
				--color-background: #101010;
				--color-text: var(--color-white);
			}

			&.location {
				--color-background: var(--color-white);
				--color-text: #101010;
				border: 1px solid var(--color-text);
			}

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