@charset "utf-8";
/* CSS Document */
/*480 600 960 1280*/
/*margin-bottom: 100px(PC)margin-bottom: 60px(SP)*/
/*========================================   リスト   ========================================*/
/*名前検索*/
.search_cast{
	background-color: var(--color-surface-muted);

	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: var(--color-border) 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;
	}
}


/*一覧*/
.cast_list{
	max-width: 1280px;
	width: 90%;
	margin: 0 auto;
}
.cast_list li{
	text-align: center;
	padding: 0 2%;
	box-sizing: border-box;
	margin-bottom: 20px;
}
@media screen and (min-width : 480px) {/*480以上(タブレット/PC)*/
	.cast_list{
		display: flex;
		flex-wrap: wrap;
	}
	.cast_list li{
		width: 50%;
	}
	.sp_br{
		display: none;
	}
}
@media screen and (min-width : 650px) {/*650以上(タブレット)：1行に3人*/
	.cast_list li{
		width: 33.333%;
	}
}
@media screen and (min-width : 1024px) {/*1024以上(PC)：1行に4人。カード間の余白は狭め*/
	.cast_list li{
		width: 25%;
		padding: 0 1%;
		margin-bottom: 20px;
	}
}
@media screen and (min-width : 1280px) {/*1280以上(PC)：1行に5人*/
	.cast_list li{
		width: 20%;
	}
}
@media screen and (min-width:0px) and ( max-width:599.9px) {/*600まで(SP)*/
	.cast_list{
		justify-content: space-between;
	}
}


/*キャスト背景*/
.cast_wrap{
	background-color:var(--color-surface);
	box-shadow: 2px 4px 10px var(--color-shadow-strong);
	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: var(--color-surface-muted);
}
.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:115px;
	box-sizing: border-box;
	margin-bottom: 10px;
}
.schedule_date{
	height: 2.0em;
	border-radius: 5px;
	padding-top: 4px;
	color: var(--color-text-inverse);
	width: 90%;
	margin: 5px auto;
	/*「要確認 12:00～19:00」が折り返さないよう、カード幅（cqw）に合わせて文字を縮める*/
	white-space: nowrap;
	overflow: hidden;
	font-size: clamp(1.2rem, 0.5rem + 1vw, 1.6rem);/*フォールバック*/
}
@supports (font-size: 1cqw) {
	.schedule_date{
		font-size: clamp(1.2rem, 7.5cqw, 1.6rem);
	}
}
.schedule_date span{
	margin-right: 0.6em;
	display: inline-block;
}
/*ステータス（要確認など）と時間の間隔は詰める*/
.schedule_date small{
	font-size: 0.85em;
	margin-right: 0.1em;
}
.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:var(--color-schedule-today-tint);}
.schedule_date_today .schedule_date{background-color:var(--color-schedule-today-badge);}
/*次回出勤有り*/
.schedule_date_aftertomorrow{background-color:var(--color-schedule-next-tint);}
.schedule_date_aftertomorrow .schedule_date{background-color:var(--color-schedule-next-badge);}
/*次回未定*/
.cast_schedule_status_off{
	color: var(--color-text-disabled);
	background-color:var(--color-surface-muted);
	justify-content: center;
	display: flex;
	align-items: center;
}
.cast_schedule_status_info{/*案内状況*/
	height: 2.0em;
	font-weight: bolder;
	background-color: var(--color-surface-solid);
	border-radius: 5px;
	padding-top: 4px;
	width: 90%;
	margin: 5px auto;
}
.cast_schedule_status_info i{
	margin-right: 0.2em;
}
.cast_schedule_status_available{/*○時〜ご案内可*/
	color: var(--color-emphasis);
}
.cast_schedule_status_closed{/*満員御礼*/
	color: var(--color-text-muted);
}
.profilepage_link strong{/*キャスト名*/
	color: var(--color-text-strong);
}
/*WEBボタン ｰｰｰｰｰ*/
/*予定なしver.*/
.schedule_reserve_btn_bk{
	max-width: 180px;
	width: 84%;
	box-sizing: border-box;
	padding: 3px 10px;
	background-color: var(--color-btn-bg);
	box-shadow: 2px 4px 6px var(--color-shadow-strong);
	color: var(--color-text-inverse);
	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;
	background-color: var(--color-btn-bg);
	box-shadow: 2px 4px 6px var(--color-shadow-strong);
	color: var(--color-btn-text);
	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 var(--color-surface-solid);    	/* 内側の線になる一本線の枠線をひく*/
	outline: solid 1px var(--color-btn-outline);    /* 外側の線になる一本線の枠線をひく*/

}

.schedule_reserve_btn a:hover{
	background-color: var(--color-btn-hover);
 	background-position: 99% 50%;
}
.schedule_reserve_btn a{
	background: -webkit-linear-gradient(180deg, var(--color-btn-bg), var(--color-btn-hover), var(--color-btn-bg), var(--color-btn-bg));
	background: -webkit-linear-gradient(right, var(--color-btn-bg), var(--color-btn-hover), var(--color-btn-bg), var(--color-btn-bg));
	background: linear-gradient(270deg, var(--color-btn-bg), var(--color-btn-hover), var(--color-btn-bg), var(--color-btn-bg));
	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;
}


