/**
 * =====================================================
 * みつピタジョブ
 * トップページ：みつピタジョブとは
 * -----------------------------------------------------
 * PC：
 * 左側に案内イラスト
 * 右側に4つのサービスカード
 *
 * タブレット・スマートフォン：
 * 見出し → イラスト → カード
 * =====================================================
 */

.mpj-home-about {
	width: 100%;
	margin: 0;
	padding: 76px 20px;
	background: #ffffff;
}

.mpj-home-about__inner {
	width: min(1180px, 100%);
	margin: 0 auto;
}

/* =====================================================
 * 見出し
 * ===================================================== */

.mpj-home-about__header {
	max-width: 820px;
	margin: 0 auto 46px;
	text-align: center;
}

.mpj-home-about__eyebrow {
	margin: 0 0 10px;
	color: #16824f;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.12em;
}

.mpj-home-about__title {
	margin: 0;
	color: #20372d;
	font-size: clamp(30px, 3.5vw, 44px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.mpj-home-about__lead {
	margin: 14px 0 0;
	color: #087b43;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7;
}

.mpj-home-about__description {
	margin: 18px 0 0;
	color: #5c6d65;
	font-size: 16px;
	line-height: 2;
}

/* =====================================================
 * メインエリア
 * ===================================================== */

.mpj-home-about__main {
	display: grid;
	grid-template-columns:
		minmax(0, 0.88fr)
		minmax(0, 1.12fr);
	align-items: center;
	gap: 54px;
	width: 100%;
}

/* =====================================================
 * イラスト
 * ===================================================== */

.mpj-home-about__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.mpj-home-about__image {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	margin: 0 auto;
	border: 1px solid #dcece3;
	border-radius: 26px;
	box-shadow:
		0 18px 44px rgba(20, 94, 62, 0.12),
		0 5px 14px rgba(20, 94, 62, 0.05);
	object-fit: cover;
}

/* =====================================================
 * カード一覧
 * ===================================================== */

.mpj-home-about__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	min-width: 0;
}

/* =====================================================
 * カード
 * ===================================================== */

.mpj-home-about-card {
	display: grid;
	grid-template-columns:
		58px
		minmax(0, 1fr)
		28px;
	align-items: center;
	gap: 16px;
	min-height: 112px;
	padding: 20px 22px;
	color: #20372d;
	background: #f8fbf9;
	border: 1px solid #dcece3;
	border-radius: 18px;
	box-shadow: 0 8px 20px rgba(20, 94, 62, 0.06);
	text-decoration: none;
	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.mpj-home-about-card:hover {
	color: #087b43;
	background: #ffffff;
	border-color: #9fcdb6;
	box-shadow: 0 12px 28px rgba(20, 94, 62, 0.12);
	text-decoration: none;
	transform: translateY(-3px);
}

.mpj-home-about-card:focus-visible {
	outline: 3px solid rgba(8, 123, 67, 0.22);
	outline-offset: 3px;
}

/* =====================================================
 * カード番号
 * ===================================================== */

.mpj-home-about-card__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	color: #087b43;
	background: #e8f5ee;
	border-radius: 16px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		transform 0.2s ease;
}

.mpj-home-about-card:hover
.mpj-home-about-card__number {
	color: #ffffff;
	background: #087b43;
	transform: scale(1.04);
}

/* =====================================================
 * カード本文
 * ===================================================== */

.mpj-home-about-card__content {
	display: block;
	min-width: 0;
}

.mpj-home-about-card__title {
	display: block;
	color: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.mpj-home-about-card__description {
	display: block;
	margin-top: 6px;
	color: #5c6d65;
	font-size: 14px;
	line-height: 1.75;
}

/* =====================================================
 * カード矢印
 * ===================================================== */

.mpj-home-about-card__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #87a598;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

.mpj-home-about-card:hover
.mpj-home-about-card__arrow {
	color: #087b43;
	transform: translateX(3px);
}

/* =====================================================
 * LINE相談カード
 * ===================================================== */

.mpj-home-about-card--line {
	background: #f2fcf5;
	border-color: #c7efd5;
}

.mpj-home-about-card--line
.mpj-home-about-card__number {
	color: #ffffff;
	background: #06c755;
}

.mpj-home-about-card--line:hover {
	color: #06a948;
	background: #ffffff;
	border-color: #06c755;
	box-shadow: 0 12px 28px rgba(6, 199, 85, 0.16);
}

.mpj-home-about-card--line:hover
.mpj-home-about-card__number {
	background: #06a948;
}

.mpj-home-about-card--line:hover
.mpj-home-about-card__arrow {
	color: #06a948;
}

/* =====================================================
 * タブレット
 * ===================================================== */

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

	.mpj-home-about {
		padding: 58px 20px 66px;
	}

	.mpj-home-about__header {
		margin-bottom: 38px;
	}

	.mpj-home-about__main {
		grid-template-columns: 1fr;
		gap: 40px;
		max-width: 780px;
		margin: 0 auto;
	}

	.mpj-home-about__visual {
		order: 1;
	}

	.mpj-home-about__cards {
		order: 2;
		width: 100%;
	}

	.mpj-home-about__image {
		max-width: 620px;
	}
}

/* =====================================================
 * スマートフォン
 * ===================================================== */

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

	.mpj-home-about {
		padding: 46px 15px 54px;
	}

	.mpj-home-about__header {
		margin-bottom: 30px;
	}

	.mpj-home-about__eyebrow {
		font-size: 12px;
	}

	.mpj-home-about__title {
		font-size: 28px;
	}

	.mpj-home-about__lead {
		margin-top: 12px;
		font-size: 18px;
	}

	.mpj-home-about__description {
		margin-top: 14px;
		font-size: 15px;
		line-height: 1.9;
		text-align: left;
	}

	.mpj-home-about__main {
		gap: 30px;
	}

	.mpj-home-about__image {
		max-width: none;
		border-radius: 18px;
		box-shadow:
			0 12px 30px rgba(20, 94, 62, 0.1),
			0 4px 12px rgba(20, 94, 62, 0.04);
	}

	.mpj-home-about__cards {
		gap: 13px;
	}

	.mpj-home-about-card {
		grid-template-columns:
			48px
			minmax(0, 1fr)
			22px;
		gap: 12px;
		min-height: 100px;
		padding: 16px 14px;
		border-radius: 15px;
	}

	.mpj-home-about-card__number {
		width: 46px;
		height: 46px;
		border-radius: 13px;
		font-size: 14px;
	}

	.mpj-home-about-card__title {
		font-size: 16px;
	}

	.mpj-home-about-card__description {
		margin-top: 4px;
		font-size: 13px;
		line-height: 1.7;
	}

	.mpj-home-about-card__arrow {
		font-size: 19px;
	}
}

/* =====================================================
 * 小さいスマートフォン
 * ===================================================== */

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

	.mpj-home-about-card {
		grid-template-columns:
			44px
			minmax(0, 1fr)
			18px;
		gap: 10px;
		padding: 15px 12px;
	}

	.mpj-home-about-card__number {
		width: 42px;
		height: 42px;
		font-size: 13px;
	}

	.mpj-home-about-card__title {
		font-size: 15px;
	}

	.mpj-home-about-card__description {
		font-size: 12px;
	}

	.mpj-home-about-card__arrow {
		font-size: 17px;
	}
}