@charset "UTF-8";
/* CSS Document */


/***********************************************
title_movie
************************************************/
.diagonal_title .diagonaltitle__label {
  opacity:0;
  -webkit-transform: translateX(50px);
  transform: translateX(50px)
}

.diagonal_title .diagonaltitle__line::before {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

.diagonal_title .diagonaltitle__line:after {
  opacity: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%)
}

.diagonal_title.active .diagonaltitle__label,
.diagonal_title.active .diagonaltitle__line:before,
.diagonal_title.active .diagonaltitle__line:after {
  opacity: 1;
  -webkit-transform: translate(0);
  transform: translate(0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
  transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1)
}
.diagonal_title.active .diagonaltitle__line {
  -webkit-transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1), cubic-bezier(0.33, 1, 0.68, 1);
  transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1), cubic-bezier(0.33, 1, 0.68, 1)
}
.diagonal_title.active .diagonaltitle__line:before {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s
}
.diagonal_title.active .diagonaltitle__line:after {
  -webkit-transition-delay: 1s;
  transition-delay: 1s
}




/***********************************************
shape
************************************************/
.shape{
  opacity: 0;
  -webkit-transform: skewX(30deg) translate3d(0, -100%, 0);
  transform: skewX(30deg) translate3d(0, -100%, 0)
}
.topvision__plate.shape{
  opacity: 0;
  -webkit-transform: skewX(-30deg) translate3d(0, -100%, 0);
  transform: skewX(-30deg) translate3d(0, -100%, 0)
}

.shape.active{
  opacity: 1;
  -webkit-transform: skewX(30deg) translate3d(0, 0, 0);
  transform: skewX(30deg) translate3d(0, 0, 0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 0.65s;
  transition-duration: 0.65s;
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
  -webkit-transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
  transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1)
}
.topvision__plate.shape.active{
  opacity: 1;
  -webkit-transform: skewX(-30deg) translate3d(0, 0, 0);
  transform: skewX(-30deg) translate3d(0, 0, 0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 0.65s;
  transition-duration: 0.65s;
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
  -webkit-transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
  transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1)
}



/***********************************************
fadeinUp
************************************************/
.fadeinUp {
  opacity: 0;
  -webkit-transform: translateY(100px);
  transform: translateY(100px)
}

.fadeinUp.active {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: opacity, transform;
transition-property: opacity, transform, -webkit-transform;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1),cubic-bezier(0.33, 1, 0.68, 1);
transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1),cubic-bezier(0.33, 1, 0.68, 1);
}





/***********************************************
inslide
************************************************/
.inslide::after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 1;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right;
    transform-origin: right;
}

.inslide:after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1)
}

.active .inslide:after {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
  transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1)
}





/***********************************************
list img
************************************************/
.topbland__item {
  opacity: 0;
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
}

.topbland__item.active {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: opacity, transform;
transition-property: opacity, transform, -webkit-transform;
-webkit-transition-duration: 1.5s;
transition-duration: 1.5s;
-webkit-transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1),cubic-bezier(0.33, 1, 0.68, 1);
transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1),cubic-bezier(0.33, 1, 0.68, 1);
}

.item01.active{
    webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.item02.active{
    webkit-transition-delay: 1s;
    transition-delay: 1s;
}

.item03.active{
    webkit-transition-delay: 2s;
    transition-delay: 2s;
}





/***********************************************
fadelist
************************************************/
.fadelist.active li {
opacity: 1;
-webkit-transform: rotate(0deg) scale(1) translateY(0);
transform: rotate(0deg) scale(1) translateY(0);
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: opacity, transform;
transition-property: opacity, transform, -webkit-transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1),cubic-bezier(0.33, 1, 0.68, 1);
transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1),cubic-bezier(0.33, 1, 0.68, 1);
}

.fadelist li {
    opacity: 0;
    -webkit-transform: rotate(0.09deg) scale(0.8) translateY(50px);
    transform: rotate(0.09deg) scale(0.8) translateY(50px);
}

.fadelist.active li:nth-child(1) {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
.fadelist.active li:nth-child(2) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
.fadelist.active li:nth-child(3) {
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}
.fadelist.active li:nth-child(4) {
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;
}
.fadelist.active li:nth-child(5) {
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
}
.fadelist.active li:nth-child(6) {
    -webkit-transition-delay:2.5s;
    transition-delay: 2.5s;
}





/***********************************************
fade contact
************************************************/
.contact__base {
  opacity: 0;
  -webkit-transform: skewX(-30deg) translate3d(0, 100%, 0);
  transform: skewX(-30deg) translate3d(0, 100%, 0)
}
.contact__plate {
  opacity: 0;
  -webkit-transform: skewX(-30deg) translate3d(0, -100%, 0);
  transform: skewX(-30deg) translate3d(0, -100%, 0)
}
.contact__title {
  opacity: 0;
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px)
}
.contact__main {
  opacity: 0;
  -webkit-transform: translateY(50px);
  transform: translateY(50px)
}
.contact__base.active ,
.contact__plate.active {
  opacity: 1;
  -webkit-transform: skewX(-30deg) translate3d(0, 0, 0);
  transform: skewX(-30deg) translate3d(0, 0, 0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 0.65s;
  transition-duration: 0.65s;
  -webkit-transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
  transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1)
}
.contact__title.active,
.contact__main.active {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  -webkit-transition-duration: 0.85s;
  transition-duration: 0.85s;
  -webkit-transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.33, 1, 0.68, 1);
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.33, 1, 0.68, 1)
}