/* ==========================================================================
   front.css  トップページ専用スタイル
   PC=1440px基準。各セクションは .l-stage(最大1440px中央) 内に配置。
   ========================================================================== */

/* --------------------------------------------------------------------------
   NEWS セクション
   -------------------------------------------------------------------------- */
.p-news {
	width: 100%;
	background: var(--c-bg-light);
}

.p-news__inner {
	position: relative;
	width: 100%;
	max-width: var(--pc-width);
	margin-inline: auto;
	min-height: 560px;
	padding: 74px 100px 0;
}

.p-news__label {
	color: var(--c-navy);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.p-news__title {
	color: var(--c-navy);
	font-size: 50px;
	font-weight: 700;
	line-height: 1;
	margin-top: 13px;
}

.p-news__list {
	margin-top: 26px;
	border-top: 1px solid var(--c-line);
}

.p-news__item {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 60px;
	border-bottom: 1px solid var(--c-line);
	padding-left: 6px;
}

.p-news__date {
	color: var(--c-navy-2b);
	font-size: 16px;
	font-weight: 700;
	flex-shrink: 0;
	width: 96px;
}

.p-news__cat {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 124px;
	height: 30px;
	border-radius: 23px;
	background: var(--c-navy);
	color: var(--c-white);
	font-size: 16px;
	font-weight: 400;
	flex-shrink: 0;
}

.p-news__post-title {
	color: var(--c-navy-2b);
	font-size: 16px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.p-news__more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 280px;
	height: 56px;
	margin: 40px auto 0;
	border-radius: 50px;
	background: var(--c-gold);
	color: var(--c-white);
	font-size: 18px;
	font-weight: 700;
	line-height: 18px;
}

/* --------------------------------------------------------------------------
   ステートメント帯（ネイビー）
   -------------------------------------------------------------------------- */
.p-statement {
	position: relative;
	width: 100%;
	height: 268px;
	background: var(--c-navy);
	overflow: hidden;
}

.p-statement__bg {
	position: absolute;
	top: 99px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	min-width: 1440px;
	height: 71.377px;
	object-fit: contain;
	opacity: 1;
	pointer-events: none;
}

.p-statement__text {
	position: absolute;
	top: 97px;
	left: 50%;
	transform: translateX(-50%);
	width: 708px;
	max-width: calc(100% - 40px);
	text-align: center;
	color: var(--c-gold);
	font-size: 24px;
	font-weight: 700;
	line-height: 36px;
	letter-spacing: 4.8px;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   BUSINESS 事業内容
   -------------------------------------------------------------------------- */
.p-business {
	position: relative;
	width: 100%;
	min-height: 1604px;
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
}
.p-business__inner {
	width: 100%;
	max-width: var(--pc-width);
	margin-inline: auto;
	position: relative;
}

.p-business__head {
	padding: 75px 0 0 100px;
}

.p-business__label {
	color: var(--c-gold);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.p-business__title {
	color: var(--c-gold);
	font-size: 50px;
	font-weight: 700;
	line-height: 1;
	margin-top: 14px;
}

.p-business__sub {
	color: var(--c-navy-2b);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	margin-top: 8px;
}

/* カードグリッド */
.p-business__grid {
	margin-top: 40px;
	padding: 0 100px;
	display: grid;
	grid-template-columns: 608px 608px;
	justify-content: start;
	column-gap: 24px;
	row-gap: 24px;
}

/* 下段：左カード(3番目)を左から150px、PCキッティング(4番目)はその右24px(=通常のcolumn-gap)に隣接 */
.p-business__grid > .p-biz-card:nth-child(3) {
	grid-column: 1;
	margin-left: 50px;
}
.p-business__grid > .p-biz-card:nth-child(4) {
	grid-column: 2;
	margin-left: 50px;
}

.p-biz-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 608px;
	max-width: 100%;
	padding-bottom: 32px;
	border-radius: 8px;
	background: var(--c-white);
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

.p-biz-card__img {
	width: 608px;
	max-width: 100%;
	height: 394px;
	aspect-ratio: 125 / 81;
	object-fit: cover;
	border-radius: 8px 8px 0 0;
	display: block;
}

.p-biz-card__body {
	width: 100%;
	padding: 0 16px;
}

.p-biz-card__title {
	color: var(--c-navy-2b);
	font-size: 24px;
	font-weight: 700;
	margin-top: 25px;
}

.p-biz-card__text {
	width: 572px;
	max-width: 100%;
	color: var(--c-text-sub);
	font-size: 16px;
	font-weight: 400;
	line-height: 180%;
	margin-top: 7px;
}

.p-biz-card__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 270px;
	height: 48px;
	margin: 12px auto 0;
	border-radius: 24px;
	background: var(--c-gold);
	color: var(--c-white);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 3.2px;
}

/* --------------------------------------------------------------------------
   STRENGTH セクション
   -------------------------------------------------------------------------- */
.p-strength {
	position: relative;
	width: 100%;
	height: 706px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.p-strength__inner {
	position: relative;
	width: 100%;
	max-width: var(--pc-width);
	height: 100%;
	margin-inline: auto;
}

.p-strength__center {
	position: absolute;
	top: 306px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 2;
}

.p-strength__label {
	color: var(--c-gold);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.p-strength__title {
	color: var(--c-gold);
	font-size: 50px;
	font-weight: 700;
	line-height: 1;
	margin-top: 8px;
}

/* 金の枠 */
.p-strength__frame {
	position: absolute;
	top: calc(50% - 3px);
	left: 50%;
	transform: translate(-50%, -50%);
	width: 716px;
	height: 297px;
	border-radius: 34px;
	border: 5px solid var(--c-gold);
	z-index: 1;
}

.p-str-card {
	position: absolute;
	width: 318px;
	min-height: 156px;
	border-radius: 8px;
	background: var(--c-bg-card);
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
	padding: 16px 22px;
	z-index: 3;
}

.p-str-card__title {
	color: var(--c-navy-2b);
	font-size: 17px;
	font-weight: 700;
	margin-top: 4px;
	line-height: 1.4;
}

.p-str-card__no {
	color: var(--c-gold);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}

.p-str-card__text {
	color: var(--c-text-sub);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	margin-top: 4px;
}

.p-str-card--01 { top: 78px;  left: 504px; }
.p-str-card--02 { top: 230px; left: 908px; }
.p-str-card--03 { top: 471px; left: 618px; }
.p-str-card--04 { top: 320px; left: 214px; }

/* --------------------------------------------------------------------------
   WORK FLOW セクション
   -------------------------------------------------------------------------- */
.p-flow {
	position: relative;
	width: 100%;
	min-height: 451px;
	background: var(--c-gray-work);
	padding: 61px 0 0;
}
.p-flow__inner {
	width: 100%;
	max-width: var(--pc-width);
	margin-inline: auto;
	padding: 0 100px;
}

.p-flow__label {
	color: var(--c-gold);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.p-flow__title {
	color: var(--c-gold);
	font-size: 50px;
	font-weight: 700;
	line-height: 1;
	margin-top: 13px;
}

.p-flow__list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 39px;
	margin-top: 40px;
}

.p-flow__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 239px;
	height: 160px;
	border-radius: 8px;
	background: var(--c-bg-card);
	padding: 18px 12px;
}

.p-flow__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -24px;
	transform: translateY(-50%);
	width: 9px;
	height: 12px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	background: var(--c-gold);
}

.p-flow__no {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--c-gold);
	color: var(--c-white);
	font-size: 16px;
	font-weight: 700;
}

.p-flow__item-title {
	color: var(--c-navy-2b);
	font-size: 18px;
	font-weight: 700;
	margin-top: 10px;
}

.p-flow__item-text {
	color: var(--c-text-sub);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	margin-top: 6px;
}

/* --------------------------------------------------------------------------
   WORK 施工事例セクション（上下に帯）
   -------------------------------------------------------------------------- */
.p-work-band {
	width: 100%;
	height: 56px;
	background: var(--c-bg-card);
}

.p-work {
	position: relative;
	width: 100%;
	min-height: 762px;
	background: var(--c-bg-f5);
	padding-top: 80px;
}

.p-work__label {
	text-align: center;
	color: var(--c-navy-2b);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.p-work__title {
	text-align: center;
	color: var(--c-navy-2b);
	font-size: 50px;
	font-weight: 700;
	line-height: 1;
	margin-top: 13px;
}

.p-work__sub {
	text-align: center;
	color: var(--c-navy-2b);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	margin-top: 13px;
}

.p-work__list {
	position: relative;
	margin-top: 96px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 70px;
	padding: 0 100px;
}

.p-work-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 270px;
}

/* work02は中央でやや上げるデザイン */
.p-work-card--02 { margin-top: -60px; }
.p-work-card--03 { margin-top: 16px; }

.p-work-card__img {
	width: 260px;
	height: 260px;
	object-fit: contain;
}

.p-work-card__box {
	position: relative;
	width: 270px;
	min-height: 126px;
	margin-top: -80px;
	border-radius: 8px;
	background: #D9D9D9;
	padding: 16px 16px 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.p-work-card__cat {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	height: 22px;
	border-radius: 17px;
	background: var(--c-navy-2b);
	color: var(--c-white);
	font-size: 14px;
	font-weight: 700;
}

.p-work-card__name {
	color: var(--c-navy-2b);
	font-size: 16px;
	font-weight: 700;
	line-height: 160%;
	margin-top: 5px;
}

.p-work-card__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 242px;
	height: 36px;
	margin-top: 8px;
	border-radius: 24px;
	background: var(--c-gold);
	color: var(--c-white);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 3.2px;
}

/* --------------------------------------------------------------------------
   会社概要バナー
   -------------------------------------------------------------------------- */
.p-company-banner {
	position: relative;
	width: 100%;
	height: 493px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.p-company-banner__inner {
	position: relative;
	width: 100%;
	max-width: var(--pc-width);
	height: 100%;
	margin-inline: auto;
}

.p-company-banner__marks {
	position: absolute;
	top: 94px;
	left: 694px;
	display: flex;
	gap: 25px;
}

.p-company-banner__mark {
	width: 280px;
	height: 151px;
	object-fit: contain;
}

.p-company-banner__text {
	position: absolute;
	top: 273px; /* 94 + 151 + 28 */
	left: 694px;
	width: 585px; /* 280*2 + 25 */
	text-align: center;
	color: var(--c-navy-2b);
	font-size: 24px;
	font-weight: 700;
}

.p-company-banner__btn {
	position: absolute;
	top: 324px; /* text下23 */
	left: 694px;
	width: 585px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

.p-company-banner__btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 232px;
	height: 52px;
	border-radius: 27px;
	background: var(--c-gold);
	color: var(--c-white);
	font-size: 18px;
	font-weight: 700;
}

/* ==========================================================================
   トップ  レスポンシブ
   ========================================================================== */

/* 1440px超で中央寄せ、以下は基本流動。1200px以下から段階調整 */
@media (max-width: 1200px) {
	.p-news__inner { padding-inline: 40px; }
	.p-business__head { padding-left: 40px; }
	.p-business__grid { padding-inline: 40px; column-gap: 24px; grid-template-columns: 1fr 1fr; }
	.p-biz-card,
	.p-biz-card__img,
	.p-biz-card__text { width: 100%; }
	.p-biz-card__img { height: auto; aspect-ratio: 125 / 81; }
	.p-business__grid > .p-biz-card:nth-child(3),
	.p-business__grid > .p-biz-card:nth-child(4) { margin: 0; }
	.p-flow { padding-inline: 40px; }
	.p-work__list { padding-inline: 40px; gap: 40px; }
}

/* 1024px以下：STRENGTHの絶対配置カードをグリッド化 */
@media (max-width: 1024px) {
	.p-strength {
		height: auto;
		padding: 60px 40px 70px;
	}
	.p-strength__center {
		position: static;
		margin-bottom: 32px;
	}
	.p-strength__frame { display: none; }
	.p-str-card {
		position: static;
		width: 100%;
		height: auto;
		min-height: 140px;
		margin-bottom: 20px;
	}
	.p-str-cards {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}

	/* WORKバナー：認可マークを流動化 */
	.p-company-banner {
		height: auto;
		aspect-ratio: auto;
		padding: 48px 24px 56px;
		background-position: center;
	}
	.p-company-banner__marks {
		position: static;
		justify-content: center;
		flex-wrap: wrap;
	}
	.p-company-banner__text,
	.p-company-banner__btn {
		position: static;
		width: 100%;
		margin-top: 24px;
	}
	.p-company-banner__mark { width: 220px; height: auto; }
}

/* 768px以下：単列化 */
@media (max-width: 768px) {
	.p-news__inner { padding: 40px 20px 48px; min-height: 0; }
	.p-news__title { font-size: 34px; }
	.p-news__item {
		flex-wrap: wrap;
		height: auto;
		gap: 8px 12px;
		padding: 14px 4px;
	}
	.p-news__post-title { white-space: normal; flex-basis: 100%; }

	.p-statement { height: auto; padding: 40px 20px; }
	.p-statement__bg { display: none; }
	.p-statement__text {
		position: static;
		transform: none;
		width: 100%;
		font-size: 18px;
		line-height: 1.7;
		letter-spacing: 2px;
	}

	.p-business { min-height: 0; padding-bottom: 60px; background-size: cover; }
	.p-business__head { padding: 48px 20px 0; }
	.p-business__title { font-size: 34px; }
	.p-business__grid {
		grid-template-columns: 1fr;
		padding-inline: 20px;
		row-gap: 32px;
	}
	/* SP：カードの列指定を解除して1列に積む（重要：これが無いと2列扱いになり崩れる） */
	.p-business__grid > .p-biz-card:nth-child(3),
	.p-business__grid > .p-biz-card:nth-child(4) {
		grid-column: auto;
		margin: 0;
	}
	/* SP：カード・画像を幅100%にし、画像高さはアスペクト比で自動決定 */
	.p-biz-card {
		width: 100%;
	}
	.p-biz-card__img {
		width: 100%;
		height: auto;
		aspect-ratio: 125 / 81;
	}
	.p-biz-card__text {
		width: 100%;
	}

	.p-strength { padding: 48px 20px 56px; }
	.p-strength__title { font-size: 34px; }
	.p-str-cards { grid-template-columns: 1fr; }

	.p-flow { padding: 48px 20px 56px; min-height: 0; }
	.p-flow__title { font-size: 34px; }
	.p-flow__list {
		flex-direction: column;
		gap: 32px;
	}
	.p-flow__item { width: 100%; height: auto; padding: 20px; }
	.p-flow__item:not(:last-child)::after {
		top: auto;
		right: 50%;
		bottom: -22px;
		transform: translateX(50%) rotate(90deg);
	}

	.p-work { min-height: 0; padding: 48px 0 56px; }
	.p-work__title { font-size: 34px; }
	.p-work__sub { font-size: 18px; padding-inline: 16px; }
	.p-work__list {
		flex-direction: column;
		align-items: center;
		gap: 32px;
		padding-inline: 20px;
	}
	.p-work-card--02,
	.p-work-card--03 { margin-top: 0; }

	.p-company-banner__mark { width: 45%; }
	.p-company-banner__text { font-size: 20px; }
}