@charset "utf-8";

/* =====<=====<=====<=====<=====<=====<===== */
/* !<- GENERAL control ->                    */
/* =====>=====>=====>=====>=====>=====>===== */
.sub .pagetop a {
  top: -74px;
}
.recruit .pagetop a {
  top: -27px;
}
.sub #sec02 {
  background: none;
}
.sub .ftrNav li a {
  font-size: 18px;
}
#driver .ftrNav li:first-child {
  background: url(../img/driver/bnr_04.jpg)no-repeat;
  background-size: cover;
  background-position: center center;
}
#ww .ftrNav li:last-child,
#driver .ftrNav li:last-child {
  background: url(../img/driver/bnr_05.jpg)no-repeat;
  background-size: cover;
  background-position: center center;
}
#ww .ftrNav li:first-child,
#clerk .ftrNav li:first-child {
  background: url(../img/ww/bnr_06.jpg)no-repeat;
  background-size: cover;
  background-position: center center;
}
#clerk .ftrNav li:last-child {
  background: url(../img/clerk/bnr_07.jpg)no-repeat;
  background-size: cover;
  background-position: center center;
}
#clerk .ftrNav,
#ww .ftrNav {
  background: #fff;
}
a.call {
  color: inherit!important;
  pointer-events: none;
  text-decoration: none!important;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- GENERAL control ->                    */
/* =====>=====>=====>=====>=====>=====>===== */

#SV header {
  height: 425px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80px;
}
#SV h2 {
  font-size: 50px;
  color: #fff;
  text-align: center;
  letter-spacing: 5px;
  text-shadow: 0 0 10px #000;
}
#recruit #SV {
  width: 100%;
  min-height: 250px;
  background: url(../img/recruit/sv.jpg)no-repeat;
  background-position: center center;
  background-size: cover;
}
#driver #SV {
  width: 100%;
  min-height: 250px;
  background: url(../img/driver/sv.jpg)no-repeat;
  background-position: center center;
  background-size: cover;
}
#ww #SV {
  width: 100%;
  min-height: 250px;
  background: url(../img/ww/sv.jpg)no-repeat;
  background-position: center center;
  background-size: cover;
}
#clerk #SV {
  width: 100%;
  min-height: 250px;
  background: url(../img/clerk/sv.jpg)no-repeat;
  background-position: center center;
  background-size: cover;
}
#affiliate #SV {
  width: 100%;
  min-height: 250px;
  background: url(../img/affiliate/sv.jpg)no-repeat;
  background-position: center center;
  background-size: cover;
}
#flow #SV {
  width: 100%;
  min-height: 250px;
  background: url(../img/flow/sv.jpg)no-repeat;
  background-position: center center;
  background-size: cover;
}
#application #SV {
  width: 100%;
  min-height: 250px;
  background: url(../img/application/sv.jpg)no-repeat;
  background-position: center center;
  background-size: cover;
}
.sub #GNav>ul>li a {
  color: #fff;
}
.sub #GNav>ul>li .second.on>li a:not(.now) {
  color: #000!important;
}

/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDER control ->   recruit.html       */
/* =====>=====>=====>=====>=====>=====>===== */

#recruit #sec01 a {
  display: block;
  color: #000;
  z-index: 999999;
}
#recruit #sec01 .cntBox .inner {
  width: 750px;
  justify-content: space-between;
}
#recruit #sec01 .cntBox {
  margin: auto;
}
#recruit #sec01 .cntBox+.cntBox {
  margin-top: 50px;
}
#recruit #sec01 header {
  width: 300px;
  margin: 0;
  padding-left: 45px;
  border-bottom: 0;
  background: url(../img/recruit/ico_01.png)no-repeat;
  background-size: 32px 32px;
  background-position: left 3px;
}
#recruit #sec01 .cntBox:nth-of-type(2) header {
  background: url(../img/recruit/ico_02.png)no-repeat;
  background-size: 32px 30px;
  background-position: left 3px;
}
#recruit #sec01 .cntBox:nth-of-type(3) header {
  background: url(../img/recruit/ico_03.png)no-repeat;
  background-size: 32px 24px;
  background-position: left 7px;
}
#recruit #sec01 h3 {
  font-size: 32px;
  line-height: 1.4;
}
#recruit #sec01 .cntBox:first-child h3+span {
  padding-left: .5em;
}
#recruit #sec01 header::after {
  display: none;
}
#recruit #sec01 .cntBox {
  height: 200px;
  background: #f4f3f3;
}
#recruit #sec01 figure+i {
  color: #29af34;
  font-size: 30px;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDER control ->   driver.html        */
