@charset "utf-8";
.category-header {
    margin: 5px 0 0 0;
    padding: 0 10px;
    text-align: left !important; 
}

.pf-bannar {
    margin-bottom: 15px;
}

.pf-bannar img {
    max-width: 100%;
    height: auto;
    display: block;
}

.category-header-title {
    font-size: clamp(16px, 4vw, 19px);
    font-weight: 500;
    color: #333;
    margin: 18px 0 10px 0;
    line-height: 1.4;
}

.category-header-lead {
    margin: 0 0 15px 0;
    font-size: clamp(12px, 3vw, 14px);
    line-height: 1.4;
}

.category-nav {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
    font-size: 0;
    display: flex !important;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-start !important;
    text-align: left !important;
}

.category-nav-item {
    display: inline-block;
    padding: 0;
}

.category-nav-link {
    display: inline-block;
    font-size: clamp(13px, 3vw, 14px);
    color: #000;
    background: #dedddd;
    border-radius: 0.3em;
    padding: 0.4em 0.7em;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.category-nav-link:hover {
    opacity: 0.8;
}

.category-nav-link:active {
    opacity: 0.6;
}

.size_other {
    text-align: right;
    margin: 10px 0;
    font-size: clamp(12px, 3vw, 13px);
    padding: 0 15px;
}

.size_other a {
    color: #000;
    text-decoration: underline;
}

.size_other a:hover {
    opacity: 0.7;
}

/* タブレット以下のサイズ */
@media (max-width: 768px) {
    .category-header {
        padding: 0 10px;
    }
    
    .category-header-title {
        margin: 15px 0 10px 0;
    }
    
    .category-nav {
        gap: 5px;
    }
    
    .category-nav-link {
        padding: 0.4em 0.6em;
    }
    
    .size_other {
        padding: 0 10px;
    }
}

/* スマートフォンサイズ */
@media (max-width: 480px) {
    .category-header {
        padding: 0 8px;
    }
    
    .category-header-title {
        font-size: 16px;
        margin: 12px 0 8px 0;
    }
    
    .category-header-lead {
        font-size: 14px;
        margin: 0 0 12px 0;
    }
    
    .category-nav-link {
        font-size: 13px;
        padding: 0.4em 0.5em;
    }
    
    .size_other {
        padding: 0 8px;
    }
</style>