@charset "utf-8";

*{box-sizing: inherit;}
button, input, optgroup, select, textarea {
    font: inherit;
}


/*========= 検索窓を開くためのボタン設定 ===========*/
.sh_open_btn.btnactive {
    background: url(../img/icon_close.svg) no-repeat 15px center;
    background-size: 28px 18px;
/*    background-color: #FBF5EC;*/
}

.sh_open_btn {
    position: absolute;
    z-index: 121;
    top: 0px;
    right: 60px;
    background-repeat: no-repeat;
    background-position: 15px center;
    background-image: url(../img/icon_search.svg);
    background-color: rgba(255,255,255,0.3);
    background-blend-mode: lighten;
    /* background: url(../img/icon_search.svg) no-repeat 15px center; */
    background-size: 28px 20px;
    width: 60px;
    height: 60px;
    cursor: pointer;
}

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

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

#search_h_area {
    position: absolute;
    top: 150px;
    right: 20px;
    z-index: -1;
    opacity: 0;
    width: 0;
/*    transition: all 0.4s;*/
    border-radius: 0px;
}

#search_h_area.panelactive {
    position: absolute;
    z-index: 120 !important;
    opacity: 1;
    width: 95%;/*---------------- （スマホの時width: 95%）*/
    /* max-width: 300px; */
    height: 40px;
    padding: 10px;
    top: 60px;
    left: 0px;
    background: #75AEBC;
}

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

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

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

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

#search_h_area input[type="text"] {
    width: 100%;
    border: none;
    border-bottom: 2px solid #ccc;
    transition: all 0.5s;
    letter-spacing: -0.1em;
    height: 40px;
    padding: 0px 0px;
}

#search_h_area input[type="text"]:focus {
    background: #fff;
}

#search_h_area input[type="submit"] {
    position: absolute !important;
    top: 0px;
    right: 20px;/*----------------（スマホの時right: 20px）*/
    background: url(../img/icon_search.svg) no-repeat right;
    background-size: 25px 38px;
    border: none;
    -webkit-box-shadow: initial;
    box-shadow: initial;
    -webkit-box-shadow: initial;
}


#search .freedom-area input[type="submit"] {
    position: absolute !important;
    top: 3px;
    right: 3vw;
    background: url(../img/icon_search.svg) no-repeat right;
    background-size: 25px 38px;
    border: none;
    -webkit-box-shadow: initial;
    box-shadow: initial;
    -webkit-box-shadow: initial;
opacity: 0.6;
}

#keywords {
   -webkit-appearance: none;
}