@charset "utf-8";
/* CSS Document */

html{
 overflow-x:hidden;
 background-image:url(../images/uribou_gallery_bg_pattern.jpg); 
}

.main_title {
padding: min(3%, 50px) 0;
width: fit-content;
max-width: 95%;
margin: 2% auto;
}

.main_title img{
    width: 100%;
    height: auto;
}

.button02{
 position: absolute;
 top: 150px;
 right: 20px; 
}

ul{
 max-width: 1300px;
 min-height: 100vh;
 min-height: 100dvh;
 margin: 0 auto;
 list-style: none;
 text-align: left;
 padding-left: 0;
}

li{
 display: inline-block;
}

.art_titlewrap{
 width: 100%;
 text-align: center;
 margin: 10px auto;
 background-color: #59493f;
 color: #fff;
 font-size: 12px;
}

.art_title{
 padding: 5px 0;
}

.art_number,.art_title{
    display: block;
}

.art_number{
 margin: 0 5px 0 0;
}

.thumb_wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(calc(100%/3), 202px), 1fr));
    gap: 2em;
    padding: 3%;
}


.thumbnail {
    opacity: 0;    
    vertical-align: top;
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.thumbnail img {
    border: solid 1px #6b3f31;
    width: 100%;
    height: auto;
}

.topbutton{
 width: 170px;
 height: auto;
 position: absolute;
 top: 20px;
 right: 20px; 
}

.list_button{
 position: absolute;
 top: 20px;
 right: 20px;
}


@media screen and (max-width:768px) {
    .list_button {
        position: relative;
        top: 0;
        right: 0;
        margin: 3%;
        display: flex;
        gap: 0.5em;
        min-height: auto;
        flex-wrap: wrap;
    }
}

.list_button li{
 display: block;
 margin: 2px 0;
}

.list_button li img{
 width: 170px;
 height: auto;
}

.small_font{
 font-size: 10px;
}

.small_font_2{
 font-size: 1px!important;
}