@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

body{
	background: #fff;
}

/*========= 検索窓のためのCSS ===============*/
/*検索窓のエリア*/
 #search-wrap {
     position: free;/*自由にして*/
	 z-index: 2;/*最前面に設定。数字は変更可*/
}

/*テキスト入力input設定*/
 #search-text{
	-webkit-appearance:none;/*SafariやChromeのデフォルトの設定を無効*/
	width: 60px;/*テキスト入力エリアが伸びる前の横幅*/
	height: 60px;
    padding: 20px;
	border: none;
	background:#f0f0d4  url("") no-repeat 17px center;/*虫眼鏡アイコンを背景に表示*/
	background-size: 25px 25px;
	transition: all 0.5s;/*transitionを使ってスムースに伸ばす*/
	outline: none;
	cursor: pointer;/*カーソルを指マークに*/
}

/*テキスト入力inputにフォーカスした時の形状*/
 #search-text:focus {
	width: 250px;/*テキスト入力エリアが伸びる後の横幅*/
	padding: 20px 0 20px 60px;
	box-shadow: 0 2px rgba(6,0,1,.26);
}