@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400&display=swap');
body {
	overflow-x: hidden;
}
h2 {
	font-size: 2.4rem;
	line-height: 1.6;
	letter-spacing: .16em;
	text-align: left;
	color: #fff;
	margin-bottom: 16px;
}
h3 {
	font-size: 2rem;
	font-weight: 500;
	text-align: left;
	letter-spacing: .16em;
	margin-bottom: 16px;
}
h3:before {
	content: '▶';
	margin-right: 8px;
}
p {
	font-size: 1.6rem;
	line-height: 1.6;
	letter-spacing: .16em;
}
.contents {
	position: relative;
}
.breadcrumb {
	margin-top: -40px;
}

/*SP Layout
===================================*/
@media all and (max-width: 768px) {
	h2 {
		font-size: 2.2rem;
	}
	h3:before {
		margin-right: 4px;
	}
}

/*PC Layout
===================================*/
@media all and (min-width: 769px) {
	.spElement {
		display: none !important;
	}
}


/* main
------------------------------------------------------ */
.main-lead {
	max-width: 1480px;
	margin: 80px auto;
	position: static;
}
.page-ttl {
	font-weight: 400;
	font-size: 2.6rem;
	letter-spacing: .16em;
	line-height: 1.6;
	color: #333;
	position: relative;
	left: 100px;
	bottom: 45%;
}
.page-ttl span {
	font-size: 7.2rem;
	line-height: 1.6;
	display: block;
	background: linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
	background: -webkit-linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.page-ttl span::after {
	content: "";
	display: block;
	width: 30vw;
	max-width: 400px;
	height: 2px;
	position: absolute;
	background: -webkit-linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
	-webkit-text-fill-color: transparent;
	margin-top: 16px;
}
.page-main-img {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
}
.page-main-img img {
	height: 300px;
	object-fit: cover;
	object-position: 0 20%;
}
.main-link-bg {
	padding: 40px 0;
	background: url(images/main-bg.png) no-repeat;
	background-size: cover;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
}
.main-link {
	width: 90%;
	margin: 0 auto;
}
.main-link-txt-wrap {
	width: 38%;
}
.main-link-ttl {
	font-size: 2.4rem;
	margin: 0 auto 20px;
}
.main-link-wrap {
	display: flex;
	flex-wrap: wrap;
	width: 58%;
	justify-content: space-between;
}
.main-link-item {
	display: flex;
	justify-content: space-between;
	background: #fff;
	margin-bottom: 10px;
	align-items: center;
	border-bottom: 1px solid #333;
}
.main-link-item-img {
	width: 45%;
}
.main-link-item-txt {
	width: 55%;
	padding: 0 20px;
}
.floating .main-link-item {
	background: none;
}
.floating .main-link-item a {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/*SP Layout
===================================*/
@media all and (max-width: 768px) {
	main {
		margin-top: 100px;
	}
	.main-lead {
		margin: 60px auto;
	}
	.page-ttl {
		left: 0;
		font-size: 2.2rem;
	}
	.page-ttl span {
		display: block;
		font-size: 4rem;
	}
	.page-ttl span::after {
		width: 60vw;
	}
	.page-main-img img {
		height: 120px;
		object-position: 0 20%;
	}
	.main-link-bg {
		margin-bottom: 0;
	}
	.main-link-txt-wrap {
		width: auto;
	}
	.main-link-ttl {
		font-size: 2.2rem;
		margin-bottom: 16px;
	}
	.main-link-txt {
		margin-bottom: 16px;
	}
	.main-link-wrap {
		width: auto;
	}
	.main-link-wrap a {
		width: 100%;
	}
	.main-link-item-img {
		width: 30%;
	}
	.main-link-item-txt {
		width: 70%;
		font-size: 1.4rem;
		font-weight: 400;
		padding-left: 16px;
	}
	#sec01, #sec02, #sec03, #sec04, #sec05, #sec06, #sec07 {
		padding-top: 80px;
		margin-top: -80px;
	}
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 769px) {
	.main-link {
		display: flex;
		justify-content: space-between;
		max-width: 1280px;
	}
	.main-link-item {
		align-items: center;
	}
	.main-link-wrap a {
		width: 49%;
		transition: .5s;
	}
	.main-link-wrap a:hover .main-link-item {
		background: #333;
		transition: .5s;
		opacity: 1!important;
	}
	.main-link-wrap a:hover .main-link-item-txt {
		color: #fff;
		transition: .5s;
		opacity: 1!important;
	}
	a.main-link-item-link:hover {
		background: #333!important;
		transition: .5s;
		opacity: 1!important;
	}
	main {
		margin-top: 200px;
	}
	#sec01, #sec02, #sec03, #sec04, #sec05, #sec06, #sec07 {
		padding-top: 120px;
		margin-top: -240px;
	}
}


