@charset "utf-8";

body , html {
  font-family: "Kosugi Maru", sans-serif;
  background: #f6f6f6;
}

/*==================================================
ギャラリーのためのcss
===================================*/
.gallery {
  columns: 5;/*段組みの数*/
  padding: 30px;/*ギャラリー左右に余白をつける*/
  @media only screen and (max-width: 900px) {columns: 3;}
  @media only screen and (max-width: 768px) {columns: 2;}
  li {
    margin-bottom: 20px;/*各画像下に余白をつける*/
    img{
      width:100%;
      height:auto;
      vertical-align: bottom;/*画像の下にできる余白を削除*/
    }
  }
}

/*==================================================
ギャラリーのためのcss
===================================*/
.results {
  columns: 5;/*段組みの数*/
  padding: 30px;/*ギャラリー左右に余白をつける*/
  @media only screen and (max-width: 900px) {columns:3;}
  @media only screen and (max-width: 768px) {columns: 2;}
  li {
    margin-bottom: 20px;/*各画像下に余白をつける*/
    img{
      width:100%;
      height:auto;
      vertical-align: bottom;/*画像の下にできる余白を削除*/
    }
  }
}
/*========= レイアウトのためのCSS ===============*/

ul {
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

a {
  color: #333;
}

a:hover,
a:active {
  text-decoration: none;
}

h1 {
  text-align: center;
  font-size: 2vw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 100px 0 20px;
}

p {
  text-align: center;
  word-wrap : break-word;
}

/*画像を出現させるアニメーションCSS*/

.flipLeft{
  animation-name: flipLeft;
  animation-duration:0.5s;
  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;
  }
}