/*------------------------------------------------------------------------------
 gpBox
 ------------------------------------------------------------------------------*/
.gpList {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.gpBox {
	flex: 0 0 calc((100% - 14px) / 3);
	min-width: 0;
	min-height: 222px;	/* 148px 2:3 */
	display: flex;
	flex-direction: column;
}

/* work
------------------------------------------------------------------------------*/
.gpBox .work {
	display: grid;
	place-items: center;
	height: 25px;
	font-weight: bold;
	color: #FFF;
	border-radius: 2px 2px 0 0;
}
.gpBox .work.bg_1 { background: #66CC00; }
.gpBox .work.bg_2 { background: #0099FF; }
.gpBox .work.bg_3 { background: #FFCC00; }
.gpBox .work.bg_4 { background: #FF66FF; }

/* entdate */
.gpBox .entdate {
	display: grid;
	place-items: center;
	height: 25px;
	font-weight: bold;
	color: #FFF;
	background: #048;
	border-radius: 2px 2px 0 0;
}

/* pmTitle */
.gpBox .pmTitle {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 25px;
	padding: 0 5px;
	font-weight: bold;
	color: #FFF;
	background: #F70074;
	border-radius: 2px 2px 0 0;
}

/* photo
------------------------------------------------------------------------------*/
.gpBox .photo {
	;
}

/* video
------------------------------------------------------------------------------*/
.gpBox .video {
	;
}

/* gpVideoHolder */
/* gpPmHolder */
.gpVideoHolder,
.gpPmHolder {
	overflow: hidden;
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
}
.gpVideoHolder:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: url(/common/image/misc/movie-play.png) no-repeat center / 32%;
	opacity: 0.7;
}
.gpVideoHolder img,
.gpPmHolder img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gpVideoHolder:hover picture img,
.gpPmHolder:hover picture img {
	opacity: 0.8;
}

/* data
------------------------------------------------------------------------------*/
.gpBox .data {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	background: #EEE8;
	border: 1px solid #DDD;
	border-top: 0;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}
.gpBox .girl {
	display: flex;
	align-items: center;
	gap: 5px;
}
.gpBox .girl .name {
	font-size: 116%;
	font-weight: bold;
}
.gpBox .girl .name:not(:hover) {
	color: deeppink;
}
.gpBox .pr {
	color: #AF0000;
}
.gpBox .type {
	line-height: 1.2;
	font-size: 92%;
	color: #CC0099;
}
.gpBox .shop .name {
	font-size: 108%;
}

/*------------------------------------------------------------------------------
 gpPhotoHolder
 ------------------------------------------------------------------------------*/
.gpPhotoHolder {
	overflow: hidden;
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-top: 150%;
}
.gpPhotoHolder:hover {
	opacity: 0.8;
}
.gpPhotoHolder img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* gpPhotoInfo
------------------------------------------------------------------------------*/
.gpPhotoInfo {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column-reverse;
	width: 100%;
	height: 100%;
}

/* gpWorking
------------------------------------------------------------------------------*/
.gpWorking {
	display: grid;
	place-items: center;
	height: 25px;
	color: #333;
	background: #CCC;
	opacity: 0.8;
	white-space: nowrap;
	overflow: hidden;
}
.gpWorking-1 {
	color: #FFF;
	background: #00A0E7;
}
.gpWorking-2 {
	color: #FFF;
	background: #33BBBE;
}
.gpWorking-w {
	color: #FFF;
	background: #FF2733;
}
.gpWorking-s {
	color: #FFF;
	background: #FF8833;
}

/* gpTweet
------------------------------------------------------------------------------*/
.gpTweetWrap {
	flex: 1;
	min-height: 0;
	margin-top: auto;
	display: flex;
	flex-direction: column;
}
.gpTweet {
	position: relative;
	text-align: left;
	display: block;
	margin: 3px;
	margin-top: auto;
	padding: 5px;
	background: #FF226ACC;
	color: #FFF;
	border-radius: 8px;
}
.gpTweet:after {
	position: absolute;
	top: -6px;
	left: 10px;
	content: '';
	display: block;
	width: 0;
	border: 6px solid transparent;
	border-bottom-color: #FF226ACC;
	border-top-width: 0;
}
.gpTweet .mssg {
	display: block;
	line-height: 1.4;
	font-size: 92%;
}
.gpTweet .date {
	text-align: right;
	display: block;
	margin-top: 5px;
	font-size: 84%;
	color: #EEE;
}

/* gpTaikoban
------------------------------------------------------------------------------*/
.gpTaikoban {
	margin-top: auto;
	display: flex;
	justify-content: flex-end;
}
.gpTaikoban .wrap {
	display: block;
	width: 24%;
	margin: 3px;
}
.gpTaikoban .maru {
	display: block;
	padding-top: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

/* gpRibbon
------------------------------------------------------------------------------*/
.gpRibbon {
	position: absolute;
	left: -40px;
	top: 10px;
	display: grid;
	place-items: center;
	width: 120px;
	height: 22px;
	color: #FFF;
	background: #EA4395;
	transform: rotate(-45deg);
}
.gpRibbon._newface {
	background: #EE1C25;
}
.gpRibbon._taiken {
	background: #07B57B;
}





/*------------------------------------------------------------------------------
 gpIcons
 ------------------------------------------------------------------------------*/
.gpIcons {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin-top: 1px;
}
.gpIcons > * {
	flex: 0 0 calc((100% - 3px) / 4);
	display: grid;
	place-items: center;
	width: 58px;
	height: 20px;
	font-size: 92%;
	white-space: nowrap;
	overflow: hidden;
}
.gpIcons._small > * {
	width: auto;
	font-size: 84%;
}
.gpIcons span {
	display: none;
	color: #777;
	background: #CCC;
}
.gpIcons._full span {
	display: grid;
}
.gpIcons a {
	color: #FFF;
	text-decoration: none;
}
.gpIcons .green   { background: #38b483; }
.gpIcons .green2  { background: #83d160; }
.gpIcons .blue    { background: #17c5ed; }
.gpIcons .purple  { background: #dda0f6; }
.gpIcons .pink    { background: #ff7b8a; }
.gpIcons .pink2   { background: #ff8ba3; }
.gpIcons .orange  { background: #ff9e5d; }
.gpIcons .orange2 { background: #ff806b; }