.pc .open-btn1{
  position: absolute;
  top:0;
  right:60px;
  background:url("img/search.svg") no-repeat 15px center;/*虫眼鏡アイコンを背景に表示*/
  background-size: 30px 30px;
  width:50px;
  height:50px;
  cursor: pointer;/*カーソルを指マークに*/
margin-top:15px;
}
	
/*クリック後、JSでボタンに btnactive クラスが付与された後の見た目*/
.pc .open-btn1.btnactive{
  background:url("img/close.svg") no-repeat 15px center;/*閉じるアイコンを背景に表示*/
  background-size: 30px 30px;
}

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

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

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

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

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

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

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

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

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

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

/*ボタンinput設定*/
 .pc #search-wrap input[type="submit"] {
  position: absolute;
    top:10px;
  right:30px;
 /* background:url("https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/7-2-3/img/icon_search.svg") no-repeat right;
  background-size: 20px 20px;*/
  width:30px;
  height: 60px;
}
	.pc #search-wrap.panelactive{
		z-index:9999 ;
		top:55px !important;
	}

@media screen and (max-width: 1000px) {

.sp .open-btn1{
  position: absolute;
  top:18px;
  left:60px;
  background:url("img/search.svg") no-repeat 15px center;/*虫眼鏡アイコンを背景に表示*/
  background-size: 30px 30px;
  width:50px;
  height:50px;
  cursor: pointer;/*カーソルを指マークに*/
	margin-top:25px;
}
	
/*クリック後、JSでボタンに btnactive クラスが付与された後の見た目*/
.sp .open-btn1.btnactive{
  background:url("img/close.svg") no-repeat 15px center;/*閉じるアイコンを背景に表示*/
  background-size: 30px 30px;
}

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

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

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

/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後の見た目*/
.sp #search-wrap.panelactive{
  opacity: 1;/*不透明に変更*/
  z-index: 3;/*全面に出現*/
  width:280px;
  padding:20px;
  top:60px;
  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:46px;
  padding: 10px;
}

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

/*ボタンinput設定*/
 #search-wrap input[type="submit"] {
  position: absolute;
    top:10px;
  right:30px;
 /* background:url("https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/7-2-3/img/icon_search.svg") no-repeat right;
  background-size: 20px 20px;*/
  width:30px;
  height: 60px;
}
	#search-wrap.panelactive{
		z-index:9999 ;
		top:95px !important;
	}
}