@charset "UTF-8";

/* --------------------------------------------------------------------------------------
	決済手段一覧
--------------------------------------------------------------------------------------- */

.wrap { background-image: url(../img/service/function/main_bg_bottom.png); }

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

.function-wrap .tab-top {
	background: url(../img/service/function/main_bg.png) no-repeat center bottom / 100% auto;
	padding-bottom: 82px;
}

.function-wrap .tab-content { margin-top: 65px; }

.function-wrap .tab-section .lead { position: relative; }

.function-wrap .tab-section .lead .image { float: left; }

.function-wrap .tab-section .text {
	max-width: 49%;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
}

.function-wrap .tab-section .text h2 {
	font-family: var(--font-UD-ShinGo-DeBold);
	/*background: url(../img/service/function/logo.svg) no-repeat right center;*/
	font-size: 2.4rem;
	min-height: 92px;
}

.function-wrap .tab-section .text p { margin-top: 24px; }

.function-wrap .features-item section .text-banner {
	bottom: 22px;
	position: absolute;
	right: 22px;
}

.features2 .features-item2{
	margin-bottom: 70px;
	margin-top: 40px;
	text-align: center;
}

.function-wrap .solution {
	background-color: var(--color-gray-white);
	padding-bottom: 62px;
	padding-top: 80px;
}

.function-wrap .solution-content h2 {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 3.2rem;
	text-align: center;
}

.function-wrap .solution-content .before-after { margin-top: 48px; }

.function-wrap .solution-content .before-after dt {
	background-color: var(--border-color);
	color: #fff;
	float: left;
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2.4rem;
	max-width: 48.188%;
	padding: 8px 0;
	position: relative;
	text-align: center;
	width: 100%;
}

.function-wrap .solution-content .before-after dt:last-of-type {
	background-color: var(--color-deep-blue);
	float: right;
}

.function-wrap .solution-content .column {
	font-size: 0;
	margin-top: 32px;
}

.function-wrap .solution-content .column:first-of-type { margin-top: 23px; }

.function-wrap .solution-content .column section {
	background-color: #fff;
	border-radius: 16px;
	display: inline-block;
	max-width: 48.188%;
	padding: 30px 24px;
	position: relative;
	vertical-align: middle;
	width: 100%;
}


.function-wrap .solution-content .column section:nth-of-type(even) { margin-left: 38px; }

.function-wrap .solution-content .column section:last-of-type {
	border: 2px solid var(--color-deep-blue);
	min-height: 370px;
	padding: 22px 24px;
}

.function-wrap .solution-content .column section:first-of-type::after {
	background-color: var(--color-deep-blue);
	clip-path: polygon(100% 50%, 0 0, 0 100%);
	content: '';
	display: block;
	height: 46px;
	position: absolute;
	right: -39px;
	top: calc(50% - 23px);
	width: 39px;
	z-index: 1;
}

.function-wrap .solution-content .column section h3 {
	display: table-cell;
	font-size: 1.59888rem;
	height: 64px;
	line-height: 1.6;
	padding-left: 80px;
	position: relative;
	vertical-align: middle;
}

.function-wrap .solution-content .column section h3 strong { font-family: var(--font-UD-ShinGo-DeBold); }

.function-wrap .solution-content .column section h3::before {
	align-items: center;
	background-color: var(--border-color);
	border-radius: 100vw;
	color: #fff;
	content: '課題';
	display: flex;
	font-family: var(--font-UD-ShinGo-DeBold);
	height: 64px;
	justify-content: center;
	left: 0;
	position: absolute;
	top: calc(50% - 32px);
	width: 64px;
}

.function-wrap .solution-content .column section:last-of-type h3 {
	color: var(--color-deep-blue);
	height: 88px;
	padding-left: 104px;
}

.function-wrap .solution-content .column section:last-of-type h3::before {
	background-color: var(--color-deep-blue);
	content: '解消';
	font-size: 125%;
	height: 88px;
	top: calc(50% - 44px);
	width: 88px;
}

