@charset "utf-8";

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

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

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

上記(2)(3)を本ファイルで設定
*/
:root {
	/* 空き家バンク共通 */
	--zeniki: #eeeeee;
	--amagi: #E8CBD4;
	--asakura: #EDDFBF;
	--haki: #B9D7E5;
	--brand: #657F4D;
	--buy: #bcdbc0;
	--rental: #d8eb86;
	--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);

	/* 通サブ対応 */
	--negotiation: #56A7DF;
	--table-head: #EFECE9;
}

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

#main_body {
	font-size: 1.6rem;
}

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

/* レイアウト - 特サブ専用(PC) */
.akiya_detail #akiyabank_detail {
}

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

div#kihon_wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
	margin: 0 20px;
}



/* 見出し(PC) */
#main_body h2 {
	margin-top: 40px;
	margin-left: 20px;
    margin-right: 20px;
}
.akiya_detail #main_body h2 {
	margin-top: 40px;
	margin-left: 0px;
    margin-right: 0px;
}

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

/* 交渉中(PC) */
#main_body .mark_status div.detail_writing {
	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: 1px;
}

/* アイコン(PC) */
.badge_wrap {
	display: flex;
	flex-wrap: wrap;
}

.badge_wrap [class^="badge"],
.badge_wrap .detail_writing {
	display: contents !important;
}

.badge_wrap [class^="icon_"] {
	background: white;
	border-radius: 4px;
	box-sizing: border-box;
	color: var(--text);
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1;
	margin: 0 10px 10px 0;
	padding: 0.75em;
	text-align: center;
}

.color_change .badge_wrap [class^="icon_"] {
	outline: 1px solid rgba(255, 255, 255, .5);
}

.badge_area .icon_elm_1 {
	background: var(--amagi);
}

.badge_area .icon_elm_2 {
	background: var(--asakura);
}

.badge_area .icon_elm_3 {
	background: var(--haki);
}

.badge_torihiki .icon_elm_1 {
	background: var(--buy);
	color: var(--text);
}

.badge_torihiki .icon_elm_2 {
	background: var(--rental);
	color: var(--text);
}

.site_detail .badge_wrap [class^="icon_"],
.akiya_detail .badge_wrap [class^="icon_"] {
	min-width: 120px;
}

/* 検索フォーム(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;
}
.tpl_site_detail #main_a > div:not(#osusume_contents_area) {
    max-width: 1080px;
	width: auto;
}
#content_header{
	margin:0px 20px 20px 20px;
}
/* 地域エリア(PC) */
.areasearch_list fieldset {
	gap: 30px 100px;
	grid-template-columns: 1fr 354px;
	align-items: flex-start;

	display: flex;
	flex-wrap: wrap;
	margin:0 20px;
}

.map_txt {
	display: flex;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
	flex-direction: column;
	flex: 0 1 200px;
}

.map_img {
	flex: 1 1 354px;
	margin-inline: auto;
}

.map_img img {
	max-width: 100%;
	height: auto;
}

.areasearch_list .map_item {
	display: block;
	position: relative;
}

.areasearch_list .map_item label {
	display: block;
	padding: 20px 15px 20px 45px;
	border: 1px solid var(--border);
	border-radius: 4px;
	box-shadow: var(--shadow);
	background: white;
}

.areasearch_list .map_item:nth-child(1) label {
	background: var(--zeniki);
}

.areasearch_list .map_item:nth-child(2) label {
	background: var(--amagi);
}

.areasearch_list .map_item:nth-child(3) label {
	background: var(--asakura);
}
.areasearch_list .map_item:nth-child(4) label {
	background: var(--haki);
}

.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 input {
	background: url(/img/akiya/icon_link_white.png) right 24px center no-repeat var(--brand);
	border: none;
	border-radius: 10px;
	box-shadow: var(--shadow);
	color: #ffffff;
	display: block;
	font-size: 2rem;
	text-decoration: none;
	text-align: center;
	padding: 1em 2em 1em 3em;
	transition: opacity linear .2s;
	margin: 3rem auto;
	max-width: 400px;
	width: 100%;
	letter-spacing: 1em;
}

#akiyabank_search_submit input:hover {
	opacity: 0.7;
}

#akiyabank_search_submit input::after {
	background: url(/img/miryoku/icon_link_white.png) center no-repeat;
	content: '';
	display: inline-block;
	width: 16px;
	aspect-ratio: 1/1;
	margin-left: 12px;
	vertical-align: middle;
}

/* 検索結果(PC) */
#results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: min(4vw, 50px);
	margin: min(4vw, 50px) 0;
}

.result_box {}

.result_img {
	position: relative;
}

.result_img_status:not(:empty) {
	background: var(--negotiation) !important;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1;
	padding: 0.5em;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	z-index: 1;
	text-align: center;
}

.result_img_house img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
}

.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.3rem;
	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;
}

.no_data {
	background: var(--table-head);
	border-radius: 5px;
	padding: 1em;
}

#result_pager {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	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;
}
div#akiyabank_search_results {
	margin: 0 20px;
}

/* 物件詳細ページ(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;
}
#main_body .toc_link_wrap{
	display:none;
}
/*売買チェックでの展開*/
#kingakuwrap {
  overflow: hidden;
  max-height: 0; /* 初期は閉じた状態 */
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  padding: 0 10px;
}

#kingakuwrap.highlight {
  max-height: 200px; /* 展開後の高さ（必要に応じて調整） */
  opacity: 1;
}

/* タブレットここから */
@media screen and (max-width: 1080px) {}
/* タブレットここまで */

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

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

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

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

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

	/* アイコン(SP) */
	.site_detail .badge_wrap [class^="icon_"],
	.akiya_detail .badge_wrap [class^="icon_"] {
		min-width: auto;
	}

	/* 地域エリア(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: 4em;
	}

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

}

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