body{

/* 泡全体 */
.bubbles{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:hidden;
}

/* 泡 */
.bubbles span{
    position:absolute;
    bottom:-100px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:rgba(255,255,255,0.4);
    animation:float 12s linear infinite;
}

/* 泡の位置と大きさを少し変える */
.bubbles span:nth-child(1){
    left:10%;
}

.bubbles span:nth-child(2){
    left:25%;
    width:30px;
    height:30px;
    animation-duration:15s;
}

.bubbles span:nth-child(3){
    left:40%;
    width:15px;
    height:15px;
}

.bubbles span:nth-child(4){
    left:55%;
    animation-duration:18s;
}

.bubbles span:nth-child(5){
    left:70%;
    width:25px;
    height:25px;
}

.bubbles span:nth-child(6){
    left:82%;
}

.bubbles span:nth-child(7){
    left:90%;
    animation-duration:14s;
}

.bubbles span:nth-child(8){
    left:97%;
    width:12px;
    height:12px;
}
	margin:0;
    font-family:sans-serif;
    color:white;

    background:linear-gradient(
        to bottom,
        #c9f3ff 0%,
        #8bd3ff 20%,
        #4ba3e2 40%,
        #1f5faa 65%,
        #0b2e66 85%,
        #03152d 100%
    );
    }

h1{
    text-align:center;
    color:#0077aa;
    margin-bottom:50px;
}
h2{
    text-align:center;
    color:#015980;
    margin-bottom:50px;
}

.memory{
    display:flex;
    align-items:center;
    gap:100px;
    margin:120px 0;
}
.last{
    display:flex;
    align-items:center;
    gap:100px;
    margin:120px 0;
}

.memory img{
    width:500px;
    border-radius:15px;
    box-shadow:0 5px 10px rgb(60, 78, 108);
}

.text{
    flex:1;
}

.text h2{
    color:#34b46f;
}
.text p{
    font-size:40px; 
}

.reverse{
    flex-direction:row-reverse;
}
.end{
    text-align:center;
    padding:100px 20px;
}

.end img{
    width:500px;
    max-width:90%;
    border-radius:20px;
    box-shadow:0 8px 20px rgba(0,0,0,0.4);
    margin-bottom:30px;
}

.end h2{
    font-size:40px;
    color:white;
}
@keyframes float{

    0%{
        transform:translateY(0) translateX(0);
        opacity:0;
    }

    20%{
        opacity:1;
    }

    50%{
        transform:translateY(-50vh) translateX(20px);
    }

    100%{
        transform:translateY(-110vh) translateX(-20px);
        opacity:0;
    }

}
.back-btn{
    display:inline-block;
    margin-top:30px;
    padding:15px 30px;
    background:#0077aa;
    color:white;
    text-decoration:none;
    border-radius:10px;
    font-size:24px;
}

.back-btn:hover{
    background:#005f88;
}