body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.bl_textArea_01 {
  position: absolute;
  top: 48%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  color: #fff;
  text-align: center;
}

.bl_gradationWrapper {
  margin-bottom: 80px;
}

.hp_gray {
  color: #cdcdcd;
}

.bl_gradationArea_bgImage {
  position: relative;
  width: 100%;
  height: 400px;
  background: linear-gradient(45deg, rgba(255, 51, 51, 0.7) 0% 20%, rgba(237, 101, 255, 0.7) 40% 50%, rgba(255, 153, 153, 0.7) 70% 100%), url(../images/bg_image.jpg);
  background-size: cover;
  background-position: center;
}

.bl_gradationArea_blur {
  position: relative;
  width: 100%;
  height: 400px;
  background: linear-gradient(20.4deg, rgba(255, 51, 51, 0.7) 0%, rgba(255, 153, 153, 0.7) 46% 50%, rgba(240, 141, 141, 0.7) 50% 100%);
}

.bl_gradationArea_direction {
  position: relative;
  width: 100%;
  height: 400px;
  background-image: linear-gradient(17.4deg, rgba(255, 153, 153, 0) 46% 50%, rgba(240, 141, 141, 0.4) 50% 100%), linear-gradient(90deg, rgba(255, 51, 51, 0.7) 0%, rgba(255, 153, 153, 0.7) 60%);
}

.bl_gradationArea_circle {
  position: relative;
  width: 100%;
  height: 400px;
  background-image: radial-gradient(circle at 78% -20%, rgba(122, 182, 83, 0.5) 5%, rgba(180, 219, 155, 0.5) 30%, rgba(169, 209, 142, 0.5) 30% 100%), radial-gradient(circle at left, #A9D18E 0% 25%, #B5DB9C 45%, #A9D18E 45% 100%);
}

.bl_gradationArea_animation {
  position: relative;
  background: linear-gradient(220deg, #4eb8ff, #ff9999);
  width: 100%;
  height: 400px;
  background-size: 400% 300%;
  -webkit-animation: gradation 12s ease infinite;
          animation: gradation 12s ease infinite;
}

@-webkit-keyframes gradation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/*# sourceMappingURL=gradation.css.map */