@charset "utf-8";

/* 専用コーナーをサブサイトにした場合の調整 */
#main_a:has(#akiyabank_detail){
  padding-left: 0 !important;
}
#main:has(#akiyabank_detail){
  width: 100% !important;
}
#mymainback:has(#akiyabank_detail) > #sidebar1{
  display: none !important;
}

/*
最終ページ分岐する場合は以下の通り
(1)空き家バンク専用 .akiya-detail
(2)サブサイト専用 .site_detail
*/

/* 変数
【注意】最終ページはサブサイト用もあるため、設定注意。
通サブ：layout.css
特サブ：site-miryoku-layout.css

(1)通サブ併用：流用できるもの。色が変わっても問題ないもの。
--text
(2)特サブ専用：空き家バンクでしか使っていないもの。
(3)通サブ対応：色が変わってはいけないもの。
--negotiation
--table-head

上記(2)(3)を本ファイルで設定
*/
:root {
	/* 空き家バンク共通 */
	--minobu: #F7D3DF;
	--shimobe: #C9E3C7;
	--nakatomi: #C8DCE3;
	--buy: #bcdbc0;
	--rental: #d8eb86;
	--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);

	/* 通サブ対応 */
	/* --negotiation: #f3c903; */
	/* --table-head: #fef9e5; */
	--negotiation: #3B7D59;
	--table-head: #E6F2E5;
}

/* 変数（背景色変更） */
.color_black {
	--negotiation: #333;
}
.color_blue {
	--negotiation: #00a;
}

#main_body {
	font-size: 1.6rem;
}

/* レイアウト(PC) */
#akiyabank_detail {
	margin-top: 30px;
}

/* レイアウト - 特サブ専用(PC) */
#akiyabank_detail {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

#akiya_detail_shosai {
	grid-column: 1/3;
}

/* 見出し(PC) */
#main_body h2 {
	margin-top: 40px;
}

/* 見出し - 特サブ専用(PC) */
#main_body #akiya_detail_kihon > h2:first-of-type,
#main_body #akiya_detail_shosai > h2:first-of-type {
	margin-top: 0;
}

/* 交渉中(PC) */
#main_body .mark_status div.detail_writing {
	color: #fff;
	background: var(--negotiation) !important;
	margin: 0;
	margin-bottom: 0px;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.4;
	padding: 20px;
	text-align: center;
	margin-bottom: 25px;
}

/* アイコン(PC) */
.badge_wrap {
	display: flex;
	flex-wrap: wrap;
}
.badge_wrap [class^="badge"],
.badge_wrap .detail_writing {
	display: contents !important;
}
.badge_wrap [class^="badge_"],
.badge_wrap [class^="icon_"] {
	background: #E1E1E1;
	border-radius: 0;
	box-sizing: border-box;
	color: var(--text);
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1;
	margin: 0 6px 6px 0;
	padding: 8px 10px;
	text-align: center;
}
.color_change .badge_wrap [class^="badge_"],
.color_change .badge_wrap [class^="icon_"] {
	outline: 1px solid rgba(255, 255, 255, .5);
}

.badge_area .icon_elm_1 {
	background: var(--minobu);
}
.badge_area .icon_elm_2 {
	background: var(--shimobe);
}
.badge_area .icon_elm_3 {
	background: var(--nakatomi);
}
.badge_torihiki .icon_elm_1 {
	background: #b1dec5;
	color: var(--text);
}
.badge_torihiki .icon_elm_2 {
	background: var(--rental);
	color: var(--text);
}
.badge_bunrui .icon_elm_1 {
	background: #d6f2f5;
	color: var(--text);
}
.badge_bunrui .icon_elm_2 {
	background: #cce7fe;
	color: var(--text);
}


/* 検索フォーム(PC) */
.search_check_box {
	padding-top: 10px;
}
.search_check_box fieldset {
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
}
.search_check_box legend {}
.search_check_box fieldset > span {
	display: inline-block;
	vertical-align: top;
	margin: 0 0 20px 30px;
}
.search_check_box span input {
	margin: 0;
	cursor: pointer;
}
.search_check_box span label {
	padding: 0 0 0 10px;
	cursor: pointer;
}

