@charset "utf-8";




html {
    --primary-white-gray: #fcfcfc;
    --primary-beige: #E2E0DD;
}

html.change {
    --primary-white-gray: #eeeeee;
    --primary-beige2: conic-gradient(from 245.99deg at 68.09% 52.71%, #181818 0deg, #313131 14.55deg, #181818 55.8deg, #181818 113.4deg, #313131 157.15deg, #181818 210.93deg, #181818 246.6deg, #313131 278.49deg, #181818 312.26deg, #181818 338.64deg, #181818 360deg);

}


/*==========================================================
 common 
 ==========================================================*/

/* header nav btn */
/* footer nav btn*/
.navItem:nth-of-type(2) .btn::after,
.footerNavItem:nth-of-type(2)::after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--primary-white2);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
.navItem:nth-of-type(2) .active::after {
    height: 6px;
}

.backColor {
    background: var(--primary-gray);
}

.worksFv::after {
    display: none;
}



/*==========================================================
 mv 
 ==========================================================*/

.worksFv {
    padding: 20.5vw 6.9vw 10.4vw;
    color: var(--primary-white);
    background: var(--primary-black-gradation);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    z-index: 100;
}

.mainTitle {
    font-family: 'Anton';
    font-size: 6.9vw;
    letter-spacing: -0.88px;
}

.brSp {
    display: none;
}

.subTxt {
    margin-top: 2.8vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2.8vw;
    border-bottom: 1px solid var(--primary-white);
}

.subTxtLeft {
    display: flex;
    column-gap: 5.6vw;
}

.subTxtItem {
    display: flex;
    column-gap: 1.4vw;
}

.subTxtItem p {
    font-size: 1.3vw;
    font-weight: 500;
}

.subTxtItem span {
    background-color: var(--primary-white);
    width: 1px;
    height: 100%;
}

.worksUrl {
    display: flex;
    font-size: 1.4vw;
    font-weight: 500;
    line-height: 1.1;
    gap: 0.4vw;
}

.worksUrl a,
.txtExplanation a {
    position: relative;
}
.worksUrl a:hover,
.txtExplanation a:hover {
    opacity: 0.6;
}

.worksUrl a::after,
.txtExplanation a::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--primary-white);
    position: absolute;
    bottom: -4px;
    left: 0;
}
.txtExplanation a::after {
    background-color: var(--primary-black);
    bottom: 0px;
}

.mainImg {
    background-color: var(--primary-white-gray);
    margin-top: 5.6vw;
    height: 44.4vw;
    display: grid;
    place-items: center;
}

.mainImg img {
    width: 62.5vw;
    margin: 0 auto;
    display: block;
}
.mainImgTea img {
    width: 33.3vw;
}
.mainImgLamp img {
    width: 34.7vw;
}

@media screen and (max-width:767px) {
    .brSp {
        display: block;
    }

    .worksFv {
        padding: 30.4vw 8.5vw 16vw;
        background-image: url(../images/top/backSp.jpg);
    }

    .mainTitle {
        font-size: 9.6vw;
        line-height: 1.1;
        letter-spacing: -0.36px;
    }

    .subTxt {
        margin-top: 4.3vw;
        padding-bottom: 6.4vw;
        flex-direction: column;
        align-items: flex-start;
        row-gap: 2.7vw;
    }

    .subTxtLeft {
        column-gap: 10.7vw;
    }

    .subTxtItem {
        column-gap: 2.7vw;
    }

    .subTxtItem p {
        font-size: 2.9vw;
        font-weight: 500;
    }

    .worksUrl {
        font-size: 2.9vw;
        gap: 1.2vw;
    }

    .mainImg {
        background-color: var(--primary-beige);
        margin-top: 6.4vw;
        padding: 2.7vw 0;
        height: auto;
        display: block;
        place-items: none;
    }

    .mainImg img {
        width: 74.5vw;
    }
}

