.header{
  position: relative;
  height: 70px;

}

@media (min-width:500px){
  .header{
    height: 100px;
  
  }
}
/* ハンバーガーメニュー */
/*==================================================
　5-2-2 2本線が×に
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn1{
  /* position: relative; */
  /*ボタン内側の基点となるためrelativeを指定*/
  position:fixed;
  top:0px;
  right: 0px;
  z-index: 9999;
  width: 70px;
  height:70px;
  cursor: pointer;
}

/*ボタン内側*/

.openbtn1 span {
  display: inline-block;
  transition: all .4s;
  /*アニメーションの設定*/
  position: absolute;
  height: 2.5px;
  background-color: #666666;
  z-index: 1000;
  border-radius: 10px;
}
.openbtn1 span:nth-of-type(1) {
  top:30px;
    width: 70%;
}

.openbtn1 span:nth-of-type(2) {
  top:45px;
    width:45%;
}

@media (min-width:500px){
  .openbtn1{
    top: 2%;
    right: 6%;
    width: 90px;
  }
  .openbtn1 span{
    left: 20px;
    height: 3px;
  }
}



/* activeクラスが付与されると線が回転して×に */

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

.openbtn1.active span:nth-of-type(2) {
    top: 44px;
    left: 31px;
    transform: translateY(-6px) rotate(45deg);
    width: 35%;
}

/*========= ナビゲーションのためのCSS ===============*/

/*アクティブになったエリア*/
#g-nav.panelactive{
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;
  z-index: 999;
  top: 0;
  width:100%;
  height: 100vh;
}

/*丸の拡大*/
.circle-bg{
  position: fixed;
  z-index:3;
  /*丸の形*/
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
  opacity: 95%;
  /*丸のスタート位置と形状*/
  transform: scale(0);/*scaleをはじめは0に*/
  right:-50px;
  top:-50px;
  transition: all .6s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{
transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
  display: none;/*はじめは表示なし*/
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{
   display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav ul {
  opacity: 0;
  /* ;はじめは透過0 */
  /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
  position: absolute;
  z-index: 999;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
  opacity: 1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.5s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/*リストのレイアウト設定*/
#g-nav li{
text-align: left;
list-style: none;
padding-bottom: 20%;
font-size: 1.8rem;
}

#g-nav li a{
color: #333333;
text-decoration: none;
padding:10px;
display: block;
/* text-transform: uppercase; */
letter-spacing: 0.1em;
font-weight: 800;
}
@media (min-width:500px){
  #g-nav li a{
    font-size: 3.2rem;
  }
}
/* ハンバーガーメニュー end */

/* 上に戻る */
.pagetop {
  display: none;
  position: fixed;
  bottom: 120px;
  right: 10px;
  z-index: 2;
}
.pagetop a {
  border-radius: 20px;
  display: block;
  background-color: #777777;
  text-align: center;
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none;
  padding: 5px 8px;
  z-index: 2;
}
@media (min-width:500px){
  .pagetop{
    bottom: 40%;
    right: 10px;
  }
  .pagetop a{
    border-radius: 30px;
    font-size: 2.8rem;
    padding: 8px 8px;
  }
}
/* 上に戻る end*/


/* お問い合わせアイコン */
.contact-icon{
  position: fixed;
  z-index: 99999;
  width: 25%;
  max-width: 150px;
  right: 5px;
  bottom: 5px;
  cursor: pointer;
}
.contact-icon a{
  text-decoration: none;
}
.contact-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* .contact-icon p{
  font-size: 1.0rem;
  text-align: center;
  color: #333333;
  margin-top: -10%;
} */

/* お問い合わせアイコン end*/