@charset "UTF-8";

/* SDGsへの取り組み 導入 */
.p-sdgs-intro__frame {
	width: 100%;
	padding-top: clamp(52px, 5vw, 104px);
	position: relative;
}
.p-sdgs-intro__frame::before,
.p-sdgs-intro__frame::after {
	content: "";
	width: 100%;
	aspect-ratio: 640 / 48;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	display: block;
}
.p-sdgs-intro__frame::before { background-image: url("../img/company_sdgs/sdgs_intro_curve_top.svg"); }
.p-sdgs-intro__frame::after { background-image: url("../img/company_sdgs/sdgs_intro_curve_bottom.svg"); }

.p-sdgs-intro__line {
	width: 8px;
	height: var(--sdgs-line-length, 100%);
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
}

.p-sdgs-intro__line-inner {
	width: 100%;
	height: 100%;
	background-color: var(--color07);
	display: block;
	transform: scaleY(var(--sdgs-line-progress, 0));
	-webkit-transform: scaleY(var(--sdgs-line-progress, 0));
	-moz-transform: scaleY(var(--sdgs-line-progress, 0));
	-ms-transform: scaleY(var(--sdgs-line-progress, 0));
	-o-transform: scaleY(var(--sdgs-line-progress, 0));
	transform-origin: top;
	-webkit-transform-origin: top;
}

.p-sdgs-intro__surface {
	background-color: var(--color04);
	padding-bottom: 160px;
}

