@charset "utf-8";

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



.contents{  padding: 100px 0 90px ; background: #f5f5f5;}
.development .titBox{ padding-bottom: 30px;}

h2{ font-size: 5rem; font-weight: bold; max-width: 1200px; width: calc(100% - 50px); line-height: 1.5; margin: 0 auto;}
h2 span{ display: block; font-size: clamp(1.6rem,1.5vw,1.8rem); }

.mv { position: relative;}
.mv figure img{ width: 100%;}
.mv .mv_txt{ position: absolute; width: 100%; text-align: center; font-size: clamp(8rem,6.7vw,13rem);  top: 47%; left: 50%; top: 50%; transform: translate(-50% , -50%);}
.fadeIn { animation-name:fadeInAnime; animation-fill-mode:forwards; opacity:0;  animation-delay: 1000ms; animation-duration: 1.5s;}
@keyframes fadeInAnime{
    0% { }
    100% { opacity: 1;}
  }

.concept_txt{ background: #f5f5f5; padding: 85px 0;}
.concept_txt .txtBox{ font-weight: bold; text-align: center; font-size: clamp(1.5rem,1.7vw,2.4rem); margin: 0 auto;}

.list_01 { background: #f5f5f5;}
.list_01 ul li{  border-top: 1px solid #000;  padding: 60px 0 0;}
.list_01 ul li h3{ font-size: 36px; line-height: 1.2; margin-bottom: 40px; width: 100%;}
.list_01 ul li .txtBox{ width: 58.33%;}
.list_01 ul li:first-of-type .txtBox{ width: 100%; }
.list_01 ul li figure{ width: 38.83%;}
.list_01 ul li:first-of-type figure{ width: 100%; margin: 60px 0; text-align: center;}

.mid_visual ul li{ flex-basis: 33.33%;}
.mid_visual ul li:last-of-type{ flex-basis: 100%; background: url(../imgs/mansion/img06.jpg) no-repeat; background-size: cover; background-position: center; padding: 71px 0 30px;}
.mid_visual ul li:last-of-type figure{ max-width: 1200px; width: calc(100% - 50px); margin: 0 auto 45px; text-align: left;}
.mid_visual ul li h3{ max-width: 1200px; margin: 0 auto; font-size: 42px; margin-bottom: 70px; color: #fff; width: calc(100% - 50px);}
.mid_visual ul li p{ max-width: 1200px; margin: 0 auto; color: #fff; width: calc(100% - 50px);}
.mid_visual ul li .mv_txt_big{ font-size: 30px; font-weight: bold; line-height: 1.5; margin-bottom: 40px;}

.list_02{ background: #f5f5f5; padding: 50px 0 90px;}
.list_02 .box:not(:first-of-type){ margin-top: 55px;}
.list_02 .box:not(:last-of-type){ padding-bottom: 55px; border-bottom: 1px solid #000;}
.list_02 dt{ width: 35%; font-size: 2.4rem; line-height: 1.5; font-weight: bold; }
.list_02 dd{ width: 58.67%; }

@media (max-width: 1400px){
  .contents{ padding-top:100px;}
  h2{ font-size: 4.5rem;}
}

@media (max-width: 768px){

    h2{ font-size: clamp( 2rem , 6.5vw, 5rem); }
    .mv .mv_txt{  font-size: clamp(65px,16.9vw,130px); width: 100%; top: 4.9%; text-align: left; transform: none; left: 20%; font-feature-settings: "palt"; line-height: 1.1;}

    .contents{ padding:70px 0 15px;}
    .development .titBox {padding-bottom: 20px;}

    .concept_txt{ padding: 40px 0;}
    .concept_txt .txtBox{ text-align: left; font-size: 3vw; margin: 0 auto;}

    .list_01 ul li{  padding: 25px 0 35px;}
    .list_01 ul li h3{ font-size: clamp(2rem,4.5vw,3.6rem); margin-bottom: 15px;}
    .list_01 ul li .txtBox{ width: 100%; margin-bottom: 25px;}
    .list_01 ul li figure{ width: 100%; text-align: center;}
    .list_01 ul li:first-of-type figure{ margin-top: 30px; margin-bottom: 0;}

    .mid_visual ul li{ flex-basis: 50%;}
    .mid_visual ul li:first-of-type{ flex-basis: 100%;}
    .mid_visual ul li:last-of-type{ background: url(../imgs/mansion/img06_sp.jpg) no-repeat; }
    .mid_visual ul li:last-of-type figure{ max-width: 1200px; width: calc(100% - 50px); margin: 40px auto 35px; text-align: left;}
    .mid_visual ul li h3{ font-size: clamp(2.8rem,4.5vw,4.2rem); margin-bottom: 35px; color: #fff; width: calc(100% - 50px);}
    .mid_visual ul li p{ max-width: 1200px; margin: 0 auto; color: #fff; width: calc(100% - 50px);}
    .mid_visual ul li .mv_txt_big{ font-size: 4.5vw;  margin-bottom: 30px;}


    .list_02{ background: #f5f5f5; padding: 25px 0 35px;}
    .list_02 .box:not(:first-of-type){ margin-top: 35px;}
    .list_02 .box:not(:last-of-type){ padding-bottom: 35px;}
    .list_02 dt{ margin-bottom: 15px; font-size: clamp( 18px , 3vw, 2.4rem);}
    .list_02 dd{ width: 100%; }
}