/*************出品車両一覧のテーブル******************/
.wi_tt{
    width:100px;
    }

.wi_no{
    width:270px;
    }

.wi_car{
    width:647px;
    }


.fo_93{
    vertical-align:bottom;
    }

.btn-primary{
    max-width: 100px;
    width: 100%;
    color: #322e25;
    border:1px solid #ffa200;
    /* text-shadow:1px 1px 0px #ffdd88; */
    background: rgb(255,192,0); /* Old browsers */
    /* background: -moz-linear-gradient(top,  rgba(255,192,0,1) 0%, rgba(255,162,0,1) 100%); /* FF3.6+ */
    /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,192,0,1)), color-stop(100%,rgba(255,162,0,1))); /* Chrome,Safari4+ */
    /* background: -webkit-linear-gradient(top,  rgba(255,192,0,1) 0%,rgba(255,162,0,1) 100%); /* Chrome10+,Safari5.1+ */
    /* background: -o-linear-gradient(top,  rgba(255,192,0,1) 0%,rgba(255,162,0,1) 100%); /* Opera 11.10+ */
    /* background: -ms-linear-gradient(top,  rgba(255,192,0,1) 0%,rgba(255,162,0,1) 100%); /* IE10+ */
    /* background: linear-gradient(to bottom,  rgba(255,192,0,1) 0%,rgba(255,162,0,1) 100%); /* W3C */
    /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc000', endColorstr='#ffa200',GradientType=0 ); /* IE6-9 */
}

.btn-primary:hover{
    background: rgb(255,162,0); /* Old browsers */
    /* background: -moz-linear-gradient(top,  rgba(255,162,0,1) 1%, rgba(255,192,0,1) 100%); /* FF3.6+ */
    /* background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,162,0,1)), color-stop(100%,rgba(255,192,0,1))); /* Chrome,Safari4+ */
    /* background: -webkit-linear-gradient(top,  rgba(255,162,0,1) 1%,rgba(255,192,0,1) 100%); /* Chrome10+,Safari5.1+ */
    /* background: -o-linear-gradient(top,  rgba(255,162,0,1) 1%,rgba(255,192,0,1) 100%); /* Opera 11.10+ */
    /* background: -ms-linear-gradient(top,  rgba(255,162,0,1) 1%,rgba(255,192,0,1) 100%); /* IE10+ */
    /* background: linear-gradient(to bottom,  rgba(255,162,0,1) 1%,rgba(255,192,0,1) 100%); /* W3C */
    /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa200', endColorstr='#ffc000',GradientType=0 ); /* IE6-9 */
}

.btn-primary.apply_claim{
    width:60px;
    padding:9px 0px;
    color:#ffffff;
    border-color:#92be06;
    /* text-shadow:0px 0px 0px #ffffff; */
    background: rgb(153,203,0);
    /* background: -moz-linear-gradient(top,  rgba(153,203,0,1) 0%, rgba(134,177,3,1) 100%); */
    /* background: -webkit-linear-gradient(top,  rgba(153,203,0,1) 0%,rgba(134,177,3,1) 100%); */
    /* background: linear-gradient(to bottom,  rgba(153,203,0,1) 0%,rgba(134,177,3,1) 100%); */
    /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cb00', endColorstr='#86b103',GradientType=0 ); */
}


.btn-primary.apply_claim.trade_date_btn:hover{
    background: rgb(134,177,3,1);
    /* background: -moz-linear-gradient(top, rgba(134,177,3,1) 0%, rgba(153,203,0,1) 100%); */
    /* background: -webkit-linear-gradient(top, rgba(134,177,3,1) 0%,rgba(153,203,0,1) 100%); */
    /* background: linear-gradient(to bottom, rgba(134,177,3,1) 0%,rgba(153,203,0,1) 100%); */
    /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86b103', endColorstr='#99cb00',GradientType=0 ); */
}

.btn-danger{
    width:111px;
    height:36px;
    padding-top:9px;
    color:#7d7d7d;
    border:1px solid #c5c5c5;
    background: rgb(248,248,248); /* Old browsers */
    /* background: -moz-linear-gradient(top,  rgba(248,248,248,1) 0%, rgba(244,244,244,1) 100%); /* FF3.6+ */
    /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,248,248,1)), color-stop(100%,rgba(244,244,244,1))); /* Chrome,Safari4+ */
    /* background: -webkit-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(244,244,244,1) 100%); /* Chrome10+,Safari5.1+ */
    /* background: -o-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(244,244,244,1) 100%); /* Opera 11.10+ */
    /* background: -ms-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(244,244,244,1) 100%); /* IE10+ */
    /* background: linear-gradient(to bottom,  rgba(248,248,248,1) 0%,rgba(244,244,244,1) 100%); /* W3C */
    /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */

    }
.btn-danger:hover{
    background:#e9e9e9;
}

.add_tender.btn_small, .cancel_tender.btn_small{
    width:auto;
}

.mb30 {
    margin-bottom: 30px;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius:4px
}

.pagination > li {
    display:inline
}

.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.428571429;
    text-decoration: none;
    background-color: #fff;
    border:1px solid #ddd
}

.pagination > li:first-child > a, .pagination > li:first-child > span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius:4px
}

.pagination > li:last-child > a, .pagination > li:last-child > span {
    border-top-right-radius: 4px;
    border-bottom-right-radius:4px
}

.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
    background-color:#eee
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #428bca;
    border-color:#428bca
}

.pagination > .disabled > span, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
    color: #999;
    cursor: not-allowed;
    background-color: #fff;
    border-color:#ddd
}

.pagination-lg > li > a, .pagination-lg > li > span {
    padding: 10px 16px;
    font-size:18px
}

.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span {
    border-bottom-left-radius: 6px;
    border-top-left-radius:6px
}

.pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span {
    border-top-right-radius: 6px;
    border-bottom-right-radius:6px
}

.pagination-sm > li > a, .pagination-sm > li > span {
    padding: 5px 10px;
    font-size:12px
}

.pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span {
    border-bottom-left-radius: 3px;
    border-top-left-radius:3px
}

.pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span {
    border-top-right-radius: 3px;
    border-bottom-right-radius:3px
}


/* _________________________________________

共通

/scrap_trader_auctions/all_index
 - テーブル　【相場検索】落札・流札車両一覧

/trader_auctions/
 - 【出品する】出品車両管理

 _________________________________________ */


 .table-auctions-grid .table-panel:not(:last-child) {
    border-right: 1px solid #e4e4e4;
}

.table-auctions-grid .svg-icon-arrow:after{
    display: none;
}

@media screen and (max-width: 899px){
    .table-auctions-grid .auctions_t_ttl{
        display: inline;
    }
    .table-auctions-grid .auctions_t_ttl:after{
        content: '：';
    }
    .table-auctions-grid .table-auctions-tbody{
        border-bottom: solid 1px #ccc;
        margin-bottom: 10px;
        display: grid;
        /* grid-template-rows: 1fr;
        grid-template-columns: 30% 1fr; */
        grid-template-columns: 1fr;
        padding: 15px;
        grid-gap: 0 5px;
    }
    .table-auctions-grid .table-auctions-tbody .table-panel{
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }
    .table-auctions-grid .svg-icon-arrow:after{
        display: block;
        top: 15px;
    }
    .table-auctions-grid .table-panel:not(:last-child) {
        border: none;
    }
}


/*************自社出品管理のテーブル******************/
.trader_auctions_wrap {
    width: 100%;
}
.trader_auctions_wrap th{
    height:50px;
    background:#7f7f7f;
    border:1px solid #e4e4e4;
    color:#fff;
    }
.trader_auctions_wrap th a{
    color:#fff;
    text-decoration:underline;
    font-size:11px;
    }

.trader_auctions_wrap th a:hover{
    text-decoration:none;
    }


.trader_auctions_wrap td{
    height:76px;
    border:1px solid #e4e4e4;
    padding:10px;
    }

.trader_auctions_car{width:176px;}
.trader_auctions_h{width:111px;}


/* オークションステータスアイコンリニューアル版 */
/* 可能であれば下記に移行していく（2016/11/21） */
.auction_status_icon{
    margin:0 auto;
    display:block;
    font-size:12px;
    font-weight:bold;
    color:#fff;
    width:60px;
    height:50px;
    border-radius: 5px;        /* CSS3草案 */
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 5px;    /* Firefox用 */
}
/* アイコン色 */
.icon_red{
    background:#e28887;
}
.icon_green{
    background:#49bdb1;
}
.icon_purple{
    background:#b49ccd;
}
.icon_yellow{
    background:#cec30f;
}
.icon_gray{
    background:#bcb7b7;
}
.icon_blue{
    background:#3832b2;
}
/* 二行→pt10、一行→pt16 */
.icon_pt16{
    padding-top:16px;
}
.icon_pt10{
    padding-top:10px;
}
/* オークションステータスアイコンリニューアル版 */



.mylist_btn{
    width:60px;
}

/***********************************************

出品車両詳細ページ

**********************************************/
.trader_auctions_view{
    width:1120px;
    }
.trader_auctions .row{ margin:0}
/****************テーブル1*****************/

.view_table_content1{ float:left;}

.view_table_content1 table{
    width:449px;
    }

.trader_auctions_view .view_table_content1 table tr{
    border:1px solid #c5d4d3;
    }

.trader_auctions_view .view_table_content1 table th{
    font-size:13px;
    height:54px;
    width:85px;
    background:#e1f1ef;
    }

.trader_auctions_view .view_table_content1 table td{
    width:139px;
    text-align:left;
    padding-left:12px;
    font-size:11px;
    }

.trader_auctions_view .view_table_content1 table .view_content1_sp1{
    font-size:18px;
    font-weight:bold;
    }



#photo_add{
    font-size:1.2em;
    margin-bottom: 10px;
}
#photo_add .defalut_hidden{
    padding:10px 0px;
    background:#f8f8f8;
    margin-bottom: 10px;
}
#photo_add .col.col-md-3{
    margin-bottom: 15px;
}
#photo_add .photobox{
    width:248px;
    height:168px;
    margin-bottom: 5px;
    border:1px solid #e5e5e5;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

    overflow:hidden;
}
#photo_add .photobox.add_photo_box{
    background-repeat:no-repeat;
    background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
}
#photo_add .photobox.add_photo_box.load_now{
    background-color:#ffffff;
    background-position:50% 50%;
    background-size:63px 63px;
    -moz-background-size:63px 63px;
    -webkit-background-size:63px 63px;
}
#photo_add .photo_delete{
    float: right;
    margin-left: 5px;
}
#photo_add .photobox img{
    width:100%;
    height:auto;
}





/*******他の必須の場合********/

.add_table_1 .add_table2-tr{
    border:1px solid #cb585b;
}

.add_table_1 .add_table2-th{
background: none repeat scroll 0 0 #fdcfd2;
    border: medium none;
    height:54px;
    background:#fdcfd2;
    width:123px;
    border:none;
}



/* _________________________________________ 車両一覧検索結果　ここから */
.auctions_window {
    width: 100%;
    overflow: hidden;
    margin: 0 auto 30px;
    border: 1px solid #e5e5e5;
}

.auctions_window .auctions_window_box {
    width: 100%;
    margin: 0 auto;
    padding: 15px 20px 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.auctions_window .auctions_window_box:nth-child(odd) {
    background: #f5f4f0;
}
.auctions_window .auctions_window_inner{
    display: -ms-grid;
    display: grid;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-grid-columns: 150px 1fr;
    grid-template-columns: 150px 1fr;
    width: 100%;
}
.auctions_window .auctions_window_inner .auctions_window_ttl{
    -ms-grid-column: 1;
        grid-column-start: 1;
    -ms-grid-column-span: 1;
    grid-column-end: 1;
    -ms-grid-row: 1;
        grid-row-start: 1;
    -ms-grid-row-span: 1;
    grid-row-end: 2;
}
.auctions_window .auctions_window_inner .auctions_window_carImg{
    -ms-grid-column: 1;
        grid-column-start: 1;
    -ms-grid-column-span: 1;
    grid-column-end: 2;
    -ms-grid-row: 2 / 4;
        grid-row-start: 2;
    -ms-grid-row-span: 2;
    grid-row-end: 4;
    margin-right: 10px;
}
.auctions_window .auctions_window_inner .auctions_window_carImg a{
    width: 100%;
    height: 110px;
    display: block;
    overflow: hidden;
    position: relative;
}
.auctions_window .auctions_window_inner .auctions_window_carImg img{
height: auto;
    width: 120%;
    max-width: 120%;
    top: 0;
    left: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}

.auctions_window .auctions_window_inner .auctions_window_desc {
    align-self: end;
    -ms-grid-column: 2;
        grid-column-start: 2;
    -ms-grid-column-span: 1;
    grid-column-end: 3;
    -ms-grid-row: 2 / 4;
        grid-row-start: 2;
    -ms-grid-row-span: 2;
    grid-row-end: 4;
}
.auctions_window .auctions_window_inner .auctions_window_carName {
    -ms-grid-column: 2 / 4;
    grid-column-start: 2;
    -ms-grid-column-span: 2;
    grid-column-end: 4;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-span: 1;
    grid-row-end: 2;
}
/* 車名はカード内で最も重要な情報。青いリンク色だと
   「リンクの一つ」に見えて見出しとしての重みが出ず、
   緑基調の画面で彩度の高い青だけが浮いていた。
   黒の太字で見出しにし、押せることは hover で示す。
   カードには別途「詳細を見る」ボタンがある。(#2460) */
.auctions_window .auctions_window_inner .auctions_window_carName .car_name_td,
.auctions_window .auctions_window_inner .auctions_window_carName .car_name_td a{
    color: var(--c-text);
    font-weight: bold;
}
.auctions_window .auctions_window_inner .auctions_window_carName .car_name_td a:hover{
    color: var(--c-hover-text);
    text-decoration: underline;
}
.auctions_window .auctions_window_inner .auctions_window_carName .car_rated:before{
    /* content: ' / '; */
}
.auctions_window .auctions_window_inner .auctions_window_carName .car_rated{
    background-color: #535353;
    color: #fff;
    /* 0.3em はフォントサイズ依存で 3.78px という半端な値になっていた (#2460) */
    border-radius: var(--r-sm);
    /* #2460 padding が上 0.12em / 下 0.1em と非対称で、em 由来の端数
       (上 1.512px / 下 1.26px) により枠の中で文字が上付きに見えていた。
       高さを決めて中央に揃える。 */
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 20px;
    font-size: 11px;
    line-height: 1;
    padding: 0 8px;
    margin-left: 0.6em;
    vertical-align: middle;
}
.auctions_window_end_at {
    text-align: right;
    -ms-grid-column: 4;
        grid-column-start: 4;
    -ms-grid-column-span: 1;
    grid-column-end: 5;
    -ms-grid-row: 2;
        grid-row-start: 2;
    -ms-grid-row-span: 1;
    grid-row-end: 3;
}
/* 入札締切日時 / 引取日時 (#2414) を1行ずつ縦に並べる */
.auctions_window_end_at .auctions_window_end_at_value,
.auctions_window_end_at .auctions_window_trade_schedule {
    display: block;
    white-space: nowrap;
}
.auctions_window .auctions_window_inner .auctions_window_carDesc {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    max-width: 410px;
}

.auctions_window .auctions_window_inner .auctions_window_carDesc dl{
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    font-size: 12px;
}
.auctions_window .auctions_window_inner .auctions_window_carDesc dl:not(:first-child){
    border-left: 1px solid #b5b5b5;
    padding-left: 15px;
}
.auctions_window .auctions_window_inner .auctions_window_carDesc dt,
.auctions_window .auctions_window_inner .auctions_window_carDesc  dd{
    margin-bottom: 4px;
}
.auctions_window .auctions_window_inner .auctions_window_carDesc dt{
    width: 35%;
    min-width: 60px;
}

.auctions_window .auctions_window_inner .auctions_window_carDesc  dd{
    width: 65%;
}
.auctions_window_buyout_price {
    margin-top: auto;
    margin-bottom: -5px;
    -ms-grid-column: 3;
        grid-column-start: 3;
    -ms-grid-column-span: 1;
    grid-column-end: 4;
    -ms-grid-row: 2 / 4;
        grid-row-start: 2;
    -ms-grid-row-span: 2;
    grid-row-end: 4;
}
.auctions_window_buyout_price strong {
    font-size:  28px;
}
.auctions_window .auctions_window_inner .auctions_window_tender_count {
    text-align: right;
    align-self: end;
    -ms-grid-column: 4 / 5;
    grid-column-start: 4;
    -ms-grid-column-span: 1;
    grid-column-end: 5;
    -ms-grid-row: 1;
    grid-row-start: 1;
    -ms-grid-row-span: 1;
    grid-row-end: 2;
}
.auctions_linkArea {
    width: 280px;
    margin-top: auto;
    -ms-grid-column: 4;
        grid-column-start: 4;
    -ms-grid-column-span: 1;
    grid-column-end: 5;
    -ms-grid-row: 3;
        grid-row-start: 3;
    -ms-grid-row-span: 1;
    grid-row-end: 4;
    text-align: right;
}
.auctions_linkArea .flex-box-col{
    justify-content: end;
}
.auctions_linkArea .flex-box-col > div{
    width: 48%;
}
.auctions_linkArea .btn-02:hover{
    background-color:#cc780a;
}
.auctions_linkArea .btn-02.delete_watch_list{
    background-color: var(--c-green-tint);
    color: var(--c-green-dark);
}
.auctions_linkArea .btn-02.delete_watch_list:hover{
    background-color: #e4f1db;
}
.auctions_linkArea a.watchlist_button {
    font-size: 11px;
    line-height: 1.1em
}
@media screen and (max-width: 899px){
    .auctions_window{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        width: calc(100% + 20px);
        margin-left: -10px;
        background-color: #f5f4f0;
        border:none;
        padding: 10px;
    }
    .auctions_window .auctions_window_box{
        /* width: calc(50% - 3px); */
        padding:10px;
        background-color: #fff;
        margin: initial;
        margin-bottom: 10px;
        position: relative;
    }
    .auctions_window .auctions_window_box:nth-child(odd){
        background-color: #fff;
    }
    .auctions_window .auctions_window_inner{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        /* -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column; */
        height: 100%;
        font-size: 12px;
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
    }
    .auctions_window .auctions_window_inner .auctions_window_ttl{
        order:3;
        width: inherit;
        margin-bottom: 3px;
    }
    /* .auctions_window .auctions_window_inner .auctions_window_ttl .auction_id_td{
        display: inline-block;
    } */
    .auctions_window .auctions_window_inner .auctions_window_carImg{
        order:1;
        margin-right: 0;
        width: 50%;
        padding-top: 50px;
    }
    .auctions_window .auctions_window_inner .auctions_window_desc{
        order:2;
        width: 50%;
    }
    /* .auctions_window .auctions_window_inner .auctions_window_desc .auctions_window_carName{
        font-weight: bold;
        color: #3388cc;
        margin-bottom: 0;
    } */

    .auctions_window .auctions_window_inner .auctions_window_carDesc {
        display:block;
        max-width: 410px;
    }
    .auctions_window .auctions_window_inner .auctions_window_carDesc dl{
        width: inherit;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        font-size: 12px;
    }
    .auctions_window .auctions_window_inner .auctions_window_carDesc dl:not(:first-child){
        border-left: none;
        padding-left: 0px;
    }
    .auctions_window .auctions_window_inner .auctions_window_carDesc dt,
    .auctions_window .auctions_window_inner .auctions_window_carDesc dd{
        margin-bottom: 3px;
    }
    .auctions_window .auctions_window_inner .auctions_window_carDesc dt{
        width: 45%;
        min-width: 70px;
        background-color: #dfdfdf;
        padding-left: 5px;
    }
    .auctions_window .auctions_window_inner .auctions_window_carDesc  dd{
        width: calc(55% - 5px);
        margin-left: 5px;
    }

    /* #2460 SP は 写真 -> 諸元表 -> 車名 の順で、何の車か分からないまま
       型式や排気量を読むことになっていた。車名を写真の直下に上げる。 */
    .auctions_window .auctions_window_inner .auctions_window_carName{
        order: 2;
        margin-bottom: 0;
    }
    .auctions_window .auctions_window_inner .auctions_window_desc{
        order: 3;
    }
    .auctions_window .auctions_window_inner .auctions_window_carName .icon_popular{
        position: absolute;
        top: 0;
        left: 0;
        font-weight: normal;
    }
    .auctions_window .auctions_window_inner .auctions_window_carName .car_rated{
        /* display: block; */
    }
    .auctions_window .auctions_window_inner .auctions_window_carName .car_rated:before{
        display: none;
    }
    .auctions_window .auctions_window_inner .auctions_window_buyout_price{
        order:5;
        width: inherit;
    }
    .auctions_window .auctions_window_inner .auctions_window_buyout_price strong{
        font-size: initial;
    }
    .auctions_window .auctions_window_inner .auctions_linkArea{
        order:8;
    }
    .auctions_window .auctions_window_inner .auctions_linkArea .btn-01{
        width: 100%;
    }
    .auctions_window .auctions_window_inner .auctions_window_carImg img{
        width: 100%;
        max-width: initial;
    }
    .auctions_linkArea{
        margin-top: initial;
        width: 100%;
    }
    .auctions_linkArea .flex-box-col > div{
        width: 100%;
    }
    .auctions_linkArea .btn-02{
        padding: 10px;
        width: 100%;
    }
    .auctions_linkArea .btn-02:hover{
        background-color:#fe9201;
    }
    .auctions_linkArea .btn-02.delete_watch_list:hover{
        background-color:#ddd;
    }
    .auctions_window .auctions_window_inner .auctions_window_tender_count{
        order:7;

    }
    .auctions_window .auctions_window_inner .auctions_window_end_at{
        order:6;
        align-self: center;
        /* 入札締切日時 / 引取日時 (#2414) を左寄せの縦並びにする */
        text-align: left;
    }
}

/* _________________________________________ 車両一覧検索結果　ここまで */


/* _________________________________________ 出品車両編集画面 */
.exhibition_editArea{
    max-width: 853px;
    width: calc(100% - 10px);
    margin: 0 auto 30px;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding:20px 15px 0;
}
.exhibition_editArea_ttl{
    font-weight: bold;
    margin-bottom: 20px;
    padding: 0px 6px 0px;
    border-left: 5px solid #333333;
    line-height: 1.4;
    font-size: 18px;
}
.exhibition_editArea_tr{
    margin-bottom: 20px;
}
.exhibition_editArea_th{
    width: 240px;
    font-size: 14px;
}
.exhibition_editArea_td{
    width: 100%;
}
.exhibition_editArea_td .flex-box-col{
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.exhibition_editArea .btnArea .flex-box-col{
    max-width: 500px;
    margin: 0 auto;
}
.exhibition_editArea .btnArea input.grandient-green{
    font-weight: bold;
    text-shadow:0 1px #0000005c;
    font-size: 18px;
}
@media screen and (max-width: 899px){
    .exhibition_editArea_tr{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .exhibition_editArea_td .col-xs-2{
        width: 50%;
    }
    .exhibition_editArea_td .col-xs-4{
        width: 50%;
    }
    .exhibition_editArea .btnArea .flex-box-col{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}


.auction_conditions_div {
    width: 558px;
    float: left;
}


.auction_trade_div {
    width: 558px;
    float: left;
}

.auction_price_div {
    width: 450px;
    float: right;
}


.caution_contents {
    clear: both;
    padding-top: 10px;
    padding-bottom: 20px;
}
#bill_breakdown .billing_contents_text {
    font-size: 12px;
}
#bill_breakdown .billing_contents {
    line-height: 1.1;
    padding-right :0;
}



/* _________________________________________ 検索フォーム - エリア・条件を変更する */

.form_add .radio_label {
    position: relative;
    display: inline-block;
    background: #FFFFFF url(../img/radio_off.png) no-repeat 15px 10px;
    margin-right: 0;
    padding: 10px 0 10px 40px;
    width: calc(100% / 3);
    box-shadow: 0 0 0 1px #c3c3c3;
    color: #888888;
    cursor: pointer;
    display: flex;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    float: left;
}
.form_add .radio_label_s{
    font-size: 0.8em;
    width: calc(100% / 5);
    background: #FFFFFF url(../img/radio_off.png) no-repeat 10px 10px;
    padding: 10px 0 10px 32px;
}
.form_add .radio_label:first-of-type {
    border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.form_add .radio_label:last-of-type {
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.form_add .radio_label input {
    position: absolute;
    left: -9999px;
    top: 0;
}
.form_add .radio_label.is-check {
    background-image: url(../img/radio_on.png);
    background-color: #E2F3FF;
    box-shadow: 0 0 0 1px #2294E3;
    font-weight: 700;
    color: #000000;
    z-index: 1;
}
@media screen and (max-width: 899px){
    .search_table .search_value .radio_label:not(:last-of-type){
        margin-right: 0;
        margin-bottom: 5px;
    }
    .radio_label{
        margin-right: 0;
        border-radius: 3px;
    }
    .form_add .radio_label,
    .form_add .radio_label:first-of-type,
    .form_add .radio_label:last-of-type{
        border-radius: 0;
    }
    .form_add .radio_label_s{
        width: calc(100% / 3);
        background-position: 8px 10px;
        padding-left: 26px;
    }
}

/* _________________________________________ 検索フォーム - メーカー車種など入力テーブル */

.t_width{
    max-width:684px;
    width: 100%;
    margin:0 auto;
    margin-bottom:16px;
}

.search_table {
    table-layout: fixed;
    font-size: 13px;
    margin-bottom: 15px;
}
.search_table tr{
    border:1px solid #cdcfcf;
}
.search_table .form-control-short{
    max-width: 160px;
    width: 100%;
}
.search_table .search_value{
    padding: 10px;
    vertical-align: middle;
}
.search_table .search_value .input.select{
    width: 100%;
}
.search_table .search_value.flex-box-col{
    width: 100%;
    max-width: 380px;
    align-items: center;
}
.search_table .search_value.flex-box-col .form-control-element{
    margin:0 2%;
}
.search_table .search_title{
    background-color: #ececec;
    width: 95px;
    text-align: center;
}

@media screen and (max-width: 899px){
    .form-control{
        font-size: 16px;
    }
    .search_table{
        background-color: rgb(245 245 245);
        padding: 15px 10px;
        display: block;
    }
    .search_table tbody {
        display: block;
        width: 100%;
    }
    .search_table tr{
        border: none;
        width: 100%;
        display: block;
    }
    .search_table .table-col{
        width: 100%;
        max-width: initial;
        display: block;
    }
    .search_table .search_title,
    .search_table .search_value{
        display: block;
        width: 100%;
        text-align: left;
    }
    .search_table .search_title{
        background:none;
        padding: 0;
        margin-bottom: 3px;
        font-weight: bold;
    }
    .search_table .search_value{
        max-width: 100%;
        padding: 0;
        margin-bottom: 15px;
    }
    .search_table .search_value.flex-box-col{
        display: flex;
    }
    .search_table .form-control-short{
        width: 100%;
    }
}

/* _________________________________________ 検索フォーム - 都道府県選択パネル/横並びテーブル */

.pref_displayArea{
    border:1px solid #cdcfcf;
    margin-bottom: 20px;
}
.pref_displayArea .flex-box-col{
    align-items: flex-start;
}
.pref_displayArea .flex-box-col #pref_display
.pref_displayArea .flex-box-col .btn{
    margin-left: 20px;
    padding: 15px 10px;
}
.pref_displayArea_ttl,
.pref_displayArea_desc{
    padding: 10px;
    width: 100%;
}
.pref_displayArea_ttl{
    border-bottom:1px solid #cdcfcf;
    background-color: #ececec;
    text-align: center;
}
.pref_displayArea_desc{
}

.pref_displayArea .btn{
    background-color: #fff;
    border-color: #ccc;
    width: 100%;
    max-width: 300px;
    padding: 10px;
    margin-left: 20px;
}
.area_t_width{
    max-width:1000px;
    margin:0 auto;
    margin-bottom: 10px;
    width: calc(100% - 20px);
}
.panel {
}
.panel-body{
}
.panel-body .col-md-offset-3 {
    margin:0;
}
.panel-default {
    border-color:#ddd;
    padding-bottom: 10px;
}
.panel .panel-ttl,
.panel .panel-desc{
    border : 1px solid #DDDDDD;
    padding: 10px;
}
.panel .panel-ttl{
    background: #f6f6f6;
    font-weight : normal;
    width: 270px;
}
.panel .panel-ttl a{
    font-weight: normal;
}
.panel .panel-desc{
    font-weight: normal;
}
.panel-desc label{
    margin-right: 25px;
}
@media screen and (max-width: 899px){
    .area_t_width{
        width: 100%;
    }
    .pref_displayArea .flex-box-col{
        flex-direction: column;
    }
    .panel tr:not(:last-of-type),
    .panel tr:not(:last-of-type) .panel-ttl{
        border-bottom: none;
    }
    .panel .panel-ttl,
    .panel .panel-desc{
        display: block;
        width: 100%;
        border-right: none;
        border-left: none;
    }
    .panel .panel-ttl{
        padding: 5px 10px;
    }
    .panel .panel-desc{
        border-top:none;
        border-bottom: none;
        padding: 10px 0;
    }
    .panel tr:last-of-type .panel-desc{

        padding-bottom: 0;
    }
    .panel .panel-desc .input.select{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0px 10px 0;
    }
    .panel .panel-desc label {
        border: 1px solid #ddd;
        width: calc(50% - 5px);
        display: inline-block;
        padding: 10px;
        border-radius: 3px;
        background: #f6f6f6;
        margin-right: 0;
    }
    .panel tr:not(:last-of-type) .panel-desc label{
        margin-bottom: 6px;
    }
    .pref_displayArea .btn{
        margin: 10px auto 0;
    }
}

/* _________________________________________

共通

/scrap_trader_auctions/all_index
 - テーブル　【相場検索】落札・流札車両一覧

/scrap_trader_auctions/mylist/
 - テーブル【落札・受注管理】車両一覧

/trader_auctions/
 - 【出品する】出品車両管理
 _________________________________________ */

.auctions_day{width:81px;}

.auctions_no{width:94px;}

.auctions_tel{width:110px;}

.auctions_ba{width:142px;}

.auctions_nen{width:59px;}

.auctions_car{width:144px;}

.auctions_kyo{width:87px;}

.auctions_gai{width:64px;}

.auctions_sya{width:71px;}

.auctions_jisou{width:66px;}

.auctions_h_day{width:89px;}

.auctions_r{width:76px;}

.auctions_h{width:138px;}
.auctions_h.tender_btn_h{width:64px;}

.table-auctions {
    border: 1px solid #e4e4e4;
    font-size: 12px;
    margin-bottom: 30px;
}
.table-panel .btn.sp{
    display: none;
}
.table-auctions .table-auctions-tbody:not(:last-child){
    border-bottom: 1px solid #e4e4e4
}

.table-auctions .table-panel:not(.sp){
    /* width: 100%; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    word-wrap: break-word;
    word-break: break-all;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    text-align: center;
    align-items: center;
}

.table-auctions .table-panel:not(:last-child){
    border-right: 1px solid #e4e4e4;
}
.table-auctions-thead,
.table-auctions-tbody{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
            align-items: stretch;
}

.table-auctions-thead .table-panel{
    background-color: #7f7f7f;
    border-color: #fff;
    color: #fff;
    padding: 8px 2px;
    font-size: 11px;
    text-align: center;
}
.table-auctions-thead .table-panel a{
    color: #fff;
    text-decoration: underline;
}

.table-auctions-tbody{
    color: #333;
}

.table-auctions-tbody .table-panel{
    padding: 5px;
}
.table-auctions-tbody .table-panel .table-panel-img{
    width: 100%;
    max-width: 100%;
    height: 100%;
}
.panel-link{
    display:inline-block;
}

.s_n,
.s_e,
.s_e2,
.s_e3,
.s_e4,
.s_s{
    padding: 9px 0;
	margin:0 auto;
	display:block;
	width:60px;
    color: #fff;
    width: 60px;
    line-height: 1.4;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}
.s_n{
	background:#49bdb1;
}
.s_e{
    background: #e28887;
}
.s_e2{
	background:#b49ccb;
}
.s_e3{
	background:#e28887;
}
.s_e4{
	background:#b49ccb;
}
.s_s{
	background:#bcb7b7;
}
.status_num_1{
	background: #3832b2;
}
.status_num_3{
	background: #cec30f;
}
.status_num_scrap{
	background:#49bdb1;
}



@media screen and (max-width: 899px){
    .auctions_day{width:81px;}

    .auctions_no{width:94px;}

    .auctions_tel{width:110px;}

    .auctions_ba{width:142px;}

    .auctions_nen{width:59px;}

    .auctions_car{width:144px;}

    .auctions_kyo{width:87px;}

    .auctions_gai{width:64px;}

    .auctions_sya{width:71px;}

    .auctions_jisou{width:66px;}

    .auctions_h_day{width:89px;}

    .auctions_r{width:76px;}

    .auctions_h{width:138px;}
    .auctions_h.tender_btn_h{width:64px;}

    .table-auctions .table-panel.pc{
        display: none;
    }
    .table-panel .btn.sp{
        display: block;
        /* white-space: pre-line; */
        word-break: break-all;
    }
    .auctions .content_tt{
        background: none;
        border-bottom: none;
        margin: 0;
        padding: 0;
    }
    .table-auctions{
        border:none;
        background-color: #f6f6f6;
        width: calc(100% + 20px);
        position: relative;
        left: -10px;
    }
    .table-auctions-thead{
        display: none;
    }
    .table-auctions-tbody .table-panel{
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        padding:0;
        text-align: left;
        font-size: 12px;
    }
    .auctions_t_desc{
        display: block;
    }
    .auctions_t_desc br,
    .table-panel br{
        display: none;
    }
    .table-panel-wrap{
        width: 100%;
        border: solid 1px #a0a0a0;
        border-radius: 4px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        margin-bottom: 6px;
        padding: 8px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .table-panel-wrap .panel-wrap-item{
        max-width: 300px;
        width: 100%;
    }
    .table-panel-wrap .btn{
        /* width: 100%; */
        /* max-width: 100%; */
        padding: 15px 5px;
        font-size: 1.4em;
        border-radius: 8px;
        font-weight: bold;
        /* -webkit-box-shadow: 1px 2px 0px 0px #01010140; */
                /* box-shadow: 1px 2px 0px 0px #01010140; */
        margin-bottom: 5px;
        line-height: 1.2;
    }
    .table-auctions .table-panel:not(.sp){
    -webkit-box-pack: initial;
        -ms-flex-pack: initial;
            justify-content: initial;
    -webkit-box-orient: initial;
    -webkit-box-direction: initial;
        -ms-flex-direction: initial;
            flex-direction: initial;
    -webkit-box-align:initial;
        -ms-flex-align:initial;
            align-items:initial;
    }
    .table-auctions .table-panel:not(:last-child){
        border-right:none
    }
    .s_n,
	.s_e,
	.s_e2,
	.s_e3,
	.s_e4,
	.s_s,
	.status_num_1,
	.status_num_3,
	.status_num_scrap{
		width: initial;
	    font-weight: normal;
	    padding: 0;
	    border-radius: 0;
	    background: none;
	    color: #333;
	    margin: 0;
	}
	.s_n{
		color:#49bdb1;
	}
	.s_e{
	    color: #e28887;
	}
	.s_e2{
		color:#b49ccb;
	}
	.s_e3{
		color:#e28887;
	}
	.s_e4{
		color:#b49ccb;
	}
	.s_s{
		color:#bcb7b7;
	}
	.status_num_1{
		color: #3832b2;
	}
	.status_num_3{
		color: #cec30f;
	}
	.status_num_scrap{
		color:#49bdb1;
	}
}


/* _________________________________________


/scrap_trader_auctions/all_index
 - テーブル　【相場検索】落札・流札車両一覧

  _________________________________________ */

/*  ページ上部バナー　ここから*/
.flow_bnrArea{
    max-width: var(--content-w);
    margin: 0 auto 40px;
}
/* バナー内のリンクは下線で示す (#2407) */
.flow_bnrArea a{
    text-decoration: underline;
}
/*  ページ上部バナー　ここまで*/

.table-allindex .table-auctions-tbody:hover{
    background-color: #ffe55c2e;
    opacity: 0.8;
}
.table-allindex .table-panel:not(.sp){
    width: calc(100% / 12);
}
.table-allindex .table-panel.end_at,
.table-allindex .table-panel.trade_date {
    width: 85px;
}
.table-allindex .table-panel.auction_no,
.table-allindex .table-panel.mileage,
.table-allindex .table-panel.runnable
{
    width: 75px;
}
.table-allindex .table-panel.address,
.table-allindex .table-panel.car_info,
.table-allindex .table-panel.color
{
    width: 120px;
}

.table-allindex .successful_amount .amount_for_order {
    font-weight: bold;
    font-size: 1.1em;
}

@media screen and (max-width: 899px){
    .table-allindex .table-panel:not(.sp){
        width: 100%;
    }
    .table-allindex .table-auctions-tbody:hover{
        background-color: initial;
        opacity: 1;
    }
    .table-allindex .table-panel.photo {
        -webkit-box-ordinal-group: 1;
            -ms-flex-order: 0;
                order: 0;
        -ms-grid-row: 1;
        -ms-grid-row-span: 5;
        grid-row: 1 / 6;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1/2;
    }
    .table-allindex .table-panel.mpdel_year {
        -webkit-box-ordinal-group: 1;
            -ms-flex-order: 0;
                order: 0;
        -ms-grid-row: 1;
        grid-row: 1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3;
    }
    .table-allindex .table-panel.mileage {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
        -ms-grid-row: 2;
        grid-row: 2;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3;
    }
    .table-allindex .table-panel.color {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
        -ms-grid-row: 3;
        grid-row: 3;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3;
    }
    .table-allindex .table-panel.fuel {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
        -ms-grid-row: 3;
        grid-row: 3;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3;
    }
    .table-allindex .table-panel.runnable {
        -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
                order: 3;
        -ms-grid-row: 4;
        grid-row: 4;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3;
    }
    .table-allindex .table-panel.address {
        -webkit-box-ordinal-group: 5;
            -ms-flex-order: 4;
                order: 4;
        -ms-grid-row: 5;
        grid-row: 5;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3;
    }
    .table-allindex .table-panel.auctions_no {
        -webkit-box-ordinal-group: 6;
            -ms-flex-order: 5;
                order: 5;
        -ms-grid-row: 6;
        grid-row: 6;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
    }
    .table-allindex .table-panel.car_info {
        -webkit-box-ordinal-group: 7;
            -ms-flex-order: 6;
                order: 6;
        -ms-grid-row: 7;
        grid-row: 7;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
    }
    .table-allindex .table-panel.end_at {
        -webkit-box-ordinal-group: 8;
            -ms-flex-order: 7;
                order: 7;
        -ms-grid-row: 8;
        grid-row: 8;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
    }
    .table-allindex .table-panel.trade_date {
        -webkit-box-ordinal-group: 9;
            -ms-flex-order: 8;
                order: 8;
        -ms-grid-row: 9;
        grid-row: 9;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
    }
    .table-allindex .table-panel.start_price {
        -webkit-box-ordinal-group: 10;
            -ms-flex-order: 9;
                order: 9;
        -ms-grid-row: 10;
        grid-row: 10;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
    }
    .table-allindex .table-panel.successful_amount {
        -webkit-box-ordinal-group: 11;
            -ms-flex-order: 10;
                order: 10;
        -ms-grid-row: 11;
        grid-row: 11;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
    }
    .table-allindex .table-panel.photo img{
        padding-right: 10px;
        min-width: 100%;
    }
    .table-allindex .table-auctions-tbody .table-panel.mpdel_year,
    .table-allindex .table-auctions-tbody .table-panel.mileage,
    .table-allindex .table-auctions-tbody .table-panel.color,
    .table-allindex .table-auctions-tbody .table-panel.fuel,
    .table-allindex .table-auctions-tbody .table-panel.runnable
    {
        flex-direction: column;
        align-items: flex-start;
    }
    .table-allindex .successful_amount .amount_for_order {
        font-size: 1.4em;
        color: red;
        margin-left: 10px;
    }
    .table-allindex .table-auctions-tbody .table-panel.car_info {
        font-size: 1.2em;
        font-weight: bold;
        text-align: left;
    }
}

/* _________________________________________


/scrap_trader_auctions/mylist/
 - テーブル【落札・受注管理】車両一覧

 _________________________________________ */
.table-mylist .table-panel:not(.sp){
    width: 100%;
}

.table-mylist .table-panel.end_at,
.table-mylist .table-panel.auction_id,
.table-mylist .table-panel.confirm,
.table-mylist .table-panel.prior_notice,
.table-mylist .table-panel.payment,
.table-mylist .table-panel.trade_schedule,
.table-mylist .table-panel.trade_date,
.table-mylist .table-panel.trade_finish,
.table-mylist .table-panel.successful_amount
{
    width: calc(100% / 10);
}

.table-mylist .table-panel.car_info,
.table-mylist .table-panel.trade_info,
.table-mylist .table-panel.document
{
    width: 150px;
}

.table-mylist .table-panel.yard_info {
    width: 200px;
}


.table-mylist .bid_td p em{
    font-weight: bold;
}
.table-mylist .table-panel-wrap {
    width: 100%;
}
.table-mylist .table-panel-wrap .panel-wrap-item {
    width: 100%;
}
.table-mylist .table-panel-wrap .panel-wrap-item .btn {
    width: 90%;
    max-width: 90%;
}

.table-mylist .successful_amount p em{
    font-weight: bold;
}

#payment_box,
#trade_reservation_box,
#trade_finish_box {
    margin-top: 28px;
}
#payment_box p,
#trade_reservation_box p,
#trade_finish_box p {
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 10px;
}
#payment_box .form-control,
#trade_reservation_box .form-control,
#trade_finish_box .form-control {
    max-width: 210px;
    margin: 0 auto 20px;
}
#payment_inner,
#trade_reservation_inner,
#trade_finish_inner {
    justify-content: center;
    align-items: center;
}
.payment_confirm_btn,
.trade_reservation_confirm_btn,
.trade_finish_confirm_btn {
    background: #279a27;
    width:auto !important;
}
@media screen and (min-width: 900px){
    .payment_confirm_btn:hover,
    .trade_reservation_confirm_btn:hover,
    .trade_finish_confirm_btn:hover {
        background: #217a21;
    }
}

