@charset "UTF-8";

/*
	##### OGIS #####
	index/css/index_pc.css
*/

.contents-area {
  padding-bottom: calc(100 / 750 * 100vw);
}

/* --------------------------------------------------
main visual
-------------------------------------------------- */

.main-image-area {
  display: block;
  width: 100%;
  height: calc(1090 / 750 * 100vw);
}
.slide-image {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .img-box {
    display: block;
    width: 100%;
    height: 100%;
  }
  .p-num {
    display: inline-block;
    position: absolute;
    top: calc(30 / 750 * 100vw);
    right: calc(30 / 750 * 100vw);
    font-weight: 300;
    font-size: calc(120 / 750 * 100vw);
    color: var(--color-6);

    &.white-sp {
      color: #fff;
    }
  }
  .txt-box {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr calc(110 / 750 * 100vw);
    width: 100%;
    height: 64.22018348623854%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: calc(135 / 750 * 100vw) calc(25 / 750 * 100vw) 0;
    background-color: var(--color-6);
    clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 37.142857142857146%)
  }
  .job-change-label {
    grid-row: 2 / 3;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    border-top: solid 1px rgba(255, 255, 255, .5);
    padding-right: calc(29 / 1400 * 100vw);
    padding-bottom: calc(19 / 1400 * 100vw);

    .job-change-list {
      display: flex;
      align-items: center;
      font-weight: 700;
      letter-spacing: .08em;

      .job-from {
        font-size: calc(27 / 750 * 100vw);
        color: #fff;
        display: inline-flex;
        align-items: center;

        &::after {
          content: '';
          display: inline-block;
          width: calc(56 / 750 * 100vw);
          height: calc(10 / 750 * 100vw);
          background: url(../images/arrw-changing.svg) no-repeat center top / contain;
          margin: 0 calc(17 / 750 * 100vw);
          translate: 0 calc(-3 / 750 * 100vw);

        }
      }
      .job-to {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding-inline: .5em;
        height: calc(36 / 750 * 100vw);
        font-size: calc(26 / 750 * 100vw);
        color: var(--color-6);
        background-color: #fff;
      }
    }
  }
  .ttl-box {
    display: flex;
    flex-direction: column;
    row-gap: calc(24 / 750 * 100vw);
    width: 100%;

    .label {
      display: inline-block;

      mark {
        display: inline-block;
        padding: .45em .75em;
        background-color: var(--color-4);
        border-radius: calc(10 / 750 * 100vw);
        font-weight: 700;
        font-size: calc(26 / 750 * 100vw);
        letter-spacing: .08em;
        line-height: 1.1;
        color: #fff;
      }
    }
    .des {
      flex-grow: 1;
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-between;
      padding-bottom: calc(22 / 750 * 100vw);
      color: #fff;

      .catch {
        font-weight: 700;
        font-size: calc(40 / 750 * 100vw);
        letter-spacing: .04em;
        line-height: 1.525;

        p + p {
          margin-top: calc(12 / 750 * 100vw);
        }
      }
      .name-and-ttl {
        display: flex;
        flex-direction: column;
        line-height: 1.4166666666666667;

        .segment {
          font-weight: 500;
          font-size: calc(24 / 750 * 100vw);
        }
        .name {
          font-weight: 700;
          font-size: calc(40 / 750 * 100vw);
          letter-spacing: .08em;

          .small {
            font-size: 60%;
          }
        }
      }
    }
  }
}




/* --------------------------------------------------
news area
-------------------------------------------------- */

