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

/*-------------------------------------
	Main Visual
-------------------------------------*/

#main_visual{
	background-image: url(../images/bnbmatching/main.jpg);
}

/*-------------------------------------
	page_link
-------------------------------------*/

.page_link{
	background-color: #BFBFBF;
	padding-top: 20px;
	padding-bottom: 20px;
}

.page_link ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
}

.page_link ul li{
	flex-basis: 16.666666%;
	text-align: center;
	height: 80px;
	border-left: 1px solid #CFCFCF;
	border-right: 1px solid #CFCFCF;
	margin-left: -1px;
}

.page_link ul li a{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
}

.page_link ul li a:after{
	content: '';
	display: block;
	background: url(../images/bnbmatching/pagelink_arrow.png) no-repeat left top;
	width: 19px;
	height: 10px;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -9px;
	transition: all 0.2s;
}

@media screen and (min-width: 769px) {
	.page_link ul li a:hover:after{
		bottom: -5px;
	}
}

/*-------------------------------------
	bnb共通
-------------------------------------*/
.box{
	padding-top: 80px; /* 打ち消し用のパディング */
	margin-top: -80px; /* 固定ナビの高さ分のネガティブマージン */
}

.t_logo{
	vertical-align: middle;
	margin-left: 0.3em;
	margin-right: 0.3em;
}

/*@media screen and (max-width: 768px) {
	.t_logo{
		display: block;
	}
}
*/
.t_logo img{
	display: inline-block;
	vertical-align: middle;
}

/*-------------------------------------
	slider 共通
-------------------------------------*/

.slider-container {
  display: none;
  position: relative;
}
.slider-container.initialized {
  display:block;
}
.slider {
  overflow: hidden;
}
.slider-arrow {
  position: absolute;
  top: 50%;
  cursor: pointer;
  z-index: 10;  /* 重要 */
}
.slider-prev {
  left: 0;
}
.slider-next {
  right: 0;
}
.slick-slide {
  outline: 0;
}


/*-------------------------------------
	Propaties
-------------------------------------*/

.propaties .slider {
	overflow: hidden;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.propaties .slick-list {
  margin-right: -30px;  /* ガター分ネガティブマージン */
}
.propaties .slider-arrow {
  height: 38px;
  margin-top: -160px;
	padding: 5px 2px;
	background-color: #fff;
}

.propaties .slider-arrow > img{
	width: 80%;
}

.propaties .slick-slide {
	margin-right: 30px;  /* ガター */
	background: url(../images/bnbmatching/arrow_detail.png) no-repeat right bottom #FFF;
}

.propaties .slick-slide figure{
	width: 100%;
	position: relative;
}

.propaties .slick-slide figure:before{
	content: '';
	display: block;
	padding-top: 73.988439%;
}

.propaties .slick-slide figure img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;	
	object-fit: cover;
	font-family: 'object-fit: cover;' 
}

.propaties .slick-slide .text{
	padding: 10px 20px 40px;
}

.propaties .slick-slide header{
	border-bottom: 1px solid #EEE;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items: flex-start;
	padding-bottom: 10px;
}

.propaties .slick-slide header .category{
	background-color: #09101C;
	color: #FFF;
	display: inline-block;
	line-height: 30px;
	padding-left: 10px;
	padding-right: 10px;
	margin-right: 20px;
	word-break: keep-all;
}

.propaties .slick-slide header h5{
	display: inline-block;
	vertical-align: top;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2;
}

.propaties .slick-slide header h5 .code{
	display: block;
}

.propaties .slick-slide .data{
	border-bottom: 1px solid #EEE;
	padding-top: 10px;
	padding-bottom: 10px;
}

.propaties .slick-slide .data dt{
	float: left;
	clear: both;
	font-weight: bold;
	font-size: 15px;
	margin-right: 0.5em;
}

.propaties .slick-slide .data dt:after{
	content: '：';
}

.propaties .slick-slide .data dd.price{
	font-size: 22px;
	margin-top: -7px;
}

.propaties .slick-slide .comment{
	padding-top: 10px;
}

/*-------------------------------------
	Start
-------------------------------------*/

.start{
	overflow: hidden;
}

.start li{
	width: calc(33.333333% - 33.333333px);
	margin-left: 50px;
	float: left;
	text-align: center;
}

