@charset "UTF-8";

/* -------------------------------------
// MV
------------------------------------- */
.page-tag {
	right: -0.25em;
}

@media (min-width: 1730px) {
	.page-tag {
		right: calc((100vw - 1730px) / 2);
	}
}

@media only screen and (max-width: 768px) {
	.page-tag {
		right: 90px;
	}
}

/* -------------------------------------
// 共通
------------------------------------- */
.career__three {
	margin-block: var(--space-section-pc);
}

h3.div-heading__title {
	font-size: 2.25rem;
	line-height: 1.5;
	color: var(--p_blue);
	margin-block: 0 4rem;

	&.heading--bar {
		font-size: 2.25rem;
		line-height: 1;
		color: var(--p_blue);
		margin-block: 3.25rem 3rem;
		display: flex;
		align-items: center;
		gap: 0.33em;

		&::before {
			content: "";
			width: 0.194em;
			height: 1.28em;
			background-image: var(--h-ico);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			flex-shrink: 0;
		}
	}
}

.div-heading__sub {
	font-family: var(--font-heading);
	font-size: 1.16rem;
	font-weight: 700;
	line-height: 1.2;
	background-image: url("../img/common/grada_bg-s.webp");
	background-size: 50%;
	background-position: 62% 52%;
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;

	.career__group--work & {
		max-width: 91px;
		width: auto;
	}

	.career__group--balance & {
		max-width: 139px;
		width: auto;
	}

	.career__group--support & {
		max-width: 165px;
		width: auto;
	}
}

h4.div-heading__title {
	font-size: 1.75rem;
	line-height: 1.7;
	color: var(--p_blue);
	margin-bottom: 0.5rem;
}


.career-section .section__image {
	margin: 4rem auto;
}


@media only screen and (max-width: 768px) {
	.career__three {
		margin-block: var(--space-section-sp);
	}

	h3.div-heading__title {
		font-size: clamp(1.25rem, 3.39vw, 2.25rem);
		margin-block: 0 3rem;

		&.heading--bar {
			font-size: clamp(1.25rem, 3.39vw, 2.25rem);
		}
	}

	.div-heading__sub {
		font-size: clamp(0.9rem, 2.42vw, 1.16rem);
	}

	h4.div-heading__title {
		font-size: clamp(1rem, 2.28vw, 1.75rem);
	}

	.section__image {
		margin: 4rem auto var(--space-section-sp);
	}
}

/* -------------------------------------
// 3つの要素
------------------------------------- */
.three-flex {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 80px;
}

.three-flex__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.three-flex__number {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	background-image: url("../img/common/grada_bg-s.webp");
	background-size: 50%;
	background-position: center 70%;
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	width: 100%;
	text-align: left;
}

.three-flex__title {
	font-size: 1.75rem;
	color: var(--p_blue);
	width: 100%;
	text-align: left;
}

.three-flex__img {
	margin-block: 0.5rem 1rem;

	img {
		max-width: 442px;
		width: 100%;
	}
}

.three-flex__link {
	font-family: var(--font-heading);
	display: inline-flex;
	align-items: center;
	gap: 20px;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1;
	color: var(--orange);

	svg {
		flex-shrink: 0;
		color: var(--orange);
		width: 0.78em;
		height: 0.78em;
	}
}

@media only screen and (max-width: 768px) {
	.three-flex {
		grid-template-columns: repeat(2, 1fr);
		gap: 60px clamp(10px, 5.2vw, 40px);
	}

	.three-flex__number {
		font-size: 1.125rem;
	}

	.three-flex__title {
		font-size: clamp(1.25rem, 2.86vw, 2rem);
	}

	.three-flex__link {
		gap: 20px;
		font-size: clamp(1.25rem, 2.86vw, 2rem);
	}
}

/* -------------------------------------
// 01.Discretion
------------------------------------- */
.career__discretion {
	margin-bottom: 12rem;

	.c-frame {
		padding: 3rem 2rem;
	}

	.section__image img {
		aspect-ratio: 2168 / 888;
		object-fit: cover;
	}
}

.discretion-flex {
	display: flex;
	gap: 80px;
	justify-content: space-between;
	margin-top: 2.5rem;

	&.discretion-item--card {
		gap: 40px;
		margin-top: 3rem;
	}
}

.discretion-flex__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;

	.discretion-item--card & {
		padding: 0.5rem 2.5rem 3.5rem;
		box-shadow: var(--box-shadow);
	}
}

.discretion-flex__title {
	font-size: 1.5rem;
	color: var(--p_blue);
}

.discretion-flex__img figure {
	margin-inline: auto;
	text-align: center;
}

.discretion-flex__img img {
	max-width: 198px;
	width: 100%;
	margin-inline: auto;
}

.discretion-item--card .discretion-flex__img {
	margin-block: 2rem 0.5rem;

	img {
		max-width: 256px;
		width: 100%;
		margin-inline: auto;
	}
}

.discretion-flex__text {
	font-size: 1.25rem;
	line-height: 1.8;
	width: 100%;
	text-align: left;
}

