@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade02 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes clip01 {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
@keyframes clip02 {
  0% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
@keyframes clip03 {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
@keyframes clip04 {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }
}
div.d1-img01, div.d1-img04 {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
div.d1-img01.animation, div.d1-img04.animation {
  animation: clip02 0.8s 0.2s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards;
}

div.d1-img02, div.d1-img05 {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
div.d1-img02.animation, div.d1-img05.animation {
  animation: clip03 0.8s 0.2s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards;
}

div.d1-img03 {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
div.d1-img03.animation {
  animation: clip01 0.8s 0.2s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards;
}

div.gray-bg h2,
div.gray-bg p,
section.sec-garage h2,
section.sec-garage h3,
section.sec-garage h4,
section.sec-garage p,
section.sec-interior h2,
section.sec-interior h3,
section.sec-interior p,
section.sec-interior .interior-img01,
section.sec-interior .interior-logo,
section.sec-exterior h2,
section.sec-exterior h3,
section.sec-exterior p,
section.sec-plan h2,
section.sec-plan h3,
section.sec-plan p,
section.sec-plan .plan-number,
section.sec-resilience h2,
section.sec-resilience h3,
section.sec-resilience p.resilience-txt01,
section.sec-resilience .resilience-slide,
section.sec-catalog div.catalog-box {
  opacity: 0;
}
div.gray-bg h2.animation,
div.gray-bg p.animation,
section.sec-garage h2.animation,
section.sec-garage h3.animation,
section.sec-garage h4.animation,
section.sec-garage p.animation,
section.sec-interior h2.animation,
section.sec-interior h3.animation,
section.sec-interior p.animation,
section.sec-interior .interior-img01.animation,
section.sec-interior .interior-logo.animation,
section.sec-exterior h2.animation,
section.sec-exterior h3.animation,
section.sec-exterior p.animation,
section.sec-plan h2.animation,
section.sec-plan h3.animation,
section.sec-plan p.animation,
section.sec-plan .plan-number.animation,
section.sec-resilience h2.animation,
section.sec-resilience h3.animation,
section.sec-resilience p.resilience-txt01.animation,
section.sec-resilience .resilience-slide.animation,
section.sec-catalog div.catalog-box.animation {
  animation: fade 0.8s 0s linear forwards;
}

div.interview-box {
  opacity: 0;
}
div.interview-box.animation {
  animation: fade 0.8s 0s linear forwards;
}
div.interview-box p {
  opacity: 1;
  animation: none;
}

@media screen and (min-width: 768px) {
  div.gray-bg h2.h2-01 {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    animation: clip01 0.6s 6s linear forwards;
  }
}

@media screen and (min-width: 768px) {
  div.gray-bg .hero-txt01 {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    animation: clip01 1.4s 6.8s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards !important;
  }
}

.fix-nav {
  animation: fix-nav 1s 7s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards;
  transform: translate(0, 100%);
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .fix-nav {
    transform: translate(0);
    opacity: 0;
    animation: fade 0.8s 7s linear forwards;
  }
}

div.hero-slide01.smp-block {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  animation: clip01 1.6s 6s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards;
}

h1 {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  animation: clip01 0.8s 7s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards;
}
@media screen and (min-width: 768px) {
  h1 {
    animation: clip01 1s 6s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards;
  }
}

div.bg-img01 {
  opacity: 0;
  animation: fade 1.6s 7s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards;
}

div.bg-img04 {
  opacity: 0;
  animation: fade 1.6s 7s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards;
}

div.hero {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  animation: clip01 0.8s 7.6s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards;
}
@media screen and (min-width: 768px) {
  div.hero {
    animation: clip01 0.8s 6s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards;
  }
}

@media screen and (min-width: 768px) {
  div.pc-larea {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    animation: clip01 2.2s 6s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards;
  }
}

@media screen and (min-width: 768px) {
  div.hd-nav-wrap {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    animation: clip01 2s 6s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards;
  }
}

header div.hd-inner {
  animation: header01 1s 7s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards;
  opacity: 0;
  transform: translate(0, -100%);
}

@keyframes header01 {
  0% {
    transform: translate(0, -100%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes fix-nav {
  0% {
    transform: translate(0, 100%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
div.load-area {
  position: fixed;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #516268;
  background-position: center center;
  z-index: 1000;
  background-size: 500%;
  animation: fade02 2s 5s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards;
}
div.load-area div.logo {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  opacity: 0;
  animation: fadebig 3s 1s cubic-bezier(0.37, 0.01, 0.07, 0.99) forwards;
  transform: translate(-50%, -50%);
  z-index: 1;
}
@media screen and (min-width: 768px) {
  div.load-area div.logo {
    width: 400px;
  }
}
div.load-area .svg-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180%;
}
@media screen and (min-width: 768px) {
  div.load-area .svg-wrap {
    width: 1000px;
  }
}

@keyframes fadebig {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    filter: blur(30px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}/*# sourceMappingURL=animation.css.map */