.greeting {
  position: relative;
  width: 100%;
  min-height: 300px;
  background: #37b76c;
  background: radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 15%);
  background: -webkit-radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 15%);
  background: -moz-radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 15%);
  background: url(file/greeting.jpg) 0 -160px no-repeat;
  background-size: 100% auto;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 1550px) {
  .greeting {
    background: url(file/greeting.jpg) 0 -90px no-repeat;
    background-size: cover;
  }
}  

@media screen and (max-width: 1100px) {
  .greeting {
    background: radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 25%);
    background: -webkit-radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 25%);
    background: -moz-radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 25%);
    background: url(file/greeting.jpg) 0 0 no-repeat;
    background-size: cover;
  }
  @media screen and (max-width: 850px) {
    .greeting {
      background: radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 28%);
      background: -webkit-radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 28%);
      background: -moz-radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 28%);
      background: url(file/greeting.jpg) 0 0 no-repeat;
      background-size: cover;
    }
  }
  @media screen and (max-width: 730px) {
    .greeting {
      background: radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 33%);
      background: -webkit-radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 33%);
      background: -moz-radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 33%);
      background: url(file/greeting.jpg) 0 0 no-repeat;
      background-size: cover;
    }
  }
  @media screen and (max-width: 620px) {
    .greeting {
      background: radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 37%);
      background: -webkit-radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 37%);
      background: -moz-radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 37%);
      background: url(file/greeting.jpg) 0 0 no-repeat;
      background-size: cover;
    }
  }
  @media screen and (max-width: 500px) {
    .greeting {
      background: radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 43%);
      background: -webkit-radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 43%);
      background: -moz-radial-gradient(circle farthest-corner at center center, #37b76c 10%, #ffffff 43%);
      background: url(file/greeting.jpg) 0 0 no-repeat;
      background-size: cover;
    }
  }
}