@charset "UTF-8";

/* =========================================================
   property.css - 物件情報

   ※ 一覧と詳細を1ページにまとめている。
     各物件は「概要（常時表示）」＋「詳細（<details>で開閉）」の2段構成。
========================================================= */

/* ※ 外側（セクション本体）が余白、内側（__inner）が max-width と中央寄せ。
   ※ 上下の余白はヘッダーの高さ（--header-height）と同じ値。
     事例一覧・事業一覧・会社情報・お問い合わせ・お知らせと同じ考え方。
     画面幅で自動で段階が付くので、分岐を書かなくてよい。
     ※ ※重要※ 値の定義は common.css の :root。 */
.property {
    padding-block: var(--header-height);
    padding-inline: var(--section-px);
    /* ※ 地は暗いオークの木目（dark-oak-bg.webp）。お知らせ詳細・会社概要のロゴの面と同じ素材。
         以前は地の指定が無く白 → dark-woody-bg.webp を試した。
       ※ 画像は繰り返して敷く（以前は cover で引き伸ばしていた）。
         物件が多くてセクションが縦に長くなっても、木目が引き伸ばされない。
       ※ ※重要※ 1枚の大きさは 512px（以前は auto＝元の大きさ）。
         リノベーション事例（works.css の .works）・お知らせ詳細（news.css の .news-detail）と同じ値。
         元の大きさのままだと、高解像度の画面で木目が拡大されて粗く見える。
         木目の細かさを変えるときは3ページをそろえて直す。
         繋ぎ目が目立つときは、繋ぎ目のない画像に差し替える。
       ※ background-color は画像が読み込まれるまでの地。
       ※ ※重要※ 地が暗いので、木目の上に直接乗る要素（絞り込み・ページャー・
         0件の案内・注意書き）の色は、ファイル末尾の「暗い地向けの上書き」で白系にしている。
         物件カードは白（明るい）地の面なのでそのまま。 */
    background-color: var(--color-bg-dark);
    background-image: url('../images/dark-oak-bg.webp');
    background-size: 512px auto;
    background-position: left top;
    background-repeat: repeat;
}

.property__inner {
    width: 100%;
    max-width: var(--w-lg);
    margin-inline: auto;
}

/* ※ 768px未満（縦積み）は 576px（--w-sm）で止める。
     タブレット縦向き（576〜767px）でカードが広がりすぎないようにするため。
   ※ 576px未満では画面幅の方が狭いので、この指定は効かない。 */
@media (max-width: 767px) {
    .property__inner {
        max-width: var(--w-sm);
    }
}

/* ※ 768〜1023px は 768px（--w-md）で止める。
     この幅だとカードが横に間延びて、
     写真と文字の釣り合いが崩れる。 */
@media (min-width: 768px) and (max-width: 1023px) {
    .property__inner {
        max-width: var(--w-md);
    }
}

/* ---------------------------------------------------------
   種別の絞り込み
--------------------------------------------------------- */

.property-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--spacing-lg);
}

