.Nav{}


/* Nav
-----------------------------------------*/
@media screen and (max-width: 960px) {
/* -- ul#menu -------------------------------------------------------------------------------- */
    
    
#menu-wrap{	
    position: absolute;	
	display: none;
    z-index:9900;    
    width: calc(100% - 40px);
    max-height: 100vh;
    right: 0;
    left: auto;
    top: -60px;
    margin: auto;
    padding: 0; 
    transition: 0.2s ease;
}
    
#menu-wrap.user-deta{
    background: #fff;
    border-radius: 0;
    padding: 0;
    overflow-y: auto;
    z-index: 99;
}

.l-overlay{
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 11;
    pointer-events: none;
}

#menu-wrap.user-deta .nav-menu{
    padding: 30px 20px 17px 20px;
}
    
#menu-wrap.user-deta .nav-menu .login_box .name{
    border-bottom: none;
    font-size: 1.6rem;
    margin: 0 0 15px 0;
}
        
#menu-wrap.user-deta .nav-menu .login_box p{
    font-size: 1.2rem;
    font-weight: normal;
    background-color: #fff;
    text-align: left;
    padding: 0;
}
    
#menu-wrap.user-deta .nav-menu dl {
    margin-bottom: 20px;
}
    
#menu-wrap.user-deta .nav-menu dt{
    font-size: 1.6rem;
    padding: 12px 0px;
    margin-bottom: 10px;
}
  
#menu-wrap.user-deta .nav-menu dd{
    font-size: 1.4rem;
    padding: 8px 20px;
}
    
#menu-wrap.user-deta .nav-menu dd.lab,
#menu-wrap.user-deta .nav-menu dd.ent{
    padding: 2px 20px;
}

#menu-wrap.user-deta .nav-menu dd.lab a.blank:after,   
#menu-wrap.user-deta .nav-menu dd.ent a.blank:after{
    margin-top: -7px;
}
    
#menu-wrap.user-deta dd a.blank{
    display: block;
}
    
#menu-wrap.user-deta .nav-menu dd a{
    display: block;
    position: relative;
    padding-right: 20px;
}
#menu-wrap.user-deta .nav-menu dd a:after{
    position: absolute;
    content: "";
    top: 50%;
    right: 0px;
    width: 15px;
    height: 15px;
    margin-top: -7px;
    background: url(../img/arrow-right.svg) top left no-repeat;
}
    
#menu-wrap.user-deta .nav-menu dd a.blank:after{
    position: absolute;
    content: "";
    top: 50%;
    right: 0px;    
    width: 12px;
    height: 11px;
    margin-top: -5px;
    background: url(../img/icon_blank.svg) top left no-repeat;
}
    
    
    
