@charset "UTF-8";
/* ! Frame Work Style ----------------------------------------------------------------------------------------------------

　■ 共通要素
  　- 履歴

　■ 車両一覧
　■ 車両詳細
  ■ タブ_車両詳細
  　- タブ_仕入・販売・自税

  ■ サイドバー_車両詳細
　■ オークション_車両詳細

　■ 見積書

　■ 顧客管理
　■ 顧客詳細
　■ CSVアップロード

　■ 売上管理

　■ スタッフリスト

　■ マスタ管理

  ■ 分析管理

  ■ 注文管理

  ■ 請求管理

  ■ 整備管理

  ■ 従業員管理

  ■ 経費管理
  　- 陸送費を追加

  ■ 店舗管理

  ■ 書類管理
  
  ■ 売上管理

---------------------------------------------------------------------------------------------------- */
.stack + .stack {
  margin: 40px 0 0;
}
/* ! ====================================================================================================
　■ 共通要素
==================================================================================================== */
/* 空欄の際の表示 */
.area_blank {
  background: #f4f4f4;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.area_blank > p {
  color: #aaa;
  font: 400 13px/1.4em 'Roboto','noto sans japanese',sans-serif;
}

/* ! ====================================================================================================
　履歴
==================================================================================================== */
.head_history {
  border-bottom: 2px solid #f2f4f7;
  padding: 0 0 20px;
  margin: 0 0 20px;
}
.head_history .area_ttl{
  margin: 20px 0 0;
}

/* ! リスト ============================== */
.list_button_history {
  display: flex;
  margin: 0 -4px;
  max-width: 400px;
}
.list_button_history > li {
  flex: auto;
  padding: 0 4px;
}
.list_button_history [class*="btn_"] {
  font: 600 16px/1em 'noto sans japanese',sans-serif;
  min-width: auto;
  padding-right: 1em;
  height: 36px;
}
.list_button_history [class*="btn_"]:before {
  width: 24px;
  height: 24px;
  background: url(../img/ico/ico_btn/ico_btn_history_white.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
.list_button_history [class*="btn_"]:hover {
  background: #fff;
  border-color: #
}
.list_button_history [class*="btn_"]:hover:before {
  background: url(../img/ico/ico_btn/ico_btn_history.svg) no-repeat center center;
}

/* 入金 */
.area_history.price .head_history{
  padding: 0;
  border: 0;
  margin: 0 0 10px;
}

/* ! ==================================================
　リスト
================================================== */
.list_history > li {
  position: relative;
}
.list_history > li > article {
  padding: 0 0 0 15px;
  position: relative;
}
.list_history > li > article:before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background: #a2adc1;
  border-radius: 100px;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
}
.list_history > li > article:after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background: #B7BAC9;
  position: absolute;
  top: 4px;
  left: 5px;
}
/* ! ヘッド ============================== */
.head_list_history {
  margin: 0 0 3px;
}
.head_list_history .date {
  color: #a2adc1;
  font: 400 13px/1em 'helvetica','noto sans japanese',sans-serif;
}
/* ! ボディ ============================== */
.body_list_history {
  padding: 0 0 10px;
}
.list_history > li:last-of-type .body_list_history {
  padding: 0;
}

/* ! リストの最初のみ ============================== */

/* ! リストの最後のみ ============================== */
.list_history > li:last-of-type > article:after {
  content: "";
  height: 55px;
}
.list_history > li:last-of-type:after {
  content: "";
  display: block;
  width: 10px;
  height: 1px;
  background: #B7BAC9;
  position: absolute;
  top: 58px;
  left: 5px;
}

/* ! ==================================================
　データリスト
================================================== */
.list_history_data > li + li {
  margin-top: -1px;
}
.list_history_data > li > article {
  border: 1px solid #a2adc1;
  padding: 5px;
  position: relative;
  transition: all 0.1s ease;
}
.list_history_data > li > article:hover {
  background: #F2F4F7;
}
.list_history_data > li > article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.head_list_history_data {
  margin: 0 0 8px;
}
.head_list_history_data .ttl {
  color: #0F286C;
  font: 600 13px/1.3em 'noto sans japanese',sans-serif;
  display: block;
}
.body_list_history_data {
  display: flex;
  flex-wrap: wrap;
  margin: -3px;
}
.body_list_history_data p {
  color: #575e74;
  font: 400 12px/1em 'helvetica','noto sans japanese',sans-serif;
  letter-spacing: 0;
  padding: 3px;
}
.body_list_history_data .user:before {
  content: "顧客 : ";
}
.body_list_history_data .member:before {
  content: "担当 : ";
}

/* middle 見積書など */
.middle_list_history_data {
  margin: 0 0 10px;
}


/* ! ====================================================================================================
　■ 車両一覧
==================================================================================================== */
/* ! ==================================================
　合計エリア
================================================== */
.area_total_cars {
  margin: 20px 0 0;
}
.area_total_cars .table_result th {
  width: 160px;
}
.area_total_cars .table_result td {
  height: 32px;
}
/* ! ==================================================
　印刷ボタン
================================================== */
.btnarea_print {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 10;
}


/* ! ====================================================================================================
　■ 車両詳細
==================================================================================================== */
/* 他車両検索 */
.area_search_cars {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: -20px;
  margin-bottom: -10px;
}
.area_search_cars .wrap_search {
  flex: auto;
  min-width: 100px;
}

