@charset "UTF-8";

.top_page {
    .top_1st_view {
        position: relative;

        h1 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            font-size: 3.0rem;
            font-weight: 700;
            letter-spacing: 0.25em;
            color: #fff;
            text-align: center;
            opacity: 0;
            animation: fadeIn 1.5s ease-in-out forwards;

            @media (max-width: 690px) {
                font-size: 1.0rem;
            }
        }
    }

    .text {
        margin: 6rem auto;
        width: fit-content;
        line-height: 3.0;

        @media (max-width: 690px) {
            margin: 2rem auto;
        }
    }

    .jellies_map {
        iframe {
            width: 100%;
            height: 100vh;
            border: none;
            overflow: hidden;

            @media (max-width: 690px) {
                height: 80vh;
            }
        }
    }
}

/* フェードインアニメーションの定義 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}