/*+伝票詳細CSS*/
ul,table{
    color: black;
    padding: 0;
    margin: 0;
}

li{
    padding: 0;
}


/*+画面表示項目*/
/*//伝票の印刷、伝票の表示切り替え、伝票検索、商品画像 table_header*/
.table_header th{
    width: 15%;
    font-weight: bold;
}

/*==伝票の印刷 table_header tr_1*/
.table_header .tr_1 th img{
    width: 35%;
    margin: 0.2em auto;
}

/*==伝票の表示切り替え table_header tr_2*/
.table_header .tr_2 th span{
    display: flex;
    justify-content: center;
    align-items: center;
}

.table_header .tr_2 th .spa_1::before{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(td_img/table_header_back.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 0.3em;
}

.table_header .tr_2 th .spa_2::before{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(td_img/table_header_next.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 0.3em;
}

/*==伝票検索 table_header tr_3*/
.table_header .tr_3 th span{
    width: 5.5em;
    color: #585A67;
    text-decoration: underline;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    margin: 0.7em auto;
    position: relative;
    z-index: 2;
}

/*虫眼鏡*/
.table_header .tr_3 th span::before{
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url(td_img/table_header_search.png);
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(-1px);
    margin-right: 0.1em;
}

/*外枠*/
.table_header .tr_3 th span::after{
    content: "";
    display: inline-block;
    width: 6.5em;
    height: 40px;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
    background-color: white;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

/*==商品画像 table_header tr_4*/
.table_header .tr_4 th span{
    display: flex;
    justify-content: center;
    align-items: center;
}

/*OFF*/
.table_header .tr_4 th span::after{
    content: "";
    display: inline-block;
    width: 99px;
    height: 25px;
    background-image: url(td_img/table_header_off.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 0.2em;
}

.table_header .tr_4 td .div_flex{
    width: 100%;
}

.table_header .tr_4 td .div_flex div{
    width: 56%;
}

.table_header .tr_4 td .div_flex div p{
    width: 100%;
}

.table_header .tr_4 td .div_flex div p:last-of-type{
    text-align: right;
    padding-right: 1em;
    margin-top: 3em;
}

/*ON*/
.table_header .tr_4 td span{
    display: inline-block;
    width: 99px;
    height: 25px;
    background-image: url(td_img/table_header_on.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 0.2em;
}

.table_header .tr_4 td .div_flex img{
    width: 35%;
}

/**伝票基本情報 basic_info*/
.basic_info table{
    width: 95%;
    margin: 0 auto;
    margin-top: 2em;
}

.basic_info table th{
    width: 10.5%;
}

.basic_info table td{
    width: calc(50% - 10.5%);
}

/**会計・決済情報 payment_info-*/
.payment_info table{
    width: 95%;
    margin: 0 auto;
    margin-top: 2em;
}

.payment_info table th{
    width: 10.5%;
}

.payment_info table td{
    width: calc(50% - 10.5%);
}

.payment_info table td .underline{
    display: inline-block;
    text-decoration: underline;
    text-decoration-color: red;
}

/*==クレジット会社 payment_info table tr_5*/
.payment_info table .tr_5 td .div_flex{
    width: 100%;
    justify-content: space-between;
}

.payment_info table .tr_5 td .div_flex p{
    width: 44%;
}

.payment_info table .tr_5 td .div_flex p span{
    display: inline-block;
    margin-top: 0.5em;
}

.payment_info table .tr_5 td .div_flex img{
    width: 43%;
    height: fit-content;
}

/**顧客・ポイント情報 customer_points*/
.customer_points table{
    width: 95%;
    margin: 0 auto;
    margin-top: 2em;
}

.customer_points table th{
    width: 10.5%;
}

.customer_points table td{
    width: calc(50% - 10.5%);
}

/**明細（購入商品一覧） item_details*/
.item_details table{
    width: 95%;
    margin: 0 auto;
    margin-top: 2em;
}

.item_details table th{
    width: 10.5%;
}

.item_details table td{
    width: calc(50% - 10.5%);
}

/*==処理名称 item_details table tr_2*/
.item_details table .tr_2 td ul{
    display: flex;
}

/**合計・精算結果 total*/
.total table{
    width: 95%;
    margin: 0 auto;
    margin-top: 2em;
}

.total table th{
    width: 10.5%;
}

.total table td{
    width: calc(50% - 10.5%);
}