@charset "UTF-8";

/* 数字で見る杉林建設 */
.p-numbers__intro {
	text-align: center;
	margin-bottom: 80px;
}

.p-numbers__heading {
	font-size: clamp(20px, calc(32 / 768 * 100vw), 32px);
	font-weight: var(--fw_jp_bold);
	line-height: 1.6;
	letter-spacing: 0.1em;
	text-align: center;
	color: var(--color01);
	margin-bottom: 0.8em;
}

.p-numbers__heading span {
	border-bottom: 1px solid var(--color01);
	padding-bottom: 0.2em;
}

.p-numbers__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 64px 5%;
}

.p-numbers__item {
	width: 30%;
	text-align: center;
	border: 1px solid var(--color01);
	border-radius: 24px;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	-ms-border-radius: 24px;
	-o-border-radius: 24px;
	padding: 40px;
}

.p-numbers__item-heading {
	font-size: clamp(16px, calc(28 / 960 * 100vw), 28px);
	font-weight: var(--fw_jp_bold);
	line-height: 1.5;
	letter-spacing: 0.1em;
}

.p-numbers__icon {
	max-width: 96px;
	margin: 16px auto;
}

.p-numbers__value {
	font-weight: var(--fw_jp_bold);
	line-height: 1;
}

.p-numbers__value span {
	color: var(--color01);
	font-size: clamp(48px, calc(64 / 960 * 100vw), 64px);
	font-weight: var(--fw_en_bold);
}

.p-numbers__labels {
	display: flex;
	justify-content: center;
	gap: 5em;
	font-size: clamp(12px, calc(14 / 768 * 100vw), 14px);
}


/* 比率 */
.p-numbers-ratio {
	display: flex;
	justify-content: center;
	gap: 64px 5%;
	margin-top: 64px;
}

.p-numbers-ratio__item {
	width: 40.5%;
	text-align: center;
	border: 1px solid var(--color01);
	border-radius: 24px;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	-ms-border-radius: 24px;
	-o-border-radius: 24px;
	padding: 40px;
}

.p-numbers-ratio__img {
	max-width: 330px;
	margin: 16px auto;
}

.p-numbers-ratio__values {
	display: flex;
	justify-content: center;
	gap: 14%;
}

.p-numbers-ratio__values p { min-width: 105px; }

.p-numbers-ratio__label {
	display: block;
	font-weight: var(--fw_jp_bold);
}

.p-numbers-ratio__values strong {
	color: var(--color01);
	font-size: clamp(48px, calc(64 / 960 * 100vw), 64px);
	font-weight: var(--fw_en_bold);
	line-height: 1;
}

.p-numbers-ratio__unit {
	font-weight: var(--fw_jp_bold);
}

.p-numbers-back__btns { text-align: center; }

/* スマートフォン用 */
@media screen and (max-width: 768px) {

	/* 数字で見る杉林建設 */
	.p-numbers__intro {
		margin-bottom: 40px;
	}

	.p-numbers__list {
		flex-direction: column;
		gap: 24px;
	}

	.p-numbers__item {
		width: 100%;
		border-radius: 16px;
		-webkit-border-radius: 16px;
		-moz-border-radius: 16px;
		-ms-border-radius: 16px;
		-o-border-radius: 16px;
		padding: 24px;
	}

	.p-numbers__labels { gap: 4em; }


	/* 比率 */
	.p-numbers-ratio {
		flex-direction: column;
		gap: 24px;
		margin-top: 24px;
	}

	.p-numbers-ratio__item {
		width: 100%;
		border-radius: 16px;
		-webkit-border-radius: 16px;
		-moz-border-radius: 16px;
		-ms-border-radius: 16px;
		-o-border-radius: 16px;
		padding: 24px;
	}

	.p-numbers-ratio__img {
		max-width: 240px;
	}

	.p-numbers-ratio__values { gap: 10%; }
	.p-numbers-ratio__values p { min-width: 90px; }

}