@charset "utf-8";

/* カテゴリ */
.GlyCateAr {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.GlyCateBx {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    justify-items: center;
}

.GlyCateBx .link {
    width: 100%;
    height: 4rem;
}

.GlyCateBx .link a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 100vmax;
    border: 1px solid var(--fifth);
    font-size: 1.6rem;
    line-height: 1.45;
    transition: all .3s;
}

.GlyCateBx .link a:hover {
    background: var(--primary);
    color: var(--quaternary);
    border: 1px solid var(--primary);
}

/* 一覧 */
.GlyBx {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin: 12rem 0 0;
}

.GlyLink {
    width: 100%;
}

.GlyImg {
    width: 100%;
    aspect-ratio: 14/19;
    overflow: hidden;
}

.GlyImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s;
}

.GlyLink:hover .GlyImg img {
    transform: scale(1.1);
}

/* 詳細 */

.gallery-slider {
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    aspect-ratio: 1/1;
}

.glySliderItem img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.thumbnail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    margin: 6rem 0 0;
}

.glySliderThumb {
    width: 100%;
    aspect-ratio: 4/3;
    border: 1px solid var(--fifth);
    cursor: pointer;
    overflow: hidden;
}

.glySliderThumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all .3s;
}

.thumb-media:hover {
    filter: none;
}

.glySliderThumb:hover img {
    transform: scale(1.1);
}

.glyBackBtn{
    margin: 6rem auto 0;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=768px) {

    .GlyCateAr {
        gap: 1.5rem;
    }

    .GlyCateBx {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .GlyCateBx .link {
        height: 3rem;
    }

    .GlyCateBx .link a {
        font-size: 1.4rem;
    }

    .GlyBx {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        margin: 5rem 0 0;
    }

    .thumbnail {
        gap: 1rem;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=576px) {

    .GlyCateAr {
        gap: 1rem;
    }

    .GlyCateBx {
        gap: 1rem;
    }

    .GlyCateBx .link a {
        font-size: 1.4rem;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */