/*
 * property.css
 * 株式会社井清不動産 - 物件一覧・詳細ページ
 * iseifudousan-child テーマ用
 */

/* ============================================================
   共通変数
   ============================================================ */
:root {
  --brown-dark:    #2e1a0e;
  --brown-mid:     #5a3320;
  --gold:          #c8945a;
  --gold-light:    #c8a878;
  --tab-sale:      #341d0a;   /* 売買物件 */
  --tab-rent:      #df641f;   /* 賃貸物件 */
  --tab-parking:   #c59b6d;   /* 駐車場 */
  --tag-red:       #e50027;
  --text-dark:     #3d2010;
  --text-mid:      #5c4033;
  --text-light:    #8c7060;
  --bg-cream:      rgb(52 29 10 / 10%);
  --bg-soft:       #f7eedf;
  --border-color:  #d4c4b0;
  --border-soft:   #df641f;
}

/* ============================================================
   ページ全体
   ============================================================ */
.property-archive {
  background-color: #ffffff;
  padding: 56px 0 96px;
}

.property-archive-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ============================================================
   上部タブ
   ============================================================ */
.property-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 50px;
}

.property-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  text-decoration: none;
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  border-radius: 4px;
  transition: opacity 0.2s, transform 0.2s;
}

.property-tab:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.property-tab--sale    { background-color: var(--tab-sale); }
.property-tab--rent    { background-color: var(--tab-rent); }
.property-tab--parking { background-color: var(--tab-parking); }

.property-tab.is-active {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(1px);
}

/* ============================================================
   レイアウト
   ============================================================ */
.property-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
}

/* ============================================================
   サイドバー
   ============================================================ */
.property-sidebar {
  border: 2px solid var(--brown-dark);
  border-top: 7px solid var(--brown-dark);
  border-bottom: 7px solid var(--brown-dark);
  border-radius: 15px;
  padding: 30px 20px 50px;
  background-color: #fff;
}

.property-filter-block + .property-filter-block {
  margin-top: 24px;
}

.property-filter-title {
  display: block;
  background-color: var(--bg-soft);
  margin: -8px -20px 12px;
  padding: 8px 19px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: 0.1em;
  border-radius: 2px;
}

.property-search-wrap {
  position: relative;
}

.property-search-input {
  width: 100%;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  font-size: 0.9375rem;
  box-sizing: border-box;
  background-color: #fff;
}

.property-search-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-mid);
  display: flex;
  align-items: center;
  padding: 4px;
}

.property-checkbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.property-checkbox-list li {
  margin-bottom: 8px;
}

.property-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-dark);
}

.property-check input[type="checkbox"] {
  accent-color: var(--brown-dark);
  cursor: pointer;
}

.property-filter-submit {
  margin-top: 16px;
  padding: 8px 20px;
  background-color: var(--brown-dark);
  color: #fff;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-size: 0.875rem;
}

/* ============================================================
   メインコンテンツ
   ============================================================ */
.property-content {
  min-width: 0;
}

.property-content-heading {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--brown-dark);
}

.property-content-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-dark);
  letter-spacing: 0.3em;
  margin: 0;
  margin-top: -8px;
}

/* ============================================================
   物件カード
   ============================================================ */
.property-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.property-card {
  border-bottom: 1px dotted var(--border-color);
}

.property-card-link {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 28px;
  padding: 28px 4px;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}

.property-card-link:hover {
  opacity: 0.85;
}

.property-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--bg-cream);
}

.property-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.property-card-img--placeholder {
  background-color: var(--bg-cream);
  background-image:
    linear-gradient(135deg, transparent 49%, var(--border-color) 49% 51%, transparent 51%),
    linear-gradient(45deg, transparent 49%, var(--border-color) 49% 51%, transparent 51%);
}

.property-card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.property-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.property-tag {
  display: inline-block;
  padding: 5px 20px;
  background-color: var(--tag-red);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.3rem;
  text-indent: 0.3rem;
  border-radius: 5px;
}

.property-card-title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-dark);
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  line-height: 1.5;
}

.property-card-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tag-red);
  margin: 0;
  letter-spacing: 0.04em;
}

.property-empty {
  text-align: center;
  color: var(--text-light);
  padding: 80px 20px;
  font-size: 0.9375rem;
}

/* ============================================================
   ページネーション
   ============================================================ */
