@charset 'UTF8';

/* メインタイトル */
.inpage_maintitle {
	height: auto;
	background-color: #eef2ef;
}

.inpage_maintitle .wrap {
	padding: 80px 0;
}

@media screen and (max-width: 850px) {
	.inpage_maintitle .wrap {
		padding: 40px 20px;
	}
}

.inpage_maintitle .inpage_maintitle-img {
	padding: 30px;
	margin: 30px;
}

@media screen and (max-width: 850px) {
	.inpage_maintitle .inpage_maintitle-img {
		padding: 17px;
		margin: 11px;
	}
}

.inpage_maintitle .inpage_maintitle-txt {
	font-size: 3.4rem;
	font-weight: bold;
	position: relative;
	text-align: center;
	color: #00c49b;
}

@media screen and (max-width: 850px) {
	.inpage_maintitle .inpage_maintitle-txt {
		font-size: 2rem;
	}
}

.inpage_maintitle-content {
	font-size: 2.1rem;
	font-weight: bold;
	position: relative;
	padding: 40px;
	color: black;
}

@media screen and (max-width: 850px) {
	.inpage_maintitle-content {
		font-size: 1.5rem;
		font-weight: bold;
		position: relative;
		padding: 12px;
	}
}

.solutions {
	height: auto;
	padding: 0px 0px 50px 0px;
	background-color: #eef2ef;
}

.solutions .wrap {
	padding: 0 0;
}

.solutions .btn-location {
	text-align: center;
}

.solutions .btn-solution {
	display: inline-block;
	height: 20px;
	width: 80px;
	margin: 10px;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	box-shadow: 0px 2px #0093d7;
}

@media screen and (max-width: 850px) {
	.solutions .btn-solution {
		float: left;
	}
}

.solutions .btn-solution:hover {
	transform: scale(1.15);
	transition: 0.8s;
	box-shadow: 0px 0px;
}

.solutions .active {
	width: 100px;
	transition: 0.8s;
	background-color: #5cdb95;
	font-weight: bolder;
}

.solutions #header {
	font-size: 70px;
	text-align: center;
	color: #5cdb95;
	font-weight: bolder;
	text-shadow: 2px 2px #fff;
}

@media screen and (max-width: 850px) {
	.solutions #header {
		font-size: 40px;
	}
}

.solutions .column {
	width: 50%;
	float: left;
	padding: 5px;
}

@media screen and (max-width: 850px) {
	.solutions .column {
		width: 95%;
		float: left;
	}
}

.solutions .column2 {
	width: 30%;
	float: left;
	height: 85px;
	margin: 5px;
}

@media screen and (max-width: 850px) {
	.solutions .column2 {
		width: 46%;
		float: left;
		padding: 15px;
		height: 120px;
	}
}

@media screen and (max-width: 380px) {
	.solutions .column2 {
		width: 40%;
	}
}

.solutions .column2:hover .icon-size {
	transition: 0.6s;
	transform: scale(1.2);
}

.solutions .column2:hover .function_text {
	transition: 0.6s;
	color: #05386B;
	transform: scale(1.2);
}

.solutions .column3 {
	font-size: 20px;
	text-align: center;
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

.solutions .problem {
	text-align: center;
	background: linear-gradient(to right, #00c49b 55%, #49cb91);
	border-radius: 20px;
	margin: 15px;
	height: 590px;
	border-radius: 20px
}

@media screen and (max-width: 850px) {
	.solutions .problem {
		height: auto;
	}
}

.function_icon {
	margin: 15px;
	height: 240px;
	padding: 20px;
	padding-left: 30px;
	background-color: #fff;
	border-radius: 20px;
}

@media screen and (max-width: 850px) {
	.function_icon {
		height: 500px;
	}
}

.function_icon:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
		rgba(0, 0, 0, 0.19);
	transition: 0.5s;
}

.function_table_button {
	text-align: center;
}

#change-image {
	padding: 15px;
	max-height: 300px;
	width: auto;
}

#problem-title {
	font-size: 40px;
	text-align: center;
	font-weight: bolder;
	color: #fff;
	padding: 13px;
}

@media screen and (max-width: 850px) {
	#problem-title {
		font-size: 25px;
	}
}

#problem-detail {
	font-size: 25px;
	text-align: left;
	color: #fff;
	font-weight: bolder;
	padding: 30px;
}

@media screen and (max-width: 850px) {
	#problem-detail {
		font-size: 17px;
	}
}

