@charset "utf-8";

/* ------------------------------------------ */

/* Works CSS */

/* ------------------------------------------ */

/* sec-workscats */
.sec-workscats .cont-inr {
    position: relative;
    background-color: var(--gly);
    border-radius: 50px 0 0 50px;
}

.sec-workscats .cat-list {
    position: relative;
    padding-left: min(5.33vw, 80px);
}

.sec-workscats .search-btn {
    position: absolute;
    top: calc(100% + var(--mp70) - 30px);
    left: 50%;
    display: flex;
    flex-flow: row-reverse;
    gap: 6px;
    width: min(100%, 606px);
    transform: translateX(-50%);
}

.sec-workscats .search-btn .btn {
    width: 400px;
    height: 70px;
    color: var(--wht);
    letter-spacing: -0.02em;
    background-color: var(--blk);
    border-radius: 10px;
}

.sec-workscats .search-btn .reset {
    width: 200px;
    height: 70px;
    color: var(--wht);
    letter-spacing: -0.02em;
    background-color: #909090;
    border-radius: 10px;
}

.sec-workscats .row:not(:last-child) {
    margin-bottom: 38px;
}

.sec-workscats .row {
    gap: 5px 35px;
}

.sec-workscats .label {
    position: relative;
    width: 140px;
    padding-left: 38px;
}

.sec-workscats .label::before {
    position: absolute;
    top: 4px;
    left: 0;
    display: block;
    width: 1.5em;
    height: 1.5em;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
}

.sec-workscats .cat01 .label::before {
    background-image: url("../img/works/i-cat-01.svg");
}

.sec-workscats .cat02 .label::before {
    background-image: url("../img/works/i-cat-02.svg");
}

.sec-workscats .cat03 .label::before {
    background-image: url("../img/works/i-cat-03.svg");
}

.sec-workscats .label .title {
    color: var(--base);
}

.sec-workscats .chips {
    flex: 1;
    gap: 2px;
}

.sec-workscats .chip {
    overflow: hidden;
}

.sec-workscats .chip input {
    display: none;
}

.sec-workscats .chip label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 37px;
    padding: 0 min(3.15vw, 3.3em);
    font-size: var(--f-sz15);
    font-weight: normal;
    line-height: 1;
    color: var(--ggly);
    text-align: center;
    cursor: pointer;
    background-color: var(--wht);
}

.sec-workscats .chip input:checked + label {
    background-color: var(--yel);
}

.sec-workscats .chip:first-child {
    border-radius: 5px 0 0 5px;
}

.sec-workscats .chip:last-child {
    border-radius: 0 5px 5px 0;
}

@media (max-width: 1240px) {
    .sec-workscats .label {
        width: 100%;
        padding-left: 1.75em;
    }

    .sec-workscats .chip {
        flex-grow: 1;
    }

    .sec-workscats .chip label {
        padding: 0 0.25em;
    }

    .sec-workscats .row:last-child {
        margin-bottom: 36px;
    }

    .sec-workscats .search-btn {
        top: calc(100% + var(--mp70));
    }
}

@media (max-width: 767px) {
    .sec-workscats .cat-list {
        padding-left: var(--mp50);
    }

    .sec-workscats .chip {
        border-radius: 5px;
    }

    .sec-workscats .search-btn {
        padding-left: var(--mp50);
    }

    .sec-workscats .search-btn .btn,
    .sec-workscats .search-btn .reset {
        height: 55px;
    }
}

@media (max-width: 640px) {
    .sec-workscats .cat-list {
        padding-left: var(--lr-mmmrg);
    }

    .sec-workscats .chip {
        flex-grow: initial;
        width: calc((100% - 4px) / 2);
        border-radius: 5px;
    }

    .sec-workscats .search-btn {
        padding-left: var(--lr-mmmrg);
    }

    .is-show .sec-workscats .scl-blc {
        height: calc(100vh - 240px);
        overflow-y: auto;
    }
}

@media (max-width: 480px) {
    .sec-workscats .cont-inr {
        border-radius: 0;
        margin-left: 0;
    }
}


/* sec-workslist */
.sec-workslist .select-val {
    gap: 0 10px;
    align-items: baseline;
}

.sec-workslist .select-val .val {
    color: var(--dgly);
}

.works-wrap {
    gap: 10px;
}

.works-wrap .sbox-article {
    width: calc((100% - 40px) / 5);
}

