@charset "utf-8";

/*Noto Sans JP 400*/
@font-face {
	font-family: 'Noto Sans JP';
	src: url(/fonts/NotoSansJP-Regular.ttf);
	font-weight: 400;
}
  
/*Noto Sans JP 500*/
@font-face {
	font-family: 'Noto Sans JP';
	src: url(/fonts/NotoSansJP-Medium.ttf);
	font-weight: 500;
}
 
/*Noto Sans JP 600*/
@font-face {
	font-family: 'Noto Sans JP';
	src: url(/fonts/NotoSansJP-SemiBold.ttf);
	font-weight: 600;
}

/*Noto Sans JP 700*/
 @font-face {
	font-family: 'Noto Sans JP';
	src: url(/fonts/NotoSansJP-Bold.ttf);
	font-weight: 700;
}

.l-contents {
	background: #fff;
}
.l-main{
	padding: 0 0 20px;
}
.l-main *{
	color: #333;
	font-family: 'Noto Sans JP';
	font-size: 16px;
}

.breadcrumbs {
	padding: 7px 0 21px;
}

.detail__section{
	margin-block: 0 60px;
}
[class*="ui-title--"]{
	font-size: 25px;
	font-weight: 700;
	color: #F27E99;
	border-bottom: 4px solid #F272A3;
	border-image: linear-gradient(to right, #F272A3 0%, #F5D055 100%) 1;
	padding-bottom: 4px;
	margin: 0 0 10px;
}
h2.ui-title--left{
	border-bottom: 4px solid #F272A3;
	border-image: linear-gradient(to right, #F272A3 0%, #F5D055 100%) 1;
	padding-bottom: 4px;
}
.ui-overlay{
	z-index: 12;
}

/*---------------------------------------------------------
	物件タイトル
---------------------------------------------------------*/
.l-detail{
	display: block;
}
.detail-header{
	display: block;
	margin: 0 0 15px;
}
.detail-header__name{
	font-size: 34px;
	font-weight: 700;
	margin: 0;
}
.detail-header__cost{
	display: flex;
	gap: 12px;
	align-items: flex-end;
	margin: 0;
}
.detail-header__price{
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}
.detail-header__price > span.price{
	font-size: 34px;
	font-weight: 700;
	color: #F58DB4;
}
.detail-header__cost-kanri{
	font-weight: 500;
}
.detail-header__cost-kanri span{
	display: inline-block;
	font-weight: 500;
	line-height: 1.875;
	padding: 0 10px;
	background: #F7F7F7;
	margin-right: 10px;
}

/*---------------------------------------------------------
	物件画像
---------------------------------------------------------*/
.bkn_image_contents {
	position: relative;
	display: flex;
	height: 487px;
	margin-bottom: 10px;
}
.bkn_image_contents.is-wide-screen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	z-index: 101 !important;
}
.bkn_slide {
	width: 730px;
    margin-right: 40px;
    overflow: hidden;
	cursor: pointer;
}
#js-gallery-img {
    background-image: none !important;
    display: flex;
    align-items: center;
    background-color: #eceff1;
}
.gallery__comment {
    padding: 10px 8px 8px;
    border: 1px solid #DDDDDD;
	margin-bottom: 6px;
}
.gallery__comment__note {
	font-size: 14px;
    margin-bottom: 18px;
}
.gallery__comment__ttl {
	background-color: #E27EA4;
	color: #fff;
	padding: 5px 15px 7px;
	font-size: 16px;
	font-weight: bold;
	margin-right: 10px;
	border-radius: 3px;
	display: inline-block;
}
.gallery__comment__text {
	font-size: 16px;
}
.swiper-button-prev,
.swiper-button-next {
	background: url(/images/bkn/arrow_slider.png) no-repeat;
	display: block;
	width: 50px;
	height: 50px;
	position: absolute;
}
.swiper-button-prev {
	top: 51%;
	left: -25px;
}
.swiper-button-next {
    right: 386px;
    top: 51%;
    transform: rotate(180deg);
}
.swiper-button-prev::after,
.swiper-button-next::after {
	content: '';
}
.swiper-pagination {
	top: 10px;
    left: 10px;
    background-color: #E27EA4;
    padding: 5px 20px 7px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border-radius: 50px;
    z-index: 1;
    bottom: unset;
    width: unset;
}
.swiper-pagination span {
	color: #fff;
    font-size: 16px;
    font-weight: 500;
}
.slide_item img {
	width: 100%;
	vertical-align: bottom;
}
.bkn_thumbnail {
	width: 370px;
}
.thumbnail_wrap {
	width: 344px;
	height: fit-content;
    flex-wrap: wrap;
	gap: 16px;
	margin: inherit !important;
}
.thumbnail_item {
	width: 164px !important;
	height: 110px;
	cursor: pointer;
	display: flex;
    align-items: center;
    background-size: cover;
	background-color: #eceff1;
}

