/* カスタムスタイル */
body {
    background-color: #fdfcfb;
    color: #333;
}

.hero-pattern {
    background-color: #fdfcfb;
    background-image: radial-gradient(#fdba74 1px, transparent 1px);
    background-size: 20px 20px;
}

.blob-shape {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: morph 8s ease-in-out infinite alternate;
}

@keyframes morph {
    0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    100% { border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%; }
}

/* セクションのフェードインアニメーション用 */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.appear {
    opacity: 1;
    transform: translateY(0);
}