.SearchBar {
  width: 100%;
  height: 3.5rem /* 56px (基準16px) */;
  display: flex;
  align-items: center;
  border: 1px solid #9e9e9e;
  border-radius: 0.25rem /* 4px (基準16px) */;
  overflow: hidden;
}

.SearchBar-wrapper {
  position: relative;
  flex: 1;
  height: 100%;
}

.SearchBar-input {
  width: 100%;
  height: 100%;
  border: none;
  font-size: 0.813rem /* 13px (基準16px) */;
  padding: 0.438rem /* 7px (基準16px) */ 0.563rem /* 9px (基準16px) */;
  padding-right: 2.438rem /* 39px (基準16px) */;
}

.SearchBar-input:focus {
  outline: none;
  caret-color: #9e9e9e;
}

.SearchBar-clearButton {
  position: absolute;
  top: 50%;
  right: 0.563rem /* 9px (基準16px) */;
  transform: translateY(-50%);
  aspect-ratio: 1 / 1;
  width: 1.875rem /* 30px (基準16px) */;
  height: auto;
}

.SearchBar-searchButton {
  aspect-ratio: 72 / 56;
  width: auto;
  height: 100%;
  background-color: #bb4953;
  display: flex;
  align-items: center;
  justify-content: center;
}

.SearchBar-searchButton img {
  width: 1.875rem /* 30px (基準16px) */;
}