@charset "UTF-8";
header{
	background-image:url("../images/1856252.jpg");
	background-repeat:no-repeat;
	background-position:center;
	background-size: cover;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content:center;
	align-items: center;
	position: relative;
}
header img{
	position: absolute;
	width: 100%;
	max-width: 430px;
	height: auto;
	margin-top: -80px;
	animation: a 4s ease;
	animation-fill-mode: forwards;
}
@keyframes a {
	0%{top:-10px;transform:scale(0.5)}
	50%{top:40%;transform:scale(.7)}
	100%{top:40%;transform:scale(1)}
}
main .service-title{
	text-align: center;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 150%;
	color:hsla(359,94%,45%,1.00);
	text-shadow: .5px .5px 0px white;
	font-weight: 900;
	
}
main h2{
	text-align: center;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 120%;
}
main h3{
	width: 100px;
	margin: auto;
	background: hsla(217,100%,25%,1.00);
	height: 3px;
	margin-top: 10px;
	margin-bottom: 30px;
}
#service{
	overflow: hidden;
	padding: 10px;
	padding-top: 35px;
	padding-bottom: 30px;
}

#service .right img{
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}
#service .left {
	
}
#service h4{
	font-size: 105%;
	font-weighs: 600;
}
#service p{
	font-size: 98%;
	color: hsla(0,0%,8%,1.00);
	margin-top: 8px;
}
#work{
	padding: 10px;
	padding-top: 35px;
	background: hsla(0,0%,97%,1.00);
	padding-bottom: 45px;
}
#work dl{
	text-align: center;
	margin-top: 30px;
	margin-bottom: 50px;
}
#work dt{
	font-weight: 600;
	font-size: 120%;
}
#work .counter{

	font-size: 50px;
	letter-spacing: 0.09em;
	color: black;
	margin: 12px 0;
	z-index: 3;
}
#work dd{
	
	color: hsla(0,0%,25%,1.00);
}
#work table{
	width: 100%;
	padding: 5px;
	margin: auto;
}
#work td, #work th{
	padding: 10px 6px;
	background: white;
}
#work td{
	font-size: 95%;
}
#work th{
	font-weight: bold;
	text-align: center;
}
/*-ーーーーーーーーRESOURCE - 人材支援　ここからーーーーーーーー*/
.main-id{
	padding:30px 10px;
}
.main-id img{
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}
.main-id h4{
	font-size: 108%;
	font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-weight: 600;
	margin-top: 20px;
}
.main-id p{
	font-size: 98%;
	color: hsla(0,0%,8%,1.00);
	margin-top: 8px;
}
.main-id .fa-angles-down{
	display: none;
}
.business{
	overflow: hidden;
}
.business h5{
	font-size: 108%;
	font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-weight: 600;
	margin-top: 10px;
}
.business ul{
	display: flex;
	justify-content:space-between;
	flex-wrap:wrap;
	margin: auto;
	text-align: center;
	margin-top: 30px;
}
.business ul li{
	width: 48%;
	margin-bottom: 30px;
}
.business ul li p:nth-child(2){
	font-size: 105%;
	margin: 5px 0;
	font-weight: 600;
}
.business ul li i{
	font-size: 300%;
	color:hsla(0,0%,10%,1.00);
	margin-bottom: 10px;
}
.business ul li br{
	display: none;
}
/*-ーーーーーーーーRESOURCE - 人材支援　ここまでーーーーーーーー*/
#integration{
	background:  hsla(0,0%,97%,1.00);
}
@media Screen and (min-width:768px){
	header img{
		max-width: 530px;
	}
	main .service-title{
		font-size: 180%;
	}
	#service{
		padding-top: 40px;
		max-width: 1200px;
		width: 93%;
		margin: auto;
		padding-bottom: 50px;
	} 
	#service .left{
		padding-top: 30px;
		float: left;
		width: 45%;
		padding-bottom: 50px;
	}
	#service .right{
		padding-top: 30px;
		float: right;
		width: 50%;
		padding-bottom: 50px;
	}
	#service h4{
		font-size: 110%;
	}
	#service p{
		font-size: 100%;
	}
	#work{
		clear: both;
		padding-top: 40px;
	}
	#work .solieu{
		display: flex;
		justify-content:space-around;
		max-width: 1200px;
		margin: auto;
	}
	#work dl{
		width: 30%;
	}
	#work table{
		width: 93%;
		max-width: 1200px;
	}
	.main-id{
		padding: 0;
		position: relative;
	}
	.main-id img{
		display: none;
	}
	.resource{
		position: relative;
	}
	.main-id .img{
		background-image: url("../images/robot.jpg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		width: 100%;
		height: 550px;
		position: relative;
	}
	#integration .img{
		background-image: url("../images/ser4.jpg");
		height: 650px;
	}
	#verification .img{
		background-image: url("../images/ser3.jpg");
	}
	.main-id .left{
		position: absolute;
		left: 50%;
		top:50%;
		transform: translate(-50%,-50%);
		width: 80%;
		padding: 30px 50px;
		background:hsla(0,0%,97%,0.9);
		box-sizing: border-box;
		border-radius: 2px;
		max-width: 800px;
		color: black
	}
	.main-id .left p{
		color:black;
	}
	.main-id p{
		color: black;
	}
	.main-id .fa-angles-down{
		display: block;
		font-size: 250%;
		margin: auto;
		text-align: center;
		animation : quay1 4s infinite;
		left: 49%;
		z-index: 99;
		position: absolute;
	}
	@keyframes quay1{
		0%{transform:rotateY(0deg);margin-top:-90px;opacity:1}
		100%{transform:rotateY(720deg);margin-top:20px;opacity:1}
	}
	.business h5{
		text-align: center;
		clear: both;
		font-size: 200%;
		margin: 30px;
		position: relative;
		z-index: 3;
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		font-weight: 600;
		margin-top: 60px;
		color:hsla(358,75%,49%,1.00);
	}
	.business h5::before{
		content: 'BUSINESS';
		position: absolute;
		left: 50%;
		top:50%;
		transform: translate(-50%,-50%);
		font-size: 250%;
		color:hsla(0,0%,77%,0.18);
		mix-blend-mode: screen;
		z-index: 0;
		font-style: italic;
	}
	.business p{
		text-align: center;
		width: 700px;
		margin: auto;
	}
	.business {
		max-width: 1200px;
		margin: auto;
		padding-bottom: 50px;
	}
	.business ul{
		clear: both;
		width: 96%;
		margin: auto;
		text-align: center;
		
		
	}
	.business ul li i{
		font-size: 400%;
	}
	.business ul li{
		margin-top: 50px;
		box-sizing: border-box;
		width: 31%;
		margin-bottom: 30px;
	}
	.business ul li p{
		width: 100%;
		
	}
	#integration ul li{
		width: 23%;
	}
	.business ul li br{
		display: block;
	}
	.business ul li p:nth-child(2){
		margin: 13px 0;
	}
	
}