/*==================================================
　5-2-2 2本線が×に
===================================*/

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

/*ボタン内側*/

.openbtn2 span{
display: inline-block;
transition: all .4s;/*アニメーションの設定*/
position: absolute;
left: 13px;
height: 2px;
background-color: #fff;
}


.openbtn2 span:nth-of-type(1) {
top:22px; 
width: 50%;
}

.openbtn2 span:nth-of-type(2) {
top:29px;
width:30%;
}

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

.openbtn2.active span:nth-of-type(1) {
top: 20px;
left: 16px;
transform: translateY(6px) rotate(-45deg);
width: 35%;
}

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

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

#g-nav{
position:fixed;
z-index: 999;
/*ナビのスタート位置と形状*/
top:0;
right: -120%;
width:100%;
height: 100vh;/*ナビの高さ*/
background:#999;
/*動き*/
transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999; 
width: 100%;
height: 100vh;/*表示する高さ*/
overflow: auto;
-webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
/*ナビゲーション天地中央揃え*/
position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
list-style: none;
text-align: center;
}

#g-nav li a{
color: #fff!important;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 14px;
}


/*フッター固定メニュー*/

/*メニューをページ下部に固定*/
#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 1;
   z-index: 99;
}

/*メニューを横並びにする*/
#sp-fixed-menu ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu li.tel{
	display: flex;
   justify-content: center;
   align-items: center;
   width: 75%;
   padding:0;
   margin:0;
   font-size: 25px;
   font-weight: 500;
   border-right: 1px solid #fff;
   letter-spacing: 0;
	font-family: "Fondamento", cursive;
}

#sp-fixed-menu li.insta{
	display: flex;
   justify-content: center;
   align-items: center;
   width: 25%;
   padding:0;
   margin:0;
   font-size: 9px;
   font-weight: 500;
   border-right: 1px solid #fff;
   letter-spacing: 0;
}

/*左側メニューを緑色に*/


#sp-fixed-menu li.tel{
   background: #9f9751;
}
#sp-fixed-menu li.insta{
   background: #455e44;
}


#sp-fixed-menu li i{
  color: #fff;
  font-size: 32px;
  margin-bottom: 8px;
}
/*ボタンを調整*/
#sp-fixed-menu li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:20px 15px 10px 15px;
   text-decoration: none;
}