@media only screen and (max-width: 768px) {
	.career__discretion {
		margin-bottom: 9rem;

		.c-frame {
			padding: 3rem 1rem;
		}
		.section__image img {
		aspect-ratio: 1172 / 720;
		}
	}

	.discretion-flex {
		flex-direction: column;
		gap: 100px;
		justify-content: center;

		&.discretion-item--card {
			margin-top: 2.5rem;
		}
	}

	.discretion-item--card .discretion-flex__item {
		padding: 0.5rem 1rem 3.5rem;
	}

	.discretion-flex__title {
		font-size: clamp(1.25rem, 2.86vw, 2rem);
	}

	.discretion-item--card .discretion-flex__img img {
		width: 60%;
	}

	.discretion-flex__text {
		font-size: clamp(0.8rem, 2.21vw, 1.25rem);
		line-height: 1.7;
	}
}

/* -------------------------------------
// 02.Career design
------------------------------------- */
.history__story1 .section__image img{
	aspect-ratio: 2160 / 1000;
	object-fit: cover;
}

@media only screen and (max-width: 768px) {
	.history__story1 .section__image img {
		aspect-ratio: 1172 / 720;
	}
}
.career__design {
	margin-bottom: 12rem;

	.section__image img {
		aspect-ratio: 2168 / 888;
		object-fit: cover;
	}
}

.design-flex {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	margin-top: 3rem;
}

.design-flex__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 45px;
	padding: 0.5rem 2.5rem 8.5rem;
	box-shadow: var(--box-shadow);
}

.design-flex__title {
	font-size: 1.5rem;
	color: var(--p_blue);
}

.design-flex__img {
	text-align: center;
	margin-inline: auto;

	img {
		max-width: 256px;
		width: 100%;
	}
}

.design-flex__text {
	font-size: 1.25rem;
	line-height: 1.8;
	width: 100%;
	text-align: left;
}

@media only screen and (max-width: 768px) {
	.career__design {
		margin-bottom: 9rem;

		.section__image img {
		aspect-ratio: 1172 / 720;
		}
	}

	.design-flex {
		flex-direction: column;
		gap: 40px;
		justify-content: center;
	}

	.design-flex__item {
		padding: 0.5rem 1rem 4rem;
	}

	.design-flex__title {
		font-size: clamp(1.25rem, 2.86vw, 2rem);
	}

	.design-flex__img img {
		width: 60%;
	}

	.design-flex__text {
		font-size: clamp(0.8rem, 2.21vw, 1.25rem);
		line-height: 1.7;
	}
}

/* -------------------------------------
// 03.Challenge
------------------------------------- */
.history__story1 .section__image img{
	aspect-ratio: 2160 / 1000;
	object-fit: cover;
}

@media only screen and (max-width: 768px) {
	.history__story1 .section__image img {
		aspect-ratio: 1172 / 720;
	}
}
.career__challenge {
	margin-bottom: 2rem;

	h4.div-heading__title {
		margin-top: 6rem;
	}

	.section__image img {
		aspect-ratio: 2164 / 888;
		object-fit: cover;
	}
}

.challenge-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-block: 4.5rem 6rem;
}

.challenge-grid__item {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	align-items: start;
	justify-items: center;
	padding: 0.5rem 2rem 2.5rem;
	box-shadow: var(--box-shadow);
}

.challenge-grid__title {
	font-size: 1.5rem;
	color: var(--p_blue);
}

.challenge-grid__img img {
	max-width: 228px;
	width: 100%;
}

.challenge-grid__text {
	font-size: 1.25rem;
	line-height: 1.8;
	width: 100%;
	text-align: left;
}

@media only screen and (max-width: 768px) {
	.career__challenge .section__image img {
		aspect-ratio: 1172 / 720;
	}

	.challenge-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 10px;
		margin-block: 4.5rem 6rem;
	}

	.challenge-grid__item {

		padding: 0.5rem 1rem 2.5rem;
	}

	.challenge-grid__title {
		font-size: clamp(1.25rem, 2.86vw, 2rem);
	}

	.challenge-grid__text {
		font-size: clamp(0.8rem, 2.21vw, 1.25rem);
		line-height: 1.;
	}
}

.career__program.c-frame {
	padding: 1.5rem 5rem 3rem;
	margin-bottom: 5rem;
}

.career__program h4.div-heading__title {
	font-size: 1.5rem;
	margin-block: 0 2.5rem;
}

.program-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 50px;
}

.program-grid__item {
	display: grid;
	grid-template-columns: 102px 1fr;
	gap: 36px;
	align-items: center;
}

.program-grid__image img {
	width: 100%;
}

.program-grid__title {
	font-size: 1.5rem;
	line-height: 1;
	color: var(--p_blue);
	margin-bottom: 1.5rem;
}

.program-grid__text {
	font-size: 1.25rem;
}

@media only screen and (max-width: 768px) {
	.career__program.c-frame {
		padding: 1.5rem 1rem 3rem;
		margin-bottom: 5rem;
	}

	.career__program h4.div-heading__title {
		font-size: clamp(1.25rem, 2.86vw, 2rem);
		margin-block: 0 2.5rem;
		text-align: center;
	}

	.program-grid {
		justify-items: center;
		gap: 100px;
	}

	.program-grid__item {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 10px;
	}

	.program-grid__image {
		text-align: center;

		img {
			width: 60%;
		}
	}

	.program-grid__title {
		font-size: clamp(1.25rem, 2.86vw, 2rem);
		text-align: center;
		margin-bottom: 1rem;
	}

	.program-grid__text {
		font-size: clamp(0.8rem, 2.21vw, 1.25rem);
		line-height: 1.7;
	}
}