.start li:nth-child(3n+1){
	clear: both;
	margin-left: 0;
}

.start li img{
	max-height: 130px;
}

.start li a img{
	opacity: 1;
}

.start li .button{
	position: relative;
	background-color: #061019;
	color: #FFF;
	height: 50px;
	display: flex;
  	align-items: center;
	justify-content: center;
	margin-top: 20px;
}

.start li .button:after{
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	width: 13px;
	height: 18px;
	margin-top: -9px;
	transition: all 0.2s;
	background: url(../images/bnbmatching/start_allow.png) no-repeat left top;
}

@media screen and (min-width: 769px) {
	.start li a:hover .button:after{
		right: 5px;
	}
}

/*-------------------------------------
	Recommended
-------------------------------------*/

#reco .gray{
	padding-top: 80px;
	padding-bottom: 110px;
}

#reco #start_bnb{
	margin-top: 130px;
}

#reco #start_bnb .start{
	margin-top: 80px;
}

#reco .coming{
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 100px;
}

#reco .gray .coming{
	margin-top: 20px;
	margin-bottom: 0;
}

/*-------------------------------------
	List
-------------------------------------*/

#list .gray{
	padding-top: 70px;
	padding-bottom: 160px;
}

#list section{
	margin-bottom: 150px;
}

#list section:last-of-type{
	margin-bottom: 0;
}

#list section h4{
	height: 40px;
	line-height: 40px;
	border-left: 5px solid #09101C;
	border-bottom: 1px solid #09101C;
	margin-bottom: 50px;
	padding-left: 10px;
}

#list .coming{
	text-align: center;
}

/*-------------------------------------
	Biginner
-------------------------------------*/

#biginner .start{
	margin-top: 100px;
}

/*-------------------------------------
	Detail
-------------------------------------*/

.detail{
	padding-top: 70px;
	padding-bottom: 50px;
}

.detail p,.detail .intro p.f_serif.txt_c{
	color: #FFF;
}

.detail .btn_push{
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.detail .btn_push::after{
	border-color: #FFF;
}

.detail .btn_push a{
	background-color: #FFF;
	color: #08101B;
}

/*-------------------------------------
	Database
-------------------------------------*/

#database{
	background-image: url(../images/bnbmatching/database_bg.jpg)
}

/*-------------------------------------
	Purchase
-------------------------------------*/

#purchase{
	margin-top: 100px;
}

/*-------------------------------------
	type
-------------------------------------*/

.type > div{
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 50px 50px;
	align-items: center;
}

@media screen and (max-width: 768px) {
	.type > div.support{
		padding-left: 20px!important;
		padding-right: 20px!important;
	}
}

.type > div figure{
	flex-basis: 180px;
	max-width: 180px;
	flex-grow: 1;
	text-align: center;
	margin-right: 50px;
}

.type > div figcaption{
	margin-top: 20px;
}

.type > div figure img{
	max-height: 170px;
}

.type > div ul,.type > div p{
	flex-grow: 2;
	width: 100%;
}

.type > div .assessment figure{
	margin-right: 0;
}

.type .assessment li{
	padding-right: 0;
}

/*-------------------------------------
	Reason
-------------------------------------*/

#reason ul{
	overflow: hidden;
}

#reason ul li{
	width: calc(33.333333% - 33.333333px);
	min-height: 366px;
	margin-left: 50px;
	float: left;
	text-align: center;
	background-position: center center;
	background-size: cover;
	position: relative;
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 20px;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

/*#reason ul li:before{
	content: '';
	padding-top: 100%;
}*/

#reason ul li:nth-child(3n+1){
	clear: both;
	margin-left: 0;
}

#reason ul li:nth-child(1){
	background-image: url(../images/bnbmatching/reason01.jpg);
}

#reason ul li:nth-child(2){
	background-image: url(../images/bnbmatching/reason02.jpg);
}

#reason ul li:nth-child(3){
	background-image: url(../images/bnbmatching/reason03.jpg);
}

#reason ul li p{
	color: #FFF;
}

#reason ul li p.number{
	font-size: 80px;
	border-bottom: 1px solid #FFF;
	line-height: 1.2;
}

