@charset "utf-8";

/*******************************************

-------------------------------------------
取り扱い物件03
********************************************/


#manage01 {
	background: #EEF0F5;
}

/*左ラインのタイトル
========================================== */

#manage .manage-list-tit {
	display: flex;
	justify-content: space-between;
}
#manage .manage-list-tit h3 {
	font-size: 23px;
	font-weight: bold;
	padding-left: 1em;
	border-left: #1C294F 4px solid;
}

/*画像一覧
========================================== */

#manage ul.mp-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: ;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}
#manage ul.mp-list.mp-list__col04 {
	grid-template-columns: repeat(4, 1fr);
}
#manage ul.mp-list.mp-list__col04 li {
	max-width: 286px;
}
ul.mp-list li {
	max-width: 380px;
	width: 100%;
}
#manage01 ul.mp-list {
	margin-top: 30px;
}
#manage01 ul.mp-list li:has(figure) {
	background: #fff;
}
#manage ul.mp-list+ul.mp-list {
	margin-top: 26px;
}
#manage ul.mp-list li figure figcaption {
	padding: 10px 15px;
	background: #ECECEF;
}
#manage ul.mp-list li a figure figcaption {
	background: url(../img/manage/ic_zoom.svg) no-repeat right 1em center;
	background-size: 20px;
	padding-right: 35px;
}
#manage01 ul.mp-list li figure figcaption {
	background: #fff;
}
#manage02 ul.mp-list li a figure figcaption {
	background-color: #EEF0F5;
}
@media only screen and (max-width: 767px) {
	#manage ul.mp-list {
		margin-top: 40px;
		grid-template-columns: repeat(2, 1fr);
	}
	#manage ul.mp-list li {
	}
	#manage ul.mp-list li figure figcaption {
		font-size: 10px;
		padding-left: 1em;
	}
	#manage02 ul.mp-list li figure figcaption {
	}
	#manage ul.mp-list.mp-list__col04 {
		grid-template-columns: repeat(2, 1fr);
	}
	#manage ul.mp-list li a figure figcaption {
		background-size: 16px;
	}
}
#manage ul.mp-list li {
	position: relative;
}

#manage01 .pict-pref {
	margin-top: 30px;
}

/***********************************************************************

------------------------------------------------------------------------
地図表示
***********************************************************************/

#manage #map {
	padding-bottom: 60px;
}
#manage #map .map-flex {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}
#manage #map .map-flex .map-flex-left {
	width: 560px;
}
#manage #map .map-flex .map-flex-right {
	width: 600px;
}

/*地図とピン
========================================== */

#manage #map .map-pic {
	display: block;
	/* background: url(../img/manage_map/bg_map.png) no-repeat;
	background-size: cover; */
}
#manage #map .map-pic ul.map-pin {
	width: 560px;
	height: 320px;
	position: relative;
}
#manage #map .map-pic ul.map-pin li {
	position: absolute;
	text-align: center;
	cursor: pointer;
}
#manage #map .map-pic ul.map-pin li.pin-tokyo {
	left: 35%;
	top: 30%;
}
#manage #map .map-pic ul.map-pin li.pin-kanagawa {
	left: 31%;
	top: 63%;
}
#manage #map .map-pic ul.map-pin li.pin-saitama {
	left: 35%;
	top: 4%;
}
#manage #map .map-pic ul.map-pin li.pin-chiba {
	left: 69%;
	top: 30%;
}
#manage #map .map-pic ul.map-pin li::before {
	content: "";
	width: 50px;
	height: 75px;
	display: block;
	background: url(../img/manage_map/ic_map_pin.svg)no-repeat center bottom;
}
#manage #map .map-pic ul.map-pin li.active::before {
	background: url(../img/manage_map/ic_map_pin_ac.svg)no-repeat center bottom;
}
#manage #map .map-pic ul.map-pin li em {
	background: #fff;
	padding: .5em;
	font-size: 15px;
	display: none;
	text-align: center;
}
#manage #map .map-pic ul.map-pin li:hover em {
	display: inline-block;
}
@media only screen and (max-width: 767px) {
	#manage #map .map-flex {
		flex-wrap: wrap;
	}
	#manage #map .map-flex .map-flex-left {
		width: 100%;
	}
	#manage #map .map-flex .map-flex-right {
		width: 100%;
		margin-top: 20px;
	}
	#manage #map .map-pic {
		display: none;
	}
	#manage #map .map-pic ul.map-pin {
		width: 100%;
		height: 240px;
	}
}

