/*+ 売上：日別売上CSS */

/*+表示条件 filter*/

/*+ 売上集計グラフ sales_chart*/
/*//上部リンク sales_chart nav_list*/
.sales_chart .nav_list ul{
    width: 90%;
    display: flex;
    justify-content: space-around;
    color: black;
    padding: 0;
    margin: 2em auto;
}

.sales_chart .nav_list ul li{
    width: 8.5em;
    height: 30px;
    line-height: 30px;
    text-align: center;
    letter-spacing: 0.2em;
    color: white;
    background-color: #585A67;
    border-radius: 5px;
    padding: 0 0.5em;
}

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

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

/*//詳細表示 sales_chart div_1*/
.sales_chart .div_1 h3 span{
    display: inline-block;
    width: 7.5em;
    height: 30px;
    line-height: 30px;
    text-align: center;
    letter-spacing: 0.2em;
    color: white;
    font-weight: normal;
    font-size: 16px;
    background-color: #585A67;
    border-radius: 5px;
}

.sales_chart .div_1 div{
    width: 95%;
    display: flex;
    margin: 0 auto;
}

.sales_chart .div_1 div img{
    width: 65%;
}

/*//パネルに検索条件を表示 .sales_chart .div_2*/
.sales_chart .div_2{
    width: 100%;
}

.sales_chart .div_2 p:first-of-type{
    width: 100%;
    padding: 0 1em;
    margin-bottom: 1em;
}

.sales_chart .div_2 p:last-of-type{
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    padding-left:2em;
}

