@charset "utf-8";

/* (1) 共通設定 */
#search-box-container {
  position: absolute; /* スクロールしても追随しない（ページ上部に固定） */
  z-index: 9999;
}

/* Google標準のスタイルを上書き */
/* 検索窓全体の背景や境界線を消去して位置を合わせる */
#search-box-container .gsc-control-searchbox-only {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* フォーカス時の赤い枠（または青い枠）を消す */
#search-box-container input.gsc-input,
#search-box-container .gsc-input-box,
#search-box-container .gsc-input-box-focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: #ccc !important; /* 通常時の枠の色（必要なら変更してください） */
}

/* 入力ボックス内の余白調整 */
#search-box-container .gsc-input-box {
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
}

/* (2) パソコン用のレイアウト (画面幅769px以上) */
@media screen and (min-width: 769px) {
  #search-box-container {
    top: 10px;
    right: 100px;
    width: 250px;
  }
}

/* (3) スマートフォン用のレイアウト (画面幅768px以下) */
@media screen and (max-width: 768px) {
  #search-box-container {
    top: 100px;
    left: 50%;
    transform: translateX(-50%); /* 左右中央寄せ */
    width: 80%;
  }
}

/* 検索ボタンの高さも30pxに合わせる場合 */
#search-box-container button.gsc-search-button {
  height: 30px !important;
  padding: 0 10px !important;
  margin: 0 !important;
}