@charset "UTF-8";
/*　-----------------------　メインビジュアル　-----------------------　*/
#MainVisual {
  padding-top: 70px;
  position: relative;
}
#MainVisual figure {
  width: 100%;
  height: auto;
  background-image: url(../images/residence/mv.jpg);
  background-position: bottom center;
  background-size: cover;
}
#MainVisual figure img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
#MainVisual .main_logo {
  position: absolute;
  top: 50%;
  transform: translateY(-45%);
  right: 8vw;
  color: #fff;
  font-size: max(1.8vw, 23px);
  letter-spacing: 0.1em;
  filter: drop-shadow(0 0 5px #000);
  -webkit-filter: drop-shadow(0 0 5px #000);
}
#MainVisual .main_logo span {
  font-size: max(2.4vw, 28px);
}

/* ----------------------- */
/* 1000*/
/* ----------------------- */
/* ----------------------- */
/* sp */
/* ----------------------- */
@media screen and (max-width: 767px) {
  #MainVisual {
    padding-top: 70px;
    position: relative;
  }
  #MainVisual figure {
    width: 100%;
    height: calc(100dvh - 70px - 20vw);
    background-image: url(../images/residence/mv_sp.jpg);
  }
  #MainVisual figure img {
    width: 100%;
    height: calc(100vh - 70px - 20vw);
    mix-blend-mode: multiply;
  }
  #MainVisual figure figcaption {
    bottom: 1%;
  }
  #MainVisual .main_logo {
    top: 18%;
    left: inherit;
    right: inherit;
    width: 100%;
    text-align: center;
    font-size: max(2vw, 22px);
  }
}



/*　-----------------------　共通　-----------------------　*/


.sec_ttl_txt h2 {
  color: #977f52;
  font-size: var(--font28);
  letter-spacing: 0.1em;
  margin: 0 0 clamp(2rem, 5vw, 5rem) 0;
}
.sec_ttl_txt h3 {
  font-size: var(--font18);
  letter-spacing: 0.2em;
  line-height: 1.5;
  margin-bottom: clamp(1.5rem, 3vw, 3rem);
}


.sec_ttl_txt p {
  font-size: var(--font14);
  line-height: 2;
}

.sec_ttl_txt .sec_ttl > div {
  flex-direction: column;
}
/* ----------------------- */
/* sp */
/* ----------------------- */
@media screen and (max-width: 767px) {
    .sec_ttl_txt h2 {
        margin-bottom: 2rem;
    }
    .sec_ttl_txt h3 {
        margin-bottom: 2rem;
    }

}




/*　-----------------------　ヘッド / Facade Design　-----------------------　*/

.main_catch {
    font-size: var(--font28);
    text-align: center;
    margin-bottom: 8em;
}

#Head {
  padding: clamp(4rem, 9vw, 9rem) 0 clamp(3rem, 6vw, 6rem);
  background-image: url("../images/residence/head_bg.jpg");
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}


.head_ttl_wrap {
    position: relative;
}

.head_ttl {
    display: flex;
    justify-content: space-between;
}

.head_ttl figure {
    width: 26.5%;
}


.head_ttl_wrap > figure {
    position: absolute;
    bottom: 0;
    left: 0;
    width: min(60% , 920px);
}

/* ----------------------- */
/* min1200*/
/* ----------------------- */
@media screen and (min-width: 1551px) {
    .head_ttl_wrap > figure {
        left: calc((100vw - 1551px) / 2);
    }
}
/* ----------------------- */
/* 1100*/
/* ----------------------- */
@media screen and (max-width: 1100px) {
    .head_ttl_wrap > figure {
        width: 65%;
    }
}
/* ----------------------- */
/* sp */
/* ----------------------- */
@media screen and (max-width: 767px) {
    .main_catch {
        margin-bottom: 5em;
    }
    #Head {
        padding: 4rem 0;
    }
    .head_ttl {
        flex-direction: column;
    }
    .head_ttl figure {
        width: 100%;
        margin-top: 8vw;
    }

}





/*　-----------------------　Entrance　-----------------------　*/

#Entrance {
    background-image: url("../images/residence/entrance_bg2.jpg");
    background-repeat: repeat-y;
    background-size: 100%;
    position: relative;
}

#Entrance .sec_ttl_txt {
    color: #fff;
    padding-top: min(5.8vw , 80px);
    padding-bottom: min(10vw , 138px);
}
#Entrance h2 {
    color: #b6a586;
}

