.SectionTitleUnderline {
	color: var(--color-blue);
	padding-left: 28px;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.59%22%20height%3D%2220.59%22%20viewBox%3D%220%200%2020.59%2020.59%22%3E%20%3Cpath%20d%3D%22M8.34%2016.67a8.34%208.34%200%201%201%208.33-8.34%208.35%208.35%200%200%201-8.34%208.34m0-15.02a6.68%206.68%200%201%200%206.69%206.69%206.69%206.69%200%200%200-6.68-6.69%22%20fill%3D%22%2320378b%22%2F%3E%20%3Cpath%20d%3D%22M19.76%2020.59a.82.82%200%200%201-.59-.24l-6.04-6.05a.83.83%200%200%201%201.17-1.17l6.04%206.05a.83.83%200%200%201-.58%201.41%22%20fill%3D%22%2320378b%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: left 0 top 7px;
}

.CardSolutionImage {
	aspect-ratio: 315/182;
}

.CardSolutionImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.CategoryNaviList {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.CategoryNaviList li {
	box-sizing: border-box;
}

.CategoryNaviCard {
	--link-color: #000;
	position: relative;
	display: flex;
	align-items: center;
	text-decoration: none;
	padding-bottom: 15px;
	border-bottom: 1px solid #d8d8d8;
	font-size: 85%;
	letter-spacing: 0;
}

.CategoryNaviCard:link,
.CategoryNaviCard:visited,
.CategoryNaviCard:hover,
.CategoryNaviCard:active {
	text-decoration: none;
}

.CategoryNaviCard::before {
	content: "";
	display: block;
	position: absolute;
	width: 20px;
	height: 1px;
	bottom: -1px;
	left: 0;
	background-color: var(--color-blue);
	transition: all 0.3s ease-in-out;
}

.CategoryNaviCard:hover::before,
.CategoryNaviCard:active::before {
	width: 100%;
}


.CategoryNaviCardImage {
	width: 48.33%;
	overflow: hidden;
}

.CategoryNaviCardImage img {
	width: 100%;
	transition: all 0.3s ease-in-out;
}

.CategoryNaviCard:hover .CategoryNaviCardImage img,
.CategoryNaviCard:active .CategoryNaviCardImage img {
	transform: scale(1.1);
}

.CategoryNaviCardBody {
	position: relative;
	width: 51.67%;
	padding-left: 10px;
	padding-right: 22px;
}

.CategoryNaviCardBody::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 11px;
	background-color: #fff;
	border: 1px solid var(--color-blue);
	transition: all 0.3s ease-in-out;
}


.CategoryNaviCardBody::after {
	content: "";
	display: block;
	width: 8px;
	height: 6px;
	position: absolute;
	right: 7px;
	top: 50%;
	transform: translateY(-50%);
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%226.07%22%20viewBox%3D%220%200%2024%206.07%22%3E%20%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h24v6H0z%22%2F%3E%20%3Cpath%20d%3D%22m20.58%205.36%202.12-2.12-2.12-2.12%22%20fill%3D%22none%22%20stroke%3D%22%2320378b%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M17.3%203.21h5.1%22%20fill%3D%22none%22%20stroke%3D%22%2320378b%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M4.58%205.36%206.7%203.24%204.58%201.12%22%20fill%3D%22none%22%20stroke%3D%22%2320378b%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M1.3%203.21h5.1%22%20fill%3D%22none%22%20stroke%3D%22%2320378b%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	transition: all 0.3s ease-in-out;
	background-position: right 0 center;
}

.CategoryNaviCard:hover .CategoryNaviCardBody::after {
	background-position: left 0 center;
}


.CategoryNaviCardTitle {

}

@media screen and (min-width: 768px) {
	#main-area .PageContents > .Section:nth-child(1n+2) {
		margin-top: 55px;
	}

	.SectionTitleUnderline {
		margin-bottom: 24px;
	}

	.CategoryNaviList {
		margin-top: -25px;
		margin-left: -15px;
		margin-right: -15px;
	}

	.CategoryNaviList li {
		margin-top: 25px;
		padding-left: 15px;
		padding-right: 15px;
		width: calc(100% / 3);
	}

	.SectionSolutionList {
		margin-top: -25px;
		margin-left: -5px;
		margin-right: -5px;
	}
	.SectionSolutionList .SectionSolutionListItem {
		box-sizing: border-box;
		padding-left: 5px;
		padding-right: 5px;
		margin-top: 25px;
	}

	.CardSolutionBody {
		bottom: 18px;
	}

	.CardSolutionTitle {
		margin-bottom: 0;
	}
}

@media screen and (max-width: 767px) {
	#main-area .PageContents > .Section:nth-child(1n+2) {
		margin-top: 40px;
	}

	.JS .SectionTitleUnderline {
		margin-bottom: 24px;
	}

	.CategoryNaviList {
		margin-top: -25px;
		margin-left: -15px;
		margin-right: -15px;
	}

	.CategoryNaviList li {
		margin-top: 25px;
		padding-left: 15px;
		padding-right: 15px;
		width: calc(100%);
	}
}