#pageData1{
 background: url(../img/recruit/bg1.jpg) no-repeat center center;
 background-size: cover;
 padding-top: 150px;
 padding-bottom: 250px;
}

#pageData2,
#pageData4{
 position: relative;
}
#pageData2:before,
#pageData4:before{
 display: block;
 content: "";
 position: absolute;
 width: 100%;
 height: 345px;
 left: 0px;
 top: -170px;
 background: #0d1644;
 transform: skewY(-8deg);
 z-index: 2;
}
#pageData2:after{
 display: block;
 content: "";
 position: absolute;
 width: 100%;
 height: 345px;
 left: 0px;
 bottom: -170px;
 background: #0d1644;
 transform: skewY(-8deg);
 z-index: 2;
}
#pageData2 .inner,
#pageData4 .inner{
 position: relative;
 z-index: 3;
}
#pageData3{
 padding: 300px 0px;
 overflow: hidden;
}
#pageData3 .styleTtl{
 margin-bottom: 30px;
 position: relative;
 z-index: 2;
}
#pageData3 .member1{
 position: relative;
}
#pageData3 .member1 .bg{
 transform: skewY(-8deg);
 width: 100%;
 height: 163%;
 overflow: hidden;
 position: absolute;
 top: -55%;
 left: 0px;
}
#pageData3 .member1 .bg:before{
 display: block;
 content: "";
 width: 150%;
 height: 160%;
 background: url(../img/recruit/member1.png) no-repeat center center;
 background-size: contain;
 position: absolute;
 z-index: 1;
 top:  -30%;
 left: -25%;
 transform: skewY(8deg);
}
#pageData3 .member2{
 position: relative;
}
#pageData3 .member2 .bg{
 transform: skewY(-8deg);
 width: 100%;
 height: 125%;
 overflow: hidden;
 position: absolute;
 top: 6%;
 left: 0px;
}
#pageData3 .member2 .bg:before{
 display: block;
 content: "";
 width: 150%;
 height: 168%;
 background: url(../img/recruit/member2.png) no-repeat center center;
 background-size: contain;
 position: absolute;
 z-index: 1;
 top:  -34%;
 left: -25%;
 transform: skewY(8deg);
}
#pageData3 .member1 .text,
#pageData3 .member2 .text{
 position: relative;
 z-index: 2;
 width: 40%;
}
#pageData3 .member2{
 padding-top: 70px;
}
#pageData3 .member2 .maxWidth{
 display: flex;
 justify-content: flex-end;
}
#pageData4{
 padding-bottom: 100px;
}

.pageBox{
 background: #fff;
 box-shadow:2px 2px 10px rgba(0,0,0,0.2);
 padding: 30px;
}
.scheduleList{
 position: relative;
}
.scheduleList:before{
 position: absolute;
 content: "";
 display: block;
 height: 100%;
 border-left: solid 2px #ea5413;
 left: 60px;
}
.scheduleList li{
 display: flex;
}
.scheduleList li .time .inner{
 position: relative;
 background: #ea5413;
 color: #fff;
 width: 120px;
 height: 120px;
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 50%;
 text-align: center;
}
.scheduleList li .time .inner .btm{
 border-top: solid 1px #fff;
 padding: 5px;
 margin-top: 5px;
}
.scheduleList li .data{
 display: flex;
 margin: 15px;
 padding-top: 30px;
 width: 100%;
 box-sizing: border-box;
 border-bottom: dashed 1px #0d1644;
 padding-bottom: 15px;
}
.scheduleList li:last-child .data{
 border-bottom: none;
}
.scheduleList li .data .text{
 width: 50%;
}
.scheduleList li .data .photo{
 width: 50%;
}

