/*==========================================================
  WORKS
==========================================================*/

.works{

    padding:10rem 0;

}

/*----------------------------------------------------------
  Header
----------------------------------------------------------*/

.works .section-header{

    text-align:center;

    margin-bottom:5rem;

}



.works__lead{

    margin-top:2rem;

    color:var(--color-sub);

    line-height:2;

}

/*----------------------------------------------------------
  Grid
----------------------------------------------------------*/

.works__grid{

    display:flex;

    gap:4rem;

}

/*----------------------------------------------------------
  Card
----------------------------------------------------------*/

.work-card{

    flex:1;

}

.work-card img{

    display:block;

    width:100%;

    aspect-ratio:4 / 3;

    object-fit:cover;

    transition:.5s;

}

.work-card:hover img{

    transform:scale(1.02);

}

/*----------------------------------------------------------
  Body
----------------------------------------------------------*/

.work-card__body{

    margin-top:1.8rem;

}

.work-card h3{

    font-size:1.2rem;

    margin-bottom:.8rem;

}

.work-card p{

    color:var(--color-sub);

}

/*----------------------------------------------------------
  Link
----------------------------------------------------------*/

.work-card__link{

    display:inline-flex;

    align-items:center;

    gap:1rem;

    text-decoration:none;

    color:var(--color-text);

    margin-top:1.5rem;

}

.work-card__link span{

    transition:.3s;

}

.work-card__link:hover span{

    transform:translateX(6px);

}


/* テキスト */

.work-card__text{

    font-size:.95rem;

    letter-spacing:.08em;

}

/* 線＋矢印 */

.work-card__arrow{

    position:relative;

    width:60px;

    height:1px;

    background:var(--color-text);

    transition:.35s;

}

/* 矢印 */

.work-card__arrow::after{

    content:"";

    position:absolute;

    right:0;

    top:50%;

    width:8px;

    height:8px;

    border-top:1px solid var(--color-text);

    border-right:1px solid var(--color-text);

    transform:translateY(-50%) rotate(45deg);

}

/* Hover */

.work-card__link:hover .work-card__arrow{

    width:78px;

}


/*----------------------------------------------------------
  Footer
----------------------------------------------------------*/

.works__footer{

    text-align:center;

    margin-top:5rem;

}

.works__more{

    position:relative;

    display:inline-block;

    text-decoration:none;

    padding-bottom:10px;

    color:#333;

}


.works__more::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:35px;

    height:1px;

    background:#8c7b65;

    transition:
    width .8s cubic-bezier(.4,0,.2,1);

    


}


.works__more:hover::after{

    width:100%;

}


/*----------------------------------------------------------
  Tablet
----------------------------------------------------------*/

@media (max-width:960px){

    .works{

        padding:8rem 0;

    }

    .works__grid{

        gap:2rem;

    }

}

/*----------------------------------------------------------
  Smartphone
----------------------------------------------------------*/

@media (max-width:768px){

    .works{

        padding:6rem 0;

    }

    .works__grid{

        flex-direction:column;

        gap:4rem;

    }

}