

a.meanmenu-reveal{display:none;}

@media only screen and ( max-width : 768px ) {
 .fixed {position: fixed; width: 100%; height: 100%; z-index: 1;}
 #header .mask {background: rgba(2,2,2,1.0); top: 60px; left: 0; z-index: 1; position: absolute; width: 100%; height: 100vh; opacity: 1; display: none;}
}

.mean-container .mean-bar{width:100%; position:fixed; background:none; min-height:60px; z-index:999998; top:0; left:0;}
.mean-container .mean-bar {width: 100%; position: fixed; background: none; min-height: 60px; z-index: 98; top: 0; left: 0;}
.meanmenu-reveal-btn {position: absolute; display: block; z-index: 99999; box-sizing: border-box; width: 60px; height: 60px; right: 0; top: 0;}
.meanmenu-reveal {width: 26px; height: 20px; margin: 13px 17px 27px 17px; display: block !important; position: relative;}
.meanmenu-reveal:after {content: "MENU";position: absolute; bottom: -20px; color: #036eb8; font-size: 12px; width: 60px; left: -17px; text-align: center; display: block;}
.meanmenu-reveal.meanclose:after {content: "CLOSE"; color:#036eb8;}


.meanmenu-reveal span {display: inline-block; transition: all .4s; box-sizing: border-box; position: absolute; left: 0; width: 100%; height: 2px; margin: 0 auto;}
.meanmenu-reveal span:nth-of-type(1) {top: 0; background: #036eb8;}
.meanmenu-reveal span:nth-of-type(2) {top: 8px; background: #036eb8;}
.meanmenu-reveal span:nth-of-type(3) {top: 16px; background: #036eb8;}

.meanmenu-reveal span:nth-of-type(1) {-webkit-animation: menu-ber01 .75s forwards; nimation: menu-ber01 .75s forwards;}
.meanmenu-reveal span:nth-of-type(2) {transition: all .25s .25s; opacity: 1;}
.meanmenu-reveal span:nth-of-type(3) {-webkit-animation: menu-ber02 .75s forwards; animation: menu-ber02 .75s forwards;}

.meanclose span:nth-of-type(1) {-webkit-animation: active-menu-ber01 .75s forwards; animation: active-menu-ber01 .75s forwards; top: -2px;}
.meanclose span:nth-of-type(2) {opacity: 0;}
.meanclose span:nth-of-type(3) {-webkit-animation: active-menu-ber03 .75s forwards; animation: active-menu-ber03 .75s forwards;}

@-webkit-keyframes menu-ber01 {
 0% {-webkit-transform: translateY(8px) rotate(45deg);}
 50% {-webkit-transform: translateY(8px) rotate(0);}
 100% {-webkit-transform: translateY(0) rotate(0);}
}

@keyframes menu-ber01 {
 0% {transform: translateY(8px) rotate(45deg);}
 50% {transform: translateY(8px) rotate(0);}
 100% {transform: translateY(0) rotate(0);}
}

@-webkit-keyframes menu-ber02 {
 0% {-webkit-transform: translateY(-8px) rotate(-45deg);}
 50% {-webkit-transform: translateY(-8px) rotate(0);}
 100% {-webkit-transform: translateY(0) rotate(0);}
}


@keyframes menu-ber02 {
 0% {transform: translateY(-8px) rotate(-45deg);}
 50% {transform: translateY(-8px) rotate(0);}
 100% {transform: translateY(0) rotate(0);}
}

@-webkit-keyframes active-menu-ber01 {
 0% {-webkit-transform: translateY(0) rotate(0);}
 50% {-webkit-transform: translateY(10px) rotate(0);}
 100% {-webkit-transform: translateY(10px) rotate(45deg);}
}

@keyframes active-menu-ber01 {
 0% {transform: translateY(0) rotate(0);}
 50% {transform: translateY(10px) rotate(0); }
 100% {transform: translateY(10px) rotate(45deg);}
}

@-webkit-keyframes active-menu-ber03 {
 0% {-webkit-transform: translateY(0) rotate(0);}
 50% {-webkit-transform: translateY(-8px) rotate(0);}
 100% {-webkit-transform: translateY(-8px) rotate(-45deg);}
}

@keyframes active-menu-ber03 {
 0% {transform: translateY(0) rotate(0);}
 50% {transform: translateY(-8px) rotate(0);}
 100% {transform: translateY(-8px) rotate(-45deg);}
}

.mean-container .mean-nav{width:100%; margin-top:60px; max-height:100vh; overflow-y:auto;}
.mean-container .mean-nav ul{padding: 0; margin: 0; width: 100%; list-style-type: none; overflow-y: scroll; -webkit-overflow-scrolling:touch; position: relative; z-index: 99; max-height: 100vh; max-height: calc(100vh - 60px); background: #ffffff;}
.mean-container .mean-nav ul ul{padding-bottom:0; margin-bottom:0;}

.mean-container .mean-nav ul li{position:relative; width:100%; box-sizing: border-box; background:#ffffff;}
.mean-container .mean-nav ul li a,.mean-container .mean-nav ul li span.pre{display:block; width:100%; color: #036eb8; padding:1em; margin:0; text-align:left; text-decoration:none; text-transform:uppercase; #036eb8; box-sizing: border-box;}
.mean-container .mean-nav ul li a:hover{background:#036eb8; color: #fff !important;}
.mean-container .mean-nav ul li li a{width:100%; padding:1em 10%; text-shadow:none !important; visibility:visible; color: #036eb8;}
.mean-container .mean-nav ul li li a:hover{background:#036eb8; color: #fff;}

.mean-container .mean-nav ul li.mean-last a{border-bottom:none; margin-bottom:0; color: #036eb8;}
.mean-container .mean-nav ul li.mean-last a:hover{background:#036eb8; color: #fff;}
.mean-container .mean-nav ul li li li a{width:70%; padding:1em 15%;}
.mean-container .mean-nav ul li li li li a{width:60%; padding:1em 20%;}
.mean-container .mean-nav ul li li li li li a{width:50%; padding:1em 25%;}
.mean-container .mean-nav ul li a:hover{background:#252525; background:rgba(255,255,255,0.1);}

.mean-container .mean-nav ul li a.mean-expand{/*margin-top:1px;*/ width:60px; text-align:center; position:absolute; right:0; top:0; z-index:2; padding: 0.2em; font-size: 24px; color: #036eb8;}

.mean-container .mean-nav ul li a.mean-expand:hover {background:#036eb8; opacity:0.6; color: #fff;}
.mean-container .mean-push {float:left; width:100%; padding:0; margin:0; clear:both;}
.mean-nav .wrapper{width:100%; padding:0; margin:0;}
.mean-container .mean-bar, .mean-container .mean-bar *{-webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;}
.mean-remove{display:none !important;}

/* ---------------------------------------------------------------------------------------------
　   HEADER
--------------------------------------------------------------------------------------------- */
#header {box-shadow: 0px 3px 5px 2px rgba(0,0,0,0.2); z-index: 99; width: 100%; position: fixed; top: 0; left: 0; background: #fff; font-size: 90%; font-family: 'Poppins', sans-serif;}
#gNav a:hover {color: #631039;}
#gNav span{position: relative; top:7px;}

nav li a {font-size: 13px; letter-spacing: 0.2em;}
nav .sub-menu {background: #fff; border-top: 1px solid #036eb8; text-align:right;}


@media print, screen and ( min-width : 769px ) {
 #header {margin-left:auto; margin-right:auto;top: 0px; background: #fff; height: 82px; background: #fff; color: #036eb8;}
 #header a{text-decoration: none; color: #036eb8;}

 .h_logo {width: 20%; box-sizing:border-box; margin: 0 0 0 150px;}
 .phead {float: left; font-size: 90%; width: 60%; padding-top:10px; vertical-align: bottom;}
 img.h_logo {width: 250px; padding: 10px;}

 #h_top {display: flex; justify-content: space-between; align-items: center;}
 #top-head span{float:right; font-size: 80%;}
 #gNav ul {margin: 0 100px 0 0; padding: 0;}
 #gNav li {list-style: none;}
 #gNav ul {position: relative; display: flex;}
 #gNav li {position: relative; margin-right: 2em; padding: -10px 0 10px;}
 #gNav li:last-child {margin-right: 0;}
 #gNav li span{ position: relative; top:2px; margin-right: 2px;}
 #gNav li a {position: relative; display: block; text-align: left; line-height: 80px; cursor:pointer;}
 #gNav .sub-menu {visibility: hidden; opacity: 0; z-index: 1; display: block; position: absolute; top: 50px; left: 50%; margin-left: -100px; width: 280px; -webkit-transition: all .2s ease; transition: all .2s ease;}
 #gNav .sub-menu a {display: block; border-bottom: none; padding: 12px; line-height: 1.2em;}
 #gNav .sub-menu a:hover:after {content: none;}
 #gNav .sub-menu a span{padding-left: 6px; position: relative; top:2px; margin-right: 2px;}
 #gNav .sub-menu li {display: block; font-size: 90%;  padding: 0; margin: 0; border-top: 1px solid #2196F3;}
 #gNav .sub-menu li:last-child {border-bottom: none;}
 #gNav ul > li:hover {-webkit-transition: all .5s; transition: all .5s;}
 #gNav ul > li:hover a,#gNav .current-menu-item a,#gNav .current-menu-parent a {color: #036eb8;}
 #gNav li:hover ul.sub-menu {top: 80px; visibility: visible; opacity: 1; z-index: 9999;}
 #gNav li ul li:after {content: none;}
 #gNav li:hover ul.sub-menu a {color: #036eb8;}
 #gNav .sub-menu li a:hover {color:#ffffff; background:#e0f2fa;}
 #gNav .contact_btn a:hover {color:#2196F3;}
}

@media only screen and (max-width : 768px ) {
 #header {top: 0px; padding: 4px 0 ; height: 50px; background: #fff;}
 .h_logo {float:right; width: 150px; position: absolute; top: 6px; left: 10px; z-index: 100;}
 #gNav .nav {overflow-y: auto; height: 100vh;}
 #gNav .sub-menu {font-size: 90%; border-bottom: 1px solid #2196F3;}
 #gNav .sub-menu li{display: block; font-size: 80%; padding:  0; margin: 0; border-bottom: 1px solid #2196F3;}
 #gNav .sub-menu li a:hover {color:#ffffff; background:#e0f2fa;}
 #gNav:hover {color:#ffffff; background:#e0f2fa;}
 #gNav .sub-menu a span{padding-left: 26px;}
 .mean-nav .container {padding: 0;}
 nav li .fa {display: none;}
}