.function-wrap .solution-content .column section .image {
	margin-top: 46px;
	text-align: center;
}

.function-wrap .solution-content .column section:last-of-type .image { margin-top: 30px; }

.function-wrap .solution .settlement { margin-top: 64px; }

.function-wrap .solution .settlement .table-scroll { margin-top: 40px; }

.function-wrap .solution .settlement table {
	font-size: 1.4rem;
	width: 100%;
}

.function-wrap .solution .settlement thead th {
	background-color: var(--border-color);
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	color: #fff;
	font-family: var(--font-UD-ShinGo-DeBold);
	padding: 12px 34px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

.function-wrap .solution .settlement thead tr:first-of-type th:first-of-type {
	border-bottom: none;
	border-left: 1px solid var(--border-color);
}

/* .function-wrap .solution .settlement thead tr:last-of-type th { border-bottom: none; } */

.function-wrap .solution .settlement tbody th {
	background-color: #fff;
	border-bottom: 1px solid var(--border-color);
	border-left: 1px solid var(--border-color);
	font-family: var(--font-UD-ShinGo-DeBold);
	padding: 8px 20px;
	vertical-align: middle;
	white-space: nowrap;
}

.function-wrap .solution .settlement thead th:last-of-type,
.function-wrap .solution .settlement tbody td:last-of-type { border-right: 1px solid var(--border-color); }

.function-wrap .solution .settlement tbody td {
	background-color: #fff;
	border-bottom: 1px solid var(--border-color);
	border-left: 1px solid var(--border-color);
	padding: 10px 20px;
	text-align: center;
	vertical-align: middle;
}

.function-wrap .solution .settlement tbody td sup { font-size: 60%; }

.function-wrap .solution .settlement thead .active {
	background-color: #ecebe9;
	border-bottom: 2px solid #3a7bbd;
	border-left: 2px solid #3a7bbd;
	border-right: 2px solid #3a7bbd;
	position: relative;
}

.function-wrap .solution .settlement thead .active::before {
	background-color: #3a7bbd;
	content: '';
	display: block;
	height: 2px;
	left: 0;
	position: absolute;
	top: -2px;
	width: 100%;
}

.function-wrap .solution .settlement tbody .active {
	background-color: #f0f5f9;
	border-left: 2px solid #0b3c8b;
	border-right: 2px solid #0b3c8b;
}

.function-wrap .solution .settlement tbody tr:last-of-type .active { border-bottom: 2px solid #0b3c8b; }

.function-wrap .solution .settlement ul {
	font-size: 1.41999rem;
	margin-top: 20px;
}

.function-wrap .how-to-use { margin-top: 64px; }

.function-wrap .how-to-use section { margin-top: 40px; }

.function-wrap .how-to-use 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;
}

.function-wrap .how-to-use section .how-to-use-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 40px 28px;
}

.function-wrap .how-to-use section .how-to-use-inner > p {
	line-height: 1.6;
	text-align: center;
}

.function-wrap .how-to-use section .how-to-use-inner ol {
	counter-reset: number 0;
	font-size: 0;
	margin-top: 46px;
	position: relative;
}

.function-wrap .how-to-use section .how-to-use-inner ol::before {
	background-color: var(--border-color-thin);
	content: '';
	height: 16px;
	left: 0;
	position: absolute;
	top: 6.333vw;
	width: 99%;
}

.function-wrap .how-to-use section .how-to-use-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: -15px;
	top: 6.333vw;
	width: 26px;
}

.function-wrap .how-to-use section .how-to-use-inner li {
	display: inline-block;
	max-width: 32.3333333%;
	text-align: left;
	vertical-align: top;
	width: 100%;
}

.function-wrap .how-to-use section .how-to-use-inner li:nth-of-type(n+2) { margin-left: 1.49999%; }

.function-wrap .how-to-use section .how-to-use-inner li div {
	margin: auto;
	max-width: 85%;
	position: relative;
}

