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

body {
    display: flex;
    min-height: 100vh;
    justify-content: center;
}

.container {
    width: 100%;
    height: 200px;
    /* height: 555x; */
    margin-top: 100px;
    background: #3586ff;
    position: relative;
}

.wave {
    width: 100%;
    height: 100px;
    /* height: 100%; */
    background: url('images/wave.png');
    /* background: url('images/aki-impact.jpg'); */
    background-size: 1000px 100px;
    /* background-size: 508px 555px; */
    /* background-repeat: no-repeat; */
    position: absolute;
    top: -100px;
}

/* ここから動く波 */
.wave1 {
    opacity: 0.2;
    animation: wave 3s linear infinite;
}

.wave2 {
    opacity: 0.4;
    animation: wave 4s linear infinite;
}

.wave3 {
    opacity: 0.6;
    animation: wave 5s linear infinite;
}

.wave4 {
    opacity: 0.8;
    animation: wave 6s linear infinite;
}

@keyframes wave {
    0% {
        background-position: 1000px;
    }
    100% {
        background-position: 0;
    }
}

/* ここから動くパンくん */
/* パンくんの基本スタイル */
.pan {
    width: 100px; /* パンくんの横幅 */
    height: 100px; /* パンくんの縦幅 */
    background: url('images/pan.png') no-repeat center/contain;
    position: absolute;
    top: -120px; /* 波の上にくるように調整 */
    z-index: 5; /* 波より手前に出す場合 */
}

/* 個別の配置とアニメーション速度 */
.pan1 {
    left: 10%;
    animation:
        float 3s ease-in-out infinite,
        move 10s ease-in-out infinite;
}
.pan2 {
    left: 30%;
    animation:
        float 4s ease-in-out infinite,
        move 8s ease-in-out infinite;
}
.pan3 {
    left: 60%;
    animation:
        float 3.5s ease-in-out infinite,
        move 9s ease-in-out infinite;
}
.pan4 {
    left: 90%;
    animation:
        float 5s ease-in-out infinite,
        move 7s ease-in-out infinite;
}

/* 縦にプカプカ揺れるアニメーション */
@keyframes float {
    0%,
    100% {
        transform: translateY(0) rotate(-5deg);
    }
    50% {
        transform: translateY(15px) rotate(5deg); /* 15px分沈む */
    }
}

/* 横にゆっくり流れるアニメーション（お好みで） */
@keyframes move {
    0% {
        margin-left: -100px;
    }
    50% {
        margin-left: 100px;
    }
    100% {
        margin-left: -100px;
    }
}