a {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* **************************************************************************************

SITE HEADER

************************************************************************************** */
@media screen and (max-width: 767px) {
  .header {
    height: 70px;
  }
  .header.home {
    top: 0;
    height: 42vh;
  }
  .header .logo {
    position: fixed;
    left: 10px;
    top: 15px;
    z-index: 100; 
    width: 60px;
  }
  .header .gnavi {
    position: absolute;
    left: 20vw; 
    top: 40px;
  }
}

@media print, screen and (min-width: 768px) {
  .header {
    position: relative;
    height: 140px; 
    width: 100%;
  }
  .header.home {
    top: -12px;
    height: 95vh;
  }
  .header .logo {
    position: absolute;
    left: 40px;
    top: 30px;
    z-index: 100; 
    width: 100px;
  }
  .header .gnavi {
    position: absolute;
    left: 20vw; 
    top: 40px;
  }
  .header .sns {
    position: absolute;
    right: 40px;
    top: 50px;
    z-index: 100;
  }
  .header .sns img {
    height: auto; 
    width: 24px;
  }
}

/* **************************************************************************************

project : contents

************************************************************************************** */
.works_item {
  transition: 0.8s;
}

@media screen and (max-width: 767px) {
  .works {
    padding: 4vw;
  }
}

@media print, screen and (min-width: 768px) {
  .works {
    margin-bottom: 60px;
  }
}