/* ! ==================================================
　レイアウト
================================================== */
.area_cars_overview {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.area_detail_cars {
  margin-left: auto;
}
.head_detail_cars [class*="btnarea"] {
  display: flex;
  align-items: center;
}
.head_detail_cars .name {
  margin: 20px 0 0;
}
.head_detail_cars .layout {
  display: flex;
  align-items: flex-start;
}
.head_detail_cars .layout .left {
  flex: auto;
  min-width: 0;
}
.head_detail_cars .layout .right {
  flex: none;
}
.body_detail_cars .list_data {
  
}

.p-move {
  display: flex;
  margin: 0 0 0 auto;
  border: 2px solid #222;
  background: #222;
}
.p-move > li {
  width: 200px;
  position: relative;
}
.p-move > li + li {
  margin: 0 0 0 20px;
}
.p-move > li + li:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/ico/ico_move_white.svg);
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translate(-50% , -50%);
}
.p-move .from,
.p-move .to {
  position: relative;
}
.p-move .from:before,
.p-move .to:before {
  content: "仕入先";
  color: #444;
  font-size: 11px;
  font-weight: 500;
  line-height: 1em;
  letter-spacing: .04em;
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}
.p-move .to:before {
  content: "販売先";
}
.p-move > li .place {
  font-weight: 500;
  font-size: 14px;
  line-height: 1em;
  text-align: center;
  width: 100%;
  border: 1px solid #222;
  padding: 8px 4px 8px 44px;
  background: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*
.layout > .main_cars_overview {
  width: auto;
  flex: 0 0 calc(100% - 370px);
  width: calc(100% - 370px);
  min-width: 10px;
}
.sub_cars_overview {
  flex: 0 0 200px;
  margin:0 0 0 10px;
}
.detail_cars_overview {
  width: auto;
  flex: auto;
  min-width: 1px;
  margin: 10px 0 0;
}
@media screen and (max-width: 1366px){
  .main_cars_overview {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
  .sub_cars_overview {
    flex: 0 0 320px !important;
  }
  .detail_cars_overview {
    flex: 0 0 calc(100% - 330px);
    min-width: 10px;
    margin-left: 10px;
    width: calc(100% - 330px);
  }
  .detail_cars_overview .btn_line{
    min-width: auto;
  }
}
@media screen and (-ms-high-contrast: active) and (max-width: 1366px), (-ms-high-contrast: none) and (max-width: 1366px) {
  .main_cars_overview {
    flex: auto !important;
  }
}
*/

/* ! 仕入・入庫情報の登録 ============================== */
.area_step_register_cars {
  background: #F2F4F7;
  padding: 10px;
}
.area_step_register_cars .head_box {
  min-height: auto;
}
.area_step_register_cars .head_box .ttl {
  font-size: .8em;
}

/* リスト */
.list_step_register_cars {
  width: 100%;
}
.list_step_register_cars > li {
  position: relative;
}
.list_step_register_cars > li + li {
  margin: 5px 0 0 ;
}
@media screen and (max-width: 1279px){
  .area_step_register_cars {
    padding: 15px;
  }
  .list_step_register_cars {
    display: flex;
    flex-wrap: wrap;
  }
  .list_step_register_cars > li {
    flex: auto;
    min-width: 10px;
  }
  .list_step_register_cars > li + li {
    margin: 0 0 0 10px;
  }
}

/* ! カレント —————————— */
.list_step_register_cars > .current:before {
  background: #0F286C url(../img/ico/ico_check_white.svg) no-repeat center center ;
}
.list_step_register_cars > .current [class*="btn_"] {
  color: #fff;
  background: #0F286C;
}
.list_step_register_cars > .current [class*="btn_"]:hover {
  color: #0F286C;
  background: #fff;
}


/* ボタンエリア */
.area_step_register_cars + form {
  margin-top: 10px;
}
.area_step_register_cars + form {
  margin-left: auto;
}
.area_step_register_cars + form [class*="btnarea"] + [class*="btnarea"] {
  margin-top: 4px;
}

.wrapper_step_register_cars {
  margin-top: 10px;
}
/* レスポンシブ */
@media screen and (max-width: 1279px){
  .area_step_register_cars {
    flex: auto;
    min-width: 10px;
  }
  .area_step_register_cars + form [class*="btnarea"] + [class*="btnarea"] {
    margin-top: inherit;
  }
}

/* ! ==================================================
　ヘッド_メイン
================================================== */
.head_main_cars_overview {
  margin: 0 0 16px;
}

/* ! ==================================================
　ボディ_メイン
================================================== */
.body_main_cars_overview {
  display: flex;
}
.body_main_cars_overview > .img {
  flex: 0 0 200px;
  margin: 0 20px 0 0;
}
.body_main_cars_overview > .img [class*="thumb"] {
  margin: 0 0 10px;
}
.body_main_cars_overview > .img img {
  margin: 0 0 10px;
}
.body_main_cars_overview > .text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 10px;
}
.body_main_cars_overview > .text .name {
  margin: 0 0 20px;
}
.body_main_cars_overview > .text [class*="btnarea"] {
  margin: auto 0 0 ;
}
@media screen and (max-width: 1440px){
  .body_main_cars_overview > .img {
    flex: 0 0 180px;
  }
}

/* ! 表示順を変更する ============================== */
.order_type_2 > .container {
  display: flex;
  flex-direction: column;
}
.order_type_2 .order_1 {
  order: 1;
}
.order_type_2 .order_2 {
  order: 2;
}
.order_type_2 .order_3 {
  order: 3;
}

/* ! データリスト ============================== */
.body_main_cars_overview .list.detail {
  margin-top: 12px;
  margin-bottom: 12px;
}
.list.detail {
  display: flex;
  margin: -8px;
}
.list.detail > li {
  flex: 1 1 auto;
  min-width: 10px;
  display: flex;
}
.list.detail > li article {
  padding: 8px;
  flex: 1 1 auto;
  min-width: 10px;
}
.list.detail > li + li {
  margin: 0 0 0 20px;
}
.list.detail > li + li article {
  border-left: 2px solid #f2f4f7;
}
.list.detail .head {
  margin: 0 0 10px;
}
.list.detail .head .ttl {
  font-size: 14px;
}
.list.detail .data p {
  font: 700 18px/1em 'helvetica','noto sans japanese',sans-serif;
}
.list.detail .data p:after {
  content: attr(data-after)"";
  font: 300 13px/1em 'helvetica','noto sans japanese',sans-serif;
  display: block;
  margin: 8px 0 0;
}

/* フット */
.foot_main_cars_overview {
  margin: 20px 0 0;
}


/* ボタンエリア */
.list_button_overview {
  display: flex;
  flex-wrap: wrap;
  margin: 20px -2px;
}
.list_button_overview > li {
  width: 50%;
  padding: 2px;
}



/* ! ==================================================
　サブ(販売価格)
================================================== */
.sub_cars_overview {
  display: flex;
}
@media screen and (max-width: 1366px){
  .area_cars_overview > .main_cars_overview + .sub_cars_overview {
    margin: 10px 0 0 ;
  }
}

/* ! 料金エリア ============================== */
.area_price{}

/* ヘッド */
.head_price {
  display: flex;
  align-items: baseline;
}
.head_price .ttl {
  font: 500 16px/1em 'noto sans japanese',sans-serif;
}
.area_price p {
  display: flex;
  align-items: baseline;
}
.area_price p.right {
  text-align: right;
}
.area_price p[data-ttl]:before {
  content: attr(data-ttl) ' :';
  color: #000;
  margin: 0 auto 0 0;
  font: 400 13px/1.3em 'noto sans japanese',sans-serif;
  display: block;
}

/* 色分け */
.area_price p.red {
  color: #E60012;
}
.area_price p.blue {
  color: #36AEE3;
}


/* 上部に線 */
.head_price.line_top {
  border-top: 2px solid #0F286C;
  margin: 10px 0;
  padding: 10px 0 0;
}

/* フット */
.foot_price {
  margin: 10px 0 0;
}


/* ! 料金詳細表示エリア ============================== */
.area_expenses_detail {
  padding: 15px;
  max-width: 640px;
}
.list_edit_cars .area_expenses_detail {
  max-width: none;
}
.area_expenses_detail.no_space {
  padding: 0;
}
.area_expenses_detail.right {
  margin-left: auto;
}
.area_expenses_detail + .area_expenses_detail {
  margin: -1px 0 0 ;
}
.area_expenses_detail.bg_gray {
  background: #F2F4F7;
}
.area_expenses_detail.bg_deep_gray {
  background: #e2e8ef;
}

/* ! 料金表 —————————— */
.list_expenses_detail {
}
.list_expenses_detail > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.list_expenses_detail > li.full {
  width: 100%;
}
.list_expenses_detail > li + li {
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid #F2F4F7;
}
.list_expenses_detail > li + li.border_off {
  border-top: none;
  padding: 0;
}
.list_expenses_detail > li.line_top {
  border-top: 1px solid #0f286c;
  padding: 10px 0 0;
  margin: 10px 0 0;
}

@media screen and (max-width: 1280px){
  .list_expenses_detail > li.col_1280 > .head  {
    width: 100%;
    margin: 0 0 5px;
  }
  .list_expenses_detail > li.col_1280 > .data {
    width: 100%;
    max-width: none;
  }
}

.bg_gray .list_expenses_detail > li + li:not(.line_top) {
  border-color: #dee3ec;
}
.list_expenses_detail .head {
  width: 127px;
}
.list_expenses_detail.head_90 .head {
  width: 90px;
}
.list_expenses_detail.head_100 .head {
  width: 100px;
}
.list_expenses_detail .head .small {
  color: #71747f;
  font-size: 11px;
  font-weight: 400;
}
.list_expenses_detail .data {
  flex: auto;
  min-width: 10px;
  max-width: calc(100% - 127px);
}
.list_expenses_detail.head_90 .data {
  max-width: calc(100% - 90px);
}
.list_expenses_detail.head_100 .data {
  max-width: calc(100% - 100px);
}
.list_expenses_detail p + p {
  margin: 5px 0 0;
}
.list_expenses_detail .ttl {
  font: 600 15px/1.2em 'noto sans japanese',sans-serif;
}
.list_expenses_detail .ttl_sub {
  font: 400 12px/1.2em 'noto sans japanese',sans-serif;
}
.list_expenses_detail .detail {
  width: 100%;
/*   background: #f2f4f7; */
/*   padding: 4px 8px; */
  margin: 5px 0 0;
}
.bg_gray .list_expenses_detail .detail {
/*   background: #e1e7ef; */
}

.list_expenses_detail .description {
  color: #71747f;
  font: 300 11px/1.5em 'noto sans japanese',sans-serif;
  text-align: right;
}
.list_expenses_detail .num:not(.large) {
  font: 600 14px/1em 'helvetica','noto sans japanese',sans-serif;
  text-align: right;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  width: 120px;
  margin-left: auto;
}
.list_expenses_detail .num:not(.large).full {
  width: 100%;
}
.list_expenses_detail .num:not(.large).border {
  border-top: 1px solid #F2F4F7;
  padding: 3px 0 0;
}

/* 横並びの場合 */
.list_expenses_detail.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.list_expenses_detail.row > li + li {
  margin: 0 0 0 10px;
  padding: 0 0 0 10px;
  border-top: none;
  border-left: 1px solid #F2F4F7;
}
/* 中身をcol */
.list_expenses_detail > li.col {
  flex-direction: column;
}
.list_expenses_detail > li.col .data {
  margin: 10px 0 0;
  width: 100%;
}
.list_expenses_detail.row .auto{
  flex: auto;
  min-width: 10px;
  max-width: 320px;
}
@media screen and (max-width: 1280px){
  .list_expenses_detail.row .full_1280 {
    flex: 0 0 100%;
    margin: 10px 0 0;
    padding: 20px 0 0;
    border-left: none;
    border-top: 1px solid #F2F4F7;
    max-width: none;
  }
  .list_expenses_detail.row .full_1280 .head {
    margin-left: auto;
  }
  .list_expenses_detail.row .full_1280 .data {
    max-width: 240px;
  }
}

/*   利益の場合の表示   */
.list_expenses_detail > .profit {
  border: 2px solid #333;
  padding: 10px;
  margin: -10px;
  position: relative;
}

/*   詳細金額   */
.list_expenses_detail .num.min {
  font-size: 14px;
}
.list_expenses_detail .num.min:before {
  margin-right: auto;
}
.list_expenses_detail .num.min.gray {
  color: #71747f;
}
.list_expenses_detail .num.min + .num.min {
  border-top: 1px solid #F2F4F7;
  padding: 3px 0 0;
}
.bg_gray .list_expenses_detail .num.min + .num.min{
  border-color: #dee3ec;
}

.list_expenses_detail .num.large {
  font: 700 22px/1em 'helvetica','noto sans japanese',sans-serif;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
}
.list_expenses_detail [class*="btnarea"] {
  margin-top: 8px;
}


/* ! 販売価格 ============================== */
.head_price_simulator{
  padding: 0 0 10px;
  border-bottom: solid 3px #172858;
  margin: 0 0 13px;
}
.head_price_simulator .total{
  color: #172758;
  flex-wrap: wrap;
}
.head_price_simulator .total[data-ttl]:before{
  display: block;
  width: 100%;
}
/* ! トータル金額 ------------ */
.area_price_simulator .total{
  letter-spacing: 0;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  border-top: 1px solid #0F286C;
  margin: 10px 0 0;
  padding: 10px 0 0;
}
/* 原価 */
.area_price_simulator .total.cost{
  margin: 20px 0 16px;
  padding: 10px 0;
  border-top: dotted 1px #172858;
  border-bottom: dotted 1px #172858;
  font: 600 20px/1.3em 'Noto Sans',sans-serif;
}
.area_price_simulator .total.cost[data-ttl]:before{
  font: 600 14px/1.3em 'noto sans japanese',sans-serif;
  margin: 0 9px 0 0;
}
.area_price_simulator .total.cost[data-after]:after{
  font: 600 14px/1.3em 'noto sans japanese',sans-serif;
  margin: 0 0 0 6px;
}
/* 利益 */
.list_price_simulator > li {
}
.list_price_simulator > li + li{
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px dotted #172858;
}
/* 価格 */
.list_price_simulator p {
  font: 300 14px/1.3em 'helvetica','noto sans japanese',sans-serif;
  display: flex;
  align-items: baseline;
}

.list_price_simulator p:after {
  content: "円";
  font: 300 11px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 2px;
}
.list_price_simulator p + p{
  margin: 3px 0 0;
}
.list_price_simulator p.parent{
  font: 700 16px/1.3em 'helvetica','noto sans japanese',sans-serif;
}
/* 項目名 */
.list_price_simulator p[data-ttl]:before{
  content: '- 'attr(data-ttl) ' :';
  margin: 0 auto 0 0;
  color: #71747f;
  font: 400 11px/1.5em 'noto sans japanese',sans-serif;
}
.list_price_simulator p.parent[data-ttl]:before{
  content: attr(data-ttl) ' :';
  color: #333;
  font: 500 13px/1.3em 'noto sans japanese',sans-serif;
}
/* ! ヘッド ============================== */
.area_price .total {
  font: 700 28px/1em 'helvetica','noto sans japanese',sans-serif;
  margin: 0 0 0 auto;
}
.area_price .total:before {
  font: 500 16px/1em 'noto sans japanese',sans-serif;
}
@media screen and (max-width: 1366px){
  .area_price .total {
    font-size: 28px;
  }
}
@media screen and (max-width: 1080px){
  .area_price .total {
    font-size: 24px;
  }
}

/* ! ボディ ============================== */
/* リスト */
.list_price   {

}
.list_price > li > * + * {
  border-top: 1px solid #f2f4f7;
}
.list_price .price.min {
  font-size: 18px;
}
@media screen and (max-width: 1366px){
  .list_price p {
    font-size: 24px;
  }
}
@media screen and (max-width: 1080px){
  .list_price p {
    font-size: 20px;
  }
}

/* ボタンエリア */
.list_price [class*="btnarea"] {
  margin-top: 4px;
  margin-bottom: 4px;
}

/* 詳細リスト */
.list_price_detail {
  background: #F2F4F7;
}
.list_price_detail > li + li {
  border-top: 1px dotted #fff;
}
.list_price_detail p {
  font: 300 14px/1em 'helvetica','noto sans japanese',sans-serif;
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 8px 8px 8px 8px;
  text-align: right;
}
.list_price_detail p:before {
  content: "- "attr(data-before);
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  margin: 0 auto 0 0;
  min-width: 100px;
  flex: 0 0 auto;
  min-width: 1px;
}
.list_price_detail p[data-after]:after {
  content: attr(data-after)"";
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 2px;
}
@media screen and (max-width: 1366px){
  .list_price_detail p:before {
    min-width: auto;
  }
}

/* ! 残高 ============================== */
.head_price.line{
  padding: 0 0 10px;
  margin: 0 0 10px;
  border-bottom: solid 2px #0F286C;
}
.area_price.balance .list_price_detail p{
  font: 500 16px/1.5em 'helvetica','noto sans japanese',sans-serif;
}
.area_price.balance .list_price_detail p:before{
  content: attr(data-before);
  font: 500 14px/1.5em 'helvetica','noto sans japanese',sans-serif;
}

/* 料金シミュレーター */
.area_height{
  height:130px;
  overflow: auto;
}

.head_sub_cars_overview {
  margin: 0 0 20px;
}
.head_sub_cars_overview .head {
  border-bottom: 2px solid #f2f4f7;
  padding: 0 0 8px;
  margin: 0 0 12px;
}
.head_sub_cars_overview .data {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.head_sub_cars_overview .price {
  font: 700 40px/1em 'helvetica','noto sans japanese',sans-serif;
}
.head_sub_cars_overview .price.sub {
  font-size: 20px;
  margin: 8px 0 0;
}
.head_sub_cars_overview [data-before].price:before {
  content: attr(data-before)"：";
  font: 300 13px/1em 'noto sans japanese',sans-serif;
}
.head_sub_cars_overview .price:after {
  content: attr(data-after)"";
  font: 300 13px/1em 'noto sans japanese',sans-serif;
}

/* ! ボディ ============================== */
.body_sub_cars_overview {
  margin-top: auto;
}

/* ! 小売向け見込み利益 ============================== */
.list_price.selling  * + *{
  border-top: none;
}
.list_price.selling > li + li{
  margin: 16px 0 0;
}
.list_price.selling > li .price{
  font: 600 30px/1.3em 'Helvetica','noto sans japanese',sans-serif;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.list_price.selling > li .price[data-ttl]:before{
  font: 600 14px/1.3em 'noto sans japanese',sans-serif;
}
.list_price.selling .tax_excluded{
  justify-content: flex-end;
  flex: 0 0 auto;
  color: #8E919E;
  font: 400 16px/1.3em 'Helvetica','noto sans japanese',sans-serif;
}
.list_price.selling .tax_excluded:before{
  margin: 0 10px 0 0;
  font: 400 12px/1.3em 'noto sans japanese',sans-serif;
}
/* 詳細(仕入れ価格) -------------------- */
.area_price_stocking{
  padding: 10px 20px;
  background: #F2F4F7;
}
/* head */
.area_price_stocking .head_price{
  flex-direction: column;
  margin: 0 0 16px;
}
.area_price_stocking .head_price p{
  width: 100%;
}
/* body */
.area_price_stocking .body_price{
  border-top: solid 1px #dcdfe4;
}
.area_price_stocking .list_price > li{
  padding: 10px 0;
}
.area_price_stocking .list_price > li.parent{
  padding: 10px 0;
}
.area_price_stocking .list_price > li.child{
  padding: 4px 0px 4px 20px;
}
.area_price_stocking .list_price > li .price{
  font: 600 26px/1.3em 'Helvetica','noto sans japanese',sans-serif;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.area_price_stocking .list_price > li .price[data-ttl]:before{
  font: 600 12px/1.3em 'noto sans japanese',sans-serif;
  flex: 0 0 120px;
}
.area_price_stocking .list_price > li .tax_excluded:before{
  font: 400 12px/1.3em 'noto sans japanese',sans-serif;
}
/* 子要素 */
.area_price_stocking .list_price > li.child .price{
  font: 600 16px/1.1em 'Helvetica','noto sans japanese',sans-serif;
}
.area_price_stocking .list_price > li.child .price[data-ttl]:before{
  font: 600 11px/1.1em 'noto sans japanese',sans-serif;
}
.area_price_stocking .list_price > li + li{
  border-top: 1px solid #dcdfe4;
}

/* オークション向け原価 -------------------- */
.list_price.auction {
  margin: -5px 0;
}
.list_price.auction > li + li{
  padding: 5px 0;
}
.list_price.auction > li.split_line{
  height: 1px;
  background: #f2f4f7;
  margin: 10px 0;
  padding: 0;
}
.list_price.auction .head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.list_price.auction .ttl{
  font: 400 14px/1.2em 'helvetica','noto sans japanese',sans-serif;
}
.list_price.auction .ttl:after{
  content: ':';
  padding: 0 0 0 4px;
}
.list_price.auction small{
  margin: 2px 0 0;
  color: #8E919E;
  font: 400 11px/1.2em 'helvetica','noto sans japanese',sans-serif;
  display: block;
}
.list_price.auction .data{
  border: none;
  margin: 3px 0 0 ;
}
.list_price.auction .price{
  font: 600 24px/1.2em 'Helvetica','noto sans japanese',sans-serif;
  justify-content: flex-end;
}

/* ! ====================================================================================================
　店舗を移動する
==================================================================================================== */
.area_transport-car .list_form.col > li {
  margin: 12px 0 0;
}
.area_transport-car .arrow {
  position: relative;
}
.area_transport-car .arrow:before {
  content: "";
  display: block;
  width: 30px;
  height: 20px;
  background: url(../img/ico/ico_triangle_right.svg) repeat-x center center;
  background-size:  10px 10px !important;
  position: absolute;
  top: 40px;
  right: -40px;
  transform: translate(50% , -50%);
}
.area_transport-car .form_head {
  border-bottom: 1px solid #dee3ec;
  padding: 0 0 5px;
}




/* ! ====================================================================================================
　車両情報
==================================================================================================== */
.area_info_cars {
}
.foot_info_cars {
  margin: 20px 0 0;
}

/* ! ==================================================
　レイアウト
================================================== */
.layout_info_cars {
  width: 100%;
}
.layout_info_cars > .l + .l {
  margin-top: 15px;
}
@media screen and (max-width: 1366px){
  .layout_info_cars{
    flex-wrap: wrap;
  }
  .layout_info_cars > .layout_main {
    flex: auto;
    min-width:  auto;
    margin: 0;
    width: 100%;
  }
  .layout_info_cars > .layout_main > .layout_table + .layout_table{
    margin: -1px 0 0;
  }
  .layout_info_cars > .layout_auto .table_data.half tr{
    width: 100%;
  }
  .layout_info_cars > .layout_auto .table_data.half tr:first-of-type{
    border-top: none;
  }
  .layout_info_cars > .layout_auto .table_data.half tr:nth-of-type(2){
    border-top: 1px solid #ddd;
  }
}
@media screen and (max-width: 1280px){
  .layout_info_cars > .layout_main {
    flex-wrap: wrap;
  }
  .layout_info_cars > .layout_main > .layout_table {
    flex: 0 0 100%;
    padding: 0;
  }
}

/* ! ==================================================
　フット_車両情報
================================================== */
.foot_info_cars .table_data {
  min-height: 100px;
}





/* ! ==================================================
　車両を追加
================================================== */
.area_car_add .layout_list > article{
  width: 50%;
}
.area_car_add > form > .body_box{
  display: flex;
  flex-direction: column;
}
.area_car_add > form > .body_box > .btnarea_form{
  justify-content: flex-end;
}


/* 画像登録 */
.area_img .ttl{
  margin: 0 0 13px;
}
.area_img .ttl.thin{
  margin: 0 0 6px;
}
.area_img .dropzone{
  font-size: 12px;
  min-height: 150px;
}

@media screen and (max-width: 1280px){
  .area_car_add .layout_list{
    display: flex;
    flex-wrap: wrap;
  }
  .area_car_add .layout_list > .left_layout{
    flex: 1 1 auto;
  }
  .area_car_add .layout_list > .right_layout:not(.continue_full){
    flex: 0 0 300px;
  }
  .area_car_add .layout_list > .right_layout.full_1200{
    width: 100%;
    flex: 1 1 auto;
  }
  .area_car_add .right_layout .layout.half{
    flex-direction: column;
  }
  .area_car_add .auto_layout:empty{
    display: none;
  }
  .area_car_add > form > .body_box > .btnarea_form{
    justify-content: center;
  }
}



/* ! ==================================================
　販売情報_車両詳細
================================================== */
.area_sales_information {
  border: 2px solid #0F286C;
}
@media screen and (min-width: 1366px){
  .area_sales_information .list .num {
    font-size: 28px;
  }
}
.area_sales_information .list .num.small {
  font-size: 16px;
}
.area_sales_information .list .num.small[data-after]:after {
  font-size: 10px;
}

/* サブ金額表示（税込） */
.area_sales_information .list .num.sub {
  color: #A2ADC1;
  font-size: 16px;
  font-weight: 400;
  margin: 5px 0 0;
}
.area_sales_information .list .num.sub:after {
  color: #A2ADC1;
  font-size: 10px;
}


/* ! ====================================================================================================
　■ タブ_車両詳細
==================================================================================================== */
/* ! ====================================================================================================
　タブ_仕入・販売・自税
==================================================================================================== */
.layout_tab_purchase {
  display: flex;
  width: 100%;
  margin: -5px;
}
.layout_tab_purchase > .layout_table {
  flex: 0 0 240px;
  padding: 5px;
}
.layout_tab_purchase > .layout_table.auto {
  flex: 1 1 auto;
  min-width: 10px;
}
@media screen and (max-width: 1366px){
  .layout_tab_purchase{
    flex-wrap: wrap;
  }
  .layout_tab_purchase > .layout_table{
    flex: auto;
    min-width: 1px;
  }
}

.head_custom_105{
  flex: 0 0 105px;
}

/* 仕入情報合計価格 */
.area_price_stock{
  padding: 0px 0 0;
}
.area_price_stock .total{
  display: flex;
  background: #e2e8ef;
  padding: 6px 8px 8px;
}
.list_edit_cars .area_price_stock .head{
  flex: 0 0 120px;
  margin: 0;
}
.area_price_stock .data{
  flex: auto;
  min-width: 1px;
}
.area_price_stock .data p{
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
}
.area_price_stock .data p + p{
  margin: 4px 0 0;
}
.area_price_stock .num.small,
.area_price_stock .list > li .num.small{
  font: 600 18px/1em 'helvetica','noto sans japanese',sans-serif;
}
.area_price_stock .list{
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
  margin-top: -5px;
  justify-content: flex-end;
}
.area_price_stock .list > li{
  padding: 10px;
  flex: 0 0 auto;
  max-width: 50%;
}
.area_price_stock .list > li + li{
  margin: 0;
}
.area_price_stock .list > li .head{
  flex: 0 0 auto;
  margin: 0;
}
.area_price_stock .list > li .head > .ttl{
  font: 400 13px/1em 'helvetica','noto sans japanese',sans-serif;
  margin: 0;
  color: #000;
}
.area_price_stock .list > li .data{
  flex: 0 0 auto;
}
.area_price_stock .list > li .num[data-after]{
  font: 300 .9em/1em 'noto sans japanese',sans-serif;
}
.area_price_stock .list > li .num[data-after]:after{
  font: 300 .7em/1em 'noto sans japanese',sans-serif;
}


/* ! ====================================================================================================
　■ サイドバー_車両詳細
==================================================================================================== */
/* ! ====================================================================================================
　アクション
==================================================================================================== */
.area_action [class*="btn_"][class*="large"]{
  font: 700 16px/1em 'noto sans japanese',sans-serif;
  height: 50px;
}
.area_action [class*="btn_"] + [class*="btn_"] {
}

.ttl_split {
  text-align: center;
  position: relative;
}

/* ! アクション_サブ ============================== */
.area_action_sub {
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 2px solid #f2f4f7;
}
.head_action_sub {
  margin: 0 0 10px;
}


/* ! ====================================================================================================
　■ オークション_車両詳細
==================================================================================================== */
.area_auction_cars_detail {
  background: #A2ADC1;
  padding: 15px;
}

/* ! ==================================================
　お買上げ票ラップ要素
================================================== */
.wrap_sheet_purchase {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.wrap_sheet_purchase:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 135%;
}

/* iframeを載せる */
.area_auction_cars_detail iframe {
  border: none;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}


/* ! ==================================================
　お買上げ票未登録
================================================== */
.state_table_msg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  position: absolute;
  top: 0;
  left: 0;
}
.area_unregisterd {
  padding: 0 60px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f296c;
}
.area_unregisterd p {
  color: #A2ADC1;
  font: 500 16px/1em 'noto sans japanese',sans-serif;
}

/* ! ==================================================
　仕入入力
================================================== */
.area_add_purchase {
  border: 2px solid #0F286C;
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto 20px;
}
.area_add_purchase > .l > .l_auto {
  border-left: 1px solid #d2d8e2 ;
}
.area_add_purchase .box {
  padding: 30px 40px;
}
@media screen and (max-width: 1080px){
  .area_add_purchase > .l > [class*="l_fix"] {
    flex: 0 0 240px;
    min-width: 240px;
  }
  .area_add_purchase .box {
    padding: 30px;
  }  
}


.area_add_purchase .list_form > li + li {
  margin-top: 20px;
}
.area_add_purchase .list_form .ttl {
  font-size: 13px;
  font-weight: 500;
}
.wrap_input.price_large {
  position: relative;
}
.wrap_input.price_large:after {
  content: ",000円"; 
  font: 500 12px/1em 'Roboto','noto sans japanese',sans-serif;
  position: absolute;
  top: 60%;
  right: 5px;
  transform: translateY(-50%);
}
.wrap_input.price_large input {
  font: 700 24px/1em 'Roboto','noto sans japanese',sans-serif;
  height: 40px;
  padding-right: 40px;
}



/* ! ==================================================
　販売価格・
================================================== */
.area_price_auction_cars_detail {
  margin: 16px 0 0;  
}
.area_price_auction_cars_detail .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid #333;
  padding: 0 0 4px;
}
.area_price_auction_cars_detail .head .ttl {
  font: 500 14px/1em 'noto sans japanese',sans-serif;
}
.list_price_auction_cars_detail {
  flex-wrap: wrap;
}
.list_price_auction_cars_detail li {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid #f2f4f7;
  margin: 4px 0 
}
.list_price_auction_cars_detail .ttl {
  font: 500 12px/1em 'noto sans japanese',sans-serif;
}
.list_price_auction_cars_detail .price {
  font-size: 16px;
}


/* ! ==================================================
　現車場所エリア
================================================== */
.area_place_car {
  padding: 5px 0;
}


/* 移動リスト */
.list_place_car {
}
.list_place_car > li {
  display: flex;
  flex-wrap: wrap;
}
.list_place_car > li + li {
  margin-top: 3px;
}
.list_place_car > li > * {
  position: relative;
}
.list_place_car > li > * + * {
  padding: 0 0 0 20px;
}
.list_place_car > li > * + *:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url(../img/ico/ico_transportation_right.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translate(0, -50%);
}
.list_place_car > li  p {
  font: 500 12px/1.3em 'noto sans japanese',sans-serif;
}
.list_place_car > li  .num {
  color: #000;
  font: 900 18px/1em 'Roboto','noto sans japanese',sans-serif;
}
.list_place_car > li  .num:after {
  content: "点";
  font: 600 15px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 3px;
}
.list_place_car.evaluation > li > * + *:before {
  content: none;
}


/* ! ==================================================
　パネル表示
================================================== */
.panel_detail {
  margin-top: 8px;
}
.head_panel_detail,
.body_panel_detail {
  background: #fff;
  padding: 10px;
}
/* ヘッド */
.head_panel_detail {
  display: flex;
  align-items: center;
  position: relative;
  padding-right: 40px;
}
.head_panel_detail .ttl {
  font-weight: 700;
}
.head_panel_detail .ttl .count {
  font: 500 14px/1em 'Roboto','noto sans japanese',sans-serif;
}
.head_panel_detail .ttl .count:before {
  content: "（";
}
.head_panel_detail .ttl .count:after {
  content: "）";
}
.head_panel_detail .num {
  margin: 0 0 0 auto;  
}
.button_toggle {
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/ico/ico_button_toggle.svg) no-repeat center center;
  transform : rotate(0);
  transform-origin : center center ;
  background-size: contain !important;
  position: absolute;
  top: 10px;
  right: 5px;
  transition: all 0.1s ease;
}
.head_panel_detail [class*="btnarea"] {
  margin: 0 0 0 auto;
}
/* ボディ */
.body_panel_detail {
  border-top: 1px solid #f2f4f7;
  overflow: auto;
}
.body_panel_detail .table tbody td {
  padding-right: 5px;
}

/* スクリプトトグル表示 */
.js-target-parent.hide .button_toggle {
  transform : rotate(180deg);
}
.js-target-parent .js-target-toggle {
  transition: all 0.5s ease;
}
.js-target-parent.hide .js-target-toggle,
.js-target-parent.hide .js-target-toggle * {
  pointer-events: none;
  opacity: 0 !important;
  height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
}


/* 税抜 or 税込 */
.area_switch_tax {
  display: flex;
  align-items: center;
  border-radius: 2px;
  overflow: hidden;
  margin: 0 0 0 auto;
  transition: all 0.2s ease;
}
.area_switch_tax > * {
  color: #A2ADC1;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  width: 40px;
  height: 20px;
  background: #e1e7ef;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.1s ease;
}
.area_switch_tax > *:hover {
  color: #0F286C; 
}
.area_switch_tax > .current {
  color: #fff;
  background: #A2ADC1;
  pointer-events: none;
}
/* 表示非表示 */
[data-switch-target] {
  display: none;
}
[data-switch-target].current {
  display: table-cell;
}

/* ! ==================================================
  
- 書類確認モーダル

================================================== */
.list_check_document > li {
  display: flex;
  align-items: center;
}
.list_check_document .data {
  flex: auto;
  min-width: 10px;
}
.list_check_document > li + li {
  margin: 5px 0 0;
}

.list_check_document .wrap_checkbox label {
  padding: 0 0 0 20px;
}


[data-options*="form-underline"] input,
[data-options*="form-underline"] select,
[data-options*="form-underline"] textarea {
  border: none;
  border-bottom: 1px solid #0F286C;
}




/* ! ==================================================
  
- 積込部品追加モーダル

================================================== */
.list_add_loading {
  display: flex;
  flex-wrap: wrap;
}
.list_add_loading > li {
  padding: 10px;
  width: 180px;
}

/* 中身のモーダル */
.list_form_loading > li + li {
  margin: 5px 0 0;
}
.list_form_loading textarea {
  min-height: 60px;
}
.list_form_loading .wrap_img label {
  width: 100%;
}




/* ! ==================================================
　クレーム履歴（チャット形式）
================================================== */
.list_chat_claim {
  overflow-y: auto;
  max-height: 150px;
  padding: 0 10px 0 0;
}
.list_chat_claim::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.list_chat_claim::-webkit-scrollbar-track {
  border-radius: 2px;
	background: #F2F4F7;
}
.list_chat_claim::-webkit-scrollbar-thumb {
  border-radius: 2px;
	background: #0A2372;
}
.list_chat_claim > li + li {
  margin: 10px 0 0;
}
.list_chat_claim > li.date {
  padding: 10px 0 5px;
}
.list_chat_claim > li.date .day {
  color: #777;
  font: 600 14px/1em 'Roboto','noto sans japanese',sans-serif;
  text-align: center;
}
.list_chat_claim > li > article {
  width: calc((100% - 20px));
  max-width: 360px;
}

/* 時間を下部に */
.list_chat_claim .end {
  align-self: flex-end;
}
.list_chat_claim li.day {
  color: #777;
  font: 700 15px/1.3em 'Roboto','noto sans japanese',sans-serif;
  text-align: center;
}
.list_chat_claim .shop {
  font: 500 11px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 5px;
}
.list_chat_claim .charge {
  font: 400 13px/1em 'noto sans japanese',sans-serif;
}
.list_chat_claim .charge:before {
  content: "担当者：";
  color: #666;
  font-size: 12px;
}
.list_chat_claim .comment {
  color: "222";
  font: 300 13px/1.4em 'noto sans japanese',sans-serif;
  background: #e1e7ef;
  padding: 5px 10px;
  margin: 8px 0 0;
  border-radius: 5px;
}
.list_chat_claim .time {
  color: #999;
  font: 400 12px/1.3em 'Roboto','noto sans japanese',sans-serif;
}

/* 自分の場合の表示 */
.list_chat_claim > li.me {
  display: flex;
  justify-content: flex-end;
}
.list_chat_claim > li.me .charge,
.list_chat_claim > li.me .shop,
.list_chat_claim > li.me .time {
  display: flex;
  justify-content: flex-end;
}
.list_chat_claim > li.me .comment {
  background: #F2F4F7;
}

/* !  クレーム情報 === */
.area_info_claim {
  padding: 10px 0 0;
}


/* ! ==================================================
　仕入詳細情報（仕入日・仕入先・経過日数）
================================================== */
.list_data_detail_purchase {
  display: flex;
  margin: -4px;
}
.list_data_detail_purchase > li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  flex: 1 1 auto;
  padding: 4px;
}
.list_data_detail_purchase .ttl {
  margin: 0 3px 0 0;
  font-size: 12px;
}
.list_data_detail_purchase .ttl:after {
  content: ":";
}
.list_data_detail_purchase .data {
  font-weight: 700;
  font-size: 14px;
}

