@charset "UTF-8";
/******
		contents
					******/
.phone {
  background: url(../img/phone-bg.png) center center/cover no-repeat;
  position: relative;
  z-index: 1;
  height: var(--height);
  border-radius: var(--border-radius);
  box-shadow: 0 0 0.1em 0.25em #000;
  border: silver 1px solid;
  width: 300px;
  height: 550px;
  margin: auto;
  border-radius: 40px;
  opacity: 0;
  color: #fff;
  overflow: hidden;
}

.animation {
  opacity: 0;
}

.text {
  color: #000;
  margin-top: 50px;
  font-size: 50px;
  font-weight: 900;
}

.anime {
  opacity: 0;
  overflow: hidden;
}

/* アッパーアニメーションCSS */
.appear-move {
  opacity: 1;
  -webkit-animation: appear 1.2s forwards;
          animation: appear 1.2s forwards;
}

@-webkit-keyframes appear {
  0% {
    opacity: 0;
    transform: perspective(50px) translateZ(10px);
  }
  100% {
    opacity: 1;
    transform: perspective(50px) translateZ(0px);
  }
}

@keyframes appear {
  0% {
    opacity: 0;
    transform: perspective(50px) translateZ(10px);
  }
  100% {
    opacity: 1;
    transform: perspective(50px) translateZ(0px);
  }
}
/* アッパーアニメーションCSS END */
/* フェードアップアニメーションCSS */
.fade-up-move {
  opacity: 1;
  -webkit-animation: fade-up 1.2s forwards;
          animation: fade-up 1.2s forwards;
}

@-webkit-keyframes fade-up {
  0% {
    opacity: 0;
    transform: perspective(50px) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: perspective(50px) translateY(0px);
  }
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: perspective(50px) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: perspective(50px) translateY(0px);
  }
}
/* フェードアップアニメーションCSS END*/
/* アニメーションタイミング調整 */
.time-1 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  opacity: 0;
}

.time-2 {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  opacity: 0;
}

.time-3 {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  opacity: 0;
}

.time-4 {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  opacity: 0;
}

/* アニメーションタイミング調整　END */
/*# sourceMappingURL=style.css.map */