@charset 'utf-8';
/* ======================================================
CSS information

 File Name  : works.css
 Style Info : 「実績一覧」のCSS
====================================================== */

.works-box {
  margin-bottom: 3em;
}

.works-box:last-child {
  margin-bottom: 0;
}

.works-box .works-title {
  margin-bottom: 1em;
  font-size: 1.6rem;
  line-height: 1.7;
  text-align: center;
}

.works-box .img-box {
  margin-bottom: 3em;
}

.works-box .main-img {
  margin-bottom: 1%;
}

.works-box .thumb-img.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.works-box .thumb-img.flex::after {
  content: '';
  display: block;
  width: calc(98% / 3);
}

.works-box .thumb-img.flex li {
  position: relative;
  width: calc(98% / 3);
}

.works-box .thumb-img.flex li::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.works-box .thumb-img.flex li img {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* 768px～（タブレット）
------------------------------------------------------ */
@media screen and (min-width: 768px) {
  .works-box {
    margin-bottom: 4em;
  }

  .works-box .works-title {
    font-size: 1.8rem;
  }

  .works-box .img-box {
    margin-bottom: 4em;
  }

  .works-box .img-box.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .works-box .main-img {
    margin-bottom: 0;
    width: 81.5%;
  }

  .works-box .thumb-img {
    width: 17.5%;
  }

  .works-box .thumb-img.flex {
    display: block;
  }

  .works-box .thumb-img.flex::after {
    display: none;
  }

  .works-box .thumb-img.flex li {
    margin-bottom: .3em;
    width: 100%;
  }

  .works-box .thumb-img.flex li:last-child {
    margin-bottom: 0;
  }
}

/* 960px～（パソコン）
------------------------------------------------------ */
@media screen and (min-width: 960px) {
  .works-box {
    margin-bottom: 5em;
  }

  .works-box .works-title {
    font-size: 2rem;
  }

  .works-box .img-box {
    margin-bottom: 5em;
  }

  .works-box .main-img {
    width: 81%;
  }

  .works-box .thumb-img {
    width: 17%;
  }

  .works-box .thumb-img.flex li {
    margin-bottom: 1em;
  }
}