@charset "utf-8";

/*==========================================================
	リアルタイム一覧 (大枠)
==========================================================*/
.contents_realtime{
	width: 100%;
	margin: 0px auto;
}
/*==========================================================
	リアルタイム一覧 (枠)
==========================================================*/
.realtime_box{
	position: relative;
}
/*==========================================================
	更新時間
==========================================================*/
.update_time{
	width: 200px; height: 160px;
	margin: 0px auto;
	padding: 60px 0px;
}
.update_time h3{
	float: left;
	line-height: 1.4em;
	font-size: 14px;
	font-weight: 400;
}
.update_time h3 span{
	font-family: 'Futura';
}
.update_time p{
	float: right;
	margin: 10px auto 0px auto;
	font-size: 34px;
	font-weight: 600;
	font-family: 'Futura';
}
/*==========================================================
	状態テキスト
==========================================================*/
.realtime_box h4{
	width: 100%; height: 60px;
	margin: 0px auto;
	line-height: 64px;
	text-align: left;
	letter-spacing: 0.1em;
	color: #FFFFFF;
	font-size: 24px;
	background-color: #000000;
}
.realtime_box h4 > span{
	display: block;
	width: 1280px; height: 60px;
	min-width: 960px;
	margin: 0px auto;
}
/*現在受付中*/
.state_1 > span > span{
	display: inline-block;
	width: 24px; height: 24px;
	margin: 0px 10px 5px 0px;
	vertical-align: middle;
	border: solid 4px #FF1E26;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}
/*残りわずか*/
.state_2 > span > span{
	display: inline-block;
	width: 24px; height: 24px;
	margin: 0px 10px 5px 0px;
	vertical-align: middle;
	border: solid 4px #70BD45;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}
/*残り１枠、お電話にてお問い合わせ下さい*/
.state_3 > span > span{
	display: inline-block;
	width: 24px; height: 24px;
	margin: 0px 10px 5px 0px;
	vertical-align: middle;
	border: solid 4px #6666CC;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}
/*キャンセル待ち*/
.state_4 > span > span{
	display: inline-block;
	width: 24px; height: 24px;
	margin: 0px 10px 5px 0px;
	vertical-align: middle;
	border: solid 4px #0000FF;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}
/*予約受付中*/
.state_5 > span > span{
	display: inline-block;
	width: 24px; height: 24px;
	margin: 0px 10px 5px 0px;
	vertical-align: middle;
	border: solid 4px #808080;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}
/*受け付け終了、次回のご予約受付致します*/
.state_6 > span > span{
	display: inline-block;
	width: 24px; height: 24px;
	margin: 0px 10px 5px 0px;
	vertical-align: middle;
	border: solid 4px #FFFFFF;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}
/*==========================================================
	女の子一覧
==========================================================*/
.realtime_list_1,
.realtime_list_2,
.realtime_list_3,
.realtime_list_4,
.realtime_list_5,
.realtime_list_6{
	position: relative;
	width: 100%;
	margin: 0px auto;
}
.list_box{
	float: left;
	position: relative;
	width: 250px;
	margin: 20px 0px;
	background-color: #FAFAFA;
}


.list_thumb_box{
	position: relative;
	width: 100%;
}
.list_thumb_box::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.list_thumb_box::after{
	content: "";
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	text-transform: uppercase;
	line-height: 1.2em;
	padding: 4px 0 2px 0;
	letter-spacing: 0.1em;
	font-size: 16px;
	font-weight: 600;
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo, Osaka','ＭＳ Ｐゴシック','MS PGothic', sans-serif;
	color: #FFFFFF;
	text-align: center;
	width: calc(100% - 16px);
}
/*極写真枠*/
.list_thumb_box.kiwami::before{
	background: url(../img/girls/rank/frame_kiwami_sp.webp) no-repeat center center /cover;
}
.list_thumb_box.kiwami::after{
	content: "極";
	color: #141414;
	font-size: 18px;
	background-color: #C1A530;
}
/*★★★★★写真枠*/
.list_thumb_box.star5::before{
	background: url(../img/girls/rank/frame_star5_sp.webp) no-repeat center center /cover;
}
.list_thumb_box.star5::after{
	content: "五つ星";
	background-color: #CC1A32;
}
/*★★★★写真枠*/
.list_thumb_box.star4::before{
	background: url(../img/girls/rank/frame_star4_sp.webp) no-repeat center center /cover;
}
.list_thumb_box.star4::after{
	content: "四つ星";
	background-color: #3324CC;
}
/*★★★写真枠*/
.list_thumb_box.star3::before{
	background: url(../img/girls/rank/frame_star3_sp.webp) no-repeat center center /cover;
}
.list_thumb_box.star3::after{
	content: "三つ星";
	background-color: #329899;
}
/*★★写真枠*/
.list_thumb_box.star2::before{
	background: url(../img/girls/rank/frame_star2_sp.webp) no-repeat center center /cover;
}
.list_thumb_box.star2::after{
	content: "二つ星";
	background-color: #9728CB;
}
/*★写真枠*/
.list_thumb_box.star1::before{
	background: url(../img/girls/rank/frame_star1_sp.webp) no-repeat center center /cover;
}
.list_thumb_box.star1::after{
	content: "一つ星";
	background-color: #651166;
}

.list_thumb{
	width: 100%;
}
/*==========================================================
	リアルタイムステータス
==========================================================*/
.list_state{
	position: absolute;
	top: 265px; left: 0px; right: 0px;

	/*2021/2/1 女の子☆設定 OFFする ↓ ☆設定無しver デフォルトトップ*/
	top: 230px;

	width: 200px; height: 40px;
	margin: 0px auto;
	line-height: 44px;
	letter-spacing: 0.1em;
	text-align: center;
	color: #FFFFFF;
	font-size: 14px;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}
.list_state ul{
	width: 100%;
}
.list_state ul li{
	float: left;
	width: 200px; height: 40px;
	margin: 0px 0px 0px 10px;
	line-height: 44px;
}
/*現在受付中*/
.realtime_list_1 .list_state{
	background-color: #FF1E26;
}
/*残りわずか*/
.realtime_list_2 .list_state{
	background-color: #70BD45;
}
/*残り１枠、お電話にてお問い合わせ下さい*/
.realtime_list_3 .list_state{
	background-color: #6666CC;
}
/*キャンセル待ち*/
.realtime_list_4 .list_state{
	background-color: #0000FF;
}
/*予約受付中*/
.realtime_list_5 .list_state{
	background-color: #808080;
}
/*受け付け終了、次回のご予約受付致します*/
.realtime_list_6 .list_state{
	background-color: #000000;
}
/*==========================================================
	出勤時間
==========================================================*/
.list_atttime{
	width: 100%; height: 30px;
	margin: 0px auto;
	line-height: 40px;
	font-size: 16px;
	font-family: 'Futura';
}
.list_atttime span{
	display: none;
}
/*現在受付中*/
.realtime_list_1 .list_atttime{
	color:  #FF1E26;
}
/*残りわずか*/
.state_2 > .list_atttime{
	display: inline-block;
	width: 24px; height: 24px;
	margin: 0px 10px 5px 0px;
	vertical-align: middle;
	border: solid 4px #70BD45;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}
/*残り１枠、お電話にてお問い合わせ下さい*/
.state_3 > .list_atttime{
	display: inline-block;
	width: 24px; height: 24px;
	margin: 0px 10px 5px 0px;
	vertical-align: middle;
	border: solid 4px #6666CC;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}
/*キャンセル待ち*/
.realtime_list_4 .list_atttime{
	color:  #0000FF;
}
/*予約受付中*/
.realtime_list_5 .list_atttime{
	color: #808080;
}
/*受け付け終了、次回のご予約受付致します*/
.realtime_list_6 .list_atttime{
	color: #000000;
}
/*プロフィール*/
.list_profile{
	width: 100%;
	margin: 0px auto;
	padding: 20px 0px 10px 0px;
	text-align: center;
	color: #000000;
}
.list_name{
	width: 100%; height: 40px;
	line-height: 44px;
	letter-spacing: 0.1em;
	font-size: 20px;
	font-weight: 600;
}
.list_rome{
	width: 100%; height: 30px;
	line-height: 30px;
	font-size: 18px;
	font-family: 'Futura';
}
.list_age{
	width: 100%; height: 20px;
	line-height: 20px;
	font-size: 16px;
	font-family: 'Futura';
}
/*年齢：〇代前半 or 後半表示*/
.list_age span.age_about_box span{
	display: inline-block;
	height: auto;
	margin: 0px 0px 0px 1px;
	vertical-align: baseline;
	font-size: 12px;
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Meiryo, Osaka','ＭＳ Ｐゴシック','MS PGothic', sans-serif;
}
.list_size{
	width: 100%; height: 20px;
	line-height: 20px;
	font-size: 16px;
	font-family: 'Futura';
}
.list_com{
	width: 100%; height: 80px;
	margin: 0px auto;
	padding: 0px 10px;
	line-height: 1.4em;
	text-align: left;
	font-size: 12px;
	overflow: auto;
}
/*==========================================================
	受け付け終了
==========================================================*/
.not_realtime{
	width: 100%; height: 30px;
	margin: 0px auto 200px auto;
	line-height: 40px;
	letter-spacing: 0.1em;
	font-size: 18px;
}