@charset "utf-8";

/*========= 検索窓を開くためのボタン設定 ===========*/

.open-btn1{
    position: fixed;
    top:12px;
    right: 65px;
    background:url("/common/images/search-solid.svg") no-repeat center;
    background-size: 25px 25px;
    width: 60px;
    height: 50px;
    cursor: pointer;
    z-index: 2500;
    transition: 0.2s ;
    
	transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.open-btn1.fixed {
    top:5px;
    right: 85px;
    background-size: 20px 20px;
}

.open-btn1:hover {
    opacity: 0.6;
}

/*クリック後、JSでボタンに btnactive クラスが付与された後の見た目*/
.open-btn1.btnactive {
  background: url("../images/times-solid.svg") no-repeat center;
  background-size: 20px 20px;
}

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

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

#search-wrap {
    position: absolute;
    top: 70px;
    right: 60px;
    z-index: 2500;
    opacity: 0;
    width: 0;
    transition: all 0.4s;
}

/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後の見た目*/
#search-wrap.panelactive{
  opacity: 0.95;
  z-index: 100000;
  width: 300px;
  top: 70px;
}

#search-wrap.fixed {
    top:50px;
}

#search-wrap.panelactive.fixed {
    top:50px;
}

/*==検索窓*/
#search-wrap #searchform{
  display: none;
}

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

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

/*==テキスト入力とボタンinput共通設定*/
#search-wrap input{
    -webkit-appearance:none;
    outline: none;
    cursor: pointer;
    color: #333;
}

/*テキスト入力input設定*/
 #search-wrap input[type="text"] {
    position: fixed;
    width: 300px;
    border: none;
    border-radius: 40px;
    letter-spacing: 0.05em;
    height: 40px;
    padding: 10px 20px;;
}

/*テキスト入力inputにフォーカスされたら*/
 #search-wrap input[type="text"] {
  background: #FFF;
  border: solid 4px #0060ff;
}

/*ボタンinput設定*/
 #search-wrap input[type="submit"] {
    border: none;
    outline: none;
    position: fixed;
    top: 74px;
    right: 40px;
    background:url("/common/images/search-solid.svg") no-repeat center;
    background-size: 20px 20px;
    width: 30px;
    height: 60px;
     transition: all 0.4s;
}

 #search-wrap input[type="submit"].fixed {
     top: 50px;
 }
 
 
/*-----------------------------------------------------	*/
/*	for - 1100px以下の記述　*/
/*-----------------------------------------------------	*/

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

.open-btn1{
    top:4px;
    right: 130px;
}

.open-btn1.fixed {
    top:4px;
    right: 130px;
    background-size: 25px 25px;
}

/*クリック後、JSでボタンに btnactive クラスが付与された後の見た目*/
.open-btn1.btnactive {
  background: url("../images/times-solid.svg") no-repeat center;
  background-size: 25px 25px;
}

#search-wrap {
    position: absolute;
    top: 54px;
    right: 150px;
    z-index: 10000;
    opacity: 0;
    width: 0;
    transition: all 0.4s;
}

#search-wrap.fixed {
    top:54px;
}

#search-wrap.panelactive.fixed {
    top:54px;
}

/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後の見た目*/
#search-wrap.panelactive{
  opacity: 0.95;
  z-index: 10000;
  width: 300px;
  top: 54px;
}

/*ボタンinput設定*/
 #search-wrap input[type="submit"] {
    border: none;
    outline: none;
    position: fixed;
    top: 57px;
    right: 125px;
    background:url("/common/images/search-solid.svg") no-repeat center;
    background-size: 20px 20px;
    width: 30px;
    height: 60px;
     transition: all 0.4s;
}

 #search-wrap input[type="submit"].fixed {
     top: 57px;
 }

}

/*-----------------------------------------------------	*/
/*	for - 700px以下の記述　*/
/*-----------------------------------------------------	*/

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

.open-btn1{
    top:3px;
    right: 130px;
}

.open-btn1.fixed {
    top:3px;
    right: 130px;
    background-size: 25px 25px;
}

#search-wrap {
    position: absolute;
    top: 54px;
    right: 150px;
    z-index: 10000;
    opacity: 0;
    width: 0;
    transition: all 0.4s;
}

#search-wrap.panelactive{
    position: absolute;
    opacity: 0.95;
    z-index: 100000;
    width: 80%;
    top: 54px;
}

/*ボタンクリック後、JSで#search-wrapに panelactive クラスが付与された後の見た目*/

/*テキスト入力input設定*/
 #search-wrap input[type="text"] {
    position: fixed;
    left: 8%;
    width: 80%;
    border: none;
    border-radius: 40px;
    letter-spacing: 0.05em;
    height: 40px;
    padding: 5px 10px;;
}

/*テキスト入力inputにフォーカスされたら*/
 #search-wrap input[type="text"] {
    background: #FFF;
    border: solid 3px #0060ff;
}

/*ボタンinput設定*/
 #search-wrap input[type="submit"] {
    border: none;
    outline: none;
    position: fixed;
    top: 52px;
    right: 11%;
    background:url("/common/images/search-solid.svg") no-repeat center;
    background-size: 20px 20px;
    width: 30px;
    height: 60px;
     transition: all 0.4s;
}

 #search-wrap input[type="submit"].fixed {
     top: 52px;
 }

}