@charset "UTF-8";

.l-main {
    padding: 0 0 66px;
}

.l-detail__primary *{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: #383838;
    font-size: 16px;
    box-sizing: border-box;
}
[class*="ui-title--"] {
    margin: 0 0 0px;
}
/* ========================================
   bkn images
======================================== */
.l-detail {
    display: contents;
}
.gallery {
    width: 775px;
}
.gallery__primary {
    width: 570px;
    height: 380px;
}
.gallery__contents 
{
    grid-template-columns: 570px 195px; 
    gap: 10px;
}
.image_solid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; 
    }
.detail-header {
    margin: 20px 0 15px;
}
.gallery__thum-items {
    width: 95px;
    height: 63px;
    margin: 0;
    }
.gallery__thum-btn {
    height: 63px;
}
.ui-radius-img {
    border-radius: 0px;
}
.is-wide-screen .gallery__primary {
    height: 500px;
    width: 860px;
}
.is-wide-screen .gallery__thum-items {
    height: 60px;
    width: 45%;
}
 [class*="gallery__control--"] svg {
    display: none;
    }
.is-wide-screen [class*="gallery__control--"] svg {
    display: block;
    }
.is-wide-screen .gallery__note span {
    color: #fff;
}
.is-wide-screen .image_solid_wrap:not(:last-child) {
margin-bottom: 5px;
}
.is-wide-screen .gallery__note {
    color: #fff;
}
.detail-header__left--bkbname {
    font-size: 20px;
    color: #383838;
    font-weight: 700;
}
.bkn__imgbox 
{
    display: flex;
    gap: 40px;
}
.md-photo__cunter {
   background: #fff;
    top: 6px;
    right: 10px;
    padding: 1px 13px;
    color: #383838;
    font-size: 16px;
    color: #383838;
    font-weight: 500;
    width: fit-content;
    left: inherit;
}
.js-count-current {
    font-size: 16px;
    color: #383838;
    font-weight: 500;
}
.gallery__note {
    background: rgba(255, 255, 255, 0.85);
    color: #000;
    font-size: 16px;
    font-weight: 400;
    padding: 5px 0;
}
.detail-header__favorite {
    display: flex;
    height: 30px;
    padding: 0 18px;
    align-items: center;
    gap: 5px;
    border-radius: 9999px;
    border: 1px solid #D86E53;
    background: #FEFFED;
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
}
.detail-header__favorite:hover {
    color: #D86E53;
    opacity: 1;
    }
.favorit__icon {
    position: relative;
    display: block;
    width: 18px;
    height: 16px;
}
.favorit__icon::before {
    content: "";
    position: absolute;
    background: url(/images/room/pc/favorit__icon.svg) center /cover no-repeat;
    width: 20px;
    height: 18px;
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.ui-favorite-btn.is-checked .favorit__icon::before {
    background: url(/images/room/pc/favorit__icon__on.svg)center / cover no-repeat;
    }
.slick-dots .slick-active button {
    background-color: #70B646;
}
.slick-dots button {
    width: 10px;
    height: 10px;
    background-color: #D9D9D9;
    border-radius: 50%;
    font-size: 0;
    color: transparent;
}
.slick-dots {
    margin: 20px 0 0;
}
#thumb_next {
    bottom: -10px;
    right: 17px;
}
#thumb_prev {
    bottom: -11px;
    left: 15px;
}
.slick-arrow {
    width: 32px;
    height: 32px;
}
/* ========================================
   bkn images sidetext
======================================== */
.bkn__sideimg--textbox {

}
.bkn__sideimg--list {
    flex-direction: column;
    display: flex;
    gap: 21px;
    }
.bkn__sideimg--flex--bknname {
    display: flex;
    gap: 17px;
    align-items: start;
    }
.bkn__sideimg--ttl {
    background: #E7F6E0;
    display: flex;
    min-width: 78px;
    height: 26px;
    padding: 4px 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    color: #70B646;
    font-size: 14px;
    font-weight: 700;
    width: fit-content;
}
.bkn__sideimg--price {
    color: #383838;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 10px;
    }
