/*+売上明細管理 - 購入顧客一覧CSS*/
table,ul,ul li{
    color: black;
    padding: 0;
    margin: 0;
}

table .div_flex{
    width: 100%;
}

button,
button:hover{
    all: unset;
    color: black;
}

figcaption{
    color: black;
}

img{
    height: fit-content;
}

/*+ 検索条件指定*/
#img_purchase_customer_list{
    max-width: 843px;
}

/**検索条件 表示項目 display_item_1*/
/*//表示項目*/
.display_item_1 th{
    width: 13%;
}


.display_item_1 tr:nth-of-type(n+3) th,
.display_item_1 tr:nth-of-type(n+3) td{
    font-size: 15px;
}

.display_item_1 tr:nth-of-type(n+3) th{
    background-color: #FAFAFA;
}

/*//ベスト表示・データダウンロード display_item_2*/
/*不要なborder*/
.display_item_2 tr:first-of-type th,
.display_item_2 tr:first-of-type td{
    border-top: none;
}

.display_item_2 th{
    width: 13%;
}

/*==ベスト表示 best_display*/
.best_display td p{
    flex: 0.9;
    margin-bottom: 0.5em;
}

.best_display td h3{
    font-size: unset;
    font-weight: 400;
    margin: 0;
}

/*h3左丸*/
.best_display td h3::before{
    content: "●";
    display: inline-block;
    font-size: 20px;
}

.best_display td .div_flex:last-of-type{
    justify-content: space-between;
    margin-bottom: 0.5em;
}

.best_display td .div_1,
.best_display td .div_2{
    width: 49.5%;
}

.best_display td .div_1 ul{
    width: 95%;
    margin: 0 auto;
}

.best_display td .div_1 ul li{
    display: flex;
}

.best_display td .div_1 ul li .spa_1{
    width: 10em;
    text-align: right;
    text-decoration: underline;
}

.best_display td .div_1 ul li .spa_2{
    width: 4em;
    text-align: center;
}

.best_display td .div_1 ul li .spa_3{
    flex: 1;
}

.best_display td .div_2 p{
    width: 95%;
    margin: 0 auto;
}

.best_display td img{
    max-width: 440px;
}

/*==データダウンロード download*/
.download td p{
    flex: 0.9;
}

.download td img{
    max-width: 437px;
}

/*+集計結果一覧*/
#img_summary_result_list_1{
    max-width: 812px;
    margin: 0;
}

#img_summary_result_list_2{
    max-width: 856px;
    margin: 0 0 0 auto;
}

/**一覧 表示項目 list_display_items*/
.list_display_items th{
    width: 13%;
}

/*/////////////////////////////////////////////
スマホ幅(736px以下) レスポンシブ対応
・幅指定(px)のみでwidth:100%等が無い画像が画面幅からはみ出すのを個別に防止
/////////////////////////////////////////////*/
@media screen and (max-width: 736px) {

    /*+検索条件指定*/
    #img_purchase_customer_list{
        width: 100%;
    }

    /*==ベスト表示 best_display : 説明画像の幅を制限*/
    .best_display td > .div_flex:first-of-type{
        width: 100%;
        display: block;
    }

    .best_display td img{
        width: 100%;
        margin-top: 0.5em;
    }

    /*出力順(div_1)/最終順位(div_2)を横並びから縦並びに*/
    .best_display td .div_1,
    .best_display td .div_2{
        width: 100%;
    }

    .best_display td .div_1{
        margin-bottom: 0.5em;
    }

    .best_display td .div_1 ul li{
        display: block;
    }    

    .best_display td .div_1 ul li span{
        display: block;
        margin-bottom: 0.5em;
    }

    .best_display td .div_1 ul li .spa_1{
        text-align: left;
    }

    .best_display td .div_1 ul li .spa_2{
        display: none;
    }

    .best_display td .div_1 ul li .spa_3{
        width: 90%;
        margin: 0 auto;
    }

    /*==データダウンロード download*/
    .download td img{
        width: 100%;
    }

    /*+集計結果一覧*/
    #img_summary_result_list_1,
    #img_summary_result_list_2{
        width: 100%;
    }
}