@charset "utf-8";

* {
	margin:0;
	padding:0;
}
*, *:before, *:after {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}

html,body {
	font-size:15px;
	font-family:'Lato', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	height:100%;
	overflow-x: hidden;
}

body {
	background:#ffffff;
	-webkit-text-size-adjust:100%;
	overflow:hidden;
	overflow-y:scroll;
}

.main {
	background: #ffffff;
}

.main-in {
	padding-left: 270px;
}

.main-visual {
	background:#69d8e0;
	background:-webkit-linear-gradient(-45deg, #0484b5, #69d8e0);
	background:-moz-linear-gradient(-45deg, #0484b5, #69d8e0);
	background:-ms-linear-gradient(-45deg, #0484b5, #69d8e0);
	background:-o-linear-gradient(-45deg, #0484b5, #69d8e0);
	background:linear-gradient(-45deg, #0484b5, #69d8e0);
	height:90px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.main-visual h1 {
    font-size:30px;
    font-size:calc(1.875rem + ((1vw - 7.68px) * 1.3038));
    line-height:1.3;
	color:#ffffff;
}

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

.mobile-br{
	display:none;
}

.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:5px;
	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:10px; 
	left:-1px;
	color:#ffffff;
	font-size:0.6rem;
	text-transform:uppercase;
}

@media screen and (max-width: 850px) {
	.mobile-br{
		display:block;
	}

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

	.main-in {
		padding-left:0;
		padding-top:85px;
	}

	.global-head {
		width:100%;
		padding:10px;
		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:#0071c5;
		width:250px;
		list-style-type:none;
	}

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

	.sidebar {
		position:fixed;
		right:-250px;
		top:0;
		height:100%;
		width:250px;
		color:#333333;
		background:#0071c5;
	    -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(-250px,0,0);
	    -moz-transform:translate3d(-250px,0,0);
		transform:translate3d(-250px,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:6px;
		left:8px;
	}

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

@media screen and (min-width: 851px) {
	.global-nav ul {
		list-style:none;
		margin-left:0;
	}

	.global-nav > ul > li {
		position:relative;
	}
	
	.global-nav a {
		color:#0071c5;
		text-decoration:none;
		display:block;
		padding:12px 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:#0071c5;
	}

	.sidebar {
		font-size:17px;
		padding-top:150px;
		width:270px;
		height:100%;
		position:fixed;
		color:#0071c5;
		background:#ffffff;
		text-align:center;
		z-index:100;
	}

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

	.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 #0071c5;
		border-right:1px solid #0071c5;
		-moz-transform:rotate(40deg);
		-webkit-transform:rotate(40deg);
		transform:rotate(40deg);
	}

	.global-nav .sub-menu-nav {
		position:fixed;
		background:#0071c5;
		color:#ffffff;
		top:0;
		bottom:0;
		padding-top:40px;
		left:270px;
		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: #0073d6;
		background: #ffffff;
	}
}
/*	@media screen and (min-width: 851px)ここまで	*/

@media screen and (max-width: 400px) {
	.main-visual h1 {
		font-size: 1.5rem;
	}
}