.foggy-wrapper {
            position: relative;
            display: inline-block;
            overflow: hidden;
            position: absolute;
            bottom: -7px;
            left: 10%;
        }

        .foggy-image {
            width: 630px;
            height: auto;
            animation: foggyFadeIn 1s ease-out forwards;
        }

        @keyframes foggyFadeIn {
            0% {
                filter: blur(20px);
                opacity: 0;
            }
            50% {
                filter: blur(10px);
                opacity: 0.5;
            }
            100% {
                filter: blur(0);
                opacity: 1;
            }
        }

        /* 霧のエフェクト（複数レイヤー） */
        .fog {
            position: absolute;
            top: -50%;
            left: -50%;
            width: 250%;
            height: 250%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%);
            opacity: 0.6;
            filter: blur(30px);
            animation: fogMove 8s infinite linear alternate;
        }

        .fog.fog2 {
            animation: fogMove2 10s infinite linear alternate;
            opacity: 0.4;
        }

        @keyframes fogMove {
            0% { transform: translate(-30px, -30px) scale(1.2); }
            100% { transform: translate(30px, 30px) scale(1.3); }
        }

        @keyframes fogMove2 {
            0% { transform: translate(30px, -30px) scale(1.1); }
            100% { transform: translate(-30px, 30px) scale(1.2); }
        }

/* 終了後.fogを消す */
.foggy-wrapper.done .fog,
.foggy-wrapper.done .fog2 {
    opacity: 0;
    transition: opacity 1s ease;
}

@media screen and (max-width: 768px) {
	.foggy-wrapper {
		left: 0%;
	}
	.foggy-image {
            width: 100%;
	}
}