body, html {
    height: 100%; /* 親要素の高さを100%に設定 */
    margin: 0; /* デフォルトのマージンを削除 */
    background-color: black;
    
}

.main1 {
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    height: 100%; /* 親要素の高さを継承 */
    flex-direction: column; /* 縦方向に配置 */
    background-color: black;
    background-image: url("../res/bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.bg_blue {
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    width: 100%;
    height: 100%; /* 親要素の高さを継承 */
    flex-direction: column; /* 縦方向に配置 */
    background-color: #2f5bf9;
    overflow: hidden;
    /*スクロール禁止*/
}


.img_logo img {
    max-width: 100%; /* 画像が親要素を超えないようにする */
    max-height: 100%; /* 画像が親要素を超えないようにする */
    width: auto; /* 幅を自動調整 */
    height: auto; /* 高さを自動調整 */
    z-index: 1;
}


@keyframes tada {
    0% {
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}


.tada {
    display: inline-block;
    animation: tada 1s ease 1;
    animation-delay: 0s;
}


@keyframes anim_offset_V_80 {
    0% {
        transform: translateY(0);
        /*
        margin-top: 0;
        opacity: 100%;
        */
    }

    100% {
        transform: translateY(30vh);
        /*
        margin-top: 50vh;
        opacity: 0%;

        */
    }
}

.anim_offsetV80 {
    display: inline-block;
    animation: anim_offset_V_80 1.2s ease 1;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}

@keyframes anim_opacity1to0 {
    0% {
        background-color: #2f5bf9;
    }

    100% {
        background-color: transparent;
    }
}

.anim_opaticty1to0 {
    animation: anim_opacity1to0 1.2s ease 1;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}


.space-vXX
{
    height: 240px;
}


@keyframes anim_opacity0to1 {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}

.anim_opacity0to1 {
    animation: anim_opacity0to1 1.2s ease 1;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}

.text-container {
    text-align: center; /* 文字を中央寄せ */
    z-index: 5;
    opacity: 0;
}

    .text-container p {
        margin: 5px 0; /* 行間を調整 */
        font-size: 1.5em; /* 文字サイズを調整 */
        font-weight: bold;
        color: white;
        text-shadow: 0 4px 16px black;
    }