.icon-size {
	width: auto;
	height: 65px;
	cursor: pointer;
}

.function_button {
	background: linear-gradient(to right, #00c49b 55%, #49cb91);
	border-radius: 100px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: CerebriSans-Regular, -apple-system, system-ui, Roboto,
		sans-serif;
	padding: 0px 40px;
	text-align: center;
	text-decoration: none;
	transition: all 250ms;
	border: 0;
	font-size: 25px;
	user-select: none;
	-webkit-user-select: none;
	box-shadow: 0px 2px #0093d7;
	touch-action: manipulation;
}

.function_button:hover {
	transform: scale(1.05);
	transition: 0.5s;
	background: #fff;
	color: #5cdb95;
	font-weight: bolder;
	background: #fff;
	box-shadow: 0px 0px;
}

#solutions_answer {
	margin: 15px;
	background-color: #fff;
	border-radius: 20px;
	height: 272.5px;
}

@media screen and (max-width: 850px) {
	#solutions_answer {
		height: 400px;
		margin-bottom: 20px;
		margin: 15px;
	}
}

#solutions_answer .highlight {
	color: rgb(255, 183, 5);
	font-size: 25px;
	font-weight: bolder;
}

@media screen and (max-width: 850px) {
	#solutions_answer .highlight {
		font-size: 20px;
	}
}

#solutions_answer .question {
	font-size: 35px;
	text-align: center;
	color: #5cdb95;
	font-weight: bolder;
	text-shadow: 2px 2px #eef2ef;
}

@media screen and (max-width: 850px) {
	#solutions_answer .question {
		font-size: 25px;
	}
}

#solutions_answer .answer {
	font-size: 20px;
	text-align: left;
	color: #5cdb95;
	font-weight: bolder;
	padding-left: 10px;
	padding-right: 10px;
}

@media screen and (max-width: 850px) {
	#solutions_answer .answer {
		font-size: 17px;
	}
}

.function_text {
	color: #5cdb95;
	font-weight: bolder;
	font-size: 14px;
	cursor: pointer;
}

#myNav a {
	position: fixed;
	transition: 0.3s;
	width: 40px;
	text-decoration: none;
	font-size: 19px;
	visibility: visible;
	font-weight: 1000;
	text-shadow: -1px 0px black;
	background-color: #004080;
	color: white;
	padding: 10px 52px 10px 12px;
	border-radius: 15px 0px 0px 15px;
	z-index: 1;
}

@media screen and (max-width: 850px) {
	#myNav a {
		position: fixed;
		transition: 0.3s;
		width: 40px;
		text-decoration: none;
		font-size: 13px;
		visibility: visible;
		font-weight: 1000;
		background-color: #004080;
		color: white;
		padding: 10px 42px 10px 12px;
	}
}

#section1 {
	top: 200px;
}

@media screen and (max-width: 850px) {
	#section1 {
		top: 153px;
	}
}

#myNav2 a {
	position: fixed;
	transition: 0.3s;
	width: 40px;
	text-decoration: none;
	font-size: 19px;
	visibility: visible;
	font-weight: 1000;
	text-shadow: -1px 0px black;
	background-color: #5cdb95;
	color: white;
	padding: 10px 52px 10px 12px;
	border-radius: 15px 0px 0px 15px;
	z-index: 1;
}

@media screen and (max-width: 850px) {
	#myNav2 a {
		position: fixed;
		transition: 0.3s;
		width: 40px;
		text-decoration: none;
		font-size: 13px;
		visibility: visible;
		padding-right: 52px;
		font-weight: 1000;
		text-shadow: -1px 0px black;
		background-color: #5cdb95;
		color: white;
		padding: 10px 42px 10px 12px;
	}
}

#section2 {
	top: 470px;
}

@media screen and (max-width: 850px) {
	#section2 {
		top: 375px;
	}
}

.banner_button:hover {
	background-color: #fff;
	color: #ff622d;
	box-shadow: 12px 12px 35px rgba(0, 0, 0, 0.18);
}

.freeTrial_banner {
	background-color:white;
	height: auto;
	text-align: center;
}

.freeTrial_banner .banner_h1 {
	font-size: 3.4rem;
	font-weight: bold;
	position: relative;
	color: black;
	margin: 20px;
}

@media screen and (max-width: 850px) {
	.freeTrial_banner .banner_h1 {
	font-size: 2rem;
	text-align: initial;
	}
}

