/* --- 検索全体のBOX (サンプル用)--- */

#makeImg {
}

.searchArea{
  width          : 330px;              /* BOXの幅               */
  height         : 20px;               /* BOXの高さ             */
  margin         : auto;               /* サンプルを中心に寄せ  */
  letter-spacing : 0.1em;              /* 文字間隔              */
  font-weight    : bold;               /* 太字                  */
  line-height    : 0;                  /* 標準の行高さ          */
}
 
 /* --- テキスト入力欄のSTYLE設定 --- */
.searchArea .searchText {
  display        : block;              /* ブロック化            */
  float          : left;               /* 横並び                */
  box-sizing     : border-box;         /* 枠線,余白を含んだ長さ */
  height         : 20px;               /* 入力の高さ            */
  width          : 210px;              /* 入力の幅              */
  margin         : 0px 0 0 0;                  /* 外余白                */
  padding        : 0 5px;             /* 内余白                */
  border         : 2px solid rgba(46, 139, 87, 0.77);  /* 枠線　幅,実践,色      */
  border-radius  : 4px 0 0 4px;      /* 左上下の角丸          */
  color          : #333;               /* 文字色                */
  outline        : 0;                  /* 入力の薄い枠を非表示  */
  font-size      : 13px;               /* フォントサイズ        */
}

 @media screen and (max-width: 768px) {
.searchArea .searchText {
  margin         : 7px 0 0 0;                  /* 外余白                */
}
  }

 /* --- 検索ボタン欄のSTYLE設定 --- */
.searchArea .searchButton {
  float          : left;               /* 横並び                */
  box-sizing     : border-box;         /* 枠線,余白を含んだ長さ */
  height         : 20px;               /* 入力の高さ            */
  margin         : 0px 0 0 0;                 /* 外余白                */
  padding        : 6px 10px;           /* 内余白                */
  border         : none;               /* 枠線　幅,実践,色      */
  border-radius  : 0 4px 4px 0;      /* 右上下の角丸          */
  background     : rgba(46, 139, 87, 0.77);            /* ボタンの色            */
  color          : #fff;               /* 文字色                */
  cursor         : pointer;            /* カーソル設定          */
  line-height    : 13px;               /* 1行の高さ             */
  font-size      : 13px;               /* フォントサイズ        */
}

 @media screen and (max-width: 768px) {
.searchArea .searchButton {
  margin         : 7px 0 0 0;                 /* 外余白                */
}
  }

 /* --- 検索ボタン欄にフォーカスか来たとき --- */
.searchArea .searchText:focus {
  background     : #cfe7ff;            /* フォーカス時の背景色  */
}
 
 /* --- 検索ボタン内のアイコンSTYLE設定 --- */
.searchArea .searchImg {
  display        : inline-block;       /* インラインブロック化  */
  width          : auto;               /* 幅は高さに合わせる    */
  height         : 13px;               /* 画像の高さ            */
  margin         : 0 3px 0 0;          /* 余白                  */
  vertical-align : middle;             /* 横の文字位置          */
}
 
 /* --- IEの入力エリア右側×消し -------------------------*/
.searchArea .searchText::-ms-clear {
  display        : none;               /* ×を消す              */
}