/* ふわっと下から表示 */
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(30px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* ふわっと右から表示 */
.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 円形表示 */
.text-line-left:before {
	background: #df0000;
}
.img-wrap1 {
  animation: img-wrap1 5s cubic-bezier(.4, 0, .2, 1);
}
@keyframes img-wrap1 {
  0% {
    clip-path: circle(0 at 50% 50%);
    -webkit-clip-path: circle(0 at 50% 50%);
  }
  100% {
    clip-path: circle(100% at 50% 50%);
    -webkit-clip-path: circle(100% at 50% 50%);
  }
}

/* 上下交互表示 */
.img-wrap2 {
  overflow: hidden;
  position: relative;
}

.img-wrap2:before,
.img-wrap2:after {
  animation: 5s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 1;
}
.img-wrap2:before {
  animation-name: img-wrap-before2;
  left: 0;
  right: 50%;
}
.img-wrap2:after {
  animation-name: img-wrap-after2;
  left: 50%;
  right: 0;
}
@keyframes img-wrap-before2 {
  100% {
    transform: translateY(100%);
  }
}
@keyframes img-wrap-after2 {
  100% {
    transform: translateY(-100%);
  }
}

/* 上下交互表示 */
.img-wrap3 {
  overflow: hidden;
  position: relative;
}

.img-wrap3:before,
.img-wrap3:after {
  animation: 5s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 1;
}
.img-wrap3:before {
  animation-name: img-wrap-before3;
  left: 50%;
  right: 0%;
}
.img-wrap3:after {
  animation-name: img-wrap-after3;
  left: 0%;
  right: 50%;
}
@keyframes img-wrap-before3 {
  100% {
    transform: translateY(100%);
  }
}
@keyframes img-wrap-after3 {
  100% {
    transform: translateY(-100%);
  }
}

/* 左右交互表示 */
.img-wrap4 {
  overflow: hidden;
  position: relative;
}
.img-wrap4:before,
.img-wrap4:after {
  animation: 5s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 1;
}
.img-wrap4:before {
  animation-name: img-wrap-before4;
  top: 0;
  bottom: 50%;
}
.img-wrap4:after {
  animation-name: img-wrap-after4;
  top: 50%;
  bottom: 0;
}
@keyframes img-wrap-before4 {
  100% {
    transform: translateX(100%);
  }
}
@keyframes img-wrap-after4 {
  100% {
    transform: translateX(-100%);
  }
}

/* 浮き上がり */
.popup-img{
  border: 1px solid #ddd;
  margin: 20px auto 0;
  transition-duration: 1.0s;
}
.popup-img img{
  width: 100%;
  cursor: pointer;
}
.popup-img:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}

/* 横回転 */
.said-img{
  margin: 0 auto;
  overflow: hidden;
}
.said-img img{
  width: 100%;
  cursor: pointer;
}
.said-img:hover img{
  transform: rotateY( 360deg );
  transition-duration: 1.0s;
}

/* セピア */
.sepia-img {
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}
.sepia-img img {
  transition: 1.0s ease-in-out;
}
.sepia-img:hover img {
  filter: sepia(100%);
}

/* ズームイン */
.zoom-in-img1 {
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}
.zoom-in-img1 img {
  transform: scale(1);
  transition: 1.0s ease-in-out;
}
.zoom-in-img1:hover img {
  transform: scale(1.3);
}

/* ズームインと傾け */
.zoom-in-img2{
  border: 1px solid #ddd;
  margin: 0 auto;
  overflow: hidden;
}
.zoom-in-img2 img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.7s;
}
.zoom-in-img2 img:hover{
  transform: scale(1.2) rotate(9deg);
  transition-duration: 0.7s;
}


/* ぶるぶる */
.puru1 {
    animation: puru1 0.75s infinite;
}
@keyframes puru1 {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(0.98, 0.95)
    }
}

.puru2 {
    animation: puru2 1.5s infinite;
}
@keyframes puru2 {
    0% {
        transform: scale(1, 0.95);
    }
    20% {
        transform: scale(0.95, 1.1);
    }
    95% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 0.95);
    }
}