/*+ランキング：商品ベストCSS*/

table,ul{
    margin-bottom: 0;
}

ul{
    color: black;
}

img{
    height: fit-content;
}

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

/*+表示条件 filter*/
/**期間 filter div_1*/
/*検索条件のクリア*/
.filter .div_1 table .tr_1 th span{
    display: inline-block;
    width: 90%;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    color: #564E9E;
    letter-spacing: 0.07em;
    background-color: white;
    border: 2px solid #564E9E;
}

/**期間ベスト filter period_best*/
.filter .period_best > p:first-of-type{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 1em;
}

.filter .period_best table{
    width: 50%;
}

.filter .period_best table th{
    width: 25%;
}

.filter .period_best table th span{
    display: inline-block;
    width: 2em;
    font-size: 19px;
    color: white;
    border: 3px solid#CCCCCC;
}

/*30日幅*/
.filter .period_best table th .spa_4{
    width: 2.6em;
}

.filter .period_best table th .spa_1{
    background-color: #3F5DA5;
}

.filter .period_best table th .spa_2{
    background-color: #5FA751;
}

.filter .period_best table th .spa_3{
    background-color: #BAA23E;
}

/*曜日別絞込*/
.filter .period_best .div_1{
    width: 95%;
    margin: 0 auto;
    margin-top: 2em;
}

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

/**商品区分大・中・小 item_category*/
.item_category > p:first-of-type{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 1em;
} 

/*＋*/
.item_category > p:first-of-type span{
    display: inline-flex;
    width: 7%;
    height: 35px;
    line-height: 35px;
    justify-content: space-between;
    vertical-align: middle;
    margin-left: 0.3em;
}

