@charset "utf-8";

/* =====================================================
--------------------------------------------------------
リンク/ボタンの非活性
--------------------------------------------------------
===================================================== */

.disabled,
.user-select button[disabled] {
	filter: grayscale(100%) invert(10%);
	pointer-events: none;
}

.disabled::before,
.disabled::after,
.user-select button[disabled]::before,
.user-select button[disabled]:after {
	color: var(--color-grey-dark);
}











/* =====================================================
--------------------------------------------------------
ページ上部
--------------------------------------------------------
===================================================== */

/* 大見出し */
h1 {
	margin: 16px 0;
	font-size: 24px;
	font-weight: bold;
}

/* ページ内リンクがない場合 */
hgroup:has(h1):not(:has(+ in-page-link)) {
	margin-bottom: 16px;
}

/* ページ内リンク */
.in-page-link {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	gap: 8px;
	margin: 16px 0;
}

.in-page-link li {
	/* width: 100%; */
	width: calc((100% - 16px * 2) / 3);
	min-width: 110px;
	flex-grow: 1;
}

.in-page-link a {
	flex-flow: row nowrap;
	gap: 0 8px;
	padding: 8px 24px 8px 8px;
	width: 100%;
	border-radius: 24px;
	border: 1px solid var(--color-grey-origin);
	line-height: 1;
	white-space: nowrap;
}

.in-page-link a::after {
	position: absolute;
	right: 8px;
	color: var(--color-black);
	font-family: 'icomoon';
	content: "\e94f";
}

@media screen and (min-width: 1024px) {
	h1 {
		margin: 32px 0 16px;
		font-size: 28px;
	}
	hgroup:has(h1):not(:has(+ in-page-link)) {
		margin-bottom: 32px;
	}
	.in-page-link {
		gap: 0 32px;
		margin: 16px 0 32px;
	}
	.in-page-link li {
		width: calc((100% - 32px * 2) / 3);
	}
	.in-page-link a {
		font-size: 18px;
	}
	.in-page-link a::after {
		right: 16px;
		font-size: 20px;
	}
}










/* =====================================================
--------------------------------------------------------
絞り込み / narrow-down
--------------------------------------------------------
===================================================== */

div:has(> .narrow-down),
div:has(> .u--inner > .heading-text),
div:has(> div:is(.u--icon-search)) {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 16px 0;
	padding: 16px;
	background: var(--color-grey-light);
}

div:not(:has(> .narrow-down)):has(> .u--inner > .heading-text) {
	padding: 16px 0;
}

div:has(> .narrow-down) > .u--inner {
	padding: 0;
}

div:has(> .heading-text) {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	gap: 16px;
}

div:has(> .heading-text):has(+ .narrow-down) {
	justify-content: center;
}

div:has(> .heading-text):has(> .c--link-main) .heading-text {
	width: 100%;
	/* margin: 0 0 16px; */
	font-size: 18px;
	font-weight: bold;
}

/* 今の検索条件で物件を見る */
div:has(> .heading-text):has(> .c--link-main) .c--link-main {
	padding-right: 32px;
	width: 100%;
	min-height: 48px;
	border-radius: 24px;
}

div:has(> .heading-text):has(> .c--link-main) .c--link-main::before {
	right: 16px;
	font-family: 'icomoon';
	content: "\e94f";
}

div:has(> .heading-text):has(> .c--link-main) .c--link-main span {
	font-size: 14px;
}

div:has(> .narrow-down) > .narrow-down {
	width: 100%;
	margin: 0 auto;
}

main:has(.not-applicable) div:has(> div:is(.u--icon-search)) {
	padding: 0;
}

@media screen and (min-width: 1024px) {
	div:has(> .narrow-down),
	div:has(> .u--inner > .heading-text) {
		padding: 32px 0 24px;
	}

	div:has(> .u--icon-search[class]) {
		padding: 32px 0 16px;
	}

	main:has(.not-applicable) div:has(> .u--icon-search[class]) {
		padding: 0;
	}

	div:has(> .narrow-down) > * {
		max-width: 1024px;
	}

	div:has(> .heading-text):has(> .c--link-main) .heading-text {
		/* margin: 0; */
		font-size: 20px;

	}

	div:has(> .heading-text):has(> .c--link-main) .c--link-main {
		justify-content: flex-start;
		flex-shrink: 0;
		width: fit-content;
		padding: 8px 40px 8px 16px;
		margin: 0;
	}

	div:has(> .heading-text):has(> .c--link-main) .c--link-main span {
		font-size: 14px;
	}

	.shop-list div:has(> .heading-text):has(+ .narrow-down) {
		justify-content: space-between;
	}

	.shop-list div:has(> .heading-text):has(> .c--link-main) .heading-text {
		width: fit-content;
	}
}





/* 各ブロック */
.narrow-down {
	background: #fff;
	border: 1px solid var(--color-grey-origin);
	border-radius: 8px;
}

.narrow-down > .u--accordion-head {
	padding: 16px 36px 16px 16px;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 16px;
}



/* アコーディオン */
.narrow-down > .u--accordion-head::after {
	right: 16px;
}

.narrow-down:has(> .u--accordion-head) > div {
	padding: 8px 16px 16px;
}



@media screen and (min-width: 1024px) {
	.narrow-down > .u--accordion-head {
		padding: 16px 56px 16px 24px;
		font-size: 18px;
	}

	.narrow-down > .u--accordion-head::after {
		right: 24px;
	}

	.narrow-down:has(> .u--accordion-head) > div {
		padding: 0 24px 16px;
	}
}

/* 横並び基本 */
.narrow-down ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.narrow-down ul:not(:first-of-type) {
	margin: 16px 0 0;
}

.narrow-down ul::before {
	display: inline;
	align-self: center;
}



/* 詳しく見る・もっと見る */
.narrow-down .u--icon-arrow {
	margin: 0 0 0 4px;
}

.narrow-down > div ul + div:has(.c--link-text-spot) {
	display: block;
	margin: 8px 0 0;
	width: 100%;
}

.narrow-down .by-area > div:has(.c--link-text-spot) {
	display: block;
	margin: -8px 0 0;
	width: 100%;
}

.narrow-down .by-school-district > div > div:has(.c--link-text-spot) {
	margin-top: 0;
}

.narrow-down > div ul + div,
.narrow-down .by-area > div:has(.c--link-text-spot) {
	padding: 0 16px 0 0;
	text-align: right;
}

.narrow-down:has(> .by-average) > div div {
	margin: 16px 0 0;
	padding: 0 16px 0 0;
	text-align: right;
}

.narrow-down > div ul + div .c--link-text-spot::after,
.narrow-down .by-area > div:has(.c--link-text-spot) .c--link-text-spot::after,
.narrow-down:has(> .by-average) > div div .c--link-text-internal::after {
	right: -20px;
}



/* エリアで絞り込む */
/* 人気の条件で絞り込む */
.by-area > div {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 8px;
}

.by-area > div:not(:has(.c--link-text-spot)) {
	margin-bottom: 16px;
}

.by-area > div > ul {
	display: contents;
}

@media screen and (min-width: 1024px) {
	.by-area > div {
		align-items: flex-start;
	}
	.by-area > div > span {
		display: inline-block;
		margin-top: 5px;
		width: 5em;
	}
	.by-area > div:only-child > span:first-child,
	.by-area > div:first-child:has(+ div:last-child) > span:first-child {
		width: fit-content;
	}
	.by-area > div > ul {
		display: flex;
		width: calc(100% - 5.5em);
	}
	.by-area > div > ul + span {
		margin: 16px 0 0;
		display: flex;
		align-items: center;
	}
}



/* 世帯構成・間取りで絞り込む */
.narrow-down:has(> .by-floor-plan) .family-structure {
	align-items: stretch;
}

.narrow-down:has(> .by-floor-plan) .family-structure li {
	width: calc((100% - 16px) / 3);
}

.narrow-down:has(> .by-floor-plan) .family-structure .c--link-sub {
	width: 100%;
	height: 100%;
	word-break: keep-all;
	overflow-wrap: break-word;
}

@media screen and (min-width: 1024px) {
	.narrow-down:has(> .by-floor-plan) .family-structure .c--link-sub {
		width: fit-content;
	}

	.narrow-down:has(> .by-floor-plan) .family-structure li {
		width: fit-content;
	}
}



/* 平均家賃相場で絞り込む */
.narrow-down:has(> .by-average) li,
.narrow-down:has(> .by-average) li a {
	width: 100%;
}

.narrow-down:has(> .by-average) li a > span {
	margin: 0 4px;
	translate: 0 -2px;
	font-size: 20px;
	font-weight: bold;
}

.narrow-down:has(> .by-average) li span span {
	font-size: 16px;
	margin: 0;
}

.narrow-down:has(> .by-average) .by-average > p {
	margin: 16px 0 0;
}

.narrow-down:has(> .by-average) .by-average > p span {
	font-weight: bold;
}

@media screen and (min-width: 1024px) {
	.narrow-down:has(> .by-average) li,
	.narrow-down:has(> .by-average) li a {
		width: fit-content;
	}

	.narrow-down:has(> .by-average) {
		position: relative;
	}

	.narrow-down:has(> .by-average) > div > ul {
		margin: 0 0 16px;
	}

	.narrow-down:has(> .by-average) .u--text-right:has(> .c--link-text-internal) {
		position: absolute;
		right: 24px;
		bottom: 16px;
	}

	.narrow-down:has(> .by-average) li a > span {
		font-size: 24px;
	}

	.narrow-down:has(> .by-average) > div div {
		margin: -22px 0 0;
	}
}



/* 徒歩時間で絞り込む */
/* 通勤・通学時間で絞り込む */
.narrow-down:has(> .by-walking-time) li,
.narrow-down:has(> .by-commuting-time) li {
	width: calc((100% - 8px) / 2);
}

.narrow-down:has(> .by-walking-time) li a,
.narrow-down:has(> .by-commuting-time) li a {
	width: 100%;
	height: 100%;
	justify-content: flex-start;
	text-align: left;
}

@media screen and (min-width: 1024px) {
	.narrow-down:has(> .by-walking-time) li,
	.narrow-down:has(> .by-commuting-time) li {
		width: fit-content;
	}
}



