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

/*==============================*/
/* main */
/*==============================*/
ul.vkaService{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	width: min(720px,100%);
	margin: 0 auto;
}
ul.vkaService li{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: calc(calc(100% - 20px * 2) / 3);
	padding: 28px 0;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 16px #365e6c1a;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		ul.vkaService li{
			width: calc(calc(100% - 20px * 1) / 2);
			padding: 20px 0;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		ul.vkaService{
			gap: 16px;
			width: 100%;
		}
		ul.vkaService li{
			gap: 8px;
			width: calc(calc(100% - 16px * 1) / 2);
			padding: 28px 0;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 460px) {
		ul.vkaService{ flex-direction: column;}
		ul.vkaService li{
			justify-content: flex-start;
			gap: 12px;
			width: 100%;
			padding: 24px 24px 24px 28px;
		}
	}


/*==============================*/
/* 案件の立ち上げについて */
/*==============================*/
div.projectStart{
	display: flex;
	gap: 24px;
}
div.projectStart div{
	width: calc(calc(100% - 24px * 1) / 2);
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.projectStart{ flex-direction: column;}
		div.projectStart div{ width: 100%;}
	}


/*==============================*/
/* お客様企業の声 */
/*==============================*/
div.companyVoice dl{
	position: relative;
	display: flex;
	gap: 24px;
	background: #F1F1F1;
	padding: 40px;
	border-radius: 10px;
}
div.companyVoice dl::before{
	position: absolute; top: -16px; left: 16px;
	content: "";
	width: 34px;
	aspect-ratio: 93/69;
	background: url("/common/img/share/icon-quotation-yellow.svg");
}
div.companyVoice dl:nth-child(odd)::before{ background: url("/common/img/share/icon-quotation-blue.svg"); background-size: cover;}
div.companyVoice dl:nth-child(even)::before{ background: url("/common/img/share/icon-quotation-yellow.svg"); background-size: cover;}


div.companyVoice dl:not(:last-child){ margin-bottom: 24px;}


div.companyVoice dl dt{
	flex: 0 0 288px;
	display: flex;
	align-items: center;
}
div.companyVoice dl dt figure{
	margin-right: 20px;
}

div.companyVoice dl dt p{
	margin-right: 12px;
	color: #18282B;
	font-size: 18px;
	font-weight: 700;
}
div.companyVoice dl dt ul{
	display: flex;
	gap: 8px;
}
div.companyVoice dl dt ul li{
	padding: 2px 6px 3px 6px;
	background: #fff;
	line-height: 1.3em;
	border-radius: 3px;
	color: #5F6368;
	font-size: 13px;
}

div.companyVoice dl dd{
	flex: 1;
	min-width: 0;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.companyVoice dl{
			flex-direction: column;
			gap: 16px;
			padding: 40px 32px;
		}
		div.companyVoice dl:not(:last-child){ margin-bottom: 20px;}

		div.companyVoice dl dt{
			flex: auto;
			justify-content: center;
		}

		div.companyVoice dl dt p{
			margin-right: 12px;
			color: #18282B;
			font-size: 18px;
			font-weight: 700;
		}

	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.companyVoice dl{
			flex-direction: column;
			gap: 12px;
			padding: 32px 32px 32px 32px;
		}
		div.companyVoice dl:not(:last-child){ margin-bottom: 24px;}

		div.companyVoice dl dt{
			flex: auto;
		}
		div.companyVoice dl dt figure{
			margin-right: 12px;
		}

		div.companyVoice dl dt p{
			margin-right: 10px;
			font-size: 16px;
		}
		div.companyVoice dl dd{	flex: auto;}
		div.companyVoice dl dd p{ font-size: 14px;}
	}

/*==============================*/
/* お客さま企業一例 */
/*==============================*/
ul.clientLogo-list{
	display: flex;
	flex-wrap: wrap;
	gap: 28px 56px;
	width: min(720px,100%);
	margin: 0 auto;
}
ul.clientLogo-list li{
	width: calc(calc(100% - 56px * 3) / 4);
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		ul.clientLogo-list{ gap: 20px 48px;}
		ul.clientLogo-list li{
			width: calc(calc(100% - 48px * 2) / 3);
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		ul.clientLogo-list{ gap: 20px 48px;}
		ul.clientLogo-list li{ width: calc(calc(100% - 48px * 2) / 3);}
	}
	/* ======= SP =======*/
	@media (max-width: 440px) {
		ul.clientLogo-list{ gap: 20px 40px;}
		ul.clientLogo-list li{ width: calc(calc(100% - 40px * 1) / 2);}
	}