body {
	height: 100%;
	width: 100%;
	background-image: linear-gradient(0deg, rgba(168, 202, 240, 1), rgba(233, 240, 250, 1))
  }
.top{
	font-size:1.5vw;
	font-family: "Arial Black";
	text-decoration: none;
	color:  #FFAB91;
}
.top:hover{
	color: #f75090;
}
.sample {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color:  #FFAB91;
	text-shadow: 0.02em 0.02em 0.02em rgba(0,0,0,1);
}
@font-face {
    /*   適用させるフォント名 → 間違っていると反映されないので注意  */
    font-family: "０７ロゴたいぷゴシック７";
    /*   .otf, .ttfの拡張子がついているファイルがフォントファイルである。   */
	/*   フォントファイルが何処場所にあるのか : パスを書いてあげる   */
    src: url(../font/ロゴたいぷゴシック.otf);
}
.message{
	font-size: 1.5vw;  
    color: #47266e;
	font-family: "０７ロゴたいぷゴシック７";
    text-align:center;
}
#box1:hover{
    animation:3s linear infinite rotation1;
  }
@keyframes rotation1{
    0%{ transform:rotateX(0);}
    100%{ transform:rotateX(360deg); }
  }
#background_animation{
	width:100%;
}
#fish{
	width:100%;
	height:100%;
	background:url(images/00193.png);
	animation: fishmove 20s linear infinite;
	-webkit-animation: fishmove 20s linear infinite;
	-moz-animation: fishmove 20s linear infinite;
}
@keyframes fishmove {
	0% {background-position: 0 0;}
	25% {background-position: 200px 5px;}
	50% {background-position: 400px 0;}
	75% {background-position: 600px 5px;}
	100% {background-position: 800px 0;}
}
@-webkit-keyframes fishmove {
	0% {background-position: 0 0;}
	25% {background-position: 200px 5px;}
	50% {background-position: 400px 0;}
	75% {background-position: 600px 5px;}
	100% {background-position: 800px 0;}
}
@-moz-keyframes fishmove {
	0% {background-position: 0 0;}
	25% {background-position: 200px 5px;}
	50% {background-position: 400px 0;}
	75% {background-position: 600px 5px;}
	100% {background-position: 800px 0;}
}
#bubble{
	width:2000px;
	height:800px;
	background:url(images/dot_pattern1cp3.png);
	animation: bubblemove 20s linear infinite;
	-webkit-animation: bubblemove 20s linear infinite;
	-moz-animation: bubblemove 20s linear infinite;
}
@keyframes bubblemove {
	0% {background-position: 0 800px;}
	25% {background-position: 5px 600px;}
	50% {background-position: 0 400px;}
	75% {background-position: 5px 200px;}
	100% {background-position: 0 0;}
}
@-webkit-keyframes bubblemove {
	0% {background-position: 0 800px;}
	25% {background-position: 5px 600px;}
	50% {background-position: 0 400px;}
	75% {background-position: 5px 200px;}
	100% {background-position: 0 0;}
}
@-moz-keyframes bubblemove {
	0% {background-position: 0 800px;}
	25% {background-position: 5px 600px;}
	50% {background-position: 0 400px;}
	75% {background-position: 5px 200px;}
	100% {background-position: 0 0;}
}