@charset "UTF-8";


/*
--------------------------------
  /ja/recruit/newgrads/ - newgrads top page
--------------------------------
*/


/* ---- common parts in newgrads top page (.ngt) ---- */

.c-h2.ngt {
  font-size: 3.2rem;
}

.c-index-h3.ngt {
  margin-top: 0;
}

.c-link-panel-button.ngt {

  .inner {

    margin-bottom: 40px;

    .heading {
      font-size: 2.4rem;
    }

  }

}

.c-horizontal-link-list.ngt {

  justify-content: flex-start;
  gap: 16px 24px;
  margin-top: 30px;
  padding: 0;
  background-color: transparent;

  & a.c-arrow-link {
    font-weight: 400;
  }

}

.c-article-list-topics {

  & a:not([href]) {
    pointer-events: none;
  }

  &.ngt {
    margin-top: 0 !important;
    border-top-style: none;
  }

}

@media screen and (max-width: 767.9px) {

  .c-h2.ngt {
    font-size: 2.4rem;
  }

  .c-body.ngt {
    font-size: 1.4rem;
  }

  .c-link-panel-button.ngt {

    padding: 7% 20px;

    .inner {

      margin-bottom: 32px;

      .heading {
        font-size: 2.2rem;
      }

      & p {
        line-height: 2;
      }

    }

  }

  .c-horizontal-link-list.ngt {

    display: flex;
    gap: 12px 24px;

    a.c-arrow-link {
      padding: 0 18px 0 0;
    }

  }

}


/* ---- floating entry buttons on bottom ---- */

.floating-banner {
  width: 100%;
  padding: 0 5vw;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  height: 110px;
  position: fixed;
  bottom: -110px;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  transition: bottom .4s ease;
  z-index: 10;
}

.floating-banner .c-button {

  width: auto;
  min-width: 240px;
  margin: 0;
  padding: 15px 50px 12px 24px;
  background-color: #2e2e2e;
  color: #fff;
  border-color: #2e2e2e;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: keep-all;

  &:only-child {
    min-width: 300px;
  }

}

.floating-banner.is-visible {
  bottom: 0;
}

.floating-banner .c-button.gray {
  border: 1px solid #fff;
  background-color: #fff;
  color:#2e2e2e;
}

.floating-banner .c-button.gray:hover {
  background-color: #000;
  color:#fff;
  border-color:#000;
}