/* 学区で絞り込む */
.by-school-district {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.by-school-district > div {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 0;
}

.by-school-district > div > span.primary-junior {
	display: inline-block;
	width: 5em;
}

.by-school-district > div > span.primary-junior + ul {
	display: contents;
	width: calc(100% - 5em);
}

.by-school-district > div > span:not(.primary-junior) {
	display: inline-block;
	width: 7em;
}

.by-school-district > div > span:not(.primary-junior) + ul {
	display: contents;
	width: calc(100% - 7em);
}

@media screen and (min-width: 1024px) {
	.by-school-district > div > span.primary-junior {
		width: 4em;
	}
}











/* =====================================================
--------------------------------------------------------
検索結果全体
--------------------------------------------------------
===================================================== */

/* 背景 */
.search-section {
	display: flex;
	flex-direction: column;
	gap: 16px 0;
	background: var(--color-grey-light);
	padding: 0 0 16px;
}

main:not(:has(.u--icon-search)) .search-section {
	padding-top: 16px;
}

/* 見出し */
.search-section h2 {
	padding: 0 16px;
	font-size: 18px;
	font-weight: bold;
	order: -1;
}

.conditions {
	order: -1;
}

.pagination {
	padding: 0 16px;
}

.user-select {
	order: 1;
}

.user-select form {
	display: contents;
}

.property {
	display: flex;
	flex-direction: column;
	gap: 16px 0;
	max-width: 768px;
}

@media screen and (min-width: 1024px) {
	.search-section {
		display: grid;
		grid-template-columns: 278px 722px;
		grid-template-rows: auto auto repeat(3, auto);
		grid-template-areas: "heading heading"
							 "select result"
							 "select article"
							 "select pagination"
							 "select .";
		gap: 24px;
		justify-content: center;
	}

	.search-section h2 {
		width: 1024px;
		margin: 0 auto;
		padding: 0;
		font-size: 24px;
		grid-area: heading;
	}

	.conditions {
		order: 0;
		grid-area: result;
	}

	.pagination {
		padding: 0 16px;
		grid-area: pagination;
	}

	.user-select {
		order: 0;
		padding: 0;
		grid-area: select;
	}

	.property {
		display: flex;
		flex-direction: column;
		gap: 24px 0;
		grid-area: article;
		max-width: unset;
	}

	.narrow-down + div:is(.u--icon-search) {
		margin: 24px auto 0;
	}
}






/* =====================================================
--------------------------------------------------------
検索結果＆並び替えその（conditions内）
--------------------------------------------------------
===================================================== */

/* 検索結果 */
.conditions-result > p {
	margin: 0 0 8px;
}

.conditions-result > p > .total-value {
	font-size: 18px;
	font-weight: bold;
}

.conditions-result > p > .remarks {
	display: inline-block;
	font-size: 12px;
}

.conditions-result > p > span > span {
	font-size: 16px;
	font-weight: bold;
}

/* 並び替え */
.conditions-result > div:has(> .c--select) {
	flex-shrink: 0;
	text-align: right;
}

.conditions-result .c--select select {
	padding: 4px 40px 4px 8px ;
}

.conditions-result .c--select::before {
	rotate: 0deg;
	width: 14px;
	height: 12px;
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
	background: var(--color-black);
	content: '';
}

.conditions-result .c--select.show::before {
	rotate: 180deg;
}

@media screen and (min-width: 1024px) {
	.conditions-result {
		grid-area: result;
		display: flex;
		justify-content: space-between;
	}

	.conditions-result > p {
		margin: 0;
	}

	.conditions-result > p > .total-value {
		font-size: 22px;
	}

	.conditions-result > p > .remarks {
		font-size: 16px;
	}

	.conditions-result > p > span > span {
		font-size: 20px;
	}

}










/* =====================================================
--------------------------------------------------------
検索方法の変更
--------------------------------------------------------
===================================================== */

.select-narrow-down {
	width: 100%;
	padding: 16px 0;
	margin: 0 auto 16px;
	border: 1px solid var(--color-grey-origin);
	border-radius: 8px;
	background: #fff;
}

.select-narrow-down li {
	display: flex;
	gap: 0 8px;
	padding: 0 16px;
}

.select-narrow-down li:not(.detailed-conditions) {
	margin: 0 0 16px;
	padding: 0 16px 12px;
	border-bottom: 1px solid var(--color-grey-origin);
}

.select-narrow-down li .table-title,
.select-narrow-down li a,
.select-narrow-down .u--accordion-head {
	font-size: 14px;
	font-weight: bold;
	flex-shrink: 0;
	align-self: center;
}

.select-narrow-down .u--accordion-head {
	width: 100%;
}

.select-narrow-down li .table-title {
	width: 4em;
}

.select-narrow-down li .table-data {
	/* color: var(--color-grey-dark); */
	font-weight: normal;
}

.select-narrow-down li a {
	margin: 0 0 0 auto;
	color: var(--color-link-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0 4px;
	flex-shrink: 0;
}

.select-narrow-down li a::after {
	content: "\e90d";
	font-family: 'icomoon';
	color: var(--color-black);
	font-weight: normal;
}

.select-narrow-down .classification {
	margin: 8px 0;
	font-size: 14px;
	font-weight: bold;
}

@media screen and (min-width: 1024px) {
	.conditions > .select-narrow-down {
		display: none;
	}

	.select-narrow-down {
		border-radius: 8px;
		padding: 16px;
		margin: 0;
	}

	.select-narrow-down:has(> .search-method) {
		padding: 16px 0 0;
	}

	.select-narrow-down li {
		flex-wrap: wrap;
	}

	.select-narrow-down .detailed-conditions {
		padding: 0 16px 16px;
	}

	.select-narrow-down li .table-title,
	.select-narrow-down .u--accordion-head {
		font-size: 18px;
		font-weight: bold;
	}

	.select-narrow-down li .table-data {
		font-size: 16px;
	}

	.select-narrow-down li a {
		font-size: 16px;
	}

	.select-narrow-down .detailed-conditions a,
	.select-narrow-down .shop-name a {
		display: none;
	}

	.select-narrow-down .u--accordion-head::after {
		right: 0;
	}

	.select-narrow-down div:has(> .classification):not(:last-of-type) {
		margin: 0 0 16px;
	}

	.select-narrow-down .classification {
		margin: 8px 0 0;
	}
}



/* サイドバー */
.user-select {
	display: flex;
	flex-direction: column;
}

.user-select > h2,
.user-select > p {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: bold;
}

.user-select > p {
	font-size: 18px;
}

main:has(.cassette) .user-select > h2,
main:has(.cassette) .user-select > p {
	margin: 0;
	padding: 0;
	font-size: 18px;
}

.user-select .select-narrow-down {
	margin: 8px 0;
}

.user-select .select-narrow-down li {
	display: flex;
}

.user-select .select-narrow-down .medium-heading {
	margin: 24px 0 8px;
	font-size: 16px;
	font-weight: bold;
}

.user-select .select-narrow-down .sub-heading {
	margin: 16px 0 8px;
	font-size: 14px;
	font-weight: bold;
}


/* {{-- yonezawa 20251020 以下の仕様変更のため追記 --}} */
/*
	①PC表示時に「詳細条件の確認・変更」と「こだわり条件の確認・変更」をデフォルト閉じた状態に
	②再検索部分の詳細条件枠に「変更する」を表示（現状はPCだけ非表示）
	③「変更する」を押すと「こだわり条件の確認・変更」にアンカーリンクで遷移
*/
.select-narrow-down .detailed-conditions a[href="#add-conditions_pc"],
.select-narrow-down .shop-name a[href="#add-shop-name_pc"] {
	display: none;
}


@media screen and (min-width: 1024px) {
	.user-select {
		gap: 16px;
		padding: 0 0 32px;
	}

	.user-select > h2,
	.user-select > p {
		display: none;
	}

	.user-select .select-narrow-down:has(> .region) {
		border-top: 6px solid var(--color-housecom-blue);
	}

	.user-select ul.select-narrow-down li > *:not(a) {
		display: block;
		width: 100%;
	}

	.select-narrow-down li {
		flex-direction: column;
		gap: 4px 0;
	}

	.select-narrow-down li:not(.detailed-conditions) {
		margin: 0 0 8px;
	}

	
	/* {{-- yonezawa 20251020 以下の仕様変更のため追記 --}} */
	/*
		①PC表示時に「詳細条件の確認・変更」と「こだわり条件の確認・変更」をデフォルト閉じた状態に
		②再検索部分の詳細条件枠に「変更する」を表示（現状はPCだけ非表示）
		③「変更する」を押すと「こだわり条件の確認・変更」にアンカーリンクで遷移
	*/
	.select-narrow-down .detailed-conditions a[href="#add-conditions_pc"],
	.select-narrow-down .shop-name a[href="#add-shop-name_pc"] {
		display: flex;
	}

	/*
		④シェブロンを下向きに回転
	*/
	.select-narrow-down .detailed-conditions a[href="#add-conditions_pc"]::after,
	.select-narrow-down .shop-name a[href="#add-shop-name_pc"]::after {
		rotate: 90deg;
	}
}



/* この条件を保存する・検索する */
.user-select .u--icon-folder,
.user-select .u--icon-zoom01 {
	padding: 16px 16px 16px 44px;
	margin: 0 auto;
	line-height: 1;
}

.user-select .u--icon-folder::before,
.user-select .u--icon-zoom01::before {
	left: 16px;
	color: var(--color-black);
	font-size: 16px;
}

.user-select .u--icon-folder ~ * {
	display: none;
}

@media screen and (min-width: 1024px) {
	.user-select .u--icon-folder,
	.user-select .u--icon-zoom01 {
		font-size: 16px;
	}

	.user-select .u--icon-folder::before,
	.user-select .u--icon-zoom01::before {
		margin: 0 8px 0 0;
		font-size: 20px;
	}
	.user-select .u--icon-folder ~ * {
		display: block;
	}
}



/* チェックボックス */
@media screen and (min-width: 1024px) {
	.user-select {
		font-size: 14px;
	}

	.user-select [type="checkbox"] {
		margin: 0 8px 0 0;
	}
	.user-select div:has(> label) {
		display: flex;
		flex-direction: column;
		gap: 8px 0;
	}
	.user-select div label {
		color: var(--color-link-text);
	}
	.user-select .floor-plan:has(> label) {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px 0;
	}
	.user-select .floor-plan label {
		width: 50%;
	}
	.user-select .single-line[class] {
		width: 100%;
		font-weight: bold;
		line-height: 1.25;
	}
}











/* =====================================================
--------------------------------------------------------
レンジスライダー
--------------------------------------------------------
===================================================== */

.single-range {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
}

.double-range {
	position: relative;
	margin: 0 auto 24px;
	width: 100%;
	max-width: 480px;
}



/* 下限から上限 */
.single-range_value,
.double-range_value {
	text-align: center;
	font-weight: bold;
}

.single-range_value {
	margin-bottom: 4px;
}

.single-range_note,
.double-range_note {
	display: flex;
	justify-content: space-between;
	position: relative;
	margin: 8px auto 16px;
	width: 100%;
	max-width: 480px;
	font-size: 12px;
}

.double-range_note:last-of-type {
	margin-bottom: 0;
}



/* 本体 */
.double-range_bar {
	position: absolute;
	top: calc(50% + 24px);
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--color-grey-pale);
}

.double-range_input {
	position: absolute;
	top: 21px;
	left: 0;
	width: 100%;
	z-index: 1;
	pointer-events: none;
}

.double-range_input input[type="range"] {
	position: absolute;
	height: 30px;
	pointer-events: none;
	background: none;
	appearance: none;
}

.double-range_input input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	pointer-events: auto;
	z-index: 2;
}

.double-range_input input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
}












/* =====================================================
--------------------------------------------------------
pagination
--------------------------------------------------------
===================================================== */

/* 件数 */
.pagination_result {
	text-align: center;
}

.pagination_result .total-value {
	font-size: 18px;
	font-weight: bold;
}

.pagination_result .remarks {
	display: block;
	margin-top: 8px;
	font-size: 12px;
}

.pagination_result .remarks span {
	font-size: 16px;
	font-weight: bold;
}

@media screen and (min-width: 1024px) {
	.pagination_result .total-value {
		font-size: 22px;
	}
	.pagination_result .remarks {
		margin-top: 0;
		font-size: 14px;
	}
	.pagination_result .remarks span span {
		font-size: 20px;
	}
}


/* 前後移動 */
.pagination > div {
	display: flex;
	justify-content: center;
	gap: 0 12px;
	margin: 16px 0 0;
}

.pagination > div a {
	display: flex;
	justify-content: flex-start;
	align-items: end;
	gap: 0 4px;
	position: relative;
	padding: 16px 8px;
	width: calc((100% - 12px) / 4);
	max-width: 76px;
	font-size: 16px;
	line-height: 1;
}

.pagination > div a::before,
.pagination > div a::after {
	font-family: 'icomoon';
	color: var(--color-black);
	position: absolute;
	top: 16px;
	translate: 0;
	font-size: 12px;
}

.pagination .to-first {
	justify-content: flex-end;
}

.pagination .to-prev {
	justify-content: flex-end;
	padding: 16px 16px 16px 12px;
}

.pagination .to-next {
	padding: 16px 12px 16px 16px;
}

