/*  ページャー
------------------------------------- */
.acms-micropager {
    display: flex;
    justify-content: center;
}
.acms-micropager .acms-micropager__page {
    font-size: 14px;
    color: var(--color-monotone-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.2rem;
    height: 3.8rem;
    line-height: 1.4285714286;
    border-radius: 0.5rem;
    background-color: #f3f3f3;
    margin-right: 0.8rem;
    border: 0;
}
.acms-micropager .acms-micropager__page-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.2rem;
    height: 3.8rem;
    line-height: 1.4285714286;
    border-radius: 0.5rem;
    background-color: #f3f3f3;
    margin-right: 0.8rem;
    border: 0;
}

.acms-micropager .acms-micropager__page-cur {
    background-color: var(--color-primary);
}

/* splide
------------------------------------- */
.splide {
    margin-bottom: 1.5rem !important;
}
/* pagenation */
.splide__pagination {
    bottom: -2.5rem !important;
    gap: 0.5em !important;
}
.splide__pagination__page {
    background: #fff !important;
    border: 1px solid #999 !important;
    width: 1rem !important;
    height: 1rem !important;
    opacity: 1 !important;
}
.splide__pagination__page.is-active {
background: #999 !important;
}

/* arrow */
.splide__arrow {
width: 50px !important;
height: 100% !important;
border-radius: 0 !important;
background-color: transparent !important;
z-index: 1 !important;
opacity: 1 !important;
}
.splide__arrow::before {
content: '' !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 3rem !important;
height: 3rem !important;
border: 1px solid #333 !important;
background-color: #fff !important;
border-radius: 9999px !important;
z-index: 2 !important;
}
.splide__arrow svg {
position: relative !important;
fill: #333 !important;
width: 1.2rem !important;
height: 1.2rem !important;
z-index: 3 !important;
}
.splide__arrow.splide__arrow--prev {
left: 0 !important;
background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)) !important;
}
.splide__arrow.splide__arrow--next {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)) !important;
right: 0 !important;
}

/* タグフィルター
-------------------------------- */
@-moz-document url-prefix(){
    .tag-filter .tag-filter-choice-wrap {
       scrollbar-width: thin;
       scrollbar-color: #c1c1c1 #f1f1f1;
   }
}
.tag-filter {
    padding: 20px;
    
    /* 選択されているタグ */
    .tag-filter-selected {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 0.2rem solid var(--color-primary);
        padding-bottom: 2rem;
    }
    .tag-filter-selected-label,
    .tag-filter-selected-item {
        font-size: 2.4rem;
        font-weight: bold;
        line-height: 1.6;
    }
    .tag-filter-selected-list {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0;
        padding: 0;
    }

    /* タグを絞り込む
     * remで実装するとタグの高さがデバイスによって変わってしまうためpxで実装
    --------------------------------- */
    .tag-filter-choice {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .tag-filter-choice-label {
        font-weight: bold;
        padding-bottom: 8px;
    }
    .tag-filter-choice-wrap {
        box-sizing: content-box;
        background: var(--color-monotone-light);
        border-radius: 4px;

        overflow-y: scroll;
        font-size: 16px;
        line-height: 1.7;
        max-height: calc((28.398px * 4.5) + (10px * 4) + 16px);// タグ要素の高さ * 表示したい要素数 + gap + wrapのpadding
    }
    .tag-filter-choice-wrap::-webkit-scrollbar {
        width: 8px;
        background-color: #f1f1f1;
        border-radius: 4px;
    }
    .tag-filter-choice-wrap::-webkit-scrollbar-thumb {
        background-color: #c1c1c1;
        border-radius: 4px;
    }

    .tag-filter-choice-list {
        padding: 16px;
        display: inline-flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .tag-filter-choice-item {
        line-height: 0;
        border: 1px solid var(--color-monotone-mild);
        background-color: var(--color-monotone-white);
        border-radius: 0.4rem;
    }
    .tag-filter-choice-tag-link {
        font-size: 12px;
        display: inline-block;
        color: var(--color-monotone-neutral);
        padding: 4px 16px;
        line-height: 1.7;
    }
}

/* ユーティリティ
--------------------------------- */
.my-10 {
    margin:10px 0;
}
.mr-10 {
    margin-right:10px;
}
.mt-10 {
    margin-top:10px;
}
.mt-60 {
    margin-top:60px;
}