.site-search {
  width: min(100%, 900px);
  margin: 2rem auto 0;
  padding: 0 clamp(16px, 3vw, 32px) 4rem;
  overflow-wrap: anywhere;
  color: #26343d;
  font: 16px/1.7 system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
}
.site-search h1 { color: #245d72; line-height: 1.3; }
.site-search nav { font-size: .9rem; }
.site-search a { color: #176481; text-decoration: underline; text-underline-offset: .15em; }
.site-search :focus-visible { outline: 3px solid #245d72; outline-offset: 3px; }
.site-search label { display: block; margin-bottom: .35rem; font-weight: 700; }
.site-search-controls { display: flex; gap: .5rem; }
.site-search input {
  flex: 1;
  min-width: 0;
  padding: .7rem .8rem;
  border: 1px solid #98aab3;
  border-radius: 5px;
  font: inherit;
}
.site-search button {
  padding: .7rem 1.1rem;
  border: 0;
  border-radius: 5px;
  background: #245d72;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.site-search button:hover { background: #174454; }
.site-search-results { padding-left: 1.5rem; }
.site-search-results li { margin: 1.2rem 0; padding: 1rem; border: 1px solid #d8e2e7; border-radius: 6px; background: #f8fafb; }
.site-search-results h2 { margin: 0; font-size: 1.1rem; line-height: 1.5; }
.site-search-results p { margin: .5rem 0 0; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .site-search { margin-top: 1.5rem; padding: 0 16px 2.5rem; }
  .site-search-controls { flex-direction: column; }
  .site-search button { align-self: flex-start; }
}