.scrollbar-content.vertical{
	max-height: 400px;
}

/* スクロールバーの色 */
.simplebar-track.simplebar-vertical{
    background: #E5E5E5;
    width: 6px;
    border-radius: 4px;
}
/* トラックの色 */
.simplebar-scrollbar.simplebar-visible:before {
    width: 6px;
    background-color: #EFC4D4;
    border-radius: 4px;
    opacity: 1;
    top: 0 !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
}


/*---------------------------------------------------------
	スペック
---------------------------------------------------------*/
.md-spec{
	display: grid;
    gap: 0;
    grid-template-columns: 1fr 1fr;
}
.md-spec__side{
	display: grid;
    gap: 10px;
    grid-auto-rows: min-content;
}
.md-spec__list{
	display: flex;
    align-items: center;
    gap: 14px;
	padding-right: 14px;
}
.md-spec__ttl{
	min-width: 130px;
    min-height: 40px;
    height: 100%;
    background-color: #F7F7F7;
	border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
	font-weight: 600;
}
.md-spec__salespoint{
	grid-column: span 2;
	margin-top: 10px;
    background-color: #F7F7F7;
	line-height: 1.625;
	padding: 13px 20px 20px;
}
.md-spec__text a {
	font-weight: 400;
}

/*---------------------------------------------------------
	募集中の物件
---------------------------------------------------------*/
.detail-bkn{
	display: grid;
    gap: 30px 20px;
    grid-template-columns: repeat(5,1fr);
}
.detail-bkn__items{
	position: relative;
}
.detail-bkn__img{
	height: 146px;
	margin: 0 0 8px;
}
.detail-bkn__img img {
	object-fit: contain;
	background-color: #eceff1;
}
.ui-radius-img{
	border-radius: 10px;
}
.detail-bkn__text{
	font-size: 14px;
}
.detail-bkn__price{
	line-height: 1.2;
	font-weight: 700;
}
.detail-bkn__price .price{
	font-size: 25px;
	font-weight: 700;
	color: #E27EA4;
}
.ui-favorite-btn{
	width: 31px;
	height: 27px;
	background-image: url(/images/bkn/icn_favorite_off.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 14px;
	right: 14px;
}
.ui-favorite-btn.is-checked{
	background-image: url(/images/bkn/icn_favorite_on.png);
}

/*---------------------------------------------------------
	基本情報・詳細情報
---------------------------------------------------------*/
.summary{
	display: block;
}
.summary__table{
	border-collapse:  collapse;
	border-top: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
}
.summary__table th{
	width: 12%;
	background: #F7F7F7;
	vertical-align: top;
	text-align: left;
	padding: 8px 15px 10px;
	border-bottom: 1px solid #DDDDDD;
	font-weight: 600;
}
.summary__table td{
	width: 38%;
	border-bottom: 1px solid #DDDDDD;
	padding: 8px 15px 10px;
}
.summary__howto{
	padding-right: 4px;
	margin: 4px 0 0;
}
.summary__howto button{
	font-size: 13px;
	font-weight: 500;
	color: #E27EA4;
	gap: 2px;
	line-height: 1.5;
	display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0 0 auto;
}
.summary__howto svg{
	width: 16px;
	height: 16px;
	fill: #E27EA4;
}
.detail__data-list{
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
}

/*---------------------------------------------------------
	成約済み部屋一覧
---------------------------------------------------------*/
.contract__head{
	display: flex;
	justify-content: space-between;
}
.contract__head h2{
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}
.contract__count{
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}
.contract__count span{
	font-size: 30px;
	font-weight: 700;
	color: #E27EA4;
	letter-spacing: 0.1em;
}
.contract__detail{
	border-top: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
}
.contract__detail > ul{
	display: flex;
}
.contract__detail > ul:not(:last-child){
	border-bottom: 1px solid #DDDDDD;
}
.contract__detail > ul > li{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.contract__detail > ul > li:not(:last-child){
	border-right: 1px solid #DDDDDD;
}
.contract__detail-floornum,
.contract__detail-madori,
.contract__detail-square{
	width: 135px;
}
.contract__detail-data{
	width: 587px;
}
.contract__detail-btn{
	width: 148px;
}
.contract__detail-head{
	background: #F7F7F7;
}
.contract__detail-head li{
	min-height: 39px;
	font-weight: 700;
}
.contract__detail-list li{
	min-height: 57px;
	font-weight: 500;
}
.contract__detail-list .contract__detail-data span{
	font-size: 14px;
	font-weight: 400;
}
.contract__detail-btn a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	height: 38px;
	background: #E27EA4;
	border-radius: 3px;
	color: #fff;
}

/*---------------------------------------------------------
	マップ
---------------------------------------------------------*/
.map.detail__section{
	margin-block: 0 60px;
}
.map iframe{
	width: 100%;
	height: 408px;
}
.map [class*="ui-title--"]{
	margin-bottom: 0;
}
.map__note{
	font-size: 14px;
	margin-top: 3px;
}

/*---------------------------------------------------------
	周辺施設
---------------------------------------------------------*/
.spot {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap    : 20px;
}
.spot__items {
	display: flex;
	gap    : 8px;
}
.spot__img {
	min-width: 65px;
	width: 65px;
	height: 65px;
}
.spot__upper {
	font-size  : 12px;
	font-weight: 700;
	color      : #78909C;
}
.spot__bold {
	font-weight: bold;
}
.spot__lower {
}

/*---------------------------------------------------------
	お問い合わせ
---------------------------------------------------------*/
.contact [class*="ui-title--"]{
	margin-bottom: 0;
}
.contact__inner{
	padding: 30px;
	background: #F7F7F7;
}
.contact__top{
	border-radius: 10px;
	border: 2px solid #F2B749;
	background: #FFFCF6;
	display: flex;
	align-items: center;
	padding: 15px 18px 15px 28px;
}
.contact__title{
	font-size: 20px;
	font-weight: 700;
}
.contact__top .contact__title{
	color: #F2B749;
	margin-right: 20px;
}
.check__list{
	width: 424px;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 6px 10px;
	margin-right: 26px;
}
.check__list label{
	display: flex;
	align-items: center;
	gap: 5px;
	border-radius: 2px;
	border: 1px solid #BCBCBC;
	background: #fff;
	padding: 8px;
	line-height: 1.2;
}
.check__list input[type="radio"]{
	appearance: none;
	min-width: 19px;
	height: 19px;
	background: #fff;
	border-radius: 2px;
	border: 1px solid #BCBCBC;
	margin: 0;
	position: relative;
}
.check__list input[type="radio"]:checked{
	background: #1976D2;
	border: none;
}
.check__list input[type="radio"]:checked::after{
	content: '';
    display: block;
    position: absolute;
    top: 5px;
    left: 4px;
    width: 12px;
    height: 7px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
}
.contact__btn a{
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 55px 0 45px;
	border-radius: 100vh;
	width: 400px;
	height: 72px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}
.contact__btn a::after{
	content: '';
    background: url(/images/top/icon_business-arrow.png) no-repeat center;
    background-size: contain;
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 18px;
    right: 20px;
}
.contact__btn.icn__mail a{
	background: #F2B749;
}
.contact__btn.icn__mail a::before{
	content: url(/images/bkn/icn_mail.png);
	margin-right: 7px;
}
.contact__bottom{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 19px 20px 0px 20px;
}
.contact__bottom-left{
	display: flex;
	align-items: center;
}
.contact__bottom-left .contact__title{
	margin-right: 20px;
}
.contact__bottom-left .tel__box{
	border-left: 2px solid #DDDDDD;
	padding-left: 20px;
}
.tel__box-tel{
	display: flex;
	align-items: center;
	font-size: 32px;
	font-weight: 700;
	color: #F27E99;
	line-height: 1.4;
	margin-bottom: 5px;
}
.tel__box-tel::before{
	content: url(/images/bkn/icn_tel.png);
	margin-right: 6px;
}
.tel__box-text{
	font-size: 14px;
}

.contact__btn.icn__calendar a{
	background-image: linear-gradient(90deg, rgba(255, 146, 187, 1), rgba(235, 64, 129, 1));
	padding-left: 50px;
}
.contact__btn.icn__calendar a::before{
	content: url(/images/bkn/icn_calendar.png);
	margin-right: 10px;
}
.contact__btn.icn__calendar a span{
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	height: 29px;
	background: rgba(255, 255, 255, 0.2);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: #fff;
	margin-right: 5px;
}

/*---------------------------------------------------------
	〇〇から探す
---------------------------------------------------------*/
.search__inner{
	padding: 20px;
}
.search__inner:nth-child(odd){
	background: #FFFCF6;
}
.search__inner:nth-child(even){
	background: #FFF8F9;
}
.search__inner:not(:last-child){
	margin-bottom: 10px;
}
.search__title{
	font-weight: 700;
	margin-bottom: 10px;
}
.search__list{
	display: flex;
	flex-wrap: wrap;
	gap: 5px 16px;
}