@charset "UTF-8";

/* default - speed*/
.c-animation {
  -webkit-transition: .8s;
  -o-transition: .8s;
  transition: .8s;
}

[data-animation-speed="0.1s"] {
  -webkit-transition: .1s;
  -o-transition: .1s;
  transition: .1s;
}

[data-animation-speed="0.2s"] {
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
}

[data-animation-speed="0.3s"] {
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

[data-animation-speed="0.4s"] {
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
}

[data-animation-speed="0.5s"] {
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

[data-animation-speed="0.6s"] {
  -webkit-transition: .6s;
  -o-transition: .6s;
  transition: .6s;
}

[data-animation-speed="0.7s"] {
  -webkit-transition: .7s;
  -o-transition: .7s;
  transition: .7s;
}

[data-animation-speed="0.8s"] {
  -webkit-transition: .8s;
  -o-transition: .8s;
  transition: .8s;
}

[data-animation-speed="0.9s"] {
  -webkit-transition: .9s;
  -o-transition: .9s;
  transition: .9s;
}

[data-animation-speed="1s"] {
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

[data-animation-speed="1.1s"] {
  -webkit-transition: 1.1s;
  -o-transition: 1.1s;
  transition: 1.1s;
}

[data-animation-speed="1.2s"] {
  -webkit-transition: 1.2s;
  -o-transition: 1.2s;
  transition: 1.2s;
}

[data-animation-speed="1.3s"] {
  -webkit-transition: 1.3s;
  -o-transition: 1.3s;
  transition: 1.3s;
}

[data-animation-speed="1.4s"] {
  -webkit-transition: 1.4s;
  -o-transition: 1.4s;
  transition: 1.4s;
}

[data-animation-speed="1.5s"] {
  -webkit-transition: 1.5s;
  -o-transition: 1.5s;
  transition: 1.5s;
}


[data-animation-delay="0.1s"] {
  animation-delay: 0.1s;
}

[data-animation-delay="0.2s"] {
  animation-delay: 0.2s;
}

[data-animation-delay="0.3s"] {
  animation-delay: 0.3s;
}

[data-animation-delay="0.4s"] {
  animation-delay: 0.4s;
}

[data-animation-delay="0.5s"] {
  animation-delay: 0.5s;
}

[data-animation-delay="0.6s"] {
  animation-delay: 0.6s;
}

[data-animation-delay="0.7s"] {
  animation-delay: 0.7s;
}

[data-animation-delay="0.8s"] {
  animation-delay: 0.8s;
}

[data-animation-delay="0.9s"] {
  animation-delay: 0.9s;
}

[data-animation-delay="1s"] {
  animation-delay: 1s;
}


/* ズームイン */
.c-animation[data-animation="zoom-in"] {
  -ms-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
}
.c-animation[data-animation="zoom-in"].active {
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}

/* フェードイン */
.c-animation[data-animation="fade-in"] {
  opacity: 0;
}
.c-animation[data-animation="fade-in"].active {
  opacity: 1.0;
}

/* 回転 */
.c-animation[data-animation="rotate"] {
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
.c-animation[data-animation="rotate"].active {
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

/* 3D回転 */
.c-animation[data-animation="rotate-3d"] {
  transform:rotateY(0deg);
  -webkit-transform:rotateY(0deg);
}
.c-animation[data-animation="rotate-3d"].active {
  transform:rotateY(360deg);
  -webkit-transform:rotateY(360deg);
}

/* フェードアップ */
.c-animation[data-animation="fade-up"] {
  -ms-transform: translate(0,40px);
  transform: translate(0,40px);
  -webkit-transform: translate(0,40px);
}
.c-animation[data-animation="fade-up"].active {
  -ms-transform: translate(0,0);
  transform: translate(0,0);
  -webkit-transform: translate(0,0);
}

/* 3D回転 + ズームイン */
.c-animation[data-animation="rotate-3d-zoom-in"] {
  transform: scale(0, 0) rotateY(180deg);
  -webkit-transform: scale(0, 0) rotateY(180deg);
}
.c-animation[data-animation="rotate-3d-zoom-in"].active {
  transform: scale(1, 1) rotateY(360deg);
  -webkit-transform: scale(1, 1) rotateY(360deg);
}

/* 移動 + フェードイン */
.c-animation[data-animation="fade-up-fade-in"] {
  opacity: 0;
  -ms-transform: translate(0,60px);
  transform: translate(0,60px);
  -webkit-transform: translate(0,60px);
}
.c-animation[data-animation="fade-up-fade-in"].active {
  opacity: 1.0;
  -ms-transform: translate(0,0);
  transform: translate(0,0);
  -webkit-transform: translate(0,0);
}

.about-animation{
  margin:0 auto;
  /* text-align: center; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (min-width: 1000px) {
.about-animation,img.about-animation-img{
  width:70%;
}
}

@media screen and (min-width: 641px) and (max-width: 999px) {
.about-animation,img.about-animation-img{
  width:90%;
}
}

@media screen and (max-width: 640px) {
.about-animation,img.about-animation-img{
  width:90%;
}
}


.about-animation-text{
  width:40%;
  -ms-flex-preferred-size:40%;
      flex-basis:40%;
  max-width:40%;
  /* float:left; */
}

.about-animation-text-middle{
  width:20%;
  -ms-flex-preferred-size:20%;
      flex-basis:20%;
  max-width:20%;
  /* float:left; */
}