._page-header {
  background-image: url(../../../img/page/works/index/pc/main-visual.jpg);
}

#works-section {
  padding: 9.8rem 0 0;
}
#works-section h2 {
  margin-bottom: 2.7rem;
}
#works-section > p {
  margin-bottom: 6.6rem;
}
#works-section ul {
  margin-bottom: 8.4rem;
}
#works-section li {
  float: left;
  text-align: center;
  width: 48.6rem;
  height: 24.6rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1rem solid #F2F2F2;
  -webkit-border-radius: 0.6rem;
  -moz-border-radius: 0.6rem;
  -ms-border-radius: 0.6rem;
  -o-border-radius: 0.6rem;
  border-radius: 0.6rem;
  position: relative;
  padding: 3.4rem 1.9rem 0 1.7rem;
  margin-left: 2.7rem;
  margin-bottom: 3.2rem;
}
#works-section li:nth-child(2n+1) {
  margin-left: 0;
  clear: left;
}
#works-section li h3 {
  display: inline-block;
  margin-bottom: 2.5rem;
  padding-left: 0.3rem;
  font-weight: normal;
}
#works-section li p {
  text-align: left;
  line-height: 1.9;
}
#works-section li .image {
  position: absolute;
}
#works-section li > span {
  position: absolute;
  left: -2.2rem;
  top: -2.6rem;
}
#works-section li > span img {
  width: 6.4rem;
  height: 6.4rem;
}
#works-section li i {
  font-style: normal;
}
#works-section li:nth-child(1) p {
  padding-left: 10.4rem;
}
#works-section li:nth-child(1) .image {
  left: -4.1rem;
  bottom: -4.38rem;
}
#works-section li:nth-child(4) .image {
  right: -9.17rem;
  top: -8.98rem;
}
#works-section li:nth-child(5) .image {
  left: -6.3rem;
  bottom: -5.58rem;
}
#works-section li:nth-child(5) p {
  white-space: nowrap;
}
#works-section li:nth-child(5) p span {
  padding-left: 19.3rem;
}
#works-section li:nth-child(9) {
  height: 27.818rem;
}
#works-section li:nth-child(9) .image {
  left: -7.4rem;
  bottom: -7.78rem;
}
#works-section li:nth-child(9) p span {
  display: inline-block;
  padding-left: 9.6rem;
}
#works-section li:nth-child(10) {
  height: 27.818rem;
}
#works-section li:nth-child(10) .image {
  right: -3.8rem;
  bottom: -4.7rem;
}
#works-section li:nth-child(10) p span {
  display: block;
}

/**
 * For SP Layout
 */
@media screen and (max-width: 750px) {
  ._page-header {
    background-image: url(../../../img/page/works/index/sp/main-visual@2x.jpg);
  }

  .layout {
    margin: 0;
  }

  #works-section {
    padding: 7.4rem 2rem 0;
    overflow: hidden;
  }
  #works-section > p {
    margin-bottom: 5.3rem;
  }
  #works-section ul {
    margin-bottom: 8.4rem;
    padding: 2rem 0;
  }
  #works-section li {
    float: none;
    width: auto;
    height: auto;
    padding: 3.4rem 1.6rem 2rem 1.7rem;
    margin-left: 0;
    margin-bottom: 3.6rem;
  }
  #works-section li:nth-child(1) p {
    padding-left: 9.5rem;
  }
  #works-section li:nth-child(1) .image {
    bottom: -1.38rem;
  }
  #works-section li:nth-child(1) .image img {
    width: 15.5rem;
  }
  #works-section li:nth-child(4) .image {
    right: -8.17rem;
    top: -10.38rem;
  }
  #works-section li:nth-child(4) .image img {
    width: 22.7rem;
  }
  #works-section li:nth-child(5) .image {
    left: -6.3rem;
    bottom: -5.58rem;
  }
  #works-section li:nth-child(5) .image img {
    width: 29.1rem;
  }
  #works-section li:nth-child(5) p span {
    padding-left: 21.2rem;
    display: block;
  }
  #works-section li:nth-child(9) {
    height: auto;
  }
  #works-section li:nth-child(9) .image {
    left: -8.2rem;
    bottom: -6.08rem;
  }
  #works-section li:nth-child(9) .image img {
    width: 23.1rem;
  }
  #works-section li:nth-child(9) p span {
    padding-left: 8rem;
  }
  #works-section li:nth-child(10) {
    height: auto;
  }
  #works-section li:nth-child(10) .image {
    right: -2.6rem;
    bottom: -5.3rem;
  }
  #works-section li:nth-child(10) .image img {
    width: 23.9rem;
  }
}

/*# sourceMappingURL=index.css.map */