:root {
	--base-color:#f8b656;/*#eb6f8b*/
	--base-light-color:rgba(248,182,86,.50); /* #00ff00 #8cff5f #5ac722 */
	--news-color:#e7242f;
	--news-light-color:#f5a7ac;
	--story-color:#f2902e;
	--story-light-color:#fad3ab;
	--caststaff-color:#fff211;
	--caststaff-light-color:#fffaa0;
	--theater-color:#a6cd48;
	--theater-light-color:#dbebb6;
	--ticket-color:#48b340;
	--ticket-light-color:#b6e1b3;
	--goods-color:#61beec;
	--goods-light-color:#c0e5f7;
	--bd-color:#2f5caa;
	--bd-light-color:#acbedd;
	--cd-color:#814698;
	--cd-light-color:#cdb5d6;
	--greeting-color:#e137bf;
	--greeting-light-color:#f3afe5;
	--present-color:#e7242f;
	--present-light-color:#f5a7ac;
	--onair-color:#f2902e;
	--onair-light-color:#fad3ab;
}

#navigation li a.news {
	background-color:  var(--news-color);
}
#navigation li a.news:hover {
	background-color: var(--news-light-color);
	border-color:  var(--news-color);
}

#navigation li a.story {
	background-color:  var(--story-color);
}
#navigation li a.story:hover {
	background-color: var(--story-light-color);
	border-color:  var(--story-color);
}

#navigation li a.caststaff {
	background-color:  var(--caststaff-color);
}
#navigation li a.caststaff:hover {
	background-color: var(--caststaff-light-color);
	border-color:  var(--caststaff-color);
}

#navigation li a.theater {
	background-color:  var(--theater-color);
}
#navigation li a.theater:hover {
	background-color: var(--theater-light-color);
	border-color:  var(--theater-color);
}

#navigation li a.ticket {
	background-color:  var(--ticket-color);
}
#navigation li a.ticket:hover {
	background-color: var(--ticket-light-color);
	border-color:  var(--ticket-color);
}

#navigation li a.goods {
	background-color:  var(--goods-color);
}
#navigation li a.goods:hover {
	background-color: var(--goods-light-color);
	border-color:  var(--goods-color);
}

#navigation li a.bd {
	background-color:  var(--bd-color);
}
#navigation li a.bd:hover {
	background-color: var(--bd-light-color);
	border-color:  var(--bd-color);
}

#navigation li a.cd {
	background-color:  var(--cd-color);
}
#navigation li a.cd:hover {
	background-color: var(--cd-light-color);
	border-color:  var(--cd-color);
}

#navigation li a.greeting {
	background-color:  var(--greeting-color);
}
#navigation li a.greeting:hover {
	background-color: var(--greeting-light-color);
	border-color:  var(--greeting-color);
}

#navigation li a.present {
	background-color:  var(--present-color);
}
#navigation li a.present:hover {
	background-color: var(--present-light-color);
	border-color:  var(--present-color);
}

#navigation li a.onair {
	background-color:  var(--onair-color);
}
#navigation li a.onair:hover {
	background-color: var(--onair-light-color);
	border-color:  var(--onair-color);
}


#navigation li a:hover {
	background-color: #fff!important;
}

@-webkit-keyframes icon {
  0% {
    transform: scale(.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes icon {
  0% {
    transform: scale(.9);
  }
  100% {
    transform: scale(1);
  }
}

#navigation li a.new {
	position: relative;
}
@media (min-width:601px) {
	#navigation li a.new::before {
		position: absolute;
		content: url("../img/common/new.png");
		left: 10px;
		top: calc(50% - 10px);
		-webkit-animation: icon .6s ease-in 0s infinite alternate none running;
		animation: icon .6s ease-in 0s infinite alternate none running;
	}
}
@media (max-width:600px) {
	#navigation li a.new::before {
		position: absolute;
		content: url("../img/common/new.png");
		left: 5px;
		top: -10px;
		-webkit-animation: icon .6s ease-in 0s infinite alternate none running;
		animation: icon .6s ease-in 0s infinite alternate none running;
	}
}