@charset "utf-8";

.work-page {
	--work-pink: #e96598;
	--work-pink-dark: #bd3f70;
	--work-pale: #fff2f6;
	--work-navy: #173a52;
	color: #304d48;
}

.work-heading > p:first-child {
	margin-bottom: 14px;
	color: var(--work-pink-dark);
	font-size: var(--font-xs);
	font-weight: 700;
	letter-spacing: 0.18em;
}

.work-breadcrumb {
	padding-top: 28px;
	padding-bottom: 0;
}

.work-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: var(--font-xs);
}

.work-breadcrumb li + li::before {
	margin-right: 10px;
	content: "/";
}

.work-section {
	padding: 100px 0;
}

.work-heading {
	max-width: 850px;
	margin: 0 auto;
	text-align: center;
}

.work-heading--left {
	margin-left: 0;
	text-align: left;
}

.work-heading h2 {
	margin-bottom: 20px;
	color: var(--work-navy);
	font-size: clamp(30px, 4vw, 52px);
	font-weight: 600;
	line-height: 1.35;
}

.work-heading > p:last-child,
.work-lead {
	font-size: var(--font-base);
	line-height: 2;
}

.work-intro {
	padding-top: 65px;
}

.work-statistics {
	display: grid;
	grid-template-columns: 0.65fr 1.35fr;
	gap: 28px;
}

.work-statistics article {
	padding: 35px;
	border: 1px solid #f1c1d2;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 18px 45px rgba(93, 61, 75, 0.08);
}

.work-statistics article > p {
	margin-bottom: 15px;
	color: var(--work-navy);
	font-weight: 700;
}

.work-statistics article > strong {
	display: block;
	color: var(--work-pink-dark);
	font-family: Georgia, serif;
	font-size: clamp(50px, 7vw, 82px);
	line-height: 1;
}

.work-statistics article > strong small {
	margin-left: 5px;
	font-family: sans-serif;
	font-size: var(--font-base);
}

.work-statistics article > span,
.work-statistics__date {
	display: block;
	margin-top: 12px;
	font-size: var(--font-xs);
}

.work-statistics__qualifications ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 25px;
}

.work-statistics__qualifications li {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	padding-bottom: 8px;
	border-bottom: 1px solid #eadfe3;
}

.work-statistics__qualifications li strong {
	color: var(--work-pink-dark);
}

.work-statistics__date {
	text-align: right;
}

.work-description {
	background: #f0f7fa;
}

.work-description__lead {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 50px;
	align-items: center;
}

.work-description__lead > img {
	width: 100%;
	border-radius: 28px;
}

.work-description__lead div img {
	width: 100%;
	margin-top: 25px;
}

.work-description__box {
	max-width: 820px;
	margin: 65px auto 0;
	padding: 55px;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 20px 55px rgba(23, 58, 82, 0.09);
}

.work-description__box h3 {
	margin-bottom: 35px;
	color: var(--work-pink-dark);
	font-size: clamp(24px, 3vw, 36px);
	line-height: 1.5;
	text-align: center;
}

.work-description__box h4 {
	margin-bottom: 20px;
	color: var(--work-navy);
	font-size: var(--font-lg);
}

.work-description__box ol {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	counter-reset: work-number;
}

.work-description__box li {
	position: relative;
	padding: 13px 13px 13px 48px;
	border-radius: 8px;
	background: var(--work-pale);
	counter-increment: work-number;
}

.work-description__box li::before {
	position: absolute;
	top: 10px;
	left: 12px;
	display: grid;
	width: 26px;
	height: 26px;
	place-items: center;
	border-radius: 50%;
	color: #fff;
	background: var(--work-pink);
	content: counter(work-number);
	font-size: var(--font-xs);
}

.work-button {
	display: table;
	margin-top: 35px;
	padding: 15px 28px;
	border-radius: 3px;
	color: #fff;
	background: var(--work-pink-dark);
	transition: opacity 0.2s, transform 0.2s;
}