/* =====>=====>=====>=====>=====>=====>===== */

.recruit .cg,
.recruit section h2,
.recruit h3,
.recruit section a {
  color: #2dae37;
}
.recruit section a {
  text-decoration: underline;
}
.recruit section h2 {
  font-size: 30px;
  text-align: center;
}
.recruit #sec01 header,
.recruit .cntBox header {
  border: 0;
}
.recruit #sec01 header::after,
.recruit .cntBox header::after {
  display: none;
}
.recruit #sec01 {
  padding-bottom: 80px;
}
.recruit #sec01 figure+header {
  margin: 110px 0 90px;
}
.recruit #sec01 .cntBox header {
  margin-bottom: 30px;
}
.recruit #sec01 .cntBox h3 {
  color: #000;
  font-size: 20px;
}
.recruit #sec01 .cntBox p {
  line-height: 1.9;
}
.recruit #sec01 .cntBox p span {
  display: block;
  margin-bottom: 1em;
  font-size: 18px;
  line-height: 1.7;
}
.recruit #sec01 .cntBox:nth-of-type(2) {
  margin-top: 90px;
  flex-wrap: wrap;
  align-items: flex-start;
}
#driver #sec01 .cntBox:nth-of-type(2) figure.fx .inBox,
#driver #sec01 .cntBox:nth-of-type(2) figure {
  width: 507px;
}
#driver #sec01 .cntBox:nth-of-type(2) figure.fx {
  width: 100%;
  height: 265px;
  margin-top: 50px;
  padding: 8px;
  background: url(../img/driver/sec01_bg.jpg)no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
#driver #sec01 .cntBox:nth-of-type(2) figure.fx::before,
#driver #sec01 .cntBox:nth-of-type(2) figure.fx::after,
#driver #sec01 .cntBox:nth-of-type(2) figure.fx .inBox::before,
#driver #sec01 .cntBox:nth-of-type(2) figure.fx .inBox::after {
  width: 20px;
  height: 20px;
  display: block;
  content: "";
  background: url(../img/driver/ico_04.png)no-repeat;
  background-size: cover;
  position: absolute;
  z-index: 5000;
}
#driver #sec01 .cntBox:nth-of-type(2) figure.fx::before {
  top: 0;left: 0;
}
#driver #sec01 .cntBox:nth-of-type(2) figure.fx::after {
  transform: rotate(-90deg);
  bottom: 0;left: 0;
}
#driver #sec01 .cntBox:nth-of-type(2) figure.fx .inBox::before {
  transform: rotate(90deg);
  top: 0;right: 0;
}
#driver #sec01 .cntBox:nth-of-type(2) figure.fx .inBox::after {
  transform: rotate(-180deg);
  bottom: -0;right: 0;
}

.recruit #sec01 .cntBox:nth-of-type(2) figure:not(.fx) p {
  margin-top: 25px;
  padding: 20px 5px;
  border-top: 2px solid #2dae37;
}

#driver #sec01 .cntBox:nth-of-type(2) figure.fx .inBox {
  margin-top: 0;
  position: static;
}
#driver #sec01 .cntBox:nth-of-type(2) figure.fx .inBox p:first-child {
  height: 115px;
  margin-bottom: 15px;
  padding-top: 1em;
  font-weight: bold;
  font-size: 25px;
  text-align: center;
  background: url(../img/driver/ico_01.png)no-repeat;
  background-size: 87px;
  background-position: center center;
}
#driver #sec01 .cntBox:nth-of-type(2) figure.fx .inBox p span:not(:last-child) {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
}
#driver #sec01 .cntBox:nth-of-type(2) figure.fx .inBox p span:last-child {
  display: block;
  margin-bottom: 0;
  font-size: 18px;
}
#driver #sec01 .cntBox:last-child {
  margin-top: 60px;
  padding: 28px 0 23px;
  border-top: 5px solid #2dae37;
  border-bottom: 5px solid #2dae37;
}
#driver #sec01 .cntBox:last-child h3,
#driver #sec01 .cntBox:last-child ul {
  width: 705px;
  margin: auto;
}
#driver #sec01 .cntBox:last-child h3 {
  font-weight: bold;
  font-size: 18px;
}
#driver #sec01 .cntBox:last-child h3 br {
  display: none;
}
#driver #sec01 .cntBox:last-child ul {
  margin: 15px auto 0;
  padding: 10px 0 15px 120px;
  background: url(../img/driver/ico_02.png)no-repeat;
  background-position: left top;
  background-size: 115px;
}



