@charset "UTF-8";

/* =================
article__header
=================== */
article{
    padding: 120px var(--contentpaddingpc) 40px;
    max-width: 1440px;
    margin: 0 auto;
}

h1{
    font-size: 5rem;
    font-family: Rubik Mono One;
    text-align: left;
    line-height: 0.9;
}

.title__ja{
    font-size: 1.4rem;
}

.title{
    color: var(--primary-orange);
}

.works__nav{
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 0 40px;
    margin: 50px 2% 0 0;
}

.works__nav li:hover{
    opacity: 0.7;
}

/* article__header sp */
@media screen and (max-width:700px){
    article{
        padding: 30px var(--contentpadding) 40px;
    }
    h1{
        font-size: 3rem;
        line-height: 1;
    }
    .title__ja{
        font-size: 1.1rem;
    }
    .works__nav{
        gap: 0 30px;
        padding: 0 var(--contentpadding);
        margin: 42px 2% 0 0;
    }
    .works__nav li{
        font-size: 1.3rem;
    }
} 

/* ===============
works
================= */
.section--works{
    padding: 0 var(--contentpaddingpc) 120px;
    max-width: 1440px;
    margin: 0 auto;
}

.works__category{
    color: var(--primary-gray);
    font-size: 2rem;
    text-align: left;
    text-shadow: 4px 3px 3px rgba(16, 112, 179, 0.5);
    display: block;
    margin-top: -100px;
    padding-top: 100px;
}

.works__category .graphic{
    margin-top: 80px;
}

.works__group{
    margin: 30px auto 0;
}

.works__list{
    display: flex;
    justify-content: center;
    gap: 50px 40px;
    flex-wrap: wrap;
}

.works__list::after{
    content: "";
    display: block;
    width: 47%;
}

.production{
    width: 47%;
}

.production:hover{
    opacity: 0.8;
}

.production img{
    padding: 40px 4%;
}

.works_sugutabe__img{
    background-color: rgba(205, 184, 185, 0.4);
}

.works_headspa__img{
    background-color: rgba(184, 204, 205, 0.4);
}

.works_sauna__img{
    background-color: rgba(222, 219, 163, 0.4);
}

.graphic_headspa01__img{
    background-color: rgba(184, 204, 205, 0.4);
}

.banner_sauna__img{
    background-color: rgba(222, 219, 163, 0.4);
}


.works__item{
    text-align: left;
    margin: 20px 0 10px;
}

.type{
    color: var(--primary-gray);
}

h2{
    font-size: 2rem;
}

h2 span{
    font-weight: 700;
}

/* works sp */
@media screen and (max-width:800px) {
    .section--works{
        padding: 0 var(--contentpadding) 80px;
    }
    .works__category{
        /* margin: 50px auto 0; */
    }
    .works__list{
        gap: 50px 30px;
    }
    .type{
        font-size: 1.3rem;
    }
    h2{
        font-size: 1.6rem;
    }
    .production{
        width: 100%;
    }
    .production img{
        padding: 26px 4%;
    }
}