@charset "UTF-8";

nav #menu ul {
	width: 205px;
	margin: 0 auto;
	padding: 24px 0;
	text-align: center;
/*	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 10px;*/
}
nav #menu li {
	height: 41px;
	margin: 0 0 0 2px;
	border-bottom: 1px dotted #fff;
}
nav #menu a {
	outline:none;
}


@media screen and (max-width: 768px){
	.burger-btn {
		display: block;
		position: absolute;
		width: 45px;
		height: 45px;
		background-color: #006DDB;
		top: 20px;
		right: 8px;
	}
	.burger-btn span {
		display: block;
		position: absolute;
		width: 60%;
		left: 20%;
		border-bottom: solid 4px #ffffff;
		transition: .35s ease-in-out;
	}
	.burger-btn .bar_top {
		top: 10px;
	}
	.burger-btn .bar_mid {
		top: 20px;
	}
	.burger-btn .bar_bottom {
		bottom: 10px;
	}
	.burger-btn.close .bar_top {
		transform: translate(0%,11px) rotate(45deg);      
		transition: transform .3s; 
	}
	.burger-btn.close .bar_mid {
    	opacity: 0;       
	  	transition: opacity .3s; 
	}
	
	.burger-btn.close .bar_bottom {
    	transform: translate(0%,-10px) rotate(-45deg);      
		transition: transform .3s;
	}
	
	nav .menu_sp  {
		position: fixed; /*スクロールしても位置が固定*/
		transition: all 0.5s;
		text-align: center;
		width: 100%;
		z-index: 30;
		left: 100%;/*画面の外へ出して消す*/
		/*transform: translate(0%)*/

	}
	nav .menu_sp.open  {
		position: absolute; /*スクロールしても位置が固定*/
		background-color: rgba(0,109,219,0.85);
		left: 0%;
		/*transform: translate(0%)*/
	}
	
	nav .menu_sp ul {
		margin-bottom: 1em;
	}
	nav .menu_sp li a {
		display: block;
		color: #FFF;
		text-decoration: none;
		padding: 0.8em;
		border-bottom: solid 1px #ffffff;
	}
	nav .nav-banner {
		margin-bottom: 1em;
	}
	nav .area-banner .bn_poster a{
		font-size: 90%;
		color: #fff;
		text-decoration: none;
	}
}