#reason ul li p.comment{
	margin-top: 50px;
	font-weight: bold;
}

/*-------------------------------------
	Sublease
-------------------------------------*/

#sublease{
	margin-top: 100px;
	background-image: url(../images/bnbmatching/sublease_bg.jpg);
}

/*-------------------------------------
	Case
-------------------------------------*/

#case .slider-container{
	padding-top: 50px;
	padding-bottom: 50px;
}

#case .slider-container .slider{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

#case .slider-container .slider .slick-slide{
	overflow: hidden;
	width: 100%;
}

#case .slider-container .slider .slick-slide figure{
	width: 55%;
	min-height: 300px;
	float: left;
}

#case .slider-container .slider .slick-slide figure img{
	width: 100%;
	height: 100%;	
	object-fit: cover;
	font-family: 'object-fit: cover;' 
}

#case .slider-container .slider .slick-slide .text{
	width: 45%;
	float: left;
	padding: 50px 0px 50px 50px;
}

#case .slider-container .slider .slick-slide .text h4{
	font-weight: bold;
	color: #061019;
	font-size: 22px;
	margin-bottom: 20px;
}

#case .slider-container .slider .slick-slide .text dl dt{
	float: left;
	font-weight: bold;
	clear: both;
	margin-right: 0.5em;
}
#case .slider-container .slider .slick-slide .text dl dt:after{
	content: '：';
}

#case .start{
	margin-top: 100px;
}

#case .coming{
	text-align: center;
	font-size: 18px;
	line-height: 1.0;
	font-weight: bold;
	padding-top: 130px;
	padding-bottom: 100px;
}

#case .gray .coming{
	padding-top: 100px;
}

/*-------------------------------------
	Support
-------------------------------------*/

#support .gray ul{	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: stretch;
}
	
#support .gray{
	padding-top: 50px;
	padding-bottom: 40px;
}
	
#support .gray ul li{
		flex: 1 1 20%;
		padding-left: 20px;
		padding-right: 20px;
		margin-bottom: 50px;
	}

#support .gray ul li figure{
	border: 1px solid #09101C;
	text-align: center;
	height: 100%;
	max-width: 160px;
	margin-left: auto;
	margin-right: auto;	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 20px;
	align-items: center;
	flex-direction: column;
	justify-content:center;
}

#support .gray ul li figure figcaption{
	margin-top: 10px;
	line-height: 1.2;
}

/*-------------------------------------
	table 共通
-------------------------------------*/

dl.table{	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	border: 1px solid #EEE;
}

dl.table > dt{
	color: #061019;
	font-size: 15px;
	font-weight: bold;
	background-color: #EEE;
	border-bottom: 1px solid #FFF;
}

dl.table dl.data{
	overflow: hidden;
}

dl.table dl.data dt{
	float: left;
	clear: both;
	font-weight: bold;
	font-size: 15px;
	margin-right: 0.5em;
}

dl.table dl.data dt:after{
	content: '：';
}

dl.table dl.data dd{
	float: left;
}

dl.table > dt,dl.table > dd{
	padding: 20px;
}

@media screen and (min-width: 769px) {
	dl.table > dd{	
		border-bottom: 1px solid #EEE;
	}
}

.table_small{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	border: 1px solid #EEE;
	border-bottom: 0;
}

.table_small > dl{
	flex-basis: 33.333333%;
	border: 0;
	flex-flow: column;
	align-items: stretch;
	justify-content: flex-start;
	/*display: block;*/
}

.table_small > dl > dt{
	border-bottom: 0;
	margin-bottom: auto;
	flex-grow: 0;
	border-left: 1px solid #FFF;
}

.table_small > dl > dd{
	border-bottom: 0;
	flex-grow: 2;
	border-left: 1px solid #EEE;
}

.table_small > dl:nth-child(3n+1) dt,.table_small > dl:nth-child(3n+1) dd{
	border-left: 0;
}

dl.table.large > dt,dl.table.large > dd{
	flex-basis: 100%;
}

dl.table.large > dd:last-of-type{
	border-bottom: 0;
}


/*-------------------------------------
	Basic Information
-------------------------------------*/

#basic_info .intro .category{
	background-color: #09101C;
	color: #FFF;
	font-size: 18px;
	padding-left: 10px;
	padding-right: 20px;
	max-width: 140px;
}

