@charset "UTF-8";

/* 修改 swiper 的样式 */
.swiper-button-prev, .swiper-button-next {
    width: 48px !important;
    height: 48px !important;
    border: 4px solid #9277F7;
    border-radius: 50%;
    background-color: #F2F3F5;
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper-button-prev {
    left: -128px !important;
}
.swiper-button-next {
    right: -128px !important;
}
.swiper-button-prev::after, .swiper-button-next::after {
	content: '' !important;
  	width: 16px;
  	height: 16px;
  	border-top: 4px solid #9277F7;
  	border-left: 4px solid #9277F7;
}
.swiper-button-prev::after {
  	transform: rotate(-45deg);
	margin-left: 6px;
}
.swiper-button-next::after {
 	transform: rotate(-225deg);
	margin-right: 6px;
}
.swiper-pagination {
	top: calc(100% + 16px) !important;
	/* bottom: -40px !important; */
}
.swiper-pagination-bullet {
	width: 12px !important;
	height: 12px !important;
}
.swiper-pagination-bullet-active {
	background-color: #9277F7 !important;
}

/* 首页 */
.section-banner {
	position: relative;
	overflow: hidden;
	margin-bottom: 16px;
}
.slider {
    position: relative;
    overflow: hidden;
}
.slider li .img {
  background-position: 50% bottom;
  background-repeat: no-repeat;
  background-size: cover;
  height: 480px;
  transform-origin: center top;
  transform: scale(1.15);
  transition: 5s transform ease-out;
}
.slider li.slick-active .img {
	transform: scale(1);
}
.slider li.s-01 .img { background-image: url("../images/home/banner_bg.jpg"); }
.slider li.s-02 .img { background-image: url("../images/home/banner_bg.jpg"); }

.section-banner .container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 100%;
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.section-banner .page-title {
	font-size: 4.8rem;
	font-weight: 600;
	letter-spacing: 4px;
	text-shadow: 3px 4px 8px #1D2129;
}
.section-banner .page-subtitle {
	font-size: 2.4rem;
	font-weight: 600;
	margin: 24px 0 32px 0;
	text-shadow: 3px 4px 8px #1D2129;
}
.section-container {
	background-color: #FFFFFF;
	padding: 32px 0 24px 0;
	width: 100%;
}
.section-container--gray {
	background-color: #F2F3F5;
}
.section-title {
	font-size: 3.6rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 24px;
}
.section-subtitle {
	font-size: 2.4rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 16px;
	color: #4E5969;
}
.section-text {
	font-weight: 600;
	text-align: center;
	margin-bottom: 16px;
	width: 75%;
	margin: 0 auto;
	color: #4E5969;
}
.card-container {
	display: flex;
	align-items: stretch;
	gap: 12px;
	margin: 16px 0;
	flex-wrap: wrap;
}
.card {
	padding: 16px;
	border-radius: 8px;
	background-color: #FFFFFF;
	position: relative;
	min-height: 160px;
	flex: 1;
}
.card.left::after, .card.right::before {
	content: '';
	position: absolute;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}
.card.left::after {
  	background: #FFFFFF;
  	right: -24px;
  	z-index: 999;
}
.card.right::before {
  	background: #F2F3F5;
  	left: -5px;
  	z-index: 998;
}
.card-pink, .card-pink.left::after {
	background-color: #F1C3D5;
}
.card-cyan {
	background-color: #E2ECF9;
}
.card-cyan.right::before {
  	background: #FFFFFF;
}
.card-gray {
	background-color: #F2F3F5;
}

/* 業界の在庫管理現状 */
.current-situation-card {
	display: flex;
	align-items: center;
	flex-direction: column;
	width: calc(25% - 16px);
	margin: 8px;
	padding: 8px 16px 16px 16px;
	background-color: #F2F3F5;
	border-radius: 8px;
	transition: all 1s ease !important;
}
.current-situation-card:hover {
	background-color: #E2ECF9;
	transform: translateY(-12px) !important;
}
.current-situation-title {
	margin-top: 4px;
	font-size: 1.8rem;
	color: #4E5969;
	text-align: center;
	font-weight: 600;
}

/* SmartZaiko 在庫管理システム特徴 */
#section-system-feature .card.left {
	max-width: 240px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.system-feature-title {
	margin-top: 4px;
	font-size: 2rem;
	color: #4C21EA;
	text-align: center;
	font-weight: 600;
}
#section-system-feature ul {
	padding-left: 64px;
	width: 50%;
}
#section-system-feature ul li {
	margin-bottom: 12px;
	padding-left: 32px;
	background: url(../images/home/icon_check_mark.png) left top no-repeat;
	background-size: 24px 24px;
	padding-top: 1px;
}
#section-system-feature ul li:last-child {
	margin-bottom: 0px;
}
#section-system-feature .card:hover,
#section-system-feature .card.left:hover::after {
	background-color: #E2ECF9;
}

