/* --------------------------------------------------------------------------------------
	アプリ間連携
--------------------------------------------------------------------------------------- */

.api-wrap {
	margin-top: 90px;
	position: relative;
	z-index: 1;
}

.api-wrap .lead { position: relative; }

.api-wrap .lead .image {
	float: left;
	max-width: 48.27888%;
	width: 100%;
}

.api-wrap .lead section {
	margin-left: 3.459%;
	max-width: 48%;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
}

.api-wrap .lead section h2 {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2.4rem;
}

.api-wrap .lead section p {
	line-height: 1.7;
	margin-top: 20px;
}

.api-wrap .lead section p span { font-size: 85%; }

.api-wrap .usage-image { margin-top: 64px; }

.api-wrap .usage-image section { margin-top: 40px; }

.api-wrap .usage-image section h3 {
	background-color: var(--color-deep-blue);
	border-radius: 16px 16px 0 0;
	color: #fff;
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2.4rem;
	padding: 20px 0;
	text-align: center;
}

.api-wrap .usage-image section .usage-image-inner {
	border-bottom: 1px solid var(--border-color);
	border-left: 1px solid var(--border-color);
	border-radius: 0 0 16px 16px;
	border-right: 1px solid var(--border-color);
	padding: 20px 75px 28px 62px;
}

.api-wrap .usage-image section .usage-image-inner > p {
	line-height: 1.6;
	text-align: center;
}

.api-wrap .usage-image section .usage-image-inner ol {
	counter-reset: number 0;
	font-size: 0;
	margin-top: 46px;
	position: relative;
}

.api-wrap .usage-image section .usage-image-inner ol::before {
	background-color: var(--border-color-thin);
	content: '';
	height: 16px;
	left: -32px;
	position: absolute;
	top: 85px;
	width: 105%;
}

.api-wrap .usage-image section .usage-image-inner ol::after {
	background-color: var(--border-color-thin);
	clip-path: polygon(100% 50%, 0 0, 0 100%);
	content: '';
	height: 44px;
	margin-top: -14px;
	position: absolute;
	right: -3.5%;
	top: 85px;
	width: 26px;
}

.api-wrap .usage-image section .usage-image-inner li {
	display: inline-block;
	max-width: 28.493333%;
	text-align: center;
	vertical-align: top;
}

.api-wrap .usage-image section .usage-image-inner li:nth-of-type(n+2) { margin-left: 7.08%; }

.api-wrap .usage-image section .usage-image-inner li div {
	margin: auto;
	position: relative;
}

.api-wrap .usage-image section .usage-image-inner li div img { max-height: 190px;}
.api-wrap .usage-image section .usage-image-inner .no-02 div img { max-height: 196px;}

.api-wrap .usage-image section .usage-image-inner li div::before {
	background-color: var(--color-deep-blue);
	border-radius: 100vw;
	color: #fff;
	content: counter(number) ' ';
	counter-increment: number 1;
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2rem;
	height: 32px;
	left: -16px;
	line-height: 32px;
	position: absolute;
	text-align: center;
	top: -16px;
	width: 32px;
}

.api-wrap .usage-image section .usage-image-inner li p {
	font-size: 1.6rem;
	margin-top: 20px;
}

.api-wrap > .banner { margin: 64px auto 0; }


.head-ttl { margin-bottom: 22px; }
.flow-text { margin-top: 5px;}

.box .head-ttl{ margin-top: 80px;}

.api-diagram {
	margin-top: 20px;
	padding: 0;
	text-align: center;
}



@media (max-width: 768px) {

	.api-wrap {
		margin: 11.2vw 5.333vw 0;
		width: auto;
	}

	.api-wrap .lead section {
		margin-left: 0;
		margin-top: 4vw;
		max-width: 100%;
		position: relative;
		top: auto;
		transform: translateY(0);
	}

	.api-wrap .lead .image {
		float: none;
		max-width: 100%;
	}

	.api-wrap .usage-image { margin-top: 8vw; }

	.api-wrap .usage-image section { margin-top: 6.4vw; }

	.api-wrap .usage-image section h3 {
		border-radius: 2.133vw 2.133vw 0 0;
		font-size: 6.4vw;
		padding: 4.267vw 0;
	}

	.api-wrap .usage-image section .usage-image-inner {
		border-radius: 0 0 2.133vw 2.133vw;
		padding: 5.333vw 0;
	}

	.api-wrap .usage-image section .usage-image-inner > p {
		padding: 0 3.2vw;
		text-align: left;
	}

	.api-wrap .usage-image section .usage-image-inner ol { margin-top: 0; }

	.api-wrap .usage-image section .usage-image-inner ol::before {
		height: 98%;
		left: 5.867vw;
		top: 0;
		width: 4vw;
	}

	.api-wrap .usage-image section .usage-image-inner ol::after {
		bottom: 0;
		clip-path: polygon(50% 100%, 0 0, 100% 0);
		height: 6.4vw;
		left: 2.4vw;
		right: auto;
		top: auto;
		width: 10.933vw;
	}

	.api-wrap .usage-image section .usage-image-inner li {
		max-width: 100%;
		padding-left: 16vw;
		padding-right: 8.267vw;
		width: auto;
	}

	.api-wrap .usage-image section .usage-image-inner li:first-of-type { padding-top: 2.667vw; }

	.api-wrap .usage-image section .usage-image-inner li:nth-of-type(n+2) {
		margin-left: 0;
		margin-top: 10.933vw;
	}

	.api-wrap .usage-image section .usage-image-inner li div { max-width: 100%; }

	.api-wrap .usage-image section .usage-image-inner li div img { max-height: 45.867vw; }

	.api-wrap .usage-image section .usage-image-inner .no-02 div img {
		height: auto;
		max-height: inherit;
		max-width: initial;
		width: 107%;
	}

	.api-wrap .usage-image section .usage-image-inner li div::before {
		font-size: 5.333vw;
		height: 7.467vw;
		left: -.533vw;
		top: -3.467vw;
		width: 7.467vw;
	}

	.api-wrap .usage-image section .usage-image-inner li p {
		font-size: 3.733vw;
		margin-left: 0;
		margin-top: 4.267vw;
	}

	.api-wrap .product-list {
		margin-left: 0;
		margin-right: 0;
	}

	.api-wrap > .banner { margin-top: 9.867vw; }
}