@charset "UTF-8";
/* Scss Document */
/*=============================================================
 ami_lightSpeedIn
=============================================================*/
.ani_lightSpeedIn p,
.ani_lightSpeedIn img,
.ani_bounceIn p,
.ani_bounceIn img {
  opacity: 0; }
.ani_lightSpeedIn.lightSpeedIn p,
.ani_lightSpeedIn.lightSpeedIn img, .ani_lightSpeedIn.bounceIn p,
.ani_lightSpeedIn.bounceIn img,
.ani_bounceIn.lightSpeedIn p,
.ani_bounceIn.lightSpeedIn img,
.ani_bounceIn.bounceIn p,
.ani_bounceIn.bounceIn img {
  opacity: 1; }

/*=============================================================
 左から徐々に表示
=============================================================*/
.img-wrap-left {
  overflow: hidden;
  position: relative; }
  .img-wrap-left img,
  .img-wrap-left p {
    opacity: 0; }
  .img-wrap-left.left:before {
    animation: img-wrap-left 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    background: #fff;
    bottom: 0;
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1; }
  .img-wrap-left.left img,
  .img-wrap-left.left p {
    opacity: 1; }
  .img-wrap-left.right:before {
    animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    background: #fff;
    bottom: 0;
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1; }
  .img-wrap-left.right img {
    opacity: 1; }

@keyframes img-wrap-left {
  0% {
    opacity: 1; }
  100% {
    transform: translateX(100%); } }
/*=============================================================
 右から徐々に表示
=============================================================*/
.img-wrap-right {
  overflow: hidden;
  position: relative; }
  .img-wrap-right img,
  .img-wrap-right p {
    opacity: 0; }
  .img-wrap-right.right:before {
    animation: img-wrap-right 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    background: #fff;
    bottom: 0;
    content: '';
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1; }
  .img-wrap-right.right img,
  .img-wrap-right.right p {
    opacity: 1; }

@keyframes img-wrap-right {
  100% {
    transform: translateX(-100%); } }
/*=============================================================
中心から円形に広がる
=============================================================*/
.img-wrap-circle {
  overflow: hidden;
  position: relative; }
  .img-wrap-circle img,
  .img-wrap-circle p {
    opacity: 0; }
  .img-wrap-circle.circle {
    animation: img-wrap-circle 2s cubic-bezier(0.4, 0, 0.2, 1); }
    .img-wrap-circle.circle img,
    .img-wrap-circle.circle p {
      opacity: 1; }

@keyframes img-wrap-circle {
  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%); } }