.works-wrap .thumbnail {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}
.works-wrap .thumbnail::before {
    content: '';
    display: block;;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 85%,
        rgba(0, 0, 0, 0.45) 100%
    ); */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.works-wrap .txt-area {
    position: absolute;
    bottom: 8px;
    left: 12px;
    width: calc(100% - 24px);
    font-size: 1.35rem;
    font-weight: normal;
    color: rgba(0,0,0,0.6);
    transition: color ease 0.28s;
}

@media (min-width: 768px) {
    .works-wrap .cont-box:hover .txt-area {
        color: rgba(0,0,0,1);
    }
}

.works-wrap .txt-area .sttl-works {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 1500px) {
    .works-wrap .sbox-article {
        width: calc((100% - 30px) / 4);
    }
}

@media (max-width: 1024px) {
    .works-wrap .sbox-article {
        width: calc((100% - 20px) / 3);
    }
}

@media (max-width: 767px) {
    .works-wrap .sbox-article {
        width: calc((100% - 10px) / 2);
    }
    .works-wrap .txt-area {
        color: rgba(0,0,0,0.8);
    }
}

@media (max-width: 480px) {
    .works-wrap .sbox-article {
        width: 100%;
    }
}

/* pager */
.sec-workslist .pager {
    width: min(100%, 640px);
    margin: auto;
}

/* Detail Page Style */
.works-header-imgs {
    overflow: hidden;
    position: relative;
}

.works-header {
    width: min(66.666vw, 800px);
    margin: auto;
}

.works-header-imgs .slick-list {
    overflow: initial;
}

.works-header-imgs .photo-wrap {
    aspect-ratio: 80/77;
    overflow: hidden;
}

.works-header-imgs .slick-slide {
    padding: 0 5px;
}

.works-header-imgs .slick-list {
    padding: 0 !important;
    margin: 0 -5px;
    overflow: initial !important;
}

.works-header-imgs .img {
    position: relative;
}

.works-header-imgs .img:not(.slick-current)::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background-color: rgb(255 255 255 / 60%);
    transition: all ease-in-out 0.28s;
}

.works-header-imgs .wh-is-right,
.works-header-imgs .wh-is-left {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    cursor: pointer;
}

.works-header-imgs .wh-is-right {
    right: 5vw;
}

.works-header-imgs .wh-is-left {
    left: 5vw;
}

.slide-controller .wh-is-right .arrow {
    left: 50%;
    right: initial;
    transform: translate(-50%, -50%);
}

.slide-controller .wh-is-left.rev .arrow {
    left: 50%;
    transform: translate(-50%, -50%) scaleX(-1);
}

@media (min-width: 768px) {
    .slide-controller .wh-is-right:hover .arrow {
        left: 70%;
    }

    .slide-controller .wh-is-left.rev:hover .arrow {
        left: 30% !important;
    }
}

@media (max-width: 767px) {
    .works-header-imgs .wh-is-right {
        right: 2.5vw;
    }

    .works-header-imgs .wh-is-left {
        left: 2.5vw;
    }

    .works-header-imgs .pager .wh-is-right .btn-box,
    .works-header-imgs .pager .wh-is-left .btn-box {
        width: clamp(40px, 10.43vw, 80px);
        padding: 0;
    }
}

@media (max-width: 480px) {
    .works-header {
        width: calc(88% - 40px);
    }

    .works-header-imgs .slick-slide {
        padding: 0 2px;
    }

    .works-header-imgs .slick-list {
        margin: 0 -2px;
    }
}

/* worksdetail */
.worksdetail .cont-in {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--mp30) * -1);
    background-color: var(--gly);
    border-radius: 20px;
}

.worksdetail .detail {
    padding-right: min(5.33vw, 80px);
    padding-left: min(5.33vw, 80px);
    overflow: hidden;
}

.worksdetail .works-ttl {
    position: relative;
    display: flex;
    flex: 1;
    flex-flow: column;
    justify-content: space-between;
    padding-right: min(3.333vw, 50px);
    margin-right: min(3.333vw, 50px);
}

.worksdetail .works-ttl::after {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 1px;
    height: 200%;
    content: "";
    background-color: #d9d8d7;
}

.worksdetail .concept {
    width: 255px;
}

.worksdetail .ttl-en {
    margin-bottom: 4px;
    color: var(--dgly);
}

.worksdetail .ttl-jp {
    line-height: 1.6;
    color: var(--base);
}

.worksdetail .cats-list {
    display: grid;
    grid-template-columns: 7.4rem auto;
    gap: 2px 1em;
    align-items: center;
}

.worksdetail .cats-list dt {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-left: 22px;
    font-size: var(--f-sz12);
    font-weight: normal;
    color: var(--dgly);
}

.worksdetail .cats-list dd {
    font-size: var(--f-sz15);
    font-weight: normal;
    color: var(--ggly);
}