.bkn__sideimg--price .price {
    color:#D86E53;
    font-family: "Roboto", sans-serif;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: 0.7;
}
.bkn__sidetxt--flex {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bkn__sideimg--text {
    display: flex;
    gap: 12px;
    color: #383838;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}
.bkn__sideimg--green--ttl {
    color: #70B646;
    font-size: 14px;
    font-weight: 500;
    min-width: 90px;
    }
.bkn__sideimg--flex {
    display: flex;
    gap: 17px;
}
.bkn__sideimg--infotext {
    color: #383838;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    }

/* ========================================
   【物件名が入ります】の他のお部屋
======================================== */
h2.ui-title--left {
    font-size: 18px;
    font-weight: 700;
    line-height: 100%;
    padding-left: 38px;
    border: none;
    margin-bottom: 24px;
}
.ui-title--left {
    position: relative;
}
.otherroom .ui-title--left::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background: url(/images/room/pc/bkn__icon01.webp)center / cover no-repeat;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.otherroom.detail__section {
    margin-top: 22px;
    margin: 19px 0 44px;
}
.otherroom__tablebox {
    max-height: 245px;
    padding-right: 40px;
}
.otherroom .simplebar-scrollbar:before {
    background: #70B646;
    border-radius: 7px;
    left: 0px;
    right: 2px;
    width: 2px;
    opacity: 1;
}
.otherroom .simplebar-track.simplebar-vertical {
    top: 0;
    width: 2px;
    width: 2px;
    background: #D3D3D3;
}
.otherroom__table {
    /* border-top: 1px solid #edeaea; */
    /* border-left: 1px solid #edeaea; */
    width: 1140px;
}
.otherroom__header,
.otherroom__row {
    display: grid;
    grid-template-columns: 155px 156px 156px 156px 156px 179px 179px;
}
.otherroom__th {
    background: #f6fbef;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: #383838;
    border-right: 1px solid #edeaea;
    border-bottom: 1px solid #edeaea;
}
.otherroom__th-small {
    font-size: 14px;
}
.otherroom__td {
    background: #fff;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    color: #242424;
    border-right: 1px solid #edeaea;
    border-bottom: 1px solid #edeaea;
}
.otherroom__th--contact,
.otherroom__td--contact {
    border-right: none;
}
.otherroom__td--detail {
    justify-self: start;
    padding-right: 14px;
}
.otherroom__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    position: relative;
    text-decoration: none;
    transition: opacity 0.3s ease;
}
.otherroom__btn--contact {
    width: 156px;
    background: #f1ab40;
    border-radius: 5px;
    margin-left: 4px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
}
.otherroom__btn--detail {
    width: 164px;
    background: #70b646;
    border-radius: 9999px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
}

.otherroom__btn--contact:hover {
    background: #fff;
    color: #f1ab40;
    border: 1px solid #f1ab40;
    opacity: 1;
}
.otherroom__btn--contact:hover::after {
    border-top: 1px solid #f1ab40;
    border-right: 1px solid #f1ab40;
}
.otherroom__btn--detail:hover {
    background: #fff;
    color: #70b646;
    border: 1px solid #70b646;
    opacity: 1;
}
.otherroom__btn--detail:hover::after {
    border-top: 1px solid #70b646;
    border-right: 1px solid #70b646;
}
.otherroom__btn::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 5px;
    height: 5px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}
.otherroom__body .otherroom__row:last-child .otherroom__td {
    border-bottom: none;
}
.otherroom__header .otherroom__td:last-child,
.otherroom__header .otherroom__th:last-child,
.otherroom__body .otherroom__row .otherroom__td:last-child
 {
    border-right: none;
} 
/* ========================================
  contact
======================================== */
.contact__section .ui-title--left::before {
    content: "";
    position: absolute;
    width: 29px;
    height: 27px;
    background: url(/images/room/pc/bkn__icon02.webp)center / cover no-repeat;
    left: 0;
    top: 2px;
    bottom: 0;
    margin: auto;
}
.contact__section__flex {
    border: 2px solid #F1AB40;
    background: #FEFFED;
    margin-top: 26px;
    padding: 37px 0;
    display: flex;
    justify-content: center;
    gap: 101px;
    }
.contact__section__flex__left {
    width: 306px;
    position: relative;
    }
.contact__section__flex__left::before {
    content: "";
    position:absolute;
    width: 1px;
    height: 100%;
    background: #F8DBB0;
    right: -50px;
    top: 0;
    bottom: 0;
    margin: auto;
    }
.contact__section__flex__left__ttl {
    font-size: 18px;
    font-weight: 700;
    line-height: 100%;
    text-align: center;
    margin: 6px 0;
    }
.contact__section__flex__left__text {
    font-family: "Roboto", sans-serif;
    font-size: 42px;
    font-weight: 500;
    position: relative;
    padding-left: 38px;
    line-height: 1.4;
    }
.contact__section__flex__left__text::before {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    background: url(/images/room/pc/tel-icon.webp)center / cover no-repeat;
    left: 0;
    top: 2px;
    bottom: 0;
    margin: auto;
}
.contact__section__flex__right {
    width: 560px;
    }
.contact__section__flex__left__text--info {
    text-align: center;
    font-size: 14px;
    line-height: 130%;
    }
.contact__btn--list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 10px;
    }