/*一言紹介文 ==========*/
/*カード幅を基準に文字サイズを決める（コンテナクエリ単位 cqw）*/
.cast_wrap{
	container-type: inline-size;
}
.cast_bio{
	margin: 0 auto 8px;
	padding: 0 8px;
	box-sizing: border-box;
	width: 100%;
	color: #F4B9CB;/*お店専用項目のため直書き（薄いピンク）*/
	letter-spacing: 0.04em;
	line-height: 1.5;
	min-height: 1.5em;/*紹介文が空でも1行分の高さを確保*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	/*フォールバック（cqw非対応ブラウザ）：画面幅に応じて縮小*/
	font-size: clamp(1.0rem, 0.6rem + 0.8vw, 1.4rem);
}
@supports (font-size: 1cqw) {
	.cast_bio{
		font-size: clamp(1.0rem, 5.2cqw, 1.4rem);
	}
}


/*身長・スリーサイズ ==========*/
/*カード幅に合わせて文字を縮め、なるべく1行に収める（cqw はカード幅基準）*/
.cast_prof span:nth-of-type(2){
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: bottom;
	font-size: clamp(1.1rem, 0.5rem + 1vw, 1.6rem);/*フォールバック*/
}
@supports (font-size: 1cqw) {
	.cast_prof span:nth-of-type(2){
		font-size: clamp(1.1rem, 6.4cqw, 1.6rem);
	}
}
/*スマホ用の途中改行は使わない*/
.cast_prof .sp_br{
	display: none;
}


/*名前 ==========*/
/*「湖波(しおな)」のように読み仮名付きで長い名前が「…」にならないよう、カード幅に合わせて縮める（年齢ぶん 5em を残す）*/
.cast_prof span:nth-of-type(1){
	font-size: clamp(1.2rem, 0.6rem + 0.9vw, 1.8rem);/*フォールバック*/
}
@supports (font-size: 1cqw) {
	.cast_prof span:nth-of-type(1){
		font-size: clamp(1.2rem, 7.5cqw, 1.8rem);
	}
}


/*========================================   480px未満：写真を左、情報を右に（トップ・在籍一覧・出勤表。ランキングは除く）   ========================================*/
@media screen and (min-width:0px) and ( max-width:479px) {/*480まで(SP)*/
	.cast_list:not(.ranking_list) .cast_wrap{
		display: grid;
		grid-template-columns: 38% minmax(0, 1fr);
		grid-auto-rows: auto;
		column-gap: 10px;
		align-items: start;
		padding: 8px 8px 6px;
		box-sizing: border-box;
		text-align: left;
	}
	.cast_list:not(.ranking_list) .cast_photo{/*左：写真（右側の行をすべてまたぐ）*/
		grid-column: 1;
		grid-row: 1 / span 6;
	}
	.cast_list:not(.ranking_list) .cast_prof,
	.cast_list:not(.ranking_list) .cast_bio,
	.cast_list:not(.ranking_list) .cast_schedule,
	.cast_list:not(.ranking_list) .profilepage_link,
	.cast_list:not(.ranking_list) .castlist_favorite_btn{
		grid-column: 2;
	}
	.cast_list:not(.ranking_list) .cast_prof{
		margin: 0 0 4px;
	}
	.cast_list:not(.ranking_list) .cast_prof span:nth-of-type(1){/*名前：右列の幅に合わせて（カード幅基準の cqw は使わない）。年齢「（47）」ぶんは 3.6em で足りる*/
		font-size: 1.4rem;
		max-width: calc(100% - 3.6em);
	}
	.cast_list:not(.ranking_list) .cast_prof span:nth-of-type(2){/*身長・スリーサイズ：右列の幅に合わせて小さめ（1行に収める）*/
		font-size: 1.2rem;
	}
	.cast_list:not(.ranking_list) .cast_bio{/*右列は幅が狭いので、小さめの文字で2行まで折り返す（3行目以降は…）*/
		padding: 0;
		margin-bottom: 6px;
		text-align: left;
		font-size: 1.2rem;
		line-height: 1.4;
		min-height: 2.8em;
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	/*出勤：高さ固定をやめて内容ぶんに。帯は右列いっぱい・小さめ*/
	.cast_list:not(.ranking_list) .cast_schedule_status{
		height: auto;
		padding: 4px 4px;
		margin-bottom: 4px;
		text-align: center;
		font-size: 1.2rem;
	}
	.cast_list:not(.ranking_list) .schedule_date,
	.cast_list:not(.ranking_list) .cast_schedule_status_info{
		width: 100%;
		height: auto;/*高さ固定をやめ、文字が見た目で中央に来る余白にする*/
		padding: 6px 0 4px;
		margin: 2px auto;
		line-height: 1.3;
	}
	.cast_list:not(.ranking_list) .schedule_date span{
		margin-right: 0.4em;
	}
	.cast_list:not(.ranking_list) .cast_schedule_status_off{
		min-height: 3.2em;
	}
	.cast_list:not(.ranking_list) .profilepage_link{/*一番上の名前より目立たないよう小さく・太字なし*/
		padding: 0;
		margin-top: 2px;
		font-size: 1.2rem;
	}
	.cast_list:not(.ranking_list) .profilepage_link strong{
		font-weight: normal;
	}
	.cast_list:not(.ranking_list) .castlist_favorite_btn{
		margin: 6px 0 0;
		text-align: right;
	}
}
@media screen and (min-width:0px) and ( max-width:359px) {/*360px未満の小さいスマホ：長い名前（読み仮名付き）が切れないよう名前をさらに小さく*/
	.cast_list:not(.ranking_list) .cast_prof span:nth-of-type(1){
		font-size: 1.2rem;
	}
}