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


.lead-box {
  padding-block: min(calc(110 / 1430 * 100vw), 110px) 0;

  .text-block {
    width: min(calc(1170 / 1430 * 100vw), 1170px);
    margin-inline: auto;
    color: #fff;

    h3 {
      font-size: min(calc(38 / 1430 * 100vw), 38px);
      letter-spacing: .05em;
      line-height: 1.5789473684210527;
      margin: 0;

      & + .txt {
        margin-top: min(calc(55 / 1430 * 100vw), 55px);
      }
    }
  }
}
.txt {
  font-size: min(calc(15 / 1430 * 100vw), 15px);
  line-height: 1.8666666666666667;
  letter-spacing: .05em;
}
.sec {
  padding-block: min(calc(180 / 1430 * 100vw), 180px) min(calc(220 / 1430 * 100vw), 220px)
}
.sec-inner {
  width: min(calc(1170 / 1430 * 100vw), 1170px);
  margin-inline: auto;
}
.sec-ttl-set {
  display: flex;
  flex-direction: column-reverse;

  .jp {
    font-size: min(calc(20 / 1430 * 100vw), 20px);
    letter-spacing: .05em;
    line-height: 1;
    margin-top: min(calc(10 / 1430 * 100vw), 10px);
  }
  .en {
    font-size: min(calc(80 / 1430 * 100vw), 80px);
    line-height: 1;
  }
}





.intro .sec-inner {
  display: grid;
  grid-template-columns: auto min(calc(600 / 1430 * 100vw), 600px);
  column-gap: min(calc(125 / 1430 * 100vw), 125px);

  .text-block {
    color: #fff;
  }
  .sec-ttl-set {
    margin-bottom: min(calc(47 / 1430 * 100vw), 47px);
  }
  .txt {
    text-align: justify;
  }
  .img-box {
    width: 100%;
    height: min(calc(560 / 1430 * 100vw), 560px);
  }
}

.career-path,
.strength,
.process {
  background-color: rgba(255, 255, 255, .85);

  .sec-inner {
    display: grid;
    grid-template-columns: auto min(calc(550 / 1430 * 100vw), 550px);
    align-items: start;

    .txt {
      margin-top: -1em;
    }
    .chart-box {
      padding-top: min(calc(58 / 1430 * 100vw), 58px);
      grid-column-start: span 2;
      width: 100%;
      height: auto;
    }
  }
}

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

  .sec-ttl-set {
    margin-bottom: min(calc(100 / 1430 * 100vw), 100px);
  }
  .view-more-bttn {
    width: min(calc(170 / 1430 * 100vw), 170px);
    height: auto;
    margin-top: min(calc(30 / 1430 * 100vw), 30px);

    &::after {
      background-image: linear-gradient(to right, #fff, #fff 40%, transparent 40%, transparent 60%, #fff 60%, #fff 100%)
    }
    a {
      font-weight: 600;
      font-size: min(calc(15 / 1430 * 100vw), 15px);
      letter-spacing: .04em;
      color: #fff;
  
      .inner {
        padding-bottom: .2em;
  
        &::before,
        &::after {
          background-color: #fff;
        }
      }
    }
  }
}
.job-type {
  display: grid;
  grid-template-columns: repeat(2, min(calc(550 / 1430 * 100vw), 550px));
  column-gap: min(calc(70 / 1430 * 100vw), 70px);

  & + & {
    margin-top: min(calc(150 / 1430 * 100vw), 150px);
  }
  .txt {
    text-align: justify;
  }
  .img-box {
    width: 100%;
    height: min(calc(300 / 1430 * 100vw), 300px);
  }
}
.sec.other-job {
  padding-bottom: 0;

  .job-type + .job-type {
    margin-top: min(calc(90 / 1430 * 100vw), 90px);
  }
  .text-block {
    display: flex;
    flex-direction: column;

    .view-more-bttn {
      margin-top: auto;
    }
  }
}
.job-ttl-set {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: baseline;
  color: #fff;

  .jp {
    font-size: min(calc(18 / 1430 * 100vw), 18px);
    letter-spacing: .05em;
    line-height: 1;
    margin-left: min(calc(28 / 1430 * 100vw), 28px);
  }
  .en {
    font-size: min(calc(62 / 1430 * 100vw), 62px);
    line-height: 1;
  }

  .other-job & {
    flex-direction: column-reverse;
    justify-content: flex-start;

    .jp {
      margin: 0;
      font-size: min(calc(20 / 1430 * 100vw), 20px);
    }
    .en {
      font-size: min(calc(42 / 1430 * 100vw), 42px);
    }
  }
}
.job-txt {
  font-feature-settings: "palt";
  font-size: min(calc(23 / 1430 * 100vw), 23px);
  /* letter-spacing: .08em; */
  line-height: 1.7391304347826086;
}