/* 地域エリア(PC) */
.areasearch_list fieldset {
	gap: 30px 100px;
	grid-template-columns: 1fr 354px;
	align-items: flex-start;

	display: flex;
	flex-wrap: wrap;
}
.map_txt {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
	flex: 1 0 440px;
}
.map_img {
	flex: 0 1 354px;
	margin-inline: auto;
}
.map_img img {
	max-width: 100%;
	height: auto;
}
.color_change .map_img img {
	background-color: #fff!important;
}

.areasearch_list .map_item {
	display: block;
	position: relative;
}
.areasearch_list .map_item label {
	display: block;
	padding: 15px 15px 15px 45px;
	border: 1px solid var(--border);
	border-radius: 4px;
	box-shadow: var(--shadow);
	background: white;
}
.areasearch_list .map_item:nth-child(2) label {
	background: var(--minobu);
}
.areasearch_list .map_item:nth-child(3) label {
	background: var(--shimobe);
}
.areasearch_list .map_item:nth-child(4) label {
	background: var(--nakatomi);
}
.areasearch_list .map_item input {
	position: absolute;
	left: 20px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.areasearch_list .map_item input:checked + label {
	outline: 1px solid #333;
	font-weight: bold;
}
#akiyabank_search_form input:checked + label {
	font-weight: bold;
}

/* 検索ボタン(PC) */
#akiyabank_search_submit span {
	background: none;
	border: 1px solid #333;
	border-radius: 0;
	box-shadow: none;
	color: var(--text);
	display: block;
	text-align: center;
	margin: 3rem auto;
	max-width: 400px;
	width: 100%;
	position: relative;
}
#akiyabank_search_submit span::after {
	content: '';
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	background-color: #3B7D59;
	position: absolute;
	top: 4px;
	left: 4px;
	z-index: -1;
	transition: all linear .2s;
}
#akiyabank_search_submit span:hover::after {
	background-color: #bcdbc0;
}
#akiyabank_search_submit input {
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	font-weight: bold;
	display: block;
	font-size: 2rem;
	text-decoration: none;
	text-align: center;
	padding: 1em 2em 1em 3em;
	margin: 0rem auto;
	width: 100%;
	letter-spacing: 1em;
	transition: all linear .2s;
}
#akiyabank_search_submit span:hover input {
	color: #333;
	opacity: 0.75;
}

/* 検索結果(PC) */
#results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: min(4vw, 50px);
	margin: min(4vw, 50px) 0;
}
#results:not(:has(*)) {
	display: none;
}
.result_img {
	position: relative;
}
.result_img_status:not(:empty) {
	color: #fff;
	background: var(--negotiation) !important;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1;
	padding: 0.5em;
	position: absolute;
	width: 100%;
	text-align: center;
}
.result_img_house img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	transition: all 0s;
}
.result_img_house img.no_img {
	display: none;
}


.result_txt {
	margin: 10px 0 0;
}
a.result_title {
	font-size: 1.8rem;
}
a.result_title:hover {
	text-decoration: none;
}
.result_data {
	font-size: 1.4rem;
	margin: 0.25em 0;
}
.result_data .result_data_item {
	display: flex;
}
.result_data_item dt {
	white-space: pre;
}
.result_data_item dt::after {
	content: '：';
}
.result_data_item dd {
	margin: 0;
}
.result_data_item.data_price dd {
	font-weight: bold;
}

#result_pager {
	display: flex;
	justify-content: space-between;
	margin: 50px 0 150px;
	gap: 20px;
}
#result_pager_prev {
	white-space: pre;
}
#result_pager_list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1em;
	justify-content: center;
}
#result_pager_next {
	white-space: pre;
}
#results:not(:has(*)) ~ #result_pager {
	display: none;
}

.no_data {
	background: var(--table-head);
	border-radius: 5px;
	padding: 1em;
	margin: 20px 0 150px;
	display: block;
}
#results:not(:has(*)) ~ .no_data {
	display: block;
}


/* 物件詳細ページ(PC) */
#akiyabank_detail table {
	border-width: 1px;
	border-color: var(--text);
}
#akiyabank_detail caption {
	display: none;
}
#akiyabank_detail th {
	background: var(--table-head);
	border-color: var(--text);
	font-weight: normal;
	width: 160px;
	padding: .75em;
}
#akiyabank_detail td {
	border-color: var(--text);
	padding: .75em;
}

