/* =========================
 Works Header
========================= */


.works-header{

    max-width:850px;

    margin:160px auto 120px;

    text-align:center;

    padding:0 30px;

}

.works-header h1{

font-family:
"Shippori Mincho",
serif;

font-size:clamp(1.8rem,4vw,3rem);

font-weight:400;

line-height:1.8;

letter-spacing:.15em;

margin:40px auto;

}


.page-label{

    font-size:13px;

    letter-spacing:.35em;

    color:#8b8175;

}

.works-header h2{

    display:inline-block;

    margin:60px auto 40px;

    transform:rotate(-8deg);
   

    font-size:clamp(1.2rem,3vw,1.8rem);

    font-weight:600;

    letter-spacing:.15em;

    color:#302c28;

    line-height:1.2;



}

.works-header p{

    line-height:2.3;

    letter-spacing:.08em;

}


/*======================================
Concept Hero
======================================*/

.concept-hero{

    padding:180px 0 120px;

    text-align:center;

}

.concept-hero__sub{

    font-size:.8rem;

    letter-spacing:.35em;

    color:#8c8176;

    margin-bottom:18px;

}

.concept-hero h1{

    font-size:clamp(1.5rem,5vw,2.5rem);

    font-family:var(--font-title);

    font-weight:400;

    margin-bottom:32px;

}

.concept-hero__lead{

    font-size:1.1rem;

    line-height:2.1;

    color:#6f665d;

}

/* =========================
 Works Filter
========================= */


.works-filter{

    max-width:1000px;

    margin:0 auto 80px;

    padding:0 30px;


    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

}





.filter{

    background:none;

    border:1px solid #d8d0c5;

    color:#6f665c;

    padding:10px 22px;

    border-radius:30px;


    font-size:13px;

    letter-spacing:.15em;

    cursor:pointer;

    transition:.3s;

}




.filter:hover,
.filter.active{

    background:#403a32;

    color:white;

}



/* =========================
 Works Gallery
========================= */


.works-gallery{

    max-width:1200px;

    margin:0 auto 160px;

    padding:0 40px;


    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:60px 40px;

}




.works-card{

    position:relative;

    display:block;

    overflow:hidden;

    aspect-ratio:4 / 3;

    text-decoration:none;

    color:white;

}





.works-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s ease;

}





/* hover layer */

.works-overlay{

    position:absolute;

    inset:0;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    background:
    rgba(50,45,38,.38);


    opacity:0;

    transition:.5s;

}




.works-overlay h2{

    font-family:
    "Shippori Mincho",
    serif;

    font-weight:400;

    font-size:24px;

    letter-spacing:.15em;

    margin-bottom:15px;


    transform:translateY(20px);

    transition:.5s;

}





.works-overlay p{

    font-size:13px;

    letter-spacing:.15em;


    transform:translateY(20px);

    transition:.5s;

}





.works-card:hover img{

    transform:scale(1.06);

}




.works-card:hover .works-overlay{

    opacity:1;

}



.works-card:hover h2,
.works-card:hover p{

    transform:translateY(0);

}






/* =========================
 少しだけリズム
========================= */






/* =========================
 Tablet
========================= */


@media(max-width:900px){


.works-gallery{

    padding:0 30px;

}


.works-card:nth-child(3n){

    margin-top:0;

}


}





/* =========================
 Mobile
========================= */


@media(max-width:768px){


.works-header{

    margin:90px auto 70px;

}


.works-gallery{

    grid-template-columns:1fr;

    padding:0 20px;

    gap:40px;

}



.works-card:nth-child(3n){

    margin-top:0;

}



.works-overlay{

    opacity:1;

    background:
    linear-gradient(
    transparent,
    rgba(40,35,30,.45)
    );


    justify-content:flex-end;

    align-items:flex-start;

    padding:25px;

}


.works-overlay h2,
.works-overlay p{

    transform:none;

}


}