.pagination .to-first span,
.pagination .to-prev span {
	translate: 4px 0;
}

.pagination .to-prev span,
.pagination .to-last span {
	translate: -4px 0;
}

.pagination .to-first::before,
.pagination .to-last::after {
	content: "\e90e";
}

.pagination .to-prev::before,
.pagination .to-next::after {
	content: "\e90d";
}

.pagination .to-first::before,
.pagination .to-prev::before {
	rotate: 180deg;
}

.pagination .to-first::before {
	left: 8px;
}

.pagination .to-prev::before {
	left: 8px;
}

.pagination .to-next::after {
	right: 8px;
}

.pagination .to-last::after {
	right: 8px;
}

@media screen and (min-width:375px) {
	.pagination > div a {
		padding: 16px 12px;
	}
	.pagination > div a::before,
	.pagination > div a::after {
		font-size: 16px;
	}
	.pagination .to-first::before {
		left: 10px;
	}
	
	.pagination .to-prev::before {
		left: 12px;
	}
	
	.pagination .to-next::after {
		right: 12px;
	}
	
	.pagination .to-last::after {
		right: 10px;
	}
}

@media screen and (min-width: 1024px) {
	.pagination {
		grid-area: pagination;
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-self: flex-start;
	}
	.pagination_result {
		flex-wrap: wrap;
		justify-content: flex-start;
		align-self: center;
		width: 300px;
		text-align: left;
	}
	.pagination_result > .u--text-bold {
		font-size: 22px;
	}
	.pagination_result .remarks {
		display: inline-block;
	}
	.pagination .line-break {
		font-size: 14px;
	}
	.pagination .line-break .u--text-bold {
		font-size: 20px;
	}
	.pagination > div {
		width: fit-content;
		gap: 0 24px;
		margin: 0;
	}

	.pagination > div a {
		width: 76px;
	}
}



















/* =====================================================
--------------------------------------------------------
検索結果一覧
--------------------------------------------------------
===================================================== */

/* アイコン */
div:is(.u--icon-search) {
	/* margin: 24px auto 0; */
	height: 48px;
}

div:is(.u--icon-search)::before,
div:is(.u--icon-search)::after {
	left: 50%;
	translate: -50% -50%;
	font-size: 48px;
}

/* 物件（建物・部屋のまとまり） */
.property > article {
	position: relative;
}

/* 検索項目のハイライト */
.property .highlight {
	background: var(--color-housecom-blue-light);
}










/* =====================================================
--------------------------------------------------------
建物
--------------------------------------------------------
===================================================== */

@media (any-hover:hover) {
	div:has(> .property_build) > a hgroup,
	div:has(> .property_build) > a .property_hgroup,
	.property_build dl {
		transition: opacity 0.5s;
	}

	div:has(> .property_build) > a:hover hgroup,
	div:has(> .property_build) > a:hover .property_hgroup,
	.property > article > div:has(> a:hover) .property_build dl {
		opacity: 0.5;
	}

	.shop-list .applicable-shop-list > article hgroup + a:hover {
		background: var(--color-housecom-green);
		opacity: 0.3;
	}
}

.property > article > div {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(2, auto);
	position: relative;
	border-radius: 8px 8px 0 0;
	border-left: 1px solid var(--color-grey-origin);
	border-right: 1px solid var(--color-grey-origin);
	background: #fff;
}

.property_build {
	grid-area: 2 / 1 / 3/ 3;
	position: relative;
	padding: 0 0 8px;
}

@media screen and (min-width: 1024px) {
	.property:is(.pickup) {
		max-width: 1024px;
	}
	.property_build {
		display: flex;
		gap: 0 16px;
		padding: 0 0 16px 16px;
	}
}



/* 建物へのリンク（hgroup） */
div:has(> .property_build) > a {
	/* grid-area: 1 / 1 / 3 / 3; */
	z-index: 1;
	/* {{-- yonezawa 20251030 チェックFB No.63 --}} */
	/* {{-- a要素タップ時の挙動を修正 --}} */
	-webkit-tap-highlight-color: transparent;
}

/* {{-- yonezawa 20251030 チェックFB No.63 --}} */
/* {{-- a要素タップ時の挙動を修正 --}} */
div:has(> .property_build) > a:focus {
	outline: none;
}

div:has(> .property_build) > a hgroup,
div:has(> .property_build) > a .property_hgroup {
	position: static !important;
	display: flex;
	align-items: center;
	gap: 0 8px;
	padding: 8px;
	width: 100%;
	height: 100%;
	border-top: 8px solid var(--color-housecom-blue);
	border-radius: 8px 8px 0 0;
	color: var(--color-link-text);
}

div:has(> .property_build) > a hgroup::before,
div:has(> .property_build) > a .property_hgroup::before {
	grid-area: 1 / 1 / 3 / 3;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	content: '';
}

/* {{-- yonezawa 20251030 チェックFB No.63 --}} */
/* {{-- a要素タップ時の挙動を修正 --}} */
div:has(> .property_build) > a hgroup:active::before,
div:has(> .property_build) > a .property_hgroup:active:before {
	animation: tap .5s;
}

