@charset "utf-8";
/* CSS Document */
/*480 600 960 1280*/
/*margin-bottom: 100px(PC)margin-bottom: 60px(SP)*/
/*========================================   リスト   ========================================*/
/*表示件数*/
.cast_count{
	text-align: center;
	margin: 0 auto 20px;
}
.cast_count span{
	font-weight: bolder;
	margin-right: 0.5rem;
}


/*絞込*/
.sort_cast{
	/*border: #EEEEEE solid 1px;
	background-color: #EEEEEE;
	padding: 2em;
	max-width: 800px;
	width: 90%;
	margin: 0 auto 50px;*/
}
.sort_cast p{
	margin-bottom: 1em;
	padding-bottom: 0.6em;
	border-bottom: #CCCCCC dotted 1px;
}
.sort_cast span{
	display: inline-block;
	width: 6em;
	margin-right: 1em;
	padding: 5px 0;
	text-align: center;
	background-color: #EEEEEE;
}
.sort_cast p label{
	padding-left: 2px;
	margin-right: 10px;
	display: inline-block;
	width: 6.8em;
	box-sizing: border-box;
	white-space: nowrap;
}
@media screen and (min-width : 960px) {/*960以上(タブレット/PC)*/
	.sort_cast p label{
		width: 7.4em;
	}
	.sort_cast p.cast_cup label{
		width: 4.62em;
	}
}
.sort_cast p label input{
	transform: scale(1.8);
	margin-right: 0.6em;
	margin-right: 10px;
}
@media screen and (min-width : 600px) {/*600以上(タブレット/PC)*/
	.sort_cast p{
		padding-left: 1em;
	}
}
@media screen and (min-width:0px) and ( max-width:959px) {/*960まで(SP/タブレット/PC)*/
	.sort_cast p label{
		margin-bottom: 10px;
	}
}
@media screen and (min-width:0px) and ( max-width:599px) {/*600まで(SP)*/
	.sort_cast span{
		display: block;
		width: 100%;
		margin-bottom: 5px;
	}
	.sort_cast p label{
		margin-right: 1em;
	}
	/*.sort_cast p label{
		width: 30%;
	}
	.sort_cast p.cast_cup label,.sort_cast p.cast_age label{
		width: 23%;
	}*/
}
@media screen and (min-width:0px) and ( max-width:479px) {/*480まで(SP)*/
	.sort_cast{
		font-size: 1.4rem;
	}
}

/*名前検索*/
.search_cast{
	background-color: #EEEEEE;

	text-align:center;
	display: inline-block;
	padding: 2em;
	max-width: 600px;
	width: 90%;
	box-sizing: border-box;
	margin: 0 auto 50px;
	display: flex;
	justify-content: center;
}
.search_cast span{
	margin-right: 4%;
	}
input[type="text"]{
	border: #CCCCCC solid 1px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	font-size: 1.6rem;
	padding:0.6rem 1rem;
	box-sizing:border-box;
}
input[type="text"]{
	max-width:300px;
	width:60%;
}
@media screen and (min-width:0px) and ( max-width:479px) {/*480まで(SP)*/
	.search_cast{
		padding: 1em;
	}
}


/*一覧*/
#id_castlist{
	max-width: 1280px;
	width: 90%;
	margin: 0 auto;
}
#id_castlist li{
	text-align: center;
	padding: 0 2%;
	box-sizing: border-box;
	margin-bottom: 20px;
}
#id_castlist{
	display: flex;
	flex-wrap: wrap;
}
#id_castlist li{
	width: 50%;
}
@media screen and (min-width : 480px) {/*480以上(タブレット/PC)*/
	.sp_br{
		display: none;
	}
}
@media screen and (min-width : 960px) {/*960以上(タブレット/PC)*/
	#id_castlist li{
		width: 33%;
	}
}
@media screen and (min-width : 1280px) {/*1280以上(タブレット/PC)*/
	#id_castlist li{
		width: 25%;
		margin-bottom: 30px;
	}
}
@media screen and (min-width:0px) and ( max-width:599.9px) {/*600まで(SP)*/
	#id_castlist{
		justify-content: space-between;
	}
}


/*キャスト背景*/
.cast_wrap{
	background-color:rgba(255,255,255,0.75);
	box-shadow: 2px 4px 10px rgb(0 0 0 / 0.3);
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	padding-bottom: 10px;
	/*padding-bottom: 50px;*/
}
/*サムネイル画像*/
.cast_photo{
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: rgba(238,238,238,0.75);
}
.cast_photo:before {
	content:"";
	display: block;
	padding-top: 133.4%; /* 高さを幅の75%(4:3)に固定 100%1:1()*/
}
.cast_photo div {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}
.cast_photo div img{
	vertical-align: middle;
}

