/* =========================================================
   property.css — 物件情報 一覧・詳細（賃貸／売買 共通）
   ========================================================= */
.props-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
}
@media (max-width: 900px){ .props-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .props-grid{ grid-template-columns: 1fr; gap: 32px; } }

.card{ display:flex; flex-direction: column; transition: transform .6s var(--ease); }
.card:hover{ transform: translateY(-6px); }
.card .img-placeholder{ aspect-ratio: 4/3; }
.card-body{ padding: 22px 4px 4px; }
.card-tag{
  display:inline-block; padding: 4px 10px;
  border:1px solid var(--line);
  font-family: var(--serif-en); font-size: 10.5px; letter-spacing:.24em;
  color: var(--navy); margin-bottom: 14px;
}
.card-tag.solid{ background: var(--navy); color:#fff; border-color: var(--navy); }
.card-title{
  font-family: var(--serif-jp);
  font-size: 17px; font-weight: 500; color: var(--navy);
  line-height: 1.6; letter-spacing: .05em;
}
.card-price{ margin-top: 14px; font-family: var(--serif-num); font-size: 30px; color: var(--navy); line-height:1; }
.card-price .u{ font-family: var(--sans-jp); font-size: 12px; letter-spacing:.2em; margin-left:6px; color: var(--gray-500); }
.card-meta{
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px;
  font-size: 12px; color: var(--gray-500); letter-spacing: .08em;
}
.card-meta strong{ font-weight: 500; color: var(--navy-ink); font-family: var(--sans-jp); }
.card-more{ margin-top: 22px; align-self:flex-start; color: var(--accent); }
@media (max-width: 560px){ .card-meta{ grid-template-columns: 1fr; } }

.filter-bar{
  display:flex; flex-wrap: wrap; align-items: center; gap: 18px 32px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 60px;
  font-size: 12px; letter-spacing: .18em;
}
.filter-bar .grp{ display:flex; flex-wrap: wrap; gap: 18px; align-items:center; }
.filter-bar .lb{ color: var(--gray-500); font-family: var(--serif-en); letter-spacing:.28em; }
.filter-bar button{ padding: 8px 4px; color: var(--gray-500); position: relative; transition: color .4s var(--ease); }
.filter-bar button::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.filter-bar button.is-on,
.filter-bar button:hover{ color: var(--accent); }
.filter-bar button.is-on::after{ transform: scaleX(1); }
.filter-bar .count{ font-family: var(--serif-en); letter-spacing: .1em; }
.props-grid .card.is-hidden{ display:none; }
.filter-empty{ display:none; padding: 60px 0; text-align:center; color: var(--gray-500); font-size: 13px; letter-spacing: .1em; }
.filter-empty.is-visible{ display:block; }
@media (max-width: 700px){
  .filter-bar{ gap: 14px 20px; }
  .filter-bar .grp{ gap: 10px 14px; width: 100%; }
}

/* Detail gallery — 1 large (featured image) + 4 supporting shots.
   Fixed from the original CodePen source, whose 2x2 grid only had
   room for 3 of the 5 photos and broke on desktop. */
.pd-gallery{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px; min-height: 560px;
}
.pd-gallery > *:nth-child(1){ grid-column: 1; grid-row: 1 / 3; }
.pd-gallery .img-placeholder{ height: 100%; }
@media (max-width: 900px){
  .pd-gallery{ grid-template-columns: 1fr 1fr; grid-template-rows: 260px 140px 140px; min-height: 0; }
  .pd-gallery > *:nth-child(1){ grid-column: 1 / 3; grid-row: 1; }
}
@media (max-width: 560px){
  .pd-gallery{ grid-template-columns: 1fr 1fr; grid-template-rows: 220px 120px 120px; gap: 8px; }
}

.pd-body{
  display:grid; grid-template-columns: 1.5fr 1fr; gap: clamp(30px, 5vw, 80px);
  margin-top: 60px;
}
.spec-table{ width:100%; border-collapse: collapse; }
.spec-table th, .spec-table td{
  text-align:left; padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px; letter-spacing: .06em;
  vertical-align: top;
}
.spec-table th{ color: var(--gray-500); font-weight: 500; width: 34%; font-family: var(--serif-jp); }
.spec-table td{ color: var(--navy-ink); }

.pd-side{
  padding: 34px; background: var(--sky-pale); border: 1px solid var(--line);
  align-self: start; position: sticky; top: calc(var(--nav-h) + 20px);
}
.pd-side .price{ font-family: var(--serif-num); font-size: 48px; color: var(--navy); line-height:1; }
.pd-side .price .u{ font-family: var(--sans-jp); font-size: 13px; letter-spacing: .2em; margin-left: 8px; color: var(--gray-500); }
.pd-side .tag{ display:inline-block; margin-bottom: 22px; padding: 5px 12px; border:1px solid var(--navy); color: var(--navy); font-family: var(--serif-en); font-size: 10.5px; letter-spacing: .24em; background: #fff; }
.pd-side .h-jp{ margin-top: 22px; }
.pd-side .side-list{ margin-top: 26px; list-style:none; padding:0; }
.pd-side .side-list li{
  padding: 12px 0; border-bottom: 1px dashed var(--line);
  display:flex; justify-content:space-between; gap: 12px; font-size: 12.5px; color: var(--gray-700); letter-spacing:.06em;
}
.pd-side .btn{ margin-top: 26px; width: 100%; justify-content: space-between; }

@media (max-width: 900px){
  .pd-body{ grid-template-columns: 1fr; }
  .pd-side{ position: static; }
}

.pd-desc{ border-top: 1px solid var(--line); padding-top: 40px; margin-top: 20px; }
.pd-desc h3{ font-family: var(--serif-en); font-size: 22px; letter-spacing: .04em; margin-bottom: 16px; color: var(--navy); }
.pd-desc p{ font-size: 14.5px; line-height: 2.1; color: var(--gray-700); letter-spacing:.06em; }

.pd-nav{
  display:flex; justify-content: space-between; align-items:center; gap: 40px;
  padding: 40px 0; border-top: 1px solid var(--line); margin-top: 40px;
  font-family: var(--serif-en); font-size: 12px; letter-spacing:.28em;
  color: var(--accent); flex-wrap: wrap;
}