@charset "UTF-8";
/* CSS Document */


.lead-box {
  padding-block: calc(150 / 750 * 100vw) calc(30 / 750 * 100vw);

  .text-block {
    width: calc(640 / 750 * 100vw);
    margin-inline: auto;
    color: #fff;

    h3 {
      font-size: calc(42 / 750 * 100vw);
      line-height: 1.4285714285714286;
      margin: 0;

      & + .txt {
        margin-top: calc(80 / 750 * 100vw);
      }
    }
  }
}
.txt {
  font-size: calc(28 / 750 * 100vw);
  line-height: 2.142857142857143;
  letter-spacing: .05em;
}
.sec {
  padding-block: calc(190 / 750 * 100vw) calc(220 / 750 * 100vw)
}
.sec-inner {
  display: block;
  width: calc(640 / 750 * 100vw);
  margin-inline: auto;

  .txt {
    margin-bottom: calc(75 / 750 * 100vw);
  }
}

.sec-ttl-set {
  display: flex;
  flex-direction: column-reverse;
  margin-bottom: calc(85 / 750 * 100vw);

  .jp {
    font-size: calc(30 / 750 * 100vw);
    letter-spacing: .05em;
    line-height: 1;
  }
  .en {
    font-size: calc(80 / 750 * 100vw);
    line-height: 1;
    margin-bottom: calc(20 / 750 * 100vw);
  }
}



.intro,
.system-sec {
  color: #fff;
}
.career-path,
.feature-sec,
.strength,
.process {
  background-color: rgba(255, 255, 255, .85);
}

.other-job,
.jobtypes {
  color: #fff;

  .view-more-bttn {
    width: calc(284 / 750 * 100vw);
    height: auto;

    &::after {
      background-color: #fff;
    }
    a {
      font-weight: 600;
      font-size: calc(25 / 750 * 100vw);
      letter-spacing: .04em;
      color: #fff;

      .inner {
        padding-bottom: .4em;

        &::after {
          background-color: #fff;
        }
      }
    }
  }
}
.jobtypes {
  .job-type {

    &:nth-child(3) {
      display: flex;
      flex-direction: column-reverse;
    }
    & + & {
      margin-top: calc(180 / 750 * 100vw);
    }
  }

}

.sec.other-job {
  padding-bottom: calc(100 / 750 * 100vw);

  .job-type + .job-type {
    margin-top: calc(135 / 750 * 100vw);
  }
  .view-more-bttn {
    margin-top: calc(75 / 750 * 100vw);
  }

}
.job-ttl-set {
  display: flex;
  flex-direction: column-reverse;
  color: #fff;
  margin-top: calc(60 / 750 * 100vw);

  .jp {
    font-size: calc(30 / 750 * 100vw);
    letter-spacing: .05em;
    line-height: 1;
  }
  .en {
    font-size: calc(62 / 750 * 100vw);
  }
  .other-job & {
    flex-direction: column-reverse;
    justify-content: flex-start;

    .jp {
      margin: .25em 0 .75em;
      font-size: calc(26 / 750 * 100vw);
    }
    .en {
      font-size: calc(42 / 750 * 100vw);
    }
  }
}
.job-txt {
  font-feature-settings: "palt";
  font-size: calc(27 / 750 * 100vw);
  line-height: 1.5555555555555556;
}


.real-case {
  width: 100%;
  overflow: hidden;
  padding-bottom: calc(230 / 750 * 100vw);

  .sec-inner {
    width: calc(640 / 750 * 100vw);
    margin: 0 auto;
  }
  .sec-ttl-set {
    color: #fff;
    margin-bottom: calc(90 / 750 * 100vw);
  }
  .txt {
    padding-bottom: 1em;

    p {
      margin: 0;
      font-size: calc(28 / 750 * 100vw);
      line-height: 2.142857142857143;
      color: #fff;
      text-align: justify;
    }
  }
  .case-list-set {
    position: relative;

    .pagination-area {
      display: block;
      position: relative;
      text-align: right;
      width: calc(640 / 750 * 100vw);
      margin: 0 auto calc(35 / 750 * 100vw);
    }
    .swiper-pagination {
      width: auto;
      display: inline-block;
      position: static;

      .swiper-pagination-bullet {
        border: 2px solid #fff;
        background: transparent;
      }
      .swiper-pagination-bullet-active {
        background: #fff;
      }
    }
  }
  .case-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .case {
    display: flex;
    align-items: flex-end;
    width: calc(640 / 750 * 100vw);
    height: calc(720 / 750 * 100vw);
    position: relative;
    counter-increment: caseNum;

    & + & {
      margin-left: calc(75 / 750 * 100vw);
    }
    .img-box {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
    .text-block {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: 100%;
      height: calc(420 / 750 * 100vw);
      margin-top: auto;
      padding-bottom: calc(50 / 750 * 100vw);
      padding-left: calc(50 / 750 * 100vw);
      background: linear-gradient(0deg, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0.7) 85%, rgba(255, 255, 255, 0) 100%);
      position: relative;
      z-index: +1;

      .number {
        color: #9fa0a0;
        font-weight: 400;
        vertical-align: baseline;
        margin: 0;

        .ttl-case {
          font-size: calc(20 / 750 * 100vw);
          letter-spacing: .08em;

          &::after {
            content: counter(caseNum, decimal-leading-zero)".";
            font-size: calc(44.8 / 750 * 100vw);
            letter-spacing: .05em;
          }
        }
      }
      .lead {
        margin: calc(25 / 750 * 100vw) 0 calc(42 / 750 * 100vw);
        font-size: calc(30 / 750 * 100vw);
        line-height: 1.7333333333333334;
      }
      .view-more-bttn {
        width: calc(284 / 750 * 100vw);
        height: auto;

        &::after {
          background-color: var(--color-blue);
        }
        a {
          font-weight: 600;
          font-size: calc(25 / 750 * 100vw);
          letter-spacing: .04em;
          color: var(--color-blue);

          .inner {
            padding-bottom: .4em;

            &::after {
              background-color: var(--color-blue);
            }
          }
        }
      }
    }
  }
}

