h1{
	text-align: center;
}
body {
	background-color:#87cefa  ;
}
.button008 {
	border-radius: 100px;/*角丸ボタン*/
    background: #eee;
    position: relative;
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 25px;
    color: #000000 ;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    z-index:0;
}


.button008 {
 display: inline-block; 
 padding: .75em 4em .75em 2em; 
 color: #333;
 text-decoration: none; 
 text-align: center; 
 border: 2px solid #7cfc00; 
 border-radius: 3em; 
 position: relative; 
 transition: all ease .3s;
}


.button008 a:before { /*カーソルがボタンに触れたとき*/
	border-radius: 100px;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    display: block;
    background: #f0fff0 ;
    transition: .3s;
    left:0;
}
.button008 a:hover {
    color: #000000  ;/*触れたときの文字の色*/
}
.button008 a:hover:before {
    width: 100%;
    z-index: -1;
}


.button008::before {
 display: block; 
 position: absolute; 
 right: 1em; top: 50%; 
 transform: translateY(-50%); 
 width: 2em; 
 height: 2em; 
 background: #7fff00; 
 border-radius: 50%; 
 content: "";
}

.button008::after { 
	display: block; 
	position: absolute; 
	top: 50%; 
	right: 1.8em; 
	transform: translateY(-50%) rotate(45deg); 
	width: .4em; 
	height: .4em; 
	border-top: 2px solid #ffff00 ; 
	border-right: 2px solid #ffff00 ; 
	content: ""; 
	animation: move-arrow 1.5s linear infinite;
}

@keyframes move-arrow {
  0% { 
  	right: 3em; 
  	opacity: 0;
  }

  30% { 
  	opacity: 1;
  }

  60% { 
  	opacity: 1;
  }

  100% { 
  	right: 1em; 
  	opacity: 0;
  }
}
h2{
	margin-top:35px; margin-bottom:15px;
}

.class1{
	background-color: #e0ffff;
}
.class2{
	background-color: #fffff0;
}
.color1{
	background-color: #00bfff ;
}
.color2{
	background-color: skyblue ;
}
.color3{
	background-color: deepskyblue ;
}
.color4{
	background-color: red ;
}
.color5{
	background-color: yellow ;
}
.color6{
	background-color: yellowgreen ;
}
.color7{
	background-color: purple ;
}
.r{
	color:#ff0000;
}
.b{
	color:#0000ff;
}
table {
 width: 100%;
 text-align: center;
 border-collapse: collapse;
 border-spacing: 0;
 border: solid 2px #778ca3;
}
th {
 padding: 10px;
 background: #ffffff;
 border: solid 1px #778ca3;
 border-bottom: solid 2px #778ca3;
}
td {
 padding: 10px;
 border-left: solid 1px #778ca3;
 background: #ffffff;
}
tr {
 border-top: dashed 1px #778ca3;
 background: #ffffff;
}