@media screen and (max-width: 899px){
    .table-mylist .table-auctions-tbody .table-panel {
        width: 100%;
    }

    .table-mylist .table-auctions-tbody{
        margin-bottom: 10px;
        padding: 15px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .table-mylist .table-panel.pc{
        display: none;
    }
    .table-mylist .auctions_t_ttl{
        background-color: #333;
        color: #fff;
        display: inline-block;
        padding: 2px;
        min-width: 70px;
        width: 70px;
        text-align: center;
        margin-right: 8px;
    }
    .table-mylist .auctions_t_ttl_2{
        font-weight: bold;
        width: 110px;
        line-height: 2em;
        margin-left: 10px;
        text-align: left;
    }
    .table-mylist .success_price {
        font-size: 1.4em;
    }
    .table-mylist .table-panel,
    .table-mylist .table-panel.sp{
        margin-bottom: 7px;
    }

    .table-mylist .table-panel-wrap .panel-wrap-item .btn {
        width: 100%;
        max-width: 100%;
    }
    .table-mylist .successful_amount p{
        font-weight: bold;
    }
    .table-mylist .successful_amount p em{
        font-size: 1.4rem;
    }
    .table-mylist .list_car_name_s{
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .table-mylist .mylist_attend_label{
        color: #f76a6a;
        width: 200px;
        padding: 2%;
    }
    .table-mylist .table-panel-wrap .panel-wrap-item {
        width: 70%;
    }
    .table-mylist .mylist_photo_box {
        max-width: 150px;
        width: 100%;
        margin-right: 10px;
    }

    .table-mylist .auction_id{
        -webkit-box-ordinal-group:1;
            -ms-flex-order:0;
                order:0;
    }
    .table-mylist .end_at{
        -webkit-box-ordinal-group:2;
            -ms-flex-order:1;
                order:1;
    }
    .table-mylist .trade_name{
        -webkit-box-ordinal-group:3;
            -ms-flex-order:2;
                order:2;
    }
    .table-mylist .trade_address{
        -webkit-box-ordinal-group:4;
            -ms-flex-order:3;
                order:3;
    }
    .table-mylist .trade_tel{
        -webkit-box-ordinal-group:5;
            -ms-flex-order:4;
                order:4;
    }
    .table-mylist .trade_date{
        -webkit-box-ordinal-group:6;
            -ms-flex-order:5;
                order:5;
    }
    .table-mylist .car_info{
        -webkit-box-ordinal-group:7;
            -ms-flex-order:6;
                order:6;
    }
    .table-mylist .successful_amount{
        -webkit-box-ordinal-group:8;
            -ms-flex-order:7;
                order:7;
    }
    .table-mylist .confirm{
        -webkit-box-ordinal-group:9;
            -ms-flex-order:8;
                order:8;
    }
    .table-mylist .payment{
        -webkit-box-ordinal-group: 10;
            -ms-flex-order: 9;
                order: 9;
    }
    .table-mylist .prior_notice,
    .table-mylist .trade_schedule{
        -webkit-box-ordinal-group:11;
            -ms-flex-order:10;
                order:10;
    }
    .table-mylist .trade_finish{
        -webkit-box-ordinal-group: 12;
            -ms-flex-order: 11;
                order: 11;
    }
    .table-mylist .document{
        -webkit-box-ordinal-group: 13;
            -ms-flex-order: 12;
                order: 12;
    }

    .table-mylist .mylist_photo_box + div{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
    }
    .table-mylist .mylist_photo_box + div br{
        display: block;
    }
    .table-mylist .mylist_photo_box + div .bottom-button{
        display: block;
        margin: 0 auto;
    }
    .table-mylist .table-panel.panel-short{
        width: 100%;
    }
    .table-mylist .table-panel.list_car_name_s .btn-primary{
        width: 100px;
    }

    .has-mitsumori .btn-success,
    .has-mitsumori .btn_exhibit_add {
        width: 100%;
    }
}

/* _________________________________________


/trader_auctions/
 - 【出品する】出品車両管理

 _________________________________________ */

.table-bidding_up .table-panel.sp{
    display: none;
}
.table-bidding_up .table-panel.panel-short{
    width: 70px;
}
.table-bidding_up .table-panel.list_car_name_s .btn-primary{
    width: 100px;
}
.table-bidding_up .table-panel{
    width: 100%;
}

.table-bidding_up .table-auctions-thead .auctions_jisou,
.table-bidding_up .table-auctions-tbody .auction_id_td {
    width: 70px;
}
.table-bidding_up .table-auctions-thead .trader_auctions_h,
.table-bidding_up .table-auctions-thead .auctions_day,
.table-bidding_up .table-auctions-thead .auctions_nen,
.table-bidding_up .table-auctions-thead .auctions_sya,
.table-bidding_up .table-auctions-thead .auctions_car,
.table-bidding_up .table-auctions-tbody .panel-state,
.table-bidding_up .table-auctions-tbody .panel-modelYear,
.table-bidding_up .table-auctions-tbody .panel-mileage,
.table-bidding_up .table-auctions-tbody .panel-unnable,
.table-bidding_up .table-auctions-tbody .panel-start_price,
.table-bidding_up .table-auctions-tbody .trader_auctions_h_font,
.table-bidding_up .table-auctions-tbody .panel-admin,
.table-bidding_up .table-auctions-tbody .table-panel.pc {
    width: 90px;
}
.table-bidding_up .table-auctions-thead .trader_auctions_car,
.table-bidding_up .table-auctions-thead .auctions_kyo,
.table-bidding_up .table-auctions-tbody .panel-tradeDate,
.table-bidding_up .table-auctions-tbody .list_ad_name_s {
    width: 140px;
}


@media screen and (max-width: 899px){
    .table-bidding_up .table-panel.panel-carPhoto{
        display: block;
    }
    .table-bidding_up .panel-carPhoto{
        -webkit-box-ordinal-group:1;
            -ms-flex-order:0;
                order:0;
        -ms-grid-row: 1;
        grid-row: 1/5;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1/2;
        /* -webkit-box-ordinal-group:5;
            -ms-flex-order:4;
                order:4;
        -ms-grid-row: 7;
        -ms-grid-row-span: 5;
        grid-row: 7 / 12;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1/2; */
    }
    .table-bidding_up .panel-state{
        -webkit-box-ordinal-group:1;
            -ms-flex-order:0;
                order:0;
        -ms-grid-row: 1;
        grid-row: 1;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3;
        /* -webkit-box-ordinal-group:1;
            -ms-flex-order:0;
                order:0;
        -ms-grid-row: 1;
        grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3; */
    }

    .table-bidding_up .auction_id_td {
        -webkit-box-ordinal-group:5;
            -ms-flex-order:4;
                order:4;
        -ms-grid-row: 5;
        grid-row: 5;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1/2;
    }
    .table-bidding_up .panel-tradeDate{
        -webkit-box-ordinal-group:8;
            -ms-flex-order:7;
                order:7;
        -ms-grid-row: 8;
        grid-row: 8;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
        /* -webkit-box-ordinal-group:3;
            -ms-flex-order:2;
                order:2;
        -ms-grid-row: 3;
        grid-row: 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3; */
    }
    .table-bidding_up .panel-start_price{
        -webkit-box-ordinal-group:7;
            -ms-flex-order:6;
                order:6;
        -ms-grid-row: 7;
        grid-row: 7;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
        /* -webkit-box-ordinal-group:4;
            -ms-flex-order:3;
                order:3;
        -ms-grid-row: 4;
        grid-row: 4;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3; */
    }
    .table-bidding_up .list_ad_name_s{
        -webkit-box-ordinal-group:6;
            -ms-flex-order:5;
                order:5;
        -ms-grid-row: 6;
        grid-row: 6;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;

        font-weight: bold;
        /* -webkit-box-ordinal-group:6;
            -ms-flex-order:5;
                order:5;
        -ms-grid-row: 7;
        grid-row: 7;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3; */
    }
    .table-bidding_up .list_ad_name_s > .auctions_t_ttl{
        display: none;
    }
    .table-bidding_up .panel-modelYear{
        -webkit-box-ordinal-group:2;
            -ms-flex-order:1;
                order:1;
        -ms-grid-row: 2;
        grid-row: 2;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3;
        /* -webkit-box-ordinal-group:7;
            -ms-flex-order:6;
                order:6;
        -ms-grid-row: 8;
        grid-row: 8;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3; */
    }
    .table-bidding_up .panel-mileage{
        -webkit-box-ordinal-group:3;
            -ms-flex-order:2;
                order:2;
        -ms-grid-row: 3;
        grid-row: 3;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3;
        /* -webkit-box-ordinal-group:8;
            -ms-flex-order:7;
                order:7;
        -ms-grid-row: 9;
        grid-row: 9;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3; */
    }
    .table-bidding_up .panel-unnable{
        -webkit-box-ordinal-group:4;
            -ms-flex-order:3;
                order:3;
        -ms-grid-row: 4;
        grid-row: 4;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3;
        /* -webkit-box-ordinal-group:9;
            -ms-flex-order:8;
                order:8;
        -ms-grid-row: 10;
        grid-row: 10;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3; */
    }
    .table-bidding_up .trader_auctions_h_font{
        -webkit-box-ordinal-group:9;
            -ms-flex-order:8;
                order:8;
        -ms-grid-row: 9;
        grid-row: 9;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
        /* -webkit-box-ordinal-group:10;
            -ms-flex-order:9;
                order:9;
        -ms-grid-row: 12;
        grid-row: 12;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3; */
    }
    .table-bidding_up .panel-admin{
        -webkit-box-ordinal-group:11;
            -ms-flex-order:10;
                order:10;
        -ms-grid-row: 13;
        grid-row: 13;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
    }

    .table-bidding_up .table-auctions-tbody .panel-admin{
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    .table-bidding_up .table-auctions-tbody .panel-admin a:not(:last-child) {
        margin-right: 10px;
    }
    .table-bidding_up .table-auctions-tbody .panel-admin a {
        width: 100%;
    }
    .table-bidding_up .trader_auctions_h_font{
        /* font-weight: bold;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important; */
    }
    .table-bidding_up .trader_auctions_h_font .auctions_t_desc{
        border: 1px solid #ddd;
        border-right: none;
        border-left: none;
        background-color: #ececec;
        display: block;
        width: 100%;
        padding: 5px 6px;
        text-align: left;
        margin-bottom: 15px;
    }


    .table-bidding_up .table-auctions-tbody .panel-mileage,
    .table-bidding_up .table-auctions-tbody .trader_auctions_h_font {
        flex-direction: column;
        align-items: flex-start;
    }
    .table-bidding_up .table-auctions-tbody .panel-start_price {
        align-items: flex-end;
    }
    .table-bidding_up .panel-start_price .start_price {
        font-weight: bold;
        font-size: 1.5em;
        color: red;
        margin-bottom: -5px;
    }
    .table-bidding_up .table-auctions-tbody .list_ad_name_s {
        font-size: 1.1em;
    }

    .table-bidding_up .table-auctions-thead .trader_auctions_car,
    .table-bidding_up .table-auctions-thead .auctions_kyo,
    .table-bidding_up .table-auctions-thead .auctions_jisou,
    .table-bidding_up .table-auctions-thead .trader_auctions_h,
    .table-bidding_up .table-auctions-thead .auctions_day,
    .table-bidding_up .table-auctions-thead .auctions_nen,
    .table-bidding_up .table-auctions-thead .auctions_sya,
    .table-bidding_up .table-auctions-thead .auctions_car,
    .table-bidding_up .table-auctions-tbody .auction_id_td,
    .table-bidding_up .table-auctions-tbody .panel-state,
    .table-bidding_up .table-auctions-tbody .panel-modelYear,
    .table-bidding_up .table-auctions-tbody .panel-mileage,
    .table-bidding_up .table-auctions-tbody .panel-unnable,
    .table-bidding_up .table-auctions-tbody .panel-start_price,
    .table-bidding_up .table-auctions-tbody .trader_auctions_h_font,
    .table-bidding_up .table-auctions-tbody .panel-admin,
    .table-bidding_up .table-auctions-tbody .table-panel.pc,
    .table-bidding_up .table-auctions-tbody .panel-tradeDate,
    .table-bidding_up .table-auctions-tbody .list_ad_name_s  {
        width: 100%;
    }

}




/* _________________________________________


/receipt/
 - 【落札管理】支払請求管理

 _________________________________________ */

.table-receipt .table-auctions .table-panel {
    width: calc(100% / 10);
}

.table-receipt .table-auctions .table-panel.end_at,
.table-receipt .table-auctions .table-panel.trade_date,
.table-receipt .table-auctions .table-panel.auction_id
{
    width: 90px;
}
.table-receipt .table-auctions .table-panel.detail_statement
{
    width: 50px;
}
.table-receipt .table-auctions .table-panel.trade_name,
.table-receipt .table-auctions .table-panel.car_name
{
    width: 200px;
}

.table-receipt .table-auctions .table-panel.bill_amount .auctions_t_desc,
.table-receipt .table-auctions .table-panel.pay_amount .auctions_t_desc {
    font-weight: bold;
    font-size: 1.2em;
}

.table-receipt .table-receipt .furikomi .input {
    margin-bottom: 5px;
}

@media screen and (max-width: 899px){
    .table-receipt .table-auctions-tbody .table-panel {
        width: 100% !important;
    }
    .table-receipt .table-panel.auction_id{
        -webkit-box-ordinal-group:1;
            -ms-flex-order:0;
                order:0;
        -ms-grid-row:1;
        grid-row:1;
        -ms-grid-column:1;
        -ms-grid-column-span:2;
        grid-column:1/3;
    }
    .table-receipt .table-panel.end_at{
        -webkit-box-ordinal-group:2;
            -ms-flex-order:1;
                order:1;
        -ms-grid-row:2;
        grid-row:2;
        -ms-grid-column:1;
        -ms-grid-column-span:2;
        grid-column:1/3;
    }
    .table-receipt .table-panel.trade_date{
        -webkit-box-ordinal-group:3;
            -ms-flex-order:2;
                order:2;
        -ms-grid-row:3;
        grid-row:3;
        -ms-grid-column:1;
        -ms-grid-column-span:2;
        grid-column:1/3;
    }
    .table-receipt .table-panel.trade_name{
        -webkit-box-ordinal-group:4;
            -ms-flex-order:3;
                order:3;
        -ms-grid-row:4;
        grid-row:4;
        -ms-grid-column:1;
        -ms-grid-column-span:2;
        grid-column:1/3;
    }
    .table-receipt .table-panel.bill_amount{
        -webkit-box-ordinal-group:5;
            -ms-flex-order:4;
                order:4;
        -ms-grid-row:5;
        grid-row:5;
        -ms-grid-column:1;
        -ms-grid-column-span:2;
        grid-column:1/3;
    }
    .table-receipt .table-panel.pay_amount{
        -webkit-box-ordinal-group:6;
            -ms-flex-order:5;
                order:5;
        -ms-grid-row:6;
        grid-row:6;
        -ms-grid-column:1;
        -ms-grid-column-span:2;
        grid-column:1/3;
    }
    .table-receipt .table-panel.car_photo{
        -webkit-box-ordinal-group:7;
            -ms-flex-order:6;
                order:6;
        -ms-grid-row: 7;
        -ms-grid-row-span: 5;
        grid-row: 7 / 12;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1/2;
    }
    .table-receipt .table-panel.car_name{
        -webkit-box-ordinal-group:8;
            -ms-flex-order:7;
                order:7;
        -ms-grid-row: 7;
        grid-row: 7;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3;
    }
    .table-receipt .table-panel.model_year{
        -webkit-box-ordinal-group:9;
            -ms-flex-order:8;
                order:8;
        -ms-grid-row: 8;
        grid-row: 8;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3;
    }
    .table-receipt .table-panel.mileage{
        -webkit-box-ordinal-group:10;
            -ms-flex-order:9;
                order:9;
        -ms-grid-row: 9;
        grid-row: 9;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3;
    }
    .table-receipt .table-panel.runnable{
        -webkit-box-ordinal-group:11;
            -ms-flex-order:10;
                order:10;
        -ms-grid-row: 10;
        grid-row: 10;
        -ms-grid-column: 2;
        -ms-grid-column-span: 1;
        grid-column: 2/3;
    }
    .table-receipt .table-panel.payment{
        -webkit-box-ordinal-group:12;
            -ms-flex-order:11;
                order:11;
        -ms-grid-row: 12;
        grid-row: 12;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
    }
    .table-receipt .table-panel.detail,
    .table-receipt .table-panel.detail_statement{
        -webkit-box-ordinal-group:13;
            -ms-flex-order:12;
                order:12;
        -ms-grid-row: 13;
        grid-row: 13;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
    }
    .table-receipt .table-panel.payment{
        margin-bottom: 10px;
    }
    .table-receipt .table-panel.payment .input {
        margin-bottom: 0;
        margin-right: 8px;
    }
    .table-receipt .table-panel.detail_statement{
        display: block;
    }
}

/* _________________________________________


/scrap_trader_auctions/list_estimate/
 - テーブル【見積依頼】車両一覧

 _________________________________________ */

 .table-list_estimate .table-auctions .table-panel:not(.sp){
    width: calc(100% / 5);
    text-align: center;
}
.table-list_estimate .table-auctions .table-panel:not(.sp).panel-short{
	width: 135px;
}

@media screen and (max-width: 899px){
	.table-list_estimate .table-auctions-tbody {
	    margin-bottom: 10px;
	    padding: 15px;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    -ms-flex-direction: column;
	    flex-direction: column;
	}
	.table-list_estimate .table-panel,
	.table-list_estimate .table-panel.sp{
    	margin-bottom: 7px;
	}
	.table-list_estimate .table-auctions .table-panel:not(.sp){
		text-align: left;
	}
	.table-list_estimate .table-auctions .table-panel:not(.sp).panel-short,
	.table-list_estimate .table-auctions .table-panel:not(.sp),
	.table-list_estimate .table-auctions .table-panel{
		width: 100%;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
	}
	.table-list_estimate .table-auctions .table-panel br{
		display: none;
	}
	.table-list_estimate .table-auctions .table-auctions-tbody{
		display: block;
	}
	.table-list_estimate .table-auctions .table-panel.list_car_name_s a{
	    font-weight: bold;
	    display: block;
	}
	.table-list_estimate .btn-primary{
		max-width: 100%;
	}
	.table-list_estimate .btn-primary .sp{
		display: inline;
	}
	.table-list_estimate .auctions_t_ttl {
	    background-color: #333;
	    color: #fff;
	    display: inline-block;
	    padding: 2px;
	    min-width: 70px;
	    width: 70px;
	    text-align: center;
	    margin-right: 8px;
	}
}

/* _________________________________________

 - 見積金額入力ポップアップ
 _________________________________________ */
#estimate_confirm_box {
    max-width: 492px;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #fff;
}
#cboxClose{
    top:0px;
}
.estimate_confirm_header {
    max-width: 492px;
    margin: -15px -15px 20px -15px;
    text-align: center;
    font-size: 24px;
    color: #ffffff;
    line-height: 64px;
    border-radius: 10px 10px 0 0;
    background: #000000;
}
#bidding_header, #estimate_header {
    margin-bottom: 10px;
}
#estimate_header_top, #estimate_amount {
    display: none;
}
.estimate_box #estimate_header_top, .estimate_box #estimate_amount {
    display: block;
    float: left;
}
.estimate_box #estimate_header_top {
    width: 100%;
}
#estimate_header_top div {
    width:100%;
    text-align: center;
    font-size: 18px;
}
#estimate_confirm_price {
    width: 90%;
    margin: 0px auto;
    font-size: 1.1em;
}
.estimate_box #estimate_confirm {
    display: block;
}
#estimate_confirm_input.form-control {
    display: inline-block;
    font-size: 2em;
    padding: 2px;
    max-width: 400px;
    width: 100%;
    height: 54px;
}
.estimate_box .estimate_confirm_price_inner {
    width: 100%;
    margin: 15px 0px 10px 0px;
    text-align: center;
    position: relative;
}
.estimate_box .estimate_confirm_price_inner span {
    display: block;
    margin: 10px auto;
    font-size: 22px;
}
.estimate_box .estimate_confirm_price_inner span.estimate_confirm_price_inner_yen {
    position: absolute;
    bottom: 3px;
    right: 19px;
}
#estimate_confirm_box .price_info_box_ttl {
	display: inline-block;
	height: 15px;
	margin: 0 0 5px 0;
	padding: 0 5px;
	font-size: 10px;
	line-height: 15px;
	color: #ffffff;
	background: #1b1b1b;
}
.estimate_box #estimate_confirm{
	display: block;
}

.estimate_box .estimate_confirm_price_inner {
	width:100%;
	margin: 15px 0px 10px 0px;
	text-align: center;
	position: relative;
}

.estimate_box .estimate_confirm_price_inner .estimate_price_div {
	display: block;
	margin: 10px auto;
}

.estimate_box .estimate_confirm_price_inner span.estimate_price_span {
	display: inline;
	font-size: 22px;
}

.estimate_box .estimate_confirm_price_inner span.including_price_span {
	display: inline;
	font-size: 100%;
}

.estimate_box #estimate_amount {
	width: 100%;
	text-align: center;
	line-height: 1.3;
	font-size: 18px;
	font-weight: bold;
	border-bottom: 1px dotted #000000;
}

#estimate_amount .estimate_price {
	font-size: 36px;
	color: #ff0000;
}

.exhibition_estimate_ttl_l .estimate_document {
	color: #ff0000;
}

#estimate_amount .estimate_document {
	font-size: 16px;
}

#estimate_confirm_document {
	width: 100%;
	margin-bottom: 10px;
	text-align: center;
}

#estimate_confirm_document .estimate_confirm_document_ttl {
	display: block;
	margin: 20px auto 10px;
	font-size: 16px;
	font-weight: bold;
}

.estimate_confirm_document_label {
	display: inline-block !important;
	position: relative;
	width: 48%;
	background: #ffffff;
	border: solid 1px #c1c1c1;
	margin: 0 3px;
	padding: 10px 0px;
	font-size: 1.5em;
	text-align: center;
	border-radius: 4px;
}

.estimate_confirm_document_label:last-child {
	margin-right: 0px;
}

.estimate_confirm_document_label.document_checked {
	color: #ffffff;
	background: #c1c1c1;
}

.estimate_confirm_document_label input {
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 0;
}

#estimate_confirm_attend {
	display: block;
	width: auto;
	margin: 10px auto 20px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
}

#estimate_confirm_attend .radio_label{
	width: auto;
}

#estimate_document_for_list {
	color: #ff0000;
}


.untradable_btn,
.input_estimate_btn {
	font-size: 2em;
	color: #ffffff;
	font-weight: bold;
	border-radius: 10px;
	padding: 8px 26px;
	width: 48%;
}
.input_estimate_btn {
	background: #406da0;
	border-right: solid 4px #023d78;
	border-bottom: solid 4px #023d78;
}
.untradable_btn {
	background: #fd0000;
	border-right: solid 4px #9f0202;
	border-bottom: solid 4px #9f0202;
}
.input_estimate_btn:hover,
.untradable_btn:hover {
	border-right: 0px;
	border-bottom: 0px;
	border-left: 0px;
	padding: 8px 30px 8px 26px;
}
.input_estimate_btn:hover {
	background: #023d78;
	border-radius: 10px;
	border-top: solid 4px #ffffff;
}
.untradable_btn:hover {
	background: #9f0202;
	border-radius: 10px;
	border-top: solid 4px #ffffff;
	padding: 8px 30px 8px 26px;
}
@media screen and (max-width: 899px){
	.untradable_btn, .input_estimate_btn{
		font-size: 18px;
	}
	.estimate_box #estimate_amount{
		font-size: initial;
	}
	#estimate_amount .estimate_price{
		font-size: 1.3em;
	}
	.estimate_box .estimate_confirm_price_inner span.estimate_price_span{
		display: block;
		font-size: initial;
    	line-height: 1;
	}
	.estimate_box .estimate_confirm_price_inner span.including_price_span{
	    font-size: 12px;
	    font-weight: normal;
	}
	#estimate_confirm_box .estimate_confirm_header{
	    font-size: 18px;
	    font-weight: bold;
	    line-height: initial;
	    padding: 10px;
	}
	#estimate_header{
		margin-bottom: 0;
	}
	.estimate_box .estimate_confirm_price_inner span{
	    font-size: initial;
	    margin: 0 auto 0px;
	    font-weight: bold;
	}
	#estimate_header_top div{
		font-size: 14px;
	}
}

/* _________________________________________

 - 共通部品 コーナータブ
 _________________________________________ */
.corner_tab {
    padding: 10px 0px;
}
/* 1段横並び（落札・受注管理 / 引取・入金管理）：リユース車両コーナー追加前のデザイン */
.corner_tab_flat {
    display: flex;
    font-size: 1.2rem;
}
.corner_tab_flat .link {
    border: 1px solid #61ad35;
    border-left: none;
    flex: 1;
    text-align: center;
    color: #000;
    height: 120%;
}
.corner_tab_flat .link:first-of-type {
    border-left: 1px solid #61ad35;
    border-radius: 5px 0 0 5px;
}
.corner_tab_flat .link:last-of-type {
    border-radius: 0 5px 5px 0;
}
.corner_tab_flat .link[active="1"] {
    background-color: #61ad35;
    font-weight: bold;
    color: #fff;
}
/* 上段：主要コーナー（リユース・損害車） */
.corner_tab_main {
    display: flex;
    gap: 6px;
    font-size: 1.2rem;
}
.corner_tab_main .link {
    border: 1px solid #61ad35;
    border-radius: 6px 6px 0 0;
    flex: 1;
    text-align: center;
    color: #000;
    padding: 12px 0;
    font-weight: bold;
}
.corner_tab_main .link[active="1"] {
    background-color: #61ad35;
    color: #fff;
}
/* 下段：その他コーナー（プロ出品・カーネクスト） */
.corner_tab_sub {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background-color: #fafafa;
    border-radius: 4px;
    font-size: 0.95rem;
}
.corner_tab_sub .link {
    color: #888;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 14px;
    text-align: center;
}
.corner_tab_sub .link[active="1"] {
    color: #fff;
    background-color: #61ad35;
    border-color: #61ad35;
    font-weight: bold;
}
/* コーナー一覧（リユース・カーネクスト・プロ出品・損害車）共通：見出しの下線を消し、上下の余白を整える。
   左は縦線ぶんの余白(default.css の padding-left)を潰さないよう
   一括指定にせず上下だけにする (#2460) */
.auctions.corner_index .main_tt {
    border-bottom: none;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* 自社出品車両管理 見出し行の「出品する」ボタン（トップページの黄色ボタンに配色を揃える） */
.btn_exhibit_add {
    max-width: 215px;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    background: #fee408;
    border: 1px solid #e5cd00;
    border-radius: 4px;
    box-shadow: inset 0 2px 0 rgb(255 255 255 / 20%), 0 2px 2px rgb(0 0 0 / 19%);
}
.btn_exhibit_add:hover {
    color: #333333;
    background: #fee408;
    opacity: 0.7;
}

@media screen and (max-width: 899px){
    .corner_tab_flat {
        flex-direction: column;
        font-size: 1rem;
    }
    .corner_tab_flat .link {
        border: 1px solid #61ad35;
        border-top: none;
    }
    .corner_tab_flat .link:first-of-type {
        border-top: 1px solid #61ad35;
        border-radius: 5px 5px 0 0;
    }
    .corner_tab_flat .link:last-of-type {
        border-radius: 0 0 5px 5px;
    }
    .corner_tab_main {
        flex-direction: column;
        font-size: 1rem;
    }
    .corner_tab_main {
        gap: 6px;
    }
    .corner_tab_main .link {
        border: 1px solid #61ad35;
        border-radius: 6px;
    }
    .corner_tab_sub {
        flex-wrap: wrap;
    }
}

/* _________________________________________

 - 共通部品 フッターコーナータブ
 _________________________________________ */
.footer-contact {
    position: fixed;
    bottom: 0;
    text-align: center;
    transition: all .1s linear 0s;
    z-index: 99;
    width: 100%;
    padding: 12px 20%;
    font-size: 18px;
    left:0;
    background-color:rgb(77 77 77 / 62%);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 7px 10px;
}

.footer-contact .link {
    border: 1.5px solid #9dcc28;
    color: #9dcc28;
    background-color: #ffffff;
    padding: 4px;
    flex:1;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
}

.footer-contact .link[active="1"] {
    background-color: rgb(155 204 27);
    color: #fff;
    font-weight: bold;
}

.footer-contact .trader_auctions_add {
    background-color: #a6282a;
    border: 1px solid #a6282a;
    color: white;
    font-weight: bold;
    z-index: 2;
    padding: 4px;
    border-radius: 5px;
}

@media screen and (max-width: 899px){
    .footer-contact {
        width:100%;
        font-size: 15px;
        padding: 10px 10px;
        flex-direction: row;
    }
}

/*** DatePicker 表示位置調整 *****************************/
.ui-datepicker {
    margin-top: -100px;
}

/*** リユース車両コーナー 検索結果一覧（カーネクスト＋プロ出品混在、コーナーバッジ付き） ***/
/* 出品番号を車名行（写真より右）へ統合したため、ttl 分の行を carImg に詰める */
.reuse_auctions_window .auctions_window_inner .auctions_window_carImg {
    -ms-grid-row: 1 / 4;
    grid-row-start: 1;
    grid-row-end: 4;
}

/* コーナー種別バッジ（写真の真上に置く。写真には重ねない） */
.reuse_auctions_window .auctions_window_inner .auctions_window_carImg .icon_corner_scrap,
.reuse_auctions_window .auctions_window_inner .auctions_window_carImg .icon_corner_trader {
    display: block;
    width: 100%;
    max-width: 162px;
    box-sizing: border-box;
    margin-bottom: 3px;
    color: #ffffff;
    background-color: #808080;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    padding: 3px 6px;
    line-height: 1.3;
}

.reuse_auctions_window .auctions_window_inner .auctions_window_carName .auction_id_td {
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
    color: #535353;
}

@media screen and (max-width: 899px) {
    .reuse_auctions_window .auctions_window_inner .auctions_window_carImg {
        order: 1;
    }
    .reuse_auctions_window .auctions_window_inner .auctions_window_carName .auction_id_td {
        display: block;
        margin-right: 0;
        margin-bottom: 3px;
    }
}


/* リユース車両コーナー 並び替え（検索結果件数の行に右寄せで並べる） */
.reuse_auctions_content_tt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.content_tt_sort {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.content_tt_sort label {
    margin-bottom: 0;
    font-weight: normal;
    white-space: nowrap;
}

/* default.css で select の appearance が none にされており標準の矢印が出ないため、
   プルダウンだと分かるよう下向き三角を背景で描いている */
.content_tt_sort .form-control {
    display: inline-block;
    width: auto;
    height: 30px;
    padding: 3px 26px 3px 8px;
    font-size: 13px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23535353' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 10px 6px;
}

/* 写真ありトグル（検索結果行・並び替えの左隣）
   検索条件の「写真」(q[photo]) と連動する別UI (#2409) */
.content_tt_photo {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.reuse_photo_toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 8px;
    font-size: 0.95rem;
    color: #666;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.reuse_photo_toggle:hover {
    border-color: #61ad35;
}

/* スイッチのレール */
.reuse_photo_toggle_switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
    background-color: #ccc;
    border-radius: 999px;
    transition: background-color .15s;
}

/* スイッチのつまみ */
.reuse_photo_toggle_switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform .15s;
}

