@charset "utf-8";
/* CSS Document */

#contents_outer {
    background: #FFF !important;
}
#contents {
    width: 100%;
}
#path {
    width: 1224px;
    margin-bottom: 24px;
}
.header .header__upper {
    z-index: 3 !important;
}
.room-main * {
    box-sizing: border-box;
}
.l-detail {
    width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 760px 420px;
    column-gap: 40px;
}
[class*="__section"] {
    margin-bottom: 60px;
}
.section__headline {
    font-size: 22px;
    font-weight: 600;
    line-height: 2;
    color: #000;
    margin-bottom: 20px;
}


    .head__section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0 30px;
        margin-bottom: 20px;
    }
        .head__label-list {
            display: flex;
            align-items: center;
            gap: 0 8px;
            margin-bottom: 2px;
        }
            [class*="head__label-item"] {
                background: #959595;
                border-radius: 4px;
                padding: 0 4px;
                font-size: 12px;
                font-weight: 300;
                line-height: 1.24;
                color: #FFF;
            }
            .head__label--new {
                border-radius: 4px;
                padding: 0 4px;
                font-size: 12px;
                font-weight: 300;
                line-height: 1.24;
                color: #FFF;
                background: #F22;
            }
            .head__label-item--new-build {
                background: #226FFF;
            }
        .head__name {
            font-size: 20px;
            font-weight: 600;
            color: #000;
            margin-bottom: 2px;
            line-height: 2;
        }
        .head__info {
            display: flex;
            align-items: flex-end;
            gap: 0 10px;
        }
            .head__price {
                display: flex;
                align-items: flex-end;
                font-size: 14px;
                font-weight: 600;
                color: #D34546;
                line-height: 1.2;
            }
            .head__price::before {
                content: '';
                background: url(/images/room/icon_price.webp) no-repeat center / cover;
                display: block;
                width: 28px;
                height: 28px;
                margin-right: 10px;
            }
                .head__price .price {
                    font-size: 28px;
                    font-weight: 600;
                    line-height: 1;
                    color: #D34546;
                }
            .head__bkn-info {
                display: flex;
                align-items: center;
                gap: 0 10px;
            }
                .head__bkn-text {
                    font-size: 12px;
                    font-weight: 300;
                    line-height: 1.5;
                }
                    .head__bkn-text span {
                        font-size: 12px;
                        font-weight: 300;
                        color: #D34546;
                    }
        .head__favorite-button {
            max-width: 61px;
            font-size: 12px;
            font-weight: 300;
        }
        .head__favorite-button a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.10);
            margin: 0 auto;
        }
        .head__favorite-button a span {
            display: block;
            width: 22px;
            height: 19px;
            font-size: 0;
            line-height: 0;
            color: transparent;
            padding: 0;
            border: none;
            background-image: url(/images/mobile/bknlist/icn_fav.png);
            background-size: 22px auto;
            background-position: center;
            background-repeat: no-repeat;
            transition: .2s ease;
        }
        .head__section .fv-clicked.bknFavBtn a span {
            background-color: transparent;
            background-image: url(/images/mobile/bknlist/icn_fav_on.png);
            background-size: 22px auto;
            background-position: center;
            background-repeat: no-repeat;
            animation: .7s zoom;
        }

        .bknimage__contents {
            overflow: hidden;
        }
        .bknimage__wrap {
            margin-bottom: 4px;
            position: relative;
        }
            .bknimage__item {
                width: 100%;
                height: 450px;
            }
                .bknimage__item img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            .slide__all {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 8px 0;
                width: 54px;
                border-radius: 4px;
                background: rgba(0, 0, 0, 0.55);
                padding: 8px;
                font-size: 12px;
                font-weight: 300;
                line-height: 1;
                color: #FFF;
                text-align: center;
                cursor: pointer;
                position: absolute;
                bottom: 12px;
                right: 20px;
                z-index: 2;
            }
                .slide__all::before {
                    content: '';
                    background: url(/images/room/img_slide-all.webp) no-repeat center / cover;
                    display: block;
                    width: 20px;
                    height: 20px;
                }
            .room-main .swiper-pagination.main__pagination {
                display: block;
                width: fit-content;
                padding: 4px;
                border-radius: 4px;
                background: rgba(0, 0, 0, 0.55);
                font-size: 12px;
                font-weight: 400;
                color: #FFF;
                position: absolute;
                left: 20px;
                bottom: 12px;
                z-index: 1;
            }
            [class*="mainimage-arrow-"] {
                width: 34px;
                height: 34px;
                z-index: 1;
            }
            .mainimage-arrow-prev {
                transform: rotate(180deg);
            }
                [class*="mainimage-arrow-"] img {
                    width: 100%;
                }
            [class*="mainimage-arrow-"]::before,
            [class*="mainimage-arrow-"]::after,
            [class*="thumb-arrow-"]::before,
            [class*="thumb-arrow-"]::after {
                content: none;
            }
            .main__pagination span {
                font-size: 12px;
                font-weight: 300;
                color: #FFF;
            }
            .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
                display: none;
            }

        .thumb__wrap {
            position: relative;
        }
            .thumb__item {
                width: 100px;
                height: 100px;
            }
            .thumb__item.swiper-slide-thumb-active {
                position: relative;
            }
                .thumb__item.swiper-slide-thumb-active::before {
                    content: '';
                    background: rgba(255, 255, 255, .5);
                    border: 1px solid #CCC;
                    width: 100px;
                    height: 100px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                }
                .thumb__item img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            [class*="thumb-arrow-"] {
                width: 30px;
                height: 100px;
                top: 0;
                margin: 0;
                z-index: 1;
            }
            .thumb-arrow-prev {
                left: 0;
                right: unset;
                transform: rotate(180deg);
            }
            .thumb-arrow-next {
                left: unset;
                right: 0;
            }
                [class*="thumb-arrow-"] img {
                    width: 100%;
                }
        .bkn-print__button a {
            display: flex;
            align-items: center;
            gap: 0 6px;
            width: fit-content;
            height: fit-content;
            padding: 5px 8px;
            border: 1px solid #666;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 300;
            line-height: 1.5;
            color: #666;
            margin: 10px 0 0 auto;
        }
        .bkn-print__button a:hover {
            text-decoration: none;
            background: #666;
            color: #FFF;
        }
            .bkn-print__button a::before {
                content: '';
                background: url(/images/room/icon_room-print.webp) no-repeat center / cover;
                display: block;
                width: 16px;
                height: 16px;
            }
            .bkn-print__button a:hover::before {
                background: url(/images/room/icon_room-print_on.webp) no-repeat center / cover;
            }
    .bknimage__modal {
        display: none;
        background: rgba(0,0,0, .5);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
    }
        .bknimage__modal-contents {
            background: #FFF;
            padding: 36px 24px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index: 4;
        }
            .bknimage__text {
                font-size: 14px;
                font-weight: 700;
                line-height: 1.5;
                color: #000;
                margin-bottom: 28px;
            }
            .bknimage__close {
                width: 20px;
                height: 20px;
                position: absolute;
                top: 36px;
                right: 20px;
                cursor: pointer;
            }
        .modal-bknimage__wrap {
            display: flex;
            gap: 0 27px;
        }
            .bknimage__thumb-item {
                width: 200px;
                height: 117px;
                background: #DFDFDF;
                cursor: pointer;
                position: relative;
            }
            .bknimage__thumb-item.swiper-slide-thumb-active::before {
                content: '';
                background: rgba(255, 255, 255, .5);
                width: 200px;
                height: 117px;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
                .bknimage__thumb-item img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            .bknimage__thumb-list {
                transform: unset !important;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 12px 0;
                max-height: 534px;
                height: fit-content;
                overflow-x: hidden;
                overflow-y: scroll;
            }
            .bknimage__thumb-list::-webkit-scrollbar {
                width: 10px;
                border: 1px solid #D9D9D9;
                border-radius: 10px;
            }
            .bknimage__thumb-list::-webkit-scrollbar-thumb {
                background: #D9D9D9;
                border-radius: 8px;
                border: 3px solid transparent;
                background-clip: padding-box;
            }
            
            .bknimage__thumb-list::-webkit-scrollbar-track { /* 上下に余白を付ける */
                padding: 0 2px;
            }
            .modal-bknimage__right {
                width: 833px;
                overflow: hidden;
            }
            @media (max-width: 1280px) {
                .modal-bknimage__right {
                    width: 736px;
                }
            }
                .modal-bknimage__item {
                    width: 100%;
                }
                    .modal__image {
                        width: 100%;
                        height: 489px;
                        background: #DFDFDF;
                        margin-bottom: 12px;
                    }
                    .modal-bknimage__item img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                .modal__bkn-comment {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 1.5;
                    color: #000;
                }

    /*------------------- 物件概要 -------------------*/

    .bkn-detail__section {
        margin-bottom: 60px;
    }
        .detail__flex {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0 20px;
        }
            .detail__box {
                border-bottom: 1px solid #CCC;
                padding: 12px 0;
                position: relative;
            }
            .detail__flex:first-of-type .detail__box {
                border-top: 1px solid #CCC;
            } 
                .detail__title {
                    font-size: 16px;
                    font-weight: 300;
                    line-height: 1.5;
                    color: #666;
                    margin-bottom: 8px;
                }
                .detail__text {
                    font-size: 14px;
                    font-weight: 300;
                    line-height: 1.5;
                    color: #000;
                }
                    .detail__text a {
                        font-size: 14px;
                        font-weight: 300;
                        line-height: 1.5;
                        color: #D34546;
                    }
                .detail__map {
                    position: absolute;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                }
                    .detail__map a {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 0 8px;
                        width: 104px;
                        height: 32px;
                        border: 1px solid #666;
                        border-radius: 4px;
                        background: #FFF;
                        font-size: 12px;
                        font-weight: 300;
                        line-height: 1.5;
                        color: #666;
                    }
                        .detail__map a::before {
                            content: '';
                            background: url(/images/room/icon_accessmap.webp) no-repeat center / cover;
                            display: block;
                            width: 18px;
                            height: 18px;
                        }
                    .detail__map a:hover {
                        background: #666;
                        color: #FFF;
                        text-decoration: none;
                    }
                        .detail__map a:hover::before {
                            background: url(/images/room/icon_accessmap_on.webp) no-repeat center / cover;
                        }
                        
        .detail__date {
            font-size: 12px;
            font-weight: 300;
            line-height: 1.5;
            color: #666;
            text-align: center;
            margin-top: 20px;
        }

    /*------------------- 1分で完了！この物件にお問い合わせ（無料） -------------------*/

    .contact__section {
        margin-bottom: 60px;
    }
        .contact__headline {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 54px;
            background: #7E7E7E;
            font-size: 20px;
            font-weight: 600;
            line-height: 1.5;
            color: #FFF;
            text-align: center;
        }
        .contact__wrap {
            background: #F4F9F7;
            padding: 20px 24px;
        }
            .contact__text {
                font-size: 12px;
                font-weight: 300;
                line-height: 1.5;
                color: #666;
                text-align: center;
                margin-bottom: 20px;
            }
            .contact__type-list {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 0 32px;
                margin-bottom: 20px;
            }
                .contact__type-list label {
                    display: flex;
                    align-items: center;
                    gap: 0 12px;
                }
                    .contact__type-list label input[type="radio"] {
                        appearance: none;
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        width: 20px;
                        height: 20px;
                        border: none;
                        outline: none;
                        background: url(/images/room/bg_contact-radio.webp) no-repeat center / cover;
                        cursor: pointer;
                    }
                    .contact__type-list label input[type="radio"]:checked {
                        background: url(/images/room/bg_contact-radio_on.webp) no-repeat center / cover;
                    }
                    .contact__type-text {
                        font-size: 18px;
                        font-weight: 300;
                        line-height: 1.5;
                        color: #000;
                    }
            .contact__type-submit {
                display: block;
                width: 466px;
                margin: 0 auto;
                padding: 14px 10px;
                font-size: 16px;
                font-weight: 600;
                line-height: 1.5;
                color: #FFF;
                border-radius: 4px;
                background: #00B1A8;
                border: 1px solid #00B1A8;
                cursor: pointer;
            }
            .contact__type-submit:hover {
                background: #FFF;
                color: #00B1A8;
            }

    /*------------------- 部屋の設備・特徴 -------------------*/

    .equipment__section {
        
    }
        .equipment__icon-list {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 20px;
        }
            .equipment__icon-item {
            }
                .equipment__icon {
                    width: 48px;
                    margin: 0 auto 04px;
                }
                .equipment__icon img {
                    width: 100%;
                }
                .equipment__name {
                    font-size: 12px;
                    font-weight: 300;
                    line-height: 1.5;
                    color: #666;
                    text-align: center;
                }

    /*------------------- 物件概要 -------------------*/

    .overview__section {
        margin-bottom: 60px;
    }
        .overview__head {
            display: flex;
            gap: 0 24px;
            margin-bottom: 20px;

            .section__headline {
                min-width: fit-content;
                margin-bottom: 0;
            }
        }
            .support__notes {
                margin-top: 14px;
            }
            .notes__title {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: 600;
                line-height: 1;
                letter-spacing: 0.8px;
                color: #D34546;
                text-decoration: underline;
                cursor: pointer;
            }
                .notes__title span {
                    font-size: 14px;
                    font-weight: 600;
                    line-height: 1;
                    letter-spacing: 0.7px;
                    color: #D34546;
                }
                .notes__title::before {
                    content: '';
                    background: url(/images/room/icon_support.webp) no-repeat center / cover;
                    display: block;
                    width: 22px;
                    height: 20px;
                    margin-right: 8px;
                }
                .notes__title::after {
                    content: '';
                    background: url(/images/room/icon_support-arrow.webp) no-repeat center / cover;
                    display: block;
                    width: 14px;
                    height: 8px;
                    margin-left: 6px;
                    transition: transform 0.3s ease;
                }
                .notes__title.is-expanded::after {
                    transform: rotate(180deg);
                }
            .notes__text {
                display: none;
                margin-top: 8px;
                font-size: 12px;
                font-weight: 300;
                line-height: 1.5;
                color: #666;
            }
        .flex-max {
            display: block;
        }

    /*------------------- 周辺施設 -------------------*/

    .spot__section {
        margin-bottom: 60px;
    }
        .spot__contents {
            padding: 24px;
            background: #F4F9F7;
        }
            .spot__list {
                display: flex;
                flex-wrap: wrap;
                gap: 18px 26px;
            }
                .spot__item {
                    width: 158px;
                }
                .spot__item a:hover {
                    text-decoration: none;
                }
                    .spot__image {
                        width: 100%;
                        height: 158px;
                        margin-bottom: 4px;
                    }
                        .spot__image img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    .spot__name {
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 1.5;
                        color: #000;
                        text-align: center;
                        margin-bottom: 4px;
                    }
                    .spot__time {
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 1.5;
                        color: #000;
                        text-align: center;
                    }

    /*------------------- アクセスマップ -------------------*/
    
    .accessmap__contents {
    }
        .accessmap__contents #map {
            height: 358px !important;
        }
        .accessmap__category {
            display: flex;
            gap: 0 17px;
            margin-top: 20px;
        }
            .category__title {
                width: 158px;
                height: 58px;
                background: url(/images/room/bg_category-title.webp) no-repeat center / cover;
                font-size: 14px;
                font-weight: 600;
                color: #FFF;
                box-sizing: border-box;
                padding: 8px 0 0 6px;
            }
                .category__title span {
                    font-size: 18px;
                    font-weight: 600;
                    color: #FFF;
                }
            .category__list {
                display: flex;
                gap: 0 20px;
            }
                [class*="category__item"] {
                    width: 46px;
                }
                .category__item--eat {
                    width: 60px;
                }
                .category__item--out,
                .category__item--beauty {
                    width: 77px;
                }
                .category__item label {
                    display: flex;
                    align-items: center;
                    gap: 0 9px;
                    font-size: 12px;
                    font-weight: 300;
                    color: #000;
                    margin-bottom: 8px;
                }
                    .category__item input {
                        width: 13px;
                        height: 13px;
                        margin: 0;
                        border: 1px solid #888;
                        background: #EEE;
                    }
                [class*="category__image--"] {
                    width: fit-content;
                    margin: 0 auto;
                }
        .accessmap__bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 14px;
        }
        .accessmap__contents {
            position: relative;
        }
            .accessmap__note {
                font-size: 10px;
                font-weight: 300;
            }
            .accessmap__button {
                display: flex;
                justify-content: center;
                align-items: center;
                width: fit-content;
                height: 32px;
                padding: 0 8px;
                border-radius: 4px;
                border: 1px solid #666;
                background: #FAFAFA;
                font-size: 12px;
                font-weight: 300;
                color: #666;
                cursor: pointer;
            }

            #spotForm .display-check {
                background: url(/images/room/img_mapCheck.jpg) no-repeat 0 0;
                margin: 5px 0 0;
                padding-left: 158px;
                display: flex;
                gap: 0 14px;
            }
            #spotForm .display-check label {
                display: flex;
                height: 60px;
                text-align: center;
                cursor: pointer;
                vertical-align: top;
            }
            #spotForm .display-check label input[type="checkbox"] {
                background: url(/images/room/icon_map-checked.webp) no-repeat center / cover;
                width: 13px;
                height: 13px;
                margin: 2px 3px 0 0;
                appearance: none;
            }
            #spotForm .display-check label input[type="checkbox"]:checked {
                background: url(/images/room/icon_map-checked_on.webp) no-repeat center / cover;
                width: 17px;
                height: 16px;
            }
            #spotForm .display-check label
            #spotForm .display-check label:not(:last-of-type) {
                margin-right: 14px;
            }
            #spotForm .display-check label[for=spot-01]{
                width: 50px;
                background: url("/images/room/icn_spot01.webp")no-repeat center bottom / 32px 30px;
            }
            #spotForm .display-check label[for=spot-02]{
                width: 62px;
                background: url("/images/room/icn_spot02.webp")no-repeat center bottom / 24px 30px;
            }
            #spotForm .display-check label[for=spot-03]{
                width: 76px;
                background: url("/images/room/icn_spot03.webp")no-repeat center bottom / 29px 30px;
            }
            #spotForm .display-check label[for=spot-04]{
                width: 55px;
                background: url("/images/room/icn_spot04.webp")no-repeat center bottom / 34px 30px;
            }
            #spotForm .display-check label[for=spot-05]{
                width: 56px;
                background: url("/images/room/icn_spot05.webp")no-repeat center bottom / 32px 30px;
            }
            #spotForm .display-check label[for=spot-06]{
                width: 90px;
                background: url("/images/room/icn_spot06.webp")no-repeat center bottom / 12px 30px;
            }
            #spotForm .display-check label[for=spot-07]{
                width: 56px;
                background: url("/images/room/icn_spot07.webp")no-repeat center bottom / 30px 30px;
            }
            #spotForm .display-check label[for=spot-08]{
                width: 56px;
                background: url("/images/room/icn_spot08.webp")no-repeat center bottom / 21px 30px;
            }
            .maptext {
                display: none;
            }
            #loading {
                position: absolute;
                top: 0 !important;
                width: 100%;
            }
            #loading img {
                width: 100%;
            }

    /*------------------- アドバイザーからのコメント -------------------*/

    .staff__section {
        margin-bottom: 118px;
    }
        .staff__commnet-wrap {
            display: flex;
            gap: 0 24px;
        }
            .staff__image {
                min-width: 173px;
                width: 173px;
                height: 194px;
                overflow: hidden;
                border-radius: 100px 100px 0 0;
            }
                .staff__image img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            .staff__name {
                font-size: 16px;
                font-weight: 600;
                line-height: 1.5;
                color: #000;
                padding-bottom: 11px;
                border-bottom: 1px solid #CCC;
                margin-bottom: 8px;
            }
            .staff__comment {
                margin-bottom: 8px;
            }
                .staff__comment-label {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 137px;
                    height: 30px;
                    background: #00B1A8;
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 1;
                    color: #FFF;
                    margin-bottom: 8px;
                }
                .staff__comment-text {
                    font-size: 14px;
                    font-weight: 300;
                    line-height: 1.5;
                    color: #000;
                }
            .staff__comment-support {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 57px;
                border: 2px solid #D34546;
                background: #FFF;
                margin-bottom: 8px;
            }
                .support__text-title {
                    font-size: 18px;
                    font-weight: 600;
                    letter-spacing: 0.9px;
                    line-height: 1;
                    color: #D34546;
                    border-bottom: 1px solid #D34546;
                    margin-bottom: 4px;
                }
                .support__text-subtitle {
                    font-size: 12px;
                    font-weight: 600;
                    letter-spacing: 0.6px;
                    color: #D34546;
                    text-align: center;
                }
                .staff__comment-support::before {
                    content: '';
                    background: url(/images/room/icon_comment.webp) no-repeat center / cover;
                    display: block;
                    width: 27px;
                    height: 25px;
                    margin-right: 17px;
                }
            .staff__notes-title {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 0 10px;
                font-size: 14px;
                font-weight: 300;
                line-height: 1.5;
                color: #666;
                cursor: pointer;
                user-select: none;
            }
                .staff__notes-title::after {
                    content: '';
                    background: url(/images/room/icon_staff-notes-arrow.webp) no-repeat center / cover;
                    display: block;
                    width: 10px;
                    height: 6px;
                    transition: transform 0.3s ease;
                }
                .staff__notes-title.is-expanded::after {
                    transform: rotate(180deg);
                }
            .staff__notes-text {
                display: none;
                font-size: 12px;
                font-weight: 300;
                line-height: 1.5;
                color: #666;
                margin-top: 8px;
            }

    /*------------------- 「部屋まる」だからこそ実現できる“新しい角度”のお部屋探し -------------------*/

    .aboutus__section {
        display: flex;
        margin-bottom: 60px;
    }
        .aboutus__head {
            min-width: 437px;
            height: 318px;
            position: relative;
            z-index: 1;
        }
        .aboutus__head::before {
            content: '';
            background: url(/images/room/bg_aboutus.webp) no-repeat center / cover;
            display: block;
            width: 439px;
            height: 318px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        .aboutus__title {
            margin-top: 22px;
        }
            .aboutus__title .aboutus-title-text {
                display: inline-block;
                font-size: 22px;
                font-weight: 600;
                line-height: 1;
                padding: 8px 9px 8px 4px;
                color: transparent;
                position: relative;
                overflow: hidden;
                letter-spacing: -0.11em;
            }
            .aboutus__title .aboutus-title-text::before {
                content: '';
                display: inline-block;
                width: 0;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: -1;
                background: #0281AF;
            }
            .aboutus__title .aboutus-title-text.move::before {
                animation: barAnime forwards 1.5s 1 ease 0.1s normal;
            }
            @keyframes barAnime{
                0% {
                    left: 0;
                    width: 0;
                }
                50% {
                    left: 0;
                    width: 100%;
                }
                51% {
                    left: 0;
                    width: 100%;
                }
                68% {
                    left: 0;
                    width: 100%;
                }
              100% {
                    left: 0;
                    width: 100%;
                }
            }
            .aboutus__title .aboutus-title-text:not(:last-of-type) {
                margin-bottom: 7px;
            }
            .aboutus-title-text.is-active {
                --opacity: 1;
            }
            .char {
                display: inline-block;
                opacity: var(--opacity, 0);
                transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1);
                transition-delay: calc(0.05s * var(--char-index));
                color: #FFF;
            }
        .aboutus__subtitle {
            font-size: 18px;
            font-weight: 600;
            line-height: 1.5;
            color: #0281AF;
            margin-bottom: 8px;
        }
        .aboutus__text {
            font-size: 14px;
            font-weight: 300;
            line-height: 1.5;
            color: #000;
            margin-bottom: 14px;
        }
        .aboutus__contact a {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0 8px;
            height: 52px;
            border-radius: 4px;
            background: #E3B852;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.5;
            color: #FFF;
        }
            .aboutus__contact a::before {
                content: '';
                background: url(/images/room/icon_aboutus-contact.webp) no-repeat center / cover;
                display: block;
                width: 22px;
                height: 18px;
            }
        .aboutus__contact a:hover {
            text-decoration: none;
            opacity: .8;
            transition: .4s;
        }

    /*------------------- SNS -------------------*/

    .sns__section {
        margin-bottom: 60px;
        padding: 24px;
        background: #ECF5F3;
    }
        .sns__head {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0 23px;
            border-top: 1px dashed #666;
            border-bottom: 1px dashed #666;
            padding: 12px 0;
            margin-bottom: 8px;
        }
            .sns__headline {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 0 23px;
                font-size: 18px;
                font-weight: 600;
                line-height: 1.5;
                color: #000;
            }
                .sns__headline::after {
                    content: '';
                    background: url(/images/room/icon_sns-arrow.webp) no-repeat center / cover;
                    display: block;
                    width: 11px;
                    height: 20px;
                }
            .sns__list {
                display: flex;
                align-items: center;
                gap: 0 12px;
            }
            .sns__item a:hover {
                opacity: .7;
                transition: .4s;
            }
        .sns__banner img {
            width: 100%;
        }


    /*---------------------- 同じ市区町村のおすすめ物件 ----------------------*/

    .osusumebkn__list {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 13px;
    }
        .head__label-list--osusumebkn {
            display: flex;
            align-items: center;
            gap: 0 8px;
        }
            .osusumebkn__card {
                width: 180px;
                padding-bottom: 30px;
                position: relative;
            }
        .osusumebkn__link:hover {
            opacity: .7;
            transition: .4s;
        }
        .osusumebkn__image {
            width: 100%;
            height: 133px;
            margin-bottom: 8px;
        }
            .osusumebkn__image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        .osusumebkn__name {
            font-size: 16px;
            font-weight: 600;
            line-height: 1.5;
            color: #000;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 4px;
        }
        .osusumebkn__traffic {
            font-size: 12px;
            font-weight: 300;
            color: #959595;
            line-height: 1.5;
            margin-bottom: 5px;
            padding-left: 20px;
            position: relative;
        }
            .osusumebkn__traffic::before {
                content: '';
                background: url(/images/room/icon_bkn-traficc.webp) no-repeat center / cover;
                display: block;
                width: 16px;
                height: 16px;
                position: absolute;
                top: 3px;
                left: 0;
            }
            .osusumebkn__traffic a {
                font-size: 12px;
                font-weight: 300;
                color: #959595;
            }
        .osusumebkn__address {
            display: flex;
            gap: 0 4px;
            font-size: 12px;
            font-weight: 300;
            line-height: 1.5;
            color: #888;
            padding-left: 20px;
            position: relative;
        }
            .osusumebkn__address::before {
                content: '';
                background: url(/images/room/icon_bkn-address.webp) no-repeat center / cover;
                display: block;
                width: 16px;
                height: 16px;
                position: absolute;
                top: 3px;
                left: 0;
            }
        .osusumebkn__price-wrap {
            display: flex;
            align-items: baseline;
            white-space: nowrap;
            margin-top: 11px;
            position: absolute;
            bottom: 0;
            left: 0;
        }
            .osusumebkn__price {
                font-size: 12px;
                font-weight: 300;
                color: #000;
                white-space: nowrap;
            }
                .osusumebkn__price .price {
                    font-size: 20px;
                    font-weight: 300;
                    line-height: 1;
                    color: #000;
                }
            .osusumebkn__kanri {
                font-size: 10px;
                font-weight: 300;
                line-height: 1;
                color: #959595;
            }
        .osusumebkn__more-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            font-size: 16px;
            font-weight: 300;
            color: #666;
            text-align: center;
            padding: 12px 0;
            margin-top: 20px;
            cursor: pointer;
        }
            .osusumebkn__more-btn::after {
                content: '';
                background: url(/images/room/icon_bkn-arrow.webp) no-repeat center / cover;
                display: block;
                width: 13px;
                height: 8px;
            }
            .osusumebkn__more-btn.is-show::after {
                transform: rotate(180deg);
            }

