:root {
	--base-color:#e40080;
	--base-light-color:rgba(228,0,128,.50);
	--about-color:#e40080;
	--about-light-color:rgba(228,0,128,.50);
	--story-color:#ff6d6d;
	--story-light-color:rgba(255,109,109,.5);
	--member-color:#fead00;
	--member-light-color:rgb(254,173,0,.5);
	--caststaff-color:#50dfbd;
	--caststaff-light-color:rgba(80,223,189,.5);
	--schedule-color:#fa73ff;
	--schedule-light-color:rgba(250,115,255,.5);
	--guide-color:#e40080;
	--guide-light-color:rgba(228,0,128,.50);
	--news-color:#ff791b;
	--news-light-color:rgba(255,121,27,.5);
	--music-color:#1ba6ff;
	--music-light-color:rgba(27,166,255,.5);
	--goods-color:#adcc00;
	--goods-light-color:rgba(173,204,0,.5);
	--marche-color:#2e8a16;
	--marche-light-color:rgba(46,138,22,.4);
	--movie-color:#c717fa;
	--movie-light-color:rgba(199,23,250,.5);
	--tw-color:rgb(29, 161, 242); /* twitter */
	--yt-color:rgb(255, 0, 0); /* Youtube */
	--insta-color:#297fff; /* intagram */
}

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

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

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

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

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

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

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

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

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

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

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

#navigation li a.list {
	background-color: #336699;
}
#navigation li a.list:hover {
	color: #336699;
	border-color: #336699;
}


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


#logo p {
	display: block;
	background-color: var(--base-color);
	color: #fff;
	font-weight: 600;
	padding: 7px 0;
	margin-top: 15px;
	text-align: center;
}