.reuse_photo_toggle.is_on {
    color: #fff;
    background-color: #61ad35;
    border-color: #61ad35;
    font-weight: bold;
}

.reuse_photo_toggle.is_on .reuse_photo_toggle_switch {
    background-color: #2f7d20;
}

.reuse_photo_toggle.is_on .reuse_photo_toggle_switch::before {
    transform: translateX(14px);
}

@media screen and (max-width: 899px) {
    .content_tt_sort {
        width: 100%;
    }
    .content_tt_sort .form-control {
        flex: 1;
        min-width: 0;
    }
    /* SP では検索結果・写真あり・並び替えを詰めて折り返す */
    .content_tt_photo {
        margin-left: 0;
    }
}

/* _________________________________________ 出品成約車両の書類送付に関するご案内
   旧 trader_auctions_head.png をテキスト化したもの (#2314)

   落札日 -> 5営業日以内 -> 送付 のプロセスフロー。
   ステップは白いカードに載せて図として自立させ、期限のカードだけ
   高さと色で持ち上げて主役にする。
   帯と枠線はもともと黄緑(色相75°/彩度100%)で、サイトの基調色 #61ad35
   (色相98°/彩度53%) と20°以上ずれており、枯草・オリーブに見えていた (#2460)。
   帯は #2f7d20 → #3a8a24 のグラデにして色相を緑側(110°)に寄せる。
   白文字とのコントラストは左5.15:1 / 右4.34:1 でどちらも AA を満たす。
 _________________________________________ */

/* ヘッダーは position:fixed (height:100px) で .head_height の margin-top:100px は
   その逃げ分にあたるため、ここで独自に上余白を確保する */
.document_send_info {
    position: relative;
    max-width: 1080px;
    /* 上の 140px は、コンテナに上余白が無かった頃に自前でヘッダを逃げていたもの。
       default.css 側で上余白(36px)を持たせたため二重になる。ここでは 0 にする。 */
    margin: 0 auto 28px;
    padding: 0;
    background: #ffffff;
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
    text-align: center;
    overflow: hidden;
}
/* 背景装飾。preserveAspectRatio="none" で viewBox(260) を実際の高さに
   引き伸ばすため、カード全体に敷くと図形が縦に圧縮され、
   帯の下端に横一列に密集して「黄緑の線」に見えていた (#2460)。
   帯の下の白い領域だけに敷いて、本来の散らばりに戻す。
   帯の高さは内容で決まるので固定値は使わず、装飾側を z-index で
   帯の下に潜らせたうえで、帯に不透明な背景を持たせて透けを止める。 */
.document_send_info .document_send_info_bg {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.document_send_info .document_send_info_ttl {
    position: relative;
    /* 背景装飾より前面に出す。帯は不透明なグラデーションなので、
       重なった装飾（黄色の図形）が透けて黄土色の線に見えるのを防ぐ */
    z-index: 1;
    margin: 0;
    padding: 13px 20px;
    background: linear-gradient(100deg, #2f7d20 0%, #3a8a24 100%);
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: .04em;
}
/* 帯の下に細いブランドカラーのラインを重ねてアクセントにする */
.document_send_info .document_send_info_ttl:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #b5d94a;
}

/* プロセスフロー */
.document_send_info .document_send_info_steps {
    position: relative;
    z-index: 1;

    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin: 0;
    padding: 24px 24px 26px;
    list-style: none;
}
/* 各ステップは薄い地色のカード。図として自立させる */
.document_send_info .document_send_info_step {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 0;
    padding: 16px 18px;
    background: #ffffff;
    border: 2px solid #61ad35;
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
    -webkit-transition: box-shadow .2s ease, -webkit-transform .2s ease;
    transition: box-shadow .2s ease, transform .2s ease;
}
.document_send_info .document_send_info_step + .document_send_info_step {
    margin-left: 40px;
}
/* 期限のカードだけ白地に枠と影を与えて持ち上げる */
.document_send_info .document_send_info_step.is_key {
    box-shadow: var(--sh-2);
}
/* ホバーで影を強めて浮かせる。マウスを持つ環境だけに効かせる */
@media (hover: hover) {
    .document_send_info .document_send_info_step:hover {
        box-shadow: var(--sh-2);
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
    .document_send_info .document_send_info_step.is_key:hover {
        box-shadow: var(--sh-2);
    }
    /* 矢印はカードの :before なので親の浮きに追従してしまう。
       逆方向に戻して静止させる */
    .document_send_info .document_send_info_step:hover:before {
        -webkit-transform: translateY(3px) rotate(0deg);
        transform: translateY(3px);
    }
}
/* ステップ間の矢印 */
.document_send_info .document_send_info_step + .document_send_info_step:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    width: 0;
    height: 0;
    margin-top: -11px;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 17px solid #c3ce9e;
}
.document_send_info .document_send_info_step_fig {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    margin: 0 12px 0 0;
    line-height: 1;
}
/* レターパックは横長なので少し広く取る */
.document_send_info .document_send_info_step_fig.is_pack {
    width: 58px;
}
.document_send_info .document_send_info_step_fig svg {
    display: block;
    width: 100%;
    height: auto;
}
.document_send_info .document_send_info_step_label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.45;
    text-align: left;
    white-space: nowrap;
}
/* 期限は図解の主役。数字を大きく組んで一目で入るようにする */
.document_send_info .document_send_info_step.is_key .document_send_info_step_label {
    color: #2f7d20;
    font-size: 15px;
}
/* 1 枚目と 2 枚目は文字数が少ないため、イラストを除いた残りの領域の
   中央にテキストを置く。3 枚目は 2 行で長いので左寄せのままにする */
.document_send_info .document_send_info_step:nth-child(1) .document_send_info_step_label,
.document_send_info .document_send_info_step:nth-child(2) .document_send_info_step_label {
    text-align: center;
}
.document_send_info .document_send_info_step_num {
    display: inline-block;
    margin-right: 2px;
    color: #d10000;
    font-size: 34px;
    font-weight: bold;
    line-height: 1;
    vertical-align: -4px;
    letter-spacing: -.02em;
}
.document_send_info .document_send_info_step_label em {
    color: #2f7d20;
    font-style: normal;
    font-size: 26px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: -.01em;
}
.document_send_info .document_send_info_step_sub {
    display: block;
    margin-top: 5px;
    color: #6b6b6b;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5;
    white-space: normal;
}


@media screen and (max-width: 899px) {
    .document_send_info {
        margin: 30px auto 20px;
        border-radius: 10px;
    }
    .document_send_info .document_send_info_ttl {
        padding: 13px 14px;
        font-size: 15px;
    }
    /* 幅が足りないためステップを縦に積み、矢印も下向きに変える */
    .document_send_info .document_send_info_steps {
        display: block;
        padding: 18px 14px 16px;
        text-align: left;
    }
    .document_send_info .document_send_info_step {
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        padding: 12px 14px;
    }
    .document_send_info .document_send_info_step + .document_send_info_step {
        margin: 26px 0 0;
    }
    .document_send_info .document_send_info_step + .document_send_info_step:before {
        top: -19px;
        left: 30px;
        margin-top: 0;
        border-top: 11px solid #c3ce9e;
        border-bottom: 0;
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
    }
    .document_send_info .document_send_info_step_fig,
    .document_send_info .document_send_info_step_fig.is_pack {
        flex: 0 0 auto;
        align-items: center;
        width: 48px;
        height: auto;
        margin: 0 14px 0 0;
    }
    .document_send_info .document_send_info_step_label {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 15px;
        white-space: normal;
    }
    /* PC では 1・2 枚目だけテキストを中央寄せしているが、SP は縦積みで
       カードの左端が揃うため 3 枚とも左寄せにする。
       nth-child 側の方が詳細度が高いのでセレクタを合わせて上書きする */
    .document_send_info .document_send_info_step:nth-child(1) .document_send_info_step_label,
    .document_send_info .document_send_info_step:nth-child(2) .document_send_info_step_label,
    .document_send_info .document_send_info_step:nth-child(3) .document_send_info_step_label {
        text-align: left;
    }
    .document_send_info .document_send_info_step.is_key .document_send_info_step_label {
        font-size: 14px;
    }
    .document_send_info .document_send_info_step_num {
        font-size: 28px;
    }
    .document_send_info .document_send_info_step_label em {
        font-size: 21px;
    }
    /* preserveAspectRatio="none" のため縦長画面では装飾が伸びて崩れる。
       SP では出さない */
    .document_send_info .document_send_info_bg {
        display: none;
    }
}

/* _________________________________________ リユース車両コーナー 検索条件お気に入り (#2409)

   見出し下のブックマークバー。ブラウザのブックマークバーに倣い、
   保存した検索条件とフォルダを横並びに置く。
   幅に収まらない分は右端の « に退避する。
   簡易絞り込み(#2350)のボタンスイッチ／写真有トグルを置き換えたもの。
   配色はコーナータブ（.corner_tab_sub）に合わせる。
 _________________________________________ */

.reuse_bookmark_bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
    background-color: #fafafa;
    border-radius: 4px;
}

/* ブックマーク／フォルダの並び。溢れは JS が隠すため折り返さない。
   フォルダのドロップダウンを下方向へ出せるよう、横だけを切る（overflow: hidden だと潰れる）。 */
.reuse_bookmark_items {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: clip;
    overflow-y: visible;
    white-space: nowrap;
}

/* バー上のボタン共通。
   幅が足りないときは縮めずに溢れさせ、溢れた分を JS が « に退避する
   （flex-shrink が既定の 1 だと全部が潰れて文字が読めなくなる）。 */
.reuse_bookmark_btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    max-width: 220px;
    padding: 5px 12px;
    font-size: 0.95rem;
    color: #666;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 0 #ddd;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reuse_bookmark_btn:hover {
    border-color: #61ad35;
    color: #333;
    text-decoration: none;
}

a.reuse_bookmark_btn,
a.reuse_bookmark_btn:hover,
a.reuse_bookmark_btn:focus {
    color: #666;
    text-decoration: none;
}

.reuse_bookmark_name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* インライン SVG アイコン。Bootstrap CSS が無く glyphicon が使えないため自前で描く */
.reuse_bookmark_icon {
    flex: 0 0 auto;
    vertical-align: -2px;
}

/* フォルダ。クリックで中身をドロップダウン表示する */
.reuse_bookmark_folder {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.reuse_bookmark_folder_list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 180px;
    max-height: 320px;
    overflow-y: auto;
    margin-top: 3px;
    padding: 4px 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.reuse_bookmark_folder.is_open .reuse_bookmark_folder_list {
    display: block;
}

.reuse_bookmark_folder_item,
.reuse_bookmark_overflow_item {
    display: block;
    padding: 6px 14px;
    font-size: 0.95rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reuse_bookmark_folder_item:hover,
.reuse_bookmark_overflow_item:hover {
    background-color: #f2f8e0;
    color: #333;
    text-decoration: none;
}

.reuse_bookmark_folder_empty {
    display: block;
    padding: 6px 14px;
    font-size: 0.9rem;
    color: #999;
}

/* 溢れたものをまとめる « ボタン */
.reuse_bookmark_overflow {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.reuse_bookmark_overflow_btn {
    padding: 5px 8px;
}

.reuse_bookmark_overflow_list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 20;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    margin-top: 3px;
    padding: 4px 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.reuse_bookmark_overflow.is_open .reuse_bookmark_overflow_list {
    display: block;
}

/* 溢れリスト内のフォルダ見出しと、その中身のインデント */
.reuse_bookmark_overflow_folder {
    display: block;
    padding: 6px 14px 2px;
    font-size: 0.85rem;
    color: #999;
}

.reuse_bookmark_overflow_child {
    padding-left: 28px;
}

/* 右端の操作ボタン。バーが狭くても縮めない */
.reuse_bookmark_actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
}

.reuse_bookmark_action {
    padding: 5px 12px;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* 保存できる検索条件があるとき。写真ありトグルの ON と同じ緑で揃える。
   星アイコンは fill="currentColor" なので color だけで白になる */
.reuse_bookmark_action.is_active,
.reuse_bookmark_action.is_active:hover,
.reuse_bookmark_action.is_active:focus {
    color: #fff;
    background-color: #61ad35;
    border-color: #61ad35;
    font-weight: bold;
}

/* _________________________________________ 検索条件お気に入り モーダル (#2409) */

.reuse_bookmark_modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    overflow-y: auto;
}

.reuse_bookmark_modal_inner {
    width: 90%;
    max-width: 420px;
    margin: 60px auto;
    padding: 18px 20px 16px;
    background-color: #fff;
    border-radius: 6px;
}

.reuse_bookmark_modal_inner_wide {
    max-width: 720px;
}

.reuse_bookmark_modal_tt {
    margin-bottom: 14px;
    padding-bottom: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    border-bottom: 1px solid #eee;
}

.reuse_bookmark_field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.reuse_bookmark_field label {
    flex: 0 0 60px;
    margin: 0;
    font-size: 0.95rem;
    font-weight: normal;
}

.reuse_bookmark_field .form-control {
    flex: 1 1 auto;
}

.reuse_bookmark_field .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.reuse_bookmark_note {
    margin: 6px 0;
    font-size: 0.85rem;
    color: #666;
}

.reuse_bookmark_modal_btns {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

/* 管理モーダルの一覧 */
.reuse_bookmark_manage_list {
    max-height: 50vh;
    overflow-y: auto;
    border-top: 1px solid #eee;
}

.reuse_bookmark_manage_row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border-bottom: 1px solid #eee;
}

/* フォルダの中身。左に帯とツリー罫線を出して「フォルダの中にいる」ことを示す */
.reuse_bookmark_manage_child {
    padding-left: 10px;
    background-color: #f7faee;
    border-left: 3px solid #61ad35;
}

/* └ の形の罫線。行の高さいっぱいに縦線を引き、中央から横線を出す */
.reuse_bookmark_tree_line {
    position: relative;
    flex: 0 0 18px;
    align-self: stretch;
}

.reuse_bookmark_tree_line::before {
    content: "";
    position: absolute;
    top: -8px;
    bottom: 50%;
    left: 6px;
    border-left: 1px solid #c3d98a;
}

.reuse_bookmark_tree_line::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 6px;
    width: 8px;
    border-top: 1px solid #c3d98a;
}

/* 最後の子は縦線を中央で止める（すでに bottom:50% なので追加指定は不要）。
   フォルダ直下の1件目は上に伸ばしすぎないよう少し詰める */
.reuse_bookmark_manage_row:not(.reuse_bookmark_manage_child) + .reuse_bookmark_manage_child .reuse_bookmark_tree_line::before {
    top: -4px;
}

/* ドラッグハンドル */
.reuse_bookmark_drag_handle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 2px;
    color: #bbb;
    cursor: grab;
}

.reuse_bookmark_drag_handle:hover {
    color: var(--c-green-dark);
}

.reuse_bookmark_drag_handle:active {
    cursor: grabbing;
}

/* ドラッグ中の落下位置 */
.reuse_bookmark_manage_placeholder {
    background-color: #f2f8e0;
    border: 1px dashed #61ad35;
    border-radius: 3px;
    margin: 2px 0;
}

/* ドラッグ中の行 */
.reuse_bookmark_manage_row.ui-sortable-helper {
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    border-radius: 3px;
}

.reuse_bookmark_manage_icon {
    flex: 0 0 auto;
    color: var(--c-green-dark);
}

.reuse_bookmark_manage_name {
    flex: 1 1 auto;
    min-width: 0;
}

.reuse_bookmark_manage_btns {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.reuse_bookmark_manage_btns .btn {
    padding: 4px 8px;
    font-size: 0.85rem;
}

/* 出品コーナー・車両属性は行いっぱいに広げて 1 行に収める (#2409)。
   .radio_label は default.css で width:50% が当たっており 2 個ずつ折り返してしまうため、
   ここで幅指定を解いて内容幅に戻す。 */
.reuse_corner_radio,
.reuse_classification_radio {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
}

.reuse_corner_radio .radio_label,
.reuse_classification_radio .radio_label {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

@media screen and (max-width: 899px) {
    .reuse_bookmark_bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    /* SP では保存した条件を先に見せ、操作ボタンを次の行に回す。
       (保存名が 1 件でも >> に畳まれてしまうため、項目の行を先に出す) */
    .reuse_bookmark_items {
        order: 1;
        width: 100%;
        flex: 1 1 100%;
    }
    .reuse_bookmark_overflow {
        order: 2;
    }
    .reuse_bookmark_actions {
        order: 3;
        margin-left: 0;
    }
    .reuse_bookmark_manage_row {
        flex-wrap: wrap;
    }
    .reuse_bookmark_manage_name {
        flex: 1 1 100%;
    }
}
/* _________________________________________ 落札・受注後の流れ バナー
   旧: 画像1枚 → テキスト + インラインSVG に変更 (#2407)
 _________________________________________ */
.flow_bnrArea .flow_bnr {
    border: 1px solid #cfe3c2;
    border-radius: var(--r-md);
    background: #fff;
    padding: 14px 16px 16px;
}
.flow_bnrArea .flow_bnr_ttl {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: bold;
    color: var(--c-green-dark);
    text-align: center;
    letter-spacing: .04em;
}
.flow_bnrArea .flow_bnr_body {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

/* ステップ */
.flow_bnrArea .flow_bnr_steps {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.flow_bnrArea .flow_bnr_step {
    position: relative;
    flex: 1;
    border: 1px solid #cfe3c2;
    border-radius: var(--r-md);
    background: #f5faf1;
    padding: 17px 8px 12px;
    text-align: center;
}
/* ステップ間の矢印 */
.flow_bnrArea .flow_bnr_step:not(:last-child):after {
    content: "";
    position: absolute;
    top: 50%;
    right: -8px;
    z-index: 1;
    width: 8px;
    height: 12px;
    transform: translateY(-50%);
    background: #61ad35;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.flow_bnrArea .flow_bnr_step_no {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    /* 白文字を載せる面は濃い緑 (#2460) */
    background: var(--c-green-dark);
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
}
.flow_bnrArea .flow_bnr_step_ttl {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: bold;
    color: var(--c-green-dark);
    line-height: 1.3;
}
.flow_bnrArea .flow_bnr_step_icon {
    height: 50px;
    margin: 0 auto 6px;
}
.flow_bnrArea .flow_bnr_step_icon svg {
    display: block;
    width: auto;
    height: 100%;
    margin: 0 auto;
}
.flow_bnrArea .flow_bnr_step_desc {
    margin: 0;
    font-size: 13.5px;
    color: #333;
    line-height: 1.5;
    text-align: left;
}

/* 初めてのお客様へ */
.flow_bnrArea .flow_bnr_first {
    position: relative;
    z-index: 2;
    flex: 0 0 196px;
    border: 2px solid #61ad35;
    border-radius: var(--r-md);
    background: #f5faf1;
    padding: 10px 12px;
    text-align: center;
}
/* 初心者マーク: 枠の左上に半分かかるように重ねる */
.flow_bnrArea .flow_bnr_first_mark {
    position: absolute;
    z-index: 3;
    /* 左揃え・上下半分が枠にかかる配置（#2407 デザイン指定） */
    top: -16px;
    left: 8px;
    width: 26px;
    height: 32px;
}
.flow_bnrArea .flow_bnr_first_mark svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .95));
}
.flow_bnrArea .flow_bnr_first_icon {
    height: 42px;
    margin: 0 auto 4px;
}
.flow_bnrArea .flow_bnr_first_icon svg {
    display: block;
    width: auto;
    height: 100%;
    margin: 0 auto;
}
.flow_bnrArea .flow_bnr_first_ttl {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: bold;
    color: var(--c-green-dark);
}
.flow_bnrArea .flow_bnr_first_desc {
    margin: 0 0 4px;
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    text-align: left;
}
.flow_bnrArea .flow_bnr_first_tel {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    color: var(--c-green-dark);
    white-space: nowrap;
}

/* ============================================================
   #2460 ログイン後TOP: 出品中車両のピックアップを横並びカードにする

   このファイルには既に縦リスト前提のグリッド指定
   （.auctions_window .auctions_window_inner{display:grid} など）があるため、
   同じ詳細度で上書きする必要がある。TOP( .lp_contents 配下 )のみに限定し、
   一覧ページなど他画面の .auctions_window には影響させない。
   ============================================================ */
/* カルーセル: 画面幅いっぱいのトラック＋左右の丸ボタン */
/* カルーセルは他セクションと同じ幅に収める。
   送りボタンはその外側（左右のマージン内）に置く。 */
.lp_contents .pickup_carousel{
    position: relative;
    /* .container 由来の calc(100% - 20px) だと左右に10pxずつ空き、
       ご注意点と左右位置がずれるため全幅を使う */
    width: 100%;
    max-width: var(--content-w);
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
.lp_contents .auctions_window{
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    /* ボタンで送るためスクロールバーは隠す */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lp_contents .auctions_window::-webkit-scrollbar{
    display: none;
}
.lp_contents .pickup_nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    color: #555;
    border: 1px solid #dcdfdc;
    border-radius: 50%;
    box-shadow: var(--sh-1);
    cursor: pointer;
    z-index: 2;
    transition: background .15s, color .15s, border-color .15s;
}
.lp_contents .pickup_nav:hover{
    background: #fff6e8;
    border-color: #f0c99a;
    color: #d97d00;
}
.lp_contents .pickup_nav-prev{ left: -54px; }
.lp_contents .pickup_nav-next{ right: -54px; }
/* #2485 本文(--content-w)の外側に置いているため、左右に54pxの余白が
   取れない画面ではボタンがページを広げてしまう。
   枠の内側に入れて写真に重ねる (基準幅 + 120px) */
@media screen and (max-width: 1660px){
    .lp_contents .pickup_nav-prev{ left: 4px; }
    .lp_contents .pickup_nav-next{ right: 4px; }
    .lp_contents .pickup_nav{
        background: rgba(255, 255, 255, .92);
        /* 縦中央 (50%) だと車名の行に重なっていた (実測 1024px)。写真の中央に置く */
        top: 100px;
    }
}
/* 端に達したボタンは薄くして押せなくする */
.lp_contents .pickup_nav[disabled]{
    opacity: .35;
    cursor: default;
    box-shadow: none;
}
.lp_contents .pickup_nav[disabled]:hover{
    background: #fff;
    border-color: #dcdfdc;
    color: #555;
}
.lp_contents .auctions_window .auctions_window_box{
    flex: 0 0 232px;
    width: 232px;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
}
.lp_contents .auctions_window .auctions_window_box:nth-child(2n+1){
    background: transparent;
}
/* グリッドをやめて縦積みのカードにする */
.lp_contents .auctions_window .auctions_window_inner{
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #e3e6e3;
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
}
.lp_contents .auctions_window .auctions_window_inner .auctions_window_carImg{
    margin-right: 0;
    height: 140px;
    background: #f4f5f4;
}
.lp_contents .auctions_window .auctions_window_inner .auctions_window_carImg a{
    width: 100%;
    height: 140px;
    display: block;
    overflow: hidden;
    position: relative;
}
.lp_contents .auctions_window .auctions_window_inner .auctions_window_carImg img{
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    position: static;
    top: auto;
    left: auto;
    transform: none;
    display: block;
}
.lp_contents .auctions_window .auctions_window_inner .auctions_window_carName{
    padding: 10px 12px 0;
    font-size: 13px;
    line-height: 1.45;
}
.lp_contents .auctions_window .auctions_window_inner .auctions_window_carName .car_name_td{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    /* #2485 車名の全角英数(Ｐａｃｋａｇｅ = U+FF41〜)は overflow-wrap から
       「単語」と見なされず、「Ｐａｃｋａ/ｇｅ」と語の途中で折れていた。
       keep-all なら全角英数の連なりを1語として扱い途中で折らない。
       入りきらない車名は下の -webkit-line-clamp が … で省略する */
    word-break: keep-all;
    overflow-wrap: anywhere;
    /* 1行の車名と2行の車名でカード高さが変わり(32px/55px)、
       下の価格行が段違いになっていた。常に2行ぶん確保する */
    min-height: calc(1.45em * 2);
}
/* カード内では詳細スペックを出さない（詳細ページで見せる） */
.lp_contents .auctions_window .auctions_window_inner .auctions_window_carDesc{
    display: none;
}
.lp_contents .auctions_window .auctions_window_inner .auctions_window_desc{
    align-self: auto;
    padding: 0;
}
.lp_contents .auctions_window .auctions_window_buyout_price{
    padding: 6px 12px 6px;
    font-size: 11px;
    color: #666;
}
.lp_contents .auctions_window .auctions_window_buyout_price strong.now_amount{
    font-size: 19px;
    margin: 0 2px;
}
.lp_contents .auctions_window .auctions_linkArea{
    margin-top: auto;
    /* 既存の `width:280px`(縦リスト前提の固定幅) がカード幅(232px)を超えるため戻す */
    width: auto;
    padding: 0 12px 12px;
    text-align: left;
    box-sizing: border-box;
}
.lp_contents .auctions_window .auctions_linkArea p{
    margin: 0 0 8px;
    font-size: 11px;
    color: #666;
}
.lp_contents .auctions_window .auctions_linkArea p strong{
    display: block;
    font-size: 12px;
    color: #333;
}
.lp_contents .auctions_window .auctions_linkArea .btn-01{
    display: block;
    /* 既定の `width: calc(100% - 20px)` は親幅前提で 20px はみ出すため 100% にする */
    width: 100%;
    margin: 0;
    padding: 7px 0;
    text-align: center;
    font-size: 13px;
    box-sizing: border-box;
}

@media screen and (max-width: 899px){
    /* SP はスワイプで送るためボタンを出さない */
    .lp_contents .pickup_carousel{
        padding: 0;
    }
    .lp_contents .pickup_nav{
        display: none;
    }
    .lp_contents .auctions_window .auctions_window_box{
        flex: 0 0 180px;
        width: 180px;
    }
    .lp_contents .auctions_window .auctions_window_inner .auctions_window_carImg,
    .lp_contents .auctions_window .auctions_window_inner .auctions_window_carImg a{
        height: 112px;
    }
}

/* ---- #2460 TOP 共通の見出し（デザイン案: 左寄せ・小さめ・黒＋緑の丸アイコン） ---- */
.top_section_head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 auto 14px;
}
.top_section_ttl,
.lp_contents .top_section_ttl,
.member_xhibit .top_section_ttl{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    font-size: 17px;
    font-weight: bold;
    color: #333;
    background: none;
    text-align: left;
}
.top_section_head .top_section_ttl{
    margin-bottom: 0;
}
/* 見出し左のアイコンは元からあるリサイクルマーク(midashi_bg.png)を使う */
.top_section_ttl::before{
    content: "";
    flex: none;
    width: 24px;
    height: 24px;
    background: url(../img/midashi_bg.png) no-repeat center / contain;
}
/* #2460 「もっと見る」: 業務の指定で、文字リンクから動きのあるボタンにする。
   緑の枠のボタン + 右端に丸い矢印。マウスを乗せると左から緑の塗りが流れ込んで文字が白になり、
   丸い矢印は白地に緑へ反転して右へ少し動く。動くのは hover / キーボード選択のときだけ。
   塗りは ::before、丸い矢印は ::after で描き、マークアップは変えない */
.top_section_more{
    position: relative;
    z-index: 0;
    flex: none;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 7px 6px 16px;
    overflow: hidden;
    border: 1.5px solid var(--c-green-dark);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--c-green-dark);
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
    box-sizing: border-box;
    -webkit-transition: color .3s ease;
            transition: color .3s ease;
}
/* 左から流れ込む緑の塗り */
.top_section_more::before{
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--c-green-dark);
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: left center;
            transform-origin: left center;
    -webkit-transition: -webkit-transform .35s cubic-bezier(.2, .8, .2, 1);
            transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
