@charset "utf-8";

/*
pagetitle
*/
.page-title {
	background-image: url(../img/topimage_customers.jpg);
	@media (width <= 800px) {
		background-image: url(../img/topimage_residents_sp.jpg);
	}
}


/* residents */
.residents {
	margin-bottom: 150px;
	@media (width <= 800px) {
		margin-bottom: 80px;
		padding: 0 20px;
	}
}
.read-residents {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.78;
	margin-bottom: 110px;
	@media (width <= 800px) {
		font-size: 16px;
		margin-bottom: 50px;
	}
}
.residents-content {
	display: flex;
	margin-bottom: 130px;
	@media (width <= 800px) {
		flex-wrap: wrap;
		gap: 30px 0;
		margin-bottom: 45px;
	}
	&:last-child {
		margin-bottom: 0;
	}
	.l-residents {
		width: 400px;
		margin-right: 6%;
		@media (width <= 800px) {
			width: 100%;
			margin-right: 0;
		}
		h2 {
			margin: 0;
			.jp {
				color: var(--green01);
				font-size: 36px;
				line-height: 1.5;
				margin-bottom: 0;
				@media (width <= 800px) {
					font-size: 28px;
					line-height: 1.43;
				}
			}
		}
	}
	.r-residents {
		width: 57.7%;
		@media (width <= 800px) {
			width: 100%;
		}
		.residents-detail {
			margin-bottom: 100px;
			@media (width <= 800px) {
				margin-bottom: 50px;
			}
			&:last-child {
				margin-bottom: 0;
			}
			h3 {
				font-size: 28px;
				line-height: 1.5;
				margin-bottom: 25px;
				padding-left: 25px;
				@media (width <= 800px) {
					font-size: 20px;
					line-height: 1.7;
					padding-left: 15px;
					margin-bottom: 20px;
				}
				&::before {
					position: absolute;
					left: 0;
					top: 50%;
					translate: 0 -50%;
					width: 6px;
					height: 100%;
					background-color: var(--yellowgreen01);
					border-radius: 9999px;
					content: "";
					@media (width <= 800px) {
						width: 5px;
					}
				}
			}
			p {
				margin-bottom: 30px;
				@media (width <= 800px) {
					margin-bottom: 20px;
				}
			}
			.btn {
				&.wide {
					max-width: 363px;
					@media (width <= 800px) {
						max-width: 295px;
						padding-left: 15px;
					}
				}
			}
		}
	}
}


/* faq */
.faq {
	border-radius: 100px 100px 0 0;
	background-color: var(--yellowgreen02);
	padding: 115px 0 470px;
	@media (width <= 800px) {
		border-radius: 30px 30px 0 0;
		padding: 60px 0 110px;
	}
	h2 {
		margin-bottom: 80px;
		@media (width <= 800px) {
			margin-bottom: 35px;
		}
	}
	h3 {
		font-size: 36px;
		text-align: center;
		margin-bottom: 56px;
		@media (width <= 800px) {
			font-size: 20px;
			margin-bottom: 20px;
		}
	}
	.faq-content {
		&:last-of-type {
			margin-bottom: 56px;
		}
	}
	.btn {
		margin: 0 auto;
	}
}