@charset "utf-8";

/*********************

    離脱時ポップアップ

    style.css とは別ファイルにしています。既存のスタイルには影響しません。

    見出し・本文・リボン・右上の✕は、すべて背景画像に入っています。
      images/common/popup__bg.png（578 × 609）
    ダウンロード／あとでの2つのボタンだけを、その上に重ねています。
    位置はカンプ実測値を画像に対する % で指定しているため、
    ポップアップが拡大・縮小しても絵とズレません。

*********************/

.exitpop {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.exitpop.is__show {
    display: block;
}

/* ポップアップを開いているあいだは背面をスクロールさせない */
body.is__exitpop {
    overflow: hidden;
}


/* --- 背景の黒い膜 --- */

.exitpop__overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.72);
    cursor: pointer;
}


/* --- 本体（背景画像そのもの） --- */

.exitpop__box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    aspect-ratio: 578 / 609;
    background-image: url(./images/common/popup__bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    animation: exitpop__in 0.32s ease-out both;
}

@keyframes exitpop__in {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

@media (min-width: 751px) {
    .exitpop__box {
        width: 694rem;
        /* 画面の高さが足りないときは、縦横比を保ったまま縮める */
        width: min(694rem, 92vw, calc(88vh * 578 / 609));
    }
}

@media (max-width: 750px) {
    .exitpop__box {
        width: 660rem;
        width: min(660rem, calc(84vh * 578 / 609));
    }
}


/* 画像内の文字を読み上げ用に置いたもの（画面には出さない） */
.exitpop__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}


/* --- 右上の✕（絵は背景画像にあるので、押せる範囲だけを重ねる） --- */

.exitpop__x {
    position: absolute;
    left: 91.5%;
    top: 1.4%;
    width: 8%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}


/* --- ダウンロード／あとで --- */

.exitpop__btn {
    position: absolute;
    top: 80.6%;
    height: 8.7%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 5rem;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: opacity 0.3s;
}

.exitpop__btn:hover {
    opacity: 0.8;
}

/* 位置・幅はカンプ実測（画像の幅に対する割合） */
.exitpop__btn--download {
    left: 20%;
    width: 33.4%;
    background-color: #28b2b2;
}

.exitpop__btn--later {
    left: 56.5%;
    width: 25.7%;
    background-color: #807677;
}

@media (min-width: 751px) {
    .exitpop__btn { font-size: 29rem; }
}

@media (max-width: 750px) {
    .exitpop__btn { font-size: 28rem; }
}