@charset "utf-8";

/*---------------------------------
API連携
---------------------------------*/

/*利用料金*/
.api_charge_wrap h3{
	display:inline-block;
	font-size:22px;
	line-height:1.5;
	border:1px solid #817D7D;/*グレー*/
	padding:12px 80px;
	margin:0 0 15px 0;
}
.api_charge_wrap p{
	font-size:22px;
	line-height:1.5;
	color:#636F6C;
	margin:0;
}
/*連携を実現*/
.api_collabo_ttl{
	font-size:30px;
	font-weight:bold;
	line-height:1.5;
	text-align:center;
	margin:0 0 30px 0;
}

/*提供API*/
.api_service_wrap{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}
.api_service_wrap img{
	width:100%;
}
.api_service_box{
	width:calc((100% - 100px) / 6);
	margin-bottom:20px;
}

@media only screen and (max-width: 480px){
	.api_service_box{
		width:calc((100% - 40px) / 3);
	}
}

/*連携方法*/
.api_system_ttl{
	width: 80%;
	margin:0 auto 5px;
	font-size:18px;
	font-weight:bold;
	line-height:1.5;
}
.api_system_wrap{
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	margin:0 auto;
}
.api_system_wrap img{
	display:block;
	width:100%;
	border:1px solid #2F528F;
	margin:0 0 10px 0;
}
.api_system_box{
	width:48%;
	margin-bottom:20px;
}
.api_system_box p{
	color:#636F6C;
	line-height:1.5;
	margin:0;
}
@media only screen and (max-width: 480px){
	.api_system_ttl,
	.api_system_wrap,
	.api_system_box{
		width:100%;
	}
}
/*導入事例*/
.api_case_outer{
	width: 80%;
	margin:0 auto;
	padding:20px;
	border:5px solid #D7E5F4;
}
.api_case_ttl{
	font-size:18px;
	font-weight:bold;
	line-height:1.5;
	margin:0 0 15px 0;
}
.api_case_wrap{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}
.api_case_wrap img{
	display:block;
	width:100%;
	margin:0 0 10px 0;
}
.api_case_box01,
.api_case_box02{
	width:48%;
}
.api_case_box02 h4{
	color:#636F6C;
	font-size:18px;
	font-weight:bold;
	line-height:1.5;
	margin:0 0 20px 0;
}
.api_case_box02 p{
	color:#636F6C;
	line-height:1.5;
	margin:0;
}
@media only screen and (max-width: 480px){
	.api_case_outer,
	.api_case_box01,
	.api_case_box02{
		width:100%;
	}
}
/*ボタン*/
a.arrow_r{
	color: #FFF !important;
}
.arrow_r {
	position: relative;
	display: inline-block;
	padding:10px 30px 10px 20px;
	font-size:16px;
	color: #FFF;
	text-decoration: none;
	background-color:#4472C4;
	border-radius:20px;
}
.arrow_r:hover {
	opacity:.7;
}
.arrow_r:after {
	content: '';
	width: 6px;
	height: 6px;
	border: 0;
	border-top: solid 2px #FFF;
	border-right: solid 2px #FFF;
	position: absolute;
	top: 50%;
	right: 15px;
	margin-top: -4px;
	transform: rotate(45deg);
}