#top__mv {
    .top__mv--slider {
        position: relative;
        width: 100%;
        height: 100svh;
        overflow: hidden;
        border-radius: 0 0 calc(24 * var(--rem)) calc(24 * var(--rem));
        background-color: var(--color__gray);
        @media(min-width: 768px) {
            aspect-ratio: 4 / 3;
            height: unset;
        }
        @media(min-width: 1180px) {
            aspect-ratio: 16 / 8;
            overflow: hidden;
        }
        li {
            width: 100%;
            height: 100svh;
            overflow: hidden;
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: var(--transition__base);
            pointer-events: none;
            &.active {
                opacity: 1;
                pointer-events: auto;
                z-index: 2;
            }
            .slider-item {
                width: 100%;
                height: 100svh;
                overflow: hidden;
                position: absolute;
                @media(min-width: 768px) {
                    aspect-ratio: 4 / 3;
                    height: unset;
                }
                @media(min-width: 1180px) {
                    aspect-ratio: 16 / 8;
                }
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                    display: block;
                }
            }
            .slider-txt {
                width: 100%;
                height: 100svh;
                display: grid;
                justify-items: start;
                align-items: end;
                grid-auto-rows: max-content;
                align-content: end;
                position: absolute;
                inset: 0;
                @media(min-width: 768px) {
                    aspect-ratio: 4 / 3;
                    height: unset;
                }
                @media(min-width: 1180px) {
                    aspect-ratio: 16 / 8;
                }
                .txt-wrap {
                    padding: 1rem 1rem 3rem 1rem;
                    display: grid;
                    gap: calc(24 * var(--rem));
                    width: calc(100% - 2rem);
                    h1, p {
                        span {
                            background-color: #fff;
                        }
                    }
                }
            }
        }
    }
    .top__mv--thumb {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 1rem;
        @media(min-width: 390px) {
            gap: calc(24 * var(--rem));
            padding: calc(24 * var(--rem));
        }
        @media(min-width: 1180px) {
            grid-template-columns: repeat(4, 1fr);
        }
        @media(min-width: 1600px) {
            padding-inline: 0;
        }
        .thumb-wrap {
            display: grid;
            padding: calc(8 * var(--rem));
            gap: calc(8 * var(--rem));
            background-color: #fff;
            color: #000;
            border-radius: 1rem;
            box-shadow: var(--box-shadow__base);
            transition: var(--transition__base);
            cursor: pointer;
            text-decoration: none;
            @media(min-width: 768px) {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                align-items: center;
            }
            &:hover {
                box-shadow: var(--box-shadow__hover);
            }
            .thumb-item {
                aspect-ratio: unset;
                height: 100%;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                    display: block;
                    border-radius: calc(8 * var(--rem));
                }
            }
            .thumb-txt {
                br {
                    display: none;
                }
            }
        }
    }
}
/*TOPのみ*/
.sec-top__shop-link {
    .shop-link_copy {
        font-family: var(--font-mincho);
    }
    .btn-shop-link {
        margin-inline: auto;
    }
}
.sec-top__coupon {
    .sec-2col-wrap {
        .coupon-list {
            display: grid;
            gap: calc(40 * var(--rem));
            .coupon-link {
                display: grid;
                gap: calc(24 * var(--rem));
                place-items: end;
                color: #000;
                text-decoration: none;
                transition: var(--transition__base);
                .coupon-img {
                    width: 100%;
                    background-color: var(--color__gray);
                    img {
                        transition: var(--transition__base);
                        width: 100%;
                    }
                }
                .coupon-txt {
                    display: block flex;
                    gap: calc(8 * var(--rem));
                    &::before {
                        content: "";
                        width: var(--icon-size);
                        height: var(--icon-size);
                        background-color: currentColor;
                        mask-image: var(--icon-right-arrow-circle);
                        mask-repeat: no-repeat;
                        mask-size: contain;
                        mask-position: center;
                        margin-inline-end: calc(2 * var(--rem));
                        transition: var(--transition__base);
                    }
                }
                &:hover {
                    img {
                        opacity: .8;
                    }
                    .coupon-txt {
                        &::before {
                            margin-inline-end: 0;
                        }
                    }
                }
            }
        }
    }
}
.sec-top__ranking {
    .sec-2col-wrap {
        .sec-2col-main {
            .item-rank-list {
                display: block grid;
                gap: calc(24 * var(--rem));
                .rank-item-link {
                    display: block;
                    text-decoration: none;
                    color: #000;
                    background-color: #fff;
                    padding: calc(24 * var(--rem));
                    border-radius: 1rem;
                    box-shadow: var(--box-shadow__base);
                    .rank-item-wrap {
                        display: block grid;
                        gap: calc(24 * var(--rem));
                        position: relative;
                        @media(min-width: 768px) {
                            position: unset;
                            grid-template-columns: 1fr 1fr 1fr; 
                            grid-template-rows: auto auto 1fr; 
                            grid-template-areas: 
                                "img rank rank"
                                "img title title"
                                "img txt txt"; 
                        }
                        [class*="rank-item-label"] {
                            aspect-ratio: 79 / 32;
                            width: calc(79 * var(--rem));
                            position: absolute;
                            top: -1rem;
                            left: -1rem;
                            padding: 1rem;
                            border-radius: calc(32 * var(--rem)) 0 calc(32 * var(--rem)) 0;
                            @media(min-width: 768px) {
                                position: unset;
                                grid-area: rank;
                                padding: 0;
                                border-radius: 0;
                            }
                            &[class*="-1"] {
                                background: #fff var(--icon-rank-1) no-repeat center;
                            }
                            &[class*="-2"] {
                                background: #fff var(--icon-rank-2) no-repeat center;
                            }
                            &[class*="-3"] {
                                background: #fff var(--icon-rank-3) no-repeat center;
                            }
                        }
                        .rank-item-img {
                            aspect-ratio: 1 / 1;
                            background-color: var(--color__pry-bk);
                            padding: calc(8 * var(--rem));
                            transition: var(--transition__base);
                            border-radius: calc(8 * var(--rem));
                            overflow: hidden;
                            @media(min-width: 768px) {
                                grid-area: img;
                            }
                            img {
                                object-fit: contain;
                                object-position: center;
                                width: 100%;
                                height: 100%;
                                border-radius: calc(4 * var(--rem));
                            }
                        }
                        .rank-item-title {
                            font-family: var(--font-mincho);
                            font-size: calc(20 * var(--rem));
                            line-height: 1.6;
                            font-weight: 700;
                            @media(min-width: 768px) {
                                font-size: calc(30 * var(--rem));
                                line-height: 1.5;
                                grid-area: title;
                            }
                        }
                        .rank-item-txt {
                            @media(min-width: 768px) {
                                grid-area: txt;
                            }
                        }
                    }
                    &:hover {
                        box-shadow: var(--box-shadow__hover);
                        .rank-item-wrap {
                            .rank-item-img {
                                padding: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}
.sec-top__other-info {
    .sec-base-wrap {
        .other-info-list {
            display: block grid;
            gap: calc(64 * var(--rem));
            @media(min-width: 768px) {
                grid-template-columns: 1fr 1fr;
                gap: calc(24 * var(--rem));
            }
            .info-list-item {
                > * + * {
                    margin-block-start: calc(24 * var(--rem));
                }
                @media(min-width: 768px) {
                    display: grid;
                    grid-template-rows: subgrid;
                    grid-row: span 4;
                    gap: 0;
                }
                .list-item-img {
                    aspect-ratio: 16/9;
                    position: relative;
                    border-radius: 1rem;
                    overflow: hidden;
                    img {
                        position: absolute;
                        object-fit: cover;
                        width: 100%;
                        height: 100%;
                    }
                    h2 {
                        position: absolute;
                        bottom: 0;
                        span {
                            background-color: rgba(255, 255, 255, .5);
                            padding-inline-start: calc(8 * var(--rem));
                        }
                    }
                }
                h3 {
                    @media(min-width: 768px) {
                        display: grid;
                        align-items: center;
                    }
                }
            }
        }
    }
}
/*検索結果・カテゴリー*/
.item-category-child {
    margin-block-start: calc(64 * var(--rem)) !important;
    display: block flex;
    flex-wrap: wrap;
    gap: calc(24 * var(--rem));
}
.item-list {
    margin-block-start: calc(64 * var(--rem)) !important;
    display: grid;
    gap: calc(24 * var(--rem));
    @media(min-width: 601px) {
        grid-template-columns: repeat(2, 1fr);
    }
    @media(min-width: 810px) {
        grid-template-columns: repeat(3, 1fr);
    }
    .item-card {
        display: block grid;
        gap: calc(24 * var(--rem));
        background-color: #fff;
        border-radius: 1rem;
        box-shadow:var(--box-shadow__base);
        overflow: hidden;
        padding: calc(8 * var(--rem));
        color: #000;
        text-decoration: none;
        .card-img {
            aspect-ratio: 1 / 1;
            padding: calc(8 * var(--rem));
            background-color: var(--color__pry-bk);
            border-radius: calc(8 * var(--rem));
            overflow: hidden;
            transition: var(--transition__base);
            img {
                object-fit: contain;
                object-position: center;
                width: 100%;
                height: 100%;
                border-radius: calc(4 * var(--rem));
                transition: var(--transition__base);
            }
        }
        .card-item-name {
            font-family: var(--font-mincho);
            font-size: calc(20 * var(--rem));
            line-height: 1.6;
            font-weight: 700;
            letter-spacing: .02em;
        }
        .card-item-attr-label {
            display: block flex;
            gap: calc(8 * var(--rem));
            &:not(:has(.attr-label-item)) {
                display: none;
            }
            .attr-label-item {
                background-color: var(--color__gray);
                color: #fff;
                width: fit-content;
                padding: calc(4 * var(--rem)) calc(8 * var(--rem));
                border-radius: calc(4 * var(--rem));
            }
        }
        .item-price {
            font-weight: 700;
            text-align: right;
        }
        .discount-price {
            display: block flex;
            justify-content: end;
            align-items: center;
            gap: calc(8 * var(--rem));
            .price-default {
                color: var(--color__gray);
                text-decoration: line-through;
            }
            .price-ratio {
                color: #fff;
                background-color: var(--color__alert);
                padding: calc(4 * var(--rem)) calc(8 * var(--rem));
                border-radius: calc(4 * var(--rem));
                font-weight: 700;
            }
            .price-calc {
                color: var(--color__alert);
                font-weight: 700;
            }
        }
        &:hover {
            color: var(--color__link--base-hover);
            box-shadow:var(--box-shadow__hover);
            .card-img {
                padding: 0;
                img {
                    border-radius: 0;
                }
            }
        }
    }
}