@charset "utf-8";

/* -----------------------------------------------------------
service-area
-------------------------------------------------------------- */
.service-area {
	background: unset;
}

.service-area::after {
	position: absolute;
	top: 450px;
	right: 0;
	content: "";
	width: 40%;
	height: 26%;
	background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 20%);
	z-index: -1;
}
.service-area::before {
	position: absolute;
	top: 450px;
	right: 0;
	content: "";
	background: url(../img/cmn_leaf-light-green-bg.png) no-repeat;
	background-size: cover;
	width: 40%;
	height: 26%;
	opacity: 0.4;
	z-index: -2;
}

.service-area .service-area-cont .img::after {
	background: linear-gradient(90deg, var(--light-green) 70%, rgba(255, 255, 255, 0) 100%);
}

.service-area .service-area-cont.right-img .img::after {
	background: linear-gradient(270deg, var(--light-green) 70%, rgba(255, 255, 255, 0) 100%);
}

.service-area_slider_bg {
	position: relative;
	margin: 0 0 80px;
	background: url(../img/cmn_service-slide-img.png) repeat-x;
	background-size: auto;
	width: 100%;
	height: 478px;
	overflow: hidden;
	-moz-animation: recruit_cmn_slider-loop 60s linear infinite;
	animation: recruit_cmn_slider-loop 60s linear infinite;
	z-index: 0;
}

@keyframes recruit_cmn_slider-loop {

	0% {
		background-position: 0 0;
	}

	100% {
		background-position: -4880px 0;
	}
}

@media screen and (max-width: 768px) {

	.service-area::after {
		top: 200px;
		width: 300px;
		height: 320px;
	}
	.service-area::before {
		top: 200px;
		width: 300px;
		height: 320px;
	}

	.service-area_slider_bg {
		margin: 0 0 40px;
		background-size: cover;
		width: 100%;
		height: 250px;
	}

}


/* -----------------------------------------------------------
about-area
-------------------------------------------------------------- */
.about-area {
	padding: 100px 0;
	background: var(--light-green);
}

.about-area .intro-area .txt-box {
	width: 650px;
}

.about-area .about-area-cont > div {
	background: #fff;
}

@media screen and (max-width: 768px) {

	.about-area {
		padding: 40px 0;
	}

	.about-area .intro-area {
		flex-direction: column;
		gap: unset;
	}

	.about-area .intro-area .col2 .img {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 140px;
	}

	.about-area .intro-area .txt-box {
		width: 100%;
	}

	.about-area .img-wrap .leaf-img01 {
		position: absolute;
		top: -30px;
		left: -30%;
		width: 50%;
	}
	.about-area .img-wrap .leaf-img02 {
		position: absolute;
		bottom: -120px;
		right: -54%;
		width: 70%;
	}

}


/* その他サービス */
.about-area .other-service-area {
	margin: 100px 0 0;
}

.about-area .other-service-area .section-ttl {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.about-area .point-list {
	display: flex;
	gap: 48px;
	margin: 40px 0 0;
}

.about-area .point-list .point-list_item {
	width: calc(100% / 3);
}

.about-area .point-list .point-list_item:nth-child(2) .ttl {
	letter-spacing: 0.04em;
}

.about-area .point-list .point-list_item .img {
	margin: 0 0 24px;
	width: 100%;
	height: 250px;
	flex-shrink: 0;
}

.about-area .point-list .point-list_item .img img {
	object-fit: cover;
	height: 100%;
	border-radius: 10px;
}

.about-area .point-list .point-list_item .deco-ttl {
	display: block;
	margin: 0 0 12px;
	color: var(--green);
	font-size: 1.6rem;
	font-family: var(--notoSerifJP);
	font-weight: 600;
}

.point-list_item_ttl03 {
	letter-spacing: 0;
}

@media screen and (max-width: 768px) {

	.about-area .other-service-area {
		margin: 56px 0 0;
	}

	.about-area .point-list {
		margin: 40px 0 0;
		flex-direction: column;
		gap: unset;
	}

	.about-area .point-list .point-list_item {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin: 32px 0 0;
		padding: 32px 0 0;
		width: 100%;
	}

	.about-area .point-list .point-list_item .ttl {
		margin: unset;
	}

	.about-area .point-list .point-list_item:first-child {
		margin: unset;
		padding: unset;
	}

	.about-area .point-list .point-list_item+.point-list_item {
		border-top: solid 1px var(--lightgray02);
	}

	.about-area .point-list .point-list_item .more_btn {
		margin: 0 auto 0;
	}

	.about-area .point-list .point-list_item .sp-layout {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	.about-area .point-list .point-list_item .img {
		margin: unset;
		width: 40%;
		height: 110px;
	}

	.about-area .point-list .point-list_item .img img {
		border-radius: 6px;
	}

}