@keyframes popup {
    0% {
        transform: translateY(40px) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1.0);
    }
    80%, 100% {
        opacity: 1;
    }
}

.dummy_top {
    height: 100%;
    width: auto;
    background-image: url("../image/BG1.png");
    text-align: center;

    .topimage {
        height: 90%;
        width: auto;
        background: url("../image/top_gamegirl.png") no-repeat;
        background-position: center;
        background-size: contain;
    }
}

.dummy_top_text {
    font-family: 'BestTen';
    font-size: 24px;
    color: #F4F4F4;
}

.top {
    height: 100%;
    width: auto;
    background-image: url("../image/BG1.png");
    background-size: 300px;
    text-align: center;

    .topimage {
        height: 95%;
        width: auto;
        background: url("../image/top_gamegirl.png") no-repeat;
        background-position: center;
        background-size: contain;
    }

    .topimage_sp {
        display: none;
    }

    .toplogo {
        margin-top: 110px;
        height: 30%;
        animation: popup 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
}


@media (max-width: 550px) {
    .top {
        .topimage   {
            background: none;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .topimage_sp {
            display: block;
            width: 90vw;
            height: auto;
        }

        .toplogo {
            display: none;
        }
    }
}


.game {
    height: auto;
    width: auto;
    padding: 20px;
}

.game_container {
    display: grid;
    grid-template-columns: 350px 350px;
    place-content: center;
    gap: 30px;
    text-align: -webkit-center;
}

@media (max-width: 600px) {
    .game_container {
        grid-template-columns: 350px;
    }
}


.gallery {
    height: auto;
    width: auto;
    background-image: url("../image/BG2.png");
    background-size: 300px;
}

.gallery_container {
    display: grid;
    grid-template-columns: 250px 250px;
    place-content: center;
    text-align: -webkit-center;
}

.gallery_link {
    margin-bottom: 25px;

    .caption {
        margin-top: 15px;
        padding-left: 15px;

        font-family: 'MisakiGothic';
        font-size: 32px;
        color: #F4F4F4;
    }
}

@media (max-width: 600px) {
    .gallery_container {
        grid-template-columns: 200px 200px; 
    }

    .gallery_link {   
        .caption {
            font-size: 24px;
        }
    }
}

@media (max-width: 400px) {
    .gallery_container {
        grid-template-columns: 1fr;   
    }

    h2 {
        font-size: 36px;
    }
}


.gallery_link_btn {
	width: 200px;
	height: 200px;
    position: relative;
}

.link_image {
    transition: opacity 0.5s;
}

.gallery_link_btn:hover img:first-of-type {
    opacity: 0;
}
.gallery_link_btn img:last-of-type {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
}
.gallery_link_btn:hover img:last-of-type {
    opacity: 1;
}

.about {
    height: 450px;
    width: auto;
    text-align: -webkit-center;
}

.about_links {
    color: #F4F4F4;
    font-size: 36px;
    text-align: left;
    width: fit-content;
    
    a:visited {
        color: inherit;
    }
}

@media (max-width: 550px) {
    .about_links {
        font-size: 5vw;
    }
}

.about_container {
    background-color: gray;
    margin: 0px 50px 25px 50px;
    max-width: 1000px;
    padding: 50px;
}