@media screen and (min-width: 1024px) {
#nav-wrap {
	margin-top: 0px;
	font-size: 14px;
	background-color: #FF99CC;
    background-color: #FFF;
	padding-top: 10px;
	padding-bottom: 10px;
}
 
/* menu icon */
#menu-icon {
    display: none; /* hide menu icon initially */
}
 
#nav{
	display: flex;
	flex-diretion: row;
	justify-content: center;

}
#nav li {
    list-style: none;
	padding: 0 1em;



}




 
/* nav link */
#nav a {
	color: #FFFFFF;
    color: #696969;

    background: #;
	text-decoration: none;
	position: relative;/* bar anime */
	display: inline-block;/* bar anime */
	text-decoration: none;/* bar anime */
	font-weight: bold;
}

#nav a::after {/* bar anime */
	position: absolute;
	bottom: -3px;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s;
	background-color: #FFF;
}

#nav a:hover {
	color: #;
    background: #;

}

#nav a:hover::after {/* bar anime */
  transform: scale(1, 1);
}
 
/* nav dropdown */
#nav ul {
    background-color: rgba(255,255,255,0.98);
	background-color: #000;
	background-color: #FFF;
    padding: 3px 8px;/*#nav a::after -3px に合わせる*/
    position: absolute;
    margin-top:3px;

    display: none; /* hide dropdown */

z-index: 10000;

min-width: 110px;
background-color: #C33;

}
#nav ul li {
	padding: 4px 4px;
	

}
#nav li:hover > ul {
    display: block; /* show dropdown on hover */


}



}

@media screen and (min-width: 1200px) {
	#nav li {
    list-style: none;
	padding: 0 1.7em;
}
}



/* スマホ用メニュー */
@media screen and (max-width: 1023px) {
 
    /* nav-wrap */
    #nav-wrap {
        position: relative;
		top: 0px;/* gms add*/
		margin-top: 0;/* gms add*/
		display: block;/* gms add*/

		z-index: 10000;

	position: fixed;

  right: 5px;




    }
		/* Change jpg->txt */
#menu-icon {
	position: relative;
	display: block;
	top: 1px;
	width: 42px;
	height: 35px;
	cursor: pointer;
	z-index: 110000;
	text-align: center;
	background-color: #FFFFFF;
	background: rgba(255,255,255,0.05);
}

#menu-icon span {
	display: block;
	position: absolute;    /* menu-iconに対して */
	width: 30px;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
	left: 6px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #000;
}

#menu-icon span:nth-child(1) {
    top: 8px;
}

#menu-icon span:nth-child(2) {
    top: 16px;
}

#menu-icon span:nth-child(3) {
    top: 24px;
}




/* 最初のspanをマイナス45度に */
#menu-icon.active span:nth-child(1) {
    top: 16px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
#menu-icon.active span:nth-child(2),
#menu-icon.active span:nth-child(3) {
    top: 16px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

     
    /* main nav */
    #nav {
        clear: both;
        position: fixed;
        top: 0px;/* gms change-> #menu-icon height*/
        width: 160px;
width: 100vw;/* gms change-> 横幅いっぱい*/
        z-index: 100000;
        padding: 5px;
        background: #f8f8f8;
        border: solid 1px #999;
        display: none; /* visibility will be toggled with jquery */


  left: 0;

  bottom: 0;
  overflow-y: auto;
		
		
    }
    #nav li {
        clear: both;
        float: none;
        margin: 20px 0 20px 10px;
		display: block;/* gms inline-block解除*/
    }
    #nav a, 
    #nav ul a {
        font: inherit;
        background: none;
        display: inline;
        padding: 0;
        color: #666;
        border: none;
		text-decoration:none;

    }
    #nav a:hover, 
    #nav ul a:hover {
        background: none;
        color: #000;
    }
     
    /* dropdown */
    #nav ul {
        width: auto;
        position: ;
        display: block;
        border: none;
        background: inherit;
		

		
    }
    #nav ul li {
        margin: 3px 0 3px 15px;
    }
	

 
}