.work-button:hover {
	opacity: 0.82;
	transform: translateY(-2px);
}

.work-button span {
	margin-left: 18px;
}

.work-button--center {
	margin-right: auto;
	margin-left: auto;
}

.work-employment__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 35px;
}

.work-employment article {
	overflow: hidden;
	border: 1px solid #dfe9ec;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 18px 45px rgba(23, 58, 82, 0.08);
}

.work-employment article > img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.work-employment article > div {
	padding: 35px;
}

.work-employment__label {
	display: table;
	margin: -56px 0 24px;
	padding: 10px 20px;
	position: relative;
	color: #fff;
	background: var(--work-pink-dark);
	font-weight: 700;
}

.work-employment h3 {
	margin-bottom: 20px;
	color: var(--work-navy);
	font-size: var(--font-xl);
	line-height: 1.5;
}

.work-employment li,
.work-card-grid li {
	position: relative;
	margin-top: 10px;
	padding-left: 1.2em;
	line-height: 1.7;
}

.work-employment li::before,
.work-card-grid li::before {
	position: absolute;
	left: 0;
	color: var(--work-pink);
	content: "●";
	font-size: 8px;
}

.work-benefits {
	background: var(--work-pale);
}

.work-card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

.work-card-grid article {
	padding: 32px;
	border-radius: 16px;
	background: #fff;
}

.work-card-grid h3 {
	margin-bottom: 15px;
	color: var(--work-navy);
	font-size: var(--font-card-title);
}

.work-card-grid--training {
	grid-template-columns: repeat(3, 1fr);
}

.work-page .company-contact {
	background: #f7faf9;
}

/* ========================================
	採用情報 下層コンテンツ
======================================== */
.work-description,
.work-employment,
.work-benefits {
	position: relative;
	background: #fff;
}

.work-page .work-intro,
.work-page .work-support-overview {
	padding-bottom: 0;
}

.work-page .work-description {
	padding-top: clamp(55px, 7vw, 80px);
}

.work-employment {
	background: #f7faf9;
}

