/*+伝票・明細情報：曜日・時間帯別CSS*/
/*//設定リセット*/
/*main.css labelのチェックボックスを見えなくす*/
input[type="checkbox"]+label:before{
    display: none;
}

/*main.css labelのpadding消す*/
input[type="checkbox"]+label, input[type="radio"]+label{
    padding: 0;
    display: block;/*inline-blockだと見出しの幅が短くなる*/
}

h5{
    font-weight: normal;
    color: black;
}

/*共通*/
.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;
}

/*+表示条件 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 conditions*/
.filter .conditions > p:first-of-type{
    width: 50%;
}

/*toggleするのに不要な余白*/
.filter .conditions .com_border{
    padding-bottom: 0;
}

.filter .conditions h4{
    margin-bottom: 0;
}

/*右側の画像*/
img[data-original="../../2-sales_details/2-1-009/img/conditions_1.png"]{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/*__種別 conditions_1 toggle_1*/
/*+toggle共通*/
.conditions_1,
.conditions_2,
.conditions_3,
.conditions_4,
.conditions_5{
    width: 95%;
    margin: 0 auto;
}

/*線 幅 位置*/
.conditions_1 .com_border,
.conditions_2 .com_border,
.conditions_3 .com_border,
.conditions_4 .com_border,
.conditions_5 .com_border{
    width: 95%;
    margin: 0 auto;
    margin-bottom: 2em;
}

.conditions_1 .com_h5,
.conditions_2 .com_h5,
.conditions_3 .com_h5,
.conditions_4 .com_h5,
.conditions_5 .com_h5{
    border-bottom: none;
}

/*不足分border*/
.conditions_1 h4,
.conditions_2 h4,
.conditions_3 h4,
.conditions_4 h4,
.conditions_5 h4{
    position: relative;
}

.conditions_1 h4::before,
.conditions_2 h4::before,
.conditions_3 h4::before,
.conditions_4 h4::before,
.conditions_5 h4::before{
    content: "";
    display: inline-block;
    width: 100.05%;
    height: 0;
    border-top: 1px solid #D8DCDE;
    position: absolute;
    bottom: -1px;
    left: -0.05%;
}

/*メニュー上下の速さ*/
.div_toggle{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s ease-in-out;
}

/* h4をクリック可能にする(共通)*/
.label_h4 {
    cursor: pointer;
    display: block;
    width: auto;
}

/*+ ▼ ▲ の切り替え(共通) */
.toggle_1 + .label_h4 h4::after,
.toggle_2 + .label_h4 h4::after,
.toggle_3 + .label_h4 h4::after,
.toggle_4 + .label_h4 h4::after,
.toggle_5 + .label_h4 h4::after{
    content: " ▼";
    font-size: 25px;
}

.toggle_1:checked + .label_h4 h4::after,
.toggle_2:checked + .label_h4 h4::after,
.toggle_3:checked + .label_h4 h4::after,
.toggle_4:checked + .label_h4 h4::after,
.toggle_5:checked + .label_h4 h4::after{
    font-size: 25px;
}

/*//時間・曜日 装飾*/
/* チェックが入ったら（クリックしたら）開く*/
.toggle_1:checked ~ .div_toggle{
    max-height: 1500px; /* table全体表示 pxじゃないと滑らかに動かない*/
}

.conditions_1 .div_toggle > p:first-of-type{
    width: 100%;
    padding-left: 1em;
    margin: 1em auto;
}

/*h5左●*/
.conditions_1 .div_toggle h5{
    width: 100%;
    padding-left: 2em;
    margin-bottom: 0.5em;
}

.conditions_1 .div_toggle h5::before{
    content: "●";
    font-size: 20px;
    display: inline-block;
}

.conditions_1 .div_toggle img{
    width: 95%;
}

.conditions_1 .div_toggle img:last-of-type{
    margin-bottom: 2em;
}

.conditions_1 .div_toggle img:first-of-type{
    margin-bottom: 1em;
}

/*__表示形式 conditions_2 toggle_2*/
/* チェックが入ったら（クリックしたら）開く*/
.toggle_2:checked ~ .div_toggle{
    max-height: 700px; /* table全体表示 pxじゃないと滑らかに動かない*/
}

.conditions_2 .div_toggle > p:first-of-type{
    width: 100%;
    padding-left: 1em;
    margin: 1em auto;
}

.conditions_2 .div_1,
.conditions_2 .div_2,
.conditions_2 .div_3{
    width: 50%;
}

/*h5左丸*/
.conditions_2 .div_1 h5::before,
.conditions_2 .div_2 h5::before,
.conditions_2 .div_3 h5::before{
    content: "●";
    font-size: 20px;
    display: inline-block;
}

.conditions_2 .div_1 p,
.conditions_2 .div_2 p,
.conditions_2 .div_3 p{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 0;
}

.conditions_2 .div_1 img,
.conditions_2 .div_2 img,
.conditions_2 .div_3 img{
    height: 230px;
}

.conditions_2 .div_3{
    margin-left: 2.5%;
    margin-bottom: 2em;
}

/*__時間 conditions_3 toggle_3*/
.toggle_3:checked ~ .div_toggle{
    max-height: 800px; /* table全体表示 pxじゃないと滑らかに動かない*/
}

.conditions_3 .div_toggle > p:first-of-type{
    width: 100%;
    padding-left: 1em;
    margin: 1em auto;
}

/*赤枠*/
.conditions_3 span{
    display: inline-block;
    width: 3em;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 3px solid #FF0000;
}

.conditions_3 img{
    width: 95%;
}

.conditions_3 img:first-of-type{
    margin-top: 0.3em;
    margin-bottom: 1em;
}

.conditions_3 img:last-of-type{
    margin-bottom: 2em;
}

/*__集計単位 conditions_4 toggle_4*/
.toggle_4:checked ~ .div_toggle{
    max-height: 1500px; /* table全体表示 pxじゃないと滑らかに動かない*/
}

.conditions_4 .div_toggle > p:first-of-type{
    width: 100%;
    padding-left: 1em;
    margin: 1em auto;
}

.conditions_4 .div_toggle > p:nth-of-type(2){
    text-align: center;
}

/*赤枠*/
.conditions_4 span{
    display: inline-block;
    width: 3em;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 3px solid #FF0000;
}

.conditions_4 .div_1 h5,
.conditions_4 .div_2 h5,
.conditions_4 .div_3 h5{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 0;
}

/*h5左丸*/
.conditions_4 .div_1 h5::before,
.conditions_4 .div_2 h5::before,
.conditions_4 .div_3 h5::before{
    content: "●";
    font-size: 20px;
    display: inline-block;

}

.conditions_4 .div_1 .div_flex,
.conditions_4 .div_2 .div_flex,
.conditions_4 .div_3 .div_flex{
    justify-content: space-between;
}

/*左画像*/
.conditions_4 .div_1 .div_flex img:first-of-type,
.conditions_4 .div_2 .div_flex img:first-of-type,
.conditions_4 .div_3 .div_flex img:first-of-type{
    width: 48%;
}

/*右画像*/
.conditions_4 .div_1 .div_flex img:last-of-type,
.conditions_4 .div_2 .div_flex img:last-of-type,
.conditions_4 .div_3 .div_flex img:last-of-type{
    width: 47%;
    height: fit-content;
}

.conditions_4 .div_3{
    margin-bottom: 2em;
}

/*__税抜表示 conditions_5 toggle_5*/
.toggle_5:checked ~ .div_toggle{
    max-height: 1500px; /* table全体表示 pxじゃないと滑らかに動かない*/
}

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

.conditions_5 p:first-of-type{
    margin: 1em auto;
}

.conditions_5 .div_1 h5,
.conditions_5 .div_2 h5{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 0;
}

/*h5左丸*/
.conditions_5 .div_1 h5::before,
.conditions_5 .div_2 h5::before{
    content: "●";
    font-size: 20px;
    display: inline-block;
}

.conditions_5 .div_1 .div_flex,
.conditions_5 .div_2 .div_flex{
    width: 75%;
    justify-content: space-between;
}

.conditions_5 .div_1 .div_flex img,
.conditions_5 .div_2 .div_flex img{
    width: 48%;
    margin: 0;
}

/*右画像*/
.conditions_5 .div_1 .div_flex img:last-of-type,
.conditions_5 .div_2 .div_flex img:last-of-type{
    height: fit-content;
}

.conditions_5 .div_1{
    margin-top: 1em;
}

.conditions_5 .div_2{
    margin-bottom: 2em;
}

/*+曜日・時間別グラフ、リスト*/
/*//上部リンク nav_list*/
.nav_list ul{
    width: 90%;
    display: flex;
    justify-content: space-around;
    color: black;
    padding: 0;
    margin: 2em auto;
}

.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;
}

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

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

