/* legacy-real_estate.css — sources: real_estate.css */


/* ===== real_estate.css ===== */


@charset "utf-8";
.legacy-page-content #main{
    max-width: 1400px;
    margin: 0 auto;
    font-family: var(--sans-serif);
   
}

.legacy-page-content .real_estate.works li{
    margin-bottom: 80px;
}
.legacy-page-content .posts-wrapper{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    padding: 3%;
}

.legacy-page-content .post-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 350px;
    position: relative;
    margin-bottom: 40px;
}


.legacy-page-content .post-container div:nth-child(1){
    position: relative;
    width: 100%;
    height: 80%;
}

.legacy-page-content .post-container div:nth-child(1) div{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(29,50,86, 0.5);
    transform: scaleY(0);
    transition: 0.5s ease;
    transform-origin: 50% 0;
}

.legacy-page-content .post-container div:nth-child(1):hover div{
    transform: scaleY(1);
    
    transition: 0.5s ease;
}

.legacy-page-content .post-container div:nth-child(1) div span{
    border: 1px solid white;
    padding: 0.5em;
    color: white;
}

.legacy-page-content .post-container div:nth-child(2){
    width: 100%;
    height: 20%;
}

.legacy-page-content .post-container div img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.legacy-page-content .post-container p{
    text-align: center;
}


.legacy-page-content .single-title{
    font-family: var(--serif);
    font-size: var(--header-text);
    font-weight: var(--header-font-weight);
    letter-spacing: var(--header-letter-spacing);
    text-align: center;
    margin: 90px 0 130px 0;
}

.legacy-page-content .single-case-title{
    font-family: var(--sans-serif);
    font-size: var(--catch-text);
    font-weight: 500;
    letter-spacing: var(--header-letter-spacing);
    text-align: center;
    margin: 40px 0;
    padding: 0 25px;
}


.legacy-page-content .contents-container{
    max-width: 700px;
    margin: 0 auto;
    padding: 50px 25px;
}

.legacy-page-content .contents-container p{
    margin: 30px 0;
}

.legacy-page-content .contents-container img{
    margin: 30px 0;
}

.legacy-page-content .info-small{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding:  0 50px;
}

.legacy-page-content .info-small span{
    margin: 0 10px;
}
.legacy-page-content .real_estate.works h3{
    padding: 20px 50px 10px;
    text-align: center;
}

.legacy-page-content .hr-centered{
    width: 70%;
    margin:   50px auto;
}

.legacy-page-content .block-of-land{
    max-width: 700px;
    margin: 0 auto;
    padding: 0 25px;
}

.legacy-page-content .block-of-land p, .legacy-page-content .block-of-land h3, .legacy-page-content .environment p, .legacy-page-content .environment h3, .legacy-page-content .detail > p, .legacy-page-content .detail > h3{
   text-align: center;
}

.legacy-page-content .block-of-land > p, .legacy-page-content .environment > p, .legacy-page-content .detail > p{
    font-size: 24px;
    font-weight: 600;
    font-weight : bold;
    letter-spacing : 2.4px;
    margin: 10px 0 0;
}

.legacy-page-content .block-of-land h3, .legacy-page-content .environment h3, .legacy-page-content .detail > h3{
    font-family: var(--serif);
    font-size : 16px;
    letter-spacing : 1.6px;
    margin-bottom: 50px;
}

.legacy-page-content .block-of-land img{
    width: 100%;
    object-fit: cover;
    margin-bottom: 160px;
}

.legacy-page-content .environment{
    max-width: 1400px;

}

.legacy-page-content .environment-grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 40px;
    padding: 0 25px;
}
.legacy-page-content .environment-grid p{
    text-align: justify;
    margin-top: 10px;
}

.legacy-page-content .environment-grid img{
    width: 100%;
    object-fit: cover;
}

.legacy-page-content .detail{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #DFE4E9;
    margin: 100px 0 60px 0;
    padding: 80px 0;
}

.legacy-page-content .detail-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.legacy-page-content .detail-grid li{
    display: flex;
    flex-wrap: wrap;
    width: calc((100% - 60px) / 3);
    margin-bottom: 20px;
}
.legacy-page-content .detail-grid li.w20{
    width: 20%;
}
.legacy-page-content .detail_ttl{
    width: 5em;
}
.legacy-page-content .detail_txt{
    width: calc(100% - 5em);
}


@media only screen and (max-width: 1025px) {

    .legacy-page-content .real_estate.works li{
        margin-bottom: 40px;
    }
    .legacy-page-content #main{
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .legacy-page-content .posts-wrapper{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 14px;
        padding: 3%;
    }

    .legacy-page-content .environment-grid{
        grid-template-columns: repeat(2, 1fr);
    }

    .legacy-page-content .detail-grid li.w20,
    .legacy-page-content .detail-grid li{
        width: calc((100% - 60px) / 2);
    }
    


}

@media only screen and (max-width: 599px) {
    .legacy-page-content .posts-wrapper{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 10px;
        padding: 3%;
    }

    .legacy-page-content .environment-grid{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 40px;
        padding: 3%;
    }

    .legacy-page-content .detail{
        height: auto;
        background-color: #DFE4E9;
        margin: 100px 0 60px 0;
        padding: 60px 0;
    }

    .legacy-page-content .detail-grid li.w20,
    .legacy-page-content .detail_ttl,
    .legacy-page-content .detail_txt,
    .legacy-page-content .detail-grid,
    .legacy-page-content .detail-grid li{
        width: 100%;
        display: block;
    }


}