@charset "UTF-8";

/*グローバルメニュー*/
nav {
	background: #fff;
    position: relative;
    z-index: 999;
}
nav>ul{
	margin: 0 auto;
	
	font-size: 18px;
	letter-spacing: 0.1em;
	text-align: center;
	display: flex;
   justify-content:space-around;
	font-size: 20px;
}
nav>ul.main {
	background: #fff;
	position: relative;

}
nav>ul.main>li {
		
	width:auto;
font-size: 1.1vw;
color: #333;
margin-right: 10px;
}
nav>ul.main>li span:before{
	content: "〉";
	color: #DE1011;
	width: 20px;
	height: 50px;
	margin:0 auto 20px;
		
}

nav>ul>li{
  transition: all .2s ease-in;
			position: relative;
		z-index: 888;

}
nav>ul>li:hover,
nav>ul>li.active{
opacity: 0.9;
	  color:#DE1011;

}
/*nav>ul>li a>span{
	color: #01BBC3;
	font-size: 10px;
	display: block;
	margin-top: 9px;
}*/
nav ul li >  a {
  display: block;
  transition: all .2s ease-in;
			position: relative;
		z-index: 888;

}
nav ul li .sub_menu {
	position: absolute;
    top: 130px;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 20px 2%;
    background: #FFF5F5;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
	 visibility: hidden;
    opacity: 0;
    z-index: 1;

}
nav ul li:hover .sub_menu {
    visibility: visible;
    opacity: 1;
	
}
nav>ul li .sub_menu:before{
color: #184e31;
	font-weight: 100;
	text-align: left;
    font-family: 'Dancing Script', cursive;
	position: absolute;
left: 0;
display: block;
top: 10px;
font-size: 30px;
border-bottom: 1px solid #184e31;
	padding-bottom: 5px;
padding-left: 40px;
padding-right: 40px;
}
nav>ul li .sub_menu:after{
	content: "Saitama Central Hospital Nursing";
color: #184e31;
	font-weight: 100;
	text-align: left;
    font-family: 'Dancing Script', cursive;
	position: absolute;
right: 10px;
display: block;
bottom: 10px;
	font-size: 13px;
}
nav>ul li.nav_recruit .sub_menu:before{
content: "Recruit";

}
nav>ul li.nav_education .sub_menu:before{
content: "Education";

}
nav>ul li.nav_welfare .sub_menu:before{
content: "Welfare";

}
nav>ul li.nav_about .sub_menu:before{
content: "About";

}
nav>ul li.nav_voice .sub_menu:before{
content: "Voice";

}
nav ul li > .sub_menu .menu_inner {
  padding: 1em 0;
	  width: 100%;
	margin: 10px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
nav ul li > .sub_menu .menu_inner li {
	display: block;
	padding: 5px 1%;
	box-sizing: border-box;
	margin: 5px 1%;
	line-height:2.0;
	position: relative;
padding-left: 30px;
}
nav ul li > .sub_menu .menu_inner li:before{
font-family: "Font Awesome 5 Free";
  content: "\f06c";
  font-weight: 900;
  padding-right: 5px;
	color: #184e31;
	position: absolute;
	left: 0;
	
}
nav ul li > .sub_menu .menu_inner li:after{
  content: "";
	width: 40px;
	height: 3px;
	background: #184e31;
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	border-radius: 10px;
	 transition: all 200ms ease-out;
	opacity: 0.4;
}
nav ul li >.sub_menu .menu_inner li:hover:after{
	width: 70px;
}
nav ul li > .sub_menu a {
  color: #222;
}
div.burger p{
	display: none;
}
.pagetop div.burger{
	
}
	.pagetop div.burger p{
		position: absolute;
		left: -10px;
		color: #FF9D00;
		display: block;
	}
    .pagetop div.x,
    .pagetop div.y,
    .pagetop div.z {
        position: absolute; margin: auto;
        top: 0px; bottom: 0px;      
        background: #333;
        border-radius:2px;
        -webkit-transition: all 200ms ease-out;
           -moz-transition: all 200ms ease-out;
            -ms-transition: all 200ms ease-out;
             -o-transition: all 200ms ease-out;
                transition: all 200ms ease-out;
    }       
    .pagetop div.x, .pagetop div.y, .pagetop div.z { height: 3px; width: 26px; }
    .pagetop div.y{top: 18px;}
    .pagetop div.z{top: 33px;}
    .pagetop div.collapse{
        top: 20px;
        background:#FF9D00;
        -webkit-transition: all 70ms ease-out;
           -moz-transition: all 70ms ease-out;
            -ms-transition: all 70ms ease-out;
             -o-transition: all 70ms ease-out;
                transition: all 70ms ease-out;
    }
@media screen and (max-width: 780px) {

* { margin: 0px; padding: 0px; }
body {
	width: 100%;
	height: 100%;
}

div.burger {
    height: 50px; 
    width: 40px;
    position: absolute;
top: 10px;
right: 8px;
	cursor: pointer;
	z-index: 999;
}
	div.burger p{
position: absolute;
left: -10px;
color:#ec5c90;
display: block;
top: -5px;	
	}
    div.x,
    div.y,
    div.z {
        position: absolute; margin: auto;
        top: 0px; bottom: 0px;      
        background: #333;
        border-radius:2px;
        -webkit-transition: all 200ms ease-out;
           -moz-transition: all 200ms ease-out;
            -ms-transition: all 200ms ease-out;
             -o-transition: all 200ms ease-out;
                transition: all 200ms ease-out;
    }       
    div.x, div.y, div.z { height: 3px; width: 26px; }
    div.y{top: 18px;}
    div.z{top: 33px;}
    div.collapse{
        top: 20px;
        background:#cc2f24;
        -webkit-transition: all 70ms ease-out;
           -moz-transition: all 70ms ease-out;
            -ms-transition: all 70ms ease-out;
             -o-transition: all 70ms ease-out;
                transition: all 70ms ease-out;
    }
     
    
    div.rotate30{
        -ms-transform: rotate(30deg); 
        -webkit-transform: rotate(30deg); 
        transform: rotate(30deg);   
        -webkit-transition: all 50ms ease-out;
           -moz-transition: all 50ms ease-out;
            -ms-transition: all 50ms ease-out;
             -o-transition: all 50ms ease-out;
                transition: all 50ms ease-out;                  
    }
    div.rotate150{
        -ms-transform: rotate(150deg); 
        -webkit-transform: rotate(150deg); 
        transform: rotate(150deg);  
        -webkit-transition: all 50ms ease-out;
           -moz-transition: all 50ms ease-out;
            -ms-transition: all 50ms ease-out;
             -o-transition: all 50ms ease-out;
                transition: all 50ms ease-out;                  
    }
    
    div.rotate45{
        -ms-transform: rotate(45deg); 
        -webkit-transform: rotate(45deg); 
        transform: rotate(45deg);   
        -webkit-transition: all 100ms ease-out;
           -moz-transition: all 100ms ease-out;
            -ms-transition: all 100ms ease-out;
             -o-transition: all 100ms ease-out;
                transition: all 100ms ease-out;                 
    }
    div.rotate135{
        -ms-transform: rotate(135deg); 
        -webkit-transform: rotate(135deg); 
        transform: rotate(135deg);  
        -webkit-transition: all 100ms ease-out;
           -moz-transition: all 100ms ease-out;
            -ms-transition: all 100ms ease-out;
             -o-transition: all 100ms ease-out;
                transition: all 100ms ease-out;                 
    }

div.navbar{height:73px;background:#385e97;}

div.circle{ 
    width:100%;
    background:#fff;
    opacity:1;
	display: none;
    -webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
        -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
         -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 
}
nav {
	border: none;
    width: 100%;
	height: 0px;
    position: absolute;
    top: 0px; left: 0px;
	    -webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
        -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
         -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 
	margin: 0;
}
	nav.expand{
	    background:#fff;
		height: 100vh;
    -webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
        -ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
         -o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 
/*    	padding-bottom: 1000%;
*/		position: relative;
overflow: scroll;

}

	nav ul{
    width: 100%;
	margin: 0 auto;
		height: 100%;
z-index: 99;
position: relative;
		    font-size:18px;
		text-align: left;
		font-weight: normal;
			line-height: 2.0;
}
	nav ul:before{
	}
	nav>ul{
		display: block;
	}
nav>ul>li {
    list-style: none;
    position:relative;
    left:0;
    opacity:0;
    width:100%;
    font-size:0px;
    -webkit-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -moz-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
        -ms-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
         -o-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	line-height: 1.5 !important;
	display: none;

}
nav>ul>li a {
    color:#4a89dc;
    text-transform:uppercase;
    text-decoration:none;   
    letter-spacing:3px;  
	font-size: 19px;
}

nav>ul>li.animate{
    opacity:1;
	width: 100%;
    -webkit-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
       -moz-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
        -ms-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
         -o-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
text-align: left !important;
display: block;
font-size: 20px;
	box-sizing: border-box;
	}
	nav > ul.main {
		border-bottom: none;
		border-top: none;
}
	nav > ul.blue_sub,
	nav > ul.main {
    height: 0;
}
	nav.expand > ul.blue_sub,
	nav.expand > ul.main {
    height: auto;
}
		nav.expand > ul.main > li {
margin-bottom: 0;
		padding: 5px 2% !important;
border-bottom: 1px solid #ccc;
	}
	nav>ul.main>li span{
		display: block;
		padding-left: 30px;
	}
	nav>ul.main>li span:before{
	width: 20px;
	height: 20px;
	background-size: 20px;
	display: block;
	margin:auto;
		position: absolute;
		left: 5px;
		
}
nav>ul.main>li.nav_education span:before{
	background: url("../img/icon_nav_education.png") no-repeat 50% 50%;
	background-size: 20px;
}
nav>ul.main>li.nav_welfare span:before{
	background: url("../img/icon_nav_welfare.png") no-repeat 50% 50%;
	background-size: 20px;
}
nav>ul.main>li.nav_about span:before{
	background: url("../img/icon_nav_about.png") no-repeat 50% 50%;
	background-size: 20px;
}
nav>ul.main>li.nav_voice span:before{
	background: url("../img/icon_nav_voice.png") no-repeat 50% 50%;
	background-size: 20px;
}
nav>ul>li:after{
font-family: "Font Awesome 5 Free";
  content: "\f067";
  font-weight: 900;
  padding-right: 5px;
	color: #cc2f24;
	position: absolute;
	right: 5px;
	top: 5px;;
	
}

	nav>ul>li .sub_menu {
  max-height: 9999px;
  opacity: 1;
position: relative;
		position: relative;
background: none;
		top: auto;
		height: 0;
		padding: 0;
	}
	nav>ul>li:hover .sub_menu {
		
	}
nav ul li > .sub_menu .menu_inner{
		width: 100%;
	}
nav ul li > .sub_menu .menu_inner li{
float: none;
width: 98%;
	margin: 25px 1%;
color: #222;
		margin: 0 auto !important;
	font-size: 5vw;

	border: none;
	}
	nav>ul>li .sub_menu a{
		color: #222;
	}
	nav>ul li .sub_menu:before{
font-size: 15px;
}
	nav>ul li .sub_menu:after{
		display: none;
}
nav.expand>ul:after{
content: '';
display: inline-block;
width: 66px;
height: 36px;
background-image: url(../img/h2_intro.png);
background-size: contain;
vertical-align: middle;
position: absolute;
right: 0;
display: block;
bottom: -61px;
font-size: 13px;
left: 0;
margin: auto;
	}
	nav ul li > .sub_menu .menu_inner {
    border-top: none;

}
	nav ul li:hover .sub_menu {

    top: 0px;
    visibility: none;
    opacity: 0;
		display: none;

}
	nav ul li > .sub_menu .menu_inner li::after {
display: none;
	}
nav>ul.main>li.open_sub>div {
height: auto;
    top: 0;
    visibility: visible;
    opacity: 1;
display: block !important;
	
}
	
nav > ul li .sub_menu::before {
position: relative;
	}
}