@charset "UTF-8";
/* 下から */
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;
  -webkit-animation-duration: 0.7s;
          animation-duration: 0.7s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-transition: opacity 0.7s;
  transition: opacity 0.7s;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@-webkit-keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(80px);
            transform: translateY(80px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(80px);
            transform: translateY(80px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* 左から */
.fadeLeft {
  -webkit-animation-name: fadeLeftAnime;
          animation-name: fadeLeftAnime;
  -webkit-animation-duration: 0.7s;
          animation-duration: 0.7s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeLeftAnime {
  from {
    opacity: 0;
    -webkit-transform: translateX(-80px);
            transform: translateX(-80px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    -webkit-transform: translateX(-80px);
            transform: translateX(-80px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
/* 右から */
.fadeRight {
  -webkit-animation-name: fadeRightAnime;
          animation-name: fadeRightAnime;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeRightAnime {
  from {
    opacity: 0;
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
/*========= 流れるテキスト ===============*/
/*全共通*/
.slide-in {
  overflow: hidden;
  display: inline-block;
}

.slide-in_inner {
  display: inline-block;
  padding-bottom: 10px;
}

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

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

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

@keyframes slideTextX100 {
  from {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%); /*要素を左の枠外に移動*/
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0); /*要素を元の位置に移動*/
    opacity: 1;
  }
}
.slideAnimeRightLeft {
  -webkit-animation-name: slideTextX-100;
          animation-name: slideTextX-100;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

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

@keyframes slideTextX-100 {
  from {
    -webkit-transform: translateX(100%);
            transform: translateX(100%); /*要素を右の枠外に移動*/
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0); /*要素を元の位置に移動*/
    opacity: 1;
  }
}
.rightbg-palla {
  background-image: url(../images/common/feature_bg_right.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: right top;
  width: 100px;
  height: 100vh;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition-property: background-position;
  transition-property: background-position;
  -webkit-transition-duration: 0.7s;
          transition-duration: 0.7s;
  -webkit-transition-delay: 0.035s;
          transition-delay: 0.035s;
}
@media screen and (min-width: 1601px) {
  .rightbg-palla {
    width: 150px;
  }
}

.rightbg-palla2 {
  background-image: url(../images/common/feature_bg_right.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: right top;
  width: 100px;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transition-property: background-position;
  transition-property: background-position;
  -webkit-transition-duration: 0.7s;
          transition-duration: 0.7s;
  -webkit-transition-delay: 0.035s;
          transition-delay: 0.035s;
}
@media screen and (min-width: 1601px) {
  .rightbg-palla2 {
    width: 150px;
  }
}
@media screen and (max-width: 767px) {
  .rightbg-palla2 {
    width: 50px;
    top: 20%;
    background-position: right center;
  }
}

.leftbg-palla {
  background-image: url(../images/common/feature_bg_left.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: left top;
  width: 100px;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 15%;
  -webkit-transition-property: top;
  transition-property: top;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  -webkit-transition-delay: 0.025s;
          transition-delay: 0.025s;
}
@media screen and (min-width: 1601px) {
  .leftbg-palla {
    width: 150px;
  }
}

.leftbg-palla2 {
  background-image: url(../images/common/feature_bg_left.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: left top;
  width: 100px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 15%;
  -webkit-transition-property: top;
  transition-property: top;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
  -webkit-transition-delay: 0.025s;
          transition-delay: 0.025s;
  z-index: 0;
}
@media screen and (min-width: 1601px) {
  .leftbg-palla2 {
    width: 150px;
  }
}
@media screen and (max-width: 767px) {
  .leftbg-palla2 {
    width: 50px;
    bottom: 10%;
    background-position: left center;
  }
}

.hover-zoom img {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
.hover-zoom img:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

@-webkit-keyframes float {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes float {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes float2 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes float2 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.fuwafuwa1 {
  -webkit-animation: float 2s ease-in-out infinite;
          animation: float 2s ease-in-out infinite;
}

.fuwafuwa2 {
  -webkit-animation: float2 1.9s ease-in-out infinite;
          animation: float2 1.9s ease-in-out infinite;
}

.fuwafuwa3 {
  -webkit-animation: float 2.2s ease-in-out infinite;
          animation: float 2.2s ease-in-out infinite;
}

.fuwafuwa4 {
  -webkit-animation: float2 1.7s ease-in-out infinite;
          animation: float2 1.7s ease-in-out infinite;
}

.fuwafuwa5 {
  -webkit-animation: float 1.8s ease-in-out infinite;
          animation: float 1.8s ease-in-out infinite;
}

.paralax-box {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.paralax-box {
  -webkit-perspective: 1px;
          perspective: 1px;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.paralax-box .para-right .para1 {
  position: absolute;
  width: 140px;
  right: -25px;
  top: 1%;
}
.paralax-box .para-right .para2 {
  position: absolute;
  width: 120px;
  right: -25px;
  top: 8%;
}
.paralax-box .para-right .para3 {
  position: absolute;
  width: 100px;
  right: -25px;
  top: 20%;
}
.paralax-box .para-right .para4 {
  position: absolute;
  width: 150px;
  right: -25px;
  bottom: 18%;
}
.paralax-box .para-right .para5 {
  position: absolute;
  width: 100px;
  right: 0px;
  bottom: 8%;
}
.paralax-box .para-left .para1 {
  position: absolute;
  width: 140px;
  left: -25px;
  top: 18%;
}
.paralax-box .para-left .para2 {
  position: absolute;
  width: 120px;
  left: -32px;
  top: 28%;
}
.paralax-box .para-left .para3 {
  position: absolute;
  width: 130px;
  left: -25px;
  top: 40%;
}
.paralax-box .para-left .para4 {
  position: absolute;
  width: 100px;
  left: -25px;
  bottom: 20%;
}
.paralax-box .para-left .para5 {
  position: absolute;
  width: 150px;
  left: 0px;
  bottom: 10%;
}/*# sourceMappingURL=action.css.map */