@charset "utf-8";

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
事業内容
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.business-article {
	padding-bottom: var(--padding-block);
}

.business-section {
	padding-bottom: initial;
	background: url("../img/common/ellipse_blue.svg") center bottom / 144% no-repeat;
	counter-increment: number;
}

.business-box {
	display: grid;
	max-width: var(--content-width_large);
	margin-inline: auto;
	padding: var(--padding-block) min(5.4%, 100px) 0;
	border-radius: 10px;
	background: url("../img/business/background.svg") center center / 100% auto no-repeat, linear-gradient(#f2f2f2 50%, #fff 50%);
	font-size: clamp(12px, calc(100vw * 16 / 560), 16px);
}

.business-heading {
	display: flex;
	margin-bottom: 1.5em;
	font-weight: 600;
	font-size: 24px;
	column-gap: 0.5em;
	align-items: center;
}

.business-heading::before {
	padding-bottom: 0.1em;
	border-bottom: 3px solid;
	border-image: linear-gradient(90deg, transparent 25%, var(--color_sub) 25%, var(--color_sub) 75%, transparent 75%) 1;
	color: var(--color_sub);
	font-weight: 500;
	font-size: 1.8em;
	font-family: var(--font_en);
	line-height: 1;
	content: counter(number, decimal-leading-zero);
}

.business-description {
	margin-bottom: 1.5em;
	font-size: 16px;
}

.business-detail-ul {
	display: grid;
	gap: 0.5em;
}

.business-section .heading {
	display: grid;
	font-weight: 600;
	line-height: 1.3;
	grid-template-columns: auto 1fr auto;
	column-gap: 0.6em;
	align-items: center;
}

.business-detail-li .heading {
	height: 3.5em;
	padding: 0.5em 1em;
	border: 1px solid var(--color_gray_dark);
	border-radius: 100vw;
	background: #fff;
	transition: var(--transition);
}

.business-detail-li._active .heading,
.business-detail-li:hover .heading {
	background: #d9f7d9;
}

.business-detail-li .heading::after {
	width: 1.8em;
	height: 1.8em;
	background: url("../img/common/plus.svg") center center / contain no-repeat;
	content: "";
	transition: var(--transition);
}

.business-detail-li:hover .heading::after {
	filter: brightness(1.4);
}

.business-section .icon {
	width: 2.5em;
	height: 2em;
}

.business-detail-li .description {
	display: none;
}

.business-section .modal-content .heading {
	margin-bottom: 1em;
	font-size: 24px;
	pointer-events: none;
}

@media (min-width: 768px) {
.business-box {
	position: relative;
	z-index: 0;
	font-size: min(calc(100vw * 14 / 768), 20px);
	grid-template-rows: auto auto 1fr;
	justify-content: space-between;
}

.business-heading {
	font-size: 48px;
	white-space: nowrap;
}

.business-description {
	margin-bottom: 2em;
}

.business-img {
	position: relative;
	z-index: -1;
	align-self: end;
}

.business-detail-ul {
	width: 16em;
}

.business-section .modal-content .heading {
	font-size: 32px;
}

.business-section .modal-content .description {
	font-size: 18px;
}
}

@media (max-width: 767.9px) {
.business-img {
	width: 400px;
	max-width: 80%;
	margin-bottom: 2em;
	justify-self: center;
}

.business-detail-ul {
	grid-template-columns: 1fr 1fr;
	justify-self: center;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- 清掃業務全般
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
@media (min-width: 768px) {
.business-cleaning .business-box {
	grid-template-columns: 16em auto 16em;
	align-items: end;
}

.business-cleaning .business-img {
	transform: scale(1.2);
	transform-origin: center bottom;
	grid-row: 1 / 4;
	grid-column: 2;
}

.business-cleaning .business-detail-ul:last-child {
	grid-row: 1 / 4;
	grid-column: 3;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- 空調設備管理・工事
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
@media (min-width: 768px) {
.business-air .business-box {
	grid-template-columns: auto 16em;
	column-gap: 40px;
	align-items: start;
}

.business-air .business-heading {
	flex-flow: row-reverse;
}

.business-air .business-img {
	grid-row: 1 / 4;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- 設備工事
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
@media (min-width: 768px) {
.business-equipment .business-box {
	grid-template-columns: 16em auto;
	align-items: start;
}

.business-equipment .business-img {
	grid-row: 1 / 4;
	grid-column: 2;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- 建築工事
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
@media (min-width: 768px) {
.business-construction .business-box {
	grid-template-columns: auto 16em;
	column-gap: 40px;
	align-items: end;
}

.business-construction .business-detail-ul {
	grid-row: 1 / 4;
	grid-column: 2;
}
}