@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}

.snow-container {
    width: 100%;
    height: 100vh;
    background-image: url(img/shirakawago.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.snow-container p {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 20px;
    font-size: 0.8rem;
    font-family: 'Noto Sans JP', sans-serif;
}

.snow {
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    /* animationのlinearを指定することで縦に雪が降る */
    /* 2つのアニメーションを適用: 落下(snowFall) と 横揺れ(snowSwing) */
    /* 横揺れは「行って帰ってくる」ように alternate を指定 */
    animation: snowFall 10s linear forwards, 
               snowSwing 3s ease-in-out infinite alternate;
}

/* snowクラスのsnowFallの雪の動きを指定 */
@keyframes snowFall {
    0% { 
        top: -10px; opacity: 0; 
    }
    10% { 
        opacity: 0.7; 
    }
    90% { 
        opacity: 0.7; 
    }
    100% { 
        top: 100vh; opacity: 0; 
    }
    
}

/* snowクラスのsnowSwingの雪の動きを指定 */
@keyframes snowSwing {
    0% { 
        transform: translateX(-30px); 
    }
    100% { 
        transform: translateX(30px); 
    }
}




/* レスポンシブ */
@media  screen and(max-width: 780px) {
    /* 背景画像をスマホ用に調整 */
    .snow-container {
        background-size: contain;
    }

    .snow-container p {
    font-size: 0.6rem;
    }
}