/*+ランキング： 部門ランキングCSS*/
/*共通*/
.div_flex{
    width: 95%;
    display: flex;
    margin: 0 auto;
}

.spa_block{
    display: block;
}

table,ul{
    margin-bottom: 0;
}

ul{
    color: black;
}

.div_flex_h3{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

img{
    height: fit-content;
}

h4,h5{
    font-weight: normal;
    color: black;
    margin-bottom: 0;
}

/*+表示条件 filter*/
/*//部門選択 filter category*/
.filter .category .div_flex{
    width: 95%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    position: relative;
}

.filter .category .div_flex p{
    width: 100%;
    position: absolute;
    top: 5%;
}

/*table*/
.filter .category .div_flex table{
    width: 50%;
    height: fit-content;
    margin: auto 0;
}

.filter .category .div_flex table th{
    width: 25%;
    padding: 0.5em 0;
}

.filter .category .div_flex table th img{
    margin: 0 auto;
}

/*ALL*/
.filter .category .div_flex table tr:last-of-type th{
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.3em;
}

/*右側の画像*/
.filter .category .div_flex > img:last-of-type{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/**処理種別 filter process_type*/
.filter .process_type p{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 1em;
}

.filter .process_type table{
    width: 50%;
    height: fit-content;
    font-size: 15px;
    margin-bottom: 2em;
}

.filter .process_type table th{
    width: 11%;
    padding: 1em 0;
}

.filter .process_type table td{
    width: calc(50% - 11%);
    font-size: 14px;
}

.filter .process_type h4{
    width: 100%;
    color: #656A7D;
    font-size: 18px;
    font-weight: bold;
    padding-left: 1em;
    margin-bottom: 0;
}

/*check_off*/
.filter .process_type h4::before{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../common_img/check_off.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 0.4em;
}

/*+部門ランキング表示画面*/
/*//上部リンク nav_list*/
.nav_list ul{
    width: 100;
    display: flex;
    justify-content: space-around;
    color: black;
    padding: 0;
    margin: 2em auto;
}

.nav_list ul li{
    width: 8.3em;
    height: 33px;
    line-height: 33px;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0.15em;
    color: white;
    background-color: #585A67;
    border-radius: 5px;
    padding: 0 0.1em;
}

.nav_list p{
    width: 100%;
    padding-left: 1em;
}

.nav_list ul .now{
    color: #3F5DA5;
    background-color: #CCCCCC;
}

.nav_list p{
    width: 100%;
    padding-left: 1em;
}

/*//アイコン icon*/
.icon th{
    width: 10%;
}

.icon td{
    width: calc(50% - 10%);
}

/*範囲内*/
.icon td span{
    display: inline-block;
    width: 4em;
    text-align: center;
    border: 2px dotted #809ED0;
    border-radius: 5px;
    margin: 0 0.2em;
}

/*+パレート図 pareto_chart*/
.pareto_chart > p:first-of-type{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 1em;
}

img[data-original="../../2-sales_details/2-2-002/img/pareto_chart_cumulative_1.png"]{
    width: 85%;
    margin-top: 0.5em;
}

/**累積表示 pareto_chart cumulative*/
.pareto_chart .cumulative > p:first-of-type{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 1em;
}

.pareto_chart .cumulative h4{
    width: 100%;
    padding-left: 1em;    
}

/*h4左丸*/
.pareto_chart .cumulative h4::before{
    content: "●";
    display: inline-block;
    font-size: 20px;
}

.pareto_chart .cumulative .div_1 div,
.pareto_chart .cumulative .div_2 div,
.pareto_chart .cumulative .div_3 div{
    width: 95%;
    display: flex;
    margin: 0 auto;
}

.pareto_chart .cumulative .div_1 div p,
.pareto_chart .cumulative .div_2 div p,
.pareto_chart .cumulative .div_3 div p{
    width: 30%;
}

.pareto_chart .cumulative .div_1 div img,
.pareto_chart .cumulative .div_2 div img,
.pareto_chart .cumulative .div_3 div img{
    width: 55%;
}

/**表示範囲 pareto_chart view*/
.pareto_chart .view > p:first-of-type{
    width: 100%;
    padding-left: 1em;
}

.pareto_chart .view ul{
    width: 40%;
    margin-left: 2.5%;
}

.pareto_chart .view li span{
    display: inline-block;
    width: 5.5em;
    line-height: 2.5em;
    text-decoration: underline;
}

/**強調線 pareto_chart highlight*/
.pareto_chart .highlight > p:first-of-type{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 1em;
}

.pareto_chart .highlight img{
    width: 90%;
}

.pareto_chart .highlight ul{
    width: 90%;
    display: flex;
    justify-content: space-around;
    margin: 1em auto;
}

.pareto_chart .highlight ul li{
    width: 8.5em;
    height: 35px;
    line-height: 35px;
    text-align: center;
}

.pareto_chart .highlight .li_1{
    color: #EDECEC;
    background-color: #000000;
}
.pareto_chart .highlight .li_2{
    background-color: #BDD0E5;
}
.pareto_chart .highlight .li_3{
    color: #EDECEC;
    background-color: #0000FF;
}
.pareto_chart .highlight .li_4{
    background-color: #FFA333;
}
.pareto_chart .highlight .li_5{
    background-color: #00FF00;
}
.pareto_chart .highlight .li_6{
    color: #EDECEC;
    background-color: #FF0000;
}

.pareto_chart .highlight > p:last-of-type{
    width: 100%;
    padding-left: 1em;
}

/**ランク種別 pareto_chart rank*/
.pareto_chart .rank p{
    width: 100%;
    padding-left: 1em;
}

/*+円グラフ pie_chart*/
.pie_chart > P:first-of-type{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 1em;
}

/**円グラフの表示について pie_chart div_1*/
.pie_chart .div_1 .img_flex{
    width: 95%;
    display: flex;
    margin: 0 auto;
}

.pie_chart .div_1 .img_flex p{
    width: 52%;
}

.pie_chart .div_1 .img_flex img{
    width: 25%;
}

/*+一覧  ranking_list*/
.ranking_list table{
    width: 90%;
    margin: 0 auto;
}

.ranking_list table th{
    width: 12%;
}

.ranking_list table td{
    width: calc(50% - 12%);
}

.ranking_list table th span{
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-weight: bold;
    color: #585A67;
    text-decoration: underline;
    margin: 0 0.2em;
}

.ranking_list table th span::before{
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    background-image: url(img/arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
}