/* ================================*\
|   ぽよぽよアニメーション              |
\* ================================*/
.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
/* ================================*\
|   ぽよぽよアニメーション2              |
\* ================================*/
@keyframes poyopoyo02 {
  0% {
    transform: scale(0.85) rotate(-5deg);
  }
  15% {
    transform: scale(0.85)rotate(0deg);
  }
  35% {
    transform: scale(0.85)rotate(-5deg);
  }
  50% {
    transform: scale(0.85)rotate(0deg);
  }
  65% {
    transform: scale(0.85)rotate(-5deg);
  }
  70% {
    transform: scale(1.0)rotate(-5deg);
  }
  80% {
    transform: scale(0.85)rotate(-5deg);
  }
  90% {
    transform: scale(1.0)rotate(-5deg);
  }
  100% {
    transform: scale(0.85)rotate(-5deg);
  }
}
/* ================================*\
|   ふわふわ動くアニメーション           |
\* ================================*/
.floatV {
  -webkit-animation: floatV 2.5s ease-in-out infinite alternate;
  animation: floatV 2.5s ease-in-out infinite alternate;
}
@-webkit-keyframes floatV {
  0% {
    -webkit-transform: translate3d(0, -0.3em, 0);
            transform: translate3d(0, -0.3em, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0.3em, 0);
            transform: translate3d(0, 0.3em, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -0.3em, 0);
            transform: translate3d(0, -0.3em, 0);
  }
}
@keyframes floatV {
  0% {
    -webkit-transform: translate3d(0, -0.3em, 0);
            transform: translate3d(0, -0.3em, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0.3em, 0);
            transform: translate3d(0, 0.3em, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -0.3em, 0);
            transform: translate3d(0, -0.3em, 0);
  }
}
/* ================================*\
|   ボタンキラキラアニメーション         |
\* ================================*/
@-webkit-keyframes shine {
  0% {
    left: -200%;
    opacity: 0;
  }
  70% {
    left: -200%;
    opacity: 0.5;
  }
  71% {
    left: -200%;
    opacity: 1;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}
@keyframes shine {
  0% {
    left: -200%;
    opacity: 0;
  }
  70% {
    left: -200%;
    opacity: 0.5;
  }
  71% {
    left: -200%;
    opacity: 1;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}
.kirari .shine_inner {
  position: relative;
  overflow: hidden;
  display: block;
}
.kirari .shine_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url(../../img/base01/btn_try1980.webp); mask-image: url(../../img/base01/btn_try1980.webp);
  -webkit-mask-size: 100% auto; mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left top; mask-position: left top;
  display: block;
}
.kirari .shine {
  content: "";
  -webkit-animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  background-color: #fff;
  width: 140%;
  height: 100%;
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
  top: 0;
  left: -160%;
  opacity: 0.5;
  position: absolute;
  z-index: 1;
  display: block;
}

/* ================================*\
|   フェードアップアニメーション         |
\* ================================*/
.fadeup_trigger {
  opacity: 0;
}

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.0s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================*\
|   ぷるぷるアニメーション         |
\* ================================*/

@keyframes purupuru_anim {
  0% {  transform: translate(0, 0);}
  5% {  transform: translate(-5px, -0);}
  10% { transform: translate(5px, 0);}
  15% { transform: translate(-5px, -0);}
  20% { transform: translate(5px, 0);}
  25% { transform: translate(-5px, -0);}
  30% { transform: translate(0, 0);}
  100% {  transform: translate(0, 0);}
}

/*===============　手書き文字アニメーション ===============*/
.cls-1 {
  fill: none;
  isolation :isolate;;
  stroke-linecap :round;
  stroke-linejoin :round;
  stroke-width :6px;
}
.voice_item.handwriting_trigger .mask_line_01 {
  stroke-dasharray :6020px;
  animation: h-written-01 5s;
  stroke: #fff;
}
.voice_item.handwriting_trigger .mask_line_02 {
  stroke-dasharray:7260px;
  animation: h-written-02 5s;
  stroke: #fff;
}
.voice_item.handwriting_trigger .mask_line_03 {
  stroke-dasharray: 5090px;
  animation: h-written-03 5s;
  stroke: #fff;
}
.svg_text_01 {
  mask: url(#mask_01);
}
.svg_text_02 {
  mask: url(#mask_02);
}
.svg_text_03 {
  mask: url(#mask_03);
}
@keyframes h-written-01 {
  0% {
    stroke-dashoffset:6020px;
  }
  20% {
  stroke-dashoffset:6020px;
  }
  100% {
    stroke-dashoffset:0px;
  }
}
@keyframes h-written-02 {
  0% {
    stroke-dashoffset:7260px;
  }
  20% {
  stroke-dashoffset:7260px;
  }
  100% {
    stroke-dashoffset:0px;
  }
}
@keyframes h-written-03 {
  0% {
    stroke-dashoffset:5090px;
  }
  38% {
  stroke-dashoffset:5090px;
  }
  100% {
    stroke-dashoffset:0px;
  }
}

/*===============　きらっと光るアニメーション ===============*/
.shine {
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  display: inline-block;
}
@-webkit-keyframes shine {
  0% {
    left: -200%;
    opacity: 0;
  }
  70% {
    left: -200%;
    opacity: 0.5;
  }
  71% {
    left: -200%;
    opacity: 1;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}
@keyframes shine {
  0% {
    left: -200%;
    opacity: 0;
  }
  70% {
    left: -200%;
    opacity: 0.5;
  }
  71% {
    left: -200%;
    opacity: 1;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}
.shine::before {
  content: "";
  -webkit-animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  background-color: #fff;
  width: 100%;
  height: 79%;
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
  bottom: 0;
  left: -160%;
  opacity: 0.5;
  position: absolute;
}

/*===============　拡大縮小アニメーション ===============*/
.breathing {
  animation: breathing 6s infinite;
}
@keyframes breathing {
  0% {
    transform: scale(1, 1);
    transform-origin: center bottom;
  }
  40% {
    transform: scale(1.03, 1.03);
    transform-origin: center bottom;
  }
  70% {
    transform: scale(1, 1);
    transform-origin: center bottom;
  }
}

/*===============　揺れるアニメーション ===============*/
.fuwafuwa {
  animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
  transition: 1.5s ease-in-out;
  margin-top: 15px;
}
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-4deg);
    transform-origin: center bottom;
  }
  50% {
    transform:translate(0, -2px) rotate(0deg);
    transform-origin: center bottom;
  }
  100% {
    transform:translate(0, 0) rotate(4deg);
    transform-origin: center bottom;
  }
}

/*===============　ジャンプするアニメーション ===============*/
.jump_01 {
  animation: jump_01 5s linear infinite;
}
@keyframes jump_01 {
  0%, 7% {
    transform: translateY(0);
  }
  17% {
    transform: translateY(-6px);
  }
  25% {
    transform: translateY(2px);
  }
  33% {
    transform: translateY(-4px);
  }
  41% {
    transform: translateY(2px);
  }
  46%, 100% {
    transform: translateY(0);
  }
}
.jump_02 {
  animation: jump_02 6s linear infinite;
}
@keyframes jump_02 {
  0%, 47.5% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
  52.5% {
    transform: translateY(2px);
  }
  55% {
    transform: translateY(-4px);
  }
  57.5% {
    transform: translateY(2px);
  }
  60%, 100% {
    transform: translateY(0);
  }
}
/*===============　ズームイン ===============*/
.zoomIn{
	animation-name:zoomInAnime;
	animation-duration:0.6s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.5);
  }

  to {
      transform: scale(1);
  }
}
/*===============　アニメーションディレイ ===============*/
.delay-time02 {
  animation-delay: .2s;
}
.delay-time04 {
  animation-delay: .4s;
}
.delay-time06 {
  animation-delay: .6s;
}
.delay-time08 {
  animation-delay: .8s;
}
.delay-time10 {
  animation-delay: 1.0s;
}
.delay-time12 {
  animation-delay: 1.2s;
}
.delay-time14 {
  animation-delay: 1.4s;
}
.delay-time20 {
  animation-delay: 2.0s;
}
/*===============　上から下にフェードイン ===============*/
.fadeDown{
  animation-name:fadeDownAnime;
  animation-duration:.8s;
  animation-fill-mode:forwards;
  opacity:0;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
    transform: translateY(0);
  }

  to {
    opacity: 1;
    transform: translateY(30px);
  }
}
/*===============　ゆらゆら揺れる ===============*/
.yurayura{
  transform-origin: center bottom;
  animation: yurayuraAnime 2s linear infinite;
}
@keyframes yurayuraAnime{
  0% , 100%{
      transform: rotate(5deg);
  }
  50%{
      transform: rotate(-5deg);
  }
}
/*===============　ドクドクと大小を繰り返す ===============*/
.dokudoku{
	animation: dokudokuAnime 1s ease 0s alternate;
  transform-origin:center;
}
@keyframes dokudokuAnime{
  0% , 100% {
    transform: scale(1,1);
  }
  50% {
    transform: scale(0.7,0.7);
  }
}
/*===============　左側から徐々に表示 ===============*/
.fadeInLeft_trigger {
  overflow: hidden;
  position: relative;
}
.fadeInLeft::before {
  animation: fadeInLeft 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
@keyframes fadeInLeft {
  100% {
    transform: translateX(100%);
  }
}

@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
  opacity: 0;
}