@charset "UTF-8";

/* ==========================================================
■ 目次

    レイアウト

============================================================ */


/* ========================================================= */
/* レイアウト ================================================ */
/* テーブル */
.search-sales .list-view table {
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
}
.search-sales .list-view table thead tr {
    background-color:#E4E4E4;
    border-bottom: 2px solid #dee2e6;
    text-align: left;
    border-bottom:#A2A2A2 1px solid;
    white-space: nowrap;
}
.search-sales .list-view table thead tr th {
    padding: 10px 12px;
    border-left:#fff 1px solid;
    font-weight: normal;
}
.search-sales .list-view table tbody tr {
    border-bottom: 1px solid #dee2e6;
}
.search-sales .list-view table tbody td {
    padding: 10px 12px;
    border:#A2A2A2 1px solid;
}
.search-sales .list-view table tbody tr:nth-child(2n){
    background:#E4E4E4;
}
.search-sales .list-view table .tbl-sf{
    width:min(10vw,100px);
    padding:0;
}
.search-sales .list-view table .tbl-sales {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4px;
}
.search-sales .list-view table .tbl-sales .tbl-stock-icon{
    width:22px;
}
/* 写真 */
.search-sales .list-view table .tbl-photo{
    width:130px;
    padding: 0;
}
.search-sales .list-view table .tbl-photo a{
    display: block;
    width: 100%;
    height: 100%;
}
.search-sales .list-view table .tbl-photo img{
    width:100%;
}
/* No */
.search-sales .list-view table .tbl-no{
    width:80px;
}
.search-sales .list-view table .tbl-no p{
    margin: 0;
}
/* 評価 */
.search-sales .list-view table .tbl-evaluation{
    width:80px;
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;
}

/* ページネーション */
.pagination nav[role="navigation"] {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 20px 0;
    font-size: 14px;
}
/* スマホ用（前へ・次へ）を非表示 */
.pagination nav[role="navigation"] > div:first-child {
    display: none;
}
/* PC用ブロックを表示し、テキストとページャーを左右に分ける */
.pagination nav[role="navigation"] > div:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
}
/* 「全 X 〜 Y / Z 件を表示」のテキスト部分 */
.pagination nav[role="navigation"] > div:nth-child(2) > div:first-child p{
    margin: 0;
}
/* 「全 X 〜 Y / Z 件を表示」の数字部分 */
.pagination nav[role="navigation"] > div:nth-child(2) > div:first-child .font-medium{
    font-weight: bold;
    font-size: 16px;
}
/* ページ番号（ページャー）のコンテナ */
.pagination nav[role="navigation"] > div:nth-child(2) > div:last-child {
    display: flex;
    align-items: center;
}
.pagination nav[role="navigation"] > div:nth-child(2) > div:last-child > span {
    border: none;
}
/* SVGアイコン（矢印）*/
.pagination nav[role="navigation"] svg {
    width: 20px;
    height: 20px;
}
/* 各ボタン */
.pagination nav[role="navigation"] a,
.pagination nav[role="navigation"] span.relative {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    margin: 0 2px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #333;
    background-color: #fff;
    border-radius: 4px;
    transition: 0.2s;
    height: 30px;
}
/* ホバー時の色 */
.pagination nav[role="navigation"] a:hover {
    background-color: #e9e8e8;
}
/* 現在のページのボタン色 */
.pagination nav[role="navigation"] span[aria-current="page"] span {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}
@media only screen and (max-width:767px){
    .search-sales .list-view  {
        display:block;
        overflow-x:scroll;
        white-space:nowrap;
    }
    .search-sales .list-view table {
        width: max-content;
    }
    .pagination nav[role="navigation"] > div:nth-child(2) {
        flex-direction: column;
        gap: 16px;
    }
    .pagination nav[role="navigation"] a,
    .pagination nav[role="navigation"] span.relative {
        padding: 6px 10px;
    }
}
/* ========================================================= */