@charset "utf-8";
/*==================================================
ギャラリーのためのcss
===================================*/
.gallery{
columns: 4;/*段組みの数*/
padding:50px 10px 100px 10px;/*ギャラリー左右に余白をつける*/
margin:0;
}

.gallery li {
    margin-bottom: 10px;/*各画像下に余白をつける*/
list-style:none;
}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/}

/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
	.gallery{
	columns:3;
	}
}

@media only screen and (max-width: 768px) {
	.gallery{
	columns: 2;
	}
}

}

.gallery img{
	opacity:1;
	-webkit-transition:.2s ease-in-out;
	transition:.2s ease-in-out;
}
.gallery a:hover img{
	opacity: .4;
}