/* ==========================================================================
   Business
   事業概要（page-business.php）
   デザイン幅: 1920px
   ========================================================================== */

/* --------------------------------------------------------------------------
   導入（組織の課題を、ひとつの施策だけで捉えない）
   -------------------------------------------------------------------------- */
.p-business-intro {
	padding-top: 60px;
	padding-bottom: 60px;
	color: var(--color-white);
	background-color: var(--color-pink-red);
}

.p-business-intro__title {
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.33;
	letter-spacing: 0.08em;
}

.p-business-intro__text {
	margin-top: 20px;
	line-height: 1.625;
	letter-spacing: 0.08em;
}

@media (max-width: 767px) {
	.p-business-intro {
		padding-top: 36px;
		padding-bottom: 36px;
	}

	.p-business-intro__title {
		font-size: 1.375rem;
	}
}

/* --------------------------------------------------------------------------
   Business Flow（業務の流れ）
   -------------------------------------------------------------------------- */
.p-business-flow {
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: var(--color-white);
}

.p-business-flow__list {
	display: flex;
	margin-top: 30px;
}

.p-business-flow__item {
	--notch: 45px; /* 矢印の切り込み・先端の深さ */
	display: flex;
	flex: 0 0 auto; /* 1・2 枚目は文字の長さに合わせ、3 枚目が残りの幅を埋める（デザインどおり） */
	flex-direction: column;
	align-items: center;
	min-width: 0;
	margin-right: -30px; /* 前の矢印の先端を、次の切り込みに入れる */
}

.p-business-flow__item:last-child {
	flex: 1 1 auto;
	margin-right: 0;
}

/* 矢印形の見出し（左に切り込み、右に先端。最初は左を平らに、最後は右を平らにする） */
.p-business-flow__head {
	display: flex;
	gap: 20px;
	align-items: center;
	align-self: stretch;
	height: 100px;
	margin-bottom: -12px;
	padding: 5px calc(var(--notch) + 10px) 0 calc(var(--notch) + 20px);
	white-space: nowrap;
	background-color: var(--color-pale-orange);
	clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
}

.p-business-flow__item:first-child .p-business-flow__head {
	clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%);
}

.p-business-flow__item:last-child .p-business-flow__head {
	padding-right: 20px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--notch) 50%);
}

.p-business-flow__num {
	flex-shrink: 0;
	width: 60px;
	font-family: var(--font-en);
	font-size: 3.125rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	text-align: center;
	color: var(--color-red);
}

.p-business-flow__title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.18em;
	color: var(--color-red-dark);
}

.p-business-flow__image {
	position: relative;
	height: 200px;
	width: auto;
}

@media (max-width: 1279px) {
	.p-business-flow__item,
	.p-business-flow__item:last-child {
		flex: 1 1 0;
	}

	.p-business-flow__image {
		max-width: 100%;
		object-fit: contain;
	}

	.p-business-flow__title {
		font-size: 1rem;
		letter-spacing: 0.04em;
	}

	.p-business-flow__num {
		width: auto;
		font-size: 2.25rem;
	}

	.p-business-flow__head {
		--notch: 30px;
		gap: 10px;
		white-space: normal;
		padding-left: calc(var(--notch) + 6px);
		padding-right: calc(var(--notch) + 4px);
	}

	.p-business-flow__item {
		margin-right: -18px;
	}
}

/* SP は縦に並べ、見出しは下向きの矢印にする */
@media (max-width: 767px) {
	.p-business-flow {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.p-business-flow__list {
		flex-direction: column;
		gap: 20px;
	}

	.p-business-flow__item {
		margin-right: 0;
	}

	/* 下向きの矢印。先端の深さ（--arrow）を大きめにして、尖っているのが分かるようにする */
	.p-business-flow__head,
	.p-business-flow__item:first-child .p-business-flow__head,
	.p-business-flow__item:last-child .p-business-flow__head {
		--arrow: 32px;
		height: auto;
		min-height: 80px;
		margin-bottom: 8px;
		padding: 14px 20px calc(var(--arrow) + 10px);
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--arrow)), 50% 100%, 0 calc(100% - var(--arrow)));
	}

	.p-business-flow__item:last-child .p-business-flow__head {
		padding-bottom: 14px;
		clip-path: none;
	}

	.p-business-flow__title br {
		display: none;
	}

	.p-business-flow__image {
		height: 160px;
	}
}

