/* 物件の検索結果 */
.p-realty-result {}

.p-realty-result-wrap {
  display: grid;
  align-content: start;
  gap: 50px;
}

@media (max-width:767px) {
  .p-realty-result-wrap {
    gap: 20px;
  }
}

/* 物件検索結果タイトル */
.p-realty-result-title span {
  font-size: 0.7em;
  margin-inline: 0.4em;
}

@media (max-width:767px) {
  .p-realty-result-title {
    font-size: 16px;
  }

  .p-realty-result-title span {
    font-size: 1em;
    margin-inline: 0.2em;
  }
}

/* 物件の検索結果ヘッダー */
.p-realty-result-header {
  display: flex;
  align-items: center;
  column-gap: 30px;
  white-space: nowrap;
  padding: 20px;
  border: 1px solid #dddddd;
  font-size: 16px;
}

.p-realty-result-header-count {
  flex: 1;
  margin-left: 10px;
}

.p-realty-result-header-count :where(span) {
  font-size: calc(1em + 2px);
  font-weight: 600;
  color: var(--tcd-accent-color);
}

.p-realty-result-header-panel {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 10px;
}

.p-realty-result-header-panel :where(select) {
  cursor: pointer;
  -webkit-appearance: none;
  height: 40px;
  padding-inline: 1em 2.5em;
  font-size: calc(1em - 2px);
  background: var(--tcd-icon--arrow-bottom) no-repeat center right 0.5em / 24px;
  border: 1px solid #dddddd;
  border-radius: 5px;
}

.p-realty-result-header-panel-availability {
  grid-template-columns: auto;
}

.p-realty-result-header-panel-availability label {
  font-size: inherit;
  margin-right: 20px;
}

@media (max-width:991px) {
  .p-realty-result-header {
    margin-top: -1px;
  }
}

@container main (max-width:800px) {

  .p-realty-result-header {
    flex-wrap: wrap;
    gap: 20px 10px;
    font-size: 14px;
  }

  .p-realty-result-header-count {
    flex: 0 0 100%;
    margin-left: 0;
  }

  .p-realty-result-header-panel {
    flex: 1;
    grid-template-columns: auto 1fr;
  }

  .p-realty-result-header-panel-availability {
    grid-template-columns: auto;
  }

  .p-realty-result-header-panel :where(select) {
    padding-inline: 1em 2em;
    background-size: 20px;
    background-position: center right 4px;
  }
}

@container main (max-width:500px) {
  label+label+.p-realty-result-header-panel-availability {
    flex: 0 0 100%;
  }

  .p-realty-result-header-panel-availability label {
    margin-inline: auto 0;
  }
}


/* 物件検索フォーム */
.p-realty-search-form-wrapper:has(~.p-widget-list-pc) {
  margin-bottom: 40px;
}

.p-realty-search-form {
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 991px) {
  .p-realty-search-form-wrapper {
    display: none;
  }
}

/* エリア or 交通 */
.p-realty-search-form-header {
  display: grid;
  align-content: start;
  margin-bottom: 50px;
}

.p-realty-search-form-header-item {
  display: grid;
  place-items: center;
  line-height: 1.6;
  padding: calc(18px + var(--tcd-half-read)) 20px;
}

.p-realty-search-form-header-label {
  color: #ffffff;
  background: var(--tcd-accent-color);
  margin-bottom: -1px;
  z-index: 1;
}

.p-realty-search-form-header-open {
  border: 1px solid #ddd;
  color: var(--tcd-accent-color);
}

.p-realty-search-form-header-result {
  display: block;
  text-align: center;
  background: var(--tcd-bg-color);
}

@media not all and (max-width: 991px) {
  .p-realty-result .p-realty-search-form-header {
    display: none;
  }

  .p-realty-search-form-header-label-sp {
    display: none;
  }
}

