/*
 * jjc/top-search（旧サイト style.css の #top_search・#top_search_result の値を写す）
 * PC（ブロックの幅が 1220px 以上＝container: jjc-top-search）：中身 1200px（検索結果のカード 5 列と同じ幅）、
 *   左 537px（タイル 171×171 の 3×2：賃貸・駐車場・戸建／マンション・土地・収益）、右 640px、間 23px。
 *   旧サイトは 4 種別（2×2・左 368px・右 656px・中身 1072px）だった。3 列にした分、中身を広げ、右の地図の左の余白を 16px 詰めた。
 *   検索結果はカード 226px の 5 列（間 17px）。
 * それより狭い幅：左右を縦に積み、タイルは 3 列のまま縮め、カードは折り返す。viewport の @media は使わない。
 */
.jjc-top-search {
	container: jjc-top-search / inline-size;
	color: #000;
	font-size: 13px;
	letter-spacing: 0.1em;
	line-height: 1.6;
}

.jjc-top-search button {
	font: inherit;
	letter-spacing: inherit;
	cursor: pointer;
}

.jjc-top-search__inner {
	display: grid;
	gap: 24px;
	box-sizing: border-box;
	max-inline-size: 1072px;
	margin-inline: auto;
	padding: 0 var(--onestar-gutter, 1rem) 40px;
}

/* 左：種別のタイル */
.jjc-top-search__types {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 171px));
	justify-content: center;
	gap: 12px;
}

.jjc-top-search__note {
	grid-column: 1 / -1;
	margin: 0;
	padding: 23px 0 10px;
	text-align: center;
	line-height: 2;
}

.jjc-top-search__type {
	position: relative;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	background: none;
}

.jjc-top-search__type img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.jjc-top-search__type-on,
.jjc-top-search__type.is-active .jjc-top-search__type-off,
.jjc-top-search__type:hover .jjc-top-search__type-off {
	display: none !important;
}

.jjc-top-search__type.is-active .jjc-top-search__type-on,
.jjc-top-search__type:hover .jjc-top-search__type-on {
	display: block !important;
}