#freeTrial_keyword {
	color: red;
	font-size: 5rem;
	/* 	background: linear-gradient(transparent 70%, #f1e70d 70%) !important; */
}

@media screen and (max-width: 850px) {
	#freeTrial_keyword {
	font-size: 3rem;
	}
}
.pricingSystem {
	height: auto;
	display: flex;
	background-color: white;
}

.tabContainer {
	width: 100%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	margin-top: 15px;
	background-color: #eef2ef;
	border-radius: 15px 15px 15px 15px;
	transition: 0.8s;
	border-width: 0ex 0ex 7ex;
	border-color: #5cdb95;
	border-style: solid;
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

@media screen and (max-width: 850px) {
	.tabContainer {
		width: 80%;
	}
}

.tabContainer .buttonContainer {
	height: 20%;
}

.plan_top {
	height: 20%;
	background-color: #5cdb95;
	border-radius: 15px 15px 0px 0px;
}

@media screen and (max-width: 850px) {
	.tabContainer .buttonContainer {
		height: 10%;
	}
}

.tabContainer .buttonContainer .priceTab {
	width: 50%;
	height: 100%;
	float: left;
	border: none;
	padding: 10px;
	cursor: pointer;
	color: white;
	font-size: 30px;
	font-weight: bold;
}

@media screen and (max-width: 850px) {
	.tabContainer .buttonContainer .priceTab {
		font-size: 20px;
	}
}

.tabContainer .buttonContainer #leftTab {
	background-color: #5cdb95;
	border-radius: 15px 0px 0px 0px;
}

.tabContainer .buttonContainer #rightTab {
	background-color: #004080;
	border-radius: 0px 15px 0px 0px;
}

.tabContainer .buttonContainer #leftTab:hover {
	background-color: orange;
	color: white;
}

.tabContainer .buttonContainer #rightTab:hover {
	background-color: orange;
	color: white;
}

.emptySpace {
	background-color: white;
	height: 100px;
}

.tabContainer .planContainer {
	width: 100%;
	padding: 15px;
}

.tabContainer .planContainer .container {
	width: 25%;
	height: auto;
	padding: 15px;
	float: left;
}

@media screen and (max-width: 1050px) {
	.tabContainer .planContainer .container {
		width: 50%;
		height: auto;
		padding: 15px;
		float: left;
	}
}

@media screen and (max-width: 850px) {
	.tabContainer .planContainer .container {
		width: 100%;
		height: auto;
		padding: 15px;
		float: left;
	}
}

.tabContainer .planContainer .container .plan {
	background-color: white;
	height: auto;
	border-radius: 15px 15px 15px 15px;
	text-align: center;
}

.bottom-container {
	text-align: left;
}

.btn_freeTrial {
	background: orange;
	border-radius: 100px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	padding: 0px 20px;
	text-align: center;
	text-decoration: none;
	transition: all 250ms;
	border: 0;
	font-size: 20px;
	user-select: none;
	-webkit-user-select: none;
	box-shadow: 0px 2px #0093d7;
	touch-action: manipulation;
	margin: 15px;
}

.btn_freeTrial:hover {
	transform: scale(1.05);
	transition: 0.5s;
	background: #0093d7;
	color: orange;
	font-weight: bolder;
	box-shadow: 0px 0px;
}

.btn_register {
	background: #004080;
	border-radius: 100px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	padding: 0px 20px;
	text-align: center;
	text-decoration: none;
	transition: all 250ms;
	border: 0;
	font-size: 20px;
	user-select: none;
	-webkit-user-select: none;
	box-shadow: 0px 2px #0093d7;
	touch-action: manipulation;
	margin: 15px;
	width: 175px;
}

.btn_register:hover {
	transform: scale(1.05);
	transition: 0.5s;
	background: #fff;
	color: #004080;
	font-weight: bolder;
	box-shadow: 0px 0px;
}


.btn_plan {
	background: orange;
	border-radius: 100px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	padding: 0px 20px;
	text-align: center;
	text-decoration: none;
	transition: all 250ms;
	border: 0;
	font-size: 20px;
	user-select: none;
	-webkit-user-select: none;
	box-shadow: 0px 2px #0093d7;
	touch-action: manipulation;
	margin: 10px;
}

.btn_plan:hover {
	transform: scale(1.05);
	transition: 0.5s;
	background: #0093d7;
	color: orange;
	font-weight: bolder;
	box-shadow: 0px 0px;
}

