@charset "utf-8";

/*----------------------------------------------------------------------------------------------------

  Gallery Parts / ギャラリー・スタイル集などの設定

----------------------------------------------------------------------------------------------------　*/

.gallery{
  width: 1000px;
  margin: 100px auto 0px;
}

.gallery ul{
  display: flex;
  flex-wrap: wrap;
  margin: 50px 0px 0px;
}

.gallery ul li{
  width: 23%;
  margin: 0px 1% 20px;
}

.gallery ul li a img{
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 5px 5px 0px 0px #cfcfcf;
  transition: all 0.3s;
}

.gallery ul li a:hover img{
  box-shadow: 5px 5px 0px 0px #f39600;
  transition: all 0.3s;
  opacity: 0.7;
}

.spl-title{
  font-size: 1.6rem !important;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", Meiryo, sans-serif !important;
  text-align: center;
}

.spl-fullscreen{
  display: none !important;
}


@media only screen and ( max-width: 1019px ){
  .gallery{
    width: auto;
    margin: 50px 25px 0px;
  }

  .gallery ul{
    justify-content: space-between;
  }

  .gallery ul li{
    width: 49%;
    margin: 0px 0px 20px;
  }

  .gallery ul li img{
    height: auto;
  }

  .spl-title{
    font-size: 1.5rem !important;
  }
}


@media only screen and ( max-width: 640px ){
  .gallery{
    margin: 30px 15px 0px;
  }
}






.gallery2{
  width: 100%;
  margin: 100px auto;
}

.gallery2 ul{
  position: relative;
  margin: 20px 0px 0px;
  text-align: center;
}

.gallery2 ul li{
  width: auto;
  margin: 0px 15px;
  text-align: center;
}

.gallery2 ul li img{
  width: calc( 100% - 15px );
  height: 100%;
}

.gallery2 ul li a img{
  border-radius: 3px;
  box-shadow: 5px 5px 0px 0px #cfcfcf;
  transition: all 0.3s;
}

.gallery2 ul li a:hover img{
  box-shadow: 5px 5px 0px 0px #f39600;
  transition: all 0.3s;
  opacity: 0.7;
}