@charset "utf-8";

/* ----------------------------
TOP
---------------------------- */



/* ----------------------------
下層
---------------------------- */

.galleryCate section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.galleryBtn {
    display: flex;
    justify-content:center;
    align-items:center;
    width: 100%;
    color:#111111;
    padding: 10px 5px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
    border:1px solid #CCCCCC;
    transition: all .5s;
}

.galleryBtn:hover {
    color:#111111;
    box-shadow: none;
    transform: scale(.98, .98);
    transition: all .5s;
}

.galleryBox section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.gallImgBox {
    cursor: pointer;
    transition: all .5s;
}

.gallImgBox:hover {
	opacity: .75;
    transition: all .5s;
}

.gallImgBox {
	position: relative;
	width: 100%;
	height: 0;
	padding: 0 0 75%;
	background: #fff;
    transition: all .5s;
}

.gallImgBox img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	max-width: 100%;
	width: auto;
	max-height: 100%;
	height: auto;
	margin: auto;
}

.webgene-pagination {
    width: 100%;
    grid-column: 1/3;
}

@media screen and (min-width:768px) {

    /* -- kasou -- */

    .galleryCate section {
        grid-template-columns: repeat(4, 1fr);
    }

    .galleryBox section {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 2.5%;
    }

    .webgene-pagination {
        grid-column: 1/4;
    }

}

@media screen and (min-width:1024px) {

    .galleryBtn {
        font-size: 18px;
    }

}