@charset "UTF-8";

/* --------------------------------------------------------------------------------------
	キービジュアル
--------------------------------------------------------------------------------------- */

.key-image {
	height: 1540px;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

.key-image h2 {
	font-feature-settings: 'palt';
	position: absolute;
	text-align: center;
	top: 364px;
	width: 100%;
	z-index: 3;
}

.key-image h2 strong {
	display: block;
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 6.4rem;
}

.key-image h2 span {
	display: block;
	font-family: var(--font-UD-ShinGo-Medium);
	font-size: 3.2rem;
	line-height: 1.9;
	margin-top: 12px;
}

.key-image .key-animation {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100vw;
	z-index: 2;
}

.key-image .key-animation #svgCanvas,
.key-image .key-animation #svgCanvas2 {
	left: 50%;
	opacity: 0;
	overflow: visible;
	position: absolute;
	top: 25%;
	transform: translate(-50%,-50%) rotateX(.01deg);
	will-change: transform,filter,opacity;
	z-index: 1;
}

.key-image .line::before {
	background: url(../img/top/key_line_left.png) no-repeat;
	content: '';
	display: block;
	height: 1540px;
	left: -730px;
	position: absolute;
	top: 0;
	width: 2118px;
}

@media (max-width: 768px) {

	.key-image {
		height: 148.267vw;
		overflow: inherit;
		overflow-x: clip;
	}

	.key-image .key-animation #svgCanvas,
	.key-image .key-animation #svgCanvas2 { top: 32%; }

	.key-image .key-animation { height: 150%; }

	.key-image h2 {
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%,-50%);
	}

	.key-image h2 strong { font-size: 8.2vw; }

	.key-image h2 span {
		font-size: 4.2vw;
		margin-top: 1.6vw;
	}

	.key-image .line::before { display: none; }
}

/* --------------------------------------------------------------------------------------
	決済から、きのうの不可能を可能にする。
--------------------------------------------------------------------------------------- */

.lead {
	margin-top: -360px;
	overflow-x: clip;
	position: relative;
	z-index: 0;
}

.lead article::before {
	background: url(../img/top/lead_line_bg.png) no-repeat;
	content: '';
	display: block;
	height: 2676px;
	left: -504px;
	position: absolute;
	top: -222px;
	width: 2153px;
	z-index: -1;
}

.lead h2 {
	font-family: var(--font-UD-ShinGo-Bold);
	font-size: 4rem;
	letter-spacing: 4px;
}

.lead p {
	font-size: 1.8rem;
	line-height: 2.8;
	margin-top: 50px;
}

.lead .banner { margin-top: 54px; }

.lead-line {
	max-width: 100vw;
	overflow-x: clip;
	position: relative;
	z-index: 0;
}

@media (max-width: 1025px) {
	.lead {
		padding-left: 5.333vw;
		padding-right: 5.333vw;
	}
}

@media (max-width: 768px) {

	.lead {
		margin-top: 0;
		padding-top: 18vw;
	}

	.lead article::before {
		background-image: url(../img/top/lead_line_bg_sp.png);
		background-size: 100% auto;
		left: -5.333vw;
		top: -18vw;
		width: 100vw;
	}

	.lead h2 {
		font-feature-settings: 'palt';
		font-size: 6.4vw;
		letter-spacing: 0;
		line-height: 1.7;
	}

	.lead p {
		font-feature-settings: 'palt';
		font-size: 3.733vw;
		letter-spacing: 0;
		line-height: 1.6;
		margin-top: 5.867vw;
	}

	.lead .banner { margin: 6.933vw auto 0;}
}

/* --------------------------------------------------------------------------------------
	導入事例
--------------------------------------------------------------------------------------- */

.use-cases {
	margin-top: 190px;
	overflow-x: clip;
}

.use-cases h2 {
	margin-bottom: 20px;
	text-align: center;
}

.use-cases h2 .bg-eng::before {
	content: 'Use Cases';
	left: 0;
}

.use-cases .logo-area {
	background-color: rgba(255, 255, 255, .6);
	margin-top: 80px;
	padding: 24px 0;
}

.use-cases .view-all {
	margin-top: 40px;
	position: relative;
	text-align: center;
	z-index: 3;
}

.use-cases .view-all .banner {
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 1100px) {

	.use-cases .swiper-horizontal > .swiper-scrollbar,
	.use-cases .swiper-scrollbar.swiper-scrollbar-horizontal { max-width: 81%; }

}

