@charset "utf-8";
/*========= レイアウトのためのCSS ===============*/
ul{
margin:0;padding: 0;list-style: none;
}
/*画像を出現させるアニメーションCSS*/
.flipLeft{
animation-name: flipLeft;
animation-duration:3.0s;
animation-fill-mode:forwards;
perspective-origin: left center;
opacity: 0;}
@keyframes flipLeft{
from {
transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
opacity: 0;
}
to {
transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
opacity: 1;
}
}
/*==================================================
ギャラリーのためのcss
===================================*/
.month{margin: 20px auto;}

.gallery{
  columns: 4;/*段組みの数*/padding:0 150px;/*ギャラリー左右に余白をつける*/
  margin: 0px 0px 0 0px;}
.gallery li {
  margin-bottom: 15px;/*各画像下に余白をつける*/}
/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
  width:150px;height:80px;/*拡大前（サムネール）の画像の大きさ*/
  vertical-align: bottom;/*画像の下にできる余白を削除*/}

/*==================================================
レスポンシブ
===================================*/
@media screen and (max-width:1500px)
{

.gallery{
  columns: 4;/*段組みの数*/padding:0 150px;/*ギャラリー左右に余白をつける*/
  margin: 0px 0px 0 0px;}
.gallery li {
  margin-bottom: 15px;/*各画像下に余白をつける*/}
/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
  width:150px;height:60px;/*拡大前（サムネール）の画像の大きさ*/
  vertical-align: bottom;/*画像の下にできる余白を削除*/}
}

@media only screen and (max-width: 1200px) {

.gallery{
	  columns: 4;/*段組みの数*/padding:10px 20px;/*ギャラリー左右に余白をつける*/
	  margin: -10px 0px 0 0px;}
.gallery li {
	  margin-bottom: 15px;/*各画像下に余白をつける*/}
/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
	  width:120px;height:60px;/*拡大前（サムネール）の画像の大きさ*/
	  vertical-align: bottom;/*画像の下にできる余白を削除*/}
}

@media only screen and (max-width: 650px) {
.month{margin: 10px auto;}

.gallery{
	  columns: 4;/*段組みの数*/padding:0 10px;/*ギャラリー左右に余白をつける*/
	  margin: 0px 0px 0 0px;}
.gallery img{
    width:150px;height:60px;
    vertical-align: bottom;/*画像の下にできる余白を削除*/}
}

@media only screen and (max-width: 550px) {

.gallery{
	  columns: 4;/*段組みの数*/padding:0 50px;/*ギャラリー左右に余白をつける*/
	  margin: -5px 0px 0 0px;}
.gallery img{
    width:100px;height:40px;
    vertical-align: bottom;/*画像の下にできる余白を削除*/}
}

@media only screen and (max-width: 450px) {
.month{margin: 0px auto 0;}
.gallery{
	  columns: 4;/*段組みの数*/padding:0 50px;/*ギャラリー左右に余白をつける*/
	  margin: -5px 0px 0 0px;}
.gallery img{
    width:100px;height:40px;
    vertical-align: bottom;/*画像の下にできる余白を削除*/}
}

@media only screen and (max-width: 321px) {
.month{margin: 18px auto 0;}
.gallery{
  	  columns: 4;/*段組みの数*/padding:0 50px;/*ギャラリー左右に余白をつける*/
  	  margin: -15px -5px 0 -5px;}
.gallery img{
      width:70px;height:25px;
      vertical-align: bottom;/*画像の下にできる余白を削除*/}
}