section.subpage-mv {
  position: relative;
  .bg-img {
    width: 100%;
  }
  &::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    z-index: 1;
    background-color: rgb(0 0 0 / 0.3);
  }
  .page-title {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: max-content;
    font-size: 3rem;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
    text-shadow: 0px 2px 4px rgb(0 0 0 / 0.5);
  }
}
@media (max-width: 960px) {
  section.subpage-mv {
    .bg-img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      object-position: 25% 50%;
    }
    .page-title {
      font-size: 1.5rem;
    }
  }
}

.section-title {
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 4rem;
  .title-img {
    margin-inline: auto;
  }
  .sub {
    font-size: 1.75rem;
    text-align: center;
  }
}
@media (max-width: 960px) {
  .section-title {
    width: fit-content;
    margin-inline: auto;
    margin-bottom: 3rem;
    .title-img {
      width: 80%;
    }
    .sub {
      font-size: 1.5rem;
      text-align: center;
    }
  }
}

/*=========================
  life lab
=========================*/
.lifelab-about {
  background-color: #f5f6bc;
  padding: var(--section-padding);
  position: relative;
  .section-title {
    width: fit-content;
    margin-left: 5%;
    margin-bottom: 4rem;
    .title-img {
      margin-inline: auto;
    }
  }
  .content {
    position: relative;
    z-index: 1;
    /* background-color: #ffffff; */
    width: 75%;
    margin-left: auto;
    padding: 3rem 10% 0rem;
  }
  .lifelab-box h3 {
    font-size: 30px;
    text-align: left;
    margin-bottom: 25px;
  }
  .lifelab-box {
    margin-top: 20px;
    margin-bottom: 80px;
  }
  .images {
    /* position: relative; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    .img1,
    .img2 {
      width: 50%;
    }
  }
  .bg-white {
    position: absolute;
    top: 30%;
    right: 0%;
    background-color: #ffffff;
    width: 75%;
    height: 400px;
    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 2rem;
      left: -2rem;
      border: 2px solid #ffffff;
    }
  }
  .illusts {
    position: absolute;
    bottom: 0;
    left: 5%;
    width: calc(273 / 1920 * 100vw);
    max-width: 273px;
  }
  .ladybug1 {
    position: absolute;
    z-index: 3;
    top: 60%;
    left: 21%;
    width: calc(130 / 1920 * 100vw);
    max-width: 220px;
  }
  .ladybug2 {
    position: absolute;
    z-index: 3;
    top: 22%;
    left: 85%;
    width: calc(130 / 1920 * 100vw);
    max-width: 220px;
  }
}
@media (max-width: 960px) {
  .lifelab-about {
    padding-bottom: 15rem;
    .section-title {
      margin-inline: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .title-img {
        width: 80%;
      }
      .sub {
        font-size: 1.25rem;
        width: max-content;
      }
    }
    .content {
      margin-left: 0;
      width: 100%;
    }
    .flex {
      flex-direction: column;
      gap: 2rem;
      .text {
        padding-left: 5%;
        font-size: 1rem;
      }
      .button {
      }
    }
    .bg-white {
      width: 90%;
      top: 25%;
      &::before {
        top: 20px;
        left: -20px;
      }
    }
    .illusts {
      bottom: 0;
      left: 5%;
      width: calc(160 / 430 * 100vw);
      max-width: 273px;
    }
    .ladybug1 {
      position: absolute;
      z-index: 3;
      top: 78%;
      left: 15%;
      width: calc(70 / 430 * 100vw);
      max-width: 220px;
    }
    .ladybug2 {
      position: absolute;
      z-index: 3;
      top: 88%;
      left: 75%;
      width: calc(70 / 430 * 100vw);
      max-width: 220px;
    }
  }
}

/*=========================
  content
=========================*/
section.lifelab-content {
  background-color: #f5f6bc;
  padding: var(--section-padding);
  position: relative;
  .inner {
    background-color: #ffffff;
    width: calc(100% - 2rem);
    max-width: 1200px;
    margin-inline: auto;
    padding: 4rem 4rem 10rem;
    position: relative;
  }
  .service h3 {
    font-size: 30px;
    text-align: center;
    margin-bottom: 50px;
  }
  .service .img-ttl {
    font-size: 30px;
  }
  .service .img-txt {
    font-size: 20px;
  }
  .text-img-flex {
    max-width: 1000px;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 6rem;
    .texts {
      width: 50%;
      .title {
        font-size: 1.75rem;
        text-align: center;
        text-wrap: balance;
        margin-bottom: 1.5rem;
      }
      .text {
        font-size: 1.25rem;
      }
    }
    .image {
      .img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    margin-top: 50px;
  }
  col:nth-child(1) {
    width: 23%;
  }
  col:nth-child(2) {
    width: 39%;
  }
  col:nth-child(3) {
    width: 85px;
  }
  col:nth-child(4) {
    width: 30%;
  }
  caption {
    caption-side: top;
    text-align: left;
    font-size: 34px;
    padding: 5px;
  }
  td {
    border: 1px solid #707070;
    height: 40px;
    padding: 10px 8px;
    word-break: break-word;
  }
  table td:nth-child(1),
  table td:nth-child(3) {
    vertical-align: middle;
    text-align: center;
  }
  .text-img-flex.img-l {
    flex-direction: row-reverse;
  }
  .life-lab-btn {
    margin-top: 70px;
    margin-bottom: 70px;
  }
  .life-lab-btn .btn {
    display: flex;
    justify-content: center;
    gap: 100px;
  }
  .life-lab-btn .btn a {
    width: 300px;
    padding: 14px 14px 14px 40px;
    display: block;
    border: #333333 2px solid;
    color: #fff;
    font-weight: normal;
    text-align: left;
  }
  .life-lab-btn .btn .tel {
    background-color: #33c161;
  }
  .life-lab-btn .btn .recruit {
    background-color: #ffadca;
  }
  .life-lab-btn .btn .tel::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 90%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid #fff;
  }
  .life-lab-btn .btn .recruit::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 90%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid #fff;
  }
  .ladybug1 {
    position: absolute;
    top: 3%;
    left: 0;
    width: calc(207 / 1920 * 100vw * 0.8);
    max-width: calc(207px * 0.8);
  }
  .ladybug2 {
    position: absolute;
    top: 51%;
    right: 0;
    width: calc(170 / 1920 * 100vw * 0.8);
    max-width: calc(207px * 0.8);
  }
  .ladybug3 {
    position: absolute;
    top: 45%;
    left: 0;
    width: calc(225 / 1920 * 100vw * 0.8);
    max-width: calc(225px * 0.8);
  }
  .ladybug4 {
    position: absolute;
    top: 95%;
    right: 14%;
    width: calc(150 / 1920 * 100vw * 0.8);
  }
  .illust1 {
    position: absolute;
    bottom: 0%;
    left: 3%;
    width: calc(103 / 1920 * 100vw);
    max-width: calc(103px);
  }
  .illust2 {
    position: absolute;
    bottom: 0%;
    right: 3%;
    width: calc(154 / 1920 * 100vw);
    max-width: calc(154px);
  }
  @media (max-width: 960px) {
    .life-lab-btn .btn {
      display: block;
    }
    .life-lab-btn .btn a {
      margin: 40px auto;
    }
  }
}
@media (max-width: 960px) {
  section.lifelab-content {
    .inner {
      padding-inline: 3rem;
    }
    .text-img-flex {
      flex-direction: column;
      .texts {
        width: 100%;
        .title {
          font-size: 1.5rem;
          text-align: center;
          text-wrap: balance;
          margin-bottom: 1.5rem;
        }
        .text {
          font-size: 1rem;
        }
      }
      .image {
        width: 100%;
        .img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    .text-img-flex.img-l {
      flex-direction: column;
    }
    .ladybug1 {
      position: absolute;
      top: 0%;
      left: 0%;
      width: calc(100 / 430 * 100vw * 0.8);
      max-width: calc(238px * 0.8);
    }
    .ladybug2 {
      position: absolute;
      top: 20%;
      right: 0%;
      width: calc(90 / 430 * 100vw * 0.8);
      max-width: calc(191px * 0.8);
    }
    .ladybug3 {
      position: absolute;
      top: 54%;
      left: 0%;
      width: calc(100 / 430 * 100vw * 0.8);
      max-width: calc(191px * 0.8);
    }
    .ladybug4 {
      position: absolute;
      top: 97%;
      right: 22%;
      width: calc(80 / 430 * 100vw * 0.8);
      max-width: calc(143px * 0.8);
      z-index: 2;
    }
    .illust1 {
      position: absolute;
      bottom: 0%;
      left: 3%;
      width: calc(60 / 430 * 100vw);
      max-width: calc(103px);
    }
    .illust2 {
      position: absolute;
      bottom: 0%;
      right: 3%;
      width: calc(100 / 430 * 100vw);
      max-width: calc(154px);
    }
  }
}

@media (max-width: 680px) {
  section.lifelab-content {
    .ladybug3 {
      position: absolute;
      top: 51%;
      left: 0%;
      width: calc(85 / 430 * 100vw * 0.8);
      max-width: calc(191px * 0.8);
    }
  }
}

@media (max-width: 600px) {
  section.lifelab-content {
    .ladybug3 {
      position: absolute;
      top: 46%;
      left: 0%;
      width: calc(85 / 430 * 100vw * 0.8);
    }
  }
}
@media (max-width: 530px) {
  section.lifelab-content {
    .ladybug3 {
      position: absolute;
      top: 42%;
      left: 0%;
      width: calc(85 / 430 * 100vw * 0.8);
    }
  }
}
@media (max-width: 500px) {
  section.lifelab-content {
    .ladybug3 {
      position: absolute;
      top: 39%;
      left: 0%;
      width: calc(75 / 430 * 100vw * 0.8);
    }
  }
}