/* creators and artists */

:root {
	--works-div-music-color: rgba(193,179,89,1);
	--works-div-mvpvvj-color: rgba(89,89,193,1);
	--works-div-game-color: rgba(191,90,119,1);
	--works-div-live-color: rgba(136,188,91,1);
}

.works-head-text {
	text-align: center;
	font-size: var(--html-font-subject-size);
}


.works-card {
	background-color: var(--body-background-color);
	cursor: pointer;
}

.music-chip {
	background-color: var(--works-div-music-color);
	padding-left: 0.5rem ;
	padding-right: 0.5rem ;
	border-radius: 1rem;
	font-size: 0.8rem;
	font-weight: bolder;
}

.mvpvvj-chip {
	background-color: var(--works-div-mvpvvj-color);
	padding-left: 0.5rem ;
	padding-right: 0.5rem ;
	border-radius: 1rem;
	font-size: 0.8rem;
	font-weight: bolder;
}

.game-chip {
	background-color: var(--works-div-game-color);
	padding-left: 0.5rem ;
	padding-right: 0.5rem ;
	border-radius: 1rem;
	font-size: 0.8rem;
	font-weight: bolder;
}

.live-chip {
	background-color: var(--works-div-live-color);
	padding-left: 0.5rem ;
	padding-right: 0.5rem ;
	border-radius: 1rem;
	font-size: 0.8rem;
	font-weight: bolder;
}

.works-card-title {
	font-style: normal;
	font-weight: normal;
	font-size: clamp(17px, 1vw,var(--html-font-subject-size));
}

.works_title {
	font-family: var(--html-font-family-title), sans-serif !important;
	font-size: var(--html-font-title-size);
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.kind-link {
	padding-bottom: 0;
	z-index: 10;
}

.year-link {
	margin-top: -3vh;
	z-index: 10;
}

.kind-link .nav-link,	.year-link  .nav-link{
	color:white;
}

@media (max-width: 767.98px) {
	.header_title {
		margin: 0 0 1rem;
	}
	.header_title h1{
		margin-top: 0;
	}

	.kind-link .nav-link{
		padding: .3rem .3rem;
	}

	.year-link {
		margin-top: 0;
	}

	.year-link  .nav-link{
		padding: .3rem .3rem;
	}
	#footer {
		margin-top:5rem;
	}
}


.kind-link li label, .year-link li label{
	/*背景色の基点とするためrelativeを指定*/
	position: relative;
}
.kind-link li label.current.kind_all, .kind-link li label::after{
	/*背景色の基点とするためrelativeを指定*/
	background: var(--hotarubi-corporate-color);
}
.year-link li label.current, .year-link li label::after{
	/*背景色の基点とするためrelativeを指定*/
	background:#0481A2;
}

.kind-link li label.current.kind_music,.kind-link li label.kind_music::after{
	background:var(--works-div-music-color);
}
.kind-link li label.current.kind_mvpvvj,.kind-link li label.kind_mvpvvj::after{
	background:var(--works-div-mvpvvj-color);
}
.kind-link li label.current.kind_game,.kind-link li label.kind_game::after{
	background:var(--works-div-game-color);
}
.kind-link li label.current.kind_live,.kind-link li label.kind_live::after{
	background:var(--works-div-live-color);
}

.kind-link li label::after, .year-link li label::after {
	content: '';
		/*絶対配置で線の位置を決める*/
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
		/*背景の形状*/
	width: 0;
	height:100%;
		/*アニメーションの指定*/
	transition:all .5s;
	opacity: 0;/*はじめは透過0*/
}



/*現在地とhoverの設定*/
.kind-link li.current label::after,
.kind-link li label:hover::after,
.year-link li.current label::after,
.year-link li label:hover::after {
	/*背景の形状*/
	width: 100%;/*横幅を伸ばす*/
	opacity: 1;/*不透明に*/
}

.kind-link li.current a,
.kind-link li a:hover{
    color: #fff;
}


#overlay{
  /*　要素を重ねた時の順番　*/
  z-index:1;

  /*　画面全体を覆う設定　*/
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);

  /*　画面の中央に要素を表示させる設定　*/
  display: flex;
  align-items: center;
  justify-content: center;

}

.work-modal-content {
	background-color: var(--body-background-color);
}

.v-enter-active, .v-leave-active {
  transition: all 500ms;
}

/* 表示アニメーション開始時 ・ 非表示アニメーション後 */
.v-enter, .v-leave-to {
  opacity: 0;
}

/* 表示アニメーション後のスタイル */
.v-enter-to {
  opacity: 1;
}

.nav-item label.nav-link {
	cursor: pointer;
}

.float-img {
	position:relative;
	top:0;
    /*アニメーションの設定*/
    transition: all .3s;
}

/*hoverをしたらボックスに影がつき、上に上がる*/
.float-img:hover {
	top:-3px;
	box-shadow: 0 2px 3px rgba(241, 235, 235, 0.8);
}

.bg-chip {
	background:#0481A2;
}