@charset "utf-8";
/* CSS Document */
/*480 768 960 1280*/
/*========================================   タブ   ========================================*/
/*タブ*/
#tab{
	max-width:1000px;
	width:94%;
	margin:0 auto 40px;
	display:flex;
	flex-wrap: wrap;/*768px未満は2段（5個×2）に折り返す*/
	row-gap: 6px;
}
#tab li{
	width : calc(100% / 10) ;/*SCHEDULE_SPAN（10日）ぶん*/
	text-align:center;
	padding: 0 5px;
	box-sizing: border-box;
}
#tab li a{
	padding: 8px 0;
	margin:0 auto;
	letter-spacing: 0.06em;
	display:block;
	background-color: var(--color-btn-bg);
	box-shadow: 2px 4px 6px var(--color-shadow-strong);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}
/*文字はゴールド地でも読める暗い色。白やゴールドの文字はゴールド地では読めないので使わない*/
#tab li a:link,#tab li a:visited{
	color: var(--color-btn-text);
}
#tab li a:hover{
	color: var(--color-btn-text);
	background-color: var(--color-btn-hover);
}
#tab li.present a{
	color: var(--color-btn-text);
	background-color: var(--color-btn-hover);
}
#tab li span{
	font-size: 1.4rem;
}
#tab li span small{
	font-size: 1.2rem;
}
/*人数：暗い地に明るいゴールドの文字*/
span.number_of_cast{
	background-color: rgba(var(--gray-900-rgb), 0.78);
	color: var(--brand-secondary);
	font-weight: normal;
	border-radius: 5px;
	padding: 0 3px;
}
@media screen and (min-width : 768px) {/*768以上(タブレット/PC)：10個を1行に。各タブは「日付（曜日）」＋「人数」の2行で統一*/
	#tab li{
		font-size: 1.4rem;
	}
	#tab li a{
		line-height: 1.4;
		letter-spacing: 0;/*幅が狭いので字間を詰める*/
	}
	#tab li span{
		font-size: 1.2rem;
	}
	#tab li span{
		display: inline;
	}
	#tab li span.number_of_cast{
		display: block;
		width: fit-content;
		margin: 3px auto 0;
		padding: 0 8px 2px;
	}
}
@media screen and (min-width:768px) and ( max-width:1099.9px) {/*768から1100まで：タブ幅が90px前後なので日付・曜日をさらに小さく*/
	#tab li{
		font-size: 1.3rem;
	}
	#tab li span{
		font-size: 1.1rem;
	}
}
@media screen and (min-width:0px) and ( max-width:767px) {/*768まで(SP)：2段×5個なので小さめに*/
	#tab li{
		font-size: 1.2rem;
	}
	#tab li span{
		font-size: 1.0rem;
	}
	#tab li span small{
		font-size: 1.0rem;
	}
}
@media screen and (min-width:0px) and ( max-width:767px) {/*768まで(SP/タブレット)：2段×5個*/
	#tab li{
		width: 20%;
		padding: 0 3px;
	}
	#tab li a{
		line-height: 1.3;
		padding: 5px 0;
	}
	#tab li span{
		display: block;
	}
	#tab li span.number_of_cast{
		display: inline-block;
		margin-top: 2px;
		padding: 0 6px 1px;
	}
}
@media screen and (min-width:0px) and ( max-width:479px) {/*480まで(SP/タブレット)*/
	#tab{
		width:96%;
	}
	#tab li{
		padding: 0 2px;
		font-size: 1.1rem;
	}
}


/*========================================   リスト   ========================================*/
/*キャスト1人分のレイアウトは castlist.css（.cast_list / .cast_wrap）を共用。
  ここには出勤表ページ固有の調整だけを書く。*/


/*出勤なし*/
.schedule_empty{
	width: 100%;
	text-align: center;
	height: 100px;
	line-height: 100px;
}
@media screen and (min-width : 600px) {/*600以上(タブレット/PC)*/
	.schedule_empty{
		height: 300px;
		line-height: 300px;
	}
}