@charset "utf-8";
/* CSS Document */
/* ==========================================================================
    Layout
   ========================================================================== */
.l-section-rd__inner.--img.--family-title {
    padding-top: 18rem;
    background-image: url('../images/family/img-family.webp');
}
@media screen and (max-width: 767.98px) {
    .l-section-rd__inner.--img.--family-title {
    padding-top: 24rem;
}
}
/* # =================================================================
   # Project
   # ================================================================= */
.p-family-cta {
   margin-top: 4rem; 
}
.p-family-cta__txt {
   margin-bottom: 1rem;
   color: var(--color-green);
   font-weight: var(--fontweight-bold);
   font-size: 1.4rem;
   text-align: center;
   word-break: keep-all;
}
.p-family-cta .c-catch__txt {
   margin-top: 0;
   margin-bottom: 2.5rem;
}
.p-family-cta__btns {
   max-width: 34rem;
   margin-right: auto;
   margin-left: auto;
}
.p-family-cta__cols {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   margin-top: 2rem;
}
.p-family-cta__cols .c-btn {
   width: 16.5rem;
   padding-right: 40px;
   padding-left: 20px;
}
.p-family-yourselfBg::before,
.p-family-yourselfBg::after {
    position: absolute;
    z-index: 1000;
    content: '';
}
.p-family-yourselfBg::before {
   top: -13rem;
   left: 0;
   width: 23.8rem;
   height: 40.3rem;
   background: url('../images/family/bg-yourself-fluid.webp') no-repeat right center / cover;
}
.p-family-yourselfBg::after {
   top: -9.5rem;
   right: 8rem;
   width: 28.4rem;
   height: 27.6rem;
   background: url('../images/family/bg-yourself-person.webp') no-repeat left center / cover;
}
.p-family-support {
   display: flex;
   flex-wrap: wrap;
   gap: 20px 30px;
   margin-top: 4rem;
}
.p-family-support__item {
   display: flex;
   flex-direction: column;
   width: calc((100% - 30px)/2);
   padding-top: 1.2rem;
   padding-right: 25px;
   padding-bottom: 2rem;
   padding-left: 25px;
   border-radius: 20px;
   background-color: #FFF;
}
.p-family-support__head {
   display: flex;
   align-items: center;
   position: relative;
   margin-bottom: 1.6rem;
   padding-left: 12px;
}
.p-family-support__head::before {
   position: absolute;
   top: 50%;
   left: 0;
   translate: -100% -50%;
   width: 25px;
   height: 1px;
   background-color: var(--color-green);
   content: '';
}
.p-family-support__img {
   flex: 0 0 90px;
}
.p-family-support__title {
   color: var(--color-green);
   font-weight: var(--fontweight-bold);
   font-size: 2rem;
   line-height: 1.15;
}
.p-family-support__txt {
   margin-bottom: 1.4rem;
   font-weight: var(--fontweight-bold);
}
.p-family-support__btn {
   margin-top: auto;
}
.p-consult-lead {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 30px;
   margin-bottom: 4rem;
}
.p-consult-lead__item {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 18.8rem;
   height: 12.8rem;
   background: url('../images/family/bg-consult-lead.webp') no-repeat center / contain;
   font-weight: var(--fontweight-bold);
   font-size: 1.8rem;
   text-align: center;
   line-height: 1.5;
}
.p-family-consultBg::before,
.p-family-consultBg::after {
    position: absolute;
    z-index: 1000;
    content: '';
}
.p-family-consultBg::before {
   top: -22rem;
   left: 0;
   width: 41.8rem;
   height: 64rem;
   background: url('../images/family/bg-consult-fluid-yellow.webp') no-repeat right center / cover;
}
.p-family-consultBg::after {
   top: 31.5rem;
   right: 6rem;
   width: 28rem;
   height: 27.2rem;
   background: url('../images/family/bg-consult-fluid-green.webp') no-repeat left center / cover;
}
.p-message-cp {
   margin-top: .92em;
   margin-bottom: .5em;
   font-weight: var(--fontweight-bold);
   font-size: 3.2rem;
   text-align: center;
   line-height: 1.15;
}
@media (max-width: 767.98px) {
   .p-family-cta:has(.c-catch) {
      margin-top: 3rem;
   }
   .p-family-cta .c-catch__txt {
      margin-top: .4rem;
   }
   .p-family-cta__cols {
      margin-top: 1rem;
   }
   .p-family-yourselfBg::before {
      top: -14rem;
      left: 0;
      width: 13.5rem;
      height: 25.3rem;
   }
   .p-family-yourselfBg::after {
      top: -6rem;
      right: 0rem;
      width: 19.8rem;
      height: 24.5rem;
   }
   .p-family-support {
      flex-direction: column;
      margin-top: 3rem;
   }
   .p-family-support__item {
      width: calc(100% - -25px);
   }
   .p-family-support__item:nth-of-type(odd) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
   }
   .p-family-support__item:nth-of-type(odd) .p-family-support__btn {
      margin-left: 0;
   }
   .p-family-support__item:nth-of-type(even) {   
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      margin-left: -25px;
   }
   .p-family-support__item:nth-of-type(even) .p-family-support__btn {
      margin-right: 0;
   }
   .p-family-consultBg::before {
      top: -16rem;
      left: 0;
      width: 11.6rem;
      height: 26.5rem;
   }
   .p-family-consultBg::after {
      top: 33rem;
      right: 0;
      width: 9.6rem;
      height: 18.8rem;
   }
   .p-consult-lead {
      gap: 15px;
      margin-bottom: 2rem;
   }
   .p-consult-lead__item {
      width: 15.8rem;
      height: 10.6rem;
      font-size: 1.6rem;
   }
   .p-message-cp {
      font-size: 2.6rem;
   }
}