@charset "utf-8";
/* CSS Document */
.icon-box{
	padding-bottom: 450px;
}
.icon-box h2{
	font-size: 46px;
	text-align: right;
}
.icon-box h3{
	font-size: 32px;
	text-align: right;
}
.icon-box .icon-1{
	width: 1294px;
	position: absolute;
	top:-80px;
	left:-312px;
	z-index: 1;
}
.icon-box .icon-2{
	width: 586px;
	position: absolute;
	top:560px;
	right:0;
	z-index: 1;
}
.icon-box .icon-3{
	width: 472px;
	position: absolute;
	top:702px;
	left:-86px;
	z-index: 1;
}
.icon-box .text{
	width: 455px;
	float: right;
	z-index: 1;
}
.icon-box .mae{
	position: relative;
	z-index: 3;
}

.mes-area{
	transform: skew(0deg, 10deg);
	overflow: hidden;
	padding-bottom: 120px;
	position: relative;
}
.mes-area .bg-area{
	transform: skew(0deg, -25deg);
	overflow: hidden;
	position: absolute;
	top:1060px;
	width: 100%;
	left:0;
	z-index: -1;
	padding-top: 2600px;
}
.mes-area .bg-area::before{
	background: url("../images/recruit/bg_01.jpg") repeat center top;
	background-size:cover;
	transform: skew(0deg, 15deg);
	position: absolute;
	top:-260px;
	width: 100%;
	left:0;
	padding-top: 2600px;
	display: block;
	content: "";
	z-index: -1;
}
.mes-area .container{
	transform: skew(0deg, -10deg);
	position: relative;
	z-index: 3;
}
.mes-area h3{
	text-align: right;
	margin-bottom: 25px;
	font-weight:500;
}
.mes-area h3 span,.mes-area h3 img{
	vertical-align: bottom;
}
.mes-area h3 span{
	font-size: 24px;
	opacity: 0.8;
	vertical-align: middle;
	margin-right: 20px;
	line-height: 3.8;
}
.mes-area h3 img{
	width: 386px;
}
.mes-box{
	padding-top: 205px;
}
.mes-area .tex-area{
	background: #fff;
	padding:76px 56px 93px 116px;
	width: 677px;
	margin-left: 360px;
	position: relative;
	z-index: 2;
	border-radius: 20px;
	font-size: 16px;
	line-height: 2;
	text-align: left;
	box-shadow: 0px 0px 10px rgba(100,3,198,0.25);
}
.mes-bg{
	background-image: linear-gradient(to right, rgba(4, 93, 196, 0.675), rgba(99, 51, 162, 0.75) 48%, rgba(191, 11, 191, 0.75));
	width: 100%;
	left:0;
	position: absolute;
	z-index: 1;
	top:580px;
	height: 450px;
	opacity: 0.2;
	transform: skew(0deg, -10deg);
}
.mes-area .tex-area h4{
	font-size: 32px;
	text-align: left;
	line-height: 1.68;
	font-weight: 500;
}
.mes-area .tex-area .name{
	font-size: 31px;
	margin-top: 105px;
}
.mes-area .tex-area .name span{
	font-size: 17px;
}
.cont-box{
	margin-top: 160px;
}
.cont-box dt{
	border-radius: 30px;
	background-image: linear-gradient(to right, rgba(4, 93, 196, 0.675), rgba(99, 51, 162, 0.7) 48%, rgba(191, 11, 191, 0.7));
	font-size: 24px;
	color:#fff;
	line-height: 1;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 24px; 
}
.cont-box dd{
	line-height: 2;
}
.cont-box dd p{
	margin-bottom: 0;
	text-indent: -1em;
	padding-left: 1em;
}
.bottom-head{
	position: relative;
}
.bottom-head::after{
	content: "";
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	background: #BFBFBF;
	opacity: 0.56;
	height: 11px;
	z-index: 1;
}
.bottom-head h3{
	margin-bottom: 0;
}
.bottom-head h3 img{
	width: 437px;
	position: relative;
	z-index: 2;
}
.bottom-head span{
	font-size: 24px;
	vertical-align: bottom;
	display: inline-block;
	padding-bottom: 28px;
	opacity: 0.8;
	font-weight: 500;
}
.bottom-bg{
	padding-top: 50px;
	padding-bottom: 170px;
	background: url("../images/recruit/bg_02.jpg") no-repeat left top;
	background-size:cover;
}
.bottom-bg h4{
	font-size: 28px;
	font-weight: 500;
	line-height: 1.6;
}
.bottom-bg .name{
	font-size: 21px;
	font-weight: 500;
}
.bottom-bg .icon{
	position: relative;
	z-index: 2;
}
.bottom-bg .color-bg-1{
	position: absolute;
	width: 325px;
	right:-100px;
	top:67px;
	z-index: 1;
}
.bottom-bg .color-bg-2{
	position: absolute;
	width: 325px;
	left:-100px;
	top:67px;
	z-index: 1;
}
.rec-btn{
	padding-top: 85px;
	padding-bottom: 85px;
	background: rgba(214,210,210,0.56)
}
.rec-btn .btn-box{
	width: 686px;
	margin-left: auto;
	margin-right: auto;
}
.btn-box a{
  border-radius: 5px;
  padding:28px 0 28px 0px;
  background-image: linear-gradient(to right, #5c1880 0%, #045bc3 100%);
	position: relative;
	display: block;
	width: 100%;
	color:#fff;
	text-align: center;
	font-weight: bold;
	font-size: 24px;
	line-height: 1;
}
.btn-box a .yajirushi{
	width: 24px;
	display: inline-block;
	vertical-align: top;
}
@media (min-width: 768px) {
	.icon-box h3.mae{
		letter-spacing: -1px;
	}
	.icon-box h2.mae{
		margin-top: -25px;
	}
	.icon-box .mae{
		margin-top: -15px;
	}
	.kontaro-box .icon-box{
		margin-left: -118px;
		width: 555px;
		float: left;
	}
	.kontaro-box .text{
		float: left;
		margin-left: 20px;
		width: 534px;
		padding-top: 180px;
	}
	.big-img{
		position: absolute;
		right: -198px;
		width: 700px;
		top: -127px;
	}
	.kind-box ul li:nth-child(2n){
		margin-right: 0;
	}
	.mes-area{
		margin-top: -50px;
	}
.mes-area .ex-pic{
	position: absolute;
	z-index: 3;
	top:220px;
	left:-123px;
	width: 570px;
}
.mes-area .ex-pic-2{
	position: absolute;
	z-index: 3;
	bottom:-88px;
	left:-37px;;
	width: 526px;
}
}
@media only screen and (max-width : 767px) {
.icon-box{
	padding-bottom: 3%;
}
.icon-box h2{
	    font-size: 7.2vw;
    padding-top: 33%;
    padding-bottom: 3%;
    margin-bottom: 100%;
    padding-left: 24px;
    padding-right: 24px;
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
    text-align: right;
	position: relative;
	z-index: 1;
	border-bottom: 1px solid #707070;
}
.icon-box h3{
	font-size: 5.8vw;
	text-align: left;
}
.icon-box .icon-1{
	width:71%;
	position: absolute;
	top:3%;
	left:-12%;
	z-index: 4;
}
.icon-box .icon-2{
	width: 52%;
	position: absolute;
	top:20%;
	right:-6%;
	z-index: 1;
}
.icon-box .icon-3{
	width: 42%;
	position: absolute;
	top:31%;
	left:11%;
	z-index: 1;
}
.icon-box .text{
	width: 100%;
	float: none;
	z-index: 1;
}
.icon-box .mae{
	position: relative;
	z-index: 3;
}

.mes-area{
	transform: skew(0deg, 10deg);
	overflow: hidden;
	padding-bottom: 0px;
	position: relative;
}
.mes-area .bg-area{
	transform: skew(0deg, -25deg);
	overflow: hidden;
	position: absolute;
	top:29%;
	width: 100%;
	left:0;
	z-index: -1;
	padding-top:580%;
}
.mes-area .bg-area::before{
	background: url("../images/recruit/bg_01.jpg") repeat center top;
	background-size:cover;
	transform: skew(0deg, 15deg);
	position: absolute;
	top:-3%;
	width: 100%;
	left:0;
	padding-top:580%;
	display: block;
	content: "";
	z-index: -1;
}
.mes-box{
	/*background: url(../images/recruit/bg_01.jpg) repeat 59% top;
    background-size: 220%;*/
    margin-top: 9%;
    padding-top: 22%;
    padding-bottom: 23%;
    margin-bottom: -28%;
    transform: skew(0deg, -26deg);
    overflow: hidden;
	position: relative;
}
.mes-box::before{
	    background: url(../images/recruit/bg_01.jpg) repeat 20% top;
    background-size: 278%;
    transform: skew(0deg, 21deg);
    position: absolute;
    top: -3%;
    width: 100%;
    left: 0;
    padding-top: 626%;
    display: block;
    content: "";
    z-index: -1;
}
.mes-box .container{
	transform: skew(0deg, 17deg)!important;
}
.mes-area .container{
	transform: skew(0deg, -10deg);
	position: relative;
	z-index: 3;
}
.mes-area h3{
	text-align: left;
	margin-bottom: 8%;
	margin-top: 6%;
}
.mes-area h3 span,.mes-area h3 img{
	vertical-align: bottom;
}
.mes-area h3 span{
	font-size: 5.0vw;
}
.mes-area h3 img{
	width: 80%;
}
/*.mes-box{
	padding-top: 25%;
}*/
.mes-area .tex-area{
	background: #fff;
	padding:10% 24px 68% 24px;
	width: calc(100% + 48px);
	margin-left: -24px;
	margin-right: -24px;
	position: relative;
	z-index: 2;
	border-radius: 0px;
	font-size: 16px;
	line-height: 2;
	text-align: left;
}
.mes-bg{
	background-image: linear-gradient(to right, rgba(4, 93, 196, 0.675), rgba(99, 51, 162, 0.75) 48%, rgba(191, 11, 191, 0.75));
	width: 100%;
	left:0;
	position: absolute;
	z-index: 1;
	top:580px;
	height: 450px;
	opacity: 0.2;
	transform: skew(0deg, -10deg);
}
.mes-area .tex-area h4{
	font-size: 5.8vw;
	text-align: left;
	line-height: 1.68;
}
.mes-area .tex-area .name{
	width: 100%;
	float: none;
	font-size: 6.1vw;
	margin-top: 6%;
}
.mes-area .tex-area .name span{
	font-size: 3.9vw;
}
.mes-area .ex-pic{
	position: absolute;
	z-index: 3;
	top:270px;
	left:-123px;
	width: 570px;
}
.mes-area .ex-pic-2{
	position: relative;
	z-index: 3;
	margin-top: -60%;
	width: 100%;
}
.bottom-box .tel{
	font-size: 10vw;
}
.rec-btn{
	padding-top: 10%;
	padding-bottom: 10%;
}
.rec-btn .btn-box{
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.btn-box a{
  border-radius: 5px;
  padding:5% 0;
  text-align: center;
  background-image: linear-gradient(to right, #5c1880 0%, #045bc3 100%);
	position: relative;
	display: block;
	width: 100%;
	color:#fff;
	font-size: 3.5vw;
}
.cont-box{
	margin-top: 18%;
}
.cont-box dt{
	border-radius: 30px;
	font-size: 4.4vw;
	padding-top: 2%;
	padding-bottom: 2%;
	padding-left: 3%; 
}
.cont-box dd{
	line-height: 1.3;
	font-size: 4.4vw;
}
.cont-box dd p{
	margin-bottom:2%;
}
.cont-box dd.ptn2 p{
	margin-bottom: 2%;
	text-indent: -1.3em;
	padding-left: 1.3em;
}
.cont-box dd p:last-child,.cont-box dd.ptn2 p:last-child{
	margin-bottom: 2%;
}
.bottom-head{
	position: relative;
}
.bottom-head::after{
	content: "";
	height: 7px;
}
.bottom-head h3{
	margin-bottom: 0;
}
.bottom-head h3 img{
	width: 90%;
}
.bottom-head span{
	font-size: 5.0vw;
	vertical-align: bottom;
	display: block;
	margin-bottom: 0;
	padding-bottom: 0;
}
.bottom-bg{
	padding-top: 8%;
	padding-bottom: 20%;
	background: url("../images/recruit/bg_02.jpg") no-repeat left top;
	background-size:220%;
}
.bottom-bg h4{
	font-size: 5.8vw;
}
.bottom-bg .name{
	font-size: 5.8vw;
}
.bottom-bg .icon{
	position: relative;
	z-index: 2;
}
.bottom-bg .color-bg-1{
	position: absolute;
	width: 80%;
	right:-8%;
	top:auto;
	bottom:-12%;
	z-index: 1;
}
.bottom-bg .color-bg-2{
	position: absolute;
	width: 80%;
	left:-8%;
	top:auto;
	bottom:-12%;
	z-index: 1;
}
.rec-btn{
	padding-top: 10%;
	padding-bottom: 10%;
	background: rgba(214,210,210,0.56)
}
.rec-btn .btn-box{
	width:82%;
	margin-left: auto;
	margin-right: auto;
}
	.btn-box a .yajirushi{
		width: 5%;
	}
.btn-box a{
  border-radius: 5px;
  padding:8% 0 8% 0px;
  background-image: linear-gradient(to right, #5c1880 0%, #045bc3 100%);
	position: relative;
	display: block;
	width: 100%;
	color:#fff;
	text-align: center;
	font-weight: bold;
	font-size: 3.3vw;
}
/*.btn-box a::after{
	background: url("../images/index/yajirushi_w.png") no-repeat right top;
	background-size:100%;
	width: 19px;
	height: 19px;
	position: absolute;
	right:10%;
	top:5vw;
	content:"";
}*/
}