.p-sdgs-intro__heading-area {
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.p-sdgs-intro__catch {
	width: 100%;
	max-width: 360px;
	aspect-ratio: 1;
	color: var(--color01);
	background-color: var(--color_white);
	font-size: clamp(18px, calc(32 / 768 * 100vw), 32px);
	font-weight: var(--fw_jp_bold);
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: center;
	border: 2px solid var(--color01);
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	box-shadow: 0 0 24px rgba(30, 109, 224, 0.14);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
	margin-top: clamp(-560px, -27vw, -280px);
}

.p-sdgs-intro__catch ruby { ruby-position: over; }

.p-sdgs-intro__catch rt {
	font-size: 0.45em;
	font-weight: var(--fw_jp_bold);
}

.p-sdgs-intro__catch rt span {
	display: inline-block;
	transform: translateY(-0.1em);
	-webkit-transform: translateY(-0.1em);
	-moz-transform: translateY(-0.1em);
	-ms-transform: translateY(-0.1em);
	-o-transform: translateY(-0.1em);
}

.p-sdgs-intro__content {
	margin-top: clamp(-145px, -7vw, -73px);
}

.p-sdgs-intro__building {
	display: flex;
	justify-content: space-between;
	gap: 24px 8%;
	position: relative;
	z-index: 2;
}

.p-sdgs-intro__building-body {
	width: 44%;
	margin-left: auto;
}

.p-sdgs-intro__building-heading {
	color: var(--color02);
	font-size: clamp(24px, calc(36 / 768 * 100vw), 36px);
	font-weight: var(--fw_en_bold);
	line-height: 1.2;
	margin-top: 64px;
}

.p-sdgs-intro__building-txt {
	margin-top: 40px;
	margin-right: -25%;
	border: 2px solid var(--color01);
	padding: 40px;
	background-color: var(--color_white);
	border-radius: 24px;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	-ms-border-radius: 24px;
	-o-border-radius: 24px;
	box-shadow: 0 0 24px rgba(30, 109, 224, 0.14);
	position: relative;
	z-index: 3;
}

.p-sdgs-intro__building-txt span {
	font-weight: var(--fw_jp_medium);
	color: var(--color01);
}

.p-sdgs-intro__building-visual {
	width: 44%;
}

.p-sdgs-intro__building-img {
	height: 360px;
	border-radius: 40px;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	-ms-border-radius: 40px;
	-o-border-radius: 40px;
	overflow: hidden;
}

.p-sdgs-intro__dream {
	display: flex;
	justify-content: space-between;
	gap: 24px 8%;
	margin-top: 120px;
	position: relative;
	z-index: 2;
}

.p-sdgs-intro__dream-visual {
	width: 44%;
}

.p-sdgs-intro__dream-img {
	height: 360px;
	border-radius: 40px;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	-ms-border-radius: 40px;
	-o-border-radius: 40px;
	overflow: hidden;
}

.p-sdgs-intro__dream-body {
	width: 44%;
	margin-right: auto;
}

.p-sdgs-intro__dream-heading {
	color: var(--color02);
	font-size: clamp(24px, calc(36 / 768 * 100vw), 36px);
	font-weight: var(--fw_en_bold);
	line-height: 1.2;
	margin-top: 64px;
	text-align: right;
}

.p-sdgs-intro__dream-txt {
	margin-top: 40px;
	margin-left: -25%;
	border: 2px solid var(--color01);
	padding: 40px;
	background-color: var(--color_white);
	border-radius: 24px;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	-ms-border-radius: 24px;
	-o-border-radius: 24px;
	box-shadow: 0 0 24px rgba(30, 109, 224, 0.14);
	position: relative;
	z-index: 3;
}

.p-sdgs-intro__dream-txt span {
	font-weight: var(--fw_jp_medium);
	color: var(--color01);
}

.p-sdgs-intro__declaration {
	display: flex;
	justify-content: space-between;
	gap: 24px 8%;
	margin-top: 120px;
	position: relative;
	z-index: 2;
}

.p-sdgs-intro__declaration-body {
	width: 44%;
	margin-left: auto;
}

.p-sdgs-intro__declaration-heading {
	color: var(--color02);
	font-size: clamp(24px, calc(36 / 768 * 100vw), 36px);
	font-weight: var(--fw_en_bold);
	line-height: 1.2;
	margin-top: 64px;
}

.p-sdgs-intro__declaration-txt {
	margin-top: 40px;
	margin-right: -25%;
	border: 2px solid var(--color01);
	padding: 40px;
	background-color: var(--color_white);
	border-radius: 24px;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	-ms-border-radius: 24px;
	-o-border-radius: 24px;
	box-shadow: 0 0 24px rgba(30, 109, 224, 0.14);
	position: relative;
	z-index: 3;
}

.p-sdgs-intro__declaration-logo {
	max-width: 540px;
	margin: 0 auto 1em;
}


.p-sdgs-intro__declaration-date {
	margin-top: 1em;
	text-align: right;
}

.p-sdgs-intro__declaration-visual {
	width: 44%;
}

.p-sdgs-intro__declaration-img {
	height: 360px;
	border-radius: 40px;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	-ms-border-radius: 40px;
	-o-border-radius: 40px;
	overflow: hidden;
}

.p-sdgs-intro__movie {
	margin-top: 120px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px 6%;
	max-width: 1120px;
	margin-inline: auto;
	position: relative;
	z-index: 2;
}

.p-sdgs-intro__movie-heading {
	color: var(--color01);
	font-size: clamp(24px, calc(40 / 768 * 100vw), 40px);
	font-weight: var(--fw_en_bold);
	line-height: 1.2;
	border-bottom: 1px solid var(--color01);
	padding-bottom: 0.2em;
	width: 36%;
}

.p-sdgs-intro__movie-heading .u-pc-only {
	display: inline-block;
}

.p-sdgs-intro__movie-body {
	width: 58%;
	border: 2px solid var(--color01);
	padding: 40px;
	background-color: var(--color_white);
	border-radius: 24px;
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	-ms-border-radius: 24px;
	-o-border-radius: 24px;
	box-shadow: 0 0 24px rgba(30, 109, 224, 0.14);
	position: relative;
	z-index: 3;
}

.p-sdgs-intro__movie-txt {
	font-size: clamp(16px, calc(24 / 768 * 100vw), 24px);
	line-height: 1.5;
	font-weight: var(--fw_jp_bold);
	color: var(--color01);
	text-align: center;
}

.p-sdgs-intro__movie-frame {
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 16px auto 0;
}

.p-sdgs-intro__movie-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* 杉林建設の取り組み */
.p-sdgs-initiatives__content {
	max-width: 840px;
	margin: 0 auto;
}

.p-sdgs-initiatives__txt {
	margin-top: 16px;
	line-height: 2.5;
}

/* ACTION */
.p-sdgs-action__header {
	position: relative;
	isolation: isolate;
}
.p-sdgs-action__header::before {
	content: "";
	width: clamp(440px, 40vw, 620px);
	height: 260px;
	background-color: var(--color04);
	position: absolute;
	top: 10px;
	left: min(-2vw, calc(640px - 46vw));
	z-index: 0;
	transform: rotate(-6deg);
	-webkit-transform: rotate(-6deg);
	-moz-transform: rotate(-6deg);
	-ms-transform: rotate(-6deg);
	-o-transform: rotate(-6deg);
}

.p-sdgs-action__number {
	font-size: clamp(32px, calc(64 / 768 * 100vw), 64px);
	font-weight: var(--fw_en_bold);
	letter-spacing: 0.1em;
	line-height: 1;
	position: relative;
	padding-bottom: 0.2em;
	display: inline-block;
	position: relative;
	z-index: 1;
}
.p-sdgs-action__number::after {
	content: "";
	width: calc(100% + max(5vw, calc(50vw - var(--content_w_lg) / 2)));
	height: 1px;
	background-color: var(--color_black);
	position: absolute;
	right: 0;
	bottom: 0;
}

.p-sdgs-action__summary {
	display: flex;
	justify-content: space-between;
	gap: 8%;
	margin-top: 24px;
	position: relative;
	z-index: 1;
}

.p-sdgs-action__catch {
	width: 44%;
	color: var(--color01);
	font-size: clamp(16px, calc(32 / 768 * 100vw), 32px);
	font-weight: var(--fw_jp_bold);
	letter-spacing: 0.1em;
	line-height: 1.6;
	position: relative;
	z-index: 0;
}

.p-sdgs-action__summary-body {
	width: 48%;
}

.p-sdgs-action__summary-txt { line-height: 2.5; }

.p-sdgs-action__sdgs-list {
	display: flex;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 32px;
}

.p-sdgs-action__sdgs-list li { width: 120px; }

.p-sdgs-action--02 .p-sdgs-action__sdgs-list { flex-wrap: wrap; }

.p-sdgs-action__main-heading {
	margin-top: 80px;
	font-size: clamp(20px, calc(32 / 768 * 100vw), 32px);
	font-weight: var(--fw_jp_bold);
	letter-spacing: 0.1em;
}

.p-sdgs-action__panel {
	margin-top: 24px;
	padding: 40px;
	border: 1px solid var(--color01);
	border-radius: 40px;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	-ms-border-radius: 40px;
	-o-border-radius: 40px;
	position: relative;
}

.p-sdgs-action__panel::before,
.p-sdgs-action__panel::after {
	content: "";
	position: absolute;
	z-index: 0;
	font-family: var(--ff_en);
	font-size: clamp(80px, calc(120 / 1760 * 100vw), 120px);
	font-weight: var(--fw_en_bold);
	line-height: 0.9;
	color: var(--color03);
	white-space: nowrap;
	writing-mode: vertical-rl;
	pointer-events: none;
}

.p-sdgs-action--01 .p-sdgs-action__panel::before,
.p-sdgs-action--01 .p-sdgs-action__panel::after {
	content: "ACTION 01";
}
.p-sdgs-action--02 .p-sdgs-action__panel::before,
.p-sdgs-action--02 .p-sdgs-action__panel::after {
	content: "ACTION 02";
}
.p-sdgs-action--03 .p-sdgs-action__panel::before,
.p-sdgs-action--03 .p-sdgs-action__panel::after {
	content: "ACTION 03";
}
.p-sdgs-action--04 .p-sdgs-action__panel::before,
.p-sdgs-action--04 .p-sdgs-action__panel::after {
	content: "ACTION 04";
}
.p-sdgs-action--05 .p-sdgs-action__panel::before,
.p-sdgs-action--05 .p-sdgs-action__panel::after {
	content: "ACTION 05";
}

.p-sdgs-action__panel::before {
	bottom: 0.5em;
	right: 100%;
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
}

.p-sdgs-action__panel::after {
	top: 0.5em;
	left: 100%;
}

.p-sdgs-action__item-list {
	position: relative;
	z-index: 1;
}

.p-sdgs-action__item {
	display: flex;
	justify-content: space-between;
	gap: 24px 6%;
}

.p-sdgs-action__item + .p-sdgs-action__item {
	margin-top: 64px;
}

.p-sdgs-action__item-visual {
	width: 47%;
	height: 320px;
}

.p-sdgs-action__item-body { width: 47%; }

.p-sdgs-action__item-heading {
	font-size: clamp(18px, calc(24 / 768 * 100vw), 24px);
	font-weight: var(--fw_jp_bold);
	letter-spacing: 0.1em;
	line-height: 1.5;
	border-bottom: 1px solid var(--color01);
	padding-bottom: 0.5em;
}

.p-sdgs-action__item-points { margin-top: 16px; }

.p-sdgs-action__item-points li {
	padding-left: 1.2em;
	position: relative;
}

.p-sdgs-action__item-points li::before {
	content: "●";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--color01);
}