.work-section__panel {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.work-section__panel .work-heading {
	margin-bottom: clamp(38px, 5vw, 64px);
}

.work-section__panel .work-heading > p:first-child {
	color: #2d8171;
}

.work-section__panel .work-heading h2 {
	font-size: var(--font-heading-md);
}

.work-section__panel .work-heading > p:last-child {
	font-size: var(--font-sm);
}

.work-section__panel .work-description__heading {
	margin-bottom: clamp(30px, 4vw, 46px);
	text-align: center;
}

.work-description__heading > p:last-child {
	margin-top: 25px;
	color: var(--color-text);
	font-size: clamp(14px, 1.5vw, 17px);
	line-height: 1.9;
}

.work-description__message {
	margin-bottom: clamp(34px, 5vw, 58px);
	color: var(--color-navy);
	font-size: clamp(21px, 2.7vw, 32px);
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

.work-description__visual {
	width: min(100%, 820px);
	margin: 0 auto;
	overflow: hidden;
	border-radius: 3px;
}

.work-description__visual img {
	display: block;
	width: 100%;
	height: auto;
}

.work-description__box {
	max-width: none;
	margin-top: clamp(70px, 9vw, 110px);
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.work-description__box h4 {
	display: flex;
	align-items: center;
	gap: clamp(22px, 4vw, 48px);
	margin-bottom: 30px;
	padding: 0;
	border: 0;
	color: var(--color-navy);
	background: transparent;
	font-size: clamp(23px, 2.7vw, 31px);
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
}

.work-description__box h4::before,
.work-description__box h4::after {
	flex: 1;
	height: 1px;
	background: #9fc3dd;
	content: '';
}

.work-description__box-lead {
	max-width: 470px;
	margin: 0 auto clamp(55px, 7vw, 82px);
	padding: 0;
	color: #536b76;
	font-size: var(--font-sm);
	line-height: 1.9;
	text-align: center;
}

.work-description__box ol {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 38px) clamp(45px, 7vw, 95px);
}

.work-description__box li {
	position: relative;
	display: block;
	min-width: 0;
	min-height: 0;
	padding: 27px 6px 38px;
	border: 0;
	border-bottom: 1px solid #d9e7ee;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.work-description__box li::before {
	display: none;
	content: none;
}

.work-description__box li > div {
	position: relative;
	z-index: 1;
	padding: 0 4px;
}

.work-description__item-image {
	margin: 0 0 24px;
	overflow: hidden;
	border-radius: 3px;
}

.work-description__item-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: top;
	height: 220px;
}

.work-description__box h5 {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 0 0 13px;
	color: var(--color-navy);
	font-size: clamp(18px, 2vw, 23px);
	font-weight: 600;
	line-height: 1.5;
}

.work-description__box h5::before {
	width: 9px;
	height: 9px;
	flex: 0 0 9px;
	border: 0;
	border-radius: 50%;
	background: #69b4dc;
	box-shadow: 0 0 0 4px rgba(105, 180, 220, 0.12);
	content: '';
}

.work-description__box li p {
	color: #526b76;
	font-size: var(--font-sm);
	line-height: 1.9;
}

.work-button {
	padding: 16px 28px;
	border-radius: 3px;
	background: var(--color-blue);
	box-shadow: none;
}

.work-description__box .work-button {
	margin-right: auto;
	margin-left: auto;
	margin-top: 5rem;
}

.work-employment__grid {
	grid-template-columns: 1fr;
	gap: clamp(70px, 9vw, 110px);
	margin-top: clamp(50px, 7vw, 80px);
}

.work-employment .work-employment__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-width: 0;
	align-items: stretch;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.work-employment__card > img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 520px;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 3px;
}

.work-employment__card--fulltime > img {
	object-position: 45% center;
}

.work-employment__card--parttime > img {
	object-position: center;
}

.work-employment__card > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(20px, 5vw, 70px);
}

.work-employment__card-heading {
	margin-bottom: 25px;
}

.work-employment__label {
	display: block;
	margin: 0 0 7px;
	padding: 0;
	color: var(--color-blue);
	background: none;
	font-size: var(--font-xs);
	letter-spacing: 0.15em;
}

.work-employment__card--fulltime .work-employment__label {
	color: #315f7c;
}

.work-employment__card--parttime .work-employment__label {
	color: #4a98c5;
}

.work-employment__card-heading h3 {
	margin: 0;
	font-size: clamp(27px, 3vw, 38px);
}

.work-employment__catch {
	margin-bottom: 30px;
	padding-bottom: 28px;
	border-bottom: 1px solid #cfe2ed;
	color: var(--color-navy);
	font-size: clamp(15px, 1.7vw, 19px);
	font-weight: 600;
}

.work-employment__points {
	display: grid;
	gap: 22px;
	margin-bottom: 34px;
}

.work-employment__points li {
	margin: 0;
	padding-left: 20px;
	line-height: 1.75;
}

.work-employment__points li::before {
	top: 0.75em;
	color: var(--color-blue);
}

.work-employment__points strong,
.work-employment__points span {
	display: block;
}

.work-employment__points strong {
	color: var(--color-navy);
	font-size: var(--font-sm);
	font-weight: 600;
}

.work-employment__points span {
	margin-top: 7px;
	color: #526b76;
	font-size: var(--font-xs);
}

.work-employment__card .work-button {
	width: 100%;
	margin-top: 12px;
	padding-top: 14px;
	padding-bottom: 14px;
	text-align: center;
}

.work-card-grid {
	counter-reset: benefit-card;
	gap: 18px;
}

.work-card-grid article {
	position: relative;
	min-height: 180px;
	padding: 34px 34px 30px 84px;
	border: 0;
	border-radius: 15px;
	background: var(--color-light-blue);
	counter-increment: benefit-card;
}

