/* business
-------------------------------------------*/

#main #strong_point h3{
	width: 100%;
	margin-left: 10%;
}
#main #strong_point .read .text{
	width: 100%;
	margin: 0 0 150px;
	display: flex;
	justify-content: space-between;
}
#strong_point .read .text .box{
	width: 48%;
	margin-left: 10%;
}
#strong_point .read .text .img{
	width: 37%;
}
#strong_point .read .text .img img{
	object-fit: cover;
}
#strong_point .tit{
	width: 100%;
	margin-bottom: 30px;
}
#strong_point .tit p{
	display: inline;
	color: #fff;
	font-weight: bold;
	padding: 8px 16px 12px;
	background-color: var(--font-black);
}
.grade_class{
	width: var(--page-width);
	margin: 0 auto;
}
.grade_class img{
	width: 80%;
}
#strong_point ul{
	display: flex;
	justify-content: space-between;
	width: calc(var(--page-width) - 20%);
	margin: 0 auto;
	padding-top: 100px;
}
#strong_point ul li{
	width: 45%;
}
#strong_point ul li img{
	border: 1px solid #ddd;
}

#process{
	color: #fff;
	padding: 150px 0; 
	background-color: var(--font-black);
}
#main #process h3{
	width: 100%;
	margin-left: 10%;
	margin-bottom: 50px;
}
#process .flow ul li{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 150px;
	background: url(../img/business/flow_bg.png) no-repeat;
	background-size: 400px auto;
}
#process .flow ul li .text{
	width: 48%;
	margin-left: 10%;
}
#process .flow ul li:nth-of-type(even){
	flex-direction: row-reverse;
}
#process .flow ul li:nth-of-type(even) .text{
	margin: 0 10% 0 0;
}
#process .flow ul li:nth-of-type(1),
#process .flow ul li:nth-of-type(5),
#process .flow ul li:nth-of-type(7){
	background: none;
}
#process .flow ul li:nth-of-type(2){
	background-position: 90% top;
}
#process .flow ul li:nth-of-type(3){
	background-position: 5% 80%;
}
#process .flow ul li:nth-of-type(4){
	background-position: 90% bottom;
	background-size: 30% auto;
}
#process .flow ul li:nth-of-type(6){
	background-position: 60% top;
}
#process .flow ul li:nth-of-type(8){
	background-position: 95% center;
}
#process .flow ul li .text .tit{
	font-size: 36px;
	display: flex;
	align-items: center;
}
#process .flow ul li .text .tit span{
	color: var(--green);
	font-family: var(--font-en);
	font-size: 80px;
	padding-right: 3%;
}
#process .flow ul li .photo{
	width: 35%;
}
#process .flow ul li .photo img{
	object-fit: cover;
}

@media screen and (max-width: 650px){
	
	#main #strong_point h3{
		margin-left: 3%;
	}
	#main #strong_point .read .text{
		margin: 0 0 15%;
		flex-wrap: wrap;
	}
	#strong_point .read .text .box{
		width: var(--page-width);
		margin: 0 auto;
	}
	#strong_point .read .text .box h4{
		margin-bottom: 4%;
	}
	#strong_point .read .text .img{
		width: 100%;
		margin-top: 10%;
	}
	#strong_point .tit{
		margin-bottom: 30px;
	}
	#strong_point .tit p{
		padding: 4px 16px 8px;
	}
	.grade_class img{
		width: 100%;
	}
	#strong_point ul{
		flex-wrap: wrap;
		padding-top: 15%;
	}
	#strong_point ul li{
		width: 80%;
		margin: 0 auto 10%;
	}
	#process{
		padding: 25% 0; 
	}
	#main #process h3,
	#process .flow{
		width: var(--page-width);
		margin: 0 auto;
	}
	#process .flow ul li{
		flex-wrap: wrap;
		padding-bottom: 15%;
		background-size: 250px auto;
	}
	#process .flow ul li .text,
	#process .flow ul li:nth-of-type(even) .text{
		margin: 0;
		width: 100%;
	}
	#process .flow ul li:nth-of-type(3){
		background-position: 10% 20%;
	}
	#process .flow ul li:nth-of-type(4){
		background-size: 50% auto;
	}
	#process .flow ul li:nth-of-type(6){
		background-position: 40% top;
	}
	#process .flow ul li:nth-of-type(8){
		background-position: 95% top;
	}
	#process .flow ul li .text .tit{
		font-size: 28px;
		padding-left: 2%;
	}
	#process .flow ul li .text .tit span{
		font-size: 60px;
		padding-right: 3%;
	}
	#process .flow ul li .photo{
		width: 80%;
		margin: 0 auto;
		padding-top: 10%;
	}
	#process .flow ul li .photo img{
		border-radius: 4px;
	}
}