/*+カテゴリー情報：カテゴリー別売上分析CSS*/
table,
ul li{
    color: black;
    padding: 0;
    margin: 0;
}

ul{
    padding: 0;
    margin: 0;
}

table{
    height: fit-content;
}

table .div_flex{
    width: 100%;
}

button,
.button{
    all: unset;
}

/*+h1 カテゴリー別売上分析*/
/*「カテゴリ表示」を「使用する」に設定している場合のみ利用できます。 div_h1*/
.div_h1 > .div_flex:first-of-type{
    width: 90%;
    justify-content: space-around;
    margin-top: 0.5em;
}

.div_h1 > .div_flex:first-of-type .div_flex{
    width: 45%;
    justify-content: center;
}

.div_h1 > .div_flex:first-of-type .div_flex p{
    width: 15em;
    white-space: nowrap;
}

/*p左丸*/
.div_h1 > .div_flex:first-of-type .div_flex p::before{
    content: "●";
    display: inline-block;
    font-size: 20px;
}

.div_h1 img{
    max-width: 219px;
    width: 100%;
    min-width: 0;
    margin: 0;
}

/*+表示条件 filter*/
/**期間 filter div_1*/
/**店舗・グループ選択 .filter .div_2*/

/**カテゴリー category_selection*/
.category_selection .div_flex:first-of-type{
    justify-content: space-between;
}

.category_selection .div_1{
    flex: 0.96;
}

.category_selection .div_1 table{
    width: 74.5%;
    margin: 1em 0 2em 0;
}

.category_selection .div_1 table th{
    width: 25%;
}

.category_selection .div_1 table th .fa-refresh{
    font-size: 50px;
    color: #585A67;
    line-height: 1;
}

.category_selection .div_1 .div_flex{
    overflow: hidden;
}

.category_selection .div_1 .div_flex div{
    flex: 0.9;
    overflow: hidden;
}

.category_selection .div_1 .div_flex div h4{
    font-weight: 400;
    color: black;
    margin-bottom: 0.5em;
}

/*h4左丸*/
.category_selection .div_1 .div_flex div h4::before{
    content: "●";
    display: inline-block;
    font-size: 20px;
}

.category_selection .div_1 .div_flex div img{
    min-width: 0;
}

/*imgカテゴリー選択*/
#img_category_selection_2{
    max-width: 314px;
    width: 100%;
}

/*imgカテゴリー細目（カテゴリリスト）選択*/
#img_category_selection_3{
    max-width: 320px;
    width: 100%;
}

/*imgカテゴリー選択*/
#img_category_selection_1{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/*+集計結果一覧*/
/*imgカテゴリー別売上分析の集計結果一覧*/
#img_details_list{
    max-width: 1830px;
    width: 100%;
}

/*//パネルに検索条件を表示 .on_panel*/
.on_panel .div_flex figcaption{
    padding-left: 2em;
}

/**一覧　各項目 list_each_item*/
.list_each_item th{
    width: 12%;
}

.img_switch_off,
.img_switch_on{
    display: inline-block;
    width: 10%;
    margin: 0;
}

/*imgスイッチOFF*/
.img_switch_off{
    max-width: 397px;
}

/*imgスイッチON*/
.img_switch_on{
    max-width: 400px;
}

/*==内税商品の税抜表示 tax_inc_item_net*/
.tax_inc_item_net td ul{
    width: 95%;
    margin: 0.5em auto;
}

.tax_inc_item_net td ul li{
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.tax_inc_item_net td ul li:first-of-type{
    margin-bottom: 1em;
}

/*==原価税込表示 tax_inc_cost_display*/
.tax_inc_cost_display td ul{
    width: 95%;
    margin: 0.5em auto;
}

.tax_inc_cost_display td ul li{
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.tax_inc_cost_display td ul li:first-of-type{
    margin-bottom: 1em;
}

/*==印刷*/
.fa-print{
    display: inline-block;
    font-size: 40px;
    line-height: 3px;
    position: relative;
    z-index: 0
}

.fa-print::before{
    display: inline-block;
    line-height: 0.9;/* 行の高さを詰める */
    margin-top: 0.15em;
}

/*アイコンに白背景色*/
.fa-print::after{
    content: "";
    display: inline-block;
    width: 0.65em;
    height: 0.85em;
    background: #fff;
    border-radius: 10px;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%);
    z-index: -1;
}

/*==CSVアイコン*/
.fa-file-text-o{
    display: inline-block;
    font-size: 40px;
    line-height: 3px;
}

/*アイコンに白背景色*/
.fa-file-text-o::before{
    display: inline-block;
    line-height: 0.9;/* 行の高さを詰める */
    background: #fff;
    border-radius: 10px;
    margin-top: 0.15em;
}

/*==【総合計】 grand_total*/
.grand_total ul{
    width: 95%;
    margin: 0 auto;
    margin-top: 0.5em;
}

.grand_total ul li{
    line-height: 2em;
}

.grand_total ul li span:first-of-type{
    text-decoration: underline;
}

/*//集計結果一覧のカテゴリー「0」について category_zero*/
.category_zero img{
    width: 100%;
}

.category_zero p{
    width: 95%;
    margin: 0 auto;
}

.category_zero h4{
    font-weight: 400;
    color: black;
    margin: 0 auto;
}

.category_zero .div_1,
.category_zero .div_2,
.category_zero .div_3{
    width: 98%;
    margin: 0 auto;
}

/*赤枠 青枠*/
.category_zero .div_1 ul,
.category_zero .div_2 ul{
    width: 90%;
    display: flex;
    justify-content: center;
    gap: 5em;
    margin: 0.5em auto;
}

.category_zero .div_1 ul li,
.category_zero .div_2 ul li{
    display: flex;
    align-items: center;
}

.category_zero .div_1 ul li span:first-of-type,
.category_zero .div_2 ul li span:first-of-type{
    display: inline-block;
    width: 5em;
    height: 1.5em;
}

.category_zero .spa_red{
    border: 3px solid #f00;
}

.category_zero .spa_blue{
    border: 3px solid #0084FF;
}

/*カテゴリ商品マスタから登録する場合 div_1*/
.category_zero .div_1 img{
    max-width: 1131px;
}

/*商品登録から新規登録する場合 div_2*/
.category_zero .div_2 img{
    max-width: 1286px;
    width: 90%;
}

/*CSVをダウンロードすると～ div_3*/
.category_zero .div_3 p{
    margin-bottom: 0.5em;
}

.category_zero .div_3 ul{
    flex: 1;
}

.category_zero .div_3 ul li{
    line-height: 2em;
}

.category_zero .div_3 img{
    max-width: 764px;
}