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

/* =====================
成長への取組み
===================== */
.article[data-id='2'] {
  position: relative;
  padding-top: 87px;
  padding-bottom: 120px;
  background-color: #ededed;
  .inner {
    .growth_wrap {
      display: flex;
      gap: 80px;
      margin-top: 65px;
      & > picture {
        display: block;
        flex-shrink: 0;
      }
      .growth_unit {
        margin-top: 20px;
        & > h4 {
          font-size: 24px;
          font-weight: 500;
          line-height: 2;
        }
        & > p {
          margin-top: 31px;
          line-height: 2;
        }
      }
    }
    .initiative_wrap {
      display: grid;
      grid-template-columns: repeat(3, 262px);
      justify-content: center;
      gap: 56px;
      margin-top: 72px;
      .initiative_unit {
        & > h3 {
          width: fit-content;
          font-weight: 500;
          text-align: center;
          border-bottom: solid 2px #9e9e9e;
          padding-inline: 8px;
          padding-bottom: 3px;
          margin-inline: auto;
        }
        & > ul {
          margin-top: 20px;
          & > li {
            font-size: 18px;
            font-weight: 500;
            line-height: 1.8;
            text-align: center;
            color: #fff;
            border-radius: 6px;
            padding-block: 6px;
            & + li {
              margin-top: 15px;
            }
          }
        }
        &[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: 87px;
  padding-bottom: 120px;
  .inner {
    .induction_wrap {
      margin-top: 65px;
      display: flex;
      align-items: center;
      gap: 80px;
      & > picture {
        display: block;
        flex-shrink: 0;
      }
      .induction_unit {
        line-height: 2;
        .underline {
          color: #24845b;
          text-decoration: underline;
        }
        & > p + p {
          margin-top: 2em;
        }
      }
    }
    & > ul {
      margin-top: 80px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      .colorblock {
        padding-inline: 40px;
        padding-top: 32px;
        padding-bottom: 39px;
        border-radius: 20px;
        &::before {
          border-radius: 18px;
        }
        & > h4 {
          position: relative;
          font-size: 20px;
          font-weight: 500;
          line-height: 1.8;
          color: #24845b;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 32px;
          &::before {
            content: '';
            display: block;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('../../img/recruit/environment/induction_01.png');
            width: 56px;
            height: 50px;
          }
        }
        & > p {
          position: relative;
          margin-top: 21px;
          line-height: 2;
        }
        &[data-id='2'] {
          & > h4 {
            &::before {
              background-image: url('../../img/recruit/environment/induction_02.png');
            }
          }
        }
        &[data-id='3'] {
          & > h4 {
            &::before {
              background-image: url('../../img/recruit/environment/induction_03.png');
            }
          }
        }
        &[data-id='4'] {
          & > h4 {
            &::before {
              background-image: url('../../img/recruit/environment/induction_04.png');
            }
          }
        }
      }
    }
  }
}

/* =====================
  POP UP
===================== */
.infinite-slider {
  margin-top: 96px;
  .swiper-wrapper {
    transition-timing-function: linear;
    .swiper-slide {
      & > button {
        display: block;
        padding-bottom: 16px;
        & > img {
          display: block;
          border-radius: 20px;
        }
        & > h3 {
          width: fit-content;
          margin-inline: auto;
          margin-top: 22px;
          & > span {
            position: relative;
            font-size: 18px;
            font-weight: 500;
            line-height: 2;
            color: #24845b;
            padding-right: 56px;
            &::before {
              content: '';
              display: block;
              width: 40px;
              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: 13px;
              aspect-ratio: 1/1;
              position: absolute;
              top: 50%;
              right: 14px;
              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 {
        text-align: left;
        position: relative;
        cursor: initial;
        width: 95%;
        min-width: 920px;
        margin-inline: auto;
        padding-inline: 40px;
        padding-top: 60px;
        padding-bottom: 60px;
        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: 20px;
          right: 24px;
        }
        .pop-wrap {
          display: block grid;
          grid-template-columns: minmax(600px, 761px) minmax(200px, 1fr);
          align-items: flex-start;
          gap: 20px 32px;
          min-inline-size: 600px;
          
          
          
          
          
          
          & > img {
            height: auto;
            grid-area: 1 / 1 / 4 / 2;
            border-radius: 20px;
            width: 100%;
          }
          & h4 {
            position: relative;
            font-size: 18px;
            font-weight: 500;
            align-self: flex-start;
            line-height: 2;
            text-align: left;
            color: #24845b;
            padding-bottom: 8px;
            margin-top: 16px;
            grid-area: 1 / 2 / 2 / 3;

            &::after {
              content: '';
              display: block;
              background-size: 10px 4px;
              background-image: linear-gradient(to right, #24845b 5px, transparent 5px);
              background-repeat: repeat-x;
              background-position: left bottom;
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 1px;
            }
          }
          & p {
            grid-area: 2 / 2 / 3 / 3;
            line-height: 2;
            text-align: left;
            align-self: flex-start;
          }
        }
      }
    }
  }
}
@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.png');
  width: 1140px;
  height: 281px;
  padding-inline: 64px;
  margin-top: 106px;
  padding-bottom: 80px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  .number_bnr_unit {
    & > p {
      margin-top: 26px;
    }
  }
  .link-btn {
    width: 229px;
    margin-bottom: 8px;
  }
}
.infinite-slider .inner {
  padding-top: 24px;
  text-align: center;
  font-size: 15px;
}