/* ! ==================================================
　積込部品
================================================== */
.area_parts_loading {
}
/* リスト */
.list_parts_loading {
  display: flex;
  margin: 0 -5px;
  overflow: auto;
  counter-reset: number 0;
}
.list_parts_loading::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.list_parts_loading::-webkit-scrollbar-track {
  border-radius: 2px;
	background: #F2F4F7;
}
.list_parts_loading::-webkit-scrollbar-thumb {
  border-radius: 2px;
	background: #0A2372;
}
.list_parts_loading > li {
  width: 33.3333%;
  flex: 0 0 33.3333%;
  padding: 0 5px;
  counter-increment: number 1;
}
/* ヘッド */
.head_parts_loading {
  border-bottom: 2px solid #333;
}
.head_parts_loading .count:before {
  content: "部品"counter(number) ;
  font: 600 11px/1em 'Roboto','noto sans japanese',sans-serif;
}
/* ボディ */
.body_parts_loading {
  padding: 10px 0;
}
.body_parts_loading .ttl {
  color: #333;
  font: 400 13px/1.3em 'noto sans japanese',sans-serif;
  height: 2.6em;
  overflow: hidden;
}
.body_parts_loading .img {
  margin: 8px 0 0;
}
.body_parts_loading .date {
  color: #333;
  font: 700 15px/1em 'Roboto','noto sans japanese',sans-serif;
  border-bottom: 1px solid #f2f4f7;
  padding: 8px 0;
  display: flex;
  flex-wrap: wrap;
}
.body_parts_loading .date:before {
  content: "確認日：";
  font: 500 11px/1.5em 'Roboto','noto sans japanese',sans-serif;
}
.body_parts_loading .description {
  color: #666;
  font: 300 12px/1.3em 'noto sans japanese',sans-serif;
  margin: 5px 0 0;
}

