@charset "utf-8";

/* ==============================

main_visual

============================== */
.lower_page .main_visual .main_visual-fg__title {
    top: calc( 50% - 91px );
    width: 412px;
}
@media screen and ( max-width: 768px ){
    .lower_page .main_visual .main_visual-fg__title {
        /* w 157 h 89 */
        top: calc( 50% - calc( 44.5 * 100vw / var( --dw ) ) );
        width: calc( 309 * 100vw / var( --dw ) );
    }
}


/* ==============================

facade

============================== */
.facade {
}
@media screen and ( max-width: 768px ){
}



.facade .l-content-section-inner {
    padding: 0;
}


.facade-content {
    position: relative;
    width: 100%;
    margin: 0;
    padding: min( calc( 62 * 100vw / var( --dw ) ), 100px ) 0 min( calc( 86 * 100vw / var( --dw ) ), 86px );
}
.facade-content__title {
    /* w 156 h 111 */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min( calc( 156 * 100vw / var( --dw ) ), 156px );
    margin: 0 auto min( calc( 75 * 100vw / var( --dw ) ), 75px );
    padding: 0;
    font-size: 0;
}
.facade-content__lead {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-weight: 600;
    margin: 0 0 min( calc( 60 * 100vw / var( --dw ) ), 60px );
    padding: 0;
    text-align: center;
    background: url( '../img/select/bg_head.webp') no-repeat center top / 9px auto;
    padding-top: 66px;
    letter-spacing: 0.08em;
    font-feature-settings: normal;
}
.facade-content__text {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    font-feature-settings: normal;
    letter-spacing: 0.1em;
}
.facade-content__text.fs-xl {
    line-height: 2.2;
}
.facade-image {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
}
@media screen and ( max-width: 768px ){
    .facade-content {
        padding: calc( 45 * 100vw / var( --dw ) ) 0 calc( 65 * 100vw / var( --dw ) );
    }
    .facade-content__title {
        /* w 104 h 87 */
        width: calc( 104 * 100vw / var( --dw ) );
        margin: 0 auto calc( 50 * 100vw / var( --dw ) );
    }
    .facade-content__lead {
        margin: 0 0 calc( 40 * 100vw / var( --dw ) );
        letter-spacing: -0.02em;
    }
    .facade-content__text {
      letter-spacing: 0;
    }
    .facade-image {
        padding: 0;
    }
}

