@charset "utf-8";
/* CSS Document */
body {
  background-color: #dbd4b4;
}
p{
  width:100%;
}
.article_container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 100px;
  max-width: 630px;
  margin: 0 auto;
}
.flex {
  margin: 20px auto 10px;
  padding: 10px;
  align-content: space-around;
  width: 150px;
  height: 150px;
  font-size: 3.4rem;
  position:relative;
}
.flex p {
width:100%;
position: absolute;
  top: 50%;  
  left:50%;
   transform: translate(-50%, -50%) ;
}
.fadeup {
  transition: 1s; /*★処理前にかける*/
  opacity: 0;
  transform: translateY(45px);
}
.up {
  opacity: 0.8;
  transform: translateY(0px);
}
.dark {
  background: linear-gradient(#114357, #f29492);
  border-radius: 50% 40% 50% 30%/50% 30% 70% 50%;
}
.bright {
  background: linear-gradient(#e1eec3, #f05053);
  border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
}
.calm {
  background: linear-gradient(#636fa4, #e8cbc0);
  border-radius: 50% 30% 50% 40%/50% 40% 70% 60%;
}