@charset "utf-8";
html{ font-size: 62.5%; }
	#menuSp{
		display: none;
		padding: 0;
		margin: 0;
		top: 0px;

		position: fixed;
		background: rgba(0, 0, 0, 0.75);
		width: 100%;
	}
		/* .menuSp-inner{
			position: relative;
			width: 100%;
			padding: 0;
		} */

	#menuSp.fixed{
		display: block;
		padding: 0;
		position: fixed;
		background: transparent;
		/* z-index: 201; */
		z-index: 20;

		top: 0;
		right: 0;
	}
	#menuSp.open{
		z-index: 10001;
	}
	#mobile-head{
		z-index: 200;
		background: rgba(255, 255, 255, 0.9);
		width: 40px;
		height: 40px;
		border: 1px solid rgba(255, 187, 0, 0.5);
		border: 1px solid rgb(57, 190, 169, 0.5);
	
		position: absolute;
		right: 1vw;
		top: 1vw;
		border-radius: 12px;
		/* border-radius: 50vh; */
	}
	#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;
	}



	body.fixed{
		width: 100%;
		height: 100%;
		/* position: fixed; */
		overflow: hidden;
	}


	/* ナビ
	==============================　*/
	.global-nav{
		font-family: 'Noto Sans JP',"游ゴシック Medium","YuGothic Medium","Yu Gothic Medium","游ゴシック","YuGothic","ヒラギノ角ゴ ProN W3","HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Roboto Regular","メイリオ",Meiryo,"ＭＳ Ｐゴシック","helvetica","arial",sans-serif;
		display: none;
		position: fixed;
		/* background: rgba(41, 223, 0, 0.9);
		background-image: linear-gradient(330deg, #059900, #209400); */
		background: rgba(223, 167, 0, 0.9);
		background-image: linear-gradient(330deg, #28b900, #ffe100);
		width: 100%;
		height: 100%;
		z-index: 10000;
		top: 0;
	}
		.global-nav__inner{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			/* overflow: scroll; */
		}

		/* .global-nav__list li:nth-child(1),
		.global-nav__list li:nth-child(3){ opacity: 0.55; } */



		.global-nav__item{
			/* margin-bottom: 28px; */
		}
		.global-nav__item a{
			/* display: block; */
			position: relative;
			display: inline-block;

			color: #fff;
			-webkit-filter: drop-shadow(0px 0px 1px rgba(0,0,0,.5));
			-moz-filter: drop-shadow(0px 0px 1px rgba(0,0,0,.5));
			-ms-filter: drop-shadow(0px 0px 1px rgba(0,0,0,.5));
			filter: drop-shadow(0px 0 1px rgba(0,0,0,.5));
	
			font-size: 1.88rem;
			font-weight: bold;
			text-decoration: none;
			/* transition: 0.5s; */
			letter-spacing: 0.008em;
			padding: 1.6rem 0;
			padding: 1.4vh 0;
			text-indent: 1rem;
		}
			.global-nav__item a.live,
			.global-nav__item a.grassroots,
			.global-nav__item a.enjin,
			.global-nav__item a.yellowscarf{
				line-height: 1.2;
			}
			.global-nav__item a span{
				color: #fff;
				font-size: 1.48rem;
				letter-spacing: 0.05em;
				font-feature-settings: "palt";
			}
		.global-nav__item a:hover{
			opacity: 0.65;
		}
		.global-nav__item a::before{
			content: "";
			background: url(../../img/common/logo-mark-w.png) no-repeat left top;
			background-size: contain;
			opacity: 0.8;
			position: absolute;
			display: block;
			-webkit-transform: translateY(-50%);
			-moz-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			transform: translateY(-50%);
			width: 24px;
			height: 20px;
			bottom: 4px;
			bottom: 0.7vh;
			left: -22px;
			left: -24px;
		}
		.global-nav__item a.live::before{
			bottom: 1vh;
			left: -30px;
		}
		.global-nav__item a.grassroots::before{
			bottom: 0.25vh;
			left: -22px;
		}
		.global-nav__item a.enjin::before{
			bottom: 0.25vh;
			left: -32px;
		}
		.global-nav__item a.yellowscarf::before{
			bottom: 2.25vh;
			left: -32px;
		}


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

	#mobile-head:hover{
		background: #ff8c00;
		background: #39bea9;
	    -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: 9px; }
	#nav-toggle span:nth-child(3){ top: 18px; }
	.open #nav-toggle span:nth-child(1){
		top: 9px;
		-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: 9px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.open #nav-toggle span{
		background: #ffa387;
		background: #39bea9;
	}







