.page-main--featured-project-detail {
  padding: 100px 0 200px;

  .featured-project-list {
    .featured-project-list__inner {
      .featured-project-list-grid {
        display: flex;
        overflow: auto;

        @media screen and (max-width: 768px) {
          display: grid;
        }
      }

      .featured-project-row {
        min-width: 346px;
      }

      .featured-project-row:not(:nth-child(1)):not(:nth-child(3n))::before {
        content: "";
        position: absolute;
        left: clamp(-40px, -2.8vw, -20px);
        top: 0;
        width: 1px;
        height: 100%;
        background: #000;
      }

      .featured-project-row:nth-child(3n)::after {
        content: none;
      }
    }
  }
}
/* -----------------------------
   上部タイトル
------------------------------ */
.featured-project-detail-header {
  position: relative;

  .featured-project-detail-header__inner {
    display: flex;
    width: 80%;
    justify-content: space-between;

    /* .featured-project-detail-header__left {
      width: 45%;
    } */

    .featured-project-detail-header__right {
      display: flex;
      position: relative;

      .featured-project-spec {
        margin-top: 40px;

        .featured-project-spec__row {
          display: flex;
          align-items: center;
          margin-bottom: 11px;
          /*line-height: 1.5;*/
          text-align: left;

          dt {
            width: 150px;
            font-size: 1.2rem;
            margin: 4px 0;
            span {
              padding: 3px 7px;
              background: var(--color-gray);
            }
          }

          dd {
            margin-left: 5px;
            letter-spacing: 0.6px;
            font-size: 1.4rem;
            font-weight: 300;
            white-space: nowrap;
          }
        }
      }

      .featured-project-spec__img {
        width: 115px;
        object-fit: contain;
      }
    }
  }

  &.Wロフトのいえ::before,
  &.みんなのいえ::before,
  &.こだわりのいえ::before {
    content: "";
    display: inline-block;
    width: 115px;
    height: 170px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    right: 0;
    bottom: 0;
  }

  &.Wロフトのいえ::before {
    background-image: url("../img/featured-project/wloft_tate.webp");
  }
  &.みんなのいえ::before {
    background-image: url("../img/featured-project/minna_tate.webp");
  }
  &.こだわりのいえ::before {
    background-image: url("../img/featured-project/kodawari_tate.webp");
  }
}

@media screen and (max-width: 768px) {
  .featured-project-detail-header {
    .featured-project-detail-header__inner {
      flex-direction: column;
      gap: 30px;

      .featured-project-detail-header__left {
        width: 100%;
      }

      .featured-project-detail-header__right {
        width: 100%;
        flex-direction: column;
        align-items: baseline;
        gap: 30px;

        .featured-project-spec {
          margin-top: 0;
        }

        .featured-project-spec__img {
          width: 60px;
        }
      }
    }

    &.Wロフトのいえ::before,
    &.みんなのいえ::before,
    &.こだわりのいえ::before {
      content: none;
    }

    &.Wロフトのいえ,
    &.みんなのいえ,
    &.こだわりのいえ {
      .featured-project-detail-header__right {
        &::before {
          content: "";
          display: inline-block;
          max-width: 280px;
          width: 70%;
          height: 70px;
          vertical-align: middle;
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          position: relative;
          left: 0;
          top: 0;
        }
      }
    }

    &.Wロフトのいえ {
      .featured-project-detail-header__right {
        &::before {
          background-image: url("../img/featured-project/wloft_tate_sp.webp");
        }
      }
    }

    &.みんなのいえ {
      .featured-project-detail-header__right {
        &::before {
          background-image: url("../img/featured-project/minna_tate_sp.webp");
        }
      }
    }

    &.こだわりのいえ {
      .featured-project-detail-header__right {
        &::before {
          background-image: url("../img/featured-project/kodawari_tate_sp.webp");
        }
      }
    }
  }
}

/* -----------------------------
   ギャラリー
------------------------------ */
.featured-project-gallery {
  padding: 70px 0 180px;

  .featured-project-gallery__inner {
    width: 100%;

    .mainSwiper {
      aspect-ratio: 1430 / 800;
      width: 100%;
      max-height: 800px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }

    .thumbsSwiper {
      max-width: 1110px;
      width: 90%;
      margin: 15px auto;

      .swiper-wrapper {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;

        .swiper-slide {
          aspect-ratio: 100 / 55;
          overflow: hidden;
          cursor: pointer;
          opacity: 1;
          flex: 1 1 180px;
          max-width: 180px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: opacity 0.3s;
          }
        }

        .swiper-slide-thumb-active {
          opacity: 0.5;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .featured-project-gallery {
    padding: 60px 0 120px;

    .featured-project-gallery__inner {
      .mainSwiper {
        max-height: 210px;
      }

      .thumbsSwiper {
        margin: 10px auto;

        .swiper-wrapper {
          flex-wrap: wrap;
          gap: 10px 0;
          justify-content: left;

          .swiper-slide {
            flex: 1 1 22%;
            max-width: 22%;
          }
        }
      }
    }
  }
}

/* -----------------------------
   インタビュー
------------------------------ */
.featured-project-interview {
  padding-bottom: 170px;

  .featured-project-interview__inner {
    display: flex;
    gap: 60px;

    .featured-project-interview__left {
      width: 35%;

      .featured-project-interview__title {
        margin-top: 15px;
        font-size: 3rem;
        line-height: 2;
      }
    }

    .featured-project-interview__right {
      width: 67%;
      display: flex;
      flex-direction: column;
      gap: 30px;
      line-height: 2;

      p {
        margin: 0;
        font-size: 1.4rem;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .featured-project-interview {
    padding-bottom: 100px;

    .featured-project-interview__inner {
      flex-direction: column;

      .featured-project-interview__left {
        width: 100%;
      }

      .featured-project-interview__right {
        width: 100%;
      }
    }
  }
}

/* -----------------------------
   一覧
------------------------------ */
.featured-project-list_wrap {
  background-color: #fff;
  padding: 80px 0;

  .featured-project-list_wrap_inner {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: end;
    }
  }
}

@media screen and (max-width: 768px) {
  .featured-project-list_wrap {
    padding: 70px 0;

    .featured-project-list_wrap_inner {
      max-width: 100%;

      .section-header {
        align-items: start;
        flex-direction: column;
      }

      .featured-project-list {
        margin-top: 30px;
      }

      .featured-project-list__action {
        padding-top: 40px;
      }
    }
  }
}

/* -----------------------------
   タイトル
------------------------------ */
@media screen and (max-width: 768px) {
  .page-main--featured-project-detail {
    .section-header {
      .section-header__inner {
        .section-header__lead {
          font-size: 1.6rem;
          line-height: 2;
          margin: 6px 0 0;
        }
      }
    }
  }
}