.system-sec {
  color: #fff;

  .sec-ttl-set {
    margin-bottom: min(calc(50 / 1430 * 100vw), 50px);
  }
  .chart-box {
    padding-top: min(calc(100 / 1430 * 100vw), 100px);
  }
}



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

  .sec-inner {
    display: grid;
    grid-template-columns: auto 41.36752136752136%;
    width: calc(1170 / 1430 * 100vw);
    margin: 0 auto;
  }
  .sec-ttl-set {
    color: #fff;
    margin-bottom: calc(40 / 1430 * 100vw);

    .coming-soon-section & {
      margin-bottom: 0;
    }
  }
}
@media (width > 1430px) {
  .real-case {
    padding-bottom: 227px;
    .sec-inner {
      width: 1170px;
    }
    .sec-ttl-set {
      margin-bottom: 40px;
    }
  }
}

.work-flow {
  color: #fff;

  .sec-ttl-set {
    margin-bottom: min(calc(100 / 1430 * 100vw), 100px);
  }
  .flows {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, min(calc(550 / 1430 * 100vw), 550px));
    grid-template-rows: auto;
    column-gap: min(calc(70 / 1430 * 100vw), 70px);
    row-gap: min(calc(60 / 1430 * 100vw), 60px);
    counter-reset: flow-count;

    li {
      counter-increment: flow-count;

      &:nth-child(2n) {
        --el-delayed: 3;
      }
      
      .img-box {
        position: relative;
        height: min(calc(400 / 1430 * 100vw), 400px);

        &::before {
          content: '';
          display: block;
          width: 100%;
          height: 42.5%;
          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: min(calc(70 / 1430 * 100vw), 70px);
          letter-spacing: .05em;
          line-height: 1;
          position: absolute;
          left: min(calc(15 / 1430 * 100vw), 15px);
          bottom: 0;
        }
      }
      .flow-ttl {
        font-size: min(calc(20 / 1430 * 100vw), 20px);
        letter-spacing: .05em;
        margin-top: .75em;
      }
      .flow-des {
        padding: 0;
        margin: .35em 0;
      }
    }
  }
}

.feature-sec {
  background-color: rgba(255, 255, 255, .85);

  .sec-inner {
    display: grid;
    grid-template-columns: auto min(calc(600 / 1430 * 100vw), 600px);
    column-gap: min(calc(125 / 1430 * 100vw), 125px);
  
    .sec-ttl-set {
      margin-bottom: min(calc(57 / 1430 * 100vw), 57px);
    }
    .txt {
      text-align: justify;
    }
  }
}

.skill-set {

  .sec-ttl-set {
    margin-bottom: min(calc(100 / 1430 * 100vw), 100px);
    color: #fff;
  }
  .skills {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, min(calc(550 / 1430 * 100vw), 550px));
    grid-template-rows: auto;
    column-gap: min(calc(70 / 1430 * 100vw), 70px);
    row-gap: min(calc(60 / 1430 * 100vw), 60px);

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

      .img-box {
        height: min(calc(330 / 1430 * 100vw), 330px);
      }

      .en {
        position: absolute;
        right: .1em;
        bottom: 0;
        color: #fff;
        font-size: min(calc(50 / 1430 * 100vw), 50px);
        font-style: normal;
        line-height: 1;
        translate: 0 .1em;
        z-index: -1;
      }
      &:nth-child(2n) {
        --el-delayed: 3;
      }
      .skill-ttl {
        font-size: min(calc(20 / 1430 * 100vw), 20px);
        letter-spacing: .05em;
        margin-top: 1.5em;
        text-align: center;
      }
      .skill-des {
        padding: 0 min(calc(35 / 1430 * 100vw), 35px) 0;
        margin: 1.3em 0 0;
        text-align: justify;
      }
    }
  }
}

.people-set {
  color: #fff;

  .sec-ttl-set {
    margin-bottom: min(calc(100 / 1430 * 100vw), 180px);

    .coming-soon-section & {
      margin-bottom: 0;
    }
  }
  .sub-ttl {
    font-weight: 400;
    font-size: min(calc(42 / 1430 * 100vw), 42px);
    margin-bottom: min(calc(50 / 1430 * 100vw), 50px);
  }
}