@charset "UTF-8";


/** 研修体制
---------------------------------------------**/
.training .title-area {
  background-image: url(../images/recruit/training.jpg);
}

.training .container-inner {
  width: 100%;
  position: relative;
}

.training .container-inner::before {
  content: '';
  display: block;
  width: 100%;
  height: 80rem;
  background-color: #ecf4ff;
  position: absolute;
  left: 0;
  top: 65rem;
  z-index: -1;
}

.training .content-area {
  width: 150rem;
  margin: 0 auto 17rem;
}


.stepup-flow {
  display: flex;
}

.stepup-flow li {
  width: 25%;
  padding: 0 3rem 7rem 4rem;
  position: relative;
}

.stepup-flow li.stepup-1 {
  padding-top: 24rem;
}

.stepup-flow li.stepup-2 {
  padding-top: 16rem;
}

.stepup-flow li.stepup-3 {
  padding-top: 8rem;
}

.stepup-flow li::after {
  content: '';
  display: block;
  width: 100%;
  height: calc(100% - 26rem);
  background-color: #ecf4ff;
  border-radius: 3rem 0 0 0;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.stepup-flow li.stepup-1::after {
  height: calc(100% - 52rem);
}

.stepup-flow li.stepup-2::after {
  height: calc(100% - 44rem);
}

.stepup-flow li.stepup-3::after {
  height: calc(100% - 34rem);
}

.img-box {
  margin: 0 auto 5rem;
}

.flow-title {
  margin-bottom: 3rem;
  color: #00a99d;
  text-align: center;
}

.check-icon {
  padding: 0.5rem 0 0.5rem 4.7rem;
  background: url(../images/recruit/check.png) left center / 4.5rem no-repeat;
  font-size: 2.6rem;
  line-height: 1;
}

.stepup-flow section:not(:last-child) {
  margin-bottom: 6rem;
}

.stepup-flow p {
  font-size: 1.6rem;

}

.stepup-flow p:last-child {
  margin-bottom: 0;
}

.content-note {
  width: 130rem;
  margin: 0 auto;
  padding: 3rem;
  background-color: #fff;
  border-radius: 3rem;
}

.content-note::before {
  content: '';
  display: block;
  height: 2.3rem;
  margin-bottom: 8rem;
  background: url(../images/recruit/dot.png) center center / contain no-repeat;

}

.note-title {
  margin-bottom: 8rem;
  font-size: 2.6rem;
  text-align: center;
}

.note-list-wrap {
  display: flex;
  justify-content: center;
}

.note-item {
  min-width: 23rem;
  width: 23rem;
  margin-right: 12rem;
}

.note-item:last-child {
  margin-right: 0;
}

.list-title {
  margin-bottom: 4rem;
  padding: 1rem;
  background-color: #00a99d;
  border-radius: 3rem;
  font-size: 2rem;
  color: #fff;
  text-align: center;
}

.note-list {
  padding-left: 2em;
}

.note-list li {
  margin-bottom: 2rem;
  list-style-type: disc;
}


@media screen and (max-device-width: 768px) {
  .training .title-area {
    background-image: url(../images/sp/recruit/training_sp.jpg);
  }

  .training .page-container {
    padding: 7.5rem 0 0;
  }

  .training .content-area {
    width: 100%;
    margin: 0 auto 7rem;
    padding: 0 1.5rem;
  }

  .training .container-inner::before {
    height: 64.5%;
    top: inherit;
    bottom: 23%;
  }

  .stepup-flow {
    flex-direction: column;
    max-width: 350px;
    margin: 0 auto;
  }

  .stepup-flow li {
    width: 100%;
    margin-bottom: 3rem;
  }

  .stepup-flow li.stepup-1,
  .stepup-flow li.stepup-2,
  .stepup-flow li.stepup-3,
  .stepup-flow li.stepup-4  {
    padding: 0 1.5rem 3rem 2rem;
  }

  .stepup-flow li.stepup-1::after,
  .stepup-flow li.stepup-2::after,
  .stepup-flow li.stepup-3::after,
  .stepup-flow li.stepup-4::after {
    content: none;
  }

  .stepup-flow section:not(:last-child) {
    margin-bottom: 3rem;
  }

  .img-box {
    max-width: 250px;
    margin-bottom: 2.5rem;
    text-align: center;
  }

  .img-box > img {
    width: 15.7rem;
    height: auto;
  }

  .flow-title {
    margin-bottom: 1.5rem;
  }

  .check-icon {
    padding: 0.25rem 0 0.25rem 2.5rem;
    background-size: 2.25rem;
    font-size: 2rem;
  }

  .stepup-flow p {
    font-size: 1.4rem;
  }

  .content-note {
    max-width: 450px;
    width: 85%;
    padding: 1.5rem;
  }

  .content-note::before {
    margin-bottom: 2rem;
  }

  .note-list-wrap {
    flex-direction: column;
  }

  .note-title {
    margin-bottom: 3rem;
    font-size: 2rem;
  }

  .note-item{
    min-width: inherit;
    width: 70%;
    margin: 0 auto 2rem;
  }

  .note-item:last-child {
    margin: 0 auto;
  }

  .list-title {
    margin-bottom: 2rem;
    padding: 0.5rem;
    font-size: 1.4rem;
  }

  .note-list li {
    margin-bottom: 1rem;
  }
}