@import url(style_pc.css) ; /* デフォルト：1000px以上用（PC用）の記述 */
@import url(style_tab.css) screen and (max-width: 999px); /* 999px以下用（タブレット用）の記述 */
@import url(style_sp.css) screen and (max-width: 764px); /* 764px以下用（スマフォ用）の記述 */

/* ================================================= 
   不動産物件情報エリア（追加分）
================================================== */

/* 物件エリア全体のコンテナ */
.property_container {
    width: 100%;
    margin-top: 20px;
}

/* 物件ごとのテーブル構造 */
.property_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    border: 1px solid #ccc;
    background: #fff;
}

/* 物件名のヘッダー */
.property_table thead th {
    background-color: #eeeeee;
    padding: 20px 15px;
    text-align: left;
    vertical-align: middle;
}

.prop_title {
    font-size: 18px;
    color: #333;
    font-weight: bold;
}

/* ラベル共通（賃貸・駐車場） */
.prop_label {
    text-align: center !important;
    width: 100px;
    color: #fff;
    font-size: 16px;
}
.lease { background-color: #29a7d3 !important; }    /* 青：賃貸 */
.parking { background-color: #1c8b42 !important; }  /* 緑：駐車場 */

/* 画像が並ぶエリア */
.image_area {
    padding: 15px;
}

.image_grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px; /* 画像同士の隙間 */
}

.image_grid td {
    width: 25%; /* PCは4列 */
    vertical-align: top;
}

/* 画像を囲むリンク（ここで600:850の比率を作る） */
.image_grid a {
    display: block;
    width: 100%;
    aspect-ratio: 600 / 850; /* 縦長比率を固定 */
    overflow: hidden;
    background-color: #f0f0f0;
}

/* 画像自体の設定 */
.image_grid img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* 枠に合わせて綺麗に収める */
    transition: transform 0.3s, opacity 0.3s;
}

.image_grid a:hover img {
    opacity: 0.8;
    transform: scale(1.05); /* ホバー時に少しズーム */
}

/* テキスト詳細エリア（左寄せ設定） */
.prop_info {
    padding: 15px 15px 15px 25px;
    border-top: 1px solid #eee;
    text-align: left !important; /* 強制的に左寄せ */
}

.prop_info ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.prop_info li {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    text-align: left;
}

/* -------------------------------------------
   スマホ表示（768px以下）の設定
------------------------------------------- */
@media screen and (max-width: 768px) {
    /* 画像を2列にするための魔法 */
    .image_grid tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .image_grid td {
        width: 49%; /* ほぼ半分（余白を残す） */
        display: block;
        margin-bottom: 8px;
    }
    
    .prop_title {
        font-size: 14px;
    }
    
    .prop_label {
        width: 80px;
        font-size: 12px;
    }
    
    .prop_info {
        padding-left: 15px; /* スマホでは左余白を少し詰める */
    }
}