.Entrance_white {
    height: 27vw;
    width: 100%;
    background-color: #fff;
    position: absolute;
    top:0;
}

.entrance1 {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100%;
    display: flex;
    justify-content: flex-end;
}
.entrance1  figure {
    width: 86%;
}
.entrance_hall2 .sec_ttl_txt{
    text-align: center;
}

/* ----------------------- */
/* sp */
/* ----------------------- */
@media screen and (max-width: 767px) {
    .entrance_hall2 .sec_ttl_txt{
        text-align: left;
    }
}


/*　-----------------------　Land Scape　-----------------------　*/



.landscape_ttl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: min(6vw , 80px);
}

.landscape_ttl figure {
    width: 54.5%;
    padding-left: min(5% , 50px);
}

.landscape_ttl figcaption {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.landscape_ttl figcaption img { 
    width: min(3vw , 40px);
}

/*-----*/

ul.landscape_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: min(6vw , 80px);
}
ul.landscape_list li {
    width: 23.5%;
    margin-bottom: min(3vw , 40px);
}
ul.landscape_list li.landscape_list_large {
    width: 48%;
}
ul.landscape_list h4 {
    font-size: var(--font14);
    margin-top: 0.5em;
    color: #977f52;
}
ul.landscape_list div {
    font-size: var(--font12);
    margin-top: 0.5em;
}

ul.landscape_list small {
    font-size: 75%;
}




/* ----------------------- */
/* sp */
/* ----------------------- */
@media screen and (max-width: 767px) {
    .landscape_ttl {
        flex-direction: column;
    }
    .landscape_ttl figure {
        width: 90%;
        padding-left: 5%;
        margin-top: 6vw;
    }
    .landscape_ttl figcaption img { 
        width: min(8vw , 60px);
    }
    ul.landscape_list li {
        width: 48%;
    }
    ul.landscape_list li.landscape_list_large {
        width: 100%;
    }
}





/*　-----------------------　豊かな植栽計画　-----------------------　*/

#Planting {
    background-color: #e8e4da;
    padding-top: min(4vw , 80px);
    padding-bottom: min(4vw , 80px);
    margin-top: min(6vw , 80px);
}
#Planting .sec_ttl_txt {
    text-align: center;
}

.planting_wrap {
    display: flex;
}
.planting_wrap .planting_figure {
    width: 48vw;
    margin-right: 3vw;
}

.planting_list_wrap {
    width: min(34.67vw , 475px);
}
.planting_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.planting_list li {
    width: 30.55%;
    margin-bottom:  min(2vw , 20px);
}
.planting_list li div {
    font-size: var(--font12);
    margin-top: 0.5em;
}
.planting_list_wrap .txt_ann {
    text-align: right;
}

/* ----------------------- */
/* sp */
/* ----------------------- */
@media screen and (max-width: 767px) {
    #Planting {
        padding-top: 8vw;
        padding-bottom:8vw;
        margin-top: 8vw;
    }
    .planting_wrap {
        flex-direction: column;
    }
    .planting_list_wrap .txt_ann {
        text-align: left;
    }
    .planting_wrap .planting_figure {
        width: 96%;
        margin-right: auto;
        margin-left: auto;
    }
    .planting_list_wrap {
        width: 96%;
        margin-right: auto;
        margin-left: auto;
        margin-top: 5vw;
    }
}






/*　-----------------------　「ヴェレーナ」ブランドのマンション　-----------------------　*/
#Verena {
    background-color: #efefef;
    padding-top: min(4vw , 80px);
    padding-bottom: min(4vw , 80px);
    margin-top: min(6vw , 80px);
}

#Verena .sec_ttl_txt {
    text-align: center;
}
.verena_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.verena_list li {
    width: 24%;
    margin-bottom:  min(2vw , 20px);
}

.verena_list li.verena_list_large {
    width: 32.2%;
}

.verena_list li div {
    font-size: var(--font12);
    margin-top: 0.5em;
}
.verena_list li small {
    font-size: 75%;
}
#Verena .txt_ann {
    text-align: right;
}

/* ----------------------- */
/* sp */
/* ----------------------- */
@media screen and (max-width: 767px) {
    .verena_list li {
        width: 48%;
    }

    .verena_list li.verena_list_large {
        width: 100%;
    }
    #Verena .txt_ann {
        text-align: left;
    }
}