@charset "utf-8";


header{
	padding-bottom: 30px;
}

/*--------------------------------------------------------------------*/

.mainvisual{
	margin-bottom: 50px;
}
.mainvisual .area{
	position: relative;
}
.mainvisual .deco{
	position: absolute;
	width: 100%;
	padding: 20px 50px 30px 50px;
	box-sizing: border-box;
	background-color: #fff;
}
.mainvisual .deco .bg{
	min-height: 490px;
	border-radius: .5em .5em 0 0;
	background-image: url("../../images/employer/common/bg_feature.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}
.mainvisual .deco .item{
	position: absolute;
}
.mainvisual .deco .item.ornmnt{
	top: 0;
}
.mainvisual .deco .item.ppl{
	bottom: 0;
}
.mainvisual .deco .item.left{
	left: 0;
}
.mainvisual .deco .item.right{
	right: 0;
}
@media screen and (min-width: 751px) and (max-width: 1199px){
	.mainvisual .deco{
		padding: 1.668vw 4.17vw;
	}
	.mainvisual .deco .bg{
		height: 40.867vw;
		min-height: 0;
		border-radius: 0.584vw 0.584vw 0 0;
	}
	.mainvisual .deco .item.ornmnt{
		width: 36.67vw;
	}
	.mainvisual .deco .item.ornmnt img{
		width: 100%;
	}
	.mainvisual .deco .item.ppl{
		height: 24.103vw;
	}
	.mainvisual .deco .item.ppl img{
		height: 100%;
	}
}
@media screen and (max-width: 750px){
	.mainvisual{
		margin-bottom: 12vw;
	}
	.mainvisual .deco{
		padding: 0;
	}
	.mainvisual .deco .bg{
		min-height: 0;
		height: 68.267vw;
	}
	.mainvisual .deco .item.ornmnt img{
		width: 30vw;
	}
	.mainvisual .deco .item.ppl img{
		width: auto;
		height: 93px;
	}
}

/*--------------------------------------------------------------------*/

.mainvisual .main{
	position: relative;
	z-index: 2;
	color: #fff;
	padding: 100px 0 0 0;
	font-size: 3.2rem;
}
.mainvisual .main .upper{
	justify-content: center;
	align-items: flex-end;
	line-height: 1;
}
.mainvisual .main .upper .logo{
	margin-right: .5em;
}
.mainvisual .main .middle{
	font-size: 4.8rem;
	margin: .8em 0;
}
.mainvisual .main .bottom{
	margin-bottom: 1.5em;
}
.mainvisual .main .mockup img{
	max-width: 679px;
}
@media screen and (min-width: 751px) and (max-width: 1199px){
	.mainvisual .main{
		font-size: 2.669vw;
		padding: 5.004vw 0 0 0;
	}
	.mainvisual .main .upper .logo img{
		max-width: 30vw;
	}
	.mainvisual .main .middle{
		font-size: 4.003vw;
		margin-bottom: 3.336vw;
	}
	.mainvisual .main .mockup img{
		width: 56.631vw;
	}
}
@media screen and (max-width: 750px){
	.mainvisual .main{
		font-size: 4vw;
		padding: 8vw 0 0 0;
	}
	.mainvisual .main .upper .logo img{
		max-width: 30.667vw;
	}
	.mainvisual .main .middle{
		font-size: 8.267vw;
		margin: 6vw 0 4.667vw;
	}
	.mainvisual .main .bottom{
		margin-bottom: 8vw;
	}
	.mainvisual .main .mockup img{
		max-width: 100%;
	}
}

/*--------------------------------------------------------------------*/

.functional{
	background-image: url("../../images/employer/agency/bg_func.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
	padding-bottom: 200px;
}
.functional .head{
	margin-bottom: 70px;
	position: relative;
	z-index: 2;
}
.functional .head .dot{
	
}
.functional .head .ja{
	font-size: 4.8rem;
	color: #333;
}
.functional .head .ja > *{
	font-weight: 900;
}
.functional .head .en{
	color: #d1d1d1;
}
@media screen and (min-width: 751px) and (max-width: 999px){
	.functional{
		padding: 0 2.002vw 20.02vw;
		background-size: cover;
	}
}
@media screen and (max-width: 750px){
	.functional{
		padding: 3.333vw 5.333vw 0;
		background-size: auto 100vw;
		overflow: hidden;
	}
	.functional .head .ja{
		font-size: 6.4vw;
	}
	.functional .head .en{
		font-size: 2.667vw;
		margin-bottom: 3.333vw
	}
}

/*--------------------------------------------------------------------*/

.functional .body .wrap .item:before{
	width: 1px;
	height: 100%;
	background-color: #EBEBEB;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	transform: translateY(-100%);
	transform-origin: center bottom;
}
.functional .body .wrap .item.i1:before{
	transform: translateY(-100%) rotate(45deg);
}
.functional .body .wrap .item.i3:before{
	transform: translateY(-100%) rotate(-45deg);
}
@media screen and (min-width: 751px){

}
@media screen and (max-width: 750px){
	.functional .body .wrap .item:before{
		display: none;
	}
}

/*--------------------------------------------------------------------*/

.functional .body .wrap{
	align-items: stretch;
}
.functional .body .wrap .item{
	width: 31%;
	box-shadow: 0 0 28px rgba(0,0,0,.11);
	position: relative;
	border-radius: .5em .5em 0 0;
	background-color: rgba(255,255,255,.96);
}
.functional .body .wrap .item .num{
	display: inline-block;
	padding: 5px 2em;
	background-color: #333;
	border-radius: 3em;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: auto;
}
.functional .body .wrap .item .num img{
	height: 22px;
}
.functional .body .wrap .item .img{
	background-color: #FF6565;
	min-height: 162px;
	justify-content: center;
	border-radius: .5em .5em 0 0;
}
.functional .body .wrap .item .img img{
	width: 105px;
	max-width: 105px;
	margin-top: 10%;
}
@media screen and (min-width: 751px){

}
@media screen and (max-width: 750px){
	.functional .body .wrap{
		flex-wrap: wrap;
		text-align: center;
	}
	.functional .body .wrap .item{
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 10.667vw;
		border-radius: 0.933vw 0.933vw 0 0;
	}
	.functional .body .wrap .item .num{
		line-height: 1;
		left: 0;
		transform: translate(20%, -40%);
		padding: 1.333vw 5.333vw;
	}
	.functional .body .wrap .item .num img{
		height: 3.733vw;
		width: auto;
	}
	.functional .body .wrap .item .img{
		min-height: 0;
		background-color: transparent;
		border-top: 2vw solid #FF6565;
		padding: 5.333vw 0 0 0;
	}
	.functional .body .wrap .item .img img{
		width: 20.667vw;
		max-width: none;
		margin-top: 0;
	}
}

/*--------------------------------------------------------------------*/

.functional .body .wrap .item .panel{
	padding: 1.5em;
	padding-bottom: 3.5em;
}
.functional .body .wrap .item .panel .index{
	font-size: 2.4rem;
	color: #FF6565;
	margin-bottom: .7em;
}
.functional .body .wrap .item .panel .text{
	line-height: 2;
}
@media screen and (min-width: 751px){

}
@media screen and (max-width: 750px){
	.functional .body .wrap .item .panel{
		padding: 3.333vw 4.667vw 9.333vw;
	}
	.functional .body .wrap .item .panel .index{
		font-size: 4.8vw;
	}
	.functional .body .wrap .item .panel .index br{
		display: none;
	}
	.functional .body .wrap .item .panel .text{
		font-size: 3.2vw;
		line-height: 2;
	}
	.functional .body .wrap .item .panel .text br{
		display: none;
	}
}

/*--------------------------------------------------------------------*/


.functional .body .wrap .item.i2 .img{
	background-color: #06C6A1;
}
.functional .body .wrap .item.i2 .panel .index{
	color: #06C6A1;
}
.functional .body .wrap .item.i3 .img{
	background-color: #EEA168;
}
.functional .body .wrap .item.i3 .panel .index{
	color: #EEA168;
}
@media screen and (min-width: 751px){

}
@media screen and (max-width: 750px){
	.functional .body .wrap .item.i2 .img,
	.functional .body .wrap .item.i3 .img{
		background-color: transparent;
	}
	.functional .body .wrap .item.i2 .img{
		border-color: #06C6A1;
	}
	.functional .body .wrap .item.i3 .img{
		border-color: #EEA168;
	}
}

/*--------------------------------------------------------------------*/

.usage{
	padding: 90px 0 60px 0;
	background-color: #F9F9F9;
}
.usage .head{
	margin-bottom: 50px;
}
.usage .body .each{
	justify-content: flex-start;
	margin-bottom: 70px;
}
.usage .body .each:nth-of-type(even){
	flex-direction: row-reverse;
}
.usage .body .each img{
	max-width: 100%;
	width: auto;
}
.usage .body .each .right{
	margin-left: 10%;
}
.usage .body .each:nth-of-type(even) .right{
	margin-left: 0;
	margin-right: 10%;
}
.usage .body .each .right .index{
	padding: .5em 0 1em 1em;
	margin-bottom: 1.5em;
	border-left: 3px solid #1585D0;
}
.usage .body .each .right .index .case{
	margin-bottom: 1em;
}
.usage .body .each .right .index .case img{
	width: 57px;
}
.usage .body .each .right .index .ja{
	font-size: 2.4rem;
	color: #1585D0;
}
.usage .body .each .right .index .ja > *{
	font-weight: 900;
}
.usage .body .each .right .text{
	max-width: 242px;
	line-height: 2;
}
@media screen and (min-width: 751px) and (max-width: 1199px){
	.usage .body .each{
		margin-bottom: 5.838vw;
		padding: 0 3.336vw;
	}
	.usage .body .each img{
		max-width: 100%;
		width: auto;
	}
	.usage .body .each .right .index{
		padding: 1.251vw 0 0 1.251vw;
		margin-bottom: 2.502vw;
	}
	.usage .body .each .right .index{
		padding: 1.251vw 0 0 1.251vw;
		margin-bottom: 2.502vw;
	}
	.usage .body .each .right .index .case{
		margin-bottom: 1.668vw;
	}
	.usage .body .each .right .index .case img{
		width: 5.838vw;
	}
	.usage .body .each .right .index .ja{
		font-size: 2vw;
	}
	.usage .body .each .right .text{
		font-size: 1.334vw;
	}
}
@media screen and (max-width: 750px){
	.usage{
		padding: 6.667vw 5.333vw 13.333vw;
	}
	.usage .body .each{
		flex-direction: column-reverse;
		margin-bottom: 8vw;
		align-items: flex-start;
	}
	.usage .body .each:nth-of-type(even){
		flex-direction: column-reverse;
	}
	.usage .body .each:last-of-type{
		margin-bottom: 0;
	}
	.usage .body .each .right{
		margin-left: 0;
	}
	.usage .body .each:nth-of-type(even) .right{
		margin-right: 0;
	}
	.usage .body .each .left{
		width: 100%;
	}
	.usage .body .each .right .index{
		padding-bottom: 0.667vw;
		margin-bottom: 5.333vw;
	}
	.usage .body .each .right .index .case{
		margin-bottom: 2.667vw;
	}
	.usage .body .each .right .index .case img{
		width: 8vw;
	}
	.usage .body .each .right .index .ja{
		font-size: 5.333vw;
	}
	.usage .body .each .right .text{
		max-width: none;
		font-size: 3.467vw;
	}
	.usage .body .each .left .img{
		text-align: center;
	}
	.usage .body .each .left .img img{
		max-width: 70vw;
	}
	.usage .body .each.e1 .left .img img{
		max-width: 55vw;
	}
}

/*--------------------------------------------------------------------*/

.faq{
	padding: 100px 0;
}
.faq .head{
	margin-bottom: 40px;
}
.faq .head .index{
	color: #000;
}
.faq .head .en{
	color: #D1D1D1;
}
.faq .body .each{
	padding: 2em;
	border-bottom: 1px solid #E7E7E7;
}
.faq .body .each dt{
	color: #1585D0;
	margin-bottom: 1em;
}
.faq .body .each dd{
	line-height: 1.8;
}
@media screen and (min-width: 751px){

}
@media screen and (max-width: 750px){
	.faq{
		padding: 13.333vw 5.333vw 12vw;
	}
	.faq .body .each{
		padding: 4vw 0 6vw;
	}
	.faq .body .each dt{
		font-size: 3.733vw;
		margin-bottom: 6.667vw;
	}
	.faq .body .each dd{
		font-size: 2.933vw;
	}
}

/*--------------------------------------------------------------------*/

.price .body .banner .right{
	font-size: 2.8rem;
}
.price .body .banner .right .dot:after{
	top: -.1em;
}
@media screen and (min-width: 751px){

}
@media screen and (max-width: 750px){
	.price .body .banner .right{
		font-size: 4vw;
	}
	.price .body .banner .right .lower{
		font-size: 4.8vw;
	}
	.price .body .banner .right .lower .yellow{
		font-size: 7.2vw;
	}
}

/*--------------------------------------------------------------------*/

.commonLink:before{
	display: none;
}
.commonLink .link{
	padding: 60px 0;
}
@media screen and (min-width: 751px){

}
@media screen and (max-width: 750px){
	.commonLink .link{
		padding: 30px 0;
	}
}

/*--------------------------------------------------------------------*/

.cv{
	padding: 40px 0 20px 0;
}
.cv .wrap .item{
	width: 50%;
}
@media screen and (min-width: 751px) and (max-width: 959px){
	.cv .wrap .item{
		width: 40%;
	}
}
@media screen and (max-width: 750px){
	.cv{
		padding: 20px;
	}
	.cv .wrap .item{
		width: 48%;
	}
}