@charset "UTF-8";

/* ========================================
	style
======================================== */

.business__container {
	padding-top: 6.5rem;
}

.business__contents {
	position: relative;
	padding: 0.8rem 0 1.6rem 6%;
}

/* 各事業部ボーダー要素 */
.business__contents::before,
.business__contents::after {
	content: '';
	display: block;
	inline-size: 4px;
	position: absolute;
	left: 0;
	top: 0;
}

.business__contents::before {
	block-size: 100%;
	background: #c6c6c6;
}

.business__contents::after {
	block-size: 85px;
}

.business__list>li:not(:first-child) {
	margin-top: 8rem;
}

/* 各事業部ボーダー要素（ブルー） */
.business__list>li:is(:nth-child(1), :nth-child(4)) .business__contents::after {
	background: var(--nawa-blue);
}

/* 各事業部ボーダー要素（レッド） */
.business__list>li:is(:nth-child(2), :nth-child(5)) .business__contents::after {
	background: var(--nawa-red);
}

/* 各事業部ボーダー要素（グリーン） */
.business__list>li:nth-child(3) .business__contents::after {
	background: var(--nawa-green);
}

/* 各事業部ボーダー要素（ブラック） */
.business__list>li:nth-child(n+6) .business__contents::after {
	background: var(--black);
}

/* 各事業部イメージ画像定義 */
.business__list>li:first-child .business__image {
	background: var(--filter-image-url) var(--filter-image-option),
		url('/assets/common/images/img-business01.jpg') no-repeat center/cover;
}

.business__list>li:nth-child(2) .business__image {
	background: var(--filter-image-url) var(--filter-image-option),
		url('/assets/common/images/img-business02.jpg') no-repeat center/cover;
}

.business__list>li:nth-child(3) .business__image {
	background: var(--filter-image-url) var(--filter-image-option),
		url('/assets/common/images/img-business03.jpg') no-repeat center/cover;
}

.business__list>li:nth-child(4) .business__image {
	background: var(--filter-image-url) var(--filter-image-option),
		url('/assets/common/images/img-business04.jpg') no-repeat center/cover;
}

.business__list>li:nth-child(5) .business__image {
	background: var(--filter-image-url) var(--filter-image-option),
		url('/assets/common/images/img-business05.jpg') no-repeat center/cover;
}

/* 各事業部・タイトルエリア */
.business__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* 各事業部見出し */
.business__title {
	font-size: clamp(2.6rem, 3.8vw, 4rem);
	font-weight: 600;
	line-height: 1.5;
}

.business__title.small {
	font-size: clamp(2.6rem, 2.8vw, 3rem);
}

.business__title--en {
	display: block;
	font: 400 clamp(1.2rem, 1.4vw, 1.6rem) var(--font-family-en);
	color: #8b8585;
	padding-top: 0.2em;
}

.business__copy {
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.85;
	margin-top: 2rem;
}

/* 各事業部アイコン */
.business__icon img {
	inline-size: auto;
	block-size: 65px;
}

/* 各事業部イメージ画像 */
.business__image {
	padding-top: 55%;
	box-shadow: 8px 12px 0px 0px var(--gray-200);
}

.arrow-button__container {
	margin-top: 2.5rem;
}

/* ========================================
	768px未満専用スタイル（SP）
======================================== */
@media screen and (width <768px) {

	.business .base-width {
		padding-inline: 7%;
	}

}

/* ========================================
	1180px未満専用スタイル（TAB&SP）
======================================== */
@media screen and (width < 1180px) {

	/* 各事業部イメージ画像 */
	.business__image {
		margin-top: 2rem;
	}

}

/* ========================================
	1180px以上専用スタイル（PC）
======================================== */
@media print,
screen and (1180px <=width) {

	.business__container {
		padding-top: 5rem;
	}

	.business__contents {
		flex: 1 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 1.5rem 0 2.4rem 4.5%;
	}

	.business__contents::after {
		block-size: 130px;
	}

	.business__list>li:not(:first-child) {
		margin-top: 13rem;
	}

	/* PCのみ・横並び */
	.business__item {
		display: flex;
		gap: 0 6.66%;
	}

	/* 各事業部見出し */
	.section-title--ja {
		padding-left: 0.55em;
	}

	/* 各事業部アイコン */
	.business__icon img {
		block-size: 95px;
	}

	.business__copy {
		font-size: 1.6rem;
		line-height: 1.75;
		margin-top: 3rem;
	}

	/* 各事業部イメージ画像 */
	.business__image {
		inline-size: 500px;
		padding-top: 26%;
		box-shadow: 16px 20px 0px 0px var(--gray-200);
	}

	.arrow-button__container {
		margin-top: 2rem;
	}

}