@charset "UTF-8";


body{
    background-image: url("image2/haikei2.jpg");
    background-repeat: repeat-x;
    background-size: contain;
}

.yura{
    transform-origin: center bottom;
    animation: yurayura 2s linear infinite;
}

@keyframes yurayura {
  0% , 100%{
      transform: rotate(10deg);
  }
  50%{
      transform: rotate(-10deg);
  }
}



@media  (min-width: 1024px) {
  	.amanosennsei_p{
		position: absolute;
		top:3%;
		left: 65%;
	}
	.honnbunn {
    position: absolute;
    top: 70%;
    left:56%;
    font-size: 260%;

       
    }
	
	.abesennsei{
	position: absolute;
	top: 20%;
	left: 10%;
}
	.matumotosennsei{
	position: absolute;
	top:100%;
	left: 10%;
}
	.nagasesennsei{
	position: absolute;
	top:140%;
	left: 50%;
}
	.yamamotosennsei{
	position: absolute;
	top: 200%;
	left: 30%;
}
	.mizukawasennsei{
	position: absolute;
	top: 250%;
	left: 10%;
}
	.yoppara_p{width: 30%;}}

@media  (max-width: 1023px) {
   .amanosennsei_p{
		position: absolute;
		top:5%;
		left: 61%;
	}
	.honnbunn{
    position: absolute;
    top: 30%;
    left:40%;
    font-size: 100%;
		
}
	.abesennsei{
	position: absolute;
	top: 20%;
	left: 6%;
}
.matumotosennsei{
	position: absolute;
	top:50%;
	left: 6%;
}
.nagasesennsei{
	position: absolute;
	top:70%;
	left: 50%;
}
.yamamotosennsei{
	position: absolute;
	top: 95%;
	left: 26%;
}
.mizukawasennsei{
	position: absolute;
	top: 125%;
	left: 10%;	
}
.ikedasennsei{
	position: absolute;
	top: 120%;
	left: 55%;		
	}
	.kikkawasennsei{
	position: absolute;
	top: 147%;
	left: 30%;	
	}
.minorin{
	position: absolute;
	top: 165%;
	left: 60%;	
	}
.hiraharasennsei{
	position: absolute;
	top: 180%;
	left: 20%;	
	}
.makabesennsei{
	position: absolute;
	top: 200%;
	left: 55%;	
	}
.tokuhisasennsei{
	position: absolute;
	top: 220%;
	left: 17%;	
	}
.yaaman{
	position: absolute;
	top: 240%;
	left: 55%;	
	}	
	.yoppara_p{width: 50%;}
}


.amanosennsei_p{width: 30vw;}


.matumotosennsei_p{
	width: 30vw;
}

.abesennsei_p{
	width: 30vw;
}

.nagasesennsei_p{width: 30vw;}

.yamamotosennsei_p{
	width: 30vw;
}

.mizukawaswnnsei_p{width: 30vw;}
.ikedasennsei_p{
	width: 30vw;
}
.kikkawasennsei_p{
	width: 30vw;
}
.minorin_p{
	width: 30vw;
}
.hiraharasennsei_p{
	width: 30vw;
}
.makabesennsei_p{
	width: 30vw;
}
.tokuhisasennsei_p{
	width: 30vw;
}
.yaaman_p{
	width: 30vw;
}
.bubbles{
    width:1000vw;
    padding-left:20px;
    position:absolute;
    bottom:0;
    margin-left:-90px;
    left:50%;
    display:inline-block;
}

.bubble{
    -webkit-animation:short-bubble 1500ms linear infinite;
    animation:short-bubble 1500ms linear infinite;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    height:10px;
    width:9px;
    border:1px solid rgba(240,240,240,0.5);
    border-radius:50%;
}

.b2{
    -webkit-animation:medium-bubble 5000ms linear infinite;
    animation:medium-bubble 5000ms linear infinite;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    margin-left:-7px;
    margin-top:25px;
    height:13px;
    width:12px;
}

.b3{
    -webkit-animation-duration:3500ms;
    animation-duration:3500ms;
    margin-left:-5px;
    margin-bottom:10px;
}