.property-filter__item {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border: 1px solid var(--color-border);
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.property-filter__item:hover {
    border-color: var(--color-primary);
}

.property-filter__item.is-current {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

/* ※ 768px未満はグリッドにする。
     flex の折り返しだとボタンの幅が文字数でバラつくため。
   ※ 項目は「すべて／販売物件／賃貸物件」の3つなので3列。
     カテゴリを増やしたときは列数も見直すこと。
   ※ ※重要※ この分岐は必ず .property-filter__item のベースの後ろに置くこと。
     詳細度が同じなので、前に置くとベースの padding に負ける。 */
@media (max-width: 767px) {
    .property-filter {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .property-filter__item {
        padding-inline: 0.5rem;
        text-align: center;
    }
}

/* ---------------------------------------------------------
   物件一覧
--------------------------------------------------------- */

/* ※ カード同士の間は 767px以下 2rem、768px以上 2.5rem（下の分岐）。 */
.property-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 768px) {
    .property-list {
        gap: 2.5rem;
    }
}

/* 0件のときの文言
   ※ 今は property.php が0件のとき一覧を出さず .property-empty を出すので、通常は使われない。
     万一空の一覧が出たときの保険として残している。 */
.property-list:empty::before {
    content: '該当する物件はありません。';
    display: block;
    padding-block: var(--spacing-xl);
    text-align: center;
    font-size: 0.9375rem;
    color: var(--color-text-light);
}

/* 登録がないときの案内（property.php の $propEmpty）
   ※ 絞り込んだ種別が0件のときもこちら。文言に種別名が入る。
   ※ 罫線のボックス（デザイン案A）。最大幅は 576px（--w-sm）で中央に置く。
     形はリノベーション事例の案内（works.css の .works-empty）と同じ。
   ※ ここは明るい地向けの色。暗い木目の地では、ファイル末尾の
     「暗い地向けの上書き」で枠線と文字を白系にしている。 */
.property-empty {
    max-width: var(--w-sm);
    margin-inline: auto;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--color-border);
    /* ※ 474px以下は左揃え、475px以上で中央揃え（下の分岐）。
         狭い幅では2行目が折り返すので、中央揃えだと行頭がそろわず読みにくい。
       ※ 475px はこの案内の分岐。サイト共通のブレークポイントではない。 */
    text-align: left;
}

@media (min-width: 475px) {
    .property-empty {
        text-align: center;
    }
}

.property-empty__title {
    font-size: 0.9375rem;
    line-height: 2;
    color: var(--color-text);
}

/* お知らせのアイコン（icon-information-thin-square.png）
   ※ 文字の一部として行の中に置く（inline-block）。
     以前は行を flex にして横並びの部品にしていたが、文字と一緒に折り返し・中央揃えされるようにした。
   ※ ※重要※ 画像を「形」として使い、色は currentColor で塗る（マスク）。
     画像は白だが、地を明るく戻したときも文字と同じ色になるようにしている。
     お問い合わせの送信ボタンの紙飛行機（contact.css）と同じ描き方。
   ※ ※重要※ 縦の位置の合わせ方
     箱の高さを1行分（1lh）にして行の上端に揃え（vertical-align: top）、
     アイコンは箱の上下中央に描く。和文は行の中で上下中央に並ぶので、中心がそろう。
     以前は vertical-align: -0.3em（ベースラインから下げる）だったが、
     行間（line-height: 2）に対して位置がずれていた。
     lh に未対応のブラウザは直前の 2em（行間と同じ）が残る。行間を変えたらここも合わせる。
   ※ アイコンの大きさは文字の 1.25倍（マスクの大きさ）。箱の幅も同じ。
   ※ リノベーション事例の案内（works.css の .works-empty__icon）と同じ値。 */
.property-empty__icon {
    display: inline-block;
    width: 1.25em;
    height: 2em;
    height: 1lh;
    margin-right: 0.375em;
    vertical-align: top;
    background-color: currentColor;
    -webkit-mask: url('../images/icon-information-thin-square.png') center / 1.25em 1.25em no-repeat;
    mask: url('../images/icon-information-thin-square.png') center / 1.25em 1.25em no-repeat;
}

.property-empty__text {
    font-size: 0.875rem;
    line-height: 2;
    color: var(--color-text-light);
}

.property-item {
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
}

/* ---- 概要（常時表示）----
   ※ 1023px以下は縦積み（上＝写真／下＝テキスト）、1024px以上で横並び。
     以前は 768px から横並びだった。 */

.property-item__head {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .property-item__head {
        flex-direction: row;
        align-items: stretch;
    }

    /* ※ 写真 60%：テキスト 40%（以前は 45:55 → 55:45）。
         テキスト側は残り（flex: 1）を使うので、比率を変えるときは写真側の値だけ触る。
       ※ min-width: 0 を忘れないこと。
         flex アイテムの既定は min-width: auto なので、
         中身が広いと指定の幅を超えて列が広がってしまう。 */
    .property-item__visual {
        flex: 0 0 60%;
        min-width: 0;
    }

    .property-item__body   { flex: 1; min-width: 0; }
}

.property-item__thumb {
    position: relative;
    /* ※ ※重要※ height: 100% と併せてはいけない。
         高さが確定していると aspect-ratio は「高さから幅」を計算するため、
         右のテキストが長いカードで写真が横に伸びてレイアウトが壊れる。
         横並び（1024px以上）では下の分岐で aspect-ratio を外して高さに合わせる。
       ※ 縦並び（1023px以下）の縦横比は、ベース（575px以下）16:11、576px以上 16:10、768px以上 16:9。
         画面が広がるほど横長にする。以前は全幅 4:3 で、768〜1023px では写真が大きくなりすぎていた。 */
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background-color: var(--color-bg-light);
}

@media (min-width: 576px) {
    .property-item__thumb {
        aspect-ratio: 16 / 10;
    }
}

/* ※ ※重要※ 1024px以上は下の分岐で aspect-ratio: auto に戻す。
     この 768px の分岐は必ずそれより前に置くこと（同じ詳細度）。 */
@media (min-width: 768px) {
    .property-item__thumb {
        aspect-ratio: 16 / 9;
    }
}

/* ※ 横並びのときは右のテキストの高さに合わせる。
     ※ ※重要※ この分岐は必ず上のベースの指定より後ろに置くこと。
       詳細度が同じなので、前に置くとベースの aspect-ratio に負ける。 */
@media (min-width: 1024px) {
    .property-item__thumb {
        aspect-ratio: auto;
        height: 100%;
    }
}

/* ※ 写真全体を押せるようにする（ライトボックスの起動）。
   ※ 登録した写真をすべて重ねて置き、.is-active のものだけ見せる（切り替えは property.js）。
     visibility も切るのは、透明なままだと上に重なって押せてしまうため。
   ※ ※重要※ transition の秒数は property.js の FADE_MS と必ず揃えること。
   ※ .is-prev は直前まで見せていた写真。新しい写真が乗り切るまで真下に残す
     （事業内容ページの .service-block__image と同じ考え方）。 */
.property-item__thumb-link {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.property-item__thumb-link.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease, visibility 0s;
}

.property-item__thumb-link.is-prev {
    z-index: 0;
    opacity: 1;
    visibility: visible;
    transition: none;
}

/* ---- 写真の切り替えの横棒 ----
   ※ 事業内容ページの写真（service.css の .service-block__tab）と同じ型・同じ値。
     あちらを変えたときはこちらも合わせる。
   ※ 写真の右下に重ねる（絶対配置）。写真の高さには加算しない。
   ※ 写真の上に乗るので色は白系。選択中だけ黒地用の金。 */
.property-item__tabs {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.property-item__tab {
    /* バー本体の寸法。変えるときはこの2つを触る。 */
    --tab-w: 1.5rem;
    --tab-h: 2px;

    display: flex;
    align-items: center;
    justify-content: center;
    /* 当たり判定。バーは細いので、上下に余裕を取る。 */
    width: var(--tab-w);
    height: 1.25rem;
    cursor: pointer;
}

.property-item__tab::before {
    content: '';
    display: block;
    width: 100%;
    height: var(--tab-h);
    background-color: rgba(255, 255, 255, 0.5);
    transition: background-color var(--transition);
}

.property-item__tab:is(:hover, :active)::before {
    background-color: rgba(255, 255, 255, 0.8);
}

.property-item__tab.is-active::before {
    background-color: var(--color-gold-bright);
}

/* ---- 無料見学の札（写真の右上）----
   ※ 管理画面で「無料見学の札」にチェックした物件だけ出る（property.php の tour_flag）。
   ※ トップページの物件情報の札（index.css の .sec-link__badge）と同じ型。
     黒地・白文字の正方形で、角にぴったり付ける（top: 0 / right: 0）。
     書体・太さ・字間・行間も向こうと同じ値。
   ※ 大きさは固定値（トップは箱の幅に合わせて cqw で変えている）。
     767px以下 4.5rem、768px以上 5.5rem（トップの札の上限と同じ）。
     文字はそれぞれ 0.6875rem／0.75rem。「無料見学」の4文字が左右に余白を残して収まる大きさ。
   ※ 左上・左下は空いているが、右下は写真の切り替えの横棒があるので右上に置く。
   ※ ※重要※ 当たり判定を持たせない。下の写真は押すと拡大表示が開く。
   ※ 重なり順は写真（z-index 0・1）・横棒（2）より上。 */
.property-item__tour {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    aspect-ratio: 1 / 1;
    background-color: var(--color-bg-dark);
    /* ※ 本文用の Noto Sans JP。太さは 500（読み込んでいるのは 400 / 500 / 700 だけ）。 */
    font-family: var(--font-family);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.6;
    text-align: center;
    color: #FFFFFF;
    pointer-events: none;
}

@media (min-width: 768px) {
    .property-item__tour {
        width: 5.5rem;
        font-size: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .property-item__thumb-link,
    .property-item__thumb-link.is-active,
    .property-item__tab::before {
        transition: none;
    }
}

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

.property-item__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-dark);
    font-family: var(--font-en);
    font-size: 1.75rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.28);
}

