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

.hero .switch{
	position:relative;
}

.hero .dura{
	max-width:3000px;
	position:absolute;
	top:-165.5%;
	left:38.2%;
	/*width:107.5%;*/
	width:30%;
	overflow:hidden;
	/*left:-0.8%;*/
	/*animation-duration: 9.3s;  /* アニメーション時間 
  animation-name: slidein01; */
}

.hero .mike{
	position:absolute;
	overflow:hidden;
	bottom:0;
	right:38%;
	width:6%;
	animation-duration: 9.3s;  /* アニメーション時間 */
  animation-name: slidein06; 
}

.hero .dog{
	position:absolute;
	overflow:hidden;
	bottom: 0%;
    right: 26.5%;
    width: 16.2%;
	animation-duration: 9.3s;  /* アニメーション時間 */
  animation-name: slidein07; 
}

.hero .hi{
	position:absolute;
	overflow:hidden;
	bottom:-0.5%;
	width:30.5%;
	animation-duration: 15s;  /* アニメーション時間 */
  animation-name: slidein08; 
	right: -1%;
}

.hero .copy{
	position:absolute;
	overflow:hidden;
	    top: 4.5%;
    right: 4.5%;
    width: 3.3%;
	animation-duration: 13.5s;  /* アニメーション時間 */
  animation-name: slidein02; 
}


.hero .koukai{
	position:absolute;
	overflow:hidden;
    top: 25.1%;
    left: 5.5%;
    width: 21.5%;
    animation-duration: 9.3s;
    animation-name: slidein05;
}

.hero .kiken{
	position:absolute;
	overflow:hidden;
	bottom:18%;
	left:1.4%;
	width:15.5%;
	animation-duration: 9.3s;  /* アニメーション時間 */
  animation-name: slidein04; 
}

.hero .kiken02{
	animation-iteration-count: infinite;
	animation-duration: 9.3s;  /* アニメーション時間 */
  	animation-name: slidein09; 
}

.hero .logo{
	position:absolute;
	overflow:hidden;
	/*bottom:25.6%;*/
	top:-140.5%;
	left:5.6%;
	width:51.5%;
	animation-duration: 9.3s;  /* アニメーション時間 */
  animation-name: slidein03; 
}

.hero .sisya_03{
	position:absolute;
	overflow:hidden;
    bottom: 2.9%;
    left: 21.9%;
    width: 9.6%;
}

.hero .sisya_03 img{
	display: block;
	width: 100%;
}

.hero .sisya_02{
	position:absolute;
	overflow:hidden;
    bottom: 3%;
    left: 1.4%;
    width: 20%;
}

.hero .sisya{
	position:absolute;
	overflow:hidden;
    bottom: -11%;
    right: 2.1%;
    width: 11.7%;
    z-index: 12;
}


.hero .sisya:hover{
	opacity:0.8;
}

.hero .sisya_02:hover{
	opacity:0.8;
}

.hero .sisya_03:hover{
	opacity:0.8;
}



/*@keyframes slidein01 {
  0% {
	  opacity:0;
  }
  24% {
	  opacity:0;
  }
  34% {
	  opacity:1;
  }
  100% {
	  opacity:1;
  }
}*/

@keyframes slidein02 {
  0% {
	  opacity:0;
  }
  50% {
	  opacity:0;
  }
  68% {
	  opacity:1;
  }
  100% {
	  opacity:1;
  }
}

/*@keyframes slidein03 {
  0% {
	  opacity:0;
  }
  12% {
	  opacity:0;
  }
  22% {
	  opacity:1;
  }
  100% {
	  opacity:1;
  }
}*/

/*@keyframes slidein04 {
  0% {
	  opacity:0;
  }
  62% {
	  opacity:0;
  }
  72% {
	  opacity:1;
  }
  89%{
	 transform: rotate(0deg);
  }
  91%{
	 transform: rotate(-4deg);
  }
  93%{
	 transform: rotate(0deg);
  }
  95%{
	 transform: rotate(-4deg);
  }
  100%{
	 transform: rotate(0deg);
	 opacity:1;
  }

  100% {
	  
  }
}*/

@keyframes slidein05 {
  0% {
	  opacity:0;
  }
  30% {
	  opacity:0;
  }
  40% {
	  opacity:1;
  }
  100% {
	  opacity:1;
  }
}

/*@keyframes slidein06 {
  0% {
	  bottom:-100%;
  }
  52% {
	  bottom:-100%;
  }
  100% {
	  bottom:0;
  }
}*/

@keyframes slidein07 {
  0% {
	  bottom:-100%;
  }
  37% {
	  bottom:-100%;
  }
  45% {
	  bottom:-2.3%;
  }
  49% {
	  bottom:-2.3%;
  }
  50.5% {
	  bottom:0%;
  }
  51.5% {
	  bottom:-2.3%;
  }
  52.5% {
	  bottom:0;
  }
  53.5% {
	  bottom:-2.3%;
  }
  54.5% {
	  bottom:0;
  }

  100% {
	  bottom:0;
  }
}

@keyframes slidein08 {
  0% {
	  right:-100%;
	  bottom:-0.5%;
  }
20% {
	  bottom:-0.5%;
	  right:-100%;
  }
  24% {
	  bottom:-1.5%;
  }
  28% {
	  bottom:-0.5%;
  }
  32% {
	  bottom:-1.5%;
  }
  36% {
	  bottom:-0.5%;
  }
  40% {
	  bottom:-1.5%;
  }
  44% {
	  bottom:-0.5%;
  }
  48% {
	  bottom:-1.5%;
  }
  52% {
	  bottom:-0.5%;
	  right: -1%;
  }
 /* 56% {
	  bottom:-1.5%;
  }
  60% {
	  bottom:-0.5%;
	
  }
  64% {
	  bottom:-1.5%;
  }
  68% {
	  bottom:-0.5%;
  }
62% {
	  bottom:-1.5%;
  }
  66% {
	  bottom:-0.5%;
  }
  70% {
  }*/
  100% {
	right: -1%;
  }
}

/*@keyframes slidein09 {
  89%{
	 transform: rotate(0deg);
  }
  91%{
	 transform: rotate(-4deg);
  }
  93%{
	 transform: rotate(0deg);
  }
  95%{
	 transform: rotate(-4deg);
  }
  97%{
	 transform: rotate(0deg);
  }
  100%{
	 transform: rotate(0deg);
	 
  }
}*/


/*@keyframes slidein {
  0% {
	right:-55%;
  }
    20% {
	right:-55%;
  }

  100% {
	right:0;
  }
}
*/
/*@keyframes slidein02 {
  0% {
	width:15.5%;
  }
  50% {
	width:16%;
  }
  100% {
	width:15.5%;
  }
}*/

/*@keyframes slidein03 {
  0% {
	bottom:-40%;
  }
  90% {
	bottom:0;
  }
  100% {
	bottom:-1%;
  }
}
*//*@media (max-width: 1200px){
.hero .copy{
    width: 42.3%;
}
}*/

@media (max-width: 991px){
.ddd{
	display:none;
	
}
}

@media (min-width: 991px){
.bbb{
	display:none;
	
}
}