@charset "UTF-8";
/*==============
    gallery
===============*/
#gallery ul {
    display: flex;
}
#gallery ul li {
    background-color: #808080;
    position: relative;
}
#gallery ul li::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(rgba(255, 255, 255, 0) 0, #000000 90%);
    position: absolute;
    top: 0;
    left: 0;
}
#gallery ul li a .imgWrap {
    overflow: hidden;
}
#gallery ul li a .imgWrap img {
    display: block;
    -webkit-filter: grayscale(1);
    filter: gray;
    filter: grayscale(1);
    transition: 0.8s all;
    opacity: 0.5;
}
#gallery ul li:hover a .imgWrap img {
    -webkit-filter: grayscale(0);
    filter: none;
    filter: grayscale(0);
    opacity: 0.8;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
#gallery ul li h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-size: clamp(2.4rem, 5.7vw, 3.6rem);
    font-family: var(--en);
    color: #fff;
    letter-spacing: 0.075em;
    border-bottom: 0;
}
/* more */
#gallery .moreBtn {
    position: absolute;
    right: 32px;
    bottom: 40px;
}
#gallery ul li:hover .moreBtn a {
    opacity: 0.5;
}
@media screen and (max-width: 1200px) {
    #gallery ul {
        display: block;
    }
}
@media screen and (max-width: 420px) {
    /* more */
    #gallery .moreBtn {
        position: absolute;
        right: 15px;
        bottom: 15px;
    }
}