@charset "utf-8";

html{ font-size: 62.5%; /* 10px */ }

/* iPhone5 */
/* @media screen and (max-width: 320px){
} */

/* iPhone6 */
/* @media screen and (max-width: 375px){
} */

/* iPhone6Plus */
/* @media screen and (max-width: 414px){
	#menu-nav{ top: -320px; }

	.open #menu-nav{
		-moz-transform: translateY(370px);
		-webkit-transform: translateY(370px);
		transform: translateY(370px);
	}
} */

/* @media screen and (max-width: 600px){
} */

/* iPad */
/* @media screen and (max-width: 768px){
	#menu-nav{ top: -350px; }

	.open #menu-nav{
		-moz-transform: translateY(400px);
		-webkit-transform: translateY(400px);
		transform: translateY(400px);
	}
} */

/* @media screen and (max-width: 959px){ */
	#menu-nav{ top: -534px; }

	.open #menu-nav{
		-moz-transform: translateY(532px);
		-webkit-transform: translateY(532px);
		transform: translateY(532px);
	}



#menuSp #menu-nav ul li a{
	color: #ffd900;
}
#menuSp #menu-nav ul li a:hover{
	background: #333;
	color: #ffd900;
}


	#menuSp{
		display: none;
		width: 100%;
		/*max-width: 640px;*/
		padding: 0;
		margin: 0;
		top: 2px;
	}
		.inner{
			position: relative;
			width: 100%;
			padding: 0;
		}

	#menuSp.fixed{
		z-index: 9999;
		display: block;
		padding: 0;
		position: fixed;
		background: transparent;
	}
	#mobile-head{
		z-index: 9999;
		background: rgba(17, 17, 17, 0.75);
		width: 44px;
		height: 44px;
		border: 1px solid rgba(200, 200, 200, 0.8);
		position: absolute;
		right: 2px;
	}
	#menuSp.fixed .logo,
	#menuSp .logo{ position: absolute; }
	#menuSp .logo{
		text-align: left;
		margin: 2px 0 0 2px;
	}
	#menuSp .logo img{
		opacity: 1;
		filter: alpha(opacity=100);
		vertical-align: middle;
		width: 116px;
		padding: 0 0 0 4px;
	}


	#menu-nav{
		position: absolute;
		background: #000;
		opacity: 1; filter: alpha(opacity=100);
		width: 100%;
		text-align: center;
		-webkit-transition: .3s ease-in-out;
		-moz-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
		/* border-bottom: 2px solid #999; */
		z-index: 10;
	}
	#menu-nav ul{
		position: static;
		right: 0;
		bottom: 0;
	}
	#menu-nav ul li{
		float: none;
		font-size: 1.8rem;
		line-height: 3;
		position: static;
		border-bottom: 1px solid #666;
	}
		ul#sMenu li#spNavSchedule{
			/* border-bottom: none; */
		}

	#menuSp #menu-nav ul li a,
	#menuSp.fixed #menu-nav ul li a{
		width: 100%;
		display: block;
		text-decoration: none;
		padding: 4px 0 4px;
	}
		/* Menu Icon */
		ul#sMenu li#spNavOutline a:before{
			content:"\f129";
			font-family: 'FontAwesome';
			vertical-align: middle;
			display: inline-block;
			padding: 0 7px 2px 0px;
		}
		ul#sMenu li#spNavTarget a:before{
			content:"\f03d";
			content:"\f0eb";
			font-family: 'FontAwesome';
			vertical-align: middle;
			display: inline-block;
			padding: 0 7px 2px 0px;
		}
		ul#sMenu li#spNavCondition a:before{
			content:"\f046";
			font-family: 'FontAwesome';
			vertical-align: middle;
			display: inline-block;
			padding: 0 7px 1px 0px;
		}
		ul#sMenu li#spNavHowto a:before{
			content:"\f040";
			font-family: 'FontAwesome';
			vertical-align: middle;
			display: inline-block;
			padding: 0 6px 3px 0px;
		}
		ul#sMenu li#spNavJudge a:before{
			content:"\f007";
			font-family: 'FontAwesome';
			vertical-align: middle;
			display: inline-block;
			padding: 0 6px 3px 0px;
		}
		ul#sMenu li#spNavSchedule a:before{
			content:"\f073";
			font-family: 'FontAwesome';
			vertical-align: middle;
			display: inline-block;
			padding: 0 6px 3px 0px;
		}
		ul#sMenu li#spNavContact a:before{
		    content:"\f003";
			font-family: 'FontAwesome';
			vertical-align: middle;
			display: inline-block;
			padding: 0 7px 3px 0px;
		}
		ul#sMenu li#spNavQuestion a:before{
			content:"\f128";
			font-family: 'FontAwesome';
			vertical-align: middle;
			display: inline-block;
			padding: 0 6px 3px 0px;
		}



				ul#sMenu li#spNavProgram a:before{
					content:"\f26c";
					font-family: 'FontAwesome';
					vertical-align: middle;
					display: inline-block;
					padding: 0 4px 2px 2px;
				}
				ul#sMenu li#spNavAccess a:before{
					content:"\f041";
					font-family: 'FontAwesome';
					vertical-align: middle;
					display: inline-block;
					padding: 0 5px 2px 2px;
				}
				ul#spNavScheduleTime li a:before{
					content:"\f133";
					font-family: 'FontAwesome';
					vertical-align: middle;
					display: inline-block;
					padding: 0 5px 2px 2px;
				}
				ul#sMenu li#spNavMap a:before{
					content:"\f278";
					font-family: 'FontAwesome';
					vertical-align: middle;
					display: inline-block;
					padding: 0 5px 2px 2px;
				}



	#nav-toggle{
		display: block;
	    position: absolute;
	    right: 7px;
	    top: 10px;
	    width: 30px;
	    height: 30px;
	    cursor: pointer;
	    z-index: 100;
	}
	#nav-toggle div{
	    position: relative;
	}
	#nav-toggle span{
	    display: block;
	    position: absolute;
	    height: 4px;
	    width: 100%;
	    background: #ffd900;
	    left: 0;
	    -webkit-transition: .3s ease-in-out;
	    -moz-transition: .3s ease-in-out;
	    transition: .3s ease-in-out;
	}

	#mobile-head:hover{
		background: #1286ff;
	    -webkit-transition: .15s ease-in-out;
	    -moz-transition: .15s ease-in-out;
	    transition: .15s ease-in-out;
	}
	#mobile-head:hover #nav-toggle span{
	    background: #FFF;
	    -webkit-transition: .15s ease-in-out;
	    -moz-transition: .15s ease-in-out;
	    transition: .15s ease-in-out;
	}


	#nav-toggle span:nth-child(1){ top: 0; }
	#nav-toggle span:nth-child(2){ top: 10px; }
	#nav-toggle span:nth-child(3){ top: 20px; }
	.open #nav-toggle span:nth-child(1){
		top: 11px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.open #nav-toggle span:nth-child(2){
		width: 0;
		left: 50%;
	}
	.open #nav-toggle span:nth-child(3){
		top: 11px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.open #nav-toggle span{
		/*background: #ff2862;*/
		background: #BBB;
	}

/* } */





@media screen and (min-width: 960px){

	#menu-nav{
		top: -800px;
		left: 0;
	}

	.open #menu-nav{
    	-moz-transform: translateY(0px);
    	-webkit-transform: translateY(0px);
    	transform: translateY(0px);

		position: fixed;
		top: 0;
		left: 0
	}

	#menuSp{
		display: block;
	}

	#mobile-head{
		position: fixed;
		top: 8px;
		right: 8px;
	}

	#menu-nav ul li{
    	float: none;
    	font-size: 2rem;
    	line-height: 3.6;
		letter-spacing: 0.1em;
	}

}