.property-item__body {
    padding: 1.5rem 1.25rem 1.75rem;
}

@media (min-width: 768px) {
    .property-item__body { padding: 2rem; }
}

.property-item__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.property-item__badge {
    padding: 0.25rem 0.875rem;
    border: 1px solid var(--color-border);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--color-secondary);
}

.property-item__badge--cat {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

.property-item__badge--status {
    /* ※ 白い文字を載せる面なので --color-gold-deep（common.css のゴールドの例外） */
    background-color: var(--color-gold-deep);
    border-color: var(--color-gold-deep);
    color: #FFFFFF;
}

.property-item__title {
    margin-top: 0.875rem;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--color-title);
}

@media (min-width: 768px) {
    .property-item__title { font-size: 1.5rem; }
}

.property-item__address {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.property-item__price {
    margin-top: 0.875rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    /* ※ 白地の上の文字なので --color-gold-deep */
    color: var(--color-gold-deep);
}

.property-item__keyspec {
    margin-top: 1rem;
    font-size: 0.875rem;
}

.property-item__keyspec-row {
    display: flex;
    gap: 1rem;
    padding-block: 0.375rem;
}

.property-item__keyspec-row dt {
    flex: 0 0 5rem;
    color: var(--color-text-light);
}

.property-item__keyspec-row dd {
    flex: 1;
    min-width: 0;
}

.property-item__actions {
    margin-top: 1.5rem;
}

/* ---- この物件について問い合わせる ----
   ※ お問い合わせフォームの送信ボタン（contact.css の .form-submit__button）と同じ型。
     黒地、左＝アイコンの正方形（右の仕切り線は白25%）／右＝文言。
     ホバーで変えるのはアイコンと文言の色だけ（黒地用の金）。地と仕切り線はそのまま。
     以前は文字だけのボタンで、ホバーで地を濃い金に塗り替えていた。
   ※ ※重要※ 上下のパディングは持たない。ボタンの高さは左の正方形（3.5rem）が決める。
   ※ 幅はテキストの面（.property-item__body）の中いっぱい。ただし最大幅は 400px。
     以前は 768px以上で中身なり（最小幅 20rem）にしていた。
     400px より面が広いとき（767px以下の広めの画面など）は中央に置く（margin-inline: auto）。
     400px は以前の共通のお問い合わせ誘導のボタンと同じ値（あちらは今は 360px）。
   ※ 文字の大きさは 0.875rem（以前は 0.9375rem）。 */
.property-item__contact {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
    padding: 0;
    background-color: var(--color-primary);
    color: #FFFFFF;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    transition: color var(--transition);
}

/* ※ 黒地の上の文字なので --color-gold-bright。
     矢印と描かれる円は currentColor なので、この color で一緒に金になる。 */
.property-item__contact:hover {
    color: var(--color-gold-bright);
}

/* アイコンの正方形
   ※ 右の1本線が仕切りになる。地が黒なので白25%（送信ボタンと同じ）。
   ※ 中の円の枠（::before が下敷き、::after がホバーで描かれる円）の基準。 */
.property-item__contact-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

/* 円の枠
   ※ 大きさ・位置は ::before と ::after で必ず同じにする。ずれると二重線に見える。
   ※ 大きさ（2.25rem）は他の導線ボタン（お知らせ詳細の戻るボタンなど）と同じ。 */
.property-item__contact-icon::before,
.property-item__contact-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.25rem;
    height: 2.25rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

/* 下敷きの円（白50%） */
.property-item__contact-icon::before {
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* ── ホバーで真上から360度、円の枠をなぞる ──
   ※ お知らせ詳細の戻るボタン（news.css）・トップの導線バー（index.css）と同じ仕組み・同じ速さ。
     conic-gradient のマスクで見せる角度を 0deg → 360deg に広げる。
     conic-gradient は真上（12時）から時計回りなので、上から描かれる。
   ※ 線の色は currentColor。ホバー中は文言と同じ金になる。
   ※ ※重要※ 角度の変数 --property-ring は下で @property 登録している。
     登録しないと補間されず、一瞬で円が出る。
     他のページの変数（--news-ring など）はそのページのCSSでしか登録していないので使わない。
   ※ 離したときは巻き戻さず、フェードで消してから角度を 0 に戻す。 */
@property --property-ring {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.property-item__contact-icon::after {
    --property-ring: 0deg;

    border: 1px solid currentColor;
    -webkit-mask: conic-gradient(#000 var(--property-ring), transparent 0);
    mask: conic-gradient(#000 var(--property-ring), transparent 0);
    opacity: 0;
    transition: opacity 0.25s ease, --property-ring 0s linear 0.25s;
}

.property-item__contact:hover .property-item__contact-icon::after {
    --property-ring: 360deg;
    opacity: 1;
    /* ※ 入るときはすぐ見せて、角度だけ時間をかけて広げる。 */
    transition: opacity 0s, --property-ring 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* 矢印（右向き）
   ※ 円（::before / ::after）より前面に出す。 */
.property-item__contact-icon svg {
    position: relative;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}

.property-item__contact-icon path {
    stroke: currentColor;
    stroke-width: 1;
    /* ※ 端と角を丸めない。サイト全体が直角の方針なので揃える。 */
    stroke-linecap: butt;
    stroke-linejoin: miter;
}

/* 文言。アイコンの右を埋めて中央に置く。
   ※ 左右の余白は取らない（以前は 1.25rem）。
     ボタンはテキストの面いっぱいなので、文言はその中で中央に置かれる。
   ※ テキスト側が狭い幅（1024px 付近の横並び）では2行に折り返すことがあるので、
     行間を詰めておく。 */
.property-item__contact-label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    line-height: 1.5;
    text-align: center;
}

/* ※ アニメーションを控える設定では描かずに、円をそのまま出す。
   ※ ※重要※ 上の :hover の指定より後ろに置くこと。 */
@media (prefers-reduced-motion: reduce) {
    .property-item__contact-icon::after,
    .property-item__contact:hover .property-item__contact-icon::after {
        transition: none;
    }
}

/* ---------------------------------------------------------
   詳細（アコーディオンで開閉）
   ※ logic / r-doboku の個人情報保護方針と同じ max-height 方式。
     <details> のネイティブ開閉だと高さが補間されずパッと開く。
--------------------------------------------------------- */

.property-item__details {
    border-top: 1px solid var(--color-border);
}

.property-item__summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    /* ※ line-height: 1 にして、文字の箱を字の大きさぴったりにする。
         本文の行間（広め）を継ぐと、文字の上下に余計な高さが付き、
         記号との上下中央がずれて見える。
       ※ 行間を詰めた分、上下の余白を 1rem → 1.25rem に広げてボタンの高さを保っている。
       ※ 文言は日本語なので本文の書体（以前は英字の --font-en で、日本語は代替書体になっていた）。 */
    padding: 1.25rem;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 0.8125rem;
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    background-color: var(--color-bg-light);
    transition: background-color var(--transition);
}

.property-item__summary:hover {
    background-color: #EFEDE9;
}

/* 開閉の記号（＋→−）と文言の差し替え
   ※ .is-open を付け外しするのは animation.js の共通アコーディオン。
   ※ ※重要※ 記号は文字（+ / −）ではなく、線で描く。
     文字だと書体ごとの字面の位置に引っ張られ、文言と上下中央がそろわない。
     横線と縦線を背景で2本重ね、開いたときは縦線の長さを 0 にする（＋ → −）。
   ※ ※重要※ 箱は奇数の 11px（0.6875rem）にする。
     偶数だと 1px の線が 0.5px の位置に来て、にじんで太く見える。 */
.property-item__summary::after {
    content: '';
    flex: 0 0 auto;
    width: 0.6875rem;
    height: 0.6875rem;
    background:
        linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
    transition: background-size var(--transition);
}

.property-item__summary.is-open::after {
    background-size: 100% 1px, 1px 0;
}

.property-item__summary-close { display: none; }

.property-item__summary.is-open .property-item__summary-open  { display: none; }
.property-item__summary.is-open .property-item__summary-close { display: inline; }

/* ※ 高さの実値（scrollHeight）は property.js が入れる。
     物件ごとに中身の量が違うので固定値にしない。
     開き切ったら max-height: none に戻す（遅延読み込みの写真で高さが変わるため）。
   ※ ※重要※ この箱にパディングを持たせないこと。
     box-sizing: border-box では max-height: 0 にしても高さの下限が
     パディング＋ボーダーになるため、閉じているのにその分だけ高さが残り、
     中身の先頭が覗いてしまう。パディングは内側（__detail-body）が持つ。 */
.property-item__detail-inner {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s ease;
}

.property-item__detail-body {
    padding: 1.75rem 1.25rem 2rem;
}

@media (min-width: 768px) {
    .property-item__detail-body { padding: 2.5rem 2rem; }
}

/* ※ ブロック同士（この物件について／写真／物件概要）の間は 2.5rem。
     以前は --spacing-lg（3rem）。
   ※ 先頭のブロックには付けない（開閉の中身の上の余白は __detail-body が持つ）。 */
.property-item__block + .property-item__block {
    margin-top: 2.5rem;
}

.property-item__block-title {
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--color-primary);
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-title);
}

.property-item__text {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
}

.property-item__text p + p {
    margin-top: 1.25rem;
}

/* ---- 写真ギャラリー ---- */

.property-item__gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1.25rem;
}

@media (min-width: 768px) {
    .property-item__gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

.property-item__gallery a {
    display: block;
}

.property-item__gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ---- 物件概要テーブル ---- */

/* ※ 上端の罫線は引かない（以前は border-top で引いていた）。
     見出し（.property-item__block-title）の下線がすぐ上にあるので、
     最初の行（価格・賃料）の上に線が二重に並んで見えていた。
     行ごとの区切りは各行の border-bottom が持つ。
   ※ 上の余白も取らない（以前は margin-top: 1.25rem）。
     見出しの下線に表が直接続く形。最初の行の文字との間は、行の上下の余白（0.75rem）が持つ。 */
.property-outline {
    margin-top: 0;
}

@media (min-width: 1024px) {
    .property-outline {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2.5rem;
    }

    /* 設備・条件と備考は1行分の幅を使う */
    .property-outline__row--wide {
        grid-column: 1 / -1;
    }
}

.property-outline__row {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.property-outline__label {
    flex: 0 0 7rem;
    padding: 0.75rem 0.75rem 0.75rem 0;
    color: var(--color-text-light);
}

@media (min-width: 768px) {
    .property-outline__label { flex-basis: 9.5rem; }
}

.property-outline__value {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 0;
    line-height: 1.8;
}

/* ---------------------------------------------------------
   ページャー
--------------------------------------------------------- */

.property-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--spacing-xl);
}

.property-pager__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border);
    font-family: var(--font-en);
    font-size: 0.875rem;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.property-pager__num:hover { border-color: var(--color-primary); }

