body {
        margin: 0;
    }

    body {
        background-color: #292725;
    }

    .yukasita {
        width: 100vw;
        margin-left: -2vw;
    }

    .bunsyou {
        font-size: 4vw;
        color: #fff;
        text-align: center;
    }

    .kurohaikei2 {
        width: 98.5vw;
    }

    .bunsyou2 {
        font-size: 4vw;
        color: #fff;
        text-align: center;

        margin-top: -400vw;
    }

    /* style_kakushi.css に追記 */





    




    .te-l {
    
        width: 70vw;
        margin-top: 20vw; 
    
    
        transform: translateX(-100vw);
        opacity: 0;
    
    
        transition: transform 0.3s ease-out, opacity 0.5s ease-in 0.3s; 
    }


    .te-r {
    
        width: 70vw;
        margin-left: 30vw;
        margin-top: -60vw; 
    
    
        transform: translateX(100vw);
        opacity: 0;
    
    
        transition: transform 0.3s ease-out, opacity 0.5s ease-in 0.3s; 
    }


    .te-l.fade-in,
    .te-r.fade-in {
        transform: translateX(0);
        opacity: 1;
    }
    



    .bunsyou3 {
        margin-top: 20vw;
        font-size: 4vw;
        color: #fff;
        text-align: center;
    }


    
    

    .chi {
        width: 70vw;
        margin-left: 15vw;
        margin-top: 20vw;
    
   
    
    
        opacity: 0;
    
        transform: scale(0.7); 
    
    
        transition: opacity 0.5s ease-out, transform 0.01s ease-out;
    }
    







/* ▼ 新規追加: アニメーション開始時 (.fade-in クラスが付与された時) ▼ */
    .chi.fade-in {
    /* 素早く出現 */
        opacity: 1;
    /* 元のサイズに戻る */
        transform: scale(1);
    }

    .bunsyou4 {
        font-size: 4vw;
        color: #fff;
        text-align: center;
        margin-top: 20vw;
    }

    .bunsyou5 {
        font-size: 4vw;
        color: #fff;
        text-align: center;
        margin-top: 40vw;
    }

    .bunsyou6 {
        font-size: 4vw;
        color: #fff;
        text-align: center;
        margin-top: 100vw;
    }

    .mado {
        width: 30vw;
        margin-left: 55vw;
        margin-top: 20vw;
        margin-bottom: -8.8vw;
    }

    

    /* ... (既存の .obakenote の記述を探し、下記のように変更・追記) ... */
    .obakenote{
        width: 5vw;
        margin-left: 75vw;

        opacity: 0; 
        /* 初期位置: Y軸方向に10vw下にずらす（画面外の下端にいるように見せる） */
        transform: translateY(0.5vw); 
    
        /* トランジション: opacityとtransformの両方に1秒を適用 */
        transition: opacity 1s ease-out, transform 1s ease-out;
    }

    /* ▼ 新規追加: アニメーション開始時 (.fade-in クラスが付与された時) ▼ */
    .obakenote.fade-in {
        opacity: 1; /* 出現 */
        /* 最終位置: 元の位置 (Y軸0) に戻る */
        transform: translateY(0);
    }



    .kazoku2 {
        width: 70vw;
        margin-top: vw;
        margin-left: 10vw;
    }

    
    .button {
        font-family: "Zen Kurenaido", sans-serif;
        text-decoration: none;
        color: #fff;
        font-size: 4vw;
        margin-left: 75vw;
        margin-bottom: 20vw;
    }
    
    .button:hover {
        color: rgb(147, 12, 33);
    }