/* --
ul#menu {
	list-style-type: none;
	
	background: #009cde;
	opacity: 1;
}

ul#menu li { margin:0;
	text-align: center; color:#fff; letter-spacing:normal; font-size:1.3rem
}

ul#menu li a { width:100%;
	text-decoration: none;
	display: block;
	padding: 15px 0;
	color:#fff;
	box-sizing:border-box; border-radius:5px;
}
ul#menu{ display:flex; flex-wrap: wrap; justify-content: center;}
ul#menu li a:hover {}
ul#menu .menu01{  width:45%; height:58px; border-right: 1px solid #5ec1ea; border-bottom:1px solid #5ec1ea;box-sizing:border-box}
ul#menu .username{display:block; width:55%; height:58px;padding:22px 0 0 0!important; border-bottom:1px solid #5ec1ea;box-sizing:border-box; font-size:1.3rem}

.logaut-sp,
.close-sp{ width:50%}
ul#menu .menu02,
ul#menu .menu03{ width:100%}
ul#menu .menu04,
ul#menu .menu05,
ul#menu .menu06,
ul#menu .menu07,
ul#menu .menu08,
ul#menu .menu09,
ul#menu .menu010,
ul#menu .menu011{ width:33.33333%; box-sizing:border-box;}



ul#menu .menu01 a{ padding:20px 0 0 0; box-sizing:border-box}

.menu01,
.menu04,
.menu05,
.menu06,
.menu07,
.menu08,
.menu09{ }
.Nav ul li a:before{ position:relative}
.Nav ul li a:before img{ vertical-align: middle}
.Nav ul li.menu01 a:before { content:""; display:inline-block; width:25px; height:25px; vertical-align:middle; background: url(../img/sp/sp_icon01.svg) left top no-repeat;}
.Nav ul li.menu02 a:before,
.Nav ul li.menu03 a:before,
.Nav ul li.menu04 a:before,
.Nav ul li.menu05 a:before,
.Nav ul li.menu06 a:before,
.Nav ul li.menu07 a:before,
.Nav ul li.menu08 a:before,
.Nav ul li.menu09 a:before,
.Nav ul li.menu010 a:before,
.Nav ul li.menu011 a:before{ background:none}
.Nav ul li.menu02 a,
.Nav ul li.menu03 a,
.Nav ul li.menu04 a,
.Nav ul li.menu05 a,
.Nav ul li.menu06 a,
.Nav ul li.menu07 a,
.Nav ul li.menu08 a,
.Nav ul li.menu09 a,
.Nav ul li.menu010 a,
.Nav ul li.menu011 a{ text-indent:-99999px}
.Nav ul#menu li.menu02 ,
.Nav ul#menu li.menu03 { margin:10px 10px 6px}

.Nav ul li.menu02 a{ height:93px;background:#ffda00 url(../img/sp/sp_icon03.svg) center center no-repeat; box-shadow: 0px 4px #6fb0ad;}
.Nav ul li.menu03 a{ height:93px;background:#fff url(../img/sp/sp_icon04.svg) center center no-repeat; box-shadow: 0px 4px #1c88c5}
.Nav ul li.menu04 a{ height:93px;background:#fff url(../img/sp/sp03.svg) center center no-repeat; box-shadow: 0px 4px #1c88c5;border-radius: 5px;}
.Nav ul li.menu05 a{ height:93px;background:#fff url(../img/sp/sp04.svg) center center no-repeat; box-shadow: 0px 4px #1c88c5;border-radius: 5px;}
.Nav ul li.menu06 a{ height:93px;background:#fff url(../img/sp/sp05.svg) center center no-repeat; box-shadow: 0px 4px #1c88c5;border-radius: 5px;}
.Nav ul li.menu07 a{ height:93px;background:#fff url(../img/sp/sp06.svg) center center no-repeat; box-shadow: 0px 4px #1c88c5;border-radius: 5px;}
.Nav ul li.menu08 a{ height:93px;background:#fff url(../img/sp/sp07.svg) center center no-repeat; box-shadow: 0px 4px #1c88c5;border-radius: 5px;}
.Nav ul li.menu09 a{ height:93px;background:#fff url(../img/sp/sp010.svg) center center no-repeat; box-shadow: 0px 4px #1c88c5;border-radius: 5px;}
.Nav ul li.menu010 a{ height:93px;background:#fff url(../img/sp/sp08.svg) center center no-repeat; box-shadow: 0px 4px #1c88c5;border-radius: 5px;}
.Nav ul li.menu011 a{ height:93px;background:#fff url(../img/sp/sp09.svg) center center no-repeat; box-shadow: 0px 4px #1c88c5;border-radius: 5px;}

ul#menu .menu04, ul#menu .menu05, ul#menu .menu06, ul#menu .menu07, ul#menu .menu08, ul#menu .menu09, ul#menu .menu010, ul#menu .menu011{ padding:10px 5px 0}
ul#menu .menu04, ul#menu .menu07{ padding-left:10px;}
ul#menu .menu06,ul#menu .menu010{ padding-right:10px}
.Nav > ul > li a span{ display:none}

.Nav ul li.menu09,
.Nav ul li.menu011{ margin-bottom:45px!important}

.menu02{}*/

.logaut-sp{ display:block; border-top:1px solid #5ec1ea; padding:20px 0}
.close-sp .sp-close-btn{ position: relative;
    padding: 22px 45px 22px 20px;
    font-weight: bold;
    background: #f3f3f3; font-size: 1.4rem;}
.logaut-sp{border-right:1px solid #5ec1ea; box-sizing:border-box}
    
/*     
.close-sp span:before{ content:""; position: relative;top: 3px;display:inline-block;  background:url(../img/sp/x.svg) left center no-repeat; width:18px; height:14px}*/

/* -- div#sp-icon -------------------------------------------------------------------------------- */

div#sp-icon {
	width: 50px;
	height: 50px;
	position: absolute;
	right: 10px;
	top: -53px;
	z-index: 999;
}

div#sp-icon:hover {
	cursor: pointer;
}

div#sp-icon span,
div#sp-icon span:before,
div#sp-icon span:after {
	display: inline-block;
	width: 30px;
	height: 2px;
	background: #000;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.3s;
}
/*
div#sp-icon span:before{ width:22px}
*/
div#sp-icon span {
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
}

div#sp-icon span:before {
	content: "";
	transform: translateY( -10px ) rotate( 0deg );
}

