section.panel {
	> div {
		padding-bottom: 14vw;
		display: grid;
		position: relative;
		overflow: hidden;
		background-color: #fffad0;
		text-align: center;
		min-height: 100%;
		> figure {
			&:nth-of-type(1),&:nth-of-type(2) {
				> img {
					width: 100vw;
				}
			}
			&:nth-of-type(1) {
				position: relative;
					z-index: 1;
			}
			&:nth-of-type(2) {
				position: absolute;
				z-index: 1;
				opacity: 0;
				scale: 0.8;
				animation: hero-bg-enter 0.3s 0.4s ease forwards;
				> img {
					height: 100%;
				}
			}
			&:nth-of-type(3) {
				position: absolute;
				transform-origin: center;
				top: 26vw;
				left: 31%;
				opacity: 0;
				scale: 0.6;
				animation: hero-title-enter 0.45s 0.4s cubic-bezier(0.49, 0.25, 0.3, 1.31) forwards;
				> img {
					width: 42vw;
				}
			}
		}
		> div.item {
			position: absolute;
			opacity: 0;
			scale: 0;
			z-index: 2;
			animation: hero-decoration-enter 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55) forwards;
			&:nth-of-type(1) {
				bottom: 29%;
				left: 28%;
				animation-delay: 0.7s;
				> img {
					width: 16vw;
				}
			}
			&:nth-of-type(2) {
				bottom: 21%;
				right: 22%;
				animation-delay: 0.85s;
				> img {
					width: 16vw;
				}
			}
		}
		> div.illust01 {
			position: absolute;
			top: 17%;
			opacity: 0;
			scale: 0.6;
			z-index: 2;
			transform-origin: bottom center;
			left: 5%;
			rotate: 10deg;
			animation: hero-person-left-enter 0.6s 1.05s cubic-bezier(0.27, 0.26, 0.15, 1.57) forwards;
			> div {
				display: block;
				animation: person-left 3s 1.2s ease-in-out infinite;
				> img {
					width: 19vw;
				}
			}
		}
		> div.illust02 {
			position: absolute;
			top: 17%;
			opacity: 0;
			scale: 0.6;
			z-index: 2;
			transform-origin: bottom center;
			right: 5%;
			rotate: -10deg;
			animation: hero-person-right-enter 0.6s 1.05s cubic-bezier(0.27, 0.26, 0.15, 1.57) forwards;
			> div {
				display: block;
				animation: person-right 3s 1.2s ease-in-out infinite;
				> img {
					width: 16vw;
				}
			}
		}
		> div.cloud {
			position: absolute;
			bottom: 0;
			z-index: 3;
			> img {
				width: 100vw;
			}
		}
		> div.scroll {
			position: absolute;
			bottom: 13%;
			right: 50%;
			transform: translate(calc(-50% + 70px), 0%);
			z-index: 4;
			@media (width < 650px) {
				bottom: 11%;
				transform: translate(calc(-50% + 55px), 0%);
			}
			> img {
				width: 70px;
				@media (width < 650px) {
					width: 55px;
				}
			}
		}
	}
}
@keyframes hero-bg-enter {
	to {
		opacity: 1;
		scale: 1;
	}
}
@keyframes hero-title-enter {
	to {
		opacity: 1;
		scale: 1;
	}
}
@keyframes hero-decoration-enter {
	to {
		opacity: 1;
		scale: 1;
	}
}
@keyframes hero-person-left-enter {
	to {
		opacity: 1;
		scale: 1;
		rotate: 0deg;
	}
}
@keyframes hero-person-right-enter {
	to {
		opacity: 1;
		scale: 1;
		rotate: 0deg;
	}
}
@keyframes person-left {
	0%,
	100% {
		translate: 0 0;
		rotate: 0deg;
	}
	50% {
		translate: 0 15px;
		rotate: 5deg;
	}
}
@keyframes person-right {
	0%,
	100% {
		translate: 0 0;
		rotate: 0deg;
	}
	50% {
		translate: 0 15px;
		rotate: -5deg;
	}
}
section.message {
	background-color: #fff;
	padding: 0 5% 240px 5%;
	position: relative;
	z-index: 5;
	margin-bottom: -180px;
	@media (width < 1040px) {
		margin-bottom: -130px;
	}
	@media (width < 780px) {
		padding: 0 5% 150px 5%;
	}
	> div {
		max-width: 1000px;
		margin-inline: auto;
		text-align: center;
		> div.text {
			&.is-revealed {
				> p {
					opacity: 1;
					scale: 1;
				}
				> h3 {
					opacity: 1;
					scale: 1;
				}
				> figure {
					opacity: 1;
					scale: 1;
				}
			}
			> h3 {
				font-size: min(2.5rem,8vw);
				line-height: 1.3;
				color: #00a0e9;
				font-weight: 800;
				letter-spacing: 0.1em;
				text-shadow: 4px 5px 0 #ffe600;
				opacity: 0;
				scale: 0.8;
				transition:
				opacity 0.3s ease,
				scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
				transition-delay: 0.35s;
			}
			> p {
				padding-top: 40px;
				font-size: min(1.1rem, 4.5vw);
				line-height: 1.8;
				color: #333;
				font-weight: 600;
				letter-spacing: 0.1rem;
				opacity: 0;
				scale: 0.8;
				transition:
				opacity 0.3s ease,
				scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
				@media (width < 700px) {
					padding-top: 20px;
					> br {
						display: none;
					}
				}
				&:nth-child(2) {
					transition-delay: 0.4s;
				}
				&:nth-child(3) {
					transition-delay: 0.45s;
				}
				&:nth-child(4) {
					transition-delay: 0.5s;
				}
			}
			> figure {
				position: absolute;
				opacity: 0;
				scale: 0.8;
				transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
				&:nth-of-type(1) {
					top: 25%;
					left: calc((100vw - 1100px) / 2);
					transition-delay: 0.6s;
					> img {
						width: min(16vw, 200px);
					}
				}
				&:nth-of-type(2) {
					top: 5%;
					right: calc((100vw - 900px) / 2);
					transition-delay: 0.65s;
					> img {
						width: min(10vw, 100px);
					}
				}
				&:nth-of-type(3) {
					bottom: 0%;
					left: calc((100vw - 1100px) / 2);
					transition-delay: 0.7s;
					> img {
						width: min(14vw, 150px);
					}
				}
				&:nth-of-type(4) {
					bottom: 0%;
					right: calc((100vw - 950px) / 2);
					transition-delay: 0.75s;
					> img {
						width: min(14vw, 150px);
					}
				}
				@media (width < 780px) {
					display: none;
				}
			}
		}
	}
}
section.aboutus {
	margin-top: 100px;
	position: relative;
	padding: 50px 5% 0px 5%;
	background: #fff532;
	z-index: 6;
	&::before {
		background: #fff532;
	}
	> div {
		position: relative;
		z-index: 1;
		max-width: 700px;
		margin-inline: auto;
		text-align: center;
		&.is-revealed {
			opacity: 1;
			scale: 1;
		}
		> p.top {
			color: #00a0e9;
			font-size: min(1.8rem, 6vw);
			font-weight: 900;
			line-height: 1;
			letter-spacing: 0.08em;
		}
		> div.title {
			margin-top: -2px;
			position: relative;
			min-height: 80px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50px;
			background: #fff;
			box-shadow: 10px 12px 0 #00a0e9;
			&::before {
				position: absolute;
				left: 50%;
				top: 55%;
				width: min(420px, 85%);
				height: 15px;
				transform: translateX(-50%) skewX(-13deg);
				transform-origin: -50%;
				transition: scale 0.45s 0.1s cubic-bezier(0.5, 0, 0.26, 1);
				background: #fff532;
				content: "";
				scale: 0 1;
			}
			&.is-revealed::before {
				scale: 1 1;
			}
			> h1 {
				position: relative;
				z-index: 1;
				font-size: min(2.0rem, 6vw);
				font-weight: 900;
				line-height: 1;
			}
			@media (width < 500px) {
				min-height: 70px;
				box-shadow: 6px 8px 0 #00a0e9;
			}
		}
		> p.text1 {
			margin-top: 40px;
			color: #333;
			font-size: min(1.3rem, 4.5vw);
			font-weight: 500;
			line-height: 1.6;
			letter-spacing: 0.1rem;
			@media (width < 750px) {
				> br {
					display: none;
				}
			}
		}
	}
}
.mask-top::before {
	--mask-height: 100px;
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--mask-height);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 100% 100%;
	top: calc((-1 * var(--mask-height)) + 1px);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1300 120' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0C270 160 1030 160 1300 0V120H0Z'/%3E%3C/svg%3E");
}
section.seat {
	margin-top: -4vw;
	position: relative;
	z-index: 5;
	background: #fff532;
	> div {
		&.feature-stage {
			opacity: 0;
			transform: translateY(22px);
			&.is-inview {
				animation: pageFloatIn .9s ease-out both;
			}
		}
		> div.seatVisual {
			display: grid;
			> div.block {
				> div.seat-visual {
					position: relative;
					display: grid;
					> figure {
						grid-area: 1/1/2/2;
						&:nth-of-type(1) {
							display: grid;
							justify-self: end;
							> img {
								width: 75vw;
							}
						}
						&:nth-of-type(2) {
							display: grid;
							justify-self: center;
							align-items: center;
							margin-top: 13%;
							> img {
								width: 26vw;
							}
						}
					}
				}
				> button {
					&.hotspot {
						position: absolute;
						aspect-ratio: 1;
						z-index: 6;
						border: 0;
						border-radius: 999px;
						background: transparent;
						padding: 0;
						cursor: pointer;
						transform: translate(-50%, -50%);
						transition: transform .25s ease;
						animation: hotspotFloatIn .9s ease-out both, pulse 2.4s ease-in-out infinite;
						> img {
							display: block;
							width: min(63px, 5vw);
							height: min(63px, 5vw);
						}
						&:hover,
						&:focus-visible,
						&.is-active {
							transform: translate(-50%, -50%) scale(1.08);
						}
						&:focus-visible {
							outline: 3px solid #ffffff;
							outline-offset: 4px;
						}
						&.hotspot-recliner {
							left: 38vw;
							top: 41vw;
							animation-delay: .12s, .12s;
						}
						&.hotspot-rail {
							left: 42vw;
							top: 50vw;
							animation-delay: .12s, .12s;
						}
					}
				}
			}
			svg.connector-lines {
				position: absolute;
				inset: 0;
				z-index: 4;
				width: 100%;
				height: 100%;
				overflow: visible;
				pointer-events: none;
				>	line {
					opacity: 0;
					stroke: #0064b4;
					stroke-width: 5;
					stroke-linecap: round;
					transition: opacity .3s ease;
				}
				&.is-visible line {
					opacity: 1;
				}
			}
			> article {
				position: absolute;
				z-index: 5;
				width: min(300px, 25vw);
				padding: 10px 15px;
				border: 5px solid #0064b4;
				border-radius: 14px;
				background: rgba(255, 255, 255, .96);
				opacity: 0;
				pointer-events: none;
				transform: translateY(16px) scale(.98);
				transition: opacity .42s ease, transform .42s ease;
				@media (width < 860px) {
					justify-self: center;
					margin-inline: 5%;
					margin-top: 30px;
					display: none;
					position: relative;
					inset: auto;
					width: min(500px, 90%);
					min-height: auto;
					order: 2;
				}
				&.is-visible {
					opacity: 1;
					pointer-events: auto;
					transform: translateY(0) scale(1);
					@media (width < 860px) {
						display: block;
					}
				}
				&.card-recliner {
					left: 12%;
					top: 47%;
					@media (width < 1300px) {
						left: 5%;
					}
					@media (width < 860px) {
						left: auto;
						right: auto;
						top: auto;
					}
				}
				&.card-rail {
					right: 11%;
					top: 50%;
					@media (width < 1300px) {
						right: 5%;
					}
					@media (width < 860px) {
						left: auto;
						right: auto;
						top: auto;
					}
				}
				> div {
					&.card-media {
						position: relative;
						> figure {
							text-align: center;
							> img {
								max-width: 100%;
								width: 150px;
							}
						}
					}
				}
				> h2 {
					margin: 8px 0 6px;
					color: #009fe8;
					font-size: min(1.2rem, 6vw);
					font-weight: 600;
					line-height: 1.3;
					text-align: center;
				}
				> p {
					margin: 0;
					font-size: min(1.0rem, 5vw);
					font-weight: 500;
					line-height: 1.6;
					text-align: justify;
				}
			}
		}
	}
}
@keyframes pageFloatIn {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes hotspotFloatIn {
	from {
		opacity: 0;
		transform: translate(-50%, -34%) scale(.85);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}
@keyframes pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(0, 174, 239, .18);
	}
	50% {
		box-shadow: 0 0 0 10px rgba(0, 174, 239, .06);
	}
}
section.pieces {
	padding: 40px 5% 40px 5%;
	background: #fff532;
	> div {
		position: relative;
		border-radius: 40px;
		border: 4px solid #cccccc;
		background-color: #fff;
		padding: 30px;
		max-width: 1000px;
		margin-inline: auto;
		@media (width < 870px) {
			padding: 40px 30px;
		}
		@media (width < 510px) {
			padding: 40px 45px;
		}
		&.is-revealed {
			> figure {
				opacity: 1;
				scale: 1;
			}
		}
		> h3 {
			text-align: center;
			font-size: min(2.0rem, 7vw);
			line-height: 1.3;
			color: #333;
			font-weight: 800;
			letter-spacing: 0.2em;
		}
		> p {
			text-align: center;
			font-size: min(0.9rem,3.5vw);
			line-height: 1.5;
			color: #333;
		}
		> figure {
			position: absolute;
			opacity: 0;
			scale: 0.8;
			transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			&:nth-of-type(1) {
				top: 15%;
				left: 8%;
				transition-delay: 0.2s;
				@media (width < 960px) {
					left: 4%;
				}
				@media (width < 740px) {
					top: 20%;
					left: 10%;
				}
				@media (width < 650px) {
					left: 5%;
				}
				> img {
					width: 90px;
					@media (width < 650px) {
						width: 15vw;
					}
				}
			}
			&:nth-of-type(2) {
				top: 12%;
				right: 13%;
				transition-delay: 0.25s;
				@media (width < 960px) {
					right: 9%;
				}
				@media (width < 740px) {
					top: 18%;
					right: 10%;
				}
				@media (width < 650px) {
					right: 5%;
				}
				> img {
					width: 80px;
					@media (width < 650px) {
						width: 14vw;
					}
				}
			}
			&:nth-of-type(3) {
				bottom: 10%;
				left: 6%;
				transition-delay: 0.3s;
				@media (width < 960px) {
					left: 2%;
				}
				@media (width < 740px) {
					bottom: 10%;
					left: 10%;
				}
				@media (width < 650px) {
					left: 4%;
				}
				> img {
					width: 70px;
					@media (width < 650px) {
						width: 11vw;
					}
				}
			}
			&:nth-of-type(4) {
				bottom: 8%;
				right: 8%;
				transition-delay: 0.35s;
				@media (width < 960px) {
					right: 4%;
				}
				@media (width < 740px) {
					bottom: 8%;
					right: 8%;
				}
				@media (width < 650px) {
					right: 4%;
				}
				> img {
					width: 70px;
					@media (width < 650px) {
						width: 11vw;
					}
				}
			}
		}
		> div {
			padding-block: 40px 20px;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			column-gap: 50px;
			@media (width < 870px) {
				padding-block: 60px 40px;
				grid-template-columns: repeat(1, 1fr);
				row-gap: 20px;
			}
			@media (width < 510px) {
				padding-block: 70px 40px;
			}
			> div {
				&:nth-of-type(1) {
					justify-self: end;
					@media (width < 870px) {
						justify-self: center;
					}
				}
				&:nth-of-type(2) {
					justify-self: start;
					@media (width < 870px) {
						justify-self: center;
					}
				}
				> p {
					text-align: center;
					font-size: min(1.6rem, 6vw);
					line-height: 1.3;
					color: #00a0e9;
					font-weight: 800;
					> b {
						font-size: min(3.0rem, 8vw);
					}
				}
			}
		}
	}
}
section.because {
	margin-bottom: -50px;
	background: url(./image/because_bottombg.svg) #fff532;
	padding: 0 5% 150px 5%;
	position: relative;
	background-repeat: no-repeat;
	background-size: min(1500px, 100vw);
	background-position: center 90%;
	@media (width < 1250px) {
		background-size: min(1500px, 120vw);
		background-position: center 85%;
	}
	> div {
		max-width: 1000px;
		margin-inline: auto;
		&.is-revealed {
			> div {
				opacity: 1;
				scale: 1;
			}
			> figure {
				&:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4) {
					opacity: 1;
					scale: 1;
				}
			}
		}
		> p {
			text-align: center;
			font-size: min(2.2rem, 5vw);
			line-height: 1.6;
			color: #00a0e9;
			font-weight: 700;
			letter-spacing: 0.1rem;
			@media (width < 500px) {
				font-weight: 500;
				> br {
					display: none;
				}
			}
		}
		> figure {
			text-align: center;
			&.is-revealed {
				&:nth-of-type(2),
				&:nth-of-type(3),
				&:nth-of-type(4) {
					opacity: 1;
					scale: 1;
				}
			}
			&:nth-of-type(1) {
				margin-top: 60px;
				@media (width < 500px) {
					max-width: 35vw;
					margin-inline: auto;
					margin-top: 30px;
				}
			}
			&:nth-of-type(2) {
				margin-top: 10px;
				transition-delay: 0.3s;
			}
			&:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4) {
				opacity: 0;
				scale: 0.8;
				transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			}
			&:nth-of-type(3), &:nth-of-type(4) {
				position: absolute;
			}
			&:nth-of-type(3) {
				bottom: 15%;
				left: 5%;
				transition-delay: 0.6s;
				@media (width < 1240px) {
					left: 3%;
				}
				@media (width < 780px) {
					bottom: 15%;
				}
				@media (width < 500px) {
					bottom: 25%;
				}
				> img {
					width: min(12vw, 180px);
				}
			}
			&:nth-of-type(4) {
				bottom: 15%;
				right: 5%;
				transition-delay: 0.65s;
				@media (width < 1240px) {
					right: 3%;
				}
				@media (width < 780px) {
					bottom: 15%;
				}
				@media (width < 500px) {
					bottom: 25%;
				}
				> img {
					width: min(11vw, 170px);
				}
			}
			> img {
				max-width: 100%;
			}
		}
		> div {
			opacity: 0;
			scale: 0.8;
			transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			transition-delay: 1.0s;
			display: grid;
			&.is-revealed {
				opacity: 1;
				scale: 1;
			}
			> figure {
				padding-block: 120px 100px;
				grid-area: 1/1/2/2;
				text-align: center;
				@media (width < 780px) {
					padding-block: 60px 50px;
				}
				> img {
					max-width: min(800px, 75%);
					@media (width < 780px) {
						max-width: min(800px, 70%);
					}
				}
			}
		}
	}
}
section.works01 {
	margin-top: -100px;
	position: relative;
	padding: 50px 5% 0px 5%;
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 3px, transparent 3px, transparent 10px), #ff8c32;
	&::before {
		background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 3px, transparent 3px, transparent 10px), #ff8c32;
	}
	> div {
		position: relative;
		z-index: 1;
		max-width: 1000px;
		margin-inline: auto;
		text-align: center;
		display: grid;
		opacity: 0;
		scale: 0.8;
		transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
		&.is-revealed {
			opacity: 1;
			scale: 1;
		}
		> p.top {
			color: #fff532;
			font-size: min(1.8rem, 6vw);
			font-weight: 900;
			line-height: 1;
			letter-spacing: 0.08em;
		}
		> div.title {
			margin-top: -2px;
			position: relative;
			min-height: 80px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50px;
			background: #fff;
			box-shadow: 10px 12px 0 #fff532;
			&::before {
				position: absolute;
				left: 50%;
				top: 55%;
				width: min(300px, 70%);
				height: 15px;
				transform: translateX(-50%) skewX(-13deg);
				transform-origin: -50%;
				transition: scale 0.45s 0.1s cubic-bezier(0.5, 0, 0.26, 1);
				transition-delay: 0.3s;
				background: #fff532;
				content: "";
				scale: 0 1;
			}
			&.is-revealed::before {
				scale: 1 1;
			}
			> h1 {
				position: relative;
				z-index: 1;
				font-size: min(2.0rem, 6vw);
				font-weight: 900;
				line-height: 1;
			}
			@media (width < 500px) {
				min-height: 70px;
				box-shadow: 6px 8px 0 #fff532;
			}
		}
		> picture {
			text-align: center;
			padding: 30px 40px 60px 40px;
			@media (width < 700px) {
				padding: 40px 30px;
			}
			@media (width < 500px) {
				padding: 40px 10px;
			}
			> img {
				max-width: 100%;
			}
		}
		> figure {
			text-align: center;
			opacity: 0;
			scale: 0.8;
			transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			&.stepup {
				margin-block: 10px -1px;
				background-color: #fff;
				justify-self: center;
				padding-block: 10px 10px;
				@media (width < 500px) {
					margin-block: 6px -1px;
					padding-block: 2px 5px;
				}
				> img {
					@media (width < 500px) {
						width: 30px;
					}
				}
			}
			&.is-revealed {
				opacity: 1;
				scale: 1;
			}
			&:nth-of-type(5),
			&:nth-of-type(6) {
				position: absolute;
				z-index: 3;
				@media (width < 780px) {
					display: none;
				}
			}
			&:nth-of-type(5) {
				transition-delay: 0.7s;
				top: -1%;
				left: -4%;
				@media (width < 950px) {
					top: 7%;
					left: -12%;
				}
				> img {
					width: min(14.5vw, 170px);
				}
			}
			&:nth-of-type(6) {
				top: 19%;
				right: -10%;
				> img {
					width: min(14vw, 170px);
				}
			}
			> img {
				max-width: 100%;
			}
		}
		> article {
			display: grid;
			opacity: 0;
			scale: 0.8;
			transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			&.is-revealed {
				opacity: 1;
				scale: 1;
			}
			> div.step {
				position: relative;
				z-index: 2;
				display: grid;
				min-height: 90px;
				background-color: #fff532;
				justify-self: center;
				border-radius: 50px;
				@media (width < 600px) {
					width: 95%;
					justify-items: center;
					min-height: 60px;
				}
				> h3 {
					padding-inline: 150px;
					justify-self: center;
					align-self: center;
					grid-area: 1/1/2/2;
					font-size: min(2.0rem, 7vw);
					font-weight: 900;
					line-height: 1;
					color: #333;
					@media (width < 600px) {
						padding-inline: 30px;
					}
				}
				> figure {
					grid-area: 1/1/2/2;
					justify-self: start;
					align-self: start;
					> img {
						width: 90px;
						height: 90px;
						@media (width < 600px) {
							width: 60px;
							height: 60px;
						}
					}
				}
			}
			> div.content {
				position: relative;
				z-index: 1;
				margin-top: -45px;
				padding: 80px 60px 60px 30px;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				column-gap: 0px;
				border-radius: 50px;
				background: #fff;
				box-shadow: 10px 12px 0 #fff532;
				@media (width < 820px) {
					grid-template-columns: repeat(1, 1fr);
					row-gap: 5px;
					padding: 80px 30px 50px 30px;
				}
				@media (width < 600px) {
					margin-top: -30px;
					box-shadow: 6px 8px 0 #fff532;
				}
				@media (width < 500px) {
					padding: 60px 20px 20px 20px;
				}
				> p {
					align-self: center;
					font-size: min(0.9rem, 4.5vw);
					font-weight: 500;
					line-height: 1.6;
					color: #333;
					text-align: justify;
					@media (width < 820px) {
						order: 2;
						font-weight: unset;
					}
				}
				> figure{
					padding-left: 30px;
					@media (width < 820px) {
						padding-left: 0px;
						order: 1;
					}
					@media (width < 480px) {
						padding-inline: 0px;
					}
					> img {
						max-width: 100%;
					}
				}
			}
		}
	}
}
section.works02 {
	margin-top: -1px;
	position: relative;
	padding: 200px 5% 180px 5%;
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 3px, transparent 3px, transparent 10px), url(./image/works_buttombg.svg) 100% 93% / min(50vw, 700px) no-repeat, #ff8c32;
	@media (width < 810px) {
		background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 3px, transparent 3px, transparent 10px), url(./image/works_buttombg.svg) 100% 97% / 70vw no-repeat, #ff8c32;
		padding: min(200px,20vw) 5% calc(180px + 15vw) 5%;
	}
	> div {
		position: relative;
		z-index: 1;
		max-width: 1000px;
		margin-inline: auto;
		text-align: center;
		opacity: 0;
		scale: 0.8;
		transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
		&.is-revealed {
			opacity: 1;
			scale: 1;
		}
		> p.top {
			color: #fff532;
			font-size: min(1.8rem, 6vw);
			font-weight: 900;
			line-height: 1;
			letter-spacing: 0.08em;
		}
		> div.title {
			margin-top: -2px;
			position: relative;
			min-height: 80px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 40px;
			background: #fff;
			box-shadow: 10px 12px 0 #fff532;
			&::before {
				position: absolute;
				left: 50%;
				top: 55%;
				width: min(350px, 80%);
				height: 15px;
				transform: translateX(-50%) skewX(-13deg);
				transform-origin: -50%;
				transition: scale 0.45s 0.1s cubic-bezier(0.5, 0, 0.26, 1);
				transition-delay: 0.3s;
				background: #80cff4;
				content: "";
				scale: 0 1;
			}
			&.is-revealed::before {
				scale: 1 1;
			}
			> h1 {
				position: relative;
				z-index: 1;
				font-size: min(2.0rem, 6vw);
				font-weight: 900;
				line-height: 1;
			}
			@media (width < 500px) {
				min-height: 70px;
				box-shadow: 6px 8px 0 #80cff4;
			}
		}
		> p.text {
			color: #fff;
			font-size: min(1.0rem, 4.5vw);
			font-weight: 400;
			line-height: 1.4;
			margin-block: 40px 30px;
		}
		> div.block {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			column-gap: 20px;
			row-gap: 40px;
			@media (width < 810px) {
				grid-template-columns: repeat(1, 1fr);
			}
			> article {
				display: grid;
				opacity: 0;
				scale: 0.8;
				transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
				&.is-revealed {
					opacity: 1;
					scale: 1;
				}
				&:nth-of-type(2) {
					transition-delay: 0.3s;
					@media (width < 810px) {
						transition-delay: unset;
					}
				}
				> div.step {
					position: relative;
					z-index: 2;
					display: grid;
					min-width: 200px;
					min-height: 90px;
					background-color: #00a0e9;
					justify-self: center;
					border-radius: 50px;
					@media (width < 600px) {
						justify-items: center;
						min-height: 60px;
					}
					> h3 {
						padding-inline: 50px;
						justify-self: center;
						align-self: center;
						grid-area: 1/1/2/2;
						font-size: min(2.0rem, 7vw);
						font-weight: 900;
						line-height: 1;
						color: #fff;
						@media (width < 600px) {
							padding-inline: 30px;
						}
					}
				}
				> div.content {
					display: grid;
					grid-template-rows: subgrid;
					grid-row: span 2;
					position: relative;
					row-gap: 20px;
					z-index: 1;
					margin-top: -45px;
					padding: 60px 40px 30px 40px;
					border-radius: 40px;
					background: #fff;
					@media (width < 600px) {
						margin-top: -30px;
						row-gap: 5px;
					}
					@media (width < 480px) {
						padding: 40px 20px 20px 20px;
						border-radius: 20px;
					}
					> p {
						align-self: start;
						font-size: min(0.9rem, 4.5vw);
						font-weight: 500;
						line-height: 1.6;
						color: #333;
						text-align: justify;
						@media (width < 600px) {
							font-weight: unset;
						}
					}
					> figure{
						align-self: end;
						@media (width < 480px) {
							padding-inline: 0px;
						}
						> img {
							max-width: 100%;
						}
					}
				}
			}
		}
		> figure {
			position: absolute;
			z-index: 3;
			text-align: center;
			opacity: 0;
			scale: 0.8;
			transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			transition-delay: 0.5s;
			top: -23%;
			left: -7%;
			&.is-revealed {
				opacity: 1;
				scale: 1;
			}
			@media (width < 810px) {
				top: -10%;
			}
			@media (width < 780px) {
				display: none;
			}
			> img {
				width: min(16vw, 170px);
			}
		}
	}
}
section.staff {
	margin-top: -50px;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	position: relative;
	padding: min(130px,12vw) 5% min(100px,11vw) 5%;
	background: radial-gradient(circle, #0785be 0 1.5px, transparent 1.6px), radial-gradient(circle, #0785be 0 1.5px, transparent 1.6px), #00a0e9;
	background-size: 8.75px 9px, 8.75px 9px;
	background-position: 0.125px -2px, -4.375px 2.5px;
	> div {
		position: relative;
		z-index: 1;
		max-width: 1000px;
		margin-inline: auto;
		text-align: center;
		opacity: 0;
		scale: 0.8;
		transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
		&.is-revealed {
			opacity: 1;
			scale: 1;
		}
		> p.top {
			color: #fff532;
			font-size: min(1.8rem, 6vw);
			font-weight: 900;
			line-height: 1;
			letter-spacing: 0.08em;
		}
		> div.title {
			margin-top: -2px;
			position: relative;
			min-height: 80px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 40px;
			background: #fff;
			box-shadow: 10px 12px 0 #fff532;
			&::before {
				position: absolute;
				left: 50%;
				top: 55%;
				width: min(250px, 60%);
				height: 15px;
				transform: translateX(-50%) skewX(-13deg);
				transform-origin: -50%;
				transition: scale 0.45s 0.1s cubic-bezier(0.5, 0, 0.26, 1);
				transition-delay: 0.3s;
				background: #fff532;
				content: "";
				scale: 0 1;
			}
			&.is-revealed::before {
				scale: 1 1;
			}
			> h2 {
				position: relative;
				z-index: 1;
				font-size: min(2.0rem, 6vw);
				font-weight: 900;
				line-height: 1;
			}
			@media (width < 500px) {
				min-height: 70px;
				box-shadow: 6px 8px 0 #fff532;
			}
		}
		> p.text {
			color: #fff;
			font-size: min(1.0rem, 5vw);
			font-weight: 400;
			line-height: 1.4;
			margin-block: 40px 30px;
		}
		> figure {
			position: absolute;
			z-index: 3;
			text-align: center;
			opacity: 0;
			scale: 0.8;
			transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			transition-delay: 0.5s;
			top: -55%;
			right: -3%;
			&.is-revealed {
				opacity: 1;
				scale: 1;
			}
			@media (width < 810px) {
				top: -45%;
			}
			@media (width < 780px) {
				display: none;
			}
			> img {
				width: min(16vw, 180px);
			}
		}
	}
}
section.staffcontent {
	margin-top: -51px;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	position: relative;
	z-index: 5;
	padding: 50px 5% min(100px,5vw) 5%;
	background: radial-gradient(circle, #0785be 0 1.5px, transparent 1.6px), radial-gradient(circle, #0785be 0 1.5px, transparent 1.6px), #00a0e9;
	background-size: 8.75px 9px, 8.75px 9px;
	background-position: 0.125px -2px, -4.375px 2.5px;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div.main {
			> article {
				padding: 50px 5%;
				display: grid;
				grid-template-columns: 1fr 1fr;
				align-items: center;
				border-bottom: 2px dotted #fff532;
				column-gap: 80px;
				row-gap: 40px;
				opacity: 0;
				scale: 0.8;
				transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
				&.is-revealed {
					opacity: 1;
					scale: 1;
				}
				&:first-child {
					padding: 0px 5% 50px 5%;
				}
				&:last-child {
					border-bottom: none;
				}
				@media (width < 790px) {
					grid-template-columns: 1fr;
					row-gap: 50px;
				}
				&:nth-of-type(even) {
					> div.staff-image {
						order: 2;
						@media (width < 790px) {
							order: unset;
						}
					}
				}
				> div.staff-image {
					> figure {
						> img {
							max-width: 100%;
							box-shadow: 10px 12px 0 #fff532;
							border-radius: 40px;
						}
					}
				}
				> div.staff-text {
					display: grid;
					> p {
						color: #fff;
						font-size: min(1.0rem, 5vw);
						font-weight: 500;
						line-height: 1.4;
						> b {
							font-size: min(1.8rem, 6vw);
						}
					}
					> h2 {
						margin-block: 10px;
						color: #fff;
						font-size: min(1.8rem, 6vw);
						font-weight: 500;
						line-height: 1.3;
					}
					> label.interview-link {
						align-self: end;
						justify-self: end;
						text-decoration: none;
						> input[type="radio"] {
							display: none;
						}
						> label {
							background: url(./image/staff_link_allow.svg);
							background-repeat: no-repeat;
							background-size: 100% auto;
							background-position: 100% 100%;
							gap: 14px;
							padding: 5px 30px 5px 5px;
							color: #fff532;
							font-weight: 800;
							cursor: pointer;
							&:hover {
								opacity: 0.8;
							}
						}
					}
				}
			}
		}
		> div.popup {
			position: fixed;
			inset: 0;
			z-index: 20;
			display: none;
			place-items: center;
			padding: 28px;
			background: rgba(0, 24, 34, .72);
			&:has(#open-mm:checked) #interview-mm {
				display: grid;
			}
			@media (width < 450px) {
				padding: 20px;
			}
			> label.modal-dismiss {
				position: absolute;
				inset: 0;
				cursor: pointer;
				> input[type="radio"] {
					display: none;
				}
				> label {
				}
			}
			> div {
				position: relative;
				> label.modal-close {
					position: absolute;
					z-index: 7;
					top: -15px;
					right: -15px;
					margin: 0;
					text-decoration: none;
					@media (width < 650px) {
						top: 50px;
					}
					> input[type="radio"] {
						display: none;
					}
					> label {
						> figure {
							cursor: pointer;
							> img {
								width: 60px;
								height: 60px;
								@media (width < 600px) {
									width: 40px;
									height: 40px;
								}
							}
						}
					}
				}
				> article {
					max-width: 1100px;
					z-index: 3;
					top: 12px;
					float: right;
					display: grid;
					column-gap: 20px;
					place-items: center;
					text-decoration: none;
					max-height: 88vh;
					overflow: auto;
					overscroll-behavior: contain;
					background: #fff;
					border-radius: 60px;
					@media (width < 600px) {
						border-radius: 40px;
					}
					> div.content {
						padding: 80px 7% 150px 7%;
						position: relative;
						display: grid;
						grid-template-columns: 1fr 1fr;
						column-gap: 20px;
						z-index: 2;
						@media (width < 800px) {
							padding: 20px 5% 5px 5%;
							grid-template-columns: 1fr;
							row-gap: 15px;
						}
						&::before {
							content: "";
							position: absolute;
							z-index: 0;
							top: 0;
							left: 0;
							aspect-ratio: 1;
							width: 300px;
							background: url(./image/staff_bgdesign01.svg) left top / contain no-repeat;
							pointer-events: none;
							@media (width < 800px) {
								width: min(250px, 45vw);
								opacity: 0.2;
							}
						}
						&::after {
							content: "";
							position: absolute;
							z-index: 0;
							right: 0;
							bottom: 0;
							aspect-ratio: 1;
							width: 300px;
							background: url("./image/staff_bgdesign02.svg") right bottom / contain no-repeat;
							pointer-events: none;
							@media (width < 800px) {
								width: min(250px, 45vw);
								opacity: 0.2;
							}
						}
						> figure {
							&:nth-of-type(1) {
								align-self: end;
								justify-self: end;
								@media (width < 800px) {
									justify-self: center;
									order: 2;
								}
								> img {
									max-width: 400px;
									width: 100%;
									filter: drop-shadow(6px 7px 0 #fff532);
									@media (width < 800px) {
										max-width: 100px;
									}
								}
							}
							&:nth-of-type(2) {
								position: absolute;
								top: 5%;
								right: 8%;
								@media (width < 900px) {
									top: 5%;
									right: 9%;
								}
								@media (width < 650px) {
									top: 5.5%;
									right: 11%;
								}
								> img {
									height: 160px;
									@media (width < 900px) {
										height: 100px;
									}
								}
							}
						}
						> div.copy {
							z-index: 1;
							display: grid;
							> h2 {
								justify-self: start;
								padding: 5px 12px;
								background-color: #00a0e9;
								color: #fff;
								font-size: min(2.0rem, 5vw);
								font-weight: 700;
								line-height: 1.0;
								margin-bottom: 3px;
							}
							> div {
								display: flex;
								column-gap: 3px;
								align-items: center;
								margin-bottom: 5px;
								> p {
									&:nth-of-type(1) {
										border-radius: 5px;
										border: 1px solid #00a0e9;
										padding: 5px 10px;
										color: #00a0e9;
										font-size: min(0.9rem, 4.5vw);
										font-weight: 400;
										line-height: 1.0;
									}
									&:nth-of-type(2) {
										padding: 5px 5px;
										color: #00a0e9;
										font-size: min(0.9rem, 4.5vw);
										font-weight: 400;
										line-height: 1.0;
									}
								}
							}
							> p {
								justify-self: start;
								margin-bottom: 5px;
								border-radius: 5px;
								border: 1px solid #00a0e9;
								padding: 5px 10px;
								color: #00a0e9;
								font-size: min(0.9rem, 4.5vw);
								line-height: 1.0;
								text-align: justify;
								@media (width < 350px) {
									padding-inline: 5px;
									line-height: 1.3;
								}
								> br {
									display: none;
									@media (width < 350px) {
										display: block;
									}
								}
							}
							> article {
								margin-top: 10px;
								> div {
									display: grid;
									grid-template-columns: auto 1fr;
									align-items: center;
									column-gap: 10px;
									@media (width < 400px) {
										column-gap: 5px;
									}
									> figure {
										margin-top: 3px;
										> img {
											width: 35px;
											@media (width < 400px) {
												width: 25px;
											}
										}
									}
									> h3 {
										color: #00a0e9;
										font-size: min(1.0rem, 5vw);
										font-weight: 600;
										line-height: 1.4;
										letter-spacing: 0.1rem;
										@media (width < 500px) {
											letter-spacing: unset;
										}
									}
								}
								> p {
									margin-top: 10px;
									color: #00a0e9;
									font-size: min(0.9rem, 4.5vw);
									line-height: 1.4;
									text-align: justify;
									@media (width < 500px) {
										margin-top: 5px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
html:has(.popup-open:checked),
body:has(.popup-open:checked) {
	overflow: hidden;
	overscroll-behavior: none;
}
body:has(#open01:checked) #interview01,
body:has(#open02:checked) #interview02,
body:has(#open03:checked) #interview03,
body:has(#open04:checked) #interview04 {
	display: grid;
}
section.workstyle {
	position: relative;
	z-index: 4;
	margin-top: -50px;
	padding: min(180px,25vw) 5% min(100px,10vw) 5%;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 3px, transparent 3px, transparent 10px), #ff8c32;
	> div {
		position: relative;
		z-index: 1;
		max-width: 1000px;
		margin-inline: auto;
		> div {
			opacity: 0;
			scale: 0.8;
			transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			&.is-revealed {
				opacity: 1;
				scale: 1;
			}
			> p.top {
				text-align: center;
				color: #fff532;
				font-size: min(1.8rem, 6vw);
				font-weight: 900;
				line-height: 1;
				letter-spacing: 0.08em;
			}
			> div.title {
				text-align: center;
				margin-top: -2px;
				position: relative;
				min-height: 80px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 40px;
				background: #fff;
				box-shadow: 10px 12px 0 #fff532;
				&::before {
					position: absolute;
					left: 50%;
					top: 55%;
					width: min(200px, 45%);
					height: 15px;
					transform: translateX(-50%) skewX(-13deg);
					transform-origin: -50%;
					transition: scale 0.45s 0.1s cubic-bezier(0.5, 0, 0.26, 1);
					transition-delay: 0.3s;
					background: #fff532;
					content: "";
					scale: 0 1;
				}
				&.is-revealed::before {
					scale: 1 1;
				}
				> h1 {
					position: relative;
					z-index: 1;
					font-size: min(2.0rem, 6vw);
					font-weight: 900;
					line-height: 1;
				}
				@media (width < 500px) {
					min-height: 70px;
					box-shadow: 6px 8px 0 #fff532;
				}
			}
			> p.text {
				text-align: center;
				color: #fff;
				font-size: min(1.0rem, 5vw);
				font-weight: 400;
				line-height: 1.4;
				margin-block: 40px 30px;
			}
		}
		> article {
			max-width: 800px;
			margin-inline: auto;
			opacity: 0;
			scale: 0.8;
			transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			&.is-revealed {
				opacity: 1;
				scale: 1;
			}
			&:nth-of-type(2) {
				margin-top: 100px;
			}
			> h2 {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20px 30px;
				color: #ff8c32;
				background-color: #fff;
				font-size: min(1.8rem, 6vw);
				font-weight: 900;
				line-height: 1;
				letter-spacing: 0.08em;
			}
			> ol {
				position: relative;
				margin-block: 30px;
				padding-block: 20px;
				list-style: none;
				background: radial-gradient(circle at calc(8.5% + 1.5px) 6px, #fff 0 6px, transparent 7px), radial-gradient(circle at calc(8.5% + 1.5px) calc(100% - 6px), #fff 0 6px, transparent 7px);
				@media (width < 900px) {
					background: radial-gradient(circle at calc(69px + 1.5px) 6px, #fff 0 6px, transparent 7px), radial-gradient(circle at calc(69px + 1.5px) calc(100% - 6px), #fff 0 6px, transparent 7px);
				}
				@media (width < 500px) {
					background: radial-gradient(circle at calc(40px + 1.5px) 6px, #fff 0 6px, transparent 7px), radial-gradient(circle at calc(40px + 1.5px) calc(100% - 6px), #fff 0 6px, transparent 7px);
				}
				&::before {
					position: absolute;
					top: 6px;
					bottom: 6px;
					left: 8.5%;
					width: 3px;
					border-radius: 999px;
					background: rgba(255, 255, 255, 0.88);
					content: "";
					z-index: 0;
					@media (width < 900px) {
						left: 69px;
					}
					@media (width < 500px) {
						left: 40px;
					}
				}
				> li {
					margin-top: 20px;
					position: relative;
					z-index: 1;
					display: grid;
					grid-template-columns: 130px 1fr;
					align-items: end;
					&:last-child {
						min-height: 0;
					}
					@media (width < 500px) {
						grid-template-columns: 90px 1fr;
					}
					> time {
						position: relative;
						z-index: 2;
						color: #fff532;
						-webkit-text-stroke: 12px #ff8c32;
						paint-order: stroke fill;
						font-size: 1.8rem;
						font-weight: 800;
						line-height: 1;
						text-align: right;
						white-space: nowrap;
						align-self: start;
						letter-spacing: 0.05rem;
						> b {
							color: #fff;
						}
						@media (width < 500px) {
							font-size: 1.4rem;
						}
					}
					> div{
						margin-top: 5px;
						padding-left: 25px;
						@media (width < 500px) {
							padding-left: 10px;
						}
						> h3 {
							-webkit-text-stroke: 12px #ff8c32;
							paint-order: stroke fill;
							color: #fff;
							margin: -3px 0 8px;
							font-size: min(1.2rem, 6vw);
							font-weight: 800;
							line-height: 1.05;
							letter-spacing: 0.3rem;
							&.space {
								margin-bottom: 40px;
							}
						}
						> p {
							text-align: justify;
							-webkit-text-stroke: 6px #ff8c32;
							paint-order: stroke fill;
							color: #fff;
							margin: 0;
							font-size: min(0.9rem, 5.5vw);
							line-height: 1.45;
							letter-spacing: 0.2rem;
							@media (width < 500px) {
								letter-spacing: 0.1rem;
								-webkit-text-stroke: 4px #ff8c32;
							}
						}
					}
				}
			}
		}
		> figure {
			position: absolute;
			z-index: 3;
			text-align: center;
			opacity: 0;
			scale: 0.8;
			transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			&.is-revealed {
				opacity: 1;
				scale: 1;
			}
			&:nth-of-type(1) {
				top: 17%;
				left: -4%;
			}
			&:nth-of-type(2) {
				transition-delay: 0.15s;
				top: 19%;
				right: -8%;
				@media (width < 1230px) {
					top: 13.5%;
					right: -4%;
				}
			}
			&:nth-of-type(3) {
				transition-delay: 0.25s;
				top: 29%;
				right: -10%;
				@media (width < 1230px) {
					top: 24%;
					right: -3%;
				}
			}
			&:nth-of-type(4) {
				top: 45%;
				left: -11%;
				@media (width < 1230px) {
					top: 51%;
					left: -5%;
				}
			}
			&:nth-of-type(5) {
				bottom: 31%;
				right: -2%;
				@media (width < 700px) {
					bottom: 36%;
					right: -2%;
				}
				@media (width < 440px) {
					bottom: 39%;
					right: -2%;
				}
			}
			&:nth-of-type(6) {
				bottom: 23%;
				left: -12%;
				@media (width < 1330px) {
					bottom: 15%;
					left: -9%;
				}
				@media (width < 1130px) {
					bottom: 23%;
					right: -1%;
					left: unset;
				}
				@media (width < 800px) {
					bottom: 21%;
					right: -4%;
				}
				@media (width < 640px) {
					bottom: 23%;
					right: -4%;
				}
			}
			&:nth-of-type(7) {
				bottom: 7%;
				right: -7%;
				@media (width < 1230px) {
					bottom: 5%;
					right: -6%;
				}
			}
			&:nth-of-type(1),
			&:nth-of-type(5) {
				> img {
					width: min(150px, 12vw);
					@media (width < 1000px) {
						width: min(100px, 9vw);
					}
				}
			}
			&:nth-of-type(2),
			&:nth-of-type(3),
			&:nth-of-type(4),
			&:nth-of-type(6),
			&:nth-of-type(7) {
				> img {
					width: min(220px, 18vw);
					@media (width < 1000px) {
						width: min(140px, 18vw);
					}
				}
			}
		}
	}
}
section.benefits {
	position: relative;
	z-index: 3;
	margin-top: -50px;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	padding: min(130px,30vw) 5% min(100px,15vw) 5%;
	background-color: #ffef73;
	> div {
		position: relative;
		z-index: 1;
		max-width: 1000px;
		margin-inline: auto;
		text-align: center;
		> div {
			opacity: 0;
			scale: 0.8;
			transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			&.is-revealed {
				opacity: 1;
				scale: 1;
			}
			> p.top {
				text-align: center;
				color: #ff8c32;
				font-size: min(1.8rem, 6vw);
				font-weight: 900;
				line-height: 1;
				letter-spacing: 0.08em;
			}
			> div.title {
				text-align: center;
				margin-top: -2px;
				position: relative;
				min-height: 80px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 40px;
				background: #fff;
				box-shadow: 10px 12px 0 #00a0e9;
				&::before {
					position: absolute;
					left: 50%;
					top: 55%;
					width: min(200px, 45%);
					height: 15px;
					transform: translateX(-50%) skewX(-13deg);
					transform-origin: -50%;
					transition: scale 0.45s 0.1s cubic-bezier(0.5, 0, 0.26, 1);
					transition-delay: 0.3s;
					background: #fff532;
					content: "";
					scale: 0 1;
				}
				&.is-revealed::before {
					scale: 1 1;
				}
				> h1 {
					position: relative;
					z-index: 1;
					font-size: min(2.0rem, 6vw);
					font-weight: 900;
					line-height: 1;
				}
				@media (width < 500px) {
					min-height: 70px;
					box-shadow: 6px 8px 0 #00a0e9;
				}
			}
		}
		> article {
			margin-top: min(60px,7vw);
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 30px;
			@media (width < 700px) {
				gap: 5px;
			}
			> figure {
				opacity: 0;
				scale: 0.8;
				transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
				&.is-revealed {
					opacity: 1;
					scale: 1;
				}
				&:nth-of-type(even) {
					transition-delay: 0.2s;
					@media (width < 780px) {
						transition-delay: unset;
					}
				}
				> img {
					border-radius: 50px;
					max-width: 100%;
					border: 5px solid #ccc;
					@media (width < 700px) {
						border: 2px solid #ccc;
						border-radius: 10px;
					}
				}
			}
		}
		> picture {
			display: block;
			margin-top: 30px;
			@media (width < 700px) {
				margin-top: 5px;
			}
			> img {
				border-radius: 50px;
				max-width: 100%;
				border: 5px solid #ccc;
				opacity: 0;
				scale: 0.8;
				transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
				@media (width < 700px) {
					border: 2px solid #ccc;
					border-radius: 10px;
				}
				&.is-revealed {
					opacity: 1;
					scale: 1;
				}
			}
		}
		> figure {
			position: absolute;
			z-index: 3;
			text-align: center;
			opacity: 0;
			scale: 0.8;
			transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			transition-delay: 0.5s;
			top: -3%;
			right: -5%;
			&.is-revealed {
				opacity: 1;
				scale: 1;
			}
			@media (width < 780px) {
				display: none;
			}
			> img {
				width: min(16vw, 180px);
			}
		}
	}
}
section.support {
	position: relative;
	z-index: 2;
	margin-top: -50px;
	padding: min(130px,25vw) 5% min(100px,6vw) 5%;
	background-color: #fffad0;
	> div {
		position: relative;
		z-index: 1;
		max-width: 1000px;
		margin-inline: auto;
		text-align: center;
		> div:nth-of-type(1) {
			opacity: 0;
			scale: 0.8;
			transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			&.is-revealed {
				opacity: 1;
				scale: 1;
			}
			> p.top {
				text-align: center;
				color: #00a0e9;
				font-size: min(1.8rem, 6vw);
				font-weight: 900;
				line-height: 1;
				letter-spacing: 0.08em;
			}
			> div.title {
				text-align: center;
				margin-top: -2px;
				position: relative;
				min-height: 80px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 40px;
				background: #fff;
				box-shadow: 10px 12px 0 #00a0e9;
				&::before {
					position: absolute;
					left: 50%;
					top: 55%;
					width: min(330px, 70%);
					height: 15px;
					transform: translateX(-50%) skewX(-13deg);
					transform-origin: -50%;
					transition: scale 0.45s 0.1s cubic-bezier(0.5, 0, 0.26, 1);
					transition-delay: 0.3s;
					background: #fff532;
					content: "";
					scale: 0 1;
				}
				&.is-revealed::before {
					scale: 1 1;
				}
				> h1 {
					position: relative;
					z-index: 1;
					font-size: min(2.0rem, 6vw);
					font-weight: 900;
					line-height: 1;
				}
				@media (width < 500px) {
					min-height: 70px;
					box-shadow: 6px 8px 0 #00a0e9;
				}
			}
			> p.text {
				text-align: center;
				color: #333;
				font-size: min(1.0rem, 5vw);
				font-weight: 400;
				line-height: 1.4;
				margin-block: 40px 30px;
			}
			> h3 {
				text-align: center;
				color: #333;
				font-size: min(1.4rem, 6vw);
				font-weight: 600;
				line-height: 1.0;
				margin-block: 30px 10px;
			}
		}
		> div:nth-of-type(2) {
			margin-top: 30px;
			border-radius: 30px;
			border: 15px solid #e5f1f9;
			background-color: #fff;
			@media (width < 500px) {
				border-width: 5px;
				border-radius: 10px;
			}
			> div.schedule {
				padding-block: 20px;
				padding-inline: min(40px,5vw);
				width: 100%;
				display: grid;
				grid-template-columns: auto auto;
				text-align: left;
				column-gap: 20px;
				@media (width < 930px) {
					grid-template-columns: auto;
				}
				> div {
					> p {
						padding-block: 5px;
						color: #333;
						font-size: min(1.1rem, 4vw);
						line-height: 1.4;
					}
				}
			}
		}
		> div:nth-of-type(3) {
			margin-top: 60px;
			> h3 {
				text-align: center;
				color: #333;
				font-size: min(1.4rem, 6vw);
				font-weight: 600;
				line-height: 1.0;
				margin-block: 30px 10px;
			}
			> div {
				margin-top: 30px;
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 30px;
				@media (width < 890px) {
					grid-template-columns: 1fr;
					gap: 10px;
				}
				> article {
					border-radius: 30px;
					border: 3px solid #000;
					background-color: #fff;
					padding: 0 30px 30px 30px;
					position: relative;
					@media (width < 500px) {
						border: 2px solid #888;
						border-radius: 10px;
					}
					> figure {
						&:nth-of-type(1) {
							position: absolute;
							top: 0;
							left: 30px;
							> img {
								width: 50px;
							}
						}
						&:nth-of-type(2) {
							position: absolute;
							top: 30px;
							right: 30px;
							> img {
								width: 80px;
							}
						}
					}
					> h4 {
						padding-top: 100px;
						color: #333;
						font-size: min(1.4rem, 5vw);
						font-weight: 600;
						line-height: 1.0;
						text-align: left;
					}
					> p {
						padding-top: 20px;
						color: #333;
						font-size: min(0.9rem, 4.5vw);
						font-weight: 500;
						line-height: 1.6;
						text-align: justify;
						@media (width < 500px) {
							padding-top: 10px;
							font-weight: unset;
						}
					}
				}
			}
		}
		> picture {
			padding-top: 30px;
			> img {
				max-width: 100%;
				opacity: 0;
				scale: 0.8;
				transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
				margin-top: 30px;
				&.is-revealed {
					opacity: 1;
					scale: 1;
				}
			}
		}
	}
}
section.data {
	padding: min(80px,5vw) 5% min(80px,5vw) 5%;
	background-color: #fffad0;
	> div {
		position: relative;
		z-index: 1;
		max-width: 1000px;
		margin-inline: auto;
		text-align: center;
		> div {
			opacity: 0;
			scale: 0.8;
			transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			&.is-revealed {
				opacity: 1;
				scale: 1;
			}
			> p.top {
				text-align: center;
				color: #ff8c32;
				font-size: min(1.8rem, 6vw);
				font-weight: 900;
				line-height: 1;
				letter-spacing: 0.08em;
			}
			> div.title {
				text-align: center;
				margin-top: -2px;
				position: relative;
				min-height: 80px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 40px;
				background: #fff;
				box-shadow: 10px 12px 0 #00a0e9;
				&::before {
					position: absolute;
					left: 50%;
					top: 55%;
					width: min(200px, 45%);
					height: 15px;
					transform: translateX(-50%) skewX(-13deg);
					transform-origin: -50%;
					transition: scale 0.45s 0.1s cubic-bezier(0.5, 0, 0.26, 1);
					transition-delay: 0.3s;
					background: #fff532;
					content: "";
					scale: 0 1;
				}
				&.is-revealed::before {
					scale: 1 1;
				}
				> h1 {
					position: relative;
					z-index: 1;
					font-size: min(2.0rem, 6vw);
					font-weight: 900;
					line-height: 1;
				}
				@media (width < 500px) {
					min-height: 70px;
					box-shadow: 6px 8px 0 #00a0e9;
				}
			}
			> p.text {
				text-align: center;
				color: #333;
				font-size: min(1.0rem, 5vw);
				font-weight: 400;
				line-height: 1.4;
				margin-block: 40px 30px;
			}
		}
		> article {
			margin-top: 60px;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 30px;
			@media (width < 500px) {
				gap: 5px;
			}
			&:nth-of-type(2) {
				margin-top: min(30px,5vw);
			}
			> figure {
				opacity: 0;
				scale: 0.8;
				transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
				&.is-revealed {
					opacity: 1;
					scale: 1;
				}
				&:nth-of-type(even) {
					transition-delay: 0.2s;
					@media (width < 780px) {
						transition-delay: unset;
					}
				}
				> img {
					border-radius: 50px;
					max-width: 100%;
					border: 5px solid #ccc;
					@media (width < 500px) {
						border-radius: 10px;
						border-width: 2px;
					}
				}
			}
		}
		> h3 {
			text-align: center;
			color: #333;
			font-size: min(1.4rem, 6vw);
			font-weight: 600;
			line-height: 1.0;
			margin-block: 30px 0px;
		}
		> picture {
			padding-top: 30px;
			@media (width < 500px) {
				padding-top: 10px;
			}
			> img {
				border-radius: 50px;
				max-width: 100%;
				border: 5px solid #ccc;
				opacity: 0;
				scale: 0.8;
				transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
				margin-top: 30px;
				@media (width < 500px) {
					margin-top: 5px;
					border-width: 2px;
					border-radius: 10px;
				}
				&.is-revealed {
					opacity: 1;
					scale: 1;
				}
			}
		}
		> figure {
			position: absolute;
			z-index: 3;
			text-align: center;
			opacity: 0;
			scale: 0.8;
			transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			transition-delay: 0.5s;
			top: 0%;
			right: -8%;
			&.is-revealed {
				opacity: 1;
				scale: 1;
			}
			@media (width < 780px) {
				display: none;
			}
			> img {
				width: min(16vw, 180px);
			}
		}
	}
}
section.faq {
	padding: min(80px,5vw) 5% min(200px,25vw) 5%;
	background-color: #fffad0;
	> div {
		position: relative;
		max-width: 1000px;
		margin-inline: auto;
		> div.title {
			display: grid;
			justify-items: center;
			opacity: 0;
			scale: 0.8;
			transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			&.is-revealed {
				opacity: 1;
				scale: 1;
			}
			> figure {
				grid-area: 1/1/2/2;
				> img {
					max-width: 400px;
					@media (width < 530px) {
						max-width: 280px;
					}
				}
			}
			> div {
				grid-area: 1/1/2/2;
				align-self: end;
				margin-bottom: 80px;
				@media (width < 530px) {
					margin-bottom: 40px;
				}
				> figure {
					text-align: center;
					> img {
						max-width: 200px;
						@media (width < 530px) {
							max-width: 150px;
						}
					}
				}
				> p {
					padding-top: 10px;
					text-align: center;
					color: #333;
					font-size: min(1.3rem, 6vw);
					font-weight: 700;
					line-height: 1.0;
					letter-spacing: 0.2rem;
				}
			}
		}
		> div.block {
			position: relative;
			z-index: 3;
			&.is-revealed {
				> article {
					opacity: 1;
		 				scale: 1;
				}
			}
			> article {
				margin-bottom: min(40px,4vw);
				border-radius: 10px;
				background-color: #fff;
				transition: opacity 0.3s 0.4s ease, scale 0.3s 0.4s ease;
				opacity: 0;
 				scale: 0.95;
				&:nth-of-type(2) {
					transition-delay: 0.45s;
				}
				&:nth-of-type(3) {
					transition-delay: 0.5s;
				}
				&:nth-of-type(4) {
					transition-delay: 0.55s;
				}
				&:nth-of-type(5) {
					transition-delay: 0.6s;
				}
				&:nth-of-type(6) {
					transition-delay: 0.65s;
				}
				&:last-of-type {
					margin-bottom: 0px;
				}
				> input[type="checkbox"] {
					display: none;
					&:checked + label > figure {
						&:nth-of-type(2) {
							transform: rotate(-45deg);
						}
					}
					&:checked + label + div {
						animation-name: moreToggleOpen;
						animation-duration: 0.3s;
						animation-fill-mode: forwards;
						animation-timing-function: ease-in;
					}
					& + label + div {
						animation-name: moreToggleClose;
						animation-duration: 0.3s;
						animation-fill-mode: forwards;
						animation-timing-function: ease-out;
					}
				}
				> label {
					background-color: #00a0e9;
					border-radius: 10px;
					padding: 15px 30px;
					list-style: none;
					display: grid;
					grid-template-columns: 50px 1fr 24px;
					align-items: center;
					cursor: pointer;
					column-gap: 20px;
					@media (width < 500px) {
						padding: 10px;
						grid-template-columns: min(15vw, 50px) 1fr 18px;
						column-gap: 10px;
					}
					> h3 {
						color: #fff;
						font-size: min(1.1rem, 4.5vw);
						line-height: 1.3;
						font-weight: 600;
						@media (width < 500px) {
							font-weight: 500;
						}
					}
					> figure {
						&:nth-of-type(1) {
							> img {
								width: 50px;
								@media (width < 500px) {
									width: min(15vw, 50px);
								}
							}
						}
						&:nth-of-type(2) {
							transition: 0.2s;
							> img {
								width: 24px;
								@media (width < 500px) {
									width: 18px;
								}
							}
						}
					}
				}
				> div {
					overflow: hidden;
					> div {
						background-color: #fff;
						border-radius: 10px;
						padding: 25px 80px 25px 80px;
						@media (width < 500px) {
							padding: 15px 7% 15px 7%;
						}
						> iframe {
							width: 100%;
							height: min(300px, 50vw);
						}
						> p {
							font-size: min(1rem, 4vw);
							line-height: 1.6;
							color: #333;
							text-align: justify;
						}
					}
				}
			}
		}
		> figure {
			position: absolute;
			z-index: 2;
			text-align: center;
			opacity: 0;
			scale: 0.8;
			transition: opacity 0.3s ease, scale 0.3s cubic-bezier(0.44, 0.42, 0.24, 1.55);
			transition-delay: 0.5s;
			top: min(17vw, 150px);
			right: 0%;
			&.is-revealed {
				opacity: 1;
				scale: 1;
			}
			@media (width < 780px) {
				display: none;
			}
			> img {
				width: min(13vw, 120px);
			}
		}
	}
}
@keyframes moreToggleOpen {
	0% {
		max-height: 0px;
	}
	80% {
		max-height: 100px;
	}
	90% {
		max-height: 200px;
	}
	100% {
		max-height: 9999px;
	}
}
@keyframes moreToggleClose {
	0% {
		max-height: 9999px;
	}
	10% {
		max-height: 200px;
	}
	20% {
		max-height: 100px;
	}
	100% {
		max-height: 0px;
	}
}
section.recruit {
	position: relative;
	z-index: 3;
	margin-block: -50px -40px;
	border-radius: 50px;
	padding: 0px 5% min(80px,10vw) 5%;
	background-color: #00a0e9;
	> div {
		position: relative;
		max-width: 1000px;
		margin-inline: auto;
		> div.title {
			display: grid;
			justify-items: center;
			> figure {
				grid-area: 1/1/2/2;
				> img {
					max-width: 400px;
					@media (width < 530px) {
						max-width: 220px;
					}
				}
			}
			> p {
				grid-area: 1/1/2/2;
				align-self: center;
				text-align: center;
				color: #00a0e9;
				font-size: min(3.0rem, 8vw);
				font-weight: 700;
				line-height: 1.0;
				letter-spacing: 0.2rem;
			}
		}
		> div#recruitArea {
			background-color: #fff;
			padding-inline: 100px;
			@media (width < 1100px) {
				padding-inline: 10px;
			}
			> div {
				> div {
					> article {
						margin-top: 50px;
						&:nth-of-type(1) {
							margin-top: 10px;
						}
						> h3 {
							padding-top: 80px;
							font-size: 1.3rem;
							line-height: 1.3;
							color: #00a0e9;
							text-align: center;
							@media (width < 500px) {
								padding-top: 20px;
							}
						}
						> div {
							margin-top: 20px;
							> table {
								border-collapse: collapse;
								width: 100%;
								> tbody {
									> tr {
										@media (width < 500px) {
											display: grid;
										}
										> th {
											font-size: min(1rem,4.5vw);
											color: #00a0e9;
											font-weight: 500;
											text-align-last: justify;
											line-height: 1.7;
											border-style: solid none solid none;
											border-width: 1px;
											border-color: #ddd;
											padding-block: 20px;
											padding-inline: 20px;
											white-space: nowrap;
											@media (width < 500px) {
												padding-inline: 5px;
												border-style: solid none none none;
												text-align-last: unset;
												text-align: left;
												padding-block: 20px 0;
											}
										}
										> td {
											font-size: min(1rem,4vw);
											color: #111;
											line-height: 1.7;
											border-style: solid none solid none;
											border-width: 1px;
											border-color: #ddd;
											padding-block: 20px;
											padding-inline: 20px;
											@media (width < 500px) {
												padding-inline: 5px;
												border-style: none;
												padding-block: 0px 20px;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
		> div.guidance {
			padding-block: 50px;
			padding-inline: 20px;
			background-color: #fff;
			text-align: center;
			@media (width < 500px) {
				padding-block: 20px;
			}
			> picture {
				> img {
					max-width: 100%;
				}
			}
		}
	}
}