#key {
	height: 75dvh;
}

#key ul {
	width: 100%;
	height: 100%;

}

#key ul li {
	position: relative;
	background-position: 50% 50%, 50% 50%;
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	width: 100%;
	height: 100%;
}

#key ul li.slide01 {
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)), url(../img/top/slide01.jpg);
}
#key ul li.slide02 {
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)), url(../img/top/slide02.jpg);
}
#key ul li.slide03 {
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)), url(../img/top/slide03.jpg);
	background-position: 50% 50%, 70% 50%;
}
#key ul li.slide04 {
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)), url(../img/top/slide04.jpg);
	background-position: 50% 50%, 90% 50%;
}

#key ul li h3 {
	position: absolute;
	top: 62%;
	width: 100%;
	font-weight: 900;
	font-size: clamp(1.8rem, 0.8rem + 3.125vw, 4.8rem);
	text-shadow: 0px 0px 5px rgba(255, 255, 255, 1.0);
	text-align: center;
	word-break: keep-all;
	user-select: none;
}

#key .swiper-pagination-bullet {
	position: relative;
	top: 0px;
	transition: all 0.5s;
}

#key .swiper-pagination-bullet-active {
	top: 3px;
	background-color: transparent;
	border: solid 3px #333333;
	width: 14px;
	height: 14px;
}

#about {
	display: flex;
	justify-content: center;
	position: relative;
	margin: 150px 0px;
}

#about::after {
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	background: url(../img/about.jpg) 50% 50% / cover no-repeat;
	width: 50%;
	height: 100%;
}

#about div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: 50%;
	padding: 0px 50px;
	width: 50%;
	max-width: 400px;
}

#about div aside {
	padding-bottom: 30px;
}

@media (max-width: 767px) {
	#about {
		flex-direction: column;
		margin: 80px 0px;
	}

	#about::after {
		position: relative;
		margin-top: 80px;
		width: 100%;
		max-height: 500px;
		aspect-ratio: 1 / 1;
	}

	#about div {
		margin-left: 0px;
		margin-inline: auto;
		width: 100%;
	}
}

#space {
	padding: 0px 20px 200px;
}

@media (max-width: 767px) {
	#space {
		padding-bottom: 120px;
	}
}

#space ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: clamp(2rem, 0.7999999999999998rem + 2.5vw, 4rem);
	margin-inline: auto;
	width: 100%;
	max-width: 840px;
}

#space ul li {
	width: calc(50% - (clamp(2rem, 0.7999999999999998rem + 2.5vw, 4rem) / 2));
	max-width: 400px;
	aspect-ratio: 1 / 1;
}

#space ul li img {
	display: block;
	border-radius: 2px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#mission {
	background-image: url(../img/mission.jpg);
}

#greeting {
	background-image: url(../img/greeting.jpg);
}

#business {
	background-image: url(../img/business.jpg);
}

.intro {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	padding: clamp(8rem, 2rem + 12.5vw, 18rem) 0px;
}

.intro div {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 2px;
	margin-left: max(20px, calc(50% - 420px));
	padding: 50px clamp(3rem, 1.7999999999999998rem + 2.5vw, 5rem);
	max-width: 400px;
}

@media (max-width: 480px) {
	.intro div {
		margin-left: 0px;
		width: 70%;
	}
}

.intro div h2 {
	background-position: 50% 0%;
}

.intro aside {
	padding-bottom: 30px;
	font-weight: bold;
}

.intro aside ul li:not(:last-of-type) {
	padding-bottom: 20px;
}

.intro a.arrow {
	align-self: center;
}

#contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(8rem, 2rem + 12.5vw, 18rem) 0px;
}

#contact h2 {
	background: url(../img/icon_mail.webp) calc(52% + 100px) 0% / 30px auto no-repeat;
	padding-top: 24px;
	width: 100%;
	text-align: center;
}

#contact p a.btn {
	display: inline-flex;
	align-items: center;
	background-color: rgba(232, 232, 232, 1.0);
	border-radius: 5px;
	padding: 8px 30px;
	font-size: 1.4rem;
}

#contact p a.btn::before {
	content: "";
	display: inline-block;
	background: url(../img/mail.svg) 50% 50% / contain no-repeat;
	margin-right: 6px;
	width: 20px;
	aspect-ratio: 7 / 5;
}

#contact p a.btn.on {
	background-color: rgba(232, 232, 232, 0.6);
}