@charset "UTF-8";
/*-------------------------------
	Import
-------------------------------*/
/*-------------------------------
    Global Variable
-------------------------------*/
/*	function
-------------------------------*/
/*	Breakpoint
-------------------------------*/
/*	Font Family
-------------------------------*/
/*	Color
-------------------------------*/
/*-------------------------------
    @mixin
-------------------------------*/
/*	Arrow
-------------------------------*/
@import url("preset.css");
@import url("module.css");
@import url("mailformpro.css");
/*-------------------------------
	Common
-------------------------------*/
body {
  /* 
  @keyframes fadeIn {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }
   */
  /*	Toppageのユニークなアニメーション
  ====================================*/
}
body .uf main,
body .uf footer {
  -webkit-animation-name: fadein;
          animation-name: fadein;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes fadein {
  from {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
body #top .view.view-unique1 {
  opacity: 0;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
}
body #top .view.view-unique1.on {
  opacity: 1;
  -webkit-animation: view-unique1 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
          animation: view-unique1 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@-webkit-keyframes view-unique1 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-15px, 0) rotate(-3deg);
            transform: translate(-15px, 0) rotate(-3deg);
  }
  50% {
    opacity: 0.65;
    -webkit-transform: translate(10px, 0) rotate(2deg);
            transform: translate(10px, 0) rotate(2deg);
  }
  65% {
    opacity: 1;
    -webkit-transform: translate(-5px, 0) rotate(-1deg);
            transform: translate(-5px, 0) rotate(-1deg);
  }
  85% {
    opacity: 1;
    -webkit-transform: translate(5px, 0) rotate(1deg);
            transform: translate(5px, 0) rotate(1deg);
  }
  95% {
    opacity: 1;
    -webkit-transform: translate(-2px, 0) rotate(-0.5deg);
            transform: translate(-2px, 0) rotate(-0.5deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
  }
}
@keyframes view-unique1 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-15px, 0) rotate(-3deg);
            transform: translate(-15px, 0) rotate(-3deg);
  }
  50% {
    opacity: 0.65;
    -webkit-transform: translate(10px, 0) rotate(2deg);
            transform: translate(10px, 0) rotate(2deg);
  }
  65% {
    opacity: 1;
    -webkit-transform: translate(-5px, 0) rotate(-1deg);
            transform: translate(-5px, 0) rotate(-1deg);
  }
  85% {
    opacity: 1;
    -webkit-transform: translate(5px, 0) rotate(1deg);
            transform: translate(5px, 0) rotate(1deg);
  }
  95% {
    opacity: 1;
    -webkit-transform: translate(-2px, 0) rotate(-0.5deg);
            transform: translate(-2px, 0) rotate(-0.5deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
  }
}
body #top .view.view-unique2 {
  opacity: 0;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
}
body #top .view.view-unique2.on {
  opacity: 1;
  -webkit-animation: view-unique2 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
          animation: view-unique2 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@-webkit-keyframes view-unique2 {
  0% {
    opacity: 0;
    -webkit-transform: translate(15px, 0) rotate(-3deg);
            transform: translate(15px, 0) rotate(-3deg);
  }
  50% {
    opacity: 0.65;
    -webkit-transform: translate(-10px, 0) rotate(2deg);
            transform: translate(-10px, 0) rotate(2deg);
  }
  65% {
    opacity: 1;
    -webkit-transform: translate(5px, 0) rotate(-1deg);
            transform: translate(5px, 0) rotate(-1deg);
  }
  85% {
    opacity: 1;
    -webkit-transform: translate(-5px, 0) rotate(1deg);
            transform: translate(-5px, 0) rotate(1deg);
  }
  95% {
    opacity: 1;
    -webkit-transform: translate(2px, 0) rotate(-0.5deg);
            transform: translate(2px, 0) rotate(-0.5deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
  }
}
@keyframes view-unique2 {
  0% {
    opacity: 0;
    -webkit-transform: translate(15px, 0) rotate(-3deg);
            transform: translate(15px, 0) rotate(-3deg);
  }
  50% {
    opacity: 0.65;
    -webkit-transform: translate(-10px, 0) rotate(2deg);
            transform: translate(-10px, 0) rotate(2deg);
  }
  65% {
    opacity: 1;
    -webkit-transform: translate(5px, 0) rotate(-1deg);
            transform: translate(5px, 0) rotate(-1deg);
  }
  85% {
    opacity: 1;
    -webkit-transform: translate(-5px, 0) rotate(1deg);
            transform: translate(-5px, 0) rotate(1deg);
  }
  95% {
    opacity: 1;
    -webkit-transform: translate(2px, 0) rotate(-0.5deg);
            transform: translate(2px, 0) rotate(-0.5deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0) rotate(0);
            transform: translate(0, 0) rotate(0);
  }
}
body #top .view.view-unique3::before, body #top .view.view-unique3::after {
  opacity: 0;
}
body #top .view.view-unique3.on::before, body #top .view.view-unique3.on::after {
  opacity: 1;
  -webkit-animation: view-unique3 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
          animation: view-unique3 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@-webkit-keyframes view-unique3 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
  50% {
    opacity: 0.65;
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  65% {
    opacity: 1;
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
  }
  85% {
    opacity: 1;
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
  95% {
    opacity: 1;
    -webkit-transform: rotate(-0.5deg);
            transform: rotate(-0.5deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@keyframes view-unique3 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(-3deg);
            transform: rotate(-3deg);
  }
  50% {
    opacity: 0.65;
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  65% {
    opacity: 1;
    -webkit-transform: rotate(-1deg);
            transform: rotate(-1deg);
  }
  85% {
    opacity: 1;
    -webkit-transform: rotate(1deg);
            transform: rotate(1deg);
  }
  95% {
    opacity: 1;
    -webkit-transform: rotate(-0.5deg);
            transform: rotate(-0.5deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}