/* ! ==================================================

　陸送登録

================================================== */
.list_add_postage {
  display: flex;
  margin: -5px;
}
.list_add_postage > li {
  width: 25%;
  padding: 5px;
}
.list_add_postage > li + li {
  margin-left: -1px;
}
.list_add_postage > li > * + * {
  margin-top: 30px;
}
.list_add_postage input,
.list_add_postage select,
.list_add_postage .select2-container .select2-selection--single {
  font: 500 15px/1em 'Roboto','noto sans japanese',sans-serif;
  height: 40px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-bottom: 1px solid #000;
}
.list_add_postage .large {
  font-size: 18px;
}
.list_add_postage .wrap_select:before,
.select2-selection__clear {
  display: none;
}

.list_add_postage .select2-container .select2-selection--single .select2-selection__rendered {
  font: 500 15px/1em 'Roboto','noto sans japanese',sans-serif;
}
.list_add_postage .double input,
.list_add_postage .double select,
.list_add_postage .double .select2-container .select2-selection--single {
/*   height: 149px; */
}
.list_add_postage .price input {
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 5px;
  text-align: right;
  padding-right: 30px;
}

/* ヘッド */
.list_add_postage .head {
  display: flex;
  align-items: center;
  padding: 0 0 5px;
}
.list_add_postage .head .ttl {
  font: 500 12px/1em 'Roboto','noto sans japanese',sans-serif;
}

