@charset "UTF-8";

/* --------------------------------------------------------------------------------------
	サービス
--------------------------------------------------------------------------------------- */

.wrap {
	background-image: none;
	padding-bottom: 0;
}

.service-wrap {
	background: url(../img/service/index/service_main_bg.png) no-repeat center bottom;
	margin-bottom: -1px;
	margin-top: 82px;
	padding-bottom: 106px;
	position: relative;
	z-index: 1;
}

@media (min-width: 1681px) {

	.service-wrap { background-size: 100% auto; }
}

.service-wrap .lead-top h2 {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 3.2rem;
	letter-spacing: 1px;
	line-height: 1.7;
	margin-top: 40px;
}

.service-wrap .lead-top .lp-service {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 1.8rem;
	margin: 30px 30px 20px 30px;
	padding: 20px;
}

.intro-link a {
	background: url(../img/common/icon_arrow.svg) no-repeat right center;
	padding-right: 66px;
	transition: var(--transition);
}

.media-box {
	margin-bottom: 80px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 80px;
	max-width: 1100px;
	width: 100%;
}

.media-link a {
	background: url(../img/common/icon_arrow.svg) no-repeat right center;
	padding-right: 66px;
	transition: var(--transition);
}

.over { transition: var(--transition); }

.text-banner a:hover {
	background-position: calc(100% - 5px) center;
	text-decoration: none;
}

.linebox-hr {
	height: 1px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1100px;
	width: 100%;
}

.linebox-hr hr{
	border-top: 1px solid #e5e5e5;
	margin: 0;
	padding-bottom: 0;
}


.service-wrap .lead-top p {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2.4rem;
	margin-top: 30px;
}

.service-wrap .lead-top .diagram { margin-top: 50px; }

.service-wrap .lead-top .details {
	font-size: 0;
	left: -30px;
	margin-bottom: -30px;
	margin-top: 32px;
	position: relative;
	top: -30px;
}

.service-wrap .lead-top .details dl {
	background: url(../img/service/index/deco_wing.svg) no-repeat center top;
	display: inline-block;
	margin-left: 30px;
	margin-top: 30px;
	min-height: 120px;
	min-width: 247px;
}

.service-wrap .lead-top .details dt {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2rem;
}

.service-wrap .lead-top .details dd {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2rem;
}

.service-wrap .lead-top .details dd strong {
	color: #000;
	font-size: 2rem;
	line-height: 1.1;
}

.service-wrap .lead-top .details dd strong span {
	color: var(--color-deep-blue);
	font-family: var(--font-ubuntu);
	font-size: 4.8rem;
	letter-spacing: -1px;
}

.service-wrap .lead-top .details dd > span { font-size: 1.6rem; }

.service-wrap .settlement { margin-top: 100px; }

.service-wrap .settlement-inner {
	font-size: 0;
	left: -22px;
	margin-bottom: -22px;
	margin-top: 40px;
	position: relative;
	top: -22px;
	width: calc(100% + 22px);
}

.service-wrap .settlement-inner section {
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0px 0px 24px 0px rgba(213, 213, 213, .46);
	display: inline-block;
	margin-left: 22px;
	margin-top: 22px;
	padding: 38px 28px 70px;
	position: relative;
	vertical-align: top;
	width: 352px;
}

.service-wrap .settlement-inner section .image {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 92px;
}

.service-wrap .settlement-inner section .image img { max-height: 92px; }

.service-wrap .settlement-inner .union-pay .image img { max-height: 55px; }
.service-wrap .settlement-inner .pay-easy .image img { max-height: 75px; }
.service-wrap .settlement-inner .invoice .image img,
.service-wrap .settlement-inner .qr .image img { max-height: 75px; }

.service-wrap .settlement-inner section h3 {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2rem;
	margin-top: 28px;
	text-align: center;
}

.service-wrap .settlement-inner section p {
	font-size: 1.419999rem;
	line-height: 1.7;
	margin-top: 16px;
}

.service-wrap .settlement-inner section .text-banner {
	bottom: 22px;
	position: absolute;
	right: 22px;
}

.service-wrap .settlement-inner section .text-banner a { font-size: 1.6rem; }

.service-wrap .settlement .banner { margin: 40px auto 0; }
.service-wrap .settlement .banner a { padding-left: 30px; }

