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

/* 中身======================================================================================================== */
#detail #openhouse{
	margin: 0 0 10px;
}
#detail #openhouse dt{
	display: block;
	font-weight: bold;
	padding: 0px 10px;
	text-align: center;
	color: #FFF;
	background-color: #F60;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#detail #openhouse dd{
	display: block;
	color: #F60;
	font-weight: bold;
}


#detail_head{
	background-color: #FFF;
	border-top: 1px solid #BBB;
	border-bottom: 1px solid #BBB;
	padding: 20px 0;
	margin: 0 0 20px;
}
#detail_head .alpha{
}
#detail_head .type{
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	padding: 5px;
	text-align: center;
	border: solid 1px #111;
	border-radius: 5px;
}
.business #detail_head .type{
	font-size: 12px;
}
.new #detail_head .type{ color: #ee284d; border-color: #ee284d; }
.use #detail_head .type{ color: #1384C8; border-color: #1384C8; }
.land #detail_head .type{ color: #327d49; border-color: #327d49; }
.mansion #detail_head .type{ color: #F07700; border-color: #F07700; }
.business #detail_head .type{ color: #5E4E9A; border-color: #5E4E9A; }
.terrace #detail_head .type{ color: #e4007f; border-color: #e4007f; }
.rent #detail_head .type{ color: #BC8B3D; border-color: #BC8B3D; }
#detail_head h2{
	display: inline-block;
	vertical-align: middle;
	font-size: 22px;
	line-height: 30px;
	padding: 0 0 0 10px;
}
#detail_head  .price{
	display: block;
	font-size: 16px;
}
#detail_head  .price span{
	font-size: 28px;
	color: #CA1F24;
}
#detail_head dl{
	display: flex;
	align-items: center;
}
#detail_head dl.name{
}
#detail_head dl.half{
}
#detail_head dt{
	padding: 5px 0;
	margin: 3px 5px 3px 0;
	line-height: 1;
	width: 6em;
	text-align: center;
    border-radius: 5px;
	border: solid 1px #111;
}
#detail_head dd{
	flex: 1;
}
#detail_head .beta{
}
#detail_head .beta li{
	text-align: center;
}
#detail_head .beta li.bookmark{
	width: 49%;
	float: left;
	margin: 0 0 2vw;
}
#detail_head .beta li.bookmark_view{
	width: 49%;
	float: right;
	margin: 0 0 2vw;
}
#detail_head .beta li.inquiry{
	display: block;
	float: none;
	clear: both;
	margin: 0 0 2vw;
}
#detail_head .beta li.request{
	margin: 0 0 2vw;
}
#detail_head .beta li a{
	display: block;
	text-decoration: none;
	color: #FFF;
	line-height: 40px;
	height: 40px;
	border-radius: 5px;
}
#detail_head .beta li.bookmark a{ 		background-color: #FF7679; }
#detail_head .beta li.bookmark_view a{  border: solid 1px #FF5A5C; color: #FF5A5C; }
#detail_head .beta li.inquiry a{ 		background-color: #B20000; }
#detail_head .beta li.request a{ border: solid 1px #698C00; color: #698C00; }
#detail_head .beta li.root a{ border: solid 1px #399; color: #399; }
#detail_head .beta li a img{
	vertical-align: middle;
	padding: 0 5px 0 0;
	max-width: 25px;
	max-height: 25px;
}

#detail .caption{
	font-size: 16px;
	margin: 0 0 20px;
}

#detail #staff{
	border: solid 2px #111;
	padding: 10px;
	border-radius: 5px;
	margin: 0 0 30px;
}
#detail #staff dt{
	display: block;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	border-bottom: solid 2px #111;
	padding: 0 0 10px;
	margin: 0 0 10px;
}



#detail #gallery{
	margin: 0 0 30px;
}
#detail #photo li{
	text-align: center;
	width: 100%;
	height: auto;
	float: none;
	margin: 0;
}
#detail #photo li img{
	max-width: 100%;
	max-height: 240px;
}
#detail #photo li p{
	display: block;
	text-align: left;
}
.bx-wrapper .bx-controls-direction a{
	top: 130px;
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{
	bottom: -25px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
	width: 5px;
	height: 5px;
	margin: 0 2px;
}

#detail #panorama{
	margin: 0 0 30px;
}

#detail #outline{
	margin: 0 0 30px;
}

.member_back{
	position:relative;
	padding:30px 0;
}

.member_back::before{
	content:"";
	width:100vw;
	height:100%;
	position:absolute;
	top:0;
	left:-6%;
	background:rgba(84,107,178,0.1);
	z-index:-10;
}

#detail #gmap{
	margin: 0 0 30px;
}
#detail #gmap p {
	text-align:center;
	font-size:10px;
}