/* common
------------------------------------------------------ */
.section-bg {
	background: url(images/main-bg.png) no-repeat;
	background-size: cover;
	width: 100vw;
	margin: 240px calc(50% - 50vw) 0;
	padding-top: 10px;
	padding-bottom: 60px;
}
.sec-bg01, .sec-bg03, .sec-bg05 {
	background: url(images/sub-bg01.png) no-repeat;
	background-size: cover;
	background-position: 90% center;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	position: relative;
	padding: 70px 0;
}
.sec-bg02, .sec-bg04, .sec-bg06 {
	background: url(images/sub-bg02.png) no-repeat;
	background-size: cover;
	background-position: 10% center;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	position: relative;
	padding: 70px 0;
}
.sec-ttl-tag {
	background: #333;
	color: #fff;
	display: inline-block;
	padding: 4px 10px;
	margin-bottom: 16px;
	max-width: 40%;
}
.sec-description {
	color: #fff;
	width: 40%;
}
.sec-ttl-img-slider {
	position: absolute;
	width: 40%;
	bottom: 0;
	right: 15%;
	max-width: 750px;
}
.sec-ttl-wrap {
	width: 90%;
	margin: 0 auto;
	max-width: 1080px;
}
.sec-ttl01,.sec-ttl02,.sec-ttl03,.sec-ttl04,.sec-ttl05,.sec-ttl06 {
	width: 40%;
}
.sec-ttl01:before {
	content: '';
	background: url(images/online-icon.png) no-repeat;
	background-size: contain;
	background-position: center;
	width: 40px;
	height: 40px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}
.sec-ttl02:before {
	content: '';
	background: url(images/remote-icon.png) no-repeat;
	background-size: contain;
	background-position: center;
	width: 40px;
	height: 40px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}
.sec-ttl03:before {
	content: '';
	background: url(images/video-icon.png) no-repeat;
	background-size: contain;
	width: 40px;
	height: 40px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}
.sec-ttl04:before {
	content: '';
	background: url(images/education-icon.png) no-repeat;
	background-size: contain;
	width: 40px;
	height: 40px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}
.point-img {
	margin-top: 30px;
}
.sec-bg01, .sec-bg02, .sec-bg03, .sec-bg04 {
	padding-top: 70px;
	margin-bottom: 40px;
}

/*SP Layout
===================================*/
@media all and (max-width: 768px) {
	.sec-bg01, .sec-bg03, .sec-bg02, .sec-bg04 {
		background: url(images/sub-bg-sp.png) no-repeat;
		background-size: cover;
		background-position: 0 100%;
		width: 100vw;
		margin: 0 calc(50% - 50vw);
		position: relative;
		padding: 40px 0 160px;
		margin-bottom: 40px;
	}
	.section-bg {
		padding-top: 1;
		padding-bottom: 40px;
		margin-top: 24px;
	}
	.sec-ttl-wrap {
		width: 80%;
	}
	.sec-ttl-tag {
		font-size: 1.4rem;
		padding: 4px 10px;
		margin-bottom: 8px;
		max-width: none;
	}
	.sec-ttl01,.sec-ttl02,.sec-ttl03,.sec-ttl04,.sec-ttl05,.sec-ttl06 {
		width: auto;
	}
	.sec-ttl01:before {
		width: 28px;
		height: 28px;
		margin-right: 8px;
	}
	.sec-ttl02:before {
		width: 28px;
		height: 28px;
		margin-right: 8px;
	}
	.sec-ttl03:before {
		width: 30px;
		height: 30px;
		margin-right: 8px;
	}
	.sec-ttl04:before {
		width: 30px;
		height: 30px;
		margin-right: 8px;
	}
	.sec-ttl05:before {
		width: 30px;
		height: 30px;
		margin-right: 8px;
	}
	.sec-description {
		width: auto;
	}
	.sec-ttl-img-slider {
		width: 70%;
		right: 0;
		left: 0;
		margin: auto;
		bottom: -10px;
	}
	.sec-ttl-img img {
		height: 160px;
		width: auto;
		margin: 0 auto;
	}
	.point-img {
		width: 60%;
	}
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 769px) {
}


