@charset "utf-8";

#g-nav{
  position:fixed;z-index: 9999;
	top:0;left: -120%;
	width:100%;
  height: 100vh;
	background:#999;/
	transition: all 0.6s;
}
#g-nav.panelactive{left: 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:40%;
    left:40%;
    transform: translate(-50%,-50%);}
#g-nav li{
	list-style: none;text-align: left;}
#g-nav li{
	font-size: 20px;color: white;
	text-decoration: none;
	padding:0px;
	display: block;
	text-transform: uppercase;
  line-height: 1.5;
	letter-spacing: 0.1em;
	font-weight: bold;}
#g-nav li span{color: dimgray;}
.openbtn{
	position:absolute;
  z-index: 999;
	top:70px;
	left: 20px;
	cursor: pointer;
  width: 50px;background: yellow;
  height:50px;}
.openbtn:hover{background: black;}

.closebtn{
	position:absolute;
  z-index: 1000;
	top:70px;
	left: 20px;
	cursor: pointer;
  width: 50px;background: black;
  height:50px;padding: auto;}
.closebtn:hover{background: red;}

.btn_data{position:absolute;color:red;top:10px;left: 7px;}
.btn_close{position:absolute;color:yellow;top:8px;left:16px;}


/*===========================================================*/
/*レスポンシブ*/
/*===========================================================*/
/*＝＝＝＝＝＝＝＝＝＝＝768px以下＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media screen and (max-width:768px)
{
#g-nav li{font-size: 18px;padding:0px;line-height: 1.5;}
}


/*＝＝＝＝＝＝＝＝＝＝＝401px以下＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media screen and (max-width:401px)
{
/*ナビゲーション*/
#g-nav ul {top:40%;left:46%;transform: translate(-50%,-50%);}
#g-nav li{font-size:12px;padding:0px;
          line-height:2;letter-spacing: 0.1em;}
}
/*＝＝＝＝＝＝＝＝＝＝＝321px以下＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media screen and (max-width:321px)
{
  .btn_data{font-size: 10px;margin: 2px auto 5px;}
  .openbtn{
  	position:absolute;
    z-index: 999;
  	top:45px;
  	left: 20px;
  	cursor: pointer;
    width: 40px;background: yellow;
    height:40px;}

  .btn_close{font-size: 15px;margin: -1px 10px 5px -3px;}
  .closebtn{
  	position:absolute;
    z-index: 1000;
  	top:45px;
  	left: 20px;
  	cursor: pointer;
    width: 40px;background: black;
    height:40px;padding: auto;}

#g-nav ul {top:35%;left:46%;transform: translate(-50%,-50%);}
#g-nav li{font-size:11px;padding:0px;
          line-height: 1.5;letter-spacing: 0.1em;}
}