@charset "UTF-8";

.br-1280{
	display: block;
}

@media screen and (max-width: 1279.99px) {
	.br-1280{
		display: none;
	}
}


.context {
	margin-bottom: 100px;
}

@media screen and (max-width: 768px) {
	.context {
		margin-bottom: 50px;
	}
}

/*sec01 */
.text__center {
	text-align: center;
}

/*flex2colum 50% */
.two-col {
	display: flex;
	align-items: flex-start;
	gap: 48px 32px;
	margin-top: 1.8rem;
	margin-bottom: 5.4rem;
	flex-wrap: wrap;
}


.two-col__text,
.two-col__media {
	flex: 0 0 calc(50% - 16px);
	margin: 0;
}

.two-col__text>div {
	border-radius: 10px;
	overflow: hidden;
}

.two-col__text img {
	height: auto;
	display: block;
	border-radius: 10px;
	aspect-ratio: 4 / 3;
    object-fit: cover;
}


.maintenance--img-title__tech {
	background: #EDE4F4 0% 0% no-repeat padding-box;
	border-radius: 10px;
	margin-block: 40px;
}

.border {
	border-bottom: 1px dashed #4B4B4B;
	margin-block: 20px 16px;
	padding: 0 0 5px 0;
}

/*sec02 */
/*flex2colum */

.esg__cols {
	display: flex;
	align-items: flex-start;
	/* テキスト上端と画像上端を揃える */
	gap: 24px;
	margin-top: 1.8rem;
}

.esg__left {
	flex: 1 1 auto;
	margin: 0;
}

.esg__right {
	margin: 0;
	max-width: 660px;
}

.esg__right img {
	max-width: 100%;
	height: auto;
	display: block;
	border: solid 2px #707070;
	border-radius: 10px;
}

/* テキスト行の左アイコン（::before） */
.point-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 16px;
}

.point-list li {
	position: relative;
	padding-left: 72px;
	/* アイコンぶんの余白 */
	line-height: 1.8;
	font-size: 18px;

}

.point-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/*バックグラウンドアイコン */
.point-list li.is-good::before {
	background-image: url("../images/sec01_01_02.jpg");
}

.point-list li.is-note::before {
	background-image: url("../images/sec02_03.jpg");
}


.marker {
	background: linear-gradient(transparent 90%, #C3ADDB 60%);
	/* マーカー */
	padding: 0 2px 4px 0;
}

.esg1 {
	background-color: #EDE4F4;
	border-radius: 10px;
	padding: 0 0 5px 0;
}

.esg1 .title {
	background-color: #4B4B4B;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	line-height: 1.5;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-inline: 1rem;
}

.esg1 .title p {
	color: #FFE103;
	text-align: center;
}



.esg2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 3列で均等幅 */
	gap: 40px;
	/* 各アイテムの間隔 */
	text-align: left;
	/* テキストを左寄せ */
	padding: 0 1rem 1rem 1rem;
}


.d-f {
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	gap: 24px;
	background-color: #4B4B4B;
	border-radius: 10px;
	padding: 1.1rem 0;
	color: var(--color-white);
}

@media screen and (max-width: 1279.99px) {
	.d-f {
		padding-right: 24px;
	}
}
/* .d-f img {
	width: 64px;
	height: auto;
} */


/* 矢印を付ける対象に相対定位を付与＆下に余白を作る */
.esg2>.d-f {
	position: relative;
	/* padding-bottom: 28px; */
	/* 矢印ぶんのスペース */
}

.esg2 .d-f>div {
	width: 64px;
	margin-left: 24px;
	flex-shrink: 0;
}

.esg2 .d-f:last-of-type>div {
	width: 54px;
}


/* 最後以外のボックスに下向きの紫矢印を出す */
.esg2 .d-f:nth-child(2)::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -38px;
	/* 矢印がボックス外に出る位置。調整可 */
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 20px solid #C3ADDB;
	/* 紫の矢印 */
	/* 三角形に border-radius は効かないので不要 */
}

