@charset "utf-8";

/* -------------------------------------------------------------
	charm-area
-------------------------------------------------------------- */
.charm-area {
	position: relative;
	padding: 100px 0;
	background: var(--lightgray);
}

.charm-area .inner {
	position: relative;
	z-index: 2;
}

.charm-area .section-en-deco {
	position: absolute;
	top: 40px;
	right: calc((100% - 1200px) / 2);
	color: rgba(0, 0, 0, 0.03);
	font-size: 11rem;
	font-weight: 700;
}

/* 詳細 */
.charm-area .block {
	position: relative;
	display: flex;
	gap: 64px;
	margin: 100px 0 0;
	width: 100vw;
	border-radius: 20px 0 0 20px;
}
.charm-area .block + .block {
	margin: 150px 0 0;
}
.charm-area .block::after {
	position: absolute;
	left: 60px;
	content: "";
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 0 0 0 20px;
	z-index: -1;
}
.charm-area .block .txt-wrap {
	margin-right: calc((100% - 1200px) / 2);
	padding: 64px 64px 64px 0;
	max-width: 800px;
}
.charm-area .block .img {
	margin: -60px 0 80px;
	width: 500px;
	height: 500px;
	border-radius: 20px;
}
.charm-area .block .img.img03 {
	border: solid 1px var(--lightgray02);
}
.charm-area .block .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.charm-area .block .num-ttl {
	margin: 0 0 16px;
	font-size: 1.8rem;
	font-weight: 600;
}

.support-cont-wrap {
	position: relative;
	left: calc((100% - 1000px) / 2);
	margin: 0 auto;
	padding: 0 80px 80px;
	background: var(--bk04);
	z-index: 1;
}

/* 特徴について */
.features-cont {
	margin: 40px 0 0;
}
.features-cont .features-detail-wrap {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 24px 0 0;
}
.features-cont .features-detail {
	padding: 24px;
	background: var(--lightgray);
	border-radius: 6px;
}

.features-cont .features-main-ttl {
	padding: 0 0 8px;
	border-bottom: solid 1px #333;
}

.features-cont .features-detail .features-ttl {
	padding: 0 0 0 12px;
	border-left: solid 2px var(--red);
}

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

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

	.charm-area .section-en-deco {
		top: 60px;
		right: 20px;
		font-size: 5rem;
	}

	/* 詳細 */
	.charm-area .block {
		flex-direction: column;
		gap: unset;
		margin: 60px 0 0;
		width: 100%;
		background: #fff;
		border-radius: 10px;
	}
	.charm-area .block + .block {
		margin: 20px 0 0;
	}
	.charm-area .block::after {
		content: unset;
	}
	.charm-area .block .txt-wrap {
		margin-right: unset;
		padding: 20px;
	}
	.charm-area .block .img {
		margin: unset;
		width: 100%;
		height: 220px;
		border-radius: 10px 10px 0 0;
	}
	.charm-area .block .num-ttl {
		margin: 0 0 12px;
		font-size: 1.6rem;
	}

}

/* -------------------------------------------------------------
	company-system-area
-------------------------------------------------------------- */
.company-system-area {
	padding: 100px 0;
	background: url(../img/cmn_logo-ptn_recruit-bg.png);
	background-size: 150px;
	background-attachment: fixed;
}
.company-system-area .intro-area {
	display: flex;
	justify-content: space-between;
	gap: 64px;
	margin: 0 0 64px;
}
.company-system-area .intro-area .txt-wrap {
	width: 670px;
}

.company-system_list {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
.company-system_list .company-system_list_item {
	position: relative;
	padding: 40px;
	width: calc((100% / 2) - 20px);
	background: #fff;
	border: solid 1px var(--lightgray02);
	border-radius: 20px;
}
.company-system_list .company-system_list_item .num {
	position: absolute;
	top: 20px;
	right: 20px;
	color: #f7f7f7;
	font-size: 8rem;
	font-weight: 700;
}
.company-system_list .company-system_list_item .company-system-ttl {
	color: #333;
	font-size: 1.4rem;
	font-weight: 600;
}
.company-system_list .company-system_list_item:nth-child(1) p {
	letter-spacing: 0.05em;
}
.company-system_list .company-system_list_item .img {
	position: relative;
	margin: -40px -40px 32px;
}
.company-system_list .company-system_list_item .img img {
	height: 300px;
	border-radius: 10px 10px 0 0;
}

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

	.company-system-area {
		padding: 40px 0;
		background-size: 20%;
	}
	.company-system-area .intro-area {
		flex-direction: column;
		gap: unset;
		margin: 0 0 40px;
	}
	.company-system-area .intro-area .txt-wrap {
		width: unset;
	}

	.company-system_list {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}
	.company-system_list .company-system_list_item {
		padding: 20px;
		width: 100%;
		border-radius: 10px;
	}
	.company-system_list .company-system_list_item .num {
		top: 10px;
		right: 10px;
		font-size: 6rem;
		z-index: -1;
	}
	.company-system_list .company-system_list_item .img {
		margin: -20px -20px 32px;
	}
	.company-system_list .company-system_list_item .img img {
		height: 220px;
	}

}

/* -------------------------------------------------------------
	employee-benefits-area
-------------------------------------------------------------- */
.employee-benefits-area {
	padding: 100px 0;
}

.employee-benefits-area .block {
	margin: 64px 0 0;
}

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

	.employee-benefits-area {
		padding: 40px 0;
	}

	.employee-benefits-area .block {
		margin: 40px 0 0;
	}

}