@charset "UTF-8";
@import url("//use.fontawesome.com/releases/v5.7.2/css/all.css");
/* mixins
------------------------------------------------------- */
/* 色指定
------------------------------------------------------- */
@-webkit-keyframes opTxtAnime {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0));
            filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0));
  }
  30% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    -webkit-filter: drop-shadow(0px 0px 3px rgb(255, 255, 255));
            filter: drop-shadow(0px 0px 3px rgb(255, 255, 255));
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0));
            filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0));
  }
}
@keyframes opTxtAnime {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0));
            filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0));
  }
  30% {
    opacity: 1;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    -webkit-filter: drop-shadow(0px 0px 3px rgb(255, 255, 255));
            filter: drop-shadow(0px 0px 3px rgb(255, 255, 255));
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0));
            filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0));
  }
}
@-webkit-keyframes opCatchAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes opCatchAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes fadeInWipeLeft {
  0% {
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
  }
  100% {
    -webkit-mask-position: 0% 0;
            mask-position: 0% 0;
  }
}
@keyframes fadeInWipeLeft {
  0% {
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
  }
  100% {
    -webkit-mask-position: 0% 0;
            mask-position: 0% 0;
  }
}
@-webkit-keyframes fadeInWipeTop {
  0% {
    opacity: 0;
    -webkit-mask-position: 0 100%;
            mask-position: 0 100%;
  }
  5% {
    opacity: 1;
    -webkit-mask-position: 0 100%;
            mask-position: 0 100%;
  }
  100% {
    opacity: 1;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
  }
}
@keyframes fadeInWipeTop {
  0% {
    opacity: 0;
    -webkit-mask-position: 0 100%;
            mask-position: 0 100%;
  }
  5% {
    opacity: 1;
    -webkit-mask-position: 0 100%;
            mask-position: 0 100%;
  }
  100% {
    opacity: 1;
    -webkit-mask-position: 0 0;
            mask-position: 0 0;
  }
}
@-webkit-keyframes opTextColorWhite {
  0% {
    color: #000;
    -webkit-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
            filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
  100% {
    color: #fff;
    -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
            filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
  }
}
@keyframes opTextColorWhite {
  0% {
    color: #000;
    -webkit-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
            filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
  100% {
    color: #fff;
    -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
            filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
  }
}
@-webkit-keyframes slideRight {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-18%);
            transform: translateX(-18%);
    opacity: 1;
  }
}
@keyframes slideRight {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-18%);
            transform: translateX(-18%);
    opacity: 1;
  }
}
@-webkit-keyframes slideRightLong {
  0% {
    -webkit-transform: translateX(-5%);
            transform: translateX(-5%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-62%);
            transform: translateX(-62%);
    opacity: 1;
  }
}
@keyframes slideRightLong {
  0% {
    -webkit-transform: translateX(-5%);
            transform: translateX(-5%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-62%);
            transform: translateX(-62%);
    opacity: 1;
  }
}
@-webkit-keyframes ZoomOut {
  0% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes ZoomOut {
  0% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(-16%);
            transform: translateY(-16%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUp {
  0% {
    -webkit-transform: translateY(-16%);
            transform: translateY(-16%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes slideUpLong {
  0% {
    -webkit-transform: translateY(-32%);
            transform: translateY(-32%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUpLong {
  0% {
    -webkit-transform: translateY(-32%);
            transform: translateY(-32%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-12%);
            transform: translateY(-12%);
    opacity: 1;
  }
}
@keyframes slideDown {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-12%);
            transform: translateY(-12%);
    opacity: 1;
  }
}
@-webkit-keyframes ZoomIn {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 1;
  }
}
@keyframes ZoomIn {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    opacity: 1;
  }
}
@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-20%);
            transform: translateX(-20%);
    opacity: 1;
  }
}
@keyframes slideLeft {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-20%);
            transform: translateX(-20%);
    opacity: 1;
  }
}
@-webkit-keyframes fadeInFillOpacity {
  0% {
    visibility: hidden;
    fill-opacity: 0;
  }
  100% {
    visibility: visible;
    fill-opacity: 1;
  }
}
@keyframes fadeInFillOpacity {
  0% {
    visibility: hidden;
    fill-opacity: 0;
  }
  100% {
    visibility: visible;
    fill-opacity: 1;
  }
}
@-webkit-keyframes drawLine {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes drawLine {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes fadeInall {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInall {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInCover {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes fadeInCover {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}
@-webkit-keyframes scramSpread {
  0% {
    opacity: 0;
    -webkit-transform: translateX(var(--from));
            transform: translateX(var(--from));
  }
  12% {
    opacity: 1;
    -webkit-transform: translateX(var(--from));
            transform: translateX(var(--from));
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes scramSpread {
  0% {
    opacity: 0;
    -webkit-transform: translateX(var(--from));
            transform: translateX(var(--from));
  }
  12% {
    opacity: 1;
    -webkit-transform: translateX(var(--from));
            transform: translateX(var(--from));
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOutall {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOutall {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadein {
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
@keyframes fadein {
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }
}
@-webkit-keyframes menuSlideIn {
  0% {
    -webkit-transform: translate(0, 40px);
            transform: translate(0, 40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes menuSlideIn {
  0% {
    -webkit-transform: translate(0, 40px);
            transform: translate(0, 40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes menuActive {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes menuActive {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
/*# sourceMappingURL=maps/keyframes.css.map */