@charset "utf-8";

/* アニメーション定義 */

/*-----------------------------------------------------	*/
/*  個別指定 for PC	*/
/*-----------------------------------------------------	*/


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

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



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

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


@keyframes RslideIn {
 0% {
    opacity: 0;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes RslideIn {
 0% {
    opacity: 0;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}


/* 人の飛び出し */
@keyframes SlidinLeft {
 0% {
    opacity: 0;
    -webkit-transform: translateX(310px);
    transform: translateX(310px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes SlidinLeft {
 0% {
    opacity: 1;
    -webkit-transform: translateX(310px);
    transform: translateX(310px);
  }

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

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes SlidinRight {
 0% {
    opacity: 0;
    -webkit-transform: translateX(-310px);
    transform: translateX(-310px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}






/*---------------------------------------------
 ** フェードインアニメーション
---------------------------------------------*/

@media screen and (min-width: 1280px) {


.header_wrapper {
-webkit-animation: header 0.7s ease 0.5s;
-moz-animation: header 0.7s ease 0.5s;
animation: header 0.7s ease 0.5s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}

}
.main_img {
-webkit-animation: header 0.5s ease 1s;
-moz-animation: header 0.5s ease 1s;
animation: header 0.5s ease 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}

.top_4itm :nth-of-type(1){
-webkit-animation: up 0.5s ease 1.5s;
-moz-animation: up 0.5s ease 1.5s;
animation: up 0.5s ease 1.5s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}
.top_4itm :nth-of-type(2){
-webkit-animation: up 0.5s ease 1.6s;
-moz-animation: up 0.5s ease 1.6s;
animation: up 0.5s ease 1.6s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}
.top_4itm :nth-of-type(3){
-webkit-animation: up 0.5s ease 1.7s;
-moz-animation: up 0.5s ease 1.7s;
animation: up 0.5s ease 1.7s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}
.top_4itm :nth-of-type(4){
-webkit-animation: up 0.5s ease 1.8s;
-moz-animation: up 0.5s ease 1.8s;
animation: up 0.5s ease 1.8s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}


.main_L{
  -webkit-animation: RslideIn 1s ease 2.4s;
  -moz-animation: RslideIn 1s ease 2.4s;
  animation: RslideIn 1s ease 2.4s;;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}
.main_h1{
  -webkit-animation: RslideIn 1s ease 3.1s;
  -moz-animation: RslideIn 1s ease 3.1s;
  animation: RslideIn 1s ease 3.1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}
.rental_price{
  -webkit-animation: RslideIn 1s ease 3.4s;
  -moz-animation: RslideIn 1s ease 3.4s;
  animation: RslideIn 1s ease 3.4s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}


.top_01_features{
  -webkit-animation: up 1s ease 3.8s;
  -moz-animation: up 1s ease 3.8s;
  animation: up 1s ease 3.8s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}
  
.illust_01{
  -webkit-animation: SlidinRight 0.5s ease 4.4s;
  -moz-animation: SlidinRight 0.5s ease 4.4s;
  animation: SlidinRight 0.5s ease 4.4s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}
.illust_02{
  -webkit-animation: SlidinLeft 0.5s ease 4.4s;
  -moz-animation: SlidinLeft 0.5s ease 4.4s;
  animation: SlidinLeft 0.5s ease 4.4s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}
  





body#top { animation:none;}
body {animation: fadeIn 2s ease 0s 1 normal;     -webkit-animation: fadeIn 2s ease 0s 1 normal;  animation: fadeIn 2s ease 0s 1 normal;   -webkit-animation: fadeIn 2s ease 0s 1 normal;}

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

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