/* このような「困りごと」は、スマート在庫管理システムが解決します!! */
.system-solved-title {
	font-size: 2rem;
	font-weight: 600;
	background: left top no-repeat;
	background-size: 32px 32px;
	padding-left: 38px;
	padding-top: 2px;
	margin-bottom: 12px;
}
.hand {
	background-image: url(../images/home/icon_hand.png);
}
.desktop {
	background-image: url(../images/home/icon_desktop.png);
}
.clock {
	background-image: url(../images/home/icon_clock.png);
}
.plane {
	background-image: url(../images/home/icon_plane.png);
}
.warning {
	background-image: url(../images/home/icon_warning.png);
}
.convert {
	background-image: url(../images/home/icon_convert.png);
}
.search {
	background-image: url(../images/home/icon_search.png);
}
.document {
	background-image: url(../images/home/icon_document.png);
}
.operation {
	background-image: url(../images/home/icon_operation.png);
}
.ticket {
	background-image: url(../images/home/icon_ticket.png);
}
.chart {
	background-image: url(../images/home/icon_chart.png);
}
.security {
	background-image: url(../images/home/icon_security.png);
}
#section-system-solved ul li {
	margin-bottom: 8px;
	padding-left: 39px;
	background-size: 24px 24px;
}
#section-system-solved ul li:last-child {
	margin-bottom: 0px;
}
#section-system-solved .card.left ul li {
	background: url(../images/home/icon_exclamation_mark.png) left 4px top no-repeat;
}
#section-system-solved .card.right ul li {
	background: url(../images/home/icon_check_mark.png) left 5px top no-repeat;
}
#section-system-solved .card.left:hover,
#section-system-solved .card.left:hover::after {
	background-color: #F9A6C6;
}
#section-system-solved .card.right:hover {
	background-color: #C2DDFF;
}

/* システム構成 */
#section-system-config .card-container {
	margin-bottom: 32px;
}
#section-system-config .card-container:last-child {
	margin-bottom: 16px;
}
#section-system-config .card {
	margin-left: 64px;
	padding-left: 80px;
}
#section-system-config .card:hover {
	background-color: #E2ECF9;
}

#section-system-config .card-container .card:first-child {
	margin-right: 96px;
}
#section-system-config .system-config-icon {
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 128px;
	height: auto;
}
.system-config-title {
	font-size: 2.2rem;
	font-weight: 600;
}
.system-config-subtitle {
	color: #86909C;
	margin: 4px 0 12px 0;
}
#section-system-config ul li {
	list-style: initial;
	list-style-position: inside;
	padding-left: 4px;
}

/* 導入後の運用流れ */
#section-flow .card {
	width: calc(25% - 9px);
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex-direction: column;
	padding-top: 12px;
	padding-bottom: 22px;
}
#section-flow .card::after, #section-flow .card::before {
	content: '';
	position: absolute;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

#section-flow .card:nth-child(1)::before,
#section-flow .card:nth-child(2)::before,
#section-flow .card:nth-child(3)::before,
#section-flow .card:nth-child(4)::before {
  	background: #FFFFFF;
  	left: -5px;
  	z-index: 998;
}
#section-flow .card:nth-child(1)::after,
#section-flow .card:nth-child(2)::after,
#section-flow .card:nth-child(3)::after,
#section-flow .card:nth-child(4)::after {
  	background: #F2F3F5;
  	right: -24px;
  	z-index: 999;
}
#section-flow .card:nth-child(5)::before,
#section-flow .card:nth-child(6)::before,
#section-flow .card:nth-child(7)::before,
#section-flow .card:nth-child(8)::before {
	background: #F2F3F5;
  	left: 8px;
  	z-index: 999;
}
#section-flow .card:nth-child(5)::after,
#section-flow .card:nth-child(6)::after,
#section-flow .card:nth-child(7)::after,
#section-flow .card:nth-child(8)::after {
  	background: #FFFFFF;
  	right: -36px;
  	z-index: 998;
}
#section-flow .card:nth-child(4)::after,
#section-flow .card:nth-child(8)::after {
	left: 50%;
}
#section-flow .card:nth-child(4)::after {
	top: calc(100% - 8px);
}
#section-flow .card:nth-child(8)::after {
	top: -4px;
}
#section-flow .card:nth-child(1)::before,
#section-flow .card:nth-child(5)::before {
	display: none;
}

