@charset "UTF-8";

:root {
  --main-color: #491f24;
}

/************************************
** init
************************************/
.top #content {
  padding-top: 0;
}
.l-content {
  margin: 0 auto;
  padding-top: 0;
}
.fw {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}
.fw-inner {
  margin-left: auto;
  margin-right: auto;
  max-width: calc(
    var(--container_size, 0px) + var(--swl-pad_container, 0px) * 2
  );
  padding-left: var(--swl-pad_container, 0);
  padding-right: var(--swl-pad_container, 0);
}
.inner-wrap,
.wrap {
  width: 1200px;
  margin: 0 auto;
  padding: 60px 0;
}
.pc {
  display: block;
}
.sp {
  display: none;
}
@media screen and (max-width: 480px) {
  .inner-wrap,
  .wrap {
    width: auto;
    padding: 30px 0;
  }
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
}

/************************************
** 
************************************/
.heading {
  text-align: center;
  margin-bottom: 30px;
  h2 {
    position: relative;
    color: #444;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 0.15em;
    &:before {
      content: "";
      position: absolute;
      bottom: -15px;
      display: inline-block;
      width: 60px;
      height: 5px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      background-color: var(--main-color);
      border-radius: 2px;
    }
  }
  span.s1 {
    font-size: 32px;
  }
}
.link a {
  font-size: 20px;
  color: #222;
  i {
    padding-left: 1em;
  }
  &:hover {
    opacity: 0.7;
    transition: all 0.5s ease;
  }
}
@media screen and (max-width: 480px) {
  .heading {
    h2 {
      font-size: 18px;
    }
    span.s1 {
      font-size: 24px;
    }
  }
}
/************************************
** sec-01
************************************/
.sec-01 {
  background: url(https://ladysb.com/wp-content/uploads/2026/03/page-about_back_img1-scaled.webp);
  background-repeat: no-repeat;
  background-size: cover;
  .wrap {
    padding-bottom: 0;
    .items {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      .item-01 {
        text-align: center;
        .iw {
          img {
            width: 150px;
          }
          margin-bottom: 1.5em;
        }
        .p1 {
          font-size: 32px;
          letter-spacing: 0.15em;
          color: var(--main-color);
          margin-bottom: 1.5em;
          span {
            font-size: 42px;
          }
        }
        .p2 {
          font-size: 28px;
          letter-spacing: 0.15em;
          margin-bottom: 1.5em;
          span {
            font-size: 32px;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .sec-01 {
    padding: 0 15px;
    .wrap {
      .items {
        display: block;
        .item-01 {
          .iw {
            img {
              width: 100px;
            }
          }
          .p1 {
            font-size: 20px;
            letter-spacing: 0.1em;
            span {
              font-size: 24px;
            }
          }
          .p2 {
            font-size: 18px;
            letter-spacing: 0.1em;
            span {
              font-size: 21px;
            }
          }
        }
      }
    }
  }
}

/************************************
** resolved
************************************/
.resolved {
  background: #faf6f2;
  .heading {
    margin-bottom: 90px;
  }
  .items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .iw {
      width: 1000px;
      margin-bottom: 30px;
    }
    .iw02 {
      width: 750px;
    }
  }
  .items.sp {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  .resolved {
    padding: 0 15px;
    .heading {
      margin-bottom: 90px;
    }
    .items {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      .iw {
        width: auto;
        margin-bottom: 30px;
      }
      .iw04 {
        width: 48%;
        margin: 0 auto;
      }
    }
    .items.sp {
      display: block;
    }
    .items.pc {
      display: none;
    }
  }
}

/************************************
** reason
************************************/
.reason {
  background: #faf6f2;
  .wrap {
    padding-bottom: 150px;

    .heading {
      margin-bottom: 60px;
    }
  }
}

/* スライダー全体の調整 */
.reason-slider {
  width: 100%;
  overflow: visible !important; /* SPでチラ見せ部分が消えないようにする */
}

/* PC：スライダー無効時のレイアウト */
@media (min-width: 768px) {
  .reason-slider .swiper-wrapper {
    display: flex;
    justify-content: space-between; /* 3枚を均等に配置 */
    transform: none !important; /* Swiperの動きを完全に止める */
  }

  .reason-slider .swiper-slide {
    width: calc(33.333% - 20px) !important; /* 3列に固定 */
    margin-right: 0 !important;
  }

  .reason-slider .swiper-pagination {
    display: none; /* PCではドットを隠す */
  }
}

/* 共通：画像のスタイル */
.reason-slider .iw img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

@media screen and (max-width: 480px) {
  .reason {
    .wrap {
      padding: 30px 15px 150px;
    }
  }
}

/************************************
** facilities-service
************************************/
.facilities-service {
  .wrap {
    .items {
      display: flex;
      justify-content: center;
      gap: 20px;
      .item {
        a {
          .iw {
            overflow: hidden;
            img {
              width: 100%;
              height: auto;
              display: block;
              object-fit: cover;
              transition: transform 0.7s ease;
            }
          }
          &:hover img {
            transform: scale(1.05);
          }
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .facilities-service {
    .wrap {
      padding: 30px 15px;
      .items {
        flex-direction: column;
      }
    }
  }
}

.facilities-service {
  position: relative;
  .custom-shape-divider-bottom-1774292945 {
    position: absolute;
    top: -150px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(-180deg) scaleX(-1);

    svg {
      position: relative;
      display: block;
      width: calc(150% + 1.3px);
      height: 150px;
    }
    .shape-fill {
      fill: #fff;
    }
  }
}
@media screen and (max-width: 480px) {
  .facilities-service {
    .wrap {
      padding: 60px 15px 40px;
    }
    .custom-shape-divider-bottom-1774292945 {
      top: -60px;
      svg {
        height: 60px;
      }
    }
  }
}