.function-wrap .how-to-use section .how-to-use-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;
}

.function-wrap .how-to-use section .how-to-use-inner li p {
	font-size: 1.6rem;
	margin-top: 20px;
}

.function-wrap .how-to-use .movie {
	font-size: 0;
	margin-top: 40px;
	position: relative;
}

.function-wrap .how-to-use .movie .video {
	display: inline-block;
	max-width: 32%;
	vertical-align: top;
	width: 100%;
}

.function-wrap .how-to-use .movie .video:nth-of-type(n+2) { margin-left: 2%; }

.function-wrap .how-to-use .movie .video video { width: 100%; }

.function-wrap .how-to-use .movie .video h4 {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2rem;
	margin-top: 16px;
}

.function-wrap .flow { margin-top: 54px; }


.function-wrap .initial-cost {
	background-color: var(--color-gray-white);
	border-radius: 12px;
	margin-top: 36px;
	padding: 36px 20px 40px;
	text-align: center;
}

.function-wrap .initial-cost h2 {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2rem;
}

.function-wrap .initial-cost p { margin-top: 24px; }

.function-wrap .initial-cost .banner { margin: 32px auto 0; }

.function-wrap .faq { margin-top: 64px; }

.function-wrap .faq .column {
	border-bottom: 1px solid var(--border-color-thin);
	padding-bottom: 20px;
}

.function-wrap .faq .column:first-of-type { border-top: none; }

.function-wrap .faq .column label,
.function-wrap .faq .column-inner { padding-left: 26px; }

.function-wrap .faq .column label {
	border-bottom: none;
	padding-bottom: 0;
}

.function-wrap .faq .column label::before {
	color: var(--color-deep-blue);
	content: 'Q';
	left: 0;
	position: absolute;
}

.function-wrap .faq .column label::after { top: 50%; }
.function-wrap .faq .column input:checked + label::after { top: calc(50% + 7px); }

.function-wrap .faq .column-inner {
	margin-top: 20px;
	position: relative;
}

.function-wrap .faq .column-inner::before {
	color: var(--color-deep-blue);
	content: 'A';
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 2rem;
	left: 0;
	position: absolute;
	top: -3px;
}

.function-wrap .scene { margin-top: 60px; }
.function-wrap .use-cases { margin-top: 100px; }

.function-wrap .banner-app {
	border-top: 1px solid var(--border-color);
	margin-top: 64px;
	padding-top: 64px;
	text-align: center;
}

.function-wrap .banner-app .banner { margin: auto; }