#detail #loan{
	margin: 0 0 30px;
}
#detail #loan .total{
	text-align: center;
}
#detail #loan .total .sum{
	color: #FFF;
	background-color: #FD3B3B;
	border-radius: 50px;
	padding: 10px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
#detail #loan .total .sum .lead{
	font-size: 4vw;
	margin-right: 10px;
}
#detail #loan .total .sum .yen{
	font-size: 4vw;
}
#detail #loan .total .sum .yen #kakaku_txt{
	font-weight: bold;
	font-size: 6vw;
}
#detail #loan .total .bonus{
	font-weight: bold;
}
#detail #loan .total .bonus #all_pri2{
	font-size: 5vw;
}
#detail #loan .sub dl{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 20px 0 0;
}
#detail #loan .sub dt{
	width: 35%;
	font-size: 3.4vw;
	text-align: center;
	background-color: #999;
	color: #FFF;
	border-radius: 5px;
}
#detail #loan .sub dd{
	width: 60%;
	text-align: center;
}
#detail #loan .sub dd .count{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#detail #loan .sub dd .count p{
	font-size: 4vw;
}
#detail #loan .sub dd .count p span{
	font-size: 6vw;
	font-weight: bold;
	line-height: 1;
}
#detail #loan .sub dd .count .less,
#detail #loan .sub dd .count .plus{
	display: block;
	width: 40px;
	height: 26px;
	line-height: 26px;
	border: solid 1px #CCC;
	background-color: #EEEEEE;
	background: -webkit-linear-gradient(#FFFFFF 0%, #EEEEEE 100%);
	background: linear-gradient(#FFFFFF 0%, #EEEEEE 100%);
}
#detail #loan .sub dd .count .less:hover,
#detail #loan .sub dd .count .plus:hover{
	cursor: pointer;
}
#detail #loan .sub dd .count .less{
	border-radius: 50px 0 0 50px;
}
#detail #loan .sub dd .count .plus{
	border-radius: 0 50px 50px 0;
}
#detail #loan .sub + .cap{
	margin: 10px 0 0;
}

#detail #under_information{
	text-align: center;
	margin: 0 0 30px;
}
#detail #under_information ul{
	display: block;
}
#detail #under_information li{
	width: 100%;
	text-align: center;
	margin: 0 0 10px;
}
#detail #under_information li a{
	display: block;
	text-decoration: none;
	height: 50px;
	font-size: 16px;
	line-height: 50px;
	color: #FFF;
	border-radius: 5px;
}
#detail #under_information li.inquiry a{ 		background-color: #B20000; }
#detail #under_information li.request a{ border: solid 1px #698C00; color: #698C00; }
#detail #under_information li.root a{ border: solid 1px #399; color: #399; }

#detail #under_information .contact{
	display:block;
	background-color: #305992;
	color: #FFF;
	padding: 0 0 20px;
	margin: 0;
	text-align: center;
	border-radius: 5px;
}
#detail #under_information .contact em{
	display: block;
	padding: 20px 0 0;
}

#detail #under_information .contact address{
	color: #FFFF26;
	font-size: 24px;
}
#detail #under_information .contact address span{
	font-size: 32px;
}



/* スマホのみ======================================================================================================== */
@media print and (max-width: 750px), screen and (max-width: 750px){
#detail #outline tr{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
#detail #outline th,
#detail #outline td{
	display: block;
}
#detail #outline th{
	width: 35%;
}
#detail #outline td{
	width: 65%;
}


}



/* PCのみ======================================================================================================== */
@media print and (min-width: 751px), screen and (min-width: 751px){
#detail #openhouse{
	display: flex;
	align-items: center;
	margin: 0 0 20px;
	font-size: 16px;
}
#detail #openhouse dt{
	display: inline-block;
	margin-right: 10px;
}
#detail #openhouse dd{
	flex: 1;
}

#detail_head{
	border: none;
	padding: 0px;
	margin: 0 0 20px;
	display: flex;
	justify-content: space-between;
}
#detail_head .alpha{
	width: 770px;
}
#detail_head .type{
	font-size: 16px;
}
#detail_head  .price{
	display: block;
	float: right;
	font-size: 16px;
	line-height: 30px;
}
#detail_head  .price span{
	font-size: 28px;
	line-height: 30px;
}
#detail_head dl.name{
	clear: both;
}
#detail_head dl.half{
	float: left;
	width: 50%;
}
#detail_head dt{
	padding: 6px 0;
}

#detail_head .beta{
	width: 370px;
}
#detail_head .beta li a{
	font-size: 16px;
	line-height: 50px;
	height: 50px;
}
#detail_head .beta li.bookmark{
	margin: 0 0 10px;
}
#detail_head .beta li.bookmark_view{
	margin: 0 0 10px;
}
#detail_head .beta li.inquiry{
	margin: 0 0 10px;
}
#detail_head .beta li.request{
	margin: 0 0 10px;
}
#detail_head .beta li.bookmark a:hover{ 		background-color: #FF3B3F; }
#detail_head .beta li.bookmark_view a:hover{  background-color: #FF3B3F; color: #FFF; }
#detail_head .beta li.inquiry a:hover{ 		background-color: #6D0300; }
#detail_head .beta li.request a:hover{ background-color: #698C00; color: #FFF; }
#detail_head .beta li.root a:hover{ background-color: #399; color: #FFF; }

