#g_navi{
    position: absolute;
    top: 16px;
    left: 235px;
  z-index:999;
  font-family:"hind" ,san-serif;
  font-weight:400;
  text-shadow:1px 1px 0px #595959;
}
#layout1 #g_navi{
    position: absolute;
    top: 291px;
    left: 53px;
}

#g_navi ul{
position:relative;
}

#g_navi ul li{
width:120px;
height:30px;
position:absolute;
}
#g_navi ul li.no_link{
  filter: grayscale(100%);
  opacity:0.4;
  pointer-events:none;
}
#g_navi ul li span,#g_navi ul li a{
  text-decoration:none;
  display:block;
  padding:0 0 0 0px;
  color: #fff;
  font-size: 1.3rem;
  position: relative;
}
#g_navi ul li a {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  transform: skewX(-45deg);
  z-index:1;
}
#g_navi ul li span {
    padding: 0.75em 0 0 1.7em;
    display: inline-block;
    position: relative;
    z-index: 1;
}
#g_navi ul li a span {
    padding: 0.75em 0 0 1.7em;
    transform: skewX(45deg);
    display: inline-block;
    position: relative;
    z-index: 1;
}
#g_navi ul li span::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border: 1px solid;
    border-color: #f2e851 #f2e851 transparent transparent;
    transform: rotate(45deg);
    position: absolute;
    top: 1em;
    left: 0.7em;
}
#g_navi ul li:nth-child(1){
    top: 0px;
    left: 164px;
}
#g_navi ul li:nth-child(2){
    top: 33px;
    left: 131px;
}
#g_navi ul li:nth-child(3){
    top: 67px;
    left: 97px;
}
#g_navi ul li:nth-child(4){
    top: 100px;
    left: 64px;
}
#g_navi ul li:nth-child(5){
    top: 133px;
    left: 32px;
}
#g_navi ul li:nth-child(6){
    top: 167px;
    left: 0px;
}

#g_navi ul li:nth-child(7){
top:0px;
left:290px;
}
#g_navi ul li:nth-child(8){
    top: 33px;
    left: 258px;
}
#g_navi ul li:nth-child(9){
    top: 67px;
    left: 224px;
}
#g_navi ul li:nth-child(10){
    top: 100px;
    left: 191px;
}
#g_navi ul li:nth-child(11){
    top: 133px;
    left: 159px;
}
#g_navi ul li:nth-child(12){
    top: 167px;
    left: 126px;
}

#g_navi ul li::before {
    content: "";
    display: block;
    background: rgba(0,0,0,0.7);
    position: absolute;
    top: 3px;
    bottom: -3px;
    left: 2px;
    right: -2px;
    z-index: 0;
    transform: skewX(-45deg);
    transition: all 0.2s linear;
}

#g_navi ul li::after{
content:"";
display:block;
background:#868581;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:0;
transform: skewX(-46deg);
transition:all 0.2s linear;
}

#g_navi ul li:hover::after
,#g_navi ul li.crt::after{
background:rgba(40,43,61,1);
}



@media screen and (max-width: 767px) {
h1.logo {
    position: static;
    width: 38vw;
    padding: 3vw;
}
#g_navi {
    position: static;
    top: 291px;
    left: 53px;
    z-index: 10;
}
#layout1 #g_navi{
    position: relative;
    z-index:999;
    top:auto;
    left:auto;
}
#g_navi>nav {
    display: none;
    position: fixed;
    top: 50px;
    right: 0;
    left: 0;
    top: 0;
    background: #292c3d;
    z-index: 999;
    bottom: 0;
}
  #g_navi>nav>ul {
    display: flex;
    flex-wrap:wrap;
    text-align: center;
    margin: 0 auto 0px;
  }
  #g_navi>nav>ul>li {
    line-height: 1;
    position:static;
    width:50%;
    height:auto;
  }
#g_navi ul li.crt {
    background: rgba(255,255,255,0.1);
}
#g_navi ul li a
,#g_navi ul li a span {
    position: static;
    transform: skewX(0deg);
    padding: 0em 0 0 0em;
}
#g_navi ul li a,
#g_navi ul li.no_link span{
    padding: 0.7em 0 0.5em;
    display:block;
}
#g_navi ul li::before
,#g_navi ul li::after
,#g_navi ul li span::before{
    display: none;
}

#g_navi ul li a
,#g_navi ul li span
,#g_navi ul li a span {
    font-size: 5.5vw;
}

.drawer_button {
    position: fixed;
    top: 4vw;
    right: 5vw;
    padding: 0;
    height: 9vw;
    width: 12vw;
    border: none;
    background: none;
    outline: none;
    z-index: 9999;
    transform: skewX(-20deg);
}
  .menu_trigger, .menu_trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
  }
  .menu_trigger {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .menu_trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 18%;
    background-color: #292c3d;
  }
  .menu_trigger.active span {
    background-color: #fff;
  }
  .menu_trigger span:nth-of-type(1) {
    top: 0%;
  }
  .menu_trigger span:nth-of-type(2) {
    top: calc(42%);
  }
  .menu_trigger span:nth-of-type(3) {
    bottom: 0px;
  }
}