#basic_info dl.table{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
}

#basic_info dd.price{
	font-size: 22px;
	margin-top: -7px;
}

@media screen and (min-width: 769px) {

	#basic_info dl.table dt,#basic_info dl.table dd{
		flex-basis: 25%;
	}
	#basic_info dl.table dt:nth-last-of-type(-n+2),#basic_info dl.table dd:nth-last-of-type(-n+2){
		border-bottom: 0;
	}
}

/*-------------------------------------
	image
-------------------------------------*/

#image .slider-image-container, #image .slider-image-nav-container {
	display: none;
	position: relative;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#image .slider-image-container.initialized, #image .slider-image-nav-container.initialized {
  display: block;
}
#image .slider-image-nav-container {
  margin-top: 18px;
}
#image .slider-image {
  overflow: hidden;
}
#image .slider-image-nav {
	width: calc(100% - 53px);
	margin-left: auto;
	margin-right: auto;
}

#image .slider-image-nav .slick-list {
  margin-right: -20px;  /* ガター分ネガティブマージン */
}

#image .slider-image-nav .slick-slide {
	margin-right: 20.5px;  /* ガター */
}

#image .slider-arrow {
  position: absolute;
  top: 50%;
  height: 38px;
  margin-top: -19px;  /* 高さの半分だけネガティブマージン */
  cursor: pointer;
  z-index: 10;  /* 重要 */
}
#image .slider-prev {
  left: 0;
}
#image .slider-next {
  right: 0;
}
#image .slick-slide {
  outline: 0;
}
#image .slider-image .slick-slide > img, #image .slider-image-nav .slick-slide > img {
  display: block;
  width: 100%;
  height: auto;
}

/*-------------------------------------
	Detail Section
-------------------------------------*/

.detail_section{
	max-width: 1040px;
}

.detail_section h4.line{
	font-size: 26px;
	color: #061019;
	border-bottom: 1px solid #EEE;
}

/*-------------------------------------
	Reccomended Point
-------------------------------------*/

#reco_point h4{
	margin-bottom: 20px;
}

#reco_point p{
	padding-left: 10px;
	padding-right: 20px;
}

@media screen and (max-width: 768px){
	#reco_point p{
		padding-left: 0;
		padding-right: 0;
	}
}

#reco_point .table_set{
	margin-top: 50px;
}

/*-------------------------------------
	Cont_lr
-------------------------------------*/

.cont_lr > .image,.cont_lr > .text{
	width: 50%;
}

.cont_lr > .image figure{
	text-align: center;
}

.cont_lr > .image iframe{
	width: 100%;
	height: 100%;
	min-height: 400px;
}

.cont_lr > div.left{
	float: left;
}

.cont_lr > div.right{
	float: right;
}

@media screen and (min-width: 769px) {
	.cont_lr > div.left.text{
		padding: 50px 50px 50px 0;
	}

	.cont_lr > div.right.text{
		padding: 50px 0 50px 50px;
	}
}

/*-------------------------------------
	Income
-------------------------------------*/

#income h4{
	margin-bottom: 30px;
}

#income dl{
	color: #061019;
	font-size: 18px;
	font-weight: bold;
}

#income dl:first-child{
	border-bottom: 1px solid #EEE;
	margin-bottom: 20px;
}

@media screen and (min-width: 769px) {
	#income dl dt{
		float: left;
	}
}

#income dl dd{
	text-align: right;
	margin-bottom: 20px;
}

/*-------------------------------------
	Access
-------------------------------------*/

#access h4{
	margin-bottom: 60px;
}

#access p{	
	color: #061019;
	font-size: 18px;
	font-weight: bold;
}


