@charset "utf-8";

/* ↓↓↓ fv ↓↓↓ */
.fv {
  background: url(../img/company/health/fv-img.jpg) no-repeat;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .fv {
    background: url(../img/company/health/fv-img_sp.jpg) no-repeat;
    background-size: cover;
  }
}

/* ↑↑↑ fv ↑↑↑ */

/* ↓↓↓ under-fv ↓↓↓ */
.under-fv {
  background-color: #fff;
  padding: 100px var(--pc-padd) 125px;
}

@media screen and (max-width: 768px) {
  .under-fv {
    padding: 64px var(--sp-padd) 80px;
  }
}

.under-fv .inner {
  max-width: 900px;
  margin: 0 auto;
}

.under-fv .inner .ttl {
  font-size: 3.8rem;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  color: #00a0e6;
  text-align: center;

  @media (max-width: 768px) {
    font-size: 2.4rem;
  }
}

.under-fv .inner .wrap {
  width: 100%;
  margin-top: 56px;
  display: flex;
  gap: 40px;

  @media (max-width: 768px) {
    margin-top: 32px;
    flex-direction: column;
    gap: 16px;
  }
}

.under-fv .inner .wrap .text {
  flex: 1;
  font-size: 1.4rem;
  letter-spacing: 0;
  line-height: 2.142857142857143;
  text-align: justify;
  word-break: break-all;

  @media (max-width: 768px) {
    width: 100%;
  }
}

.under-fv .inner .wrap .image {
  display: block;
  width: 250px;

  @media (max-width: 768px) {
    margin: 0 auto;
  }
}

/* ↑↑↑ under-fv ↑↑↑ */

/* ↓↓↓ attempt-block ↓↓↓ */
.attempt-block {
  width: 100%;
  padding: 100px var(--pc-padd) 150px;
  position: relative;

  @media (max-width: 768px) {
    padding: 80px var(--sp-padd) 150px;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 420px;
    background-color: #e2ecec;
    z-index: -1;

    @media (max-width: 768px) {
      height: 900px;
    }
  }
}

.attempt-block .inner {
  max-width: 900px;
  margin: 0 auto;
}

.attempt-block .inner .ttl {
  font-size: 3.8rem;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  color: #00a0e6;
  text-align: center;

  @media (max-width: 768px) {
    font-size: 2.4rem;
  }
}

.attempt-block .inner .text {
  display: block;
  margin-top: 56px;
  font-size: 1.4rem;
  letter-spacing: 0;
  line-height: 2.142857142857143;
  text-align: center;

  @media (max-width: 768px) {
    margin-top: 32px;
    text-align: justify;
    word-break: break-all;
  }
}

.attempt-block .inner .link-list {
  width: 100%;
  margin-top: 80px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;

  @media (max-width: 768px) {
    margin-top: 40px;
    flex-direction: column;
    gap: 24px;
  }

  a {
    display: block;
    transition: opacity 300ms 0s ease;
  }

  @media (min-width: 769px) {
    a.item:hover {
      opacity: .7;
    }
  }
}

/* ↑↑↑ attempt-block ↑↑↑ */