@charset "utf-8";

/*  ロゴ  */

.global-head {
	position: fixed;
	width: 200px;
	padding-top: 20px;
	text-align:center;	
	z-index: 150;
}

.nav-toggle span{
	display:block;
	transition:all .4s;
	position:absolute;
	left:12.5px;
	height:2px;
	border-radius:5px;
	background:#ffffff;
	width:25px;
	cursor:pointer;
}

.nav-toggle {
	display:none;
	position:fixed;
	bottom:0px;
	right:0px;
	height:45px;
    width:50px;
	background:#000000;
	border-radius:3px;
	z-index:400;
}

.nav-toggle span:nth-child(1) {
	top:7px;
}
.nav-toggle span:nth-child(2) {
	top:13px;
}
.nav-toggle span:nth-child(3) {
	top:19px;
}
.nav-toggle span:nth-child(3)::after {
	content:"Menu";
	position:absolute;
	top:9px; 
	left:3px;
	color:#ffffff;
	font-size:6px;
	text-transform:uppercase;
}


@media screen and (max-width: 850px) {
	.overlay-mobile {
		display: none;
		position:fixed;
		background:rgba(0,0,0,.6);
		width:100%;
		height:100vh;
		top:0;
		left:0;
		right:0;
		bottom:0;
	}

	.global-head {
		width:100%;
		padding:10px 10px 0;
		background:rgba(255,255,255,.8);
		display:-webkit-flex;
		display:flex;
	}

	.global-nav {
		display:block;
		position:fixed;
		height:100%;
		padding-top:15px;
		padding-bottom:15px;
		font-size:13px;
		overflow:hidden; 
		overflow-y:auto;
		max-height:100hv;
	}

	.global-nav li {
		list-style:none;
		padding:5px 0;
		padding-left:30px;
		background:#00107b;
		width:250px;
		list-style-type:none;
	}

	.global-nav li a {
		display:block;
		text-decoration:none;
		color:#ffffff;
	}
	
	.global-nav li a:hover {
		color:#00107b;
		background:#ffffff;
	}

	.sidebar {
		position:fixed;
		right:-200px;
		top:0;
		height:90%;
		width:200px;
		color:#333333;
		background:#00107b;
		transform: .35s ease-in-out;
	    -moz-transform:.35s ease-in-out;
		-webkit-transition:.35s ease-in-out;
		transition:.35s ease-in-out;
	}

	.nav-toggle {
		display:block;
	}

	.open {
		overflow:hidden;
	}

	.open .overlay-mobile {
		display:block;
	}

	.open .sidebar {
		-webkit-transform:translate3d(-200px,0,0);
	    -moz-transform:translate3d(-200px,0,0);
		transform:translate3d(-200px,0,0);
	}

	.open .nav-toggle span:nth-child(1) {
    	top: 10px;
    	left: 15px;
		-webkit-transform: translateY(6px) rotate(-45deg);
    	-moz-transform: translateY(6px) rotate(-45deg);
    	transform: translateY(6px) rotate(-45deg);
    	width: 22px;
  	}
		
	.open .nav-toggle span:nth-child(2) {
		opacity: 0;
 	}

	.open .nav-toggle span:nth-child(3) {
		top: 22px;
		left: 15px;
		-webkit-transform:translateY(-6px) rotate(45deg);
    	-moz-transform:translateY(-6px) rotate(45deg);
    	transform: translateY(-6px) rotate(45deg);
    	width: 22px;
   	}
	
	.open .nav-toggle span:nth-child(3)::after {
		content:"Close";
		-webkit-transform:translateY(0) rotate(-45deg);
    	-moz-transform:translateY(0) rotate(-45deg);
    	transform: translateY(0) rotate(-45deg);
		top:9px;
		left:11px;
	}

	.overlay-mobile {
		z-index: 200;
	}
	.sidebar {
		z-index: 300;
	}
	.nav-toggle {
		z-index: 400;
	}

	/*　　モバイル　メニュー　*/
	.mobile-menu {
		display:block
	}

	.mobile-menu-txt {
		font-size:10px;
	}

	.mobile-menu-nav-txt {
		font-size:15px;
	}

	ul.mobile-menu {
		display:flex;
		position:fixed;
		left:0;
		bottom:0;
		width:100%;
		height:45px;
		margin:0;
		padding:0;
/*        background-image: linear-gradient(145deg, rgba(40, 0, 255, 1), rgba(58, 99, 255, 1) 70%);*/
		background:-webkit-linear-gradient(145deg, rgba(0, 16, 123, 1), rgba(40, 0, 255, 1) 70%);
		background:-moz-linear-gradient(145deg,rgba(0, 16, 123, 1), rgba(40, 0, 255, 1) 70%);
		background:-ms-linear-gradient(145deg, rgba(0, 16, 123, 1), rgba(40, 0, 255, 1) 70%);
		background:-o-linear-gradient(145deg, rgba(0, 16, 123, 1), rgba(40, 0, 255, 1) 70%);
		background:linear-gradient(145deg, rgba(0, 16, 123, 1), rgba(40, 0, 255, 1) 70%);

/*    background-image: linear-gradient(to right, rgb(21, 101, 192), rgb(30, 136, 229) 74%, rgb(0, 172, 248));*/
		border-top:1px solid #000000;
		border-bottom:1px solid #000000;
		align-items:center;
		z-index:95;
		padding-bottom:env(safe-area-inset-bottom);
	}
	
	ul.mobile-menu li {
		width:14%;
		list-style-type:none;
		text-align:center;
	}
	
	.mobile-menu li a {
		display:block;
		color:#ccc;		
		line-height:11px;
		text-decoration:none;		
		cursor:pointer;
	}

	.mobile-menu li a:hover {
		color:#000000;
	}

	ul.mobile-sub-menu {
		visibility:hidden;
		opacity:0;
	}

	ul.mobile-sub-menu li{
		display:block;
		width:100%;
		height:30px;
	}

	ul.mobile-sub-menu li a{
		display:block;
	}

	ul.mobile-sub-menu li span {
		display:block;
		font-size:14px;
		line-height:24px;        
	}

	.mobile-sub-menu li a:hover {
		background:#D3D3D3;
		visibility:visible;
		opacity:1;
		z-index:10;
		overflow:hidden;
		overflow-y:scroll;
	}

	li.mobile-sub-menu-hed ul.mobile-sub-menu {
		position:absolute;
		bottom:43px;
		left:0;
		box-sizing:border-box;
		width:100%;
		padding:0;
	}

	li.mobile-sub-menu-hed:hover ul.mobile-sub-menu {
		bottom:43px;
		visibility:visible;
		opacity:1;
	}

	li.mobile-sub-menu-hed ul.mobile-sub-menu li {
		float:left;
		width:100%;
		border:none;
	}
}