@keyframes tap {
	0% {background: #0000;}	
	50% {background: #0001;}	
	100% {background: #0000;}	
}

div:has(> .property_build) > a hgroup::after,
div:has(> .property_build) > a .property_hgroup::after {
	order: 3;
	margin: 0 0 0 auto;
	color: var(--color-black);
	font-family: 'icomoon';
	content: "\e90d";
}

div:has(> .property_build) > a hgroup p,
div:has(> .property_build) > a .property_hgroup p {
	order: 1;
	padding: 4px 8px;
	height: fit-content;
	background: var(--color-grey-light);
	font-size: 12px;
	color: var(--color-black);
	flex-shrink: 0;
}

div:has(> .property_build) > a hgroup h3,
div:has(> .property_build) > a .property_hgroup div {
	order: 2;
	margin: 0;
	word-break: break-all;
	font-size: 16px;
	font-weight: bold;
}

@media screen and (min-width: 1024px) {
	div:has(> .property_build) > a hgroup,
	div:has(> .property_build) > a .property_hgroup {
		padding: 16px;
	}

	div:has(> .property_build) > a hgroup h3,
	div:has(> .property_build) > a .property_hgroup div {
		font-size: 20px;
	}
}



/* スライダー（1枚表示） */
.property_build .cassette {
	position: relative;
	
	/* {{-- yonezawa 20251023 作業リスト 米澤 No.31 --}} */
	/* 物件一覧ページ 建物のカード内の画像にもa要素の範囲を拡張するため削除 */
	/* z-index: 2; */

	aspect-ratio: 4 / 3;
	cursor: default;
}

.property_build .cassette_slick {
	height: 100%;
}

.property_build .slick-list {
	height: 100% !important;
}

.property_build .slick-track {
	height: 100%;
}

.property_build .slick-slide {
	/* 画像の背景色pale→white */
	background: var(--color-grey-pale);
}

.property_build .slick-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.property_build .slick-slide:not(:last-of-type) {
	margin: 0;
}



/* 詳細 */
.property_build dl {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding: 0 8px;
	margin: 8px 0 0;
	cursor: pointer;
}

.property:is(.pickup) .property_build dl {
	display: none;
}

.property_build dt {
	width: 3em;
	font-weight: bold;
}

.property_build dd {
	width: calc(100% - 3em - 24px);
}

@media screen and (min-width: 1024px) {
	.property_build .cassette {
		width: 280px;
	}
	.property_build dl {
		column-gap: 16px;
		padding: 8px;
		margin: 0;
	}
	.property:is(.pickup) .property_build dl {
		display: flex;
	}
	.property_build dd {
		width: calc(100% - 3em - 16px);
	}
}










/* =====================================================
--------------------------------------------------------
部屋情報
--------------------------------------------------------
===================================================== */

@media (any-hover:hover) {
	.property_room_view > a,
	.property_room h4,
	.property_room_madori div,
	.property_room_info,
	.property_room_condition,
	.property_room_time,
	.property_room_shop {
		transition: opacity 0.5s;
	}

	.property_room_view > a:hover,
	.property_room:has(.property_room_view > a:hover) h4,
	.property_room:has(.property_room_view > a:hover) .property_room_madori div,
	.property_room:has(.property_room_view > a:hover) .property_room_info,
	.property_room:has(.property_room_view > a:hover) .property_room_condition,
	.property_room:has(.property_room_view > a:hover) .property_room_time,
	.property_room:has(.property_room_view > a:hover) .property_room_shop {
		opacity: 0.5;
	}
	.property_room_favorite:hover > span::before{
		color: var(--color-link-cv)
	}

	/* {{-- yonezawa 20251023 作業リスト 米澤 No.31 --}} */
	/* 物件一覧ページ 建物のカード内の画像にもa要素の範囲を拡張によるホバーエフェクト調整 */
	.property > article > div:has(> a + .property_build) .property_build > .cassette {
		transition: opacity 0.5s;
	}

	.property > article > div:has(> a:hover + .property_build) .property_build > .cassette {
		opacity: 0.5;
	}

}

.property_room_shop,
.property_room_favorite,
.thumb-toggle {
	position: relative;
	z-index: 1;
	cursor: pointer;
}

.list-thumb-cassette {
	position: relative;
	z-index: 1;
	cursor: default;
}



/* 全体 */
.property_room {
	position: relative;
	display: grid;
	grid-template-columns: 100px 1fr 1fr 24px;
	gap: 8px;
	padding: 8px;
	border-top: 1px solid var(--color-grey-origin);
	border-right: 1px solid var(--color-grey-origin);
	border-left: 1px solid var(--color-grey-origin);
	background: #fff;
}

.property_room:last-of-type {
	border-radius: 0 0 8px 8px;
	border-bottom: 1px solid var(--color-grey-origin);
}

@media screen and (min-width:1024px) {
	.property_room {
		grid-template-columns: 100px 120px 1fr 180px;
		grid-template-rows: 46px auto auto;
		gap: 8px 16px;
		padding: 16px;
	}
	.property_room:has(.show) {
		grid-template-rows: 46px auto auto 120px;
	}
	.property_room:has(.show) {
		grid-template-rows: 46px auto auto 120px;
	}
	.property:is(.pickup) .property_room:has(.show) {
		grid-template-rows: 46px auto auto 200px;
	}
}



/* 部屋名 */
.property_room h4,
.property_room_number {
	grid-area: 1 / 1 / 2 / 4;
	display: flex;
	align-items: center;
	color: var(--color-link-text);
	font-size: 16px;
	font-weight: bold;
	overflow-wrap: anywhere;
}

@media screen and (min-width:1024px) {
	.property_room h4,
	.property_room_number {
		grid-area: 1 / 1 / 4 / 5;
		width: 100px;
		font-size: 18px;
	}
}



/* 写真（メイン） */
.property_room_madori {
	position: relative;
	grid-area: 2 / 1 / 2 / 2;
	height: 100px;
}

.property_room_madori div {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background: var(--color-grey-pale);
}

.property_room_madori div img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.property_room_madori .cassette_prev,
.property_room_madori .cassette_next {
	display: none !important;
}

@media screen and (min-width:1024px) {
	.property_room_madori {
		grid-area: 1 / 2 / 3 / 3;
		height: 120px;
	}
}



/* 写真を見る */
.thumb-toggle {
	display: inline-block;
	position: absolute;
	bottom: -24px;
	left: 50%;
	translate: -50% 0;
	padding: 4px 12px 12px;
	width: max-content;
	border-radius: 22px;
	border: 1px solid var(--color-grey-origin);
	background: #fff;
	color: var(--color-link-text);
	font-size: 12px;
	font-weight: bold;
	transition: all 0.5s;
	cursor: pointer;
}

.thumb-toggle::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	translate: -50% 0;
	rotate: 90deg;
	color: var(--color-black);
	font-family: icomoon;
	font-size: 14px;
	content: '\e90d';
}

/* muto 2025.10.09 写真を見るをクリックしたら矢印を反転させる */
.thumb-toggle.show::after {
	rotate: -90deg;
}

@media screen and (min-width:1024px) {
	.thumb-toggle {
		bottom: -32px;
		padding: 8px 16px 16px;
		border-radius: 22px;
		border: 1px solid var(--color-grey-origin);
		font-size: 14px;
	}

	.thumb-toggle::after {
		bottom: 2px;
	}
}



/* 写真（すべて） */
.list-thumb-cassette {
	grid-area: 1 / 1 / 4 / 5;
	opacity: 0;
	height: 100px;
}

.list-thumb-cassette:has(.show) {
	grid-area: 5 / 1 / 5 / 5;
	opacity: 1;
}

.list-thumb-cassette .slick-slide {
	height: 100px;
	/* 画像の背景色pale→white */
	background: var(--color-grey-pale);
	aspect-ratio: 1 / 1;
}

.list-thumb-cassette .slick-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.list-thumb-cassette .slick-track {
	justify-content: center;
	gap: 0 12px;
	min-height: 100px;
}

.list-thumb-cassette .slick-track .slick-slide {
	min-width: 100px
}

@media screen and (min-width:375px) {
	.list-thumb-cassette .slick-track .slick-slide {
		min-width: unset;
	}
}


@media screen and (min-width:768px) {
	.property_room .list-thumb-cassette .slick-track {
		left: -20%;
	}

	/* .property_room .list-thumb-cassette .slick-track.adjust-x { */
	.property_room .list-thumb-cassette .slick-track:has(> :nth-child(-n + 5):last-child) {
		left: 0;
	}

	.property_room .list-thumb-cassette .slick-track:has(> :nth-child(-n + 5):last-child)::before {
		order: 1;
	}
}

@media screen and (min-width:1024px) {
	.list-thumb-cassette {
		height: 120px;
	}
	.property:is(.pickup) .list-thumb-cassette,
	.property:is(.pickup) .list-thumb-cassette .slick-slide {
		height: 200px;
	}
	.list-thumb-cassette:has(.show),
	.property_room.hidden .list-thumb-cassette {
		grid-area: 4 / 2 / 5 / 5;
		opacity: 1;
	}
	.list-thumb-cassette .slick-slide {
		margin: 0 8px;
		height: 120px;
	}
	.list-thumb-cassette:has(.show) .slick-slide img {
		cursor: pointer;
	}
	.over .list-thumb-cassette .slick-track {
		translate: -118px;
		gap: 0 16px;
	}
}



/* 詳細情報 */
.property_room_info {
	grid-area: 2 / 2 / 3 / 4;
}

.property_room_info .price {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	letter-spacing: -0.02em;
}

.property_room_info .price .month-rent {
	font-size: 20px;
	font-weight: bold;
}

.property_room_info .price .currency {
	margin-right: 8px;
	font-size: 14px;
	font-weight: bold;
}

.property_room_info > dl {
	display: flex;
	flex-flow: row wrap;
	gap: 8px 16px;
	margin-bottom: 8px;
}

.property_room_info > dl div {
	display: flex;
	gap: 8px;
	width: fit-content;
	min-width: 78px;
}

.property_room_info > dl div dt {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	background: var(--color-grey-pale);
	line-height: 1;
}

@media screen and (min-width:1024px) {
	.property_room_info {
		grid-area: 1 / 3 / 3 / 4;
	}

	.property_room_info .price {
		font-size: 16px;
	}

	.property_room_info .price .month-rent {
		font-size: 24px;
	}

	.property_room_info .price .currency {
		font-size: 16px;
	}

	.property_room_info > dl {
		gap: 8px 24px;
		margin-bottom: 16px;
	}

	.property_room_info > dl div {
		width: calc((100% - 24px) / 2);
	}

	.property_room_info > dl div dt {
		width: 24px;
		height: 24px;
	}
}



/* 追加条件が非表示の場合 */
@media screen and (min-width:1024px) {
	.property_room:has(.property_room_condition) {
		grid-template-rows: 46px auto auto auto;
	}
	.property_room:has(.property_room_condition):has(.show) {
		grid-template-rows: 46px auto auto auto 120px;
	}
}

.property_room:has(.property_room_condition) .property_room_condition {
	grid-area: 3 / 2 / 4 / 4;
}

.property_room:has(.property_room_condition) .property_room_time {
	grid-area: 4 / 2 / 5 / 4;
}

.property_room:has(.property_room_condition) .property_room_shop {
	grid-area: 5 / 2 / 6 / 4;
}

.property_room:has(.property_room_condition).hidden .list-thumb-cassette,
.property_room:has(.property_room_condition) .list-thumb-cassette:has(.show) {
	grid-area: 6 / 1 / 7 / 5;
}

@media screen and (min-width:1024px) {
	.property_room:has(.property_room_condition) .property_room_condition {
		grid-area: 3 / 3 / 4 / 5;
	}
	.property_room:has(.property_room_condition) .property_room_time {
		grid-area: 4 / 4 / 5 / 5;
	}
	.property_room:has(.property_room_condition) .property_room_shop {
		grid-area: 4 / 3 / 5 / 4;
	}
	.property_room:has(.property_room_condition).hidden .list-thumb-cassette,
	.property_room:has(.property_room_condition) .list-thumb-cassette:has(.show) {
		grid-area: 5 / 1 / 6 / 5;
	}
}



/* 公開日 */
.property_room_time {
	grid-area: 3 / 2 / 4 / 4;
	display: flex;
	align-items: center;
	color: var(--color-grey-dark);
}

.property_room_time time {
	margin-right: 4px;
}

.property_room_time span {
	margin-left: 8px;
	padding: 2px 4px;
	border-radius: 2px;
	background: var(--color-housecom-blue);
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}

@media screen and (min-width:1024px) {
	.property_room_time {
		grid-area: 3 / 4 / 4 / 5;
		justify-content: flex-end;
		font-size: 14px;
	}

	.property_room_time span {
		padding: 4px 8px;
	}
}



/* 店舗名 */
.property_room_shop {
	grid-area: 4 / 2 / 5 / 4;
	display: flex;
	align-items: center;
}

.property_room_shop a {
	color: var(--color-grey-dark);
}

@media screen and (min-width:1024px) {
	.property_room_shop {
		grid-area: 3 / 3 / 4 / 4;
		font-size: 14px;
	}
}



/* お気に入り */
.property_room_favorite {
	grid-area: 1 / 4 / 2 / 5;
	text-align: right;
}
.property_room_favorite .u--icon-heart {
	display: block;
	width: 100%;
	height: 100%;
}

.property_room_favorite .u--icon-heart::before {
	font-size: 24px;
}

.property_room_favorite .u--icon-heart span {
	display: none;
}

.property_room_favorite .u--icon-heart::before {
	color: var(--color-grey-dark);
	content: "\e92a";
}

.property_room_favorite .u--icon-heart.added::before {
	color: var(--color-link-cv);
	content: "\e92b";
}

@media (any-hover:hover) {
	.property_room_favorite .u--icon-heart:hover::before {
		color: var(--color-link-cv);
	}
}

@media screen and (min-width:1024px) {
	.property_room_favorite .u--icon-heart {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 1;
		padding: 0 12px 0 40px;
		/* {{yonezawa 20250930 ボックス幅が「お気に入りに追加」「お気に入りに追加済」のどちらにも柔軟に対応できるよう幅の固定値指定を削除}} */
		/* width: 180px; */
		height: 48px;
		border-radius: 4px;
		border: 1px solid var(--color-grey-origin);
		background: #fff;
		color: var(--color-link-text);
		text-align: center;
		transition: all 0.5s;
		white-space: nowrap;
	}

	.property_room_favorite .u--icon-heart::before {
		position: absolute;
		top: 50%;
		left: 12px;
		translate: 0 -50%;
	}

	.property_room_favorite .u--icon-heart span {
		display: inline-block;
	}
}



/* 詳細を見る */
.property_room_view {
	grid-area: 2 / 4 / 5 / 5;
	display: flex;
	justify-content: center;
	align-items: center;
}

.property_room_view > a {
	position: static !important;
	/* {{-- yonezawa 20251029 チェックFB No.63 --}} */
	/* {{-- a要素タップ時の挙動を修正 --}} */
	-webkit-tap-highlight-color: transparent;
}

/* {{-- yonezawa 20251029 チェックFB No.63 --}} */
/* {{-- a要素タップ時の挙動を修正 --}} */
.property_room_view > a:focus {
	outline: none;
}

.property_room_view > a::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	content: '';
}

/* {{-- yonezawa 20251029 チェックFB No.63 --}} */
/* {{-- a要素タップ時の挙動を修正 --}} */
.property_room_view > a:active::before {
	animation: tap .5s;
}

.property_room_view > a .u--icon-arrow {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-housecom-green);
	text-align: center;
}

.property_room_view > a .u--icon-arrow span {
	display: none;
}

@media screen and (min-width:1024px) {
	.property_room_view {
		grid-area: 2 / 4 / 3 / 5;
		justify-content: flex-end;
		align-items: flex-start;
	}
	.property_room_view > a .u--icon-arrow {
		position: relative;
		padding: 0 32px 0 16px;
		width: fit-content;
		width: 180px;
		height: 48px;
		border-radius: 4px;
		border: 2px solid var(--color-housecom-green);
		font-size: 16px;
		font-weight: bold;
	}
	.property_room_view > a .u--icon-arrow::before {
		position: absolute;
		top: 50%;
		right: 16px;
		translate: 0 -50%;
	}
	.property_room_view > a .u--icon-arrow span {
		display: block;
	}
}









/* =====================================================
--------------------------------------------------------
街の特徴
--------------------------------------------------------
===================================================== */

.town-info {
	padding: 16px;
	border-bottom: 1px solid var(--color-grey-origin);
}

.town-info h2 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: bold;
}

.town-info h3 {
	margin: 16px 0;
	font-size: 16px;
	font-weight: bold;
}

.town-info > p {
	line-height: 1.2;
}

.town-info br {
	display: block;
	content: "";
	margin: 1em 0 0;
}

.town-info-point {
	display: flex;
	flex-direction: column;
}

.town-info-point h3 {
	margin: 16px 0 0;
	padding: 16px;
	border-radius: 4px 4px 0 0;
	background: var(--color-grey-light);
	text-align: center;
}

.town-info > h3 {
	margin: 16px 0;
}

.town-info-point ul {
	display: grid;
	grid-template-rows: repeat(2, auto);
	grid-template-columns: repeat(2, calc((100% - 8px) / 2));
	gap: 16px 8px;
	margin: 0;
	padding: 0 16px 16px;
	border-radius: 0 0 4px 4px;
	background: var(--color-grey-light);
	font-weight: bold;
}

.town-info-point li {
	line-height: 1;
	display: flex;
	align-items: flex-start;
}

.town-info-point li::before {
	font-family: 'icomoon';
	content: "\e94b";
	color: var(--color-housecom-blue);
	margin: 0 8px 0 0;
}

.town-info-point img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1.9 / 1;
	object-fit: cover;
}

