@charset "utf-8";

/*ふわふわする*/
.fuwa {
    animation-name: fuwa;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}

@keyframes fuwa {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-15px)
    }
}

/*まわる*/
.rotate-center {
	-webkit-animation: rotate-center 20s linear infinite both;
	        animation: rotate-center 20s linear infinite both;
}


@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);

  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);

  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}


/*シャドウがじわっとでる*/
.shadow-drop-2-center {
	-webkit-animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes shadow-drop-2-center {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px);
    -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
            box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
  }
}
@keyframes shadow-drop-2-center {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px);
    -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
            box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
  }
}

/*裏返す*/
.slide-in-elliptic-bottom-bck {
	-webkit-animation: slide-in-elliptic-bottom-bck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-elliptic-bottom-bck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-elliptic-bottom-bck {
  0% {
    -webkit-transform: translateY(600px) rotateX(-30deg) scale(6.5);
            transform: translateY(600px) rotateX(-30deg) scale(6.5);
    -webkit-transform-origin: 50% -100%;
            transform-origin: 50% -100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 500px;
            transform-origin: 50% 500px;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-bottom-bck {
  0% {
    -webkit-transform: translateY(600px) rotateX(-30deg) scale(6.5);
            transform: translateY(600px) rotateX(-30deg) scale(6.5);
    -webkit-transform-origin: 50% -100%;
            transform-origin: 50% -100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 500px;
            transform-origin: 50% 500px;
    opacity: 1;
  }
}

/*画面外ズームイン*/
.puff-in-center {
	-webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	        animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

@-webkit-keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

/*回り続ける*/
.rotate-center {
  -webkit-animation: rotate-center 4s ease-in-out 1s infinite both;
          animation: rotate-center 4s ease-in-out 1s infinite both;
}

@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  20% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  20% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}


.rotate-vert-center {
  -webkit-animation: rotate-vert-center 3s ease-in-out 1s infinite both;
          animation: rotate-vert-center 3s ease-in-out 1s infinite both;
}


@-webkit-keyframes rotate-vert-center {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  20% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }

  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes rotate-vert-center {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }

  20% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}







/*大きくなる-小さくなる*/
.slide-fwd-center {
  -webkit-animation: slide-fwd-center 1.5s linear infinite alternate-reverse both;
          animation: slide-fwd-center 1.5s linear infinite alternate-reverse both;
    animation-timing-function: ease-in-out;
}


@-webkit-keyframes slide-fwd-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
}
@keyframes slide-fwd-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}


@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

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

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }

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


.slide-top {
  -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}



/*========= レイアウトのためのCSS ===============*/

p.slide{
  overflow: hidden;/*左右アニメーションで画面からはみ出る際に出る横スクロールバーを隠す*/
}

/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
  overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

/*左右のアニメーション*/
.rightAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
  transform: translateX(100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name:slideTextX-100;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
  from {
  transform: translateX(-100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

/*くるくるあがる*/
.kurukuru {
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: kurukuru 1.4s ease-out;
  opacity: 1;
}
@keyframes kurukuru {
  0%{
    transform: rotateY(0) translateY(300px);
    opacity: 0;
  }
  100%{
    transform: rotateY(360deg) translateY(0);
    opacity: 1;
  }
}


.kiran {
  opacity: 1;
  overflow: hidden;
  position: relative;
}
.kiran::before {
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
  animation: kiran 2.5s linear ;
  animation-iteration-count: infinite; 
}
 
@keyframes kiran {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  5% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  10% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  15% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  20% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
 
/*横スク*/
.marquee {
  width: 100%;
  padding: 1rem;
  overflow: hidden;
}

.marquee p {
  padding: 2rem;
  padding-left: 100%;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  display: inline-block;
}

@keyframes marquee {
  0% { transform: translateX(0) }
  100% { transform: translateX(-100%) }
}
/*ローディング*/


@keyframes loading {
  0% {
    width: 98%;
  }
  30% {
    width: 99%;
  }
  60% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
@keyframes percentage {

  0% {
    content: "98%";
  }
  30% {
    content: "99%";
  }
  60% {
    content: "100%";
  }
  100% {
    content: "100%";
  }
}
.bg {
  background-color: #E32C7F;
  animation: loading 3s linear infinite;
  animation-duration: ease-in-out;
}

.el {
  color: #ffffff;
  width: 600px;
  border: 1px solid #E32C7F;
}
.el:after {
  padding-left: 20px;
  content: "0%";
  display: block;
  text-align: center;
  font-size: 50px;
  padding: 10px 20px;
  color: aqua;
  mix-blend-mode: difference;
  animation: percentage 3s linear infinite;
  animation-duration: ease-in-out;
}

.bo {
  width: 600px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}