@media (max-width: 768px) {

	.use-cases { margin-top: 16vw; }

	.use-cases h2 { margin-bottom: 12.267vw; }

	.use-cases .logo-area {
		margin-top: 7.467vw;
		overflow-x: auto;
		overscroll-behavior: none;
		padding: 3.2vw 0;
	}

	.use-cases .view-all { margin-top: 7.467vw; }
}

/* --------------------------------------------------------------------------------------
	サポート
--------------------------------------------------------------------------------------- */

.support {
	background: url(../img/top/support_line_bg.png) no-repeat center top;
	margin-top: -126px;
	overflow: hidden;
	padding-bottom: 92px;
	padding-top: 330px;
}

@media (min-width: 1681px) {

	.support { background-size: cover; }
}

.support h2 { text-align: center; }

.support h2 .bg-eng::before {
	content: 'Support';
	right: 0;
}

.support-banner { margin-top: 52px; }

.support-banner ol {
	min-width: 535px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.support-banner li:nth-of-type(n+2) { margin-top: 32px; }

.support-banner .banner.large a { justify-content: flex-start; }

.support-banner .image {
	margin-left: 620px;
	width: calc(471px + (100vw - 1100px) / 2);
}

.support-banner .image img {
	height: auto;
	max-width: inherit;
	width: 100%;
}

@media (max-width: 1025px) {

	.support-banner {
		margin-top: 12.267vw;
		padding-left: 5.333vw;
		padding-right: 5.333vw;
	}

	.support {
		background-image: url(../img/top/support_line_bg_sp.png);
		background-size: cover;
		margin-top: -1.067vw;
		padding-bottom: 17.6vw;
		padding-top: 41.4vw;
	}

	.support-banner .image img.sp { display: block !important; }

	.support-banner ol {
		font-size: 0;
		min-width: inherit;
		position: relative;
		text-align: left;
		top: auto;
		transform: translateY(0);
	}

	.support-banner li {
		display: inline-block;
		vertical-align: top;
	}

	.support-banner li:nth-of-type(n+2) { margin-top: 0; }
	.support-banner li:nth-of-type(n+3) { margin-top: 3.2vw; }
	.support-banner li:nth-of-type(even) { margin-left: 2% !important; }

	.support-banner .image {
		margin-left: -5.333vw;
		margin-top: 14.933vw;
		overflow: hidden;
		width: calc(100% + 10.667vw);
	}

	.support-banner .banner.large {
		margin-left: auto;
		margin-right: auto;
		max-width: 62.933vw;
		width: 49%;
	}

	.support-banner .banner.large a {
		background-position: calc(100% - 4vw) center;
		background-size: 5.933vw auto;
		border-radius: 2.133vw;
		font-size: 3.333vw;
		height: 14.933vw;
		letter-spacing: 0;
		padding: 0 9.933vw 0 3.933vw;
	}
}

/* --------------------------------------------------------------------------------------
	News
--------------------------------------------------------------------------------------- */

.news-area { margin-top: 142px; }

.news-area section {
	float: left;
	max-width: 152px;
	width: 100%;
}

.news-area section h3 {
	color: #333;
	font-family: var(--font-UD-ShinGo-Bold);
	font-size: 4rem;
}

.news-area section ol { margin-top: 28px; }

.news-area section li a {
	border: 1px solid var(--border-color);
	border-radius: 100vw;
	display: block;
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 1.1rem;
	padding: 6px 0;
	text-align: center;
}

.news-area section li:nth-of-type(n+2) { margin-top: 16px; }

.news-area .news-list-top {
	float: right;
	max-width: 868px;
	width: 100%;
}

.news-area .news-list-top li { border-bottom: 1px solid var(--border-color); }
.news-area .news-list-top li:first-of-type { border-top: 1px solid var(--border-color); }

.news-area .news-list-top li a {
	background: url(../img/common/icon_arrow_small.svg) no-repeat right center;
	display: block;
	padding: 20px 0;
	transition: var(--transition);
}

.news-area .news-list-top li a p {
	padding: 0 40px 0 0;
}

@media (min-width: 1099px) {

	.news-area .news-list-top li a:hover {
		background-position: calc(100% - 10px) center;
		text-decoration: none;
	}

}

.news-area .news-list-top li a time {
	display: inline-block;
	font-family: var(--font-ubuntu);
	font-size: 1.419999rem;
	vertical-align: middle;
}

.news-area .news-list-top li a .cat {
	display: inline-block;
	margin-left: 20px;
	vertical-align: middle;
}

.news-area .news-list-top li a .cat span {
	border-radius: 100vw;
	color: #fff;
	display: inline-block;
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 1rem;
	min-width: 100px;
	padding: 4px;
	text-align: center;
	vertical-align: middle;
}

.news-area .news-list-top li a .cat span:nth-of-type(n+2) { margin-left: 20px; }

.news-area .news-list-top li a .cat .blue { background-color: #387cbe; }
.news-area .news-list-top li a .cat .purple { background-color: #8d38be; }
.news-area .news-list-top li a .cat .pink { background-color: #e01868; }
.news-area .news-list-top li a .cat .green { background-color: #629846; }

.news-area .news-list-top li a p {
	font-size: 1.419999rem;
	margin-top: 12px;
}

.news-area .news-list-top .text-banner {
	margin-top: 42px;
	text-align: right;
}

@media (max-width: 1025px) {

	.news-area {
		margin-top: 11.333vw;
		padding-left: 5.333vw;
		padding-right: 5.333vw;
	}

	.news-area .news-list-top { max-width: 75%; }

	.news-area section {
		float: none;
		max-width: 100%;
		width: auto;
	}

	.news-area section h3 {
		font-size: 9.6vw;
		text-align: center;
	}

	.news-area section ol {
		font-size: 0;
		left: -2.667vw;
		margin-top: 2.733vw;
		position: relative;
		text-align: center;
		width: calc(100% + 2.667vw);
	}

	.news-area section li {
		display: inline-block;
		margin-left: 2.667vw;
	}

	.news-area section li a {
		font-size: 2.933vw;
		padding: 1.333vw 3.2vw;
	}

	.news-area .news-list-top {
		float: none;
		margin-top: 5.333vw;
		max-width: 100%;
	}

	.news-area .news-list-top li a {
		background-size: 2.933vw auto;
		padding: 5.333vw 6.933vw 5.333vw 0;
	}

	.news-area .news-list-top li a time {
		font-family: var(--font-UD-ShinGo-Bold);
		font-size: 3.733vw;
	}

	.news-area .news-list-top li a .cat { margin-left: 1.333vw; }

	.news-area .news-list-top li a .cat span {
		font-size: 2.933vw;
		min-width: inherit;
		padding: 1.333vw 3.2vw;
	}

	.news-area .news-list-top li a .cat span:nth-of-type(n+2) { margin-left: 3.2vw; }

	.news-area .news-list-top li a p {
		font-size: 3.733vw;
		margin-top: 3.2vw;
	}

	.news-area .news-list-top .text-banner { margin-top: 5.333vw; }
}

/* --------------------------------------------------------------------------------------
	会社概要・採用情報
--------------------------------------------------------------------------------------- */

.other-banner {
	background: url(../img/top/other_bg.jpg) no-repeat center center / cover;
	font-size: 0; /* 追加 */
	padding: 80px 0;
}

.other-banner .box { text-align: center; } /* 追加 */

@media (min-width: 1681px) {

	.other-banner { background-size: cover; }
}

.other-banner li {
	background-color: rgba(255, 255, 255, .961);
	border-radius: 20px;
	box-shadow: 0px 0px 32px 0px rgba(213, 213, 213, .46);
	display: inline-block; /* 追加 */
	max-width: 530px;
	width: 100%;
}

.other-banner li:nth-of-type(n+2) { margin-left: min(4%, 40px); } /* 追加 */

.other-banner li a {
	align-items: center;
	background: url(../img/common/icon_arrow.svg) no-repeat calc(100% - 36px) center;
	display: flex;
	font-family: var(--font-UD-ShinGo-Bold);
	font-size: 2.6rem;
	height: 222px;
	justify-content: center;
	position: relative;
	transition: var(--transition);
	width: 100%;
}

@media (min-width: 1099px) {

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

@media (max-width: 1060px) {

	.other-banner ol {
		padding-left: 5.333vw;
		padding-right: 5.333vw;
	}

	.other-banner li { max-width: 48%; }
}

@media (max-width: 768px) {

	.other-banner {
		background-image: url(../img/top/other_bg_sp.jpg);
		background-size: cover;
		padding: 11.733vw 0;
	}

	.other-banner li {
		border-radius: 2.667vw;
		float: none;
		max-width: 100%;
	}

	.other-banner li:nth-of-type(n+2) {
		margin-left: 0;
		margin-top: 4.267vw;
	}

	.other-banner li a {
		background-size: 6.933vw auto;
		font-size: 5.333vw;
		height: 24.333vw;
	}

}