/*//詳細設定 advanced_settings*/
.advanced_settings p{
    width: 40%;
}

.advanced_settings 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;
}

.advanced_settings img{
    width: 60%;
}

/**曜日・時間別グラフ day_time_graph*/
.day_time_graph .icon{
    width: 95%;
    margin: 0 auto;
    margin-bottom: 1em;
}

.day_time_graph .icon th{
    width: 10%;
}

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

/*移動範囲*/
.day_time_graph .icon span{
    display: inline-block;
    width: 7.5em;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 3px #809ED0 dotted;
    border-radius: 8px;
    margin: 0 0.2em;
}

/*h4左丸*/
.day_time_graph h4{
    font-weight: normal;
    color: black;
    width: 100%;
    padding-left: 1em;
    margin-bottom: 0;
}

.day_time_graph h4::before{
    content: "●";
    display: inline-block;
    font-size: 20px;
}

.day_time_graph img:not(.icon img){
    width: 95%;
    margin-bottom: 2em;
}

/*色tabel*/
.graph_color{
    width: 90%;
    margin: 0 auto;
}

.graph_color th{
    width: 10%;
    background-color: unset;
}

.graph_color td{
    width: calc(50% - 10%);
    height: 4em;
}

.graph_color span{
    display: block;
    width: 94%;
    height: 3.3em;
    line-height: 3.3em;
    font-family: "YuGothicM", "Yu Gothic", Meiryo, sans-serif;
    font-weight: bold;
    margin: 0 auto;
}