/* データ */
.list_add_postage .data {
  position: relative;
}
.list_add_postage .data .unit {
  font: 500 12px/1em 'Roboto','noto sans japanese',sans-serif;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
.list_add_postage .data .tax-in {
  color: #777;
  font: 500 12px/1em 'Roboto','noto sans japanese',sans-serif;
  position: absolute;
  bottom: 2px;
  right: 12px;
  transform: translateY(150%);
  pointer-events: none;
}
.list_add_postage .data .tax-in:after {
  content: "円";
  font-size: 10px;
  margin: 0 0 0 3px;
}
.list_add_postage .data .tax-in:before {
  content: "（税込）";
  font-size: 10px;
  margin: 0 0 0 3px;
}
.list_add_postage .data .tax-in input {
  margin: 0;
  padding: 0;
  background: none;
  height: initial;
  color: #777;
  font: 500 12px/1em 'Roboto', 'noto sans japanese', sans-serif;
  display: inline-block;
  border-bottom: none;
  width: calc(100% - 60px);
  max-width: 60px;
}

/* ! ==================================================
　出品履歴
================================================== */
.list_history_sell {
}
.list_history_sell > li {
  overflow: hidden;
}
.list_history_sell > li + li {
  border-top: 1px solid #A2ADC1;
  margin: 8px 0 0;
  padding: 8px 0 0;
}
.list_history_sell article {
  display: flex;
}
.list_history_sell article + article {
  margin: 3px 0 0;
  padding: 3px 0 0;
  border-top: 1px solid #e1e7ef;
}
.list_history_sell article .head .ttl {
  font: 400 13px/1.3em 'noto sans japanese',sans-serif;
}
.list_history_sell article .data {
  margin: 0 0 0 auto;
}
.list_history_sell .right {
  text-align: right;
}

/* ! 項目のリスト —————————— */
.list_items_history > li {
  display: flex;
  align-items: baseline;
  padding: 3px 0;
}
.list_items_history > li + li {
  border-top: 1px solid #e1e7ef;
}
.list_items_history .head p {
  font: 400 13px/1.3em 'helvetica','noto sans japanese',sans-serif;
}
.list_items_history .data {
  margin: 0 0 0 auto;
}
.list_items_history .data p {
  font: 400 16px/1em 'helvetica','noto sans japanese',sans-serif;
}
.list_items_history .data p:after {
  font-size: 12px;
  margin: 0 0 0 3px;
}




/* ! スクロール ============================== */
.wrap_scroll_list {
  overflow-y: auto;
}
.inner_scroll_list {
  max-height: 265px;
  padding: 0 5px 0 0;
}
.wrap_scroll_list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.wrap_scroll_list::-webkit-scrollbar-track {
  border-radius: 2px;
	background: #F2F4F7;
}
.wrap_scroll_list::-webkit-scrollbar-thumb {
  border-radius: 2px;
	background: #0A2372;
}

/* ! 陸送履歴 ============================== */
.area_history_transportation {

}


/* ! ====================================================================================================
　■ 編集レイアウト_車両詳細
==================================================================================================== */
.area_edit_cars {
  display: flex;
  flex-wrap: wrap;
}

/* ! ==================================================
　リスト
================================================== */
.list_edit_cars {
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
}
.list_edit_cars > li {
  width: 50%;
  padding: 5px;
  display: flex;
  flex-direction: column;
}
.list_edit_cars > li.full{
  width: 100%;
}
.list_edit_cars > li.li_4 {
  flex: 0 0 33.3333%;
  width: 33.3333%;
}
.list_edit_cars > li.li_8 {
  flex: 0 0 66.6666%;
  width: 66.6666%;
}
.list_edit_cars > li > article {
  background: #F2F4F7;
  padding: 15px;
  border: 2px solid transparent;
  flex: auto;
  min-height: 1px;
}
.list_edit_cars > li > article.no_stretch{
  flex: 0 0 auto;
}
.list_edit_cars > li > article + article{
  margin: 20px 0 0;
}
.list_edit_cars > li > article .head {
  margin: 0 0 10px;
}
.list_edit_cars > li > article .head.thin{
  margin: 0 0 8px;
}
.list_edit_cars > li > article .head .ttl {
  font: 500 16px/1em 'noto sans japanese',sans-serif;
}
.list_edit_cars > li > article .head.space .ttl{
  min-height: 16px;
}
.list_edit_cars > li > article .head .ttl.h6{
  font: 500 14px/1em 'noto sans japanese',sans-serif;
}
.list_edit_cars > li > article .head.space .ttl.h6{
  min-height: 14px;
}
.list_edit_cars > li > article .data + .data{
  margin-top: 10px;
}


/* 縦並び */
.list_form.min > li.col {
  flex-direction: column;
}
.list_form.min > li.col .form_head {
  flex: 0 0 24px;
}
.list_form.min > li.col .form_data {
  margin-top: -1px;
  margin-left: 0;
  background: transparent;
  border-left: 1px solid #d2d8e2;
  border: 1px solid #d2d8e2;
}
/* トップのネガティブマージンを外す */
.list_form.min > li.col .form_data.top_0 {
  margin-top: 0;
}

/* 追加される項目をスクロール */
.area_scroll_script {
  overflow: auto;
  max-height: 620px;
}


/* タブラジオ別デザイン */
.list_edit_cars .wrap_radio.tab {
  background: #fff;
}
.list_edit_cars .wrap_radio.tab label,
.list_edit_cars .wrap_radio.tab label:before,
.list_edit_cars .wrap_radio.tab label:after {
  min-width: 80px;
}
.list_edit_cars .wrap_radio.tab input[type="radio"]:checked + label {
  color: #fff;
}
.list_edit_cars .wrap_radio.tab input[type="radio"]:checked + label:after {
  background: #0F286C;
}


/* レイアウトサイズ */
.list_edit_cars .layout.half{
  margin: -2px;
}
.list_edit_cars .layout.half + .layout.half{
  margin-top: 6px;
}
.list_edit_cars .layout.half .auto_layout{
  padding: 2px;
}
.list_edit_cars .list_form.min + .list_form.min{
  margin-top: 5px;
}

/* 注目させる */
.list_edit_cars > li > article.spotlight {
  background: #d2d8e2;
  border-color: #0F286C;
}

/* ! ボタンエリアfixed ============================== */
.js-fixed-btnarea.fixed_on [class*="btnarea"] {
  background: #fff;
  width: auto;
  padding: 10px 15px;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 10;
  box-shadow: 0px 0px 1px 0px rgba(0,0,0,.3);
  background: rgba(255,255,255,.85);
  width: 100%;
}
.btnarea_cars_edit [class*="btn_large"]{
  font: 600 .96rem/1em 'helvetica','noto sans japanese',sans-serif;
}



/* ! ====================================================================================================
　問い合わせ件数・ランク_サイドバー
==================================================================================================== */
.area_num {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0 0 0 auto;
}
.area_num .count {
  font: 700 36px/1em 'helvetica','noto sans japanese',sans-serif;
}
.area_num [data-after].count:after {
  content: attr(data-after)"";
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 4px;
}
.area_num .btnarea {
  width: 100%;
  margin: 10px 0 0;
}

/* 指示入力 */
.area_instruction_cars{
  position: relative;
}
.area_instruction_cars .modal{
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: 0; top: 0;
  transform: scale(1.1);
  transition: all .5s ease;
  z-index: 3;
  width: 99%;
  max-width: 440px;
  left: 2px;
}
.area_instruction_cars .box{
  box-shadow: 0px 10px 12px 6px rgba(0,0,0,.08);
  position: relative;
}
.area_instruction_cars .modal.view{
  opacity: 1;
  pointer-events: all;
  transform: scale(1);
}
.area_instruction_cars .modal.view.ui-draggable-dragging{
  transition: all .0s ease;
}
.area_instruction_cars .layout_list{
  margin: 0;
}
.area_instruction_cars .description{
  margin: 10px 0 0;
  font: 300 .8rem/1.7em 'helvetica','noto sans japanese',sans-serif;
}
.area_instruction_cars .btnarea_form{
  margin: 20px 0 0;
  padding: 0 0 4px;
}
.area_instruction_cars .btn_large{
  min-width: 120px;
}


/* ! ====================================================================================================
　■ 見積書と注文書
==================================================================================================== */
.area_document_estimate {
  height: 1080px;
}
/*
.area_document_estimate::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.area_document_estimate::-webkit-scrollbar-track {
  border-radius: 2px;
	background: #F2F4F7;
}
.area_document_estimate::-webkit-scrollbar-thumb {
  border-radius: 2px;
	background: #0A2372;
}
*/


/* ! シート —————————— */
.area_sheet_estimate {
  padding: 40px;
  background: #fff;
  width: 1240px;
  height: 1754px;
  margin: 0 auto;
  transform-origin: center top;
}
.area_sheet_estimate.hol {
  width: 1754px;
  height: 1280px;
  transform:scale(.85);
  transform-origin: 0% 0%;
}
@media screen and (max-width: 1600px){
  .area_document_estimate {
    height: 910px;
  }
  .area_sheet_estimate.hol {  transform:scale(.71);  }
}
@media screen and (max-width: 1440px){
  .area_document_estimate {
    height: 880px;
  }
  .area_sheet_estimate.hol {  transform:scale(.68);  }
}
@media screen and (max-width: 1365px){
  .area_document_estimate {
    height: 820px;
  }
  .area_sheet_estimate.hol {  transform:scale(.64);  }
}
@media screen and (max-width: 1279px){
  .area_document_estimate {
    height: 720px;
  }
  .area_sheet_estimate.hol {  transform:scale(.56);  }
}
@media screen and (max-width: 1079px){
  .area_document_estimate {
    height: 640px;
  }
  .area_sheet_estimate.hol {
    transform:scale(.5);
  }
}

/* ! ヘッド —————————— */
.head_sheet_estimate {
  text-align: center;
  padding: 10px 0;
  margin: 0 0 10px;
  background: url(../img/logo/logo.png);
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
}
.head_sheet_estimate .ttl {
  font: 600 36px/1em 'noto sans japanese',sans-serif;
  text-align: center;
}
/* ! ボディ —————————— */
.body_sheet_estimate {

}
/* ! シートインフォ —————————— */
.area_info_sheet_estimate {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.area_info_sheet_estimate p {
  color: #595757;
  font: 500 13px/1.3em 'helvetica','noto sans japanese',sans-serif;
  padding: 0 0 3px;
  border-bottom: 2px solid #595757;
}
.area_info_sheet_estimate .no_border {
  border: none;
}
.area_info_sheet_estimate p span {
  font: 400 15px/1.3em 'helvetica','noto sans japanese',sans-serif;
}
.area_info_sheet_estimate .large {
  font: 700 20px/1em 'helvetica','noto sans japanese',sans-serif;
}
.area_info_sheet_estimate small {
  font: 300 10px/1.3em 'noto sans japanese',sans-serif;
}

/* ! エリアインフォ右側 収入印紙箇所 —————————— */
.area_info_sheet_estimate .area_info_right {
  padding: 0 130px 0 0;
  background-size: 120px 150px;
  position: relative;
}
.area_info_sheet_estimate .area_info_right:before {
  content: "";
  width: 120px;
  height: 120px;
  background: url(../img/ico/ico_stamp_revenue.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

/* ! シートインフォ_テーブル —————————— */
.table_info_sheet_estimate th {
  height: 25px;
}
.table_info_sheet_estimate p {
  font: 500 13px/1.3em 'helvetica','noto sans japanese',sans-serif;
  padding: 0 0 3px;
  border-bottom: 1px solid #595757;
}
.table_info_sheet_estimate td p {
  font: 400 15px/1em 'helvetica','noto sans japanese',sans-serif;
}
/* 非表示 */
.table_info_sheet_estimate .tr_off * {
  height: 0;
  padding: 0;
  border: none;
}

/* ! テーブル —————————— */
.table_estimates {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.table_estimates + .table_estimates {
  margin-top: 10px;
}
.table_estimates + .table_estimates.space {
  margin-top: 20px;
}
/* ! テーブルパーツ —————————— */
.table_estimates tr {
  vertical-align: middle;
}
.table_estimates th,
.table_estimates td {
  padding: 3px 6px;
  height: 30px;
}
.table_estimates.thin th,
.table_estimates.thin td,
.table_estimates th.thin,
.table_estimates td.thin {
  height: 23px;
  padding: 1px 6px;
}
.table_estimates .thick {
  height: 40px;
}
/* ! テーブルテキスト —————————— */
.table_estimates p {
  font: 400 15px/1.3em 'helvetica','noto sans japanese',sans-serif;
}
.table_estimates p.small {
  font-size: 13px;
}
.table_estimates .price,
.table_estimates .right {
  text-align: right;
}
.table_estimates .price {
  font-weight: 900;
}
.table_estimates .center {
  text-align: center;
}
.table_estimates .left {
  text-align: left;
}
.table_estimates th p {
  color: #71747f;
  font: 500 13px/1.3em 'helvetica','noto sans japanese',sans-serif;
}
/* 印鑑 */
.table_estimates .stamp {
  padding-right: 45px;
  position: relative;
  background-size: 36px 36px;
}
.table_estimates .stamp:before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  background: url(../img/ico/ico_stamp.svg) no-repeat;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  opacity: .2;
}

/* 非表示 */
.table_estimates .tr_off * {
  height: 0 !important;
  padding: 0 !important;
  border: none !important;
}
/* ボーダーの設定 */
.table_estimates .border_off {
  border: none;
}
.table_estimates th,
.table_estimates td,
.table_estimates .border {
  border: 1px solid #71747f;
}
.table_estimates tr.bold {
  border: 2px solid #71747f;
}
/* トップ */
.table_estimates [class*="border_top"] {
  border-top: 1px solid #71747f;
}
.table_estimates .border_top_dotted {
  border-top: 1px dashed #71747f;
}
/* ライト */
.table_estimates [class*="border_right"] {
  border-right: 1px solid #71747f;
}
/* ボトム */
.table_estimates [class*="border_bottom"] {
  border-bottom: 1px solid #71747f;
}
.table_estimates .border_bottom_dotted {
  border-bottom: 1px dashed #71747f;
}
/* レフト */
.table_estimates [class*="border_left"] {
  border-left: 1px solid #71747f;
}
/* ボールド */
.table_estimates.bold {
  border: 2px solid #71747f;
}
.table_estimates.bold.red {
  border-color: #e60012;
  border-width: 4px;
}
.table_estimates .bold {
  border-width: 2px;
}
.table_estimates .border_top_bold {
  border-top-width: 2px;
}
.table_estimates .border_right_bold {
  border-right-width: 2px;
}
.table_estimates .border_bottom_bold {
  border-bottom-width: 2px;
}
.table_estimates .border_left_bold {
  border-left-width: 2px;
}
/* 非表示上書き */

.table_estimates .border_top_off {
  border-top: none;
}
/* 色埋め */
.table_estimates .fill{
  background: #71747f;
}
.table_estimates .fill p {
  color: #fff ;
}
.table_estimates .fill_gray {
  background: #eee;
}

/* ! 下部注意文 —————————— */
.area_description_sheet_estimate .description {
  font: 300 12px/1.5em 'noto sans japanese',sans-serif;
}

/* ! ====================================================================================================
　注文書 - 裏面
==================================================================================================== */
.area_sheet_estimate_backside {
  color: #555;
  padding: 60px;
  margin-top: 40px;
}

/* 宣言文 */
.area_declaration_backside {
  border: 1px solid #ccc;
  padding: 15px;
  margin: 0 0 40px;
}
.area_declaration_backside p + p {
  margin: 5px 0 0;
}

/* ! ヘッド ============================== */
.head_sheet_estimate_backside {
  margin: 0 0 60px;
}
.head_sheet_estimate_backside .ttl {
  font: 600 24px/1em 'noto sans japanese',sans-serif;
  text-align: center;
}


/* ! ボディ ============================== */
.body_sheet_estimate_backside p {
  font-size: 12px;
  line-height: 1.5em;
}

/* ! 裏面のリスト —————————— */
.list_backside > li + li {
  margin: 12px 0 0;
}
.list_backside > li > article {
  display: flex;
}
.list_backside > li > article > .head {
  flex: 0 0 200px;
  margin: 0 20px 0 0;
  display: flex;
}
.list_backside > li > article > .head .num {
  font: 300 14px/1.5em 'noto sans japanese',sans-serif;
  flex: 0 0 24px;
}
.list_backside > li > article > .head .ttl {
  font: 500 14px/1.5em 'noto sans japanese',sans-serif;
  flex: auto;
  min-width: 10px;
}
.list_backside > li > article > .data {
  flex: auto;
  min-width: 10px;
}
.list_backside > li > article > .data p + p {
  margin-top: 10px;
}


/* ! 番号のリスト —————————— */
.list_num_backside {
  list-style-type: decimal;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  padding-left: 1.5em;
  margin-top: 5px;
}
.list_num_backside > li {
  counter-increment: number 1;
}
.list_num_backside > li + li {
  margin: 2px 0 0;
}
.list_num_backside > li > p {
  position: relative;
}

/* ! アイウエオのリスト —————————— */
.list_num_backside.jp {
  list-style-type: katakana;
}

/* ! 欧文番号のリスト —————————— */
.list_num_backside.num {
  list-style-type: lower-roman;
}
/* ! ドットのリスト —————————— */
.list_num_backside.none {
  list-style-type: none;
}

/* ! リストにリストが入る場合 —————————— */

/* ! ====================================================================================================
　■ 見積書
==================================================================================================== */
.area_estimate {
}

/* ! ==================================================
　シート_見積書
================================================== */
.area_estimate_sheet {
  padding: 60px;
  min-height:  800px;
}
/* ! ヘッド_シート ============================== */
.head_estimate_sheet {
  display: flex;
  justify-content: center;
  margin: 0 0 50px;
}
.head_estimate_sheet .ttl {
  font-weight: 500;
}

/* ! ミドル_シート ============================== */
.middle_estimate_sheet {
  margin: 0 0 40px;
}


/* 対象者 */
.middle_estimate_sheet .user .name {
  font-weight: 500;
  margin: 0 0 12px;
}
.middle_estimate_sheet .user .ttl {
  margin: 16px 0 0;
}

/* 弊社 */
.middle_estimate_sheet .our .img {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: -12px 0 12px;
}
.middle_estimate_sheet .our .img img {
  height: 36px;
}
.middle_estimate_sheet .our .name {
  margin: 0 0 12px;
}
.middle_estimate_sheet .our > .data {
  margin: 16px 0 0;
}
.middle_estimate_sheet .our .list > li + li {
  margin: 0;
}


/* ! ボディ_シート ============================== */
.body_estimate_sheet > .ttl {
  font-weight: 500;
  margin: 0 0 10px;
}
.body_estimate_sheet > .ttl:before {
  content: "件名：";
}
.body_estimate_sheet .layout_head {
  margin: 0 0 0 40px;
}
.body_estimate_sheet .layout + .layout {
  margin: 10px 0 0;
}


/* ! チェックボックスの表示 ============================== */
.table_estimates p.checkbox {
  font-size: 13px;
  padding: 0 0 0 20px;
  position: relative;
}
.table_estimates p.checkbox:before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  border: 1px solid #71747f;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.table_estimates p.checkbox.checked:before {
  content: "";
  background: #71747f url(../img/ico/ico_form/ico_form_check_white.svg) center center;
  background-size: 16px 16px !important;
}



/* ! 会社説明のテーブル ============================== */
.table_estimates.company {
  border-collapse: separate;
  padding: 15px;
}




/* ! ==================================================
　追加・編集フォーム オプション
================================================== */
.list_form.options {
  counter-reset: number 0;
}
.list_form.options > li {
  counter-increment: number 1;
}
.list_form.options .form_head .ttl:after {
  content: counter(number) "";
}



/* ! ====================================================================================================
　■ 顧客管理
==================================================================================================== */
/* 要注意人物 */
.table .caution .name {
  display: flex;
  align-items: center;
}
.table .caution .name:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/ico/ico_caution.svg) no-repeat center center;
  background-size: contain !important;
  margin: 0 4px 0 0;
}
.list p.caution {
  display: flex;
  align-items: center;
}
.list p.caution:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/ico/ico_caution.svg) no-repeat center center;
  background-size: contain !important;
  margin: 0 4px 0 0;
}


