@charset 'UTF-8';
/*----------------------------------------

	- pageTitle
	- profession
	- recruit

-----------------------------------------*/

/*----------------------------------------
	pageTitle
-----------------------------------------*/
.pageTitle {
	inline-size: min(80%, 1120px);
	margin-block-start: 191px;
	margin-inline: auto;
}

.pageTitle h1 {
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size52);
	line-height: var(--line-height15);
}

.pageTitle p {
	margin-block-start: 64px;
}

.pageTitle p+p {
	margin-block-start: 40px;
}

@media (width <=800px) {
	.pageTitle {
		inline-size: 88%;
		margin-block-start: 100px;
	}

	.pageTitle h1 {
		font-size: var(--font-size32);
	}

	.pageTitle p+p {
		margin-block-start: 36px;
	}
}

/*----------------------------------------
	profession
-----------------------------------------*/
.profession {
	display: grid;
	gap: 0 40px;
	grid-template-columns: minmax(calc(29.16% - 40px), 268px) minmax(70.84%, 748px);
	inline-size: min(80%, 1120px);
	margin-block-start: 80px;
	margin-inline: auto;
	padding: 32px;
	background-color: var(--color-palegray01);
}

.profession+.profession {
	margin-block-start: 32px;
}

.profession h2 {
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size24);
	line-height: var(--line-height15);
}

.profession h2 span {
	display: block;
	font-size: var(--font-size18);
}

.profession .professionContainer {
	display: grid;
	gap: 0 40px;
	grid-template-columns: minmax(calc(55.09% - 40px), 372px) minmax(44.91%, 336px);
}

.profession .professionContainer .professionTxt {
	font-size: var(--font-size16);
}

.profession .professionContainer .professionTxt div {
	margin-block-start: 30px;
	padding-block-start: 33px;
	border-block-start: var(--border-width1) solid var(--color-black01);
	font-size: var(--font-size14);
}

.profession .professionContainer .professionTxt div ul {
	margin-block-start: 20px;
}

.profession .professionContainer .professionTxt div ul li+li {
	margin-block-start: 12px;
}

.profession .professionContainer .professionTxt div ul li a span {
	border-block-end: var(--border-width1) solid currentColor;
}

.profession .professionContainer .professionTxt div ul li a.external::after {
	content: '';
	display: inline-block;
	block-size: 10px;
	inline-size: 10px;
	margin-inline-start: 8px;
	background: url(/asset/img/common/ic_external01_s.svg) no-repeat center center;
	background-size: cover;
}

.profession .professionContainer .professionImg {
	margin-block-start: 7px;
}

.profession .professionContainer .professionImg img+img {
	margin-block-start: 4px;
}

@media (width <=1024px) {
	.profession {
		gap: 34px 0;
		grid-template-columns: 1fr;
	}

	.profession .professionContainer {
		gap: 32px 0;
		grid-template-columns: 1fr;
	}
}

@media (width <=800px) {
	.profession {
		inline-size: 100%;
		margin-block-start: 64px;
		padding-inline: 8%;
	}

	.profession .professionContainer .professionTxt div {
		margin-block-start: 30px;
		padding-block-start: 33px;
	}

	.profession .professionContainer .professionImg {
		margin-block-start: 0;
	}
}

/*----------------------------------------
	recruit
-----------------------------------------*/
.recruit {
	inline-size: min(80%, 1120px);
	margin-block-start: 80px;
	margin-inline: auto;
}

.recruit div {
	margin-block-start: 62px;
	padding-block-start: 65px;
	border-block-start: var(--border-width1) solid var(--color-black01);
}

.recruit div a.btn01 {
	max-inline-size: 320px;
	margin-block-start: 64px;
}

@media (width <=800px) {
	.recruit {
		inline-size: 84%;
		margin-block-start: 65px;
	}

	.recruit div {
		margin-block-start: 30px;
		padding-block-start: 33px;
	}

	.recruit div a.btn01 {
		max-inline-size: 265px;
		margin-inline: auto;
	}
}