
.area-main {
    .sec-item {
        @media(min-width: 1180px) {
            padding-inline-start: calc(104 * var(--rem));
        }
        .sec-item-wrap {
            padding-block: calc(64 * var(--rem)) calc(104 * var(--rem));
            @media(min-width: 768px) {
                padding-block: calc(104 * var(--rem));
            }
            > * + * {
                margin-block-start: calc(24 * var(--rem));
                @media(min-width: 768px) {
                    margin-block-start: 0;
                }
            }
        }
        .sec-item-main {
            @media(min-width: 768px) {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: calc(24 * var(--rem));
            }
            .item-info {
                > * + * {
                    margin-block-start: calc(24 * var(--rem));
                }
                @media(min-width: 768px) {
                    padding-block-start: calc(104 * var(--rem));
                }
                .share-buttons {
                    display: flex;
                    gap: calc(8 * var(--rem));
                    align-items: center;
                    .sns-x,
                    .sns-fb,
                    .pinterest {
                        display: grid;
                        place-items: center;
                    }
                    .sns-fb {
                        .fb_iframe_widget {
                            span {
                                display: block;
                            }
                        }
                    }
                }
                .illegal-report {
                    #openIllegalReport {
                        color: var(--color__gray);
                    }
                }
            }
            .item-cart {
                padding-block-start: calc(104 * var(--rem));
                height: fit-content;
                position: sticky;
                top: 0;
                .item-cart-wrap {
                    background-color: #fff;
                    padding: calc(24 * var(--rem));
                    border-radius: 1rem;
                    > * + * {
                        margin-block-start: calc(24 * var(--rem));
                    }
                    .item-cart-name {
                        font-size: calc(20 * var(--rem));
                        font-weight: 700;
                        line-height: 1.6;
                        letter-spacing: .02em;
                        font-family: var(--font-mincho);
                    }
                    .item-cart-price {
                        text-align: right;
                        font-weight: 700;
                    }
                    .discount-cart-price {
                        display: block flex;
                        gap: calc(8 * var(--rem));
                        justify-content: end;
                        align-items: center;
                        .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;
                        }
                    }
                    .item-cart-soldout {
                        text-align: right;
                        .txt-price {
                            color: var(--color__gray);
                            text-decoration: line-through;
                            font-weight: 700;
                        }
                        .txt-soldout {
                            font-weight: 700;
                            color: var(--color__alert);
                        }
                    }
                    #itemAttention {
                        .membershipPoint {
                            margin-block-end: calc(24 * var(--rem));
                            .membershipPoint__amountWrapper {
                                display: block flex;
                                align-items: end;
                                background: var(--color__pry-bk);
                                color: #fff;
                                justify-content: center;
                                padding-block: calc(4 * var(--rem)) calc(6 * var(--rem));
                                border-radius: calc(4 * var(--rem));
                                font-weight: 400;
                                .membershipPoint__amount {
                                    margin-right: 2px;
                                    font-weight: 700;
                                    position: relative;
                                    top: 2px;
                                }
                            }
                            .membershipPoint__attentionWrapper {
                                display: grid;
                                justify-content: end;
                                .membershipPoint__attention {
                                    width: fit-content;
                                    margin-block-start: calc(4 * var(--rem));
                                    .membershipPoint__attentionLink {
                                        padding-right: 0;
                                        margin-left: -4px;
                                    }
                                }
                            }
                        }
                        .communityLabel {
                            background-color: unset;
                            color: currentColor;
                            padding: 0;
                            margin-block: calc(24 * var(--rem));
                            .communityLabel__title {
                                font-size: calc(18 * var(--rem)) !important;
                                display: block flex;
                                gap: calc(4 * var(--rem));
                                &::before {
                                    content: "";
                                    width: var(--icon-size);
                                    height: var(--icon-size);
                                    background-color: currentColor;
                                    mask-image: var(--icon-community);
                                    mask-repeat: no-repeat;
                                    mask-position: center;
                                    mask-size: contain;
                                }
                            }
                            .communityLabel__note {
                                margin-top: 0;
                            }
                        }
                        .lottery {
                            margin-block-end: calc(24 * var(--rem));
                            font-size: calc(14 * var(--rem));
                            border: 1px solid var(--color__gray);
                            padding: 1rem;
                            border-radius: calc(4 * var(--rem));
                            .lottery__label {
                                font-size: calc(18 * var(--rem));
                                font-weight: 700;
                                display: block flex;
                                gap: calc(4 * var(--rem));
                                align-items: center;
                                margin-block-end: calc(8 * var(--rem));
                                margin-inline-start: calc(-4 * var(--rem));
                                background-color: var(--color__gray);
                                padding: 1rem;
                                margin-inline: -1rem;
                                margin-block-start: -1rem;
                                color: #fff;
                                &::before {
                                    content: "";
                                    width: var(--icon-size);
                                    height: var(--icon-size);
                                    background-color: currentColor;
                                    mask-image: var(--icon-lottery);
                                    mask-repeat: no-repeat;
                                    mask-size: contain;
                                    mask-position: center;
                                }
                                & + p {
                                    margin-block-end: calc(4 * var(--rem));
                                }
                            }
                        }
                        .deliveryShortestDay {
                            margin-block: calc(24 * var(--rem));
                        }
                        .attention {
                            font-size: calc(14 * var(--rem));
                            &.deliveryShortestDay {
                                border: 1px solid var(--color__alert);
                                padding: 1rem;
                                color: var(--color__alert);
                            }
                        }
                    }
                    #purchase_form {
                        #itemSelect {
                            display: grid;
                            gap: calc(24 * var(--rem));
                            /*共通*/
                            select {
                                font-size: 1rem;
                                    border: 1px solid #000;
                                    border-radius: calc(8 * var(--rem));
                                    width: 100%;
                                    padding: calc(8 * var(--rem));
                                    margin-bottom: 0;
                            }
                            .itemOptionElement {
                                display: grid;
                                gap: calc(8 * var(--rem));
                                .itemOption__name {
                                    font-weight: 700;
                                }
                            }
                            .purchaseElement {
                                display: flex;
                                justify-content: end;
                                align-items: center;
                                gap: calc(8 * var(--rem));
                                label {
                                    font-weight: 700;
                                }
                                .amountSelect {
                                    max-width: 30%;
                                    align-items: center;
                                }
                            }
                        }
                        .purchaseButton {
                            margin-block-start: calc(24* var(--rem));
                            .purchaseButton__btn {
                                border: none;
                                width: 100%;
                                display: block flex;
                                justify-content: center;
                                align-items: center;
                                gap: calc(8 * var(--rem));
                                padding: 1rem calc(8 * var(--rem));
                                border-radius: calc(1px / 0);
                                font-weight: 700;
                                line-height: 1.45;
                                font-size: 1rem;
                                color: #fff;
                                background-color: var(--color__link--base);
                                &::before,
                                &::after {
                                    content: "";
                                    display: block;
                                    width: var(--icon-size);
                                    height: var(--icon-size);
                                    margin-inline: calc(2 * var(--rem));
                                }
                                &::after {
                                    background-color: currentColor;
                                    mask-image: var(--icon-dot);
                                    mask-repeat: no-repeat;
                                    mask-size: contain;
                                    mask-position: center;
                                    transition: var(--transition__base);
                                }
                                &.purchaseButton__btn--notApplying {
                                    background-color: var(--color__gray);
                                    &::after {
                                        background-color: unset;
                                    }
                                }
                                &.purchaseButton__btn--addToCart {
                                    display: block flex !important;
                                    &::after {
                                        mask-image: var(--icon-cart-add);
                                    }
                                    &.icon-lottery {
                                        &::after {
                                            mask-image: var(--icon-lottery);
                                        }
                                    }
                                }
                                &.purchaseButton__btn--requestRestockMail {
                                    &::after {
                                        mask-image: var(--icon-mail);
                                    }
                                }
                                &:hover {
                                    background-color: var(--color__link--base-hover);
                                    &::after {
                                        margin-inline: calc(4 * var(--rem)) 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
#item-gallery {
    > * + * {
        margin-block-start: calc(24 * var(--rem));
    }
    .item-slider-image {
        position: relative;
        .slider-image-list {
            aspect-ratio: 1 /1;
            position: relative;
            .image-list-item {
                width: 100%;
                aspect-ratio: 1 /1;
                background-color: var(--color__pry-bk);
                position: absolute;
                display: none;
                opacity: 0;
                transition: opacity 0.3s ease-in-out;
                &.active {
                    opacity: 1;
                }
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    object-position: center;
                }
            }
        }
        .prev,
        .next {
            --btn-size: calc(32 * var(--rem));
            position: absolute;
            top: 50%;
            border: none;
            width: var(--btn-size);
            height: var(--btn-size);
            mask-image: var(--icon-right-arrow-circle);
            mask-repeat: no-repeat;
            mask-size: contain;
            mask-position: center;
            background-color: rgba(210, 210, 210, .8);
            opacity: .8;
            padding: 0;
            &.hidden {
                display: none;
            }
        }
        .prev {
            left: 0;
            margin-left: calc(8 * var(--rem));
			transform: scaleX(-1);
        }
        .next {
            right: 0;
            margin-right: calc(8 * var(--rem));
        }
    }
    .item-slider-thumbs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: calc(24 * var(--rem));
        @media(min-width: 768px) {
            grid-template-columns: repeat(6, 1fr);
        }
        .item-slider-thumb {
            aspect-ratio: 1 /1;
            background-color: var(--color__pry-bk);
            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center;
            }
            &.active {
                img {
                    opacity: 0.6;
                }
            }
        }
    }
}

#postageInfo,
#irContainer {
    z-index: 70500;
}
#postageInfo {
    &.show {
        display: grid;
        place-items: center;
        background-color: unset;
        @media(min-width: 768px) {
            width: 100%;
            top: 0;
            left: 0;
            margin: 0;
            height: 100svh;
            box-shadow: unset;
        }
        .postage-info-wrap {
            background-color: #fff;
            margin: calc(24 * var(--rem));
            border-radius: 1rem;
            position: relative;
            .shippingInfoBlock {
                min-height: unset;
                .shippingInfo__inner {
                    height: unset;
                    .shippingInfo__tabArea {
                        .shippingInfo__intro {
                            font-size: 1rem;
                            line-height: 1.5;
                        }
                    }
                }
            }
        }
    }
}
#overlayBackground,
#irBG {
    z-index: 70000;
}

.overlayBackground {
	background-color: rgba(0, 0, 0, .8) !important;
}
.btn__item-page-cart {
    position: fixed;
    bottom: 0;
    left: 0;
    width: calc(100vw - 1rem);
    border-radius: 1rem 1rem 0 0;
	&::after {
		mask-image: var(--icon-right-arrow-mini);
		transform: rotate(-90deg);
		margin-inline: 0;
		margin-block: calc(2 * var(--rem));
	}
	&:hover {
		&::after {
			margin-inline: 0;
			margin-block: 0 calc(4 * var(--rem));
		}
	}
    @media(min-width: 768px) {
        display: none;
    }
}