/*p左チェックボックス*/
.sales_chart .div_2 p:last-of-type::before{
    content: "";
    display: inline-block;
    width: 19px;
    height: 19px;
    background-image: url(../common_img/check_on.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 0.5em;
}

/*店舗、グループ表示*/
.sales_chart .div_2 .div_flex{
    width: 100%;
    display: flex;
    margin: 0 auto;
}

.sales_chart .div_2 .div_flex div{
    width: 50%;
}

.sales_chart .div_2 .div_flex div h4{
    all: unset;
    color: black;
    padding-left: 3em;
}

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

.sales_chart .div_2 .div_flex div img{
    width: 80%;
}

/*//グラフに数値を表示  sales_chart div_3*/
.sales_chart .div_3 .div_flex{
    width: 95%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.sales_chart .div_3 .div_flex div{
    width: 47%;
}

.sales_chart .div_3 .div_flex div p{
    width: 100%;
    margin-bottom: 0.5em;
}

/*p左丸*/
.sales_chart .div_3 .div_flex div p::before{
    content: "●";
    display: inline-block;
    font-size: 20px;
}

.sales_chart .div_3 .div_flex div p span{
    display: inline-block;
    font-family: "YuGothicM", "Yu Gothic", Meiryo, sans-serif;
    font-weight: bold;
}

.sales_chart .div_3 .div_flex div:first-of-type img{
    width: 55%;
}

.sales_chart .div_3 .div_flex div:last-of-type img{
    width: 60%;
}

/*//アイコン sales_chart div_4*/
.sales_chart .div_4 .table_flex{
    width: 100%;
}

.sales_chart .div_4 .table_left th img,
.sales_chart .div_4 .table_right th img{
    width: 30%;
    margin: 0.2em auto;
}

.sales_chart .div_4 .table_left th,
.sales_chart .div_4 .table_right th{
    background-color: #EDECEC;
}

.sales_chart .div_4 .table_left td,
.sales_chart .div_4 .table_right td{
    font-size: unset;

}
.sales_chart .div_4 .table_right td span{
    display: inline-block;
    width: 6.5em;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #809ED0;
    border: 2px dotted #809ED0;
    border-radius: 5px;
    margin: 0 0.3em;
}

/**Zチャート sales_chart div_5*/
.sales_chart .div_5{
    width: 100%;
}

.sales_chart .div_5 h3{
    width: 100%;
    height: auto;
    display:  flex;
    align-items: center;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

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

.sales_chart .div_5 h3 img{
    width: 3.7%;
    height: fit-content;
    margin: 0;
    margin-right: 1em;
}

/**棒グラフ .sales_chart .div_6*/
.sales_chart .div_6{
    width: 100%;
}

.sales_chart .div_6 h3{
    width: 100%;
    height: auto;
    display:  flex;
    align-items: center;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

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

.sales_chart .div_6 h3 img{
    width: 4.7%;
    height: fit-content;
    margin: 0;
    margin-right: 1em;
}

/**線グラフ .sales_chart .div_7*/
.sales_chart .div_7{
    width: 100%;
}

.sales_chart .div_7 h3{
    width: 100%;
    height: auto;
    display:  flex;
    align-items: center;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

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

.sales_chart .div_7 h3 img{
    width: 4.7%;
    height: fit-content;
    margin: 0;
    margin-right: 1em;
}

/*+日別売上 daily_sales*/
/*//上部アイコン daily_sales div_1*/
.daily_sales .div_1{
    width: 100%;
}

.daily_sales .div_1 .table_left th img,
.daily_sales .div_1 .table_right th img{
    width: 30%;
    margin: 0.2em auto;
}

.daily_sales .div_1 .table_left th,
.daily_sales .div_1 .table_right th{
    height: 60px;
    background-color: #EDECEC;
}

.daily_sales .div_1 .table_left td,
.daily_sales .div_1 .table_right td{
    height: 60px;
    font-size: unset;
}

.daily_sales .div_1 .table_left td span{
    display: inline-block;
    width: 6.5em;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #809ED0;
    border: 2px dotted #809ED0;
    border-radius: 5px;
    margin: 0 0.3em;
}

/**日別売上各項目 daily_sales div_2*/
.daily_sales .div_2 h3{
    margin-bottom: 0;
}

.daily_sales .div_2 .div_flex{
    width: 100%;
    display: flex;
    align-items: stretch;/*左右の高さを揃える*/
    margin: 0 auto;
}

.daily_sales .div_2 .div_flex h4{
    width: 100%;
    height: 3.7em;
    line-height: 3.7em;
    font-weight: bold;
    font-family: "YuGothicM", "Yu Gothic", Meiryo, sans-serif;
    color: black;
    background-color: #ececff;
    border-bottom: 1px solid #D8DCDE;
    margin-bottom: 0;
}

.daily_sales .div_2 .div_flex h4 span{
    display: inline-block;
    width: 35%;
    text-align: center;
}

.daily_sales .div_2 .div_flex table{
    margin-bottom: 0;
}

.daily_sales .div_2 .div_flex table th{
    width: 35%;
    height: 3.6em;
    line-height: 3.6em;
    font-weight: bold;
    font-family: "YuGothicM", "Yu Gothic", Meiryo, sans-serif;
    color: black;
    background-color: #ececff;
}

.daily_sales .div_2 .div_flex p,
.daily_sales .div_2 .div_flex table td,
.daily_sales .div_2 .div_flex ul{
    font-size: 14px;
    color: black;
}

.daily_sales .div_2 .div_flex p{
    padding-top: 0.5em;
    padding-left: 0.5em;
}

.daily_sales .div_2 .div_flex .left,
.daily_sales .div_2 .div_flex .right{
    width: 50%;
}

/*//左：s/n、日付、人数　右：前年比 daily_sales div_2 table_div_1*/
.daily_sales .div_2 .table_div_1 .left tr:last-child th,
.daily_sales .div_2 .table_div_1 .left tr:last-child td{
    border-bottom: none;
}

.daily_sales .div_2 .table_div_1 .right{
    width: 50%;
    border-right: 1px solid #D8DCDE;
    position: relative;
}

.daily_sales .div_2 .table_div_1 .right p{
    content: "";
    display: inline-block;
    width: 100%;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%);
}

/*//左：販売数、売上　右：粗利、粗利率、仕入数 table_div_2*/
/*販売数*/
.daily_sales .div_2 .table_div_2 .left table th{
    border-left: none;
}

/*売上*/
.daily_sales .div_2 .table_div_2 .left{
    border-left: 1px solid #D8DCDE;
}

.daily_sales .div_2 .table_div_2 .left .ul_flex{
    width: 85%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin: 0 auto;
}

.daily_sales .div_2 .table_div_2 .left .ul_flex ul{
    list-style: disc;
    margin-top: 0.5em;
    margin-bottom: 0;
}

.daily_sales .div_2 .table_div_2 .left .ul_flex ul li{
    margin-bottom: 0;
    padding-bottom: 0;
}

.daily_sales .div_2 .table_div_2 .left .ul_flex ul li::marker {
  font-size: 12px;   /* 点のサイズ */
}

/*粗利*/
.daily_sales .div_2 .table_div_2 .right{
    border-top: 1px solid #D8DCDE;
}

.daily_sales .div_2 .table_div_2 .right div h4{
    border-right: 1px solid #D8DCDE;
}

.daily_sales .div_2 .table_div_2 .right div p{
    border-right: 1px solid #D8DCDE;
    border-left: 1px solid #D8DCDE;
    padding: 0.5em;
}

/*仕入数*/
.daily_sales .div_2 .table_div_2 .right table tr:last-of-type th,
.daily_sales .div_2 .table_div_2 .right table tr:last-of-type td{
    border-bottom: none;
}

/*//左：前年売上　右：仕入金額 table_div_3*/
/*前年売上*/
.daily_sales .div_2 .table_div_3 .left{
    border-left: 1px solid #D8DCDE;
    border-bottom: 1px solid #D8DCDE;
}
.daily_sales .div_2 .table_div_3 .left h4{
    border-top: 1px solid #D8DCDE;
}

.daily_sales .div_2 .table_div_3 .left p{
    padding:  0.5em;
}


/*+ 決済種別 payment_type*/
/*//上部アイコン payment_type div_1*/
.payment_type .div_1{
    width: 100%;
}

.payment_type .div_1 .table_left th img,
.payment_type .div_1 .table_right th img{
    width: 30%;
    margin: 0.2em auto;
}

.payment_type .div_1 .table_left th,
.payment_type .div_1 .table_right th{
    height: 60px;
    background-color: #EDECEC;
}

.payment_type .div_1 .table_left td,
.payment_type .div_1 .table_right td{
    height: 60px;
    font-size: unset;
}

.payment_type .div_1 .table_left td span{
    display: inline-block;
    width: 6.5em;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #809ED0;
    border: 2px dotted #809ED0;
    border-radius: 5px;
    margin: 0 0.3em;
}

/**円グラフ .payment_type .div_2*/
.payment_type .div_2{
    width: 100%;
}

.payment_type .div_2 h3{
    width: 100%;
    height: auto;
    display:  flex;
    align-items: center;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.payment_type .div_2 h3 img{
    width: 4.7%;
    height: fit-content;
    margin: 0;
    margin-right: 1em;
}

.payment_type .div_2 div{
    width: 98%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.payment_type .div_2 div img{
    width: 47%;
}

/**棒グラフ .payment_type .div_3*/
.payment_type .div_3{
    width: 100%;
}

.payment_type .div_3 h3{
    width: 100%;
    height: auto;
    display:  flex;
    align-items: center;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.payment_type .div_3 p{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 1em;
}

.payment_type .div_3 h3 img{
    width: 4.7%;
    height: fit-content;
    margin: 0;
    margin-right: 1em;
}