@charset "utf-8";

.cmnArtWork {
    width: 100%;
    min-height: 10rem;
    margin-bottom: 5rem;
}

.cmnArtWork .gridSizer,
.cmnArtWork .gridItem {
    width: calc((100% - 9.6rem) / 7);
}

.cmnArtWork .gutterSizer {
    width: 1.6rem;
}

.cmnArtWork .gridItem {
    margin-bottom: 3rem;
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    opacity: 0;
    transform: translateY(3rem);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.cmnArtWork.isMypage .gridItem {
    border-radius: 0.3rem 1rem 1rem 1rem;
}

.cmnArtWork .gridItem.is-inview {
    animation: worksFadeUp 0.6s ease forwards;
}

@keyframes worksFadeUp {
    from {
        opacity: 0;
        transform: translateY(3rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cmnArtWork .gridItem:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.cmnArtWork .gridItem.is-inview-done {
    animation: none;
    opacity: 1;
    transform: translateY(0);
}

.cmnArtWork .gridItem.is-inview-done:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.cmnArtWork .gridItem.isFilteredOut {
    display: none;
}

.cmnArtWork.gridWorks.isFilteringHide {
    visibility: hidden;
}

.cmnArtWork .imgWrapper {
    position: relative;
    line-height: 0;
}

.cmnArtWork .imgWrapper img {
    width: 100%;
    height: auto;
}

.cmnArtWork .gridItem .cmnIconNew {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}

.cmnArtWork .gridItem .iconView {
    color: #fff;
    background-color: var(--color-mint);
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing40);
    line-height: 1;
    padding: 0.7rem 1.2rem;
    border-radius: 0.3rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.cmnArtWork .gridItem .iconView::before {
    content: "";
    width: 1.7rem;
    height: 1rem;
    background: url(../../../img/front/common/iconView.png) center center / 100% no-repeat;
}

.cmnArtWork .gridItem .iconPrivate {
    color: #fff;
    background-color: var(--color-red);
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing40);
    line-height: 1;
    padding: 0.7rem 1.2rem;
    border-radius: 0.3rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
}

.cmnArtWork .boxOverlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.cmnArtWork .gridItem:hover .boxOverlay {
    opacity: 1;
}

.cmnArtWork .icoZoom {
    display: block;
    width: 4.0em;
    height: 4.0em;
    background: url("../../../img/front/common/iconZoom.png") no-repeat center center / 3.2rem;
}

@media screen and (max-width: 1600px) {
    .cmnArtWork .gridSizer,
    .cmnArtWork .gridItem {
        width: calc((100% - 5rem) / 6);
    }

    .cmnArtWork .gutterSizer {
        width: 1rem;
    }
}

@media screen and (max-width: 1215px) {
    .cmnArtWork {
        min-height: 7rem;
        margin-bottom: 2.5rem;
    }

    .cmnArtWork .gridSizer,
    .cmnArtWork .gridItem {
        width: calc((100% - 4rem) / 5);
    }

    .cmnArtWork .gutterSizer {
        width: 1rem;
    }

    .cmnArtWork .gridItem {
        margin-bottom: 1.5rem;
    }

    .cmnArtWork .gridItem .cmnIconNew {
        padding: 0.8rem 0.5rem;
    }
}

@media screen and (max-width: 1000px) {
    .cmnArtWork .gridSizer,
    .cmnArtWork .gridItem {
        width: calc((100% - 3rem) / 4);
    }
}

@media screen and (max-width: 767px) {
    .cmnArtWork .gridSizer,
    .cmnArtWork .gridItem {
        width: calc((100% - 2rem) / 3);
    }
}

@media screen and (max-width: 390px) {
    .cmnArtWork .gridSizer,
    .cmnArtWork .gridItem {
        width: 48.5%;
    }

    .cmnArtWork .gutterSizer {
        width: 3.0%;
    }
}