@charset "UTF-8" ;

.mainTopic {
    font-size: 1.6rem;
    margin-top: 50px;
    text-align: center;
    color: var(--primary-black);
    font-family: 'Noto Sans JP';
}
.gallery__year, .gallery__about, .gallery__about {
    font-size: 1.2rem;
    margin-top: 10px;
    text-align: center;
}
.gallery__txt {
    font-size: 1.2rem;
    text-align: center;
}
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 10px;
    margin: 30px 30px 0;
}
.modal__img {
    opacity: 0;
    z-index: -10;
    width: 0;
    transition: 1s;
    padding: 8px;
    background-color: var(--primary-beige);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.modal__img.open {
    z-index: 10;
    opacity: 1;
    width: 80%;
    max-width: 600px;
}
.section::after {
    display: none;
    content: '';
    background-color: rgba(159, 205, 233,0.9);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.section.open::after {
    display: block;
}
.close {
    display: none;
    width: 24px;
    height: 24px;
    position: fixed;
    top: 5%;
    right: 5%;
    z-index: 100;
}
.close.open {
    display: block;
}
/* pc */
@media screen and (min-width:769px) {
    .mainTopic {
        font-size: 3.6rem;
        margin-top: 100px;
    }
    .gallery__year, .gallery__about, .gallery__about {
        font-size: 2rem;
        margin-top: 15px;
    }
    .gallery__txt {
        font-size: 2rem;
    }
    .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin: 100px 100px 0;
    }
    .close.open {
        display: none;
    }
    .modal__img {
        padding: 10px;
    }
}/* pc 769px */