/* ! ==================================================
　フィルター_顧客リスト
================================================== */
.list_filter_users {
  display: flex;
  margin: -4px;
  margin-bottom: 8px;
}
.list_filter_users > li {
  flex: 1 1 auto;
  min-width: 10px;
  padding: 4px;
}
.list_filter_users > li:first-of-type {
  flex: 0 0 300px;
  margin: 0 20px 0 0;
}
.list_filter_users > li:last-of-type {
  flex: 0 0 180px;
  margin: 0 0 0 20px;
}
.list_filter_users > li > article {
  height: 60px;
  border: 2px solid transparent;
  background: #fff;
  border-radius: 3px;
  padding: 5px 8px;
  position: relative;
}
.list_filter_users .ttl {
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  padding: 0 0 0 20px;
  margin: 0 0 6px;
  position: relative;
}
.list_filter_users .ttl:before {
  content: "";
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 100%;
  position: absolute;
  top: .5em;
  left: 0;
  transform: translateY(-50%);
}
.list_filter_users .data {
  font: 700 24px/1em 'helvetica','noto sans japanese',sans-serif;
  display: flex;
  justify-content: center;
  align-items: baseline;
}
.list_filter_users .data:after {
  content: "人";
  font: 400 14px/1em 'helvetica','noto sans japanese',sans-serif;
  display:inline-block;
  margin: 0 -8px 0 2px;
}


/* 個別 */
.list_filter_users .charge .ttl,
.list_filter_users .total .ttl {
  padding-left: 0;
}
.list_filter_users .charge .ttl:before,
.list_filter_users .total .ttl:before {
  display: none;
}

