@charset "Shift_JIS";

/***************************
全体
***************************/
.category_base h2.inner_title {
    font-size: 25px;
    padding-left: 20px;
    border-bottom: 3px dashed #000;
    position: relative;
    font-weight: 600;
    padding-bottom: 6px;
    margin-bottom: 1%;
}

.category_base h2::before {
    content: "";
    position: absolute;
    top: 40%;
    left: 2%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: #fffdc2;
    border-radius: 50%;
    z-index: -1;
}

/***************************
注目のカテゴリ
***************************/
.category_base .featured_category {
    margin-block: 3% 10%;
}

.category_base .featured_category ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.category_base .featured_category ul li p.categry_text {
    text-align: center;
}

/***************************
カテゴリランキング
***************************/

.category_base .category_ranking .ranking_area {
    overflow: auto;
    margin-bottom: 10%;
}

.category_base .category_ranking .ranking_area h3 {
    position: relative;
    padding-left: 10px;
}

.category_base .category_ranking .ranking_area h3::before {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    content: "";
    width: 4px;
    height: 20px;
    background-color: #222;
    display: inline-block;
    z-index: -1;
}

.category_base .category_ranking .ranking_area ul {
    display: flex;
    gap: 25px;
    margin-right: 65px;
}

.category_base .category_ranking .ranking_area ul.ranking {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0;
}
.category_base .category_ranking .ranking_area ul.ranking li {
    width: 180px;
    position: relative;
}

.category_base .category_ranking .ranking_area ul.ranking li .more {
    text-align: right;
    padding-right: 15px;
    padding-bottom: 10px;
    position: absolute;
    top: 4%;
    right: 3%;
}

.category_base .category_ranking .ranking_area ul.ranking li .more::after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 35%;
    right: 0%;
    border-top: solid 1px #1076c9;
    border-right: solid 1px #1076c9;
    transform: rotate(45deg);
}

.category_base .category_ranking .ranking_area ul.ranking li .category_base .pickup-item-slider {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 5px;
}