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

.open-btn{
    position: fixed;
    /*position: absolute;*/
    z-index: 9999;
    top:30px;
    right: 100px;
    /*
    background:url("../images/common/icon_search.svg") no-repeat center center;
    */
    background:url("../images/common/icon_search.svg") no-repeat center 40%;
	background-size: 20px 20px;
    /*
	width:50px;
	height:50px;
    */
    width: 76px;
	height: 76px;
    background-color: #f2f2ee;
	transition: opacity 300ms;
	justify-content: center;
	align-items: center;      
	cursor: pointer;/*カーソルを指マークに*/
    padding-bottom: 5px;
    color:#666666;
}

/*クリック後、JSでボタンに btnactive クラスが付与された後の見た目*/
.open-btn.btnactive{
    /*
    background:url("../images/common/icon_close.svg") no-repeat center center;
    */
    background:url("../images/common/icon_close.svg") no-repeat center 40%;
    background-size: 18px 18px;
    background-color: #f2f2ee;
	transition: opacity 300ms;
	justify-content: center;
	align-items: center;      
	cursor: pointer;/*カーソルを指マークに*/
    
}

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

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

#search-wrap{
    /*position:absolute;*/
    position: fixed;
    top:110px!important;
    right:20px;

	z-index: -1;/*最背面に設定*/
	opacity: 0;/*透過を0に*/
	width:0;/*横幅は0に*/
	transition: all 0.4s;/*transitionを使ってスムースに現れる*/
	border-radius: 5px;
    


}

/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後の見た目*/
#search-wrap.panelactive{
	opacity: 1;/*不透明に変更*/
    z-index: 99999;
	width:280px;
	padding:20px;
	top:120px;
	background: rgba(33, 92, 170, 0.95);
}

/*==検索窓*/
#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;
    /* position: fixed;*/
    top:10px;
	right:30px;
    background:url("../images/common/icon_search.svg") no-repeat right;
	background-size: 20px 20px;
	width:30px;
	height: 60px;
    border: none!important;
}

@media screen and (max-width: 738px) {
    .open-btn {
        position: fixed;
        z-index: 9999;
        width: 11.875vw;
        height: 11.875vw;
        top:20px;
        right: 16vw;        
    }
}