@charset "utf-8";

#works_content h1{
  width:150px;
  margin:0 auto 50px;
}
h2.worksh2{
  margin:0 auto 30px;
  position: relative;
  padding: 0 65px;
  text-align: center;
}
h2.worksh2:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #000;
}

h2.worksh2 span {
  position: relative;
  padding: 0 1em;
  background: #fff;
}

/* ギャラリー */
/* 2列 */
.gallery2l{
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
  list-style:none;
  margin-bottom:100px;
}
.gallery2l li {
  width:50%;
  padding:5px;
}
/* 3列 */
.gallery3l{
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
  list-style:none;
  margin-bottom:100px;
}
.gallery3l li {
  width:33%;
  padding:5px;
}
.gallery3l:after{
  content: "";
  display: block;
  width: 33%;  /* .boxに指定したwidthと同じ幅を指定する */
  height: 0;
}
/* 列数指定なし */
.gallery{
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
  list-style:none;
  margin-bottom:100px;
}
.gallery li {
  width:25%;
  padding:5px;
}
.gallery img{
  width:100%;
  height:auto;
  vertical-align: bottom;/*画像の下にできる余白を削除*/
}
.gallery:after{
  content: "";
  display: block;
  width: 25%;  /* .boxに指定したwidthと同じ幅を指定する */
  height: 0;
}
/* moreボタン */
.btn a{
  font-size:1.2em;
  display: block;
  margin:0 auto;
  width:420px;
  padding:20px;
  border-radius:5px;
  border:solid 1px #8e8d8d;
  text-align: center;
}
.btn a:hover{
  opacity: 0.4;
}
/* 横幅900px以下の段組み設定 */
@media only screen and (max-width: 900px) {
  .gallery2l li,.gallery3l li{
    width:50%;
  }
  .gallery li {
    width:50%;
  }
  .gallery:after{
    content: "";
    display: block;
    width: 50%;
    height: 0;
  }
  .btn a{
    width:90%;
    padding:15px;
  }
}

/*表示設定*/
.gallery a{
  color: #333;
}
.gallery a:hover,
.gallery a:active{
  text-decoration: none;
}
.gallery p{
  margin:0 10px 10px 10px;
  word-wrap : break-word;
}