/* function
------------------------------------------------------ */
.function-area {
	width: 90%;
	max-width: 1080px;
	margin: 24px auto;
}
.function-wrap {
	background-color: #fff;
	padding: 24px 40px;
	border: 1px solid #ccc;
}
.function-wrap ul {
	margin-left: 35px;
}
.function-txt {
	font-size: 1.6rem;
	line-height: 1.6;
	letter-spacing: .16em;
	margin-bottom: 8px;
	text-indent: -35px;
}
.function-txt:last-child{
	margin-bottom: 0;
}
.function-txt::before{
	content: '―';
	color: #659B59;
	margin-right: 16px;
}

/*SP Layout
===================================*/
@media all and (max-width: 768px) {
	.function-wrap {
		padding: 16px;
	}
}


/* feature
------------------------------------------------------ */
.feature-area {
	width: 90%;
	max-width: 1080px;
	margin: 24px auto;
}
.feature-wrap {
	background: #fff;
	border: 1px solid #ccc;
}
.feature-item {
	margin: 0 auto;
	padding: 16px 40px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
}
.feature-item:not(:last-child):after {
	content: '';
	background: #ddd;
	width: 93%;
	max-width: 1000px;
	height: 0.5px;
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}
.feature-point-txt {
	width: 88%;
}
.feature-point-num {
	font-size: 2.8rem;
	color: #659B59;
	margin-right: 24px;
}

/*SP Layout
===================================*/
@media all and (max-width: 768px) {
	.feature-point-num span {
		font-size: 3.2rem;
	}
	.feature-item {
		align-items: flex-start;
		padding: 16px;
	}
	.feature-point-num {
		font-size: 2.4rem;
		margin-right: 16px;
	}
	.feature-point-txt {
		width: 80%;
	}
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 769px) {
	.feature-item:hover {
		background: linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
		background: -webkit-linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
		transition : 1s;
	}
	.feature-item:hover .feature-point-num {
		color: #fff;
	}
	.feature-item:hover .feature-point-txt {
		color: #fff;
	}
}


/* enterprise
------------------------------------------------------ */
.enterprise-area {
	width: 90%;
	max-width: 1080px;
	margin: 24px auto;
}
.enterprise-wrap {
	background: #fff;
	display: flex;
	justify-content: space-between;
	padding: 24px 0;
	border: 1px solid #ccc;
}
.system-img {
	width: 65%;
	margin: 10px auto;
	max-width: 800px;
}
.enterprise-item {
	width: 33%;
	margin: 0 auto;
	padding: 30px 0;
	align-items: center;
}
/* .enterprise-point-txt {
	font-size: 1.2vw;
	line-height: 2vw;
	font-weight: 400;
}
.enterprise-point-num {
	color: #5C7D55;
	text-align: center;
	margin-right: 30px;
}
.enterprise-point-num span {
	display: block;
	font-size: 2vw;
}
.enterprise-icon {
	display: block;
	width: 35%;
	margin: 0 auto;
}
.enterprise-txt {
	display: block;
	text-align: center;
	font-size: 1.2vw;
	letter-spacing: .3rem;
} */

/*SP Layout
===================================*/
@media all and (max-width: 768px) {
	.enterprise-wrap {
		background: #fff;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.system-img {
		width: 90%;
		margin: 0 auto;
	}
	/* .enterprise-item {
		width: 48%;
		background: #fff;
		padding: 10px 0;
		margin: 0;
		margin-bottom: 10px;
	} */
	/* .enterprise-txt {
		font-size: 1.4rem;
	} */
}


