@charset "UTF-8";

.bar{
  padding : 10px;
  background: -webkit-linear-gradient(top, #66ee33 0%, #009600 100%);
  background: linear-gradient(to bottom, #66ee33 0%, #009600 100%);
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
  margin-top : 14px;
}

.gradation_box{
  background-color : #e74c3c;
  animation: bg-color 10s infinite;
  -webkit-animation: bg-color 10s infinite;
  text-align : center;
  padding-top : 10px;
  padding-left : 10px;
  padding-right : 10px;
  padding-bottom : 10px;
  color : white;
  font-size : 24px;
}
@-webkit-keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
@keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}

/* タブレット(768px以下のディスプレイで見た場合のスタイル) */ 
  @media screen and (max-width: 768px) {
  .gradation_box{
  font-size : 20px; 
  }
  }
/* end */ 

/* タブレット(480px以下のディスプレイで見た場合のスタイル) */ 
  @media screen and (max-width: 480px) {
  .gradation_box{
  font-size : 18px; 
  }
  }
/* end */