.graph_color .spa_1{
    background-color: #FF0000;
}

.graph_color .spa_2{
    background-color: #0084FF;
}

.graph_color .spa_3{
    background-color: #6FD63F;
}

.graph_color .spa_4{
    background-color: #ff6d01;
}

.graph_color .spa_5{
    background-color: #C659C7;
}

.graph_color .spa_6{
    background-color: #FFD300;
}

/**曜日・時間別リスト day_time_list*/
.day_time_list .icon{
    width: 95%;
    margin: 0 auto;
    margin-bottom: 1em;
}

.day_time_list .icon th{
    width: 10%;
}

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

/*移動範囲*/
.day_time_list .icon span{
    display: inline-block;
    width: 7.5em;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 3px #809ED0 dotted;
    border-radius: 8px;
    margin: 0 0.2em;
}

/*h4左丸*/
.day_time_list h4{
    font-weight: normal;
    color: black;
    width: 100%;
    padding-left: 1em;
    margin-bottom: 0;
}

.day_time_list h4::before{
    content: "●";
    display: inline-block;
    font-size: 20px;
}

.day_time_list img:not(.icon img){
    width: 90%;
    margin-bottom: 2em;
}

/*色tabel*/
.list_color{
    width: 90%;
    margin: 0 auto;
}

.list_color th{
    width: 10%;
    background-color: unset;
}

.list_color td{
    width: calc(50% - 10%);
    height: 4em;
}

.list_color th span{
    display: block;
    width: 94%;
    height: 3.3em;
    line-height: 3.3em;
    font-family: "YuGothicM", "Yu Gothic", Meiryo, sans-serif;
    font-weight: bold;
    margin: 0 auto;
}


.list_color .spa_1{
    background-color: #6FD63F;
}

.list_color .spa_2{
    background-color: #FF0000;
}

.list_color .spa_3{
    background-color: #ff6d01;
}

.list_color .spa_4{
    background-color: #C659C7;
}

/*//集計単位で「来客数」を選択*/
.day_time_list div{
    width: 95%;
    margin: 0 auto;
    margin-top: 2em;
}

.day_time_list div h5{
    width: 100%;
    font-size: medium;
    text-decoration: underline;
}

.day_time_list div ul{
    list-style: disc;
    margin-top: 0.5em;
    margin-left: 2em;
    margin-bottom: 2em;
}

.day_time_list > p:last-of-type{
    width: 100%;
    padding-left: 1em;
    margin-top: 1.5em;
}