.c-page-title {
    height: 7rem;
}
.v3-c-news {
    padding-top: var(--60px);
    padding-bottom: var(--60px);
    .c-btn {
        bottom: var(--60px);
    }
}

.v3-all-item-mv {
    /* background: url(/smoothskin/gigafile/v3/assets/images/all-items/mv-bg.webp);
    background-size: cover;
    background-repeat: no-repeat; */
    position: relative;

    .v3-all-item-mv__video {
        z-index: -1;
    }
    .v3-all-item-mv__inner {
        position: absolute;
        z-index: 2;
        bottom: var(--20px);
        left: var(--20px);
    }
    .v3-all-item-mv__logo {
        width: var(--93px);
        margin-bottom: var(--15px);
    }
    .v3-all-item-mv__h1 {
        width: var(--338px);
        max-width: 100%;
        margin-bottom: var(--20px);
        filter: drop-shadow(0 0 30px #fff);
    }
    .v3-all-item-mv__lead {
        font-size: var(--16px);
        font-weight: 400;
        line-height: var(--22px);
        letter-spacing: 0.12em;
        margin-bottom: var(--30px);
    }
    .c-btn {
        width: var(--220px);
        height: var(--44px);
        background: #fff;
        color: #000;
    }
}

/* lead */
section.v3-all-items-lead {
    background: #fff;
    padding-top: var(--40px);
    padding-bottom: var(--40px);
    .v3-all-items-lead__img {
        width: var(--230px);
        display: block;
        margin: 0 auto var(--15px);
    }
    .v3-all-items-lead__title {
        text-align: center;
        font-size: var(--16px);
        font-weight: 700;
        line-height: var(--22px);
        letter-spacing: 0.02em;
        margin-bottom: var(--5px);
    }
    .v3-all-items-lead__note {
        text-align: center;
        font-size: var(--12px);
        line-height: var(--18px);
    }
}

/* product */
.v3-all-items-product {
    padding-bottom: var(--120px);
    background: #fff;
    .v3-all-items-product__inner {
        padding: 0 var(--20px);
        
    }
    .v3-all-items-product__intro {
        margin-bottom: var(--20px);
        .v3-all-items-product__intro-image {
            margin-bottom: var(--15px);

        }
        .v3-all-items-product__intro-logo {
            margin: 0 auto var(--10px);
            &.pureadapt {
                width: var(--120px);
            }
            &.pureunplugged {
                width: var(--120px);
            }
            &.barepop {
                width: var(--170px);
            }
        }
        .v3-all-items-product__intro-lead {
            text-align: center;
            color: #191919;
            font-size: var(--14px);
            font-weight: 400;
            line-height: var(--24px);
        }
    }
    .v3-all-items-product__item-list {
        .swiper-container {
            width: 100%;
            height: var(--298px);
            position:relative;
            overflow:hidden;
            margin-bottom: var(--18px);
        }
        .v3-all-items-product__item-thumb {
            width: var(--298px);
            height: var(--298px);
            object-fit:cover;
            object-position:center center;
            margin: 0 auto var(--18px);
        }
        .v3-all-items-product__item-detail-list {
            .item-detail {
                display: none;
            }
            .item-detail.is-active {
                display: block;
            }
            .v3-all-items-product__item-heading {
                text-align: center;
                font-family: var(--font-source-sans-pro);
                font-size: var(--22px);
                font-weight: 600;
                line-height: var(--28px);
                margin-bottom: var(--15px);
            }
            .v3-all-items-product__item-description {
                text-align: center;
                font-size: var(--16px);
                font-weight: 400;
                line-height: var(--28px);
                margin-bottom: var(--19px);
            }
            .v3-all-items-product__item-tag {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: var(--15px);
                margin-bottom: var(--10px);
                span {
                    border: solid 1px #191919;
                    padding: var(--4px) var(--20px);
                    font-size: var(--12px);
                    font-weight: 400;
                    line-height: 1;
                }
            }
            .v3-all-items-product__item-price {
                text-align: center;
                font-family: var(--font-source-sans-pro);
                font-size: var(--28px);
                font-weight: 600;
                line-height: var(--36px);
                margin-bottom: var(--15px);
            }
            .v3-all-items-product__item-cta {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: var(--10px);
                .v3-all-items-product__item-cta-btn {
                    &.--w {
                        background: #fff;
                        color: #000;
                    }
                }
            }
        }
        .--sold-out {
            .v3-all-items-product__item-thumb {
                opacity: .2;
                position: relative;
            }
            &::after {
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 9;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 12rem;
                height: 3.8rem;
                font-size: 2.2rem;
                font-weight: 400;
                color: #fff;
                content: "SOLD OUT";
                background-color: #8a8a8a;
                transform: translate(-50%, -50%);
                font-family: "Source Sans Pro", "Noto Sans JP", sans-serif;
                font-weight: 600;
                letter-spacing: .02em;
            }
        }

        .swiper-controls {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: var(--7px);
            z-index: 9;
            @media (max-width: 1200px) {
                gap: var(--15px);
            }
            @media (max-width: 1000px) {
                gap: var(--20px);
            }
            @media (max-width: 768px) {
                gap: var(--7px);
            }
        }

        .swiper-controls .swiper-pagination-bullets,
        .swiper-controls .swiper-pagination {
            position: static !important;
            top: auto !important;
            right: auto !important;
            left: auto !important;
            transform: none !important;
        }
        .swiper-pagination {
            position: static !important;
            order: 1;
            display: flex;
            flex-direction: column;
            gap: var(--8px);
            justify-content: flex-start;
            align-items: flex-start;
            margin-bottom: var(--40px);
            .swiper-pagination-bullet {
                margin: 0;
                background: #191919;
                width: var(--8px);
                height: var(--8px);
            }
        }
        .swiper-button-next {
            position: static !important;
            order: 3;
            width: var(--32px);
            height: var(--32px);
            background: url(https://gigaplus.makeshop.jp/mysmoothskin/v3/assets/images/common/icon-next.svg);
            background-size: var(--32px);
            rotate: 90deg;
            &::after {
                content: "";
            }
        }
        .swiper-button-prev {
            position: static !important;
            order: 2;
            width: var(--32px);
            height: var(--32px);
            background: url(https://gigaplus.makeshop.jp/mysmoothskin/v3/assets/images/common/icon-next.svg);
            background-size: var(--32px);
            rotate: -90deg;
            margin-bottom: var(--15px);
            @media (max-width: 767px) {
                margin-bottom: var(--20px);
            }
            &::after {
                content: "";
            }
        }

    }

    /* Googds */
    &.--goods {
        padding-bottom: var(--60px);
        .v3-all-items-product-goods__heading {
            color: #191919;
            font-family: var(--font-source-sans-pro);
            font-size: var(--28px);
            font-weight: 600;
            margin-bottom: var(--20px);
        }
        .v3-all-items-product__item-list {
            .v3-all-items-product__item-detail-list {
                .v3-all-items-product__item-heading {
                    font-size: var(--20px);
                }
            }
        }
    }
}

.v3-all-items-product-comparison {
    background: #fff;
    .v3-all-items-product-comparison__inner {
        padding-left: var(--20px);
    }
    .v3-all-items-product-comparison__heading {
        text-align: center;
        font-family: var(--font-source-sans-pro);
        font-size: var(--26px);
        font-weight: 600;
        line-height: var(--32px);
        margin-bottom: var(--26px);
    }
}
.table-wrapper {
    position: relative;
}
.table-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    color: #fff;
    z-index: 9;
    cursor: pointer;
    .overlay-content {
        text-align: center;
        font-size: 1rem;

        .overlay-icon {
            margin-top: var(--209px);
            display: block;
            font-size: 2rem;
            margin-bottom: 0.5rem;
            img {
                width: var(--103px);
            }
        }
        .overlay-text {
            display: block;
        }
    }

    &.hidden {
        display: none;
    }
}

.table-container {
    overflow: auto;
    max-height: var(--590px);
    max-height: calc(100svh - 100px);
    table {
        border-collapse: collapse;
        width: max-content;
        .center {
            text-align: center;
        }
        th,
        td {
        border: 1px solid #eee;
        padding: var(--9px);
        white-space: nowrap;
        background: #fff;
        font-size: var(--12px);
        vertical-align: top;
        width: var(--220px);
        min-width: var(--220px);
        max-width: var(--220px);
        white-space: normal;
        }

        
        th:nth-child(1),
        td:nth-child(1) {
            width: var(--80px);
            min-width: var(--78px);
            max-width: var(--78px);
            white-space: normal;

        }

        thead {
        th {
            position: sticky;
            top: 0;
            z-index: 3;
            text-align: center;
            font-weight: 700;
            font-size: var(--14px);
            border: none;
            padding-top: var(--20px);
            padding-bottom: var(--20px);
            &:first-child {
                z-index: 4;
            }
            &:nth-child(2) {
                background: #DBD3C0;
            }
            &:nth-child(3) {
                background: #383838;
                color: #fff;
            }
            &:nth-child(4) {
                background: #D2EAFE;
            }
        }
        }

        tbody {
        tr {
            th:first-child,
            td:first-child {
                position: sticky;
                left: 0;
                background: #eee;
                z-index: 2;
                text-align: center;
                font-weight: 700;
                vertical-align: middle;
                border-color: #fff;
                border-left: none;
                span {
                    font-size: var(--10px);
                }
            }
            td {
                .c-btn {
                    margin: 0 auto;
                }
            }
        }
        }
    }

    .btn {
        display: inline-block;
        padding: 0.4rem 0.8rem;
        background: #000;
        color: #fff;
        text-decoration: none;
        border-radius: 4px;
        font-size: 0.85rem;
    }
}