.news-area {
  display: block;
  width: 100%;
  padding: calc(65 / 750 * 100vw) 0 0;


  .news-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(670 / 750 * 100vw);
    margin: 0 auto;
    padding-bottom: calc(110 / 750 * 100vw);
    border-bottom: solid 1px var(--color-5);

  }
  .news-ttl {
    font-weight: 700;
    font-size: calc(38 / 750 * 100vw);
    line-height: 1.3;
    text-align: center;
    padding-bottom: .5em;
    position: relative;

    &::after {
      content: '';
      display: block;
      height: calc(2 / 750 * 100vw);
      width: calc(20 / 750 * 100vw);
      background-color: var(--color-3);
      position: absolute;
      top: 1.5em;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .article-box {
    margin-top: 1em;
    width: calc(670 / 750 * 100vw);
  }

  .article {
    display: block;

    .date {
      font-size: calc(30 / 750 * 100vw);
      color: var(--color-2);
      padding-bottom: .5em;

    }
    .des {
      width: 100%;
      font-size: calc(28 / 750 * 100vw);
      line-height: 1.4;
    }
  }
}

/* news slick button */

.news-list .slick-arrow {
  position: absolute;
  display: block;
  width: calc(17 / 750 * 100vw);
  height: calc(17 / 750 * 100vw);
  outline: none;
  border: 0;
  color: transparent;
  background-color: transparent;
  top: calc(100% + 1.2em);
  transform: translateY(50%);
  z-index: +1;
  cursor: pointer;

  &::after {
    content: '';
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  &.slick-disabled {
    cursor: default;

    &::after {
      opacity: .2;
    }
  }
}

.news-list .slick-prev {
  left: calc(50% - calc(67 / 750 * 100vw));

  &::after {
    background-image: url(../../assets/images/ico_lt_sign.svg);
  }
}

.news-list .slick-next {
  left: calc(50% + calc(50 / 750 * 100vw));

  &::after {
    background-image: url(../../assets/images/ico_gt_sign.svg);
  }
}


/* --------------------------------------------------
introduction
-------------------------------------------------- */

.intro {
  display: flex;
  align-items: center;
  flex-direction: column-reverse;
  width: 100%;
  text-align: center;
  padding: calc(135 / 750 * 100vw) 0 calc(200 / 750 * 100vw);
  margin-bottom: calc(240 / 750 * 100vw);
  background-color: rgba(225, 227, 226, .3);
  position: relative;

  &::after {
    content: '';
    display: block;
    width: 1px;
    height: calc(120 / 750 * 100vw);
    position: absolute;
    left: 50%;
    bottom: 0;
    background-color: var(--color-6);
    z-index: +1;
    animation: scrollbar 2.0s ease-in-out infinite;
  }
  .company-logo {
    display: block;
    width: calc(462 / 750 * 100vw);
    height: auto;

    img {
      width: 100%;
      height: auto;
    }
  }
  .lead-area {
    font-weight: 700;
    font-size: calc(32 / 750 * 100vw);
    letter-spacing: .08em;
    line-height: 2.2;
    color: var(--color-6);
  }
  .policy-box {
    display: block;
    width: calc(710 / 750 * 100vw);
    margin: calc(110 / 750 * 100vw) auto calc(130 / 750 * 100vw);
    padding: calc(75 / 750 * 100vw) 0 calc(70 / 750 * 100vw);
    background-color: var(--color-3);
    background-image: radial-gradient(closest-side, rgba(255, 255, 255, .1) 30%, transparent 0);
    background-size: calc(6 / 750 * 100vw) calc(6 / 750 * 100vw);
    color: #fff;

    .ttl {
      font-weight: 600;
      font-size: calc(50 / 750 * 100vw);
      letter-spacing: .08em;
      margin-bottom: 1em;
    }
    .des {
      font-weight: 600;
      font-size: calc(30 / 750 * 100vw);
      line-height: 2.05;
    }
  }
}


/* --------------------------------------------------
contents
-------------------------------------------------- */

.line {
  all: unset;
  display: block;
  height: 1px;
  width: calc(670 / 750 * 100vw);
  margin: 0 auto calc(130 / 750 * 100vw);
  background-color: var(--color-5);
}

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

  .jp {
    display: inline-block;
    font-weight: 700;
    font-size: calc(26 / 750 * 100vw);
    padding-left: calc(35 / 750 * 100vw);
    line-height: 1.5;
  }
  .en {
    font-weight: 300;
    font-size: calc(70 / 750 * 100vw);
    line-height: .9;
    color: var(--color-6);

    &::before {
      content: '•';
      margin-right: .15em;
      vertical-align: middle;
      font-size: 1.3em;
      color: var(--color-4)
    }
  }
}

.offsets {
  display: flex;
  flex-direction: column-reverse;

  &.benefit {
    margin-top: calc(180 / 750 * 100vw);
  }

  .txt-col {
    display: block;
    width: calc(670 / 750 * 100vw);
    margin: calc(87 / 750 * 100vw) auto calc(100 / 750 * 100vw);

    .txt {
      display: block;
      width: calc(600 / 750 * 100vw);
      font-size: calc(28 / 750 * 100vw);
      line-height: 1.6214285714285714;
      margin: 0 auto calc(60 / 750 * 100vw);
      text-align: justify;
    }
  }
  .img-box {
    width: 100%;
  }
}
.related-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: calc(20 / 750 * 100vw);

  li {
    display: block;
    width: calc(550 / 750 * 100vw);
    height: calc(90 / 750 * 100vw);

    a {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-decoration: none;
      font-weight: 700;
      font-size: calc(28 / 750 * 100vw);
      width: 100%;
      height: 100%;
      border-radius: 100px;
      border-style: solid;
      border-width: 1px;
      border-color: transparent;
      background-color: var(--color-3);
      position: relative;

      &::after {
        content: '';
        position: absolute;
        right: calc(38 / 750 * 100vw);
        top: 50%;
        transform: translateY(-50%);
        display: block;
        width: calc(27 / 750 * 100vw);
        height: calc(16 / 750 * 100vw);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(../../assets/images/arrw-r.svg);
      }
    }
  }
}


/* Interview */

.interviews {
  display: block;
  width: 100%;
  padding: calc(110 / 750 * 100vw) 0 calc(300 / 750 * 100vw);
  background-size: calc(14 / 750 * 100vw) calc(14 / 750 * 100vw);
  background-image:
    linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 0),
    linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 0);
  background-color: rgba(225, 227, 226, .7);
  position: relative;

  .txt-col {
    display: block;
    width: calc(670 / 750 * 100vw);
    margin: calc(87 / 750 * 100vw) auto calc(60 / 750 * 100vw);
    position: relative;

    .txt {
      display: block;
      width: calc(600 / 750 * 100vw);
      font-size: calc(28 / 750 * 100vw);
      line-height: 1.6214285714285714;
      margin: 0 auto;
      text-align: justify;
    }

    .related-links {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: calc(100% + calc(660 / 750 * 100vw));
      z-index: +1;
    
      a {
        background-color: #fff;
        border-color: var(--color-3);
        color: var(--color-3);

        &::after {
          background-image: url(../../assets/images/arrw-r-b.svg);
        }
      }
    }
  }
}

