@charset "utf-8";

/* CSS Document */

/* ---------------施工例一覧------------------ */

.ttlWp {
  background: url(img/titlbg.jpg) center center no-repeat;
  background-size: cover;
}

.listBox,
.wp-pagenavi {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 30px;
  padding-top: 30px;
  text-align: left;
}

.workItem {
  margin-bottom: 60px;
  margin-right: 5%;
  width: 30%;
}

.workItem:nth-child(3n+0) {
  margin-right: 0;
}

.workItem a {
  display: block;
  text-decoration: none;
}

.workItem .workTit {
  line-height: 1.6;
	padding-block: 5px 10px;
	padding-inline: 10px;
  text-align: center;
}

.workItem a:hover img {
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);
}

.workItem img {
  height: auto;
  transition: .5s;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .listBox,
  .wp-pagenavi {
    margin: 0 auto 30px;
    padding-top: 0;
    width: 90%;
  }

  .workItem {
    margin-bottom: 20px;
    margin-right: 4%;
    width: 48%;
  }

  .workItem:nth-child(3n+0) {
    margin-right: 4%;
  }

  .workItem:nth-child(2n+0) {
    margin-right: 0;
  }

  .workItem .workTit {
    padding-block: 5px 10px;
    padding-inline: 10px;
  }
}

/* ---------------施工例詳細------------------ */

.ldBx {
  margin: 0 auto 60px;
  width: 80%;
}

.ttlWork {
  font-size: 36px;
  letter-spacing: .1em;
  line-height: 1.5;
  margin-bottom: 1.5em;
  text-align: center;
}

.sp-slide {
  width: 100% !important;
}

.sp-image-container {
  text-align: center;
  width: 100% !important;
}

.sp-image-container .sp-image {
  display: inline;
}

.sp-selected-thumbnail {
  border: #3cced1 solid 5px;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .ttlWork {
    font-size: 16px;
  }

  .ldBx {
    margin: 0 auto 30px;
    width: 90%;
  }

  .sp-selected-thumbnail {
    border: #3cced1 solid 3px;
  }
}

#lineup {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

#lineup .etcTit {
  flex-basis: 100%;
}

.wp-pagenavi > * {
  display: inline-block;
  margin: 0 1em 1em 0;
  padding: 1em;
  text-decoration: none;
}

.wp-pagenavi > a {
  background: #3cced1;
  color: #fff;
  transition: .5s;
}

.wp-pagenavi > a:hover {
  transform: scale(1.05);
}