@media screen and (max-width: 768px){
	
	/*-------------------------------------
		slider 共通
	-------------------------------------*/
	
	.slick-dots{
		text-align: center;
		font-size: 0;
		margin-top: 20px;
	}
	
	.slick-dots li{
		background-color: rgba(6,16,25,0.50);
		text-indent: -9999px;
		width: 20px!important;
		height: 20px;
		border-radius: 50%;
		display: inline-block;
		margin-left: 10px;
		margin-right: 10px;
	}
	
	.slick-dots li.slick-active{
		background-color: #061019;
	}
	
	
	
	/*-------------------------------------
		page_link
	-------------------------------------*/
	
	.page_link ul{
		flex-wrap: wrap;
	}
	.page_link ul li{
		flex-basis: 50%;
		margin-bottom: 10px;
		height: 60px;
	}
	
	.page_link ul li:nth-last-of-type(-n+2){
		margin-bottom: 0;
	}
	
	/*-------------------------------------
		Propaties
	-------------------------------------*/

	.propaties .slick-list {
	  margin-right: 0px;  /* ガター分ネガティブマージン */
	}
	.propaties .slick-slide {
		margin-right: 0px;  /* ガター */
	}
	
/*	.propaties .slick-slide .data dt{
		float: none;
	}
*/	
	/*-------------------------------------
		type
	-------------------------------------*/

	.type > div{
		flex-wrap: wrap;
		padding-top: 30px;
		padding-bottom: 30px;
		justify-content: center;
	}

	.type > div > figure{
		flex-basis: 100%;
		margin-right: 0;
		margin-bottom: 20px;
	}
	
	.type > div > figure img{
		max-width: 100px;
	}
	
	/*-------------------------------------
		Reason
	-------------------------------------*/
	
	#reason ul li{
		margin-bottom: 30px;
		min-height: 0;
	}
	
	
	#reason li:last-child{
		margin-bottom: 0;
	}
	
	
	/*-------------------------------------
		Start
	-------------------------------------*/
	
	.start li{
		margin-bottom: 50px;
	}
	
	.start li:last-child{
		margin-bottom: 0;
	}
	
	.start li img{
		max-width: 100px;
	}
	
	/*-------------------------------------
		Recommended
	-------------------------------------*/

	#reco .gray{
		padding-top: 40px;
		padding-bottom: 60px;
	}
	
	#reco .coming{
		margin-top: 60px;
	}
	
	/*-------------------------------------
		List
	-------------------------------------*/
	
	#list .gray{
		padding-top: 35px;
		padding-bottom: 80px;
	}
	
	#list section{
		margin-bottom: 60px;
	}
	
	#list section h4{
		margin-bottom: 30px;
	}
	
	/*-------------------------------------
		Case
	-------------------------------------*/
	
	#case .slider-container .slider .slick-slide figure{
		min-height: 0;
		width: calc(100% - 53px)!important;
	}
	
	#case .slider-container .slider .slick-slide .text{		
		padding: 0;
		margin-top: 20px;
		width: calc(100% - 53px)!important;
	}
	
	/*-------------------------------------
		Support
	-------------------------------------*/
	
	#support .gray{
		padding-top: 30px;
		padding-bottom: 20px;
	}
	
	#support .gray ul li{
		flex: 1 1 33.333333%;
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 30px;
	}
	
	/*-------------------------------------
		table 共通
	-------------------------------------*/
	
	dl.table > dt,dl.table > dd{
		flex-basis: 100%;
		border-bottom: 0;
		padding: 10px 20px;
	}
	
	.table_small{
		display: block;
	}
	
	.table_small > dl.table{
		display: block;
	}
	
	.table_small > dl.table > dt,.table_small > dl.table > dd{
		border-left: 0;
		display: block;
		padding: 10px 20px;
		flex-grow: 0;
	}
	
	/*-------------------------------------
		Detail Section
	-------------------------------------*/
	
	.detail_section h4.line{
		font-size: 20px;
	}
	
	/*-------------------------------------
		Cont_lr
	-------------------------------------*/
	
	.cont_lr > .image iframe{
		min-height: 350px;
	}

	/*-------------------------------------
		Income
	-------------------------------------*/
	
	#income dl dt{
		background-color: #EEE;
		padding-left: 10px;
		padding-right: 10px;
		font-size: 14px;
	}
	
	
	/*-------------------------------------
		Access
	-------------------------------------*/
	
	#access h4{
		margin-bottom: 30px;
	}

	#access p{
		font-size: 14px;
	}
	
}

@media screen and (max-width: 480px) {
	/*-------------------------------------
		Support
	-------------------------------------*/
	
	#support .gray ul li{
		flex: 1 1 50%;
		height: 150px;
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom: 20px;
	}
}