x@charset "utf-8";
/* CSS Document Googleカスタム検索カスタマイズ専用 */


/* 外側の大きな余白と背景の影を消す */
.gsc-control-cse {
  width: 180px !important; 
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
}
/*  SP時 */
@media screen and (max-width: 767px) {
.gsc-control-cse {
	width: 100% !important;
	margin-top: 20px !important;
	}
}

/* 入力欄を囲むボックスの余白と高さを固定 */
.gsc-input-box {
  height: 34px !important;
  margin: 0 !important;
  border: 1px solid #ccc !important;
  background-color: #fff !important; 
}

/* テーブル要素（レイアウト用）の余白をリセット */
table.gsc-search-box {
  margin: 0 !important;
  border-collapse: collapse !important;
}

table.gsc-search-box td {
  vertical-align: middle !important;
  padding: 0 !important;
}

/* 検索ボタン（虫眼鏡）の強制表示設定 */
button.gsc-search-button {
  margin: 0 !important;
  height: 34px !important;
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  background-color: #333 !important; /* ボタンの色を黒系に固定 */
  border: none !important;
  display: block !important; /* 消えないように強制 */
  cursor: pointer;
}

/* アイコン自体の色とサイズ */
.gsc-search-button svg {
  fill: #fff !important;
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle !important;
}

/* プレースホルダー（サイト内検索）の設定 */
input.gsc-input::placeholder {
  color: #999 !important; /* ここで文字色をグレーにする */
  opacity: 1 !important;
}

/* 入力中の「×」ボタンなどの余白を調整 */
.gsib_a {
  padding: 0 10px !important;
}

.gsib_b {
  display: none !important; /* 検索補助アイコン不要 */
}

/* 検索ボタンの余白リセット */
button.gsc-search-button {
  height: 34px !important;
  min-width: 40px !important;
  background-color: #333 !important;
  border: none !important;
  display: flex !important; /* 強制表示 */
  align-items: center;
  justify-content: center;
}

/* ヘッダー内の検索窓用調整 */
.header-sub-nav__item .gsc-control-cse {
  width: 180px !important; 
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* SPのみ：検索窓全体の高さ（例：34px〜38px程度） */
@media screen and (max-width: 767px) {
  .gsc-input-box {
    height: 36px !important; 
  }

/* 元々のGoogleプレースホルダー（透かし）を完全に消す */
input.gsc-input {
  height: 36px !important;
  line-height: 36px !important;
  font-size: 11px !important;
  background-image: none !important;
  background: #fff !important; /* 背景を白に固定 */
  text-indent: 0 !important;
}

/* プレースホルダーの文字色を透明にする（文字が重ならないように） */
input.gsc-input::placeholder {
  color: transparent !important;
}

/* 代わりに「サイト内検索」という文字を背景として配置する */
input.gsc-input:not(:focus) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="150" height="34"><text x="10" y="22" font-family="sans-serif" font-size="14" fill="%23999999">サイト内検索</text></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: auto 36px !important;
}

/* 検索ボタン */
button.gsc-search-button {
  background-color: #de6666 !important;
  border-radius: 4px !important; /* 角を少し丸くする */
  height: 36px !important;
}