.jjc-top-search__type:focus-visible {
	outline: 3px solid var(--jjc-c-navy, #243684);
	outline-offset: 2px;
}

/* 文字は絵の中にあるので、読み上げ用にだけ残す */
.jjc-top-search__type-label,
.jjc-top-search__kinds legend,
.jjc-top-search__layouts legend {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 右：タブ（点線の水色の台・#073B87 のボタン） */
.jjc-top-search__box {
	min-inline-size: 0;
}

.jjc-top-search__tabs > div {
	display: inline-block;
	margin-block-end: 20px;
	padding: 6px 14px 5px;
	border-radius: 6px;
	background: url("images/dotted.png") repeat;
}

.jjc-top-search__tabs button {
	display: inline-block;
	margin: 0;
	padding: 5px 18px 3px;
	border: 0;
	border-radius: 5px;
	background: var(--jjc-c-blue, #073b87);
	color: #fff;
	font-weight: 700;
}

.jjc-top-search__tabs .jjc-top-search__osusume {
	display: none;
	opacity: 0.1;
	cursor: default;
}

.jjc-top-search.is-sale .jjc-top-search__osusume {
	display: inline-block;
}

/* 旧サイトはボタンの間に改行（約 5px）がある */
.jjc-top-search__tabs button + button {
	margin-inline-start: 5px;
}

/* チップの行：高さ 50px・下に 3px の紺の線。旧サイトのチップは inline の 38px で、行の上から 6px の所に並ぶ */
.jjc-top-search__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 6px 5px;
	min-block-size: 50px;
	padding: 6px 0 3px 16px;
	border-block-end: 3px solid var(--jjc-c-navy, #243684);
	box-sizing: border-box;
}

.jjc-top-search__chips[hidden],
.jjc-top-search__chips button[hidden] {
	display: none;
}

.jjc-top-search__chips button {
	margin: 0;
	padding: 8px 10px 6px 12px;
	line-height: 20px;
	border: 2px solid #fff;
	background: #fff;
	color: #000;
}

.jjc-top-search__chips button:hover {
	color: var(--jjc-c-pink3, #f5004f);
}

.jjc-top-search__chips button.is-active {
	border-color: var(--jjc-c-pink3, #f5004f);
	color: var(--jjc-c-pink3, #f5004f);
}

/* 地図・件数・種別と間取り */
.jjc-top-search__map-box {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 150px;
	gap: 12px;
	padding-block-start: 16px;
}

.jjc-top-search__kinds,
.jjc-top-search__layouts {
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.jjc-top-search__layouts {
	block-size: 96px;
	overflow-y: auto;
}

.jjc-top-search.is-sale .jjc-top-search__kinds,
.jjc-top-search.is-sale .jjc-top-search__layouts {
	visibility: hidden;
}

/* ラジオ（旧サイト .label-radio：未選択は丸、選ぶとピンクのチェック・紺の太字） */
.jjc-top-search__radio {
	position: relative;
	display: flex;
	align-items: center;
	gap: 15px;
	margin-block-end: 0.6em;
	font-size: 1.1em;
	cursor: pointer;
}

.jjc-top-search__radio input {
	flex: none;
	inline-size: 18px;
	block-size: 18px;
	margin: 0;
	border: 1px solid #99a7bb;
	border-radius: 50%;
	background: #fff;
	appearance: none;
	transition: all 0.4s;
}

.jjc-top-search__radio input:checked {
	inline-size: 8px;
	block-size: 16px;
	margin-inline: 6px 4px;
	border-width: 0 4px 4px 0;
	border-color: var(--jjc-c-pink, #f6115d);
	border-radius: 0;
	background: transparent;
	transform: rotate(40deg) translateY(-2px);
}

.jjc-top-search__radio input:checked + span {
	color: var(--jjc-c-navy, #243684);
	font-weight: 700;
}

.jjc-top-search__radio input:focus-visible {
	outline: 2px solid var(--jjc-c-navy, #243684);
	outline-offset: 3px;
}

.jjc-top-search__map {
	position: relative;
	grid-column: 1 / -1;
	justify-self: center;
	inline-size: min(100%, 376px);
}

.jjc-top-search__map img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* 件数の吹き出し：76×56（ピンクの丸＋「件」は画像）、数字 30px 白 */
.jjc-top-search__num {
	position: absolute;
	inset-block-start: 130px;
	inset-inline-start: 190px;
	inline-size: 76px;
	block-size: 56px;
	margin: 0;
	background: url("images/num.png") no-repeat;
	transition: top 0.3s, left 0.3s;
}

.jjc-top-search__count {
	display: block;
	inline-size: 56px;
	block-size: 56px;
	color: #fff;
	font-size: 30px;
	letter-spacing: 0;
	line-height: 62px;
	text-align: center;
	white-space: nowrap;
}

/* 3 桁以上（例：139）は丸からはみ出して折り返すので、字を小さくする（旧サイトは「16」までしか見えていなかった） */
.jjc-top-search__count[data-digits="3"],
.jjc-top-search__count[data-digits="4"] {
	font-size: 22px;
}

.jjc-top-search__unit {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* 検索結果（淡い青の帯・見出しの画像・白いカード） */
.jjc-top-search__result {
	padding-block-end: 20px;
	background: var(--jjc-c-pale2, #e4eaf3);
}

.jjc-top-search__heading {
	inline-size: min(100%, 308px);
	margin: 0 auto 30px;
}

.jjc-top-search__heading img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.jjc-top-search__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: 17px;
	box-sizing: border-box;
	max-inline-size: 1200px;
	min-block-size: 288px;
	margin: 0 auto;
	padding: 0 var(--onestar-gutter, 1rem);
	list-style: none;
}

.jjc-top-search__card a {
	display: grid;
	align-content: start;
	block-size: 100%;
	box-sizing: border-box;
	padding: 5px 0 15px 5px;
	background: #fff;
	color: #000;
	text-decoration: none;
	transition: background-color 0.3s;
}

.jjc-top-search__card a:hover,
.jjc-top-search__card a:focus-visible {
	background: gold;
}

.jjc-top-search__thumb {
	display: block;
	inline-size: calc(100% - 5px);
	aspect-ratio: 216 / 144;
	overflow: hidden;
	background: #f3f3f3;
}

.jjc-top-search__thumb img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center top;
}

.jjc-top-search__name {
	padding-block-end: 10px;
	text-align: center;
}

.jjc-top-search__name span {
	border-block-end: 2px solid var(--jjc-c-navy, #243684);
	font-size: 16px;
	font-weight: 700;
	line-height: 2em;
}

.jjc-top-search__rent {
	padding-inline-start: 20px;
	font-family: var(--jjc-font-round, inherit);
	font-size: 17px;
	font-weight: 700;
}

.jjc-top-search__rent span {
	font-size: 1.4em;
}

.jjc-top-search__address {
	padding-inline-start: 20px;
	font-size: 12px;
}

.jjc-top-search__catch {
	padding: 1rem 1rem 0;
}

/* カードの行の位置をそろえる（2026-11-06 宮古・石垣から：概要文の長さでガタガタだった）。
   名前は 2 行まで、所在地は 1 行、概要文（キャッチコピー）は 3 行まで（石垣の平均が 3 行）で「…」。行が無くても高さを取る。全文は物件のページに */
@container jjc-top-search (inline-size >= 48rem) {
	.jjc-top-search__name,
	.jjc-top-search__address,
	.jjc-top-search__catch {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
	}

	.jjc-top-search__name {
		-webkit-line-clamp: 2;
		block-size: 4.5em;
		align-content: center;
	}

	/* 価格の行は、数字（1.4 倍・行の高さ 1.6）を出すときの 1 行分を最低の高さに（文字だけ・空のときも同じ高さ）。
	   「8,000円～1.2万円」など長くて折り返すときは伸ばす（次の行に重ねない） */
	.jjc-top-search__rent {
		min-block-size: calc(1.4em * 1.6);
		line-height: 1.6;
	}

	.jjc-top-search__land {
		min-block-size: 1.6em;
	}

	.jjc-top-search__address {
		-webkit-line-clamp: 1;
		padding-inline-end: 8px;
		line-height: 1.6;
	}

	.jjc-top-search__catch {
		-webkit-line-clamp: 3;
		block-size: calc(1.6em * 3);
		margin-block-start: 1rem;
		padding-block: 0;
		line-height: 1.6;
	}
}

/* 売買物件のカード：土地面積（.l_menseki）と、写真の上の「商談中」（.home .syoudancyuu：上から 52px） */
.jjc-top-search__land {
	padding-inline-start: 20px;
}

.jjc-top-search__thumb {
	position: relative;
}

.jjc-top-search__talks {
	position: absolute;
	inset: 52px 0 auto;
	padding: 1px 0;
	border-block: 1px solid #fff;
	text-align: center;
}

.jjc-top-search__talks span {
	display: block;
	padding: 0.5em 0 0.3em 0.2em;
	background: rgb(255 255 255 / 0.8);
	color: var(--jjc-c-pink2, #d90f52);
	font-size: 23.4px;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1;
	text-shadow: 0 0 1px #fff;
}

/* 「すべて見る」：#F6115D の 4px の帯の内側に白い 1px の枠 */
.jjc-top-search__btn-area {
	margin: 0;
	padding: 20px;
	text-align: center;
}

.jjc-top-search__showall {
	display: inline-block;
	margin-block-start: 30px;
	padding: 4px;
	background: #e2004b;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.3s;
}

.jjc-top-search__showall:hover,
.jjc-top-search__showall:focus-visible {
	background: var(--jjc-c-pink-light, #ff689a);
}

.jjc-top-search__showall span {
	display: block;
	padding: 0 2.4em;
	border: 1px solid #fff;
	font-size: 1.6em;
	font-weight: 700;
	line-height: 2.2em;
}

/* PC 版（旧サイトの寸法。タイルが 3 列になった分、中身は 1200px） */
@container jjc-top-search (inline-size >= 1220px) {
	/* 旧サイト：左右とも高さ 408px（右は 12px はみ出す）＋下 40px */
	.jjc-top-search__inner {
		max-inline-size: 1200px;
		grid-template-columns: 537px 640px;
		/* 地域のチップが 2 段以上になる店（石垣）では、その分だけ伸ばす（地図が下の「検索結果」に重ならないように） */
		grid-template-rows: minmax(408px, auto);
		justify-content: space-between;
		gap: 0;
		padding-inline: 0;
	}

	/* 右の中身は 420px（旧サイトどおり 12px はみ出す）、左のタイルの塊は 413px（5px はみ出す）。
	   はみ出しの分は行の高さに数えない（宮古は 408px のまま。2026-11-03 宮古のテストサイトで測定） */
	.jjc-top-search__box {
		margin-block-end: -12px;
	}

	.jjc-top-search__types {
		margin-block-end: -5px;
	}

	.jjc-top-search__types {
		grid-template-columns: repeat(3, 171px);
		justify-content: start;
		gap: 12px;
		align-content: start;
	}

	/* 案内文はタイルの塊の中央。タイルとの間はグリッドの 12px を打ち消して 0 */
	.jjc-top-search__note {
		margin: 0 0 -12px;
	}

	/* 地図の上 26px を箱の外へ出し、種別と間取りを地図の上端にそろえる（旧サイトは margin の相殺でこうなる） */
	.jjc-top-search__map-box {
		display: block;
		block-size: 284px;
		margin-block-start: 26px;
		padding: 0;
	}

	/* 旧サイトと同じく、文字は地図の上に重ねる */
	.jjc-top-search__kinds,
	.jjc-top-search__layouts {
		z-index: 1;
	}

	.jjc-top-search__kinds {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
	}

	.jjc-top-search__layouts {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		inline-size: 150px;
	}

	/* 狭い幅用の justify-self: center は block の並びでも効くので、PC では start に戻す */
	.jjc-top-search__map {
		justify-self: start;
		inline-size: 376px;
		margin: 0 0 0 108px;
	}

}

/* 検索結果のカード 226px の 5 列（間 17px）は合計 1198px 要るので、ブロックが 1200px 以上のときだけ */
@container jjc-top-search (inline-size >= 1200px) {
	.jjc-top-search__list {
		grid-template-columns: repeat(5, 226px);
		justify-content: start;
		padding: 0;
	}

	.jjc-top-search__thumb {
		inline-size: 216px;
		block-size: 144px;
	}
}

/*
 * スマホ版（旧サイト style-mobile.css の #top_search_btns・#mob_top_search・.whitebox・#mob_top_chintai_list）。
 * ブロックの幅が 48rem 未満のとき：紺の見出しの帯「物件を探す」→ 横長の絵の 2 列×3 段 → （絵を選ぶと）「詳細検索」の select と検索結果 → 「新着 賃貸物件」。
 * PC 版にはこれらの見出し・select・新着は出さない。
 */
.jjc-top-search__band,
.jjc-top-search__sp,
.jjc-top-search__new {
	display: none;
}

.jjc-top-search .jjc-top-search__type .jjc-top-search__sp-img {
	display: none !important;
}

@container jjc-top-search (inline-size < 48rem) {
	.jjc-top-search {
		font-size: 15px;
	}

	/* 紺の見出しの帯（旧サイト .mob_heading：18px 太字・上下 1em） */
	.jjc-top-search__band {
		display: block;
		margin: 0;
		padding: 1em 0;
		background: var(--jjc-c-navy, #243684);
		color: #fff;
		font-family: inherit;
		font-size: 18px;
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 21px;
		text-align: center;
	}

	.jjc-top-search__inner {
		display: block;
		max-inline-size: none;
		padding: 0;
	}

	.jjc-top-search__note,
	.jjc-top-search__box,
	.jjc-top-search__heading,
	.jjc-top-search__catch {
		display: none;
	}

	/* 絵の 2 列×3 段（賃貸・駐車場／戸建・マンション／土地・収益）：幅 49%、行の間 3px、すき間は紺 */
	.jjc-top-search__types {
		display: grid;
		grid-template-columns: 49% 49%;
		justify-content: space-between;
		gap: 3px 0;
		background: var(--jjc-c-navy, #243684);
	}

	.jjc-top-search__type {
		aspect-ratio: auto;
	}

	.jjc-top-search .jjc-top-search__type img:not(.jjc-top-search__sp-img) {
		display: none !important;
	}

	.jjc-top-search .jjc-top-search__type .jjc-top-search__sp-img.jjc-top-search__type-off {
		display: block !important;
	}

	/* 旧サイトのスマホ版は、絵を選ぶまでどれも選ばれていない見た目 */
	.jjc-top-search.is-picked .jjc-top-search__type.is-active .jjc-top-search__sp-img.jjc-top-search__type-off {
		display: none !important;
	}

	.jjc-top-search.is-picked .jjc-top-search__type.is-active .jjc-top-search__sp-img.jjc-top-search__type-on {
		display: block !important;
	}

	/* 詳細検索と検索結果は、絵を選んでから */
	.jjc-top-search__result {
		display: none;
		padding: 0;
		background: none;
	}

	.jjc-top-search.is-picked .jjc-top-search__sp,
	.jjc-top-search.is-picked .jjc-top-search__result,
	.jjc-top-search__new {
		display: block;
	}

	/* select の段：淡い青、見出しの文字の上に透明の select（旧サイト .mob_search） */
	.jjc-top-search__sp-row {
		display: flex;
		justify-content: space-between;
		padding: 20px 0 0;
		background: var(--jjc-c-pale2, #e4eaf3);
	}

	.jjc-top-search__sp-row--last {
		justify-content: center;
		padding: 20px 0;
	}

	.jjc-top-search__sp-select {
		position: relative;
		inline-size: 50%;
		color: var(--jjc-c-navy, #243684);
		text-align: center;
	}

	.jjc-top-search__sp-select:not(:last-child) {
		border-inline-end: 1px solid var(--jjc-c-navy, #243684);
	}

	.jjc-top-search.is-sale [data-rent-only] {
		display: none;
	}

	.jjc-top-search__sp-select select {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		font-size: 16px;
		opacity: 0;
		cursor: pointer;
	}

	.jjc-top-search__sp-select:focus-within {
		outline: 2px solid var(--jjc-c-navy, #243684);
		outline-offset: 2px;
	}

	.jjc-top-search__sp-count {
		padding-inline-start: 1em;
	}

	/* 検索結果・新着のカード（旧サイト .whitebox：左に 124px の写真、右に名前・賃料・住所、右端に「>」） */
	.jjc-top-search__list {
		display: block;
		min-block-size: 0;
		max-inline-size: none;
		padding: 0;
	}

	.jjc-top-search__result .jjc-top-search__list {
		min-block-size: 320px;
	}

	.jjc-top-search__card a {
		position: relative;
		display: block;
		min-block-size: 113px;
		padding: 15px 45px 15px 148px;
		border-block-end: 1px solid var(--jjc-c-navy, #243684);
		background: none;
		font-size: 18px;
		line-height: 1.5em;
	}

	.jjc-top-search__card a:hover,
	.jjc-top-search__card a:focus-visible {
		background: none;
	}

	.jjc-top-search__card a::after {
		content: "";
		position: absolute;
		inset-block-start: calc(30% + 14px);
		inset-inline-end: 22px;
		inline-size: 14px;
		block-size: 14px;
		border-block-start: 4px solid var(--jjc-c-navy, #243684);
		border-inline-end: 4px solid var(--jjc-c-navy, #243684);
		transform: rotate(45deg);
	}

	.jjc-top-search__thumb,
	.jjc-top-search .jjc-top-search__thumb {
		position: absolute;
		inset-block-start: 10px;
		inset-inline-start: 10px;
		inline-size: 124px;
		block-size: auto;
		aspect-ratio: 4 / 3;
	}

	.jjc-top-search__name {
		display: block;
		padding: 0;
		text-align: start;
	}

	.jjc-top-search__name span {
		display: inline-block;
		min-inline-size: min(9em, 100%);
		margin-block-end: 6px;
		padding-block-end: 2px;
		border-block-end: 1px solid var(--jjc-c-blue, #073b87);
		font-size: inherit;
		font-weight: 400;
		line-height: 1.5em;
	}

	.jjc-top-search__rent {
		display: block;
		padding: 0;
		color: var(--jjc-c-navy, #243684);
		font-family: inherit;
		font-size: inherit;
		font-weight: 700;
	}

	.jjc-top-search__rent span {
		font-size: inherit;
	}

	.jjc-top-search__address {
		display: block;
		padding: 0;
		font-size: 15px;
	}

	/* 「すべて見る」（旧サイト .btn_showall：#F6115D の 4px の帯、文字 1.6em） */
	.jjc-top-search__btn-area {
		padding: 0;
	}

	.jjc-top-search__showall {
		margin: 6px 0;
	}
}