.property-pagination {
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 0.9375rem;
  color: var(--text-dark);
  letter-spacing: 0.05em;
}

.property-pagination .page-numbers {
  text-decoration: none;
  color: var(--text-dark);
  padding: 4px 6px;
}

.property-pagination .page-numbers.current {
  font-weight: 700;
}

.property-pagination-edge {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  font-size: 0.9375rem;
  padding: 0 4px;
}

.page-edge-link {
  text-decoration: none;
  color: var(--text-dark);
}

.page-edge-link:hover {
  color: var(--gold);
}

.page-edge-link.is-disabled {
  pointer-events: none;
  opacity: 0.35;
}

/* ============================================================
   詳細ページ
   ============================================================ */
.property-single {
  background-color: #ffffff;
  padding: 32px 0 96px;
}

.property-single-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ============================================================
   画像スライダー（Slick / centerMode）
   ============================================================ */
.property-slick {
  /* 全幅領域(.property-single 直下)に置いているので、そのまま画面いっぱいに表示 */
  margin: 0 0 32px;
  position: relative;
}

/* スライド画像（高さを揃えて左右プレビュー時もきれいに並べる）
   スロット幅(65%)に対して画像を92.31%(=全体の60%)とし、margin auto で
   左右に2.5%ずつの余白を作る → 隣との間隔5%・ピーク実寸15% になる */
.property-slick .property-slick-slide img {
  width: 92.31%;
  margin: 0 auto;
  height: 50vh;
  object-fit: cover;
  display: block;
}

/* 管理画面で「全体表示」にチェックした画像は、トリミングせず全体を表示する。 */
.property-slick .property-slick-slide img.is-contain {
  object-fit: contain;
  border: 2px solid var(--brown-dark);
}

/* 中央（アクティブ）のスライドだけ鮮明に、左右はうっすら */
.property-slick .slick-slide {
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

.property-slick .slick-center {
  opacity: 1;
}

/* 1枚のみ（Slick未初期化）の場合の表示 */
.property-slick:not(.slick-initialized) .property-slick-slide:not(:first-child) {
  display: none;
}

/* 前後ボタン */
.property-slick .slick-prev,
.property-slick .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 70px;
  height: 70px;
  padding: 0;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  font-size: 0;
  transition: opacity 0.2s;
}
.property-slick .slick-prev {
  left: 17.5vw;
  background-image: url('../img/slider-prev.png');
  filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.3));
}
.property-slick .slick-next {
  right: 17.5vw;
  background-image: url('../img/slider-next.png');
  filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.3));
}

/* Slick標準の「‹ ›」擬似要素は非表示（画像に置き換え） */
.property-slick .slick-prev::before,
.property-slick .slick-next::before {
  content: none;
}

/* ドット（写真枚数と一致。クローンは加算されない） */
.property-slick .slick-dots {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}

.property-slick .slick-dots li {
  margin: 0;
  line-height: 0;
}

.property-slick .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #d8cfc6;
  font-size: 0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.property-slick .slick-dots li.slick-active button {
  background-color: var(--gold);
}

/* レスポンシブ：スライド高さ */
@media (max-width: 768px) {
  .property-slick .property-slick-slide img {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .property-slick .property-slick-slide img {
    height: 220px;
  }
}

/* ============================================================
   画像拡大モーダル（ライトボックス）
   ============================================================ */
/* 中央画像はクリックで拡大できることを示す */
.property-slick .slick-center {
  cursor: zoom-in;
}

.property-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vh 6vw;
  background-color: rgba(0, 0, 0, 0.85);
}

.property-modal.is-open {
  display: flex;
}

.property-modal-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
  display: flex;
}

.property-modal-img {
  max-width: 100%;
  max-height: 90vh;
  width: 100%;
  height: auto;
  object-fit: contain;  /* 拡大表示は切り取らず全体を表示 */
  display: block;
}

.property-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
}

.property-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  transition: opacity 0.2s;
}

.property-modal-prev {
  left: 5%;
  background-image: url('../img/slider-prev.png');
}
.property-modal-next {
  right: 5%;
  background-image: url('../img/slider-next.png');
}

/* Slick用の擬似要素矢印は使わない（画像に置き換え） */
.property-modal-nav::before {
  content: none;
}

