@charset "UTF-8";
/* =====================
  モットー
===================== */
.article[data-id='1'] {
  position: relative;
  padding-top: calc((100 / 750) * 82 * 1vw);
  padding-bottom: calc((100 / 750) * 111 * 1vw);
  .message_wrap {
    .message-title {
      flex-shrink: 0;
      & > h3 {
        font-size: calc((100 / 750) * 52 * 1vw);
        font-weight: 500;
        line-height: 1.74;
      }
      .en-catch {
        margin-top: calc((100 / 750) * 4 * 1vw);
      }
    }
    & > p {
      margin-top: calc((100 / 750) * 40 * 1vw);
      line-height: 2;
      & p + p {
        margin-top: 2em;
      }
    }
  }
}

/* =====================
成長への取組み
===================== */
.article[data-id='2'] {
  position: relative;
  padding-top: calc((100 / 750) * 92 * 1vw);
  padding-bottom: calc((100 / 750) * 128 * 1vw);
  background-color: #ededed;
  .inner {
    .growth_wrap {
      margin-top: calc((100 / 750) * 85 * 1vw);
      & > picture {
        display: block;
        flex-shrink: 0;
        & img {
          width: 100%;
        }
      }
      .growth_unit {
        margin-top: calc((100 / 750) * 40 * 1vw);
        & > h4 {
          font-size: calc((100 / 750) * 35 * 1vw);
          font-weight: 500;
          line-height: 2;
        }
        & > p {
          margin-top: calc((100 / 750) * 25 * 1vw);
          line-height: 2;
        }
      }
    }
    .initiative_wrap {
      display: grid;
      gap: calc((100 / 750) * 56 * 1vw);
      margin-top: calc((100 / 750) * 58 * 1vw);
      padding-inline: calc((100 / 750) * 80 * 1vw);
      .initiative_unit {
        & > h3 {
          width: fit-content;
          font-weight: 500;
          text-align: center;
          border-bottom: solid calc((100 / 750) * 2 * 1vw) #9e9e9e;
          padding-inline: calc((100 / 750) * 16 * 1vw);
          padding-bottom: calc((100 / 750) * 5 * 1vw);
          margin-inline: auto;
        }
        & > ul {
          margin-top: calc((100 / 750) * 32 * 1vw);
          & > li {
            font-size: calc((100 / 750) * 32 * 1vw);
            font-weight: 500;
            line-height: 1.8;
            text-align: center;
            color: #fff;
            border-radius: calc((100 / 750) * 10 * 1vw);
            padding-block: calc((100 / 750) * 19 * 1vw);
            & + li {
              margin-top: calc((100 / 750) * 24 * 1vw);
            }
          }
        }
        &[data-id='1'] {
          & ul > li {
            background-color: #24845b;
          }
        }
        &[data-id='2'] {
          & ul > li {
            background-color: #7cb24e;
          }
        }
        &[data-id='3'] {
          & ul > li {
            background-color: #e4c357;
          }
        }
      }
    }
  }
}
/* =====================
  新人社員研修
===================== */
.article[data-id='3'] {
  position: relative;
  padding-top: calc((100 / 750) * 90 * 1vw);
  padding-bottom: calc((100 / 750) * 128 * 1vw);
  .inner {
    .induction_wrap {
      margin-top: calc((100 / 750) * 85 * 1vw);
      & > picture {
        display: block;
        flex-shrink: 0;
        & img {
          width: 100%;
        }
      }
      .induction_unit {
        line-height: 2;
        margin-top: calc((100 / 750) * 45 * 1vw);
        .underline {
          color: #24845b;
          text-decoration: underline;
        }
        & > p + p {
          margin-top: 2em;
        }
      }
    }
    & > ul {
      margin-top: calc((100 / 750) * 72 * 1vw);
      display: grid;
      gap: calc((100 / 750) * 32 * 1vw);
      .colorblock {
        padding-inline: calc((100 / 750) * 48 * 1vw);
        padding-top: calc((100 / 750) * 40 * 1vw);
        padding-bottom: calc((100 / 750) * 40 * 1vw);
        border-radius: calc((100 / 750) * 20 * 1vw);
        &::before {
          border-radius: calc((100 / 750) * 16 * 1vw);
        }
        & > h4 {
          position: relative;
          font-size: calc((100 / 750) * 32 * 1vw);
          font-weight: 500;
          line-height: 1.8;
          color: #24845b;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: calc((100 / 750) * 32 * 1vw);
          &::before {
            content: '';
            display: block;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../../img/recruit/environment/induction_01_2x.png');
            width: calc((100 / 750) * 72 * 1vw);
            height: calc((100 / 750) * 65 * 1vw);
          }
        }
        & > p {
          position: relative;
          margin-top: calc((100 / 750) * 21 * 1vw);
          line-height: 2;
        }
        &[data-id='2'] {
          & > h4 {
            &::before {
              background-image: url('../../img/recruit/environment/induction_02_2x.png');
            }
          }
        }
        &[data-id='3'] {
          & > h4 {
            &::before {
              background-image: url('../../img/recruit/environment/induction_03_2x.png');
            }
          }
        }
        &[data-id='4'] {
          & > h4 {
            &::before {
              background-image: url('../../img/recruit/environment/induction_04_2x.png');
            }
          }
        }
      }
    }
  }
}
/* =====================
  POP UP
===================== */
.infinite-slider {
  margin-top: calc((100 / 750) * 104 * 1vw);
  .swiper-wrapper {
    transition-timing-function: linear;
    .swiper-slide {
      & > button {
        display: block;
        & > h3 {
          width: fit-content;
          margin-inline: auto;
          margin-top: calc((100 / 750) * 24 * 1vw);
          & > span {
            position: relative;
            font-size: calc((100 / 750) * 30 * 1vw);
            font-weight: 500;
            line-height: 2;
            color: #24845b;
            padding-right: calc((100 / 750) * 72 * 1vw);
            &::before {
              content: '';
              display: block;
              width: calc((100 / 750) * 48 * 1vw);
              aspect-ratio: 1/1;
              border-radius: 50rem;
              border: 1px solid #9e9e9e;
              position: absolute;
              top: 50%;
              right: 0;
              transform: translateY(-50%);
            }
            &::after {
              content: '';
              display: block;
              mask-repeat: no-repeat;
              mask-size: contain;
              mask-position: center;
              mask-image: var(--arrow);
              background-color: #2fa371;
              width: calc((100 / 750) * 17 * 1vw);
              aspect-ratio: 1/1;
              position: absolute;
              top: 50%;
              right: calc((100 / 750) * 16 * 1vw);
              transform: translateY(-50%);
            }
          }
        }
      }
    }
  }
}
label {
  dialog {
    background: transparent;
    width: 100%;
    margin-block: 0;
    margin-inline: auto;
    padding: 0;
    inset: 0;
    border: none;
    max-width: 100%;
    max-height: 100%;
    transition: all 400ms ease 1000ms;
    .dialog-inner {
      background: rgba(27, 27, 30, 0.4);
      display: grid;
      place-content: center;
      min-height: 100vh;
      transition: all 400ms ease 1000ms;
      .dialog-contents {
        position: relative;
        cursor: initial;
        max-width: calc((100 / 750) * 670 * 1vw);
        margin-inline: auto;
        padding-inline: calc((100 / 750) * 40 * 1vw);
        padding-top: calc((100 / 750) * 109 * 1vw);
        padding-bottom: calc((100 / 750) * 80 * 1vw);
        background: white;
        transition: all 400ms ease 1000ms;
        animation-name: dialog;
        animation-duration: 600ms;
        animation-delay: 100ms;
        animation-timing-function: ease;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-fill-mode: forwards;
        animation-play-state: running;
        opacity: 0;
        transform: translateY(-1em);
        .close-modal {
          position: absolute;
          top: calc((100 / 750) * 40 * 1vw);
          right: calc((100 / 750) * 40 * 1vw);
        }
        .pop-wrap {
          & > img {
            width: calc((100 / 750) * 590 * 1vw);
            height: calc((100 / 750) * 380 * 1vw);
            border-radius: calc((100 / 750) * 20 * 1vw);
          }
          & > h4 {
            position: relative;
            font-size: calc((100 / 750) * 30 * 1vw);
            font-weight: 500;
            line-height: 2;
            text-align: center;
            color: #24845b;
            padding-bottom: calc((100 / 750) * 8 * 1vw);
            margin-top: calc((100 / 750) * 22 * 1vw);
            &::after {
              content: '';
              display: block;
              background-size: calc((100 / 750) * 12 * 1vw) calc((100 / 750) * 4 * 1vw);
              background-image: linear-gradient(to right, #24845b calc((100 / 750) * 6 * 1vw), transparent calc((100 / 750) * 6 * 1vw));
              background-repeat: repeat-x;
              background-position: left bottom;
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: calc((100 / 750) * 2 * 1vw);
            }
          }
          & > p {
            margin-top: calc((100 / 750) * 16 * 1vw);
            line-height: 2;
            text-align: center;
          }
        }
      }
    }
  }
}
@keyframes dialog {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =====================
  数字で見る リンク
===================== */
.number_bnr {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../img/recruit/environment/number_bg_2x.png');
  width: calc((100 / 750) * 670 * 1vw);
  height: calc((100 / 750) * 630 * 1vw);
  padding-inline: calc((100 / 750) * 48 * 1vw);
  margin-top: calc((100 / 750) * 122 * 1vw);
  padding-top: calc((100 / 750) * 75 * 1vw);
  padding-bottom: calc((100 / 750) * 80 * 1vw);
  .number_bnr_unit {
    & > p {
      margin-top: calc((100 / 750) * 58 * 1vw);
      line-height: 2;
    }
  }
  .link-btn {
    width: calc((100 / 750) * 383 * 1vw);
    margin-top: calc((100 / 750) * 64 * 1vw);
  }
}
.infinite-slider .inner {
  padding-top: 5.333333333333333vw;
  font-size: 3.2vw;
}