/* CSS Document */
.preloader {
  pointer-events: none; }

.hero.is-static .hero-logo .hero-logo-image img, .hero.is-static .hero-logo .hero-logo-text img {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }

.hero.is-static .hero-logo.hide .hero-logo-image img, .hero.is-static .hero-logo.hide .hero-logo-text img {
  -ms-filter: "alpha( opacity=$number*100 )";
  filter: alpha(opacity=0);
  opacity: 0; }

.hero-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding-bottom: 5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }
  .hero-text[data-emergence=visible] {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -ms-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft; }
    .hero-text[data-emergence=visible] img {
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
      -ms-filter: "alpha( opacity=$number*100 )";
      filter: alpha(opacity=0);
      opacity: 0;
      visibility: hidden;
      -webkit-transform: translateX(20px);
      -moz-transform: translateX(20px);
      -ms-transform: translateX(20px);
      -o-transform: translateX(20px);
      transform: translateX(20px);
      -webkit-transition-delay: 2.4s;
      -moz-transition-delay: 2.4s;
      -ms-transition-delay: 2.4s;
      -o-transition-delay: 2.4s;
      transition-delay: 2.4s; }

.hero-logo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  top: 0 !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  opacity: 1.0 !important;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  .hero.is-static .hero-logo {
    top: 0; }
  .hero-logo-image {
    background: none;
    width: auto;
    height: auto;
    margin-bottom: -3%;
    max-width: 550px; }
    .hero-logo-image img {
      height: auto; }
  .hero-logo-text {
    display: block;
    position: relative;
    z-index: 3;
    color: #2f2f2f;
    line-height: 1;
    text-align: center; }
    .hero-logo-text-text {
      font-size: 24px;
      -webkit-transition: all 0.6s ease;
      -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
      -o-transition: all 0.6s ease;
      transition: all 0.6s ease; }
    .hero-logo-text-link {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      position: relative;
      z-index: 3;
      color: #2f2f2f;
      line-height: 1;
      text-align: center;
      font-size: 24px;
      padding-top: 10px;
      /* &:after{
          content: "";
          display: block;
          width: 30px;
          height: 30px;
          border: 2px solid #000;
          @include radius(50%);
          background: url(./../images/arrow.svg) no-repeat center / 15px auto;
          margin-left: 10px;
          @include transition;
        } */ }
      .hero-logo-text-link:hover {
        text-decoration: none; }
        .hero-logo-text-link:hover:after {
          -webkit-transform: translateX(5px);
          -moz-transform: translateX(5px);
          -ms-transform: translateX(5px);
          -o-transform: translateX(5px);
          transform: translateX(5px); }
  .hero-logo > *[data-emergence=visible] {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -ms-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-delay: 2.8s;
    -moz-animation-delay: 2.8s;
    -ms-animation-delay: 2.8s;
    -o-animation-delay: 2.8s;
    animation-delay: 2.8s; }

.hero-layer {
  max-height: 100vh; }

.hero-inner {
  max-height: 100vh; }

.about-section-bg span:nth-child(1) {
  -ms-filter: "alpha( opacity=$number*100 )";
  filter: alpha(opacity=100);
  opacity: 1;
  background: #2b2b2b url(./../images/bg-real.jpg) no-repeat center center;
  background-size: cover; }

/*sp*/
@media screen and (max-width: 780px) {
  .hero-logo-text-text {
    font-size: 18px; }
  .hero-logo-text-link {
    font-size: 18px;
    margin-top: -20px; }
    .hero-logo-text-link:after {
      width: 24px;
      height: 24px;
      background-size: 12px auto; } }

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

*[data-emergence], *.eg {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -ms-filter: "alpha( opacity=$number*100 )";
  filter: alpha(opacity=0);
  opacity: 0; }

*[data-emergence=visible] {
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -ms-animation-name: fadeIn;
  -o-animation-name: fadeIn;
  animation-name: fadeIn; }

@supports (clip-path: polygon(0 0, 0 0, 0 0)) {
  *[data-anm="skew"] {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    -webkit-transition: 1s all ease-out;
    -moz-transition: 1s all ease-out;
    -ms-transition: 1s all ease-out;
    -o-transition: 1s all ease-out;
    transition: 1s all ease-out; }
    *[data-anm="skew"][data-emergence=visible] {
      -webkit-animation-duration: 0.3s;
      -moz-animation-duration: 0.3s;
      -ms-animation-duration: 0.3s;
      -o-animation-duration: 0.3s;
      animation-duration: 0.3s;
      -webkit-transition-delay: 0.3s;
      -moz-transition-delay: 0.3s;
      -ms-transition-delay: 0.3s;
      -o-transition-delay: 0.3s;
      transition-delay: 0.3s;
      -webkit-clip-path: polygon(0 0, 220% 0, 0 220%, 0 0);
      clip-path: polygon(0 0, 220% 0, 0 220%, 0 0); } }

/* floating */
@keyframes floating {
  0% {
    transform: translateY(0%); }
  50% {
    transform: translateY(30%); }
  100% {
    transform: translateY(0%); } }

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%); }
  50% {
    -webkit-transform: translateY(30%); }
  100% {
    -webkit-transform: translateY(0%); } }

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

@-webkit-keyframes flipIn {
  0% {
    opacity: 0;
    -webkit-transform: perspective(2000px) rotateY(90deg);
    transform: perspective(2000px) rotateY(90deg); }
  100% {
    opacity: 1;
    -webkit-transform: perspective(2000px) rotateY(0);
    transform: perspective(2000px) rotateY(0); } }

@keyframes flipIn {
  0% {
    opacity: 0;
    -webkit-transform: perspective(2000px) rotateY(90deg);
    -ms-transform: perspective(2000px) rotateY(90deg);
    transform: perspective(2000px) rotateY(90deg); }
  100% {
    opacity: 1;
    -webkit-transform: perspective(2000px) rotateY(0);
    -ms-transform: perspective(2000px) rotateY(0);
    transform: perspective(2000px) rotateY(0); } }

.flipIn {
  -webkit-animation-name: flipIn;
  animation-name: flipIn;
  -webkit-transform-origin: center center;
  transform-origin: center center; }
