@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap');
/* CSS Document */
/*works html*/
.list{margin: 50px 0 50px;}
.container {
  margin: 0 auto;
	width: 1000px;
  display: grid;
  row-gap: 20px;
  column-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}
#privacy .container {
  display: block;
  letter-spacing: 0.2rem;
  margin-left: 0px;
}
#privacy .container h4 {
  font-size: 18px;
  padding-top: 20px;
  padding-bottom: 10px;
}
#privacy .container p {
  margin-bottom: 20px;
  line-height: 1.8;
}
.pageTitle {
  position: relative;
  margin-top: 110px;
}
h2.titleWorks {
  font: 700 50px 'Raleway', sans-serif;
  position: absolute;
  bottom: 40%;
  z-index: 3;
  left: 200px;
  margin: 0;
  color: #333333;
}
.item{  border-bottom: 1px solid #6b6b6b;
		text-align: center;
		font-size: 11px;
		letter-spacing: 1px;
		color: #3B3B3B;
		padding: 10px 0 10px 0;
}
.item img {
  padding: 0px 0 10px 0;
  transition: 1s;
}
.item img:hover {
  opacity: .8;
  transition: 1s;
}

@media screen and (max-width: 769px){
  .topimage_works{width: 100vw;
   height: 14vh;
   background-image: url( "../img/works_background_sp.jpg");
   background-size: cover;
   background-position: center;
  }
  .list{width: 98%;
    margin: 0 auto;
  }
  .container {margin: 20px 0 20px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  #privacy .container {
    display: block;
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
  }
  #privacy .container p {
  font-size: 1.3rem;
}
  .pageTitle {
    position: relative;
    margin-top: 60px;
  }
  h2.titleWorks {
  font-size: 18px;
  bottom: -5px;
  left: 20px;
  }
}