@charset "UTF-8";
/* ------------------------------
 新築について（PC）
------------------------------ */
.gradientOP,
.gradientGB {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	line-height: 1;
	font-weight: bold;
}
.gradientOP {
	opacity: .75;
	background: #ea7813;
	background: linear-gradient(90deg,rgba(234,120,19,1) 0%, rgba(237,110,55,.85) 50%, rgba(234,84,74,1) 100%);
}
.gradientGB {
	background: #96cf9a;
	background: linear-gradient(90deg,rgba(150,207,154,1) 0%, rgba(137,205,199,1) 40%, rgba(115,196,216,1) 100%);
}
.houseBox {
	position: relative;
	background: #f2f3f4;
	background: linear-gradient(90deg,rgba(242,243,244,1) 26%, rgba(242,249,251,1) 100%);
}
.number {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	top: -33px;
	right: 80px;
	color: #f29972;
	font-family: "Poppins", sans-serif;
	font-size: 7.1rem;
	line-height: 1;
	font-weight: 600;
	letter-spacing: -.01em;
}
.houseBox:nth-child(even) .number {
	right: 200px;
}
.number em {
	font-size: 2.2rem;
	font-style: normal;
}
@media print, screen and (min-width: 768px) {
	.flexBox.jc-c.ai-c.mb100 {
		column-gap: 40px;
	}
	.gradientOP,
	.gradientGB {
		width: 410px;
		height: 100px;
		border-radius: 20px;
		font-size: 2rem;
	}
	h2:has(+ .houseBox) {
		margin-bottom: 120px;
	}
	.houseBox {
		width: 742px;
		margin: 0 0 140px 398px;
		padding: 100px 80px 65px 200px;
		border-radius: 30px;
	}
	.houseBox:nth-child(even) {
		margin: 0 398px 140px 0;
		padding: 100px 200px 65px 80px;
	}
	.houseBox:last-child {
		margin-bottom: 0;
	}
	.houseBox img {
		position: absolute;
		top: -70px;
		left: -398px;
		border-radius: 30px;
	}
	.houseBox:nth-child(even) img {
		left: auto;
		right: -398px;
	}
}
/* ------------------------------
 新築について（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.flexBox.jc-c.ai-c.mb100 {
		flex-direction: column;
		row-gap: 15px;
	}
	.gradientOP,
	.gradientGB {
		width: 100%;
		max-width: 330px;
		height: 80px;
		border-radius: 12px;
		font-size: 1.8rem;
	}
	.flexBox.jc-c.ai-c.mb100 img {
		width: 25px;
	}
	h2:has(+ .houseBox) {
		margin-bottom: 50px;
	}
	.houseBox {
		padding: 30px 20px 20px;
		border-radius: 20px;
	}
	.houseBox:not(:last-child) {
		margin-bottom: 50px;
	}
	.number,
	.houseBox:nth-child(even) .number {
		top: -28px;
		right: 9%;
		font-size: 6rem;
	}
	.number em {
		font-size: 1.7rem;
	}
	.houseBox p {
		margin-bottom: 20px;
	}
	.houseBox img {
		width: 100%;
		border-radius: 12px;
	}
}