/*=========================
RESET
=========================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

background:#fff;

font-family:
"Yu Gothic",
"Hiragino Kaku Gothic ProN",
sans-serif;

overflow-x:hidden;

}


/*=========================
LOGO
=========================*/

.home-logo{

display:block;

text-align:center;

margin:40px 0;

}

.top-logo{

width:350px;

max-width:80%;

height:auto;

}


/*=========================
HEADER
=========================*/

header{

text-align:center;

padding:20px 0 30px;

}

h1{

font-size:38px;

font-weight:700;

color:#c7d4dc;

margin-bottom:40px;

letter-spacing:.05em;

}


/*=========================
CATEGORY
=========================*/

.category{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.category button{

width:70px;

height:70px;

border:none;

background:#cfcfcf;

color:#fff;

cursor:pointer;

font-size:14px;

transition:.3s;

}

.category button:hover{

background:#b8c7d1;

}


/*=========================
IMAGE AREA
=========================*/

#worksArea{

width:1800px;

max-width:95%;

height:850px;

margin:20px auto;

position:relative;

overflow:hidden;

}

#worksArea img{

position:absolute;

width:280px;

height:auto;

opacity:0;

transition:

opacity 1s,
transform .8s;

pointer-events:none;

}


/*=========================
TEXT
=========================*/

#worksText{

width:700px;

max-width:90%;

margin:-730px auto 150px;

text-align:center;

opacity:0;

transform:translateY(20px);

transition:1s;

}

#worksText.show{

opacity:1;

transform:translateY(0);

}

#worksTitle{

font-size:34px;

font-weight:300;

letter-spacing:.15em;

color:#c7d4dc;

margin-bottom:35px;

}

#worksMessage{

font-size:20px;

line-height:2.2;

color:#777;

}

/*=========================
PREVIEW
=========================*/

#previewImage{

position:absolute;

left:50%;
top:50%;

transform:translate(-50%,-50%);

width:320px;

opacity:0;

transition:.4s;

pointer-events:none;

}