/*都道府県名のボタン
========================================== */

#manage #map ul.pref-area {
	background: #F1F3F6;
	padding: 1em;
	margin-top: 20px;
}
#manage ul.pref-area {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}
#manage ul.pref-area li a.btn-round-wh {
	cursor: pointer;
	padding: 1em 4em;
}
@media only screen and (max-width: 767px) {
	#manage #map ul.pref-area {
		margin-top: 0;
	}
	#manage ul.pref-area li {
		width: 46%;
	}
	#manage ul.pref-area li a.btn-round-wh {
		padding: 1em 1em 1em 1em;
		width: 100%;
		text-align-last: left;
		font-size: 13px;
	}
}

/*地図の右側のリスト
========================================== */

#manage #map .map-list .list-tit span {}
#manage #map .map-list .map-list-item {
	margin-top: 24px;
	height: 500px;
	overflow-x: scroll;
	padding-bottom: 20px;
}
#manage #map .map-list .map-list-item .list-tit {
	background: #E3E8F0;
	padding: .5em 1em;
}
#manage #map .map-list .map-list-item ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 1em;
}
#manage #map .map-list .map-list-item ul li {
	border-bottom: #707070 1px solid;
	width: 49%;
	font-size: 14px;
	display: flex;
	justify-content: space-between;
	padding: .5em 1em;
}
#manage #map .map-list .map-list-item ul li:has(a) {
	padding: 0;
}
#manage #map .map-list .map-list-item ul li a {
	display: block;
	width: 100%;
	background: url(../img/manage_map/ic_pic.svg) no-repeat right .5em center;
	padding: .5em 1em;
	padding-right: 35px;
}
#manage #map .map-list .map-list-item ul li:hover a {
	background: url(../img/manage_map/ic_pic.svg) no-repeat right .5em center #a6c2ff;
}
@media only screen and (max-width: 767px) {
	#manage #map .map-list .map-list-item ul li {
		width: 100%;
	}
	#manage #map .map-list .map-list-item {
		height: auto;
	}
}
.js-tab.hidden ,
.js-tab02.hidden {
	display: none;
}
.btn-round-wh.js-tab-button.active ,
.btn-round-wh.js-tab02-button.active {
	background: #3660df url(../img/common/ic_arr_cir_r_wh.svg) no-repeat right 1em center;
	color: #fff;
	background-size: 15px;
}

.cls-1 {
	stroke: #fff;
	stroke-linejoin: round;
	stroke-width: 6px;
}
.cls-1,
.cls-2 {
	fill: none;
}

.cls-3 {
	fill: #d3dde2;
}

.cls-3,
.cls-4,
.cls-5,
.cls-6,
.cls-2,
.cls-7,
.cls-8,
.cls-9,
.cls-10,
.cls-11 {
	stroke-width: 0px;
	fill: #d3dde2;
}
.cls-4,
.cls-6,
.cls-8,
.cls-9,
.cls-10
{
	cursor: pointer;
}

.cls-4:hover ,
.active .cls-4 {
	fill: #57d698;
}

.cls-6:hover ,
.active .cls-6 {
	fill: #ffe7bc;
}

.cls-7 {
	fill: #fff;
}

.cls-8:hover ,
.active .cls-8 {
	fill: #55b0b2;
}

.cls-9 {
	fill: #073b4c;
}

.cls-12 {
	clip-path: url(#clippath);
}

.cls-10:hover ,
.active .cls-10 {
	fill: #eeafa8;
}

.cls-11 {
	fill: #e0fbfc;
}

.cls-pin {
	fill: #073b4c;
}
.cls-pin:hover ,
.active .cls-pin {
	fill: #EF476F;
}