/* 検討中 */
.list_filter_users .consider .ttl:before { background: #8E919E;}
/* 契約手続き */
.list_filter_users .contract .ttl:before { background: #EB8800;}
/* 入金待ち */
.list_filter_users .payment .ttl:before { background: #E60012;}
/* 入金済 */
.list_filter_users .deposited .ttl:before { background: #36AEE3;}
/* 納車済 */
.list_filter_users .delivered .ttl:before { background: #0F286C;}
/* クローズ */
.list_filter_users .closed .ttl:before { background: #ccc;}

/* ! カレント_ドット —————————————————————————————— */
.list_filter_users .current .ttl:before { background: #fff;}

/* ! カレント_背景等 —————————————————————————————— */
.list_filter_users > .current > article {
  border-color: #000;
}
.list_filter_users > .current > article:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 8px 0 8px;
  border-color: #000 transparent transparent transparent;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50% , 100%);
}
/* 検討中 */
.list_filter_users > .consider.current > article {
  color: #fff;
  border-color: #8E919E;
  background: #8E919E;
}
.list_filter_users > .consider.current > article:after {
  border-color: #8E919E transparent transparent transparent;
}
/* 契約手続き */
.list_filter_users > .contract.current > article {
  color: #fff;
  border-color: #EB8800;
  background: #EB8800;
}
.list_filter_users > .contract.current > article:after {
  border-color: #EB8800 transparent transparent transparent;
}
/* 入金待ち */
.list_filter_users > .payment.current > article {
  color: #fff;
  border-color: #E60012;
  background: #E60012;
}
.list_filter_users > .payment.current > article:after {
  border-color: #E60012 transparent transparent transparent;
}
/* 入金済 */
.list_filter_users > .deposited.current > article {
  color: #fff;
  border-color: #36AEE3;
  background: #36AEE3;
}
.list_filter_users > .deposited.current > article:after {
  border-color: #36AEE3 transparent transparent transparent;
}
/* 納車済 */
.list_filter_users > .delivered.current > article {
  color: #fff;
  border-color: #0F286C;
  background: #0F286C;
}
.list_filter_users > .delivered.current > article:after {
  border-color: #0F286C transparent transparent transparent;
}
/* クローズ */
.list_filter_users > .closed.current > article {
  color: #fff;
  border-color: #ccc;
  background: #ccc;
}
.list_filter_users > .closed.current > article:after {
  border-color: #ccc transparent transparent transparent;
}


/* ! ====================================================================================================
　■ 顧客詳細
==================================================================================================== */
.area_user_detail {
  display: flex;
}
.area_user_detail .layout_main {
  flex: 1 1 auto;
  min-width: 10px;
  display: flex;
}
.area_user_detail .layout_sub {
  flex: 0 0 280px;
  border-left: 1px solid #B7BAC9;
  display: flex;
}

/* レイアウト */
.layout_list {
  flex: auto;
  min-width: 1px;
}
.layout_list + .layout_list{
  margin-top: 10px;
}
.layout_list > article {
  padding: 10px;
}
.layout_list.half > article{
  width: 50%;
}

/* flex時 */
/*
.layout_list.half.flex{
  display: flex;
  flex-wrap: wrap;
}
.layout_list.half.flex > article{
  flex: auto;
  width: auto;
}
*/

.layout_list.half > article.full{
  width: 100%;
}
.layout_list > .left_layout{
  float: left;
}
.layout_list > .right_layout{
  float: right;
}
.layout_list > article.half {
  flex: 0 0 50%;
}
.layout_list > article.one_third {
  flex: 0 0 33.3333%;
}
.layout_list > article.quarter {
  flex: 0 0 25%;
}
.layout_list > article > .head,
.layout_list > article > .layout .head{
  margin: 8px 0;
}
/*
.layout_list > article > .data,
.layout_list > article > .layout .data{
  display: flex;
}
*/
.layout_list > article > .data + .head,
.layout_list > article > .data + .layout,
.layout_list > article > .layout + .layout{
  margin-top: 30px;
}
.layout_list > article > .data + .data{
  margin-top: 20px;
}
.layout_list > article > .head .ttl ,
.layout_list > article > .layout .head .ttl{
  font: 600 14px/1em 'noto sans japanese',sans-serif;
}
.layout_list > article > .data > .list_form{
  flex: 1 1 auto;
  min-width: 50%;
}
.layout_list article > .btnarea {
  margin: 30px 0 0;
}
.layout_list article .layout{
  width: auto;
  flex: 1 1 auto;
}


@media screen and (max-width: 1280px){
  .layout_list > article.quarter {
    flex: 0 0 33.3333%;
  }
  .layout_list > article.layout_1280 {
    flex: 0 0 100%;
  }
  .layout_list > article.layout_1280 .data {
    display: flex;
    flex-wrap: wrap;
  }
  .layout_list > article.layout_1280 .list_form.min {
    width: 290px;
  }
  .layout_list > article.layout_1280 .list_form.min + .list_form.min {
    margin: 0 0 0 20px;
  }
  .layout_list > article.layout_1280 .list_form.min:nth-of-type(n + 4) {
    margin: 20px 0 0 20px !important;
  }
  .layout_list > article.layout_1280 .list_form.min:nth-of-type(3n + 1) {
    margin-left: 0 !important;
  }
}


/* ! ==================================================
　ステータス_車両
================================================== */

.area_status_cars > .ttl {
  margin: 0 0 12px;
}
.area_status_cars > article + article {
  margin: 20px 0 0;
}
.area_status_cars [class^="status_"] {
  margin: 0 0 8px;
}

/* リスト */
.list_status_cars {
 max-height: 630px;
 overflow: auto;
}
.list_status_cars::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.list_status_cars::-webkit-scrollbar-track {
  border-radius: 2px;
	background: #F2F4F7;
}
.list_status_cars::-webkit-scrollbar-thumb {
  border-radius: 2px;
	background: #0A2372;
}

.list_status_cars > li + li {
  border-top: 1px solid #f2f4f7;
  margin: 5px 0 0;
  padding: 5px 0 0;
}
@media screen and (max-width: 1280px){
  .list_status_cars {
   max-height: 1070px;
   overflow: auto;
  }
}


/* ! ====================================================================================================
　ユーザーに関連する車両情報
==================================================================================================== */
.area_cars_user {
}

/* ! ==================================================
　リスト
================================================== */
.list_cars_user > li + li {
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 2px solid #f2f4f7;
}
.list_cars_user .layout_head [class*="thumb"] {
  margin: 5px 0 20px;
}
.list_cars_user .layout_data [class*="btnarea"] {
  margin: 20px 0 0;
}



/* ! ====================================================================================================
　■ CSVアップロード
==================================================================================================== */
.area_upload {
}

.body_upload {
  margin: 30px 0;
}



/* ! ====================================================================================================
　■ 売上管理
==================================================================================================== */
/* ! ==================================================
　売上分析エリア
================================================== */
.area_sales_analysis {
  display: flex;
}

/* 表示 */
.area_sales_analysis .layout_head {
  background: #0F286C;
  padding: 10px;
  margin: 0;
}


/* ! ==================================================
　ヘッド_グラフ
================================================== */
.head_graph {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
}
.head_graph .ttl {
  font: 600 18px/1em 'noto sans japanese',sans-serif;
}
.head_graph .date {
  display: flex;
  align-items: center;
  margin: 0 auto 0 10px;
  flex: 1 1 auto;
  min-width: 10px;
}
.head_graph .count {
  font: 900 26px/1em 'helvetica','noto sans japanese',sans-serif;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  margin: 0 0 0 auto;
}
.head_graph .count:before {
  content: attr(data-before)"：";
  font: 500 13px/1em 'noto sans japanese',sans-serif;
}
.head_graph .count:after {
  content: attr(data-after)"";
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 4px;
}

/* ! ==================================================
　ボディ_グラフ
================================================== */
.body_graph {
  height: 360px;
}
.body_graph > #chart_div{
  overflow: hidden;
}
.body_graph[data-height="240"] {
  height: 240px;
}



/* ! ====================================================================================================
　■ スタッフリスト
==================================================================================================== */
.list_staff {
  display: flex;
  flex-direction: column;
}
.list_staff > li {
  display: flex;
}
.list_staff > li + li {
  margin: 20px 0 0;
}
.list_staff .head {
  flex: 0 0 40px;
  margin: 0 12px 0 0;
}
.list_staff .data {
  flex: 1 1 auto;
  min-width: 10px;
}
.list_staff .position {
  font: 300 13px/1em 'noto sans japanese',sans-serif;
}





/* ! ====================================================================================================
　■ マスタ管理
==================================================================================================== */
.area_masters {
}

/* ! ==================================================
　マスタリスト
================================================== */
.list_masters {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}
.list_masters > li {
  width: 25%;
  padding: 10px;
}
.list_masters .box {
  padding: 20px;
}
.list_masters .ttl {
  padding-left: 36px;
  position: relative;
}
.list_masters .ttl:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
@media screen and (max-width: 1200px){
  .list_masters > li {
    width: 33.3333%;
  }
}

/* 個別 */
.list_masters .cars .ttl:before { background: url(../img/ico/ico_ttl_cars.svg);}
.list_masters .makers .ttl:before { background: url(../img/ico/ico_ttl_makers.svg);}
.list_masters .options .ttl:before { background: url(../img/ico/ico_ttl_options.svg);}
.list_masters .orders .ttl:before { background: url(../img/ico/ico_ttl_orders.svg);}
.list_masters .maintenances .ttl:before { background: url(../img/ico/ico_ttl_maintenances.svg);}
.list_masters .shops .ttl:before { background: url(../img/ico/ico_ttl_shops.svg);}
.list_masters .members .ttl:before { background: url(../img/ico/ico_ttl_members.svg);}
.list_masters .histories .ttl:before { background: url(../img/ico/ico_ttl_history.svg);}



/* ! ====================================================================================================
　■ 分析管理
==================================================================================================== */
.area_analyses .layout_head {
  padding: 10px;
  background: #0F286C;
  margin: 0;
}


/* ! ==================================================
　ヘッド
================================================== */
.head_analyses{
  display: flex;
}

/* ! ====================================================================================================
　■ カウント
==================================================================================================== */
.area_count_analyses {
  flex: 0 0 280px;
  margin: 0 20px 0 0;
}
.list_count_analyses > li + li {
  margin: 10px 0 0;
}
.list_count_analyses > li > article {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #0F286C;
  border-radius: 5px;
  height: 125px;
  padding: 15px;
}
.list_count_analyses .ttl {
  font: 700 16px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 12px;
  padding: 0 0 0 30px;
  position: relative;
}
.list_count_analyses .ttl:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* 横並び */
.list_count_analyses.row {
  display: flex;
  flex-wrap: wrap;
}
.list_count_analyses.row > li {
  flex: 1 1 auto;
  min-width: 10px;
}
.list_count_analyses.row > li + li {
  margin: 0 0 0 10px;
}

/* 個別 */
.list_count_analyses .number .ttl:before {
  background: url(../img/ico/ico_ttl_cars.svg);
}
.list_count_analyses .sales .ttl:before {
  background: url(../img/ico/ico_ttl_sales.svg);
}

/* ! ボディ —————————————————————————————— */
.list_count_analyses .body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 10px;
}
.list_count_analyses .count {
  color: #0F286C;
  font: 700 32px/1em 'helvetica','noto sans japanese',sans-serif;
  letter-spacing: 0;
}
.list_count_analyses .count.large {
  font-size: 44px;
}
.list_count_analyses .count[data-after]:after {
  content: attr(data-after)"";
  font: 700 16px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 4px;
}

/* ! フット —————————————————————————————— */
.list_count_analyses .foot {
  display: flex;
  justify-content: flex-end;
}

/* ! ====================================================================================================
　■ グラフ
==================================================================================================== */
.area_graph_analyses{

}
.area_analyses .area_tab {
  margin: 0;
}
.area_analyses .list_tab_button{
  margin: 0 0 20px;
}


/* ! ==================================================
　在庫構成比
================================================== */
.layout_stock{
  display: flex;
}
.layout_stock .area_graph{
  flex: 0 0 180px;
  margin: 0 20px 0 0;
}
.layout_stock .area_table{
  flex: 1 1 auto;
  min-width: 10px;
}
.table_data .sub{
  font: 500 .9em/1.3em 'noto sans japanese',sans-serif;
  margin: 0 0 0 6px;
}
.table_data .sub:after {
  content: attr(data-after)"";
  font: 500 .7em/1.3em 'noto sans japanese',sans-serif;
}


/* ! ====================================================================================================
　■ 注文管理
==================================================================================================== */
/* ! ==================================================
　詳細ページ
================================================== */
.area_orders_info .head_box{
  min-height: 60px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin: 0 0 30px;
}
.area_orders_info .layout_head > .box{
  height: 100%;
}

/* ステップ */
.list_step{
  display: flex;
  margin: -10px;
  counter-reset: number 0;
  flex: auto;
  min-width: 1px;
}
.list_step > li{
  padding: 10px;
  flex: 0 0 25%;
  position: relative;
  max-width: 120px;
}
.head_step{
  position: absolute;
  top: 0;
  left: 10px;
  transform: translate(0px, -14px);
}
.head_step:before,
.head_step:after{
  content: 'STEP.';
  font: 600 12px/1.3em 'helvetica','noto sans japanese',sans-serif;
  color: #b6bac9;
}
.head_step:after{
  counter-increment: number 1;
  content: counter(number);
  font: 700 18px/1.3em 'helvetica','noto sans japanese',sans-serif;
  padding: 0 0 0 2px;
}
.list_step > li.current .head_step:before,
.list_step > li.current .head_step:after{
  color: #34afe3;
}
.body_step{
  position: relative;
}
.list_step > li + li .body_step:before{
  content: '';
  width: 20px; height: 2px;
  background: #f2f4f7;
  position: absolute;
  left: -20px; top: 50%;
  transform: translate(0,-50%);
}
.body_step p{
  height: 30px;
  width: 100%;
  display: flex;
  align-items: center; justify-content: center;
  background: #f2f4f7;
  color: #b6bac9;
  font: 500 14px/1.3em 'noto sans japanese',sans-serif;
}
.list_step > li.current .body_step p{
  background: #34afe3;
  color: white;
  font: 600 14px/1.3em 'noto sans japanese',sans-serif;
}

/* ! ==================================================
　注文詳細全体表示
================================================== */
.area_orders_detail .head_box.line {
  margin: 0;
}
/* テーブル */
.area_orders_detail .table thead {
  background: #F2F4F7;
}
.area_orders_detail .table thead th {
  padding: 5px;
}
.area_orders_detail .table tbody .num.min {
  font: 500 14px/1em 'helvetica','noto sans japanese',sans-serif;
}

/* 下取り車リスト */
.list_cars_orders_detail {
  margin-top: 10px;
}
.list_cars_orders_detail > li + li {
  border-top: 1px solid #0F286C;
  margin: 10px 0 0;
  padding: 10px 0 0;
}


/* ! ==================================================
　編集する / 追加する
================================================== */
.area_order_edit .layout_list > article,
.area_order_add .layout_list > article{
  width: 50%;
}
.area_order_edit > .body_box > form,
.area_order_add > .body_box > form {
  display: flex;
  flex-direction: column;
}
.area_order_edit > .body_box > form .btnarea_form,
.area_order_add > .body_box > form .btnarea_form{
  justify-content: center;
  margin: 60px 0 0;
}

/* 最終価格 */
.area_total_price{
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  font: 600 20px/1.3em 'noto sans japanese',sans-serif;
  margin: 20px 0 0;
  padding: 12px 0 0;
  border-top: dotted 1px #172858;
}
.area_total_price[data-ttl]:before,
.area_total_price[data-after]:after{
  font: 600 14px/1.3em 'noto sans japanese',sans-serif;
}
.area_total_price[data-ttl]:before{
  content: attr(data-ttl);
  margin: 0 10px 0 0;
}
.area_total_price[data-after]:after{
  content: attr(data-after);
  font: 600 14px/1.3em 'noto sans japanese',sans-serif;
  margin: 0 0 0 6px;
}

@media screen and (max-width: 1300px){
  .area_order_edit .split_3 .list_form li{
    width: 50%;
  }
}
@media screen and (max-width: 1200px){
  .area_order_edit .layout_list > article,
  .area_order_add .layout_list > article{
    width: 100%;
  }
}

/* ! ====================================================================================================
　■ 請求管理
==================================================================================================== */
/* 合計 */
.area_total_expenses{
  padding: 15px;
  position: relative;
  background: white;
  border-radius: 5px;
  border: solid 1px #0F286C;
  max-width: 600px;
  width: 100%;
}
.area_total_expenses .price{
  justify-content: flex-end;
  font: 600 40px/1em 'Helvetica','noto sans japanese',sans-serif;
}
.area_total_expenses .price.yen[data-ttl]:before{
  font: 600 36px/1em 'Helvetica','noto sans japanese',sans-serif;
}
.area_total_expenses .price.yen[data-after]:after{
  font: 600 17px/1em 'noto sans japanese',sans-serif;
  color: #000;
  margin: 0 0 0 10px
}
/* 企業、店舗の経費 */
.area_cost_expenses > .ttl{
  margin: 0 0 8px;
  padding: 0 0 8px;
  border-bottom: 2px solid #0F286C;
}
/* 企業、店舗の経費リスト */
.list_cost_expenses > li{
  display: flex;
  align-items: baseline;
  padding: 0 0 6px;
  border-bottom: solid 1px #f2f4f7;
}
.list_cost_expenses > li + li{
  margin: 5px 0 0;
}
.list_cost_expenses .head{
  flex: 0 0 auto;
  margin: 0 auto 0 0;
}
.list_cost_expenses .ttl{
  font: 300 13px/1.3em 'noto sans japanese',sans-serif;
}
.list_cost_expenses .ttl:after{
  content: ' :';
}
.list_cost_expenses .data p{
  font: 500 14px/1.3em 'noto sans japanese',sans-serif;
  letter-spacing: .07em;
  color: #000;
}
.list_cost_expenses p[data-ttl]:before{
  content: attr(data-ttl);
  margin: 0 4px 0 0;
}

/* 車両選択テーブル */
.area_table_select_brand{
  max-height: 400px;
  overflow: auto;
  min-height: 100px;
}


/* ! ====================================================================================================
　■ 整備管理
==================================================================================================== */
@media screen and (max-width: 1280px){
  .page_detail_maintenance .head_600 > .layout_aside {
    flex: 0 0 400px;
  }
  .page_detail_maintenance .body_main_cars_overview {
    flex-wrap: wrap;
  }
  .page_detail_maintenance .body_main_cars_overview > .img {
    flex: 0 0 100%;
    margin: 0 0 20px;
  }
}



/* ! ====================================================================================================
　■ 従業員管理
==================================================================================================== */
.area_user_detail .layout_list + .layout_list {
  margin-left: 0;
  margin-top: -15px;
}



/* ! ====================================================================================================
　■ 経費管理
==================================================================================================== */
.page_expenses .layout {
  width: auto;
}
@media screen and (max-width: 1280px){
  /* レイアウト */
  .col_1280 {
    flex-direction: column;
  }
}


.list_cost_expenses.col > li {
  flex-direction: column;
}
.list_cost_expenses.col > li .data {
  width: 100%;
  text-align: right;
}


/* ! ====================================================================================================
　■ 店舗管理
==================================================================================================== */
.page_stores_detail .list_count_dashboard {
  flex-wrap: wrap;
  margin: -5px;
}
.page_stores_detail .list_count_dashboard > li {
  flex: 0 0 25%;
  padding: 5px;
}
.page_stores_detail .list_count_dashboard > li + li {
  margin: 0;
}
.page_stores_detail .list_count_dashboard > li > article {
  height: 100px;
}
@media screen and (max-width: 1280px){
  .page_stores_detail .list_count_dashboard > li {
    flex: auto;
    min-width: 1px;
    width: 33.3333%;
  }
}


/* ! ==================================================
　店舗詳細
================================================== */
.area_analysis_store {
  padding: 10px;
  background: #0F286C;
}


/* ! テーブルの表示 —————————— */
.table.shop thead {
  border-top: 1px solid #0F286C;
  border-bottom: 1px solid #0F286C;
}
.table.shop thead tr {
  border: none;
}
.table.shop th,
.table.shop td {
  padding: 2px;
}


/* ! カウントリスト —————————— */
.list_count_store {
  display: flex;
  flex-wrap: wrap;
  margin: -2px;
}
.list_count_store > li {
  width: 50%;
  padding: 2px;
}
.list_count_store article {
  padding: 8px;
  background: #fff;
  box-shadow: 0px 1.5px 1px 0px rgba(0,0,0,.05);
  min-height: 82px;
}
/* テキスト系 */
.list_count_store .head {
  margin: 0 0 4px;
}
.list_count_store .ttl {
  font: 500 14px/1em 'noto sans japanese',sans-serif;
}
.list_count_store .count {
  font: 700 22px/1em 'helvetica','noto sans japanese',sans-serif;
  text-align: right;
}
.list_count_store .count[data-after]:after {
  content: attr(data-after)"";
  font: 500 14px/1em 'noto sans japanese',sans-serif;
  display:inline-block;
  margin: 0 0 0 4px;
}
.list_count_store .foot {
  text-align: right;
  margin: 4px 0 0;
}
@media screen and (max-width: 1280px){
  .list_count_store > li {
    width: 25%;
  }
  .list_count_store article {
    min-height: 72px;
  }
  .list_count_store .ttl {
    font-size: 13px;
  }
  .list_count_store .count {
    font-size: 22px;
  }
}

/* 対象期間選択 */
.area_period_fee {
  flex: auto;
  min-width: 10px;
  margin: 0 0 0 auto;
}


/* 利益概要 */
.area_fee_store .head_box {
  height: 40px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #0F286C;
  padding: 0 0 5px;
}
.area_fee_store .ttl .small {
  font: 500 11px/1em 'noto sans japanese',sans-serif;
  display: block;
  letter-spacing: -.05em;
}

/* 合計利益 */
.area_total_fee {
  text-align: center;
  border-bottom: 2px solid #0F286C;
  padding: 0 0 15px;
  margin: 0 0 20px;
}
.area_total_fee .num {
  font-size: 26px;
}
.area_total_fee .sub {
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  margin: 4px 0 0;
}
.area_total_fee .sub b {
  font-size: 15px;
  display:inline-block;
  margin: 0 2px 0 0;
}

/* 小売利益/小売外利益 */
.subtotal_fee {
  margin: 0 0 0 auto;
  text-align: right;
}
.subtotal_fee.num:after {
  font-size: 13px;
}

/* 利益詳細リスト */
.list_fee_detail > li {
  display: flex;
  align-items: baseline;
}
.list_fee_detail > li + li {
  border-top: 1px dotted #E6EBF3;
  margin: 5px 0 0;
  padding: 5px 0 0;
}
.list_fee_detail .ttl {
  font: 400 13px/1em 'noto sans japanese',sans-serif;
}
.list_fee_detail .ttl:before {
  content: "- ";
}
.list_fee_detail .ttl:after {
  content: "：";
}
.list_fee_detail .data {
  margin: 0 0 0 auto;
  text-align: right;
}
.list_fee_detail .data .num {
  font-weight: 500;
  font-size: 16px;
}
.list_fee_detail .sub {
  font-size: 11px;
}
.list_fee_detail .sub b {
  font-size: 14px;
  font-weight: 500;
  margin: 0 3px;
}

/* 費用合計 */
.area_count_total_fee {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #F0F4F7;
  margin: 5px 0 0;
}
.area_count_total_fee .num {
  margin: 0 0 0 auto;
  font-size: 20px;
}
.area_count_total_fee .num:after {
  font-size: 13px;
}

/* 従業員 */
.area_staff_shop .table {
  padding-right: 12px;
}
/* 従業員利益テーブルスクロール */
.area_scroll_staff_shop {
  overflow: auto;
}
.inner_scroll_staff_shop {
  max-height: 780px;
}
.area_scroll_staff_shop::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.area_scroll_staff_shop::-webkit-scrollbar-track {
  border-radius: 2px;
	background: #F2F4F7;
}
.area_scroll_staff_shop::-webkit-scrollbar-thumb {
  border-radius: 2px;
	background: #0A2372;
}
.area_scroll_staff_shop .table thead {
  border: none;
}
.area_scroll_staff_shop .table th {
  opacity: 0;
  padding: 0;
}
@media screen and (max-width: 1280px){
  .inner_scroll_staff_shop {
    height: 560px;
  }
}


/* ! ====================================================================================================
　■ 書類管理
==================================================================================================== */
.area_car_document article {
  flex: auto;
  min-width: 10px;
  background: #F2F4F7;
}
.area_car_document .head {
  color: #182858;
  background: #F2F4F7;
  padding: 15px 15px 0;
}
.area_car_document .area_ttl {
  min-height: 30px;
}
.area_car_document .head .ttl {
  font-size: 18px;
}
.area_car_document .head.large {
  color: #fff;
  font-size: 24px;
  padding: 5px 10px;
  background: #182858;
}
.area_car_document .data {
  padding: 15px;
}

/* 右側 */
.area_detail_car_document {
  height: 100%;
  overflow: hidden;
  position: relative;
}
.inner_car_document{
  position: initial;
  background: #0F286C;
  padding: 10px;
  overflow: auto;
}
.inner_car_document .head_box > .ttl {
  color: #fff;
}
.area_detail_car_document.fix .inner_car_document{
  position: fixed;
}
.area_detail_car_document.fix.ab .inner_car_document{
  position: absolute;
  left: 0 !important;
  bottom: 0 !important;
  top: auto !important;
}
.area_detail_car_document [class^="status_"]{
  margin: 6px 0 0;
}
.area_detail_car_document .list_data{
  margin: 3px -1px;
}
.area_detail_car_document .list_data > li > article {
  padding: 2px 4px;
  min-height: auto;
}
.area_detail_car_document .box + .box{
  margin: 5px 0 0;
}
.area_detail_car_document .head_box{
  min-height: auto;
  margin: 0 0 3px;
}
.area_detail_car_document .body_table + .body_table{
  margin: 16px 0 0;
}
.area_detail_car_document .table_data + .table_data{
  margin: -1px 0 0;
}

/* フォームを特別小さく */
.area_detail_car_document .table_data th p,
.area_detail_car_document .table_data td p {
  font-size: 12px;
  line-height: 1em;
}
.area_detail_car_document .table_data th,
.area_detail_car_document .table_data td {
  padding: 1px 2px;
}

/* ! ====================================================================================================
　■ 売上管理
==================================================================================================== */
/* ! --------------------------------------------------

- オークション売上管理

-------------------------------------------------- */
.area_sales_auction {
  
}
/* ヘッド -------------------------------------------------- */
.area_sales_auction > .head {
  margin: 0 0 24px;
}
/* ミドル -------------------------------------------------- */
.area_sales_auction > .middle {
  display: flex;
  margin: 0 0 32px;
}
@media screen and (max-width: 1280px){
  .area_sales_auction > .middle { 
    flex-direction: column; 
  }
}
.area_sales_auction > .middle .ttl {
  font: 500 14px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 12px;
}
/* 期間選択 */
.area_period_sales_auction {
  margin: 0 auto 0 0;
}
@media screen and (max-width: 1280px){
  .area_period_sales_auction { 
    margin: 0 0 32px;
  }
  .area_period_sales_auction [class*="wrap_input"][class*="col"] {
    flex-direction: row;
  }
  .area_period_sales_auction [class*="wrap_input"][class*="row"] {
    width: auto;
  }
}
/* トータル表示 */
.area_total_sales_auction {
  
}
.list_total_sales_auction {
  display: flex;
  margin: -12px;
}
.list_total_sales_auction > li {
  padding: 12px;
}
@media screen and (max-width: 1280px){  
  .list_total_sales_auction > li {
    width: 25%;
  }
}
.list_total_sales_auction .price {
  font: 600 20px/1em 'helvetica','noto sans japanese',sans-serif;
  border-bottom: 2px solid #222;
  padding: 0 0 8px;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  min-width: 140px;
}
.list_total_sales_auction .price:after {
  content:"円";
  font: 400 .6em/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 .1em;
}
.list_total_sales_auction .taxin {
  color: #71747f;
  font: 600 14px/1em 'helvetica','noto sans japanese',sans-serif;
  margin: 8px 0 0;
  display: flex;
  align-items: baseline;
  display: none;
}
.list_total_sales_auction .taxin:before {
  content: "税込：";
  font: 400 .6em 'noto sans japanese',sans-serif;
  margin: 0 auto 0 0;
}
.list_total_sales_auction .taxin:after {  
  content: "円";
  font: 400 .6em/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 .2em;
}


/* データ -------------------------------------------------- */
.area_sales_auction > .data {
}
/* 担当者・店舗別 */
.area_detail_sales_auction {
  display: flex;
  flex-direction: column;
  flex: auto;
  min-width: 0;
}
.area_detail_sales_auction > .head {
  background: #444;
  padding: 12px;
  margin: 0 0 16px;
}
.area_detail_sales_auction > .head .ttl {
  color: #fff;
  font: 500 16px/1em 'noto sans japanese',sans-serif;
}
.area_detail_sales_auction > .body {
  flex: auto;
  min-width: 0;
}
.area_detail_sales_auction > .body .inner_scroll_staff_shop {
  max-height: 320px;
}

/* 売り上げ実績内訳 */
.area_breakdown_sales_auction {
  margin: 32px 0 0;
}
.area_breakdown_sales_auction > .head {
  margin: 0 0 8px;
}
.area_breakdown_sales_auction > .head .ttl {
  font: 500 16px/1em 'noto sans japanese',sans-serif;
  padding: 0 0 0 8px;
  margin: 0 0 12px;
  border-left: 4px solid #444;
}
.area_breakdown_sales_auction > .body {
}
.area_breakdown_sales_auction > .body .btnarea {
  display: flex;
  justify-content: flex-end;
}
.area_breakdown_sales_auction > .body .btnarea .btn {
  color: #fff;
  font: 600 10px/1em 'noto sans japanese',sans-serif;
  display: inline-flex;
  align-items: center;
  background: #666;
  border: 1px solid #666;
  padding: 0 4px;
  margin: 4px 0 0;
  height: 16px;
  border-radius: 2px;
}
.area_breakdown_sales_auction > .body .btnarea .btn:hover {
  color: #666;
  background: #fff;
}
.area_auction_cars_detail .details_area{
  position: relative;
}
.area_auction_cars_detail .details_area .btn{
  color: #fff;
  font: 600 10px/1em 'noto sans japanese',sans-serif;
  display: inline-flex;
  align-items: center;
  background: #666;
  border: 1px solid #666;
  padding: 0 4px;
  margin: 4px 0 0;
  height: 16px;
  border-radius: 2px;
  position: absolute;
  top: 0px;
  left: 50px;
  cursor: pointer;
}