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

/*==============================*/
/* リモートスタッフとは */
/*==============================*/
div.remoteStaff-about{
	display: flex;
	gap: 24px;
}
div.remoteStaff-about figure{
	flex: 0 0 478px;
}
div.remoteStaff-about div{
	flex: 1;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.remoteStaff-about{
			flex-direction: column;
			gap: 24px;
		}
		div.remoteStaff-about figure{ flex: auto;}
		div.remoteStaff-about div{ flex: auto;}
	}


/*==============================*/
/* 数字で見るリモートスタッフ */
/*==============================*/
div.number-remoteStaff{
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
}
div.number-remoteStaff dl:nth-child(1),
div.number-remoteStaff dl:nth-child(2){ width: calc(calc(100% - 28px * 3) / 4);}

div.number-remoteStaff dl:nth-child(3){ width: calc(calc(100% - 28px * 1) / 2);}

div.number-remoteStaff dl dt{
	margin-bottom: 20px;
	padding: 6px 0 7px 0;
	color: #fff;
    font-size: 16px;
	font-weight: 600;
	line-height: 1.3em;
	background: #3dbae8;
	border-radius: 200px;
	text-align: center;
	letter-spacing: 0.08em;
}
div.number-remoteStaff dl dd{
	padding: 0 20px;
	font-size: 13px;
	line-height: 1.618em;
}
div.number-remoteStaff dl dd:nth-child(2){ margin-bottom: 16px;}


	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.number-remoteStaff{
			gap: 28px 16px;
		}
		div.number-remoteStaff dl:nth-child(1),
		div.number-remoteStaff dl:nth-child(2){ width: calc(calc(100% - 16px * 1) / 2);}
		div.number-remoteStaff dl:nth-child(3){ width: 100%;}
		
		div.number-remoteStaff dl dt{
			margin-bottom: 16px;
			padding: 4px 0 5px 0;
			font-size: 14px;
			border-radius: 7px;
		}
		div.number-remoteStaff dl dd{
			padding: 0;
			font-size: 13px;
			line-height: 1.618em;
		}
	}


/*==============================*/
/* 働く体制について */
/*==============================*/
div.workingSystem{
	display: flex;
	gap: 24px;
}
div.workingSystem figure{
	flex: 0 0 400px;
}
div.workingSystem div{
	flex: 1;
}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.workingSystem{
			flex-direction: column;
			gap: 24px;
		}
		div.workingSystem figure{ flex: auto;}
		div.workingSystem div{ flex: auto;}
	}


/*==============================*/
/* リモートスタッフの稼働例 */
/*==============================*/
div.operationExample{
	display: flex;
	gap :28px;
}
div.operationExample > div:nth-child(1){
	flex: 1;
	min-width: 0;
}
div.operationExample > div:nth-child(2){
	flex: 0 0 358px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.operationExample{
			flex-direction: column;
			gap :28px;
		}
		div.operationExample > div:nth-child(1){ flex: auto;}
		div.operationExample > div:nth-child(2){ flex: auto;}

	}

/*---------------------------------
   
---------------------------------*/
div.operationExample div.caseCharge-wrap div.caseCharge{
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 24px 24px 24px 40px;
	box-shadow: 0 0 24px #365e6c1a;
	border-radius: 8px;
}
div.operationExample div.caseCharge-wrap div.caseCharge:not(:last-child){ margin-bottom: 18px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.operationExample div.caseCharge-wrap div.caseCharge{
			gap: 24px;
			padding: 24px 28px 24px 28px;
		}
	}

/*-- 
------------------------- */
div.operationExample div.caseCharge-wrap div.caseCharge figure{
	flex: 0 0 60px;
}
/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.operationExample div.caseCharge-wrap div.caseCharge figure{
			flex: 0 0 56px;
			text-align: center;
		}
		div.operationExample div.caseCharge-wrap div.caseCharge:nth-child(1) figure img{ width: 48px;}
	}