/*  */





/* ========================================================
worksTxt 
========================================================*/
.worksTxtBanner {
    padding: 10.4vw 0 10.4vw 6.3vw;
    background-color: var(--primary-white);
}

.worksTxtItem {
    padding: 5.6vw 0 5.6vw 10.40vw;
    margin-left: 6.3vw;
    display: flex;
    column-gap: 10.4vw;
    border-top: 1px solid var(--primary-black);
    font-size: 1.3vw;
}

.worksTxtItem:last-of-type {
    border-bottom: 1px solid var(--primary-black);
}

.TxtTitle {
    font-weight: 500;
    line-height: 1.1;
    width: 6.9vw;
}

.txtExplanation {
    line-height: 1.8;
    letter-spacing: 0.64px;
    width: 49.3vw;
}

.txtExplanation span {
    width: 8.3vw;
    display: inline-block;
    margin-right: 4.2vw;
}



@media screen and (max-width:767px) {
    .worksTxt {
        padding-left: 8.5vw;
        padding-right: 8.5vw;
    }

    .worksTxtItem {
        padding: 13.3vw 0;
        row-gap: 8vw;
        border-top: 1px solid var(--primary-black);
        font-size: 3.5vw;
        flex-direction: column;
    }

    .TxtTitle {
        width: auto;
    }

    .txtExplanation {
        line-height: 1.5;
        letter-spacing: 0.64px;
        width: auto;
    }

    .txtExplanation span {
        width: 22.4vw;
        margin-right: 16vw;
    }
}



/* ========================================================
works photo all 
========================================================*/
.photoAll {
    display: flex;
    padding: 10.4vw;
    justify-content: space-between;
    padding-top: 0;
}
.photoAll img {
    box-shadow: 0 0 50px rgba(33, 33, 33, 0.1);
}
.imgCenter {
    justify-content: center;
}

.imgPc {
    width: 55.1vw;
}
.imgPc img {
    width: 100%;
}

.imgSp {
    width: 17.4vw;
    display: flex;
    flex-direction: column;
    gap: 0.7vw;
}

.imgSp img {
    width: 100%;
}

.imgSp img:last-of-type {
    display: none;
}

@media screen and (max-width:767px) {
    .photoAll {
        padding: 16vw 8.5vw;
        flex-direction: column;
        align-items: center;
        row-gap: 26.7vw;
    }

    .imgPc {
        width: 100%;
    }

    .imgSp {
        width: 100%;
    }

    .imgSp img:first-of-type {
        display: none;
    }

    .imgSp img:last-of-type {
        display: block;
    }
}



/* ========================================================
other works
========================================================*/
.other {
    /* background: var(--primary-beige); */
    border-top: 1px solid var(--primary-black);
    padding-bottom: 13.9vw;
    color: var(--primary-black2);
}

.otherTitle span {
    transform: translateY(30%);
    opacity: 0;
    transition: 1s;
}

.otherTitle span.active {
    transform: translateY(0);
    opacity: 1;
}

.otherTitle {
    letter-spacing: -6px;
}
.otherTitle span:nth-of-type(2),
.otherTitle span:nth-of-type(3) {
    letter-spacing: -2px;
}
.otherTitle span:nth-of-type(4) {
    letter-spacing: 0;
}

.sectionTitleOther {
    color: var(--primary-black2);
}

.sectionTitleOther p {
    letter-spacing: -1.28px;
    color: var(--primary-black2);
}

.otherList {
    padding: 6.9vw 0 0 3.4vw;
    margin-left: 6.3vw;
    margin-top: 6.9vw;
    border-top: 1px solid var(--primary-black2);
    width: 100%;
}

.otherItem {
    margin-right: 6.9vw;
}

.otherItemTitle {
    font-family: 'Anton';
    font-size: 2.5vw;
    margin-top: 1.4vw;
}

