/* ### TOP page BG Anime CSS ### */



/* --Background image-- */

#wrapper {
          width: 100%;
          height: 100%;
          margin: 0;
          background: url(../img/background3_bw.jpg) no-repeat center center fixed;   
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          }

#top  {
      width: 100%;
     height: 81px;
}


/* ### コンテンツ ### --------------------------------------------  */

/* dolphin sign image --*/
#content       {
               position: relative;
               text-align: center;
               width: 100%;
               height: auto;
               margin-top: 8%;
               margin-bottom: 21%;
               }


#content img   {
               margin: 0;
               border: none;
               float:none;
               opacity: 0.3; 
               } 

/* 
.appIconBig    {
    　　      　margin-left: auto;
               margin-right: auto;
　　　　　　　　　margin-bottom:auto;
               }

--*/

/* animation style */
.contentpost   {
               -webkit-animation: fadein 20s;
	           -moz-animation: fadein 20s;
	           -o-animation: fadein 20s;
	           -ms-animation: fadein 20s;
	           }
								
@-webkit-keyframes fadein   {       
            　　0%   { opacity: 0;}
			   100% { opacity: 100;}
			   }	
			   
@-moz-keyframes fadein   {
               0%   { opacity: 0;}
			   100% { opacity: 100;}
			   }	

@-o-keyframes fadein   {
               0%   { opacity: 0;}
			   100% { opacity: 100;}
			   }	
			   
@-ms-keyframes fadein   {
               0%   { opacity: 0;}
			   100% { opacity: 100;}
			   }




/* ------------------------------------------------------  */

#cb-slideshow,
#cb-slideshow:after {
 -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color:rgba(0, 0, 0, 0);
}

#cb-slideshow ul {
    list-style-type: none;
    }


#cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    background-size: cover;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 36s linear infinite 0s;
}

#cb-slideshow li div {
    position: absolute;
    width: 100%;
	top: 72%;
    bottom: 0px;
     left: auto;
	right: 0.4%;
    opacity: 0;
    color: #fff;
    animation: titleAnimation 36s linear infinite 0s;
}

#cb-slideshow li div p {
    text-align: center;
    font-family: 'Orbitron';
    font-size: 48px;
    line-height: 1.5;
    }



/* anime photo */
#cb-slideshow li:nth-child(1) span {
    background-image: url(../img/background3_bw.jpg);
    animation-delay: 1s;
}
#cb-slideshow li:nth-child(2) span {
    background-image: url(../img/background2_bw.jpg);
	animation-delay: 8s;
}
#cb-slideshow li:nth-child(3) span {
    background-image: url(../img/background_bw.jpg);
    animation-delay: 14s;
}
#cb-slideshow li:nth-child(4) span {
    background-image: url(../img/background.jpg);
    animation-delay: 20s;
}
#cb-slideshow li:nth-child(5) span {
    background-image: url(../img/background_d.jpg);
    animation-delay: 28s;
}
/* anime photo */ 


/* anime title */ 
#cb-slideshow li:nth-child(1) div {
    animation-delay: 1s;
}
#cb-slideshow li:nth-child(2) div {
    animation-delay: 10s;
}
#cb-slideshow li:nth-child(3) div {
    animation-delay: 14s;
}
#cb-slideshow li:nth-child(4) div {
    animation-delay: 18s;
}
#cb-slideshow li:nth-child(5) div {
    animation-delay: 28s;
}

  
@keyframes imageAnimation {
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes titleAnimation {
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

.no-cssanimations 
#cb-slideshow li span{
    opacity: 1;
}



/* anime title */ 
@media screen and (max-width:979px) {
    
html { 
  background: url(../img/background3_bw.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color:#000000;
  }

#cb-slideshow li{ display:none ;} 

}


@media screen and (max-width: 600px) {

html { 
  background: url(../img/background3_bw.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color:#000000;
  }

#cb-slideshow li{ display:none ;}