/* ==============================

select-section

============================== */
.select-section {
  .select-section__header {
    /*  */
  }

  .select-section__header-upper {
    background: #031e37;
    color: #cebc97;
    padding: min( calc( 50 * 100vw / var( --dw ) ), 50px ) 20px;
    position: relative;

    @media (width <= 768px) {
      padding: min( calc( 35 * 100vw / var( --dw ) ), 35px ) 20px min( calc( 30 * 100vw / var( --dw ) ), 30px );
    }

    &::before {
      content: '';
      display: block;
      height: 1px;
      background: #d8c8ae;
      width: 100%;
      position: absolute;
      top: 6px;
      left: 0;

      @media (width <= 768px) {
        top: 4px;
      }
    }

    &::after {
      content: '';
      width: 44px;
      height: 13px;
      top: calc(100% - 1px);
      background: #031E37;
      position: absolute;
      left: 50%;
      display: block;
      transform: translate(-50%,0);
      clip-path: polygon(50% 100%, 0 0, 100% 0);

    }
  }

  .select-section__head {
    text-align: center;
    font-size: var(--fs-m);
    &::before {
      content: attr(data-en);
      font-family: "Cinzel", serif;
      font-size: min( max( calc( 50 * 100vw / var( --dw ) ), 48px ), calc( 50px * var( --magnification ) ) );
      letter-spacing: 0.1em;
      font-weight: 400;
      display: block;
      line-height: 1;
      margin-bottom: min( calc( 20 * 100vw / var( --dw ) ), 20px );

      @media (width <= 768px) {
        font-size: min( max( calc( 30 * 100vw / var( --dw ) ),28px ), calc( 30px * var( --magnification ) ) );
        margin-bottom: min( calc( 10 * 100vw / var( --dw ) ), 10px );
      }
    }
  }

  .select-section__header-lower {
    background: #e9e9e9;
    text-align: center;
    padding: min( calc( 50 * 100vw / var( --dw ) ), 50px ) 20px;
    font-size: var(--fs-xl);
    letter-spacing: 0.1em;

    @media (width <= 768px) {
      padding: min( calc( 35 * 100vw / var( --dw ) ), 35px ) 20px;
    }
  }

  .select-section__contents {
    padding: min( calc( 80 * 100vw / var( --dw ) ), 80px ) 0;

    @media (width <= 768px) {
      padding: min( calc( 25 * 100vw / var( --dw ) ), 25px ) 0 min( calc( 40 * 100vw / var( --dw ) ), 40px );      
    }
  }

  .select-section__lead-caption {
    font-size: var(--fs-s);
    margin-top: min( calc( 10 * 100vw / var( --dw ) ), 10px );

    @media (width <= 768px) {
      font-size: var(--fs-xs);
      margin-top: min( calc( 6 * 100vw / var( --dw ) ), 6px );
    }
  }

  .select-section__inner--plan {
    max-width: 1187px;
  }

  .select-section__inner--color {
    max-width: 1000px;
  }

  .select-section__inner--height {
    max-width: 1013px;
  }

  .select-section__inner--unitbath {
    max-width: 1185px;
  }

  .select-section__col {
    display: flex;
    gap: min( calc( 50 * 100vw / var( --dw ) ), 50px );

    @media (width <= 768px) {
      flex-direction: column;
      gap: min( calc( 25 * 100vw / var( --dw ) ), 25px );
    }
  }

  .select-section__plan-block:nth-child(1) {
    position: relative;
  }

  .select-section__plan-block:nth-child(1)::after {
    content: '';
    width: 53px;
    height: 99px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 13.95%, #C31C1C 51.16%);
    display: block;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    left: calc(100% + 8px);

    @media (width <= 768px) {
      position: static;
      transform: none;
      margin: 18px auto 25px;
      width: 77px;
      height: 38px;
      clip-path: polygon(50% 100%, 100% 0, 0 0);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 13.95%, #C31C1C 51.16%);
    }
  }

  .select-section__plan-col {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 78px;

    @media (width <= 768px) {
      grid-template-columns: 1fr;
      gap: 0;
    }
  }

  .select-section__plan-ex {
    margin-top: min( calc( 15 * 100vw / var( --dw ) ), 15px);
    text-align: right;

    @media (width <= 768px) {
      text-align: center;
    }

    img {
      width: calc( 376 * 100vw / var( --dw ) );

      @media (width <= 768px) {
        width: calc( 335 * 100vw / var( --dw ) );
      }
    }
  }

  .select-section__plan-caption {
    margin-top: min( calc( 35 * 100vw / var( --dw ) ), 35px);
    font-size: var(--fs-s);

    @media (width <= 768px) {
      font-size: var(--fs-xs);
    }

  }

  .select-section__inner--unitbath {
    .select-section__col {
      gap: min( calc( 34 * 100vw / var( --dw ) ), 34px );

      @media (width <= 768px) {
        gap: min( calc( 16 * 100vw / var( --dw ) ), 16px );
      }
    }

    .select-section__image {
      width: calc(703 / 1185 * 100%);
      position: relative;

      @media (width <= 768px) {
        width: 100%;
      }
    }

    .select-section__image-caption {
      position: absolute;
      top: calc(100% + 10px);
      font-size: var(--fs-s);

      @media (width <= 768px) {
        position: static;
        margin-top: min( calc( 11 * 100vw / var( --dw ) ), 11px);
        font-size: var(--fs-xs);
      }
    }
  }

  .select-section__info {
    background: #f6f5f3;
    padding: min( calc( 28 * 100vw / var( --dw ) ), 28px );

    @media (width <= 768px) {
      padding: min( calc( 20 * 100vw / var( --dw ) ), 20px ) min( calc( 13 * 100vw / var( --dw ) ), 13px );
    }
  }

  .select-section__info--auto {
    flex: 1;
  }

  .select-section__info-head {
    border-bottom: 1px solid currentColor;
    font-size: var(--fs-l);
    padding-bottom: 2px;
    margin-bottom: min( calc( 20 * 100vw / var( --dw ) ), 20px);
  }

  .select-section__height-col {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: min( calc( 73 * 100vw / var( --dw ) ), 73px );

    @media (width <= 768px) {
      grid-template-columns: 1fr;
      gap: min( calc( 45 * 100vw / var( --dw ) ), 45px );
    }
  }

  .select-section__height-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .select-section__height-head {
    background: #897658;
    color: #fff;
    border-left: 6px solid #b99f75;
    font-size: var(--fs-l);
    margin-bottom: min( calc( 25 * 100vw / var( --dw ) ), 25px );
    padding: min( calc( 5 * 100vw / var( --dw ) ), 5px ) min( calc( 20 * 100vw / var( --dw ) ), 20px );

    @media (width <= 768px) {
      margin-bottom: min( calc( 20 * 100vw / var( --dw ) ), 20px );
    }
  }

  .select-section__height-lead {
    font-size: var(--fs-m);
    margin-bottom: min( calc( 60 * 100vw / var( --dw ) ), 60px );

    @media (width <= 768px) {
      padding: 0 10px;
      margin-bottom: min( calc( 30 * 100vw / var( --dw ) ), 30px );
    }
  }

  .select-section__height-image {
    @media (width <= 768px) {
      padding: 0 24px;
    }
    img {
      width: 100% ;
      height: auto;

      @media (width <= 768px) {
        height: auto;
        width: 100%;
      }
    }
  }

  .color-select-image {
    @media (width <= 768px) {
      padding: 0 min( calc( 70 * 100vw / var( --dw ) ), 70px );
    }
  }

  .bath-color-select-image {
    padding: 0 10px;
    margin-bottom: min( calc( 20 * 100vw / var( --dw ) ), 20px )
  }

  .bath-select-image {
    padding: 0 26px;
    margin-bottom: min( calc( 20 * 100vw / var( --dw ) ), 20px )
  }

  .select-section__info-caption {
    font-size: var(--fs-s);

    @media (width <= 768px) {
      font-size: var(--fs-xs);
    }
  }
}

