.categoryMenuArea {
    margin: 3.3333333333vw 0 6.1111111111vw 10.4166666667vw
}

@media screen and (min-width: 1441px) {
    .categoryMenuArea {
        margin: 48px 0 88px 150px
    }
}

@media screen and (max-width: 1200px) {
    .categoryMenuArea {
        margin: 3.3333333333vw 0 10vw 10.4166666667vw
    }
}

@media screen and (max-width: 1200px)and (max-width: 768px) {
    .categoryMenuArea {
        margin: 15.4666666667vw 0 23.4666666667vw 8vw
    }
}

.categoryMenuArea .innerBlock {
    overflow: visible
}

.categoryMenuArea .itemList {
    display: flex;
    align-items: center;
    position: relative
}

@media screen and (max-width: 1200px) {
    .categoryMenuArea .itemList {
        flex-wrap: wrap
    }
}

@media screen and (max-width: 1200px)and (max-width: 768px) {
    .categoryMenuArea .itemList {
        display: block
    }
}

.categoryMenuArea .itemList .item {
    width: fit-content;
    margin-right: 27px
}

.categoryMenuArea .itemList .item.is-hide .text {
    color: #c4c4c4;
    transition: ease-in-out .4s !important
}

@media screen and (min-width: 768px) {
    .categoryMenuArea .itemList .item.is-active:hover .js-txt::before {
        width: 100%
    }
}

.categoryMenuArea .itemList .item a.--all.is-hide .text {
    color: #c4c4c4;
    transition: ease-in-out .4s !important
}

@media screen and (min-width: 768px) {
    .categoryMenuArea .itemList .item a.--all:hover .js-txt::before {
        width: 100%
    }
}

.categoryMenuArea .itemList .item.is-current .item.child-list .js-txt::before {
    width: 0%
}

.categoryMenuArea .itemList .item.is-current .item.child-list.is-current .js-txt::before {
    width: 100%
}

@media screen and (min-width: 768px) {
    .categoryMenuArea .itemList .item.is-current .item.child-list a:hover .js-txt::before {
        width: 100%
    }
}

.categoryMenuArea .itemList .item.is-current .js-txt::before {
    width: 100%
}

.categoryMenuArea .itemList .js-txt {
    position: relative;
    z-index: 2
}

.categoryMenuArea .itemList .js-txt::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    margin: auto;
    background: #303030;
    transition: ease-in-out .2s
}

@media screen and (max-width: 768px) {
    .categoryMenuArea .itemList .js-txt::before {
        bottom: 4px
    }
}

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

    .categoryMenuArea a:hover .text,
    .categoryMenuArea button:hover .text {
        transition: ease-in-out .4s
    }
}

.categoryMenuArea .text {
    font-size: clamp(.75rem, .75rem + 0vw, .75rem);
    line-height: 250%;
    letter-spacing: .1em;
    color: #303030;
    transition: ease-in-out .4s
}

.categoryMenuArea .parent button.is-hide .text {
    color: #c4c4c4;
    transition: ease-in-out .4s !important
}

@media screen and (min-width: 768px) {
    .categoryMenuArea .parent button.is-active:hover .js-txt::before {
        width: 100%
    }
}

@media screen and (max-width: 768px) {
    .categoryMenuArea .parent button.is-active .js-txt::before {
        width: 100%
    }
}

.categoryMenuArea .parent button.is-current .js-txt::before {
    width: 100%
}

.categoryMenuArea .parent button .text {
    position: relative;
    z-index: 2
}

.categoryMenuArea .child {
    position: absolute;
    left: 0;
    width: 69.4444444444vw;
    padding-top: 1.3888888889vw;
    opacity: 0;
    pointer-events: none;
    transition: .3s ease-in-out;
    z-index: 2
}

@media screen and (min-width: 1441px) {
    .categoryMenuArea .child {
        width: 1000px;
        padding-top: 20px
    }
}

@media screen and (max-width: 768px) {
    .categoryMenuArea .child {
        display: none;
        position: relative;
        width: fit-content;
        padding-top: 0;
        opacity: 1;
        pointer-events: visible;
        transition: none
    }

    .categoryMenuArea .child .child-list {
        display: inline-block
    }
}

.categoryMenuArea .child.is-show {
    opacity: 1;
    pointer-events: visible
}

@media screen and (max-width: 768px) {
    .categoryMenuArea .child.is-show {
        display: block
    }
}

.worksArea {
    margin: 2.9861111111vw 3.8194444444vw 0
}

@media screen and (min-width: 1441px) {
    .worksArea {
        max-width: 1135px;
        width: 100%;
        margin: 43px auto 0
    }
}

@media screen and (max-width: 768px) {
    .worksArea {
        margin: 21.3333333333vw 8vw 0
    }
}

.worksArea .entryItems {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap
}

.worksArea .item {
    position: relative;
    width: calc(33.3333333333% - .3472222222vw);
    height: 100%;
    margin: .1736111111vw
}

.worksArea .item::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 100%
}

.worksArea .item::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: linear-gradient(31.74deg, rgba(0, 0, 0, 0.77) -18.12%, rgba(0, 0, 0, 0) 73.73%);
    transition: .3s ease-in-out
}

@media screen and (max-width: 768px) {
    .worksArea .item {
        width: 100%;
        margin: 0
    }

    .worksArea .item+.item {
        margin: 10.6666666667vw 0 0
    }
}

@media screen and (min-width: 768px) {
    .worksArea .item:hover::after {
        opacity: .6
    }
}

.worksArea .item .img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%
}

@media screen and (max-width: 768px) {
    .worksArea .item .img {
        height: calc(100% - 90px)
    }
}

.worksArea .item .img img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s ease-in-out
}

.worksArea .item .img::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 998
}

.worksArea .item .detail {
    position: absolute;
    bottom: 2.7777777778vw;
    left: 0;
    margin: 0 1.3888888889vw 0;
    z-index: 2
}

@media screen and (max-width: 768px) {
    .worksArea .item .detail {
        position: relative;
        bottom: auto;
        left: auto;
        height: 90px;
        margin: 0;
        padding-top: 13px;
        background: #fff;
        overflow: hidden
    }

    .worksArea .item .detail+.text {
        display: none
    }
}

.worksArea .item .detail .text.--b {
    position: relative;
    padding-left: 3.125vw;
    font-size: clamp(1rem, .8571rem + .2976vw, 1.125rem);
    line-height: clamp(1.8125rem, 1.5982rem + .4464vw, 2rem);
    letter-spacing: .05em;
    color: #fff
}

@media screen and (min-width: 1441px) {
    .worksArea .item .detail .text.--b {
        padding-left: 45px
    }
}

@media screen and (max-width: 768px) {
    .worksArea .item .detail .text.--b {
        color: #303030;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

.worksArea .item .detail .text.--b::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2.7777777778vw;
    height: 1px;
    margin: auto;
    background: #fff
}

@media screen and (min-width: 1441px) {
    .worksArea .item .detail .text.--b::before {
        width: 40px
    }
}

@media screen and (max-width: 768px) {
    .worksArea .item .detail .text.--b::before {
        content: none
    }
}

.worksArea .item .detail .text.--r {
    font-size: clamp(.75rem, .6071rem + .2976vw, .875rem);
    line-height: clamp(1.375rem, 1.1607rem + .4464vw, 1.5625rem);
    letter-spacing: .05em;
    color: #fff
}

@media screen and (max-width: 768px) {
    .worksArea .item .detail .text.--r {
        height: 40px;
        color: #303030;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }
}