@media (max-width: 600px) {
  .property-modal-nav {
    width: 40px;
    height: 40px;
  }

  .property-modal-prev { left: 8px; }
  .property-modal-next { right: 8px; }
  .property-modal-close { top: 8px; right: 10px; }
}

.property-single-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

/* 詳細テーブル */
.property-detail-table {
  margin: 0;
}

.property-detail-row {
  display: grid;
  grid-template-columns: 215px 1fr;
}

.property-detail-label {
  background-color: var(--bg-cream);
  padding: 16px 30px;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-dark);
  letter-spacing: 0;
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
  border-bottom: 1px solid #ffffff;
}

/* 長くて2行になる項目は均等割り付けを解除（左寄せ・2行目の間延び防止） */
.property-detail-label--urgent_contact {
  text-align: left;
  text-align-last: auto;
}

.property-detail-value {
  padding: 16px 20px;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-dark);
  letter-spacing: 0.04em;
  line-height: 1.7;
  border-bottom: 1px solid #cdcdcd;
}

.property-single-content {
  margin-top: 32px;
  font-size: 0.9375rem;
  color: var(--text-dark);
  line-height: 1.9;
}

/* ============================================================
   CTAセクション（買取強化ページのCTAを踏襲）
   ============================================================ */
.property-cta {
  display: flex;
  justify-content: center;
}

.property-cta-wrap {
  background-color: #ffffff;
  width: 100%;
  max-width: 1020px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 80px;
  padding: 80px 20px;
}

.property-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 14px 28px;
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  border-radius: 10px;
  transition: opacity 0.2s, transform 0.2s;
}

.property-cta-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.property-cta-btn--orange { background-color: #df641f; }
.property-cta-btn--tan    { background-color: #c9a981; }

@media (max-width: 700px) {
  .property-cta {
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
  }
  .property-cta-wrap {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 48px 16px 48px;
  }
  .property-cta-btn {
    width: 100%;
    max-width: 320px;
    min-width: 0;
    padding: 14px 20px;
  }
}

.property-single-back {
  text-align: center;
}

.property-back-link {
  display: inline-block;
  padding: 12px 28px;
  color: var(--text-dark);
  text-decoration: none;
  font-size: 0.9375rem;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  transition: background-color 0.2s, color 0.2s;
}

.property-back-link:hover {
  background-color: var(--brown-dark);
  color: #fff;
  border-color: var(--brown-dark);
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 900px) {
  .property-layout {
    grid-template-columns: 1fr;
  }

  .property-sidebar {
    order: 2;
  }
}

@media (max-width: 700px) {
  .property-archive,
  .property-single {
    padding: 32px 0 64px;
  }

  .property-archive-inner,
  .property-single-inner {
    padding: 0 20px;
  }

  .property-content-title {
    font-size: 1.375rem;
  }

  .property-tabs {
    gap: 6px;
    margin-bottom: 24px;
  }

  .property-tab {
    padding: 14px 4px;
    font-size: 0.875rem;
    letter-spacing: 0.15em;
  }

  .property-card-link {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 4px;
  }

  .property-card-thumb {
    aspect-ratio: 16 / 10;
  }

  .property-card-price {
    font-size: 1.25rem;
  }

  .property-detail-row {
    display: flex;
    flex-direction: column;
  }

  .property-detail-label {
    padding: 10px 12px;
    font-size: 0.8125rem;
    /* スマホはラベルが全幅になり均等割り付けだと間延びするため通常表示に戻す */
    letter-spacing: 0.15em;
    text-align: left;
    text-align-last: auto;
  }

  .property-detail-value {
    padding: 10px 12px;
    font-size: 0.875rem;
  }
  
  .property-slick .slick-prev, .property-slick .slick-next {
    width: 8vw;
    height: 8vw;
  }
  
  .property-slick .slick-prev {
    left: 15vw;
  }
  
  .property-slick .slick-next {
    right: 15vw;
  }
}


@media (max-width: 480px) {
  .property-slick .slick-prev, .property-slick .slick-next {
    width: 8vw;
    height: 8vw;
  }
  
  .property-slick .slick-prev {
    left: 9vw;
  }
  
  .property-slick .slick-next {
    right: 9vw;
  }

  .property-slick .slick-prev::before, .property-slick .slick-next::before {
    font-size: 10vw;
    top: -2.3vw;
  }
}