@charset "UTF-8";
.cover-slide {
  position: relative;
  overflow: hidden;
}
.cover-slide::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  background-color: #eee;
  opacity: 0;
}
.cover-slide.io-active::after {
  opacity: 1;
  -webkit-animation-name: cover-slide-animation;
          animation-name: cover-slide-animation;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s; /*1回のアニメーション周期が完了するまでの再生時間*/
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; /*アニメーションがそれぞれの周期の中でどのように進行するか*/
  -webkit-animation-delay: 0s;
          animation-delay: 0s; /*アニメーションが始まるまでの遅延時間*/
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1; /*アニメーションの繰り返し数。無限はinfinite*/
  -webkit-animation-direction: normal;
          animation-direction: normal; /*初期値はnormal。reverseにするとアニメーションが100%から0で動く。alternativeは0から100、100から0で繰り返し動く。alternative-reverseもある。*/
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; /*アニメーションが終了(100%)したままのcssを適用したまま終了する。親元のcssより優先される*/
}
.cover-slide img {
  max-width: 100%;
  vertical-align: bottom; /*img要素に設定すると上下余白を解消することができる*/
}

@-webkit-keyframes cover-slide-animation {
  0% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50.1% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

@keyframes cover-slide-animation {
  0% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50.1% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
.img-cover-slide,
.bg-cover-slide {
  opacity: 0;
}
.io-active .img-cover-slide,
.io-active .bg-cover-slide {
  opacity: 1;
  -webkit-animation-name: cover-slide-img-animation;
          animation-name: cover-slide-img-animation;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s; /*1回のアニメーション周期が完了するまでの再生時間*/
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; /*アニメーションがそれぞれの周期の中でどのように進行するか*/
  -webkit-animation-delay: 0s;
          animation-delay: 0s; /*アニメーションが始まるまでの遅延時間*/
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1; /*アニメーションの繰り返し数。無限はinfinite*/
  -webkit-animation-direction: normal;
          animation-direction: normal; /*初期値はnormal。reverseにするとアニメーションが100%から0で動く。alternativeは0から100、100から0で繰り返し動く。alternative-reverseもある。*/
  -webkit-animation-fill-mode: none;
          animation-fill-mode: none;
}

/*--imgをバックグラウンドで設定する場合--*/
.bg-cover-slide {
  background-image: url(/images/top/top-philosophy01.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

/*--backgroundで設定する場合、アスペクト比を保ちながら高さを設定する対策--*/
.bg-cover-slide::before {
  content: "";
  display: block;
  padding-top: 100%; /*.bg-cover-slideの横幅の50%となる(ここでアスペクト比を設定)なので、これはその画像によって変更する必要がある*/
}

@-webkit-keyframes cover-slide-img-animation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.1% {
    opacity: 1;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    opacity: 1;
  }
}

@keyframes cover-slide-img-animation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.1% {
    opacity: 1;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    opacity: 1;
  }
}/*# sourceMappingURL=cover-slide.css.map */