@charset "UTF-8";

/* =====================================================
--------------------------------------------------------
基本設定（共通）
--------------------------------------------------------
===================================================== */

.modal-dialog {
	position: fixed;
	top: 0;
	left: 0;
	translate: 0;
	z-index: 4;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0 0 48px;
	width: 100%;
	height: 100%;
	max-height: 100vh;
	background: #fff;
	scrollbar-width: none;
}

.modal-dialog:has(.search-button-area) {
	padding: 0;
}

@supports (-webkit-touch-callout: none) {
	.modal-dialog {
		max-height: 100dvh;
	}
}

.modal-dialog:has(.fixed-menu) {
	translate: none;
	padding: 78px 0 64px;
}

.modal-dialog:has(.fixed-menu) header {
	position: fixed;
	width: 100%;
}

.modal-dialog header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 32px 16px 16px;
	border-bottom: 1px solid #bbb;
	background: #fff;
}

.modal-dialog header a {
	display: flex;
	align-items: center;
	font-size: 16px;
	color: var(--color-link-text);
}

.modal-dialog header a::before {
	rotate: 180deg;
	margin: 0 8px 0 -8px;
	color: var(--color-black);
	font-family: 'icomoon';
	font-size: 32px;
	content: "\e90d";
}

.modal-dialog header button::before {
	font-family: 'icomoon';
	font-size: 32px;
	content: "\e92d";
}

.modal-dialog_body {
	padding: 0 16px;
}



/* リンク */
.modal-dialog a:hover {
	opacity: 0.5;
}



/* ラベル */
.modal-dialog label {
	display: flex;
	align-items: flex-start;
	width: 100%;
}

.modal-dialog [type="checkbox"] {
	margin: 0 8px 0 0;
}

@media screen and (min-width: 1024px) {
	.modal-dialog {
		top: 100px;
		left: 50%;
		translate: -50% 0;
		/* padding: 0 0 48px; */
		width: 1024px;
		height: fit-content;
		max-height: calc(100vh - 200px);
	}
	.modal-dialog header a {
		font-size: 18px;
	}
}










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

.not-applicable {
	display: block;
	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';
}

@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';
	}
}










/* =====================================================
--------------------------------------------------------
見出し
--------------------------------------------------------
===================================================== */

.modal-dialog *:is(h2, h3, h4) {
	font-weight: bold;
}

.modal-dialog li:not(.disabled) *:is(h2,h3, h4) {
	cursor: pointer;
}

.modal-dialog[class] h2 {
	margin: 24px 0;
	font-size: 20px;
}

.medium-heading {
	margin: 24px 0 16px;
	font-size: 16px;
}

@media screen and (min-width: 1024px) {
	.modal-dialog[class] h2 {
		margin: 32px 0;
		font-size: 24px;
	}
	.medium-heading {
		margin: 32px 0 16px;
		font-size: 18px;
	}
}










/* =====================================================
--------------------------------------------------------
見出し + 件数 の1行表示
--------------------------------------------------------
===================================================== */

.modal-dialog .heading-number {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 24px 0 16px;
}

.modal-dialog .heading-number {
	margin: 24px 0 16px;
}

.modal-dialog[class] .heading-number h3 {
	font-size: 16px;
}

.modal-dialog .heading-number span {
	color: var(--color-grey-dark);
}

/* [C021/23/25] タグ・世帯・物件種別 */
main:has(> .hash) div:not(:has(.free-word-search)):not(:has(.line)) .heading-number h3,
main:has(.u--icon-ldk) div:not(:has(.free-word-search)):not(:has(.line)) .heading-number h3,
main:has(.u--icon-house) div:not(:has(.free-word-search)):not(:has(.line)) .heading-number h3 {
	margin: 0;
	font-size: 16px;
}

@media screen and (min-width: 1024px) {
	.modal-dialog .heading-number h3 {
		margin: 0;
		font-size: 18px;
	}
	.modal-dialog .heading-number span {
		font-weight: normal;
	}
}










