@charset "UTF-8";
/* CSS Document */
.staffing {
	margin-top: 90px;
}
	.staffing .main-visual {
		background: url('../img/pc/bg_visual.png') no-repeat bottom 50px right 60px;
		background-size: cover;
	}

	.staffing .staffing-sec1 {
		padding: 70px 0 96px;
	}
		.staffing .staffing-sec1 .layout {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}
			.staffing .staffing-sec1 .text {
				width: 660px;
			}
				.staffing .staffing-sec1 .text h2 {
					font-size: 32px;
					line-height: 52px;
					font-style: normal;
					letter-spacing: 0.2em;
				}
				.staffing .staffing-sec1 .text h2:before {
					bottom: -30px;
					width: 67px;
				}
				.staffing .staffing-sec1 .text h2:after {
					bottom: -30px;
					width: 67px;
					left: 68px;
				}
				.staffing .staffing-sec1 .text p {
					font-size: 15px;
					line-height: 32px;
					margin-top: 64px;
				}
			.staffing .staffing-sec1 .image {
				width: 480px;
				position: relative;
				padding-top: 10px;
			}
				.staffing .staffing-sec1 .image:after {
					position: absolute;
					content: '';
					background: #EEF3F9;
					width: 480px;
					height: 380px;
					right: 20px;
					bottom: -20px;
					z-index: -1;
				}

	.staffing .staffing-case {
		padding: 65px 0 0;
		background: #ECF2F8 no-repeat center top 610px;
		background-size: cover;
	}
		.staffing .staffing-case h2 {
			text-align: center;
		}
			.staffing .staffing-case h2:before {
				right: 47px;
				width: 47px;
				left: 0;
				margin: auto;
				bottom: -20px;
			}
			.staffing .staffing-case h2:after {
				left: 48px;
				width: 47px;
				right: 0;
				margin: auto;
				bottom: -20px;
			}

		.staffing .staffing-case .layout > p {
			font-size: 15px;
			text-align: center;
			margin-top: 60px;
			line-height: 34px;
		}

		.staffing .staffing-case .checkmarks {
			padding: 20px;
			background: #C8D8E4;
			display: flex;
			justify-content: space-between;
			position: relative;
			margin-top: 33px;
		}
			.staffing .staffing-case .checkmarks:after {
				position: absolute;
				content: '';
				background: url('../img/pc/img_arrow_down.svg') no-repeat center;
				background-size: contain;
				width: 160px;
				height: 40px;
				left: 0;
				right: 0;
				bottom: -40px;
				margin: auto;
			}
			.staffing .staffing-case .checkmarks .list1 {
				background: #fff;
				padding: 25px 40px 40px;
				width: 100%;
			}
			.staffing .staffing-case .checkmarks p {
				font-size: 22px;
				line-height: 30px;
				position: relative;
				text-align: left;
				margin-bottom: 35px;
				white-space: nowrap;
				font-weight: 500;
			}
				.staffing .staffing-case .checkmarks p:after {
					position: absolute;
					content: '';
					background: #003296;
					width: 87px;
					height: 1px;
					bottom: -15px;
					left: 0;
				}
			.staffing .staffing-case .checkmarks dl {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			.staffing .staffing-case .checkmarks dl dd {
				padding: 25px 0 24px 50px;
				background: #ECF2F8;
				position: relative;
				margin-top: 4px;
				font-size: 15px;
				line-height: 21px;
				width: 488px;
				vertical-align: middle;
				font-weight: 500;
			}
				.staffing .staffing-case .checkmarks dl dd.double-line {
					padding: 14px 0 11px 50px;
				}
				.staffing .staffing-case .checkmarks dl dd span {
					color: #DC0014;
				}
				.staffing .staffing-case .checkmarks dl dd:after {
					position: absolute;
					content: '';
					background: url('../img/pc/ico_checkmark.svg') no-repeat center;
					background-size: contain;
					width: 24px;
					height: 24px;
					left: 14px;
					top: 50%;
					transform: translateY(-50%);
				}

		.staffing .staffing-case .services {
			background: url('../img/pc/bg_case.jpg') no-repeat center center/cover;
			margin-top: -120px;
			padding-block: 241px 80px;
		}
			.staffing .staffing-case .services p {
				font-size: 24px;
				line-height: 33px;
				margin-bottom: 3px;
				color: #fff;
				text-align: center;
				font-weight: 500;
			}
			.staffing .staffing-case .services .head {
				text-align: center;
				font-size: 38px;
				line-height: 53px;
				position: relative;
				width: 730px;
				display: block;
				letter-spacing: 0.2em;
				color: #fff;
				margin: auto;
				font-weight: 500;
			}
				.staffing .staffing-case .services .head:before {
					position: absolute;
					content: '';
					background: #fff;
					width: 80px;
					height: 4px;
					left: 0;
					top: 50%;
					transform: skew(-70deg) translateY(-50%);
				}
				.staffing .staffing-case .services .head:after {
					position: absolute;
					content: '';
					background: #fff;
					width: 80px;
					height: 4px;
					right: 10px;
					top: 50%;
					transform: skew(-70deg) translateY(-50%);
				}
			.staffing .staffing-case .services ul {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				margin-left: -18px;
			}
				.staffing .staffing-case .services ul li {
					width: 578px;
					background: #fff;
					padding: 0 0 35px;
					margin-top: 28px;
					text-align: center;
					margin-left: 18px;
				}
					.staffing .staffing-case .services ul li .image {
						width: 100%;
						height: 162px;
						margin-bottom: 7px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.staffing .staffing-case .services ul li span {
						font-size: 24px;
						text-align: center;
						position: relative;
						display: inline-block;
						margin: auto;
						z-index: 1;
						color: #000;
						font-weight: 500;
					}
						.staffing .staffing-case .services ul li span:after {
							position: absolute;
							content: '';
							background: #DC0014;
							width: 120%;
							height: 12px;
							transform: skew(-45deg) translateX(-50%);
							left: 50%;
							margin: auto;
							bottom: -5px;
							z-index: -1;
						}
					.staffing .staffing-case .services ul li small {
						font-size: 15px;
						line-height: 26px;
						text-align: center;
						margin-top: 20px;
						display: block;
					}
			.staffing .staffing-case .services h3 {
				font-size: 32px;
				color: #fff;
				line-height: 35px;
				margin-top: 80px;
				font-weight: 500;
			}
				.staffing .staffing-case .services h3 span {
					font-size: 15px;
					line-height: 35px;
					position: relative;
					display: inline-block;
					padding-left: 45px;
					vertical-align: middle;
					font-style: italic;
					letter-spacing: 0.1em;
					font-weight: normal;
				}
					.staffing .staffing-case .services h3 span:before {
						position: absolute;
						content: '';
						background: #fff;
						width: 3px;
						height: 17px;
						top: 0;
						left: 22px;
					}
					.staffing .staffing-case .services h3 span:after {
						position: absolute;
						content: '';
						background: #fff;
						width: 3px;
						height: 17px;
						bottom: 0;
						left: 22px;
					}
			.staffing .staffing-case .services table {
				width: 100%;
				margin-top: 26px;
				border-collapse: collapse;
			}
				.staffing .staffing-case .services table tr {
					border-bottom: 1px solid #D6E0E4;
				}
					.staffing .staffing-case .services table tr th {
						padding: 22px 0;
						text-align: center;
						background: #ECF2F8;
						width: 33.33%;
						font-weight: 500;
					}
					.staffing .staffing-case .services table tr td {
						padding: 14px 22px 15px;
						text-align: left;
						font-size: 14px;
						line-height: 20px;
						width: 33.33%;
						background: #fff;
					}
					.staffing .staffing-case .services table tr td:first-child {
						font-weight: 500;
					}
					.staffing .staffing-case .services table tr th:nth-child(1),
					.staffing .staffing-case .services table tr td:nth-child(1),
					.staffing .staffing-case .services table tr th:nth-child(2),
					.staffing .staffing-case .services table tr td:nth-child(2) {
						border-right: 1px solid #D6E0E4;
					}
	.staffing .staffing-points {
		background: #ECF2F8;
		padding: 68px 0 80px;
	}
		.staffing .staffing-points h2 {
			text-align: center;
		}
			.staffing .staffing-points h2:before {
				right: 47px;
				width: 47px;
				left: 0;
				margin: auto;
				bottom: -20px;
			}
			.staffing .staffing-points h2:after {
				left: 48px;
				width: 47px;
				right: 0;
				margin: auto;
				bottom: -20px;
			}
		.staffing .staffing-points ul {
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
			.staffing .staffing-points ul li {
				width: 570px;
				margin-top: 40px;
			}
				.staffing .staffing-points ul li .image {
					position: relative;
					z-index: 1;
					padding-left: 20px;
				}
					.staffing .staffing-points ul li .image:after {
						position: absolute;
						content: '';
						background: url('../img/pc/img_bg.png') no-repeat right bottom;
						background-size: contain;
						width: 530px;
						height: 363px;
						right: 0;
						bottom: -20px;
						z-index: -1;
					}
				.staffing .staffing-points ul li .text {
					background: #fff;
					width: 430px;
					height: 230px;
					padding: 30px 0 30px 40px;
					position: relative;
					z-index: 1;
					margin-left: 0;
					margin-top: -60px;
				}
					.staffing .staffing-points ul li .text:after {
						position: absolute;
						content: '';
						background: #fff;
						width: 200px;
						height: 100%;
						transform: skew(17deg);
						right: -49px;
						top: 0;
						z-index: -1;
					}
					.staffing .staffing-points ul li .text .title {
						font-size: 24px;
						line-height: 38px;
						color: #003296;
						margin-bottom: 15px;
						font-weight: 500;
					}
					.staffing .staffing-points ul li .text p {
						font-size: 14px;
						line-height: 28px;
						white-space: nowrap;
					}
					.staffing .staffing-points ul li .text span {
						position: absolute;
						right: -75px;
						top: 8px;
						font-size: 86px;
						line-height: 113px;
						color: #003296;
						font-style: italic;
						letter-spacing: 0;
					}
@media screen and ( min-width:960px ){



}

/* タブレット */
@media screen and ( max-width:959px ){

}

@media ( min-width:640px ) and ( max-width:707px ){
}

/* スマホ */
@media screen and ( max-width:639px ){
	.staffing {
	}
		.staffing .main-visual {
			background: url('../img/sp/bg_visual.png') no-repeat bottom 24px right 57%;
	        background-size: cover;
		}
			.staffing .main-visual h1 {
				margin-top: 42px;
			}
		.staffing .staffing-sec1 {
			padding: 56px 0 100px;
		}
			.staffing .staffing-sec1 .layout {
				display: block;
			}
				.staffing .staffing-sec1 .text {
					width: auto;
				}
					.staffing .staffing-sec1 .text h2 {
						font-size: 30px;
						line-height: 50px;
						font-style: normal;
						letter-spacing: 0;
						white-space: nowrap;
					}
					.staffing .staffing-sec1 .text h2:before {
						bottom: -40px;
						height: 3px;
					}
					.staffing .staffing-sec1 .text h2:after {
						bottom: -40px;
						height: 3px;
					}
					.staffing .staffing-sec1 .text p {
						font-size: 15px;
						line-height: 34px;
						margin-top: 75px;
						letter-spacing: 0;
					}
				.staffing .staffing-sec1 .image {
					width: auto;
					position: relative;
					padding-top: 12px;
					margin-top: 15px;
				}
					.staffing .staffing-sec1 .image img {
						width: 96%;
						padding-left: 12px;
					}
					.staffing .staffing-sec1 .image:after {
						position: absolute;
						content: '';
						background: #EEF3F9;
						width: 303px;
						height: 240px;
						right: 12px;
						bottom: -12px;
						z-index: -1;
					}

		.staffing .staffing-case {
			padding: 45px 0 45px;
		}
			.staffing .staffing-case h2 {
				font-size: 35px;
				text-align: center;
			}
				.staffing .staffing-case h2:before {
					right: 47px;
					width: 47px;
					left: 0;
					height: 3px;
					margin: auto;
					bottom: -30px;
				}
				.staffing .staffing-case h2:after {
					left: 48px;
					width: 47px;
					right: 0;
					height: 3px;
					margin: auto;
					bottom: -30px;
				}

			.staffing .staffing-case .layout > p {
				font-size: 15px;
				margin-top: 60px;
				line-height: 34px;
				text-align: left;
				letter-spacing: 0;
			}

			.staffing .staffing-case .checkmarks {
				padding: 6.4%;
				background: #C8D8E4;
				display: block;
				margin-top: 25px;
			}
				.staffing .staffing-case .checkmarks:after {
					position: absolute;
					content: '';
					background: url('../img/pc/img_arrow_down.svg') no-repeat center;
					background-size: contain;
					width: 160px;
					height: 40px;
					left: 0;
					right: 0;
					bottom: -40px;
					margin: auto;
				}
				.staffing .staffing-case .checkmarks .list1 {
					background: #fff;
					padding: 20px 10px 10px;
					width: auto;
				}
				.staffing .staffing-case .checkmarks p {
					font-size: 22px;
					line-height: 30px;
					position: relative;
					text-align: center;
					margin-bottom: 35px;
					white-space: normal;
				}
					.staffing .staffing-case .checkmarks p:after {
						position: absolute;
						content: '';
						background: #003296;
						width: 87px;
						height: 1px;
						bottom: -15px;
						left: 0;
						right: 0;
						margin: auto;
					}
				.staffing .staffing-case .checkmarks dl dd {
					padding: 9px 0 11px 44px;
					margin-top: 10px;
					font-size: 15px;
					line-height: 21px;
					letter-spacing: 0.2em;
				}
				.staffing .staffing-case .checkmarks dl dd:after {
					left: 10px;
				}

			.staffing .staffing-case .services {
				margin-top: -150px;
				padding-bottom: 49px;
			}
				.staffing .staffing-case .services p {
					font-size: 18px;
					line-height: 25px;
					margin-bottom: 8px;
				}
				.staffing .staffing-case .services .head {
					text-align: center;
					font-size: 35px;
					line-height: 48px;
					position: relative;
					width: 100%;
					display: block;
					letter-spacing: 0;
					color: #fff;
					margin: auto;
				}
					.staffing .staffing-case .services .head:before {
						position: absolute;
						content: '';
						background: #fff;
						width: 22px;
						height: 4px;
						left: 0;
						top: 50%;
						transform: skew(-45deg) translateY(-50%);
					}
					.staffing .staffing-case .services .head:after {
						position: absolute;
						content: '';
						background: #fff;
						width: 22px;
						height: 4px;
						right: 0;
						top: 50%;
						transform: skew(-45deg) translateY(-50%);
					}
				.staffing .staffing-case .services ul {
					display: block;
					margin-top: 28px;
				}
					.staffing .staffing-case .services ul li {
						width: auto;
						padding: 0 20px 20px;
						margin-top: 20px;
						text-align: center;
					}
						.staffing .staffing-case .services ul li .image {
							width: 100%;
							height: 130px;
							padding-top: 10px;
							margin-bottom: 1px;
						}
						.staffing .staffing-case .services ul li span {
							font-size: 20px;
							text-align: center;
							position: relative;
							display: inline-block;
							margin: auto;
							z-index: 1;
							color: #000;
						}
							.staffing .staffing-case .services ul li span:after {
								position: absolute;
								content: '';
								background: #DC0014;
								width: 103%;
								height: 9px;
								transform: skew(-45deg);
								left: -8px;
								right: 0;
								margin: auto;
								bottom: -5px;
								z-index: -1;
							}
						.staffing .staffing-case .services ul li small {
							margin-top: 17px;
						}
				.staffing .staffing-case .services h3 {
					font-size: 28px;
					color: #fff;
					line-height: 40px;
					margin-top: 60px;
				}
					.staffing .staffing-case .services h3 span {
						font-size: 12px;
						line-height: 35px;
						position: relative;
						display: inline-block;
						padding-left: 45px;
						vertical-align: middle;
					}
				.staffing .staffing-case .services table {
					margin-top: 20px;
				}
					.staffing .staffing-case .services table tr th {
						width: 39%;
					}
						.staffing .staffing-case .services table tr td {
							padding: 2px 0 0 8px;
							text-align: left;
							font-size: 13px;
							line-height: 18px;
							letter-spacing: 0;
							height: 48px;
							width: 39%;
							vertical-align: middle;
						}
					.staffing .staffing-case .services table tr th:nth-child(2),
					.staffing .staffing-case .services table tr td:nth-child(2) {
						width: 40%;
					}
					.staffing .staffing-case .services table tr th:nth-child(3),
					.staffing .staffing-case .services table tr td:nth-child(3) {
						width: 19%;
					}
		.staffing .staffing-points {
			padding: 60px 0 53px;
		}
			.staffing .staffing-points h2 {
				text-align: center;
				font-size: 35px;
				line-height: 50px;
			}
				.staffing .staffing-points h2:before {
					right: 47px;
					left: 0;
					margin: auto;
					bottom: -30px;
					width: 47px;
					height: 3px;
				}
				.staffing .staffing-points h2:after {
					left: 48px;
					right: 0;
					margin: auto;
					bottom: -30px;
					width: 47px;
					height: 3px;
				}
			.staffing .staffing-points ul {
				margin-top: 85px;
				display: block;
			}
				.staffing .staffing-points ul li {
					width: auto;
					margin-top: 20px;
				}
					.staffing .staffing-points ul li .image {
						position: relative;
						z-index: 1;
						padding-left: 0;
					}
						.staffing .staffing-points ul li .image:after {
							position: absolute;
							content: '';
							background: url('../img/sp/img_bg.png') no-repeat right bottom;
							background-size: contain;
							width: 96%;
							height: 208px;
							right: 0;
							bottom: -12px;
							z-index: -1;
						}

						.staffing .staffing-points ul li .image img {
							width: 96%;
						}
					.staffing .staffing-points ul li .text {
						background: #fff;
						width: 250px;
						height: auto;
						padding: 20px 0 20px 11px;
						position: relative;
						z-index: 1;
						margin-left: 0;
						margin-top: -36px;
					}
						.staffing .staffing-points ul li .text:after {
							position: absolute;
							content: '';
							background: #fff;
							width: 100px;
							height: 100%;
							transform: skew(9deg);
							right: -29px;
							top: 0;
							z-index: -1;
						}
						.staffing .staffing-points ul li .text .title {
							font-size: 16px;
							line-height: 20px;
							color: #003296;
							margin-bottom: 15px;
						}
						.staffing .staffing-points ul li .text p {
							font-size: 14px;
							line-height: 28px;
							/* letter-spacing: 0.18em; */
							white-space: normal;
						}
						.staffing .staffing-points ul li .text span {
							position: absolute;
							right: -41px;
							letter-spacing: 0;
							top: 4px;
							font-size: 49px;
							line-height: 64px;
						}
						.staffing .staffing-points ul li:nth-child(2) .text:after {
							right: -21px;
						}
}

@media screen and ( max-width:325px ){
	.staffing .staffing-sec1 .text h2 {
		font-size: 26px;
	}
	.staffing .staffing-sec1 .image img {
		padding-left: 8px;
	}
	.staffing .staffing-sec1 .image:after {
		width: 96%;
		height: 204px;
		right: 12px;
		bottom: -10px;
	}
	.staffing .staffing-case .checkmarks p {
		font-size: 18px;
	}
	.staffing .staffing-case .checkmarks dl dd {
		font-size: 13px;
		padding-left: 32px;
	}
	.staffing .staffing-case .checkmarks dl dd.double-line {
		padding-left: 32px;
	}
	.staffing .staffing-case .checkmarks dl dd:after {
		width: 20px;
		height: 20px;
		left: 6px;
	}
	.staffing .staffing-case .services .head {
		font-size: 28px;
		line-height: 42px;
	}
	.staffing .staffing-case .services p {
		font-size: 15px;
	}
	.staffing .staffing-case .services .head:before,
	.staffing .staffing-case .services .head:after {
		width: 20px;
	}
	.staffing .staffing-case .services ul li span {
		font-size: 18px;
	}
	.staffing .staffing-case .services table tr th {
		font-size: 13px;
	    padding: 20px 0;
	}
	.staffing .staffing-case .services table tr td {
		font-size: 10px;
	    padding: 1px 0 0 7px;
	    line-height: 16px;
	}
	.staffing .staffing-case h2 {
		font-size: 33px;
	}
	.staffing .staffing-points h2 {
		font-size: 30px;
	    line-height: 46px;
	}
	.staffing .staffing-points ul li .text {
		margin-top: -32px;
		width: 209px;
		padding: 18px 0 18px 10px;
	}
	.staffing .staffing-points ul li .text:after {
		transform: skew(9deg);
		right: -27px;
	}
	.staffing .staffing-points ul li .text .title {
		font-size: 13px;
	}
	.staffing .staffing-points ul li .text span {
		right: -39px;
		top: 3px;
		font-size: 47px;
	}
	.staffing .staffing-points ul li .text p {
		font-size: 11px;
	}
}