/* 雲のコンテナ */
.clouds {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -1; /* 背景に配置 */
    overflow: hidden; /* はみ出した部分を隠す */
    pointer-events: none; /* クリックを無効化 */
}

/* 雲のスタイル */
.cloud {
    position: absolute;
    background: url('../../img/background/cloud1.png') no-repeat center/contain;
    width: 700px;
    height: 600px;
    opacity: 0.8;
    will-change: transform; /* パフォーマンス向上のため追加 */
}


/* 各雲のアニメーション */
.cloud1 {
    top: 5%; /* 最上部に配置 */
    left: -50vw; /* 画面外から開始 */
    animation: moveClouds 40s linear infinite; /* 40秒で移動 */
}

.cloud2 {
    top: 20%; /* cloud1の下に配置 */
    left: -80vw; /* 画面外から開始 */
    animation: moveClouds 50s linear infinite; /* 50秒で移動 */
}

.cloud3 {
    top: 35%; /* cloud2の下に配置 */
    left: -30vw; /* 画面外から開始 */
    animation: moveClouds 60s linear infinite; /* 60秒で移動 */
}

.cloud4 {
    top: 50%; /* cloud3の下に配置 */
    left: -90vw; /* 画面外から開始 */
    animation: moveClouds 70s linear infinite; /* 70秒で移動 */
}

.cloud5 {
    top: 65%; /* cloud4の下に配置 */
    left: -70vw; /* 画面外から開始 */
    animation: moveClouds 80s linear infinite; /* 80秒で移動 */
}

.cloud6 {
    top: 80%; /* cloud5の下に配置 */
    left: -10vw; /* 画面外から開始 */
    animation: moveClouds 65s linear infinite; /* 65秒で移動 */
}

.cloud7 {
    top: 95%; /* 最下部に配置 */
    left: -60vw; /* 画面外から開始 */
    animation: moveClouds 55s linear infinite; /* 55秒で移動 */
}

/* 雲の移動アニメーション */
@keyframes moveClouds {
    from {
        transform: translateX(0); /* 初期位置（画面外） */
    }
    to {
        transform: translateX(150vw); /* 画面を通過して画面外へ */
    }
}

@media (max-width: 1200px) {
    .cloud2, .cloud4 {
        display: none; /* 1200px以下ではcloud6とcloud7を非表示 */
    }
}

@media (max-width: 800px) {
     .cloud5 {
        display: none; /* 800px以下ではcloud4とcloud5も非表示 */
    }
}

@media (max-width: 500px) {
     .cloud7 {
        display: none; /* 500px以下ではcloud2とcloud3も非表示 */
    }
}