/* slide-show */

.p-card-area {
  width: 100%;
  height: calc(520 / 750 * 100vw);
  overflow: hidden;
}

.card-img {
  display: block;
  width: calc(462 / 750 * 100vw);
  height: calc(520 / 750 * 100vw);
  margin: 0 calc(25 / 750 * 100vw);
  position: relative;
  overflow: hidden;

  .img-box {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 0;
      border-bottom-color: var(--color-3);
      border-bottom-style: solid;
      border-bottom-width: calc(6 / 750 * 100vw);
      position: absolute;
      bottom: 0;
      left: 0;
      transition: border-color .6s ease
    }
  }
  a {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    font-weight: 700;
    color: #fff;

    dl {
      display: inline-flex;
      align-items: center;
      height: calc(60 / 750 * 100vw);
      border-style: solid;
      border-width: calc(3 / 750 * 100vw);

      .condensed & {
        transform-origin: left top;
        transform: scaleX(.75);
        white-space: nowrap;
      }

      &.job-past {
        background-color: var(--color-2);
        border-color: var(--color-2);
      }
      &.job-now {
        background-color: var(--color-3);
        border-color: var(--color-3);
        transition: border-color .6s ease, background-color .6s ease;
      }

      dt {
        display: inline-flex;
        align-items: center;
        height: 100%;
        padding: 0 1.2em 0 .5em;
        background-color: #fff;
        color: var(--color-2);
        clip-path: polygon(100% 100%, 0 100%, 0 0, calc(100% - 4vw) 0);
        font-size: calc(28 / 750 * 100vw);
      }
      dd {
        display: inline-flex;
        align-items: center;
        height: 100%;
        padding: 0 .75em 0 .5em;

        .job-past & {
          font-size: calc(30 / 750 * 100vw);
        }
        job-now  & {
          font-size: calc(32 / 750 * 100vw);
        }
      }
    }
  }
}

.slick-current.card-img {
  .img-box::after {
    border-color: var(--color-4);
  }

  a dl.job-now {
    background-color: var(--color-4);
    border-color: var(--color-4);
  }
}

.slide-arrow {
  display: block;
  position: absolute;
  width: calc(71 / 750 * 100vw);
  height: calc(71 / 750 * 100vw);
  top: 50%;
  transform: translateY(-50%);
  z-index: 98;
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
  opacity: .7;

  &.next-arrow {
    right: calc(105 / 750 * 100vw);
    background-image: url(../../assets/images/btn-next.svg);

  }
  &.prev-arrow {
    left: calc(105 / 750 * 100vw);
    background-image: url(../../assets/images/btn-prev.svg);
  }
}


/* Scroll Text */

.scroll-text-area {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: end;
  height: calc(200 / 750 * 100vw);
  width: 100%;
  overflow: hidden;

  .scroll-text {
    display: inline-block;
    width: auto;
    font-size: calc(200 / 750 * 100vw);
    font-weight: 700;
    line-height: .55;
    letter-spacing: .04em;
    color: #fff;
    white-space: nowrap;
    z-index: 0;
  }
}


/* Numbers */

.sec.numbers {
  display: block;
  width: 100%;
  margin-top: calc(180 / 750 * 100vw);
  margin-bottom: calc(220 / 750 * 100vw);

  .sec-ttl {
    margin-left: calc(30 / 750 * 100vw)
  }
  .numbers-box {
    display: block;
    width: 100%;
    margin-top: calc(65 / 750 * 100vw);
    padding-bottom: calc(75 / 750 * 100vw);
    overflow: hidden;
    overflow-x: scroll;
    scrollbar-color: var(--color-4) var(--color-5);
  }
  .num-list {
    display: grid;
    grid-auto-flow: column;

    &::after {
      content: '';
      display: block;
      width: calc(50 / 750 * 100vw);
    }

    li {
      padding: 0 calc(37 / 750 * 100vw);

      & + & {
        border-left: solid 1px var(--color-5);
      }

      dl {
        display: flex;
        flex-direction: column-reverse;

        dt {
          font-weight: 700;
          letter-spacing: .08em;
          white-space: nowrap;
          line-height: 1.3;
          vertical-align: baseline;

          .num-ttl {
            font-size: calc(26 / 750 * 100vw);
  
            & + .note {
              font-size: .8em;
              margin-left: .5em;
            }
          }
        }
        dd {
          white-space: nowrap;
          color: var(--color-6);

          .num {
            font-weight: 600;
            font-size: calc(144 / 750 * 100vw);
          }
          .unit {
            font-weight: 700;
            font-size: calc(36 / 750 * 100vw);
            letter-spacing: .08em;
          }
        }
      }
    }
  }
}