/* 物件一覧ページ（/rooms）だけの見た目。共通の部品は site.css にある。 */
.num {
  font-family:Georgia,'Times New Roman',serif;
  font-size:18px;
  color:var(--brand);
}
.contact-copy h2 {
  font-size:30px;
}
.contact-copy>p {
  margin:24px 0;
  color:var(--muted);
  font-size:14px;
}
.contact-copy .line {
  margin-top:5px;
  min-width:260px;
}
@media (max-width:1000px) {
  .contact-copy h2 {
    font-size:25px;
  }
}
@media (max-width:760px) {
  .contact-copy h2 {
    font-size:25px;
  }
  .contact-copy .line {
    width:100%;
  }
}
/* ここから物件一覧ページ（/rooms）。左に条件、右に結果。見出しは画面に出さず、
   開いてすぐ絞り込みと結果に向かってもらう。 */
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* トップに並べるのは4件まで。続きは物件一覧ページで探してもらう。 */
.search-layout {
  padding:24px 0 72px;
}

/* 絞り込みの入口・件数・並び順・いま効いている条件・絞り込みそのものは、
   ひと続きの板として見せる。境目は細い線だけにして、継ぎ目を作らない。 */
.search-panel {
  margin-bottom:26px;
}
/* 絞り込みは板の中で開く。「検索する」を押すと畳まれ、結果だけが残る。 */
.filters {
  padding:22px 24px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.filters-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.filters-head h2 {
  font-size:17px;
  letter-spacing:.06em;
}
.filters-apply {
  display:none;
  border:0;
  background:var(--brand);
  color:#fff;
  font:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}
.filter-block {
  margin:0;
  padding:0;
  border:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.filter-label {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:0;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
}
.filter-label output {
  font-weight:500;
  color:var(--brand-dark);
}
.filter-note {
  font-size:11px;
  color:var(--muted);
  line-height:1.7;
}
.filters input[type="search"]::placeholder {
  color:#747a75;
  font-size:13px;
}
.filters input[type="search"] {
  width:100%;
  min-height:46px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--page);
  font:inherit;
  font-size:14px;
}
/* 家賃の幅。1本の目盛りの上に、下限と上限のつまみを重ねる。
   目盛りと帯はこの箱が描き、input 側の線は消しておく。 */
.range-pair {
  position:relative;
  height:34px;
}
.range-pair::before,.range-pair::after {
  content:'';
  position:absolute;
  top:15px;
  height:4px;
  border-radius:100px;
}
.range-pair::before {
  left:0;
  right:0;
  background:var(--line);
}
.range-pair::after {
  left:var(--from,0%);
  right:var(--to,0%);
  background:var(--brand);
}
.range-pair input[type="range"] {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:34px;
  margin:0;
  background:none;
  -webkit-appearance:none;
  appearance:none;
  /* 線の上ではなく、つまみの上だけを掴めるようにする。 */
  pointer-events:none;
}
.range-pair input[type="range"]:focus-visible {
  outline-offset:0;
}
.range-pair input[type="range"]::-webkit-slider-runnable-track {
  height:34px;
  background:none;
}
.range-pair input[type="range"]::-moz-range-track {
  height:34px;
  background:none;
}
.range-pair input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none;
  pointer-events:auto;
  width:22px;
  height:22px;
  margin-top:6px;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 1px 5px rgba(13,58,54,.35);
  cursor:pointer;
}
.range-pair input[type="range"]::-moz-range-thumb {
  pointer-events:auto;
  width:18px;
  height:18px;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 1px 5px rgba(13,58,54,.35);
  cursor:pointer;
}
.chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:38px;
  padding:6px 13px;
  border:1px solid var(--line);
  border-radius:100px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:13px;
  cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.chip small {
  color:var(--muted);
  font-size:11px;
}
.chip:hover:not(:disabled) {
  border-color:var(--brand);
}
.chip[aria-pressed="true"] {
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.chip[aria-pressed="true"] small {
  color:#ffffffc0;
}
.chip:disabled {
  opacity:.4;
  cursor:default;
}
.filters-reset {
  border:0;
  background:none;
  font:inherit;
  font-size:12px;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:4px;
  cursor:pointer;
  padding:8px 0;
  text-align:left;
}
/* 物件検索ページの結びの呼びかけ。読みやすい幅で1段に置く。 */
.search-ask .contact-copy {
  max-width:640px;
}

/* 結果の頭。広い画面では板の見出し行、狭い画面では下に浮かぶ操作の帯になる。 */
.results-bar {
  display:flex;
  align-items:center;
  gap:16px;
}
.result-count {
  font-size:15px;
  font-weight:600;
  margin-right:auto;
}
.sort {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.sort select {
  min-height:40px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:5px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:13px;
}
.filters-open {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:8px 16px;
  border:1px solid var(--brand);
  border-radius:100px;
  background:#fff;
  color:var(--brand-dark);
  font:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.filters-open-count {
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:100px;
  background:var(--brand);
  color:#fff;
  font-size:11px;
}
.applied {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.applied-chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:4px 12px;
  border:1px solid var(--brand);
  border-radius:100px;
  background:var(--tint);
  color:var(--brand-dark);
  font:inherit;
  font-size:12px;
  cursor:pointer;
}
.applied-chip:hover {
  background:#fff;
}

/* 一覧は並べて見せる。横へすべらせるトップと違い、ここは上から下へ読む。 */
.rooms-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:34px 26px;
  padding-top:26px;
}
.skeleton {
  aspect-ratio:3/4;
  border-radius:4px;
  background:linear-gradient(100deg,var(--tint) 30%,#ffffff 50%,var(--tint) 70%) 0 0/300% 100%;
  animation:sheen 1.4s linear infinite;
}
/* ページ送り。結果の下に、番号の札を並べる。 */
.pager {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding-top:40px;
}
.pager button {
  min-width:42px;
  min-height:42px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:100px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:13px;
  cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.pager button:hover:not(:disabled) {
  border-color:var(--brand);
}
.pager button[aria-current="page"] {
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  font-weight:600;
}
.pager button:disabled {
  opacity:.35;
  cursor:default;
}
.pager-gap {
  color:var(--muted);
  font-size:13px;
}
.empty-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:8px;
}
@media (min-width:1001px) {
  /* 板はひとつ。頭・絞り込み・いま効いている条件を、細い線だけで重ねる。 */
  .search-panel {
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
  }
  .results-bar {
    padding:14px 18px;
  }
  .applied:not([hidden]) {
    padding:14px 18px;
    border-top:1px solid var(--line);
  }
  .filters {
    padding:20px 22px 22px;
    border-top:1px solid var(--line);
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:22px 30px;
  }
  /* 畳んでいる間は置かない。開け閉めは結果の頭の「絞り込む」で行う。 */
  .filters:not(.open) {
    display:none;
  }
  /* 頭の箱は無かったことにして、中の「条件をすべて解除」だけを板に並べる。 */
  .filters-head {
    display:contents;
  }
  .filters-head h2 {
    display:none;
  }
  .filter-block {
    flex:1 1 200px;
    min-width:0;
  }
  /* キーワードと家賃は指で触る幅が要る。ほかより広く取る。 */
  .filter-block:nth-of-type(1) {
    flex:1 1 260px;
  }
  .filter-block:nth-of-type(2) {
    flex:1 1 230px;
  }
  /* こだわりは数が多いので、ひと行そのまま使う。 */
  #tag-block {
    flex:1 1 100%;
  }
  .filters-reset {
    order:50;
    align-self:center;
  }
  .filters-apply {
    display:inline-flex;
    order:51;
    align-items:center;
    justify-content:center;
    margin-left:auto;
    min-height:48px;
    padding:12px 44px;
    border-radius:5px;
    font-size:15px;
    letter-spacing:.06em;
    transition:background .2s;
  }
  .filters-apply:hover {
    background:var(--brand-dark);
  }
}
@media (max-width:1000px) {
  .search-layout {
    grid-template-columns:1fr;
    gap:0;
  }
  /* 狭い画面では、絞り込みは下から出る紙にする。画面は覆いきらず、後ろの結果を
     薄く残す。高さが足りないときは紙の中だけが動く。 */
  .filters {
    position:fixed;
    inset:auto 0 0;
    z-index:60;
    max-height:84vh;
    /* 条件が多いときは紙の中だけが動く。後ろの結果は引きずられない。 */
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:#fff;
    border:0;
    border-radius:16px 16px 0 0;
    /* 上の余白は紙の頭が持つ。ここで空けると、貼り付いた頭の上に中身が覗く。 */
    padding:0 20px;
    /* 板として置いたときの下の余白は、紙では要らない（画面の下にぴたりと付ける）。 */
    margin:0;
    box-shadow:0 -14px 40px rgba(13,58,54,.24);
    transform:translateY(100%);
    visibility:hidden;
    transition:transform .28s cubic-bezier(.22,.61,.36,1),visibility .28s;
  }
  /* 紙の頭は上に貼り付ける。中を動かしても、つまみと名前はいつでも見えている。 */
  .filters-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    position:sticky;
    top:0;
    z-index:3;
    margin:0 -20px;
    /* つまみの居場所を上に空けておく。 */
    padding:26px 20px 12px;
    background:#fff;
    /* 中身がこの下をくぐるので、境目に細い線を置く。 */
    box-shadow:0 1px 0 var(--line);
  }
  /* 上端のつまみ。下から出てきたこと、下げて閉じられることが目で分かる。 */
  .filters-head::before {
    content:'';
    position:absolute;
    top:10px;
    left:50%;
    width:38px;
    height:4px;
    margin-left:-19px;
    border-radius:100px;
    background:var(--line);
  }
  .filters-reset {
    padding:8px 0;
    white-space:nowrap;
  }
  .filters-head h2 {
    font-size:16px;
  }
  /* 後ろの結果は暗く落とす。ここを押しても閉じる。 */
  body.sheet-open::before {
    content:'';
    position:fixed;
    inset:0;
    z-index:59;
    background:rgba(13,58,54,.42);
  }
  .filters.open {
    transform:none;
    visibility:visible;
  }
  /* 決定は浮かぶボタン。中身を隠さず、どこまで下げても指の届くところに残る。 */
  .filters-apply {
    display:block;
    order:99;
    position:sticky;
    bottom:calc(14px + env(safe-area-inset-bottom));
    z-index:2;
    align-self:center;
    min-width:220px;
    min-height:54px;
    margin-bottom:calc(14px + env(safe-area-inset-bottom));
    padding:14px 44px;
    border-radius:100px;
    background:var(--brand-dark);
    box-shadow:0 12px 26px rgba(13,58,54,.32);
    letter-spacing:.06em;
  }
  /* 件数は出さない。上の場所は結果に譲り、絞り込みと並び替えだけを画面の下に
     ひと組で浮かせる。横長の薄い帯にして、景色を隠さない。 */
  .result-count {
    display:none;
  }
  .results-bar {
    position:fixed;
    left:16px;
    right:16px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    z-index:30;
    gap:8px;
    transition:opacity .2s,visibility .2s,transform .2s;
  }
  .filters-open {
    flex:1 1 auto;
    justify-content:center;
    min-height:48px;
    padding:8px 20px;
    border-color:var(--brand);
    background:var(--brand);
    color:#fff;
    font-size:14px;
    box-shadow:0 10px 26px rgba(13,58,54,.3);
  }
  .filters-open-count {
    background:#fff;
    color:var(--brand-dark);
  }
  /* 並び替えは絞り込むの隣。同じ高さ・同じ丸みの札にして、ひと組に見せる。
     「並び順」の言葉は省く。札の外に文字だけが浮いてしまうし、選んでいる並びは
     札にそのまま出ている。 */
  .sort {
    flex:0 0 auto;
  }
  .sort span {
    display:none;
  }
  .sort select {
    min-height:48px;
    padding:8px 16px;
    border-color:var(--brand);
    border-radius:100px;
    color:var(--brand-dark);
    font-weight:600;
    box-shadow:0 10px 26px rgba(13,58,54,.3);
  }
  /* 絞り込みを開いている間（シート下の「検索する」が続きになる）と、結びの
     呼びかけまで読み進めたときは、帯ごと引っ込める。最後の案内を隠さない。 */
  body.sheet-open .results-bar,
  body.near-end .results-bar {
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
  }
  /* 浮かせた帯で最後の1件が隠れないよう、下に場所を空けておく。 */
  .search-layout {
    padding-bottom:96px;
  }
  body.sheet-open {
    overflow:hidden;
  }
  .search-layout {
    padding-top:20px;
  }
}
@media (max-width:760px) {
  .search-layout {
    padding-top:12px;
  }
  /* 指で押す的は大きく。文字も、端末が勝手に拡大しない大きさにする。 */
  .filters input[type="search"] {
    min-height:50px;
    font-size:16px;
  }
  .filters input[type="search"]::placeholder {
    font-size:14px;
  }
  .chip {
    min-height:42px;
    padding:8px 15px;
    font-size:14px;
  }
  .applied-chip {
    min-height:38px;
    font-size:13px;
  }
  .filters-apply {
    min-height:56px;
    font-size:16px;
  }
  .rooms-grid {
    grid-template-columns:1fr;
    gap:34px;
  }
}