/* 全体のセンタリングと余白 */
.message-area {
	text-align: center;
	padding: 30px 0px;
}

/* タイトル部分 */
.message-area h2.third-top-page-title {
	font-family: 'Jost';
	font-size: 30px;
	letter-spacing: 3px;
	margin-bottom: 10px;
	color: #3f3f3f;
	border-bottom: none;
}

.message-area p.third-top-page-subtitle {
	color: #3f3f3f;
	font-size: 14px;
	letter-spacing: 0.1em;
	margin-bottom: 40px;
}

.message-flex-area {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 60px;
	gap: 30px;
}

.message-flex-area-2 {
	flex-direction: row-reverse;
	gap: 30px;
}

.message-flex-area-2 h3 {
	margin: 0px 0px 10px;
}

/* 画像・テキストボックス */
.message-flex-area .image-box div {
	margin-top: 5px;
	font-weight: 600;
}

/* 画像・テキストボックス */
.image-box,
.text-box {
	width: 100%;
	max-width: calc(50% - 15px);
	box-sizing: border-box;
	padding: 10px 10px;
}

/* 画像自体の大きさ */
.image-box img {
	width: 100%;
	border-radius: 10px;
}

.message-flex-area-1 .text-box h3 {
	margin: 0px 0px 10px;
}

.message-flex-area-2 .text-box h3 {

}

.text-box h3 {
	text-align: left;
	letter-spacing: 0.1em;
	font-size: clamp(1.2em, 2vw, 1.6em);
	margin-bottom: 10px;
	color: #221815;
}

.text-box p {
	margin: 20px 0px 5px;
	text-align: left;
	line-height: 1.8;
	font-size: clamp(0.8em, 1.5vw, 1em);
}

.third-footer-breadcrumb {
	border-top: 1px solid #ccc;
	padding-top: 20px;
	font-size: 0.9em;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 30px;
}

.third-footer-breadcrumb a {
	text-decoration: none;
	color: #000;
}

.third-footer-breadcrumb a:hover {
	text-decoration: underline;
}

.active-link {
	display: inline-block;
	background: #0078ba;
	color: white;
	padding: 6px 16px;
	border-radius: 30px;
	font-size: 0.9em;
}

@media (max-width: 768px) {

	/* 画像・テキストボックス */
	.message-flex-area .image-box div {
		margin-top: 5px;
		margin-bottom: 30px;
		font-weight: 600;
	}

	.message-flex-area {
		gap: 10px;
	}

	.image-box,
	.text-box {
		padding-top: 0px;
		padding-bottom: 0px;
		max-width: 100%;
	}
}