@charset "utf-8";
.kaitori-popup .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99; background: rgba(0,0,0,0.6); display: flex; justify-content: center; opacity: 0; transition: all 0.5s;}
.kaitori-popup.open .overlay {opacity: 1;}

.kaitori-popup .close-button { position: absolute; background-color: #fff; border-radius: 3px; color: #959595; padding: 1px 5px; top: -20px; right: 10px; font-weight: 700; cursor: pointer; font-size: 17px; width: 27px; height: 27px; line-height: 20px;}
.kaitori-popup .container { padding: 27px 12px; margin:0 20px; border-radius: 4px; box-sizing: border-box; position: fixed; z-index:3; opacity: 0; top:50%; transform: translate(0,-50%); transition: all 0.5s;}
.kaitori-popup.open .container {opacity: 1;}
.kaitori-popup .kaitori-popup-content {background-color: #fff; position: relative; list-style: none; padding: 0; display: block; max-height:100%; border-radius:5px; max-width: 640px;}
.kaitori-popup .kaitori-popup-content a {transition: all 0.5s;}
.kaitori-popup .kaitori-popup-content a:hover {opacity: 0.8;}
.kaitori-popup .kaitori-popup-content a img {border-radius: 5px; object-fit: cover; width:100%}
.kaitori-popup .kaitori-popup-content:has(a[data-close-modal]) {cursor: pointer;}
.kaitori-popup .kaitori-popup-content a[data-close-modal] {padding:10px;}


@media screen and (min-width:769px) {
    /*pc only*/
    .kaitori-popup .kaitori-popup-content a:has(img) {height:640px}
    .kaitori-popup .kaitori-popup-content a img {height:640px}
}

@media screen and (max-width:768px){
    /*sp only*/
    .kaitori-popup .kaitori-popup-content a:has(img) {height:480px}
    .kaitori-popup .kaitori-popup-content a img {height:480px}
}