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


/*==============================*/
/* 流れ */
/*==============================*/
div.serviceFlow{
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
	padding-right: 40px;
}
div.serviceFlow dl{
	position: relative;
	display: flex;
	flex-direction: column;
	width: calc(calc(100% - 56px * 3) / 4);	
}
div.serviceFlow dl::before{
	position: absolute; bottom: 0; left: 0;
	content: "";
	width: 100%;
	height: 320px;
	z-index: -1;
}
div.serviceFlow dl:nth-child(1)::before{ background: #dbeefc;}
div.serviceFlow dl:nth-child(2)::before{ background: #f9d6d4;}
div.serviceFlow dl:nth-child(3)::before{ background: #e7dcf9;}
div.serviceFlow dl:nth-child(4)::before{ background: #fcf0d9;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.serviceFlow{
			gap: 40px 56px;
			padding-right: 48px;
		}
		div.serviceFlow dl{ width: calc(calc(100% - 56px * 1) / 2);}
	}

	/* ======= SP以上 =======*/
	@media (min-width: 768px) {
		div.serviceFlow dl:after{
			position: absolute; bottom: 0px; right: -47px;
			content: "";
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 160px 0 160px 48px;
			border-color: transparent transparent transparent #1976D2;
			z-index: -1;
		}
		div.serviceFlow dl:nth-child(1)::after{ border-left: 48px solid #dbeefc;}
		div.serviceFlow dl:nth-child(2)::after{ border-left: 48px solid #f9d6d4;}
		div.serviceFlow dl:nth-child(3)::after{ border-left: 48px solid #e7dcf9;}
		div.serviceFlow dl:nth-child(4)::after{ border-left: 48px solid #fcf0d9;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.serviceFlow{
			flex-direction: column;
			gap: 76px 0;
			padding-right: 0px;
		}
		div.serviceFlow dl{
			width: 100%;	
		}
		div.serviceFlow dl::before{
			height: calc(100% - 120px);
		}
		div.serviceFlow dl:after{
			position: absolute; top: 99.9%; left: 0;
			content: "";
			width: 100%;
			height: 48px;
			background: #ccc; 
			clip-path: polygon(0 0, 100% 0, 50% 100%);
		}
		div.serviceFlow dl:nth-child(1)::after{ background: #dbeefc;}
		div.serviceFlow dl:nth-child(2)::after{ background: #f9d6d4;}
		div.serviceFlow dl:nth-child(3)::after{ background: #e7dcf9;}
		div.serviceFlow dl:nth-child(4)::after{ background: #fcf0d9;}
	}


/*-- タイトル
------------------------- */
div.serviceFlow dl dt{
	margin-bottom: 20px;
	font-size: 22px;
	font-weight: 600;
	text-align: center;
}
div.serviceFlow dl:nth-child(1) dt{color: #005db2;}
div.serviceFlow dl:nth-child(2) dt{color: #d82e1e;}
div.serviceFlow dl:nth-child(3) dt{color: #432070;}
div.serviceFlow dl:nth-child(4) dt{color: #fec12f;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.serviceFlow dl dt{ margin-bottom: 12px;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.serviceFlow dl dt{
			margin-bottom: 12px;
			font-size: 21px;
		}
	}


/*-- アイコン
------------------------- */
div.serviceFlow dl dd:nth-child(2){
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: #ddd;
	margin: 0 auto 24px auto;
}
div.serviceFlow dl:nth-child(1) dd:nth-child(2){ background: #005db2;}
div.serviceFlow dl:nth-child(2) dd:nth-child(2){ background: #d82e1e;}
div.serviceFlow dl:nth-child(3) dd:nth-child(2){ background: #432070;}
div.serviceFlow dl:nth-child(4) dd:nth-child(2){ background: #fec12f;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.serviceFlow dl dd:nth-child(2){
			width: 144px;
			height: 144px;
			margin: 0 auto 20px auto;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.serviceFlow dl dd:nth-child(2){
			width: 136px;
			height: 136px;
			margin: 0 auto 20px auto;
		}
	}


/*-- リスト
------------------------- */
div.serviceFlow dl dd:nth-child(3){ padding: 0 8px 24px 24px;}
div.serviceFlow dl dd:nth-child(3) ul li{
	padding: 6px 8px 8px 8px;
	background: #fff;
	border-radius: 200px;
	
	color: #000;
	font-size: 15px;
	line-height: 1.3em;
	text-align: center;
}
div.serviceFlow dl dd:nth-child(3) ul li:not(:last-child){ margin-bottom: 8px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.serviceFlow dl dd:nth-child(3){
			padding: 0 20px 12px 20px;
		}
		div.serviceFlow dl dd:nth-child(3) ul li{
			padding: 6px 8px 8px 8px;
			font-size: 14px;
		}
	}



/*==============================*/
/* 強み */
/*==============================*/
section.strengthsWrap{ background: #EFFAFD;}

section.strengthsWrap h2{ color: #000;}


div.strengths{
	position: relative;
	display: flex;
	padding: 72px 56px 56px 56px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#effafd+0,ffffff+100 */
	background: linear-gradient(to bottom,  #effafd 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.strengths{
			align-items: center;
			padding: 56px 40px 40px 40px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.strengths{
			flex-direction: column;
			padding: 136px 28px 28px 28px;
		}
		div.strengths:not(:last-child){ margin-bottom: 40px;}
	}


/*-- 
------------------------- */
div.strengths figure{ width: 480px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.strengths figure{ width: 320px;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.strengths figure{
			width: 100%;
			margin-bottom: 32px;
		}
	}

/*-- 
------------------------- */
div.strengths div{
	flex: 1;
	margin-left: 40px;
}
div.strengths div h3{
	position: relative;
	margin-bottom: 24px;
	padding-left: 80px;
	color: #00ABDC;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3em;
}
div.strengths div h3::before{
	position: absolute; top: 50%; left: 0;
	content: "";
	width: 68px;
	aspect-ratio: 68/60;
	background: url(/common/img/staff/icon-strength.svg);
	background-size: contain;
	transform:translateY(-48%);
}
div.strengths div p{
	font-size: 15px;
	line-height: 1.618em;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.strengths div{ margin-left: 32px;}
		div.strengths div h3{
			padding-left: 72px;
			margin-bottom: 20px;
			font-size: 22px;
			line-height: 1.414em;
		}
		div.strengths div h3::before{ width: 60px;}
		div.strengths div p{
			font-size: 14px;
			line-height: 1.55em;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.strengths div{
			margin-left: 0px;
		}
		div.strengths div h3{
			position: absolute; top: 0px; left: 50%;
			width: 100%;
			margin-bottom: 18px;
			padding-left: 0;
			padding-top: 60px;
			font-size: 21px;
			text-align: center;
			transform: translateX(-50%);
			
		}
		div.strengths div h3::before{
			position: absolute; top: 0; left: 50%;
			width: 60px;
			transform:translateY(0%) translateX(-48%);
		}
		div.strengths div p{
			font-size: 14px;
			line-height: 1.618em;
		}
	}


/*==============================*/
/* スクロール位置調整 */
/*==============================*/
#staffstrengthsArea{
	scroll-margin-top: 91px;
}