.recruit #sec02 {
  padding: 60px 0 0;
  background: #f4f3f3;
}
.recruit #sec02>header {
  width: 1100px;
  margin-bottom: 15px;
  border-bottom-color: #fff;
}
#driver #sec02>header h2,
#driver #sec02 .cntBox:last-of-type h3 {
  padding-bottom: 5px;
}
#driver #sec02 .cntBox:first-of-type {
  padding-bottom: 60px;
}
.recruit #sec02 .cntBox:first-of-type h3 {
  width: 200px;
  margin: auto;
  padding-left: 35px;
  font-size: 32px;
  text-align: center;
}
.recruit #sec02 .cntBox header {
  margin-bottom: 0;
}
.recruit #sec02 table {
  margin-top: 60px;
}
#driver #sec02 .cntBox:first-of-type h3 {
  background: url(../img/driver/ico_03.png)no-repeat;
  background-size: 32px;
  background-position: left center;
}
.recruit #sec02 th,
.recruit #sec02 td {
  line-height: 1.6;
}
.recruit #sec02 tr+tr {
  border-top: 33px solid #f4f3f3;
}
.recruit #sec02 th {
  width: 86px;
  font-weight: bold;
  vertical-align: top;
}
.recruitalign-content:  #sec02 ul {
  margin-top: .5em;
}


#driver #sec02 .cntBox:last-of-type {
  padding: 55px 0 100px;
  background: url(../img/driver/sec02_bg.jpg);
  background-size: 9px;
}
#driver #sec02 .cntBox:last-of-type header {
  margin-bottom: 0;
}
#driver #sec02 .cntBox:last-of-type h3 {
  font-size: 30px;
  text-align: center;
}
#driver #sec02 .cntBox:last-of-type .fx {
  margin-top: 50px;
  align-items: flex-start;
  flex-wrap: wrap;
}
#driver #sec02 .cntBox:last-of-type .fx figure:last-child {
  margin-top: 50px;
}
#driver #sec02 .cntBox:last-of-type figure {
  width: 525px;
}
#driver #sec02 .cntBox:last-of-type figure p {
  margin-top: 30px;
  font-size: 17px;
  line-height: 2;
  letter-spacing: 1px;
  text-align: left;
}
#ww #sec02 tr:nth-of-type(5) td br,
#ww #sec02 tr:nth-of-type(7) td br:nth-of-type(1),
#ww #sec02 tr:nth-of-type(10) td br:nth-of-type(1),
#ww #sec02 tr:nth-of-type(11) td br,
#clerk #sec02 tr:nth-of-type(6) td br,
#driver #sec02 tr:nth-of-type(4) td br,
#driver #sec02 tr:nth-last-of-type(1) td br,
#driver #sec02 tr:nth-of-type(9) td br:first-child,
#ww #sec02 tr:nth-last-of-type(1) td br,
#clerk #sec02 tr:nth-last-of-type(1) td br{
  display: none;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDER control ->   ww.html            */
/* =====>=====>=====>=====>=====>=====>===== */

#ww #sec01 {
  padding-bottom: 80px;
}
#ww #sec01 .cntBox figure,
#clerk #sec01 .cntBox figure {
  width: 507px;
}
#ww #sec01 figure:nth-of-type(n+3) {
  margin-top: 80px;
}

#ww #sec02,
#clerk #sec02 {
  padding-bottom: 60px;
}
#ww #sec02 .cntBox:first-of-type h3 {
  background: url(../img/ww/ico_01.png)no-repeat;
  background-size: 32px;
  background-position: left center;
}
#ww.recruit #sec02 tr:nth-of-type(3) {
  border-top-width: 10px;
}
#ww.recruit #sec02 tr:nth-of-type(3) td {
  padding-left: 25px;
  background: url(../img/ww/ico_02.png)no-repeat;
  background-position: left 6px;
  -webkit-background-size: 19px;
  background-size: 19px;
}
#ww.recruit #sec02 tr:nth-of-type(4) td span {
  display: block;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDER control ->   clerk.html         */