.property-pager__num.is-current {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

/* ---------------------------------------------------------
   注意書き（表示規約対応）
   ※ 中央の NOTICE＋両側の金の横棒の見出しと、「※」付きの箇条書き（デザイン案E）。
     以前は明るい面（--color-bg-light）に文章だけだった。
   ※ 地は塗らず、上の罫線で一覧と区切る。
   ※ 本文の幅は 880px（--section-width-narrow）で止めて中央に置く。
     1200px いっぱいだと注記の1行が長すぎて読みにくい。
   ※ ここは明るい地向けの色。暗い木目の地では、ファイル末尾の
     「暗い地向けの上書き」で罫線・金・文字を暗い地用にしている。
--------------------------------------------------------- */

.property-note {
    max-width: var(--section-width-narrow);
    margin: var(--spacing-xl) auto 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-border);
}

/* 見出し（NOTICE）
   ※ 棒の長さは --note-bar だけで調整する。
   ※ ※重要※ 後ろの棒（::after）は文字の letter-spacing 分だけ詰める。
     字間は最後の文字の後ろにも付くので、そのままだと後ろの隙間だけ広くなる。
     letter-spacing を変えたらここも合わせる（トップの .sec-service__ja と同じ考え方）。 */
.property-note__title {
    --note-bar: 2rem;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin-bottom: 1rem;
    font-family: var(--font-en);
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gold-deep);
}

