@charset "UTF-8";
/* CSS Document */


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

/* Photo Gallery */

/* ----------------------------------------------------------------------- */
#lightgallery {
	width: 760px;
	margin: auto;
	display: -webkit-flex;
	display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	align-content: flex-start;
	margin-bottom: 50px;
	background-color: white;
	padding: 20px 20px 17px 20px;
	box-shadow:2px 2px 3px #898f88;
}

#lightgallery img{
	width: 190px;
	height: 126px;
	margin-top: -3px;
 	 -webkit-filter: grayscale(100%);
  	filter: grayscale(100%);
  	-webkit-transition: .3s ease-in-out;
  	transition: .3s ease-in-out;
}

#lightgallery img:hover {
 	-webkit-filter: grayscale(0);
  	filter: grayscale(0);
}

figure {
  position: relative;
  overflow: hidden;
  width: 190px;
}
figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
}
figure:hover figcaption {
  opacity: 1;
}

.lg-actions .lg-next, .lg-actions .lg-prev {
  z-index: 9999 !important;
}

.lg-toolbar {
  z-index: 9999 !important;
}

.lg-sub-html {
  z-index: 9999 !important;
}

.lg-outer .lg-thumb-outer {
  z-index: 9999 !important;
}

.lg-outer .lg-video .lg-video-play {
  z-index: 9999 !important;
}

.lg-progress-bar {
  z-index: 9999 !important;
}

.lg-outer .lg-pager-outer {
  z-index: 9999 !important;
}

.lg-outer #lg-dropdown-overlay {
  z-index: 9999 !important;
}

.lg-outer {
  z-index: 9999 !important;
}

.lg-outer .lg-item.lg-current {
  z-index: 9999 !important;
}

.lg-backdrop {
  z-index: 9999 !important;
}

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

/* Photo Gallery（レスポンシブ） */

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

@media screen and (max-width: 767px) {
	
#lightgallery {
	width: 55%;
	margin: auto;
	display: -webkit-flex;
	display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	margin-bottom: 60px;
	
}

#lightgallery img{
	width: 100%;
	height: auto;
}
}