@charset "UTF-8";

.page_rooms .col1 {width: 10%;}
.page_rooms .col2 {width: 20%;}
.page_rooms .col3 {width: 35%;}
.page_rooms .col4 {width: 40%;}
.page_rooms .col5 {width: 50%;}

section:nth-child(even) {
    background-color: #fff;
}

/* 並び替え =============================*/
.area_choose {
    padding: 10px 0;
}
.area_choose .container {
    max-width: none;
    display: flex;
    align-items: center;
}
.area_choose .area_sort {
    margin: 0 0 0 auto;
}

.page_rooms_inner {
    display: flex;
    border-top: 1px solid #000;
}

.list_area {
    margin-left: 10px;
    width: calc(100% - 416px);
}

.page_rooms .container {
    width: 100%;
}

.area_searching {
    width: 406px;
    z-index: 101;
}

.detailed_search_area {
    overflow-y: scroll;
    padding: 10px 10px 100px;
    width: 400px;
    height: calc(100vh - 100px);
    background-color: #fff;
}

.detailed_search_area .container {
    width: 90%;
}

.detailed_search_area.open {
    display: block;
}

.detailed_search_area .head_box {
    display: none;
}

.detailed_search_area [class*="list_form"][class*="search"] .head_form p {
    font-size: 18px;
}

.detailed_search_area .wrap_checkbox label {
    font-size: 14px;
}

.detailed_search_area .close {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 13px;
}

.wrap_input select {
    max-width: 250px;
}

.wrap_input .wrap_select + .wrap_select {
    margin-left: 15px;
}

.wrap_input .separate {
    margin: 0 10px;
}

/*
    物件情報
*/
.area_room .container {padding: 0}

.eatate_list_item + li {margin-top: 30px;}

.eatate_list_item {
    border: 1px solid #ccc;
}

.list_room .name{
    font-weight: bold;
    font-size: 16px;
}

/* 物件存在無し */
.no_estate {
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
}

/* 物件エリア */
.estate_area {
    display: flex;
    border-bottom: 1px solid #eee;
}

/* 物件エリア　物件写真 */
.estate_area .img {width: 30%;}

/* 物件エリア　物件テキスト */
.estate_area .text {
    width: 70%;
}

/* 物件エリア　物件情報 */
.estate_area .text .estate_info_area {
    display: flex;
    padding: 10px 10px;
}

.estate_area .text .estate_info_area .data_area {
    width: 100%;
}

.estate_area .text p {
    font-size: 13px;
}

.estate_area .text p + p {
    margin-top: 5px;
}

.estate_area .img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.estate_area .text .estate_name {
    font-size: 16px;
    font-weight: bold;
    padding: 5px 10px;
    background-color: #EDEDED;
}

.estate_name_sp {display: none;}

