@charset "UTF-8";

/* ==============================================================================================================
   購入希望者一覧ページ
============================================================================================================== */
/***** タイトル *****/
.archive-buyer__hero {
    padding: 5rem 0;
}

.archive-buyer__ttl {
    display: inline-flex;
    align-items: flex-end;
    gap: 2.5rem;
    font-size: 2rem;
    line-height: 1.4;
    border-bottom: var(--color_pink) 3px solid;
}

.archive-buyer__ttl-icon {
    width: 7.4rem;
    height: auto;
    margin-bottom: -0.1rem;
}

.archive-buyer__ttl p span {
    font-size: 150%;
    font-weight: bold;
}

@media screen and (max-width: 600px) {
    .archive-buyer__hero {
        padding: 2.5rem 0;
    }
    .archive-buyer__ttl {
        gap: 1.5rem;
    }
    .archive-buyer__ttl-icon {
        width: 6rem;
    }
}


/* ==============================================================================================================
   メイン
============================================================================================================== */
.buyers-archive {
    padding: 5rem 0 14rem;
    background-color: var(--color_gray_usu);
}

.buyers-archive__wrap {
    display: flex;
    align-items: flex-start;
    gap: 5rem;
}

/***** サイドバー *****/
/*
input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    border-radius: 3px;
    accent-color: var(--color_pink);
}*/

.buyers-archive__sidebar {
    flex-shrink: 0;
    width: 25rem;
    background-color: var(--color_white);/*
    position: -webkit-sticky;
    position: sticky;
    top: 2rem;*/
}

.archive-search__form {
    border: #ccc 2px solid;
    border-radius: 1rem;
    overflow: hidden;
}

.archive-search__head {
    position: relative;
    padding: 1rem;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
}

/* SP表示専用：オーバーレイの閉じるボタン（PCでは非表示） */
.archive-search__sp-close {
    display: none;
}

/* SP表示専用：オーバーレイ内の「検索結果をみる」ボタン（PCでは非表示） */
.archive-search__sp-submit {
    display: none;
}

.archive-search__block {/*
    padding: 1.6rem;*/
}

.archive-search__block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;/*
    margin-bottom: 1rem;*/
    padding: 0.5rem 1rem;
    background-color: var(--color_gray_usu);
}

.archive-search__block-ttl {
    font-size: 1.4rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    background-color: var(--color_gray_usu);
}

.archive-search__block-ttl.-area {
    padding: 0;
}

.archive-search__change {
    padding: 0.3em 0.5em 0.35em;
    font-size: 1.2rem;
    background: var(--color_white);
    border: var(--color_black) 1px solid;
    border-radius: 5px;
    cursor: pointer;
}

.archive-search__area-selected {
    padding: 1rem 2rem 2rem;
}
.archive-search__area-selected p {
    font-size: 1.4rem;
}

/* エリアパネル */
.archive-search__area-panel {
    padding: 1rem 2rem;
}

.archive-search__area-group {
    margin-bottom: 1.2rem;
}

.archive-search__parent-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 0.8rem;
}

.archive-search__parent-label input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;/*
    accent-color: var(--color_pink);*/
    flex-shrink: 0;
}

.archive-search__children {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-left: 2rem;
}

.archive-search__children label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.3rem;
    cursor: pointer;
}

.archive-search__children input[type="checkbox"] {
    width: 1.4rem;
    height: 1.4rem;/*
    accent-color: var(--color_pink);*/
    flex-shrink: 0;
}

/***** 面積 *****/
.archive-search__select-wrap {
    position: relative;
    width: 14rem;
    height: 3.4rem;
    margin: 1rem 2rem 2rem;
    background-color: var(--color_white);
    border: 2px solid var(--color_gray);
    border-radius: 4px;
}

.archive-search__select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.6rem;
    width: 0.9rem;
    height: 0.9rem;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.archive-search__select {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 1rem;
    font-size: 1.4rem;
    cursor: pointer;
}

/***** 用途・その他条件 *****/
.archive-search__checks {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 2rem 2rem;
}

.archive-search__checks label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
    cursor: pointer;
}

