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

#spNav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top:0;
    right: -120%;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background: rgba(12, 88, 59, 0.7);
    /*動き*/
	transition: all 0.6s;
}

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

/*ナビゲーションの縦スクロール*/
#spNav.panelactive .navInner{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 90%;
    height: 90vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin: 5%;
    padding: 5%;
    background: #fff;
    border-radius: 10px;
}

/*ナビゲーション*/
#spNav ul { list-style-type: none; width: 100%; margin: 2rem auto; }
#spNav li { text-align: center; width: 100%; border-bottom: dashed 1px #ccc; }
#spNav li a { color: #333; text-decoration: none; padding:0.7rem 0.7rem 0.7rem 2rem; display: block;  position: relative; }
#spNav .spMainNav li a { font-size: 1.6rem; font-weight: 600; }
#spNav .spMainNav li a:after { content: ''; display: inline-block; position: absolute; left: 5px; top: 40%; width: 7px; height: 7px; border-bottom: 2px solid #999; border-right: 2px solid #999; transform:rotateZ(-45deg); }
#spNav .spSubNav { display: flex; flex-wrap: wrap; }
#spNav .spSubNav li { width: auto; margin: 0; border: none; margin: 0.5rem; }
#spNav .spSubNav li a { font-size: 1.3rem; font-weight: 600; padding: 0.7rem; background: #f5f5f5; border-radius: 20px; }

#spNav h3 { font-size: 1.6rem; font-weight: 600; padding: 0.7rem; border-bottom: solid 1px #49A5BA; color: #49A5BA; }


/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:10px;
	right: 10px;
	cursor: pointer;
    width: 50px;
    height:50px;
    background: #2F6F5E;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #fff;
  	width: 45%;
  }

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

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

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

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

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

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