/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn8{
  position: relative;/*ボタン内側の基点となるためrelativeを指定*/
  background:#1763C7;
  cursor: pointer;
  width: 50px;
  height:50px;
  border-radius: 50px;
  z-index: 101;
}

/*ボタン内側*/
.openbtn8 .openbtn-area{
  transition: all .6s;/*アニメーションの設定*/
  width:50px;
  height:50px;
}

.openbtn8 span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  width: 45%;
}

.openbtn8 span:nth-of-type(1) {
  top:15px;
}

.openbtn8 span:nth-of-type(2) {
  top:23px;
}

.openbtn8 span:nth-of-type(3) {
  top:31px;
}

/*activeクラスが付与されると .openbtn-areaが360度回転し、その中の線が回転して×に*/
.openbtn8.active .openbtn-area{
  transform: rotate(360deg);
}

.openbtn8.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}

.openbtn8.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn8.active span:nth-of-type(3){
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}

/* メニュー */
.humb-menu{
  opacity: 0;
  transform: translateY(-10%);
  position: absolute;
  z-index: 100;
  right: 0;
  top: 120%;
  width: 25vw;
  transition: all 1s;
  background: #fff; 
  padding: 3rem !important;
  border: solid 1px #1763C7; 
  pointer-events: none;
}

.humb-menu__head{
  margin-bottom: 1rem;
}

.humb-menu.open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: visible;
}

.humb-menu li a{
  text-decoration: none;
  transition: all 0.3s;
}

.humb-menu li a:hover,
.humb-menu li a:focus{
  text-decoration: none;
  color: #1763C7;
}

.humb-menu li{ 
  border-bottom: 1px solid #1763c77a;
  margin: 0;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.humb-menu .humb-menu__level2{
  border-bottom: 1px solid #f5f5f5;
  font-size: 0.8rem;
  margin-left: 1.5rem;
  transition: all 0.3s;
}

.humb-menu .humb-menu__level2:hover{
  border-bottom: 1px solid #1763c77a;
}

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

.open-btn1{
  z-index: 101;
  background:url("https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/7-2-3/img/icon_search.svg") no-repeat 15px center;/*虫眼鏡アイコンを背景に表示*/
  background-size: 20px 20px;
  width:50px;
  height:50px;
  cursor: pointer;/*カーソルを指マークに*/
  background-color: #19292d;
  border-radius: 50px;
  margin-right: 1rem;
}

/*クリック後、JSでボタンに btnactive クラスが付与された後の見た目*/
.open-btn1.btnactive{
  background:url("https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/7-2-3/img/icon_close.svg") no-repeat 15px center;/*閉じるアイコンを背景に表示*/
  background-size: 18px 18px;
  background-color: #19292d;
}

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

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

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

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

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

/*ボタンクリック後、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;
  border: none;
}

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

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

/*ボタンinput設定*/
#search-wrap input[type="submit"]{
  position: absolute;
  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: 100%;
}

.humb-menu__search,
.humb-menu__search--label{
  display: none;
}

@media(max-width: 800px){
  {#mobile menu#}
  .humb-menu{
    width: 90vw;
  }




  {#検索非表示#}
  #search-wrap,
  .open-btn1{
    display: none;
  }

  {#検索#}
  .humb-menu__search--label{
    margin-bottom: 1rem;
    display: block;
  }

  .humb-menu__search{
    display: block;
    position: relative;
  }

  .humb-menu__search form{
    padding: 0;
  }

  .humb-menu__search input[type="text"] {
    width: 100%;
    border: none;
    border: 1px solid #d8d8d8;
    transition: all 0.5s;
    letter-spacing: 0.05em;
    height:46px;
    padding: 10px;
  }


  .humb-menu__search input[type="submit"]{
    position: absolute;
    right:30px;
    top: 50%;
    transform: translateY(-50%);
    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: 30px;
    border: none;

  }

}