@charset "utf-8";

.estate #h2-title h2 {
    position: relative;
}

.estate #h2-title h2::before {
    position: absolute;
    content: "";
    background-image: url(../images/estate/estate-title.svg);
    background-repeat: no-repeat;
    width: 500px;
    height: auto;
    aspect-ratio: 500 / 300;
    background-size: contain;
    left: 300px;
    z-index: 3;
}

.estate #contents {
    position: relative;
}

.estate #contents::before {
    position: absolute;
    content: "";
    background-image: url(../images/top/business/image02.jpg);
    background-repeat: no-repeat;
    width: 750px;
    height: auto;
    aspect-ratio: 4 / 3;
    background-size: cover;
    right: 200px;
    top: -450px;
    border-radius: 20px;
}

.estate .inner {
    font-family: "BIZ UDPGothic", sans-serif;
}

.estate .service .flex {
    align-items: center;
    gap: 50px;
}

.estate .service .image {
    flex-shrink: 0;
}

.estate .service .image img {
    width: 100%;
    max-width: 450px;
    height: auto;
}

.estate .service .detail {
    flex-grow: 1;
}

.estate .service .detail dl dt {
    font-size: 2.5rem;
    margin: 0 0 20px;
    font-weight: 700;
}

.estate .service .detail .btnBox {
    text-align: right;
    margin: 50px 0 0;
}

.estate .service .detail .btnBox a {
    display: inline-block;
    text-decoration: none;
    position: relative;
    height: 1.2em;
    overflow: hidden;
    padding-right: 40px;
    line-height: 1.2em;
}

.estate .service .detail .btnBox a span::after {
    content: "最新の物件情報はこちら";
    display: block;
    height: 1.2em;
    color: #fbbf24;
}

.estate .service .detail .btnBox a:hover span {
    transform: translateY(-50%);
}

.estate .service .detail .btnBox a::after {
    content: "";
    width: 20px;
    height: 20px;
    background-image: url(../images/top/business/point.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.estate .service .detail .btnBox a span {
    display: flex;
    flex-direction: column;
    transition: transform 0.24s ease-out;
}


.estate .section-body {
    margin: 50px 0 100px;
}

.estate .section-area.info .section-head,
.estate .section-area.service .section-head {
    position: relative;
}

.estate .section-area.info .section-head h3,
.estate .section-area.service .section-head h3 {
    position: relative;
    z-index: 2;
}

.estate .section-area.info .section-head::before,
.estate .section-area.service .section-head::before {
    content: "";
    position: absolute;
    aspect-ratio: 500 / 300;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    z-index: 0;
    pointer-events: none;
    left: 0;
}

.estate .section-area.info .section-head::before {
    background-image: url(../images/amusement/info.svg);
    top: -330px;
    width: 850px;
}

.estate .section-area.service .section-head::before {
    background-image: url(../images/estate/service.svg);
    top: -280px;
    width: 640px;
}

.estate .section-area.service .section-foot {
    max-width: 850px;
    margin-left: auto;
}

.estate .section-area.info,
.estate .section-area.service {
    padding: 200px 0 100px;
}

@media screen and (max-width: 1920px) {}

@media screen and (max-width: 1680px) {
    .estate #contents::before {
        width: 550px;
        top: -320px;
    }

    .estate #h2-title h2::before {
        width: 480px;
    }

    .estate #contents::before {
        width: 550px;
        top: -320px;
    }
}

@media screen and (max-width: 1590px) {}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1366px) {}

@media screen and (max-width: 1280px) {
    .estate #contents::before {
        width: 480px;
        top: -250px;
        right: 50px;
    }
}

@media screen and (max-width: 1136px) {}

@media screen and (max-width: 1024px) {
    .estate .section-area.info .section-head::before {
        width: 750px;
    }

    .estate .section-area.service .section-head::before {
        width: 550px;
    }

    .estate #h2-title h2::before {
        width: 400px;
        left: 50px;
    }
}

@media screen and (max-width: 960px) {}

@media screen and (max-width: 835px) {}

@media screen and (max-width: 768px) {
    .estate .service .detail dl dt {
        font-size: 2rem;
        margin: 0 0 15px;
    }

    .estate .service .detail .btnBox {
        margin: 30px 0 0;
    }

}

@media screen and (max-width: 750px) {
    .estate .service .flex {
        display: block;
    }

    .estate .service .image {
        text-align: center;
    }

    .estate .service .image img {
        margin: 0 0 50px;
    }

    .estate .service .detail dl dt {
        font-size: 2.0rem;
        margin: 0 0 20px;
    }

    .estate .section-area.info .section-head::before {
        width: 550px;
        top: -230px;
    }

    .estate .section-area.service .section-head::before {
        top: -200px;
        width: 450px;
    }

    .estate #contents::before {
        width: 320px;
        top: -100px;
        right: 50px;
    }

    .estate .section-area.info,
    .estate .section-area.service {
        padding: 200px 0 0;
    }
}

@media screen and (max-width: 640px) {}

@media screen and (max-width: 480px) {
    .estate .section-area.info .section-head::before {
        width: 400px;
        top: -170px;
    }

    .estate .section-area.service .section-head::before {
        top: -160px;
        width: 350px;
    }

    .estate #h2-title h2::before {
        width: 350px;
        left: 0;
        top: -50px;
    }

    .estate #contents::before {
        right: 0;
        top: -200px;
    }

    .estate .section-area.info,
    .estate .section-area.service {
        padding: 100px 0 0;
    }
}

@media screen and (max-width: 350px) {}