/* =====================================================
--------------------------------------------------------
基本のリスト
--------------------------------------------------------
===================================================== */

.checkbox-list {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.checkbox-list li {
	width: 100%;
}

.checkbox-list .select-all label {
	width: fit-content;
}

.checkbox-list .select-all label span {
	margin: 0;
	transition: opacity 0.5s;
	color: var(--color-link-text);
	font-weight: bold;
}

.checkbox-list .select-all label span:hover {
	opacity: 0.5;
}

.checkbox-list label > [type="checkbox"] {
	translate: 0 -0.25em;
}

.checkbox-list label > :is(h3, h4) {
	font-weight: normal;
}

.checkbox-list label > span {
	margin: 0 0 0 auto;
	color: var(--color-grey-dark);
}

.checkbox-list label a {
	display: block;
	transition: opacity 0.5s;
	padding: 0;
	width: 100%;
	color: var(--color-link-text);
	font-size: inherit;
}

.checkbox-list li .applicable-items,
.checkbox-list li .explanatory-text {
	width: 100%;
	color: var(--color-black);
}

.disabled > .applicable-items {
	font-size: 12px;
}

@media screen and (min-width: 1024px) {
	.checkbox-list li {
		width: calc((100% - 24px * 2) / 3);
	}
	.checkbox-list .select-all {
		width: 100%;
	}
}










/* =====================================================
--------------------------------------------------------
住所付き [C006-1]
--------------------------------------------------------
===================================================== */

.checkbox-list:has(.attached-information)[class] li {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas: "h3 span"
						"p p";
}

.checkbox-list:has(.attached-information) li h3 {
	grid-area: h3;
}

.checkbox-list:has(.attached-information) li span {
	grid-area: span;
	margin: 0 0 0 auto;
}

.checkbox-list:has(.attached-information) li p {
	grid-area: p;
	font-size: 12px;
}

@media screen and (min-width: 1024px) {
	.checkbox-list:has(.attached-information) li p {
		font-size: 14px;
		color: var(--color-black);
	}
}










/* =====================================================
--------------------------------------------------------
チェックボックスなし
--------------------------------------------------------
===================================================== */

.checkbox-list:not(:has([type="checkbox"])) li {
	display: flex;
	justify-content: space-between;
}

.checkbox-list:not(:has([type="checkbox"])) li > * {
	font-weight: normal;
}

.checkbox-list:not(:has([type="checkbox"])) li span {
	color: var(--color-grey-dark);
}

.checkbox-list:not(:has([type="checkbox"])) li a {
	color: var(--color-link-text);
	line-height: 1.1;
}










/* =====================================================
--------------------------------------------------------
チェックボックスなし + 一覧付き 
件数あり[C004-2][C009-2][C022-2][C024-2][C026-2]
件数なし[C011-2][C017-2][C021-1]
--------------------------------------------------------
===================================================== */

.checkbox-list:not(:has([type="checkbox"])):has(.applicable-items) > li {
	flex-direction: column;
}

.checkbox-list:not(:has([type="checkbox"])):has(.applicable-items) li div {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.checkbox-list:not(:has([type="checkbox"])):has(.applicable-items) li div h3 {
	font-weight: normal;
}



/* 補足 */
.checkbox-list:not(:has([type="checkbox"])):has(.applicable-items) li ul {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 0;
	margin: 2px 0 0;
	width: 100%;
}

.checkbox-list:not(:has([type="checkbox"])):has(.applicable-items) li li {
	width: fit-content;
	font-size: 12px;
}

.checkbox-list:not(:has([type="checkbox"])):has(.applicable-items) li li:not(:last-of-type)::after {
	display: inline-block;
	margin: 0 -0.25em 0 0;
	content: "、";
}

.checkbox-list:not(:has([type="checkbox"])) .applicable-items.address {
	margin: 4px 0 0;
	color: var(--color-black);
	font-size: 12px;
}

/* [C022/24/26] タグ・世帯構成・物件種別 */
main:has(> .hash) div:not(:has(.free-word-search)):not(:has(.line)) .checkbox-list h3,
main:has(.u--icon-ldk) div:not(:has(.free-word-search)):not(:has(.line)) .checkbox-list h3,
main:has(.u--icon-house) div:not(:has(.free-word-search)):not(:has(.line)) .checkbox-list h3 {
	margin: 0;
	font-size: 14px;
	font-weight: normal;
}

@media screen and (min-width: 1024px) {
	.checkbox-list:not(:has([type="checkbox"])):has(.applicable-items) li ul {
		display: block;
		width: 100%;
		font-size: 14px;
	}
	.checkbox-list:not(:has([type="checkbox"])):has(.applicable-items) li li {
		display: inline;
		font-size: 14px;
	}
	.checkbox-list:not(:has([type="checkbox"])):has(.applicable-items) li.disabled li,
	.disabled:has(.applicable-items)[class] .applicable-items ul {
		font-size: 12px;
	}
	.checkbox-list:not(:has([type="checkbox"])) .applicable-items.address {
		font-size: 14px;
	}
	main:has(> .hash) div:not(:has(.free-word-search)):not(:has(.line)) .checkbox-list h3,
	main:has(.u--icon-ldk) div:not(:has(.free-word-search)):not(:has(.line)) .checkbox-list h3,
	main:has(.u--icon-house) div:not(:has(.free-word-search)):not(:has(.line)) .checkbox-list h3 {
		font-size: 16px;
	}
}










/* =====================================================
--------------------------------------------------------
[C002-2]？
--------------------------------------------------------
===================================================== */

.checkbox-list:has(.applicable-items),
.checkbox-list:has(.explanatory-text),
.checkbox-list:has(.attached-information) {
	align-items: flex-start;
	gap: 24px;
}

label:has(+ .applicable-items) {
	flex-wrap: wrap;
}

label:has(+ .applicable-items) h3 {
	max-width: calc(100% - 6em);
}

.checkbox-list:has(.explanatory-text) li {
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px 0;
}

label + .applicable-items {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 0;
	margin: 4px 0 0;
	padding: 0 0 0 32px;
	width: 100%;
	line-height: 1;
}

.checkbox-list:has(.attached-information) li span {
	flex-shrink: 0;
}

.checkbox-list:has(.explanatory-text) .explanatory-text {
	align-self: flex-start;
	line-height: 1.2;
	font-size: 14px;
}

label + .applicable-items li {
	width: fit-content;
	font-size: 12px;
	line-height: 1.2;
}

label + .applicable-items li:not(:last-of-type):after {
	display: inline-block;
	margin: 0 -0.25em 0 0;
	content: "、";
}

@media screen and (min-width: 1024px) {
	label + .applicable-items {
		display: block;
		width: 100%;
	}
	label + .applicable-items li {
		display: inline;
		font-size: 14px;
	}
	.checkbox-list li.disabled label + .applicable-items li {
		font-size: 12px;
	}
}










/* =====================================================
--------------------------------------------------------
チェックボックスなし + すべて選択（ulの外） [C011-1]
チェックボックスなし + ～を見る項目あり [C004-4] [C017-3] [C022-4] [C024-4] [C026-4]
--------------------------------------------------------
===================================================== */

div:not(:has([type="checkbox"])) .view-more-details,
div:not(:has([type="checkbox"])) .all-item {
	margin: 16px 0 24px;
	width:fit-content ;
}

div:not(:has([type="checkbox"])) .view-more-details a,
div:not(:has([type="checkbox"])) .all-item a {
	color: var(--color-link-text); 
	font-weight: bold;
}

div:not(:has([type="checkbox"])):has(.all-item) h3 {
	font-size: 16px;
}

@media screen and (min-width: 1024px) {
	div:not(:has([type="checkbox"])):has(.all-item) h3 {
		font-size: 18px;
	}
}










/* =====================================================
--------------------------------------------------------
学区データ [C009-1/2]
--------------------------------------------------------
===================================================== */

.about-data .data-title {
	display: flex;
	align-items: center;
	gap: 0 8px;
	margin: 32px auto 0;
	padding: 12px 16px;
	border: 1px solid var(--color-grey-origin);
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	font-size: 18px;
	font-weight: bold;
	line-height: unset;
}

.about-data .data-title::before {
	font-family: 'icomoon';
	font-size: 30px;
	font-weight: normal;
	content: "\e93e";
}

.about-data .date-sentence {
	border-radius: 0 0 4px 4px;
	border: 1px solid var(--color-grey-origin);
	border-top: none;
	padding: 0 16px 16px;
	font-size: 16px;
}

@media screen and (min-width: 1024px) {
	.about-data .data-title {
		margin: 48px auto 0;
		padding: 10px 16px;
	}
}










/* =====================================================
--------------------------------------------------------
検索ボタン [C002-1/2] [C003-1/2] [C005-1]
--------------------------------------------------------
===================================================== */

.search-button-area {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: 32px;
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	bottom: 0;
	translate: -16px 0;
	margin-top: 32px;
	padding: 24px 16px;
	width: calc(100% + 32px);
	border-top: 2px solid var(--color-grey-light);
	background: #fff;
	z-index: 1;
}

.search-button-area > * {
	padding: 12px 16px;
	width: 100%;
    max-width: 342px;
	border-radius: 4px;
	border-width: 2px;
	font-size: 18px;
	font-weight: bold;
}

.search-button-area button[disabled] {
	opacity: 0.5;
}

@media (any-hover:hover) {
	.search-button-area .c--link-main[disabled]:hover {
		background: var(--color-housecom-green);
	}
}

@media screen and (min-width: 1024px) {
	.search-button-area > * {
		font-size: 20px;
	}
}











/* =====================================================
--------------------------------------------------------
「もっと見る」 [C003-3][C026-5]
--------------------------------------------------------
===================================================== */

.search-read-more {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: 32px;
}

.search-read-more:has(button) {
	margin-top: 32px;
}

.search-read-more > * {
	padding: 12px 16px;
	width: 100%;
	max-width: 342px;
	border-radius: 4px;
	border-width: 2px;
	font-size: 18px;
	font-weight: bold;
}

.search-read-more:has(button[disabled]) {
	display: none !important;
}

.search-read-more button[disabled] {
	opacity: 0.5;
}

@media screen and (min-width: 1024px) {
	.search-read-more > * {
		font-size: 20px;
	}
}










/* =====================================================
--------------------------------------------------------
フリーワード検索 [C021-1]
--------------------------------------------------------
===================================================== */

.modal-dialog .free-word-search {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0 16px;
	margin: 0 0 24px;
}

.modal-dialog .free-word-search h2 {
	width: 100%;
}

.modal-dialog .free-word-search input {
	width: calc(100% - 90px - 16px);
	padding: 12px 16px;
	font-size: 16px;
}

.modal-dialog .free-word-search button {
	display: grid;
	padding: 12px 0;
	place-content: center;
	width: 90px;
	border-radius: 4px;
	background: var(--color-housecom-green);
	font-size: 18px;
	font-weight: bold;
	line-height: 1;
}

.modal-dialog div:has(.free-word-search) h3 {
	margin: unset;
	font-size: 16px;
}


@media screen and (min-width: 1024px) {
	.modal-dialog .free-word-search[class] {
		justify-content: flex-start;
		align-items: flex-start;
		gap: 0 32px;
		margin: 32px 0;
	}
	.modal-dialog .free-word-search h2 {
		margin: 0;
		width: calc(100% - 32px* 2 - 300px - 90px);
		font-size: 24px;
	}
	.modal-dialog .free-word-search input {
		width: 300px;
	}
	.modal-dialog .free-word-search button {
		align-self: stretch;
	}
}










/* =====================================================
--------------------------------------------------------
プルダウンリスト検索 [C005-1]
--------------------------------------------------------
===================================================== */

.pull-down-search {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px 24px;
	margin: 24px 0;
}

.pull-down-search p:not(.not-applicable) {
	width: fit-content;
	font-size: 20px;
	font-weight: bold;
}

.pull-down-search .c--select.station {
	width: calc(100% - 24px - 3em);
	font-size: 16px;
}

.pull-down-search .to-point {
	width: fit-content;
	font-size: 20px;
	font-weight: bold;
}

.pull-down-search .c--select.minutes {
	width: calc(100% - 24px - 9em);
	font-size: 16px;
}

.pull-down-search .find-property {
	display: contents;
}

@media screen and (min-width: 1024px) {
	.pull-down-search {
		gap: 32px;
		margin: 32px 0;
		width: 572px;
	}
	.pull-down-search:has(.not-applicable) {
		margin-bottom: 0;
		width: 100%;
	}
	.pull-down-search p:not(.not-applicable) {
		font-size: 24px;
	}
	.pull-down-search .to-point {
		font-size: 24px;
	}
	.pull-down-search .c--select.station {
		width: calc(100% - 32px - 3em);
	}
	.pull-down-search .c--select.minutes {
		width: calc(100% - 32px - 18em);
	}
	.pull-down-search .find-property {
		display: block;
	}
}










/* =====================================================
--------------------------------------------------------
条件の追加 [C002-1/2] [C003-1/2/3] [C005-1]
--------------------------------------------------------
===================================================== */

.modal-dialog[class] .add-conditions {
	border: 1px solid var(--color-grey-origin);
	border-radius: 8px;
	margin: 24px 0;
}

.modal-dialog[class] .add-conditions .u--accordion-head {
	font-weight: bold;
	padding: 16px;
	margin: 0;
	font-size: 18px;
}

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

.select-condition h3.adjust-position {
	margin: 8px 0;
}

.select-condition h4 {
	width: 100%;
	margin: 16px 0 8px;
	font-weight: bold;
}

.select-condition .single-range_note {
	display: flex;
	justify-content: space-between;
	margin: 8px 0 16px;
	font-size: 12px;
}

.select-condition > div:has(> label) {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.select-condition label {
	width: calc((100% - 16px) / 2);
	display: flex;
	align-items: center;
	line-height: 1.25;
	color: var(--color-link-text);
}

.select-condition label.select-all {
	display: block;
	padding: 0;
	width: 100%;
	font-weight: bold;
}

.select-condition div.adjust-position {
	margin: 0 0 16px;
}

@media screen and (min-width: 1024px) {
	.modal-dialog[class] .add-conditions {
		margin: 32px 0;
	}
	.modal-dialog[class] .add-conditions .u--accordion-head {
		font-size: 20px;
	}

	.modal-dialog[class] .add-conditions .select-condition {
		padding: 8px 16px 0;
	}

	.select-condition > div:has(> label) {
		gap: 24px;
	}

	.select-condition label {
		width: calc((100% - 24px * 3) / 4);
	}

	.select-condition h3 {
		font-size: 18px;
		margin: 24px 0 16px;
	}

	.select-condition h3.adjust-position {
		margin: 0 0 12px;
	}

	.select-condition h4 {
		margin: 24px 0 8px;
	}

	.select-condition h4.adjust-position {
		margin: 12px 0 8px;
	}

	.select-condition .single-range_note {
		width: 480px;
		margin: 4px auto 16px;
		font-size: 14px;
	}
}










/* =====================================================
--------------------------------------------------------
レンジ（詳細条件を指定）
--------------------------------------------------------
===================================================== */

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

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



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

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

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

.modal-dialog .double-range_note {
	padding-top: 8px;
}


@media screen and (min-width: 1024px) {
	.modal-dialog .single-range_value,
	.modal-dialog .double-range_value {
		font-size: 16px;
	}
	.modal-dialog .single-range_note,
	.modal-dialog .double-range_note {
		font-size: 14px;
	}
	.modal-dialog .double-range_note:first-of-type {
		margin-bottom: 24px;
	}
}


/* 本体 */
.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;
}