@charset "utf-8";

/* -----------------------------
	qualifications-area
-------------------------------- */

.qualifications-area {
	padding: 100px 50px 0;
}

.qualifications-area .box {
	background: var(--gradation);
	border-radius: 5px;
	margin: 0 0 70px;
	padding: 0 10px 10px;
}

.qualifications-area .box h3 {
	font-weight: bold;
	font-size: 3.0rem;
	text-align: center;
	padding: 15px 0;
}

.qualifications-area .box h3 span {
	display: inline-block;
	padding: 10px  80px;
	background-image: url("../img/line-white.svg") , url("../img/line-white.svg");
	background-repeat: no-repeat;
	background-size: auto 11px;
	background-position: left center , right center;
	color: var(--white);
}

.qualifications-area .box ul {
	background: var(--white);
	padding: 50px;
	border-radius: 5px;
}

.qualifications-area .box ul li {
	border-bottom: var(--gray) dashed 1px;
	padding: 15px 0 15px 30px;
	line-height: 1.5;
	background: url("../img/icon-check.svg") no-repeat left center / 20px auto;
}

.qualifications-area .box ul li:first-child {
	border-top: var(--gray) dashed 1px;
}

.qualifications-area .att {
	padding: 0 0 100px;
}

.qualifications-area .att h3 {
	font-weight: bold;
	font-size: 2.6rem;
	position: relative;
}

.qualifications-area .att h3::before {
	content: "";
	width: 100%;
	height: 1px;
	background: var(--gray);
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.qualifications-area .att h3 span {
	display: inline-block;
	background: var(--white);
	padding: 0 20px 0 0;
	position: relative;
	z-index: 1;
}

.qualifications-area .att ul {
	padding: 30px 0;
	border-bottom: var(--gray) solid 1px;
}

.qualifications-area .att ul li {
	line-height: 1.7;
}

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

	.qualifications-area {
		padding: 50px 10px 0;
	}

	.qualifications-area .box {
		margin: 0 0 30px;
		padding: 0 5px 5px;
	}

	.qualifications-area .box h3 {
		font-size: 2.4rem;
		padding: 15px 0;
	}

	.qualifications-area .box h3 span {
		padding: 0 50px;
		background-size: auto 8px;
	}

	.qualifications-area .box ul {
		padding: 30px 20px;
	}

	.qualifications-area .box ul li {
		padding: 10px 0 10px 20px;
		background: url("../img/icon-check.svg") no-repeat left top 14px / 15px auto;
	}

	.qualifications-area .att {
		padding: 20px 20px 50px;
	}

	.qualifications-area .att h3 {
		font-size: 2.0rem;
	}

	.qualifications-area .att h3 span {
		padding: 0 10px 0 0;
	}

	.qualifications-area .att ul {
		padding: 15px 0;
	}

	.qualifications-area .att ul li {
		text-indent: -1em;
		padding: 0 0 5px 1em;
	}
	
}