.button {
    display: block;
    width: fit-content;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #8bd321;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.main-image {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  opacity: 0;
  filter: blur(10px);
  animation: fadeInClear 1.5s ease-out forwards; /* 複数のアニメーションを同時に適用 */
  animation-delay: 0.7s; /* アニメーションの遅延 */
}


@keyframes fadeInClear {
    0% {
        opacity: 0;
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}



@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
    .service-container {
        flex-direction: column; /* 縦並びに変更 */
        align-items: flex-start; /* 左寄せ */
    }

    .service-item-image {
        width: 100%; /* 幅を100%に設定 */
        max-width: none; /* 最大幅を解除 */
    }
}

/* アニメーションの定義 */
@keyframes float {
    0% {
        transform: translateY(0); /* 初期位置 */
    }
    50% {
        transform: translateY(-10px); /* 浮き上がる位置 */
    }
    100% {
        transform: translateY(0); /* 元の位置に戻る */
    }
}

.typewriter-text {
    display: inline-block; /* インラインブロックしてアニメーションを適用 */
    animation: typing 4s steps(40, end), blink-caret 0.75s step-end infinite; /* タイピングアニメーションとキャレットの点滅 */
}

/* タイピングアニメーション */
@keyframes typing {
    from {
        width: 0; /* 初期幅は0 */
    }
    to {
        width: 100%; /* 最終的に全幅 */
    }
}

/* キャレットの点滅 */
@keyframes blink-caret {
    from, to {
        border-right-color: transparent; /* 点滅の初期状態 */
    }
    50% {
        border-right-color: black; /* 点滅の状態 */
    }
}

/* キャレットのスタイル */
.typewriter-text::after {
    content: ''; /* キャレットを表示 */
    border-right: 2px solid black; /* キャレットのスタイル */
    margin-left: 2px; /* キャレットの位置調整 */
}

.overlay-content {
    position: absolute;
    text-align: center;
    color: white;
    opacity: 0; /* 初期状態は透明 */
    animation: fadeIn 1s ease-out forwards; /* アニメーションを適用 */
    animation-delay: 0.5s; /* アニメーションの遅延 */
}

@keyframes fadeIn {
    from {
        opacity: 0; /* 初期状態は透明 */
    }
    to {
        opacity: 1; /* 最終的に不透明 */
    }
}


.grid-item {
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(20px); /* 初期位置を下に設定 */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* アニメーションのトランジション */
}

.grid-item.visible {
    opacity: 1; /* 最終的に不透明 */
    transform: translateY(0); /* 元の位置に戻る */
}

@keyframes fadeInUp {
    from {
        opacity: 0; /* 初期状態は透明 */
        transform: translateY(20px); /* 下から上に移動 */
    }
    to {
        opacity: 1; /* 最終的に不透明 */
        transform: translateY(0); /* 元の位置に戻る */
    }
}

.content-section {
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(20px); /* 初期位置を下に設定 */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* アニメーションのトランジション */
}

.content-section.visible {
    opacity: 1; /* 最終的に不透明 */
    transform: translateY(0); /* 元の位置に戻る */
}

.site-logo {
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(20px); /* 初期位置を下に設定 */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* アニメーションのトランジション */
}

.site-logo.visible {
    opacity: 1; /* 最終的に不透明 */
    transform: translateY(0); /* 元の位置に戻る */
}
/* メイントレーナー*/
.trainer-container {
    display: grid; /* グリッドレイアウトを使用 */
    grid-template-columns: repeat(3, 1fr); /* 3列に設定 */
    gap: 20px; /* 各カラムの間にスペースを追加 */
    margin: 20px 0; /* 上下のマージンを追加 */
}

.team-member {
    border: 1px solid #ccc; /* ボーダーを追加 */
    border-radius: 8px; /* 角を丸くする */
    padding: 15px; /* 内側の余白を追加 */
    text-align: center; /* テキストを中央揃え */
    background-color: #f9f9f9; /* 背景色を追加 */
    transition: box-shadow 0.3s; /* ホバー時の影のトランジション */
}

.team-member:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* ホバー時に影を追加 */
}
.trainer-image {
    width: 100%; /* 画像の幅を100%に設定 */
    height: auto; /* 高さを自動調整 */
    border-radius: 8px; /* 角を丸くする */
    margin: 10px 0; /* 上下のマージンを追加 */
}
.play-image {
    width: 60%; /* 画像の幅を100%に設定 */
    max-width: 1000px;
    height: auto; /* 高さを自動調整 */
    border-radius: 8px; /* 角を丸くする */
    margin: 10px 20%; /* 上下のマージンを追加 */
}