@media screen and (min-width: 1024px){
	html{
		overflow-y: scroll;
	}
	/* html.noscroll{
		height: 100%;
	} */

	#menuSp{
		/* display: none !important; */
	}
	#mobile-head{}

	.global-nav{}
		.global-nav__inner{}
		.global-nav__item{
			margin-bottom: 4px;
		}
		.global-nav__item a{
			font-size: 2.64rem;
			letter-spacing: 0.06em;
			padding: 1.6rem 0;
			line-height: 2.14;
		}
			.global-nav__item a.live,
			.global-nav__item a.grassroots,
			.global-nav__item a.enjin,
			.global-nav__item a.yellowscarf{
				line-height: 1.2;
			}
			.global-nav__item a span{
				font-size: 1.8rem;
				line-height: 1.1;
			}
			.global-nav__item a::before{
				content: "";
				background: url(../../img/common/logo-mark-w.png) no-repeat left top;
				background-size: contain;
				position: absolute;
				width: 32px;
				height: 28px;
				bottom: 11px;
				left: -30px;
			}
			.global-nav__item a.live::before{
				bottom: 24px;
				left: -32px;
			}
			.global-nav__item a.grassroots::before{
				bottom: -2px;
				left: -22px;
			}
			.global-nav__item a.enjin::before{
				bottom: -2px;
				left: -40px;
			}
			.global-nav__item a.yellowscarf::before{
				/* bottom: -24px; */
				left: -40px;
			}

}





/* Menu Icon */
li#spNavOutline a:before{
	/* content: "\f05a";
	font-family: "Font Awesome 6 Free"; */
	font-weight: normal;
	vertical-align: middle;
	display: inline-block;
	margin: 0 10px 5px 0px;
}
li#spNavMovie a:before{
	/* content: "\f03d";
	font-family: "Font Awesome 6 Free"; */
	font-weight: normal;
	vertical-align: middle;
	display: inline-block;
	margin: 0 9px 4px 0px;
}
li#spNavChara a:before{
	/* content: "\f118";
	font-family: "Font Awesome 6 Free"; */
	font-weight: normal;
	vertical-align: middle;
	display: inline-block;
	margin: 0 10px 4px 0px;
}
		li#spNavCondition a:before{
			/* content:"\f046";
			font-family: "Font Awesome 6 Free"; */
			vertical-align: middle;
			display: inline-block;
			padding: 0 7px 1px 0px;
		}
		li#spNavHowto a:before{
			/* content:"\f040";
			font-family: "Font Awesome 6 Free"; */
			vertical-align: middle;
			display: inline-block;
			padding: 0 6px 3px 0px;
		}
		li#spNavSchedule a:before{
			/* content:"\f073";
			font-family: "Font Awesome 6 Free"; */
			vertical-align: middle;
			display: inline-block;
			padding: 0 6px 3px 0px;
		}
		li#spNavScheduleTime a:before{
			/* content:"\f133";
			font-family: "Font Awesome 6 Free"; */
			vertical-align: middle;
			display: inline-block;
			padding: 0 5px 2px 2px;
		}
		li#spNavProgram a:before{
			/* content:"\f26c";
			font-family: "Font Awesome 6 Free"; */
			vertical-align: middle;
			display: inline-block;
			padding: 0 4px 2px 2px;
		}
		li#spNavAccess a:before{
			/* content:"\f041";
			font-family: "Font Awesome 6 Free"; */
			vertical-align: middle;
			display: inline-block;
			padding: 0 5px 2px 2px;
		}
		li#spNavMap a:before{
			/* content:"\f278";
			font-family: "Font Awesome 6 Free"; */
			vertical-align: middle;
			display: inline-block;
			padding: 0 5px 2px 2px;
		}
		li#spNavContact a:before{
			/* content:"\f003";
			font-family: "Font Awesome 6 Free"; */
			vertical-align: middle;
			display: inline-block;
			padding: 0 7px 3px 0px;
		}
		li#spNavQuestion a:before{
			/* content:"\f128";
			font-family: "Font Awesome 6 Free"; */
			vertical-align: middle;
			display: inline-block;
			padding: 0 6px 3px 0px;
		}