/* =========================================================
   下層ページ共通スタイル
   FV / セクションナビ / 共通見出しなど
   ========================================================= */

.page { width: 100%; }

/* ---- FV（トップと同じ高さ784px。左寄せの大見出し） ---- */
.page-fv {
	position: relative;
	width: 100%;
	height: 784px;
	overflow: hidden;
}
.page-fv__bg,
.page-fv__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-fv__bg img { object-fit: cover; }
.page-fv__inner {
	position: relative;
	width: 100%;
	max-width: var(--pc-w);
	height: 100%;
	margin-inline: auto;
	padding: 260px 140px 0;
	color: #FFF;
}
.page-fv__en {
	font-family: var(--ff-en);
	font-size: clamp(56px, 6.5vw, 92px);
	font-weight: 400;
	line-height: 1.05;
	color: #FFF;
}
.page-fv__jp {
	margin-top: 2px;
	font-family: var(--ff-jp);
	font-size: 32px;
	font-weight: 400;
	letter-spacing: 6.4px;
	color: #FFF;
}
.page-fv__sub {
	margin-top: 68px;
	font-family: var(--ff-jp);
	font-size: 20px;
	font-weight: 300;
	line-height: 1.6;
	color: #FFF;
}

/* ---- 下層ページ用セクションナビ（左端はコンテンツと揃え・右端は内容+73px） ---- */
.page-nav-wrap {
	width: 100%;
	max-width: var(--pc-w);
	margin-inline: auto;
	padding-left: var(--side);
	padding-right: 0;
	position: relative;
	z-index: 2;
	/* 帯の右側にできる余白を、下セクションの背景色で埋める（既定＝白） */
	background: #FFFFFF;
}
/* 事業内容トップは直下がミント背景のため、余白もミントで埋める */
.page-service .page-nav-wrap { background: #E3ECE9; }
.page-nav {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 40px;
	background: #2EC39C;
	min-height: 66px;
	padding: 0 73px 0 40px;
	max-width: 100%;
}
/* 帯だけを画面左端まで延長（テキスト位置は動かさない） */
.page-nav::before {
	content: '';
	position: absolute;
	right: 100%;
	top: 0;
	bottom: 0;
	width: 100vw;
	background: #2EC39C;
	pointer-events: none;
}
.page-nav a {
	color: #FFF;
	font-family: var(--ff-jp);
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	white-space: nowrap;
	transition: opacity .2s ease;
}
.page-nav a:hover { opacity: .75; }

/* ---- セクション共通 ---- */
.sec {
	width: 100%;
	padding-block: 90px;
}
.sec--mint { background: #E3ECE9; }
.sec--white { background: #FFFFFF; }
.sec__inner {
	width: 100%;
	max-width: var(--pc-w);
	margin-inline: auto;
	padding-inline: var(--side);
}
.sec__title {
	color: #231815;
	font-family: var(--ff-jp);
	font-size: 46px;
	font-weight: 400;
	line-height: normal;
}
.sec__lead {
	margin-top: 42px;
	color: #231815;
	font-family: var(--ff-jp);
	font-size: 16px;
	font-weight: 400;
	line-height: 2;
}

/* =========================================================
   SP
   ========================================================= */
@media (max-width: 1439px) {
	.page-nav { flex-wrap: wrap; padding: 12px 40px 12px 20px; gap: 14px 26px; }
}

@media (max-width: 768px) {
	/* FV SP：トップと同じ631px。テキストは垂直中央 */
	.page-fv { height: 631px; }
	.page-fv__inner {
		padding: 45px 24px 100px; /* 上:ヘッダー分 / 下:電話バー分の余白 */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	/* 長いタイトル（PRIVACY POLICY等）も1行に収まるようclamp */
	.page-fv__en {
		font-size: clamp(28px, 8.5vw, 44px);
		line-height: 1.15;
	}
	.page-fv__jp {
		margin-top: 8px;
		font-size: 20px;
		letter-spacing: 4px;
	}
	.page-fv__sub {
		margin-top: 36px;
		font-size: 14px;
		line-height: 1.8;
	}

	.page-nav-wrap { display: none; }
	.page-nav { display: none; }

	.sec { padding-block: 50px; }
	.sec__inner { padding-inline: 24px; }
	.sec__title { font-size: 24px; }
	.sec__lead { margin-top: 24px; font-size: 13px; line-height: 1.9; }
}

/* =========================================================
   下層ページ共通ユーティリティ（service / detail / recruit で共有）
   ========================================================= */

/* 中央寄せ見出し・リード */
.sec__title--center { text-align: center; }
.sec__lead--center  { text-align: center; }

/* 見出し内の「とは」等の小さめ添字 */
.sec__title-sub {
	font-size: 0.62em;
	font-weight: 400;
	margin-left: 4px;
}

/* 白文字見出し（緑背景セクション用） */
.sec__title--white { color: #FFFFFF; }

/* 緑背景セクション */
.sec--green { background: var(--c-green); }

/* セクション間の余白調整（連続セクションの継ぎ目用） */
.sec--nogap      { padding-block: 0; }         /* 帯セクションを上下ピッタリ */
.sec--nogap-top  { padding-top: 40px; }        /* 直前と同色で続く場合、上を詰める */

/* ミント帯（土工事/残土/コンクリ「〜とは」直後の画像帯） */
.sec--mint.sec--nogap { padding-block: 70px; }

/* ---- 日本語のみFV（土工事業 / 残土運搬業 / コンクリート工事業） ---- */
.page-fv--jp .page-fv__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 100px 140px 0;
}
.page-fv__jp--main {
	font-family: var(--ff-jp);
	font-size: clamp(48px, 5.4vw, 74px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 4px;
	color: #FFFFFF;
}

/* =========================================================
   ＃対応エリア（service / recruit 共通。company.css と同一定義）
   ========================================================= */
.area__title { text-align: center; }
.area__body {
	margin-top: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 60px;
	flex-wrap: wrap;
}
.area__map {
	flex-shrink: 0;
	width: 380px;
	max-width: 100%;
}
.area__map img { width: 100%; height: auto; display: block; }
.area__text {
	font-family: var(--ff-jp);
	font-size: 18px;
	font-weight: 400;
	line-height: 2;
	color: #231815;
}
.area__list {
	margin-top: 8px;
	font-size: 20px;
	font-weight: 500;
}

/* =========================================================
   SP（共通ユーティリティ）
   ========================================================= */
@media (max-width: 768px) {
	.page-fv--jp .page-fv__inner {
		padding: 45px 24px 100px;
		align-items: center;
		text-align: center;
	}
	.page-fv__jp--main {
		font-size: clamp(24px, 7.2vw, 34px);
		letter-spacing: 2px;
	}

	.sec--nogap { padding-block: 0; }
	.sec--mint.sec--nogap { padding-block: 34px; }
	.sec--nogap-top { padding-top: 24px; }

	.area__body { margin-top: 24px; flex-direction: column; gap: 20px; }
	.area__map { width: 80%; }
	.area__text { text-align: center; font-size: 14px; }
	.area__list { font-size: 15px; }
}