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



/* Gallery
---------------------------*/

#work .gallery {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 752px;
	max-width: 103%;
	margin: 0 auto 32px auto;
}

#work .gallery article {
	-moz-transition: -moz-transform 1s ease, opacity 1s ease;
	-webkit-transition: -webkit-transform 1s ease, opacity 1s ease;
	-ms-transition: -ms-transform 1s ease, opacity 1s ease;
	transition: transform 1s ease, opacity 1s ease;
	-moz-transform: translateX(0);
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	width: 50%;
	position: relative;
	opacity: 1.0;
}

#work .gallery .img {
	margin: 0;
	display: block;
	padding-right:10px;
}


#work .gallery.inactive article {
	opacity: 0;
}

#work .gallery.inactive article.from-left {
	-moz-transform: translateX(-224px);
	-webkit-transform: translateX(-224px);
	-ms-transform: translateX(-224px);
	transform: translateX(-224px);
}

#work .gallery.inactive article.from-right {
	-moz-transform: translateX(224px);
	-webkit-transform: translateX(224px);
	-ms-transform: translateX(224px);
	transform: translateX(224px);
}

#work .gallery.inactive article.from-top {
	-moz-transform: translateY(-112px);
	-webkit-transform: translateY(-112px);
	-ms-transform: translateY(-112px);
	transform: translateY(-112px);
}

#work .gallery.inactive article.from-bottom {
	-moz-transform: translateY(112px);
	-webkit-transform: translateY(112px);
	-ms-transform: translateY(112px);
	transform: translateY(112px);
}




/* Main
---------------------------*/
#work .content {
    width: 1000px;
    max-width: calc(100% - 64px);
    margin: 0 auto;
    padding: 50px 0;
}
#work .main.style3 {
	text-align: center;
	padding: 96px 0 96px 0;
}

#work .main.style3 .content > header {
	margin-bottom: 32px;
}

#work {
	background: #c4d23d;
}



#work .gallery img{
    padding: 10px;    
}

#work .gallery a{
    display: block;
    cursor: pointer;
    transition-duration: 0.5s;
}

.img_wrap{
  width: 360px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
}
.img_wrap img{
  width: 100%;
  transition-duration: 0.5s;
}
.img_wrap:hover img{
  transform: scale(1.2);
  transition-duration: 0.5s;
}

/* =============================================
	SP
============================================= */


@media screen and (max-width: 736px) {
	#work .main.style3 {
		text-align: center;
		padding: 48px 10px 48px 10px;
	}
}


@media screen and (max-width: 480px) {
/* Gallery
---------------------------*/
	#work .gallery {
		-moz-flex-wrap: nowrap;
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	
	#work .gallery article {
		width: 100%;
	}

}