/* Environment Page Styles */
.common-hero {
  .common-hero-main-title {
    font-family: "Zen Old Mincho", serif;
  }
}

.workplace {
  background-color: #f8f6f3;
  padding-top: 7rem;
  padding-bottom: 12rem;

  .workplace-wrapper {
    margin-top: 3.2rem;
    display: grid;
    gap: 4rem;
  }

  .workplace-item-text {
    line-height: 5.9rem;
    font-size: 2.4rem;
    margin-bottom: 2rem;
  }

  .workplace-item-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: end;
  }

  .workplace-item-content-image {
    height: 33.5rem;
    width: 100%;
    object-fit: cover;
  }

  .workplace-item-content-text-text {
    font-weight: 500;
    margin-bottom: 2rem;
    letter-spacing: 0.5px;
  }

  .workplace-item-content-text-box {
    background-color: #fff;
    border: #c1549a solid 1px;
    padding: 1rem 2rem 2.4rem 2rem;
    border-radius: 0.8rem;
  }

  .workplace-item-content-text-box-title {
    color: #c1549a;
    border-bottom: #c1549a solid 1px;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 2rem;
    font-size: 2rem;
    line-height: 100%;
  }

  .workplace-item-content-text-box-items {
    margin-top: 2.4rem;
  }

  .workplace-item-content-text-box-item {
    padding-left: 1rem;
    font-weight: 500;
    white-space: nowrap;
    /* letter-spacing: 1px; */
  }
}

@media (max-width: 780px) {
  .workplace {
    padding-top: 3.7rem;
    padding-bottom: 6.5rem;

    .workplace-wrapper {
      gap: 3.2rem;
    }

    .workplace-item-text {
      line-height: 4rem;
      font-size: 1.8rem;
      margin-bottom: 0.8rem;
      margin-top: 0.8rem;
    }

    .workplace-item-content {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .workplace-item-content-image {
      height: 20rem;
      margin-bottom: 2rem;
      object-position: 50% 10%;
    }

    .workplace-item-content-text-text {
      letter-spacing: 2px;
    }

    .workplace-item-content-text-box-title {
      font-size: 1.6rem;
    }
  }
}

.benefits {
  padding: 10rem 0 6rem;

  .main-title {
    margin-bottom: 3.2rem;
  }

  .benefits-content {
    margin-bottom: 4.2rem;
  }

  .label-title {
    font-size: 2.4rem;
    line-height: 100%;
    margin-bottom: 2.4rem;

    &::before {
      height: 3.2rem;
    }
  }

  .benefits-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
  }

  .benefits-card {
    border: #d37100 solid 1px;
    border-radius: 1.2rem;
    padding: 1.2rem;
    padding-bottom: 2.4rem;
  }

  .benefits-card-head {
    padding-bottom: 2rem;
    border-bottom: #d37100 solid 1px;
    color: #d37100;
    text-align: center;
  }

  .benefits-card-head-icon {
    width: 8.8rem;
    margin: 0 auto;
    display: block;
  }

  .benefits-card-head-text {
    font-size: 2.4rem;
    margin-top: 1rem;
    line-height: 100%;
  }

  .benefits-card-text {
    text-align: center;
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 1.5rem;
    padding-top: 2.4rem;
  }

  .benefits-card-link {
    display: grid;
    grid-template-columns: auto 5.2rem;
    height: 2.7rem;
    gap: 3.2rem;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 3.2rem;
    align-items: center;

    &:hover {
      .benefits-card-link-icon-black {
        opacity: 0;
      }
    }
  }

  .benefits-card-link-icon {
    position: relative;
    height: 100%;
  }

  .benefits-card-link-icon-black,
  .benefits-card-link-icon-white {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: 0.3s;
  }
}

@media (max-width: 780px) {
  .benefits {
    padding: 4rem 0 1rem;

    .benefits-content {
      margin-bottom: 3.2rem;
    }

    .label-title {
      font-size: 1.6rem;
      margin-bottom: 2rem;

      &::before {
        height: 2rem;
      }
    }

    .benefits-wrapper {
      grid-template-columns: 1fr 1fr;
      column-gap: 1.6rem;
      row-gap: 2rem;
    }

    .benefits-card {
      padding: 1.2rem 0.8rem;
      padding-bottom: 2.4rem;
    }

    .benefits-card-head {
      padding-bottom: 1rem;
    }

    .benefits-card-head-icon {
      width: 7.4rem;
    }

    .benefits-card-head-text {
      font-size: 1.6rem;
      line-height: 120%;

      height: 5.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .benefits-card-text {
      letter-spacing: 2px;
      font-size: 1.2rem;
      text-align: left;
      line-height: 160%;

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

    .benefits-card-link {
      grid-template-columns: auto 3.2rem;
      height: 1.6rem;
      gap: 3.8rem;
      font-size: 1.3rem;
      letter-spacing: 2px;
      margin-top: 2.4rem;
      white-space: nowrap;
    }
  }
}

.survey {
  background-color: #f8f6f3;
  padding: 10rem 0 2rem 0;

  .survey-wrapper {
    margin-top: 6rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    row-gap: 6rem;
    margin-bottom: 10rem;
  }

  .label-title {
    font-size: 2rem;
    line-height: 100%;
    margin-bottom: 2.4rem;

    &::before {
      height: 3.2rem;
    }
  }
}

@media (max-width: 780px) {
  .survey {
    background-color: #f8f6f3;
    padding: 4rem 0 2rem 0;

    .survey-wrapper {
      margin: 0 auto;
      margin-top: 2rem;
      grid-template-columns: 1fr;
      row-gap: 2rem;
      margin-bottom: 8rem;
      max-width: 50rem;
    }

    .label-title {
      font-size: 1.4rem;
      margin-bottom: 1.2rem;

      &::before {
        height: 2rem;
      }
    }
  }
}