html {
	overflow-y:scroll;
}

.visible-none{
	opacity:0;
	filter: alpha(opacity=0);       
	-ms-filter: "alpha(opacity=0)";
	-moz-opacity:0;               
	-khtml-opacity: 0;
	zoom:1;
}

.key_visual_bg{
	width: 100%;
	height: 100%;
	background: #9d646d;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 950;
}

.key_visual_wrap{
	background: url(../images/loading.gif) no-repeat center center #FFF;
	width:1024px;
	height: 500px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -507px;
	margin-top: -280px;
	border: 3px solid #FFF;
	z-index: 960;
}

.key_visual{
	overflow: hidden;
	position: relative;
}

.phase1{
	background-color:#FFF;
	height: 500px;
	position: relative;
	width: 100%;
}

.phase1 .wave1{
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 300px;
	background: url(../images/wave01.png);
	background-repeat:  repeat-x;
	animation: bg-position2 13s linear 0s infinite backwards;
	-webkit-animation: bg-position2 13s linear 0s 5 backwards;
}

.phase1 .wave2{
	height: 300px;
	background: url(../images/wave02.png);
	background-repeat: repeat-x;
	background-size:auto 650px;
	animation: bg-position 13s linear 0s infinite backwards;
	-webkit-animation: bg-position 13s linear 0s 5 backwards;
}

@-webkit-keyframes bg-position {
  0% { background-position: 0 50px; }
  100% { background-position: 1500px 50px; }
}

@keyframes bg-position {
  0% { background-position: 0 50px; }
  100% { background-position: 1500px 50px; }
}

@-webkit-keyframes bg-position2 {
  0% { background-position: 1500px 50px; }
  100% { background-position: 0 50px; }
}

@keyframes bg-position2 {
  0% { background-position: 1500px 50px; }
  100% { background-position: 0 50px; }
}

.phase1 .catch_copy{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -187px;
	margin-top: -50px;
}


.phase1 .chara_wrap{
	position: absolute;
	top: 0;
	left: 0;

}
.phase1 .chara {
	position: relative;
	height: 500px;
	width: 100%;
}

.phase1 .charaimg,
.phase1 .bubble{
	top: 500px;
	opacity:0;
	filter: alpha(opacity=0);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=0)";  /* ie 8 */
	-moz-opacity:0;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0;              /* Safari 1.x */
	position: absolute;
}

.phase1 .chara .chara01{
	left: 65px;
}
.phase1 .chara .chara02{
	left: 65px;
}
.phase1 .chara .chara03{
	left: 200px;
}
.phase1 .chara .chara04{
	left: 750px;
}
.phase1 .chara .chara05{
	left: 550px;
}
.phase1 .chara .chara06{
	left: 700px;
}
.phase1 .chara .bubble01{
	left: 120px;
}
.phase1 .chara .bubble02{
	left: 600px;
}
.phase1 .chara .bubble03{
	left: 450px;
}
.phase1 .chara .bubble04{
	left: 700px;
}
.key_visual .phase2{
	-webkit-filter: blur(20px);
	filter: blur(20px);
	height: 500px;
	width: 1024px;
	position: absolute;
	top: 0;
	left:0;
	overflow: hidden;
	background-color:#FFF;
	background-image:url(../images/bg2.jpg);
	background-repeat: no-repeat;
	background-position:center center;
	transition: filter 2s linear;  
	-webkit-transition: -webkit-filter 2s linear;  
}

.key_visual .noblur{
	-webkit-filter: blur(0px);
	filter: blur(0px);
}

.phase2 .title{
	height: 500px;
	position: relative;
}

.phase2 .title img{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -348px;
	margin-top: -150px;
}

.skip{
	position: absolute;
	text-align: center;
	width: 100%;
	top: 520px;
}
.skip a{
	display: inline-block;
	background: #FFF;
	padding: 2px 20px;
	text-decoration: none;
	color:#9d646d;
}