.property-note__title::before,
.property-note__title::after {
    content: '';
    flex: 0 0 auto;
    width: var(--note-bar);
    height: 1px;
    background-color: var(--color-gold);
}

.property-note__title::after {
    margin-inline-start: -0.22em;
}

@media (min-width: 768px) {
    .property-note__title {
        --note-bar: 2.5rem;

        font-size: 1.25rem;
    }
}

.property-note__list li {
    position: relative;
    padding-left: 1.25em;
    font-size: 0.8125rem;
    line-height: 1.9;
    color: var(--color-text-light);
}

.property-note__list li + li {
    margin-top: 0.5rem;
}

.property-note__list li::before {
    content: '※';
    position: absolute;
    left: 0;
    color: var(--color-gold-deep);
}

/* ---- 物件の取引を行う不動産会社 ----
   ※ 不動産の表示に関する公正競争規約で必要な広告主の表示事項（property.php の .property-broker）。
   ※ 注意書きの下に、罫線の箱で項目名／値を並べる。
     幅は注意書き（880px）の中いっぱい。
   ※ 文字は注意書きと同じく小さめ（0.8125rem）。主役は物件なので目立たせない。
   ※ ここは明るい地向けの色。暗い木目の地では、ファイル末尾の
     「暗い地向けの上書き」で罫線と文字を白系にしている。 */
