@charset "utf-8";

/* =====================================================
--------------------------------------------------------
リピート住み替え割引制度
--------------------------------------------------------
===================================================== */

/* メインビジュアル */
h1 {
	margin: 0 auto 24px;
	width: 100%;
	max-width: 1024px;
}

@media screen and (min-width:1024px) {
	h1 {
		margin: 64px auto 48px;
	}
}



/* お客様 */
.customer {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 40px;
}

.customer01,
.customer02 {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
}

.customer01 {
	gap: 24px;
}

.customer02 {
	flex-direction: row-reverse;
}

.customer01 img,
.customer02 img {
	width: 152px;
}

.customer01 span,
.customer02 span {
	display: inline-block;
	position: relative;
	padding: 12px;
	border-radius: 8px;
	border: 1px solid var(--color-grey-dark);
	width: calc(100% - 8px - 152px);
}

.customer01 span {
	width: calc(100% - 24px - 152px);
	max-width: 336px;
}

.customer01 span::before {
	position: absolute;
	top: 50%;
	left: -31px;
	z-index: 2;
	margin-top: -8px;
	border: 8px solid transparent;
	border-right: 25px solid #fff;
	content: "";
}

.customer01 span::after {
	position: absolute;
	top: 50%;
	left: -36px;
	z-index: 1;
	margin-top: -8px;
	border: 8px solid transparent;
	border-right: 28px solid var(--color-grey-dark);
	content: "";
}

.customer02 span {
	top: 24px;
	max-width: 392px;
}

.customer02 span::before {
	position: absolute;
	top: 50%;
	right: -31px;
	z-index: 2;
	margin-top: -8px;
	border: 8px solid transparent;
	border-left: 25px solid #fff;
	content: "";
}

.customer02 span::after {
	position: absolute;
	top: 50%;
	right: -36px;
	margin-top: -8px;
	z-index: 1;
	border: 8px solid transparent;
	border-left: 28px solid var(--color-grey-dark);
	content: "";
}

@media screen and (min-width:1024px) {
	.customer {
		position: relative;
		margin-bottom: 128px;
	}
	.customer01,
	.customer02 {
		position: absolute;
		top: 0;
		gap: 8px;
		max-width: none;
	}
	.customer02 {
		top: 20px;
	}
	.customer01 img,
	.customer02 img {
		width: auto;
		height: 160px;
	}
	.customer01 span {
		width: 384px;
		max-width: none;
	}
	.customer02 span {
		top: 40px;
		width: 448px;
		max-width: none;
	}

}



/* 制度説明（提案） */
.suggest {
	margin-bottom: 48px;
}

.suggest_target {
	position: relative;
	margin-bottom: 56px;
	padding-bottom: 8px;
	border-bottom: 2px solid #ff5e5e;
	font-size: 16px;
	text-align: center;
}

.suggest_target span:has(span) {
	display: inline;
}

.suggest_target span:not(:has(span)) {
	display: block;
}

.suggest_target::after {
	position: absolute;
	top: 100%;
	left: 50%;
	translate: -50% 0;
	rotate: 45deg;
	transform-origin: 100%;
	width: 12px;
	height: 12px;
	border-bottom: 2px solid #ff5e5e;
	border-right: 2px solid #ff5e5e;
	background: #fff;
	content: '';
}

@media screen and (min-width:1024px) {
	.suggest {
		margin-left: auto;
		margin-right: auto;
		max-width: 740px;
	}
	.suggest_target {
		margin-bottom: 48px;
		padding-bottom: 24px;
		font-size: 24px;
	}
	.suggest_target span:has(span) {
		display: block;
	}
	.suggest_target span:not(:has(span)) {
		display: inline;
	}
}



/* 2回目以降… */
.suggest_main {
	position: relative;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}

.suggest_main .decoration {
	position: absolute;
	top: -32px;
	left: 0;
	rotate: -8deg;
	padding: 4px 8px;
	border-radius: 8px;
	background: #ff5e5e;
	color: #fff;
	font-size: 16px;
}

.suggest_main span {
	display: block;
}

.suggest_main .strong {
	display: inline-block;
	background: linear-gradient(transparent 70%, #e3ff1d 70%);
	color: #ff5e5e;
	font-size: 40px;
	line-height: 1;
}

@media screen and (min-width:1024px) {
	.suggest_main {
		margin-bottom: 32px;
		font-size: 40px;
		font-weight: normal;
	}
	.suggest_main .decoration {
		top: -16px;
		left: -48px;
		font-size: 24px;
	}
	.suggest_main span {
		display: inline;
	}
	.suggest_main .strong {
		font-size: 80px;
		font-weight: bold;
	}
}



/* 理由・一言 */
.suggest .lp--ul-disc {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
	padding: 24px;
	background: var(--color-housecom-green);
	border-radius: 24px;
}

.suggest .lp--ul-disc li {
	margin-left: 24px;
}

.suggest_closing {
	color: var(--color-housecom-green);
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}

.suggest_closing span {
	display: block;
}

@media screen and (min-width:1024px) {
	.suggest .lp--ul-disc {
		margin-bottom: 32px;
	}
	.suggest_closing {
		font-size: 32px;
	}
	.suggest_closing span {
		display: inline;
	}
}



/* 概要 */
.overview {
	margin-bottom: 40px;
	padding: 32px;
	border: 4px solid var(--color-housecom-blue);
	font-size: 16px;
}

.overview h2 {
	margin-bottom: 16px;
	color: var(--color-housecom-blue);
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}

.overview p {
	margin-bottom: 16px;
}

.overview > span {
	font-weight: bold;
}

.overview ul li {
	margin-left: 16px;
}



/* 店舗一覧リンク */
.to-shop {
	margin-bottom: 32px;
	text-align: center;
}

.to-shop a {
	padding: 16px 0;
	width: 100%;
	border-radius: 40px;
	border: 2px solid var(--color-housecom-blue);
	background: var(--color-housecom-blue);
	color: #fff;
	font-size: 24px;
	font-weight: bold;
}

@media (any-hover: hover) {
	.to-shop a:hover {
		background: #fff;
		color: var(--color-housecom-blue);
	}
}

@media screen and (min-width:1024px) {
	.overview {
		margin: 0 auto 40px;
		max-width: 760px;
	}
	.overview h2 {
		margin-bottom: 16px;
		font-size: 30px;
	}
	.to-shop a {
		padding: 8px 0;
		max-width: 320px;
		font-size: 32px;
	}
}