@media (max-width: 991px) {

  .p-realty-search-form-header {
    margin-bottom: 20px;
  }

  .p-realty-result .p-realty-search-form-header {
    margin-bottom: 0;
  }

  .p-realty-search-form-header-open {
    display: none;
  }

  .p-realty-search-form-header-result {
    border: 1px solid #dddddd;
  }

  .p-realty-search-form-header-label-pc {
    display: none;
  }

  .p-realty-search-form-header-label-sp {
    grid-auto-flow: column;
    justify-content: center;
    gap: 7px;
    font-weight: 600;
  }

  .p-realty-search-form-header-label-sp:before {
    content: '';
    font-size: 1.3em;
    width: 1em;
    height: 1em;
    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M380.77-335.39q-102.46 0-173.54-71.07-71.07-71.08-71.07-173.54t71.07-173.54q71.08-71.07 173.54-71.07t173.54 71.07q71.07 71.08 71.07 173.54 0 42.85-14.38 81.85-14.39 39-38.39 67.84l230.16 230.16q8.31 8.3 8.5 20.88.19 12.58-8.5 21.27t-21.08 8.69q-12.38 0-21.07-8.69L530.46-388.16q-30 24.77-69 38.77-39 14-80.69 14Zm0-59.99q77.31 0 130.96-53.66 53.66-53.65 53.66-130.96t-53.66-130.96q-53.65-53.66-130.96-53.66t-130.96 53.66Q196.15-657.31 196.15-580t53.66 130.96q53.65 53.66 130.96 53.66Z"/></svg>') no-repeat center / 1.2em;
    background: currentColor;
  }

}

@media (max-width: 767px) {
  .p-realty-search-form-header {
    font-size: 14px;
  }
}

/* フォームパーツ */
.p-realty-search-form-list {
  display: grid;
  align-content: start;
  row-gap: 20px;
  padding: 20px;
  background: var(--tcd-bg-color);
}

.p-realty-search-form-item {
  cursor: pointer;
  height: 50px;
  padding-inline: 1em;
  background-color: #ffffff;
  border: 1px solid #dddddd;
}

.p-realty-search-form-icon {
  font-size: 24px;
}

.p-realty-search-form-item-default:before {
  content: attr(data-default);
}

.p-realty-search-form-list-submit {
  --tcdr-submit-width-pc: 100%;
  --tcdr-submit-height-pc: 50px;
  font-size: inherit;
}

@media not all and (max-width: 991px) {
  .p-realty-search-form-list-sep {
    display: none;
  }
}

@media (max-width: 991px) {
  .p-realty-search-form-list {
    overflow: hidden;
    border: 1px solid #dddddd;
  }

  .p-realty-search-form-list-sep {
    display: none;
  }

  *+.p-realty-search-form-list-sep {
    display: block;
    height: 1px;
    border-image: linear-gradient(#ddd 0 0) fill 0 /1/ 0 100vi;
  }

  .p-realty-search-form-list-submit {
    display: none;
  }
}

/* こだわり検索 */
.p-realty-search-form-tag-list-2col {
  grid-template-columns: 1fr 1fr;
}

@media not all and (max-width: 991px) {
  .p-realty-search-form-tag-title {
    position: relative;
    cursor: pointer;
    display: grid;
    place-items: center;
    height: 50px;
    background: #ffffff;
    border: 1px solid #dddddd;
    transition: color 0.3s ease;
  }

  .p-realty-search-form-tag-title:after {
    content: '';
    font-size: 20px;
    width: 1em;
    height: 1em;
    mask: var(--tcd-icon--arrow-bottom) no-repeat center / 1.2em;
    background: currentColor;
    position: absolute;
    inset: 0 15px 0 auto;
    margin: auto;
  }

  .p-realty-search-form-tag-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease;
  }

  .is-open+.p-realty-search-form-tag-content {
    grid-template-rows: 1fr;
  }

  .p-realty-search-form-tag-inner {
    overflow: hidden;
  }

  .p-realty-search-form-tag-list {
    display: grid;
    align-content: start;
    row-gap: 20px;
    padding: 20px;
    background: var(--tcd-bg-color);
  }

  .p-realty-search-form-tag-list-inner {
    display: grid;
    align-content: start;
    row-gap: 20px;
    overflow-y: scroll;
    max-height: 400px;
  }
}