.work-card-grid article::before {
	position: absolute;
	top: 31px;
	left: 28px;
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border-radius: 50%;
	color: #fff;
	background: var(--color-blue);
	content: counter(benefit-card, decimal-leading-zero);
	font-family: Georgia, serif;
	font-size: var(--font-xs);
}

.work-card-grid h3 {
	font-size: clamp(18px, 2vw, 22px);
}

.work-card-grid p {
	line-height: 1.9;
}

.work-page .company-contact {
	background: #f7faf9;
}

.work-page .company-contact__inner,
.work-page .company-contact .container {
	border-radius: 3px;
}

/* 取得補助可能な資格例・福利厚生 */
.work-support-groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 42px 60px;
	margin: 38px 40px 0;
}

.work-support-group {
	min-width: 0;
	padding-bottom: 30px;
	border-bottom: 1px solid #dfe8e5;
}

.work-support-group h4 {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 20px;
	padding: 9px 20px;
	border-radius: 3px;
	color: #fff;
	background: var(--color-navy);
	font-size: clamp(15px, 1.7vw, 20px);
	font-weight: 600;
	line-height: 1.5;
}

.support__qualifications .work-support-group ul {
	display: grid;
	grid-auto-flow: row;
	grid-template-rows: none;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
}

.support__qualifications .work-support-group li {
	position: relative;
	padding: 7px 0 7px 18px;
	font-size: var(--font-xs);
	line-height: 1.75;
}

.support__qualifications .work-support-group li::before {
	position: absolute;
	top: 1.05em;
	left: 2px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-blue);
	content: "";
}

.work-support-group__note {
	margin: -12px 0 10px;
	color: var(--color-blue);
	font-size: var(--font-xs);
}

@media (max-width: 800px) {
	.work-statistics,
	.work-description__lead,
	.work-description__box ol,
	.work-employment__grid,
	.work-card-grid--training {
		grid-template-columns: 1fr;
	}

	.work-section {
		padding: 75px 0;
	}

	.work-section__panel {
		width: min(calc(100% - var(--side-space) * 2), var(--content-width));
		padding: 0;
		border-radius: 0;
	}

	.work-description__lead > img {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.work-support-groups {
		grid-template-columns: 1fr;
		gap: 28px;
		margin-right: 0;
		margin-left: 0;
	}

	.work-employment .work-employment__card {
		grid-template-columns: 1fr;
	}

	.work-employment__card > img {
		height: auto;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 560px) {
	.work-section {
		padding: 58px 0;
	}

	.work-statistics,
	.work-card-grid,
	.work-description__box ol,
	.work-statistics__qualifications ul {
		grid-template-columns: 1fr;
	}

	.work-statistics article,
	.work-description__box,
	.work-employment article > div,
	.work-card-grid article {
		padding: 25px 20px;
	}

	.work-section__panel {
		width: min(calc(100% - var(--side-space) * 2), var(--content-width));
		padding: 0;
		border-radius: 0;
	}

	.work-description__lead {
		padding: 0;
		border-radius: 0;
	}

	.work-description__box ol {
		gap: 0;
	}

	.work-description__box li {
		min-height: 0;
		padding: 24px 0 26px;
	}

	.work-description__box {
		margin-top: 58px;
		padding: 0;
	}

	.work-description__box h4 {
		gap: 14px;
		padding: 0;
		white-space: normal;
	}

	.work-description__box-lead {
		margin-bottom: 38px;
		padding: 0;
	}

	.work-card-grid article {
		min-height: 0;
		padding: 76px 22px 26px;
	}

	.work-card-grid article::before {
		top: 23px;
		left: 22px;
	}

    .page-image-hero + .section, .page-breadcrumb + .section, .page-breadcrumb + .work-section {
        padding-top: 3rem;
    }

}