@charset "utf-8";
/*========= 検索窓を開くためのボタン設定 ===========*/

.open-btn1{
	cursor: pointer;/*カーソルを指マークに*/
}

/*========= 検索窓の設定 ===============*/

/*==検索窓背景のエリア*/

#search-wrap{
    position:absolute;/*絶対配置にして*/
	top:80px;
    right:20px;
	z-index: -1;/*最背面に設定*/
	opacity: 0;/*透過を0に*/
	width:0;/*横幅は0に*/
	transition: all 0.4s;/*transitionを使ってスムースに現れる*/
	border-radius: 5px;
	box-sizing: border-box;
}

/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後の見た目*/
#search-wrap.panelactive{
	opacity: 1;/*不透明に変更*/
	z-index: 999;/*全面に出現*/
	width:400px;
	padding:20px;
	top:90px;
	background:#fff;
}

/*==検索窓*/
#search-wrap #searchform{
	display: none;/*検索窓は、はじめ非表示*/
}

/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後*/
#search-wrap.panelactive #searchform{
	display: block;/*検索窓を表示*/
}

/*==検索フォームの設定*/

/*==テキスト入力とボタンinput共通設定*/
#search-wrap input{
	-webkit-appearance:none;/*SafariやChromeのデフォルトの設定を無効*/
	outline: none;
	cursor: pointer;/*カーソルを指マークに*/
	color: #666;
}

/*テキスト入力input設定*/
 #search-wrap input[type="text"] {
	width: 100%;
	border: none;
	border-bottom:2px solid #ccc;
	transition: all 0.5s;
	letter-spacing: 0.05em;
    height:50px;
	padding: 10px;
}

/*テキスト入力inputにフォーカスされたら*/
 #search-wrap input[type="text"]:focus {
	background:#eee;/*背景色を付ける*/
}

/*ボタンinput設定*/
 #search-wrap input[type="submit"] {
	position: absolute;
    top:15px;
	right:30px;
	background:url("https://ryuspashop.itembox.design/item/img/all/icon_search.svg") no-repeat right;/*虫眼鏡アイコンを背景に表示*/
	background-size: 20px 20px;
	width:30px;
	height: 60px;
	border:none;
}