/* =====>=====>=====>=====>=====>=====>===== */
#clerk #sec01 p span {
  margin: 1em 0;
}

#clerk #sec02 .cntBox:first-of-type h3 {
  width: 140px;
  background: url(../img/clerk/ico_01.png)no-repeat;
  background-size: 32px;
  background-position: left center;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDER control ->   flow.html          */
/* =====>=====>=====>=====>=====>=====>===== */
#flow .tab {
  width: 1100px;
  margin: auto;
  border-bottom: 5px solid #2dae37;
}
#flow .tab a+a {
  margin-left: 14px;
}
#flow .tab a {
  width: 192px;
  display: inline-block;
  padding: 15px 0 13px;
  color: #fff;
  font-size: 25px;
  text-align: center;
  background: #ddd;
  border-radius: 0 50px 0 0;
  cursor: pointer;
  transition: .6s;
}
#flow .tab a:hover {
  opacity: .8;
}
#flow .tab a.this {
  background: #2dae37;
}
#flow .ww {
  display: none;
}
#flow #sec01 .inner header {
  margin-bottom: 75px;
}
#flow #sec01 .inner header h2 {
  color: #2dae37;
}
#flow .cntBox {
  flex-wrap: wrap;
  align-items: stretch;
}
#flow .flowBox>header {
  width: 1100px;
  margin: 75px auto;
}
#flow .flowBox>header h2 {
  color: #2dae37;
}
#flow .cntBox:nth-of-type(1) {
  width: 1100px;
  padding-bottom: 100px;
}
#flow .cntBox+.cntBox {
  width: 100%!important;
  margin-bottom: 45px;
  padding-top: 63px;
  padding-bottom: 80px;
  background: url(../img/driver/sec02_bg.jpg);
  background-size: 9px;
}
#flow .cntBox+.cntBox h2 {
  color: #2dae37;
  font-size: 30px;
}
#flow #sec01 .cntBox:nth-of-type(1) .inBox{
  height: 520px;
  margin-top: 0;
  background: #f4f3f3;
  position: relative;
}
#flow .cntBox+.cntBox header,
#flow .cntBox+.cntBox .inBox {
  width: 1100px;
  margin: auto;
}
#flow .cntBox+.cntBox header {
  margin-bottom: 75px;
}
#flow #sec01 .cntBox+.cntBox .inBox::before {
  display: none;
}
#flow .cntBox+.cntBox figure {
  width: 335px;
  height: 470px;
  background: #f4f3f3;
}
#flow .cntBox+.cntBox .inBox {
  background: url(../img/flow/driver/bd.png)no-repeat;
  background-size: 750px;
  background-position: center;
  
}
#flow #sec01 .inBox::before {
  width: 40px;
  height: 23px;
  display: block;
  content: "";
  background: url(../img/flow/arrow.png)no-repeat;
  background-size: 40px 23px;
  background-position: center center;
  position: absolute;
  margin: auto;
}
#flow #sec01 .cntBox .inBox:nth-of-type(n+3) {
  margin-top: 95px;
}

#flow #sec01 .inBox:nth-of-type(9)::before,
#flow #sec01 .inBox:nth-of-type(5)::before,
#flow #sec01 .inBox:nth-of-type(1)::before {
  transform: rotate(-90deg);
  top: 245px;right: -72px;
}
#flow #sec01 .inBox:nth-of-type(10)::before,
#flow #sec01 .inBox:nth-of-type(6)::before,
#flow #sec01 .inBox:nth-of-type(2)::before {
  bottom: -63px;right: 0;left: 0;
}
#flow #sec01 .inBox:nth-of-type(3) {
  order: 4;
}
#flow #sec01 .inBox:nth-of-type(7)::before,
#flow #sec01 .inBox:nth-of-type(3)::before {
  transform: rotate(90deg);
  top: 245px;left: -72px;
}
#flow #sec01 .inBox:nth-of-type(4) {
  order: 3;
}
#flow #sec01 .inBox:nth-of-type(8)::before,
#flow #sec01 .inBox:nth-of-type(4)::before {
    bottom: -63px;right: 0;left: 0;
}
#flow #sec01 .inBox:nth-of-type(5) {
  order: 5;
}
#flow #sec01 .inBox:nth-of-type(6) {
  order: 6;
}
#flow #sec01 .inBox:nth-of-type(7) {
  order: 8;
}
#flow #sec01 .inBox:nth-of-type(8) {
  order: 7;
}
#flow #sec01 .inBox:nth-of-type(9) {
  order: 9;
}
#flow #sec01 .inBox:nth-of-type(10) {
  order: 10;
}
#flow #sec01 .flowBox:nth-of-type(2) .inBox:nth-of-type(9)::before,
#flow #sec01 .inBox:nth-of-type(10)::before {
  display: none;
}

