/* ヘッダーを基準に配置 */
#header{
  position: relative;
}

/* 右寄せで前面配置 */
#siteSearchBox{
  position: absolute;
  right: 10px;        /* 右端からの余白 */
  top: 40px;          /* descの直下に来るよう微調整 */
  width: 50%;
  min-width: 320px;
  z-index: 50;
}

/* 検索ボックスの黒背景 */
#siteSearchBox .gsc-control-cse{
  background: rgba(0,0,0,0); /* 黒＋透過 */
  border: none;
  padding: 6px 8px;
}

/* 入力欄を横いっぱいに */
#siteSearchBox .gsc-input-box{
  width: 100% !important;
  border-radius: 8px;
/*  background-color: #888 !important; */
}

/* 入力欄の見た目（黒背景に合わせて） */
#siteSearchBox input.gsc-input{
  background: #fff !important;
/*  background-color: #888 !important; */
}

/* 検索ボタンの色（好みで調整） */
#siteSearchBox input.gsc-search-button{
  background: #444 !important;
  border: 1px solid #666 !important;
  color: #fff !important;
}

.gsc-search-button-v2 {
  border-radius: 8px !important;
}

/* 画面が狭い時はほぼ全幅に */
@media screen and (max-width: 640px){
  #siteSearchBox{
    right: 4%;
    width: 92%;
    min-width: 0;
    top: 78px;
  }
}