.floating-banner .c-button.gray:hover::after {
  background: url(https://www.lycorp.co.jp/ja/recruit/jp/common/images/icon_arrow_wht.svg);
}

.floating-banner .c-button.gray.outbound:hover::after {
  background: url(https://www.lycorp.co.jp/ja/recruit/jp/common/icon_outbound_wht.svg);
}

body.has-floating-banner a.page-top.is-shown {
  transform: translateY(-110px);
}

body.has-floating-banner {
  padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
}

#js-trigger-floating-banner {
  position: absolute;
  left: 0;
  bottom: calc(100vh - 110px);
  z-index: 10;
  width: 1px;
  height: 1px;
}

@media screen and (max-width: 767.9px) {

  .floating-banner {

    flex: 1 0 0;
    column-gap: 0;
    height: auto;
    padding: 0;
    background-color: transparent;

    .c-button {

      display: flex;
      align-items: center;
      flex: 1 1 0;
      min-width: auto;
      min-height: 48px;
      margin-left: 0;
      padding: 4px 22px 4px 10px;
      border-radius: 0;
      background-color: #2e2e2e;
      color: #fff;
      font-size: 1.3rem;
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.3;

      &:only-child {
        min-width: auto;
      }

      &.gray {

        border: 1px solid #2e2e2e;
        background-color: #2e2e2e;
        color: #fff;

        &::after {
          right: 6px;
          background: url(https://www.lycorp.co.jp/assets/images/icon_arrow_wht.svg) center no-repeat;
        }

      }

      &:not(:first-child) {
        border-left: 1px solid #555;
      }

    }

  }

  body.has-floating-banner a.page-top.is-shown {
    transform: translateY(-48px);
  }

  body.has-floating-banner {
    padding-bottom: 48px;
  }

}


/* ---- heading with buttons ---- */

.c-button-heading {

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  column-gap: 36px;

  .txt {

    & h1 {
      word-break: keep-all;
    }

    & p {
      margin-top: 0;
      white-space: nowrap;
    }

  }

  .buttons {

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;

    .c-button {

      width: auto;
      min-width: 240px;
      margin: 0;
      padding: 15px 50px 12px 24px;
      text-align: left;
      overflow-wrap: anywhere;
      word-break: keep-all;

      &:only-child {
        min-width: 300px;
      }

    }

  }

}

@media screen and (max-width: 767.9px) {

  .c-button-heading {

    display: block;

    .buttons {

      column-gap: 0;
      margin: 40px -5vw 0;

      .c-button {

        display: flex;
        align-items: center;
        flex: 1 1 0;
        min-width: auto;
        min-height: 48px;
        margin-left: 0;
        padding: 4px 22px 4px 10px;
        border-radius: 0;
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1.3;

        &:only-child {
          min-width: auto;
        }

        &::after {
          right: 6px;
        }

        &:not(:first-child) {
          border-left: 1px solid #555;
        }

      }

    }

  }

}


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

.newgrads-top-intro {

  position: relative;
  margin-top: 80px;

  .newgrads-top-intro__heading {

    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

    .body-container {

      display: flex;
      align-items: center;
      position: sticky;
      top: 0;
      height: 100vh;
      padding-top: 0;
      padding-bottom: 0;
      background-color: #999;
      background-image: url(/ja/recruit/jp/common/bg_intro.jpg);
      background-size: cover;
      background-position: 50%;

      &::after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .45);
      }

      .body-inner {
        width: 100%;
      }

      & h2 {

        padding-right: 56%;
        color: #fff;
        font-size: min(3.2vw, 4.8rem);
        font-weight: 700;
        line-height: 1.3;

        html[lang='en'] & {
          font-size: min(2.8vw, 4rem);
        }

      }

    }

  }

  .newgrads-top-intro__body {

    position: relative;
    z-index: 2;
    padding-top: 100vh;
    padding-bottom: 20vh;

    .text-container {
      padding-left: max(360px, 50%);
    }

    & p {

      color: rgba(255,255,255,.2);
      font-size: min(2vw, 3rem);
      font-weight: 700;
      line-height: 2;

      .spacer {
        display: inline-block;
        height: 2.4em;
      }

      html[lang='en'] & {
        font-size: min(1.9vw, 2.7rem);
      }

    }

  }

}

@media screen and (max-width: 767.9px) {

  .newgrads-top-intro {

    margin-top: 0;

    .newgrads-top-intro__heading {

      .body-container {

        display: block;
        height: 100%;

        .body-inner {

          display: flex;
          align-items: center;
          height: min(56vw, 400px);

          & h2 {

            padding-right: 0;
            font-size: min(8.5vw, 4.8rem);

            html[lang='en'] & {
              font-size: min(7vw, 4.8rem);
            }

          }

        }

      }

    }

    .newgrads-top-intro__body {

      padding-top: min(56vw, 400px);
      padding-bottom: 20vw;

      .text-container {
        padding-left: 0;
      }

      & p {

        color: rgba(255,255,255,.2);
        font-size: min(4.8vw, 3rem);

        .spacer {
          display: inline-block;
          height: 2.4em;
        }

        html[lang='en'] & {
          font-size: min(4.8vw, 2.8rem);
        }

      }

    }

  }

}


/* ---- paint text with scrolling ---- */