/*---------------------- 同じ最寄駅から探す ----------------------*/
/*---------------------- 近隣の区から探す ----------------------*/

.bknsearch__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 20px;
}
    .bknsearch__item {
        border-bottom: 1px solid #CCC;
    }
    .bknsearch__item:first-child,
    .bknsearch__item:nth-child(2) {
        border-top: 1px solid #CCC;
    }
        .bknsearch__item a {
            display: flex;
            align-items: center;
            gap: 0 12px;
            padding: 12px 0;
            font-size: 14px;
            font-weight: 300;
            color: #000;
        }
            .bknsearch__item a::after {
                content: '';
                background: url(/images/room/icon_bknsearch-arrow.webp) no-repeat center / cover;
                display: block;
                width: 7px;
                height: 10px;
            }

.side__section {
    width: 420px;
    margin-top: 108px;
}
.side__contents {
    position: sticky;
    top: 70px;
}
    .side__headline {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 40px;
        background: #7E7E7E;
        font-size: 16px;
        font-weight: 600;
        color: #FFF;
        line-height: 1.5;
    }
    .side__box {
        padding: 20px 32px;
        background: #F4F9F7;
    }
        .side-contact__list {
            margin-bottom: 18px;
        }
        .side-contact__list label {
            display: flex;
            align-items: center;
            gap: 0 12px;
            margin-left: 60px;
        }
        .side-contact__list label:not(:last-of-type) {
            margin-bottom: 12px;
        }
            .side-contact__list label span {
                font-size: 16px;
                font-weight: 300;
                line-height: 1.5;
                color: #000;
            }
            .side-contact__list label input[type="radio"] {
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                width: 20px;
                height: 20px;
                border: none;
                outline: none;
                background: url(/images/room/bg_side-contact-radio.webp) no-repeat center / cover;
                cursor: pointer;
            }
            .side-contact__list label input[type="radio"]:checked {
                background: url(/images/room/bg_contact-radio_on.webp) no-repeat center / cover;
            }
        .side-contact__submit {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 356px;
            height: 60px;
            border-radius: 4px;
            background: #00B1A8;
            border: 1px solid #00B1A8;
            font-size: 20px;
            font-weight: 600;
            line-height: 1.5;
            color: #FFF;
            cursor: pointer;
        }
            .side-contact__submit:hover {
                background: #FFF;
                color: #00B1A8;
            }
        .side__tel {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0 8px;
            font-size: 36px;
            font-weight: 600;
            line-height: 1;
            color: #00B1A8;
            margin-bottom: 12px;
            margin-top: 16px;
        }
            .side__tel::before {
                content: '';
                background: url(/images/room/icon_side-tel.webp) no-repeat center / cover;
                display: block;
                width: 36px;
                height: 36px;
            }
        .slide__line-button {
            margin-top: 16px;
        }
           .slide__line-button a {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 356px;
                height: 60px;
                background: #06C655;
                border: 1px solid #06C655;
                border-radius: 4px;
                color: #FFF;
                font-size: 20px;
                font-weight: 600;
                line-height: 1.5;
            }
            .slide__line-button a:hover {
                background: #FFF;
                color: #06C655;
                text-decoration: none;
            }
        .side__text {
            font-size: 14px;
            font-weight: 300;
            text-align: center;
            color: #000;
        }

/*------------------- お得なキャンペンーン実施中 -------------------*/

.campaign__list {
    display: flex;
    white-space: nowrap;
    gap: 0 24px;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-bottom: 13px;
}
    .campaign__item {
        flex-shrink: 0;
        width: 178px;
        height: 124px;
    }
    .campaign__item a:hover {
        opacity: .7;
        transition: .4s;
    }
        .campaign__item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .campaign__list::-webkit-scrollbar {
            height: 10px;
            border: 1px solid #D9D9D9;
            border-radius: 10px;
        }
        .campaign__list::-webkit-scrollbar-thumb {
            background: #D9D9D9;
            border-radius: 8px;
            border: 3px solid transparent;
            background-clip: padding-box; /* 背景を切り取る */
        }
        
        .campaign__list::-webkit-scrollbar-track { /* 上下に余白を付ける */
            padding: 0 2px;
        }