/* --------------------------------------------------------------------------
   Detailed Business（事業内容）
   -------------------------------------------------------------------------- */
.p-business-detail {
	padding-top: 60px;
	overflow: hidden;
	overflow: clip; /* 背景の装飾（2880px）の横はみ出しをここで切る */
	background-color: var(--color-white);
	/* 上端の内側の影。Figma は inner shadow（Y 14・ぼかし 20・広がり -10・黒 12%）だが、
	   ブラウザで広がり -10 にすると薄くなりすぎるため、見た目が合う 0 にしている */
	box-shadow: inset 0 14px 20px rgb(0 0 0 / 0.12);
}

/* 事業 1 つ分 */
.p-business-detail > .l-container {
	position: relative;
	z-index: 1; /* 01 の背景の装飾より上に見出しを出す */
}

.p-business-item {
	position: relative;
	z-index: 0;
	padding-top: 40px;
	padding-bottom: 40px;
	overflow: hidden;
	overflow: clip;
	scroll-margin-top: 0;
}

/* 01 の背景の装飾は上の見出し（Detailed Business）の後ろまで続くため、01 では切らない。
   上はセクション（.p-business-detail）の上端で切れる。下にはみ出した分は 02 の背景で隠れる */
.p-business-item--01 {
	overflow: visible;
	background-color: var(--color-white);
}

.p-business-item--02 {
	background-color: var(--color-pale-grey);
}

.p-business-item--03 {
	background-color: var(--color-pale-orange);
}

/* 02・03 は上端の内側に影を付け、前の事業との境目を出す（.p-business-detail と同じ影） */
.p-business-item--02,
.p-business-item--03 {
	box-shadow: inset 0 14px 20px rgb(0 0 0 / 0.12);
}

/* 背景の装飾（c-bg-decoration）の位置
   Figma の配置に合わせる（デザイン幅の左端から -582px、01 は上端から -285px、02・03 は -143px） */
.p-business-item {
	--bg-decoration-top: -143px;
	--bg-decoration-left: 1542px;
}

.p-business-item--01 {
	--bg-decoration-top: -285px;
}

/* 見出し（番号 + 名称。c-number-heading） */
.p-business-item__title {
	display: inline-flex;
}

.p-business-item__title-text {
	font-weight: 700;
}

.p-business-item__text {
	margin-top: 30px;
	line-height: 1.625;
	letter-spacing: 0.08em;
	color: var(--color-black);
}

/* このようなときに */
.p-business-item__cases {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-top: 20px;
	padding: 10px 18px;
	background-color: rgb(255 255 255 / 0.5);
	border-radius: 20px;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.p-business-item__cases-title {
	display: flex;
	gap: 25px;
	align-items: center;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.08em;
	color: var(--color-pink-red);
}

.p-business-item__cases-title::after {
	content: "";
	flex: 1;
	height: 3px;
	background-color: var(--color-pink-red);
}

.p-business-item__case-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 15px 20px;
}

.p-business-item__case {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: center;
	min-height: 120px; /* 行の高さは区切り線（120px）に合わせる。カード（102px）は上下中央 */
}

/* 列の区切り線（各行の 2 列目以降の左に出す。表示する位置は列数ごとに下で指定） */
.p-business-item__case::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 2px;
	background-color: rgb(21 25 85 / 0.14);
}

.p-business-item__case:not(:nth-child(3n + 1)) {
	padding-left: 20px;
}

