﻿body.page-item-cate #override {
    background-color: var(--color--bg);
}
/* ----------- 全体 */
.cate-item-list + .cate-item-list,
.cate-lists + .cate-lists,
.cate-itemlists-wrap + .main-ttl,
.cate-lists + .main-ttl {
    margin-top: 5em;
}
/* ----------- カテゴリアイテム一覧 */
.cate-item-list .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
}
.cate-item-list .list .item {
    width: calc((100% - 4em) / 3);
}
.cate-item-list .list .item .item-inner {
    display: flex;
    flex-direction: column;
    gap: 1em;
    height: 100%;
}
.cate-item-list .list .item .inner-detail {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.cate-item-list .list .item .inner-detail > * + * {
    margin-top: auto;
    padding-top: 0.5em;
}
.cate-item-list .list .item .inner-detail .stock,
.cate-item-list .list .item .inner-detail .price {
    text-align: right;
}
.cate-item-list .list .item .inner-detail .stock {
    margin-bottom: -0.8em;
}
.cate-item-list .list .item .image {
    padding: 2em;
    background-color: white;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
#override .cate-item-list .list .item .image img {
    width: auto;
    max-width: 100%;
    min-width: 50%;
}
@media (min-width: 769px) {
    .cate-item-list .list .item .item-inner:hover {
        opacity: 0.8;
    }
}
@media (max-width: 768px) {
    .cate-item-list .list .item {
        width: calc((100% - 2em) / 2);
    }
}
/* ----------- カテゴリ一覧 */
.main-contents .cate-lists  .sub-ttl { margin-bottom: 80px; }
.cate-lists .list {
    display: flex;
    flex-wrap: wrap;
    gap: 100px 20px;
    padding: 0;
}
.cate-lists .list .item {
    width: calc((100% - 20px) / 2);
    text-align: center;
}
.cate-lists .item-btn {
    position: relative;
    z-index: 0;
    display: block;
}
.cate-lists .item-btn .inner {
    background-color: var(--color--light-blue);
    color: white;
    padding: 0.5em 10px;
    border-radius: 0.5em;
    position: relative;
    z-index: 0;
    font-size: clamp(12px,3.5vw,24px);
    overflow: hidden;
    padding-left: 1.2em;
}
#override .cate-lists .item-btn .cate-image {
    position: absolute;
    bottom: 0;
    left: 1em;
    margin: auto;
    width: auto;
    max-height: 118px;
    z-index: 1;
}
@media (min-width: 769px) {
    .cate-lists .item-btn .inner::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 0;
        height: 100%;
        background-color: var(--color--blue);
        background: linear-gradient(180deg, var(--color--light-blue) 20%, #5e82af 50%, var(--color--light-blue) 80%);
        content: "";
        transition: width .4s ease;
        border-radius: 1000em;
    }
    .cate-lists .item-btn:hover .inner::before {
        width: 110%;
    }
}
@media (max-width: 768px) {
    /* ----------- 全体 */
    .cate-item-list + .cate-item-list,
    .cate-lists + .cate-lists,
    .cate-lists + .main-ttl {
        margin-top: 2em;
    }
    .main-contents .cate-lists  .sub-ttl { margin-bottom: 40px; }
    .cate-lists .list {
        gap: 30px 15px;
        padding: 0;
    }
    .cate-lists .list .item {
        width: calc((100% - 15px) / 2);
    }
    .cate-lists .item-btn .inner {
        padding-left: 3em;
    }
    #override .cate-lists .item-btn .cate-image {
        max-height: 50px;
        left: 0.5em;
    }
}
