/*----------------------------------------------------
    solution
-----------------------------------------------------*/
.pubMainvisual {
	background-image: url("../images/solution_new/main_img.jpg")
}
#wrap .showBox {
	margin: 0 auto 54px;
	max-width: 992px;
	position: relative;
}
#wrap .showBox img {
	width: 100%;
	aspect-ratio: 1984/723;
}
#wrap .showBox .link {
	width: 20.1%;
	height: 72.8%;
	position: absolute;
	bottom: 0;
	left: 0;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #537390;
	z-index: 20;
}
#wrap .showBox .link li {
	height: calc(100% / 4);
	border-top: 1px solid #fff;
}
#wrap .showBox .link a {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	background-color: #537390;
	text-align: center;
	line-height: 1.25;
	font-size: 2rem;
	letter-spacing: -0.1em;
}
@media only screen and (min-width: 751px) {
	#wrap .showBox .link a:hover {
		background-color: #3e4445;
	}
}
@media only screen and (max-width: 750px) {
	#wrap .showBox .link a {
		font-size: 1.5vw;
	}
	#wrap .showBox {
		margin-bottom: 30px;
	}
}


/* imgBox */
#wrap .imgBox {
	padding-bottom: 91px;
	font-size: calc(2.2rem * 0.8);
	line-height: 1.75;
	position: relative;
	letter-spacing: -0.02em;
}
#wrap .imgBox .photo {
	position: absolute;
	bottom: -2px;
	left: -90px;
	width: 280px;
}
#wrap .imgBox .photo img {
	width: 100%;
}
#wrap .imgBox .textBox {
	width: calc(100% - 200px);
	margin-left: auto;
}
@media only screen and (max-width: 750px) {
	#wrap .imgBox .textBox {
		width: auto;
	}
	#wrap .imgBox {
		padding-bottom: 125px;
		font-size: 1.6rem;
	}
	#wrap .imgBox .photo {
		bottom: -2px;
		left: 0px;
		width: 136px;
	}
}
@media only screen and (min-width: 751px) and (max-width: 1049px) {
	#wrap .showBox .link a {
		font-size: 1.5rem;
	}
	#wrap .imgBox .photo {
		bottom: -2px;
		left: -28px;
		width: 192px;
	}
}