@charset "UTF-8";

.searchArea{
  width          : 100%;              /* BOXの幅               */
  height         : 30px;               /* 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         : 2em;               /* 入力の高さ            */
  max-width      : 80%;                /* 入力の幅              */
  margin         : 0;                  /* 外余白                */
  padding        : 0 1em;              /* 内余白                */
  border         : 1px solid #090158;  /* 枠線　幅,実践,色      */
  border-radius  : 1em 0 0 1em;        /* 左上下の角丸          */
  color          : #333;               /* 文字色                */
  outline        : 0;                  /* 入力の薄い枠を非表示  */
  font-size      : 1em;               /* フォントサイズ        */
}
 
 /* --- 検索ボタン欄のSTYLE設定 --- */
.searchArea .searchButton {
  float          : left;               /* 横並び                */
  box-sizing     : border-box;         /* 枠線,余白を含んだ長さ */
  height         : 2em;               /* 入力の高さ            */
  margin         : 0;                  /* 外余白                */
  padding        : 6px 10px;           /* 内余白                */
  border         : none;               /* 枠線　幅,実践,色      */
  border-radius  : 0 1em 1em 0;      /* 右上下の角丸          */
  background     : #090158;            /* ボタンの色            */
  color          : #fff;               /* 文字色                */
  cursor         : pointer;            /* カーソル設定          */
  line-height    : 1em;               /* 1行の高さ             */
  font-size      : 1em;               /* フォントサイズ        */
}
 
 /* --- 検索ボタン欄にフォーカスか来たとき --- */
.searchArea .searchText:focus {
  background     : #cfe7ff;            /* フォーカス時の背景色  */
}
 
 /* --- 検索ボタン内のアイコンSTYLE設定 --- */
.searchArea .searchImg {
  display        : inline-block;       /* インラインブロック化  */
  width          : auto;               /* 幅は高さに合わせる    */
  height         : 1em;               /* 画像の高さ            */
  margin         : 0 3px 0 0;          /* 余白                  */
  vertical-align : middle;             /* 横の文字位置          */
  border         : none;               /* 検索ボタンの枠線      */
}
 
 /* --- IEの入力エリア右側×消し -------------------------*/
.searchArea .searchText::-ms-clear {
  display        : none;               /* ×を消す              */
}