/*プロフィール ==========*/
.cast_prof{
	line-height: 1.4;
	margin: 10px 0 ;
}
@media screen and (min-width : 768px) {/*768以上(タブレット/PC)*/
	.cast_prof span:nth-of-type(1){/*名前*/
		font-size: 1.8rem;
	}
}
@media screen and (min-width:0px) and ( max-width:767.9px) {/*768まで(SP/タブレット)*/
	.cast_prof{
		font-size: 1.4rem;
	}
	.cast_prof span:nth-of-type(1){/*名前*/
		font-size: 1.6rem;
	}
}


/*スケジュール ==========*/
.cast_schedule{
	position: relative;
}
/*出勤全体*/
.cast_schedule_status{
	padding-top: 15px;
	height:155px;
	box-sizing: border-box;
	margin-bottom: 10px;
}
.schedule_date{
	height: 2.0em;
	border-radius: 5px;
	padding-top: 4px;
	color: #FFFFFF;
	width: 90%;
	margin: 5px auto;
}
.schedule_date span{
	margin-right: 0.6em;
	display: inline-block;
}
.schedule_date span:first-letter{
	margin-right: 0.4em;
}
@media screen and (min-width:480px) and ( max-width:767.9px) {/*480から768まで(SP/タブレット)*/
	.schedule_date span{
		margin-right: 2%;
	}
}
/*当日出勤有り*/
.schedule_date_today{background-color:rgba(228,0,127,0.10);}
.schedule_date_today .schedule_date{background-color:rgba(228,0,127,0.50);}
/*次回出勤有り*/
.schedule_date_aftertomorrow{background-color:rgba(2,175,43,0.10);}
.schedule_date_aftertomorrow .schedule_date{background-color:rgba(2,175,43,0.50);}
/*次回未定*/
.cast_schedule_status_off{
	color: #CCCCCC;
	background-color:rgba(238,238,238,0.50);
	justify-content: center;
	display: flex;
	align-items: center;
}
.cast_schedule_status_info{/*案内状況*/
	height: 2.0em;
	font-weight: bolder;
	background-color: #FFFFFF;
	border-radius: 5px;
	padding-top: 4px;
	width: 90%;
	margin: 5px auto;
}
.cast_schedule_status_info i{
	margin-right: 0.2em;
}
/*WEBボタン ｰｰｰｰｰ*/
/*予定なしver.*/
.schedule_reserve_btn_bk{
	max-width: 180px;
	width: 84%;
	box-sizing: border-box;
	padding: 3px 10px;
	background-color: var(--basergba-color);
	box-shadow: 2px 4px 6px rgb(0 0 0 / 0.3);
	color: #FFFFFF;
	font-size: 1.4rem;
	letter-spacing: 0.14em;
	opacity: 0.1;
	margin: 0 auto 20px;
}
/*リンクボタン*/
.schedule_reserve_btn{
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
}
.schedule_reserve_btn a{
	display: inline-block;
	max-width: 180px;
	width: 84%;
	box-sizing: border-box;
	padding: 3px 10px;
	bbackground-color: var(--base-color);
	box-shadow: 2px 4px 6px rgb(0 0 0 / 0.3);
	color: #FFFFFF;
	font-size: 1.4rem;
	letter-spacing: 0.14em;
	/*font-size: 2.6rem;*/

	background: transparent;
	-webkit-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;

	-webkit-appearance: none;
	border-radius: 0;
	border: solid 2px #FFFFFF;    	/* 内側の線になる一本線の枠線をひく*/
	outline: solid 1px #333333;    /* 外側の線になる一本線の枠線をひく*/

}

.schedule_reserve_btn a:hover{
	background-color: var(--pointrgba-color);
 	background-position: 99% 50%;
}
.schedule_reserve_btn a{
	background: -webkit-linear-gradient(180deg, var(--basergba-color), var(--pointrgba-color), var(--basergba-color), var(--basergba-color));
	background: -webkit-linear-gradient(right, var(--basergba-color), var(--pointrgba-color), var(--basergba-color), var(--basergba-color));
	background: linear-gradient(270deg, var(--basergba-color), var(--pointrgba-color), var(--basergba-color), var(--basergba-color));
	background-position: 1% 50%;
	background-size: 300% 300%;
}

/*予約状況一覧へのリンク*/
.profilepage_link{
	padding-right: 15px;
	padding-bottom: 10px;
	font-size: 1.4rem;
	text-align: right;
	white-space: nowrap;
	vertical-align:middle;
}
.profilepage_link strong{
	margin-right: 0.2em;
}

/*お気に入り登録ボタン*/
.castlist_favorite_btn{
	margin: 10px auto 0;
}
@media screen and (min-width:0px) and ( max-width:479px) {/*480まで(SP)*/
	div.cast_schedule{
		font-size: 1.2rem;
	}
	.cast_schedule_status{
		height:132px;
	}
	.profilepage_link{
		font-size: 1.2rem;
		padding-bottom: 0px;
	}
	/*お気に入り登録ボタン*/
	span.c_favorite_btn_txt_small{
		padding-right: 2.2em;
	}
}