/* 物件カード */
.property_cards_wrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1106px;
    margin: 0 auto;
}

.property_cards_wrap form {
    border: 0.3px solid #6b68684b;
    border-left: 0;
    border-bottom: 0;
}

.property_cards_wrap form:nth-child(3n) {
    border-right: 0;
}

.property_cards_column {
    display: block;
    border: 0.3px solid #6b68684b;
    border-left: 0;
    border-bottom: 0;
}

.property_cards_column:nth-child(3n) {
    border-right: 0;
}

.property_cards {
    position: relative;
    width: auto;
    flex-shrink: 0;
    padding: 24.3px 25px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    /* ホバーでの変形・影を削除 */
    transition: none;
}

.property_cards .property_contents {
    width: 318px;
}

.property_cards .property_img {
    position: relative;
}

.property_img img {
    width: 100%;
    height: 212px;
    object-fit: cover;
    display: block;
}

.property_img i,
.property_img div {
    position: absolute;
}

.property_img .circle,
.property_img .square {
    font-size: 30px;
    color: white;
    border: #707070;
    right: 10px;
}

.property_img .heart,
.property_img .w_icon {
    font-size: 15px;
    color: #707070;
    right: 17.5px;
}

.property_img .circle {
    top: 10px;
}

.property_img .heart {
    top: 17.5px;
}

.property_img .square {
    bottom: 10px;
    background-color: white;
    height: 30px;
    width: 30px;
    font-size: 0;
}

.property_img .w_icon {
    bottom: 17.5px;
    border: 1px solid #707070;
    height: 15px;
    width: 15px;
}
/* ▼ 既存デザイン（そのまま利用） */
.recommend_property .list_button {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    border-top: 0.3px solid #6b68684b;
    border-bottom: 0.3px solid #6b68684b;
    font-size: 18px;
    letter-spacing: 1.44px;
    transition: background-color 0.3s ease;
}

.recommend_property .list_button .search-action .arrow-box.lists {
    background: transparent !important;
}

.recommend_property .list_button:hover {
    background-color: #e0e0e0; /* ← この hover をトリガーに矢印も動く */
}

/* ▼ search-action（背景なし） */
.recommend_property .list_button .search-action {
    position: relative;
    width: 48px;
    height: 48px;
    margin-left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: hidden;
}

/* ▼ 矢印ボックス（背景なし、矢印は黒） */
.recommend_property .list_button .arrow-box.lists::before,
.recommend_property .list_button .arrow-box.lists::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: #000; /* 黒矢印 */
    font-size: 24px;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
}

/* ▼ 2本目は左外へ */
.recommend_property .list_button .arrow-box.lists::after {
    transform: translate(calc(-100% - 8px), -50%);
}

/* ▼ ボタンを hover したら矢印も動く */
.recommend_property .list_button:hover .arrow-box.lists::before {
    animation-name: arrowRightLeftBtn;
}

.recommend_property .list_button:hover .arrow-box.lists::after {
    animation-name: arrowLeftRightBtn;
    animation-delay: 0.18s;
}

/* ▼ 矢印スライドのアニメ */
@keyframes arrowRightLeftBtn {
    0% {
        transform: translateY(-50%) translateX(0);
    }
    100% {
        transform: translateY(-50%) translateX(48px);
    }
}

@keyframes arrowLeftRightBtn {
    0% {
        transform: translateY(-50%) translateX(calc(-100% - 8px));
    }
    100% {
        transform: translateY(-50%) translateX(0);
    }
}

.label_list {
    display: flex;
    flex-direction: row; /* ← 横並びになる */
    gap: 8px; /* タグの間の余白（任意） */
    align-items: center;
    margin-top: 24px;
}
.label_list li {
    height: 32px;
    font-size: 14px;
    line-height: 24.5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    min-width: 72px;
    padding: 0 10px;
    letter-spacing: 0.56px;
}