#detail .caption{
	font-size: 22px;
}


#detail #staff{
	padding: 20px;
	margin: 0 0 100px;
}
#detail #staff dl{
	display: flex;
}
#detail #staff dt{
	font-size: 16px;
	border-bottom: none;
	border-right: solid 2px #111;
	padding: 0 20px 0 0;
	margin: 0 20px 0 0;
	display: flex;
	align-items: center;
}
#detail #staff dt span{
}
#detail #staff dd{
	flex: 1;
}


#detail #gallery{
	display: flex;
	justify-content: space-between;
	margin: 0 0 100px;
}
#detail #photo{
	width: 800px;
}
#detail #photo li{
}
#detail #photo li img{
	max-width: 800px;
	max-height: 533px;
}
#detail #photo li p{
}
#detail #photo li.big p{
}
#detail #photo a:hover img{
	opacity: 0.8;
}
#detail #bx_pager{
	width: 380px;
}
#detail #bx_pager a{
	display: block;
	float: left;
	text-align: center;
	width: 120px;
	height: 80px;
	margin: 0 0 10px 10px;
	position: relative;
}
#detail #bx_pager a img{
	max-width: 120px;
	max-height: 80px;
}
#detail #bx_pager a:nth-child(3n-2){
	margin-left: 0px;
}
#detail #bx_pager a.active::before{
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	border: solid 2px #111;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
}
.bx-wrapper .bx-controls-direction a{
	top: 50%;
}
.bx-wrapper .bx-controls-direction a.bx-prev{
	left: 10px;
}
.bx-wrapper .bx-controls-direction a.bx-next{
	right: 10px;
}


#detail #panorama{
	margin: 0 0 100px;
}



#detail #outline{
	margin: 0 0 100px;
}

.member_back{
	position:relative;
}

.member_back::before{
	content:"";
	width: 200vw;
	height:100%;
	position:absolute;
	top:-60px;
	left: -30%;
	background:rgba(84,107,178,0.1);
	z-index:-10;
	padding:60px 0;
}



#detail #gmap{
	margin: 0 0 100px;
}

#detail #loan{
	margin: 0 0 100px;
}
#detail #loan .total .sum{
	display: inline-block;
	padding: 0 50px;
}
#detail #loan .total .sum .lead{
	display: inline-block;
	vertical-align: middle;
	font-size: 30px;
	margin-right: 10px;
}
#detail #loan .total .sum .yen{
	display: inline-block;
	vertical-align: middle;
	font-size: 30px;
}
#detail #loan .total .sum .yen #kakaku_txt{
	font-size: 40px;
}
#detail #loan .total .bonus #all_pri2{
	font-size: 30px;
}
#detail #loan .sub{
	display: flex;
	justify-content: space-between;
}
#detail #loan .sub dl{
	width: 180px;
	display: block;
}
#detail #loan .sub dt{
	width: auto;
	font-size: 16px;
}
#detail #loan .sub dd{
	width: auto;
}
#detail #loan .sub dd .count{
	position: relative;
	padding: 50px 0 0;
	justify-content: center;
}
#detail #loan .sub dd .count p{
	font-size: 18px;
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
	margin: 0 auto;
}
#detail #loan .sub dd .count p span{
	font-size: 30px;
}
#detail #loan .sub dd .count .less,
#detail #loan .sub dd .count .plus{
	width: 80px;
}
#detail #loan .sub dd .count .plus{
	border-left: none;
}
#detail #loan .sub dd .count .less:hover,
#detail #loan .sub dd .count .plus:hover{
	background: #EEE;
}
#detail #loan .sub + .cap{
	text-align: center;
	margin: 20px 0 0;
}


#detail #under_information ul{
	display: inline-block;
	vertical-align: middle;
}

#detail #under_information li{
	width: 370px;
}
#detail #under_information li a:hover{
	opacity: 0.8;
}

#detail #under_information li.request{
	margin: 0px;
}

#detail #under_information .contact{
	display: inline-block;
	vertical-align: middle;
	padding: 0 20px;
	margin: 0 0 0 10px;
	height: 110px;
}
#detail #under_information .contact em{
}

#detail #under_information .contact address{
	font-size: 32px;
	line-height: 1.2;
}
#detail #under_information .contact address span{
	font-size: 46px;
}

#detail .member_register{
	margin-bottom: 100px;
}

#detail #near_property .estate_list li:nth-child(n+4){
	display: none;
}


}