/* =========================================================
   TOPページ 専用スタイル（方向A：全幅背景 × 中央1440px）
   各セクションの外枠は width:100% で背景/帯を全幅に。
   内側の .*__inner を max-width:1440px 中央寄せにし、
   その中で従来どおりの絶対配置・px値を維持する。
   ========================================================= */

.front { width: 100%; }

/* FV ------------------------------------------------------ */
.fv { position: relative; width: 100%; height: 784px; overflow: hidden; }
.fv__bg, .fv__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fv__bg img { object-fit: cover; }
.fv__inner {
	position: relative; width: 100%; max-width: var(--pc-w);
	height: 100%; margin-inline: auto; text-align: center;
}
.fv__en {
	position: absolute; bottom: 244px; left: 0; right: 0;
	color: #FFF; font-family: var(--ff-en); font-size: 120px;
	font-weight: 400; line-height: normal; text-align: center;
}
.fv__jp {
	position: absolute; bottom: 172px; left: 0; right: 0;
	color: #FFF; font-family: var(--ff-jp); font-size: 46px;
	font-weight: 400; letter-spacing: 9.2px; line-height: normal; text-align: center;
}
/* FV下 セクションリンクバー（左端から開始・右端は手前で止める） */
.section-nav {
	position: relative;
	z-index: 2;
	display: block;
	width: calc(50% + 400px); /* 画面左端〜中央+400px。1440px時に右320px余白（720-400=320） */
	max-width: 100%;
	min-height: 66px; /* リンクが折り返してもバーが伸びる（固定高さにしない） */
	background: #2EC39C;
	font-size: 0; /* インライン要素由来の余白を除去 */
}
.section-nav__inner {
	width: 100%;
	min-height: 66px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 26px;
	padding: 8px 70px;
}
.section-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;
}
.section-nav a:hover { opacity: .75; }

/* ＃私たちの想い（FV直下・背景はバー背後まで全幅で敷く） -------- */
.mission {
	position: relative; width: 100%; min-height: 784px; overflow: hidden;
	padding-bottom: 80px;
}
.mission__bg, .mission__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mission__bg img { object-fit: cover; }
.mission__inner {
	position: relative; z-index: 1; width: 100%; max-width: var(--pc-w);
	margin-inline: auto; padding-top: 76px; text-align: center;
}
.mission__title {
	color: #231815; font-family: var(--ff-jp); font-size: 46px; font-weight: 400; line-height: normal;
}
.mission__lead {
	margin-top: 47px; color: #231815; font-family: var(--ff-jp);
	font-size: 16px; font-weight: 300; line-height: 1.4;
}