@media screen and (min-width: 851px) {
	.mobile-menu {
		display: none;
	}

	.global-nav ul {
		list-style:none;
		margin-left:0;
	}

	.global-nav > ul > li {
		position:relative;		
	}
	
	.global-nav a {
		color:#00107b;
		text-decoration:none;
		display:block;
		padding:8px 0;
		-moz-transition:background-color .10s linear;
		-webkit-transition:background-color .10s linear;
		transition:background-color .2s linear;
	}

	.global-nav .sub-menu.is-active > a,
	.global-nav a:hover {
		color:#ffffff;
		background:#00107b;
	}

	.sidebar {
		font-size:16px;
		padding-top:80px;
		width:200px;
		height:100%;
		position:fixed;
		color:#00107b;
		background:#ffffff;
		text-align:center;
		z-index:100;
		box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.4);
	}

	.sns_menu {
		margin-top: 30px;
	}

	.global-nav .sub-menu-nav a,
	.global-nav .sub-menu:hover .sub-menu-nav {
		width:200px;
	}

	.global-nav .sub-menu-head {
		position:relative;
	}
	
	.global-nav .sub-menu-head:after {
		content:""; 
		position:absolute;
		top:0;
		bottom:0;
		right:30px;
		margin:auto;
		vertical-align:middle;
		width:8px;
		height:8px;
		border-top:1px solid #00107b;
		border-right:1px solid #00107b;
		-moz-transform:rotate(40deg);
		-webkit-transform:rotate(40deg);
		transform:rotate(40deg);
	}

	.global-nav .sub-menu-nav {
		position:fixed;
		background:#00107b;
		color:#ffffff;
		top:0;
		bottom:0;
		padding-top:40px;
		left:200px;
		width:0;
		height:100vh;
		overflow:hidden; 
		overflow-y:scroll;
		-moz-transition:width .2s ease-out;
		-webkit-transition:width .2s ease-out;
		transition:width .2s ease-out;
	}

	.global-nav .sub-menu-nav::-webkit-scrollbar {
		width: 10px;
	}

	.global-nav .sub-menu-nav::-webkit-scrollbar-track {
		border-radius: 10px;
		background: #005594;
	}

	.global-nav .sub-menu-nav::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background:#003f6e;
	}

	.global-nav .sub-menu.is-active > a:after,
	.global-nav .sub-menu-head:hover:after {
		border-color: #ffffff;
	}
	
	.global-nav .sub-menu-nav a {
		color: #ffffff;
	}

	.global-nav .sub-menu-nav a:hover {
		color: #004070;
		background: #ffffff;
	}

	.global-nav > ul > li.active > a    {
		color:#fff;
		background:#3b688a;
	}
}
/*	@media screen and (min-width: 851px)ここまで	*/