#nav-toggle 
{ position: fixed; height: 25px; width: 25px; padding: 10px; border-radius: 50%; 
background-color: hsla(0,0%,100%,.3) ;border: hsla(0,0%,0%,.0) 1px solid; cursor: pointer;
 }
#nav-toggle > div { position: relative; }

#nav-toggle span {
width: 100%;
height: 1px;
left: 0;
display: block;
background: #000;
position: absolute;
transition: transform 0.6s ease-in-out, top 0.5s ease;
}
#nav-toggle span:nth-child(1) { top: 8px; }
#nav-toggle span:nth-child(2) { top: 16px; }
#nav-toggle:hover span:nth-child(1) { top: 4px; }
#nav-toggle:hover span:nth-child(2) { top: 20px; }

.open #nav-toggle span { background: #000; }
.open #nav-toggle span:nth-child(1) { top: 12px; transform: rotate(45deg); }
.open #nav-toggle span:nth-child(2) { top: 12px; transform: rotate(-45deg); }

/* z-index */
#nav-toggle { z-index: 1000; }
#container { z-index: 900; }

#nav-toggle { }

#gloval-nav {
background: hsla(0,0%,98%,1);
color: #000;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 990;
display: flex;
visibility: hidden;
flex-direction: column;
opacity: 0;
transition: opacity 2s ease, visibility 2s ease;
}
#gloval-nav ul, #sitemap-nav ul, #pc-nav ul { list-style: none; }
#gloval-nav ul li { opacity: 0; transform: translateX(200px); transition: transform 0.6s ease, opacity 0.2s ease; }
#gloval-nav ul li:nth-child(2) { transition-delay: 0.15s; }
#gloval-nav ul li:nth-child(3) { transition-delay: 0.3s; }
#gloval-nav ul li:nth-child(4) { transition-delay: 0.45s; }
#gloval-nav ul li:nth-child(5) { transition-delay: 0.6s; }
#gloval-nav ul li:nth-child(6) { transition-delay: 0.75s; }
#gloval-nav ul li:nth-child(7) { transition-delay: 0.9s; }
#gloval-nav ul li:nth-child(8) { transition-delay: 1.05s; }
#gloval-nav a:hover {  }

#gloval-nav ul li a 
{
display: inline-block;
color: #000;
text-decoration: none;
transition: color 0.6s ease;
}

/* open */
.open { overflow: hidden; }
.open #gloval-nav { visibility: visible; opacity: 1; }
.open #gloval-nav li { opacity: 1; transform: translateX(0); transition: transform 1s ease, opacity 0.9s ease; }

.sidebar { background: hsla(0,0%,0%,.05); height: 100vh }

#sitemap-nav ul li a,
#gloval-nav ul li a { position: relative; }

#gloval-nav ul li a:hover
{  }

#sitemap-nav ul li a::after,
#gloval-nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 11px;
    left: 0%;
    width: 100%;
    height: 2px;
    background:hsla(0,0%,0%,.6);
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: left top;
}
#sitemap-nav ul li a::after { background:hsla(0,0%,100%,.6); }

body#yukaiuchi ul li.ms a::after,
body#hb ul li.hb a::after,
body#yid ul li.yi a::after,
body#fc ul li.pd a::after,
body#ywc ul li.yw a::after,
body#overview ul li.ov a::after,
body#contact ul li.cu a::after,
#sitemap-nav ul li a:hover::after, #gloval-nav ul li a:hover::after 
{ transform: scale(1, 1); }