@charset "UTF-8";
/* CSS Document */

/*==============================*/
/* リンク設定 */
/*==============================*/
#title01,
#title02,
#title03,
#title04{
	scroll-margin-top: 120px;
}


/*==============================*/
/* 概要 */
/*==============================*/
section.systemAbout{ position: relative;}
section.systemAbout::before{
	position: absolute; bottom: 0; left: 0;
	content: "";
	width: 720px;
	aspect-ratio: 725/505;
	background: url("/common/img/service/system/figure-system.svg");
	z-index: -1;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		section.systemAbout::before{
			position: absolute; bottom: 168px; left: 50%;
			transform: translateX(-50%);
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		section.systemAbout::before{
			position: absolute; bottom: 11%; left: 24px;
			width: calc(100% - 48px);
			max-width: 720px;
		}
	}

/*---------------------------------
   Title
---------------------------------*/
div.systemTitle h2{
	margin-bottom: 20px;
	color: #000;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.5em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.systemTitle h2{
			font-size: 24px;
			line-height: 1.5em;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.systemTitle h2{
			margin-bottom: 16px;
			font-size: 22px;
			line-height: 1.5em;
		}
	}

/*---------------------------------
   Content
---------------------------------*/
div.systemTitle div.systemContent{
	display: flex;
	gap: 48px;
	margin-bottom: 40px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.systemTitle div.systemContent{
			flex-direction: column;
			gap: 24px;
			margin-bottom: 504px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.systemTitle div.systemContent{
			flex-direction: column;
			gap: 16px;
			margin-bottom: 50vw;
		}
	}

/*-- 
------------------------- */
div.systemTitle div.systemContent div{
	flex: 1;
	min-width: 0;
}

/*-- 
------------------------- */
div.systemTitle div.systemContent ul{ flex: 0 0 352px;}
div.systemTitle div.systemContent ul li:not(:last-child){ margin-bottom: 8px;}

div.systemTitle div.systemContent ul li a{
	display: block;
	padding: 20px 18px 20px 18px;
	background: #ccc;
	border-radius: 8px;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0em;
	line-height: 1.414em;
}
div.systemTitle div.systemContent ul li:nth-child(1) a{ background: #3F9BC4;}
div.systemTitle div.systemContent ul li:nth-child(2) a{ background: #58A982;}
div.systemTitle div.systemContent ul li:nth-child(3) a{ background: #8A7DB8;}
div.systemTitle div.systemContent ul li:nth-child(4) a{ background: #DD8F4B;}
div.systemTitle div.systemContent ul li:nth-child(5) a{ background: #45A2A3;}
div.systemTitle div.systemContent ul li:nth-child(6) a{ background: #5F88B0;}

div.systemTitle div.systemContent ul li a:hover{ opacity: 0.8;}

div.systemTitle div.systemContent ul li a span{
	display: block;
	margin-bottom: 2px;
	opacity: 0.3;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3em;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0.01em;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.systemTitle div.systemContent ul{
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			flex: auto;
		}
		div.systemTitle div.systemContent ul li{ width: calc(calc(100% - 10px * 1) / 2);}
		div.systemTitle div.systemContent ul li:not(:last-child){ margin-bottom: 0px;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}



/*---------------------------------
	Text
---------------------------------*/
div.systemTitle div.systemText{
	width: min(640px,100%);
	margin-left: auto;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.systemTitle div.systemText{
			width: 100%;
			min-height: 136px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.systemTitle div.systemText{
			width: 100%;
		}
	}


/*==============================*/
/* Tilte */
/*==============================*/
div.systemServiceTitle{
	display: flex;
	align-items: center;
	gap: 36px;
	countercounter-reset: number 0;
}
div.systemServiceTitle div{	margin-bottom: 28px;}


	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.systemServiceTitle{
			flex-direction: column;
			gap: 0px;
			countercounter-reset: number 0;
		}
	}


/*==============================*/
/* SERVICE */
/*==============================*/
div.systemServiceContent div.systemDetail{
	display: flex;
	border-radius: 20px;
	box-shadow: 0 0 10px 10px rgb(0,0,0,0.02);
	counter-increment: number 1;
}
div.systemServiceContent div.systemDetail:not(:last-child){	margin-bottom: 24px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.systemServiceContent div.systemDetail{
			flex-direction: column;
			box-shadow: 0 0 10px 10px rgb(0,0,0,0.02);
		}
	}


/*---------------------------------
	Title
---------------------------------*/
div.systemServiceContent div.systemDetail div.systemDetailTitle{
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 0 0 440px;
	position: relative;
	padding: 0 40px;
	background: #ccc;
	border-radius: 20px 0 0 20px;
}
div.systemServiceContent div.systemDetail:nth-child(1) div.systemDetailTitle{ background: #3F9BC4;}
div.systemServiceContent div.systemDetail:nth-child(2) div.systemDetailTitle{ background: #58A982;}
div.systemServiceContent div.systemDetail:nth-child(3) div.systemDetailTitle{ background: #8A7DB8;}
div.systemServiceContent div.systemDetail:nth-child(4) div.systemDetailTitle{ background: #DD8F4B;}
div.systemServiceContent div.systemDetail:nth-child(5) div.systemDetailTitle{ background: #45A2A3;}
div.systemServiceContent div.systemDetail:nth-child(6) div.systemDetailTitle{ background: #5F88B0;}

div.systemServiceContent div.systemDetail div.systemDetailTitle::after{
	position: absolute; bottom: -36px; right: 8px;
	content: counter(number, decimal-leading-zero);
	color: #fff;
	font-size: 112px;
	font-weight: 600;
	font-family: 'Roboto', sans-serif;
	line-height: 1.3em;
	letter-spacing: -0.01em;
	opacity: 0.3;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.systemServiceContent div.systemDetail div.systemDetailTitle{
			flex: 0 0 328px;
			padding: 0 28px;
		}
		div.systemServiceContent div.systemDetail div.systemDetailTitle::after{
			position: absolute; bottom: -28px; right: 8px;
			font-size: 96px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.systemServiceContent div.systemDetail div.systemDetailTitle{
			flex: auto;
			padding: 32px 24px;
			border-radius: 20px 20px 0 0;
		}
		div.systemServiceContent div.systemDetail div.systemDetailTitle::after{
			position: absolute; bottom: -28px; right: 8px;
			font-size: 96px;
		}
	}


/*-- 
------------------------- */
div.systemServiceContent div.systemDetail div.systemDetailTitle h3{
	display: flex;
	flex-direction: column;
	margin-bottom: 23px;
	color: #fff;
	font-size: 27px;
	font-weight: 600;
	line-height: 1.2em;
	letter-spacing: 0.02em;
}
div.systemServiceContent div.systemDetail div.systemDetailTitle h3 span{
	display: block;
	margin-bottom: 2px;
	opacity: 0.3;
	font-size: 16px;
	font-weight: 400;
	font-family: "Inter", sans-serif;
	line-height: inherit;
	letter-spacing: 0.01em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.systemServiceContent div.systemDetail div.systemDetailTitle h3{
			margin-bottom: 22px;
			font-size: 24px;
		}
		div.systemServiceContent div.systemDetail div.systemDetailTitle h3 span{
			margin-bottom: 2px;
			font-size: 15px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.systemServiceContent div.systemDetail div.systemDetailTitle h3{
			margin-bottom: 14px;
			font-size: 22px;
		}
		div.systemServiceContent div.systemDetail div.systemDetailTitle h3 span{
			margin-bottom: 2px;
			font-size: 15px;
		}
	}


/*-- 
------------------------- */
div.systemServiceContent div.systemDetail div.systemDetailTitle p{
	color: #fff;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.618em;
	letter-spacing: 0.02em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.systemServiceContent div.systemDetail div.systemDetailTitle p{
			font-size: 14px;
		}
	}


/*---------------------------------
	Content
---------------------------------*/
div.systemServiceContent div.systemDetail div.systemDetailContent{
	position: relative;
	flex: 1;
	min-width: 0;
	padding: 40px 40px 34px 40px;
}

div.systemServiceContent div.systemDetail div.systemDetailContent::before{ content: "";}

div.systemServiceContent div.systemDetail:nth-child(1) div.systemDetailContent::before{
	position: absolute; top: 40px; right: 40px;
	width: 200px;
	aspect-ratio: 235/211;
	background: url("/common/img/service/system/icon-service01.svg");
	background-size: contain;
}
div.systemServiceContent div.systemDetail:nth-child(2) div.systemDetailContent::before{
	position: absolute; top: 40px; right: 32px;
	width: 216px;
	aspect-ratio: 234/166;
	background: url("/common/img/service/system/icon-service02.svg");
	background-size: contain;
}
div.systemServiceContent div.systemDetail:nth-child(3) div.systemDetailContent::before{
	position: absolute; top: 48px; right: 44px;
	width: 192px;
	aspect-ratio: 261/188;
	background: url("/common/img/service/system/icon-service03.svg");
	background-size: contain;
}
div.systemServiceContent div.systemDetail:nth-child(4) div.systemDetailContent::before{
	position: absolute; top: 48px; right: 40px;
	width: 192px;
	aspect-ratio: 238/211;
	background: url("/common/img/service/system/icon-service04.svg");
	background-size: contain;
}
div.systemServiceContent div.systemDetail:nth-child(5) div.systemDetailContent::before{
	position: absolute; top: 48px; right: 24px;
	width: 232px;
	aspect-ratio: 259/190;
	background: url("/common/img/service/system/icon-service05.svg");
	background-size: contain;
}
div.systemServiceContent div.systemDetail:nth-child(6) div.systemDetailContent::before{
	position: absolute; top: 60px; right: 40px;
	width: 200px;
	aspect-ratio: 278/198;
	background: url("/common/img/service/system/icon-service06.svg");
	background-size: contain;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.systemServiceContent div.systemDetail div.systemDetailContent{ padding: 36px 28px 34px 28px;}
		
		div.systemServiceContent div.systemDetail:nth-child(1) div.systemDetailContent::before{
			position: absolute; top: 64px; right: 24px;
			width: 140px;
		}
		div.systemServiceContent div.systemDetail:nth-child(2) div.systemDetailContent::before{
			position: absolute; top: 72px; right: 20px;
			width: 151px;
		}
		div.systemServiceContent div.systemDetail:nth-child(3) div.systemDetailContent::before{
			position: absolute; top: 48px; right: 24px;
			width: 134px;
		}
		div.systemServiceContent div.systemDetail:nth-child(4) div.systemDetailContent::before{
			position: absolute; top: 48px; right: 24px;
			width: 134px;
		}
		div.systemServiceContent div.systemDetail:nth-child(5) div.systemDetailContent::before{
			position: absolute; top: 56px; right: 20px;
			width: 162px;
		}
		div.systemServiceContent div.systemDetail:nth-child(6) div.systemDetailContent::before{
			position: absolute; top: 80px; right: 24px;
			width: 140px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.systemServiceContent div.systemDetail div.systemDetailContent{
			flex: 1;
			min-width: 0;
			padding: 32px 24px 34px 24px;
		}
	}

	/* ======= SP：個別設定 =======*/
	@media (max-width: 540px) {
		div.systemServiceContent div.systemDetail:nth-child(1) div.systemDetailContent::before{
			position: absolute; top: 80px; right: 24px;
			width: 140px;
		}
		div.systemServiceContent div.systemDetail:nth-child(2) div.systemDetailContent::before{
			position: absolute; top: 80px; right: 20px;
			width: 151px;
		}
		div.systemServiceContent div.systemDetail:nth-child(3) div.systemDetailContent::before{
			position: absolute; top: 88px; right: 24px;
			width: 134px;
		}
		div.systemServiceContent div.systemDetail:nth-child(4) div.systemDetailContent::before{
			position: absolute; top: 80px; right: 24px;
			width: 134px;
		}
		div.systemServiceContent div.systemDetail:nth-child(5) div.systemDetailContent::before{
			position: absolute; top: 80px; right: 20px;
			width: 162px;
		}
		div.systemServiceContent div.systemDetail:nth-child(6) div.systemDetailContent::before{
			position: absolute; top: 80px; right: 24px;
			width: 140px;
		}
	}
	/* ======= SP：個別設定 =======*/
	@media (max-width: 380px) {
		div.systemServiceContent div.systemDetail div.systemDetailContent::before{ display: none;}
	}


/*-- 
------------------------- */
div.systemServiceContent div.systemDetail div.systemDetailContent h4{
	position: relative;
	display: flex;
	width: min(216px,100%);
	margin-bottom: 18px;
	background: #fff;
	border: 1px solid #929EAF;
	border-radius: 200px;
	color: #000;
	font-size: 16px;
}
div.systemServiceContent div.systemDetail div.systemDetailContent h4 span{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4px;
	margin-right: 7px;
	background: #929EAF;
	border-radius: 200px;
	text-align: center;
	vertical-align: middle;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.systemServiceContent div.systemDetail div.systemDetailContent h4{
			width: min(192px,100%);
			margin-bottom: 18px;
			font-size: 15px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}

/*-- 
------------------------- */
div.systemServiceContent div.systemDetail div.systemDetailContent dl{ margin-bottom: 20px;}
div.systemServiceContent div.systemDetail div.systemDetailContent dl dt{
	margin-bottom: 10px;
	color: #000;
	font-size: 15px;
	font-weight: 600;
}
div.systemServiceContent div.systemDetail div.systemDetailContent dl dd ul li{
	position: relative;
	padding-left: 28px;
	font-size: 16px;
	line-height: 1.3em;
	letter-spacing: 0em;
}
div.systemServiceContent div.systemDetail div.systemDetailContent dl dd ul li:not(:last-child){	margin-bottom: 9px;}

div.systemServiceContent div.systemDetail div.systemDetailContent dl dd ul li::before{
	position: absolute; top: 50%; left: 0px;
	content: "";
	background: #ccc;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	transform: translateY(-50%);
}
div.systemServiceContent div.systemDetail div.systemDetailContent dl dd ul li::after{
	position: absolute; top: 3px; left: 7px;
	content: "";
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	width: 6px;
	height: 12px;
	transform: rotate(45deg);
}
div.systemServiceContent div.systemDetail:nth-child(1) div.systemDetailContent dl dd ul li::before{ background: #3F9BC4;}
div.systemServiceContent div.systemDetail:nth-child(2) div.systemDetailContent dl dd ul li::before{ background: #58A982;}
div.systemServiceContent div.systemDetail:nth-child(3) div.systemDetailContent dl dd ul li::before{ background: #8A7DB8;}
div.systemServiceContent div.systemDetail:nth-child(4) div.systemDetailContent dl dd ul li::before{ background: #DD8F4B;}
div.systemServiceContent div.systemDetail:nth-child(5) div.systemDetailContent dl dd ul li::before{ background: #45A2A3;}
div.systemServiceContent div.systemDetail:nth-child(6) div.systemDetailContent dl dd ul li::before{ background: #5F88B0;}


	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.systemServiceContent div.systemDetail div.systemDetailContent dl dt{
			margin-bottom: 10px;
			font-size: 15px;
		}
		div.systemServiceContent div.systemDetail div.systemDetailContent dl dd ul li{
			padding-left: 26px;
			font-size: 15px;
			letter-spacing: -0.01em;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.systemServiceContent div.systemDetail div.systemDetailContent dl dt{
			margin-bottom: 10px;
			font-size: 15px;
		}
		div.systemServiceContent div.systemDetail div.systemDetailContent dl dd ul li{
			padding-left: 26px;
			font-size: 15px;
			letter-spacing: -0.01em;
		}
	}


/*-- 
------------------------- */
div.systemServiceContent div.systemDetail div.systemDetailContent p{
	color: #333;
	font-size: 15px;
	line-height: 1.618em;
	font-weight: 400;
	letter-spacing: 0.01em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.systemServiceContent div.systemDetail div.systemDetailContent p{
			font-size: 14px;
			line-height: 1.7em;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.systemServiceContent div.systemDetail div.systemDetailContent p{
			font-size: 14px;
			line-height: 1.7em;
		}
	}