@charset "utf-8";

/* css Document
*****************************************************************/
@import "../../n_common/css/_variable.css";

.design-intro{
  font-family: var(--font_min);
  font-weight: 500;
  .design-intro__img{
    img{
      width: 100%;
      max-width: none;
    }
    figure{
      position: relative;
    }
    figcaption{
      font-family: var(--font_gothic);
      font-size: clamp(12px, 9.811px + 0.27vw, 15px);/*15~12(1920~810)*/
      position: absolute;
      bottom: 8px;
      left: 24px;
      @media (width < 810px) {
        bottom: 4px;
        left: 12px;
      }
    }
  }
  .design-intro__container{
    padding: 48px 0 56px;
    background: linear-gradient(180deg, color-mix(in srgb, #90d3ec 60%, #fff) 10%, #fff 90%);
    @media (width < 810px) {
      padding: 32px 0 48px;
    }
  }
  .design-intro__catch{
    font-family: var(--font_zen);
    font-size: clamp(18px, -2.769px + 2.564vw, 28px);/*28~18(1200~810)*/
    font-weight: 500;
    .catch_txt{
      display: block;
      +.catch_txt{
        margin-top: 0.5em;
      }
    }
    .txt_bg{
      padding: 0.2em 2em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      background: linear-gradient(90deg, transparent 0%, #fff 10%, #fff 90%, transparent 100%);
      @media (width < 810px) {
        padding: 0.2em 1.2em;
      }
    }
  }
  .design-intro__txt{
    word-break: keep-all;
    font-size: clamp(16px, 7.692px + 1.026vw, 20px);/*20~16(1200~810)*/
    margin-top: 32px;
    @media (width < 810px) {
      word-break: normal;
      text-align: left;
      margin-top: 24px;
    }
  }
}


.design-detail{
  font-family: var(--font_min);
  font-weight: 500;
  padding: 100px 0 120px;
  background: var(--main_c);
  color: #fff;
  @media (width < 810px) {
    padding: 48px 0 64px;
  }
  .design-detail__ttl{
    font-family: var(--font_en);
    font-size: clamp(32px, -34.462px + 8.205vw, 64px);/*64~32(1200~810)*/
    line-height: 1;
    letter-spacing: 0.14em;
  }
  .design-detail__txt{
    word-break: keep-all;
    font-size: clamp(16px, 7.692px + 1.026vw, 20px);/*20~16(1200~810)*/
    margin-top: 32px;
    @media (width < 810px) {
      margin-top: 20px;
    }
  }
  .design-detail__img{
    margin-top: 48px;
    @media (width < 810px) {
      margin-top: 32px;
    }
    +.design-detail__img{
      margin-top: 40px;
      @media (width < 810px) {
        margin-top: 16px;
      }
    }
    img{
      width: 100%;
      max-width: none;
    }
  }
  .design-detail__list{
    text-align: left;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 4.17%;
    margin-top: 64px;
    @media (width < 810px) {
      gap: 24px 16px;
      margin-top: 48px;
    }
    @media (width < 500px) {
      grid-template-columns: repeat(1, 1fr);
    }
    &.--second{
      grid-template-columns: repeat(3, 1fr);
      gap: 24px 5.67%;
      margin-top: 32px;
      @media (width < 810px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
        margin-top: 24px;
      }
      @media (width < 500px) {
        grid-template-columns: repeat(1, 1fr);
      }
    }
  }
  .design-detail__list__item{
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0;
  }
  .design-detail__list__catch{
    font-size: clamp(17px, 6.615px + 1.282vw, 22px);/*22~17(1200~810)*/
    line-height: 1.4;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #fff;
    margin-bottom: 8px;
  }
  .design-detail__list__ttl{
    font-family: var(--font_zen);
    font-size: clamp(20px, -17.385px + 4.615vw, 38px);/*38~20(1200~810)*/
    font-weight: 500;
    line-height: 1.4;
    .txt_number{
      font-size: 1.8em;
      color: #90d3ec;
    }
  }
  .design-detail__list__sttl{
    font-family: var(--font_zen);
    font-size: clamp(18px, -2.769px + 2.564vw, 28px);/*28~18(1200~810)*/
    font-weight: 500;
    line-height: 1.4;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #fff;
    margin-bottom: 8px;
  }
  .design-detail__list__txt{
    font-family: var(--font_gothic);
    font-size: clamp(14px, 9.846px + 0.513vw, 16px);/*16~14(1200~810)*/
  }
  .design-detail__list__img{
    margin-top: 12px;
  }
}


.design-landplan{
  margin-top: 80px;
}


.design-roomplan{
  font-family: var(--font_min);
  font-weight: 500;
  padding: 80px 0;
  @media (width < 810px) {
    padding: 64px 0;
  }
  .design-roomplan__parking{
    container-type: inline-size;
    margin-top: 64px;
    @media (width < 810px) {
      margin-top: 40px;
    }
    img{
      width: 100%;
      max-width: none;
    }
  }
  .design-roomplan__parking__img{
    position: relative;
    padding: 0 8.33cqw 4.5cqw 0;
  }
  .design-roomplan__parking__fukidashi{
    width: 26.33cqw;/*316/1200*/
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .design-roomplan__layout{
    margin-top: 24px;
    @media (width < 810px) {
      margin-top: 16px;
    }
  }
  .roomplan-merit{
    background: #90d3ec;
    color: var(--main_c);
    .roomplan-merit__ttl{
      color: #fff;
      background: var(--main_c);
    }
  }
}