body {
    background-color: #181717;
}

.tukue {
    margin-top: 30vw;
    margin-left: 10vw;
    width: 40vw;
}

.rousoku {
    margin-left: -33vw;
    margin-bottom: 22vw;
    width: 25vw;

}

.ana2 {
    margin-left: 40vw;
    margin-top: -30vw;
    width: 40vw;
    margin-bottom: 10vw;
}


.hon {
    margin-left: 65vw;
    
    
    width: 20vw;
}

/* style3.css の修正 */

/* ==================================== */
/* .te-l の初期設定 (左から飛び出す) */
/* ==================================== */
.te-l{
    width: 70vw;
    margin-top: 20vw;
    /* 初期位置: 画面外の左 */
    transform: translateX(-100vw);
    opacity: 0;
    
    transition: transform 0.3s ease-out, opacity 0.5s ease-in 0.1s; /* 移動を0.3秒、不透明度を0.5秒、遅延を0.1秒に調整 */
}

/* ==================================== */
/* .te-r の初期設定 (右から飛び出す) */
/* ==================================== */
.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.1s; /* 移動を0.3秒、不透明度を0.5秒、遅延を0.1秒に調整 */
}

/* ==================================== */
/* .fade-in 時の共通スタイル (画面内へ移動) */
/* ==================================== */
/* JavaScriptで.fade-inクラスが付与されたら、元の位置(transform: 0)に戻る */
.te-l.fade-in,
.te-r.fade-in {
    /* 本来の位置に戻す (画面内へ移動) */
    transform: translateX(0);
    opacity: 1;
}

/* ... 既存の他のスタイル ... */