/* =========================================================
   事業詳細（dig / soil / conc）共通スタイル
   detail-row（画像帯） / method（工法リスト） / results（実績写真）
   ========================================================= */

/* ---- 画像帯（土工事・埋戻し / 残土運搬 / コンクリ打設） ---- */
.detail-row {
	display: grid;
	grid-template-columns: 1fr 500px;
	gap: 60px;
	align-items: center;
}
.detail-row + .detail-row { margin-top: 60px; }
.detail-row__body { min-width: 0; }
.detail-row__title {
	position: relative;
	padding-left: 16px;
	font-family: var(--ff-jp);
	font-size: 22px;
	font-weight: 700;
	color: #231815;
	line-height: 1.4;
}
.detail-row__title::before {
	content: "";
	position: absolute;
	left: 0; top: 0.15em; bottom: 0.15em;
	width: 5px;
	background: var(--c-green);
	border-radius: 2px;
}
.detail-row__text {
	margin-top: 20px;
	font-family: var(--ff-jp);
	font-size: 15px;
	font-weight: 400;
	line-height: 2;
	color: #2F2F2F;
}
.detail-row__img {
	width: 100%;
	aspect-ratio: 500 / 330;
	overflow: hidden;
	border-radius: 2px;
}
.detail-row__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- ＃対応工法・条件（2カラム or 1カラムのリストボックス） ---- */
.method {
	margin-top: 46px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	max-width: 860px;
	margin-inline: auto;
}
.method--single {
	grid-template-columns: 1fr;
	max-width: 520px;
}
.method__col {
	background: #E9EFEC;
	padding: 30px 34px 34px;
	border-radius: 2px;
}
.method__col-title {
	text-align: center;
	font-family: var(--ff-jp);
	font-size: 20px;
	font-weight: 500;
	color: #231815;
	padding-bottom: 18px;
	border-bottom: 1px solid #CBD6D1;
}
.method__list {
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.method__list li {
	position: relative;
	background: #FFFFFF;
	padding: 14px 18px 14px 40px;
	border-radius: 2px;
	font-family: var(--ff-jp);
	font-size: 15px;
	font-weight: 400;
	color: #231815;
}
.method__list li::before {
	content: "";
	position: absolute;
	left: 18px; top: 50%;
	transform: translateY(-50%);
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--c-green);
}

/* ---- ＃実績のお写真 ---- */
.results {
	margin-top: 46px;
	display: grid;
	gap: 30px;
}
.results--3 { grid-template-columns: repeat(3, 1fr); }
.results--2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; }
.results--grid2 { max-width: 900px; }
.results__item { margin: 0; }
.results__cap {
	position: relative;
	padding-left: 18px;
	font-family: var(--ff-jp);
	font-size: 14px;
	font-weight: 500;
	color: #231815;
	line-height: 1.5;
	margin-bottom: 14px;
}
.results__cap::before {
	content: "";
	position: absolute;
	left: 0; top: 0.35em;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--c-green);
}
.results__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 2px;
}
.results__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ＃用途別の施工事例（2×2）は縦間隔を追加 */
.results--grid2 { row-gap: 44px; }

/* =========================================================
   SP
   ========================================================= */
@media (max-width: 768px) {
	.detail-row {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.detail-row + .detail-row { margin-top: 40px; }
	.detail-row__title { font-size: 18px; }
	.detail-row__text { margin-top: 14px; font-size: 13px; line-height: 1.9; }

	.method {
		margin-top: 26px;
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.method__col { padding: 22px 20px 24px; }
	.method__col-title { font-size: 17px; padding-bottom: 14px; }
	.method__list { margin-top: 16px; gap: 10px; }
	.method__list li { font-size: 13px; padding: 12px 14px 12px 34px; }
	.method__list li::before { left: 14px; }

	.results {
		margin-top: 26px;
		grid-template-columns: 1fr !important;
		gap: 24px;
	}
	.results__cap { font-size: 13px; margin-bottom: 10px; }
}