@charset "UTF-8";

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

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

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

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

.work__bottom--title {
	font-size: 1.75rem;
	line-height: 1;
	color: var(--p_blue);
	margin-bottom: 2.5rem;
}

h4.div-heading__title.heading--bar {
	font-size: 1.75rem;
	line-height: 1;
	color: var(--p_blue);
	margin-block: 3.25rem 3rem;
	display: flex;
	align-items: center;
	gap: 12px;

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

h5.div-heading__title {
	display: inline-block;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--p_blue);
	margin-bottom: 1rem;
}

@media only screen and (max-width: 768px) {
	h3.div-heading__title {
		font-size: clamp(1.25rem, 3.39vw, 2.25rem);
		margin-block: 0 3rem;
	}

	.work__bottom--title {
		font-size: clamp(1.25rem, 3.39vw, 2.25rem);
	}

	h4.div-heading__title.heading--bar {
		font-size: clamp(1.25rem, 3.39vw, 2.25rem);
		margin-block: 3.25rem 2rem;
		gap: 6px;
	}

	h5.div-heading__title {
		font-size: clamp(0.875rem, 3.5vw, 1.75rem);
		line-height: 1.5;
		margin-bottom: 0;
	}
}

/* -------------------------------------
// 導入部
------------------------------------- */
.work__intro .section__image img {
	aspect-ratio: 2170 / 1000;
	object-fit: cover;
}

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

/* -------------------------------------
// HR Solutions
------------------------------------- */
.work__hr {
	margin-bottom: 12rem;
}

.work__school {
	margin-bottom: 5rem;
}

.work__flex {
	display: flex;
	gap: 80px;
	margin-bottom: 4rem;
}

.work__flex--text {
	flex: 1;
}

.work__flex--img {
	flex: 1;
	max-width: 340px;

	img {
		aspect-ratio: 668 / 470;
		object-fit: cover;
	}
}

.work__flow.c-frame {
	padding: 1.5rem 2rem 4rem;
}

.work__flow-title {
	font-size: 1.75rem;
	line-height: 1;
	margin-left: 50px;
}

.work__flow--content {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	gap: 50px 20px;
	align-items: center;
	text-align: center;
	margin-top: 2rem;
}

@media (max-width: 768px) {
	.work__hr {
		margin-bottom: 9rem;
	}

	.work__school {
		margin-bottom: 5rem;
	}

	.work__flex {
		flex-direction: column;
		gap: 40px;
		margin-bottom: 3rem;
	}

	.work__flex--img {
		max-width: 100%;

		img {
			aspect-ratio: 585 / 360;
		}
	}

	.work__flow.c-frame {
		margin-top: 6.5rem;
		padding: 1.5rem 1rem 4rem;
	}

	.work__flow-title {
		font-size: clamp(1rem, 3.91vw, 1.75rem);
	}

	.work__flow--content {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: 3rem;
	}
}

/* -------------------------------------
// 1日の流れ
------------------------------------- */
.flow__title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1.5rem;
	color: var(--p_blue);
	margin-bottom: 0.5rem;
}

.flow__text {
	font-size: 1.125rem;
	line-height: 1.6;
	text-align: left;
}

.flow__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	svg {
		width: 1.583em;
		height: 1.583em;
		color: var(--p_blue);
	}
}

.flow__arrow {
	display: flex;
	justify-content: center;
	align-items: center;

	svg {
		width: 2.625rem;
		height: 2.625rem;
		color: var(--orange);
	}
}

@media (max-width: 768px) {
	.flow__title {
		font-size: clamp(1.25rem, 2.86vw, 2rem);
		margin-bottom: 0;
	}

	.flow__text {
		font-size: clamp(0.8rem, 2.21vw, 1.25rem);
	}

	.flow__arrow {
		display: flex;
		justify-content: center;
		align-items: center;

		svg {
			transform: rotate(90deg);
		}
	}
}

/* -------------------------------------
// 私達の強み
------------------------------------- */
.work__bottom .section__image img {
	aspect-ratio: 2160 / 1000;
	object-fit: cover;
}

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