@charset "UTF-8";
/***** ヒーロー画像 ****/
#home {
  position: relative;
  z-index: 10;
}
.work-img {
  width: 100%;
  filter: brightness(80%);
  vertical-align: top;
}
@media(max-width: 420px) {
  .work-img {
    object-fit: cover;
    min-height: 80vh;
    background-size: contain;
  }
}
/***** ここまで *****/

/***** ヒーロー画像の上のテキスト jquery****/
.page-text {
  font-size: 3vw;
  letter-spacing: 10px;
  position: absolute;
  z-index: 20;
  top: 40%;
  left: 15%;
  color: #ffffff;
}
.page-text02 {
  font-size: 2vw;
  letter-spacing: 10px;
  position: absolute;
  z-index: 20;
  bottom: 20%;
  left: 15%;
  color: #ffffff;
}


/***************** 改行 ************/
.sp-work {
  display: none;
}
/***************** 改行 ************/


@media(max-width: 1025px) {
  .page-text {
    font-size: 4vw;
  }
  .page-text02 {
    font-size: 3vw;
    bottom: 10%;
  }
}
@media(max-width: 420px) {
  .page-text {
    font-size: 10vw;
    left: 3%;
  }
  .page-text02 {
    font-size: 6.5vw;
    bottom: 5%;
    left: 3%;
  }
  /***************** 改行 ***********/
  .sp-work {
    display: block;
  }
  .pc-work {
    display: none;
  }
  /***************** 改行 ***********/
}

/******** ここまで *******/

/******** メインコンテンツここから ******/
.work-content-box {
  background-color: #005eac;
  padding: 5%;
}
.work-content-inner {
  padding: 5% 5%;
  border-radius: 1rem;
  background-color: #ffffff;
}
.work-title {
  text-align: center;
  color: #005eac;
  font-size: 2vw;
  padding: 5%;
  letter-spacing: 5px;
}
.work-content-title {
  margin: 5% 0%;
  font-size: 2vw;
  color: #ffffff;
  text-align: center;
  letter-spacing: 10px;
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
  background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
  background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
}
.work-menu-box {
  width: 80%;
  margin: 0 auto;
}
.work-content-menu {
  display: flex;
  justify-content: center;
  margin: 3% 0%;
  border: solid 3px #005eac;
}
.work-img-box {
  width: 40%;
  text-align: center;
  background-color: #f7ef09;
}
.work-icons-img {
  width: 40%;
  background-color: #f7ef09;
  vertical-align: top;
  margin: 3% 0%;
}
.work-text-box {
  padding: 1% 3%;
  width: 60%;
  background-color: #005eac;
}
.work-content-text {
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  text-align: center;
  width: 60%;
  border: solid 0.3rem #ffffff;
  border-radius: 100vh;
  background-color: #008442;
  color: #ffffff;
  font-size: 1.2vw;
}
.work-text-small {
  margin-top: 5%;
  color: #ffffff;
  font-size: 1vw;
}