.contact__btn--btn {
    border-radius: 9999px;
    background: #F1AB40;
    width: 274px;
    height: 50px;
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    }
.contact__btn--btn::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 4px;
    background: url(/images/room/pc/bkn-btn-arrow.webp)center / cover no-repeat;
    right: 14px;
    top: 2px;
    bottom: 0;
    margin: auto;
    }
.contact__btn--btn:hover {
    background: #fff;
    color: #F1AB40;
    border: 1px solid #F1AB40;
    opacity: 1;
}
.contact__btn--btn:hover::before {
    background: url(/images/room/pc/bkn-btn-arrow_on.webp)center / cover no-repeat;
    }
/* ========================================
  基本情報
======================================== */
.l-detail__primary .room-summary__section .ui-title--left::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background: url(/images/room/pc/bkn__icon03.svg)center / cover no-repeat;
    left: -2px;
    top: 0px;
    bottom: 0;
    margin: auto;
}
.summary__section.detail__section {
    margin: 46px 0 44px;
}
.summary__side .ui-title--left {
    margin-bottom: 24px;
}
.summary__section .ui-title--left::before {
    content: "";
    position: absolute;
    width: 36px;
    height: 36px;
    background: url(/images/room/pc/bkn__icon05.webp)center / cover no-repeat;
    left: -4px;
    top: 0px;
    bottom: 0;
    margin: auto;
}
.room-summary--flex {
    display: flex;
    gap: 20px;
}
.room-summary--box {
    width: 610px;
}
.room-summary--img {
    width: 510px;
    height: 510px;
}
.room-summary--img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #eceff1;
}
.l-detail__primary .summary__list {
    display: flex;
    border-bottom: 1px solid #EDEAEA;
}
.l-detail__primary .summary__list li {
   font-size: 14px;
}
.l-detail__primary .summary__ttl {
    min-width: 118px;
    background: #f6fdee;
    padding: 8px;
    font-size: 14px;
    font-weight: 500;
    min-height: 41px;
    display: flex;
    align-items: center;
}
.summary__side dd {
    padding: 8px;
    margin: auto 0;
    font-size: 14px;
}
.md-facility__note {
    font-size: 13px;
    text-align: center;
    width: 76px;
    margin-top: 5px;
}
/* ========================================
  物件の特徴
======================================== */
.l-detail__primary .bkndetail__section {

margin: 39px 0;
}
.bkndetail__section .ui-title--left::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background: url(/images/room/pc/bkn__icon04.webp) center / cover no-repeat;
    left: 0;
    top: 2px;
    bottom: 0;
    margin: auto;
}
/* ========================================
  設備条件
======================================== */
.l-detail__primary .detail__option__section {
    margin: 65px 0 40px;
}
.summary__textbox {
    background: #f5f5f5;
    padding: 30px;
}
.summary__text {
    color: #242424;
    font-size: 14px;
}
.summary__textbox li {
    list-style: none;
    font-size: 14px;
}
.md-facility__icn {
    width: 78px;
    height: 70px;
    margin: 0 auto 2px;
    position: relative;
    background-color: var(--main-light-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.md-facility__icn svg {
    width: 45px;
    height: 45px;
    fill: var(--main-color);
    object-fit: contain;
}
.md-facility {
    display: flex;
    gap: 19px;
    flex-wrap: wrap;
}
/* ========================================
  その他
======================================== */
.others__section .ui-title--left::before{
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background: url(/images/room/pc/bkn__icon06.svg) center / cover no-repeat;
    left: -2px;
    top: 0px;
    bottom: 0;
    margin: auto;
}
.others__section .md-spec__summary {
    border-top: 1px solid #EDEAEA;
    }
.l-detail__primary .others__section {
    margin: 46px 0 23px;
}
/* ========================================
 map
======================================== */
.l-detail__primary .map__section {
    margin: 23px 0;
    }
.map.detail__section {
    margin: 0 0 ;
    }
.map__section .ui-title--left::before{
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background: url(/images/room/pc/bkn__icon07.webp) center / cover no-repeat;
    left: -2px;
    top: 0px;
    bottom: 0;
    margin: auto;
}
.l-detail__primary #room_detail_map {
    width: 100%;
    height: 350px;
}
#room_detail_map {
    width: 100%;
    height: 320px;
}
/* ========================================
 point
======================================== */
.bkndetail__section--point {
    background: #f6fdee;
    padding: 41px 30px 30px;
}
.bkndetail__section .feature_point::before{
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background: url(/images/room/pc/bkn__icon08.webp) center / cover no-repeat;
    left: -2px;
    top: 0px;
    bottom: 0;
    margin: auto;
}
.bkndetail__section--point {
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.bkndetail__section--point .point__list:first-child {
    padding-bottom: 21px;
    border-bottom: 1px solid #DAF0CC;
    }
h2.ui-title--left.feature_point, h2.ui-title--left.staff_comment {
    margin: 0 0 19px;
}
.sale-point {
    margin-block: 10px 0;
    font-size: 14px;
}
.staff_commentbox {
    display: flex;
    margin-top: 17px;
    gap: 20px;
    align-items: center;
}
.bkndetail__section .staff_comment::before{
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background: url(/images/room/pc/bkn__icon09.svg) center / cover no-repeat;
    left: -1px;
    top: 3px;
    bottom: 0;
    margin: auto;
}
.staff_commentbox .summary__staff {
    background: none;
    padding: 0;
    font-size: 14px;
    line-height: 2;
}
.l-detail__primary .md-comment__img {
    width: 90px;
    height: 90px;
    min-width: 90px;
}
/* ========================================
 flow
======================================== */
.l-detail__primary .flow__section {
    margin: 46px 0;
}
.flow__section .ui-title--left::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background: url(/images/room/pc/bkn__icon10.webp) center / cover no-repeat;
    left: -1px;
    top: 0px;
    bottom: 0;
    margin: auto;
}
.flow__list {
    display: flex;
    gap: 18px;
    position: relative;
    }
