@charset 'utf-8';

/*------------------------------------------------------------------------------
 girlItem
 ------------------------------------------------------------------------------*/
.girlItem {
	position: relative;
	display: block;
	text-decoration: none;
	color: #333;
}
.girlItem a {
	text-decoration: none;
}

/*
 body
------------------------------------------------------------------------------*/
.girlItem .body {
	position: relative;
	display: flex;
	gap: 10px;
	padding: 8px;
	background: linear-gradient(#FFF 50%, #F2F2F2);
	border-bottom: 1px solid #E1E1E1;
}
.xp .girlItem .body {
	border: 0;
}
.girlItem._taikoban .body {
	padding-top: 5px;
}
.girlItem._topBorder .body {
	border-top: 1px solid #E1E1E1;
}

/*
 photo
------------------------------------------------------------------------------*/
.girlItem .photo {
	flex: 0 0 24%;
}
.girlItem .photoWrap {
	overflow: hidden;
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-top: 150%;
}
.girlItem .photoWrap img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* gsRibbon
------------------------------------------------------------------------------*/
.girlItem .photoWrap .gsRibbon {
	z-index: 2;
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	display: none;
	width: 100%;
	height: 14px;
	line-height: 14px;
	font-size: 11px;
	font-weight: normal;
	color: #FFF;
	background: #EA4395;
	transform: rotate(-45deg) translate(-30%, -100%);
}
@media screen and (max-width: 320px) {
	.girlItem .photoWrap .gsRibbon {
		height: 13px;
		line-height: 13px;
		font-size: 10px;
		letter-spacing: -1px;
		transform: rotate(-45deg) translate(-28%, -82%);
	}
}
.girlItem .photoWrap .gsRibbon_Newface {
	display: block;
	background: #EE1C25;
}
.girlItem .photoWrap .gsRibbon_Taiken {
	display: block;
	background: #07B57B;
}

/* gsTaikoban
------------------------------------------------------------------------------*/
.girlItem .photoWrap .gsTaikoban {
	z-index: 2;
	position: absolute;
	right: 1px;
	bottom: 1px;
	overflow: hidden;
	display: block;
	width: 30%;
}
.girlItem .photoWrap .gsWorking + .gsTaikoban {
	bottom: 15px;
}
.girlItem .photoWrap .gsTaikoban span {
	display: block;
	padding-top: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

/*
 video
------------------------------------------------------------------------------*/
.girlItem .video {
	flex: 0 0 30%;
}
.girlItem .videoWrap,
.girlItem .pmWrap {
	overflow: hidden;
	position: relative;
	display: block;
	width: 100%;
	padding-top: 100%; /* 1:1 */
	background: #000;
}
.girlItem .videoWrap img,
.girlItem .pmWrap img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.girlItem .videoWrap:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: url(/common/image/misc/movie-play.png) no-repeat 50% 50%;
	background-size: 48%;
}

/*
 datas
------------------------------------------------------------------------------*/
.girlItem .datas {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: 8px;
}
@media screen and (max-width: 480px) {
	.girlItem .datas {
		justify-content: space-between;
		gap: 5px;
	}
}
.girlItem .datas:before {
	position: absolute;
	top: 50%;
	right: 10px;
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-style: solid solid none none;
	border-width: 2px;
	border-color: #999;
	transform: rotate(45deg);
}

/* nameHeader */
.girlItem .nameHeader {
	display: flex;
	align-items: center;
	gap: 3px;
}
.girlItem .nameHeader .name {
	white-space: nowrap;
	font-size: 116%;
	font-weight: bold;
}
.girlItem .nameHeader .age {
	white-space: nowrap;
}
.girlItem .nameHeader .icons {
	min-width: 0;
	margin-left: 5px;
}
.girlItem .nameHeader img.girlIcon {
	height: 20px;
}
.girlItem .nameHeader .comp {
	margin-left: auto;
	white-space: nowrap;
	display: flex;
	align-items: center;
}

/* p */
.girlItem .size,
.girlItem .type {
	padding-right: 10px;
}
.girlItem .shop {
	font-size: 15px;
}
.girlItem .shop + .shop2 {
	margin-top: -3px;
}

/*
 本日の出勤
------------------------------------------------------------------------------*/
.girlItem .today span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px;
	background: #DDD;
}
.girlItem .today.bg1 span { background: #F8E2E7; }
.girlItem .today.bg2 span { background: #FAE5C3; }
.girlItem .today small {
	font-size: 92%;
}
.girlItem .today .working {
	color: rgb(255,34,106);
}
.girlItem .today .shift {
	font-size: 108%;
	font-weight: normal;
	color: #E34203;
}
.girlItem .today .off {
	font-weight: normal;
}
.girlItem .today .mitei {
	font-weight: normal;
}

/*
 ランキング
------------------------------------------------------------------------------*/
.girlItem.ranking .body {
	background: transparent;
}
.girlItem.ranking .datas:before {
	display: none;
}
.girlItem.ranking .rank {
	position: absolute;
	top: 50%;
	right: 7px;
	transform: translate(0, -50%);
	display: inline-grid;
	place-items: center;
	min-width: 80px;
	height: 74px;
	margin-top: 3px;
	font-family: Arial;
	font-size: 80px;
	color: #FFF;
	background: rgba(255,204,0,0.1);
	white-space: nowrap;
}
.girlItem.ranking .rank-1 {
	text-indent: -9999px;
	background-color: transparent;
	background-image: url(/sp/images/list/oukan.png);
	background-repeat: no-repeat;
	background-size: auto 100%;
}

/* つぶやき
------------------------------------------------------------------------------*/
.tweetBoxWrap {
	overflow: hidden;
	margin: 8px 8px -5px;
	padding: 0 0 6px;
}
.tweetBox {
	position: relative;
	width: 100%;
	height: 40px;
	background: rgba(255,34,106,0.8);
	color: #FFF;
	border-radius: 5px;
}
.tweetBox:after {
	z-index: 1;
	position: absolute;
	bottom: -6px;
	left: calc(12% - 5px); /* ※ */
	content: '';
	display: block;
	width: 0;
	border: 6px solid transparent;
	border-top-color: rgba(255,34,106,0.8);
	border-bottom-width: 0;
}
.tweetBox ._mssg {
	display: block;
	line-height: 1.2;
	padding: 4px 5px;
}
.tweetBox ._date {
	position: absolute;
	bottom: 3px;
	right: 5px;
	font-size: 84%;
}

/*------------------------------------------------------------------------------
 infoBox
 ------------------------------------------------------------------------------*/
.infoBox {
	padding: 10px 10px 15px;
	background: #FFEEF4;
	border-bottom: 3px solid #999;
}
.xp .infoBox {
	position: relative;
}
.xp .infoBox:before {
	position: absolute;
	top: 0;
	left: 8px;
	content: '';
	display: block;
	width: calc(100% - 16px);
	height: 1px;
	border-top: 1px dotted #AAA;
}

/* more */
.infoBox .more {
	display: flex;
	align-items: center;
	margin: 10px 0 0;
}
.infoBox .more dt {
	font-size: 92%;
}
.infoBox .more dd {
	margin-left: auto;
}

/* オプション用メッセージ
------------------------------------------------------------------------------*/
.optionMssg dt {
	display: flex;
	align-items: center;
	height: 20px;
	padding-left: 25px;
	font-size: 92%;
	font-weight: bold;
	color: #FF0202;
	background-image: url(/sp/images/list/snap-red.png);
	background-repeat: no-repeat;
	background-position: left 50%;
	background-size: contain;
}
.optionMssg dd.mssg {
	line-height: 1.4;
	margin: 5px 0 0;
}
.optionMssg dd.foot {
	text-align: right;
	margin: 10px 0 0;
	font-size: 84%;
}

/* foldingMssg
------------------------------------------------------------------------------*/
.foldingMssg {
	overflow: hidden;
}
.foldingMssg ._body {
	position: relative;
	max-height: 95px; /* 行高x行数 */
}
.foldingMssg ._mssg {
	line-height: 19px !important;
	font-size: 14px;
	overflow-wrap: break-word;
}
.foldingMssg ._btn {
	position: absolute;
	top: 76px; /* 全体高-1行 */
	right: 0;
	display: inline-block;
	padding-left: 50px;
	line-height: 19px !important;
	font-size: 13px;
	background: #FFF;
	background: linear-gradient(to right, rgba(255,238,244,0) 0, rgba(255,238,244,0.5) 5px, rgba(255,238,244,1) 35px);
}
.foldingMssg ._btn:active {
	opacity: 1.0 !important;
}
.foldingMssg ._mssg:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
}
.foldingMssg ._body.opened {
	max-height: 100%;
}
.foldingMssg ._body.opened ._btn {
	display: none;
}

/* 待機ガール
------------------------------------------------------------------------------*/
.waitingInfos dt {
	font-size: 92%;
	font-weight: bold;
	color: #FF0202;
}
.waitingInfos dd {
	line-height: 1.3;
	margin: 5px 5px 10px;
}
.waitingInfos dd:nth-of-type(3) {
	margin: 5px 5px 0px;
}

/* 100の質問
------------------------------------------------------------------------------*/
.infoBox .qaQue,
.infoBox .qaAns {
	display: flex;
	gap: 5px;
}
.infoBox .qaQue span,
.infoBox .qaAns span {
	line-height: 1.4;
	white-space: nowrap;
}
.infoBox .qaQue p,
.infoBox .qaAns p {
	flex: 1;
	min-width: 0;
	line-height: 1.4;
}
.infoBox .qaQue {
	font-weight: bold;
	color: #36C;
}
.infoBox .qaAns {
	margin: 8px 0 0;
	color: #DF0F88;
}

/* 注目の写メ日記
------------------------------------------------------------------------------*/
.infoBox .diaryBox {
	display: flex;
}
.infoBox .diaryBoxL {
	width: 24%;
	position: relative;
}
.infoBox .diaryBoxR {
	flex: 1;
	min-width: 0;
	margin-left: 10px;
	display: flex;
	flex-direction: column;
}

/* image */
.infoBox .diaryBox .image {
	overflow: hidden;
	position: relative;
	display: block;
	width: 100%;
	padding-top: 125%;
}
.infoBox .diaryBox .image img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 写メリボン */
.infoBox .diaryBox ._ribbon {
	position: absolute;
	left: -5px;
	top: -5px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 11px;
	font-weight: normal;
	color: #FFF;
	background: #39C3D4;
	background: #F00;
	border-radius: 100%;
}

/* subject */
.infoBox .diaryBox .subject {
	line-height: 1.2;
	font-weight: bold;
	color: deeppink;
}
.infoBox .diaryBox .content {
	line-height: 1.4;
	margin: 5px 0 10px;

	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.infoBox .diaryBox .foot {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
}
.infoBox .diaryBox .foot .date {
	font-size: 12px;
}
.infoBox .diaryBox .foot .link {
	text-align: right;
}

/* 写メ日記デビュー
------------------------------------------------------------------------------*/
.infoBox .diarySubject {
	display: flex;
	align-items: center;
	gap: 10px;
}
.infoBox .diarySubject dt {
	flex: 1;
	min-width: 0;
	padding-left: 22px;
	font-weight: bold;
	color: deeppink;
	background-image: url(/sp/images/list/diary-blue.png);
	background-repeat: no-repeat;
	background-position: left 50%;
	background-size: contain;
}
.infoBox .diarySubject dd {
	margin-left: auto;
	font-size: 12px;
}
.infoBox .diaryContent {
	line-height: 1.4;
	margin: 8px 0 0;
	color: #36C;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* わくわくメール
------------------------------------------------------------------------------*/
.infoBox .wakuMssg {
	line-height: 1.4;
	padding-left: 30px;
	font-size: 108%;
	font-weight: bold;
	color: #DF0F88;
	background-image: url(/sp/images/list/wmail.png);
	background-repeat: no-repeat;
	background-position: left 2px;
	background-size: auto 17px;
}

/* 次回出勤
------------------------------------------------------------------------------*/
.infoBox .nextShift small {
	font-size: 1em;
}
.infoBox .nextShift .next {
	color: #333;
}
.infoBox .nextShift .next strong {
	font-weight: normal;
	color: #DF0F88;
}
.infoBox .nextShift .mitei {
	color: #999;
}

/* コスプレ
------------------------------------------------------------------------------*/
.infoBox .cosplayInfo {
	display: flex;
	gap: 10px;
}
.infoBox .cosplayInfo .image {
	flex: 0 0 24%;
}
.infoBox .cosplayInfo .image .holder {
	overflow: hidden;
	position: relative;
	display: block;
	width: 100%;
	padding-top: 120%;
}
.infoBox .cosplayInfo .image .holder img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.infoBox .cosplayInfo .datas {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.infoBox .cosplayInfo .datas .title {
	font-weight: bold;
	color: red;
}
.infoBox .cosplayInfo .datas .mssg {
	line-height: 1.2;
}
.infoBox .cosplayInfo .datas .link {
	margin-top: auto;
	text-align: right;
}

/*------------------------------------------------------------------------------
 taikoban
 ------------------------------------------------------------------------------*/
.taikoban {
	display: grid;
	place-items: center left;
	height: 23px;
	margin: 8px 8px 0;
	color: #FFF;
	font-weight: normal;
	background: #D80100;
}
.taikoban_1 { background: #1D2088; }
.taikoban_2 { background: #D80100; }
.taikoban_3 { background: #FF00FF; }
.taikoban_4 { background: #07B57B; }
.taikoban_5 { background: #000000; }

/*------------------------------------------------------------------------------
 PC
 ------------------------------------------------------------------------------*/
.girlList._PC .sn { color: darkblue !important; }
.girlList._PC .gn { color: crimson !important; }
.girlList._PC .pr { color: #DF0F88 !important; }

.girlList._PC {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
}
.girlList._PC .girlItemWrap {
	flex: 0 0 calc((100% - 10px) / 2);
	min-width: 0;
	border: 1px solid #DDD;
	border-radius: 3px;
}
.girlList._PC .girlItem {
	background: #F7F7F7;
}
.girlList._PC .girlItem:hover {
	color: inherit;
	opacity: 0.8;
}
.girlList._PC .body {
	background: none;
}
.girlList._PC .girlItemWrap:not(.xp) .body {
	border-bottom: 0;
	border-radius: 3px;
}
.girlList._PC .girlItemWrap.xp .girlItem {
	border-radius: 3px;
}
.girlList._PC .girlItemWrap.xp .infoBox {
	padding: 12px;
	border-bottom: 0;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

/* つぶやきは非表示 */
.girlList._PC .tweetBoxWrap {
	display: none;
}