.estate_area .text .price_area {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.estate_area .text .price_area + p {
    margin-top: 5px;
}

.estate_area .text .price_area .space {margin: 0 10px}

.estate_area .text .equipment_area .title{font-weight: bold;}

.estate_area .text .equipment_area > ul {
    display: flex;
}

.estate_area .text .equipment_area .equipment_item{
    background: #eee;
    padding: 3px 5px;
}

.estate_area .text .equipment_area .equipment_item + .equipment_item {margin-left: 5px;}

.estate_area .estate_comment {
    width: 95%;
    position: relative;
    margin-top: 20px;
    border: 2px solid #efefef;
    border-radius: 10px;
    padding: 10px;
}

.estate_area .estate_comment .ttl {
    background-color: #fff;
    position: absolute;
    width: 110px;
    text-align: center;
    top: -15px;
    font-weight: bold;
}

.estate_area .estate_comment .txt {
    margin-top: 0;
}
/*
    部屋情報
*/

.rooms_area {
    display: none;
}
/* 部屋リストヘッダー */
.room_header {
    display: flex;
    background-color: #ededed;
    font-size: 15px;
}

/* 部屋一覧トグル */
.rooms_toggle {
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    color: #0066cc;
    background-color: #ededed;
}

.room_header .space_area{
    width: 35%;
}

.room_header .header_area {
    flex: auto;
}

.room_header .header_area div {
    text-align: center;
    padding: 5px 0px;
}

/* 部屋リスト */
.rooms_list {
    padding: 10px 0;
    transition: .2s;
    overflow-y: scroll;
}

.rooms_list.open {
    display: block;
}

.rooms_list > li {
    display: flex;
    padding: 10px 0;
}

.rooms_list > li a:hover .room_name {
    text-decoration: underline;
}

.rooms_list .top_area a {
    display: block;
    width: 100%;
}

.rooms_list .room_info li{
    text-align: center;
}

.rooms_list .room_info li .circle {
    display: flex;
    justify-content: center;
}

.rooms_list .room_info li .circle + .circle {margin-top: 5px;}

.rooms_list .room_info li .circle span {
    display: block;
    background: #555;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    text-align: center;
}

.rooms_list > li a:hover img {
    opacity: 0.8;
}

.rooms_list > li + li {
    border-top: 1px solid #eee;
}

.rooms_list > li .img {
    width: 35%;
}

.rooms_list > li .img .img_list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.rooms_list > li .img .img_list li {
    width: 70%;
    padding: 5px;
    scroll-snap-align: start;
    flex-shrink: 0;
    border-radius: 10px;
    transform-origin: center center;
    transform: scale(1);
    transition: transform 0.5s;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
}

.slides::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.slides::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
    background: transparent;
}

.rooms_list > li .img .img_list li img {
    width: 100%;
    height: 170px;
    object-fit: contain;
}

.rooms_list .text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 65%;
}

.rooms_list .text .area_star {
    margin-left: 20px;
}

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

.rooms_list .bottom_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
}

.top_category_area {
    display: flex;
}

.top_category_area > div + div {
    margin-left: 10px;
}

/* 設備 */
.equipments_area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 95%;
    margin: 10px auto 0;
}

.equipments_area > li {
    font-size: 11px;
    width: 24%;
    color: #ccc;
    padding: 4px 6px;
    margin: 0 0 5px;
    text-align: center;
    border: 1px solid #ccc;
}

.equipments_area > li.on {
    color: #333;
    border: 1px solid #09bf97;
}

/* 特徴 */
.rooms_list .feature_area {
    display: flex;
}

.rooms_list .feature_area > li {
    font-size: 13px;
    padding: 0px 8px;
    border-radius: 20px;
    border: 1px solid #ccc;
}

.rooms_list .feature_area > li.video, .rooms_list .feature_area > li.vr {
    background-color: #e55089;
    color: #fff;
}

