@charset "UTF-8";

/*================================================

導入事例

=================================================*/
.casestudy {
	margin: 0;
	padding: 0;
}
.casestudy-content {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 0 40px;
}
.casestudy-content-inner {
	margin: 0 auto;
	padding: 0;
}
.detail-box {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 1.2rem;
}
.detail-box ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 936px;
	margin: auto;
	padding: 0;
}
.detail-box ul li {
	width: 458px;
	height: 458px;
	padding: 48px;
	background: url("../images/casestudy/casestudy_frame_01.png") center center / 100% 100% no-repeat;
}
.detail-box ul li:nth-of-type(2) { background-image: url("../images/casestudy/casestudy_frame_02.png"); }
.detail-box ul li:nth-of-type(3) { background-image: url("../images/casestudy/casestudy_frame_03.png"); }
.detail-box ul li:nth-of-type(4) { background-image: url("../images/casestudy/casestudy_frame_04.png"); }

.detail-box ul li figure {
	margin-top: 25px;
	text-align: center;
}
.detail-box ul li dl {
	width: 100%;
	padding: 15px 0 0;
	font-size: 1.7rem;
}
.detail-box ul li dl dt {
	float: left;
	clear: right;
	padding: 16px 0 16px 25px;
}
.detail-box ul li dl dd {
	padding: 16px 0 16px calc(7em + 25px);
	border-bottom: 1px solid #9E9F9F;
}
.detail-box ul li dl dd:last-child {
	border-bottom: none;
}

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

	.casestudy-content {
		padding: 0 6.67284523vw 3.70713624vw;
	}
	.detail-box {
		font-size: 1.2rem;
	}
	.detail-box ul {
		width: 86.746988vw;
	}
	.detail-box ul li {
		width: 42.4467099vw;
		height: 42.4467099vw;
		padding: 4.44856348vw;
	}
	.detail-box ul li figure {
		margin-top: 2.31696015vw;
	}
	.detail-box ul li figure img {
		height: 6.48748842vw;
	}
	.detail-box ul li dl {
		padding: 1.39017609vw 0 0;
		font-size: clamp(1.2rem, (100vw - 769px) * 5 / 310 + 12px, 1.7rem);
	}
	.detail-box ul li dl dt {
		padding: 1.48285449vw 0 1.48285449vw 2.31696015vw;
	}
	.detail-box ul li dl dd {
		padding: 1.48285449vw 0 1.48285449vw calc(7em + 2.31696015vw);
	}

}

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

	.casestudy {
		margin: 0;
		padding: 0;
	}
	.casestudy-content {
		padding: 0 0 5.33333333vw;
	}
	.casestudy-content-inner {
		margin: 0 auto;
		padding: 0;
	}
	.detail-box ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		margin: auto;
		padding: 0;
	}
	.detail-box ul li {
		width: 75vw;
		height: 75vw;
		max-width: 458px;
		max-height: 458px;
		margin: auto;
		padding: min(7.85327511vw, 48px);
	}
	.detail-box ul li figure {
		width: 23.2vw;
		max-width: 142px;
		margin: min(4.09024745vw, 25px) auto 0;
		text-align: center;
	}
	.detail-box ul li figure img {
		height: min(11.4526929vw, 70px);
	}
	.detail-box ul li dl {
		width: 100%;
		padding:  min(2.2vw, 15px) 0 0;
		font-size: clamp(1.1rem, (100vw - 375px) * 6 / 393 + 11px, 1.7rem);
	}
	.detail-box ul li dl dt {
		float: left;
		clear: right;
		padding: min(2.61775837vw, 16px) 0 min(2.61775837vw, 16px) min(2.66666666vw, 25px);
	}
	.detail-box ul li dl dd {
		padding: min(2.61775837vw, 16px) 0 min(2.61775837vw, 16px) calc(7em + 2.66666666vw);
	}

}