.scroll-paint {
  display: inline;
  color: transparent;
  background-clip: text;
  background-size: 200% 100%;
  background-image: linear-gradient(90deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
  background-position: 0 0;
}


/* ---- policy ---- */

.newgrads-top-policy {

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  .txt {

    width: 58%;

    .c-index-h3 + .c-body {
      margin-top: 24px !important;
    }

    & dt {

      margin-top: 40px;
      font-size: 1.8rem;
      font-weight: 700;
      line-height: 1.6;

      & span {
        display: block;
        width: 40px;
        margin-bottom: 6px;
        padding: 2px 0 1px;
        border-radius: 4px;
        background-color: #2e2e2e;
        color: #fff;
        font-size: 1rem;
        font-weight: 700;
        text-align: center;
      }

    }

    & dd .c-body {
      margin-top: 16px;
    }

    .button {

      margin-top: 40px;

      .c-button {

        html[lang='en'] & {
          width: 480px;
        }

        & span {
          display: inline-block;
          margin-top: 4px;
          font-size: 1.2rem;
        }

      }

    }

  }

  .img {

    position: relative;
    width: 36%;

    .main {

      position: relative;
      z-index: 1;
      width: 100%;
      aspect-ratio: 5 / 7;
      border-radius: 20px;
      overflow: hidden;

      & img {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

    }

    .sub {

      position: absolute;
      right: max(-20%, -5vw);
      top: calc((100% - 56px) * .86);
      z-index: 2;
      width: 60%;
      aspect-ratio: 1 / 1;
      border-radius: 20px;
      overflow: hidden;

      & img {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

    }

    & button {

      display: block;
      position: relative;
      width: 40px;
      height: 40px;
      margin-top: 16px;
      border: 1px solid #2e2e2e;
      border-radius: 50%;
      overflow: hidden;
      text-indent: -400px;

      &::before {
        content: "";
        display: block;
        position: absolute;
        left: 13px;
        top: 13px;
        width: 4px;
        height: 12px;
        background-color: #2e2e2e;
      }

      &::after {
        content: "";
        display: block;
        position: absolute;
        right: 13px;
        top: 13px;
        width: 4px;
        height: 12px;
        background-color: #2e2e2e;
      }

      &.play {

        &::before {
          content: "";
          display: block;
          position: absolute;
          left: 15px;
          top: 12px;
          width: 11px;
          height: 14px;
          background-color: #2e2e2e;
          clip-path: polygon(0 0, 100% 50%, 0 100%);
        }

        &::after {
          content: none;
        }

      }

    }

  }

}

@media screen and (max-width: 767.9px) {

  .newgrads-top-policy {

    display: block;

    .txt {

      width: auto;

      .c-index-h3 + .c-body {
        margin-top: 20px !important;
      }

      & dt {
        margin-top: 32px;
        line-height: 1.4;
      }

      & dd .c-body {
        margin-top: 14px;
      }

      .button {
        margin-top: 32px;
        text-align: center;
      }

    }

    .img {

      width: auto;
      max-width: 480px;
      margin: 11vw auto 0;
      padding-bottom: calc(44% - 56px);

      .main {
        width: 84%;
      }

      .sub {
        top: auto;
        right: 0;
        bottom: 0;
        left: auto;
      }

    }

  }

}


/* ---- policy - pair cross fader ---- */

.c-image-fader img {

  opacity: 0;
  transition: opacity 2s ease-in-out;

  &.is-active {
    opacity: 1;
  }

}


/* ---- jobs ---- */

.newgrads-top-jobs {

  .c-link-panel-image-head {

    .img {

      position: relative;

      img:last-child {
        display: block;
        position: absolute;
        left: 25%;
        top: 0;
        width: 50%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: contain;
        transform: none;
        filter: none;
        transition: none;
      }

    }

    .txt .c-body {
      line-height: 2;
    }

  }

}

div.c-link-panel-image-head:not(.dummy) {

  pointer-events: none;

  &::after {
    content: none;
  }

  & img {
    opacity: .6;
  }

  .txt {

    h4, h3, p {
      color: #aaa;
    }

    & h3 {
      margin-top: -30px;
    }

    .bg-gray & {
      text-align: center;
    }

  }

}

@media screen and (max-width: 767.9px) {

  div.c-link-panel-image-head:not(.dummy) {

    .txt {

      h4, h3, p {
        justify-content: center !important;
      }

      & h3 {
        margin-top: -20px;
      }

    }

  }

}


/*
--------------------------------
  /ja/recruit/newgrads/message/ - Our New Graduate Recruiting Policy
--------------------------------
*/

/* ---- container ---- */

.page-heading-lv3 > .narrow-inner,
.body-container > .narrow-inner {
  max-width: 800px;
  margin: 0 auto;
}


/* ---- heading ---- */

.page-heading-lv3 .c-body {
  font-weight: 400;
}


/* ---- question ---- */

.c-index-h5 .question {
  margin-right: .5em;
  letter-spacing: -.1em;
}