@charset "utf-8";
/* CSS Document */
/***********************************/
#index .movie{
  position: relative;
  height: 500px;
  overflow: hidden;
}
#index .movie video{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width:100%;
  height:auto;   
}
#index .atract{
  display: table;
  margin: 0 auto;
}
#index .atract ul{
  display: table;
  float: left;
  width: 30%;
  margin: 30px 1.6%;
  position: relative;
}

#index .atract ul h3{
  text-align: center;
  position: absolute;
  width: 100%;
  top:-30px;
  z-index: 1;
}
#index .atract ul h3 img{
-webkit-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 6px 5px 0px rgba(0,0,0,0.3);
}
#index .atract ul li:nth-child(2){
  overflow: hidden;
  position: relative;
}
#index .atract ul li:nth-child(2) img{
  width: 100%;
  transition-duration: 0.3s;
}
#index .atract ul:hover li:nth-child(2) img{
  transform: scale(1.1);  /*画像の拡大率*/
  transition-duration: 0.3s;  /*変化に掛かる時間*/
  opacity: 0.7;
}
#index .atract ul:hover li .arrow img{
  transform: scale(1);
}
#index .atract ul:hover li .arrow{
  bottom:-3%;
  transition-duration: 0.3s;
}
#index .atract .arrow{
  position: absolute;
  right: 0;
  bottom: 0;
  transition-duration: 0.3s;
}

#index .about_us{
  background: url(../img/index/bg_ind_gree.jpg)no-repeat;
  background-position: center top;
  min-height: 1006px;
}
#index .about_us .waku_1200{
  position: relative;
}
#index .about_us .lead{
  line-height: 2.5;
  margin: 60px auto 150px;
  text-align: center;
  display: table;
}
#index .about_us .loop_sl{
  float: right;
  width: 53%;
  position: relative;
}
#index .about_us .gre_family {
    position: absolute;
    bottom: -220px;
    right: 0;
}
#index .conte_top{
  position: relative;
}
.insect01{
  position: absolute;
  top: 140px;
  left: 10%;
    -webkit-animation: spin 5s linear infinite;
    -moz-animation: spin 5s linear infinite;
    -ms-animation: spin 5s linear infinite;
    -o-animation: spin 5s linear infinite;
    animation: spin 5s linear infinite;
}
@keyframes spin {
  0% { transform:translate( 0px,0px); opacity: 0; }
  10% {transform: rotate(0deg);opacity: 1;}
  20% {transform: rotate(360deg);}
  30% { transform:translate( 10px,-5px); opacity: 1; }
  40% { transform:translate( 10px,-5px); opacity: 1; }
  50% { transform:translate( 180px,-170px); opacity: 0; }
  100% { transform:translate( 0px,-0px); opacity: 0; }
}
@-webkit-keyframes spin {
  0% { transform:translate( 0px,0px); opacity: 0; }
  10% {-webkit-transform: rotate(0deg);opacity: 1;}
  20% {-webkit-transform: rotate(360deg);}
  30% { transform:translate( 10px,-5px); opacity: 1; }
  40% { transform:translate( 10px,-5px); opacity: 1; }
  50% { transform:translate( 180px,-170px); opacity: 0; }
  100% { transform:translate( 0px,-0px); opacity: 0; }
}
@-moz-keyframes spin {
  0% { transform:translate( 0px,0px); opacity: 0; }
  10% {-moz-transform: rotate(0deg);opacity: 1;}
  20% {-moz-transform: rotate(360deg);}
  30% { transform:translate( 10px,-5px); opacity: 1; }
  40% { transform:translate( 10px,-5px); opacity: 1; }
  50% { transform:translate( 180px,-170px); opacity: 0; }
  100% { transform:translate( 0px,-0px); opacity: 0; }
}
@-ms-keyframes spin {
  0% { transform:translate( 0px,0px); opacity: 0; }
  10% {-ms-transform: rotate(0deg);opacity: 1;}
  20% {-ms-transform: rotate(360deg);}
  30% { transform:translate( 10px,-5px); opacity: 1; }
  40% { transform:translate( 10px,-5px); opacity: 1; }
  50% { transform:translate( 180px,-170px); opacity: 0; }
  100% { transform:translate( 0px,-0px); opacity: 0; }
}
@-o-keyframes spin {
  0% { transform:translate( 0px,0px); opacity: 0; }
  10% {-o-transform: rotate(0deg);opacity: 1;}
  20% {-o-transform: rotate(360deg);}
  30% { transform:translate( 10px,-5px); opacity: 1; }
  40% { transform:translate( 10px,-5px); opacity: 1; }
  50% { transform:translate( 180px,-170px); opacity: 0; }
  100% { transform:translate( 0px,-0px); opacity: 0; }
}

@keyframes horizontal_s {
    0% { transform:translate( -0px,0); opacity: 0; }
   15% { transform:translate( 90px,-5px); opacity: 1; }
   30% { transform:translate( 180px,-15px); opacity: 1; }
   45% { transform:translate( 240px,-30px); opacity: 1; }
  60% { transform:translate( 310px,-65px); opacity: 1; }
  75% { transform:translate( 390px,-120px); opacity: 1; }
  90% { transform:translate( 410px,-130px); opacity: 0; }
  95% { transform:translate( 530px,-190px); opacity: 0; }
  100% { transform:translate( 0px,-0px); opacity: 0; }
}

@media screen and (max-width:1279px){
  .insect01{
    position: absolute;
    top: 140px;
    left: 0;
    animation: horizontal_s 30s ease-in-out infinite;
  }
  @keyframes horizontal_s {
      0% { transform:translate( -0px,0); opacity: 0; }
     15% { transform:translate( 50px,-5px); opacity: 1; }
     30% { transform:translate( 100px,-20px); opacity: 1; }
     45% { transform:translate( 150px,-45px); opacity: 1; }
    60% { transform:translate( 220px,-85px); opacity: 1; }
    75% { transform:translate( 280px,-130px); opacity: 1; }
    90% { transform:translate( 330px,-160px); opacity: 0; }
    95% { transform:translate( 360px,-190px); opacity: 0; }
    100% { transform:translate( 0px,-0px); opacity: 0; }
  }
}
@media screen and (max-width:1023px){
.insect01{
  position: absolute;
  top: 80px;
  left: 30px;
  animation: none;
}
  #index .movie{
    height: auto;
  }
  #index .movie video{
    position: relative;
    top: 0%;
    left: 0%;
    -webkit-transform: translate(-0%,-0%);
    -moz-transform: translate(-0%,-0%);
    -ms-transform: translate(-0%,-0%);
    -o-transform: translate(-0%,-0%);
    transform: translate(-0%,-0%);
    width:100%;
    height:auto;   
  }

  #index .atract ul h3 img{
    width: 50%;
  }

}

@media screen and (max-width:767px){
  #index .about_us .gre_family,
  .insect01{
    display: none;
  }
	#index .atract ul{
	  float: none;
	  width: 100%;
	  margin: 0 0 80px;
	}
	#index .atract ul:last-child{
	margin-bottom: 0;
	}

	#index .about_us .loop_sl {
	    float: none;
	    width: 100%;
	}

	#index .about_us .lead{
	    margin: 30px auto 60px;
	    line-height: 1.8;
	    text-align: left;
	}

	#index .about_us {
	    background: url(../img/index/bg_ind_gree.jpg)no-repeat;
	    background: none;
	    background-position: center bottom;
	    background-size: contain;
	    min-height: 0;
	}
  #index .atract ul h3 img{
    width: auto;
  }

}