@charset "UTF-8";
/* CSS Document */
.body {
  background-color: #F9F7F6;
}
.title {
  font-size: 3.6rem;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.title span {
  font-size: 1.4rem;
  color: #615143;
  padding-left: 10px;
}
@media (max-width:1200px) {
  .title {
    padding-left: 40px;
  }
}
@media (max-width:630px) {
  .title {
    padding-left: 0px;
  }
}
.works_detail_title {
  text-align: left;
  max-width: 1280px;
  padding: 0 40px;
  margin: 90px auto 0;
}
.works_detail_title h2 {
  font-size: 3.6rem;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.works_detail_title p {
  color: #615143;
  font-size: 1.4rem;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  margin: 20px 0 60px;
}
.works_detail_text {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  text-align: left;
  max-width: 1280px;
  margin: 100px auto 40px;
  padding: 0 40px;
}
.works_detail_text h3 {
  font-size: 2.8rem;
  font-weight: 400;
  margin-bottom: 20px;
  -webkit-font-smoothing: antialiased;
}
.works_detail_main_img {
  max-width: 1280px;
  padding: 0 40px;
  margin: 0 auto;
}
.works_detail_main_img img {
  width: 100%;
}
.gallery {
  columns: 3; /*段組みの数*/
  padding: 0 40px; /*ギャラリー左右に余白をつける*/
  margin: 20px auto 0;
  max-width: 1280px;
}
.gallery li {
  margin-bottom: 20px; /*各画像下に余白をつける*/
  list-style: none;
}
.gallery li a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.gallery li a:hover img {
  transform: scale(1.05, 1.05);
  transition: 0.5s all;
}
.gallery li a:hover::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.10);
  background-image: radial-gradient(rgba(153, 153, 153, 0.52) 33%, transparent 36%);
  background-size: 2px 2px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  opacity: 1;
  transition: 0.5s all;
}
/*ギャラリー内のイメージは横幅100%にする*/
.gallery img {
  width: 100%;
  height: auto;
  vertical-align: bottom; /*画像の下にできる余白を削除*/
}
/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
  .gallery {
    columns: 2;
  }
}
@media only screen and (max-width: 630px) {
  .works_detail_title {
    padding: 0 15px;
    margin-top: 50px;
  }
  .works_detail_title h2 {
    font-size: 2.8rem;
  }
  .works_detail_text {
    padding: 0 15px;
  }
  .works_detail_main_img {
    padding: 0 15px;
  }
  .gallery {
    columns: 1; /*段組みの数*/
    padding: 0 15px; /*ギャラリー左右に余白をつける*/
  }
  .lightbox2 {
    pointer-events: none;
  }
}