@charset "utf-8";

/* ==========================================================================
   PORTFOLIO
   ========================================================================== */
.project-item {
    > a{display: block;}
    .thumb{aspect-ratio: 640 / 428;}
    .project-info{display: flex; justify-content: space-between; align-items: center; color: #fff; margin-top: 15px;}
    .project-title{line-height: 1.4; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}
    .short-desc{display: none;}
    @media (width <= 640px) {
        .project-info {margin-top: 16px;}
    }
}
.project-list {
    .cate-title{display: none; color: var(--point-color01); margin-bottom: 50px;}
    /*> ul{display: grid; grid-template-columns: repeat(2, 640px); gap: 50px;}*/
    > ul{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--main-gap);}
    .btn-more{color: #fff; margin-top: 53px;}
    @media (width <= 640px) {
        > ul{grid-template-columns: 1fr; gap: 37px;}
        .cate-title{text-decoration: underline; text-underline-offset: 2px; margin-bottom: 22px;}
        .btn-more{margin-top: 33px;}
    }
}

.project-view {
    /*padding-right: 55px;*/
    .project-cont{color: #aaa;}
    img{max-width: 100%;}

    .related-project {
        margin-top: 75px;
        .related-title {font-size: 25px; color: var(--point-color01); margin-bottom: 37px;}
        .project-item .project-info{display: none;}
    }
    @media (width <= 1768px) {
        padding-right: 0;
    }
    @media (width <= 640px) {
        padding-right: 0;
        .related-project {
            .related-title {font-size: 20px; margin-bottom: 20px;}
            .project-list > ul{gap: 20px;}
        }
    }

}