/* ===== index.ctp 専用のページ内スコープ調整 =====
   共有CSS/画像は変更しない。ここに書いた指定はこのページだけに効く。 */

/* 左カラム(物件検索)の背景を #f1f5f6 のグレーに(白背景と同化して見にくいため)。
   パネル本体・内側・各検索項目ブロック(利回り/価格のラジオ群コンテナ等)まで含めて白を残さない。
   実際の入力欄(input/select)やボタンは白のまま(操作要素として区別)。 */
.m_search,
.m_search .modal_cont,
.m_search .search_item { background: #f1f5f6; }

/* 物件検索パネル内の文字サイズのみ、全体的に少しだけ小さく */
.m_search { font-size: 0.92em; }

/* 価格・利回り・専有面積のラジオ行(「指定なし」含む全体)は不要のため非表示にする(PC/SP共通) */
.mansion_top_search:not(.list_pattern) > :nth-child(9),
.mansion_top_search:not(.list_pattern) > :nth-child(7),
.mansion_top_search:not(.list_pattern) > :nth-child(13) { display: none; }

/* 検索条件セクションの並べ替え(CSS order。DOM順は不変=toggleの兄弟セレクタ等は壊れない)。
   希望順: フリーワード→エリア/路線→価格→利回り→築年数→駅徒歩→専有面積→公開情報→公開日→詳細条件 */
.mansion_top_search:not(.list_pattern) { display: flex; flex-direction: column; }
.mansion_top_search:not(.list_pattern) > :nth-child(1)  { order: 0; }  /* 保存条件(非表示) */
.mansion_top_search:not(.list_pattern) > :nth-child(2)  { order: 1; }  /* フリーワード */
.mansion_top_search:not(.list_pattern) > :nth-child(3)  { order: 2; }  /* エリア/路線 */
.mansion_top_search:not(.list_pattern) > :nth-child(8)  { order: 3; }  /* 価格(範囲) */
.mansion_top_search:not(.list_pattern) > :nth-child(9)  { order: 4; }  /* 価格(ラジオ) */
.mansion_top_search:not(.list_pattern) > :nth-child(6)  { order: 5; }  /* 利回り(範囲) */
.mansion_top_search:not(.list_pattern) > :nth-child(7)  { order: 6; }  /* 利回り(ラジオ) */
.mansion_top_search:not(.list_pattern) > :nth-child(10) { order: 7; }  /* 築年数 */
.mansion_top_search:not(.list_pattern) > :nth-child(11) { order: 8; }  /* 駅徒歩 */
.mansion_top_search:not(.list_pattern) > :nth-child(12) { order: 9; }  /* 専有面積(範囲) */
.mansion_top_search:not(.list_pattern) > :nth-child(13) { order: 10; } /* 専有面積(ラジオ) */
.mansion_top_search:not(.list_pattern) > :nth-child(4)  { order: 11; } /* 公開情報(表示) */
.mansion_top_search:not(.list_pattern) > :nth-child(5)  { order: 12; } /* 公開日 */
.mansion_top_search:not(.list_pattern) > :nth-child(14) { order: 13; } /* 詳細条件 toggle */
.mansion_top_search:not(.list_pattern) > :nth-child(15) { order: 14; } /* 詳細条件 中身 */
.mansion_top_search:not(.list_pattern) > :nth-child(16) { order: 15; } /* 詳細条件 ラベル */
.mansion_top_search:not(.list_pattern) > :nth-child(17) { order: 16; } /* 該当件数+検索+保存 */
.mansion_top_search:not(.list_pattern) > :nth-child(18) { order: 17; }

/* 区切線を全て「全幅ブロックの下線」で統一(方式・上下余白16pxをそろえる)。
   線を出す位置=各グループ末尾ブロックの下: エリア/路線(3)/利回りラジオ(7)/専有面積ラジオ(13)/公開日(5)。
   → グループ: {価格・利回り} {築年数・駅徒歩・専有面積} {表示・公開日} と 詳細条件 を区切る。
   詳細条件ラベルには一切触らない(矢印ズレ・短い線を防ぐ)。 */
.m_search .search_item_choices,
.m_search .search_item_range { border-bottom: none; }
.mansion_top_search:not(.list_pattern) > :nth-child(3),
.mansion_top_search:not(.list_pattern) > :nth-child(7),
.mansion_top_search:not(.list_pattern) > :nth-child(13),
.mansion_top_search:not(.list_pattern) > :nth-child(5) {
	border-bottom: 1px solid #cccccc;
	padding-bottom: 6px;
	margin-bottom: 16px;
}
/* 価格の線=エリア/路線(3)はボタンが密着(下余白なし)で線が近すぎるため、
   ラジオ系ブロック(ul下余白 約17px)と揃うよう padding-bottom を増やして同じ見た目にする。 */
.mansion_top_search:not(.list_pattern) > :nth-child(3) { padding-bottom: 23px; }

/* プルダウン(select)内の文字サイズを少し小さく */
.m_search select { font-size: 0.9em; }

/* プルダウン(範囲)の下余白を詰め、直下のラジオ(second_pattern)を近づける(PCレイアウト用)。
   SPはレイアウトが異なるためPC限定にする。 */
@media screen and (min-width: 769px) {
	.m_search .search_item_range { padding-bottom: 2px; }
	.mansion_top_search > .search_item.second_pattern { margin-top: -10px; }
}

/* 利回り(6)・公開日(5)は手前がラジオ/チェックボックスでその下に余白が残り、
   見出し上の間隔が大きくなるため詰める(手前が select の 駅徒歩/専有面積 と揃える)。
   ※PCレイアウト用の調整。SP(768px以下)ではレイアウトが異なり詰めすぎで見切れるためPC限定。 */
@media screen and (min-width: 769px) {
	.mansion_top_search:not(.list_pattern) > :nth-child(5) { margin-top: -16px; }
	/* 詳細条件アコーディオン内の2つ目以降(=建物構造)も同様に詰める。 */
	.mansion_top_search .tgl_cont .search_item + .search_item { margin-top: -16px; }
}

/* ページネーション直下の注記(※空室もしくは...)がボタンから離れすぎな問題はSPのみ対応済みだったが、
   PCでも同様に離れていた(実測: ボタン→注記82px、注記→バナー33.6px)。原因は.page_navが二重に
   ネストしており下paddingが二重に効いていたため。バナーとの間隔(33.6px)に揃うよう
   実測して調整する(38.3em→14pxで2箇所分=48px減、82px→約34pxになることを確認済み)。 */
@media screen and (min-width: 769px) {
	.page_nav { padding-bottom: 14px; }
}

/* 検索テキスト入力内の虫メガネ(検索ボタン)アイコンを少し小さく(ボタン枠・クリック領域は維持)。
   入力枠を小さくした分、絶対配置(top:-7.92px)のままだと上ズレするので、縦中央に配置し直す。 */
.m_search .freeword_btn {
	background-size: 18px;
	background-position: center;
	top: 50%;
	bottom: auto;
	transform: translate(4px, -50%);
}

/* テキスト入力枠(物件名・所在地など)の高さを少し小さく(上下paddingを縮小) */
.m_search #free_word { height: auto; padding-top: 8px; padding-bottom: 8px; }

/* チェックボックス(公開/会員限定 等)の角を2px丸く。ラジオ(円形)には適用しない。 */
.m_search input[type="checkbox"] + label.check { border-radius: 2px; }

/* チェックボックス・ラジオ(.check)を少し小さく。width/heightで縮めると選択マーク(::after=✓や●)が
   元サイズのままはみ出すため、箱ごとtransformで等倍縮小する(マークも一緒に縮む)。 */
.m_search label.check { transform: scale(0.85); }

/* 上部の「この条件を保存」リンク(m_search_save)は下部の白ボタンと重複するため非表示 */
.m_search .m_search_save { display: none; }

/* 申込みバナーはリスト末尾へ移動＆状態クラスfixedを除去済み。通常フローで表示し、
   緑背景を削除、フッターとの間にマージン。JS(script.js)が付ける固定・上移動を無効化するため
   位置/transformは!importantで固定する。 */
.fix_cp {
	position: static !important;
	top: auto !important;
	bottom: auto !important;
	transform: none !important;
	/* スクロールに応じたfadeIn/fadeOut(script.js)は使わず、PC/SP問わず常時表示にする */
	display: block !important;
	background: none;
	margin-bottom: 40px;
	/* 共有CSSのcontent-visibility:autoは、画面外判定に応じてブラウザが描画を省略/再開する最適化だが、
	   内部のimg(loading="lazy")と組み合わさるとスクロール中に再描画が繰り返され点滅して見えることがある。
	   このページ限定で無効化する。 */
	content-visibility: visible;
}
/* 元は position:fixed で画面下に現れる際の演出だったbounceアニメーション(.fix_cp.fixed)は、
   既にposition:staticの通常フロー表示にしているため不要。無効化する。 */
.fix_cp.fixed { animation: none; }
/* ::beforeに光が3回走る「シャイン」演出(animation: shine 1s; animation-iteration-count: 3;)があり、
   これが点滅に見えていた本体。不要なため無効化する。 */
.fix_cp::before { animation: none; }
.fix_cp a, .fix_cp img { transform: none !important; }
/* オンマウスでシャドウを出さない(hover含め全状態で無効) */
.fix_cp, .fix_cp a, .fix_cp img { box-shadow: none !important; }
/* hoverで上に動く挙動はやめ、代わりに少し透過する */
.fix_cp a { transition: opacity 0.15s; }
.fix_cp a:hover { opacity: 0.85; }

/* 検索ボタンの下に追加した「この条件を保存」白ボタン(検索ボタンと同幅・白ベース) */
.m_search .fix_btn { flex-wrap: wrap; }
.m_search .fix_btn .save_cond_btn {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	box-sizing: border-box;
	margin-top: 12px;
	padding: 0.5em 1em;
	text-align: center;
	background: #fff;
	color: #007a8e;
	border: 1px solid #007a8e;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}
/* オンマウスで反転(背景ティール・文字白) */
.m_search .fix_btn .save_cond_btn:hover { background: #007a8e; color: #fff; }

/* SP限定: 「この条件を保存」ボタンの横幅を狭く(内容幅+左右padding・中央寄せ)。PC(769px以上)は全幅のまま。 */
@media screen and (max-width: 768px) {
	.m_search .fix_btn .save_cond_btn {
		width: auto;
		flex: 0 0 auto;
		align-self: center;
		padding-left: 2.5em;
		padding-right: 2.5em;
	}
}

/* 検索ボタン(teal)のオンマウス時の色をもう少し濃く+シャドウ消す */
.m_search .fix_btn .btn.green { transition: background-color 0.15s; }
.m_search .fix_btn .btn.green:hover { background: #005c6a; box-shadow: none; }

/* 下限/上限プルダウンの行は折り返さず、プルダウンを縮小可能にして「下限 〜 上限」を横1行に収める */
.m_search .search_item_range { flex-wrap: nowrap; align-items: center; }
.m_search .search_item_range .pulldown { flex: 1 1 0; min-width: 0; }
.m_search .search_item_range .pulldown select { width: 100%; box-sizing: border-box; }
/* 価格の下限/上限プルダウンの間に入れた「〜」を中央に配置 */
.m_search .range_sep { flex: 0 0 auto; align-self: center; margin: 0 0.3em; color: #666; }

/* 物件一覧の見出し帯: グレー背景(共有mansion.css の #fafafa)と左paddingを、このページだけ除去する */
.m_search_conditions { background: none; padding-left: 0; }
/* エリア/路線/検索条件モーダルのドラッグハンドル・戻るリンクはSPのハーフモーダル専用。PCでは非表示 */
.search_modal .modal_handle,
.search_modal .modal_back,
.m_search .modal_handle,
.m_search .modal_back { display: none; }
/* ===== SP(768px以下)限定の調整。PC(769px以上)・他ページには影響しない ===== */
@media screen and (max-width: 768px) {
	/* コンテンツエリア(見出し+件数+リスト)を左右20px内側に。検索モーダル(.m_search)は別要素で無影響 */
	.m_search_result { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
	/* 検索モーダル起動ボタン群のエリアに背景色#f1f5f6・角丸。背景が見えるよう内側にpadding */
	.m_search_modal_btns { background: #f1f5f6; border-radius: 8px; padding: 14px 16px; }
	/* 「検索条件を指定する」もハーフモーダル化(エリア/路線と同じ考え方)。
	   ">"で.m_search直下のtgl_cont(モーダル本体)だけに限定する(内部に「詳細条件を指定する」用の
	   ネストしたtgl_cont(#search_option_sw)が別途あり、限定しないとそちらも巻き込んで壊れるため)。 */
	.m_search > .tgl_cont {
		display: block !important;
		visibility: hidden;
		pointer-events: none;
	}
	.m_search > input.tgl_sw:checked ~ .tgl_cont {
		visibility: visible;
		pointer-events: auto;
	}
	.m_search .modal_cont {
		bottom: 0;
		top: auto;
		max-height: 80vh;
		border-radius: 12px 12px 0 0;
		box-sizing: border-box;
		transform: translateY(100%);
		transition: transform 0.3s ease;
	}
	.m_search > input.tgl_sw:checked ~ .tgl_cont .modal_cont { transform: translateY(0); }
	.m_search .modal_inner { max-height: 80vh; padding-bottom: 110px; box-sizing: border-box; overscroll-behavior: contain; }
	/* 見た目・余白は元の状態(56x4px、margin: 0 auto 0.9em)のまま維持し、タップ判定だけを
	   ::beforeで前後左右に拡張する(絶対配置なのでレイアウト・マージンには影響しない)。
	   4pxのまま当たり判定も同じだと実機で指が外れ、modal_innerの方が触れて背景がスクロール
	   してしまう不具合があったための対策 */
	.m_search .modal_handle {
		display: block;
		position: relative;
		width: 56px;
		height: 4px;
		margin: 0 auto 0.9em;
		border-radius: 2px;
		background: #ccc;
		cursor: grab;
		touch-action: none;
	}
	.m_search .modal_handle::before {
		content: "";
		position: absolute;
		top: -12px;
		bottom: -12px;
		left: -160px;
		right: -160px;
	}
	/* 背景オーバーレイの色・✕ボタンをエリア/路線と揃える(黒背景・✕は廃止。背景タップとドラッグハンドルで閉じられる) */
	.m_search .modal_bg { background: rgba(0, 0, 0, 0.6); }
	.m_search .modal_close { display: none; }
	/* 「戻る」リンクもエリア/路線と同じ仕様(下部ボタン行の左下)に揃える */
	.m_search .fix_btn .modal_back {
		display: block;
		position: absolute;
		left: 0.9em;
		top: 50%;
		transform: translateY(-50%);
		margin: 0 0 0 1em;
		color: #007a8e;
		font-size: 0.9em;
	}
	/* バナー下 facet_nav の「エリアから探す/検索条件から探す」見出しの上下padding */
	#facet_nav .ctgr_ttl { padding-top: 0.9em; padding-bottom: 0.9em; padding-left: 0.9em; }
	/* padding-topを追加した影響でくの字マークが上寄りに見えるため位置を補正 */
	#facet_nav .ctgr_ttl::after { top: 0.9em; }
	/* 「エリアから探す」「検索条件から探す」を1つの角丸四角で囲み、2つの横長ボタンのように見せる。
	   内側の区切り線は共有CSSのctgr_ttl border-bottomをそのまま利用し、外枠と重複する
	   最後の項目・facet_nav自体の上罫線だけ打ち消す。 */
	/* バナー下の「エリアから探す」「検索条件から探す」は不要のため非表示 */
	#facet_nav { display: none; }
	/* 冒頭の検索ボタン(エリア/路線/検索条件指定)が画面外に出たら、同じ3ボタンを
	   画面下端に横一列で追従表示する(IntersectionObserverでis-visibleを付け外し)。 */
	.sticky_search_btns {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 200;
		display: flex;
		flex-direction: row;
		gap: 8px;
		margin: 0;
		padding: 10px 20px;
		background: #f1f5f6;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
		transform: translateY(100%);
		transition: transform 0.25s ease;
		box-sizing: border-box;
	}
	.sticky_search_btns.is-visible { transform: translateY(0); }
	.sticky_search_btns .btn { flex: 1 1 0; margin: 0; width: auto; line-height: 1.2; padding-top: 0.5em; padding-bottom: 0.5em; border-radius: 0.6em; }
	#facet_nav .inner { border: 1px solid #cfd8dc; border-radius: 8px; overflow: hidden; }
	#facet_nav .ctgr:last-child .ctgr_ttl { border-bottom: none; }
	/* アコーディオンの開閉をアニメーションにする(display:none⇔blockは遷移できないため
	   max-heightのtransitionに置き換える。#facet_nav限定で他のtgl_sw箇所には影響しない) */
	#facet_nav .tgl_cont {
		display: block !important;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	#facet_nav .tgl_sw:checked ~ .tgl_cont { max-height: 450px; }
	/* 末尾バナーはトリミング・罫線なしでそのまま表示(display:block!importantはPC/SP共通のベース側に移動) */
	.fix_cp #fix_bnr_cpn { display: block; }
	/* ページネーションが左右20px余白からはみ出さないよう内側に収める */
	.m_search_result .pager, .m_search_result .page_nav { max-width: 100%; box-sizing: border-box; }
	/* ページネーションの実体は.page_nav ul(7ボタン分の幅が350pxの表示幅を超え左右に均等にはみ出していた)。
	   flex-wrapを効かせて折り返す */
	/* 7ボタン(必要幅約383px)が表示幅350pxに収まるようliの左右マージンを縮小し、折り返さず1行にする */
	.page_nav ul { flex-wrap: nowrap; }
	.page_nav li { margin: 0 0.4em; }
	/* ボタンを正方形にする(幅=高さ=2.2em、paddingは0にしてdisplay:flexで中央揃え)。
	   widthのみ他のルールに上書きされていたため!importantで確実に適用する */
	.page_nav a, .page_nav span {
		width: 2.2em !important;
		height: 2.2em;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* 注記(※空室もしくは...)がボタンから離れすぎ(実測73px、注記→バナー間21.6pxと不均等)なため、
	   page_navの下paddingを詰めて近づける */
	.page_nav { padding-left: 0; padding-right: 0; padding-bottom: 10px; }
	/* 「※空室もしくは...」注記が改行しないよう文字を少し小さく */
	.m_list_note { font-size: 0.72em; }
	/* 「エリアから探す」「路線から探す」をハーフモーダル(画面下からのボトムシート)にする。
	   対象は.search_modalのみ(#search_area_sw/#search_line_sw)。「検索条件を指定する」
	   (#m_search_modal、別クラス.m_search)には触れない。 */
	.search_modal .modal_cont {
		top: auto;
		bottom: 0;
		max-height: 80vh;
		border-radius: 12px 12px 0 0;
		box-sizing: border-box;
	}
	/* modal_innerは共有CSSのmax-height: calc(100vh - 4em)のままで、80vhに縮めたmodal_contより
	   大きいため画面外まではみ出していた(overflow:visibleで下にはみ出し、最後の項目が見えない/押せない)。
	   modal_contと同じ上限に揃え、さらに下部固定の検索ボタン(modal_fix_btn、実測高さ約77.5px)
	   に隠れないよう十分な余白を確保する */
	.search_modal .modal_inner { max-height: 80vh; padding-bottom: 8em; box-sizing: border-box; overscroll-behavior: contain; }
	/* display:none⇔blockのままではtransitionできないため、.search_modal限定でvisibility+transformに置き換える
	   (#facet_navのmax-height transitionと同じ考え方。他のtgl_sw箇所には影響しない) */
	/* ">"で.search_modal直下のtgl_cont(モーダル本体)だけに限定する。
	   限定しないと「路線から探す」内の路線ごとの「駅を選択」アコーディオン(同じ.tgl_cka要素)にも
	   誤って適用され(同じ.tgl_contクラス)、閉じていてもvisibility:hiddenで高さだけ残り巨大な空白ができるため。 */
	.search_modal > .tgl_cont {
		display: block !important;
		visibility: hidden;
		pointer-events: none;
	}
	.search_modal > input.tgl_sw:checked ~ .tgl_cont {
		visibility: visible;
		pointer-events: auto;
	}
	.search_modal .modal_cont {
		transform: translateY(100%);
		transition: transform 0.3s ease;
	}
	.search_modal > input.tgl_sw:checked ~ .tgl_cont .modal_cont { transform: translateY(0); }
	/* 背景オーバーレイの色をニュートラルな黒に(共有CSSは深緑rgba(0,44,51,0.7)) */
	.search_modal .modal_bg { background: rgba(0, 0, 0, 0.6); }
	/* シート上端のドラッグハンドル(下にドラッグで閉じる。JS本体は末尾scriptで.search_modal共通処理)。
	   見た目・余白は元の状態(56x4px、margin: 0 auto 0.9em)のまま維持し、タップ判定だけを
	   ::beforeで前後左右に拡張する(絶対配置なのでレイアウト・マージンには影響しない)。
	   4pxのまま当たり判定も同じだと実機で指が外れ、modal_innerの方が触れて背景がスクロール
	   してしまう不具合があったための対策 */
	.search_modal .modal_handle {
		display: block;
		position: relative;
		width: 56px;
		height: 4px;
		margin: 0 auto 0.9em;
		border-radius: 2px;
		background: #ccc;
		cursor: grab;
		touch-action: none;
	}
	.search_modal .modal_handle::before {
		content: "";
		position: absolute;
		top: -12px;
		bottom: -12px;
		left: -160px;
		right: -160px;
	}
	/* 右上の✕は廃止(戻るリンクに一本化) */
	.search_modal .modal_close { display: none; }
	/* ハーフモーダル下部の検索ボタンはテキスト幅に合わせて縮める(共有.btnのwidth:100%を上書き)。
	   「戻る」リンクは同じ行の左下に固定配置(✕の代わりに閉じる導線として機能) */
	.search_modal .modal_fix_btn { position: absolute; text-align: center; }
	.search_modal .modal_fix_btn .btn {
		display: inline-block;
		width: auto;
		max-width: none;
		padding: 1em 2em;
	}
	.search_modal .modal_fix_btn .modal_back {
		display: block;
		position: absolute;
		left: 0.9em;
		top: 50%;
		transform: translateY(-50%);
		margin: 0 0 0 1em;
		color: #007a8e;
		font-size: 0.9em;
	}
	/* エリア一覧の列が右まで伸びず余白ができる問題を修正。
	   ネストしたem縮小(.m_search { font-size: .92em } 等)の影響でminmax(100px, 8em)の
	   最小・最大がほぼ同値(約100px)になり列が広がらないため、最大値をfrにして残り幅へ均等配分する */
	.search_modal .area_search .search_item_choices {
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	}
}