/* category-link
------------------------------------------------------ */
.category-link-wrap {
	display: flex;
	width: 90%;
	max-width: 980px;
	margin: 0 auto;
}
.category-link-txt-wrap {
	background: #333;
	color: #fff;
	position: relative;
	padding: 40px 22px;
}
.category-link-txt span {
	display: block;
	font-size: 1.6rem;
	letter-spacing: .16em;
	margin-bottom: 4px;
}
.link-arrrow01 {
	width: 48px;
	height: 48px;
	margin-right: 0;
	margin-left: auto;
    transform: rotate(27deg);
}
.category-link-area {
	padding: 160px 0 80px;
}
.development-link {
	position: relative;
	color: #fff;
	border: 1px solid #fff;
	padding: 10px 30px;
	display: block;
	text-decoration: none;
	outline: none;
	transition: all 0.3s ease-in-out;
	width: 90%;
	max-width: 440px;
	padding: 14px 0;
	text-align: center;
	margin-bottom: 10px;
	background: linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
	background: -webkit-linear-gradient(-360deg, #9CC701 0%, #11540B 100%);
	margin: 160px auto 80px;
}
.development-link p:after {
	content: '';
	background: url(images/arrow.png) no-repeat;
	background-size: contain;
	width: 20px;
	height: 30px;
	position: absolute;
	right: 28px;
	top: 22px;
	display: inline-block;
}
.development-link p {
	text-align: center;
	font-size: 1.8rem;
	letter-spacing: .3rem;
	display: inline-block;
}
.development-link:hover {
	background: #333;
	color: #fff;
	border-color: transparent;
	opacity: 1;
}
.development-link::before, .development-link::after {
	content: '';
	position: absolute;
	border: solid #fff;
	width: 0;
	height: 0;
	transition: all 0.3s ease-in-out;
}
.development-link::before {
	top: 3px;
	left: 6px;
	border-width: 1px 0 0 0;
}
.development-link::after {
	bottom: 3px;
	right: 6px;
	border-width: 0 0 1px 0;
}
.development-link:hover::before, .development-link:hover::after {
	width: calc(10% + 50px);
	height: calc(10% + 20px);
	border-color: #fff;
}
.catalog-button {
	width: 600px;
	height: auto;
	display: block;
	margin: 120px auto;
}

/*SP Layout
===================================*/
@media print, screen and (max-width: 768px) {
	.category-link-wrap {
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}
	.category-link-item {
		width: 49%;
		margin-bottom: 10px;
	}
	.category-link-txt {
		font-size: 1.4rem;
	}
	.category-link-txt span {
		font-size: 1.2rem;
		margin-bottom: 0;
	}
	.link-arrrow01 {
		width: 30px;
		height: 30px;
	}
	.category-link-txt-wrap {
		padding: 16px;
	}
	.category-link-area {
		padding: 40px 0 0;
	}
	.development-link {
		margin-top: 30px;
	}
	.development-link {
		max-width: 90%;
		margin-bottom: 60px;
	}
	.breadcrumb {
		margin-top: 0;
	}
	.catalog-button {
		width: 100%;
		margin: 64px auto;
	}
}

/*PC Layout
===================================*/
@media print, screen and (min-width: 769px) {
	.category-link-item {
		position: relative;
		display: inline-block;
		text-align: center;
		text-decoration: none;
		transition: .3s;
		height: 460px;
		width: 33%;
	}
	.category-link-item:hover {
		color: #fff;
		opacity: 1;
	}
	.category-link-item::before {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 4;
		content: '';
		background: linear-gradient(-90deg, #9CC701 0%, #11540B 100%);
		background: -webkit-linear-gradient(-90deg, #9CC701 0%, #11540B 100%);
		transform-origin: left bottom;
		transform: scale(1, 0);
		transition: transform .3s;
	}
	.category-link-item:hover::before {
		transform-origin: left bottom;
		transform: scale(1, 1);
	}
	.category-link-item:hover .category-link-txt-wrap {
		z-index: 6;
		background: none;
		position: absolute;
		top: 30%;
	}
	.category-link-item:hover .link-arrrow01 {
		transform: rotate(27deg);
		margin: 20px auto;
	}
	.category-link-item:nth-child(2),.category-link-item:nth-child(4) {
		margin-top: -40px;
	}
	.category-link-item:hover .category-link-txt-wrap {
		width: 100%;
	}
}


/* following-link
------------------------------------------------------ */
.following-link {
	display: none;
	position: fixed;
	top: 40%;
	right: 0;
}
.following-link .main-link-wrap {
	flex-direction: column;
	margin-left: auto;
	width: 56%;
}
.following-link .main-link-wrap a {
	width: 100%;
	max-width: 500px;
}
.following-link .main-link-item {
	margin-bottom: 0;
}
.following-link .main-link-item-txt {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 1.1rem;
	line-height: 1.8rem;
}

@media screen and (min-width:768px) and ( max-width:1024px) {
	.page-ttl {
		left: 0;
	}
	.sec-ttl-img-slider {
		width: 36%;
		right: 10%;
	}
	.sec-ttl01, .sec-ttl02, .sec-ttl03, .sec-ttl04, .sec-ttl05, .sec-ttl06 {
		width: 50%;
	}
	.sec-description {
		width: 50%;
	}
	.sec-bg02 h2, .sec-bg02 .sec-ttl-tag, .sec-bg02 .sec-description {
		margin-left: 50px;
	}
	.following-link .main-link-wrap {
		display: none;
	}
}


.teikyou {
	margin-top: 20px;
	font-size: 1.4rem;
}


@media screen and (min-width:768px) and ( max-width:1400px) {
	.sec-ttl-wrap{
		width: 80%;
		max-width: 880px;
	}
	.sec-ttl-img-slider {
		right: 10%;
	}
}