/* 写真(PC) */
#akiya_detail_gazou {}
#gazou_box {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 8px;
}
#gazou_box div[class^="detail_"] {
	margin: 0;
}
#gazou_box div[class^="detail_"] img {
	aspect-ratio: 4/3;
	height: 100%;
	width: 100%;
	object-fit: cover;
	cursor: pointer;
}
#gazou_box div[class^="detail_"] img:hover {
	opacity: 0.7;
}
#gazou_box div[class^="detail_"] span {
	display: none;
}
#akiyabank_detail table div[class^="detail_"] {
	margin: 0;
}
#akiyabank_detail table div[class^="detail_"] p {
	margin: 10px 0 0;
}
#akiyabank_detail table div[class^="detail_"] img {
	margin: 0;
}

/* 画像拡大(PC) */
#akiya_overlay {
	display: none;
	background: rgba(0, 0, 0, .8);
	cursor: pointer;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 1000;
}
.zoom #akiya_overlay {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 15px;
	gap: 15px;
}
img#akiya_gazou_zoom {
	box-sizing: border-box;
	max-height: 80%;
	max-width: 100%;
}
.btn_akiya_arrow {
	display: inline-block;
	vertical-align: middle;
	margin: 0px 5px;
	padding: 0px;
	width: calc(3em + 2px);
	aspect-ratio: 1/1;
	box-sizing: border-box;
	border-radius: 100%;
	text-align: left;
	text-indent: -9999em;
	background: #111;
	border: 1px solid #ccc;
	font-size: 1.4rem;
	position: relative;
	top: -1px;
	color: #fff;
}
.btn_akiya_arrow:not(:disabled):hover {
	background: #1b1b1b;
}
.btn_akiya_arrow:disabled {
	opacity: 0.4;
	border-color: transparent;
	cursor: default;
}

#btn_overlay_prev {
	background-image: url(/img/sp/arrow_r_white.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 0.5em auto;
	transform: rotate(180deg);
}
#btn_overlay_next {
	background-image: url(/img/sp/arrow_r_white.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 0.5em auto;
}
#btn_overlay_close {
	background: #111;
	border: 1px solid #ccc;
	border-radius: 9999px;
	color: white;
	cursor: pointer;
	font-size: 1.4rem;
	padding: 1em 2em;
	line-height: 1;
}
#btn_overlay_close::before {
	content: '';
	background: url(/img/sp/btn_close_white.png) center/contain no-repeat;
	aspect-ratio: 1/1;
	width: 1rem;
	margin-right: .5em;
	display: inline-block;
}
#btn_overlay_close:hover {
	background: #1b1b1b;
}









/* ==================================================
スマートフォンここから
================================================== */
@media screen and (max-width: 1080px) {

	/* レイアウト(SP) */
	#akiyabank_detail {
		display: block;
	}

	/* レイアウト - 特サブ専用(SP) */
	#akiyabank_detail {
		display: block;
	}

	/* 見出し */
	/* 見出し - 特サブ専用(SP) */
	#main_body #akiya_detail_kihon > h2:first-of-type,
	#main_body #akiya_detail_shosai > h2:first-of-type {
		margin-top: 40px;
	}

	/* 交渉中(SP) */
	#main_body .mark_status div.detail_writing {
		font-size: 2rem;
		padding: 15px;
	}

	/* アイコン(SP) */


	/* 地域エリア(SP) */
	.areasearch_list fieldset {
		grid-template-columns: 1fr;
	}

	.map_txt {
		grid-template-columns: 1fr;
		gap: 10px;
		flex-basis: 100%;
	}

	/* 検索ボタン(SP) */
	#akiyabank_search_submit input {
		font-size: 1.8rem;
	}

	/* 物件詳細ページ(SP) */
	#akiyabank_detail table {
		font-size: 1.4rem;
	}

	#akiyabank_detail th {
		text-align: left;
		width: 10rem;
	}

	/* 写真(SP) */
	#gazou_box {
		grid-template-columns: repeat(2, 1fr);
	}



}
/* ==================================================
スマートフォンここまで
================================================== */