@media (max-width: 991px) {
  .p-realty-search-form-tag {
    display: grid;
    align-content: start;
    row-gap: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    margin-top: -1px;
  }

  .p-realty-search-form-tag-title {
    color: inherit !important;
    font-weight: 600;
  }

  .p-realty-search-form-tag-list {
    display: grid;
    align-content: start;
    row-gap: 20px;
  }

  .p-realty-search-form-tag-list-inner {
    display: grid;
    align-content: start;
    row-gap: 20px;
  }
}


@media (any-hover: hover) {
  .p-realty-search-form-tag-title:hover {
    color: rgba(0, 0, 0, 0.5);
  }
}

/* 物件検索モーダルオープン */
.p-realty-search-form-modal-open {
  position: fixed;
  inset: auto 0 20px;
  z-index: calc(infinity);
  margin: auto;
}

.p-realty-search-form-modal-open:before {
  content: '';
  font-size: 1.3em;
  width: 1em;
  height: 1em;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M380.77-335.39q-102.46 0-173.54-71.07-71.07-71.08-71.07-173.54t71.07-173.54q71.08-71.07 173.54-71.07t173.54 71.07q71.07 71.08 71.07 173.54 0 42.85-14.38 81.85-14.39 39-38.39 67.84l230.16 230.16q8.31 8.3 8.5 20.88.19 12.58-8.5 21.27t-21.08 8.69q-12.38 0-21.07-8.69L530.46-388.16q-30 24.77-69 38.77-39 14-80.69 14Zm0-59.99q77.31 0 130.96-53.66 53.66-53.65 53.66-130.96t-53.66-130.96q-53.65-53.66-130.96-53.66t-130.96 53.66Q196.15-657.31 196.15-580t53.66 130.96q53.65 53.66 130.96 53.66Z"/></svg>') no-repeat center / 1.2em;
  background: currentColor;
}

.p-realty-search-form-modal-open:has(+.is-active) {
  display: none;
}

body:not(.is-scroll) .p-realty-search-form-modal-open {
  opacity: 0;
  pointer-events: none;
}

@media not all and (max-width:991px) {
  .p-realty-search-form-modal-open {
    display: none;
  }
}

/* 検索結果モーダル */
.p-realty-search-form-modal {
  position: fixed;
  inset: 0;
  z-index: calc(infinity);
  padding-inline: 50px;
  background: var(--tcd-bg-color);
  overflow: hidden auto;
  transition-property: opacity, pointer-events, visibility, transform;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
}