.rooms_list .feature_area > li.zerochin {border: 1px solid #EB6EA6;}
.rooms_list .feature_area > li.zerochin a {color: #EB6EA6;}

.rooms_list .feature_area > li.sale {border: 1px solid #62c2d0; color: #62c2d0;}
.rooms_list .feature_area > li.sale a {color: #62c2d0;}

.rooms_list .feature_area > li.renotta {border: 1px solid #1e90ff;}
.rooms_list .feature_area > li.renotta a {color: #1e90ff;}

.rooms_list .feature_area > li.highgrade {border: 1px solid #e9bc00}
.rooms_list .feature_area > li.highgrade a {color: #e9bc00;}

.rooms_list .feature_area > li.new {
    border: 1px solid #f70633;
    color: #f70633;
}

.rooms_list .feature_area > li + li {
    margin-left: 5px;
}

/* 部屋詳細リンク */
.detail_area {
    margin-right: 15px;
    text-align: right;
}

.detail_area a{
    font-size: 20px;
    color: #004CCA;
    text-decoration: underline;
}

/*
    検索フォーム
*/
.search_form {
    position: fixed;
    border: 3px solid #09bf97;
    z-index: 100;
}

.area_search {
    width: 100%;
    padding: 8px 0;
    background-color: #fff;
    border-top: 1px solid #ccc;
    position: absolute;
    left: 0;
    bottom: 0;
}

.list_search_category > li + li {
    margin: 40px 0 0;
}

.search_form_area .keyword_area {
    position: relative;
    padding-left: 20px;
}

.search_form_area .keyword_area:before{
    content: "";
    background: url(../../img/user/ico/ico_search.svg) no-repeat center center !important;
    background-size: contain !important;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 12px;
}

.search_form_area .keyword_area input {
    background-color: #fff;
    padding: 0 5px;
}

/* 全てのこだわり条件 =============================*/
.detail_condition > .ttl {
    background: #ededed;
    font-weight: bold;
    font-size: 15px;
    padding: 15px;
    position: relative;
    margin: 0 0 30px;
    cursor: pointer;
}
.detail_condition > .ttl:after {
    content: "";
    background: url(../../img/user/ico/ico_select.svg) no-repeat center center !important;
    background-size: contain !important;
    width: 12px;
    height: 12px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.detail_condition .list_form_search {display: none;}

.detail_condition.show .list_form_search {display: block;}

/* 検索キーワード */

.keyword_area .input_area {
    display: flex;
}

.keyword_area .input_area .btn-area .btn {
    position: relative;
    width: 80px;
    height: 100%;
    background-color: #333;
}

.keyword_area .input_area .btn-area .btn i{
    color: #fff;
    position: absolute;
    top: 35%;
    left: 40%;
    width: 15px;
    height: 15px;
    border: solid 2px #fff;
    border-radius: 100%;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

.keyword_area .input_area .btn-area .btn i::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 5px;
    height: 9px;
    width: 2px;
    background-color: #fff;
}

/*
    slick
*/
.estate_area .slick-prev, .estate_area .slick-next {
    width: 30px;
    height: 30px;
}

.estate_area .slick-prev:before, .estate_area .slick-next:before {
    width: 30px;
    height: 30px;
}

/* ページャー */
.paging_area {
    padding: 30px 0;
}

/* PC end */

/**********
    SP
***********/
@media screen and (max-width: 480px) {
    .page_rooms .box {
        padding: 20px 0 40px;
    }

    .area_choose {
        margin-top: 70px;
        background-color: #ededed;
    }

    .rooms_list {
        overflow-y: auto;
        max-height: none;
    }

    .list_area {
        width: 100%;
        margin: 30px 0 0 0;
    }

    .area_searching {
        display: none;
    }

    .area_searching.open {
        display: block;
    }

    .area_searching .container {
        flex-direction: column;
        align-items: flex-end;
        padding: 5px 10px 0 5px;
    }

    .btnarea_center_search {
        width: 100%;
        justify-content: flex-end;
    }

    .search_form_area .keyword_area input {
        font: 400 10px/1em "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    }

    .eatate_list_item {
        width: 95%;
        margin: 0 auto;
    }
    .eatate_list_item .text p + p {
        margin-top: 0px;
    }

    .estate_area {
        flex-wrap: wrap;
    }

    .estate_name_sp {
        display: block;
        width: 100%;
        font-size: 13px;
        font-weight: bold;
        padding: 3px 5px;
        background-color: #EDEDED;
    }

    .estate_area .estate_name {display: none;}

    .estate_area .img {width: 40%;}

    .estate_area .img img {
        height: auto;
    }

    .eatate_list_item .top_area {
        padding: 15px 10px;
    }

    /* 物件名 */
    .eatate_list_item .estate_name {
        font-size: 16px;
    }

    /* 物件画像エリア */
    .eatate_list_item .img_area {
        -webkit-overflow-scrolling: touch;
        margin-top: 5px;
        overflow-x: scroll;
    }
    .eatate_list_item .estate_img {
        display: inline-block;
        white-space: nowrap;
    }

    .eatate_list_item .estate_img > li{
        width: 200px;
        display: inline-block;
    }

    .eatate_list_item .estate_img img{
        height: 150px;
        object-fit: cover;
    }

    /* 家賃 */
    .eatate_list_item .text .price_area {
        display: flex;
        align-items: center;
        margin-top: 0px;
    }

    .estate_area .text {
        width: 60%;
    }

    .estate_area .text .price_area + p {margin-top: 0px;}

    .estate_area .text .price_area .space {margin: 0;}

    /* 部屋 */
    .rooms_list > li {
        flex-wrap: wrap;
    }
    .eatate_list_item .rooms_list .top_area {
        display: flex;
        padding: 0;
    }

    .eatate_list_item .rooms_list .center_area {
        font-size: 12px;
        margin-top: 10px;
    }

    .eatate_list_item .rooms_list .text {
        width: 100%;
        margin-left: 0;
    }

    .eatate_list_item .rooms_list .img {
        width: 100%;
    }

    .rooms_list > li .img .img_list li {
        width: 45%;
    }

    .rooms_list > li .img .img_list li img {
        height: 120px;
    }


    .estate_area .estate_comment .txt {
        font-size: 11px;
    }

    /* 星 */
    .eatate_list_item .text .area_star {
        margin-left: 0;
    }

    .eatate_list_item .list_star > li i{
        width: 20px;
        height: 20px;
    }

    /* 部屋一覧ヘッダー */
    .header_area {
        display: block;
        text-align: center;
        padding: 10px 0;
        cursor: pointer;
        background-color: #ededed;
        font-size: 13px;
    }

    .header_area::after {
        content: "";
        display: inline-block;
        margin: 0 0 3px 3px;
        width: 7px;
        height: 7px;
        border-bottom: 2px solid #666;
        border-right: 2px solid #666;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .header_area.open::after {
        margin-bottom: 0;
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    /* 部屋番号 */
    .eatate_list_item .rooms_list .room_name {
        font-weight: normal;
    }

    .eatate_list_item .rooms_list .management {
        margin-top: 0;
        font-size: 10px;
    }

    /* 敷金礼金 */
    .eatate_list_item .rooms_list .price_area {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
    }

    .eatate_list_item .rooms_list .price_area span {
        font-size: 12px;
        color: #fff;
        background-color: #333333;
        padding: 3px;
    }

    /* 設備 */
    .equipments_area_sp {
        display: flex;
    }

    .eatate_list_item .rooms_list .equipments_area p {
        width: 50px;
    }

    .detailed_search_area {
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        right: 0;
        transform: none;
        border: none;
        padding: 0 5%;
        z-index: 100;
    }

    .wrap_input select {
        max-width: 100%;
    }

    .equipments_area > li {
        font-size: 10px;
        font-weight: normal;
        padding: 2px 0px;
        width: calc(25% - 3px);
        margin: 0 3px 3px 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 特徴 */
    .rooms_list .feature_area > li {
        font-size: 10px;
        padding: 2px 5px;
    }

    /* 部屋詳細リンク */
    .detail_area a{
        font-size: 16px;
    }

    .estate_area .text .estate_info_area .label_area {
        width: 105px;
    }

    .estate_area .text .estate_info_area .data_area {
        width: 100%;
    }

    .estate_area .text .estate_info_area .data_area .intro_subject {
        display: none;
    }

    /* 部屋情報ヘッダー */
    .room_header_sp {
        margin-left: 2.5%;
    }

    .room_header_sp li + li {margin-top: 3px;}

    .rooms_list .room_info {
        flex: auto;
        margin-left: 10px;
    }

    .rooms_list .room_info li {
        text-align: left;
    }

    .rooms_list .room_info li + li {margin-top: 3px;}

    .rooms_list .room_info .circle_area {
        display: flex;
    }

    .rooms_list .room_info li .circle + .circle {
        margin-top: 0;
        margin-left: 15px;
    }

    .area_search {
        position: fixed;
    }

    .area_search_detail {
        padding: 20px 0 80px;
    }

    .dateil_area .dateil_search_btn {
        display: block;
        text-align: right;
        padding: 10px 5px;
    }

    .rooms_toggle {
        padding: 5px 0;
    }
}
/* SP end */