/*+基本設定：トップメニュー売上表示・カテゴリ表示・指定コード１～３CSS*/
/*//`設定リセット*/
h4{
    font-weight: normal;
    color: black;
    margin-bottom: 0.5em;
}

/*+トップメニュー売上表示 sales_overview*/
.sales_overview .div_flex{
    width: 95%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.sales_overview .div_flex p{
    width: 34%;
}

/*移動*/
.sales_overview .div_flex .spa_1{
    display: inline-block;
    width: 45px;
    height: 45px;
    background-image: url(img/sales_overview_1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    margin: 0 0.3em;
}

/*閉じる*/
.sales_overview .div_flex .spa_2{
    display: inline-block;
    width: 37px;
    height: 37px;
    background-image: url(img/sales_overview_2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    margin-right: 0.3em;
}

.sales_overview .div_flex div{
    width: 65%;
    position: relative;
}

/*赤枠*/
.sales_overview .div_flex div::before{
    content: "";
    display: inline-block;
    width: 3.5em;
    height: 100%;
    border: 3px solid #FF0000;
    position: absolute;
    right: -0.5%;
}

.sales_overview .div_flex div img{
    width: 100%;
    height: fit-content;
}

img[data-original="../../../8-settings/8-1-001/8-1-001-4/img/sales_overview_3.png"],
img[data-original="../../../8-settings/8-1-001/8-1-001-4/img/sales_overview_4.png"]{
    margin-bottom: 1em;
}

/*+カテゴリ表示 category_display*/
.category_display > p:first-of-type{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 1.5em;
}

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

.category_display .d_1,
.category_display .d_2{
    width: 95%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

/**反映する場所の例1 d_1*/
.category_display .d_1 h4{
    width: 41%;
}

.category_display .d_1 img{
    width: 20%;
    margin-left: 0;
}

/**反映する場所の例2 d_2*/
.category_display .d_2 div{
    width: 40%;
}

.category_display .d_2 img{
    width: 59%;
    margin: 0;
}

/*+ 指定コード１～３ designated_code*/
.designated_code .div_flex{
    width: 95%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.designated_code .div_flex p{
    width: 53%;
}

.designated_code img{
    width: 35%;
    height: fit-content;
    margin-left: 5%;
}