/* .btn_inquiry { */
/* 	background: #004080; */
/* 	border-radius: 100px; */
/* 	color: #fff; */
/* 	cursor: pointer; */
/* 	display: inline-block; */
/* 	padding: 0px 40px; */
/* 	text-align: center; */
/* 	text-decoration: none; */
/* 	transition: all 250ms; */
/* 	border: 0; */
/* 	font-size: 25px; */
/* 	user-select: none; */
/* 	-webkit-user-select: none; */
/* 	box-shadow: 0px 2px #0093d7; */
/* 	touch-action: manipulation; */
/* 	margin: 15px; */
/* } */

.btn_inquiry:hover {
	transform: scale(1.05);
	transition: 0.5s;
	background: #0093d7;
	color: orange;
	font-weight: bolder;
	box-shadow: 0px 0px;
}

.employeeNo {
	font-size: 25px;
	font-weight: 600;
	color: white;
}

.plan_price {
	font-size: 25px;
	font-weight: 600;
}

.movingTruck img {
	width: 154px;
}

@media screen and (max-width: 850px) {
	.movingTruck img {
		visibility: hidden;
	}
}

.movingTruck {
	position: relative;
	animation: example 27s infinite;
}

@keyframes example {
 0% {
    transform: translateX(100%);
  }
  55% {
    transform: translateX(55%);
  }
  100% {
        transform: translateX(-15%);
  }
}

.truckSection {
	background-color: #eef2ef;
	overflow: hidden;
}

@media screen and (max-width: 850px) {
	.truckSection {
		visibility: hidden;
	}
}

.implementFlowContainer {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
    margin-bottom: 50px;
	
}

@media screen and (max-width: 850px) {
	.implementFlowContainer {
		flex-direction: column;
		padding : 35px;
	}
}

.flowStep {
	background-color: #eef2ef;
	width: 22.3%;
	margin: 5px;
	height: auto;
	border-radius: 15px 15px 15px 15px;
	box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

@media screen and (max-width: 850px) {
	.flowStep {
		width: 100%;
		margin: 5px;
		padding: 0 30px;
	}
}

.banner_textContainer {
	text-align: left;
}

@media screen and (max-width: 850px) {
	.banner_textContainer {
		padding: 30px;
	}
}

.stepTitle {
	font-size: 2.4rem;
	font-weight: bold;
	position: relative;
	color: black;
}

.titleTextbox {
	height: 20%;
}

.arrow_img {
	height: 50px;
	width: 30px;
	margin-top: auto;
	margin-bottom: auto;
}

@media screen and (max-width: 850px) {
	.arrow_img {
		visibility: hidden;
	}
}

/* 運用開始ステップ */
#flowStep4 {
	background: linear-gradient(to right, #00c49b 55%, #49cb91);
}

#flowStep4 .stepTitle {
	color: white;
	font-size: 3.8rem;
}

.planImage {
	padding: 15px;
	margin: 10px;
	max-height: 150px;
	
}

.plan_image{
	height: 100px;
}

.customerReview {
	height: auto;
}

.case-section {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.case {
  width: 45%;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-align: center;
  overflow: hidden;
  background-color: #eef2ef;
  transition: transform 0.3s ease-in-out;
  border-radius: 15px 15px 15px 15px;
}

.case2 {
  width: 48.15%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
/*     border-radius: 20px; */
    background-color: #ffffff;
    margin-bottom: 5rem;
    overflow: hidden;
    box-shadow: 3px 3px 6px rgb(0 0 0 / 10%);
    cursor: pointer;
}


.case:hover {
    transform: scale(1.05);
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

@media screen and (max-width: 850px) {
	.case {
		width: 100%;
		margin-bottom: 30px;
	}
}


.case_image img {
  width: 100%;
  height: auto;
}

.case_title {
  color: #333;
  font-size: 1.2em;
  margin-top: 10px;
}

.case_description {
  color: #666;
  font-size: 1em;
  margin-top: 5px;
}

.indexCase_head_title_large {
	font-size: 56px;
	display: block;
    font-family: 'メイリオ', 'Meiryo', sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.indexCase_head_title {
    width: 326px;
    line-height: 1.2;
    text-align: left;
    margin-top: 15px;
    margin-bottom: 15px;
}

.indexCase_head_title2 {
    width: auto;
    line-height: 1.2;
    text-align: left;
    margin-top: 15px;
    margin-bottom: 15px;
}

.indexCase_head_title_small {
    margin: 8px 0 0;
    font-size: 17px;
    display: block;
    font-weight: 700;
    letter-spacing: 0.12em;
}