@charset 'utf-8';

/*↓ポップアップ↓*/
.open-popup { cursor:pointer;}
.popup {
position:fixed; z-index:10;
display:flex; justify-content:center; align-items:center;/* 要素を画面中央に */
width:100vw; height:100vh; overflow:hidden;
opacity:0; visibility:hidden;
transition:opacity 0.25s, visibility 0.25s;
}
.popup.show { opacity:1; visibility:visible;}
.popup .back { position:absolute; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.8);}
.popup .item { position:relative; z-index:9;}
.popup .exit {/* 閉 */
position:absolute; z-index:99; right:-8px; top:-8px;
display:block; width:32px; height:32px;
background:rgba(0,0,0,0.75);
border:solid 2px #FFF;
animation:popup-exit 0.5s infinite alternate;
cursor:pointer;
}
@keyframes popup-exit { to{ transform:scale(1.2)}}
.popup .exit:before {
position:absolute; left:calc(50% - 8px); top:calc(50% - 8px);
display:block; width:16px; height:16px;
background:url('../img/icon-cross.png') center center / contain;
content:'';
}
.popup img { max-width:calc(100vw - 64px); max-height:calc(100vh - 64px); width:100%; height:100%;}
.popup iframe { width:640px; height:400px;}
@media screen and ( max-width:768px ){
.popup img { max-width:calc(100vw - 32px); max-height:calc(100vh - 32px);}
}
@media screen and ( max-width:480px ){
.popup iframe { width:calc(100vw - 32px); height:calc((100vw - 32px)/16*10);}
}
/*↑ポップアップ↑*/