@charset "utf-8";

#main {
  margin: 0 0 20px;
}

#main p {
  margin: 40px 0 25px;
  font-size: 18px;
  color: #666666;
}

.worksList {
  margin: 0 0 40px;
}

.worksList h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 20px;
}

.worksList ul li {
  text-align: center;
}

.worksList ul li img {
  width: 100%;
}

.fashion ul {
  display: flex;
  flex-wrap: wrap;
  margin-right: -20px;
}

.fashion ul li {
  width: calc(25% - 20px);
  margin: 0 20px 20px 0;
}

.beauty ul {
  display: flex;
  flex-wrap: wrap;
  margin-right: -20px;
}

.beauty ul li {
  width: calc(25% - 20px);
  margin: 0 20px 20px 0;
}

.makeNail ul {
  display: flex;
  flex-wrap: wrap;
  margin-right: -40px;
}

.makeNail ul li {
  width: calc(25% - 20px);
  margin: 0 20px 20px 0;
}

.fashion h2,
.fashion dl dt i,
.fashion ul li i {
  color: #f5678f;
}

.beauty h2,
.beauty dl dt i,
.beauty ul li i {
  color: #BB8DBE;
}

.makeNail h2,
.makeNail dl dt i,
.makeNail ul li i {
  color: #fc8c00;
}


@media screen and (max-width : 640px) {
  #main {
    padding: 0 10px;
    margin: 0 0 40px;
  }

  .worksList {
    margin: 0 0 20px;
  }

  .fashion ul li {
    width: calc(50% - 20px);
    margin: 0 20px 20px 0;
  }

  .beauty ul li {
    width: calc(50% - 20px);
    margin: 0 20px 20px 0;
  }

  .bridal ul li {
    width: calc(50% - 20px);
    margin: 0 20px 20px 0;
  }

  .makeNail ul {
    margin-right: -20px;
  }

  .makeNail ul li {
    width: calc(50% - 20px);
    margin: 0 20px 20px 0;
  }

  .simplebox {
    pointer-events: none;
  }
}