.property-broker {
    margin-top: 1.75rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
}

@media (min-width: 576px) {
    .property-broker {
        padding: 1.25rem 1.5rem;
    }
}

.property-broker__title {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--color-title);
}

/* ※ 項目名の列は 7.5rem。一番長い「公正取引協議会」（7文字）が1行に収まる幅。 */
.property-broker__row {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.8;
}

.property-broker__row + .property-broker__row {
    margin-top: 0.25rem;
}

.property-broker__row dt {
    color: var(--color-text-light);
}

.property-broker__row dd {
    min-width: 0;
    color: var(--color-text);
}

/* =========================================================
   暗い地向けの上書き
   ※ セクションの地を暗い木目にしたので、木目の上に直接乗る要素だけ色を変える。
     物件カードは明るい面なので触らない。
   ※ ※重要※ ここにまとめる。各ブロックに散らすと、地を白に戻すときに見落とす。
     地を白に戻すときは、.property の背景とこのブロックをまとめて消す。
   ※ 暗い面の枠線は白25%（共通のお問い合わせ誘導のボタンと同じ）。
     選択中は白地に黒文字（黒地に黒い面を置くと溶けるため）。
========================================================= */

/* ---- 絞り込み ---- */
.property-filter__item {
    border-color: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

.property-filter__item:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.property-filter__item.is-current {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--color-primary);
}

