@charset "utf-8";

* {
  margin: 0;
  padding: 0;
}

.m1 {
  color: #f00;
}

.small {
  color: #ff0;
}

a {
  text-decoration: none;
  color: #777;
  border: 3px solid #00f;
}

#ccc {
  background: #f00;
}

.skyblue {
  color: skyblue;
}

.pink {
  color: pink;
}

.ggg {
  background: #ff0;
}

.gnb li {
  margin: 1em;
}

p {
  -webkit-animation-name: slidein;
  animation-name: slidein;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

.wrap {
  width: 1000px;
  margin: 0 auto;
}

@-webkit-keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }
  50% {
    margin-left: 60%;
    width: 200%;
    color: #f00;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

@keyframes slidein {
  0% {
    margin-left: 100%;
    width: 300%;
  }

  50% {
    margin-left: 60%;
    width: 200%;
    color: #f00;
  }
  100% {
    margin-left: 0%;
    width: 100%;
  }
}

.mt50 {
  margin-top: 50px;
  font-weight: bold;
  font-size: 30px;
}

.red {
  color: #f00;
  font-size: 22px;
}