.main {
    width: auto;
    height: auto;
    background-color: #e6cde3;
    margin-top: 27px; /* ヘッダーの高さ分を上に追加 */
    padding-top: 8px;
    display: flex;
    flex-direction: column; /* 縦方向に配置 */
    justify-content: center; /* 上下中央揃え */
    align-items: center; /* 左右中央揃え */
}

.main-image {
    max-width: 60%; /* 画像の幅を80%に調整 */
    height: auto; /* 縦横比を維持 */
    margin-bottom: 10vh; /* 画像同士の間隔 */
}


.sub-image {
    max-width: 60%; /* 画像の幅を80%に調整 */
    height: auto; /* 縦横比を維持 */
    margin-bottom: 10vh; /* 画像同士の間隔 */
}

.aem-desc {
    margin-bottom: 10vh; /* テキストと画像の間隔 */
    text-align: center; /* テキストを中央揃え */
    padding: 3vh; /* パディングを追加 */
    background-color: #fdeff2;
}

/* フェードインアニメーションの初期状態 */
.fade-in {
    opacity: 0; /* 初期状態で透明 */
    transform: translateY(20px); /* 少し下にずらす */
    transition: opacity 2s ease, transform 2s ease; /* スムーズな遷移 */
}

/* フェードインアニメーションが適用された状態 */
.fade-in.visible {
    opacity: 1; /* 完全に表示 */
    transform: translateY(0); /* 元の位置に戻す */
}