.item_category > p:first-of-type span::before{
    content: "";
    display: inline-block;
    width: 3em;
    height: 27px;
    background-image: url(img/plus.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}

.item_category .div_flex{
    width: 95%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.item_category table{
    width: 50%;
    height: fit-content;
}

.item_category table th{
    width: 25%;
    padding: 0.5em 0;
}

.item_category table th img{
    margin: 0 auto;
}

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

/*右側の画像*/
.item_category img:last-of-type{
    height: fit-content;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/**部門(BCPOS) category_bcpos*/
.category_bcpos > p:first-of-type{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 1em;
} 

/*＋*/
.category_bcpos > p:first-of-type span{
    display: inline-flex;
    width: 7%;
    height: 35px;
    line-height: 35px;
    justify-content: space-between;
    vertical-align: middle;
    margin-left: 0.3em;
}

.category_bcpos > p:first-of-type span::before{
    content: "";
    display: inline-block;
    width: 3em;
    height: 27px;
    background-image: url(img/plus.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}

.category_bcpos .div_flex{
    width: 95%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.category_bcpos table{
    width: 50%;
    height: fit-content;
}

.category_bcpos table th{
    width: 25%;
    padding: 0.5em 0;
}

.category_bcpos table th img{
    margin: 0 auto;
}

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

/*右側の画像*/
.category_bcpos img:last-of-type{
    height: fit-content;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/**分類選択 .filter .category_selection*/
.filter .category_selection > p:first-of-type{
    width: 100%;
    padding-left: 1em;
    margin-bottom: 1em;
}

.filter .category_selection .div_flex{
    justify-content: space-between;
}

.filter .category_selection .div_flex .div_1{
    width: 40%;
    height: fit-content;
    display: flex;
    align-items: center;
}

.filter .category_selection .div_flex .div_1 img{
    width: 75%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin: 0;
}

/*右向き矢印*/
.filter .category_selection .div_flex .div_1 .arrow{
    display: inline-block;
    height: fit-content;
    margin-left: 3em;
}

.filter .category_selection .div_flex .div_1 .arrow::before{
    content: "→";
    display: block;
    font-size: 50px;
    font-weight: bold;
    color: black;
}

.filter .category_selection .div_flex .div_2{
    width: 60%;
    display: flex;
    justify-content: space-between;
}

.filter .category_selection .div_flex .div_2 img{
    width: 45%;
}

.filter .category_selection ul{
    width: 90%;
    list-style: disc;
    margin: 0 auto;
    margin-top: 1.5em;
}

.filter .category_selection ul li{
    line-height: 2em;
}

/*編集*/
.filter .category_selection ul li .spa_1{
    display: inline-block;
    width: 2.5em;
    height: 30px;
    text-align: center;
    letter-spacing: 0.08em;
    color: #585A67;
    background-color: #EEFAFF;
    margin: 0 0.2em;
}

/*検索条件のクリア*/
.filter .category_selection ul li .spa_2{
    display: inline-block;
    width: 9.5em;
    height: 35px;
    line-height: 35px;
    font-size: 15px;
    text-align: center;
    color: #564E9E;
    letter-spacing: 0.07em;
    background-color: white;
    border: 2px solid #564E9E;
    margin: 0 0.2em;
}

/**キーワード filter keyword*/
.filter .keyword{
    position: relative;
}

.filter .keyword .div_flex{
    width: 95%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.filter .keyword p{
    width: 50%;
}

.filter .keyword img{
    width: 35%;
    height: fit-content;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.filter .keyword .table_flex{
    width: 52%;
    justify-content: space-between;
    font-size: 15px;
    position: absolute;
    top: 37%;
    left: 2.5%;
}

/*歯ブラシ*/
.filter .keyword .table_1{
    width: 35%;
}

.filter .keyword .table_1 .tr_1 th{
    background-color: #ececff;
    padding: 0.3em 0;
}

.filter .keyword .table_1 .tr_2 th{
    text-align: left;
    font-weight: bold;
    background-color: white;
    padding-left: 1em;
}

.filter .keyword .table_1 .tr_3 th,
.filter .keyword .table_1 .tr_4 th{
    width: 17.75%;
    padding: 0;
}

.filter .keyword .table_1 img{
    width: 70%;
}

.filter .keyword .table_1 ul{
    margin: 0;
}

/*◯*/
.filter .keyword .table_1 .maru::before{
    content: "◯";
    font-size: 20px;
    font-weight: 900;
    color: #FF0000;
    margin-right: 0.3em;
}

/*✕*/
.filter .keyword .table_1 .batsu::before{
    content: "✕";
    font-size: 20px;
    font-weight: 900;
    color: #0084FF;
    margin-right: 0.4em;
}

/*前方～完全*/
.filter .keyword .table_2{
    width: 63%;
    height: fit-content;
}

.filter .keyword .table_2 th{
    width: 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;
    border: 2px solid transparent;/*hover用*/
    background-color: #585A67;
    border-radius: 5px;
    padding: 0 0.1em;
}

/*詳細表示 li_link*/
.nav_list ul .li_link{
    color: white;

}
.nav_list ul .li_link:hover{
    color: #564E9E;
    border: 2px solid #CCCCCC;
    background: linear-gradient(to bottom, #EDEFF0, #FDFBFB);    
}

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

/*詳細表示(見た目だけ)*/
.nav_list p span{
    display: inline-block;
    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;
    margin-right: 0.2em;
}

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

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

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

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

/*+TreeMap tree_map*/
/**表示順序 tree_map div_1*/
.tree_map .div_1 img{
    width: 45%;
}

.tree_map .div_1 p{
    width: 100%;
    padding-left: 1em;
    margin-top: 1em;
}

/**ツリーマップの見方 tree_map div_2*/
.tree_map .div_2 .div_flex{
    justify-content: space-between;
}

.tree_map .div_2 .div_flex p{
    width: 34%;
}

.tree_map .div_2 .div_flex img{
    width: 60%;
    margin: 0;
}

/*+商品ベスト top_products*/
/**各項目 top_products div_1*/
/*商品ベスト一覧上部*/
img[data-original="../../2-sales_details/2-2-006/img/top_products_1.png"]{
    width: 90%;
    margin-bottom: 1.5em;
}

.top_products .div_1 .table_1{
    width: 95%;
    margin: 0 auto;
}

.top_products .div_1 .table_1 th{
    width: 8%;
}

.top_products .div_1 .table_1 td .div_flex{
    width: 100%;
    justify-content: space-between;
}

.top_products .div_1 .table_1 td .div_flex div{
    width: 49%;
}

.top_products .div_1 .table_1 td .div_flex div:first-of-type{
    margin-left: 1.5em;
}

.top_products .div_1 .table_1 td .div_flex div p{
    width: 100%;
    margin-bottom: 0.5em;
}

.top_products .div_1 .table_1 td .div_flex div img{
    width: 75%;
    margin-left: 0;
}

.top_products .div_1 .table_2{
    width: 95%;
    margin: 0 auto; 
}

/*商品ベスト一覧*/
img[data-original="../../2-sales_details/2-2-006/img/top_products_2.png"]{
    width: 90%;
    margin-bottom: 1.5em;
}

.top_products .div_1 .table_2 th{
    width:12%;
}

.top_products .div_1 .table_2 td{
    width: calc(50% - 12%);
}

/*下向き arrow_1*/
.top_products .div_1 .table_2 .spa_1,
.top_products .div_1 .table_2 .spa_2{
    display: inline-flex;
    align-items: center;
    color: #585A67;
    font-weight: bold;
    text-decoration: underline;
}

.top_products .div_1 .table_2 .spa_1::before,
.top_products .div_1 .table_2 .spa_2::after,
.top_products .div_1 .table_2 .spa_4::before{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(img/arrow_1.png);
    background-size: contain;
    background-repeat: no-repeat;
}

/*上向き arrow_2*/
.top_products .div_1 .table_2 .spa_2::before,
.top_products .div_1 .table_2 .spa_3::before{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(img/arrow_2.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.top_products .div_1 .table_2 .spa_3::before,
.top_products .div_1 .table_2 .spa_4::before{
    width: 25px;
    height: 25px;
    margin-right: 0.7em;
}

/*前期比ベスト*/
.top_products .div_1 .table_2 ul{
    margin-top: 0.5em;
}

.top_products .div_1 .table_2 ul li{
    font-size: 15px;
}

.top_products .div_1 .table_2 ul li:first-of-type{
    margin-bottom: 0.5em;
}