.worksdetail .cats-list dt::before {
    position: absolute;
    top: 0.175em;
    left: 0;
    display: block;
    width: 1.66em;
    height: 1.66em;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
}

.worksdetail .cats-list .cat01::before {
    background-image: url("../img/works/i-cat-11.svg");
}

.worksdetail .cats-list .cat02::before {
    background-image: url("../img/works/i-cat-12.svg");
}

.worksdetail .cats-list .cat03::before {
    background-image: url("../img/works/i-cat-13.svg");
}

.works-intro {
    font-weight: normal;
    color: var(--base);
}

/* related */
.related .header {
    align-items: center;
    justify-content: space-between;
}

.related .header .title {
    color: var(--base);
}

.slide-controller ul {
    gap: 10px;
}

.slide-controller li {
    cursor: pointer;
}

.slide-controller li.slick-disabled {
    cursor: initial;
}

.slide-controller.pager .btn-box {
    width: 80px;
    height: 40px;
    transition: all ease-in-out 0.28s;
}

.slide-controller .arrow02 {
    width: 30px;
    height: 11.63px;
}

.slide-controller .arrow {
    right: 24.5px;
}

.slide-controller .rev .arrow {
    right: initial;
    left: 24.5px;
    transform: translateY(-50%) scaleX(-1);
}

@media (min-width: 768px) {
    .slide-controller .nav-next:not(.slick-disabled):hover .arrow {
        right: 14.5px;
    }

    .slide-controller .nav-pre:not(.slick-disabled):hover .arrow {
        left: 14.5px;
    }
}

.slide-controller.pager .nav-pre:not(.slick-disabled) > span,
.slide-controller.pager .nav-next:not(.slick-disabled) > span {
    opacity: 1;
}

.related-list {
    width: 100%;
    overflow: hidden;
}

.sbox-related {
    width: min(80vw, 340px);
    height: auto;
    aspect-ratio: 34/32;
}

.sbox-related a {
    height: 100%;
    padding: 0 10px 0 0;
}

.sbox-related .thumbnail .photo-wrap {
    aspect-ratio: 33/32;
}

@media (max-width: 767px) {
    .worksdetail .detail {
        display: block;
    }

    .worksdetail .works-ttl {
        padding-right: initial;
        padding-bottom: var(--mp40);
        margin-right: initial;
        margin-bottom: var(--mp40);
    }

    .worksdetail .works-ttl::after {
        top: 100%;
        right: 0;
        width: 100%;
        height: 1px;
    }

    .worksdetail .concept {
        width: 100%;
    }
}

/* サイド絞り込むボタン */
.fixed-search-btn {
    position: fixed;
    top: 120px;
    right: -60px;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 200px;
    line-height: 1.4;
    color: var(--base);
    letter-spacing: 0.2em;
    cursor: pointer;
    background-color: var(--yel);
    border-radius: 20px 0 0 20px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    transition: right 0.3s ease;
}

.fixed-search-btn.is-show {
    right: 0;
}

/* 検索パネル2 */
.sec-workscats.placement {
    position: fixed;
    top: 120px;
    left: 100%;
    z-index: 1300;
    width: calc(100% - var(--lr-mmmrg));
    transition: all 0.3s ease;
}

.is-show .sec-workscats.placement {
    left: var(--lr-mmmrg);
}

.fixed-search .close-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    cursor: pointer;
}

.fixed-search .close-btn::before,
.fixed-search .close-btn::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 1px;
    content: "";
    background-color: var(--base);
    transform: translate(-50%, -50%);
}

.fixed-search .close-btn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.fixed-search .close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.fixed-search .sec-workscats .search-btn {
    position: relative;
    top: auto;
    left: auto;
    padding-top: var(--mp40);
    margin: 0 auto;
    transform: none;
}

.fixed-search .search-mask {
    position: absolute;
    inset: 0;
    z-index: 1200;
    visibility: hidden;
}

.fixed-search.is-show .search-mask {
    visibility: visible;
}

@media (max-width: 1024px) {
    .fixed-search-btn {
        top: 100px;
    }   
    .sec-workscats.placement {
        top: 100px;
    }
}
@media (max-width: 640px) {
    .fixed-search.is-show .sec-workscats .search-btn {
        position: fixed;
        top: 78%;
        left: 5%;
        width: 90%;
    }    
}

@media (max-width: 480px) {
    .fixed-search-btn {
        top: 80px;
    }   
    .sec-workscats.placement {
        top: 80px;
        width: 100%;
    }
    .is-show .sec-workscats.placement {
        left: 0;
    }

}