#flow #sec01 .inBox p {
  padding: 20px;
  text-align: center;
}

#flow .flowBox {
  display: none;
}
#flow .flowBox.select {
  display: block;
}
#flow #sec01 .inBox figure:nth-of-type(1) p br:nth-of-type(2) {
  display: none;
}

/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDER control ->   affiliate.html     */
/* =====>=====>=====>=====>=====>=====>===== */
#affiliate #sec01 {
  padding-bottom: 150px;
}
#affiliate #sec01 dt,
#affiliate #sec01 dd {
  padding: 20px 0;
  float: left;
}
#affiliate #sec01 dt:nth-of-type(odd),
#affiliate #sec01 dd:nth-of-type(odd) {
  background: #dcf0b9;
}
#affiliate #sec01 dt:nth-last-of-type(1),
#affiliate #sec01 dd:nth-last-of-type(1) {
  padding-bottom: 0;
} 
#affiliate #sec01 dl {
  width: 100%;
  overflow: hidden;
}
#affiliate #sec01 dt {
  width: 205px;
  padding-left: 25px;
  clear: both;
}
#affiliate #sec01 dd {
  width: 894px;
}
#affiliate #sec01 .cntBox+figure {
  margin-top: 90px;
  
}


/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDER control ->   application.html   */
/* =====>=====>=====>=====>=====>=====>===== */
#application #sec01 {
  background: #f4f3f3;
}
#application th,
#application td {
  padding: 20px 10px;
  font-size: 16px;
}
#application .lead {
  width: 883px;
  margin: 50px auto 0;
  text-align: left;
}
#application .lead br {
  display: none;
}
#application table {
  width: 900px;
  margin: 50px auto;
}
#application tr+tr {
  border-top: 2px dotted #fff;
}
#application th {
  width: 32%;
  font-weight: bold;
  line-height: 2;
  overflow: hidden;
}
#application td {
  padding-left: 2em;
}
#application td span.cr {
  display: block;
  margin-bottom: .8em;
  color: #fe291f;
  font-size: 14px;
}
#application td input+span {
  margin-top: .8em;
}
#application td span:not(.cr) {
  display: inline-block;
  width: 22%;
}
#application input[name="tel"],
#application input[name="mail"] {
  width: 78%!important;
  margin: .5em 0;
}
#application th span {
  display: inline-block;
  padding: .5em;
  color: #fe291f;
  font-weight: bold;
  font-size: 12px;
  line-height: 1.6;
  float: right;
  border: 1px solid #fe291f;
  background: #fff;
}
#application label {
  display: block;
}
#application label input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-bottom: 6px;
}
#application input[name="oldyear"] {
  width: 4em!important;
  margin-right: .8em;  
}
#application input[type="text"],
#application textarea,
#application select {
  width: 100%;
  padding: .3em;
  height: 3em;
}
#application select {
  width: 50%;
  font-size: 15px;
}
#application textarea {
  height: 14em;
}
#application table+div {
  margin-top: 85px;
  font-size: 17px;
  text-align: center;
}
#application button {
  width: 300px;
  display: block;
  margin: 20px auto 0;
  padding: 1.2em 0;
  color: #fff;
  font-size: 17px;
  text-align: center;
  border: 1px solid #2dae37;
  background: #2dae37;
  transition: .8s;
}
#application button:hover {
  color: #2dae37;
  background: transparent;
}
#sec01 .cntBox p.error {
  font-weight: normal;
  font-size: 14px;
  text-align: left;
}
#sec01 .cntBox td p.error:nth-of-type(2) {
  display: none;
}