.work-flow {
  color: #fff;

  .flows {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: flow-count;

    li {
      counter-increment: flow-count;

      & + & {
        margin-top: calc(90 / 750 * 100vw);
      }

      .img-box {
        position: relative;

        &::before {
          content: '';
          display: block;
          width: 100%;
          height: 40.86%;
          position: absolute;
          bottom: 0;
          left: 0;
          background: linear-gradient(0deg, rgba(46, 36, 18, 1) 0%, rgba(40, 34, 26, 0.55) 45.15%, rgba(28, 31, 42, 0) 100%);
          opacity: 0.6;
        }

        &::after {
          content: counter(flow-count, decimal-leading-zero);
          font-size: calc(80 / 750 * 100vw);
          letter-spacing: .05em;
          line-height: 1;
          position: absolute;
          left: calc(18 / 750 * 100vw);
          bottom: 0;
        }
      }
      .flow-ttl {
        font-size: calc(35 / 750 * 100vw);
        letter-spacing: .05em;
        margin-top: .75em;
      }
      .flow-des {
        padding: 0;
        margin: .35em 0;
      }
    }
  }
}


.skill-set {

  .sec-ttl-set {
    margin-bottom: calc(110 / 750 * 100vw);
    color: #fff;
  }
  .skills {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      background-color: rgba(255, 255, 255, .7);
      padding-bottom: calc(64 / 750 *100vw);
      position: relative;
      overflow: hidden;

      & + & {
        margin-top: calc(90 / 750 * 100vw)
      }

      .en {
        position: absolute;
        right: .1em;
        bottom: 0;
        color: #fff;
        font-size: calc(65 / 750 * 100vw);
        font-style: normal;
        line-height: 1;
        translate: 0 .1em;
        z-index: -1;
      }

      .skill-ttl {
        font-size: calc(35 / 750 * 100vw);
        letter-spacing: .05em;
        margin-top: 1.5em;
        text-align: center;
      }
      .skill-des {
        padding: 0 calc(50 / 750 * 100vw) 0;
        margin: 1em 0 0;
        text-align: justify;
      }
    }
  }
}

.people-set {
  color: #fff;

  .sec-ttl-set {
    margin-bottom: calc(85 / 750 * 100vw);
  }
  .sub-ttl {
    font-weight: 400;
    font-size: calc(42 / 750 * 100vw);
    margin-block: calc(75 / 750 * 100vw) calc(60 / 750 * 100vw);
  }
}


.picked-up {
  margin: 0;
  padding: 0;
  list-style: none;
  padding-bottom: calc(150 / 750 * 100vw);  border-bottom: 1px solid #fff;

  li + li {
    margin-top: calc(100 / 750 * 100vw);
  }

  a {
    display: block;
    width: 100%;
    height: auto;
    text-decoration: none;

    .interviewee-ttl {
      font-size: calc(35 / 750 * 100vw);
      line-height: 1.4285714285714286;
      margin-block: calc(25 / 750 * 100vw) calc(16 / 750 * 100vw);
    }
    .name-label {
      margin: 0;

      p {
        margin: 0;
        font-size: calc(22 / 750 * 100vw);
        line-height: 1.625;
      }
    }
  }
}

.others-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, calc(300 / 750 * 100vw));
  grid-template-rows: auto;
  column-gap: calc(40 / 750 * 100vw);
  row-gap: calc(110 / 750 * 100vw);

  a {
    display: block;
    width: 100%;
    height: auto;
    text-decoration: none;

    .interviewee-ttl {
      font-size: calc(30 / 750 * 100vw);
      line-height: 1.2666666666666666;
      margin-block: calc(20 / 750 * 100vw) calc(16 / 750 * 100vw);
    }
    .name-label {
      margin: 0;

      p {
        margin: 0;
        font-size: calc(20 / 750 * 100vw);
        line-height: 1.625;
      }
    }
  }
}