.otherTxtSub {
    font-size: 1vw;
    display: flex;
    column-gap: 1vw;
    margin-top: 1.4vw;
}

.otherTxtSub span {
    display: block;
    background-color: var(--primary-black2);
    width: 1px;
}

.otherExplanation {
    font-size: 1.3vw;
    margin-top: 0.7vw;
}

.slick-slide img {
    height: 26.6vw;
    transition: 0.6s;
    margin: 0 auto;
}

/* .slick-slide img:hover {
    transform: scale(1.05);
    transition: 0.8s;
} */
.slick-slide img.hover {
    transform: scale(1.05);
    transition: 0.8s;
}

.otherImgWrap {
    overflow: hidden;
    height: 26.6vw;
    display: block;
}

.slick-prev,
.slick-next {
    z-index: 60;
    /* background-color: #3d3d3d; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.9vw;
    height: 4.9vw;
    background-size: contain;
    border-radius: 100%;
    transition: 0.5s;
    cursor: none;
}


.slick-prev {
    top: auto;
    left: auto;
    bottom: -12.5vw;
    right: 16.9vw;
    background-image: url(../images/works/otherNext.webp);
}

.slick-next {
    top: auto;
    right: 11.1vw;
    bottom: -12.5vw;
    background-image: url(../images/works/other.webp);
}


.slick-prev::before,
.slick-next::before {
    content: none;
}



/* .slick-prev {
    left: 45px;
    z-index: 10;
}
.slick-next {
    right: 45px;
    z-index: 10;
} */



@media screen and (max-width:767px) {
    .sectionTitleOther img {
        width: 34.7vw;
    }
    .otherList {
        padding:6.9vw 8.5vw 29.3vw;
        padding-bottom: min(29.9vw, 120px);
        margin-top: 6.9vw;
        border-top: 1px solid var(--primary-black);
        width: 100%;
    }
    .otherItem {
        display: none;
        margin-right: 0;
    }

    .otherItemTitle {
        font-size: 5.3vw;
        margin-top: 5.3vw;
        padding: 0 16px;
    }

    .otherTitle {
        letter-spacing: -1.68px;
    }
    .otherTitle span:nth-of-type(1) {
        letter-spacing: -1.12px;
    }
    .otherTitle span:nth-of-type(2),
    .otherTitle span:nth-of-type(3) {
        letter-spacing: -0.56px;
    }
    .otherTitle span:nth-of-type(4) {
        letter-spacing: 0.56px;
    }

    .otherTxtSub {
        font-size: 2.7vw;
        column-gap: 2.1vw;
        margin-top: 2.7vw;
        padding: 0 16px;
    }
    .otherExplanation {
        font-size: 1.3vw;
        margin-top: 0.7vw;
        font-size: 2.9vw;
        line-height: 1.5;
        padding: 0 16px;
    }
    /* .slide5 .otherItemTitle {
        padding: 0 62.5px;
    }

    .slide5 .otherTxtSub {
        padding: 0 62.5px;
    }
    .slide5 .otherExplanation {
        padding: 0 62.5px;
    }
    .slide6 .otherItemTitle {
        padding: 0;
    }

    .slide6 .otherTxtSub {
        padding: 0;
    }
    .slide6 .otherExplanation {
        padding: 0;
    } */

/* ここまでまだ */


    .slick-slide img {
        height: 49.9vw;
        object-fit: contain;
        margin: 0 auto;
    }
    .slide6 img {
        margin-top: 3.2vw;
    }
    
    .otherImgWrap {
        height: 49.9vw;
    }

    .slick-prev {
        bottom: 0;
        right: min(24.5vw, 130px);
        width: 13.3vw;
        height: 13.3vw;
        max-width: 60px;
        max-height: 60px;
    }
    
    .slick-next {
        right: 8.5vw;
        bottom: 0;
        width: 13.3vw;
        height: 13.3vw;
        max-width: 60px;
        max-height: 60px;
    }
}