@media screen and (min-width: 1024px) {
	.town-info {
		border: none;
		padding: 32px 24px 0;
	}

	.town-info::after {
		display: block;
		content: "";
		width: 150vw;
		height: 0;
		border-top: 1px solid var(--color-grey-origin);
		translate: calc((100vw - 1024px ) / 2) 0;
		margin: 32px 0 0;
	}

	.town-info h2 {
		font-size: 20px;
		margin: 0 0 24px;
	}

	.town-info-point {
		display: grid;
		gap: 0 32px;
		grid-template-columns: 500px auto;
		grid-template-rows: repeat(3, auto);
		grid-template-areas: "img h3"
							"img ul"
							"img .";
	}

	.town-info-point h3 {
		grid-area: h3;
		margin: 0 0 auto;
		font-size: 18px;
	}

	.town-info > h3 {
		margin: 24px 0;
	}

	.town-info-point ul {
		grid-area: ul;
		grid-template-columns: auto;
		margin: 0 0 auto;
	}

	.town-info-point li::before {
		margin: 0 8px 0 0;
	}

	.town-info-point div:has(img) {
		grid-area: img;
	}
}

@media screen and (min-width: 1024px) {
	.town-info {
		padding: 32px 0 0;
	}

	.town-info::after {
		translate: calc((1024px - 100vw) / 2) 0;
	}
	.town-info-point ul {
		grid-template-columns: repeat(2, calc((100% - 8px) / 2));
	}
}










/* =====================================================
--------------------------------------------------------
街の交通アクセス・施設
--------------------------------------------------------
===================================================== */

.access {
	padding: 16px;
	border-bottom: 1px solid var(--color-grey-origin);
}

.access h2 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: bold;
}

.access h3 {
	margin: 16px 0 8px;
	font-size: 16px;
	font-weight: bold;
}

.access .access-info > img {
	display: block;
	margin: 0 auto;
}

.access table {
	border-collapse: separate;
	border-spacing: 1px;
	width: 100%;
	border-radius: 8px;
	background: var(--color-grey-origin);
}

.access tr > * {
	padding: 8px;
}

.access th {
	position: relative;
	width: 35%;
	height: 100%;
	text-align: left;
	background: var(--color-grey-light);
}

.access tr::before {
	display: inline-block;
	min-height: 38px;
	content: "";
}

.access th::after {
	position: absolute;
	top: 0;
	right: -1px;
	width: 1px;
	height: 100%;
	background: var(--color-grey-light);
	content: "";
}

.access td {
	background: #fff;
}

.access tr:first-of-type th {
	border-radius: 8px 0 0 0;
}

.access tr:first-of-type td {
	border-radius: 0 8px 0 0;
}

.access tr:last-of-type th {
	border-radius: 0 0 0 8px;
}

.access tr:last-of-type td {
	border-radius: 0 0 8px 0;
}

.access td span {
	display: inline-block;
}

.access-info > .route-map + div {
	margin: 0 auto;
	width: 100%;
	max-width: 320px;
	aspect-ratio: 32 / 18;
}

.access-info > .route-map + div img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.access-info p {
	font-size: 12px;
	margin: 10px 0 0;
}

@media screen and (min-width: 375px) {
	.access-info > .route-map + div {
		margin: 0;
	}
}

@media screen and (min-width: 1024px) {
	.access {
		border: none;
		padding: 32px 24px 0;
	}

	.access::after {
		display: block;
		content: "";
		width: 150vw;
		height: 0;
		border-top: 1px solid var(--color-grey-origin);
		translate: calc((100vw - 1024px ) / 2) 0;
		margin: 32px 0 0;
	}

	.access h2 {
		font-size: 20px;
		margin: 0 0 24px;
	}
	.access h3,
	.access .access-info > img {
		margin: 0;
	}

	.access th {
		width: 40%;
	}

	.access td {
		width: 60%;
	}

	.access-info > p {
		grid-area: p_3;
		margin: 0;
		font-size: 14px;
		white-space: nowrap;
	}

	.access-info {
		display: grid;
		gap: 16px 32px;
		grid-template-columns: 500px auto;
		grid-template-rows: repeat(5, auto);
		grid-template-areas: "h3_1    h3_2"
							 "table_1 img_2"
							 "h3_3    ."
							 "table_3 ."
							 "p_3     .";
	}

	.access-info > .basic-info {
		grid-area: h3_1;
	}

	.access-info > .route-map {
		grid-area: h3_2;
	}

	.access-info > .first-and-last {
		grid-area: h3_3;
		margin: 8px 0 0;
	}

	.access-info > img {
		grid-area: img_2;
	}

	.access-info > .info-table {
		grid-area: table_1;
	}

	.access-info > .train-table {
		grid-area: table_3;
	}
}

@media screen and (min-width: 1024px) {
	.access {
		padding: 32px 0 0;
	}

	.access::after {
		translate: calc((1024px - 100vw) / 2) 0;
	}
}










/* =====================================================
--------------------------------------------------------
周辺施設
--------------------------------------------------------
===================================================== */

.neighborhood {
	padding: 16px;
	border-bottom: 1px solid var(--color-grey-origin);
}

.neighborhood > div:not(.first) {
	margin-top: 16px;
}

.neighborhood h2 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: bold;
}

.neighborhood h3 {
	font-size: 16px;
}

.neighborhood h3,
.neighborhood .catchphrase {
	margin: 16px 0 8px;
	font-weight: bold;
}

.neighborhood .directions::before {
	font-family: 'icomoon';
	content: "\e96e";
	margin: 0 8px 0 0;
}

.neighborhood .u--accordion-head {
	padding: 0 24px 0 0;
	color: var(--color-link-text);
}

.neighborhood .u--accordion-head::after {
	color: var(--color-black);
}

.neighborhood div:has(> .u--accordion-head) {
	text-align: right;
	margin-top: 16px;
}

.neighborhood *:has(> .u--accordion-head) > div {
	margin: 16px 0 0;
}

.neighborhood *:has(> .u--accordion-head) > div dl {
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	gap: 8px 16px;
}

.neighborhood *:has(> .u--accordion-head) > div dt {
	width: 4em;
	font-weight: bold;
}

.neighborhood *:has(> .u--accordion-head) > div dd {
	width: calc(100% - 4em - 16px);
}

.neighborhood *:has(> .u--accordion-head) > div p {
	margin: -18px 0 0;
	font-size: 10px;
}

.neighborhood .cassette {
	margin: 0 auto;
	max-width: 375px;
}

.neighborhood .cassette,
.neighborhood .slick-slide {
	border-radius: 8px;
	overflow: hidden;
	height: 200px;
	background: var(--color-grey-pale);
}

.neighborhood .slick-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media screen and (min-width: 1024px) {
	.neighborhood {
		display: grid;
		grid-template-rows: repeat(2, auto);
		grid-template-columns: repeat(3, calc((100% - 64px) / 3));
		grid-template-areas: "h2      h2      h2"
							 "slide_1 slide_2 slide_3"
							 "after   after   after";
		gap: 0 24px;
		border: none;
		padding: 32px 24px 0;
	}

	.neighborhood::after {
		display: block;
		content: "";
		width: 150vw;
		height: 0;
		border-top: 1px solid var(--color-grey-origin);
		translate: calc((100vw - 1024px ) / 2) 0;
		margin: 32px 0 0;
	}

	.neighborhood > div:not(.first) {
		margin-top: 0;
	}

	.neighborhood h2 {
		font-size: 20px;
		margin: 0 0 24px;
	}

	.neighborhood h3 {
		font-size: 18px;
	}

	.neighborhood > .first {
		grid-area: slide_1;
	}

	.neighborhood > .second {
		grid-area: slide_2;
	}

	.neighborhood > .third {
		grid-area: slide_3;
	}

	.neighborhood.u--inner::after {
		grid-area: after;
	}

	.neighborhood *:has(> .u--accordion-head) > div {
		font-size: 14px;
	}

	.neighborhood *:has(> .u--accordion-head) > div p {
		font-size: 12px;
	}
}

@media screen and (min-width: 1024px) {
	.neighborhood.u--inner {
		padding: 32px 0 0;
	}

	.neighborhood.u--inner::after {
		translate: calc((1024px - 100vw) / 2) 0;
	}
}









/* =====================================================
--------------------------------------------------------
住人の属性と口コミ・評価
--------------------------------------------------------
===================================================== */

.kuchikomi {
	padding: 16px;
	border-bottom: 1px solid var(--color-grey-origin);
}

.kuchikomi h2 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: bold;
}

.kuchikomi h3 {
	margin: 24px 0 16px;
	width: 100%;
	font-size: 16px;
	font-weight: bold;
}

.kuchikomi .review-rating {
	margin: 16px 0;
}

.kuchikomi h4 {
	font-weight: bold;
}

/* .kuchikomi .area-reviews {
	margin: -16px 0 0;
} */

@media screen and (min-width: 1024px) {
	.kuchikomi {
		border: none;
		padding: 32px 24px 0;
	}
	.kuchikomi h3 {
		margin: 0;
	}
	.kuchikomi::after {
		display: block;
		content: "";
		width: 150vw;
		height: 0;
		border-top: 1px solid var(--color-grey-origin);
		translate: calc((100vw - 1024px ) / 2) 0;
		margin: 32px 0 0;
	}
	.kuchikomi h2 {
		margin: 0 0 24px;
		font-size: 20px;
	}
	.kuchikomi > .rating-graph {
		display: grid;
		grid-template-rows: auto repeat(4, auto);
		grid-template-columns: repeat(2, calc((100% - 32px) / 2));
		grid-template-areas: "h3_1    h3_2"
							 "graph_1 graph_5"
							 "graph_2 graph_6"
							 "graph_3 graph_7"
							 "graph_4 graph_8";
		gap: 16px 32px;
	}
	.kuchikomi > .rating-graph > h3 {
		margin: 0;
	}
	.kuchikomi > .rating-graph > .resident-attributes {
		grid-area: h3_1;
	}
	.kuchikomi > .rating-graph > .review-rating {
		grid-area: h3_2;
	}
}

@media screen and (min-width: 1024px) {
	.kuchikomi.u--inner {
		padding: 32px 0 0;
	}
	.kuchikomi.u--inner::after {
		translate: calc((1024px - 100vw) / 2) 0;
	}
}



/* 2色 */
.single-graph {
	display: grid;
	grid-template-rows: 14px repeat(2, 1fr);
	grid-template-columns: 48px auto;
	grid-template-areas: "icon heading"
						"icon explan"
						"icon graph";
	gap: 8px 16px;
}

.single-graph:has(.odd-style) {
	margin: 0 0 24px;
}

.single-graph [class^="u--icon"] {
	grid-area: icon;
	font-size: 48px;
}

.odd-style > span {
	white-space: nowrap;
}

.odd-style > span:nth-of-type(even) {
	translate: 0 36px;
}

@media screen and (min-width: 1024px) {
	.single-graph {
		grid-template-rows: 18px 16px auto;
		grid-template-columns: 60px auto;
		gap: 16px;
		align-self: center;
		margin: -8px 0 0;
	}

	.graph2,
	.graph4 {
		margin: 0 0 16px;
	}

	.graph1 {
		grid-area: graph_1;
	}

	.graph2 {
		grid-area: graph_2;
	}

	.graph3 {
		grid-area: graph_3;
	}

	.graph4 {
		grid-area: graph_4;
	}

	.graph5 {
		grid-area: graph_5;
	}

	.graph6 {
		grid-area: graph_6;
		align-self: start;
	}

	.graph7 {
		grid-area: graph_7;
		/* margin: -56px 0 0; */
	}

	.graph8 {
		grid-area: graph_8;
		/* margin: -80px 0 0; */
	}

	.single-graph > span[class] {
		font-size: 60px;
		margin: -8px 0 0;
	}

	.single-graph:has(.odd-style) > span[class] {
		translate: 0 -8px;
	}

	.single-graph:has(.odd-style) h4 {
		translate: 0 -4px;
	}

	.single-graph:has(.odd-style) h4 ~ * {
		translate: 0 -8px;
	}
}



/* 凡例 */
.explanatory {
	grid-area: explan;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 -8px;
	font-size: 12px;
}

@media screen and (min-width: 1024px) {
	.explanatory {
		font-size: 14px;
	}
}