/* ==============================

select-lower

============================== */

.select-lower {
  background: url('../img/select/bg_premium.webp') no-repeat center center / cover;
  color: #fff;
  padding: min( calc( 48 * 100vw / var( --dw ) ), 48px ) 0;
  margin: min( calc( 80 * 100vw / var( --dw ) ), 80px ) 0;

  @media (width <= 768px) {
    background-image: url('../img/select/bg_premium_sp.webp');
    margin: min( calc( 50 * 100vw / var( --dw ) ), 50px ) 0;
  }

  .select-lower__inner {
    max-width: 1186px;
    margin: 0 auto;
  }

  .select-lower__ph {
    width: calc(536 / 1186 * 100%);
    position: relative;

    @media (width <= 768px) {
      width: 100%;
      order: 2;
    }

    figure {
      position: relative;
    }

    figcaption {
      position: absolute;
      font-size: var(--fs-xs);
      left: 8px;
      color: #000;
      bottom: 8px;
    }
  }

  .select-lower__body {
    display: flex;
    align-items: center;
    gap: min( calc( 58 * 100vw / var( --dw ) ), 58px );

    @media (width <= 768px) {
      flex-direction: column;
      gap: min( calc( 28 * 100vw / var( --dw ) ), 28px );
    }
  }

  .select-lower__content {
    flex: 1;
  }

  .select-lower__head {
    text-align: center;
    line-height: 1.2;

    em {
      font-family: "Cinzel", serif;
      letter-spacing: 0.1em;
      font-size: min( max( calc( 50 * 100vw / var( --dw ) ), 30px ), calc( 50px * var( --magnification ) ) );
      color: #e0cb89;
      font-weight: 400;
      display: block;

      @media (width <= 768px) {
        font-size: min( max( calc( 30 * 100vw / var( --dw ) ), 24px ), calc( 30px * var( --magnification ) ) );
      }
    }

    span {
      display: block;
      color: #e5d28f;
      font-size: var(--fs-xl);
    }
  }

  .select-lower__head::after {
    content: '';
    display: block;
    margin: min( calc( 25 * 100vw / var( --dw ) ), 25px ) auto;
    width: 78px;
    height: 22px;
    background: url('../img/select/bg_premium_head.webp') no-repeat center center / cover;

    @media (width <= 768px) {
      margin: min( calc( 16 * 100vw / var( --dw ) ), 16px ) auto;
      width: 62px;
      height: 17px;
    }
  }

  .select-lower__text {
    text-align: center;
    line-height: 2.1;
    font-size: var(--fs-l);

    @media (width <= 768px) {
      font-size: var(--fs-m);
    }

    span {
      font-size: min( max( calc( 24 * 100vw / var( --dw ) ), 20px ), calc( 24px * var( --magnification ) ) );
      color: #e5d28f;
      line-height: 1.2;

      @media (width <= 768px) {
        font-size: min( max( calc( 22 * 100vw / var( --dw ) ), 18px ), calc( 22px * var( --magnification ) ) );
      }
    }
  }

  .select-lower__caption {
    font-size: var(--fs-s);
    margin-top: min( calc( 30 * 100vw / var( --dw ) ), 30px );

    @media (width <= 768px) {
      font-size: var(--fs-xs);
      margin-top: min( calc( 20 * 100vw / var( --dw ) ), 20px );
    }
  }
}