/*-- 
------------------------- */
div.operationExample div.caseCharge-wrap div.caseCharge div{
	flex: 1;
	min-width: 0;
}
div.operationExample div.caseCharge-wrap div.caseCharge div dl{
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
div.operationExample div.caseCharge-wrap div.caseCharge div dl:not(:last-child){ margin-bottom: 8px;}
div.operationExample div.caseCharge-wrap div.caseCharge div dl dt{
	flex: 0 0 72px;
	background: #f1f1f1;
	color: #5f6368;
	font-size: 13px;
	text-align: center;
}
div.operationExample div.caseCharge-wrap div.caseCharge div dl dd{
	font-size: 13px;
	flex: 1;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.operationExample div.caseCharge-wrap div.caseCharge div dl{
			display: flex;
			align-items: flex-start;
			gap: 12px;
		}
	}



/*==============================*/
/* リモートスタッフの声 */
/*==============================*/
div.aboutVoice{
	display: flex;
	gap: 24px;
}
div.aboutVoice > dl{
	position: relative;
	display: flex;
	flex-direction: column;
	width: calc(calc(100% - 24px * 2) / 3);
	padding: 20px 24px 20px 24px;
	background: #f1f1f1;
	border-radius: 12px;
}

div.aboutVoice > 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.aboutVoice > dl:nth-child(odd)::before{ background: url("/common/img/share/icon-quotation-yellow.svg"); background-size: cover;}
div.aboutVoice > dl:nth-child(even)::before{ background: url("/common/img/share/icon-quotation-blue.svg"); background-size: cover;}

div.aboutVoice > dl > dt{
	margin-bottom: 12px;
	color: #18282b;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5em;
	text-align: center;
	min-height: 80px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.aboutVoice{
			flex-direction: column;
			gap: 16px;
		}
		div.aboutVoice > dl{ width: 100%;}
	}

/*-- 
------------------------- */
div.aboutVoice > dl > dd:nth-child(2){ margin-bottom: 16px;}
div.aboutVoice > dl > dd:nth-child(2) dl{
	display: flex;
	justify-content: center;
	gap: 12px;
}
div.aboutVoice > dl > dd:nth-child(2) dl dt{
	order: 2;
}
div.aboutVoice > dl > dd:nth-child(2) dl dt p{
	color: #18282b;
	font-size: 12px;
}
div.aboutVoice > dl > dd:nth-child(2) dl dt ul li{
	position: relative;
	
	padding-left: 8px;
	color: #009dd5;
	font-size: 12px;
	line-height: 1.3em;
}
div.aboutVoice > dl > dd:nth-child(2) dl dt ul li::before{
	position: absolute; top: 0; left: 0;
	content: "#";
}
div.aboutVoice > dl > dd:nth-child(2) dl dd{
	order: 1;
}

/*-- 
------------------------- */
div.aboutVoice > dl > dd:nth-child(3){
	width: min(240px,100%);
	margin: auto auto 0 auto;
}
div.aboutVoice > dl > dd:nth-child(3) a{
	position: relative;
	display: block;
	padding: 10px 0 11px 0;
	border: 2px solid #18282b;
	background: #fff;
	text-align: center;
	line-height: 1.3em;
	border-radius: 200px;
}
div.aboutVoice > dl > dd:nth-child(3) a:hover{ background: #f1f1f1;}
div.aboutVoice > dl > dd:nth-child(3) a::before{
	position: absolute; top: 50%; right: 14px;
	content: "";
	width: 12px;
	height: 1px;
	background: #18282b;
	margin-top: 0px;
}
div.aboutVoice > dl > dd:nth-child(3) a::after{
	position: absolute; top: 50%; right: 14px;
	content: "";
	width: 5px;
	height: 5px;
	border-top: 1px solid #18282b;
	border-right: 1px solid #18282b;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: -2px;
}



/*==============================*/
/* 業務で使用ツール */
/*==============================*/
div.ToolUsed{
	display: flex;
	flex-wrap: wrap;
	gap: 28px 24px;
}
div.ToolUsed dl:nth-child(1),
div.ToolUsed dl:nth-child(2){
	width: calc(calc(100% - 24px * 1) / 2);
}

div.ToolUsed dl dt{
	margin-bottom: 20px;
	padding: 6px 0 7px 0;
	color: #fff;
    font-size: 16px;
	font-weight: 600;
	line-height: 1.3em;
	background: #3dbae8;
	border-radius: 200px;
	text-align: center;
	letter-spacing: 0.08em;
}

div.ToolUsed dl:nth-child(3) dd{
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
div.ToolUsed dl:nth-child(3) dd ul{
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 12px 10px;
	flex: 0 0 360px;
}
div.ToolUsed dl:nth-child(3) dd ul li{
	padding: 2px 16px;
	background: #F1F1F1;
	border-radius: 200px;
	color: #72767A;
}
div.ToolUsed dl:nth-child(3) dd div{
	flex: 1;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.ToolUsed{
			flex-direction: column;
			gap: 28px 24px;
		}
		div.ToolUsed dl:nth-child(1),
		div.ToolUsed dl:nth-child(2){
			width: 100%;
		}

		div.ToolUsed dl dt{
			margin-bottom: 20px;
			padding: 6px 0 7px 0;
			color: #fff;
			font-size: 16px;
			font-weight: 600;
			line-height: 1.3em;
			background: #3dbae8;
			border-radius: 200px;
			text-align: center;
			letter-spacing: 0.08em;
		}

		div.ToolUsed dl:nth-child(3) dd{
			flex-direction: column;
			gap: 20px;
		}
		div.ToolUsed dl:nth-child(3) dd ul{
			display: flex;
			flex-wrap: wrap;
			gap: 12px 10px;
			flex: auto;
		}
		div.ToolUsed dl:nth-child(3) dd ul li{
			padding: 2px 16px;
			background: #F1F1F1;
			border-radius: 200px;
			color: #72767A;
		}
		div.ToolUsed dl:nth-child(3) dd div{
			flex: auto;
		}
	}



/*==============================*/
/* FAQ */
/*==============================*/
div.aboutFaq dl{
	padding: 40px 0;
}
div.aboutFaq dl:not(:last-child){
	border-bottom: 1px solid #d9d9d9;
}
div.aboutFaq dl dt{
	margin-bottom: 28px;
	color: #000;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.618em;
}
div.aboutFaq dl dd{
	
}
div.aboutFaq dl dd p{
	line-height: 1.618em;
}


/*-- 共通設定
------------------------- */
div.aboutFaq dl dt,
div.aboutFaq dl dd{
	position: relative;
	padding-left: 56px;
}
div.aboutFaq dl dt::before,
div.aboutFaq dl dd::before{
	position: absolute; top: 50%; left: 0px;
	content: "";
	width: 32px;
	height: 32px;
	background: #ccc;
	transform: rotate(45deg);
	z-index: -1;
	margin-top: -16px;
}
div.aboutFaq dl dt::before{ background: #F4F448; }
div.aboutFaq dl dd::before{ background: #E6F5FD; }


/*-- 個別設定
------------------------- */
div.aboutFaq dl dt::after{
	position: absolute;top: 50%; left: 11px;
	content: "Q";
	line-height: 1em;
	margin-top: -9px;
}
div.aboutFaq dl dd::after{
	position: absolute; top: 50%; left: 11px;
	content: "A";
	color: #000;
	font-size: 15px;
	font-weight: 600;
	line-height: 1em;
	margin-top: -9px;
}