@charset"UTF-8";
/*---------------------
      アニメーション
-----------------------*/

/*消えている*/
.dis_non {
  display: none;
}

/*最初消しておく*/
.on_show {
  visibility: hidden;
}






/*アニメーション回数*/
.anime_tm_01 {
  /* 1回アニメーションする */
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.anime_tm_02 {
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
}

.anime_tm_03 {
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
}

.anime_tm_endless {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}


/*アニメーション速度*/
.anime_sp_1s {
  /* 1秒かけてアニメーションする */
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.anime_sp_2s {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.anime_sp_3s {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

.anime_sp_4s {
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}

.anime_sp_5s {
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
}


/*アニメーション進行割合*/
.anime_sp_ease {
  /*スムーズに（デフォルト)*/
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
}

.anime_sp_linear {
  /*一定*/
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}

.anime_sp_ease-in {
  /*ゆっくり始まる*/
  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
}

.anime_sp_ease-in {
  /*ゆっくり終わる*/
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
}

.anime_sp_ease-in {
  /*ゆっくり始まり、ゆっくり終わる*/
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
}

/*アニメーション待ち*/
.anime_wt_1s {
  /* 1秒待ってからアニメーションする */
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.anime_wt_2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.anime_wt_3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.anime_wt_4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.anime_wt_5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

/*アニメーション後*/
/*元のスタイル*/
.anime_after_none {
  animation-fill-mode: none;
}

/*動作後のスタイル*/
.anime_after_forwards {
  animation-fill-mode: forwards;
}

/*動作前のスタイル*/
.anime_after_backwards {
  animation-fill-mode: backwards;
}

/*動作前＆後のスタイル*/
.anime_after_both {
  animation-fill-mode: both;
}

/*---独自アニメーション--*/
/*************
.animate__bounceIn_bt　/　ボタン用バウンスインアニメ
*************/
/*動作時間*/
.animate__bounceIn_bt {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceIn_bt;
  animation-name: bounceIn_bt;
}

/*動作内容*/
@-webkit-keyframes bounceIn_bt {

  /* 0% {
            opacity: 0;
            -webkit-transform: scale(.3);
        }

        50% {
            opacity: 1;
            -webkit-transform: scale(1.05);
        } */
  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

@keyframes bounceIn_bt {
  /* 0% {
            opacity: 0;
            transform: scale(.3);
        }

        50% {
            opacity: 1;
            transform: scale(1.05);
        } */

  70% {
    transform: scale(.9);
  }

  100% {
    transform: scale(1);
  }
}





/*************
.blinking　/　点滅アニメ
*************/
/* 点滅 */
.blink_clear {
  -webkit-animation: blink_clear 0.5s ease-in-out infinite alternate;
  -moz-animation: blink_clear 0.5s ease-in-out infinite alternate;
  animation: blink_clear 0.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink_clear {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink_clear {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes blink_clear {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*************
.ZoomUpImg　/　拡大画像
*************/
.ZoomUpImg {
  -webkit-animation-name: ZoomUpImg_ani;
  animation-name: ZoomUpImg_ani;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  transition-timing-function: ease-out;
}

@-webkit-keyframes ZoomUpImg_ani {
  from {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  80% {
    opacity: 0.8;
    -webkit-transform: scale3d(1.4, 1.4, 1.4);
    transform: scale3d(1.4, 1.4, 1.4);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
  }
}

@keyframes ZoomUpImg_ani {
  from {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  80% {
    opacity: 0.8;
    -webkit-transform: scale3d(1.4, 1.4, 1.4);
    transform: scale3d(1.4, 1.4, 1.4);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
  }
}


/*************
.CircleSquareImg　/　変形
*************/
.hov_CircleSquareImg {
  border-radius: 0 !important;
}

.hov_CircleSquareImg img {
  border-radius: 50%;
}

.CircleSquareImg {
  -webkit-animation-name: CircleSquareImg_ani;
  animation-name: CircleSquareImg_ani;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  transition-timing-function: ease-out;
  border-radius: 50%;
}

@-webkit-keyframes CircleSquareImg_ani {
  from {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    border-radius: 50%;
  }

  80% {
    opacity: 0.8;
    -webkit-transform: scale3d(1.4, 1.4, 1.4);
    transform: scale3d(1.4, 1.4, 1.4);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
    border-radius: 0;
  }
}

@keyframes CircleSquareImg_ani {
  from {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    border-radius: 50%;
  }

  80% {
    opacity: 0.8;
    -webkit-transform: scale3d(1.4, 1.4, 1.4);
    transform: scale3d(1.4, 1.4, 1.4);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
    border-radius: 0;
  }
}

/*************
.hoverUpImg/　
*************/
.hoverUpImg {
  -webkit-animation-name: hoverUpImg_ani;
  animation-name: hoverUpImg_ani;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  transition-timing-function: ease-out;
  position: relative;
}

@-webkit-keyframes hoverUpImg_ani {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  80% {
    opacity: 0.9;
    -webkit-transform: translate3d(0, 3px, 0);
    transform: translate3d(0, 3px, 0);
    box-shadow: 0px 10px 6px -4px rgba(0, 0, 0, 0.6);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 2px, 0);
    transform: translate3d(0, 2px, 0);
    box-shadow: 0px 7px 6px -4px rgba(0, 0, 0, 0.6);
  }
}

@keyframes hoverUpImg_ani {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  80% {
    opacity: 0.9;
    -webkit-transform: translate3d(0, 3px, 0);
    transform: translate3d(0, 3px, 0);
    box-shadow: 0px 10px 6px -4px rgba(0, 0, 0, 0.6);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 2px, 0);
    transform: translate3d(0, 2px, 0);
    box-shadow: 0px 7px 6px -4px rgba(0, 0, 0, 0.6);
  }
}