@charset "utf-8";


/*========= ナビとBtnのCSSのみ =============================================*/

#g-nav{
  position:fixed;z-index: -1;/*========================= -1 ================*/
	opacity: 0;
	top:0;/*ナビの位置*/
	width:100%;
  height: 100vh;/*ナビの高さ*/
	background:#EEEEEE;/*ナビのbackground*/
	transition: all 0.3s;/*動き*/}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{opacity: 1;z-index:999;}/*============= 999 ================*/

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

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
  z-index: 9999;
	top:10px;/*位置*/
	right: 10px;
	cursor: pointer;
  width: 50px;/*3本線のスペース*/
  height:50px;/*3本線のスペース*/}

/*×に変化*/
.openbtn span{
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
	background-color: #666;
  width: 45%;}
/*========= 3本線の位置 ===============*/
.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%;}

/* ---------レスポンシブ-------------------------------------------------- */
/* ---------450px以下-------------- */
@media screen and ( max-width :450px)
{
.openbtn{
    top:3px;/*位置*/
    right: 10px;
    cursor: pointer;
    width: 50px;/*3本線のスペース*/
    height:50px;/*3本線のスペース*/}
}