/* 丸い矢印 (緑の丸に白い矢印 → hover で白い丸に緑の矢印) */
.top_section_more::after{
    content: "";
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-green-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
    -webkit-transition: background-color .3s ease, -webkit-transform .35s cubic-bezier(.2, .8, .2, 1);
            transition: background-color .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.top_section_more:hover,
.top_section_more:focus-visible{
    color: #fff;
    text-decoration: none;
}
.top_section_more:hover::before,
.top_section_more:focus-visible::before{
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
}
.top_section_more:hover::after,
.top_section_more:focus-visible::after{
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d20' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
    -webkit-transform: translateX(3px);
            transform: translateX(3px);
}
/* スマホは hover が無いので、押した瞬間に塗る */
.top_section_more:active::before{
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
}
.top_section_more:active{
    color: #fff;
}
/* SP: 131px のままだと 390px で見出し「おすすめ / ピックアップ」が2行に折れたので一回り小さくする */
@media screen and (max-width: 899px){
    .top_section_more{
        gap: 6px;
        min-height: 36px;
        padding: 4px 5px 4px 12px;
        font-size: 13px;
    }
    .top_section_more::after{
        width: 22px;
        height: 22px;
        background-size: 12px 12px;
    }
}
/* 360px ではさらに詰める (見出しとの間も 16px → 6px。見出し 205px + 6 + ボタン 107px = 318px が
   枠の 320px に収まる)。320px は変更前の文字リンクのときから見出しが2行になる幅なので対象外 */
@media screen and (max-width: 360px){
    .top_section_head{
        gap: 6px;
    }
    .top_section_more{
        gap: 5px;
        padding-left: 10px;
    }
    .top_section_more::after{
        width: 20px;
        height: 20px;
    }
}
/* 動きを減らす設定の人には、塗りと色の切り替えだけにする */
@media (prefers-reduced-motion: reduce){
    .top_section_more,
    .top_section_more::before,
    .top_section_more::after{
        -webkit-transition: none;
                transition: none;
    }
    .top_section_more:hover::after,
    .top_section_more:focus-visible::after{
        -webkit-transform: none;
                transform: none;
    }
}
/* #2460 案内カード (ご利用マニュアル / 評価点表 / 出品フロー / お問い合わせ) のボタンも同じ動きにする。
   カード幅いっぱいのボタンなので、文字は中央に置き、丸い矢印は右端に固定する
   (左右の padding は矢印のぶん同じだけ空けて、文字がボタンの中央に来るようにする) */
.info_cards .info_card_btn.top_section_more{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    padding-right: 40px;
    padding-left: 40px;
}
.info_cards .info_card_btn.top_section_more::after{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 7px;
    margin: auto 0;
}
/* 案内カード用の hover (.info_card_btn:hover の淡いオレンジの枠・地) が残ると、
   緑の塗りの周りにベージュの枠が出るので、枠は緑のままにする */
.info_cards .info_card_btn.top_section_more:hover,
.info_cards .info_card_btn.top_section_more:focus-visible{
    border-color: var(--c-green-dark);
    background: #fff;
}
@media screen and (max-width: 899px){
    .info_cards .info_card_btn.top_section_more{
        padding-right: 34px;
        padding-left: 34px;
    }
    .info_cards .info_card_btn.top_section_more::after{
        right: 5px;
    }
}
/* 769〜1100px はお知らせの横でカードが細く (ボタン幅 178〜250px)、
   769px では「ご利用マニュアルを見る」が右端の矢印に 16px 重なっていた。
   文字 13px・矢印 20px に詰め、さらに細い 920px 以下では矢印を出さず塗りの動きだけにする */
@media screen and (min-width: 900px) and (max-width: 1100px){
    .info_cards .info_card_btn.top_section_more{
        padding-right: 30px;
        padding-left: 30px;
        font-size: 13px;
    }
    .info_cards .info_card_btn.top_section_more::after{
        right: 5px;
        width: 20px;
        height: 20px;
        background-size: 11px 11px;
    }
}
@media screen and (min-width: 900px) and (max-width: 920px){
    .info_cards .info_card_btn.top_section_more{
        padding-right: 10px;
        padding-left: 10px;
    }
    .info_cards .info_card_btn.top_section_more::after{
        display: none;
    }
}
/* 見出しを左寄せにしたぶん、セクション全体の中央寄せを解除する */
.lp_contents.top_section{
    text-align: left;
}

/* ---- ピックアップカードの中身（デザイン案準拠） ---- */
.lp_contents .auctions_window .auctions_window_inner .auctions_window_carImg{
    position: relative;
}
.pickup_badge{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 4px 10px;
    /* 白文字を載せる面は濃い緑。#61ad35 だとコントラスト 2.79 (#2460) */
    background: var(--c-green-dark);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
}
.pickup_spec{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    margin-bottom: 3px;
    font-size: 11.5px;
    color: #555;
}
.pickup_spec_sep{
    color: #bbb;
}
/* 詳細 + お気に入り を横並びにする */
.lp_contents .auctions_window .auctions_linkArea{
    display: flex;
    gap: 8px;
}
.lp_contents .auctions_window .auctions_linkArea .btn-01,
.lp_contents .auctions_window .auctions_linkArea .btn-fav{
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 8px 0;
    text-align: center;
    font-size: 12px;
    border-radius: var(--r-sm);
    box-sizing: border-box;
}
.lp_contents .auctions_window .auctions_linkArea .btn-fav{
    display: block;
    background: #fff;
    color: #f08300;
    border: 1px solid #f08300;
}
.lp_contents .auctions_window .auctions_linkArea .btn-fav:hover{
    background: #fff6e8;
    text-decoration: none;
}
/* 登録済み（解除）状態はグレーにして、未登録と区別する */
.lp_contents .auctions_window .auctions_linkArea .btn-fav.is-registered{
    background: #f0f0f0;
    color: #666;
    border-color: #d5d5d5;
}
.lp_contents .auctions_window .auctions_linkArea .btn-fav.is-registered:hover{
    background: #e6e6e6;
}

/* ============================================================
   #2460 ログイン後TOP: デザイン案に合わせた全体調整
   ============================================================ */
/* TOP配下の .container は一律で広げる（親が狭いと子も広がれないため）。
   全セクションの左右位置を揃えるため、基準幅(--content-w)で統一する。 */
/* コンテンツ幅の統一は default.css 側に置く
   （相場検索など auctions.css を読まないページにも効かせるため） */
/* お知らせ + 案内カードの行も同じ幅に揃える */
body:has(.quick_access) .top_content_wrap.flex-box-col{
    max-width: var(--content-w);
    margin-left: auto;
    margin-right: auto;
}
.quick_access,
.top_content_wrap.flex-box-col:has(.info_cards){
    max-width: var(--content-w);
    margin-left: auto;
    margin-right: auto;
}

/* ---- ピックアップ: カードを大きく（デザイン案は1画面に5枚） ---- */
.lp_contents .auctions_window .auctions_window_box{
    flex: 0 0 296px;
    width: 296px;
}
.lp_contents .auctions_window .auctions_window_inner .auctions_window_carImg,
.lp_contents .auctions_window .auctions_window_inner .auctions_window_carImg a{
    height: 168px;
}
.lp_contents .auctions_window .auctions_window_inner .auctions_window_carName{
    font-size: 14px;
}
.pickup_spec{
    font-size: 12px;
}

/* ---- 案内カード: 縦3枚 -> 横並び（デザイン案: お知らせ左・カード右） ----
   お知らせを潰さないよう、左右の比率を明示する。 */
body:has(.quick_access) .top_content_wrap .newsArea{
    flex: 1 1 52%;
    min-width: 0;
}
.info_cards{
    flex-direction: row;
    flex: 1 1 48%;
    min-width: 0;
    gap: 12px;
}
.info_cards .info_card{
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-start;
}

/* ---- おすすめ特集: 2×2 -> 横4枚 ---- */
.eventbox .event_list,
.eventbox ul{
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    max-width: var(--content-w);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* 親の .top_content_wrap が max-width:976px を持つため、TOPでは広げる */
body:has(.quick_access) .top_content_wrap{
    max-width: var(--content-w);
}
.eventbox ul > li{
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

/* ---- 手数料: 白背景・緑の見出し帯 ---- */
.member_xhibit{
    background: #fff;
}
.member_xhibit_foot{
    max-width: var(--content-w);
}
/* 「出品する」ボタンは白地に緑枠（デザイン案） */
.member_xhibit .btn-orange,
.member_xhibit_foot .btn-orange{
    background: #fff;
    color: var(--c-green-dark);
    border: 1px solid #61ad35;
}
.member_xhibit .btn-orange:hover,
.member_xhibit_foot .btn-orange:hover{
    background: #f6faf3;
}

@media screen and (max-width: 899px){
    .lp_contents .auctions_window .auctions_window_box{
        flex: 0 0 200px;
        width: 200px;
    }
    .lp_contents .auctions_window .auctions_window_inner .auctions_window_carImg,
    .lp_contents .auctions_window .auctions_window_inner .auctions_window_carImg a{
        height: 118px;
    }
    .info_cards{
        flex-direction: column;
    }
    .eventbox ul{
        flex-wrap: wrap;
    }
    .eventbox ul > li{
        flex: 1 1 calc(50% - 7px);
    }
}

/* ---- #2460 ピックアップ: デザイン案との微差を詰める ---- */
/* 見出しとカードの左端を揃える（カルーセルは全幅＋64pxのボタン領域を持つため、
   見出し側も同じ位置から始める） */
/* 見出しは他セクション(クイックアクセス/おすすめ特集など)と同じ container 幅に置く */
.lp_contents .top_section_head.container{
    margin-bottom: 14px;
}
/* カードを大きくして1画面5枚にする */
.lp_contents .auctions_window .auctions_window_box{
    flex: 0 0 calc((100% - 4 * 14px) / 5);
    width: auto;
    min-width: 260px;
}
.lp_contents .auctions_window .auctions_window_inner .auctions_window_carImg,
.lp_contents .auctions_window .auctions_window_inner .auctions_window_carImg a{
    height: 186px;
}
/* 車名は太字・濃い青（デザイン案） */
.lp_contents .auctions_window .auctions_window_inner .auctions_window_carName .car_name_td a{
    color: #1a5fa8;
    font-weight: bold;
}
/* 価格を大きく */
.lp_contents .auctions_window .auctions_window_buyout_price{
    padding: 8px 12px 8px;
    font-size: 12px;
}
.lp_contents .auctions_window .auctions_window_buyout_price strong.now_amount{
    font-size: 22px;
}
/* ボタンをしっかり塗る */
.lp_contents .auctions_window .auctions_linkArea .btn-01{
    background: #1f3f94;
    color: #fff;
    font-weight: bold;
    padding: 10px 0;
}
.lp_contents .auctions_window .auctions_linkArea .btn-01:hover{
    background: #17317a;
}
.lp_contents .auctions_window .auctions_linkArea .btn-fav{
    font-weight: bold;
    padding: 10px 0;
}

/* ---- クイックアクセス: デザイン案に合わせて大きく ---- */
.quick_access_item{
    padding: 20px 22px;
    gap: 14px;
}
.quick_access_item .gnav_icon{
    width: 40px;
    height: 40px;
}
.quick_access_title{
    font-size: 16px;
}
.quick_access_note{
    font-size: 12px;
}
/* クイックアクセスをデザイン案の比率に合わせる（カードをやや高く、文字を大きく） */
.quick_access_item{
    padding: 22px 24px;
}
.quick_access_title{
    font-size: 17px;
}
.quick_access_note{
    font-size: 12.5px;
}

/* #2460 各セクション固有の padding を打ち消し、左右位置を完全に揃える */
body:has(.quick_access) .member_xhibit_foot.container{
    padding-left: 0;
    padding-right: 0;
}
/* ご注意点は全ページ共通(1150px)に揃えるため TOP 固有の指定は置かない
   （default.css 側に集約） */
/* #2485 ログイン後TOPだけ 1520px で、他ページと20pxずれていた。
   フッターは全ページ同じ体裁にするため基準に揃える */
body:has(.quick_access) .footer-wrap .footer-main{
    max-width: var(--content-w);
}
/* 手数料は親(.member_xhibit)側の padding、お問い合わせは container 幅の差で
   左端がずれるため、基準(--content-w)に合わせる */
body:has(.quick_access) .member_xhibit.top_content_wrap{
    padding-left: 0;
    padding-right: 0;
}
body:has(.quick_access) .member_xhibit_foot.container{
    /* .container の width:calc(100% - 20px) で内側に寄るため、
       幅と余白を明示して他セクションに揃える */
    width: 100%;
    max-width: var(--content-w);
    padding-left: 0;
    padding-right: 0;
}
/* #2460 お問い合わせは全ページ共通の幅(--content-w)に揃えるため、
   TOP だけ別値にしていた指定は外す（default.css 側に集約） */

/* #2460 お知らせのカテゴリバッジをデザイン案の緑に揃える（TOPのみ）。
   白文字を載せる面なので濃い側の緑 (#61ad35 は 2.79 で読みにくい) */
body:has(.quick_access) .newsArea .news_cat_icon_c{
    background: var(--c-green-dark);
}
body:has(.quick_access) .newsArea .news_cat_icon_b{
    background: var(--c-green-dark);
}

/* ---- #2460 お知らせをデザイン案に合わせる（TOPのみ） ---- */
body:has(.quick_access) .newsArea{
    background: #fff;
    border: 1px solid #e3e6e3;
    border-radius: 6px;
    padding: 20px 24px;
    box-sizing: border-box;
}
body:has(.quick_access) .newsArea .news_titleArea{
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
body:has(.quick_access) .newsArea .news_title{
    font-size: 17px;
    font-weight: bold;
    color: #333;
}
/* 「一覧を見る」は #2460 で「もっと見る」と同じボタン (.top_section_more) にした */
/* 日付・バッジ・見出しの並びを整える */
body:has(.quick_access) .newsArea li{
    align-items: center;
    padding: 4px 0;
}
body:has(.quick_access) .newsArea .published_date{
    font-size: 13px;
    color: #555;
}
body:has(.quick_access) .newsArea [class^="news_cat_icon"]{
    width: 72px;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 2px;
}
body:has(.quick_access) .newsArea li a{
    font-size: 13px;
}
/* #2460 お知らせの行にマウスを乗せたときの動き (業務の指定)。
   サイトの「いまホバー中」の色 (淡いオレンジの地 / 橙の文字) で行全体を塗り、
   右端に矢印をすっと出す。タイトルの文字だけだった押せる範囲を行全体に広げる
   (a の ::before を行いっぱいに敷く)。右端は矢印のぶん空けておく */
body:has(.quick_access) .newsArea li{
    position: relative;
    padding: 6px 24px 6px 6px;
    border-radius: var(--r-sm);
    -webkit-transition: background-color .2s ease;
            transition: background-color .2s ease;
}
body:has(.quick_access) .newsArea li a{
    color: #333;
    -webkit-transition: color .2s ease;
            transition: color .2s ease;
}
body:has(.quick_access) .newsArea li a::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
}
body:has(.quick_access) .newsArea li::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 6px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97d00' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0;
    -webkit-transform: translateX(-6px);
            transform: translateX(-6px);
    -webkit-transition: opacity .2s ease, -webkit-transform .25s cubic-bezier(.2, .8, .2, 1);
            transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}
body:has(.quick_access) .newsArea li:hover,
body:has(.quick_access) .newsArea li:focus-within,
body:has(.quick_access) .newsArea li:active{
    background: var(--c-hover-bg, #fff6e8);
}
body:has(.quick_access) .newsArea li:hover a,
body:has(.quick_access) .newsArea li:focus-within a,
body:has(.quick_access) .newsArea li:active a{
    color: var(--c-hover-text, #d97d00);
    text-decoration: none;
}
body:has(.quick_access) .newsArea li:hover::after,
body:has(.quick_access) .newsArea li:focus-within::after,
body:has(.quick_access) .newsArea li:active::after{
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
/* 行全体を押せるようにしたので、キーボードの選択枠も行に出す */
body:has(.quick_access) .newsArea li a:focus-visible{
    outline: none;
}
body:has(.quick_access) .newsArea li:has(a:focus-visible){
    outline: 2px solid var(--c-hover-border, #f0c99a);
    outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce){
    body:has(.quick_access) .newsArea li,
    body:has(.quick_access) .newsArea li a,
    body:has(.quick_access) .newsArea li::after{
        -webkit-transition: none;
                transition: none;
    }
}
/* #2460 1240px 未満はお知らせの横に案内カードが並んで一覧が狭く、タイトルが日付・カテゴリの右で
   何行にも折れていた (769px で 10行、1024px で 3行)。1行目に日付とカテゴリ、2行目にタイトルを置く。
   SP (768px 以下) は .sp の一覧が同じ2行の並びになっている */
@media screen and (max-width: 1239px){
    body:has(.quick_access) .newsArea li{
        flex-wrap: wrap;
        row-gap: 2px;
    }
    body:has(.quick_access) .newsArea li a{
        flex: 0 0 100%;
    }
}
/* #2460 お知らせの高さを右の案内カード(2段)に揃える (PC)。
   行を stretch にしてお知らせを伸ばし、記事一覧はその残りの高さでスクロールさせる。
   一覧は absolute で置いて自分の高さを持たせないので、行の高さは案内カード側で決まる
   (記事が多くてもカード側が引き伸ばされない)。 */
@media screen and (min-width: 900px){
    body:has(.quick_access) .top_content_wrap.flex-box-col:has(.info_cards){
        align-items: stretch;
    }
    body:has(.quick_access) .newsArea{
        display: flex;
        flex-direction: column;
    }
    body:has(.quick_access) .newsArea .pc{
        position: relative;
        flex: 1 1 auto;
        min-height: 140px; /* 従来の一覧の高さ。これより低くはしない */
    }
    body:has(.quick_access) .newsArea .pc ul{
        position: absolute;
        inset: 0;
        height: auto;
        margin: 0;
    }
}

/* ---- #2460 手数料一覧: 3カラムを枠で囲み、高さと注意書きを整える ---- */
body:has(.quick_access) .member_xhibit_foot_inner{
    display: flex;
    align-items: stretch;   /* 3カラムの高さを揃える */
    gap: 20px;
}
body:has(.quick_access) .member_xhibit_foot_item{
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    margin: 0;
    /* デザイン案は各カラムが枠で囲まれている */
    border: 1px solid #dfe3df;
    border-radius: 4px;
    overflow: hidden;
    padding: 0 0 16px;
    box-sizing: border-box;
}
/* 見出し帯はカラム上辺いっぱいに敷く */
body:has(.quick_access) .member_xhibit_foot_item .ttl-04{
    display: block;
    margin: 0 0 12px;
    padding: 8px 10px;
    /* 白文字を載せる面なので濃い側の緑 (#2460) */
    background: var(--c-green-dark);
    color: #fff;
    /* #2460 手数料一覧は文字が小さく読みづらいとの指摘で、カラム内の文字を一律1.5倍にしている */
    font-size: 21px;
    font-weight: bold;
    text-align: center;
}
body:has(.quick_access) .member_xhibit_foot_item dl{
    margin: 0 0 10px;
    padding: 0 16px;
}
body:has(.quick_access) .member_xhibit_foot_item dt{
    font-size: 19.5px;
    font-weight: bold;
    color: #333;
}
body:has(.quick_access) .member_xhibit_foot_item dd{
    margin: 2px 0 0;
    font-size: 18.75px;
    color: #555;
}
/* キャンペーンの注記(赤字)も本文に合わせて1.5倍 (基底 default.css は 12px) */
body:has(.quick_access) .member_xhibit_foot_item .member_xhibit_note{
    font-size: 18px;
}
/* 3カラムのまま幅が狭くなる 769〜1279px では、1.5倍の文字だと
   「カーネクストユーザーコーナ / ー」「有料会員 / 5,000円」と途中で折れる (実測 1024px)。
   カラム幅に合わせて縮め、1280px 以上では従来の大きさに戻る */
@media screen and (min-width: 900px){
    body:has(.quick_access) .member_xhibit_foot_item .ttl-04{
        font-size: clamp(15px, 1.64vw, 21px);
    }
    body:has(.quick_access) .member_xhibit_foot_item dt{
        font-size: clamp(15px, 1.52vw, 19.5px);
    }
    body:has(.quick_access) .member_xhibit_foot_item dd{
        font-size: clamp(14px, 1.46vw, 18.75px);
    }
}
/* SP / タブレットは default.css で縦積み (flex-direction: column) になる。
   上の flex: 1 1 0 (基準 0) のまま縦積みにすると、各カラムが中身の高さを確保できず
   見出しの帯だけ残して潰れていた (実測 390px / 768px)。縦積みでは中身なりにする */
@media screen and (max-width: 899px){
    body:has(.quick_access) .member_xhibit_foot_item{
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
        width: 100%;
    }
    body:has(.quick_access) .member_xhibit_foot_inner{
        gap: 12px;
    }
}
/* 注意書きは3カラム全体の下に左寄せで置く */
body:has(.quick_access) .member_xhibit_text{
    margin: 16px 0 0;
    font-size: 11.5px;
    line-height: 1.8;
    color: #777;
    text-align: left;
}
/* 出品するボタンは白地に緑枠（デザイン案） */
/* 基底の .btn-03 が 24px で、MV の主要CTA(22px)より大きかった。
   同じページに一番強い導線が2つある形になるので、こちらは副次として16pxに落とす (#2460)
   その後、文言を「まずは出品する」に変え、目立たせたいとの要望で1.5倍(24px)に戻している。
   #2460 業務の指定で「もっと見る」と同じ動きのあるボタン (.top_section_more) にした。
   大きさ (24px) と中央寄せは保ち、文字はボタンの中央、丸い矢印は右端に置く */
.member_xhibit .member_xhibit_cta{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* 文字を中央・矢印を右端に離して置くと、文字の左に大きな空きができて
       左右の釣り合いが悪く見えた (業務の指摘)。「もっと見る」と同じく
       「文字 → 丸い矢印」を並べた幅にして、ボタンごと中央に置く。
       丸い矢印は上下・右の余白が同じ 11px になるようにし、文字の左はそれより広めに取る */
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    min-height: 60px;
    gap: 16px;
    margin: 22px auto 0;
    padding: 8px 11px 8px 30px;
    font-size: 24px;
}
.member_xhibit .member_xhibit_cta::after{
    width: 38px;
    height: 38px;
    background-size: 18px 18px;
}
@media screen and (max-width: 899px){
    .member_xhibit .member_xhibit_cta{
        min-height: 52px;
        gap: 12px;
        padding: 6px 10px 6px 24px;
        font-size: 20px;
    }
    .member_xhibit .member_xhibit_cta::after{
        width: 32px;
        height: 32px;
        background-size: 15px 15px;
    }
}

/* ============================================================
   #2460 Phase C 出品車両一覧（リユース）
   ============================================================ */

/* ---- 結果ヘッダー: 件数・並び替え・表示件数・表示形式 ---- */
.reuse_auctions_content_tt{
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.reuse_auctions_content_tt .content_tt_result{
    font-size: 14px;
    color: #333;
}
.reuse_auctions_content_tt .content_tt_s{
    font-size: 22px;
    font-weight: bold;
    color: var(--c-green-dark);
    margin: 0 2px;
}
.reuse_auctions_content_tt .content_tt_unit{
    font-size: 13px;
}
/* 表示件数は並び替えと同じ体裁に揃える */
.reuse_auctions_content_tt .content_tt_perpage{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.reuse_auctions_content_tt .content_tt_perpage label{
    margin: 0;
    font-size: 13px;
    white-space: nowrap;
}
.reuse_auctions_content_tt .content_tt_perpage select{
    width: auto;
    min-width: 92px;
}
/* 表示形式の切替ボタン */
.reuse_auctions_content_tt .content_tt_view{
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
}
.view_switch_btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: #fff;
    color: #999;
    border: 1px solid #dcdfd9;
    border-radius: 4px;
    cursor: pointer;
}
.view_switch_btn:hover{
    color: #d97d00;
    border-color: #f0c99a;
    background: #fff6e8;
}
.view_switch_btn.is_active{
    color: #fff;
    background: #61ad35;
    border-color: #61ad35;
}

/* ---- グリッド表示 ---- */
.reuse_auctions_window.is_grid_view{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.reuse_auctions_window.is_grid_view .auctions_window_box{
    flex: 0 0 calc((100% - 3 * 16px) / 4);
    width: auto;
    margin: 0;
    padding: 0;
    border: 1px solid #e3e6e3;
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
}
.reuse_auctions_window.is_grid_view .auctions_window_box:nth-child(2n+1){
    background: #fff;
}
/* グリッドでは横並びのグリッドレイアウトをやめて縦積みにする */
.reuse_auctions_window.is_grid_view .auctions_window_inner{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.reuse_auctions_window.is_grid_view .auctions_window_carImg{
    margin-right: 0;
}
.reuse_auctions_window.is_grid_view .auctions_window_carImg a{
    height: 150px;
}
.reuse_auctions_window.is_grid_view .auctions_window_carImg img{
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    position: static;
    transform: none;
}
.reuse_auctions_window.is_grid_view .auctions_window_desc,
.reuse_auctions_window.is_grid_view .auctions_window_carName{
    padding: 0 12px;
}
.reuse_auctions_window.is_grid_view .auctions_window_carDesc{
    display: none;
}
.reuse_auctions_window.is_grid_view .auctions_linkArea{
    width: auto;
    margin-top: auto;
    padding: 0 12px 12px;
    text-align: left;
}

@media screen and (max-width: 899px){
    /* SPはグリッド切替を出さない（1カラムのため） */
    .reuse_auctions_content_tt .content_tt_view{
        display: none;
    }
    .reuse_auctions_content_tt{
        gap: 12px;
    }
}
/* グリッド表示では親を flex にするため、子に残る grid-area を打ち消して
   画像→車名→スペック→価格→締切→ボタン の順に並べ直す */
.reuse_auctions_window.is_grid_view .auctions_window_inner > *{
    grid-area: auto !important;
}
.reuse_auctions_window.is_grid_view .auctions_window_carImg{ order: 1; }
.reuse_auctions_window.is_grid_view .auctions_window_carName{ order: 2; margin: 10px 0 6px; }
.reuse_auctions_window.is_grid_view .auctions_window_desc{ order: 3; }
.reuse_auctions_window.is_grid_view .auctions_window_tender_count{ order: 4; padding: 0 12px; text-align: left; font-size: 12px; }
.reuse_auctions_window.is_grid_view .auctions_window_buyout_price{ order: 5; padding: 4px 12px; }
.reuse_auctions_window.is_grid_view .auctions_window_end_at{ order: 6; padding: 0 12px 8px; font-size: 12px; }
.reuse_auctions_window.is_grid_view .auctions_linkArea{ order: 7; }
/* グリッド表示のテキストは左寄せに揃える（リスト表示の右寄せを打ち消す） */
.reuse_auctions_window.is_grid_view .auctions_window_tender_count,
.reuse_auctions_window.is_grid_view .auctions_window_buyout_price,
.reuse_auctions_window.is_grid_view .auctions_window_end_at{
    text-align: left;
}
.reuse_auctions_window.is_grid_view .auctions_linkArea .flex-box-col > div{
    width: 48%;
}

/* ---- #2460 一覧カードのボタン（デザイン案: お気に入り=白枠 / 詳細を見る=緑）
   カード型の全コーナー（リユース/カーネクスト/プロ出品/損害車）で共通 ---- */
/* 塗りの面は濃い緑。#61ad35 に白文字だとコントラストが 2.79 しかなく
   (WCAG AA は 4.5 が必要)、屋外や低照度で読みにくい。
   #2f7d20 なら 5.15 で通る。枠線・アイコン・罫線の緑は #61ad35 のまま。 (#2460) */
.auctions_window.is_card_view .auctions_linkArea .btn-01{
    background: var(--c-green-dark);
    color: #fff;
    font-weight: bold;
    /* 隣の .btn-02(お気に入り)は枠線1pxを持つため、同じ padding でも
       2px 低くなって上下で高さが揃わなかった。透明の枠線で合わせる */
    border: 1px solid transparent;
}
.auctions_window.is_card_view .auctions_linkArea .btn-01:hover{
    background: #26661a;
}
.auctions_window.is_card_view .auctions_linkArea .btn-02{
    background: #fff;
    color: var(--c-text-sub);
    /* 枠線は入力欄・白ボタンと同じ #dcdfd9 に (ここだけ #ccc だった) */
    border: 1px solid var(--c-border);
    font-weight: normal;
}
/* hover はオレンジ。グレーに沈む形だと「押せなくなった」ように見え、
   サイトの他の白ボタン(詳細条件・条件をクリア等)とも語彙が違っていた */
.auctions_window.is_card_view .auctions_linkArea .btn-02:hover{
    background: var(--c-hover-bg);
    border-color: var(--c-hover-border);
    color: var(--c-hover-text);
}
/* お気に入り登録済み。グレーだと押せない物に見えるので、
   「入っている」ことが分かる緑の淡色にする（文字は 5.15 の濃い緑） */
.auctions_window.is_card_view .auctions_linkArea .btn-02.delete_watch_list{
    background: #fff;
    color: var(--c-green-dark);
    border-color: var(--c-green-dark);
    font-weight: bold;
}
.auctions_window.is_card_view .auctions_linkArea .btn-02.delete_watch_list:hover{
    background: var(--c-hover-bg);
    border-color: var(--c-hover-border);
    color: var(--c-hover-text);
}
/* リユース以外の3コーナーは Blade 上「詳細 → お気に入り」の順だが、
   デザイン案は「お気に入り（上）→ 詳細（下）」。表示順だけ入れ替える。 */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .flex-box-col > div:has(.btn-01){
    order: 2;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .flex-box-col > div:has(.btn-02){
    order: 1;
}
/* 登録済み（解除）。入っていることが分かる緑の淡色にする */
.reuse_auctions_window .auctions_linkArea .btn-02.delete_watch_list{
    background: #fff;
    color: var(--c-green-dark);
    border-color: var(--c-green-dark);
    font-weight: bold;
}

/* ---- #2460 検索バー（常設・横一列） ---- */
.search_bar{
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin: 0 0 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #e3e6e3;
    border-radius: 6px;
    box-sizing: border-box;
}
.search_bar_field{
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.search_bar_field > label{
    margin: 0;
    font-size: 12px;
    font-weight: normal;
    color: #666;
}
.search_bar_keyword{
    flex: 1 1 320px;
}
/* キーワードは虫眼鏡をテキスト欄の中に重ねる */
.search_bar_keyword_input{
    position: relative;
}
.search_bar_keyword_input input{
    width: 100%;
    height: 40px;
    padding: 0 38px 0 12px;
    border: 1px solid #dcdfd9;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}
.search_bar_keyword_input svg{
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}
.search_bar_field select{
    height: 40px;
    min-width: 150px;
    padding: 0 8px;
    border: 1px solid #dcdfd9;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}
/* 年式は from 〜 to の2つ */
.search_bar_range{
    display: flex;
    align-items: center;
    gap: 8px;
}
.search_bar_range select{
    min-width: 116px;
}
.search_bar_range_sep{
    color: #999;
}
/* 右端のボタン群 */
.search_bar_actions{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.search_bar_detail{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    background: #fff;
    color: #555;
    border: 1px solid #dcdfd9;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
}
.search_bar_detail:hover{
    background: #fff6e8;
    border-color: #f0c99a;
    color: #d97d00;
    text-decoration: none;
}
.search_bar_submit{
    height: 40px;
    padding: 0 28px;
    /* 白文字を載せる面は濃い緑 (#2460) */
    background: var(--c-green-dark);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
}
.search_bar_submit:hover{
    background: #26661a;
}

@media screen and (max-width: 899px){
    /* SPは縦積みにして各欄を全幅にする */
    .search_bar{
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
    }
    .search_bar_keyword{
        flex: 1 1 auto;
    }
    .search_bar_field select,
    .search_bar_range select{
        width: 100%;
        min-width: 0;
    }
    .search_bar_actions{
        margin-left: 0;
    }
    .search_bar_detail,
    .search_bar_submit{
        flex: 1 1 0;
        justify-content: center;
    }
}

/* ---- #2460 条件チップ ---- */
.search_chips{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}
.search_chip{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #fff;
    color: #444;
    border: 1px solid #dcdfd9;
    border-radius: var(--r-pill);
    font-size: 12.5px;
    line-height: 1.4;
    cursor: pointer;
}
.search_chip:hover{
    background: #fff6e8;
    border-color: #f0c99a;
    color: #d97d00;
}
.search_chip_x{
    color: #999;
    font-size: 13px;
}
.search_chip:hover .search_chip_x{
    color: #d97d00;
}
.search_chip_clear{
    padding: 6px 4px;
    background: none;
    border: none;
    color: var(--c-green-dark);
    font-size: 12.5px;
    cursor: pointer;
}
.search_chip_clear:hover{
    color: #d97d00;
    text-decoration: underline;
}

/* ============================================================
   #2460 検索バーの「詳細条件」と「表示件数」の体裁を揃える
   ============================================================ */

/* ---- 詳細条件: 旧デザインの丸ピル(#search_form_button)を打ち消す ----
   default.css の #search_form_button は ID 指定のため
   .search_bar_detail のクラス指定では勝てない。同じ ID で上書きする。 */
#search_form_button.search_bar_detail{
    /* a要素のため content-box が効いており、境界線ぶん 2px 高くなる */
    box-sizing: border-box;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #dcdfd9;
    border-radius: 4px;
    font-weight: normal;
}
#search_form_button.search_bar_detail:hover{
    background: #fff6e8;
    border-color: #f0c99a;
    color: #d97d00;
}
/* 開いている間は押下状態が分かるようにする */
#search_form_button.search_bar_detail.is_open{
    background: #fff6e8;
    border-color: #f0c99a;
    color: #d97d00;
}

/* ---- 表示件数: 並び替えと同じ下向き三角を出してプルダウンと分かるようにする ---- */
.reuse_auctions_content_tt .content_tt_perpage select{
    height: 30px;
    padding: 3px 26px 3px 8px;
    font-size: 13px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23535353' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 10px 6px;
}

/* ============================================================
   #2460 リユース一覧 検索結果カードのデザイン改修
   ------------------------------------------------------------
   デザイン案は「白いカードが1件ずつ独立して並ぶ」構成。
   現行は1枚の枠の中で奇数行だけ地色を変える縞模様だったため、
   枠を外してカード単位に分割する。
   ※ グリッド表示(.is_grid_view)は既存の指定を活かすため、
     ここはリスト表示(:not(.is_grid_view))に限定する。
   ============================================================ */
.auctions_window.is_card_view:not(.is_grid_view){
    /* 外枠をやめ、カード間の隙間で区切りを見せる */
    border: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_box{
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e3e6e0;
    border-radius: 6px;
    transition: border-color .15s, box-shadow .15s;
}
/* 縞模様をやめて全カード白にする */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_box:nth-child(odd){
    background: #fff;
}
/* #2460 hover で影が付いて浮いていたが、カード自体はリンクではない(cursor:auto)。
   「押せそう」に見えて押しても反応しないので、浮かせるのをやめた。
   枠線が少し濃くなるだけにして「今この行を見ている」ことだけを伝える。
   押せるのは写真・車名・詳細を見る・お気に入りの4つ。 */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_box:hover{
    border-color: #c6cfc2;
    background: #fcfdfb;
}

/* ---- コーナーバッジは写真の左上に重ねる（デザイン案どおり） ---- */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carImg{
    position: relative;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carImg .icon_corner_scrap,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carImg .icon_corner_trader,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carImg .icon_corner_songaisha{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: auto;
    max-width: none;
    margin-bottom: 0;
    padding: 3px 8px;
    font-size: 10px;
    border-radius: 6px 0 4px 0;
    background-color: rgba(90, 90, 90, .88);
}

/* ---- 列幅を明示して右側の間延びを解消する ----
   元の grid-template-columns は `150px 1fr` の2列しか定義しておらず、
   3・4列目（価格 / 入札件数・締切・ボタン）は暗黙の列になっていた。
   そのため 2列目のスペックが余白をすべて吸い、
   スペックと右列の間が大きく空いていた。
   デザイン案は各ブロックが詰まって並ぶ構成のため、右2列の幅を固定する。 */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner{
    grid-template-columns: 150px minmax(0, 1fr) auto 300px;
    column-gap: 16px;
}
/* スペックは内容ぶんの幅に留め、余白は右列との間ではなく
   スペック列の内側で吸収させる */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carDesc{
    justify-content: flex-start;
}
/* 価格は右列のすぐ左に寄せる */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_buyout_price{
    white-space: nowrap;
    align-self: end;
}
/* ボタンは固定幅をやめ、4列目の幅に収める */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea{
    width: auto;
}

/* ---- 右列の並びをデザイン案に合わせる ----
   デザイン案は右列に
     入札件数 → 入札締切日時 → 引取日時 → 現在価格
   が上から縦に並び、その左にボタンが来る構成。
   現行は現在価格だけが別列(3列目)にあり、宙に浮いて見えていたため
   右列(4列目)に入れて日時の下に置く。 */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner{
    /* 価格を4列目に移すぶん、3列目(旧・価格列)は不要になる */
    grid-template-columns: 150px minmax(0, 1fr) auto 300px;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_buyout_price{
    grid-column: 4 / 5;
    grid-row: 3 / 4;
    align-self: start;
    text-align: right;
    margin-top: 2px;
    white-space: nowrap;
}
/* ボタンは価格の下（最終行）に置く */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea{
    grid-column: 4 / 5;
    grid-row: 4 / 5;
    margin-top: 6px;
}
/* スペックはボタン行まで縦に使えるようにして、カードの高さを揃える */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_desc{
    grid-row: 2 / 5;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carImg{
    grid-row: 1 / 5;
}

/* 価格を右列に移した結果、行が1つ増えてカードが縦に伸び、
   スペックが車名から離れて見えるようになった。
   スペックは車名の直下に置き、余った高さは右列側で吸収させる。 */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_desc{
    align-self: start;
    margin-top: 2px;
}

/* ============================================================
   #2460 リユース一覧カード デザイン案との整合
   ------------------------------------------------------------
   デザイン案は「1件が横1行に収まるコンパクトなカード」。
   写真は小さめ、スペックは行間を詰め、
   ボタンは右端に縦2段（お気に入り → 詳細を見る）で並ぶ。
   ============================================================ */

/* ---- 写真: 小さめの横長にして、カードの高さを抑える ---- */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner{
    /* 写真 / スペック / (予備) / 日時・価格 / ボタン の5列
       写真列は「カーネクストコーナー」バッジが省略されずに収まる幅にする */
    grid-template-columns: 132px minmax(0, 1fr) 0 auto 150px;
    column-gap: 14px;
    align-items: start;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carImg a{
    height: 74px;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carImg img{
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- カード全体の余白を詰める ---- */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_box{
    padding: 10px 14px;
}

/* ---- スペック: 行間を詰めて2列を近づける ---- */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carDesc dt,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carDesc dd{
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 12px;
    line-height: 1.5;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carDesc dl:not(:first-child){
    margin-left: 18px;
    padding-left: 18px;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carName{
    margin-bottom: 4px !important;
}

/* ---- 右列: 日時と価格を詰める ---- */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_tender_count,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_end_at{
    font-size: 12px;
    line-height: 1.6;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_buyout_price{
    margin-top: 0;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_buyout_price .now_amount{
    font-size: 22px;
}

/* 現在価格は本文色の太字にする (#2460)
   純赤(.red = red)で 22px の数字が1画面に20件並び、
   同じ赤で出る「〆近」バッジやエラー表示が埋もれていた。
   価格は警告ではないので赤を使わず、大きさと太字だけで目立たせる。
   赤は「締切が近い」「エラー」「必須」に集中させる。
   .red は汎用クラス(29箇所)なので触らず、価格の要素だけを上書きする。 */
.auctions_window .auctions_window_buyout_price .now_amount,
.auctions_window .auctions_window_buyout_price .now_amount.red{
    color: var(--c-text);
}

/* ---- ボタン: 右端に縦2段（デザイン案どおり） ---- */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea{
    grid-column: 5 / 6;
    grid-row: 1 / 5;
    width: auto;
    margin-top: 0;
    align-self: center;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .flex-box-col{
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .flex-box-col > div{
    width: 100%;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .btn-01,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .btn-02{
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    box-shadow: none;
}

/* 写真を120pxに縮めたことでバッジの文字が折り返して切れたため、
   文字を1回り小さくして1行に収める。 */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carImg .icon_corner_scrap,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carImg .icon_corner_trader,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carImg .icon_corner_songaisha{
    font-size: 9px;
    padding: 2px 4px;
    white-space: nowrap;
    letter-spacing: -.04em;
    /* 「カーネクストコーナー」は字間を詰めても写真幅(110px)を超える。
       バッジは position:absolute で基準が写真リンクではなく外側の枠のため、
       max-width:100% では写真幅に収まらない。右端も固定して写真幅に一致させる。 */
    right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    text-align: center;
}

/* ============================================================
   #2460 カード型を全コーナー共通にするための調整
   ------------------------------------------------------------
   リユース以外の3コーナー（カーネクスト/プロ出品/損害車）は
   出品番号が .auctions_window_ttl として車名の上に別行で入る。
   リユースは車名行に統合しているため、この行のぶん構成がずれる。
   出品番号を車名行と同じ高さに畳んで、4コーナーの見た目を揃える。
   ============================================================ */
/* 出品番号は Blade 側で車名行に移したため、リユースと同じ構成になる。
   出品番号の体裁だけ揃える（リユースの .auction_id_td と同じ）。 */
.auctions_window.is_card_view .auctions_window_carName .auction_id_td{
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
    color: #535353;
}

/* ============================================================
   #2460 コーナーバッジは写真に重ねず、写真の上に置く
   ------------------------------------------------------------
   写真の左上に重ねていたが、車両が隠れるためバッジは上付きにする。
   写真はバッジの下に残った領域で上下センターに配置する。
   ============================================================ */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carImg{
    /* バッジ(上) → 写真(下) の縦積み。写真側で余った高さを吸う */
    display: flex;
    flex-direction: column;
}
/* 先に書いた重ね配置のルールが .auctions_window_inner を含むぶん詳細度が高い。
   打ち消すため同じ形にそろえる。 */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carImg .icon_corner_scrap,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carImg .icon_corner_trader,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carImg .icon_corner_songaisha{
    /* 重ね配置をやめて通常フローに戻す */
    position: static;
    flex: 0 0 auto;
    display: block;
    width: 100%;
    margin-bottom: 4px;
    border-radius: var(--r-sm);
    /* 重ねないので地色は透過させない */
    background-color: #5a5a5a;
}
/* 写真は残りの高さいっぱいを使い、その中で上下センターに置く */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carImg a{
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carImg img{
    /* 親が flex になったため、従来の absolute + translate による
       中央寄せは不要。object-fit で枠に収める */
    position: static;
    transform: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}

/* ============================================================
   #2460 Phase F 業者ページのトンマナ統一

   一覧ページ（リユース等）で整えた語彙を、落札・受注管理 / 自社出品管理 /
   見積依頼 / 入金一覧 / お気に入り にも広げる。

   このファイルは default.css の後に読まれるため、default.css 側の
   同名クラスに勝つ必要がある指定はここに置く（ガイドライン 4-4）。
   ============================================================ */

/* ---- 表ヘッダ ----
   #7f7f7f のベタ塗りグレーは行の内容より重く、見出しのほうが目立っていた。
   淡い地色 + 罫線に変え、文字色で読ませる。 */
.table-auctions-thead .table-panel{
    background-color: #f2f3f0;
    border-color: #e4e4e4;
    color: #555;
    font-weight: bold;
}
.table-auctions-thead .table-panel a{
    color: #555;
}
.table-auctions-thead .table-panel a:hover{
    color: #d97d00;
}
/* 表の外枠は一覧カードと同じ罫線色・角丸にそろえる */
.table-auctions{
    border-color: #e3e6e0;
    border-radius: 6px;
    overflow: hidden;
}

/* ---- ステータスバッジ ----
   ティール(#49bdb1)・サーモン(#e28887)・紫(#b49ccb)・紫青(#3832b2)・
   黄土(#cec30f) の5色が混在していた。読み取りたいのは
   「進行中か、終わったか」だけなので3色に整理する。
   .status_num_* は .s_* と同じ要素に付くため、あとに書いて上書きする。 */
.s_n,
.s_e,
.s_e2,
.s_e3,
.s_e4,
.s_s{
    border-radius: 4px;
    font-size: 12px;
}
/* 出品中・進行中。白文字を載せる面なので濃い側の緑
   (すぐ下の「終了（落札）」と同じ理由。#61ad35 は 2.79) */
.s_n,
.s_n.status_num_1,
.s_n.status_num_scrap{
    background: var(--c-green-dark);
}
/* 終了（落札）— 成果が出た状態。白文字を載せるため濃い側の緑にする
   (#61ad35 に白文字はコントラスト2.79) */
.s_e,
.s_e.status_num_1,
.s_e.status_num_3{
    background: #2f7d20;
}
/* 終了（流札）・その他終了・停止中 — 結果が出ていないのでグレーに退かせる */
.s_e2,
.s_e3,
.s_e4,
.s_s,
.s_e2.status_num_1,
.s_e2.status_num_3,
.s_e3.status_num_1,
.s_e3.status_num_3,
.s_e4.status_num_1,
.s_e4.status_num_3{
    background: #8a8a8a;
}

/* ---- 検索フォームの開閉ボタン ----
   管理系ページは .btn.btn-default.btn_b（角丸20pxの丸ピル・高さ42px）のままで、
   一覧ページの .search_bar_detail と体裁が違っていた。
   Blade 側でクラスを揃えたうえで、ID指定の旧デザインに勝つよう高さを明示する。 */
#search_form_button.search_bar_detail{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    color: #555;
    font-size: 13px;
    text-decoration: none;
}

/* ---- コーナータブ（落札・受注管理 / 支払請求管理） ----
   一覧ページのタブはメガメニューに置き換えて削除したが、こちらは
   メガメニューが各コーナーのリンクを持たないため導線として残している。
   見た目だけ検索まわりの部品（白地・角丸4px・hoverはオレンジ）に揃える。

   選択中だけは面で塗って現在地を示す。#61ad35 に白文字はコントラスト2.79
   なので、濃い側の緑にして読めるようにする。 */
.corner_tab_flat .link{
    box-sizing: border-box;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dcdfd9;
    border-left: none;
    color: #555;
    font-size: 13px;
    text-decoration: none;
}
.corner_tab_flat .link:first-of-type{
    border-left: 1px solid #dcdfd9;
    border-radius: 4px 0 0 4px;
}
.corner_tab_flat .link:last-of-type{
    border-radius: 0 4px 4px 0;
}
.corner_tab_flat .link:hover{
    background-color: #fff6e8;
    border-color: #f0c99a;
    color: #d97d00;
}
.corner_tab_flat .link[active="1"]{
    background-color: #2f7d20;
    border-color: #2f7d20;
    color: #fff;
    font-weight: bold;
}
/* 選択中はホバーしても現在地の見え方を保つ */
.corner_tab_flat .link[active="1"]:hover{
    background-color: #2f7d20;
    border-color: #2f7d20;
    color: #fff;
}

/* ---- お知らせのカテゴリバッジ（一覧ページ /articles） ----
   TOP は #2460 で緑に揃えたが、一覧ページは
   赤(#dd6565) / 黄緑(#a6c056) / 紫(#8d6c9f) のままだった。
   サイトの色に寄せつつ、「お願い」は行動を促す種別なので
   他2種と区別できるようオレンジ側に置く。 */
/* 白文字を載せる面なので、どちらも濃い側にする。
   #d97d00 は 3.05、#61ad35 は 2.79 で基準(4.5)に届かなかった。 */
.archive_newsList .news_cat_icon_a{
    background: #c05600;
}
.archive_newsList .news_cat_icon_b,
.archive_newsList .news_cat_icon_c{
    background: var(--c-green-dark);
}
/* 一覧ページのバッジもTOPと同じ角丸・字送りにする */
.archive_newsList [class^="news_cat_icon"]{
    border-radius: 2px;
}

/* ---- お気に入り一覧（/watch_lists）をカード型に合わせる ----
   一覧4コーナーはカード型に統一済みだが、この画面だけ旧レイアウト
   （灰色のベタ地・角丸なし・青ボタン）のまま残っていた。

   3コーナーが混在するためコーナー種別バッジを写真の上に置く。
   既存の .icon_corner_scrap / _trader はリユース一覧限定の指定なので、
   ここでは共通の見た目をカード型全体に対して定義する。 */
.auctions_window.is_card_view .auctions_window_carImg [class^="icon_corner_"]{
    display: block;
    box-sizing: border-box;
    color: #fff;
    background-color: #5a5a5a;
    font-weight: bold;
    text-align: center;
}

/* 登録済み（解除）ボタンはリユース一覧限定の指定だったため、
   お気に入り一覧ではカード型の副次ボタン色が当たらず枠線だけになっていた。
   カード型全体に広げる。 */
.auctions_window.is_card_view .auctions_linkArea .btn-02.delete_watch_list{
    background: #fff;
    color: var(--c-green-dark);
    border-color: var(--c-green-dark);
    font-weight: bold;
}

/* ---- 「出品する」ボタン（自社出品車両管理） ----
   黄色(#fee408)はサイト内でここだけになっており、TOPの同じ行き先のボタン
   （.btn-03 / 白地に緑文字）と見た目が揃っていなかった。
   ページ内で最も強い動線であることは保ったまま緑の主要ボタンにする。
   白文字を載せる面なので濃い側の緑を使う。 */
.btn_exhibit_add{
    color: #fff;
    background: #2f7d20;
    border-color: #2f7d20;
    /* 立体的な押し込み表現はサイトの他のボタンに無いので外す */
    box-shadow: none;
}
.btn_exhibit_add:hover{
    color: #fff;
    background: #266617;
    opacity: 1;
}

/* ---- ページネーション ----
   現在ページが Bootstrap 既定の青(#428bca)のままで、サイトのどの色とも
   揃っていなかった。現在地を示す面なので、白文字が読める濃い側の緑にする。 */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus{
    background-color: #2f7d20;
    border-color: #2f7d20;
}
.pagination > li > a{
    color: #555;
}
.pagination > li > a:hover{
    background-color: #fff6e8;
    border-color: #f0c99a;
    color: #d97d00;
}

/* ---- 本文中のリンク ----
   基底の a{color:#428bca} が残っており、Bootstrap 既定の青が
   お知らせのタイトルや表の中のリンクに出ていた。
   本文のリンクは文字色のまま置き、hover でオレンジにする
   （緑=押せる主要動線 / オレンジ=いまホバー中、の役割分担に合わせる）。
   ボタン・バッジ・ページャなど、面で塗ってある部品は対象から外す。 */
.head_height.container .archive_newsList a,
.head_height.container .table-auctions a:not(.btn):not([class*="btn-"]),
.head_height.container .download_document a{
    color: #333;
}
.head_height.container .archive_newsList a:hover,
.head_height.container .table-auctions a:not(.btn):not([class*="btn-"]):hover,
.head_height.container .download_document a:hover{
    color: #d97d00;
}

/* ---- 各種設定タブの文字色 ----
   タブは .download_document の中にあるため上の本文リンク指定に巻き込まれ、
   現在地の緑地に #333 が乗ってコントラストが 2.4 まで落ちていた。
   面で塗るタブの文字は白に固定する。
   上の指定と同じ詳細度では後勝ちできないため、.nav-tabs を挟んで上回る。 */
.head_height.container .download_document .nav-tabs .content_tab a{
    color: #555;
}
.head_height.container .download_document .nav-tabs .content_tab a:hover{
    color: #d97d00;
}
.head_height.container .download_document .nav-tabs .content_tab.active a,
.head_height.container .download_document .nav-tabs .content_tab.active a:hover,
.head_height.container .download_document .nav-tabs .content_tab.active a:focus{
    color: #fff;
}

/* ---- 規約・操作マニュアル（/download） ----
   表に検索フォーム用の .t_width（max-width:684px + margin:0 auto）を流用しており、
   1150px の本文幅に対して左右に233pxずつ空いて中央に浮いて見えていた。
   見出しは左端から始まっているので、表も左端に揃える。 */
.download_document .t_width{
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

/* ---- TOP ピックアップカードのボタン ----
   詳細が紺(#1f3f94)、お気に入りがオレンジ枠(#f08300)で、
   一覧カード（詳細=緑 / お気に入り=白地グレー枠）と揃っていなかった。
   同じ役割のボタンなので一覧カードの基準値に寄せる。
   オレンジは「いまホバー中」に役割を割り当てているため、
   常時オレンジで塗るのはやめて hover のときだけ出す。 */
/* #2460 カード型(.is_card_view)と同じ値にする。
   同じ「詳細を見る」なのに、TOP・詳細ページのおススメ車両だけ
   緑が薄く(#61ad35)・文字が12px・角丸3px で、一覧のカードと別物に見えていた。
   実測で62件と、サイト内で最も数の多い不統一だった。 */
.lp_contents .auctions_window .auctions_linkArea .btn-01{
    background: var(--c-green-dark);
    font-size: 14px;
    font-weight: bold;
    border-radius: var(--r-sm);
}
.lp_contents .auctions_window .auctions_linkArea .btn-01:hover{
    background: #26661a;
}
.lp_contents .auctions_window .auctions_linkArea .btn-fav{
    color: var(--c-text-sub);
    border-color: var(--c-border);
    font-size: 14px;
    font-weight: normal;
    border-radius: var(--r-sm);
}
.lp_contents .auctions_window .auctions_linkArea .btn-fav:hover{
    background: #fff6e8;
    border-color: #f0c99a;
    color: #d97d00;
}

/* SPでは .auctions_window が width:calc(100% + 20px) + margin-left:-10px で
   左右に10pxずつ食み出す設計になっている（親が左右パディングを持つ前提）。
   お気に入り一覧のカードは .auctions index の外（.head_height.container 直下）に
   あり、default.css の `> *` 指定で margin-right:auto が当たって
   左のマイナスマージンが相殺されず、右に20px食み出して横スクロールが出ていた。
   ここだけ食み出しをやめて親の幅に収める。 */
@media screen and (max-width: 899px){
    .head_height.container > .auctions_window.is_card_view{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        /* #2460 食み出しをやめたぶん、内側の左右 10px が残ってカードが他の一覧より 20px 狭かった。
           内側の余白を 0 にして、カードの幅を他の一覧 (画面幅 − 20px) と揃える */
        padding-left: 0;
        padding-right: 0;
    }
}

/* SP: スペックの2列目が縦積みに崩れるのを直す。
   .auctions_window_carDesc は PC でだけ横2列（flex）になり、SP では block。
   そこに PC 用の「2列目を18px右へ離す」指定（margin-left/padding-left）が
   メディアクエリ無しで当たっており、170px の幅から36px を奪って
   dt と dd が重なっていた（燃料・車検・自走・保管場所の4行）。
   縦積みでは列を離す必要が無いので SP では打ち消す。 (#2460) */
@media screen and (max-width: 899px){
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carDesc dl:not(:first-child){
        margin-left: 0;
        padding-left: 0;
    }
}

/* _________________________________________ 書類確認のお知らせ
   落札・受注管理（3コーナー共通）。元は全文が赤字・中央寄せで強弱が無く、
   どこを読めばよいか分からなかった。文言は変えず優先順位だけを付ける。

   依頼事項は2件あるので番号付きのカードを横に並べ、
   「やることが2つある」ことを形で示す。同じページの書類送付バナーも
   番号付きステップなので語彙が揃う。
   左に太い色帯を立てる形は使わない（テンプレート然として見えるため）。
   親が .pc.align-center のため中央寄せを打ち消して左から読ませる。 (#2460)
 _________________________________________ */
.doc_notice{
    text-align: left;
    margin: 0 0 24px;
    /* 左に赤の縦帯。ガイドライン 6-4 の「警告色は細い縦帯と見出しだけに絞る」に戻す */
    border: 1px solid var(--c-danger-line);
    border-left: 4px solid var(--c-danger);
    border-radius: var(--r-md);
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
}

/* ---- 見出し ----
   #2460 赤ベタの全幅帯をやめた。
   帯が一覧の表より強く、ページの主役が入れ替わっていた
   (ガイドライン 6-4 に「赤いベタ塗りにすると本体が読めなくなるので
    警告色は細い縦帯と見出しだけに絞る」と書いてある方針から
    実装だけが逸脱していた)。
   地色は淡いベージュ、文字は赤の太字にする。#c0392b はサイト未登録の赤だった。 */
.doc_notice .doc_notice_ttl{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 20px;
    background: #fdf8f4;
    border-bottom: 1px solid #f0e4dc;
    color: var(--c-danger);
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
}
.doc_notice .doc_notice_ttl_text{
    flex: 1 1 auto;
    min-width: 0;
}
/* 見出しの右端に置くラベル。白抜きから、赤の面に白文字の小さなバッジへ
   (帯が白地になったので半透明の白では見えない) */
.doc_notice .doc_notice_badge{
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: var(--r-sm);
    background: var(--c-danger);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .08em;
}

/* ---- 依頼事項: 番号付きカードを横に2枚並べる ---- */
.doc_notice .doc_notice_steps{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0;
    padding: 18px 20px 0;
    list-style: none;
    counter-reset: none;
}
.doc_notice .doc_notice_step{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #ecefe9;
    border-radius: 6px;
    background: #fafbf9;
    box-sizing: border-box;
}
/* 番号は丸バッジ。数字を読ませる要素ではないので彩度は抑える */
.doc_notice .doc_notice_step_no{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    /* 本文1行目(14px × 1.7)の中心に来るよう少し下げる */
    margin-top: 1px;
    border-radius: 50%;
    background: var(--c-danger);
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
}
.doc_notice .doc_notice_step_body{
    flex: 1 1 auto;
    min-width: 0;
    color: #333;
    font-size: 14px;
    line-height: 1.7;
}
/* このリポジトリでは em を斜体ではなく太字強調として使う慣習に合わせる。
   赤はキーワードだけに絞り、全文が赤くて読めない状態をやめる。 */
.doc_notice .doc_notice_step_body em{
    font-style: normal;
    font-weight: bold;
    color: var(--c-danger);
}

.doc_notice .doc_notice_caution{
    margin: 0;
    padding: 12px 20px 16px;
    color: #666;
    font-size: 13px;
    line-height: 1.6;
}

/* ---- 問い合わせ方法: 上と別の話題なので区切ってカードの足元に置く ---- */
.doc_notice .doc_notice_contact{
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 12px 20px;
    border-top: 1px solid #eceee9;
    background: #f5faf1;
    color: #2f7d20;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.6;
}
.doc_notice .doc_notice_contact_icon{
    flex: 0 0 auto;
    display: block;
    margin-top: 2px;
}
.doc_notice .doc_notice_contact_icon svg{
    display: block;
}

@media screen and (max-width: 899px){
    .doc_notice .doc_notice_ttl{
        padding: 11px 14px;
        font-size: 15px;
    }
    /* 幅が足りないので番号カードは縦に積む */
    .doc_notice .doc_notice_steps{
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 14px 0;
    }
    .doc_notice .doc_notice_caution{
        padding: 10px 14px 14px;
    }
    .doc_notice .doc_notice_contact{
        padding: 12px 14px;
        font-size: 13px;
    }
}

/* ---- TOP 3カード: ボタンの折り返しをやめる ----
   カード幅173pxに対して「ご利用マニュアルを見る」は1行に166px必要で、
   ボタンが2行に折れて高さが 54/35/54px とばらついていた。
   カード側の取り分を増やして1行に収め、高さを揃える。

   最長の文言に必要なのは 166 + カード内側の余白32 = 198px。
   3枚 + gap 24px で 618px。見出し「メールでのお問い合わせ」も
   1行に収めたいので 640px を基準にする。

   ただし固定幅にすると 1366px 以下で横スクロールが出るため、
   basis で希望を出しつつ縮められるようにする。
   お知らせ側は残りを使う（記事タイトルは元々折り返す前提のため）。 */
.top_content_wrap .newsArea{
    flex: 1 1 auto;
    min-width: 0;
}
.info_cards{
    flex: 0 1 640px;
    min-width: 0;
}
/* ボタンは1行で収め、3枚とも同じ高さ・同じ幅にそろえる。
   押せる要素なので文字も導線の基準（13px）に合わせる。 */
.info_cards .info_card_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* #2460 サイトのボタンの基準(40px)に揃える。ここだけ36pxだった */
    min-height: 40px;
    box-sizing: border-box;
    font-size: 13px;
    white-space: nowrap;
}
/* ボタンはカードの高さが違っても足元で揃うように、下に寄せる */
.info_cards .info_card{
    display: flex;
    flex-direction: column;
}
.info_cards .info_card_btn{
    margin-top: auto;
}
/* 見出しはアイコンと横並びで、その分だけ文字領域が狭い（カード内側173pxに対し144px）。
   「メールでのお問い合わせ」は1行に154px必要で折り返していた。

   nowrap で固定すると、画面が狭いときにカードからはみ出すため使わない。
   代わりに、折り返しても不自然な位置で切れないよう単語単位で折る。 */
.info_cards .info_card_title{
    word-break: keep-all;
    overflow-wrap: anywhere;
}
/* #2460 案内カードを4枚(出品フローを追加)にしたため、横3枚 -> 横2×縦2 にする。
   横4枚だとカード内側が120px前後になり、ボタン文言(nowrap)がはみ出す。
   同じ行のカードは高さが揃い、ボタンは margin-top:auto で足元に揃う。 */
.info_cards{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (max-width: 899px){
    .info_cards{
        grid-template-columns: minmax(0, 1fr);
    }
}

/* _________________________________________ 落札・受注管理の画面構成
   検索・注意書き・一覧のバランスを整える (#2460)
 _________________________________________ */

/* ---- 絞り込み（自社落札 / 事前連絡 / 引取 未完了分） ----
   全幅60pxの3等分ボタンで、コーナータブと同じ見た目だったため
   同列の階層に見え、一覧への視線を邪魔していた。
   一覧ページの条件チップと同じ語彙（高さ35px・ピル型・左寄せ）にする。 */
.mylist_filter{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}
.mylist_filter .mylist_filter_label{
    color: #555;
    font-size: 12px;
    margin-right: 2px;
}
.mylist_filter .mylist_filter_chip{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: 35px;
    padding: 0 16px;
    border: 1px solid #dcdfd9;
    border-radius: var(--r-pill);
    background: #fff;
    color: #444;
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
}
.mylist_filter .mylist_filter_chip:hover{
    background: #fff6e8;
    border-color: #f0c99a;
    color: #d97d00;
    text-decoration: none;
}
/* 選択中。もう一度押すと解除できるので、押された状態だと分かるようにする */
.mylist_filter .mylist_filter_chip.is_active{
    background: #2f7d20;
    border-color: #2f7d20;
    color: #fff;
    font-weight: bold;
}
.mylist_filter .mylist_filter_chip.is_active:hover{
    background: #266617;
    border-color: #266617;
    color: #fff;
}

/* ---- 一覧カードの列と縦位置を整える (#2460) ----
   実際には5列使っているのに grid-template-columns は4列分しか
   定義しておらず、5列目が暗黙の列になっていた（ガイドライン 4-7）。
   その結果2列目(スペック)が614pxまで膨らみ、スペックの右に
   200px近い空白ができて右側の情報と分断されていた。

   使う列をすべて明示する:
     1列目 写真 / 2列目 車名・スペック / 3列目 未使用 /
     4列目 入札件数・締切・価格 / 5列目 ボタン */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner{
    grid-template-columns: 150px minmax(0, 1fr) 0 auto 160px;
    column-gap: 20px;
}
/* 右列(4列目)は幅を内容に合わせ、右端で揃える */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_tender_count,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_end_at,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_buyout_price{
    justify-self: end;
    text-align: right;
    white-space: nowrap;
}
/* 入札件数・締切・価格を上から均等に積む。
   価格だけ alignSelf:start で浮いていたため行の高さに合わせる */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_tender_count{
    align-self: center;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_end_at{
    align-self: center;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_buyout_price{
    align-self: center;
}

/* ---- 現在価格を囲って見つけやすくする (#2460) ----
   価格は22px・赤・太字ですでに一番強いが、同じ列に入札件数(19.2px太字)が
   あり、面としては他の情報と横並びのため埋もれて見えていた。

   淡い地色で囲って「値段はここ」と面で示す。罫線は引かず、
   一覧で縦に並んだとき価格の位置が揃って見えることを狙う。 */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_buyout_price{
    box-sizing: border-box;
    padding: 4px 10px;
    border-radius: 4px;
    background: #f5f7f2;
}

/* ---- 一覧カードの情報の強弱を整える (#2460) ----
   実測すると、一番大事な車名が14pxで、入札件数の数字(19.2px)や
   価格(22px)より弱く、優先順位が逆転していた。
   スペックもラベルと値が同じ12px・同じ色でのっぺりしていた。

   車名を主役にし、数字の強さは価格だけに集める。 */

/* 車名: カードの顔。リンク色の青ではなく本文色の太字で見せる */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carName .car_name_td{
    font-size: 16px;
    font-weight: bold;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carName .car_name_td a{
    color: var(--c-text);
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carName .car_name_td a:hover{
    color: var(--c-hover-text);
    text-decoration: underline;
}

/* 入札件数: 価格より強く見えていたので落とす。
   件数は「多いか少ないか」が分かればよく、金額ほどの強さは要らない。
   Blade側に style="font-size:1.2rem" が直書きされているため !important で上書きする。 */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_tender_count strong{
    font-size: 15px !important;
}

/* スペック: ラベルは値より一段引くが、白地に #999 だとコントラスト2.85で
   12pxの小さな文字は読みにくい。補助文字色 #555(7.46) に留める */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carDesc dt{
    color: #555;
    font-weight: normal;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carDesc dd{
    color: #333;
}

/* 締切と引取が同じ強さで並び、どちらが急ぎか分からなかった。
   入札締切は期限なので本文色のまま、引取日時は一段引いて差をつける */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_trade_schedule,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_trade_schedule strong{
    color: #555;
    font-weight: normal;
}

/* ---- カードの余白を整える (#2460) ----
   実測すると間隔が 15 / 30 / 136 / 20 / 15px とばらついており、
   スペックと右列の間だけ 136px の穴が開いていた。
   写真も上11px / 下33px と上下非対称で上に寄っていた。 */

/* スペック列を広げて、右列との間の穴を埋める。
   4列目(右情報)は内容ぶんの幅しか使わないので、
   余った幅はスペック側に回して情報の密度を均す */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner{
    grid-template-columns: 150px minmax(0, 1fr) 0 max-content 160px;
    column-gap: 24px;
}
/* スペックの2ブロック（型式〜ミッション / 燃料〜保管場所）が
   各196pxで左に寄り、右に134pxの穴を作っていた。
   幅いっぱいに広げて2ブロックを均等に置く。

   先に書いた justify-content:flex-start（余白を右に溜める指定）を
   打ち消すため、同じ詳細度で上書きする。 */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carDesc{
    width: 100%;
    /* 既存の max-width:410px で止められて右に134pxの穴ができていた */
    max-width: none;
    justify-content: flex-start;
    gap: 24px;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carDesc > *{
    flex: 1 1 0;
    min-width: 0;
}

/* 写真が上11px/下33pxと非対称で上に寄っていた。
   原因はコーナーバッジの有無。リユース・お気に入りはバッジがあり
   その分で釣り合うが、プロ出品・カーネクストはバッジが無く
   バッジぶんの高さが下に余っていた。

   バッジの有無に関わらず、写真がカードの上下中央に来るようにする。
   写真側を伸ばさず（object-fit の効きを保つため）、
   余白を上下に均等配分する。 */
/* 写真の縦位置がページごとにばらついていた（上11/下33 など）。
   原因はコーナーバッジの有無と、行の高さが中身で決まること。
   バッジは1行目に置き、写真は残りを使って中央に置く、という
   積み方自体は変えずに、写真の高さを固定して揃える。

   カード150px - 上下の余白20px - バッジ22px - バッジ下の余白4px = 104px。
   バッジが無いページでも同じ高さになるよう固定する。 */
/* 写真列(バッジ＋写真)をひとかたまりとして、カードの上下中央に置く。
   これでバッジの有無に関わらず、かたまりの重心が揃う。 */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carImg{
    justify-content: center;
    align-self: center;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carImg a{
    flex: 0 0 auto;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carImg img{
    height: 100%;
    object-fit: cover;
}

/* 車名とスペックの間が6pxで詰まっていた。
   車名は見出しなので、スペックとの間に一段の余白を置く */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carName{
    margin-bottom: 6px;
}

/* ---- カード右列（入札件数・締切・価格）のバランス (#2460) ----
   間隔が 4px / 0px とばらつき、締切と価格が密着していた。
   価格は地色のパディングぶんだけ左に飛び出して幅も揃っていなかった。

   3つを等間隔で積み、幅を揃えて右端で通す。 */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_tender_count,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_end_at,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_buyout_price{
    justify-self: stretch;
    width: auto;
}
/* 件数と締切にも価格と同じ左右パディングを持たせて、
   地色のある価格だけが外に張り出して見えないようにする */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_tender_count,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_end_at{
    padding: 0 10px;
    box-sizing: border-box;
}
/* 締切と価格が密着していたので間隔を作る */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_buyout_price{
    margin-top: 4px;
}

/* ---- カード右列の行間 (#2460) ----
   締切ブロックの2行が18px送りなのに対し、左のスペックは24px送りで
   リズムが合っていなかった。各ブロックの line-height も
   19.2px / 22.4px とばらついていた。

   左のスペックと同じ 24px の行送りに揃えて、
   カード全体で行の高さが通るようにする。 */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_tender_count,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_end_at,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_buyout_price{
    line-height: 24px;
}
/* 締切・引取の2行はそれぞれ1行として扱う（間に余計な送りを作らない） */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_end_at .auctions_window_end_at_value,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_end_at .auctions_window_trade_schedule{
    display: block;
    line-height: 24px;
}
/* 価格は22pxの数字を含むため、行の高さをそれに合わせる */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_window_buyout_price{
    line-height: 28px;
}

/* ---- 車両タグ（〆近 / 新着 / 人気 / 終了）を作り直す (#2460) ----
   角丸ゼロ・原色ベタ塗り・padding が 4px 3px 2px と非対称で
   文字が上に寄り、高さも 25/21/19px とばらついていた。
   白文字のコントラストも 人気2.19 / 〆近4.00 と足りていなかった。

   サイトの語彙（角丸3px・小さめの太字）に揃え、
   色はパレットの濃い側にして白文字が読めるようにする。 */
.auctions_window .icon_deadline,
.auctions_window .icon_new_exhibit,
.auctions_window .icon_popular,
.auctions_window .icon_finished{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 20px;
    padding: 0 7px;
    border-radius: var(--r-sm);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
    vertical-align: middle;
}
/* 色は「赤か橙か」がひと目で分かることを優先する。
   コントラストを稼ぐために両方を暗くしたところ、
   #c0392b と #c05600 が色相差21°まで近づいて見分けられなくなったため、
   彩度を上げて色相を離した（0° と 24°、彩度65%と100%）。 */
/* 〆近: 期限が迫っている (白文字4.98) */
.auctions_window .icon_deadline{
    background: #d32f2f;
}
/* 人気: 入札が多い (白文字4.17)。
   AAの4.5をわずかに下回るが、11pxの短い語で、赤との判別を優先した。 */
.auctions_window .icon_popular{
    background: #d35400;
}
/* 新着: 本日出品。サイトの緑の濃い側 (5.15) */
.auctions_window .icon_new_exhibit{
    background: #2f7d20;
}
/* 終了: 結果が出た状態なので退かせる */
.auctions_window .icon_finished{
    background: #8a8a8a;
}
/* 評価点も同じ行に並ぶバッジなので、高さと角丸を揃える。
   フォントは 12.6px / 角丸 3.78px と rem 由来の半端な値だった */
.auctions_window .car_rated{
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 20px;
    padding: 0 8px;
    border-radius: var(--r-sm);
    font-size: 11px;
    line-height: 1;
    vertical-align: middle;
}

/* ---- 一覧ページのタイトルの縦線 (#2460) ----
   このページは .main_tt の中にボタンを包む span があり、
   末尾の空白テキストで2行分(59px)の高さになっている。
   縦線は .main_tt の上端基準で置いてあるため、
   1行しかない他ページ(49px)に比べて文字より上にずれて見える。

   文字の高さに合わせるため、1行目の中心を基準にする。
   .auctions はお気に入り一覧でも使われており、そちらは1行で
   高さが違うため、コーナー一覧だけに絞る（.corner_index）。 */
.auctions.corner_index .main_tt::before{
    top: 17px;
}
/* 自社出品車両管理は .main_tt に独自の上下パディング(20px/25px)があり、
   その分だけ縦線が文字より上にずれる。文字の位置に合わせる。
   .has-mitsumori は落札・受注管理でも使われており、そちらは
   パディングが無いため、インラインstyleを持つこのページだけに絞る。 */
.main_tt.has-mitsumori[style*="padding-top"]::before{
    top: 28px;
}

/* _________________________________________ 未ログイン トップ トンマナ統一
   #2485 ログイン後(#2460 で刷新済み)に見た目を寄せる。
   文言・DOM 構造は変えず、配色と余白だけを既存パレットに揃える。
   対象は未ログイン時のみ (.no_login / .lp_contents) に限定し、
   ログイン後の画面には影響させない。
 _________________________________________ */

/* ---- メインビジュアル ----
   白カードが写真の上に浮いて見え、赤/オレンジのグラデボタンが
   サイトのパレット(緑=主要導線 / オレンジ=CTA)から外れていたため整える。
   文言と DOM 構造はそのまま。 */
.mainVisual .mainVisual-inner #mainVisual_left{
    /* 90px の上下パディングで間延びしていたので詰める */
    padding: 36px 32px;
    background: rgba(255, 255, 255, .95);
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}
/* ボタンはグラデ + 影付き文字をやめ、ログイン後の導線と同じ平面的な塗りに */
.mainVisual #mainVisual_left .login_btn,
.mainVisual #mainVisual_left .signup_btn{
    border-radius: 4px;
    font-size: 18px;
    padding: 12px 0;
    text-shadow: none;
    -webkit-text-shadow: none;
    box-shadow: none;
    filter: none;
    transition: background-color .15s ease;
}
/* ログイン = 最優先導線。ブランドカラーの塗り */
.mainVisual #mainVisual_left .login_btn{
    background: #61ad35;
    border: 1px solid #61ad35;
}
.mainVisual #mainVisual_left .login_btn:hover{
    background: var(--c-green-hover);
    border-color: var(--c-green-hover);
    filter: none;
}
/* 新規会員登録 = CTA。既存の CTA 色(オレンジ)を単色で残す */
.mainVisual #mainVisual_left .signup_btn{
    background: #f38900;
    border: 1px solid #f38900;
}
.mainVisual #mainVisual_left .signup_btn:hover{
    background: #da7c02;
    border-color: #da7c02;
}
.mainVisual #mainVisual_left > p{
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.7;
    color: #666;
}

/* ---- 選ばれる理由 ----
   青(#448aca)・ピンク(#ea68a2)・オレンジ(#f39800)が並び、
   サイトのパレットから外れて4色がばらばらに見えていた。
   アイコンは白抜き PNG なので、背景だけブランドカラーの濃淡に置き換える。
   (画像の差し替えは不要) */
.reasonbox ul li{
    border-radius: 6px;
    overflow: hidden;
}
/* デザイン案どおり4枚を横1列に並べる (既定は2列) */
.reasonbox ul li{
    width: calc(25% - 9px);
    margin-bottom: 0;
}
/* アイコン帯の色はデザイン案に合わせて4色に戻す。
   4項目が並列の訴求で優劣が無いことを、色を変えて示す作り。

   #2460 では「原色に近い4色が並ぶとサイトの他の面から浮く」として
   彩度を落としていたが、#2484 でくすんで見えるという指摘があり、
   同じ色相のまま彩度を上げて明るくした (いずれも彩度95%)。
   白のアイコンを載せるので、図形の基準であるコントラスト3.0は
   下回らない値を選んでいる (実測 3.01〜3.35)。 */
.reasonbox ul li span.reason1{ background-color: #6fa404; }
.reasonbox ul li span.reason2{ background-color: #0699f9; }
.reasonbox ul li span.reason3{ background-color: #fa4294; }
.reasonbox ul li span.reason4{ background-color: #cc8105; }
.reasonbox ul li span.reason1,
.reasonbox ul li span.reason2,
.reasonbox ul li span.reason3,
.reasonbox ul li span.reason4{
    height: 84px;
    background-size: auto 46px;
}
/* 4列だと1枚あたりが狭くなるので本文を詰める。
   見出しは1文字だけ次行に落ちる(「入札」「出品！」)のを避けるため
   さらに小さくし、折返し位置は元の <br> に任せる */
.reasonbox ul li h4{
    font-size: 15px;
    line-height: 1.5;
    padding: 0 8px;
}
.reasonbox ul li h4 span{
    font-size: 17px;
}
.reasonbox ul li p{
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
}
/* カードの高さを揃える。本文量が違っても枠の下端を合わせる */
.reasonbox ul li{
    display: flex;
    flex-direction: column;
}
.reasonbox ul li p{
    flex: 1 1 auto;
}
@media screen and (max-width: 1024px){
    /* 4列に収まらない幅では2列に戻す */
    .reasonbox ul li{
        width: calc(50% - 5px);
        margin-bottom: 18px;
    }
}
/* SP は1列。上の2列指定が default.css の SP 指定 (width:100%) より後ろにあり、
   縦に並んだまま幅だけ半分 (左半分に4枚) になっていた */
@media screen and (max-width: 480px){
    .reasonbox ul li{
        width: 100%;
    }
}
/* 見出し内の強調。赤(#ff0000)は警告色なので見出しの強調には使わない。
   サイトの強調色(#d10000)よりさらに落として、緑地の見出しと喧嘩させない */
.reasonbox ul li h4 span{
    color: #d10000;
}

/* ---- 主な機能 ----
   写真地(functionlist_bg.jpg)に白文字を重ねていて可読性が低かったため
   白カードにする。デザイン案に合わせて6つを横1列に並べ、
   アイコンと見出しは緑にする。 */
.functionbox ul{
    gap: 8px;
    align-items: stretch;
}
.functionbox ul li{
    background: #fff;
    border: 1px solid #e0e0e0;
    /* デザイン案どおり6列。既定は3列 */
    width: calc(100% / 6 - 7px);
    margin-bottom: 0;
    padding-bottom: 4px;
}
.functionbox ul li h4{
    color: var(--c-green-dark);
    font-size: 14px;
    line-height: 1.4;
    padding: 14px 6px 6px;
}
/* アイコン(function0*.png)は白抜きの PNG。白カードの上では輪郭が
   溶けて見えないため、mask で切り抜いて緑に塗る。
   (画像を差し替えずに色を変えられる) */
.functionbox ul li h4:before{
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
    background: #61ad35 !important;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.functionbox ul li h4.function1:before{ -webkit-mask-image: url(../img/function01.png); mask-image: url(../img/function01.png); }
.functionbox ul li h4.function2:before{ -webkit-mask-image: url(../img/function02.png); mask-image: url(../img/function02.png); }
.functionbox ul li h4.function3:before{ -webkit-mask-image: url(../img/function03.png); mask-image: url(../img/function03.png); }
.functionbox ul li h4.function4:before{ -webkit-mask-image: url(../img/function04.png); mask-image: url(../img/function04.png); }
.functionbox ul li h4.function5:before{ -webkit-mask-image: url(../img/function05.png); mask-image: url(../img/function05.png); }
.functionbox ul li h4.function6:before{ -webkit-mask-image: url(../img/function06.png); mask-image: url(../img/function06.png); }
.functionbox ul li p{
    padding: 0 8px 12px;
    font-size: 12px;
    line-height: 1.6;
    color: #666;
    text-align: left;
}
/* 見出しの補足文はデザイン案では見出しの右に並ぶ */
.functionbox .ttl-02{
    margin-right: 12px;
}
.functionbox .ttl-02 + p{
    display: inline;
    font-size: 13px;
    color: #666;
}
@media screen and (max-width: 1024px){
    /* 6列に収まらない幅では3列に戻す */
    .functionbox ul li{
        width: calc(100% / 3 - 6px);
        margin-bottom: 8px;
    }
}
@media screen and (max-width: 899px){
    .functionbox ul li{
        width: calc(50% - 4px);
    }
    .functionbox .ttl-02 + p{
        display: block;
        margin-top: 6px;
    }
}

/* ---- 入会までの流れ ----
   デザイン案は、丸数字の右に文言を置いた1行のフローで、
   カードの枠や地色は無く、手順の間を灰色の「>」でつなぐ形。 */
.signup{
    /* #2485 .container(1150px) を活かす。以前ここに max-width:100% があり、
       他セクションが1150pxなのにこのブロックだけ全画面幅(1865px)になっていた */
    background-color: transparent;
    padding-bottom: 0;
}
/* デザイン案では手順1行が白いカードで囲まれている。
   #2485 手順は中央に寄っているため、枠だけ1150px全幅にすると
   左右に大きな余白が残り、他セクションより広い箱に見えていた。
   中身の幅に合わせて縮め、中央に置く */
.signup .signup-flow{
    /* #2485 6等分の列にしたので、幅は「主な機能」と同じく本文幅を使う。
       (fit-content だと中身の最小幅まで縮んで列が細くなる) */
    width: 100%;
    max-width: 100%;
    margin: 0 auto 24px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 18px 20px;
    box-sizing: border-box;
}
/* 縦積み時代の下向き矢印(signup-arrow.png)。
   横1行になったので不要 */
.signup .signup-flow::after{
    content: none;
}
.signup .signup-flow ul{
    display: flex;
    /* #2485 1150px より狭い画面では6項目が1行に収まらない。
       項目を縮めて文言を折る(「お申し込/み」)より、行を折り返す方が読める */
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
    align-items: stretch;
    counter-reset: signup_step;
    font-size: 13px;
}
.signup .signup-flow ul li{
    /* 枠・地色・角丸をやめて文字だけにする */
    display: flex;
    align-items: center;
    gap: 8px;
    /* #2485 文言の長さぶん幅がばらつき(112〜290px)、「主な機能」の
       6等分(185px揃い)と並べたときに不揃いに見えていた。
       同じ考え方で6等分にする。区切りの「>」は幅に含めないよう
       li の外側(::after)ではなく内側の余白で処理する */
    flex: 0 0 auto;
    width: calc(100% / 6);
    box-sizing: border-box;
    padding-right: 12px;
    margin-bottom: 0;
    /* 6等分だと番号と文言を横に並べる幅が足りず「電子契約（クラウ/
       ドサイン）」のように折れる。「主な機能」がアイコンの下に
       文言を置くのと同じく、番号を上・文言を下にする */
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: #333;
    line-height: 1.45;
    /* #2485 番号を上・文言を下の縦並びにしたので中央寄せ。
       横並び時代の text-align:left がここに残っていた */
}
/* 手順番号。緑の丸数字 */
/* 6等分にしたので、2番目だけ幅を広げる特別扱いは不要 */
/* 括弧内の補足。本文より一段弱くして、手順名を読み取りやすくする。
   li が display:flex のため、文言は直接の子ではなくこの箱の中で折り返す */
.signup .signup-flow ul li > .signup-flow__text{
    display: block;
}
.signup .signup-flow__note{
    display: block;
    font-size: 11.5px;
    color: #777;
    line-height: 1.4;
}
.signup .signup-flow ul li:before{
    counter-increment: signup_step;
    content: counter(signup_step);
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #61ad35;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}
/* 手順の間は灰色の「>」でつなぐ */
/* 区切りの「>」。#2485 で番号を上・文言を下の縦並びにしたため、
   フローに任せると文言の下に落ちる。列の右端・番号の高さに重ねる */
.signup .signup-flow ul li:not(:last-child)::after{
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #c8c8c8;
    border-right: 2px solid #c8c8c8;
    position: absolute;
    /* 番号は列の中央にあるので、矢印は列境界(= 次の番号との中間)に置く。
       padding-right:12px ぶん内側に入っているので、その中央に合わせる */
    left: 100%;
    margin-left: -8px;
    top: 9px;
    transform: rotate(45deg);
    margin: 0;
    background: none;
}
.signup .signup-flow ul li{
    position: relative;
}
/* 補足文はデザイン案では見出しの右に並ぶ。
   「主な機能」と同じ扱い (.ttl-02 の直後の p を inline にする) */
.lp_contents .ttl-02.signup_ttl{
    margin-right: 12px;
}
.lp_contents .ttl-02.signup_ttl + p{
    display: inline;
    font-size: 13px;
    color: #666;
}
@media screen and (max-width: 1100px){
    /* 1行に収まらない幅では折り返す */
    .signup .signup-flow ul{
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 0;
    }
}
@media screen and (max-width: 899px){
    .signup .signup-flow{
        padding: 14px 14px 4px;
    }
    .signup .signup-flow ul{
        gap: 14px 0;
    }
    .signup .signup-flow ul li{
        flex: 0 0 100%;
    }
    /* PC用の min-width(290px) は SP では画面幅を超え、
       この項目だけ右にずれて番号が揃わなくなるため外す */
    .signup .signup-flow ul li:nth-child(2){
        flex: 0 0 100%;
        min-width: 0;
    }
    /* 縦積みになるので矢印は出さない */
    .signup .signup-flow ul li:not(:last-child)::after{
        content: none;
    }
}

/* ---- よくある質問 ----
   質問行がグレー(#535353)のベタ塗り、本文の強調が純黄(#ffff00)で、
   どちらもサイトのパレットに無い。黄色は CTA の色なので強調には使わない。
   白カード + 緑の「Q」に整える。文言と DOM はそのまま。 */
.topfaq dl dt{
    background: #fff;
    color: #333;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #61ad35;
    border-radius: 4px;
    padding: 12px 14px;
    font-size: 16px;
}
.topfaq dl dd{
    padding: 12px 14px 0;
}
/* 強調は塗りつぶしをやめ、下線で示す */
.topfaq dl dd span{
    padding: 0 1px 1px;
    background: transparent;
    border-bottom: 2px solid #61ad35;
    font-weight: bold;
}
@media screen and (max-width: 899px){
    .topfaq dl dt{
        font-size: 15px;
        font-weight: bold;
        padding: 10px 12px;
    }
}

/* ---- ピックアップ車両 ----
   未ログイン側のカードは枠も地色も無く、写真と文字が直に並んでいた。
   ログイン後の一覧カード(.is_card_view)は DOM が別物で流用できないため、
   同じ見え方(白カード/薄い罫線/角丸)だけをここで揃える。 */
.lp_contents .auctions_window .auctions_window_box{
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}
.lp_contents .auctions_window .auctions_window_desc{
    padding: 10px 12px 12px;
}
/* 車名。青いリンク色は一覧では使っていないので本文色に寄せる。
   既存の .lp_contents ... .car_name_td a が同等の詳細度で青を指定して
   いるため、同じ形のセレクタで上書きする */
.lp_contents .auctions_window .auctions_window_inner .auctions_window_carName .car_name_td a{
    color: #333;
    font-weight: bold;
    text-decoration: none;
    /* #2485 車名の実体はこの a。親(.car_name_td)の keep-all は
       この要素には引き継がれず、全角英数が語の途中で折れていた */
    word-break: keep-all;
    overflow-wrap: anywhere;
}
/* hover は緑ではなくオレンジ。ログイン後の一覧カードと同じ語彙に揃える
   (ここだけ緑で、同じ車名リンクなのに hover 色が3種類あった) (#2460) */
.lp_contents .auctions_window .auctions_window_inner .auctions_window_carName .car_name_td a:hover{
    color: var(--c-hover-text);
    text-decoration: underline;
}
/* 現在価格。ログイン後の一覧と同じく枠で囲って独立させる */
.lp_contents .auctions_window .auctions_window_buyout_price{
    margin-top: 8px;
    padding: 6px 8px;
    background: #f7f9f6;
    border: 1px solid #e0e6de;
    border-radius: 4px;
}

/* ---- セクション見出し ----
   .ttl-02 が赤(#e70012)。ログイン後の見出し(.top_section_ttl)は
   本文色(#333)+リサイクルマークで、同じサイトとは思えない差になっていた。
   LP は中央寄せのままで、色だけ揃える。
   (.ttl-02 は未ログインのトップでしか使われていない) */
.lp_contents .ttl-02,
.member_xhibit .ttl-02{
    color: #333;
    font-size: 24px;
    font-weight: bold;
}

/* ---- 自社車両を出品しませんか？ ----
   強調文が下線付きでリンクに見えるため、下線をやめて色で示す。
   (実際にはリンクではないので誤解を招く) */
.member_xhibit .member_xhibit_body li strong{
    text-decoration: none;
    color: var(--c-green-dark);
}

/* ---- 3つの訴求バー ----
   緑のベタ塗りの帯が3段に積まれて縦に間延びしていた。
   デザイン案に合わせて、薄い地色の帯にアイコン+2行の横並びにする。
   文言は変更していない。 */
.member_xhibit_head .feature_bar{
    /* #2485 親(.member_xhibit_head)を 1150px に揃えたため、
       以前の負のマージン(-110px)による張り出しは不要になった。
       他セクションと左右が揃う */
    width: auto;
    margin: 0;
    gap: 8px;
    align-items: stretch;
}
.member_xhibit_head .feature_bar li{
    /* 元の緑ベタ塗り・角丸・白文字を打ち消す */
    display: flex;
    align-items: center;
    gap: 12px;
    /* 1つ目だけ文言が長い。均等3分割だと1つ目が3行になって
       他と高さが揃わないため、文字量に応じて幅を配る */
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    width: auto;
    margin: 0;
    /* デザイン案は上下が浅い帯。高さを詰める */
    /* #2484 ログイン前トップの要点なので、文字を大きくして目立たせる
       (13px では帯の高さに対して小さく、読み飛ばされる) */
    padding: 14px 16px;
    background: #f5f7f4;
    border: 1px solid #e2e8e0;
    border-radius: 4px;
    color: #333;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.45;
    text-align: left;
}
.member_xhibit_head .feature_bar_icon{
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 文字を大きくしたぶんアイコンも上げて釣り合いを取る */
    width: 56px;
    height: 56px;
}
.member_xhibit_head .feature_bar_icon svg{
    display: block;
    width: 100%;
    height: 100%;
}
/* 文言は変えずに、狙った位置で2行に折る。
   折り返しはこの位置だけに限定して3行になるのを防ぐ */
.member_xhibit_head .feature_bar_text{
    white-space: nowrap;
}
.member_xhibit_head .feature_bar_br{
    display: block;
}
@media screen and (max-width: 899px){
    /* SP は3つ横に並べると読めないので縦積みに戻す。
       ただし帯の見た目(アイコン+2行)は保つ */
    .member_xhibit_head .feature_bar{
        flex-direction: column;
    }
    .member_xhibit_head .feature_bar li{
        font-size: 20px;
        padding: 14px 14px;
    }
    .member_xhibit_head .feature_bar_icon{
        width: 54px;
        height: 54px;
    }
    /* SP は横幅が足りないので nowrap を解除し、自然な折返しに任せる
       (解除しないと1行に伸びて横スクロールが出る) */
    .member_xhibit_head .feature_bar_text{
        white-space: normal;
    }
    .member_xhibit_head .feature_bar_br{
        display: inline;
    }
}


/* ============================================================
   #2485 ログイン前 MV下のモダン化【草案】
   ------------------------------------------------------------
   たたき台です。方向性を決めるための提案で、この1ブロックを
   丸ごと削除すれば元のデザインに戻ります。

   狙い:
   1) 色数を絞る  … 見出しの赤(#e70012)と理由カードの4色を
                    ブランドカラー(#61ad35)基調に寄せる
   2) 区切りを面で … セクションの境目を「地色の帯」で作り、
                    ページを上から読み下せるようにする
   3) 余白を広く  … 現状は要素間40px。章の切れ目は72pxに広げる
   4) 影をやめる  … 枠線1本＋角丸で軽くする(モダン寄りの定番)
   ============================================================ */

/* ---- 1. 見出し ----
   .ttl-02 は赤字(#e70012)+PNGアイコン。赤はサイト内で他に使っておらず、
   ここだけ浮いている。文字を本文色にし、下に短い緑のラインを敷く。 */
/* 参考デザインに合わせ、緑アイコン + 左寄せ。赤字はやめて本文色にする */
body:has(.head_bg.no_login) .lp_contents .ttl-02{
    display: inline-block;
    /* 参考デザインは見出しがブランドカラー。#222 だと堅くなりすぎる */
    color: var(--c-green-dark);
    font-size: 22px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 4px;
    /* midashi_bg.png はそのまま使う(左の緑アイコン) */
}
/* 見出しの右にリード文を並べる(参考デザインは見出しと同じ行〜直下) */
body:has(.head_bg.no_login) .lp_contents .ttl-02 + p{
    color: #666;
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 0;
}
/* セクションの中身は左寄せにする(参考デザインは全体が左揃え) */
body:has(.head_bg.no_login) .lp_contents{
    text-align: left;
}
body:has(.head_bg.no_login) .lp_contents .ttl-02,
body:has(.head_bg.no_login) .lp_contents .ttl-02 + p{
    text-align: left;
}

/* ---- 2. セクションの区切り ----
   白 → 淡灰 → 白 … と交互に敷いて、章の切れ目を面で示す。
   現状は .reasonbox と .topfaq だけ地色があり、規則性が無い。 */
body:has(.head_bg.no_login) .lp_contents{
    margin-bottom: 0;
    /* 参考デザインは1画面に多くの情報が入る密度。72pxでは間延びするため詰める */
    padding: 40px 0;
}
body:has(.head_bg.no_login) .lp_contents.member_xhibit,
body:has(.head_bg.no_login) .lp_contents.functionbox,
body:has(.head_bg.no_login) .lp_contents.topfaq{
    background: #f7f8f5;
}
body:has(.head_bg.no_login) .lp_contents.reasonbox{
    background: #fff;
}
/* 地色は画面幅いっぱいに敷く(本文は1150pxのまま) */
body:has(.head_bg.no_login) .head_height.no_login > .lp_contents{
    width: calc(100vw - var(--sbw, 0px));
    max-width: none;
    margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2);
    margin-right: calc(50% - (100vw - var(--sbw, 0px)) / 2);
}
body:has(.head_bg.no_login) .head_height.no_login > .lp_contents > .container,
body:has(.head_bg.no_login) .head_height.no_login > .lp_contents > p,
body:has(.head_bg.no_login) .head_height.no_login > .lp_contents > .pickup_carousel{
    max-width: var(--content-w);
    margin-left: auto;
    margin-right: auto;
}
/* ピックアップの見出しだけ .container の外(セクション直下)にあり、
   .ttl-02 は inline-block のため margin:auto では中央に寄らず
   画面左端(x=0)に貼り付いていた。
   幅いっぱいのブロックで包んでから、中身を本文幅に合わせる */
body:has(.head_bg.no_login) .head_height.no_login > .lp_contents > .ttl-02{
    display: block;
    max-width: var(--content-w);
    margin-left: auto;
    margin-right: auto;
    /* アイコンぶんの余白は .ttl-02 の padding-left(40px) が持っている */
}
/* 全幅に広げた中で、中身は本文幅(--content-w)に収める。
   基準幅未満では左右に 10px の余白を残す(カルーセルが画面外に出るため) */
@media screen and (max-width: 1560px){
    body:has(.head_bg.no_login) .head_height.no_login > .lp_contents > .container,
    body:has(.head_bg.no_login) .head_height.no_login > .lp_contents > .ttl-02,
    body:has(.head_bg.no_login) .head_height.no_login > .lp_contents > p,
    body:has(.head_bg.no_login) .head_height.no_login > .lp_contents > .pickup_carousel{
        width: calc(100% - 20px);
        box-sizing: border-box;
    }
}

/* ---- 3. 選ばれる理由 ----
   4色のベタ帯(緑/青/桃/橙)をやめる。4項目が並列であることは
   「番号」と「同じ形」で示し、色はブランドカラー1色に統一する。 */
body:has(.head_bg.no_login) .reasonbox ul li{
    background: #fff;
    border: 1px solid #e3e6e0;
    border-radius: 10px;
    overflow: visible;
    padding-bottom: 20px;
}
/* 4色のアイコン帯は参考デザインどおり維持する。
   (4項目が並列で優劣が無いことを色で示す作り)
   枠線と角丸だけ他セクションに合わせる */
body:has(.head_bg.no_login) .reasonbox ul li{
    overflow: hidden;
    padding-bottom: 16px;
}
body:has(.head_bg.no_login) .reasonbox ul li h4{
    color: #222;
    font-size: 15px;
    padding: 0 14px;
}
body:has(.head_bg.no_login) .reasonbox ul li p{
    color: #666;
    padding: 0 14px;
}

/* 「Smartオークションとは？」の dl は default.css で background:#fff。
   白地のページ前提の指定で、地色の帯に載せると白い箱が浮いて見える */
body:has(.head_bg.no_login) .member_xhibit_head dl{
    background: transparent;
    /* default.css の padding:10px ぶん見出しが右にずれて、
       他セクション(x=385)と10px合わなかった */
    padding-left: 0;
    padding-right: 0;
}
/* この見出しだけ .ttl-02 ではなく dt のため、緑アイコンが付いていない。
   他のセクション見出しと体裁を揃える */
/* .member_xhibit_head は .container 由来の width:calc(100% - 20px) で
   左に10pxずれる。他の見出し(x=385)に合わせる */
body:has(.head_bg.no_login) .member_xhibit_head.container{
    width: 100%;
    max-width: var(--content-w);
}
body:has(.head_bg.no_login) .member_xhibit_head dl dt{
    display: inline-block;
    color: var(--c-green-dark);
    font-size: 22px;
    font-weight: bold;
    padding-left: 40px;
    background: url(../img/midashi_bg.png) no-repeat left center;
}
body:has(.head_bg.no_login) .member_xhibit_head dl dd{
    color: #666;
    font-size: 13px;
    line-height: 1.8;
}
/* 3つの訴求は地色(#f7f8f5)と同系で沈むため、白カードにして起こす */
body:has(.head_bg.no_login) .member_xhibit_head .feature_bar li{
    background: #fff;
    border: 1px solid #e6e8e3;
    border-radius: 10px;
}

/* ---- 右下の固定パネル ----
   #2485 お問い合わせフォームが存在しないため、ログインと新規会員登録に
   差し替える。画像1枚だった箇所をHTMLで組み直す。 */
body:has(.head_bg.no_login) .footer_fixed{
    right: 20px;
    bottom: 20px;
    width: 190px;
    padding: 14px;
    background: #fff;
    border: 1px solid #dfe3df;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
    box-sizing: border-box;
    text-align: center;
}

body:has(.head_bg.no_login) .footer_fixed_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color .15s ease;
}
body:has(.head_bg.no_login) .footer_fixed_btn:hover{
    color: #fff;
    text-decoration: none;
}
/* ログイン = 緑(主要動線) */
body:has(.head_bg.no_login) .footer_fixed_btn-login{
    background: #61ad35;
    margin-bottom: 8px;
}
body:has(.head_bg.no_login) .footer_fixed_btn-login:hover{
    background: var(--c-green-hover);
}
/* 新規会員登録 = オレンジ(CTA)。ページ内の他の導線と色を揃える。
   #2484 白文字を載せるので濃い側の #c05600 を使う
   (#f38900 は白文字でコントラスト2.50。基準4.5に届かない) */
body:has(.head_bg.no_login) .footer_fixed_btn-signup{
    background: #f07c00;
    margin-bottom: 8px;
}
body:has(.head_bg.no_login) .footer_fixed_btn-signup:hover{
    background: #d86e00;
}
/* お問合せ = 白ボタン。上2つより一段弱い扱いにする */
body:has(.head_bg.no_login) .footer_fixed_btn-contact{
    background: #fff;
    border: 1px solid #dcdfd9;
    color: #555;
}
body:has(.head_bg.no_login) .footer_fixed_btn-contact:hover{
    background: #fff6e8;
    border-color: #f0c99a;
    color: #d97d00;
}
/* 固定パネルは本文 (--content-w: 1540px) の右の余白に置く。
   幅 190px + right 20px では 1920px でも本文の右端に 20px かかり、
   1024〜1440px ではピックアップのカードや特長の帯を隠していた (実測)。
   - 1900px 以上: 少し細くして余白 ((1900 - 1540) / 2 = 180px) に収める
   - 1900px 未満: 余白が足りず必ず本文に重なるので出さない。
     PC のヘッダーは固定表示で、同じ「新規会員登録 / ログイン」が常に見えている */
body:has(.head_bg.no_login) .footer_fixed{
    right: 10px;
    width: 166px;
    padding: 12px;
}
@media screen and (max-width: 1899px){
    body:has(.head_bg.no_login) .footer_fixed{
        display: none;
    }
}

/* ---- 3-1. ピックアップの見出し行 ----
   見出し(左)と「すべてを見るには登録が必要」(右)を1行に並べる。 */
body:has(.head_bg.no_login) .pickup_head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: var(--content-w);
    margin: 0 auto 18px;
}
/* 基準幅未満では他の中身と同じく左右に10pxの余白を残す
   (これが無いとボタンが画面端に貼り付く) */
@media screen and (max-width: 1560px){
    body:has(.head_bg.no_login) .pickup_head{
        width: calc(100% - 20px);
        box-sizing: border-box;
    }
}
body:has(.head_bg.no_login) .pickup_head_text{
    min-width: 0;
}
body:has(.head_bg.no_login) .pickup_head_text p{
    color: #666;
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}
/* CTA。新規会員登録と同じオレンジで、ページ内で最も押してほしい導線にする */
body:has(.head_bg.no_login) .pickup_head_btn{
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    /* #2484 白文字を載せるので濃い側のオレンジ。
       登録ボタンと同じ色に揃える */
    background: #f07c00;
    border: 1px solid #f07c00;
    border-radius: 4px;
    box-sizing: border-box;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
body:has(.head_bg.no_login) .pickup_head_btn:hover{
    background: #d86e00;
    border-color: #d86e00;
    color: #fff;
    text-decoration: none;
}
body:has(.head_bg.no_login) .pickup_head_btn_arrow{
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}
@media screen and (max-width: 899px){
    /* 狭い画面では縦積みにして、ボタンを幅いっぱいにする */
    body:has(.head_bg.no_login) .pickup_head{
        display: block;
    }
    body:has(.head_bg.no_login) .pickup_head_btn{
        display: flex;
        justify-content: center;
        margin-top: 12px;
    }
}

/* ---- 3-2. ピックアップのカード ----
   参考デザインは 年式 / 走行距離 / 排気量 をラベル付きで縦に並べた表。
   現状の「R1/2019 / 走行 132,000km」の2行より項目が読み取りやすい。
   既存の .auctions_window_carDesc(dl) を使う(Blade変更なし)。 */
body:has(.head_bg.no_login) .lp_contents .auctions_window .auctions_window_inner .auctions_window_carDesc{
    display: block;
    padding: 0 12px;
    margin-bottom: 8px;
}
/* 参考デザインの3項目(年式/走行距離/排気量)だけ出す。
   1つ目の dl は 型式/排気量/走行距離/ミッション の4項目 */
body:has(.head_bg.no_login) .auctions_window_carDesc dl{
    display: grid;
    grid-template-columns: 4.5em 1fr;
    row-gap: 2px;
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
}
body:has(.head_bg.no_login) .auctions_window_carDesc dt{
    color: #888;
    font-weight: normal;
}
body:has(.head_bg.no_login) .auctions_window_carDesc dd{
    color: #333;
    margin: 0;
}
/* 参考デザインは3項目。4つ目以降(走行距離の重複・ミッション)は隠す */
body:has(.head_bg.no_login) .auctions_window_carDesc dl:nth-of-type(n+2){
    display: none;
}
body:has(.head_bg.no_login) .auctions_window_carDesc dl dt:nth-of-type(n+4),
body:has(.head_bg.no_login) .auctions_window_carDesc dl dd:nth-of-type(n+4){
    display: none;
}
body:has(.head_bg.no_login) .lp_contents .pickup_spec{
    display: none;
}

/* ---- 3-3. 訴求バー(年会費無料など3項目) ----
   参考デザインは緑のベタ塗りで、ページ上部の目を引く要素になっている。
   草案では白カードにして沈めてしまったので、色を戻す。 */
body:has(.head_bg.no_login) .member_xhibit_head .feature_bar li{
    background: #61ad35;
    border: none;
    border-radius: 6px;
}
body:has(.head_bg.no_login) .member_xhibit_head .feature_bar_text{
    color: #fff;
}
body:has(.head_bg.no_login) .member_xhibit_head .feature_bar_text strong{
    color: #fff;
}
/* アイコンは白抜きにする */
body:has(.head_bg.no_login) .member_xhibit_head .feature_bar_icon svg *{
    fill: #fff !important;
    stroke: #fff !important;
}

/* ---- 4. 主な機能 ----
   カードの境目を薄くして、6枚が1つの面に見えるようにする */
body:has(.head_bg.no_login) .functionbox ul li{
    background: #fff;
    border: 1px solid #e6e8e3;
    border-radius: 10px;
}

/* ---- 5. よくある質問 ----
   参考デザインは濃いグレーの帯に白文字。白カードより締まって見える。 */
body:has(.head_bg.no_login) .topfaq dl dt{
    background: #5a5f57;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 11px 36px 11px 14px;
    font-size: 14px;
    position: relative;
}
/* 参考デザインの「+」 */
body:has(.head_bg.no_login) .topfaq dl dt::after{
    content: "+";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 18px;
    line-height: 1;
}
body:has(.head_bg.no_login) .topfaq dl dd{
    font-size: 13px;
    color: #555;
}

/* ---- 6. 入会までの流れ ---- */
body:has(.head_bg.no_login) .signup .signup-flow{
    border-radius: 10px;
    border-color: #e6e8e3;
}

/* ---- 6-2. 「新規会員登録はこちら」ボタン ----
   #2485 セクションを左揃えにしたため左端に寄っていた。
   入会への最終導線なので、中央に大きく置く。 */
body:has(.head_bg.no_login) .signup .signup_btn{
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 4px auto 0;
    padding: 18px 24px;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
}

/* ---- 7. SP ---- */
@media screen and (max-width: 899px){
    body:has(.head_bg.no_login) .lp_contents{
        padding: 48px 0;
    }
    body:has(.head_bg.no_login) .lp_contents .ttl-02{
        font-size: 22px;
    }
    body:has(.head_bg.no_login) .reasonbox ul li h4::before{
        top: -92px;
    }
}

/* ============================================================
   #2460 ピックアップ/おススメ車両のカルーセル: SP で縦に並んでいたのを直す
   一覧ページ用の @media(768px) .auctions_window{flex-wrap:wrap; width:calc(100%+20px); margin-left:-10px; background:#f5f4f0}
   がカルーセルにも当たり、カードが 260px 幅のまま 1 列に 16〜19 枚縦積み(7,000px 超)になっていた。
   また PC 用の flex:0 0 calc(20% - 11.2px) がファイル後半にあり、上の SP 指定(200px)より後ろで勝っていた。
   ここはファイル末尾なので必ず勝つ。
   ============================================================ */
@media screen and (max-width: 899px){
    .lp_contents .auctions_window{
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: auto;
        margin-left: 0;
        margin-right: 0;
        background: none;
        /* 送りボタンは SP で隠しているので、続きがあることが分かるよう細いバーを見せる */
        scrollbar-width: thin;
        scrollbar-color: #b5b5b5 #eeeeee;
    }
    .lp_contents .auctions_window::-webkit-scrollbar{ display: block; height: 6px; }
    .lp_contents .auctions_window::-webkit-scrollbar-track{ background: #eeeeee; border-radius: 3px; }
    .lp_contents .auctions_window::-webkit-scrollbar-thumb{ background: #b5b5b5; border-radius: 3px; }
    .lp_contents .auctions_window .auctions_window_box{
        flex: 0 0 220px;
        width: 220px;
        min-width: 0;   /* PC 用の min-width:260px を解く */
    }
    /* 一覧ページ用の SP 指定で写真枠が 50% 幅になっていた。カードの全幅に戻す */
    .lp_contents .auctions_window .auctions_window_inner .auctions_window_carImg,
    .lp_contents .auctions_window .auctions_window_inner .auctions_window_carImg a{
        width: 100%;
        height: 130px;
        float: none;
        margin: 0;
        padding-top: 0;   /* 一覧ページ用の padding-top:50px(バッジの逃げ)を解く */
    }
    .lp_contents .auctions_window .auctions_window_inner .auctions_window_desc{
        width: 100%;
        float: none;
    }
}

/* ============================================================
   #2460 コンテンツ幅 1540px 化に伴う大きさの再調整
   ------------------------------------------------------------
   本文を 1150px → 1540px に広げたぶん、1150px 前提で詰めていた
   一覧カード・検索バー・設定フォームの写真 / 文字 / 入力欄を一回り大きくする。
   SP は幅が変わっていないので触らない (769px 以上のみ)。
   ============================================================ */
@media screen and (min-width: 900px){
    /* ---- 一覧カード(リスト表示: リユース / 3コーナー / お気に入り) ----
       写真 132px・文字 12px は 1150px 幅に「1行で収める」ための値。
       1540px では余白だけが増えて写真と文字が小さく見えるため、
       写真を 200px、文字を 13px、車名 18px、価格 26px に上げる。 */
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner{
        grid-template-columns: 200px minmax(0, 1fr) 0 auto 190px;
        column-gap: 24px;
    }
    /* 高さは「.auctions_window_inner を含む」既存規則(104px)より詳細度を上げて上書きする */
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carImg{
        margin-right: 0;   /* 基底の margin-right:10px で写真が列幅より 10px 狭くなるのを打ち消す */
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carImg a{
        width: 100%;
        height: 112px;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_box{
        padding: 14px 20px;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carName{
        margin-bottom: 6px !important;
    }
    .reuse_auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carName .auction_id_td,
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carName .auction_id_td{
        font-size: 13px;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carName .car_name_td a{
        font-size: 18px;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carDesc dt,
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carDesc dd{
        padding-top: 2px;
        padding-bottom: 2px;
        font-size: 13px;
        line-height: 1.6;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carDesc dl:not(:first-child){
        margin-left: 32px;
        padding-left: 32px;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_tender_count,
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_end_at{
        font-size: 13px;
        line-height: 1.7;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_buyout_price .now_amount{
        font-size: 26px;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .flex-box-col{
        gap: 8px;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .btn-01,
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .btn-02{
        padding: 10px 12px;
        font-size: 14px;
    }
    /* 写真が 200px になったので、バッジは字間を詰めずに 10px で入る */
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carImg .icon_corner_scrap,
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carImg .icon_corner_trader,
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carImg .icon_corner_songaisha{
        font-size: 10px;
        padding: 3px 8px;
        letter-spacing: 0;
    }

    /* ---- 検索バー: 欄の高さ 40 → 44px、文字 14 → 15px ---- */
    .search_bar{
        gap: 20px;
        padding: 20px 24px;
    }
    .search_bar_field > label{
        font-size: 13px;
    }
    .search_bar_keyword_input input,
    .search_bar_field select,
    .search_bar_detail,
    .search_bar_submit{
        height: 44px;
        font-size: 15px;
    }
    .search_bar_detail{
        font-size: 14px;
    }

    /* ---- 各種設定 / 規約・マニュアルの表 ----
       表が 1540px いっぱいに伸び、パスワード欄が 1,250px になっていた。
       表は 1,000px で左寄せのまま、入力欄は 600px までにする。 */
    .download_document .t_width{
        max-width: 1000px;
    }
    .download_document .panel .panel-desc .form-control{
        max-width: 600px;
        font-size: 14px;
    }
    /* 口座情報は入力欄ごとに桁数に応じた幅を持たせたので(#2460)、
       一律 600px の上限は当てない。
       表は内容に合う幅(880px)にする。枠いっぱいに広げると
       右に大きな余白ができて罫線だけが伸びて見える。 */
    .download_document .t_width:has(.wi_code4){
        max-width: 880px;
    }
    .download_document .panel .panel-desc .wi_code3,
    .download_document .panel .panel-desc .wi_code4,
    .download_document .panel .panel-desc .wi_code7,
    .download_document .panel .panel-desc .wi_name,
    .download_document .panel .panel-desc .wi_name_long{
        max-width: none;
    }
}

/* _________________________________________ 検索結果が0件のとき (#2460)

   以前は「検索結果 0 台」の下が完全に空白で、いきなりお問い合わせが来ていた。
   壊れているのか0件なのか判断できず、次に何をすればよいかも分からなかった。
   空であることと次の一手を示す。
 _________________________________________ */
.empty_result{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 220px;
    margin: 0 0 24px;
    padding: 32px 20px;
    background: #fff;
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-md);
    text-align: center;
}
.empty_result__icon{
    color: #c8ccc4;
}
.empty_result__message{
    margin: 8px 0 0;
    color: var(--c-text);
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
}
.empty_result__hint{
    margin: 0;
    color: var(--c-text-weak);
    font-size: 13px;
    line-height: 1.6;
}
.empty_result__action{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 200px;
    height: 40px;
    margin-top: 12px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    color: var(--c-text-sub);
    font-size: 14px;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.empty_result__action:hover{
    background: var(--c-hover-bg);
    border-color: var(--c-hover-border);
    color: var(--c-hover-text);
    text-decoration: none;
}
@media screen and (max-width: 899px){
    .empty_result{
        min-height: 180px;
        padding: 24px 16px;
    }
    .empty_result__message{ font-size: 15px; }
    .empty_result__action{ width: 100%; min-width: 0; }
}

/* 0件のときはテーブルの見出し行を隠す (#2460)
   見出しだけが残ると「読み込みに失敗した」ようにも見えるため、
   空状態のカードだけを見せる。
   :has() で「中に .empty_result がある表」を判定する。 */
.table-auctions:has(.empty_result) .table-auctions-thead{
    display: none;
}
/* 空状態は表の枠の中に置かれるので、外側の余白を親に合わせる */
.table-auctions .empty_result{
    margin: 0;
}


/* _________________________________________ 規約・操作マニュアル (#2460)

   以前は本文枠(1540px)の中で表が 1000px で止まり、右に540pxの空白ができていた。
   「ダウンロード」も 108x22px の素のリンク文字で、押せる物に見えなかった。

   ダウンロードは「押して取得するもの」なのでカードで並べ、
   推奨動作環境は「仕様の一覧」なので表のまま枠いっぱいに広げる。
 _________________________________________ */
.download_document .dl_cards{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}
.download_document .dl_card{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
    min-height: 68px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-md);
}
.download_document .dl_card__name{
    flex: 1 1 auto;
    min-width: 0;
    color: var(--c-text);
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
}
/* ボタンと「見本」を縦に置く枠 */
.download_document .dl_card__actions{
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
}
.download_document .dl_card__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 150px;
    height: 40px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    color: var(--c-green-dark);
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.download_document .dl_card__btn:hover{
    background: var(--c-hover-bg);
    border-color: var(--c-hover-border);
    color: var(--c-hover-text);
    text-decoration: none;
}
/* 形式のラベル。何のファイルかを一目で分かるようにする */
.download_document .dl_card__ext{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 5px;
    background: var(--c-bg-gray);
    border-radius: 2px;
    /* 地色(#f2f3f0)の上では --c-text-weak(#757575) は 4.14 で基準に届かない */
    color: #666;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: .04em;
}
.download_document .dl_card__btn:hover .dl_card__ext{
    background: #fff;
    color: var(--c-hover-text);
}
.download_document .dl_card__sub{
    flex: 0 0 auto;
    color: var(--c-text-sub);
    font-size: 13px;
    text-decoration: underline;
    white-space: nowrap;
}
.download_document .dl_card__sub:hover{
    color: var(--c-hover-text);
}

/* 推奨動作環境の表。枠いっぱいに広げる */
.download_document .spec_table{
    width: 100%;
    margin-bottom: 12px;
    border-collapse: collapse;
}
.download_document .spec_table .panel-ttl{
    width: 240px;
}
.download_document .spec_table_note{
    margin: 0 0 30px;
    color: var(--c-text-sub);
    font-size: 13px;
    text-align: right;
}

@media screen and (max-width: 899px){
    .download_document .dl_cards{
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    /* SP は名前を上、ボタンを下に置いて横幅を確保する */
    .download_document .dl_card{
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .download_document .dl_card__actions{
        justify-content: space-between;
    }
    .download_document .dl_card__btn{
        flex: 1 1 auto;
        min-width: 0;
    }
    .download_document .spec_table .panel-ttl{
        width: 40%;
    }
    .download_document .spec_table_note{
        text-align: left;
    }
}

/* 各種設定の表は、検索フォーム用の .t_width(max-width:684px) を流用しており
   本文枠(1540px)の中で 1000px で止まって右に510pxの空白ができていた。
   設定のページでは枠いっぱいに広げる。
   対象: パスワード設定 / メールアドレス / 口座情報 / インボイス登録番号 (#2460) */
body:has(.setting_tab) .t_width,
.traders.form .t_width{
    max-width: none;
}

/* ============================================================
   #2460 自社出品車両管理 (/trader_auctions/exhibits)
   ------------------------------------------------------------
   作り直した理由と方針:
   ・12列を素の div で並べており、幅は px 直書き。本文1540pxに対して
     表は1350pxで止まり、右端の「管理」列が460pxの空白になっていた
   ・「車名/グレード」「走行/排気量」「外装色/シフト」「燃料/車検」
     「最高入札額/入札件数」を1セル2段に詰めていたため、
     外装色が長い行だけ 107px に膨らみ、行高が 48〜107px で揺れていた
   ・そのため「1行 = 1台」で読める行リストに組み替える。
     常に見せるのは 状態 / 車両 / 締切 / 金額 / 操作 の5列で、
     年式・型式・走行・排気量・色・シフト・燃料・車検・自走は
     車両セルの中の1本のスペック行に畳む (消さずに階層化する)
   ・すべて .exh_list 配下に閉じる。mylist / receipt / estimates が
     使う .table-auctions 系の語彙には一切触れない
   ============================================================ */

.exh_list{
    --exh-row-h: 122px;          /* 行の基準高さ。全行これで揃える
                                    (車名 + 出品番号 + スペック2行) */
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-md);
    background: #fff;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: var(--sh-1);
}

/* ---- ヘッダー (並び替え) ----
   ソートは12項目すべて残す。1列にまとめた項目は
   「主/副」の2段に分けて、どれで並べ替えているか見えるようにする */
.exh_list__head{
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 168px 260px 168px;
    align-items: start;
    gap: 0 16px;
    padding: 12px 20px;
    background: var(--c-bg-gray);
    border-bottom: 1px solid var(--c-border-light);
    font-size: 12px;
    color: var(--c-text-sub);
}
.exh_list__head_cell{ min-width: 0; }
.exh_sortgroup{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
}
/* 車両セルは「主要な並び替え」を上段、畳んだ9項目を下段にする。
   1行に16個並べると、どれが主役か分からない帯になる */
.exh_list__head .exh_c-car{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
/* 畳んだ9項目。主要な並び替えより一段弱くする */
.exh_sortgroup--sub{
    font-size: 11px;
    /* この行は「畳んだ項目の並び替え」だと分かるように印を置く */
    padding-left: 14px;
    position: relative;
}
.exh_sortgroup--sub::before{
    content: "";
    position: absolute;
    left: 2px;
    top: 7px;
    width: 6px;
    height: 6px;
    border-left: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}
.exh_list__head a{
    color: var(--c-text-sub);
    text-decoration: none;
    border-bottom: 1px dotted var(--c-border);
    white-space: nowrap;
}
.exh_list__head .exh_sortgroup:not(.exh_sortgroup--sub) a{
    font-weight: bold;
    color: var(--c-text);
}
.exh_list__head a:hover{
    color: var(--c-hover-text);
    border-bottom-color: var(--c-hover-text);
}
/* sortable が吐く fa アイコン。矢印だけ弱めて文字を主にする */
.exh_list__head i.fa{
    color: #9aa093;
    font-size: 10px;
    margin-right: 6px;
}
.exh_c-deadline,
.exh_c-price,
.exh_c-act,
.exh_c-state{ text-align: center; }
.exh_list__head .exh_c-price .exh_sortgroup,
.exh_list__head .exh_c-deadline{ justify-content: center; }

/* ---- 行 ---- */
.exh_row{
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 168px 260px 168px;
    align-items: center;
    gap: 0 16px;
    min-height: var(--exh-row-h);
    padding: 12px 20px;
    border-bottom: 1px solid var(--c-border-light);
    position: relative;
}
.exh_row:last-child{ border-bottom: none; }
.exh_row:hover{ background: var(--c-hover-bg); }

/* 終わった行は一段退かせる。読み飛ばしてよい行を薄くするだけで、
   情報は消さない */
.exh_row.is_closed{ background: #fbfcfa; }
.exh_row.is_closed:hover{ background: var(--c-hover-bg); }

/* 締切が近い (開催中で残り48時間以内)。ガイドライン 2-2 に従い
   警告は細い縦帯だけに絞る。ベタ塗りにすると本体が読めなくなる */
.exh_row.is_soon::before{
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #e8a33d;
}
/* 入札が入っている行。成果が出ているので緑側の縦帯 */
.exh_row.has_bid::before{
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--c-green);
}
/* 両方に該当したら締切を優先する (急ぎの方が行動を要する) */
.exh_row.is_soon.has_bid::before{ background: #e8a33d; }

.exh_cell{ min-width: 0; }

/* ---- 出品状態 ---- */
.exh_row .exh_c-state{ display: flex; justify-content: center; }
.exh_list .exh_badge{
    display: inline-block;
    width: auto;
    min-width: 72px;
    margin: 0;
    padding: 5px 8px;
    border-radius: var(--r-sm);
    font-size: 12px;
    font-weight: bold;
    line-height: 1.3;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}
/* グレーのバッジ (#8a8a8a) は白文字でコントラスト 3.45 しかない。
   共通の .s_e* は他ページも使うため、このページの中だけ濃くする */
.exh_list .exh_badge.s_e2,
.exh_list .exh_badge.s_e3,
.exh_list .exh_badge.s_e4,
.exh_list .exh_badge.s_s{
    background: #6b6b6b;
}

/* ---- 車両 ---- */
.exh_row .exh_c-car{
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}
.exh_thumb{
    flex: 0 0 auto;
    display: block;
    width: 104px;
    height: 72px;
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-sm);
    background: var(--c-bg-subtle);
    overflow: hidden;
}
.exh_thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.exh_car{ min-width: 0; flex: 1 1 auto; }
.exh_car__name{
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.35;
    /* 車名が長くても2行で止める。行高を一定に保つため */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.exh_car__name a{
    color: var(--c-text);
    text-decoration: none;
}
.exh_car__name a:hover{
    color: var(--c-hover-text);
    text-decoration: underline;
}
.exh_car__grade{
    margin-left: 8px;
    font-size: 13px;
    font-weight: normal;
    color: var(--c-text-sub);
}
.exh_car__no{
    margin: 2px 0 0;
    font-size: 12px;
    color: #6f6f6f;
}
.exh_car__no b{
    color: var(--c-text-sub);
    font-weight: bold;
    letter-spacing: .02em;
}

/* 畳んだ9項目。ラベルを添えて「何の値か」が分かるようにする。
   高さを1行に固定すると外装色が長い行で末尾の項目 (車検・自走) が
   黙って消える。項目は畳んでよいが消してはいけないので、
   2行ぶんの高さを確保して全項目を出す。
   行高は 2行前提で決めてあるため、これで全行が同じ高さに揃う */
.exh_specs{
    list-style: none;
    margin: 5px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1px 14px;
    font-size: 12px;
    line-height: 1.55;
}
.exh_specs__item{
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
}
/* --c-text-weak(#757575) は白地で 4.61 だが、終了行の地色(#fbfcfa)と
   hover のオレンジ地では 4.48 に落ちて基準を割る。
   このページの小さいラベルは #6f6f6f (白地 5.02) にして余裕を持たせる */
.exh_specs__label{
    color: #6f6f6f;
    margin-right: 4px;
    flex: 0 0 auto;
}
/* 値の長さは Blade 側 (mb_strimwidth) で丸めてある。
   ここでは折り返しだけ止める */
.exh_specs__value{
    color: var(--c-text);
    white-space: nowrap;
}

/* ---- 入札締切 ---- */
.exh_row .exh_c-deadline{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1.25;
    /* 左の車両情報と切れ目を作る。この列から先は「商談の状況」 */
    border-left: 1px solid var(--c-border-light);
    align-self: stretch;
    justify-content: center;
}
.exh_deadline__date{ font-size: 13px; color: var(--c-text-sub); }
.exh_deadline__time{ font-size: 18px; font-weight: bold; color: var(--c-text); }
/* 残り時間。締切が近い行だけ出る */
.exh_deadline__left{
    margin-top: 3px;
    padding: 2px 7px;
    border-radius: var(--r-sm);
    background: #fdf3e4;
    color: #c05600;
    font-size: 11px;
    font-weight: bold;
}

/* ---- 金額 ----
   ラベルを固定幅の左列にして、金額の桁を縦に揃える。
   右寄せだけだと桁数の違う行が波打って読み比べられない */
.exh_row .exh_c-price{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    gap: 4px;
    padding-left: 18px;
}
.exh_money{
    margin: 0;
    display: grid;
    /* ラベル / 金額 / 件数。金額の右端を揃えたいので
       ラベル列は固定、金額列は内容ぶんだけ取り、余りは左に逃がす */
    grid-template-columns: 52px minmax(0, auto) 34px;
    justify-content: end;
    align-items: baseline;
    gap: 0 6px;
    line-height: 1.3;
    white-space: nowrap;
}
.exh_money__value{ text-align: right; }
.exh_money__label{
    font-size: 11px;
    color: #6f6f6f;
    text-align: left;
}
.exh_money__unit{
    font-size: 11px;
    font-weight: normal;
    margin-left: 1px;
}
.exh_money--start .exh_money__value{
    font-size: 14px;
    color: var(--c-text-sub);
}
/* 最高入札額。ガイドライン 2-2 に従い赤は使わず、
   大きさと太さだけで見せる */
.exh_money--top .exh_money__value.is_bid{
    font-size: 19px;
    font-weight: bold;
    color: var(--c-green-dark);
}
.exh_money--top .exh_money__value.is_none{
    font-size: 13px;
    color: #6f6f6f;
}
.exh_bidcount{
    justify-self: start;
    padding: 1px 6px;
    border-radius: var(--r-sm);
    background: var(--c-green-tint);
    color: var(--c-green-dark);
    font-size: 11px;
    font-weight: bold;
}

/* ---- 管理 ---- */
.exh_row .exh_c-act{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 6px;
    padding-left: 18px;
}
.exh_list .exh_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 34px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
/* 編集・再出品 = このページの主動線 */
.exh_list .exh_btn--edit,
.exh_list .exh_btn--copy{
    background: var(--c-green-dark);
    border: 1px solid var(--c-green-dark);
    color: #fff;
}
.exh_list .exh_btn--edit:hover,
.exh_list .exh_btn--copy:hover{
    background: var(--c-hover-text);
    border-color: var(--c-hover-text);
    color: #fff;
}
/* 詳細 = 副次 */
.exh_list .exh_btn--view{
    background: #fff;
    border: 1px solid var(--c-border);
    color: var(--c-text-sub);
}
.exh_list .exh_btn--view:hover{
    background: var(--c-hover-bg);
    border-color: var(--c-hover-border);
    color: var(--c-hover-text);
}
/* 操作できない行の理由。空セルのままだと
   「ボタンが抜けている」のか「押せない」のか分からない */
.exh_noact{
    display: block;
    font-size: 11px;
    line-height: 1.4;
    color: #6f6f6f;
    text-align: center;
}

.exh_list .sp_only{ display: none; }

/* ------------------------------------------------------------
   中間幅。1540px を下回ると車両セルが先に痩せるため、
   畳んだスペックの行数と写真の有無で調整する
   ------------------------------------------------------------ */
@media screen and (max-width: 1400px){
    .exh_list__head,
    .exh_row{
        grid-template-columns: 92px minmax(0, 1fr) 140px 226px 146px;
        gap: 0 12px;
        padding-left: 14px;
        padding-right: 14px;
    }
    .exh_thumb{ width: 88px; height: 62px; }
    .exh_row .exh_c-price,
    .exh_row .exh_c-act{ padding-left: 14px; }
}
@media screen and (min-width: 900px) and (max-width: 1280px){
    .exh_list__head,
    .exh_row{
        grid-template-columns: 86px minmax(0, 1fr) 118px 200px 130px;
    }
    /* 写真は情報ではなく手がかりなので、狭いところでは落とす */
    .exh_thumb{ display: none; }
    /* 写真を落としたぶん、車両セルは広く取れる */
}

/* ------------------------------------------------------------
   SP (768px 以下)
   1台1カード。上から 状態+締切 / 車名 / スペック / 金額 / 操作
   ------------------------------------------------------------ */
@media screen and (max-width: 899px){
    .exh_list{
        border: none;
        border-radius: 0;
        background: none;
        box-shadow: none;
        overflow: visible;
    }
    .exh_list__head{
        display: block;
        border: 1px solid var(--c-border-light);
        border-radius: var(--r-md);
        padding: 10px 12px;
        margin-bottom: 10px;
        background: #fff;
    }
    /* SPでは並び替えの主/副を分けず、まとめて折り返す */
    .exh_list__head_cell{ display: inline; }
    .exh_list__head_cell.exh_c-state,
    .exh_list__head_cell.exh_c-act{ display: none; }
    .exh_list__head .exh_sortgroup{ display: inline-flex; }
    .exh_list__head .exh_sortgroup--sub{
        margin-top: 0;
        font-size: 12px;
    }
    .exh_list__head .exh_sortgroup:not(.exh_sortgroup--sub) a{ font-weight: normal; }

    .exh_row{
        display: block;
        min-height: 0;
        padding: 12px 14px;
        margin-bottom: 10px;
        border: 1px solid var(--c-border-light);
        border-bottom: 1px solid var(--c-border-light);
        border-radius: var(--r-md);
        background: #fff;
        box-shadow: var(--sh-1);
        overflow: hidden;
    }
    .exh_row:last-child{ border-bottom: 1px solid var(--c-border-light); }
    .exh_row.is_soon::before,
    .exh_row.has_bid::before{ top: 0; bottom: 0; }

    /* 状態は右上に置く。左は車名から読ませたい */
    .exh_row .exh_c-state{
        float: right;
        margin: 0 0 6px 8px;
    }
    .exh_row .exh_c-car{
        display: block;
        gap: 0;
    }
    .exh_thumb{
        display: block;
        float: left;
        width: 96px;
        height: 68px;
        margin: 2px 12px 8px 0;
    }
    .exh_car__name{ font-size: 15px; }
    .exh_specs{
        max-height: none;
        overflow: visible;
        gap: 2px 12px;
        margin-top: 6px;
        clear: both;
    }
    .exh_specs__item{ white-space: normal; }

    /* 締切と金額を1本の帯にまとめる */
    .exh_row .exh_c-deadline{
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
        gap: 8px;
        margin-top: 10px;
        padding-top: 10px;
        /* PCで付けた左の縦罫線は横並びでは意味が無いので戻す */
        border-left: none;
        border-top: 1px dashed var(--c-border-light);
        clear: both;
    }
    .exh_row .exh_c-price,
    .exh_row .exh_c-act{ padding-left: 0; }
    .exh_list .exh_c-deadline .sp_only{
        display: inline;
        font-size: 12px;
        color: var(--c-text-weak);
    }
    .exh_row .exh_c-price{
        align-items: stretch;
        margin-top: 6px;
    }
    .exh_money{ justify-content: space-between; }
    .exh_row .exh_c-act{
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 10px;
    }
    .exh_list .exh_btn{
        flex: 1 1 0;
        min-width: 120px;
        height: 42px;
        font-size: 14px;
    }
    .exh_noact{
        flex: 1 1 100%;
        text-align: left;
        order: 2;
    }
}

@media screen and (max-width: 420px){
    .exh_row{ padding: 12px; }
    .exh_thumb{ width: 84px; height: 60px; }
    .exh_car__name{ font-size: 14px; }
    .exh_car__grade{ margin-left: 0; display: block; }
}


/* _________________________________________ グリッド表示の情報の並べ方 (#2460)

   写真で選ぶための表示なのに、車名・出品番号・評価点が1行に詰め込まれて
   車名が埋もれ、「入札件数0件」だけが右端に浮いていた。
   リスト表示では車名を主役にしたのに、グリッドだけ逆行していた。

   車名 → 出品番号・評価点 → 価格 → 締切 の順に階層を作り、
   カードの高さも揃える。
 _________________________________________ */
/* 年式(R2 など)は無名のテキストノードで、flex では並べ替えられない。
   テキストの流れのまま「年式 車名」が1行になるようにする。
   出品番号・バッジは block にして下の行へ送る。 */
.auctions_window.is_grid_view .auctions_window_carName{
    display: block;
    padding: 0 12px;
    font-size: 15px;
    line-height: 1.45;
}
/* 車名はカードの顔 */
.auctions_window.is_grid_view .auctions_window_carName .car_name_td{
    font-size: 15px;
    line-height: 1.45;
}
/* 出品番号は車名の上に小さく置く(DOM順が先なのでそのまま1行目になる) */
.auctions_window.is_grid_view .auctions_window_carName .auction_id_td{
    display: block;
    margin-bottom: 2px;
}
/* バッジ類は車名の下に1行でまとめる */
/* #2460 display を inline-block に戻すと align-items が効かず、
   枠の中で文字が 5px 上付きになる。inline-flex のまま余白だけ足す。 */
.auctions_window.is_grid_view .auctions_window_carName .car_rated{
    margin-top: 6px;
}
.auctions_window.is_grid_view .auctions_window_carName .icon_deadline,
.auctions_window.is_grid_view .auctions_window_carName .icon_popular,
.auctions_window.is_grid_view .auctions_window_carName .icon_new_exhibit{
    margin-top: 6px;
}
.auctions_window.is_grid_view .auctions_window_carName .auction_id_td{
    color: var(--c-text-weak);
    font-size: 11px;
}
/* 入札件数は価格のすぐ下に左寄せで置く。
   リスト表示用の右寄せが残っていて単独で右端に浮いていた */
.auctions_window.is_grid_view .auctions_window_tender_count{
    order: 5 !important;
    padding: 0 12px 8px !important;
    color: var(--c-text-sub);
    font-size: 12px;
    text-align: left !important;
    /* 親が縦積みの flex で align-self:end が当たっており、
       text-align だけでは左に寄らなかった */
    align-self: stretch;
}
.auctions_window.is_grid_view .auctions_window_tender_count strong{
    font-size: 13px !important;
}
.auctions_window.is_grid_view .auctions_window_buyout_price{
    order: 4 !important;
    padding: 8px 12px 2px !important;
}
.auctions_window.is_grid_view .auctions_window_end_at{
    order: 6 !important;
    padding: 0 12px 10px !important;
    color: var(--c-text-sub);
    font-size: 12px;
    line-height: 1.6;
}
/* 車名の行数でカードがずれるので、車名の枠を2行ぶんで固定する */
.auctions_window.is_grid_view .auctions_window_carName .car_name_td{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: calc(15px * 1.45 * 2);
}
/* 情報のかたまりを伸縮させてボタンの高さを揃える */
.auctions_window.is_grid_view .auctions_window_end_at{
    margin-top: auto;
}

/* グリッド表示の写真を枠いっぱいに出す (#2460)
   枠が371pxあるのに画像が162pxしか使っておらず、左半分だけに写真が寄っていた。
   リスト表示用の `.auctions_window_inner .auctions_window_carImg img{width:120%}`
   が勝っていたため。グリッドでは 100% にする。
   コーナー別クラス(.reuse_auctions_window)に閉じず、4コーナー共通で当てる。 */
.auctions_window.is_grid_view .auctions_window_inner .auctions_window_carImg img{
    /* Blade に style="width: 162px" が直書きされているため !important で上書きする。
       リスト表示のサムネイル用の値で、グリッドでは枠(371px)の半分も使えていなかった */
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    object-fit: cover;
    position: static;
    transform: none;
}
.auctions_window.is_grid_view .auctions_window_inner .auctions_window_carImg,
.auctions_window.is_grid_view .auctions_window_inner .auctions_window_carImg a{
    display: block;
    width: 100%;
}
.auctions_window.is_grid_view .auctions_window_inner .auctions_window_carImg a{
    height: 170px;
    overflow: hidden;
}

/* お知らせ一覧のカテゴリ表示 (#2460)

   実運用ではカテゴリが「お知らせ」1種類しか使われておらず、
   同じ緑のバッジが20行すべてに並んで情報量がゼロだった。
   緑の帯が縦に並ぶだけで目が滑り、どれを読むべきか分からない。

   バッジ自体は残す(カテゴリが増えたときに効く)が、
   1種類しか無いあいだは地味にして、タイトルの【重要】がある行だけ目立たせる。 */
.archive_newsList .news_cat_icon_c{
    background: var(--c-bg-gray);
    color: var(--c-text-sub);
    font-weight: normal;
}
/* 【重要】【お詫び】で始まるお知らせ。急ぎで読むべきものを見分けられるようにする */
.archive_newsItem.is-important .news_cat_icon_c{
    background: var(--c-danger-bg);
    color: var(--c-danger);
    font-weight: bold;
}
.archive_newsItem.is-important .archive_ttl a{
    font-weight: bold;
}

/* 各種設定タブの「ログアウト」を他のタブから切り離す (#2460)

   パスワード設定・口座情報設定などと同じ見た目で並んでおり、
   設定項目と誤認して押すと入力中の内容が飛ぶ。
   導線は残したまま、間を空けて枠線も外し「タブではない」ことを形で示す。

   5ページ(パスワード / メール / 口座 / 対応地域 / インボイス)で
   同じマークアップなので、CSS 側で一度だけ当てる。 */
.content_tab:has(> a[href$="/traders/logout"]){
    margin-left: 24px;
    border: none;
    background: none;
}
.content_tab:has(> a[href$="/traders/logout"]) > a{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 14px;
    background: none;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    color: var(--c-text-sub);
    font-weight: normal;
}
.content_tab:has(> a[href$="/traders/logout"]) > a:hover{
    background: var(--c-hover-bg);
    border-color: var(--c-hover-border);
    color: var(--c-hover-text);
}

/* 一覧カードのボタンの優先順位 (#2460)
   「詳細を見る」と「お気に入り」が 190x44px でまったく同じ面積だった。
   主動線(詳細を見る)と副次動線(お気に入り)の優先順位が伝わらない。
   お気に入りを一回り小さくして差を付ける。押しやすさは保つ(高さ40px)。 */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .btn-02{
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
}
/* #2460 お気に入りだけ 86% に縮めて控えめにしていたが、
   同じ列に縦積みするボタンの幅が 163 と 190 で揃わず雑に見えていた。
   主従は色 (白地の枠線 / 緑のベタ) で示すので寸法は合わせる。 */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .flex-box-col > div:has(.btn-02){
    width: 100%;
}

/* TOPのお知らせも一覧と同じ扱いにする (#2460)
   カテゴリが「お知らせ」1種類しか運用されておらず、
   緑のバッジが並ぶだけで情報量がゼロだった。
   一覧ページ(/articles)と同じく地味にする。 */
body:has(.quick_access) .newsArea .news_cat_icon_c,
body:has(.quick_access) .newsArea .news_cat_icon_b{
    background: var(--c-bg-gray);
    color: var(--c-text-sub);
    font-weight: normal;
}

/* 角丸の端数を基準の3段に丸める (#2460)
   2 / 3 / 3.78 / 5 / 8 / 10px が残っていた。
   ボタン・バッジ・入力欄=4px / カード=6px / チップ=ピル。 */
.news_cat_icon_a,
.news_cat_icon_b,
.news_cat_icon_c,
.archive_newsList [class^="news_cat_icon"],
.auctions_window .car_rated,
.news_backnumber{
    border-radius: var(--r-sm);
}
/* 動画ガイドのカード */
.movie-guide{
    border-radius: var(--r-md);
}
.movie-guide__step--main{
    border-radius: var(--r-sm);
}

/* 残っていた端数の角丸 (#2460)
   お知らせのカテゴリバッジ 2px / バックナンバー 3px /
   動画ガイドのカード 10px・8px を基準に丸める。 */
.archive_newsList [class^="news_cat_icon"],
body:has(.quick_access) .newsArea [class^="news_cat_icon"],
.news_backnumber{
    border-radius: var(--r-sm);
}

/* 影を2段に寄せる (#2460)
   0.12/0.15 の濃さや 6px/8px のぼかしが混在していた。
   --sh-1(静止) / --sh-2(浮いている面) の2つに集約する。 */
.pickup_nav,
.photo_thumbs_nav,
.reuse_bookmark_folder_btn{
    box-shadow: var(--sh-1);
}

/* セクション見出しの大きさを1つに揃える (#2460)
   16px と 17px が混在していた(TOPの各セクションだけ17px)。
   1px の差は並べたときに気付かれるので16pxに寄せる。 */
.member_xhibit .top_section_ttl,
.top_section_head .top_section_ttl,
.top_section_ttl{
    font-size: 16px;
}

/* ボタンの文字サイズを基準の3段に丸める (#2460)
   13.3333 / 14.4 / 15.2 / 22.4px は rem 由来の端数。
   基準は 16px(主要CTA) / 14px(標準) / 13px(小さい操作)。 */
.photo-guide-banner,
.photo_thumb,
.pickup_nav,
.reuse_photo_toggle,
.reuse_bookmark_folder_btn{
    font-size: 13px;
}
.btn.btn-default{
    font-size: 14px;
}
/* 検索するは主要CTA */
.search_bar_submit{
    font-size: 16px;
}

/* 詳細条件のラジオを内容の幅で並べる (#2460)
   .radio_label に width:50% が当たっており2択前提だった。
   3択(全て / 可 / 不可 など)が2行に折れ、右側に大きな空隙ができていた。
   内容の幅で横に並べ、入りきらないときだけ折り返す。

   欄全体を flex にすると範囲入力(〜)の組み方が崩れるので、
   ラジオを持つ欄だけを対象にする。 */
.search_table .search_value:has(.radio_label){
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
}
.search_table .search_value .radio_label{
    width: auto;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
}

/* 新規会員登録ボタン(ログイン前のCTA)の色 (#2460)
   #2485 で「CTA色はオレンジ」と決めた意図は保つが、
   #f38900 に白文字はコントラスト 2.50 で基準(4.5)に大きく届かず、
   ログイン前で最も押してほしいボタンが読みにくかった。
   オレンジ系のまま濃い側(#c05600 / 白地 4.59)にする。
   この色はお知らせのカテゴリバッジ・売切バッジでも使っている。 */
.signup_btn,
.mainVisual #mainVisual_left .signup_btn,
body:has(.head_bg.no_login) .signup .signup_btn,
body:has(.head_bg.no_login) .footer_fixed_btn-signup{
    background: #f07c00;
    border-color: #f07c00;
}
.signup_btn:hover,
.mainVisual #mainVisual_left .signup_btn:hover,
body:has(.head_bg.no_login) .signup .signup_btn:hover,
body:has(.head_bg.no_login) .footer_fixed_btn-signup:hover{
    background: #d86e00;
    border-color: #d86e00;
}

/* ---- #2460 お気に入りの状態表示 ----
   「お気に入り」（未登録）と「解除」（登録済み）は文言だけの差で、
   どちらが今の状態なのか一目で分からなかった。
   登録済みの側に ★ を付けて「入っている」ことを示す。

   ボタンは line-height で縦中央を作っていたため、::before に独自の
   line-height を与えると行ボックスが縮んで文字が上付きになる。
   flex で中央に揃え、★ にはサイズも行高も指定しない。 */
.auctions_linkArea .btn-02.delete_watch_list,
.auctions_linkArea .btn-02.add_watch_list{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.auctions_linkArea .btn-02.delete_watch_list::before{
    content: "★";
}
.auctions_linkArea .btn-02.add_watch_list::before{
    content: "☆";
    color: var(--c-text-weak);
}
/* お気に入り一覧のように全件が登録済みの画面では状態の印は不要 */
.auctions_linkArea .btn-02.is-plain::before{
    content: none;
}

/* SP ではボタン列が折返しの最後尾で 133px しか取れず、
   「お気に入り済み」が2行に折れてボタンの形が崩れていた。
   ボタンは操作の要なので SP では1行に使い切らせる。 */
@media screen and (max-width: 899px){
    .auctions_window_inner > .auctions_linkArea{
        width: 100%;
        flex: 0 0 100%;
    }
    /* SP で表に出るのはお気に入りだけ（詳細は .pc で非表示・カード全体がリンク） */
    .auctions_linkArea .flex-box-col > div{
        width: 100%;
    }
    .auctions_linkArea .flex-box-col > div > .btn-02{
        width: 100%;
    }
}

/* ---- #2460 保存した検索条件のバーに見出しを付ける ----
   ブラウザのブックマークバーに倣った並びだが、ラベルが無いため
   保存名（例「テスト」）だけが浮いて見え、何のバーか分からなかった。 */
.reuse_bookmark_bar::before{
    content: "保存した条件";
    flex: 0 0 auto;
    margin-right: 4px;
    padding-right: 10px;
    border-right: 1px solid var(--c-border);
    color: var(--c-text-weak);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}
@media screen and (max-width: 899px){
    /* SP は横幅が足りないので見出しを出さない */
    .reuse_bookmark_bar::before{ display: none; }
}

/* ---- #2460 落札・受注後の流れを畳む ----
   0 件のときも 280px を常設しており、毎日使う画面の上部を占有していた。
   既定は畳み、初めての人が開けるよう見出しに手順があることを示す。 */
.flow_bnrArea .flow_bnr:not([open]){
    padding: 0;
    background: var(--c-bg-subtle);
    border-color: var(--c-border);
}
.flow_bnrArea .flow_bnr_ttl{
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.flow_bnrArea .flow_bnr_ttl::-webkit-details-marker{ display: none; }
/* 閉じているときは控えめな1行に */
.flow_bnrArea .flow_bnr:not([open]) .flow_bnr_ttl{
    margin: 0;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--c-text-sub);
    letter-spacing: 0;
}
.flow_bnrArea .flow_bnr_ttl::after{
    content: "手順を見る";
    font-size: 12px;
    font-weight: normal;
    color: var(--c-green-dark);
    border: 1px solid var(--c-info-line);
    border-radius: var(--r-pill);
    background: #fff;
    padding: 3px 10px;
    line-height: 1.4;
}
.flow_bnrArea .flow_bnr[open] .flow_bnr_ttl::after{
    content: "閉じる";
}
.flow_bnrArea .flow_bnr_ttl:hover::after{
    background: var(--c-hover-bg);
    border-color: var(--c-hover-border);
    color: var(--c-hover-text);
}

/* ---- #2460 書類お知らせを畳む ----
   0 件のときも 250px を占有し、車両一覧が 1000px 下にあった。 */
.doc_notice > .doc_notice_ttl{
    cursor: pointer;
    list-style: none;
}
.doc_notice > .doc_notice_ttl::-webkit-details-marker{ display: none; }
/* 開閉の状態を示す ＋ / − */
.doc_notice > .doc_notice_ttl::after{
    content: "＋";
    margin-left: auto;
    font-size: 15px;
    line-height: 1;
    color: var(--c-text-sub);
}
.doc_notice[open] > .doc_notice_ttl::after{
    content: "−";
}
/* 畳んでいるときは下の罫線を出さない */
.doc_notice:not([open]) > .doc_notice_ttl{
    border-bottom: none;
}

/* 高さも 40 と 44 で違っていたので揃える */
.auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .btn-01,
.auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .btn-02{
    min-height: 44px;
    box-sizing: border-box;
}

/* ---- #2460 書類送付のご案内を SP で畳む ----
   落札・受注後の流れ (.flow_bnr) と同じ体裁にする。
   PC は開いた状態が既定で、狭いときだけ閉じる。 */
.document_send_info > .document_send_info_ttl{
    cursor: pointer;
    list-style: none;
}
.document_send_info > .document_send_info_ttl::-webkit-details-marker{ display: none; }
/* ::after は帯の下のラインに使われているので ::before を使う。
   帯の中に収めるため右端に絶対配置する。 */
.document_send_info > .document_send_info_ttl::before{
    content: "手順を見る";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    padding: 3px 10px;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.4;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--r-pill);
}
.document_send_info[open] > .document_send_info_ttl::before{
    content: "閉じる";
}
.document_send_info > .document_send_info_ttl:hover::before{
    background: rgba(255, 255, 255, .28);
}
/* 畳んでいるときは背景の装飾を出さない */
.document_send_info:not([open]) .document_send_info_bg{
    display: none;
}

/* SP は幅が足りず、見出しと「手順を見る」が重なる。
   ボタンは絶対配置をやめて見出しの下に置く。 */
@media screen and (max-width: 899px){
    .document_send_info > .document_send_info_ttl{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 10px 12px;
        line-height: 1.4;
    }
    .document_send_info > .document_send_info_ttl::before{
        position: static;
        transform: none;
        /* ::before は既定で先頭に来るので、見出しの下に回す */
        order: 2;
    }
}

/* _________________________________________ SP の一覧カード (リスト表示) #2460
   従来は flex + order で並べていたが、
   - 写真に上余白 50px (旧「人気」タグの置き場) があり、カード上部が空いていた
   - 車名の行が全幅でないため、短い車名だけ写真の右に回り込み、カードごとに位置が飛んでいた
   - 価格・入札件数・日時の位置がカードの中身の長さで入れ替わっていた
   位置が中身に左右されないよう、グリッドで固定する。
     1段目: 車名 (全幅)
     2段目: 写真 | 諸元
     3段目: 入札締切・引取日時 | 入札件数
     4段目: 現在価格 (全幅・右寄せ)
     5段目: ボタン */
@media screen and (max-width: 899px){
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner{
        display: grid;
        grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
        -webkit-column-gap: 12px;
           -moz-column-gap: 12px;
                column-gap: 12px;
        row-gap: 8px;
        align-items: start;
        height: auto;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner > *{
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carName{
        grid-column: 1 / -1;
        grid-row: 1;
    }
    /* 「人気」は車名の行の先頭に並べる (カード左上に浮かせていたのをやめる) */
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carName .icon_popular{
        position: static;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carImg{
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        padding-top: 0;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_desc{
        grid-column: 2;
        grid-row: 2;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_end_at{
        grid-column: 1;
        grid-row: 3;
        text-align: left;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_end_at > span{
        padding-left: 0;
        padding-right: 0;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_tender_count{
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_buyout_price{
        grid-column: 1 / -1;
        grid-row: 4;
        justify-self: stretch;
        text-align: right;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_linkArea{
        grid-column: 1 / -1;
        grid-row: 5;
    }
}

/* _________________________________________ 769〜1279px の一覧カード (リスト表示) #2460
   769px 以上には 1540px 幅向けの寸法 (写真 200px / ボタン列 190px / 列間 24px / 諸元 2列の間 64px) が
   当たっており、1024px では諸元の列が 92px しか残らず、項目名と値が縦に積まれて
   「ミッショ/ン」「GH-/9NBTS」「東京都千/代田区」と割れていた (実測)。
   この幅では 1150px 幅のときの詰めた寸法に戻す */
@media screen and (min-width: 900px) and (max-width: 1279px){
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner{
        grid-template-columns: 132px minmax(0, 1fr) 0 auto 150px;
        -webkit-column-gap: 14px;
           -moz-column-gap: 14px;
                column-gap: 14px;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carImg a{
        height: 74px;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_box{
        padding: 10px 14px;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carName .car_name_td a{
        font-size: 16px;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carDesc dl:not(:first-child){
        margin-left: 14px;
        padding-left: 14px;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carDesc dt,
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carDesc dd{
        font-size: 12px;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_buyout_price .now_amount{
        font-size: 22px;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .btn-01,
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .btn-02{
        padding: 8px 10px;
        font-size: 13px;
    }
}
/* 769〜1023px は諸元の列が 220px ほどしかなく、2列に割ると値が「東京都千/代田区」と割れる。
   2つの表を縦に続けて 1 列にする */
@media screen and (min-width: 900px) and (max-width: 1023px){
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carDesc{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carDesc dl{
        width: 100%;
        margin: 0;
    }
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_window_carDesc dl:not(:first-child){
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
}

/* _________________________________________ 769〜1279px の検索バー #2460
   年式の欄 (セレクト 2つ + 〜 で 262px) が min-width:0 のため 224px に縮められ、
   2つ目のセレクトの右端が「詳細条件」ボタンの下に潜っていた (実測 1024px)。
   年式は縮めず、キーワード欄の基準幅を下げ、入りきらない幅ではボタン群を次の行に送る */
@media screen and (min-width: 900px) and (max-width: 1279px){
    .search_bar{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .search_bar_keyword{
        -ms-flex: 1 1 200px;
            flex: 1 1 200px;
    }
    .search_bar_field:has(.search_bar_range){
        -ms-flex: none;
            flex: none;
    }
}

/* _________________________________________ SP のコーナータブ #2460
   SP は縦積み (flex-direction: column) にしていたが、各タブの flex: 1 (基準 0) が
   高さ 40px の指定より優先され、20px の細い帯に潰れていた (実測 390px / 768px)。
   3つを横に並べたタブにし、長い名前は文節で2行に折って高さ 44px 以上を取る */
@media screen and (max-width: 899px){
    .corner_tab_flat{
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
    .corner_tab_flat .link{
        -webkit-box-flex: 1;
            -ms-flex: 1 1 0;
                flex: 1 1 0;
        min-width: 0;
        height: auto;
        min-height: 44px;
        /* 「カーネクストコーナー」(10文字) は1つの文節なので、1行に入らないと語の途中で折れる。
           390px で 1タブ 123px に収まる大きさにする */
        padding: 4px 2px;
        border-top: 1px solid #dcdfd9;
        border-left: none;
        font-size: 11px;
        line-height: 1.3;
        text-align: center;
    }
    .corner_tab_flat .link:first-of-type{
        border-left: 1px solid #dcdfd9;
        border-radius: 4px 0 0 4px;
    }
    .corner_tab_flat .link:last-of-type{
        border-radius: 0 4px 4px 0;
    }
    .corner_tab_flat .link[active="1"]{
        border-color: #2f7d20;
    }
}

/* SP の表は左右 10px はみ出させて全幅で見せているが (上の width: calc(100% + 20px))、
   0件の案内は枠付きのカードなので、はみ出すと枠線が画面の左右端に貼り付く */
@media screen and (max-width: 899px){
    .table-auctions:has(> .empty_result){
        width: auto;
        left: 0;
    }
}

/* SP ではお知らせと案内カードが縦積みになる。上の flex: 0 1 640px が高さとして効き、
   幅は中身なり (308px) に縮んで、右に 62px の空きができていた (実測 390px / 768px) */
@media screen and (max-width: 899px){
    .info_cards{
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
        width: 100%;
        -ms-flex-item-align: stretch;
            align-self: stretch;
    }
}

/* 中身の無い .footer-contact (プロ出品・損害車の一覧に空のまま残っている) が、
   画面下端に半透明の灰色の帯 (高さ 20px) として固定表示され、本文に重なっていた */
.footer-contact:not(:has(*)){
    display: none;
}

/* ログイン前トップのピックアップ: 諸元の表は1つだけ (2つ目は非表示) なのに、
   一覧用の基本指定 (dl{width:50%}) で 116px に縮み、値の列が 40〜52px しか無く
   「R1/201/9」「114,00/0km」「1,600c/c」と割れていた (1024〜1920px すべて) */
.lp_contents .pickup_carousel .auctions_window .auctions_window_inner .auctions_window_carDesc dl{
    width: 100%;
}
/* SP: 項目名の列は 54px なのに、一覧用の SP 指定 (dt{min-width:70px}) で 70px に広がって
   値の列に食い込み、「走行距離114,000km」とくっついて見えていた */
@media screen and (max-width: 899px){
    .lp_contents .pickup_carousel .auctions_window .auctions_window_inner .auctions_window_carDesc dl{
        grid-template-columns: auto minmax(0, 1fr);
        -webkit-column-gap: 8px;
           -moz-column-gap: 8px;
                column-gap: 8px;
    }
    .lp_contents .pickup_carousel .auctions_window .auctions_window_inner .auctions_window_carDesc dt,
    .lp_contents .pickup_carousel .auctions_window .auctions_window_inner .auctions_window_carDesc dd{
        width: auto;
        min-width: 0;
        margin-left: 0;
    }
}

/* _________________________________________ クイックアクセスの寸法 #2460
   上の「デザイン案に合わせて大きく」(余白 22px 24px / アイコン 40px / 文字 17px) が
   SP 用の指定より後ろにあり、390px では文字の列が 67px しか残らず
   「出品す/る」「入札車/両」、1024px でも「車両を探/す」と折れていた */
@media screen and (max-width: 1279px){
    .quick_access_item{
        padding: 16px 14px;
        gap: 10px;
    }
    .quick_access_item .gnav_icon{
        width: 32px;
        height: 32px;
    }
    .quick_access_title{
        font-size: 15px;
    }
    .quick_access_note{
        font-size: 12px;
    }
}
@media screen and (max-width: 899px){
    .quick_access_item{
        padding: 14px 12px;
    }
}

/* ピックアップ / おすすめ車両のカード: 価格の箱の margin-bottom:-5px (一覧用) のため、
   「〆近」などで中身が高いカードでは、ボタン行や「入札締切日時」に 5px 重なっていた (実測 1024px) */
.lp_contents .auctions_window .auctions_window_buyout_price{
    margin-bottom: 0;
}
.lp_contents .auctions_window .auctions_linkArea{
    margin-top: 8px;
}
/* #2460 ピックアップ / おすすめ車両のカード (SP): 一覧用の SP 指定
   (.auctions_window_inner { flex-wrap: wrap } と .auctions_linkArea { flex: 0 0 100% }) が当たり、
   縦並びのカードでは 100% が高さとして効いて、ボタン行がカードの右外へ回り込んで見えなかった。
   打ち消して、カードの一番下に「詳細を見る」「お気に入り」を半分ずつ横に並べる (PC と同じ並び) */
@media screen and (max-width: 899px){
    .lp_contents .auctions_window .auctions_window_inner{
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    }
    .lp_contents .auctions_window .auctions_window_inner > .auctions_linkArea{
        -webkit-box-flex: 0;
            -ms-flex: none;
                flex: none;
        width: auto;
    }
}
/* #2460 ピックアップの自動スクロール (Traders/Index の JS が .is-marquee を付ける)。
   流している間は scroll-snap と smooth を切る (少しずつの移動がカードの端に吸い付いて止まるため)。
   SP の細いスクロールバーは「続きがある」目印だったが、ループすると先頭へ戻るたびに
   つまみが跳ねるので隠す */
.lp_contents .auctions_window.is-marquee{
    scroll-snap-type: none;
    scroll-behavior: auto;
}
/* 流している間は 1px 未満の端数だけカードを transform でずらす (--mq-shift は JS が 0〜1 で渡す)。
   scrollLeft は整数 px でしか止まらず、端数を捨てると歩幅が不揃いになってカクついて見えるため。
   カードは合成レイヤーにして、ずらしても描き直しが起きないようにする */
.lp_contents .auctions_window.is-marquee > .auctions_window_box{
    will-change: transform;
}
.lp_contents .auctions_window.is-marquee.is-shifting > .auctions_window_box{
    -webkit-transform: translate3d(calc(var(--mq-shift, 0) * -1px), 0, 0);
            transform: translate3d(calc(var(--mq-shift, 0) * -1px), 0, 0);
}
@media screen and (max-width: 899px){
    .lp_contents .auctions_window.is-marquee{
        scrollbar-width: none;
    }
    .lp_contents .auctions_window.is-marquee::-webkit-scrollbar{
        display: none;
    }
}

/* #2460 訴求バー (年会費無料など3項目): 横3つに nowrap で並べると 1005px 必要で、
   1100px 以下では文字が帯からはみ出して横スクロールが出ていた (実測 834px で 20px)。
   SP と同じく縦に積む */
@media screen and (min-width: 900px) and (max-width: 1100px){
    .member_xhibit_head .feature_bar{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .member_xhibit_head .feature_bar_br{
        display: inline;
    }
}

/* #2460 落札・受注後の流れ (769〜1100px): 5ステップの列が縮めず (min-width:auto)、
   右の「初めてのお客様へ。」(196px) がカードの外へ 15px はみ出していた (実測 834px)。
   この幅では「初めてのお客様へ。」をステップの下に全幅で置く */
@media screen and (min-width: 900px) and (max-width: 1100px){
    .flow_bnrArea .flow_bnr_body{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        row-gap: 18px;
    }
    .flow_bnrArea .flow_bnr_steps{
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
        min-width: 0;
    }
    .flow_bnrArea .flow_bnr_first{
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    }
}

/* _________________________________________ リユースの検索エリア SP (#2460)
   SP は検索バー (キーワード / メーカー / 年式) と保存した条件の並びで一覧が画面の下に押し出されていた。
   - 検索バーは「詳細条件」「検索する」だけにする。メーカー・年式は詳細条件パネルに同じ項目がある。
     キーワードは詳細条件パネルに無いため、詳細条件を開いたときだけ出す (入力中の値は条件チップにも出る)
   - 保存した条件の並びは出さず、「現在の条件を保存」「管理」「検索リスト」を1行に並べる。
     保存した条件は「検索リスト」のモーダルから選ぶ
   - 並び替えと表示件数を横に並べる
 _________________________________________ */
/* 検索リストは SP だけ (PC は保存した条件がバーに並んでいる)。
   .btn の display に負けないよう親を前置する */
.reuse_bookmark_actions .reuse_bookmark_list_btn{
    display: none;
}
/* 検索リスト: 画面下からせり上がるシート (SP)。
   背景を暗くし、パネルは上端だけ角丸にして下から出す。一覧はパネルの中でスクロールする */
.reuse_bookmark_modal.reuse_bookmark_sheet{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background-color: rgba(20, 28, 16, .45);
    -webkit-animation: rb_sheet_fade .2s ease both;
            animation: rb_sheet_fade .2s ease both;
}
.reuse_bookmark_sheet_panel{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: 82vh;
    max-height: 82dvh;
    padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(20, 28, 16, .18);
    box-sizing: border-box;
    -webkit-animation: rb_sheet_up .3s cubic-bezier(.2, .8, .2, 1) both;
            animation: rb_sheet_up .3s cubic-bezier(.2, .8, .2, 1) both;
}
.reuse_bookmark_sheet.is_closing{
    -webkit-animation: rb_sheet_fade_out .2s ease both;
            animation: rb_sheet_fade_out .2s ease both;
}
.reuse_bookmark_sheet.is_closing .reuse_bookmark_sheet_panel{
    -webkit-animation: rb_sheet_down .2s ease-in both;
            animation: rb_sheet_down .2s ease-in both;
}
@keyframes rb_sheet_fade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes rb_sheet_fade_out{ from{ opacity: 1; } to{ opacity: 0; } }
@keyframes rb_sheet_up{ from{ transform: translateY(100%); } to{ transform: translateY(0); } }
@keyframes rb_sheet_down{ from{ transform: translateY(0); } to{ transform: translateY(100%); } }
/* 引き出しの取っ手 (見た目の手がかりだけ) */
.reuse_bookmark_sheet_grip{
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 10px;
    background: #d9ddd6;
    border-radius: 999px;
}
.reuse_bookmark_sheet_head{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0 16px 14px 20px;
    border-bottom: 1px solid #edf0ec;
}
.reuse_bookmark_sheet_head_txt{
    flex: 1 1 auto;
    min-width: 0;
}
.reuse_bookmark_sheet_ttl{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #222;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.4;
}
.reuse_bookmark_sheet_count{
    padding: 2px 8px;
    background: #eef6e9;
    color: var(--c-green-dark);
    border-radius: 999px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.5;
}
.reuse_bookmark_sheet_lead{
    margin: 2px 0 0;
    color: #777;
    font-size: 12px;
}
.reuse_bookmark_sheet_close{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-top: -4px;
    padding: 0;
    background: #f3f5f2;
    color: #555;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: background-color .2s ease, color .2s ease;
            transition: background-color .2s ease, color .2s ease;
}
.reuse_bookmark_sheet_close:hover,
.reuse_bookmark_sheet_close:focus-visible{
    background: #fff6e8;
    color: #d97d00;
    outline: none;
}
/* 一覧 */
.reuse_bookmark_pick_list{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
/* 条件の行: 淡い地のカード。左に虫眼鏡、右に矢印 */
.reuse_bookmark_pick_item{
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 10px 40px 10px 12px;
    box-sizing: border-box;
    background: #f6f8f5;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #333;
    font-size: 15px;
    line-height: 1.4;
    position: relative;
    -webkit-transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
            transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.reuse_bookmark_pick_item::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-top: 2px solid #b4bab0;
    border-right: 2px solid #b4bab0;
    transform: rotate(45deg);
    -webkit-transition: border-color .2s ease, right .2s ease;
            transition: border-color .2s ease, right .2s ease;
}
.reuse_bookmark_pick_item:hover,
.reuse_bookmark_pick_item:focus-visible{
    background: #fff6e8;
    border-color: #f0c99a;
    color: #d97d00;
    text-decoration: none;
    outline: none;
}
.reuse_bookmark_pick_item:hover::after,
.reuse_bookmark_pick_item:focus-visible::after{
    right: 14px;
    border-color: #d97d00;
}
.reuse_bookmark_pick_item:active{
    transform: scale(.98);
}
.reuse_bookmark_pick_icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    background: #fff;
    color: var(--c-green);
    border-radius: 50%;
    box-shadow: var(--sh-1);
}
.reuse_bookmark_pick_name{
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-all;
}
/* フォルダ: 開閉できる枠。見出しにフォルダ名と件数、右端に開閉の矢印 */
.reuse_bookmark_pick_group{
    border: 1px solid #e6e9e4;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.reuse_bookmark_pick_folder{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    color: var(--c-green-dark);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
}
.reuse_bookmark_pick_folder::-webkit-details-marker{
    display: none;
}
.reuse_bookmark_pick_folder::after{
    content: "";
    width: 7px;
    height: 7px;
    /* 開いているときは上向き (閉じられる)、閉じているときは下向き (開ける) */
    margin: 2px 4px 0 auto;
    border-right: 2px solid #9aa196;
    border-bottom: 2px solid #9aa196;
    transform: rotate(-135deg);
    -webkit-transition: transform .2s ease;
            transition: transform .2s ease;
}
.reuse_bookmark_pick_group:not([open]) .reuse_bookmark_pick_folder::after{
    margin-top: -4px;
    transform: rotate(45deg);
}
.reuse_bookmark_pick_folder_icon{
    display: inline-flex;
    color: var(--c-green);
}
.reuse_bookmark_pick_folder_icon svg{
    width: 16px;
    height: 16px;
}
.reuse_bookmark_pick_folder_name{
    min-width: 0;
    word-break: break-all;
}
.reuse_bookmark_pick_folder_count{
    padding: 0 7px;
    background: #f1f3f0;
    color: #666;
    border-radius: 999px;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.7;
}
.reuse_bookmark_pick_group_body{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 10px 10px;
}
.reuse_bookmark_pick_empty{
    margin: 0;
    padding: 12px;
    background: #fafbf9;
    border: 1px dashed #dfe3dc;
    border-radius: 10px;
    color: #999;
    font-size: 13px;
    text-align: center;
}
/* 未登録のとき */
.reuse_bookmark_pick_blank{
    padding: 28px 16px 24px;
    text-align: center;
    color: #444;
    font-size: 15px;
    font-weight: bold;
}
.reuse_bookmark_pick_blank p{
    margin: 0;
}
.reuse_bookmark_pick_blank_icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    background: #eef6e9;
    color: var(--c-green);
    border-radius: 50%;
}
.reuse_bookmark_pick_blank_icon svg{
    width: 24px;
    height: 24px;
}
.reuse_bookmark_pick_blank .reuse_bookmark_pick_blank_sub{
    margin-top: 6px;
    color: #777;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.6;
}
@keyframes search_bar_drop{ from{ transform: translateY(-8px); opacity: 0; } to{ transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce){
    .search_bar.is_fixed{
        -webkit-animation: none;
                animation: none;
    }
}
/* シートを開いている間は後ろのページをスクロールさせない */
body.is_sheet_open{
    overflow: hidden;
}
@media (prefers-reduced-motion: reduce){
    .reuse_bookmark_modal.reuse_bookmark_sheet,
    .reuse_bookmark_sheet_panel,
    .reuse_bookmark_sheet.is_closing,
    .reuse_bookmark_sheet.is_closing .reuse_bookmark_sheet_panel{
        -webkit-animation: none;
                animation: none;
    }
    .reuse_bookmark_pick_item,
    .reuse_bookmark_pick_item::after,
    .reuse_bookmark_pick_folder::after{
        -webkit-transition: none;
                transition: none;
    }
}
@media screen and (max-width: 899px){
    /* 検索バー: 欄は隠してボタンだけにする */
    .search_bar{
        padding: 12px;
    }
    .search_bar_field{
        display: none;
    }
    .search_bar:has(.search_bar_detail.is_open) .search_bar_keyword{
        display: flex;
    }
    /* スクロールしたらヘッダーの下に固定する (top は JS がヘッダーの下端に合わせる)。
       画面幅いっぱいの帯にし、影で本文から浮かせる。SP メニューの暗幕 (z-index:100) より下に置く */
    .search_bar.is_fixed{
        position: fixed;
        left: 0;
        right: 0;
        z-index: 90;
        margin: 0;
        padding: 8px 10px;
        border-width: 0 0 1px;
        border-radius: 0;
        box-shadow: var(--sh-2);
        -webkit-animation: search_bar_drop .2s ease both;
                animation: search_bar_drop .2s ease both;
    }
    /* 固定中はボタンの行だけにする (入力中のキーワード欄は消さない) */
    .search_bar.is_fixed .search_bar_keyword:not(:focus-within){
        display: none;
    }
    .search_bar.is_fixed .search_bar_detail,
    .search_bar.is_fixed .search_bar_submit{
        height: 40px;
    }

    /* 保存した条件: 並びは出さず、操作ボタン3つを1行に */
    .reuse_bookmark_bar{
        padding: 8px;
    }
    .reuse_bookmark_items,
    .reuse_bookmark_overflow{
        display: none;
    }
    .reuse_bookmark_actions{
        width: 100%;
        gap: 6px;
    }
    /* 「現在の条件を保存」は SP では「条件を保存」にする */
    .reuse_bookmark_save_prefix{
        display: none;
    }
    .reuse_bookmark_actions .reuse_bookmark_action{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        /* 幅は文字なりにして余りを分け合う (.btn_b の固定幅を外す) */
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        min-height: 40px;
        padding: 6px 8px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* 並び替えと表示件数を横に並べる。
       並び替えの基準幅を「行幅 − 表示件数ぶん」にして、検索結果・写真ありの行には入れず次の行に送る */
    .reuse_auctions_content_tt .content_tt_sort{
        width: auto;
        flex: 1 1 calc(100% - 160px);
        min-width: 0;
    }
    .reuse_auctions_content_tt .content_tt_perpage{
        flex: 0 0 auto;
    }
    .reuse_auctions_content_tt .content_tt_perpage select{
        min-width: 0;
    }
}

/* _________________________________________ 一覧カードの「詳細を見る」を SP でも出す (#2460)
   リユース / カーネクスト / プロ出品 / 損害車 の一覧は、SP では「詳細を見る」が .pc で隠れ、
   詳細へは車名のリンクしか入口が無かった。ログイン後 TOP のピックアップと同じく
   「お気に入り」「詳細を見る」を半分ずつ横に並べる (左: お気に入り / 右: 詳細を見る。業務の指定)。
   PC の並び (お気に入り → 詳細を見る) と同じ順 */
@media screen and (max-width: 899px){
    /* リスト表示の PC 用指定 (:not(.is_grid_view) 付き・縦並び) より強くして横並びにする */
    .auctions_window.is_card_view .auctions_linkArea .flex-box-col,
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .flex-box-col{
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        gap: 8px;
    }
    .auctions_window.is_card_view .auctions_linkArea .flex-box-col > div,
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .flex-box-col > div,
    .reuse_auctions_window.is_grid_view .auctions_linkArea .flex-box-col > div{
        -webkit-box-flex: 1;
            -ms-flex: 1 1 0;
                flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
    .auctions_window.is_card_view .auctions_linkArea .flex-box-col > div:has(.btn-02):not(.auctions_link_detail),
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .flex-box-col > div:has(.btn-02):not(.auctions_link_detail){
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
    }
    .auctions_window.is_card_view .auctions_linkArea .flex-box-col > div.auctions_link_detail:has(.btn-01),
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .flex-box-col > div.auctions_link_detail:has(.btn-01){
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
    }
    /* 2つのボタンは同じ高さ・同じ文字の大きさにそろえる */
    .auctions_window.is_card_view .auctions_linkArea .flex-box-col > div > .btn-01,
    .auctions_window.is_card_view .auctions_linkArea .flex-box-col > div > .btn-02,
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .flex-box-col > div > .btn-01,
    .auctions_window.is_card_view:not(.is_grid_view) .auctions_linkArea .flex-box-col > div > .btn-02{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 100%;
        min-height: 44px;
        margin: 0;
        padding: 8px 4px;
        font-size: 14px;
        line-height: 1.3;
        text-align: center;
        white-space: nowrap;
        box-sizing: border-box;
    }
}

/* _________________________________________ カーネクスト / プロ出品 / 損害車 の見出し行 SP (#2460)
   SP は「エリア・条件を変更する」がコーナー名の下の行に回り、見出しだけで2行を使っていた。
   ボタンの文言をリユースと同じ「詳細条件」にし (JS で切り替え)、コーナー名と1行に並べる。
   スクロールしたらこの行をヘッダーの下に固定する (x-index.sticky-bar が .is_fixed を付ける)。
   お気に入り一覧 (同じボタンを持つ) は対象外にするため .corner_tt を付けた3画面だけに効かせる */
@media screen and (max-width: 899px){
    .auctions.corner_index .main_tt.corner_tt{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
        background: #fff;
    }
    /* 縦線は1行の中央に合わせる (2行前提の top:.22em だとずれる) */
    .auctions.corner_index .main_tt.corner_tt::before{
        top: 50%;
        margin-top: -.5em;
    }
    .auctions.corner_index .main_tt.corner_tt .search_bar_detail{
        margin: 0;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        min-width: 112px;
        height: 40px;
    }
    /* 固定中は画面幅いっぱいの帯にし、影で本文から浮かせる。縦線は帯の左端から 10px */
    .auctions.corner_index .main_tt.corner_tt.is_fixed{
        position: fixed;
        left: 0;
        right: 0;
        z-index: 90;
        margin: 0;
        padding: 8px 10px 8px 27px;
        border-bottom: 1px solid #e3e6e3;
        box-shadow: var(--sh-2);
        -webkit-animation: search_bar_drop .2s ease both;
                animation: search_bar_drop .2s ease both;
    }
    .auctions.corner_index .main_tt.corner_tt.is_fixed::before{
        left: 10px;
    }
}
@media (prefers-reduced-motion: reduce){
    .auctions.corner_index .main_tt.corner_tt.is_fixed{
        -webkit-animation: none;
                animation: none;
    }
}

/* _________________________________________ 検索結果リストのスペック: 値にだけ地色を付ける (#2460)
   リユース / カーネクスト / プロ出品 / 損害車 の一覧 (.corner_list。お気に入り一覧も同じ)。
   PC は項目名と値が同じ大きさ・細字・ほぼ同じ色で区別がつかず、SP は項目名にだけ濃いグレーの地があり
   値より項目名が目立っていた。並びは今のまま、項目名は地色なしの補助色、値は淡い地色 + 本文色にする。
   地色は現在価格の枠と同じ */
.auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carDesc dt{
    background: none;
    color: #666;
    font-weight: normal;
}
.auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carDesc dd{
    padding-left: 8px;
    padding-right: 8px;
    background: #f5f7f2;
    border-radius: var(--r-sm);
    color: #222;
    box-sizing: border-box;
}
@media screen and (max-width: 899px){
    /* SP の項目名は左に 5px の字下げ (地色があった頃の余白) があったので戻す */
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carDesc dt{
        padding-left: 0;
    }
    /* 値の欄は 75〜100px と狭いので、地色の内側の余白は詰める (「110,000km」を1行に収める) */
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_carDesc dd{
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* 320px 前後の SP は コーナー名 (18px) と「詳細条件」(最小 112px) が並びきらず、10px の横スクロールが出ていた */
@media screen and (max-width: 359px){
    .auctions.corner_index .main_tt.corner_tt{
        font-size: 16px;
    }
    .auctions.corner_index .main_tt.corner_tt .search_bar_detail{
        min-width: 0;
        padding: 0 12px;
    }
}

/* _________________________________________ 検索結果リスト: 入札件数 / 入札締切日時 / 引取日時 / 現在価格 (#2460)
   4コーナーとお気に入りの一覧 (.corner_list) だけ。項目名は左、値は地色を付けて右に寄せる (スペックの値と同じ地色)。
   値の塊は Blade 側で .card_kv_label / .card_kv_value に分けてある (件・円 は値に含める)。
   現在価格は枠ごと地色だったのをやめ、値にだけ地色を付けて他の行と揃える */
.auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_tender_count,
.auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_end_at > span,
.auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_buyout_price{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 12px;
    padding: 0;
    text-align: left;
    white-space: nowrap;
}
.auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_tender_count,
.auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_end_at,
.auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_buyout_price{
    justify-self: stretch;
    text-align: left;
}
.auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_end_at{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4px;
    /* 既存の左右 10px の余白で、この2行だけ項目名と値が内側に寄っていた */
    padding-left: 0;
    padding-right: 0;
}
.auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_buyout_price{
    background: none;
    border-radius: 0;
}
.auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .card_kv_label{
    color: #666;
    font-size: 12px;
    font-weight: normal;
}
.auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .card_kv_value{
    padding: 2px 8px;
    background: #f5f7f2;
    border-radius: var(--r-sm);
    color: #222;
    text-align: right;
}
/* 現在価格は一番大事な値なので、地色の面を一回り大きく取る */
.auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_buyout_price .card_kv_value{
    padding: 2px 10px;
}
/* 即決有 のバッジは項目名と同じ行に並べる */
.auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_buyout_price .card_kv_label .icon_new_exhibit{
    margin-right: 6px;
}

/* SP: 右の欄が狭い (写真の右で 185px / 入札締切は左 143px) ため、4行とも全幅で縦に並べる。
     3段目: 入札件数 / 4段目: 入札締切日時・引取日時 / 5段目: 現在価格 / 6段目: ボタン */
@media screen and (max-width: 899px){
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_tender_count{
        grid-column: 1 / -1;
        grid-row: 3;
    }
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_end_at{
        grid-column: 1 / -1;
        grid-row: 4;
    }
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_buyout_price{
        grid-row: 5;
    }
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_linkArea{
        grid-row: 6;
    }
}

/* _________________________________________ 一覧カード 900〜1023px: ボタンを現在価格の下に置く (#2460)
   4コーナーとお気に入り / 入札車両 / 終了車両の一覧 (.corner_list)。
   この幅では右端のボタン列 (150px) がスペックの幅を削っていたため、ボタン列をなくし、
   お気に入り (左) / 詳細を見る (右) を 入札件数・締切・現在価格 の列の一番下に半分ずつ並べる。
     4列目: 1段目 入札件数 / 2段目 入札締切・引取日時 / 3段目 現在価格 / 4段目 ボタン
   列は「写真 / スペック / (予備) / 右の情報」の4本にする (ボタンのほかに5列目を使う要素は無い) */
@media screen and (min-width: 900px) and (max-width: 1023px){
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner{
        /* 右の情報は「お気に入り済み」と「詳細を見る」が半分ずつ1行に入る 240px 以上 */
        grid-template-columns: 132px minmax(0, 1fr) 0 minmax(240px, auto);
    }
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_linkArea{
        grid-column: 4 / 5;
        grid-row: 4 / 5;
        align-self: start;
        width: auto;
        margin-top: 8px;
    }
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_linkArea .flex-box-col{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        gap: 8px;
    }
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_linkArea .flex-box-col > div{
        -webkit-box-flex: 1;
            -ms-flex: 1 1 0;
                flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_linkArea .flex-box-col > div > .btn-01,
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_linkArea .flex-box-col > div > .btn-02{
        width: 100%;
        padding: 8px 4px;
        white-space: nowrap;
        box-sizing: border-box;
    }
}

/* _________________________________________ リユースのグリッド表示 (#2460)
   4列固定でカードが細く (1280px で 290px 前後、900〜1023px で 220px 前後)、
   「お気に入り済み」が 2〜4 行に折れてボタンの高さがカードごとに揃わなかった。
   最大 3 列にし、ボタンは 1 行に収めてカードの下端に揃える。
   899px 以下はグリッドにしない (切替ボタンを出していないため。JS 側でリスト表示に戻す) */
.reuse_auctions_window.corner_list.is_grid_view .auctions_window_box{
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 2 * 16px) / 3);
            flex: 0 0 calc((100% - 2 * 16px) / 3);
}
.reuse_auctions_window.corner_list.is_grid_view .auctions_linkArea .flex-box-col{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    gap: 8px;
}
.reuse_auctions_window.corner_list.is_grid_view .auctions_linkArea .flex-box-col > div{
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0;
            flex: 1 1 0;
    width: auto;
    min-width: 0;
}
.reuse_auctions_window.corner_list.is_grid_view .auctions_linkArea .flex-box-col > div > .btn-01,
.reuse_auctions_window.corner_list.is_grid_view .auctions_linkArea .flex-box-col > div > .btn-02{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 6px 4px;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
    box-sizing: border-box;
}

/* _________________________________________ 一覧カード SP: 入札件数〜現在価格 をスペックの列に揃える (#2460)
   4行とも全幅にしていたため、項目名がカードの左端、値が右端に離れ、どの値の項目名か追えなかった。
   写真の右の列 (スペックと同じ列) に置き、項目名はスペックの項目名 (保管場所 など) と、
   値はスペックの値の右端と揃える。列が狭く 1 行に入らないときは、値だけ次の行の右に回す */
@media screen and (max-width: 899px){
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_tender_count,
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_end_at,
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_buyout_price{
        grid-column: 2 / 3;
    }
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_tender_count,
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_end_at > span,
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_buyout_price{
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        row-gap: 2px;
        column-gap: 8px;
    }
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .card_kv_value{
        margin-left: auto;
    }
    /* 「入札締切日時 2026/9/28 06:00」が 390px の列 (185px) に 5px 入らなかった。
       写真の列を 42% → 38% にして右の列を広げ、値の左右の余白と間隔を詰める (375px まで 1 行に収まる) */
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner{
        grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    }
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_tender_count,
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_end_at > span,
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_buyout_price{
        column-gap: 6px;
    }
    .auctions_window.corner_list.is_card_view:not(.is_grid_view) .auctions_window_inner .auctions_window_end_at .card_kv_value{
        padding-left: 6px;
        padding-right: 6px;
    }
}