.label_list .label_new {
    width: 40px;
    background-color: #ffff00;
    font: var(--unnamed-font-style-normal) normal 900
        var(--unnamed-font-size-14) / var(--unnamed-line-spacing-24-5)
        var(--unnamed-font-family-zen-kaku-gothic-new);
    letter-spacing: var(--unnamed-character-spacing-0-56);
    color: var(--unnamed-color-000000);
    text-align: left;
    font: normal normal 900 14px/25px Zen Kaku Gothic New;
    letter-spacing: 0.56px;
    color: #000000;
    opacity: 1;
}

.label_list .label_estate {
    width: auto;
    min-width: 80px;
    background-color: #fff;
}

.property_cards .property_name {
    font-weight: 500;
    font-size: 18px;
    margin-top: 10px;
}

.property_cards .address,
.property_cards .access {
    width: 100%;
    font-size: 16px;
    letter-spacing: 0.64px;
    color: #888;
}

.property_cards .address {
    margin-top: 18px;
    min-height: 20px;
}

.property_cards .access {
    height: 24px;
}

.property_cards .priceBox {
    height: 46px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
}

.priceBox .number {
    font-weight: 500;
    font-size: 32px;
    color: #000000 !important;
    line-height: 36px;
}

.priceBox .unit {
    font-size: 16px;
    letter-spacing: 0.64px;
}

@keyframes arrowRightLeft {
    0% {
        transform: translateY(-50%) translateX(0);
    }
    100% {
        transform: translateY(-50%) translateX(100%);
    }
}

@keyframes arrowLeftRight {
    0% {
        transform: translateY(-50%) translateX(-100%);
    }
    100% {
        transform: translateY(-50%) translateX(0);
    }
}

/* メディアクエリはそのまま */
@media screen and (min-width: 960px) {
}

@media screen and (min-width: 520px) and (max-width: 959px) {
}

@media screen and (max-width: 519px) {
    .recommend_property {
        margin: 0 auto !important;
        max-width: 368px !important;
    }
}

.arrows-box {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    background: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    font-size: 24px;
}

/* 矢印アニメ */
.arrows-box::before,
.arrows-box::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #fff;
    animation-fill-mode: forwards;
    animation-duration: 0.6s;
}

.arrows-box::after {
    transform: translate(calc(-100% - 15px), -50%);
}
/* カード全体ホバーで矢印アニメ発火 */
.property_cards.hovered .arrows-box::before {
    animation-name: arrowRightLeft;
}

.property_cards.hovered .arrows-box::after {
    animation-name: arrowLeftRight;
    animation-delay: 0.18s;
}

.property_cards {
    position: relative;
    overflow: hidden;
}

/* 横線下側（右下→左下） */
.property_cards::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background-color: #000;
    transition: width 0.5s ease;
}

/* 縦線右側（右下→右上） */
.property_cards::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2px;
    height: 0;
    background-color: #000;
    transition: height 0.5s ease;
}

/* 横線上側（右上→左上） */
.property_cards .line-top {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 2px;
    background-color: #000;
    transition: width 0.5s ease 0.5s; /* 下横+右縦の後に出る */
}

/* 縦線左側（左下→左上） */
.property_cards .line-left {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2px;
    height: 0;
    background-color: #000;
    transition: height 0.5s ease 0.5s; /* 下横+右縦の後に出る */
}

/* ホバー時 */
.property_cards.hovered::before {
    width: 100%;
}
.property_cards.hovered::after {
    height: 100%;
}
.property_cards.hovered .line-top {
    width: 100%;
}
.property_cards.hovered .line-left {
    height: 100%;
}

/* ホバー解除時に逆順で消す */
.property_cards.reverse::before {
    width: 0;
    transition-delay: 0.5s;
}
.property_cards.reverse::after {
    height: 0;
    transition-delay: 0.5s;
}
.property_cards.reverse .line-top {
    width: 0;
    transition-delay: 0s;
}
.property_cards.reverse .line-left {
    height: 0;
    transition-delay: 0s;
} /* 左縦線も最初に消える */