@charset "utf-8";

 #g_navi ul li a.ac_menu {
     cursor: pointer;
     overflow: hidden;
 }



 @media screen and (min-width:960px) {

     #g_navi {
         position: absolute;
         right: 10px;
         top: 20px;
         width: auto;
         margin-left: 200px;
         display: block !important;
         z-index: 1000;
     }

     #g_navi ul li {
         display: inline;
     }

     #g_navi li a {
         width: auto;
         padding: 10px;
         line-height: 30px;
         display: block;
         color: var(--main-color);
         text-decoration: none;
         text-align: center;
         position: relative;
         float: left;
         letter-spacing: 1px;
         font-size: 14px;
         font-weight: bold;
     }

     #g_navi li a::before {
         display: block;
         height: 2px;
         position: absolute;
         top: 2px;
         width: 70%;
         left: 15%;
         background-color: rgba(17, 187, 221, 0);
         content: '';
         -webkit-transition: 0.2s linear;
         -moz-transition: 0.2s linear;
         transition: 0.2s linear;
     }

     #g_navi li a:hover::before {
         background-color: var(--main-opa-100);
         top: 0px;
         width: 80%;
         left: 10%;
     }

     #g_navi li a:hover {
         color: var(--main-color) !important;
     }

     #g_navi.txt_w li a {
         color: #000;
     }

     header.fixed #g_navi.txt_w li a {
         color: #000;
     }

     #g_navi li.contact a {
         background-color: var(--main-color);
         color: #FFF !important;
         padding-left: 20px;
         padding-right: 20px;
         margin-left: 10px;
         border-radius: 4px;
         -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
     }

     #g_navi li.contact a:hover {
         background-color: #FFF;
         color: var(--main-color) !important;
     }

     #g_navi li.contact a::before {
         display: none;
     }
 }

 @media screen and (min-width:1200px) {

     header #g_navi {
         right: 50%;
         margin-right: -590px;
     }

 }

 @media screen and (max-width:960px) {
     #g_navi {
         position: fixed;
         width: 100%;
         height: 100%;
         top: 0px;
         overflow: auto;
         z-index: 3000;
         background-color: #F2F6F7;
         background-color: rgba(242, 246, 247, 0.85);
         display: none;
         padding-left: 10%;
     }

     #g_navi ul {
         display: -webkit-flex;
         display: flex;
         -webkit-flex-flow: column;
         flex-flow: column;
         -webkit-justify-content: center;
         justify-content: center;
         min-height: 100%;
     }


     #g_navi ul li a {
         color: #111;
         text-decoration: none;
         display: block;
         padding: 10px;
         line-height: 22px;
         font-size: 14px;
         font-weight: bold;
         letter-spacing: 1px;
     }

     #g_navi ul li a:hover {
         color: var(--main-color);
     }

     #g_navi ul li.contact a {
         text-align: center;
         background-color: var(--main-color);
         color: #FFF;
         width: 90%;
     }

     #g_navi ul li.contact a:hover {
         background-color: #FFF;
         color: var(--main-color);
     }
 }