.esg3 {
	border-radius: 10px;
	margin-top: 1.8rem;
	padding: 0 1rem;
}

.esg3 p {
	font-size: 24px;
	color: #ffffff;
	text-align: center;
}

.esg3-bar {
	position: relative;
	background: #4B4B4B;
	color: #fff;
	text-align: center;
	padding: 12px 20px;
	border-radius: 10px;
	font-weight: bold;
	margin: 40px auto;
}

.esg3-bar::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -104px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 20px solid #C3ADDB;
	/* 矢印の色 */
}


/* ベース */
.esg-hero {
	position: relative;
	/* padding-top: 70px; 既存の矢印分 */
}

.esg-hero__inner {
	position: relative;
	margin: 0 auto;
	background: #f7f7d8;
	border-radius: 16px;
	padding: 24px 72px 72px;
	text-align: center;
	/* テキスト中央寄せ */
}

/* テキスト */
.esg-hero__content {
	max-width: 950px;
	margin: 0 auto;
}

.esg-hero__content img {
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.cta--btn {
	margin-top: 16px;
}

/* 人物：下段固定（左右） */
.esg-hero__person {
	position: absolute;
	bottom: 0;
	display: block;
}

.esg-hero__person--left {
	left: 40px;
}

.esg-hero__person--right {
	right: 40px;
}

.esg-hero__person img {
	display: block;
	width: clamp(120px, 12vw, 190px);
	height: auto;
}

.pc-only {
	display: inline-block;
}

.sp-only {
	display: none;
}

.sp-br {
	display: none;
}

.fz-24 {
	font-size: 24px;
}

.fz-28 {
	font-size: 28px;
}

.mt-18 {
	margin-top: 1.8rem;
}

.mbl-20 {
	margin-block: 20px;
}


/* * SP */
@media (max-width: 768px) {
	.two-col {
		display: block;
		margin-bottom: 0;
		/* ← flex解除 */
	}

	.two-col>* {
		width: 100%;
	}

	.two-col .two-col__image,
	.two-col .two-col__right {
		margin-top: 16px;
		/* 下段に余白 */
	}

	.two-col__text img {
		width: 100%;
		height: auto;
		border-radius: 10px;
		margin-top: 1.8rem;
	}

	.two-col__text p {
		width: 100%;
	}

	.maintenance--img-title__tech {
		line-height: 1.5;
		padding-block: 8px;
	}

	.esg__cols {
		display: block;
		/* ← flex解除 */
	}

	.esg__cols>* {
		width: 100%;
		margin-bottom: 40px;
		/* 縦積み時の余白 */
	}

	.esg__cols>*:last-child {
		margin-bottom: 0;
	}

	.esg-hero__inner {

		padding: 24px 20px 145px;
	}

	.esg1 .title {
		background-color: #4B4B4B;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding: 32px 20px;
	}

	.esg2 {
		display: block;
		/* ← flex解除、縦積み */
	}

	.esg2 .d-f {
		margin-bottom: 20px;
		padding: 1rem;
		/* ボックス間の余白 */
	}

	.esg2 .d-f:last-child {
		margin-bottom: 0;
	}

	/* PC用の2番目矢印を消す */
	.esg2 .d-f:nth-child(2)::after {
		content: none;
	}

	/* 3番目に矢印を出す */
	.esg2 .d-f:nth-child(3)::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -40px;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		border-top: 20px solid #C3ADDB;
	}

	.esg3-bar {
		padding-bottom: 1.5rem;
	}

	.esg3-bar::after {
		bottom: -80px;
	}	

	.maintenance-cta--btn {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		/* 縦位置を揃える */
		gap: 8px;
		/* アイコンとの間隔を調整 */
		flex-wrap: nowrap;
		/* 改行させない */
		white-space: nowrap;
		/* テキストを強制的に一行に */
	}

	.pc-only {
		display: none;
	}

	.sp-only {
		display: block;
	}

	.sp-br {
		display: inline;
	}
}