/*
===================================================
	pc small
===================================================
*/
@media screen and (max-width: 1400px) {
 #pageData3 .member1 .bg{
  transform: skewY(-8deg);
  width: 100%;
  height: 169%;
  overflow: hidden;
  position: absolute;
  top: -59%;
  left: 0px;
 }
 #pageData3 .member1 .bg:before{
  display: block;
  content: "";
  width: 250%;
  height: 250%;
  background: url(../img/recruit/member1.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  z-index: 1;
  top:  -70%;
  left: -90%;
  transform: skewY(8deg);
 }
 #pageData3 .member2 {
  padding-top: 70px;
 }
 #pageData3 .member2 .bg{
  transform: skewY(-8deg);
  width: 100%;
  height: 122%;
  overflow: hidden;
  position: absolute;
  top: 7.5%;
  left: 0px;
 }
 #pageData3 .member2 .bg:before{
  display: block;
  content: "";
  width: 250%;
  height: 250%;
  background: url(../img/recruit/member2.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  z-index: 1;
  top:  -63%;
  left: -49%;
  transform: skewY(8deg);
 }
 #pageData3 .member1 .text,
 #pageData3 .member2 .text{
  position: relative;
  z-index: 2;
  width: 50%;
 }
}

/*
===================================================
	sp
===================================================
*/
@media screen and (max-width: 960px) {
 #pageData1{
  background: url(../img/recruit/bg1.jpg) no-repeat center center;
  background-size: cover;
  padding-top: 50px;
  padding-bottom: 180px;
  font-size: 80%
 }

 #pageData2:before,
 #pageData4:before{
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 345px;
  left: 0px;
  top: -100px;
  background: #0d1644;
  transform: skewY(-8deg);
  z-index: 2;
 }
 #pageData2:after{
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 345px;
  left: 0px;
  bottom: -100px;
  background: #0d1644;
  transform: skewY(-8deg);
  z-index: 2;
 }

 #pageData3{
  padding: 200px 0px;
  overflow: hidden;
 }
 #pageData3 .styleTtl{
  margin-bottom: 0px;
  position: relative;
  z-index: 2;
  padding: 0px 0px 30px 30px;
 }
 #pageData3 .member1 {
  padding-top: 15px;
 }
 #pageData3 .member1 .bg{
  transform: skewY(-8deg);
  width: 100%;
  height: 75vw;
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0%;
 }
 #pageData3 .member1 .bg:before{
  display: block;
  content: "";
  width: 200%;
  height: 200%;
  background: url(../img/recruit/member1.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  z-index: 1;
  top:  -55%;
  left: -90%;
  transform: skewY(8deg);
 }
 #pageData3 .member2 .bg{
  transform: skewY(-8deg);
  width: 100%;
  height: 75vw;
  overflow: hidden;
  position: absolute;
  top: 8.5%;
  left: 0px;
 }
 #pageData3 .member2 .bg:before{
  display: block;
  content: "";
  width: 240%;
  height: 240%;
  background: url(../img/recruit/member2.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  z-index: 1;
  top:  -75%;
  left: -15%;
  transform: skewY(8deg);
 }


 #pageData3 .member1 .text,
 #pageData3 .member2 .text{
  position: relative;
  z-index: 2;
  width: 90%;
  margin: 0 auto;
 }

 #pageData3 .member1 .pageBox{
  margin-top: 50vw;
 }

 #pageData3 .member2 .pageBox{
  margin-top: 55vw;
 }

 .pageBox{
  background: #fff;
  box-shadow:2px 2px 10px rgba(0,0,0,0.2);
  padding: 15px;
  font-size: 85%;
 }
 .scheduleList{
  position: relative;
 }
 .scheduleList:before{
  position: absolute;
  content: "";
  display: block;
  height: 100%;
  border-left: solid 2px #ea5413;
  left: 40px;
 }
 .scheduleList li{
  display: flex;
 }
 .scheduleList li .time .inner{
  position: relative;
  background: #ea5413;
  color: #fff;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  text-align: center;
  font-size: 80%;
 }
 .scheduleList li .time .inner .btm{
  border-top: solid 1px #fff;
  padding: 5px;
  margin-top: 5px;
 }
 .scheduleList li .data{
  display: block;
  margin: 15px;
  padding-top: 10px;
  width: 100%;
  box-sizing: border-box;
  border-bottom: dashed 1px #0d1644;
  padding-bottom: 15px;
 }
 .scheduleList li .data .text{
  width: auto;
 }
 .scheduleList li .data .photo{
  width: auto;
  margin-top: 10px;
 }
}