.b4{
    -webkit-animation-duration:2000ms;
    animation-duration:2000ms;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    margin:0 0 40px -9px;
    height:7px;
    width:6px;
}

.b5{
    -webkit-animation:medium-bubble 3000ms linear infinite;
    animation:medium-bubble 3000ms linear infinite;
    -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    margin-left:-1px;
    margin-top:100px;
    height:5px;
    width:4px;
}

.b6{
    -webkit-animation-duration:3000ms;
    animation-duration:3000ms;
    margin-left:-8px;
    margin-bottom:50px;
}

.b7{
    -webkit-animation-duration:6000ms;
    animation-duration:6000ms;
    margin-left:-3px;
    margin-bottom:50px;
    height:15px;
    width:15px;
}

.b8{
    -webkit-animation:medium-bubble 2000ms linear infinite;
    -webkit-animation-fill-mode:forwards;
    animation:medium-bubble 2000ms linear infinite;
    animation-fill-mode:forwards;
    margin-left:-13px;
    margin-bottom:10px;
}

@-webkit-keyframes short-bubble{
    0%{ -webkit-transform:translate3d(5px, 0, 0);opacity:0; }
    13%{ -webkit-transform:translate3d(2px, -20px, 0); opacity:1; }
    20%{ -webkit-transform:translate3d(5px, -40px, 0) scale(1.2); }
    30%{ -webkit-transform:translate3d(0, -60px, 0); }
    40%{ -webkit-transform:translate3d(8px, -80px, 0); }
    50%{ -webkit-transform:translate3d(3px, -100px, 0); }
    60%{ -webkit-transform:translate3d(8px, -120px, 0); }
    70%{ opacity:0.4; }
    80%, 100%{ -webkit-transform:translate3d(0,-200px, 0); opacity:0; }
}

@keyframes short-bubble{
    0%{ transform:translate3d(5px, 0, 0);opacity:0; }
    13%{ transform:translate3d(2px, -20px, 0); opacity:1; }
    20%{ transform:translate3d(5px, -40px, 0) scale(1.2); }
    30%{ transform:translate3d(0px, -60px, 0); }
    40%{ transform:translate3d(8px, -80px, 0); }
    50%{ transform:translate3d(3px, -100px, 0); }
    60%{ transform:translate3d(8px, -120px, 0); }
    70%{ opacity:0.4; }
    80%, 100%{ transform:translate3d(0,-200px, 0); opacity:0; }
}

@-webkit-keyframes medium-bubble{
    0%{ -webkit-transform:translate3d(0, 0, 0); opacity:0;}
    5%{ -webkit-transform:translate3d(4px, -20px, 0); opacity:1;}
    10%{ -webkit-transform:translate3d(2px, -40px, 0) rotate(10deg); }
    20%{ -webkit-transform:translate3d(7px, -80px, 0) rotate(14deg) scale(0.7); }
    30%{ -webkit-transform:translate3d(5px, -120px, 0) rotate(15deg); }
    40%{ -webkit-transform:translate3d(1px, -160px, 0) rotate(20deg); }
    50%{ -webkit-transform:translate3d(2px, -200px, 0) rotate(18deg) scale(1.1); }
    60%{ -webkit-transform:translate3d(-3px, -240px, 0) rotate(22deg); opacity:0.4; }
    100%{ -webkit-transform:translate3d(0, -400px, 0); opacity:0; }
}

@keyframes medium-bubble{
    0%{ transform:translate3d(0, 0, 0); opacity:0;}
    5%{ transform:translate3d(4px, -20px, 0); opacity:1;}
    10%{ transform:translate3d(2px, -40px, 0) rotate(10deg); }
    20%{ transform:translate3d(7px, -80px, 0) rotate(14deg) scale(0.7); }
    30%{ transform:translate3d(5px, -120px, 0) rotate(15deg); }
    40%{ transform:translate3d(1px, -160px, 0) rotate(20deg); }
    50%{ transform:translate3d(2px, -200px, 0) rotate(18deg) scale(1.1); }
    60%{ transform:translate3d(-3px, -240px, 0) rotate(22deg); opacity:0.4; }
    100%{ transform:translate3d(0, -400px, 0); opacity:0; }
}