/* 多色 */
.canvas-graph {
	grid-area: graph;
	display: flex;
}

.canvas-graph canvas {
	height: 8px;
}

.canvas-graph canvas:first-of-type {
	border-radius: 8px 0 0 8px;
}

.canvas-graph canvas:last-of-type {
	border-radius: 0 8px 8px 0;
}

@media screen and (min-width: 1024px) {
	.canvas-graph {
		margin: -8px 0 0;
	}
}



/* 性別 */
.single-graph .men {
	color: #4e87dc;
}

.single-graph .women {
	color: #de3231;
}

.single-graph .graph-men {
	width: 60%;
	background: #4e87dc;
}

.single-graph .graph-women {
	width: 40%;
	background: #de3231;
}



/* 年代 */
.single-graph .under-10 {
	color: #ed7700;
}

.single-graph .twenty {
	color: #dbdf19;
}

.single-graph .thirty {
	color: #b1dd50;
}

.single-graph .fourty {
	color: #3ab585;
}

.single-graph .fifty {
	color: #b269d6;
}

.single-graph .sixty {
	color: #ff5385;
}

.single-graph .graph-under-10 {
	width: 5%;
	background: #ed7700;
}

.single-graph .graph-twenty {
	width: 10%;
	background: #dbdf19;
}

.single-graph .graph-thirty {
	width: 15%;
	background: #b1dd50;
}

.single-graph .graph-fourty {
	width: 30%;
	background: #3ab585;
}

.single-graph .graph-fifty {
	width: 20%;
	background: #b269d6;
}

.single-graph .graph-sixty {
	width: 20%;
	background: #ff5385;
}



/* 家族構成 */
.single-graph .alone {
	color: #1f7aa1;
}

.single-graph .pair {
	color: #3ab585;
}

.single-graph .family {
	color: #cd0e53;
}

.single-graph .graph-alone {
	width: 55%;
	background: #1f7aa1;
}

.single-graph .graph-pair {
	width: 32%;
	background: #3ab585;
}

.single-graph .graph-family {
	width: 13%;
	background: #cd0e53;
}



/* 世帯収入 */
.single-graph .under-300 {
	color: #ed7700;
}

.single-graph .yen300 {
	color: #b1dd50;
}

.single-graph .yen500 {
	color: #3ab585;
}

.single-graph .yen700 {
	color: #b269d6;
}

.single-graph .yen1000 {
	color: #ff5385;
}

.single-graph .graph-under-300 {
	width: 5%;
	background: #ed7700;
}

.single-graph .graph-yen300 {
	width: 10%;
	background: #b1dd50;
}

.single-graph .graph-yen500 {
	width: 20%;
	background: #3ab585;
}

.single-graph .graph-yen700 {
	width: 40%;
	background: #b269d6;
}

.single-graph .graph-yen1000 {
	width: 25%;
	background: #ff5385;
}



/* 口コミの評価 */
.single-graph .perfect {
	color: #4e87dc;
}

.single-graph .concern {
	color: #de3231;
}

.single-graph .graph-perfect-hospital,
.single-graph .graph-perfect-natural,
.single-graph .graph-perfect-security,
.single-graph .graph-perfect-shopping,
.single-graph .graph-perfect-residents {
	background: #4e87dc;
}

.single-graph .graph-concern-hospital,
.single-graph .graph-concern-natural,
.single-graph .graph-concern-security,
.single-graph .graph-concern-shopping,
.single-graph .graph-concern-residents {
	background: #de3231;
}



/* 治安 */
.graph-perfect-security {
	width: 50%;
}

.graph-concern-security {
	width: 50%;
}



/* 自然環境 */
.graph-perfect-natural {
	width: 50%;
}

.graph-concern-natural {
	width: 50%;
}



/* 子育て・病院 */
.graph-perfect-hospital {
	width: 50%;
}

.graph-concern-hospital {
	width: 50%;
}



/* お買い物・飲食 */
.graph-perfect-shopping {
	width: 50%;
}

.graph-concern-shopping {
	width: 50%;
}



/* コメント */
.card {
	margin: 0 0 16px;
}

.card .reviewer {
	display: flex;
	align-items: center;
	gap: 0 8px;
	font-size: 12px;
}

.card .reviewer img {
	width: 40px;
	height: 40px;
	border-radius: 50%;

}

.card .review-details {
	position: relative;
	margin: 8px 0 0;
	padding: 8px;
	border-radius: 8px;
	background: var(--color-grey-light);
}

.card .review-details::before {
	position: absolute;
	top: -15px;
	left: 50px;
	clip-path: polygon(50% 0,100% 100%,0 100%);
	width: 20px;
	height: 15px;
	background: var(--color-grey-light);
	content: '';
}

.title {
	font-weight: bold;
}

@media screen and (min-width: 1024px) {
	.kuchikomi .area-reviews {
		/* margin: 24px 0 0; */
		padding: 0;
		/* border-top: 1px solid var(--color-grey-origin); */
		display: flex;
		flex-wrap: wrap;
		gap: 16px 24px;
	}

	.kuchikomi .area-reviews > h2 {
		/* h3→h2へ */
		/* margin: 24px 0 0; */
		margin: 0;
		width: 100%;
		font-size: 18px;
	}

	.card {
		width: calc((100% - 24px) /2);
		margin: 0 0 8px;
	}

	.card > .review-details {
		padding: 16px;
	}

	.card > .reviewer {
		font-size: 16px;
	}

	.review-comment {
		line-height: 1.5;
	}
}



/* 星 */
.rate {
	display: flex;
	align-items: center;
	gap: 0 4px;
	margin: 4px 0;
	font-weight: bold;
}

.rate .category-perfect,
.rate .category-concern,
.rate .rate-value {
	font-size: 12px;
}

.category-perfect {
	color: #4e87dc;
}

.category-concern {
	color: #de3231;
}

.rate-star {
	position: relative;
	z-index: 0;
	display: inline-block;
	white-space: nowrap;
	color: var(--color-grey-dak);
	font-size: 12px;
}

.rate-star::before,
.rate-star::after {
	font-family: 'icomoon';
	content: "\e986\e986\e986\e986\e986";
	letter-spacing: 0.25em;
	color: var(--color-grey-dark);
}

.rate-star::after {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	-webkit-text-stroke: 0.2px var(--color-housecom-blue);
	text-stroke: 0.2px var(--color-housecom-blue);
	overflow: hidden;
	white-space: nowrap;
	color: var(--color-housecom-blue);
}

.rate-star[data-rate="5.0"]::after {
	width: 100%;
}

.rate-star[data-rate="4.5"]::after {
	width: 87.5%;
}

.rate-star[data-rate="4.0"]::after {
	width: 80%;
}

.rate-star[data-rate="3.5"]::after {
	width: 67.5%;
}

.rate-star[data-rate="3.0"]::after {
	width: 60%;
}

.rate-star[data-rate="2.5"]::after {
	width: 47.5%;
}

.rate-star[data-rate="2.0"]::after {
	width: 40%;
}

.rate-star[data-rate="1.5"]::after {
	width: 27.5%;
}

.rate-star[data-rate="1.0"]::after {
	width: 20%;
}

.rate-star[data-rate="0.5"]::after {
	width: 7.5%;
}

.rate-star[data-rate="0"]::after {
	width: 0%;
}

.rate-star[data-rate="0.0"]::after {
	width: 0%;
}

@media screen and (min-width: 1024px) {
	.rate {
		display: flex;
		gap: 0 4px;
		margin: 8px 0 12px;
	}

	.rate .category-perfect,
	.rate .category-concern,
	.rate .rate-value {
		font-size: 16px;
	}

	.rate-star {
		font-size: 16px;
	}
}



/* 長文 */
.read-more {
	cursor: pointer;
	text-decoration: underline;
}

.overflow-text {
	display: none;
}



/* マンションノート */
/* .to-mansion-note {
	text-align: center;
	padding: 0 16px;
	width: 100%;
}

.to-mansion-note span {
	padding: 12px 0;
	width: 100%;
	max-width: 342px;
	line-height: 1;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
} */

.mansion-note {
	font-size: 12px;
	margin: 24px 0 0;
}

.mansion-note .mansion-note-info {
	margin: 8px 0 0;
}

.mansion-note a {
	text-decoration: underline;
	color: var(--color-link-text);
}

.mansion-note img {
	width: 120px;
	height: 21px;
	vertical-align: top;
	margin: 0 0 0 8px;
}

@media screen and (min-width: 1024px) {
	/* .to-mansion-note {
		width: 100%;
		margin: 0 auto;
		translate: 0 -8px;
	} */

	.mansion-note {
		margin: 8px 0 0;
		width: 100%;
		line-height: 1.5;
	}

}










/* =====================================================
--------------------------------------------------------
*NOTE - 似た条件でさらに探す
--------------------------------------------------------
===================================================== */

.conditional-search {
	padding: 16px;
	border-bottom: 1px solid var(--color-grey-origin);
}

.conditional-search > p {
	/* margin: 16px 0 8px; */
	margin-bottom: 16px;
	font-size: 18px;
	font-weight: bold;
}

.conditional-search > p.classification {
	font-size: 14px;
	margin: 8px 0;
	/* font-weight: bold; */
}

.conditional-search > h2 {
	/* margin: 0 0 16px; */
	margin-bottom: 8px;
	font-size: 16px;
	font-weight: bold;
}

.conditional-search ul + h2 {
	margin-top: 16px;
}

.conditional-search > div:has(> a) {
	display: none;
}

.conditional-search ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}



/* 学区 */
.view-school-district:not(:has(.c--link-text-internal)) {
	margin-bottom: 16px;
}

#primary-school + ul li,
#junior-high-school + ul li,
.view-school-district li {
	width: calc((100% - 8px) / 2);
}

#primary-school + ul li a,
#junior-high-school + ul li a,
.view-school-district li a {
	width: 100%;
	height: 100%;
	justify-content: flex-start;
	text-align: left;
}

@media screen and (min-width: 1024px) {
	.view-school-district:not(:has(.c--link-text-internal)) {
		margin-bottom: 0;
	}
	.conditional-search > div:has(> a) {
		display: block;
		width: 100%;
		text-align: right;
		translate: -32px 0;
		margin: 16px 0;
	}
	.conditional-search > p {
		/* margin: 24px 0 16px; */
		margin-bottom: 24px;
		font-size: 20px;
	}
	.conditional-search > h2 {
		/* margin: 0 0 24px; */
		margin-bottom: 16px;
		font-size: 18px;
	}
	.conditional-search ul + h2 {
		margin-top: 24px;
	}
	.conditional-search > p.classification {
		margin: 16px 0 8px;
		font-size: 16px;
	}
	.conditional-search {
		padding: 24px clamp(16px, calc((100% - 1024px) / 2), calc((100% - 1024px) / 2));
	}
	#primary-school + ul li,
	#junior-high-school + ul li,
	.view-school-district li {
		width: fit-content;
	}
}










/* =====================================================
--------------------------------------------------------
[C151]店舗一覧
--------------------------------------------------------
===================================================== */

main > h1 {
	padding: 0 16px;
}

.shop-list {
	display: flex;
	flex-direction: column;
	gap: 16px 0;
	padding: 16px;
	background: var(--color-grey-light);
}

.shop-list > div {
	padding: 0;
	background: transparent;
}

.shop-list .applicable-shop-list,
.shop-list .pagination,
.shop-list .user-select {
	order: 1;
}