/* ---- 0件の案内 ---- */
.property-empty {
    border-color: rgba(255, 255, 255, 0.25);
}

.property-empty__title {
    color: #FFFFFF;
}

.property-empty__text,
.property-list:empty::before {
    color: rgba(255, 255, 255, 0.75);
}

/* ---- 注意書き（NOTICE）----
   ※ 金は黒地用の --color-gold-bright。--color-gold-deep は明るい地用なので沈む。 */
.property-note {
    border-top-color: rgba(255, 255, 255, 0.25);
}

.property-note__title {
    color: var(--color-gold-bright);
}

.property-note__title::before,
.property-note__title::after {
    background-color: var(--color-gold-bright);
}

.property-note__list li {
    color: rgba(255, 255, 255, 0.72);
}

.property-note__list li::before {
    color: var(--color-gold-bright);
}

/* ---- 物件の取引を行う不動産会社 ---- */
.property-broker {
    border-color: rgba(255, 255, 255, 0.25);
}

.property-broker__title {
    color: #FFFFFF;
}

.property-broker__row dt {
    color: rgba(255, 255, 255, 0.6);
}

.property-broker__row dd {
    color: rgba(255, 255, 255, 0.85);
}

/* ---- ページャー ---- */
.property-pager__num {
    border-color: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

.property-pager__num:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.property-pager__num.is-current {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--color-primary);
}