.work-start-box {
  margin: 5% 0%;
  padding: 1%;
  width: 100%;
  border-radius: 2rem;
  background-color: #005eac;
}
.work-box-01 {
  display: flex;
  align-items: flex-end;
  padding: 5% 2%;
}
.start-job-title {
  padding: 1% 5%;
  border-radius: 100vh;
  background-image: -webkit-gradient(linear, left top, right top, from(#008442), to(#17f556));
  background-image: -webkit-linear-gradient(left, #008442 0%, #17f556 100%);
  background-image: linear-gradient(to right, #008442 0%, #17f556 100%);
  color: #ffffff;
  font-size: 1.5VW;
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
}
.start-text-inner {
  padding: 0% 3%;
  color: #ffffff;
  font-size: 1.2vw;
}
.work-start-img {
  width: 40%;
  vertical-align: top;
  box-shadow: 0.3rem 0.3rem #f7ef09;
  border-radius: 1rem;
}

@media(max-width: 1025px) {
  .work-content-inner {
    padding: 2%;
  }
  .work-menu-box {
    width: 90%;
  }
  .work-content-title {
    font-size: 2.5vw;
    letter-spacing: 8px;
  }
  .work-icons-img {
    width: 50%;
  }
  .work-content-text {
    width: 90%;
    font-size: 2vw;
  }
  .work-text-small {
    font-size: 1.8vw;
  }
  .start-job-title {
    margin: 3% 2%;
    font-size: 2.5vw;
    letter-spacing: 10px;
  }
  .work-start-img {
    width: 100%;
    box-shadow: none;
  }
  .work-box-01 {
    padding: 2% 2%;
    display: block;
  }
  .start-text-inner {
    padding: 0% 3%;
    color: #ffffff;
    font-size: 2.5vw;
    margin-top: 3%;
  }
}
/*************************** スマホ ライフスタイルに合わせる */
@media(max-width: 420px) {
  .work-content-box {
    padding: 2%;
  }
  .work-content-inner {
    padding: 0%;
    border-radius: 0.3rem;
  }
  .work-menu-box {
    width: 97%;
  }
  .work-content-title {
    margin: 0 auto;
    width: 80%;
    padding: 10% 0%;
    font-size: 6.5vw;
    letter-spacing: 5px;
    color: #005eac;
    -webkit-transform: skew(-15deg);
    transform: skew(-15deg);
    background-image: none;
    background-image: none;
    background-image: none;
  }
  .work-content-menu {
    margin: 3% 0%;
    border: none;
  }
  .work-img-box {
    width: 20%;
    background-color: #f7ef09;
  }
  .work-icons-img {
    width: 100%;
    vertical-align: top;
    margin-top: 50%;
  }
  .work-text-box {
    padding: 1% 3%;
    width: 80%;
    background-color: #005eac;
  }
  .work-content-text {
    width: 95%;
    margin-top: 2%;
    padding: 2%;
    border: solid 0.1rem #ffffff;
    border-radius: 100vh;
    background-color: #008442;
    color: #ffffff;
    font-size: 4vw;
  }
  .work-text-small {
    margin-top: 5%;
    padding: 3% 0%;
    color: #ffffff;
    font-size: 4.5vw;
  }
/*********************** スマホ 未経験からでも ***/
  .work-start-box {
    margin: 5% 0%;
    padding: 1%;
    width: 100%;
    border-radius: 0.3rem;
    background-color: #005eac;
  }
  .work-box-01 {
    display: block;
    padding: 5% 2%;
  }
  .start-job-title {
    padding: 2% 5%;
    border-radius: 100vh;
    background-image: -webkit-gradient(linear, left top, right top, from(#008442), to(#17f556));
    background-image: -webkit-linear-gradient(left, #008442 0%, #17f556 100%);
    background-image: linear-gradient(to right, #008442 0%, #17f556 100%);
    color: #ffffff;
    font-size: 5.5VW;
    -webkit-transform: skew(-15deg);
    transform: skew(-15deg);
  }
  .start-text-inner {
    padding: 0% 1%;
    color: #ffffff;
    font-size: 4.8vw;
  }
  .work-start-img {
    box-shadow: 0rem #f7ef09;
    border-radius: 0.5rem;
  }
  .pc-work {
    display: none;
  }
}
/************* メインコンテンツここまで *************/

/************* 受け取りまでの流れここから ***********/

.work-regist-flow {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10%;
}
.work-regist-title {
  color: #ed4c4c;
  font-size: 1.3vw;
  width: 15%;
}

.work-flow-img {
  width: 15%;
  padding: 2%;
}
.work-regist-text {
  width: 70%;
  color: #005eac;
  font-size: 1.3vw;
  margin-left: 5%;
}
.arrow-under {
  margin: 5% 10%;
  width: 30%;
}
.arrow-under-img {
  width: 15%;
}


.work-words-bg {
  display: flex;
  justify-content: space-between;
  background-color: #005eac;
  border: 3px solid #f7ef09;
  border-radius: 100vh;
  margin-bottom: 3%;
}
.work-words {
  -webkit-text-size-adjust: 100%;
  -webkit-appearance: none;
  margin-top: 2%;
  margin-left: 5%;
  font-size: 1.5vw;
  color: #005eac;
}
#tel-phone {
  margin-top: 2%;
  margin-left: 5%;
  font-size: 1.5vw;
  font-weight: 300;
  color: #005eac;
}
.work-words-top {
  padding: 1.5%;
  font-size: 1.3vw;
  color: #f7ef09;
}
#kinpla-mail {
  font-weight: 300;
}
.work-words-bigbox {
  border-radius: 1rem;
  border: solid 5px #005eac;
}
.work-words-title {
  background-color: #005eac;
  color: #f7ef09;
  font-size: 1.5vw;
  padding: 2% 2% 2% 5%;
  letter-spacing: 10px;
}
.work-words-box {
  padding: 2% 5% 2% 5%;
}
.work-words-title-02 {
  width: 20%;
  letter-spacing: 10px;
  color: #005eac;
  font-size: 1.3vw;
  border-bottom: 0.5rem solid #f7ef09;
}
.add-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.add {
  width: 100%;
}
@media(max-width: 1025px) {
  .work-regist-flow {
    margin-left: 2%;
  }
  .work-regist-title {
    color: #005eac;
    font-size: 2vw;
    width: 15%;
  }
  .work-regist-text {
    width: 70%;
    color: #005eac;
    font-size: 2vw;
    margin-left: 2%;
  }
  .work-words-bg {
    display: block;
    background-color: #ffffff;
    border: none;
    border-radius: 0vh;
    text-align: center;
  }
  .work-words-top {
    padding: 0;
    font-size: 2.5vw;
    font-weight: 900;
    color: #005eac;
    letter-spacing: 8px;
  }
  .work-words-title {
    font-size: 2.5vw;
  }
  .work-words-title-02 {
    width: 35%;
    letter-spacing: 10px;
    color: #005eac;
    font-size: 2.5vw;
    border-bottom: 0.5rem solid #f7ef09;
  }
  .work-words {
    margin-top: 2%;
    margin-left: 5%;
    font-size: 2.5vw;
    color: #005eac;
  }
  #tel-phone {
    margin-top: 2%;
    margin-left: 5%;
    font-size: 2.2vw;
    font-weight: 300;
    color: #005eac;
  }
  #kinpla-mail {
    font-weight: 300;
    font-size: 2.5vw;
  }
  .add-box {
    display: block;
  }
  .add {
    width: 100%;
  }
}


@media(max-width: 420px) {

  .work-regist-flow {
    width: 100%;
    margin: 0;
    display: block;
  }
  .work-regist-title {
    color: #ed4c4c;
    font-size: 6.5vw;
    width: 100%;
    text-align: center;
    margin-top: 5%;
  }
  .work-flow-img {
    width: 30%;
    padding: 0%;
    margin-top: 5%;
    margin-left: 35%;
  }
  .work-regist-text {
    width: 100%;
    margin-top: 5%;
    margin-left: 0%;
    padding:5.5%;
    color: #005eac;
    font-size: 5.8vw;
  }
  .arrow-under {
    margin: 10% 0%;
    width: 100%;
    text-align: center;
  }
  .arrow-under-img {
    width: 10%;
  }
  .kara {
    margin: 10% 0%;
    border: 3px solid #005eac;
  }
  .work-words-bg {
    text-align: center;
    margin: 5% 0%;
  }
  .work-words-top {
    font-size: 5.2vw;
    margin: 2% 0%;
    color: #008442;
  }
  .work-words-bigbox {
    border-radius: 0.3rem;
    border: none;
  }
  .work-words-title {
    background-color: #005eac;
    color: #f7ef09;
    font-size: 6.5vw;
    padding: 3% 2% 3% 5%;
    letter-spacing: 10px;
    margin: 10% 0%;
  }
  .work-words-box {
    padding: 2%;
  }
  .work-words-title-02 {
    width: 67%;
    letter-spacing: 10px;
    color: #005eac;
    font-size: 6vw;
    border-bottom: 0.3rem solid #f7ef09;
  }
  .work-words {
    margin-top: 2%;
    margin-left: 5%;
    font-size: 5.5vw;
    color: #005eac;
  }
  #tel-phone {
    margin-top: 2%;
    margin-left: 5%;
    font-size: 5.5vw;
    font-weight: 300;
    color: #005eac;
  }
  #kinpla-mail {
    font-weight: 300;
    font-size: 5.5vw;
  }
  .g-map iframe {
    width: 100%;
  }
  .add {
    width: 100%;
  }
}