@media (prefers-reduced-motion: reduce) {
	.p-sdgs-intro__line-inner { --sdgs-line-progress: 1 !important; }
}



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

	/* SDGsへの取り組み 導入 */
	.p-sdgs-intro__frame { padding-top: clamp(40px, 12vw, 64px); }
	.p-sdgs-intro__line { width: 6px; }
	.p-sdgs-intro__surface { padding-bottom: 80px; }
	.p-sdgs-intro__heading-area { min-height: 210px; }
	.p-sdgs-intro__catch { width: 62%; max-width: 260px; margin-top: -42vw; }
	.p-sdgs-intro__content { margin-top: -10vw; }

	.p-sdgs-intro__building,
	.p-sdgs-intro__dream,
	.p-sdgs-intro__declaration,
	.p-sdgs-intro__movie {
		flex-direction: column;
	}

	.p-sdgs-intro__building-visual,
	.p-sdgs-intro__declaration-visual { order: -1; }

	.p-sdgs-intro__building-body,
	.p-sdgs-intro__building-visual,
	.p-sdgs-intro__dream-body,
	.p-sdgs-intro__dream-visual,
	.p-sdgs-intro__declaration-body,
	.p-sdgs-intro__declaration-visual,
	.p-sdgs-intro__movie-heading,
	.p-sdgs-intro__movie-body { width: 100%; margin-inline: 0; }

	.p-sdgs-intro__building-heading,
	.p-sdgs-intro__dream-heading,
	.p-sdgs-intro__declaration-heading {
		margin-top: 0;
	}

	.p-sdgs-intro__dream-heading { text-align: left; }

	.p-sdgs-intro__building-txt,
	.p-sdgs-intro__dream-txt,
	.p-sdgs-intro__declaration-txt {
		margin: 16px 0 0;
		padding: 24px;
		border-radius: 16px;
		-webkit-border-radius: 16px;
		-moz-border-radius: 16px;
		-ms-border-radius: 16px;
		-o-border-radius: 16px;
	}

	.p-sdgs-intro__building-img,
	.p-sdgs-intro__dream-img,
	.p-sdgs-intro__declaration-img {
		height: clamp(240px, 50vw, 360px);
		border-radius: 24px;
		-webkit-border-radius: 24px;
		-moz-border-radius: 24px;
		-ms-border-radius: 24px;
		-o-border-radius: 24px;
	}

	.p-sdgs-intro__dream,
	.p-sdgs-intro__declaration,
	.p-sdgs-intro__movie { margin-top: 80px; }

	.p-sdgs-intro__declaration-logo { max-width: 280px; }
	.p-sdgs-intro__movie-heading { width: 100%; }
	.p-sdgs-intro__movie-body {
		width: 100%;
		padding: 24px;
		border-radius: 16px;
		-webkit-border-radius: 16px;
		-moz-border-radius: 16px;
		-ms-border-radius: 16px;
		-o-border-radius: 16px;
	}

	/* 杉林建設の取り組み */
	.p-sdgs-initiatives__txt { margin-top: 0; line-height: 1.8; }

	/* ACTION 01 */
	.p-sdgs-action__header::before {
		width: clamp(280px, 80vw, 620px);
		height: 160px;
	}
	.p-sdgs-action__summary {
		flex-direction: column;
		margin-top: 16px;
	}
	.p-sdgs-action__catch,
	.p-sdgs-action__summary-body { width: 100%; }
	.p-sdgs-action__summary-body { margin-top: 16px; }
	.p-sdgs-action__summary-txt { line-height: 1.8; }
	.p-sdgs-action__sdgs-list { margin-top: 24px; flex-wrap: wrap; }
	.p-sdgs-action__sdgs-list li { width: 64px; }
	.p-sdgs-action__main-heading { margin-top: 40px; }
	.p-sdgs-action__panel {
		margin-top: 8px;
		padding: 24px;
		border-radius: 24px;
		-webkit-border-radius: 24px;
		-moz-border-radius: 24px;
		-ms-border-radius: 24px;
		-o-border-radius: 24px;
	}
	.p-sdgs-action .p-sdgs-action__panel::before,
	.p-sdgs-action .p-sdgs-action__panel::after { content: none; }
	.p-sdgs-action__item { flex-direction: column; }
	.p-sdgs-action__item + .p-sdgs-action__item { margin-top: 32px; }
	.p-sdgs-action__item-visual,
	.p-sdgs-action__item-body { width: 100%; }
	.p-sdgs-action__item-visual { height: 240px; }

}