@media (max-width: 768px) {

	.wrap { background-image: url(../img/service/function/main_bg_sp.png); }

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

	.function-wrap .tab-top {
		background-image: none;
		margin: 0 20px;
		padding-bottom: 18.4vw;
	}

	.function-wrap .tab-content { margin-top: 9.6vw; }

	.function-wrap .tab-section .lead,
	.function-wrap .features { width: auto; }

	.function-wrap .tab-section .text {
		max-width: 100%;
		position: relative;
		right: auto;
		top: 0;
		transform: translateY(0);
	}

	.function-wrap .tab-section .text h2 {
		background-position: right 7.333vw;
		background-size: 20vw auto;
		font-size: 5.333vw;
		min-height: fit-content;
	}

	.function-wrap .tab-section .text p { margin-top: 4.267vw; }

	.function-wrap .tab-section .lead .image {
		float: none;
		margin-top: 4.267vw;
	}

	.function-wrap .solution {
		margin-left: -5.333vw;
		margin-right: -5.333vw;
		padding: 17.333vw 5.333vw;
	}

	.function-wrap .solution-content h2 { font-size: 6.933vw; }

	.function-wrap .solution-content .before-after dt {
		float: none;
		font-size: 4.8vw;
		max-width: 100%;
		padding: 0 0 0 26.667vw;
		position: relative;
		text-align: left;
		width: auto;
	}

	/* .function-wrap .solution-content .before-after dt::before {
		background-color: var(--border-color);
		content: '';
		display: block;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 23.467vw;
	} */

	.function-wrap .solution-content .before-after dt:last-of-type {
		/* background-color: transparent; */
		float: none;
		margin-top: 8.2vw;
	}

	/* .function-wrap .solution-content .before-after dt:last-of-type::before { background-color: var(--color-deep-blue); } */

	.function-wrap .features-item section .text-banner {
		bottom: 0;
		font-size: 3.733vw;
		margin-top: 3.2vw;
		position: relative;
		right: inherit;
	}

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

	.function-wrap .solution-content .column { margin-top: 8.667vw; }
	.function-wrap .solution-content .column:first-of-type { margin-top: 8.267vw; }

	.function-wrap .solution-content .column section {
		border-radius: 2.133vw;
		max-width: 100%;
		padding: 4.267vw;
	}

	.function-wrap .solution-content .column section:nth-of-type(even) { margin-left: 0; }

	.function-wrap .solution-content .column section:last-of-type {
		margin-top: 5.333vw;
		min-height: inherit;
		padding: 4vw;
	}

	.function-wrap .solution-content .column section:first-of-type::after,
	.function-wrap .solution-content .before-after dt:first-of-type::after {
		background-color: var(--color-deep-blue);
		bottom: -5.333vw;
		clip-path: polygon(50% 100%, 0 0, 100% 0);
		content: '';
		height: 5.333vw;
		left: calc(50% - 3.067vw);
		position: absolute;
		right: auto;
		top: auto;
		width: 6.133vw;
	}

	.function-wrap .solution-content .before-after dt:first-of-type::after { bottom: -6.833vw; }

	.function-wrap .solution-content .column section h3 {
		font-size: 3.633vw;
		height: 12vw;
		padding-left: 14.667vw;
	}

	.function-wrap .solution-content .column section h3::before {
		height: 12vw;
		top: calc(50% - 6vw);
		width: 12vw;
	}
	.function-wrap .solution-content .column section:last-of-type h3 {
		height: 16.533vw;
		padding-left: 18.667vw;

	}

	.function-wrap .solution-content .column section:last-of-type h3::before {
		height: 16.533vw;
		top: calc(50% - 8.267vw);
		width: 16.533vw;
	}


	.function-wrap .solution-content .column section .image { margin-top: 4.267vw; }
	.function-wrap .solution-content .column section:last-of-type .image { margin-top: 4.267vw; }

	.function-wrap .solution-content .column:nth-of-type(1) section:first-child .image img { max-height: 17.333vw; }
	.function-wrap .solution-content .column:nth-of-type(1) section:last-child .image img { max-height: 20.533vw; }

	.function-wrap .solution-content .column:nth-of-type(2) section:first-child .image img { max-height: 27.2vw; }
	.function-wrap .solution-content .column:nth-of-type(2) section:last-child .image img { max-height: 31.733vw; }

	.function-wrap .solution-content .column:nth-of-type(3) section:first-child .image img { max-height: 29.6vw; }
	.function-wrap .solution-content .column:nth-of-type(3) section:last-child .image img { max-height: 26.667vw; }

	.function-wrap .solution-content .column:nth-of-type(4) section:first-child .image img { max-height: 21.867vw; }
	.function-wrap .solution-content .column:nth-of-type(4) section:last-child .image img { max-height: 21.333vw; }

	.function-wrap .solution .settlement { margin-top: 16vw; }

	.function-wrap .solution .settlement .table-scroll { margin-top: 6.133vw; }

	.function-wrap .solution .settlement table { font-size: 3.333vw; }
	.function-wrap .solution .settlement thead th { padding: 3.2vw 2.333vw; }
	.function-wrap .solution .settlement tbody th { padding: 2.667vw 4.267vw; }
	.function-wrap .solution .settlement tbody td { padding: 3.2vw 6vw; }

	.function-wrap .solution .settlement ul {
		margin-top: 3.467vw;
		width: 200vw;
	}

	.function-wrap .solution .settlement li {
		margin-left: 2em;
		text-indent: -2em;
	}

	.function-wrap .how-to-use {
		margin: 13.333vw auto 0;
		width: auto;
	}

	.function-wrap .how-to-use section { margin-top: 6.4vw; }

	.function-wrap .how-to-use section h3 {
		border-radius: 2.133vw 2.133vw 0 0;
		font-size: 6.4vw;
		padding: 4.267vw 0;
	}

	.function-wrap .how-to-use section .how-to-use-inner {
		border-radius: 0 0 2.133vw 2.133vw;
		padding: 5.333vw 0;
	}

	.function-wrap .how-to-use section .how-to-use-inner > p {
		padding: 0 3.2vw;
		text-align: left;
	}

	.function-wrap .how-to-use section .how-to-use-inner ol { margin-top: 8.533vw; }

	.function-wrap .how-to-use section .how-to-use-inner ol::before {
		height: 98%;
		left: 5.867vw;
		top: 0;
		width: 4vw;
	}

	.function-wrap .how-to-use section .how-to-use-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;
	}

	.function-wrap .how-to-use section .how-to-use-inner li {
		max-width: 100%;
		padding-left: 16vw;
		padding-right: 8.267vw;
		width: auto;
	}

	.function-wrap .how-to-use section .how-to-use-inner li:nth-of-type(n+2) {
		margin-left: 0;
		margin-top: 10.933vw;
	}

	.function-wrap .how-to-use section .how-to-use-inner li div { max-width: 100%; }

	.function-wrap .how-to-use section .how-to-use-inner li div::before {
		font-size: 5.333vw;
		height: 7.467vw;
		left: -.533vw;
		top: -3.467vw;
		width: 7.467vw;
	}

	.function-wrap .how-to-use section .how-to-use-inner li p {
		font-size: 3.733vw;
		margin-left: 0;
		margin-top: 4.267vw;
	}

	.function-wrap .how-to-use .movie { margin-top: 5.333vw; }

	.function-wrap .how-to-use .movie .video {
		display: flex;
		flex-direction: column;
		max-width: 100%;
	}

	.function-wrap .how-to-use .movie .video:nth-of-type(n+2) {
		margin-left: 0;
		margin-top: 7.267vw;
	}

	.function-wrap .how-to-use .movie .video video { order: 2; }

	.function-wrap .how-to-use .movie .video h4 {
		font-size: 3.833vw;
		margin-bottom: 3.033vw;
		order: 1;
	}

	.function-wrap .flow {
		margin: 12.8vw auto 0;
		width: auto;
	}

	.function-wrap .initial-cost {
		border-radius: 1.6vw;
		margin: 8.533vw auto 0;
		padding: 6.4vw 3.733vw 7.467vw;
		width: auto;
	}

	.function-wrap .initial-cost h2 { font-size: 4.8vw; }

	.function-wrap .initial-cost p {
		margin-top: 3.2vw;
		text-align: left;
	}

	.function-wrap .initial-cost .banner { margin-top: 4vw; }

	.function-wrap .faq {
		margin: 13.333vw auto 0;
		width: auto;
	}

	.function-wrap .faq .column { padding-bottom: 4.533vw; }

	.function-wrap .faq .column label,
	.function-wrap .faq .column-inner { padding-left: 6.333vw; }
	.function-wrap .faq .column-inner { margin-top: 3.333vw; }
	.function-wrap .faq .column-inner::before { font-size: 4.8vw; }

	.function-wrap .faq .column label::after { top: 57%; }

	.function-wrap .scene {
		margin: 13.333vw auto 0;
		width: auto;
	}

	.function-wrap .product-list {
		margin-left: auto;
		margin-right: auto;
	}

	.function-wrap .use-cases { margin-top: 16.8vw; }

	.function-wrap .banner-app {
		margin: 9.867vw auto 0;
		padding-top: 7.467vw;
		width: auto;
	}
}