/* ===================================================================
CSS
 file name  :  menu.css
=================================================================== */
/* header */
	body #header,
	body #container,
	body #footer {
		-webkit-transition: .2s;
		transition: .2s;
	}

	/* spNav active */
	body #header.on,
	body #container.on,
	body #footer.on {
		-webkit-transform: translateX(-85%);
		transform: translateX(-85%);
	}

	/* spNav */
	#spNav {
		position:absolute;
		top:10px;
		right:10px;
		border:1px solid #DDDDDD;
		background:#F6F6F8;
		padding:7px 7px 2px 7px;
		border-radius:5px;
		z-index:1000;
	}

	/* Hamburger menu */
	#spNav #menu,
	#spNav #menu span {
		display: inline-block;
		-webkit-transition: .2s;
		transition: .2s;
		box-sizing: border-box;
	}
	#spNav #menu {
		position: relative;
		width: 24px;
		height: 19px;
	}
	#spNav #menu span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		margin-bottom: 0;
		background-color: #31628c;
	}
	#spNav #menu span:nth-of-type(1) {
		top: 0;
	}
	#spNav #menu span:nth-of-type(2) {
		top: 8px;
	}
	#spNav #menu span:nth-of-type(3) {
		bottom: 0;
	}

	/* Hamburger menu ACTIVE */
	#spNav #menu span:nth-of-type(3),
	#spNav #menu.on span:nth-of-type(3) {
		-webkit-transition: none;
		transition: none;
	}
	#spNav #menu.on {
		-webkit-transform: rotateX(720deg);
		transform: rotateX(720deg);
	}
	#spNav #menu.on span:nth-of-type(1) {
		-webkit-transform: translateY(8px) rotate(-45deg);
		transform: translateY(8px) rotate(-45deg);
	}
	#spNav #menu.on span:nth-of-type(2) {
		-webkit-transform: translateY(0) rotate(45deg);
		transform: translateY(0) rotate(45deg);
	}
	#spNav #menu.on span:nth-of-type(3) {
		opacity: 0;
	}



	/* gNav */
	body #gNav {
		position: fixed;
		top: 0;
		right: 0;
		width: 85%;
		height: 100%;
		min-height: 100%;
		color: #fff;
		padding: 0 0 20px;
		background-color: #00306D;
		z-index: 1000;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		-webkit-transition: .2s;
		transition: .2s;
		box-sizing: border-box;
	}
	body #gNav.on {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
	}


	#gNav .wrap {
		padding: 0;
	}
	#gNav ul li {
		border-bottom: 1px solid #5a86ab;
	}
	#gNav ul li.logo {
		display: none;
	}

	#gNav ul li a,
	#gNav ul li.search span,
	#gNav ul li.useful span,
	#gNav ul li.company span {
		display: block;
		color: #fff;
		font-size: 14px;
		padding: 20px 15px;
		text-decoration: none;
	}


	#gNav ul li .sub {
		display: none;
		background-color: #F6F6F8;
	}
	#gNav ul li .sub li {
		border-bottom: none;
		border-top: 1px solid #cddae5;
	}
	#gNav ul li .sub li a {
		color: #00306D;
		font-size: 12px;
	}


	#gNav ul li.search span,
	#gNav ul li.company span,
	#gNav ul li.useful span {
		/*background-image: url(../imgs/img-arrow_b.png);
		background-repeat: no-repeat;
		background-position: right 15px center;
		background-size: 14px 7px;*/
	}
	/* #spNavSdw */
	#spNavSdw {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 500;
		overflow: hidden;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
	}
	#spNavSdw.show {
        display: block;
		-webkit-animation-duration: .8s;
		animation-duration: .8s;
		-webkit-animation-timing-function: ease;
		animation-timing-function: ease;
		-webkit-animation-name: spNavSdwAnime;
		animation-name: spNavSdwAnime;
	}
    @keyframes spNavSdwAnime {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

@media print, screen and (min-width: 769px) {
/* PC用のスタイル記述 */

/* =====================================
グローバルナビ
======================================== */
	/* spNav */
	#spNav {
		display:none;
	}
/* gNav */
	body #gNav {
		position: inherit;
		top: inherit;
		right: inherit;
		width: 100%;
		height: auto;
		padding: 0;
		background-color: #fff;
		overflow-x: inherit;
		overflow-y: inherit;
		display: block;
		border-top: 1px solid #BFCAD5;
		border-bottom: 2px solid #00306D;
		-webkit-transform: inherit;
		transform: inherit;
		box-sizing:border-box;
	}
	#gNav .wrap {
		margin:auto;
		width: 1000px;
	}
	#gNav ul li {
		float: left;
		width: 142px;
		height: 60px;
		color: #306692;
		text-align: center;
		-webkit-font-smoothing: antialiased;
		font-smoothing: antialiased;
		border-right: 1px solid #BFCAD5;
		border-bottom: none;
		box-sizing: border-box;
	}
	#gNav ul li:first-child {
		border-left: 1px solid #BFCAD5;
	}
	#gNav ul li a {
		display: block;
		color: #00306D;
		font-weight: bold;
		-webkit-font-smoothing: antialiased;
		font-smoothing: antialiased;
		text-decoration: none;
		padding: 16px 0 0 0;
		height: 60px;
		box-sizing: border-box;
		-webkit-transition: .2s;
		transition: .2s;
	}
	#gNav ul li > a:hover {
		color: #fff;
		background-color: #00306D;
	}
	#gNav ul li.search span,
	#gNav ul li.useful span,
	#gNav ul li.company span {
		display: block;
		color: #00306D;
		padding: 16px 0 0 0;
		height: 60px;
		box-sizing: border-box;
		font-weight: bold;
		cursor: pointer;
		-webkit-transition: .2s;
		transition: .2s;
	}
	#gNav ul li.search:hover,
	#gNav ul li.useful:hover,
	#gNav ul li.company:hover {
		background-color: #00306D;
	}
	#gNav ul li.search:hover span,
	#gNav ul li.useful:hover span,
	#gNav ul li.company:hover span {
		color: #fff;
	}
	#gNav ul li .sub {
		display: none;
		position: absolute;
	    width: 100%;
	    left: 0;
	    right: 0;
	    text-align: center;
	    padding: 10px 0;
	    background-color: #00306D;
	    z-index: 1;
	}
	#gNav ul li .sub li {
	    float: none;
	    display: inline-block;
	    width: 160px;
	    height: 50px;
	    background-color: #fff;
		border:none;
	    border-radius: 3px;
	}
	#gNav ul li.useful .sub li {
	    width: 200px;
	}
	#gNav ul li.company .sub li {
	    width: 135px;
	}
	#gNav ul li .sub li a {
		padding:15px 0 0 0;
	    height: 50px;
		box-sizing: border-box;
	}
	#gNav ul li .sub li a:hover {
		color: #00306D;
		background-color: #BFDFFF;
	    border-radius: 3px;
	}
}
@media screen and (max-width: 768px) {
/* スマートフォン用のスタイル記述 */
}