/* 変数 */
:root {
    --popup-y: 100px;
    --popup-x: 100px;
    --fukidasi-size: 20px;
}


.kosugi-maru {
    font-family: "Kosugi Maru", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.bpw-blue {
    color: #0b4ea8;
}

.bg-bpw-blue {
    background-color: #0b4ea8;
}

/* ------------------------------------
** front-page.php
**---------------------------------- */

/* カテゴリカードをクリックすると吹き出しが表示される */
.category-card__popup {
    display: none;
    margin-top: 16px;
}
.category-card__popup.active {
    display: block;
}

@media (min-width: 769px) {
    .category-card__popup {
        margin-top: 56px;
    }

    /* 吹き出しのスタイル */
    .category-card__popup::before {
        content: "";
        position: absolute;
        top: calc(var(--popup-y) + var(--fukidasi-size) - 3px);
        left: calc(var(--popup-x) - var(--fukidasi-size));
        border-width: var(--fukidasi-size);
        border-style: solid;
        border-color: transparent transparent #e5e7eb transparent; /* 吹き出しの色を調整 */
        background-color: transparent; /* 塗りつぶしを透明に */
    }

    .category-card__popup::after {
        content: "";
        position: absolute;
        top: calc(var(--popup-y) + var(--fukidasi-size) - 3px + 2px); /* ::beforeの三角形の上に配置 */
        left: calc(var(--popup-x) - var(--fukidasi-size));
        border-width: var(--fukidasi-size);
        border-style: solid;
        border-color: transparent transparent rgb(249 250 251 / var(--tw-bg-opacity)) transparent; /* 内側の三角形の色を bg-gray-50 に */
        background-color: transparent; /* 塗りつぶしを透明に */
    }
}

.page-numbers {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

.page-numbers li {
    margin: 0 5px;
}

.page-numbers a,
.page-numbers span {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.page-numbers a:hover,
.page-numbers span.current {
    background-color: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

.page-numbers .prev,
.page-numbers .next {
    font-weight: bold;
}