@charset "utf-8";
/*-----------------------------------------------
    boxEstateTab
-----------------------------------------------*/
.boxEstateTab{
    padding: 8rem 0;
    background-color: var(--whiteColor);
}
.boxEstateTab .boxTabList{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--gray_303_Color);
}
.boxEstateTab .item{
    width: calc(50% - 1rem);
}
.boxEstateTab .btn{
    position: relative;
    width: 100%;
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--gray_303_Color);
    border:1px solid var(--gray_303_Color);
    color: var(--whiteColor);
    text-align: center;
}
.boxEstateTab .btn.active{
    background-color: var(--whiteColor);
    border-color: var(--blackColor);
    color: var(--blackColor);
}
.boxEstateTab .btn.active:after{
    position: absolute;
    content: '';
    margin: auto;
    display: block;
    bottom: -0.3rem;
    left: 0;
    width: 100%;
    height: 0.5rem;
    background-color: var(--whiteColor);
}
.boxEstateTab .btn .txt{
    position: relative;
    display: inline-block;
    font-size: var(--pcFontSize16);
    letter-spacing: var(--pcLetterSpacing16_40);
    font-weight: bold;
    padding-left: 3rem;
}
.boxEstateTab .btn .txt::before{
    position: absolute;
    content: '';
    margin: auto;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2rem;
    height: 1.9rem;
}
.boxEstateTab .btn.isEstate .txt::before{
    background: url(../img/common//iconEstate.png) center top / cover no-repeat;
}
.boxEstateTab .btn.active.isEstate .txt::before{
    background: url(../img/common//iconEstate_active.png) center top / cover no-repeat;
}
.boxEstateTab .btn.isMap .txt::before{
    background: url(../img/common//iconMap.png) center top / cover no-repeat;
}
.boxEstateTab .btn.active.isMap .txt::before{
    background: url(../img/common//iconMap_active.png) center top / cover no-repeat;
}
@media only screen and (max-width:1215px){
    .boxCmnTop.bgBlack {
        padding-bottom: 3.5rem;
    }
    .boxEstateTab{
        padding: 3rem 0 0;
        border-bottom: 1px solid var(--gray_303_Color);
    }
    .boxEstateTab .boxTabList{
        border-bottom: none;
    }
    .boxEstateTab .item{
        width: calc(50% - 0.25rem);
    }
    .boxEstateTab .btn{
        height: 5.5rem;
        border-bottom: none;
    }
    .boxEstateTab .btn .txt{
        font-size: var(--pcFontSize12);
        letter-spacing: var(--spLetterSpacing12_0);
        padding-left: 1.5rem;
    }
    .boxEstateTab .btn .txt::before{
        width: 1.2rem;
        height: 1.1rem;
    }
}

/*-----------------------------------------------
    boxEstate
-----------------------------------------------*/
.boxEstate {
    background-color: var(--whiteColor);
}
/* wrapperEstate */
.wrapperEstate {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
@media only screen and (max-width:1215px){
}

/*-----------------------------------------------
    boxSearch
-----------------------------------------------*/
.boxSearch {
    position: relative;
    width: 17.858%;
}
.boxSearch .txtEng{
    position: absolute;
    top: -4rem;
    left: 0;
    display: inline-block;
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing12_40);
    color: var(--gray_999_Color);
    font-weight: bold;
    padding-right: 3.8rem;
}
.boxSearch .txtEng::after{
    position: absolute;
    content: '';
    margin: auto;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    width: 3rem;
    height: 0.1rem;
    background-color: var(--gray_999_Color);
}
.boxSearch .txtSearch,
.boxSearch .boxSearchList .tit{
    width: 100%;
    height: 5.5rem;
    padding-left: 2.5rem;
    font-size: var(--pcFontSize14);
    letter-spacing: var(--pcLetterSpacing14_80);
    color: var(--whiteColor);
    background-color: var(--gray_303_Color);
}
.boxSearch .boxSearchList .tit{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.boxSearch .boxSearchList .boxItem{
    background-color: var(--gray_f0f_Color);
    padding: 3rem 2rem;
}
.boxSearch form{
    width: 100%
}
@media only screen and (max-width:1215px){
    .boxSearch {
        width: 100%;
        margin-top: 2.5rem;
    }
    .boxSearch .txtSearch{
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 4.5rem;
        padding-left: 1rem;
        font-size: var(--pcFontSize12);
        letter-spacing: var(--spLetterSpacing12_0);
        border-radius: 0.5rem;
    }
    .boxSearch .txtSearch::before,
    .boxSearch .txtSearch::after{
        position: absolute;
        content: "";
        margin: auto;
        top: 0.2rem;
        bottom: 0;
        right: 1rem;
        width: 1.1rem;
        height: 1px;
        background: var(--gray_959_Color);
    }
    .boxSearch .txtSearch::after{
        transition: all .3s;
        transform: rotate(90deg);
    }
    .boxSearch .txtSearch.on::after{
        transform: rotate(0);
    }
    .boxSearch .txtSearch span:not(.imgPc){
        position: relative;
        display: inline-block;
        padding-left: 2rem;
    }
    .boxSearch .txtSearch span:before{
        position: absolute;
        content: '';
        margin: auto;
        display: block;
        top: 0;
        bottom: 0;
        left: 0;
        width: 1.4rem;
        height: 1.4rem;
        background: url(../img/common/iconTag.png) center top / cover no-repeat;
    }
    .boxSearch .boxSearchList{
        background-color: var(--whiteColor);
        padding: 3rem 0;
    }
    .boxSearch .txtEng{
        position: relative;
        top: auto;
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing12_0);
        padding-right: 3.3rem;
        font-weight: normal;
    }
    .boxSearch .boxSearchList .list{
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin-top: 1.5rem;
    }
    .boxSearch .boxSearchList,
    .boxSearch .boxSearchList .tit{
        display: none;
    }
    .boxSearch .boxSearchList .boxItem{
        background-color: var(--whiteColor);
        padding: 0;
    }
    /* boxFormBtn */
    .boxSearch .boxFormBtn{
        margin-top: 2rem;
        text-align: center;
    }
    .boxSearch .boxFormBtn .aBtnForm{
        width: 100%;
        height: 4.5rem;
        border-radius: 0.5rem;
        font-size: var(--spFontSize12);
        background-color: var(--gray_383_Color);
        color: var(--whiteColor);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .boxSearch .boxFormBtn .txtClose{
        margin-top: 3rem;
        font-size: var(--spFontSize12);
    }
}


/* ラジオ */
.boxSearch .boxRadio{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
}
.boxSearch .boxRadio input[type="radio"],
.boxSearch .boxRadio .txtRadio::before,
.boxSearch .boxRadio .txtRadio::after{
    width: 2.2rem;
    height: 2.2rem;
}
.boxSearch .boxRadio input[type="radio"]{
    visibility: hidden;
    position: absolute;
    margin: 0;
}
.boxSearch .boxRadio .itemRadio{width: 100%;}
.boxSearch .boxRadio .labelRadio{
    position: relative;
    width: 100%;
    display: inline-block;
}
.boxSearch .boxRadio .txtRadio{
    width: 100%;
    display: inline-flex;
    align-items: center;
    font-size: 0;
}
.boxSearch .boxRadio .txtRadio::before,
.boxSearch .boxRadio .txtRadio::after{
    content: "";
    border-radius: 100%;
}
.boxSearch .boxRadio .txtRadio::before{
    background: var(--whiteColor);
    margin-right: 0.7rem;
    border: 0.1rem solid var(--gray_ddd_Color);
}
.boxSearch .boxRadio input[type="radio"]:checked + .txtRadio::after{
    position: absolute;
    margin: auto;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    background: var(--radioColor);
    transform: scale(0.5);
}
.boxSearch .boxRadio .txt{
    width: calc(100% - (2.2rem + 0.9rem));
    margin-bottom: 0.4rem;
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_21);
}
/* セレクトボックス */
.boxSearch .boxSelect{
    position: relative;
    width: 100%;
    margin: auto;
}
.boxSearch .boxSelect + .boxSelect{
    margin-top: 1rem;
}
.boxSearch .boxSelect::before{
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.7rem 0.5rem 0 0.5rem;
    border-color: var(--blackColor) transparent transparent transparent;
    top: 0;
    bottom: 0;
    right: 2rem;
    margin: auto;
}
.boxSearch .boxSelect select {
    width: 100%;
    padding: 1.7rem 2rem;
    font-size: var(--pcFontSize14);
    background: var(--whiteColor);
    border: 0.1rem solid var(--gray_d4d_Color);
    color: var(--blackColor);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: 0.3s;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    font-family: inherit;
}
@media only screen and (max-width:1215px){
    .boxSearch .boxSelect + .boxSelect{
        margin-top: 0.5rem;
    }
    .boxSearch .boxSelect::before{
        right: 1.5rem;
    }
    .boxSearch .boxSelect select {
        padding: 1.2rem 1.8rem;
        background-color: var(--gray_f3f_Color);
        border: none;
        font-size: var(--spFontSize16);
        border-radius: 0.5rem;
    }
}

/*-----------------------------------------------
    boxEstateItem
-----------------------------------------------*/
.boxEstateItem {
    width: 79.762%;
}
/* boxArea */
.boxArea .boxAreaBody{
    background-color: var(--gray_f0f_Color);
    padding: 5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.boxArea .boxAreaImg{
    width: 23rem;
}
.boxArea .boxAreaImg .img{
    width: 100%;
    height: 0;
    padding-top: 66.523%;
}
.boxArea .boxAreaTit{
    width: calc(100% - 26rem);
}
.boxArea .boxAreaTit .tit{
    font-size: var(--pcFontSize18);
    letter-spacing: var(--pcLetterSpacing18_40);
    font-weight: bold;
}
.boxArea .txtArea{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_25);
    letter-spacing: var(--pcLetterSpacing14_40);
    margin-top: 1rem;
}
/* secCmnTab */
.boxEstate .boxArea + .secCmnTab{
    margin-top: 5rem;
}
.boxEstate .secCmnTab{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--whiteColor);
}
.boxEstate .secCmnTab .boxTabNum {
    margin-top: 0;
    display: flex;
    color: var(--blackColor);
}
.boxEstate .secCmnTab .txtInfo {
    font-size: var(--pcFontSize16);
    letter-spacing: var(--pcLetterSpacing16_40);
}
.secCmnTab .boxTabNum .txtInfo .num{
    font-size: var(--pcFontSize20);
}
/* boxBtn */
.boxEstate .secCmnTab .boxBtn{
    margin-left: 2rem;
}
.boxEstate .secCmnTab .link{
    width: 20rem;
    height: 5.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    background-color: var(--gray_303_Color);
    color: var(--whiteColor);
    font-size: var(--pcFontSize14);
    letter-spacing: var(--pcLetterSpacing14_40);
}
/* boxWapperSelect */
.boxEstate .boxWapperSelect .txtSelect {
    color: var(--blackColor);
}
.boxEstate .boxCmnSelect::before{
    border-top: 0.8rem solid var(--blackColor);
}
.boxEstate .boxCmnSelect select {
    background: var(--whiteColor);
    border: 1px solid var(--gray_d4d_Color);
    color: var(--blackColor);
}
.boxEstate .boxWapperSelect .txtSelect {
    color: var(--blackColor);
}
@media only screen and (max-width:1215px){
    .boxEstateItem,
    .boxArea{
        width: 100%;
    }
    .boxArea .boxAreaBody{
        margin-top: 1rem;
        padding: 1.5rem;
        flex-wrap: wrap;
        align-items: center;
    }
    .boxArea .boxAreaImg{
        width: 7rem;
    }
    .boxArea .boxAreaTit{
        width: 100%;
        display: contents;
    }
    .boxArea .boxAreaTit .tit{
        width: calc(100% - 8rem);
        font-size: var(--spFontSize14);
        line-height: var(--spLineHeight14_21);
        letter-spacing: var(--spLetterSpacing14_0);
    }
    .boxArea .txtArea{
        width: 100%;
        font-size: var(--spFontSize11);
        line-height: var(--spLineHeight11_17);
        letter-spacing: var(--spLetterSpacing11_0);
        margin-top: 1rem;
    }
    /* flBox */
    .boxArea .flBox{
        margin-top: 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .boxArea .titResult{
        font-size: var(--spFontSize11);
        color: var(--gray_999_Color);
    }
    .boxArea .closeBtn{
        font-size: var(--spFontSize16);
        color: var(--gray_999_Color);
        margin-left: auto;
    }
    /* secCmnTab */
    .boxEstate .boxArea + .secCmnTab{
        margin-top: 4rem;
    }
    .boxEstate .secCmnTab{
        flex-wrap: wrap;
    }
    .boxEstate .secCmnTab .boxTabNum {
        display: contents;
    }
    .boxEstate .secCmnTab .txtInfo {
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing12_0);
    }
    .secCmnTab .boxTabNum .txtInfo .num{
        font-size: var(--spFontSize12);
    }
    /* boxBtn */
    .boxEstate .secCmnTab .boxBtn{
        margin: 1.2rem 0 0 0;
    }
    .boxEstate .secCmnTab .link{
        width: 14rem;
        height: 4.5rem;
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing12_0);
    }
    /* boxWapperSelect */
    .boxEstate .boxWapperSelect {
        margin-top: 1.2rem;
    }
    .boxEstate .boxCmnSelect {
        width: 10rem;
    }
    .boxEstate .boxCmnSelect select {
        height: 4.5rem;
        background: var(--gray_f0f_Color);
        border-color: var(--gray_f0f_Color);
    }
    .boxEstate .boxWapperSelect .txtSelect {
        color: var(--blackColor);
    }
}


/*-----------------------------------------------
    boxRecommend
-----------------------------------------------*/
/* boxList */
.boxRecommend .boxList{
    margin-top: 6rem;
}
.boxRecommend .list{
    display: flex;
    flex-direction: column;
    gap: 5rem;
}
.boxRecommend .item{
    width: 100%;
}
.boxRecommend .link{
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.boxRecommend .boxImg{
    position: relative;
    width: 44.777%;
    overflow: hidden;
}
.boxRecommend .boxImg .img{
    aspect-ratio: 600 / 358;
}
/* boxTit */
.boxRecommend .boxTit{
    width: 51.493%;
}
/* boxEstateTag */
.boxRecommend .boxEstateTag{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.boxEstateTag .tag{
    position: relative;
    display: inline-block;
    text-align: center;
    padding: 0.7rem 0.8rem 0.8rem;
    border-radius: 0.3rem;
    color: var(--whiteColor);
}
.boxEstateTag .tag .txtTag{
    font-size: var(--pcFontSize12);
}
.boxEstateTag .tag.isLand{
    background-color: var(--isLand_color);
}
.boxEstateTag .tag.isBuilt{
    background-color: var(--isBuilt_color);
}
.boxEstateTag .tag.isCustom {
    background-color: var(--isCustom_color);
}
.boxEstateTag .tag.isLandOnly{
    background-color: var(--isLandOnly_color);
}
.boxEstateTag .tag.isMemberOnly{
    background-color: var(--memberColor);
}
.boxEstateTag .tag.isArea{
    background-color: var(--isArea_bg_Color);
    color: var(--blackColor);
}
/* boxEstateTxt */
.boxRecommend .boxEstateTxt .txt,
.boxRecommend .boxEstateTxt .tit{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.boxRecommend .boxEstateTxt .txt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_25);
    letter-spacing: var(--pcLetterSpacing14_40);
}
.boxRecommend .boxEstateTxt .tit{
    font-size: var(--pcFontSize28);
    line-height: var(--pcLineHeight28_42);
    font-weight: bold;
}
.boxRecommend .txtMemo{
    font-size: var(--pcFontSize13);
    line-height: var(--pcLineHeight13_26);
    letter-spacing: var(--pcLetterSpacing13_40);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: calc(var(--pcFontSize13) * var(--pcLineHeight13_26) * 2);
    margin-top: 0.5rem;
}
.boxRecommend .txtMemo a{
    color: var(--linkColor);
    text-decoration: underline;
}
/* boxInfoTxt */
.boxRecommend .boxInfoTxt{
    position: relative;
    margin-top: 2.2rem;
    padding-top: 2rem;
    width: 100%;
    color: var(--blackColor);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.boxRecommend .boxInfoTxt::before{
    position: absolute;
    content: '';
    margin: auto;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.1rem;
    background-color: var(--blackColor);
}
.boxRecommend .boxInfoTxt .txt{
    position: relative;
    max-width: 85%;
    padding-left: 3rem;
    font-size: var(--pcFontSize13);
    line-height: var(--pcLineHeight13_22);
    letter-spacing: var(--pcLetterSpacing13_40);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: calc(var(--pcFontSize13) * var(--pcLineHeight13_22) * 2);
}
.boxRecommend .boxInfoTxt .txt::before{
    position: absolute;
    content: '';
    margin: auto;
    display: block;
    top: 0;
    left: 0;
    width: 2.2rem;
    height: 2.2rem;
}
.boxRecommend .boxInfoTxt.lazyloaded .txt.isAccess::before{
    background: url(../img/common/iconEstateAccess.png) center top / cover no-repeat;
}
.boxRecommend .boxInfoTxt.lazyloaded .txt.isPrice::before{
    background: url(../img/common/iconEstatePrice.png) center top / cover no-repeat;
}
.boxRecommend .cmnArrowCircle{
    position: absolute;
    bottom: 2rem;
    right: 0;
    width: 4.7rem;
    height: 4.7rem;
}
.boxRecommend .btn.isMember{
    width: 100%;
    height: 6.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 2rem;
}
.boxRecommend .btn .btnTxt,
.boxRecommend .btn .btnTit{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.boxRecommend .btn .btnTxt{
    width: 18rem;
    background-color: var(--memberColor2);
    font-size: var(--pcFontSize14);
}
.boxRecommend .btn .btnTit{
    width: calc(100% - 18rem);
    background-color: var(--memberColor);
    color: var(--whiteColor);
    font-size: var(--pcFontSize16);
    font-weight: bold;
}
.boxRecommend .btn .txt{
    position: relative;
    display: inline-block;
    padding-right: 2rem;
}
.boxRecommend .btn .txt::after{
    position: absolute;
    content: '';
    margin: auto;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1.1rem;
    height: 0.3rem;
}
.boxRecommend .btn.lazyloaded .txt::after{
    background: url(../img/common/iconArrow_next_white.png) center top / cover no-repeat;
}
@media only screen and (max-width:1215px){
    /* boxList */
    .boxRecommend .boxList{
        margin-top: 3rem;
    }
    .boxRecommend .list{
        gap: 3rem;
    }
    .boxRecommend .item{
        width: 100%;
    }
    .boxRecommend .link{
        align-items: center;
        flex-direction: column;
        padding-bottom: 3rem;
    }
    .boxRecommend .boxImg,
    .boxRecommend .boxTit{
        width: 100%;
    }
    .boxRecommend .boxTit {
        margin-top: 1.5rem;
    }
    /* boxEstateTag */
    .boxRecommend .boxEstateTag{
        margin-bottom: 1rem;
    }
    .boxEstateTag .tag{
        padding: 0.4rem 0.8rem 0.5rem;
    }
    .boxEstateTag .tag .txtTag{
        font-size: var(--spFontSize11);
    }
    /* boxEstateTxt */
    .boxRecommend .boxEstateTxt .txt{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_18);
        letter-spacing: var(--spLetterSpacing12_0);
    }
    .boxRecommend .boxEstateTxt .tit{
        font-size: var(--spFontSize16);
        line-height: var(--spLineHeight16_24);
        margin-top: 0.2rem;
    }
    .boxRecommend .txtMemo{
        font-size: var(--spFontSize11);
        line-height: var(--spLineHeight11_17);
        letter-spacing: var(--spLetterSpacing11_0);
        line-clamp: 3;
        -webkit-line-clamp: 3;
        overflow: hidden;
        max-height: calc(var(--spFontSize11) * var(--spLineHeight11_17) * 3);
        margin-top: 0;
    }
    /* boxInfoTxt */
    .boxRecommend .boxInfoTxt{
        margin-top: 1.5rem;
        padding-top: 1.5rem;
    }
    .boxRecommend .boxInfoTxt .txt{
        max-width: 100%;
        font-size: var(--spFontSize11);
        line-height: var(--spLineHeight11_17);
        letter-spacing: var(--spLetterSpacing11_0);
        max-height: calc(var(--spFontSize11) * var(--spLineHeight11_17) * 2);
        min-height: 2.2rem;
    }
    .boxRecommend .link_member .boxInfoTxt .txt,
    .boxRecommend .boxInfoTxt .txt.isPrice{
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight13_20);
        max-height: calc(var(--spFontSize13) * var(--spLineHeight13_20) * 2);
    }
    .boxRecommend .cmnArrowCircle{
        bottom: 0;
        width: 3.7rem;
        height: 3.7rem;
    }
    /* link_member */
    .boxRecommend .link_member .boxInfoTxt {
        flex-direction: row;
        gap: 2rem;
    }
    .boxRecommend .link_member .boxInfoTxt::before {
        background-color: var(--gray_d0d_Color);
    }
    .boxRecommend .btn.isMember{
        height: 4.5rem;
    }
    .boxRecommend .btn .btnTxt{
        width: 11rem;
        font-size: var(--spFontSize10);
    }
    .boxRecommend .btn .btnTit{
        width: calc(100% - 11rem);
        font-size: var(--spFontSize13);
    }
}