.p-realty-search-form-modal:not(.is-active) {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.p-realty-search-form-modal-inner {
  padding-block: 50px;
}

.p-realty-search-form-action {
  position: sticky;
  bottom: 20px;
  z-index: 1;
  pointer-events: none;
  display: grid;
  align-items: center;
  grid-template-columns: 35px 1fr 35px;
  margin-top: 20px;
  transition: transform 0.2s ease;
}

.p-realty-search-form-modal:not(.is-active) .p-realty-search-form-action {
  transform: translateY(10px);
}

.p-realty-search-form-action-close {
  display: grid;
  place-items: center;
  width: 35px;
  aspect-ratio: 1;
  font-size: 20px;
  color: #ffffff;
  background: var(--tcd-accent-color);
  border-radius: 50%;
}

.p-realty-search-form-action-submit {
  justify-self: center;
}

.p-realty-search-form-modal.is-active :is(.p-realty-search-form-action-close, .p-realty-search-form-action-submit) {
  pointer-events: auto;
}

.p-realty-search-form-modal:has(+.is-active) {
  transform: translateX(-100%);
}

@media (any-hover: hover) {
  .p-realty-search-form-action-close:hover {
    color: color-mix(in srgb, #ffffff 70%, transparent);
  }
}

@media not all and (max-width:991px) {
  .p-realty-search-form-modal {
    display: none;
  }
}

@media (max-width:991px) {
  .p-realty-search-form-modal .p-realty-search-form-header-result {
    cursor: pointer;
    background: #ffffff;
  }
}

@media (max-width:767px) {
  .p-realty-search-form-modal {
    padding-inline: 20px;
  }

  .p-realty-search-form-modal-inner {
    padding-block: 20px;
  }
}

/* 地域 or エリア モーダル */
.p-realty-term-search-modal {
  position: fixed;
  inset: 0;
  z-index: calc(infinity);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #000000 50%, transparent);
  transition-property: opacity, visibility, pointer-events;
  transition-duration: 0.3s;
}

.p-realty-term-search-modal-inner {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(calc(100% - 40px), 860px);
  height: fit-content;
  max-height: 80svh;
  background: #ffffff;
  border-radius: 5px;
}

.p-realty-term-search-modal-title {
  display: grid;
  place-items: center;
  color: var(--tcd-accent-color);
  font-size: 20px;
  font-weight: 600;
  height: 70px;
  border-bottom: 1px solid #dddddd;
}

.p-realty-term-search-modal-content {
  overflow: auto;
}

.p-realty-term-search-modal-content .p-realty-checkbox-list {
  border: none;
}

.p-realty-term-search-modal-action {
  display: flex;
  justify-content: center;
  gap: 15px;
  border-top: 1px solid #dddddd;
  padding-block: 15px;
}

.p-realty-term-search-modal-action-select {
  --tcdr-submit-width-pc: 240px;
  --tcdr-submit-height-pc: 50px;
}

.p-realty-term-search-modal:not(:has(input:checked)) :is(.p-realty-term-search-modal-action-select, .p-realty-term-search-modal-action-select-sp) {
  pointer-events: none;
  opacity: 0.7;
}

@media not all and (max-width:991px) {
  .p-realty-term-search-modal:not(.is-active) {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .p-realty-term-search-modal-action-select-sp {
    display: none;
  }

  .p-realty-term-search-modal .p-realty-search-form-action-close {
    display: none;
  }
}

@media (max-width:991px) {
  .p-realty-term-search-modal {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
    display: block;
    place-items: initial;
    background: initial;
  }

  .p-realty-term-search-modal.is-active {
    transform: initial;
  }

  .p-realty-term-search-modal-inner {
    width: auto;
    height: 100%;
    max-height: initial;
    padding: 50px;
    background: var(--tcd-bg-color);
    border-radius: 0;
    overflow: auto;
  }

  .p-realty-term-search-modal-title {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.6;
    background: var(--tcd-accent-color);
    height: auto;
    padding: calc(18px + var(--tcd-half-read)) 20px;
    border-bottom: 1px solid #dddddd;
    margin-bottom: 20px;
  }

  .p-realty-term-search-modal-content {
    overflow: initial;
  }

  .p-realty-term-search-modal-content .p-realty-checkbox-list {
    --tcd-realty-check-background: #ffffff;
    padding: 0px;
  }

  .p-realty-term-search-modal-action {
    position: sticky;
    bottom: 0px;
    z-index: 1;
    display: grid;
    grid-template-columns: 35px 1fr 35px;
    align-items: center;
    padding: 0;
    border: none;
    margin-top: 20px;
  }

  .p-realty-term-search-modal-action-select {
    display: none;
  }

  .p-realty-term-search-modal-action-select-sp {
    justify-self: center;
  }
}

@media (max-width:767px) {
  .p-realty-term-search-modal-inner {
    padding: 20px;
  }
}