#section-flow .card:hover,
#section-flow .card:nth-child(1):hover::after,
#section-flow .card:nth-child(2):hover::after,
#section-flow .card:nth-child(3):hover::after,
#section-flow .card:nth-child(4):hover::after,
#section-flow .card:nth-child(5):hover::before,
#section-flow .card:nth-child(6):hover::before,
#section-flow .card:nth-child(7):hover::before,
#section-flow .card:nth-child(8):hover::before {
	background-color: #E2ECF9;
}

.section-flow-icon {
	width: 128px;
	height: auto;
}
.section-flow-title {
	font-weight: 600;
	text-align: center;
}
#section-flow .step {
	position: absolute;
	left: 12px;
	top: 4px;
	font-family: Impact;
	font-size: 2.2rem;
	color: #7856F7;
}

/* システム機能紹介 */
#section-function {
	padding-bottom: 56px;
}
#section-function .left-box {
	flex: 1;
}
#section-function .right-box {
	width: 320px;
	margin-left: 40px;
	display: flex;
	flex-direction: column;
}
.section-function-card {
	background-color: #FFFFFF;
	padding: 8px 10px;
	border-radius: 8px;
	margin-bottom: 8px;
	font-weight: 600;
}
.section-function-card-title {
	color: #7856F7;
	margin-bottom: 4px;
}
.section-function-card:last-child {
	margin-bottom: 0px;
}
.section-function-text {
	font-size: 2rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 24px;
}
.section-function-image {
	height: 500px;
	width: auto;
	margin: 0 auto;
	display: block;
}

/* Q ＆ A 模块 */
.section-qa-text {
	font-size: 2.4rem;
	font-weight: 600;
	padding-left: 48px;
	padding-top: 2px;
	background: url(../images/home/icon_question.png) left top no-repeat;
	background-size: 36px;
	margin-bottom: 8px;
}
.answer {
	background-image: url(../images/home/icon_answer.png);
	margin-bottom: 24px;
}

/* お問い合わせ */
.contact-title {
	font-size: 3.6rem;
	font-weight: 600;
	text-align: center;
	margin: 32px 0 64px 0;
}
.contact-container {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}
.contact-left {
	width: calc(40% - 40px);
}
.contact-left img {
	width: 200px;
	height: auto;
	margin: 32px auto 0 auto;
	display: block;
}
.contact-form {
	width: 60%;
}

/* 404页面 */
.error-page {
	margin: 60px auto 0 auto;
	text-align: center;
}
.error-page .error-title {
	font-size: 2.4rem;
	margin-bottom: 48px;
	font-weight: bold;
}
.error-page .error-text {
	margin-bottom: 24px;
}
.error-page ul {
	margin-bottom: 32px;
}
.error-page ul li {
	text-align: center;
}

@media only screen and (max-width: 1024px) {
	/* 首页 banner */
	.section-banner {
		height: 360px;
	}
	.slider li .img {
		height: 360px;
	}
}

@media only screen and (max-width: 1000px) {
	/* システム機能紹介 */
	#section-function .right-box {
		margin-left: 16px;
	}
	.section-function-image {
		width: 100%;
		height: auto;
	}
}

@media only screen and (max-width: 900px) {
	#section-system-feature ul {
		padding-left: 32px;
	}
}

