/* ============================================================
   検索フォーム（トップページ等の大きな検索ボックス）
   色は style/tokens.css のトークン（--c-* / --icon-*）を参照する。
   ============================================================ */

.search-form2 {
  all: unset;
  width: 100%;
  font-size: 1.1rem;
  -webkit-box-align: center;
  align-items: center;
  border: 1px solid var(--c-border-3);
  background-color: var(--c-bg);
  border-radius: 99rem;
  display: flex;
  position: relative;
  transition: box-shadow 0.2s;
}

.search-label2 {
  all: unset;
  position: absolute;
  left: 0.9rem;
  display: inline-flex;
  align-items: center;
  width: 24px;
  height: 24px;
  background-image: var(--icon-search);
}

.search-form2 input {
  all: unset;
  padding: 0.9rem 1rem 0.9rem 2.9rem;
  width: 100%;
  font-size: inherit;
  background: transparent;
  outline: 0;
  border: none;
  resize: none;
  -webkit-tap-highlight-color: transparent;
}

.search-form2:has(input:focus) {
  outline: 0;
  box-shadow: 0px 0px 0px 1px var(--c-brand);
}