/* 読み込んだフォントを全体に適用します */
body {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #5a4441; /* ブラウン系の文字色 */
}

/* カスタムカラー */
:root {
    --color-bg-main: #FEFBF6; /* メインの背景色 */
    --color-accent: #FFC94A; /* アクセントの黄色 */
    --color-accent-dark: #FFB627; /* アクセントの濃い黄色 */
    --color-text-brown: #5a4441;
    --color-green: #C6EBC5;
    --color-blue: #A1C2F1;
    --color-pink: #FFC0CB;
}

.bg-main { background-color: var(--color-bg-main); }
.bg-accent { background-color: var(--color-accent); }
.hover\:bg-accent-dark:hover { background-color: var(--color-accent-dark); }

/* 波形のセクション区切り */
.wave-top {
    position: relative;
    /* このクラス自体は背景色を持たないように変更 */
}
.wave-top::before {
    content: '';
    position: absolute;
    top: -60px; /* 波の高さ */
    left: 0;
    right: 0;
    height: 60px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3e%3cpath fill='%23ffffff' fill-opacity='1' d='M0,128L80,144C160,160,320,192,480,186.7C640,181,800,139,960,128C1120,117,1280,139,1360,149.3L1440,160L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z'%3e%3c/path%3e%3c/svg%3e");
    background-size: cover;
    transform: translateY(5px);
}

/* ふわふわ動くアニメーション */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.anim-float {
    animation: float 3s ease-in-out infinite;
}

/* 背景色がじんわり動くアニメーション */
@keyframes animated-gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* アニメーションを適用する背景クラス */
.bg-animated-yellow {
    /* 淡い黄色系のグラデーション */
    background: linear-gradient(45deg, #fffacd, #fef9e7, #fffacd);
    background-size: 200% 200%;
    animation: animated-gradient 20s ease infinite;
}

.bg-animated-blue {
    /* 淡い青色系のグラデーション */
    background: linear-gradient(45deg, #e6f7ff, #f0faff, #e6f7ff);
    background-size: 200% 200%;
    animation: animated-gradient 20s ease infinite;
}

.bg-animated-pink {
    /* 淡いピンク系のグラデーション */
    background: linear-gradient(45deg, #fff0f5, #fff5f7, #fff0f5);
    background-size: 200% 200%;
    animation: animated-gradient 20s ease infinite;
}