@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: #00938a;
}
#menuSp #menu-nav ul li a:hover{
	background: #c6ebb3;
	color: #00938a;
}


	#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(250, 250, 250, 0.75);
		width: 44px;
		height: 44px;
		border: 1px solid rgba(0, 220, 128, 0.8);
		border-radius: 50%;
		position: absolute;
		right: 2px;
		box-shadow: 0px 0px 3px 0px #a0c1ab;
	}
	#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: #ebfde2;
		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 #00938a;
	}
		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#spNavHome a:before{
			content:"\f015";
			font-family: 'FontAwesome';
			vertical-align: middle;
			display: inline-block;
			padding: 0 7px 2px 0px;
		}
		ul#sMenu li#spNavAbout a:before{
			content:"\f05a";
			font-family: 'FontAwesome';
			vertical-align: middle;
			display: inline-block;
			padding: 0 7px 1px 0px;
		}
		ul#sMenu li#spNavCatch a:before{
			/* content:"\f0eb";
			padding: 0 7px 2px 0px; */
			/* content:"\f046";
			padding: 0 7px 1px 0px; */
			content:"\f073";
			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 6px 1px 0px;
		}
		ul#sMenu li#spNavTogether a:before{
			content:"\f0f7";
			font-family: 'FontAwesome';
			vertical-align: middle;
			display: inline-block;
			padding: 0 6px 2px 0px;
		}
		ul#sMenu li#spNavCaster a:before{
			content:"\f007";
			font-family: 'FontAwesome';
			vertical-align: middle;
			display: inline-block;
			padding: 0 6px 2px 0px;
		}
		ul#sMenu li#spNavNews a:before{
			content:"\f03d";
			font-family: 'FontAwesome';
			vertical-align: middle;
			display: inline-block;
			padding: 0 7px 2px 0px;
		}



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

	#mobile-head:hover{
		background: #00938a;
	    -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: #00938a;
	}

/* } */





@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;
	}

	#mainMenu{
		/* display: none !important; */
	}

}