.archive-search__checks input[type="checkbox"] {
    width: 1.4rem;
    height: 1.4rem;/*
    accent-color: var(--color_pink);*/
    flex-shrink: 0;
}

/***** 該当件数 *****/
.archive-search__result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem 1rem;
    border-top: #ccc 1px solid;
}

.archive-search__count {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
}

.archive-search__count strong {
    font-size: 200%;
    color: var(--color_pink);
    margin: 0 0.4rem;
}

.archive-search__result button {
    padding: 0.5em 1em;
    color: var(--color_white);
    border: var(--color_pink) 1px solid;
    border-radius: 5px;
}

/***** SP用：画面下部固定の絞り込みバー（PCでは非表示） *****/
.sp-search-bar {
    display: none;
}

@media screen and (max-width: 896px) {
    .buyers-archive__wrap {
        gap: 2.5rem;
    }
    .buyers-archive__sidebar {
        width: 18rem;
    }
}

@media screen and (max-width: 600px) {
    .buyers-archive {
        /* 画面下部固定の絞り込みバー（.sp-search-bar）の高さ分、余白を確保 */
        padding: 5rem 0 11rem;
    }
}

/* ==============================================================================================================
   メインコンテンツ
============================================================================================================== */
.buyers-archive__main {
    flex: 1;
    min-width: 0;
}

/***** 検索結果なし／絞り込み前の案内表示 *****/
.buyers-archive__none,
.buyers-archive__guide {
    padding: 4rem 2rem;
    text-align: center;
    background-color: var(--color_white);
    border-radius: 1rem;
}

.buyers-archive__none {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color_black);
}

.buyers-archive__guide {
    font-size: 1.4rem;
    line-height: 1.8;
    color: #888;
}

/***** アーカイブカード *****/
.buyers-archive__list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.archive-card {
    background-color: var(--color_white);
    border-radius: 1rem;
    box-shadow: 0 4px 10px var(--color_gray);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}

/* 成約済カードのマスク・ラベルのスタイルは style.css に全ページ共通で定義 */

.archive-card:hover {
    transform: scale(0.99);
}

.archive-card__inner {
    display: flex;
    gap: 3.5rem;
    padding: 1.6rem 3rem;
}

.card__content-left {
    width: 24rem;
}

.archive-card__no {
    width: 100%;
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

.archive-card__image {
    position: relative;
    flex-shrink: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.archive-card__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/* 新着バッジ（.nozo-new-badge）のスタイルは style.css に共通定義 */

.card__content-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: calc(100% - 27.5rem);
}

.archive-card__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.6rem;
    font-size: 1.4rem;
}

.archive-card__meta {
    display: flex;
    gap: 2rem;
    line-height: 1.4;
}

.archive-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.archive-card__tags span.tag {
    padding: 0 0.5em 0.1em;
    line-height: 1.4;
    color: var(--color_green);
    border: var(--color_green) 1px solid;
    border-radius: 50rem;
}

.archive-card__ttl {
    margin-bottom: 1rem;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.4;
}

.archive-card__excerpt {
    line-height: 1.4;
    color: #999;
}

.archive-card__link {
    width: 100%;
    margin-top: auto;
    padding: 0 1em;
    text-align: center;
    background-color: var(--color_gray_usu);
    border-left: 2px solid var(--color_pink);
}