@media screen and (min-width: 1024px) {
	main > h1 {
		width: 1024px;
		margin: 32px auto;
		padding: 0;
	}
	.shop-list {
		width: 100%;
		max-width: none;
		display: grid;
		grid-template-columns: 278px 722px;
		grid-template-rows: repeat(3, auto) 1fr;
		grid-template-areas: "div1 div1"
							"menu div2"
							"menu div3"
							"menu pager";
		justify-content: center;
		gap: 24px;
		padding: 32px 0 48px;
	}
	.shop-list > * {
		margin: 0 auto;
		padding: 0;
	}
	.shop-list > div:not([class]) {
		margin: 0 0 8px;
	}
}



/* 条件を絞り込みませんか？ */
.shop-list > div:has(> .narrow-down) {
	order: -1;
}

.shop-list .narrow-down *:has(> .u--accordion-head) > div {
	padding: 8px 16px 16px;
}

.shop-list .narrow-down *:has(> .u--accordion-head) > div div:has(.c--link-text-spot) {
	margin: 8px 0 0;
}

@media screen and (min-width: 1024px) {
	.shop-list > div:has(> .narrow-down),
	.shop-list > div:has(.heading-text) {
		grid-area: div1;
		width: 1024px;
		min-width: 1024px;
		height: fit-content;
	}
}



/* 検索方法の変更 */
.shop-list .select-narrow-down {
	margin: 16px 0 0;
}

@media screen and (min-width: 1024px) {
	.shop-list > .select-narrow-down {
		display: none;
	}
	.shop-list .select-narrow-down li:not(:last-of-type) {
		margin: 0 0 8px;
	}
}



/* ヒット件数 */
.shop-list .conditions-result > p > span {
	font-size: 18px;
	font-weight: bold;
}

@media screen and (min-width: 1024px) {
	.shop-list > .conditions-result {
		grid-area: div2;
		width: 722px;
	}
	.shop-list .conditions-result > p {
		font-size: 18px;
	}
	.shop-list .conditions-result > p > span {
		font-size: 22px;
	}
}



/* 検索結果 */
.shop-list .applicable-shop-list {
	display: flex;
	flex-direction: column;
	gap: 16px 0;
	margin-bottom: 8px;
}

.shop-list .applicable-shop-list > article {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 0 8px;
	position: relative;
	margin: 0 auto;
	border: 1px solid var(--color-grey-origin);
	border-top: 8px solid var(--color-housecom-blue);
	border-radius: 8px;
	background: #fff;
	color: var(--color-link-text);
}

.shop-list .applicable-shop-list > article hgroup {
	width: calc(100% - 16px - 24px);
	padding: 16px 8px 8px;
	padding: 12px 8px 4px;
}

.shop-list .applicable-shop-list > article hgroup h3 {
	overflow-wrap: anywhere;
	margin-bottom: 8px;
	padding: 0 8px 0 0;
	color: var(--color-link-text);
	font-size: 16px;
	font-weight: bold;
}

.shop-list .applicable-shop-list > article hgroup p {
	color: var(--color-grey-dark);
	font-size: 12px;
}

.shop-list .applicable-shop-list > article hgroup + a {
	position: static !important;
	width: 24px;
	height: 24px;
	min-height: 0;
	border-radius: 50%;
	line-height: 1;
	padding: 0;
	/* {{-- yonezawa 20251030 チェックFB No.63 --}} */
	/* {{-- a要素タップ時の挙動を修正 --}} */
	-webkit-tap-highlight-color: transparent;
}

/* {{-- yonezawa 20251030 チェックFB No.63 --}} */
/* {{-- a要素タップ時の挙動を修正 --}} */
.shop-list .applicable-shop-list > article hgroup + a:focus {
	outline: none;
}

.shop-list .applicable-shop-list > article hgroup + a::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	translate: 0 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	content: '';
}

/* {{-- yonezawa 20251030 チェックFB No.63 --}} */
/* {{-- a要素タップ時の挙動を修正 --}} */
.shop-list .applicable-shop-list > article hgroup + a:active::before {
	animation: tap .5s;
}

.shop-list .applicable-shop-list > article hgroup + a::after {
	color: var(--color-black);
	font-family: 'icomoon';
	font-size: 10px;
	font-weight: bold;
	content: "\e90d";
}

.shop-list .applicable-shop-list > article hgroup + a span {
	display: none;
}

.shop-list .applicable-shop-list > article hgroup + a ~ * {
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.shop-list > .applicable-shop-list {
		grid-area: div3;
		margin-bottom: 0;
		width: 722px;
		gap: 24px 0;
	}
	.shop-list .applicable-shop-list > article hgroup {
		padding: 16px;
		width: calc(100% - 24px - 180px);
	}
	.shop-list .applicable-shop-list > article hgroup h3 {
		font-size: 20px;
		margin: 0 0 16px;
	}
	.shop-list .applicable-shop-list > article hgroup p {
		font-size: 16px;
		margin: -8px 0 0;
	}
	.shop-list .applicable-shop-list > article hgroup + a {
		width: 180px;
		height: auto;
		padding: 12px 0;
		border-radius: 4px;
		display: flex;
		align-self: center;
	}
	.shop-list .applicable-shop-list > article hgroup + a::after {
		translate: 32px 0;
		font-size: 16px;
		font-weight: normal;
	}
	.shop-list .applicable-shop-list > article hgroup + a span {
		display: inline-block;
	}
}



/* 店舗の特徴 */
.shop-list .applicable-shop-list > article .features-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	line-height: 1;
	font-size: 12px;
	padding: 12px 8px;
	width: 100%;
	border-top: 1px solid var(--color-grey-origin);
}

.shop-list .applicable-shop-list > article .features-item span {
	padding: 0 8px;
	min-height: 32px;
	border: 1px solid var(--color-grey-origin);
	background: #fff;
	color: var(--color-black);
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	position: relative;
	border-radius: 4px;
	text-align: center;
}

.shop-list .applicable-shop-list > article .features-item .u--accordion-head {
	border: none;
	margin: 0 0 0 auto;
	padding: 0;
	color: var(--color-link-text);
	cursor: pointer;
}

/* {{yonezawa 20250912 店舗一覧ページ 「もっと見る」ボタンの位置と挙動修正}} */
/* {{yonezawa 20251001 [作業リスト 米澤 No.15]
	もっと見る（閉じる）ボタンがタグと被って表示を解消させるため削除}} */
/* .shop-list .applicable-shop-list > article .features-item {
	position: relative;
} */
	
/*.shop-list .applicable-shop-list > article .features-item .u--accordion-head {
	padding: 0 16px 0 0;

	{{yonezawa 20251001 [作業リスト 米澤 No.15]
		もっと見る（閉じる）ボタンがタグと被って表示を解消させるため削除}}
	position: absolute;
	right: 1em;
	bottom: calc(.5em + 5px);
	background: rgba(255, 255, 255, .75); */
	/* backdrop-filter: blur(2.5px);
	
	{{yonezawa 20251001 [作業リスト 米澤 No.15]
		もっと見る（閉じる）ボタンがタグと被って表示を解消させるため追加
}*/

.shop-list .applicable-shop-list > article .features-item .u--accordion-head:hover {
	opacity: .85 !important;
}

.shop-list .applicable-shop-list > article .features-item .u--accordion-head::after {
	content: "";
	color: var(--color-black);
}

.shop-list .applicable-shop-list > article .features-item-more {
	/* {{yonezawa 20250917 店舗の特徴の追加表示分が横並びになるよう display の値を修正}} */
	/* display: flex; */
	display: contents;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	line-height: 1;
	font-size: 12px;
	width: 100%;
}


@media screen and (min-width: 1024px) {
	.shop-list .applicable-shop-list > article .features-item {
		padding: 12px 16px;
		font-size: 14px;
	}
	.shop-list .applicable-shop-list > article .features-item-more {
		font-size: 14px;
	}
}



/* 店舗の詳細 */
.shop-list .applicable-shop-list > article:not(:has(.features-item)) .shop-details {
	padding-top: 12px;
	border-top: 1px solid var(--color-grey-origin);
}

.shop-list .applicable-shop-list > article .shop-details {
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-template-rows: 100px 1fr;
	grid-template-areas: "img ul"
						"dl dl";
	align-items: flex-start;
	gap: 8px;
	padding: 0 8px;
	width: 100%;
	color: var(--color-black);
}

.shop-list .applicable-shop-list > article .shop-details > div {
	grid-area: img;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 100px;
	background: var(--color-grey-pale);
}

.shop-list .applicable-shop-list > article .shop-details > div img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.shop-list .applicable-shop-list > article .shop-details > ul {
	grid-area: ul;
	line-height: 22px;
}

.shop-list .applicable-shop-list > article .shop-details > dl {
	grid-area: dl;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}

.shop-list .applicable-shop-list > article .shop-details dt {
	font-size: 12px;
	width: 5.5em;
	color: var(--color-grey-dark);
}

.shop-list .applicable-shop-list > article .shop-details dd {
	width: calc(100% - 5.5em - 8px);
}

.shop-list .applicable-shop-list > article .shop-details dd a {
	white-space: nowrap;
	color: var(--color-link-text);
	font-weight: bold;
	align-self: baseline;
	font-size: 16px;
}

.shop-list .applicable-shop-list > article .shop-details dd a span {
	padding-left: 0.25em;
	font-size: 14px;
}

@media screen and (min-width: 375px) {
	.shop-list .applicable-shop-list > article .shop-details {
		grid-template-rows: auto 1fr;
		grid-template-areas: "img ul"
							"img dl";
	}
}

@media screen and (min-width: 1024px) {
	.shop-list .applicable-shop-list > article .shop-details {
		grid-template-columns: 140px 1fr;
		gap: 16px;
		padding: 0 16px;
	}
	.shop-list .applicable-shop-list > article .shop-details > div {
		width: 140px;
		height: 140px;
	}
	.shop-list .applicable-shop-list > article .shop-details > dl {
		gap: 10px 16px;
	}
	.shop-list .applicable-shop-list > article .shop-details dt {
		font-size: 14px;
	}
	.shop-list .applicable-shop-list > article .shop-details dd a {
		font-size: 20px;
		line-height: 1;
	}
	.shop-list .applicable-shop-list > article .shop-details dd a span {
		font-size: 16px;
	}
}



/* 取扱い物件数 */
.shop-list .applicable-shop-list > article .quantity-property[class] {
	display: flex;
	flex-flow: row wrap;
	gap: 0 16px;
	align-items: flex-end;
	width: calc(100% - 5.5em);
	font-size: 16px;
}

.shop-list .applicable-shop-list > article .quantity-property::after {
	content: "\e90d";
	font-family: 'icomoon';
}



/* 店舗へお問い合わせ */
.shop-list .applicable-shop-list > article .inquiry-link {
	display: flex;
	flex-flow: row wrap	;
	justify-content: center;
	gap: 16px;
	margin: 8px 0 16px;
	padding: 0 8px;
	width: 100%;
}

.shop-list .applicable-shop-list > article .inquiry-link a {
	position: relative;
	line-height: 1.125;
}

.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv-primary {
	width: 100%;
	padding-left: 34px;
}

.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv {
	width: 100%;
	padding-left: 38px;
}

@media screen and (min-width:375px) {
	.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv-primary {
		width: 180px;
	}
	.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv {
		width: calc(100% - 16px - 180px);
	}
}

@media screen and (min-width:425px) {
	.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv {
		max-width: 130px;
	}
}

.shop-list .applicable-shop-list > article .inquiry-link a::before {
	position: absolute;
	top: 50%;
	left: 8px;
	font-family: 'icomoon';
	font-size: 23px;
	transition: color 0.5s;
}

.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv-primary::before {
	content: "\e927";
	color: #fff;
}

.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv-primary:hover::before {
	color: var(--color-link-cv);
}

.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv::before {
	content: "\e928";
	color: var(--color-link-cv);
}

.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv-primary:hover::before,
.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv-primary:active::before {
	color: #fff;
}

