/*+担当者明細画面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;
}

/*+h1:担当者明細画面*/
/*+ 担当者情報*/
#img_staff_info{
    max-width: 910px;
}

/***担当者明細 表示項目 table_1*/
.table_1{
    th{
        width: 13%;
    }

    /*==伝票数 slip_count*/
    .slip_count td div{
        width: 95%;
        margin: 0.5em auto;
    }

    .slip_count td div p{
        margin-bottom: 0.5em;
    }

    .slip_count td div ul{
        width: 100%;
        list-style: disc;
        box-sizing: border-box;
        padding-left: 20px;
    }

    .slip_count td div ul li{
        line-height: 1.8;
    }

    /*==粗利金額 gross_profit_amount*/
    .gross_profit_amount td .in_table{
        margin: 0 auto;
        margin-top: 1em;
        margin-bottom: 0.5em;
    }

    .gross_profit_amount td .in_table .com_h5_th{
        font-weight: 400;
        font-size: 18px;
        height: unset;
        line-height: unset;
    }

    .gross_profit_amount td .in_table tr:nth-of-type(n+2) th{
        width: 7em;
        background-color: #FAFAFA;
    }

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

    .download td p a{
        display: block;
        width: fit-content;
        padding-right: 3em;
        margin: 0 0 0 auto;
    }
    
    .download td img{
        max-width: 291px;
    }

}

/**販売明細 表示項目 table_2*/
.table_2{
    th{
        width: 13%;
    }

    /*==伝票数 slip_count*/
    .slip_count td div{
        width: 95%;
        margin: 0.5em auto;
    }

    .slip_count td div p{
        margin-bottom: 0.5em;
    }

    .slip_count td div ul{
        width: 100%;
        list-style: disc;
        box-sizing: border-box;
        padding-left: 20px;
    }

    .slip_count td div ul li{
        line-height: 1.8;
    }

    /*==粗利金額 gross_profit_amount*/
    .gross_profit_amount td .in_table{
        margin: 0 auto;
        margin-top: 1em;
        margin-bottom: 0.5em;
    }

    .gross_profit_amount td .in_table .com_h5_th{
        font-weight: 400;
        font-size: 18px;
        height: unset;
        line-height: unset;
    }

    .gross_profit_amount td .in_table tr:nth-of-type(n+2) th{
        width: 7em;
        background-color: #FAFAFA;
    }

}

/*/////////////////////////////////////////////
スマホ幅(736px以下) レスポンシブ対応
・幅指定(px)のみでwidth:100%等が無い画像が画面幅からはみ出すのを個別に防止
・他ページと同一構成のセクションは画像を上、説明文を下に配置
/////////////////////////////////////////////*/
@media screen and (max-width: 736px) {

    /*+担当者情報*/
    #img_staff_info{
        width: 100%;
    }

    /*==データダウンロード download(table_1) : 画像を上に配置*/
    .table_1 .download td img{
        order: 1;
        width: 100%;
        margin-bottom: 0.5em;
    }

    .table_1 .download td p{
        order: 2;
        flex: 0 0 100%;
    }

    /*==粗利金額 gross_profit_amount 内の小テーブル(粗利金額の計算) : th幅(7em)の詳細度が高く、
       共通シートのth幅100%指定に勝ってしまいth幅が100%にならないため上書き*/
    .table_1 .gross_profit_amount td .in_table tr:nth-of-type(n+2) th,
    .table_2 .gross_profit_amount td .in_table tr:nth-of-type(n+2) th{
        width: 100%;
    }

    .table_1 .gross_profit_amount td .in_table .com_h5_th,
    .table_2 .gross_profit_amount td .in_table .com_h5_th{
        font-size: unset;
    }
    
}