@charset "UTF-8";

/* 202410 WA 離脱防止ポップアップ */
.popup_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    z-index: -1;
    transition: .3s;
}
.popup_wrapper.active {
    opacity: 1;
    z-index: 9999;
}
.popup_close {
    cursor: pointer;
    border-radius: 9999px;
    width: 48px;
    height: 48px;
    background-color: #707070;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(260px, -200px);
}

.popup_close::before,
.popup_close::after {
    content: '';
    width: 16px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
}

.popup_close::before {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.popup_close::after {
    transform: translate(-50%, -50%) rotate(45deg);
}
.popup_wrapper picture img {
    cursor: pointer;
    width: 90%;
    max-width: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
    .popup_close {
        top: 50%;
        left: 90%;
        transform: translate(-25%, -34vw);
        width: max(30px, 8vw);
        height: max(30px, 8vw);
    }
    
    .popup_close::before,
    .popup_close::after {
        width: max(10px, 3vw);
        height: 2px;
    }
    .popup_wrapper picture img {
        max-width: none;
    }
}