.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv:hover::before,
.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv:active::before {
	color: var(--color-link-cv);
}

.shop-list .applicable-shop-list > article .inquiry-link span {
	display: none;
}

.shop-list .applicable-shop-list > article .inquiry-link .free {
	display: block;
	width: 100%;
	font-size: 12px;
}

@media screen and (min-width: 1024px) {
	.shop-list .applicable-shop-list > article .quantity-property[class] {
		width: calc(100% - 5.5em - 8px);
	}
	.shop-list .applicable-shop-list > article .inquiry-link {
		padding: 0 16px;
	}
	.shop-list .applicable-shop-list > article .inquiry-link[class] span {
		display: inline-block;
		width: fit-content;
		font-size: 16px;
	}
	.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv-primary {
		pointer-events: none;
		width: calc(100% - 16px - 312px);
		display: flex;
		justify-content: flex-start;
		gap: 0 8px;
		padding: 8px 0;
		border: none;
		background: transparent;
		color: var(--color-link-cv);
		font-size: 24px;
	}
	.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv-primary::before {
		color: var(--color-link-cv);
		margin: 0 16px 0 0;
		position: relative;
	}
	.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv {
		width: 312px;
		max-width: unset;
	}
	.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv:hover::before {
		color: #fff;
	}
	.shop-list .applicable-shop-list > article .inquiry-link .c--link-cv .free {
		margin: 0 0 0 8px;
	}
}



/* pagination */
.shop-list .pagination_result span {
	display: inline-block;
	margin: 0;
	line-height: 1;
	font-size: 18px;
	font-weight: bold;
}

.shop-list .pagination_result span span {
	font-size: 14px;
}

.shop-list .pagination > div {
	margin: 16px 0 32px;
}

@media screen and (min-width: 1024px) {
	.shop-list > .pagination {
		grid-area: pager;
		width: 722px;
	}
	.shop-list .pagination_result {
		width: 100%;
		justify-content: flex-start;
		font-size: 18px;
	}
	.shop-list .pagination_result span {
		font-size: 22px;
	}
	.shop-list .pagination_result span span {
		font-size: 18px;
	}
	.shop-list .pagination_result + div {
		width: 376px;
		flex-shrink: 0;
	}
	.shop-list .pagination > div {
		margin: 0 auto;
	}
}



/* サイドバー */
.shop-list .user-select .select-narrow-down {
	margin: 0 auto 8px;
}

/* {{ yonezawa 20250912 店舗検索結果ページ デザイン崩れ修正のため追加 }} */
.shop-list .user-select > [name="frmSearchCondition"] > ul.select-narrow-down ~ * {
	display: none;
}

.shop-list .user-select > [name="frmSearchCondition"] > ul.select-narrow-down ~ .add-conditions {
	display: flex;
}


@media screen and (min-width: 1024px) {
	.shop-list > .user-select {
		grid-area: menu;
		width: 278px;
	}
	.shop-list .user-select .select-narrow-down {
		margin: 0;
	}

	.shop-list .user-select .select-narrow-down:has(> .shop-name) {
		padding: 16px 0 0;
	}
	.shop-list .user-select .select-narrow-down:has(> .shop-name) li {
		gap: 8px 0;
	}
	.shop-list .user-select .select-narrow-down li.detailed-conditions {
		margin: 0;
	}
	.shop-list .user-select .select-narrow-down label {
		font-size: 14px;
	}
	.shop-list .user-select .select-narrow-down:has(label) > div {
		margin: 24px 0 0;
	}
	.shop-list .user-select ul:has(label) {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	.shop-list .user-select ul:has(label) li {
		margin: 0;
		padding: 0;
		border: none;
	}
	.shop-list .user-select div:has(.free-word-search) li {
		width: 100%;
	}
	.shop-list .user-select div:has(.free-word-search) li label {
		width: 100%;
	}
	.shop-list .user-select .select-narrow-down h3 {
		margin: 24px 0 16px;
		font-weight: bold;
	}
	.shop-list .user-select .classification {
		margin: 16px 0 8px;
		font-size: 14px;
	}
	.shop-list .user-select .classification + ul {
		flex-direction: column;
		gap: 8px 0;
	}
	.shop-list .user-select .classification + ul li {
		margin: 0;
	}
	.shop-list .user-select .free-word-search {
		display: flex;
		gap: 0 8px;
		margin: 0 auto 16px;
	}
	.shop-list .user-select .free-word-search input {
		width: calc(100% - 8px - 65px);
	}
	.shop-list .user-select .free-word-search button {
		width: 65px;
		font-weight: bold;
	}
	.shop-list > .user-select .u--icon-folder,
	.shop-list > .user-select .u--icon-zoom01 {
		margin: 0 auto;
	}

	/* {{ yonezawa 20250912 店舗検索結果ページ デザイン崩れ修正のため追加 }} */
	.shop-list .user-select > [name="frmSearchCondition"] > ul.select-narrow-down ~ *  {
		display: block;
	}
}

@media (any-hover:hover) {
	.shop-list .applicable-shop-list > article hgroup,
	.shop-list .select-narrow-down li p a,
	.shop-list .applicable-shop-list > article .features-item .u--accordion-head,
	.shop-list .applicable-shop-list > article .shop-details dd a {
		transition: opacity 0.5s;
	}
	.shop-list .applicable-shop-list > article:has(.c--link-main:hover) hgroup,
	.shop-list .select-narrow-down li p a:hover,
	.shop-list .applicable-shop-list > article .features-item .u--accordion-head:hover,
	.shop-list .applicable-shop-list > article .shop-details dd a:hover {
		opacity: 0.5;
	}
	.shop-list .applicable-shop-list > article .shop-details dd a:hover > span {
		opacity: 1 !important;
	}
}

@media screen and (min-width: 1024px) {
	/* {{20251008 不要のため削除}} */
	/* .shop-list > div:not([class]) > div:not([class]):has(> .select-narrow-down) {
		display: none;
	} */
	.shop-list + .conditional-search {
		padding: 32px clamp(24px, calc((100vw - 1024px) / 2), calc((100vw - 1024px) / 2));
	}
}










/* =====================================================
--------------------------------------------------------
該当0件
--------------------------------------------------------
===================================================== */

.not-applicable {
	position: relative;
	padding: 12px 16px 12px 42px;
	width: 100%;
	border-radius: 4px;
	border: 3px solid var(--color-link-cv);
	color: var(--color-link-cv);
	font-size: 18px;
	font-weight: bold;
}

.not-applicable::before {
	position: absolute;
	top: 50%;
	left: 16px;
	translate: 0 -50%;
	color: var(--color-link-cv);
	font-family: 'icomoon';
	font-weight: normal;
	content: '\e93e';
}



/* 非表示（物件一覧） */
main:has(.not-applicable) .in-page-link,
main:has(.not-applicable) div:is(.u--icon-search),
main:has(.not-applicable) .town-info,
main:has(.not-applicable) .access,
main:has(.not-applicable) .neighborhood ,
main:has(.not-applicable) .kuchikomi,
main:has(.not-applicable) .conditional-search,
main:has(.not-applicable) .conditions,
main:has(.not-applicable) .pagination,
main:has(.not-applicable) .property > article {
	display: none;
}

main:has(.not-applicable) .search-section {
	padding-top: 16px;
}



/* 非表示（店舗一覧） */
main:has(.not-applicable.active) .shop-list > div:has(> .narrow-down),
main:has(.not-applicable.active) .conditions-result,
main:has(.not-applicable.active) .conditional-search,
main:has(.not-applicable.active) .shop-list .applicable-shop-list > article,
main:has(.not-applicable.active) .shop-list > .select-narrow-down {
	display: none;
}



/* {{ yonezawa 20250912 店舗検索結果ページ デザイン崩れ修正のため追加 }} */
.shop-list:has(.not-applicable) p:only-child.heading-text {
	display: none;
}

.shop-list .user-select [name="frmSearchCondition"] > p {
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 8px;
}



@media screen and (min-width: 748px) {
	.not-applicable {
		/* {{yonezawa 20250917 店舗一覧での検索結果0件の場合の表示を修正}} */
		/* width: fit-content; */
		margin: auto;
	}
}

@media screen and (min-width: 1024px) {
	.not-applicable {
		padding-left: 44px;
		font-size: 20px;
		text-align: center;
	}
	.not-applicable::before {
		display: none;
	}
	.not-applicable span {
		position: relative;
	}
	.not-applicable span::before {
		position: absolute;
		top: 50%;
		left: -32px;
		translate: 0 -50%;
		color: var(--color-link-cv);
		font-family: 'icomoon';
		font-weight: normal;
		content: '\e93e';
	}
	/* 一覧 */
	main:has(.not-applicable) .search-section,
	main:has(.not-applicable.active) .shop-list {
		padding-top: 48px;
	}
/* {{ yonezawa 20250912 店舗検索結果ページ デザイン崩れ修正のため削除 }} */
/*
	main:has(.not-applicable.active) .shop-list {
		grid-template-rows: auto;
		grid-template-areas: unset;
	}
*/
	main:has(.not-applicable) .search-section .property {
		grid-area: 2 / 2 / 3 / 3;
	}
	main:has(.not-applicable) .search-section .user-select .select-narrow-down {
		margin-top: 0;
	}
/* {{ yonezawa 20250912 店舗検索結果ページ デザイン崩れ修正のため削除 }} */
/*
	main:has(.not-applicable) .shop-list:has(.not-applicable) > .applicable-shop-list {
		grid-area: 1 / 2 / 2 / 2;
	}
	main:has(.not-applicable.active) .shop-list:has(.not-applicable) > .user-select {
		grid-area: 1 / 1 / 2 / 2;
	}
*/

/* {{ yonezawa 20250912 店舗検索結果ページ デザイン崩れ修正のため追加 }} */
	.shop-list .user-select [name="frmSearchCondition"] > p {
		display: none;
	}
}










/* =====================================================
--------------------------------------------------------
ぱんくず
--------------------------------------------------------
===================================================== */

.breadcrumb {
	background: var(--color-grey-light);
}

.breadcrumb::before {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	height: 100%;
	background: var(--color-grey-light);
	content: '';
}










/* =====================================================
--------------------------------------------------------
「検索条件を確認・変更する」追従
--------------------------------------------------------
===================================================== */

/* 追従を固定する際にけす */
body:has(.property) footer,
body:has(.shop-list) footer {
	margin-bottom: 100px;
}

.add-conditions {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: 32px;
	position: fixed;
	left: 0;
	bottom: 0;
	padding: 24px 16px;
	width: 100%;
	background: #fff;
	border-top: 2px solid var(--color-grey-light);
	z-index: 2;
}

/* 追従を固定する際に使用する */
/* .add-conditions {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: 32px;
	padding: 24px 16px;
	width: 100%;
	background: var(--color-grey-light);
}

.add-conditions.fixed {
	position: fixed;
	left: 0;
	bottom: 0;
	border-top: 2px solid var(--color-grey-origin);
	background: #fff;
	z-index: 1;
} */

.add-conditions_sp {
	display: flex;
}

.add-conditions_pc {
	display: none;
}

.add-conditions .u--icon-zoom01 {
	padding: 16px 16px 16px 44px;
	margin: 0 auto;
	max-width: 256px;
	border: 2px solid var(--color-housecom-blue);
	line-height: 1;
}

.add-conditions .u--icon-zoom01::before {
	left: 16px;
	color: var(--color-black);
	font-size: 16px;
}

@media screen and (min-width: 1024px) {
	.add-conditions_sp {
		display: none;
	}
	.add-conditions_pc {
		display: flex;
	}
	.add-conditions .u--icon-zoom01 {
		font-size: 16px;
	}
	.add-conditions .u--icon-zoom01::before {
		margin: 0 8px 0 0;
		font-size: 20px;
	}
}