@media screen and (max-width: 896px) {
    .archive-card__inner {
        gap: 2rem;
        padding: 1.6rem;
    }
    .card__content-left {
        width: 16rem;
    }
    .card__content-right {
        width: calc(100% - 16rem);
    }
    .archive-card__tags {
        font-size: 0.8rem;
    }
    .archive-card__ttl {
        font-size: 2rem;
    }
}
/* ↓スマホ時の検索部分要検討 */
@media screen and (max-width: 600px) {
    /***** サイドバーを全画面オーバーレイ化（初期状態は非表示） *****/
    .buyers-archive__sidebar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        overflow: hidden;
        width: auto;
        background-color: var(--color_white);
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }

    /* js-sp-search-overlay に is-open が付いたら画面内へスライドイン */
    .buyers-archive__sidebar.is-open {
        transform: translateY(0);
        padding-top: 5rem;
    }

    .archive-search__form {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        border: none;
        border-radius: 0;
    }

    .archive-search__head {
        flex-shrink: 0;
        padding: 1.6rem 1rem;
        font-size: 1.6rem;
        border-bottom: #ccc 1px solid;
    }

    /* SP表示：オーバーレイの閉じるボタン */
    .archive-search__sp-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        right: 1rem;
        width: 3.2rem;
        height: 3.2rem;
        font-size: 1.6rem;
        background: none;
        border: none;
        transform: translateY(-50%);
        cursor: pointer;
    }

    /* チェック項目部分はスクロールできるよう伸長 */
    .archive-search__block {
        flex-shrink: 0;
    }

    /* 件数・SP用ボタンを画面下部に固定表示 */
    .archive-search__result {
        position: sticky;
        bottom: 0;
        flex-shrink: 0;
        background-color: var(--color_white);
        border-top: #ccc 1px solid;
        padding: 1rem;
    }

    /* SP表示：「検索結果をみる」ボタン（PCの遷移ボタンの代わり） */
    .archive-search__sp-submit {
        display: block;
        width: 100%;
        padding: 1.2em 1em;
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--color_white);
        background-color: var(--color_pink);
        border: none;
        border-radius: 6px;
        cursor: pointer;
    }
    .buyers-archive__list {
        gap: 2rem;
    }    
    .buyers-archive__list .nozo-new-badge.-overlay {
        right: auto;
        left: 0;
        border-radius: 0 0 5px 0;
    }
    .archive-card__inner {
        flex-direction: column;
        gap: 1rem;
    }
    .card__content-left,
    .card__content-right {
        width: 100%;
    }
    .card__content-left {
        display: flex;
        align-items: flex-end;
    }
    .archive-card__no {
        margin-bottom: 0;
    }
    .archive-card__image {
        width: 25%;
    }
    .archive-card__link {
        margin-top: 2rem;
    }

    /***** SP用：画面下部固定の絞り込みバー *****/
    .sp-search-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 900;
        width: 100%;
        padding: 1.2rem 1.6rem;
        background-color: var(--color_white);
        border-top: #ccc 1px solid;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
        cursor: pointer;
    }

    .sp-search-bar__count {
        font-size: 1.3rem;
    }

    .sp-search-bar__count strong {
        font-size: 160%;
        color: var(--color_pink);
        margin: 0 0.3rem;
    }

    .sp-search-bar__label {
        padding: 0.6em 1.4em;
        font-size: 1.3rem;
        font-weight: bold;
        color: var(--color_white);
        background-color: var(--color_pink);
        border-radius: 50rem;
    }
}
/* ==============================================================================================================
   訴求セクション
============================================================================================================== */
.sell-cta {
    padding: 12rem 0;
}

.sell-cta__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rem;
}

.sell-cta__txt {
}

.sell-cta__txt h2 {
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 2rem;
}

.sell-cta__txt h2 span {
    color: var(--color_pink);
}

.sell-cta__txt p {
    line-height: 2;
}

.sell-cta__img {
    flex-shrink: 0;
    width: 28rem;
}

.sell-cta__img img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 896px) {
    .sell-cta__inner {
        align-items: flex-end;
        gap: 4rem;
    }
    .sell-cta__txt h2 {
        font-size: 2rem;
    }
    .sell-cta__img {
        width: 20rem;
    }
}

@media screen and (max-width: 600px) {
    .sell-cta {
        padding: 8rem 0;
    }
    .sell-cta__inner {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        max-width: 40rem;
        margin: auto;
    }
    .sell-cta__txt p br {
        display: none;
    }
}
/* ==============================================================================================================
   ページネーション
============================================================================================================== */
.pagination {
    margin-top: 4rem;
}

.pagination__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
}

.pagination__page,
.pagination__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border: 1px solid var(--color_border);
    border-radius: 4px;
    font-size: 1.4rem;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.pagination__page:hover,
.pagination__arrow:hover {
    background-color: var(--color_pink);
    border-color: var(--color_pink);
    color: var(--color_white);
}

.pagination__page.is-current {
    background-color: var(--color_pink);
    border-color: var(--color_pink);
    color: var(--color_white);
    pointer-events: none;
}