div#sp-icon span:after {
	content: "";
	transform: translateY( 10px ) rotate( 0deg );
}


div.sp-open span {
	background: transparent !important;
}

div.sp-open span:before {width: 30px!important;
	transform: rotate( 45deg ) !important;
}

div.sp-open span:after {
	transform: rotate( -45deg ) !important;
}

.sw-nav div#sp-icon span,
.sw-nav div#sp-icon span:before,
.sw-nav div#sp-icon span:after {background: #fff;}

.sw-nav .sp-open span:before,
.sw-nav .sp-open span:after {background: #009cde!important;}




.sw-nav-head{ position:absolute; left:0; top:-65px; height:65px; width:100%; background:#fff; vertical-align:middle}
.sw-nav-head img[src$=".svg"]{ width:200px; height:auto;margin: 20px 0 0 10px;}
}
@media screen and (min-width: 961px) {

.Nav #menu-wrap ul{ padding:0; position:relative}
.Nav #menu-wrap ul li{ list-style-type:none}
.Nav #menu-wrap ul li img[src$=".svg"]{ width:30px; height:30px; margin-right:10px; vertical-align: middle;}
.Nav #menu-wrap ul li a{ position:relative}
.Nav #menu-wrap ul li a:before{ position:absolute; content:""; display:inline-block; width:30px; height:30px; top:10px; left:20px; }
.Nav #menu-wrap ul li.menu01 a:before{ background:url(../img/icon1.svg) left top no-repeat}
.Nav #menu-wrap ul li.menu02 a:before{ background:url(../img/icon2.svg) left top no-repeat}
.Nav #menu-wrap ul li.menu03 a:before{ background:url(../img/icon3.svg) left top no-repeat}
.Nav #menu-wrap ul li.menu04 a:before{ background:url(../img/icon4.svg) left top no-repeat}
.Nav #menu-wrap ul li.menu05 a:before{ background:url(../img/icon5.svg) left top no-repeat}
.Nav #menu-wrap ul li.menu06 a:before{ background:url(../img/icon6.svg) left top no-repeat}
.Nav #menu-wrap ul li.menu07 a:before{ background:url(../img/icon7.svg) left top no-repeat}
.Nav #menu-wrap ul li.menu08 a:before{ background:url(../img/icon8.svg) left top no-repeat}
.Nav #menu-wrap ul li.menu09 a:before{ background:url(../img/icon9.svg) left top no-repeat}
.Nav #menu-wrap ul li.menu010 a:before{ background:url(../img/icon10.svg) left top no-repeat}
.Nav #menu-wrap ul li.menu011 a:before{ background:url(../img/icon11.svg) left top no-repeat}
.Nav #menu-wrap ul li.menu01 { margin:10px 0}
.Nav #menu-wrap > ul > li{ margin:5px 0}
.Nav #menu-wrap ul li a:before{ left:0; }
.Nav #menu-wrap > ul > li.reorder{ margin-bottom:20px;}
.Nav #menu-wrap > ul > li.reorder a{ font-weight:bold; padding:20px 0 20px 60px; text-align:center; color:#fff; border-radius:5px; background:#007dd1;  box-shadow: 0px 4px #7cb9df;}
.Nav #menu-wrap > ul > li.reorder a:before{ top: 12px; left:30px}
.Nav #menu-wrap > ul > li.ordering a{ border:1px solid #d0d6db; box-sizing:border-box;  padding:10px 0 10px 30px; text-align:center; color:#282828; border-radius:5px; background:#fff;  box-shadow: 0px 4px #d9d9d9;line-height: 1.4;}
.Nav #menu-wrap > ul > li.ordering span,
.Nav #menu-wrap ul li.menu04 span{ font-size:1.2rem}
.Nav #menu-wrap ul li.menu04 a { line-height:1.4}
.Nav #menu-wrap ul li.menu04 a:before{ top:20px}
.Nav #menu-wrap > ul > li.ordering a:before{ top: 12px; left:30px}
.Nav #menu-wrap > ul > li {position: relative; font-size: 14px;}
.Nav #menu-wrap > ul > li:before{ position:absolute; left:-4px; top:20px; content:""}
.Nav #menu-wrap > ul > li:first-child:before{ content:""}
.Nav #menu-wrap > ul > li a { display: block; position: relative; text-decoration: none;  padding: 15px 0 15px 40px; font-size: 14px;  color: #282828; z-index: 2;}
.Nav #menu-wrap > ul > li a span{ display:block;} 
.Nav #menu-wrap > ul > li a span:before{ content:""}
.logaut-sp,.close-sp{ display:none}


}