@media (max-width: 768px) {

	.service-wrap {
		background: url(../img/service/index/service_main_bg_sp.png) no-repeat center bottom / 100.2% auto;
		margin-top: 11.2vw;
	}

	.text-banner a {
		background-size: 6.933vw auto;
		padding-right: 9.333vw;
	}

	.service-wrap .lead-top h2 { font-size: 7.467vw; }

	.service-wrap .lead-top p {
		font-size: 4.8vw;
		margin: 8.533vw 4.333vw 0;
	}

	.service-wrap .lead-top .diagram { margin: 7.2vw 5.333vw 0; }

	.service-wrap .lead-top .details {
		left: -5.333vw;
		margin-bottom: -5.333vw;
		position: relative;
		text-align: center;
		top: -5.333vw;
		width: calc(100% + 5.333vw);
	}

	.service-wrap .lead-top .details dl {
		background-size: contain;
		margin-left: 5.333vw;
		margin-top: 5.333vw;
		min-height: 20.533vw;
		min-width: 42.133vw;
	}

	.service-wrap .lead-top .details dt,
	.service-wrap .lead-top .details dd,
	.service-wrap .lead-top .details dd strong { font-size: 3.333vw; }

	.service-wrap .lead-top .details dd strong span { font-size: 8.133vw; }
	.service-wrap .lead-top .details dd > span { font-size: 3.2vw; }

	.service-wrap .settlement {
		margin: 13.333vw 5.333vw 0;
		width: auto;
	}

	.service-wrap .settlement-inner {
		left: auto;
		margin-bottom: 0;
		margin-top: 6.4vw;
		top: auto;
		width: auto;
	}

	.service-wrap .settlement-inner section {
		display: inline-block;
		margin-left: 0;
		margin-top: 2.933vw;
		vertical-align: top;
		width: 100%;
	}

	.service-wrap .settlement-inner section:first-of-type { margin-top: 0; }

	.service-wrap .settlement-inner section a {
		border-radius: 2.133vw;
		padding: 5.333vw 3.2vw 4.533vw;
	}


	.service-wrap .settlement-inner .union-pay .image img { max-height: 17.333vw; }

	.service-wrap .settlement-inner section h3 {
		font-size: 4.733vw;
		margin-top: 4.267vw;
		min-height: 0 !important;
	}

	.service-wrap .settlement-inner section p {
		font-size: 3.2vw;
		line-height: 1.5;
	}

	.service-wrap .settlement .banner { margin-top: 7.467vw; }

	.service-wrap .settlement-inner section .text-banner a {
		background-image: url(../img/common/icon_arrow.svg);
		font-family: var(--font-UD-ShinGo-DeBold);
		font-size: 3.733vw;
		padding-right: 9.333vw;
	}
}

/* --------------------------------------------------------------------------------------
	利用シーン
--------------------------------------------------------------------------------------- */

.wrap.scene {
	background-image: url(../img/service/scene/main_bg.png);
	padding-bottom: 105px;
}

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

.scene-nav {
	background-color: var(--color-gray-white);
	padding: 32px;
}

.scene-nav ol {
	left: -5px;
	margin-bottom: -10px;
	position: relative;
	top: -10px;
	width: calc(100% + 11px);
}

.scene-nav li {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0px 0px 16px 0px rgba(213, 213, 213, .46);
	display: inline-block;
	height: 100px;
	margin-left: 5px;
	margin-top: 10px;
	transition: all .3s ease-in-out;
	width: 200px;
}

.scene-nav li a {
	align-items: center;
	display: flex;
	font-family: var(--font-UD-ShinGo-DeBold);
	height: 100%;
	justify-content: center;
	transition: all .3s ease-in-out;
	width: 100%;
}

.scene-nav .active { background-color: var(--border-color); }

.scene-nav .active a {
	color: #fff;
	pointer-events: none;
	text-decoration: none;
}

@media (min-width: 1099px) {

	.scene-nav li:hover { background-color: var(--border-color); }

	.scene-nav li:hover a {
		color: #fff;
		text-decoration: none;
	}

}

.scene-head {
	font-size: 0;
	margin-top: 48px;
	overflow: hidden;
	position: relative;
}

.scene-head .image {
	float: left;
	max-width: 48.11111%;
	vertical-align: middle;
	width: 100%;
}

.scene-head section {
	left: 52%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.scene-head section h2 {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2.4rem;
}

.scene-head section p {
	font-size: 1.6rem;
	line-height: 1.6;
	margin-top: 18px;
}

.scene-wrap .use-cases { margin-top: 96px; }

.scene-wrap .use-cases h2 {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 3.2rem;
}

.scene-wrap .use-cases > p { margin: 40px auto; }

@media (max-width: 768px) {

	.wrap.scene {
		background-image: url(../img/service/scene/main_bg_sp.png);
		background-position: center bottom;
		padding-bottom: 19.467vw;
	}

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

	.scene-nav { padding: 4.267vw; }

	.scene-nav ol {
		left: 0;
		margin-bottom: 0;
		position: relative;
		top: 0;
		width: auto;
	}

	.scene-nav li {
		border-radius: 1.067vw;
		height: 17.067vw;
		margin-left: 0;
		margin-top: 0;
		width: 39.2vw;
	}

	.scene-nav li:nth-of-type(even) { margin-left: 1.2vw; }
	.scene-nav li:nth-of-type(n+3) { margin-top: 2.4vw; }

	.scene-head { margin-top: 7.467vw; }

	.scene-head section {
		left: auto;
		margin-top: 3.733vw;
		position: relative;
		top: auto;
		transform: translateY(0);
	}

	.scene-head section h2 { font-size: 5.333vw; }

	.scene-head section p {
		font-size: 3.733vw;
		margin-top: 3.733vw;
	}

	.scene-head .image {
		float: none;
		max-width: 100%;
	}

	.scene-wrap .use-cases { margin-top: 17.333vw; }

	.scene-wrap .use-cases h2 { font-size: 7.467vw; }
	.scene-wrap .use-cases > p { margin: 7.733vw auto 5.867vw; }

	.scene-wrap .use-cases .slider-wrap {
		margin-left: -5.333vw;
		width: calc(100% + 10.666vw);
	}

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

	.scene-features section .text-banner a {
		background-image: url(../img/common/icon_arrow.svg);
		font-family: var(--font-UD-ShinGo-DeBold);
		font-size: 3.733vw;
		padding-right: 9.333vw;
	}
}