/****************
FV
****************/
#FV {
  height: 100vh;
  width: 100%;
  background: linear-gradient(rgba(235, 234, 234, 0) 0%, rgb(235, 234, 234) 100%), url(../img/FV_bg.jpg) no-repeat center;
  background-size: cover;
  position: relative;
}
#FV h1 {
  font-size: 10vw;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 1%;
  transform: translateY(-50%);
}

/****************
ABOUT
****************/
#ABOUT .about {
  display: flex;
  justify-content: space-between;
}
#ABOUT .about .img {
  width: 30%;
  height: auto;
}
#ABOUT .about .contents {
  width: 65%;
}
#ABOUT .about .contents h3 {
  font-size: 3em;
  margin-bottom: 4%;
}
#ABOUT .about .contents p {
  font-size: 2em;
  line-height: 2;
}
#ABOUT .about-skill {
  display: flex;
  justify-content: space-between;
  margin-top: 8%;
}
#ABOUT .about-skill .design,
#ABOUT .about-skill .coding,
#ABOUT .about-skill .cms {
  width: 30%;
  border: 1px solid #000;
  border-radius: 8px;
  padding: 2%;
}
#ABOUT .about-skill .design h3,
#ABOUT .about-skill .coding h3,
#ABOUT .about-skill .cms h3 {
  text-align: center;
  font-size: 2em;
}
#ABOUT .about-skill .design .img,
#ABOUT .about-skill .coding .img,
#ABOUT .about-skill .cms .img {
  width: 30%;
  margin: 4% auto;
}
#ABOUT .about-skill .design .img img,
#ABOUT .about-skill .coding .img img,
#ABOUT .about-skill .cms .img img {
  aspect-ratio: 16/9;
}
#ABOUT .about-skill .design p,
#ABOUT .about-skill .coding p,
#ABOUT .about-skill .cms p {
  font-size: 1.5em;
  line-height: 2;
}

@media (max-width: 1000px) {
  #ABOUT .about {
    display: block;
  }
  #ABOUT .about .img {
    margin: auto;
  }
  #ABOUT .about .contents {
    width: 100%;
  }
  #ABOUT .about-skill {
    display: block;
  }
  #ABOUT .about-skill .design,
  #ABOUT .about-skill .coding,
  #ABOUT .about-skill .cms {
    width: 100%;
    margin: 4% 0;
    padding: 4%;
  }
}
/****************
WORKS
****************/
#WORKS .slider .slick-slide,
#WORKS .slider_reverse .slick-slide {
  margin: 0 16px;
}
#WORKS .works {
  margin: 4% 0;
}
#WORKS .works p {
  text-align: center;
  font-size: 2em;
  line-height: 2;
}
#WORKS .works .btn {
  margin: 2% auto;
}

@media (max-width: 600px) {
  #WORKS .works p {
    text-align: left;
  }
}
/****************
AGENCY
****************/
#AGENCY .agency p {
  font-size: 2em;
  line-height: 2;
  margin-bottom: 2%;
}

/****************
COLUMN
****************/
#COLUMN .column .text {
  font-size: 2em;
  line-height: 2;
  margin-bottom: 2%;
  text-align: center;
}
#COLUMN .column .column-block .article {
  margin: 2% 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
#COLUMN .column .column-block .article .time {
  padding: 2% 2% 1%;
}
#COLUMN .column .column-block .article .title {
  padding: 0 2% 2%;
  font-size: 1.5em;
  font-weight: bold;
}
#COLUMN .column .btn {
  margin: 4% auto;
}

/****************
BLOG
****************/
#BLOG .blog .text {
  font-size: 2em;
  line-height: 2;
  margin-bottom: 2%;
  text-align: center;
}
#BLOG .blog .blog-block .article {
  margin: 2% 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
#BLOG .blog .blog-block .article .time {
  padding: 2% 2% 1%;
}
#BLOG .blog .blog-block .article .title {
  padding: 0 2% 2%;
  font-size: 1.5em;
  font-weight: bold;
}
#BLOG .blog .btn {
  margin: 4% auto;
}

/****************
CONTACT
****************/
#CONTACT {
  background: linear-gradient(rgba(29, 29, 29, 0.5) 100%, rgba(29, 29, 29, 0.5) 100%), url(../img/footer_bg.jpg) no-repeat center;
  background-size: cover;
}
#CONTACT .TITLE {
  color: #ebeaea;
  border-bottom: 1px solid #ebeaea;
}
#CONTACT .contact p {
  text-align: center;
  font-size: 2em;
  line-height: 2;
  color: #ebeaea;
}
#CONTACT .contact .btn {
  margin: 4% auto;
}