@charset "UTF-8";

#coverlayer{
  display: block;
}

.title_s{
 font-family: 'Open Sans', sans-serif;
 font-size: 1.6rem;
 line-height: 1;
 opacity: 0.5;
 text-align: center;
 width: 320px;
 position: absolute;
 top: 160px;
 margin-bottom: 5px;
}

.title{
  font-size: 2.4rem;
  line-height: 1;
  text-align: center;
  width: 320px;
  position: absolute;
  top: 182px;
  margin-bottom: 80px;
}

#works{
  padding-top: 300px;
}
#works section{
  color: #D5D5D5;
  margin-bottom: 50px;
}
#works section:last-of-type{
  margin-bottom: 100px;
}
#works picture img{
  width: 320px;
}


.fadeUp {
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:both;
animation-timing-function: ease;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(50px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*タブレット用スタイル==============================================================================================*/
@media screen and (min-width:600px){

.inner{
  width: 625px;
}

.title_s{
 width: 625px;
}

.title{
  width: 625px;
}

#works{
  display: flex;
  flex-wrap: wrap;
  column-gap: 25px;
}

#works section{
  width: 300px;
}



.fadeUp2 {
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:both;
animation-timing-function: ease;
opacity: 0;
}

}


@media screen and (min-width:960px){

.inner{
  width: 950px;
}

.title_s{
 width: 950px;
}

.title{
  width: 950px;
}

#works{
  display: flex;
  flex-wrap: wrap;
  column-gap: 25px;
}

.fadeUp3 {
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:both;
animation-timing-function: ease;
opacity: 0;
}


}