@media only screen and (max-width: 767px) {
	/* 手机端隐藏 swiper 左右切换按钮 */
	.swiper-button-prev, .swiper-button-next {
		display: none !important;
	}
	/* 首页 banner */
	.section-banner {
		height: 240px;
	}
	.slider li .img {
		height: 240px;
	}
	.section-banner .page-title {
		font-size: 2.4rem;
		letter-spacing: 2px;
	}
	.section-banner .page-subtitle {
		font-size: 1.6rem;
		font-weight: normal;
		margin: 8px 0 16px 0;
	}
	.section-container {
		padding: 24px 0 16px 0;
	}
	.section-title {
		font-size: 2rem;
		margin-bottom: 16px;
	}
	.section-subtitle {
		font-size: 1.6rem;
	}
	.section-text {
		font-weight: normal;
		width: 100%;
	}
	.card.right {
		padding-top: 32px;
	}
	.card.left::after, .card.right::before {
		top: calc(100% - 4px);
		left: 50%;
	}
	.card.right::before {
		left: 50%;
		top: 0px;
	}
	/* 業界の在庫管理現状 */
	.current-situation-card {
		width: calc(50% - 16px);
	}
	/* SmartZaiko 在庫管理システム特徴 */
	#section-system-feature .card, #section-system-solved .card {
		width: 100%;
		flex: none;
		max-width: 100% !important;
	}
	#section-system-feature ul {
		padding-left: 0px;
		padding-right: 8px;
	}
	/* このような「困りごと」は、スマート在庫管理システムが解決します!! */
	.system-solved-title {
		font-size: 1.8rem;
	}
	/* システム構成 */
	#section-system-config .card-container {
		margin-bottom: 12px;
	}
	#section-system-config .card {
		margin-right: 0;
		margin-left: 48px;
		width: calc(100% - 48px);
		flex: none;
	}
	#section-system-config .system-config-icon {
		width: 96px;
	}
	.system-config-title {
		font-size: 1.8rem;
	}
	/* 導入後の運用流れ */
	#section-flow .card {
		width: 100%;
	}
	#section-flow .card::after {
		background: #F2F3F5 !important;
		z-index: 999 !important;
		left: 50% !important;
		top: calc(100% - 6px) !important;
	}
	#section-flow .card:hover:after {
		background-color: #E2ECF9 !important;;
	}
	#section-flow .card::before {
		background: #FFFFFF !important;
		z-index: 998 !important;
		left: 50% !important;
		top: -4px !important;
	}
	#section-flow .card:nth-child(5)::before {
		display: block;
	}
	#section-flow .card:nth-child(5)::after {
		display: none;
	}
	#section-flow .card:nth-child(1) {
		order: 1;
	}
	#section-flow .card:nth-child(2) {
		order: 2;
	}
	#section-flow .card:nth-child(3) {
		order: 3;
	}
	#section-flow .card:nth-child(4) {
		order: 4;
	}
	#section-flow .card:nth-child(5) {
		order: 8;
	}
	#section-flow .card:nth-child(6) {
		order: 7;
	}
	#section-flow .card:nth-child(7) {
		order: 6;
	}
	#section-flow .card:nth-child(8) {
		order: 5;
	}
	.section-flow-icon {
		width: 96px;
	}
	/* システム機能紹介 */
	.section-function-text {
		font-size: 1.4rem;
	}
	/* Q ＆ A 模块 */
	.section-qa-text {
		font-size: 1.4rem;
		padding-left: 32px;
		padding-top: 1px;
		background-size: 24px;
	}
	.answer {
		margin-bottom: 20px;
	}
	/* お問い合わせ */
	.contact-title {
		font-size: 2rem;
		margin-bottom: 16px;
	}
	.contact-container {
		gap: 16px;
	}
	.contact-left, .contact-form {
		width: 100%;
	}
	.contact-left p:last-child {
		display: none;
	}
	/* 404页面 */
	.error-page .error-title {
		font-size: 1.8rem;
	}
}

@media only screen and (max-width: 640px) {
	/* システム機能紹介 */
	#section-function .left-box {
		width: 100%;
	}
	#section-function .right-box {
		display: none;
		/* width: 100%;
		margin-left: 0px; */
	}
}

@media screen and (max-width: 530px) {
	/* 首页 banner */
	.section-banner {
		height: 190px;
	}
	.slider li .img {
		height: 190px;
	}
	/* 業界の在庫管理現状 */
	.current-situation-card {
		width: 100%;
	}
	.current-situation-card:last-child {
		margin-bottom: 0px;
	}

	/* SmartZaiko 在庫管理システム特徴 */
	#section-system-feature ul {
		width: 100%;
		margin-bottom: 8px;
	}
}

@media screen and (max-width: 414px) {
	/* 首页 banner */
	.section-banner {
		height: 160px;
	}
	.slider li .img {
		height: 160px;
	}
	.section-banner .page-title {
		font-size: 2rem;
	}
	.section-banner .page-subtitle {
		font-size: 1.4rem;
	}
}