@import url(./common_import.css);
/*************************************************************************/
/****************************  keyvisual  ********************************/
/*************************************************************************/

.keyvisual{
    position: relative;
    height: 843px;
}

.keyvisual *{
    font-family: "Noto Serif JP", serif;
}

.keytext{
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
}

.keyvisual h2{
    color: #EDC154;
    font-size: 30px;
    line-height: 170%;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
}


.keyvisual h2:before,
.keyvisual h2:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #EDC154;
}

.keyvisual h2:before {
    margin-right: 1rem;
}

.keyvisual h2:after {
    margin-left: 1rem;
}


.keyvisual h1{
    color: #EDC154;
    font-size: 85px;
    line-height: 140%;
    font-weight: 500;
    text-align: center;
    margin-bottom: 45px;
}

.keytext_sub ul{
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.keytext_sub ul li{
    padding: 15px 0;
    width: calc(100% / 3 - 15px);
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.keytext_sub ul li p{
    font-size: 21px;
    font-weight: 600;
    color: #fff;
    line-height: 150%;
}

.keytext_sub ul li:nth-child(1){
    background: linear-gradient(217deg, #623EA7, #633468 70.71%);
}

.keytext_sub ul li:nth-child(2){
    background: linear-gradient(217deg, #663566, #723653 70.71%);
}

.keytext_sub ul li:nth-child(3){
    background: linear-gradient(217deg, #743651, #A64747 70.71%);
}

.keytext_sub .num{
    width: 35px;
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
}

.keyimage{
    height: 100%;
}

.keyimage img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top center;
}

@media screen and (max-width:1650px){
    .keytext_sub .num{
        left: 15px;
    }
    .keyvisual h1{
        font-size: 5vw;
    }
    .keyvisual h2{
        font-size: 1.8541666666666665vw;
    }
}

@media screen and (max-width:1400px){
    .keytext_sub ul li p{
        font-size: 15px;
        line-height: 150%;
    }
    .keytext_sub .num{
        width: 32px;
    }
    .keytext_sub ul{
        gap: 10px;
    }
    .keytext_sub ul li {
        width: calc(100% / 3 - 5px);
    }
    /* .keytext_sub .num{
        left: 0;
    } */
    .keyvisual h1{
        font-size: 60px;
    }
    .keyvisual h2{
        font-size: 26.7px;
    }
}

@media screen and (max-width:770px){
    .keyvisual h1{
        font-size: 9.448634590377113vw;
    }
    .keyvisual h2{
        font-size: 3.472041612483745vw;
    }
}

/*以下スマホ*/
@media screen and (max-width:767px){
    main{
        margin-top: 60px;
    }
}

@media screen and (max-width:660px){
    .keyvisual h2{
        justify-content: center;
        font-size: 5.3vw;
    }
    .keyvisual h1{
        font-size: 13vw;
        margin-bottom: 29px;
        line-height: 105%;
    }
    .keytext_sub ul{
        flex-direction: column;
    }
    .keytext_sub ul li{
        width: 100%;
        max-width: 345px;
        margin: auto;
        padding: 9.5px 0;
    }
    .keyvisual h2:before, .keyvisual h2:after{
        display: none;
    }
    .keytext{
        bottom: 30px;
    }
    .keyvisual{
        height: 170.66666666666669vw;
    }
    .keytext_sub .num{
        width: 25px;
    }
    .keytext_sub ul li p{
        font-size: 14px;
    }
}

/*************************************************************************/
/***************************  keyvisualここまで  **************************/
/*************************************************************************/


/*************************************************************************/
/****************************  annotation  ********************************/
/*************************************************************************/

.main_annotation p{
    line-height: 215%;
    font-weight: 600;
    font-size: 29px;
    font-family: "Noto Serif JP", serif;
    text-align: center;
    padding: 120px 0 100px 0;
    margin-bottom: 120px;
    border-bottom: solid 1px #B8B8B8;
}

/*タブレット*/
@media screen and (max-width:1300px){
    .main_annotation p{
        font-size: 25px;
    }
}

/*スマホ*/
@media screen and (max-width:767px){
    .main_annotation p{
        font-size: 18px;
        padding: 60px 0;
        margin-bottom: 60px;
    }
}

/*************************************************************************/
/*************************  annotationここまで  **************************/
/*************************************************************************/


/*************************************************************************/
/****************************  ホーム検索  ********************************/
/*************************************************************************/

.home_search{
    margin-bottom: 120px;
}

.home_search_inner{
    display: flex;
}

.home_search_inner .home_search_side{
    background-color: var(--main-color);
    width: 338px;
}

.home_search_inner .home_search_side *{
    font-family: "Noto Serif JP", serif;
}

.home_search_inner .home_search_content_list{
    background-color: #F1F1F1;
    width: calc(100% - 338px);
    padding: 30px 30px 50px 30px;
}

.home_search_inner .home_search_content_list_inner{
    display: flex;
    gap: 0 2px;
    flex-wrap: wrap;
}

.home_search_inner .home_search_side .flag{
    width: 28px;
    margin-right: 20px;
}

.home_search_inner .home_search_side ul li{
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    height: 62.5px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #fff;
    position: relative;
    cursor: pointer;
}

.home_search_inner .home_search_side ul li::before {
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: rotate(45deg);
}


.home_search_inner .home_search_side ul li.active{
    background-color: #F1F1F1;
    color: var(--main-color);
}

.home_search_inner .home_search_side ul li.active::before{
    border-color: var(--main-color);
}

.home_search_inner .home_search_side ul li a{
    color: #fff;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.home_search_inner .home_search_content_list .home_search_content{
    width: calc(50% - 1px);
}

.home_search_content_image{
    margin-bottom: 20px;
    overflow: hidden;
    height: 293px;
}

.home_search_content_image img{
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
}

.home_search_content_text{
    padding: 0 20px;
}

.home_search_content_tag{
    background: linear-gradient(217deg, #623EA7, #A64747 70.71%);
    line-height: 170%;
    font-size: 14px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home_search_content_tag.pre_build{
    width: 90px;
    height: 20px;
}

.home_search_content_tag.secondary{
    width: 104px;
    height: 20px;
}

.home_search_content_tag.lady{
    width: 62px;
    height: 20px;
}

.home_search_content_en_name{
    font-family: "Noto Serif JP", serif;  
    font-size: 18px;
    line-height: 170%;
    font-weight: 400;
    color: #565656;
}

.home_search_content_ja_name{
    font-family: "Noto Sans JP", sans-serif;
    color: #000;
    font-size: 18px;
    font-weight: 500;
}

.home_search_content{
    opacity: 0;
    transform: scale(0.8);
    height: 0;
    overflow: hidden; /* 高さが残らないように調整 */
    transition: .5s;
    visibility: hidden;
}

.home_search_content.active{
    opacity: 1;
    transform: scale(1);
    visibility: visible;
    height: auto; /* 表示状態に戻す */
    margin-bottom: 40px;
}

.home_search_content.active:nth-child(2){
    transition-delay: 0.3s;
}
.home_search_content.active:nth-child(3){
    transition-delay: 0.6s;
}
.home_search_content.active:nth-child(4){
    transition-delay: 0.9s;
}


@media screen and (max-width:1500px){
    .home_search_content_image{
        height: 19.53333333333333vw;
    }
}


/*タブレット*/
@media screen and (max-width:1200px){
    .home_search_inner .home_search_side{
        width: 233px;
    }
    .home_search_inner .home_search_content_list{
        width: calc(100% - 233px);
    }
    .home_search_inner .home_search_content_list_inner{
        flex-direction: column;
    }
    .home_search_inner .home_search_side ul li{
        font-size: 18px;
        height: 63px;
        padding: 0 10px;
    }
    .home_search_inner .home_search_side .flag{
        width: 28px;
        margin-right: 10px;
    }
    .home_search_inner .home_search_side ul li::before {
        right: 10px;
    }
    .home_search_inner .home_search_content_list .home_search_content{
        width: 100%;
    }
    .home_search_content_image{
        height: 31.98959687906372vw;
    }
}

/*スマホ*/
@media screen and (max-width:767px){
    .home_search_inner{
        flex-direction: column;
    }
    .home_search_inner .home_search_side{
        width: 100%;
    }
    .home_search_inner .home_search_content_list{
        width: 100%;
        padding: 40px 15px;
    }
    .home_search_inner .home_search_side ul{
        display: flex;
        flex-wrap: wrap;
    }
    .home_search_inner .home_search_side ul li{
        width: 50%;
        font-size: 16px;
        height: 50px;
        padding-right: 15px;
    }
    .home_search_inner .home_search_side .flag{
        width: 17px;
        margin-right: 5px;
    }
    .home_search_inner .home_search_side ul li:nth-child(odd){
        border-right: solid 1px #fff;
    }
    .home_search > .container_1440{
        width: 100%;
    }
    .home_search_content_text{
        padding: 0;
    }
    .home_search_content_en_name{
        font-size: 16px;
    }
    .home_search_content_ja_name{
        line-height: 170%;
    }
    .home_search_content_image{
        margin-bottom: 10px;
        height: 52vw;
    }
    .home_search_content_tag{
        margin-bottom: 10px;
    }
}

/*************************************************************************/
/**************************  ホーム検索ここまで  **************************/
/*************************************************************************/



/*************************************************************************/
/*********************************  帯  **********************************/
/*************************************************************************/

.band{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 466px;
    margin-bottom: 120px;
    display: flex;
    align-items: center;
}

.band h2{
    color: #fff;
    font-size: 42px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    line-height: 170%;
    margin-bottom: 50px;
}

.band p{
    color: #fff;
    font-size: 22px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    line-height: 200%;
    margin-bottom: 50px;
}

.real_estate_guide{
    background-image: url(../img/home/asia_top_guide-img.jpg);
}

.we_are{
    background-image: url(../img/home/asia_top_about-img.jpg); 
    background-position-x: 80%;   
}

.band.we_are h2{
    font-family: "Noto Serif JP", serif;
    margin-bottom: 20px;
}

.band.we_are p{
    font-family: "Noto Serif JP", serif; 
    font-size: 18px;
    line-height: 180%;
}

.we_are .band_text{
    width: 50%;
}

@media screen and (max-width:1200px){
    .we_are{
        background-image: url(../img/home/sp_asia_top_about-img.jpg);
        height: 113.13394018205463vw;
        background-position: top center;
    }
    .we_are .band_text{
        width: 100%;
    }
}

/*スマホ*/
@media screen and (max-width:767px){
    .band{
        margin-bottom: 60px;
    }
    .band h2{
        font-size: 32px;
        margin-bottom: 40px;
    }
    .band p{
        font-size: 18px;
    }
    .we_are{
        background-image: url(../img/home/sp_asia_top_about-img.jpg);   
        height: 158.4vw;
        align-items: end;
    }
    .we_are .container_1440{
        margin-top: 0;
        margin-bottom: 0;
    }
    .we_are .band_text{
        width: 100%;
    }
    .we_are .band_text h2{
        font-size: 28px;
    }
}

@media screen and (max-width:500px){
    .real_estate_guide{
        background-image: url(../img/home/sp_asia_top_guide-img.jpg);
    }
}
/*************************************************************************/
/*****************************  帯ここまで  *******************************/
/*************************************************************************/


/*************************************************************************/
/****************************  home特集  *********************************/
/*************************************************************************/

.special_feature{
    margin-bottom: 120px;
}

.special_feature_inner{
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.special_feature_content{
    width: calc(50% - 1px);
    position: relative;
}

.special_feature_title{
    position: absolute;
    top: 25px;
    left: 20px;
    z-index: 2;
}

.special_feature_title h3{
    font-size: 20px;
    color: #fff;
    line-height: 170%;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
}

.special_feature_title h3 span{
    font-size: 24px;
    font-weight: 300;
}

.special_feature .common_title{
    margin-bottom: 50px;
}

.comming_soon:after{
    position: absolute;
    content: 'Coming soon';
    background-color: rgba(0,35,73,0.55);
    z-index: 6;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: "Noto Serif JP", serif;
    font-size: 24px;
    line-height: 170%;
    letter-spacing: 2.4px;
    font-weight: 400;
}


/*スマホ*/
@media screen and (max-width:767px){
    .special_feature > .container_1440{
        width: 100%;
    }
    .special_feature_content{
        width: 100%;
        height: 64.66753585397653vw;
        object-fit: cover;
    }
    .special_feature_content img{
        width: 100%;
        height: 100%;
    }
}

@media screen and (max-width:500px){
    .special_feature_content{
        height: 53.333333333333336vw;
    }
}

/*************************************************************************/
/**************************  home特集ここまで  ****************************/
/*************************************************************************/


/*************************************************************************/
/******************************  お問い合わせ  ****************************/
/*************************************************************************/

.home_contact{
    height: 466px;
    background-image: url(../img/home/asia_top_contact.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
}

.home_contact_text h2{
    font-size: 42px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    line-height: 170%;
    margin-bottom: 50px;
}

.home_contact_text .home_contact_address,.home_contact_text .home_contact_tel{
    font-size: 22px;
    font-weight: 400;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 180%;
}

.contact_maill_btn,.contact_web_btn{
    background-color: var(--main-color);
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    line-height: 170%;
    font-family: "Noto Sans JP", sans-serif;
    position: relative;
    padding-left: 36px;
    width: 195px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact_maill_btn::before{
    background-image: url(../img/icon/maill_icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 26px;
    height: 17px;
    content: '';
    top: 0;
    bottom: 0;
    left: 43px;
    margin: auto;
    position: absolute;
}

.contact_web_btn::before{
    background-image: url(../img/icon/web_icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 26px;
    height: 27px;
    content: '';
    top: 0;
    bottom: 0;
    left: 20px;
    margin: auto;
    position: absolute;
}

.home_contact_text .btns{
    margin-top: 50px;
    display: flex;
    align-items: center;
    gap: 40px;
}

/*スマホ*/
@media screen and (max-width:767px){
    .home_contact{
        height: 559px;
        background-image: url(../img/home/sp_asia_top_contact.jpg);
        align-items: end;
        padding-bottom: 50px;
    }
    .home_contact .container_1440{
        margin-top: 0;
        margin-bottom: 0;
    }
    .home_contact_text h2{
        font-size: 28px;
        margin-bottom: 40px;
    }
    .home_contact_text .home_contact_address,.home_contact_text .home_contact_tel{
        font-size: 18px;
    }
    .home_contact_text .btns{
        flex-direction: column;
        gap: 20px;
    }
}

/*************************************************************************/
/**************************  お問い合わせここまで  *************************/
/*************************************************************************/