@font-face {
    font-family: 'Marumonica';
    src: url('marumonica.ttf') format('truetype');
  }
  

/* 背景グラデーション＋中央配置 */
body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(120deg, #ff9a9e, #fad0c4, #a18cd1);
    background-size: 400% 400%;
    animation: gradientShift 10s ease infinite;
    font-family: 'Marumonica', sans-serif;
}

/* 中央の文字 */
.center-text {
    font-size: 100px;   /* 文字サイズ自由に変更可 */
    font-weight: bold;   /* 太字 */
    text-align: center;
}

/* spanに揺れ＋色変化アニメーション */
.center-text span {
    display: inline-block;
    animation: float 1s infinite ease-in-out, colorShift 3s infinite alternate;
}

/* 文字ごとにアニメーション遅延をつける */
.center-text span:nth-child(1) { animation-delay: 0s, 0s; }
.center-text span:nth-child(2) { animation-delay: 0.1s, 0.1s; }
.center-text span:nth-child(3) { animation-delay: 0.2s, 0.2s; }
.center-text span:nth-child(4) { animation-delay: 0.3s, 0.3s; }
.center-text span:nth-child(5) { animation-delay: 0.4s, 0.4s; }

/* 上下に揺れるアニメーション */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* 文字の色を変化させるアニメーション */
@keyframes colorShift {
    0%   { color: #ff595e; }
    25%  { color: #ffca3a; }
    50%  { color: #8ac926; }
    75%  { color: #1982c4; }
    100% { color: #6a4c93; }
}

/* 背景グラデーションのスライド */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}