/* ロゴ */
path.st0, polygon.st0 {
	opacity: 0;	
    fill: none;
    stroke: #fff;
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    stroke-width: 0.6;
    -webkit-animation: logo 30s ease-in forwards 1;
    animation: logo 30s ease-in forwards 1;
	animation-delay: 17s;	
}
@-webkit-keyframes logo {
 0% {
 stroke-dashoffset: 2000;
 fill:transparent;
 opacity: 0;	 
}
 1% {
 stroke-dashoffset: 2000;
 fill:transparent;
 opacity: 1;	 
}	
 10% {
 fill:transparent;
}
 15% {
 stroke-dashoffset: 0;
 fill:#fff;
}
 99% {
 fill:transparent;
}	
 100% {
 stroke-width: 0;
 fill:transparent;
}
}
@keyframes logo {
 0% {
 stroke-dashoffset: 2000;
 fill:transparent;
 opacity: 0;	 
}
 1% {
 stroke-dashoffset: 2000;
 fill:transparent;
 opacity: 1;	 
}	
 10% {
 fill:transparent;
}
 15% {
 stroke-dashoffset: 0;
 fill:#fff;
}
 99% {
 fill:transparent;
}	
 100% {
 stroke-width: 0;
 fill:transparent;
}		
}

/* テキスト
--------------------------- */
#text h1.rv1 {
  	animation-name: fade-in1;	
	animation-delay: 2.5s;
}
@keyframes fade-in1 {
  0% {opacity: 0; transform: translate3d(0,20px,0);}
  5% {opacity: 1; transform: translate3d(0,0,0);}
  75% {opacity: 1; transform: translate3d(0,0,0);}	
  100% {opacity: 0;}	
}
#text h1.rv2 {
  	animation-name: fade-in2;	
	animation-delay: 4.5s;
}
@keyframes fade-in2 {
  0% {opacity: 0; transform: translate3d(0,20px,0);}
  5% {opacity: 1; transform: translate3d(0,0,0);}	
  75% {opacity: 1; transform: translate3d(0,0,0);}		
  100% {opacity: 0;}	
}
#text h1.rv3 {
  	animation-name: fade-in3;	
	animation-delay: 6.5s;
}
@keyframes fade-in3 {
  0% {opacity: 0; transform: translate3d(0,20px,0);}
  5% {opacity: 1; transform: translate3d(0,0,0);}	
  75% {opacity: 1; transform: translate3d(0,0,0);}		
  100% {opacity: 0;}	
}
#text h1.rv4 {
  	animation-name: fade-in4;	
	animation-delay: 8.5s;
}
@keyframes fade-in4 {
  0% {opacity: 0; transform: translate3d(0,20px,0);}
  5% {opacity: 1; transform: translate3d(0,0,0);}	
  75% {opacity: 1; transform: translate3d(0,0,0);}		
  100% {opacity: 0;}	
}





/**
 * レスポンシブ: SP用 ウィンドウ幅480px以下
 */
@media screen and ( max-width:480px) {
	
/* ロゴ */
path.st0, polygon.st0 {
	opacity: 0;	
    fill: none;
    stroke: #fff;
    stroke-dasharray: 2000;
    stroke-dashoffset: 0;
    stroke-width: 0.6;
    -webkit-animation: logo 30s ease-in forwards 1;
    animation: logo 30s ease-in forwards 1;
	animation-delay: 13s;	
}
}