/* ＃とび土工工事業の紹介 ---------------------------------- */
.service {
	position: relative; z-index: 1; width: 100%;
	margin-top: -1px; /* mission下端との隙間（白線）を埋める */
	background: linear-gradient(#2EC39C, #2EC39C) top / 100% 527px no-repeat, #E3ECE9;
	padding-bottom: 120px;
}
/* ヒーロー画像：緑帯にまたがり中央枠の右端寄せ。z-index無しでも重ならないよう縦積み基準 */
.service__hero {
	width: 100%; max-width: var(--pc-w); margin-inline: auto;
	padding-top: 133px; display: flex; justify-content: flex-end;
}
.service__hero-img { width: 1298px; max-width: 90%; }
.service__hero-img img { width: 100%; height: 568px; object-fit: cover; display: block; }

.service__head {
	position: relative; width: 100%; max-width: var(--pc-w); margin-inline: auto;
	padding-left: var(--side); padding-right: var(--side); padding-top: 76px;
}
.service__title { color: #231815; font-family: var(--ff-jp); font-size: 46px; font-weight: 400; line-height: normal; }
.service__lead {
	margin-top: 38px; padding-left: 58px; color: #231815;
	font-family: var(--ff-jp); font-size: 16px; font-weight: 300; line-height: 1.8;
}
.service__lead strong { font-weight: 700; }
.service-row {
	width: 100%; max-width: var(--pc-w); margin-inline: auto;
	display: flex; align-items: flex-start; gap: 60px; padding-inline: var(--side);
}
.service-row + .service-row { margin-top: 0; } /* 事業行どうしの上下隙間はゼロ */
.service-row:first-of-type { margin-top: 38px; } /* 見出しリードからの間隔のみ確保 */
.service-row__img img { width: 720px; height: 480px; object-fit: cover; }
.service-row__body { padding-top: 60px; max-width: 518px; }
.service-row--img-right { flex-direction: row-reverse; }
.service-row__title { color: #2EC39C; font-family: var(--ff-jp); font-size: 24px; font-weight: 500; line-height: normal; }
.service-row__text {
	width: 518px; max-width: 100%; margin-top: 9px; color: #231815;
	font-family: var(--ff-jp); font-size: 16px; font-weight: 300; line-height: 32px;
}
.service-row .c-btn { margin-top: 33px; }
.service__overview {
	width: 100%; max-width: var(--pc-w); margin-inline: auto; margin-top: 90px; text-align: center;
}
.service__overview-text { color: #231815; font-family: var(--ff-jp); font-size: 20px; font-weight: 300; line-height: normal; }
.service__overview .c-btn { margin-top: 19px; }

/* ＃選ばれる理由 ------------------------------------------ */
.reason {
	position: relative; width: 100%;
	background: linear-gradient(#2EC39C, #2EC39C) top / 100% 555px no-repeat, #FFFFFF;
	padding-bottom: 120px;
}
.reason__hero {
	width: 100%; max-width: var(--pc-w); margin-inline: auto;
	padding-top: 133px; display: flex; justify-content: flex-start;
}
.reason__hero-img { width: 1298px; max-width: 90%; }
.reason__hero-img img { width: 100%; height: 568px; object-fit: cover; display: block; }
.reason__body {
	width: 100%; max-width: var(--pc-w); margin-inline: auto;
	padding-top: 76px; padding-inline: var(--side);
}
.reason__title { color: #231815; font-family: var(--ff-jp); font-size: 46px; font-weight: 400; line-height: normal; }
.reason__cards { display: flex; gap: 30px; margin-top: 42px; }
.reason-card { width: 566px; max-width: 100%; }
.reason-card img { width: 566px; max-width: 100%; height: 331px; object-fit: cover; }
.reason-card__caption { width: 566px; max-width: 100%; min-height: 96px; background: #EFEFEE; padding: 18px 20px 20px; }
.reason-card__lead { color: #2EC39C; font-family: var(--ff-jp); font-size: 20px; font-weight: 700; line-height: normal; }
.reason-card__sub { margin-top: 6px; color: #1A1A1A; font-family: var(--ff-jp); font-size: 14px; font-weight: 400; line-height: normal; }

/* ＃安全への取り組み -------------------------------------- */
.safety { position: relative; width: 100%; background: #E3ECE9; padding-block: 76px 90px; }
.safety__inner { width: 100%; max-width: var(--pc-w); margin-inline: auto; padding-inline: var(--side); }
.safety__title { color: #231815; font-family: var(--ff-jp); font-size: 46px; font-weight: 400; line-height: normal; }
.safety__subtitle { margin-top: 38px; color: #2EC39C; font-family: var(--ff-jp); font-size: 24px; font-weight: 700; line-height: normal; }
.safety__list { margin-top: 30px; }
/* PC：縦書きラベル｜カード（内側に画像を右絶対配置） */
.safety-card {
	display: flex; align-items: flex-start; gap: 8px; margin-bottom: 30px;
}
.safety-card__axis {
	writing-mode: vertical-rl; transform: rotate(180deg);
	color: #2EC39C; font-family: var(--ff-jp); font-size: 18px; font-weight: 400;
	line-height: 1; white-space: nowrap; flex-shrink: 0; align-self: stretch;
}
.safety-card__box {
	position: relative;
	width: calc(676px + 340px); height: 229px; background: #EFEFEE;
	padding: 30px; flex-shrink: 0;
}
.safety-card__lead { color: #2EC39C; font-family: var(--ff-jp); font-size: 24px; font-weight: 700; line-height: normal; }
.safety-card__text {
	width: 550px; max-width: 100%; margin-top: 30px; color: #2F2F2F;
	font-family: var(--ff-jp); font-size: 16px; font-weight: 400; line-height: normal;
}
/* PCでは画像をカード右端に絶対配置 */
.safety-card__img {
	position: absolute; top: 0; right: 0; width: 340px; height: 229px;
}
.safety-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 段階的に右へずらす（階段状） */
.safety-card--offset  { margin-left: 50px; }
.safety-card--offset2 { margin-left: 100px; }

/* ＃採用案内 ---------------------------------------------- */
.recruit { position: relative; width: 100%; background: #222E2E; }
.recruit__inner {
	position: relative; width: 100%; max-width: var(--pc-w);
	height: 1533px; margin-inline: auto; overflow: hidden;
}
.recruit-photo { position: absolute; width: 415px; }
.recruit-photo img { width: 415px; height: 584px; object-fit: cover; }
.recruit-photo__bar {
	display: flex; align-items: center; justify-content: center;
	width: 415px; height: 46px; background: #2EC39C; color: #FFF;
	font-family: "BIZ UDPGothic", var(--ff-jp); font-size: 24px; font-weight: 400; line-height: normal;
}
.recruit-photo--1 { left: 36px; top: 261px; }
.recruit-photo--2 { left: calc(36px + 415px + 65px); top: 146px; }
.recruit-photo--3 { left: calc(36px + 415px + 65px + 415px + 43px); top: 261px; }
.recruit__head { position: absolute; left: 106px; top: 951px; }
.recruit__title { color: #FFF; font-family: var(--ff-jp); font-size: 46px; font-weight: 400; line-height: normal; }
.recruit__en { margin-top: 38px; color: #2EC39C; font-family: var(--ff-en); font-size: 36px; font-weight: 500; line-height: normal; }
.recruit__body { position: absolute; top: 1024px; right: 140px; width: 550px; }
.recruit__catch { color: #2EC39C; font-family: "BIZ UDPGothic", var(--ff-jp); font-size: 40px; font-weight: 400; line-height: normal; white-space: nowrap; }
.recruit__text {
	width: 550px; max-width: 100%; margin-top: 46px; color: #E8E8E8;
	font-family: var(--ff-jp); font-size: 16px; font-weight: 400; line-height: normal;
}
.recruit__btn { margin-top: 40px; }

/* ＃会社案内 ---------------------------------------------- */
.company { position: relative; width: 100%; background: #EBEBEB; }
.company__inner {
	position: relative; width: 100%; max-width: var(--pc-w);
	height: 1313px; margin-inline: auto; overflow: hidden;
}
.company__photo1 { display: block; position: absolute; top: 0; left: 0; width: 875px; height: 793px; }
.company__photo1 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.company__photo2 { display: block; position: absolute; top: 673px; right: 0; width: 720px; height: 452px; z-index: 1; }
.company__photo2 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.company__body { position: absolute; left: 140px; top: calc(793px + 103px); width: 700px; z-index: 2; }
.company__title { color: #231815; font-family: var(--ff-jp); font-size: 46px; font-weight: 400; line-height: normal; }
.company__text {
	margin-top: 54px; padding-left: 5px; color: #2F2F2F;
	font-family: var(--ff-jp); font-size: 16px; font-weight: 400; line-height: 1.9;
}
.company__body .c-btn { margin-top: 3px; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 1439px) {
	.fv__en { font-size: clamp(40px, 8.3vw, 120px); }
	.fv__jp { font-size: clamp(20px, 3.2vw, 46px); letter-spacing: .15em; }
	.section-nav__inner { padding: 12px 20px; }
}


/* SP専用要素（PCでは非表示） */
.sp-telbar { display: none; }
.service__sp-lead { display: none; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 1439px) {
	.fv__en { font-size: clamp(40px, 8.3vw, 120px); }
	.fv__jp { font-size: clamp(20px, 3.2vw, 46px); letter-spacing: .15em; }
	.section-nav__inner { padding: 12px 20px; }
}

/* =========================================================
   SP（375px基準）— SPデザインカンプに準拠
   ========================================================= */

/* =========================================================
   SP（375px基準）— SPデザインカンプ・仕様準拠
   ========================================================= */
@media (max-width: 768px) {

	/* ---- FV（ヘッダー込み高さ631） ---- */
	.fv { height: 631px; }
	.fv__en {
		bottom: auto; top: 42%; transform: translateY(-50%);
		font-family: var(--ff-en);
		font-size: 36px; font-weight: 400; line-height: normal;
		letter-spacing: 0;
	}
	.fv__jp {
		bottom: auto; top: 60%;
		font-family: var(--ff-jp);
		font-size: 16px; font-weight: 400; line-height: normal;
		letter-spacing: 3.2px;
	}

	/* ---- FV下 電話バー（FV内の下部に絶対配置） ---- */
	.section-nav { display: none; }
	.sp-telbar {
		display: block;
		position: absolute; z-index: 3;
		left: 50%; bottom: 10px; transform: translateX(-50%);
		width: 355px; max-width: calc(100% - 20px);
		height: 50px;
		background: #2EC39C; color: #FFF;
		text-align: center;
		padding-top: 3px;
	}
	.sp-telbar__label {
		display: block;
		font-family: var(--ff-jp);
		font-size: 12px; font-weight: 700; line-height: 1.2;
	}
	.sp-telbar__num {
		display: inline-flex; align-items: baseline;
		margin-top: 5px; /* 上のテキストから5px下 */
		font-family: var(--ff-jp);
		font-size: 22.5px; font-weight: 500; line-height: 1;
	}
	.sp-telbar__num small {
		font-family: var(--ff-jp);
		font-size: 12px; font-weight: 700; margin-left: 2px;
	}

	/* ---- ＃私たちの想い ---- */
	.mission { min-height: 0; padding: 0 0 40px; }
	.mission__inner { padding: 40px 24px 0; }
	.mission__title {
		font-family: var(--ff-jp);
		font-size: 24px; font-weight: 400; line-height: normal;
		color: #231815;
	}
	.mission__lead {
		margin-top: 26px; text-align: center;
		font-family: var(--ff-jp);
		font-size: 13px; font-weight: 300; line-height: 1.5;
		color: #231815;
	}

	/* ---- ＃とび土工工事業の紹介 ---- */
	.service {
		/* 背景の緑帯を大きく（SP:210px相当） */
		background: linear-gradient(#2EC39C, #2EC39C) top / 100% 210px no-repeat, #E3ECE9;
		padding: 0 0 40px;
		display: flex; flex-direction: column;
	}
	/* 上画像：右寄せ */
	.service__hero {
		padding: 30px 0 0; justify-content: flex-end; order: 1;
	}
	.service__hero-img { width: calc(100% - 30px); max-width: none; }
	.service__hero-img img { height: auto; }

	/* 見出し・本文（中央寄せ） */
	.service__head { order: 2; padding: 24px 24px 0; text-align: center; }
	.service__title {
		font-family: var(--ff-jp);
		font-size: 24px; font-weight: 400; line-height: normal;
		color: #231815;
	}
	.service__lead {
		padding-left: 0; margin-top: 16px; text-align: center;
		font-family: var(--ff-jp);
		font-size: 13px; font-weight: 300; line-height: 1.9;
		color: #231815;
	}
	.service__lead br { display: none; }
	.service__lead strong { font-weight: 700; }

	/* 概要導線（事業3つの前に配置） */
	.service__overview { order: 3; margin-top: 24px; padding-inline: 24px; text-align: center; }
	.service__overview-text {
		font-family: var(--ff-jp); font-size: 13px; font-weight: 300;
		color: #231815;
	}
	.service__overview .c-btn {
		width: 250px; height: 56px; margin-top: 12px;
		font-family: var(--ff-jp); font-size: 18px; font-weight: 700;
	}

	/* SP専用の導線見出し */
	.service__sp-lead {
		display: block; order: 4; margin-top: 26px;
		text-align: center;
		font-family: var(--ff-jp); font-size: 13px; font-weight: 300;
		color: #231815;
	}

	/* 事業3つ（HTML順どおり：土工→残土→コンクリ） */
	.service-row {
		flex-direction: column; gap: 0;
		margin-top: 20px !important; padding-inline: 0;
	}
	.service-row--img-right { flex-direction: column; } /* PC側の row-reverse を打ち消し */
	.service-row--soil { order: 5; } /* 土工事業 */
	.service-row--dig  { order: 6; } /* 残土運搬事業 */
	.service-row--conc { order: 7; } /* コンクリート事業 */

	/* 画像：左寄せ・右寄せ交互（375px時：反対側に30px余白） */
	.service-row__img { width: 100%; display: flex; }
	.service-row--img-left  .service-row__img { justify-content: flex-start; }
	.service-row--img-right .service-row__img { justify-content: flex-end; }
	.service-row__img img {
		width: calc(100% - 30px); height: auto; display: block;
	}

	.service-row__body { padding: 16px 24px 0; max-width: 100%; }
	.service-row__title {
		font-family: var(--ff-jp);
		font-size: 24px; font-weight: 500; line-height: normal;
		color: #2EC39C;
	}
	.service-row__text {
		width: 100%; margin-top: 10px;
		font-family: var(--ff-jp);
		font-size: 13px; font-weight: 300; line-height: 19px;
		color: #231815;
	}
	.service-row .c-btn {
		width: 250px; height: 56px; margin: 18px auto 0;
		font-family: var(--ff-jp); font-size: 18px; font-weight: 700;
	}

	/* ---- ＃選ばれる理由 ---- */
	.reason {
		/* 背景の緑帯 高さ211px */
		background: linear-gradient(#2EC39C, #2EC39C) top / 100% 211px no-repeat, #FFFFFF;
		padding-bottom: 40px;
	}
	/* 上画像：左寄せ・右余白あり */
	.reason__hero { padding-top: 30px; justify-content: flex-start; }
	.reason__hero-img { width: calc(100% - 30px); max-width: none; }
	.reason__hero-img img { height: auto; }
	.reason__body { padding: 24px 24px 0; text-align: center; }
	.reason__title {
		font-family: var(--ff-jp);
		font-size: 24px; font-weight: 400; line-height: normal;
		color: #231815;
	}
	.reason__cards { flex-direction: column; gap: 20px; margin-top: 22px; }
	.reason-card { width: 100%; }
	.reason-card img { width: 100%; height: auto; }
	.reason-card__caption {
		width: 100%; min-height: 0; padding: 14px 16px 16px; text-align: left;
	}
	.reason-card__lead {
		font-family: var(--ff-jp); font-size: 16px; font-weight: 700; color: #2EC39C;
	}
	.reason-card__sub {
		font-family: var(--ff-jp); font-size: 12px; font-weight: 400;
		margin-top: 6px; line-height: 1.6; color: #1A1A1A;
	}

	/* ---- ＃安全への取り組み ---- */
	.safety { padding-block: 40px 40px; }
	.safety__inner { padding-inline: 20px; }
	.safety__title {
		font-family: var(--ff-jp); font-size: 24px; font-weight: 400; color: #231815;
	}
	.safety__subtitle {
		margin-top: 20px;
		font-family: var(--ff-jp); font-size: 16px; font-weight: 700; color: #2EC39C;
	}
	.safety__list { margin-top: 20px; }

	/* カード：grid で「タイトル / ラベル|画像 / 本文」の3段構造。ラベルは画像行の上端合わせ */
	.safety-card {
		display: grid;
		grid-template-columns: 24px 1fr;
		grid-template-areas:
			"title title"
			"axis  img"
			"text  text";
		gap: 0;
		margin-left: 0 !important; margin-bottom: 20px;
		background: #EFEFEE; padding: 16px 16px 20px 8px;
	}
	.safety-card__axis {
		grid-area: axis;
		writing-mode: vertical-rl; transform: rotate(180deg);
		font-family: var(--ff-jp); font-size: 11px; font-weight: 400; color: #2EC39C;
		align-self: start; /* 画像上端に合わせる */
		justify-self: center;
		margin-top: 0;
	}
	.safety-card__box {
		display: contents; /* boxを消して中の要素をgridに直接配置 */
		position: static;
		width: auto; height: auto; background: none; padding: 0;
	}
	.safety-card__lead {
		grid-area: title;
		margin-bottom: 12px;
		font-family: var(--ff-jp); font-size: 15px; font-weight: 700;
		line-height: 1.5; color: #2EC39C;
	}
	.safety-card__img {
		grid-area: img;
		position: static; width: 100%; height: auto; margin: 0;
	}
	.safety-card__img img { width: 100%; height: auto; }
	.safety-card__text {
		grid-area: text;
		width: 100%; margin-top: 12px;
		font-family: var(--ff-jp); font-size: 12px; font-weight: 400;
		line-height: 1.8; color: #2F2F2F;
	}

	/* ---- ＃採用案内 ---- */
	.recruit__inner {
		position: relative; height: auto; padding: 36px 24px 40px;
		display: flex; flex-direction: column;
	}
	.recruit__head { order: 1; }
	.recruit__gallery { order: 2; }
	.recruit__body { order: 3; }

	/* ＃採用案内 JOIN US! を右上に */
	.recruit__head {
		position: static;
		text-align: right;
		margin-top: 0;
		margin-bottom: 24px;
	}
	.recruit__title {
		font-family: var(--ff-jp); font-size: 24px; font-weight: 400; color: #FFF;
	}
	.recruit__en {
		margin-top: 6px;
		font-family: var(--ff-en); font-size: 20px; font-weight: 500; color: #2EC39C;
	}

	/* 3枚の写真：60%幅で 左→右→中央 の位置に */
	.recruit__gallery { display: flex; flex-direction: column; gap: 16px; }
	.recruit-photo { position: static; width: 60%; }
	.recruit-photo img { width: 100%; height: auto; }
	.recruit-photo__bar {
		width: 100%; height: 36px;
		font-family: var(--ff-jp); font-size: 15px; font-weight: 400;
	}
	.recruit-photo--1 { align-self: flex-start; } /* 左寄せ */
	.recruit-photo--2 { align-self: flex-end; }   /* 右寄せ */
	.recruit-photo--3 { align-self: center; }     /* 中央 */

	/* 本文ブロック */
	.recruit__body { position: static; width: 100%; margin-top: 26px; right: auto; }
	.recruit__catch {
		font-family: var(--ff-jp); font-size: 18px; font-weight: 400;
		color: #2EC39C; white-space: normal; text-align: left;
	}
	.recruit__text {
		width: 100%; margin-top: 14px;
		font-family: var(--ff-jp); font-size: 13px; font-weight: 400;
		line-height: 1.9; color: #E8E8E8;
	}
	.recruit__btn {
		width: 250px; height: 56px; margin: 22px auto 0;
		font-family: var(--ff-jp); font-size: 18px; font-weight: 700;
	}

	/* ---- ＃会社案内 ---- */
	.company__inner { height: auto; padding: 0 0 40px; }
	.company__photos { display: block; position: relative; }
	.company__photo1 {
		position: static; width: calc(100% - 30px); height: auto;
	}
	.company__photo1 img { height: auto; }
	.company__photo2 {
		position: relative; top: auto; right: auto;
		width: 80%; height: auto; margin: -30px 0 0 auto;
	}
	.company__photo2 img { height: auto; }
	.company__body { position: static; width: 100%; padding: 24px 24px 0; }
	.company__title {
		font-family: var(--ff-jp); font-size: 24px; font-weight: 400; color: #231815;
	}
	.company__text {
		margin-top: 14px; padding-left: 0;
		font-family: var(--ff-jp); font-size: 13px; font-weight: 400;
		line-height: 1.9; color: #2F2F2F;
	}
	.company__body .c-btn {
		width: 250px; height: 56px; margin: 18px auto 0;
		font-family: var(--ff-jp); font-size: 18px; font-weight: 700;
	}

	/* SPは250px幅なので矢印を右端寄り20pxに */
	.c-btn--viewmore .arrow { right: 20px; }
}