/* ===========================
   リセット
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    font-family:
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;

    color:white;

    background:#000;

}

/* ===========================
   背景
=========================== */

#background{

    position:fixed;

    inset:0;

    background:
        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.45)
        ),
        url("images/background.jpg");

    background-size:cover;

    background-position:center;

    z-index:-1;

}

/* ===========================
   共通画面
=========================== */

.screen{

    width:100vw;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}

.hidden{

    display:none;

}

/* ===========================
   ガラスカード
=========================== */

.glass{

    width:min(90%,650px);

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.2);

    border-radius:24px;

    padding:40px;

    text-align:center;

    box-shadow:
        0 10px 30px rgba(0,0,0,.3);

}

/* ===========================
   ボタン
=========================== */

button{

    margin-top:20px;

    padding:14px 35px;

    border:none;

    border-radius:999px;

    background:#ff5c93;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    transform:scale(1.05);

}

/* ===========================
   クイズ
=========================== */

#answers{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-top:30px;

}

#result{

    margin-top:25px;

}

/* ===========================
   写真
=========================== */

.photo{

    position:fixed;

    bottom:-180px;

    width:130px;

    background:white;

    padding:8px 8px 22px;

    border-radius:4px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.3);

    pointer-events:none;

    z-index:1000;

}

.photo img{

    width:100%;

    display:block;

    border-radius:2px;

}

/* ===========================
   ハート
=========================== */

.heart{

    position:fixed;

    bottom:-60px;

    pointer-events:none;

    z-index:999;

}

/* ===========================
   演出エリア
=========================== */

#effectArea{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:998;

}

/* ===========================
   スライドショー
=========================== */

#slideshow{

    margin-top:25px;

}

#slideshow img{

    width:100%;

    border-radius:15px;

}

/* ===========================
   アニメーション
=========================== */

@keyframes photoFloat{

    0%{

        opacity:0;

        transform:
            translateY(0)
            rotate(-10deg);

    }

    15%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:
            translateY(-130vh)
            rotate(12deg);

    }

}

@keyframes heartFloat{

    0%{

        opacity:0;

        transform:
            translateY(0)
            scale(.5);

    }

    15%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:
            translateY(-120vh)
            scale(1.4);

    }

}

/* ===========================
   スマホ
=========================== */

@media(max-width:768px){

    .glass{

        padding:25px;

    }

    .photo{

        width:95px;

    }

}

.sparkle{

    position:fixed;

    pointer-events:none;

    z-index:1001;

}

.confetti{

    position:fixed;

    pointer-events:none;

    z-index:1002;

}

#letter{

    line-height:1.9;

    margin-top:20px;

    white-space:normal;

}

#slideshow{

    margin-top:30px;

    min-height:250px;

}

#slideshow img{

    width:100%;

    border-radius:18px;

    display:block;

}