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


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

  .text-block {
    width: min(calc(930 / 1430 * 100vw), 930px);
    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(930 / 1430 * 100vw), 930px);
  margin-inline: auto;
}
.sec-ttl-set {
  display: flex;
  flex-direction: column-reverse;
  margin-bottom: min(calc(75 / 1430 * 100vw), 75px);

  .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;
  }
}

.human-res {

  .sec-ttl-set {
    color: #fff;
  }
  .system-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, calc(280 / 1430 * 100vw));
    grid-auto-rows: auto;
    gap: calc(45 / 1430 * 100vw) calc(50 / 1430 * 100vw);

    .sys {
      background-color: rgba(255, 255, 255, .7);
      padding: calc(105 / 1430 * 100vw) calc(25 / 1430 * 100vw) calc(20 / 1430 * 100vw);
      position: relative;

      &:nth-child(3n + 2) {
        --el-delayed: 2;
      }
      &:nth-child(3n + 3) {
        --el-delayed: 4;
      }
    }
    .sys-ttl {
      font-size: calc(18 / 1430 * 100vw);
      text-align: center;
      margin-bottom: 1em;
      white-space: nowrap;
    }
    .sys-des {
      padding: 0;
      margin: 0;
      text-align: justify;
    }
    .ico {
      display: block;
      width: calc(72 / 1430 * 100vw);
      height: calc(72 / 1430 * 100vw);
      position: absolute;
      top: calc(22 / 1430 * 100vw);
      left: 50%;
      translate: -50% 0;
    }
  }
}
@media (width > 1430px) {
  .human-res {
    .system-list {
      grid-template-columns: repeat(3, 280px);
      gap: 45px 50px;
      .sys {
        padding: 105px 25px 20px;
      }
      .sys-ttl {
        font-size: 18px;
      }
      .ico {
        width: 72px;
        height: 72px;
        top: 22px;
      }
    }
  }
}

.inter-section {
  display: block;
  width: 100%;
  height: min(calc(650 / 1430 * 100vw), 650px);
}

.culture-sec {
  background-color: rgba(255, 255, 255, .85);
}
.training-sec {
  color: rgba(255, 255, 255, .85);
}

.training-list,
.culture-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, min(calc(430 / 1430 * 100vw), 430px));
  grid-auto-rows: auto;
  gap: min(calc(70 / 1430 * 100vw), 70px) min(calc(60 / 1430 * 100vw), 60px);
  counter-reset: clt-num;

  .cltr {
    counter-increment: clt-num;
    padding-top: min(calc(35 / 1430 * 100vw), 38px);
    position: relative;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 1px;

    &:nth-child(2n) {
      --el-delayed: 3;
    }
    .culture-list & {
      background-image: linear-gradient(to right, var(--color-blue) 42%, transparent 42%, transparent 58%, var(--color-blue) 58%);
    }
    .training-list & {
      background-image: linear-gradient(to right, #fff 42%, transparent 42%, transparent 58%, #fff 58%);
    }

    &::before {
      content: counter(clt-num, decimal-leading-zero);
      font-family: 'Cinzel';
      font-size: min(calc(15 / 1430 * 100vw), 15px);
      position: absolute;
      left: 50%;
      top: 0;
      translate: -50% -50%;
    }
  }
  .cltr-ttl {
    font-size: min(calc(18 / 1430 * 100vw), 18px);
    letter-spacing: .05em;
    line-height: 1;
    text-align: center;
    margin-bottom: 1.25em;
  }
  .cltr-des {
    margin: 0;
    padding: 0;
    text-align: justify;
  }
}