.p-business-item__case:not(:nth-child(3n + 1))::before {
	content: "";
}

.p-business-item__case-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 101px;
	padding: 8px;
	background-color: var(--color-pale-grey);
	box-shadow: inset 4px 4px 12px rgb(0 0 0 / 0.2);
}

.p-business-item__case-img {
	width: auto;
	max-width: 90px;
	height: auto;
	max-height: 85px;
}

.p-business-item__case-text {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.56;
	letter-spacing: 0.06em;
	color: var(--color-text);
}

.p-business-item__case-em {
	font-style: normal;
	color: var(--color-pink-red);
}

/* 主な支援 */
.p-business-item__support {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	margin-top: 30px;
}

/* 見出しは c-band-label、箱は c-frame-box */
.p-business-item__support-box {
	display: flex;
	gap: 200px; /* リスト（450px）の右 200px にイラストを置く */
	align-items: flex-end;
	align-self: stretch;
	padding: 20px 60px;
}

.p-business-item__support-list {
	display: flex;
	flex-direction: column;
	flex: 0 1 450px;
	gap: 15px;
}

/* 小見出しは c-square-heading、項目は c-line-item */
.p-business-item__support-items {
	margin-top: 10px;
	padding-left: 23px; /* 行頭の線の左端を、小見出しの文字の左端（四角 11px + 間 12px）にそろえる */
}

.p-business-item__support-image {
	flex-shrink: 0;
	width: 350px;
}

@media (max-width: 1279px) {
	.p-business-item__case-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.p-business-item__case:not(:nth-child(3n + 1)) {
		padding-left: 0;
	}

	.p-business-item__case:not(:nth-child(3n + 1))::before {
		content: none;
	}

	.p-business-item__case:nth-child(2n) {
		padding-left: 20px;
	}

	.p-business-item__case:nth-child(2n)::before {
		content: "";
	}

	.p-business-item__support-box {
		gap: 40px;
		justify-content: space-between;
		padding-left: 30px;
		padding-right: 30px;
	}

	.p-business-item__support-image {
		width: 280px;
	}
}

@media (max-width: 767px) {
	.p-business-detail {
		padding-top: 36px;
	}

	.p-business-item {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	/* SP は見出しが 2 行に折り返すことがあるため、上下の余白をそろえる（PC は番号の位置に合わせて上だけ 8px） */
	.p-business-item__title {
		gap: 10px;
		min-height: 56px;
		padding: 10px 20px;
	}

	.p-business-item__title-text {
		font-size: 1.0625rem;
		letter-spacing: 0.08em;
	}

	/* アイコンと見出しの端が枠にくっつかないよう、枠の内側に左右 10px の余白をとる */
	.p-business-item__cases {
		padding: 10px 10px 20px;
	}

	.p-business-item__cases-title {
		gap: 14px;
		font-size: 1.125rem;
	}

	.p-business-item__case-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.p-business-item__case,
	.p-business-item__case:nth-child(2n) {
		min-height: 0;
		padding-left: 0;
	}

	.p-business-item__case::before,
	.p-business-item__case:nth-child(2n)::before {
		content: none;
	}

	.p-business-item__case-icon {
		width: 96px;
		height: 81px;
	}

	.p-business-item__case-img {
		max-width: 72px;
		max-height: 68px;
	}

	.p-business-item__case-text {
		font-size: 1rem;
	}

	/* 縦に並べるため、リストの幅の指定（flex: 0 1 450px）が高さとして効かないようにする */
	.p-business-item__support-list {
		flex-basis: auto;
	}

	/* リストと図は箱の左右いっぱいに広げる。箱の左右の余白はこの箱だけ特別に 10px（上下は 20px） */
	.p-business-item__support-box {
		flex-direction: column;
		align-items: stretch;
		padding: 20px 10px;
	}

	.p-business-item__support-heading {
		font-size: 1.125rem;
	}

	.p-business-item__support-image {
		width: 100%;
	}
}