.flow__list::before {
    content: "";
    position: absolute;
    width: 905px;
    height: 23px;
    background: url(/images/room/pc/flow__line.svg) center / cover no-repeat;
    left: 59px;
    top: 0px;
    bottom: 0;
    margin: auto;
    }
.flow__item {
    position: relative;
}
.flow__text {
    display: flex;
    width: 120px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #70B646;
    color: #FFF;
    font-weight: 600;
    line-height: 1.2;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
/* ========================================
 Surrounding environment
======================================== */
.l-detail__primary .spotbkn__section {
    margin: 46px 0;
}
.spotbkn__section .ui-title--left::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background: url(/images/room/pc/bkn__icon11.webp) center / cover no-repeat;
    left: -1px;
    top: 0px;
    bottom: 0;
    margin: auto;
}
.spotbkn__section .spot__img {
    width: 60px;
    height: 61px;
    border-radius: 6px;
    flex-shrink: 0;
}
.spotbkn__section .spot__upper {
    color: #878787;
    font-size: 14px;
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    }
.spotbkn__section .spot__bold {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.spotbkn__section .spot__lower {
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    }
.spotbkn__section .spot__items {
    width: 210px;
}
.spotbkn__section .spot {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}
/* ========================================
 neighboring properties
======================================== */
.neighboring__section {

}
.neighboring__section .ui-title--left::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background: url(/images/room/pc/bkn__icon12.svg) center / cover no-repeat;
    left: -1px;
    top: 0px;
    bottom: 0;
    margin: auto;
}
.neighboring__section .detail-bkn__items {
    width: 182px;
}
.neighboring__section .detail-bkn {
    display: contents;
    display: flex;
}
.neighboring__section .detail-bkn__text{
    font-size: 14px;
}
.neighboring__section .detail-bkn__price .price {
    font-size: 20px;
    font-weight: 600;
    color: #D86E53;
    line-height: 1;
}
.neighboring__section .detail-bkn__img {
    position: relative;
    overflow: hidden;
    border-radius: 0;
}
.detail-bkn__img img {
    transition: transform 0.4s ease-in-out;
}
.detail-bkn__link:hover .detail-bkn__img img {
    transform: scale(1.08);
}
.detail-bkn__link:hover {
    opacity: 1;
}
.neighboring__section .detail-bkn__price  {
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color:  #383838;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    margin-top: 12px;
}
.neighboring__btn {
    position: absolute;
    top: 5px;
    right: 5px;
    }
.neighboring__favorite {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.90);
    padding: 1px;
    border: none;
    }
.neighboring__favorite .favorit__icon::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 13px;
    height: 11px;
    margin: auto;
}
.neighboring__favorite .favorit__icon {
    width: 13px;
    height: 11px;
    margin: 0 auto;
}