#header {
  width: 100%;
  position: fixed;
  z-index: 999;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #ffffff 10%,
    #7caee8 50%,
    #0869D9 80%,
    #0869D9 90%,
    #ffffff 90%,
    #ffffff 100%
  );
}

#header .site-title {
  padding: 20px 16px;
  line-height: 1px;
}
#header .site-title a {
  display: inline-block;
}
.condition-area {
  display: flex;
  margin-bottom: 50px;
}
.condition-input-area {
  display: flex;
  margin-top: 10px;
  margin-bottom: 20px;
}
.condition-input-area input {
  height: 42px;
}
#suggestions {
  float: right;
  position: absolute;
  background-color: #fff;
  z-index: 100;
  border-radius: 10px;
}
.search-input {
  display: flex;
}
.search-button {
  position: relative;
  top: 3px;
  left: -34px;
}
.keyword-button-area {
  display: flex;
  justify-content: left;
  margin-bottom: 20px;
}
.keyword-button-label {
  margin-bottom: 30px;
  padding: 5px 10px;
  color: #fff;
  font-weight: 700;
  width: 16rem;
}
.keyword-button-scroll-area {
  display: flex;
  justify-content: left;
  overflow-x: auto;
  white-space: nowrap
}
.keyword-button {
  background-color: #fff;
  border-radius: 17px;
  margin-bottom: 30px;
  margin-left: 10px;
  padding: 5px 10px;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 767px) {
  #header {
    position: relative;
    padding-bottom: 1px;
  }
  #header .site-title {
    padding: 20px 16px;
  }
  .condition-input-area {
    flex-wrap: wrap;
  }
  .condition-input-area > input,
  .condition-input-area > select {
    width: 100%;
    margin-bottom: 20px;
  }
  .keyword-button-area {
    display: block;
    margin-bottom: 40px;
  }
  .search-input {
    width: 100%;
  }
  .keyword-button-label {
    margin-bottom: 10px;
  }
}