@charset "UTF-8";
/* CSS Document */

/*----- PAGE-HEADER -----*/

.page-header{
	background-image: url("../../../images/_assets-page/profile/img-cover-sp.webp");
}

@media screen and (min-width: 768px) {
	
	.page-header{
		background-image: url("../../../images/_assets-page/profile/img-cover-pc.webp");
	}
	
}

/*----- PAGE-CONTENT -----*/

#profile div.content{
	width:100%;
	margin:0 auto;
	max-width: 1080px;
	
	box-sizing: border-box;
	padding:10px;
}

#profile div.post-content{
	box-sizing: border-box;
	padding:10px;
	
	background-color:#fff;
	color:#222;
	
	border-radius:5px;
}

@media screen and (min-width: 768px) {
	
	#profile div.content{
		padding:20px;
	}
	
	#profile div.post-content{
		padding:20px;
	}
	
}

/*----- PROFILE-SUMMARY -----*/

.summary{
	width:100%;
	margin-bottom:20px;
	
	position: relative;
}

.summary h4{
	font-size:1.75rem;
	line-height:80px;
	
	box-sizing: border-box;
	padding-left:30px;
	
	position: relative;
}

.summary h4::before{
	display:block;
	content:"";
	
	width:20px;
	height:1px;
	
	background-color:#000;
	
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	
	margin:auto 0;
}

.summary p.update{
	font-size:0.8rem;
	line-height:20px;
}

.summary p.update span.note{
	display:inline-block;
	
	width:160px;
	text-align: center;
	
	box-sizing: border-box;
	border:solid 1px #fd5e53;
	
	color:#fd5e53;
}

.summary p.rank{
	width:70px;
	height:90px;
	
	position: absolute;
	top:-15px;
	right:0;
	
	z-index: 5;
	
	font-size:1.0rem;
	line-height:20px;
	
	background-color:#000;
	color:#fff;
	
	text-align: center;
	
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0% 100%);
	
	border-top-left-radius: 2.5px;
	border-top-right-radius: 2.5px;
	
	box-sizing: border-box;
	padding-top:30px;
}

.summary p.girl{
	background-color:#2f4f4f;
}

.summary p.lady{
	background-color:#b8860b;
}

.summary p.madamu{
	background-color:#4682b4;
}

.summary p.muse{
	background-color:#4b0082;
}

.summary p.rank::before{
	display:block;
	content:"R";
	
	width:50px;
	height:27.5px;
	
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	
	background-color:#fff;
	color:#000;
	
	font-size:0.8rem;
	line-height:20px;
	
	position: absolute;
	top:0;
	left:0;
	right:0;
	
	margin:0 auto;
}

.summary p.girl::before{
	content:"G";
}

.summary p.lady::before{
	content:"L";
}

.summary p.madam::before{
	content:"MA";
}

.summary p.muse::before{
	content:"MU";
}

.summary p.rank span.note{
	display:block;
	
	width:100%;
	
	font-size:0.6rem;
	line-height:20px;
}

.summary div.postdata{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
}

.summary div.postdata div.row{
	width:20%;
	
	text-align: center;
}

.summary div.postdata div.row p.que{
	box-sizing: border-box;
	padding:5px 0;
	
	background-color:#5f161d;
	color:#fff;
	
	position: relative;
}

.summary div.postdata div.row:first-child p.que{
	border-top-left-radius: 5px;
}

.summary div.postdata div.row:last-child p.que{
	border-top-right-radius: 5px;
}

.summary div.postdata div.row p.que::after{
	display:block;
	content:"";
	
	width:1px;
	height:20px;
	
	background-color:#fff;
	
	position: absolute;
	top:0;
	bottom:0;
	right:0;
	
	margin:auto 0;
}

.summary div.postdata div.row:last-child p.que::after{
	display:none;
}

.summary div.postdata div.row p.ans{
	box-sizing: border-box;
	padding:5px 0;
	
	background-color:#f0f0f0;
	color:#222;
	
	position: relative;
}

.summary div.postdata div.row:first-child p.ans{
	border-bottom-left-radius: 5px;
}

.summary div.postdata div.row:last-child p.ans{
	border-bottom-right-radius: 5px;
}

.summary div.postdata div.row p.ans::after{
	display:block;
	content:"";
	
	width:1px;
	height:20px;
	
	background-color:#222;
	
	position: absolute;
	top:0;
	bottom:0;
	right:0;
	
	margin:auto 0;
}

.summary div.postdata div.row:last-child p.ans::after{
	display:none;
}

@media screen and (min-width: 768px) {
	
	.summary{
		margin-bottom:40px;
	}
	
	.summary p.rank{
		top:-25px;
	}
	
	.summary div.postdata{
		font-size:1.25rem;
		line-height:1.5em;
	}
	
	.summary div.postdata div.row p.que{
		padding:10px 0;
	}
	
	.summary div.postdata div.row p.ans{
		padding:10px 0;
	}
	
	.summary div.postdata div.row p.que::after{
		height:30px;
	}
	
	.summary div.postdata div.row p.ans::after{
		height:30px;
	}
	
}

/*----- PROFILE-CONTENT-TWIN -----*/

.content-twin{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
}

.content-twin div.castimg{
	width:100%;
	margin-bottom:20px;
}
	
.content-twin div.casttext{
	width:100%;
}

/*----- PROFILE-SLIDER-PROFILE -----*/

.slider-child{
	width:100%;	
	position: relative;
}

.slider-child img{
	width:100%;
	vertical-align: bottom;
}

.slider-thumbnail{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
}

.slider-thumbnail p.slider-thum-child{
	width:25%;
	position: relative;
	
	transition:0.25s;
}

.slider-thumbnail p.slider-thum-child:hover{
	opacity: 0.75;
	cursor: pointer;
}

.slider-thumbnail p.slider-thum-child::before{
	display:block;
	content:"";
	
	width:100%;
	box-sizing: border-box;
	padding-top:100%;
	
	background-color:#f0f0f0;
}

.slider-thumbnail p.slider-thum-child img{
	width:calc(100% - 15px);
	height:calc(100% - 15px);
	
	position: absolute;
	top:7.5px;
	left:7.5px;
	
	object-fit: cover;
	object-position: top center
}

.slider-thumbnail p.slider-thum-child span.design-top-left{
	display:block;
	
	width:20px;
	height:20px;
	
	/*background-color:#f0f0f0;*/
	
	position: absolute;
	top:0;
	left:0;
}

.slider-thumbnail p.slider-thum-child span.design-top-left::before{
	display:block;
	content:"";
	
	width:10px;
	height:1px;
	
	background-color:#888;
	
	position: absolute;
	top:2.5px;
	left:2.5px;
}

.slider-thumbnail p.slider-thum-child span.design-top-left::after{
	display:block;
	content:"";
	
	width:1px;
	height:10px;
	
	background-color:#888;
	
	position: absolute;
	top:2.5px;
	left:2.5px;
}

.slider-thumbnail p.slider-thum-child span.design-top-right{
	display:block;
	
	width:20px;
	height:20px;
	
	/*background-color:#f0f0f0;*/
	
	position: absolute;
	top:0;
	right:0;
}

.slider-thumbnail p.slider-thum-child span.design-top-right::before{
	display:block;
	content:"";
	
	width:10px;
	height:1px;
	
	background-color:#888;
	
	position: absolute;
	top:2.5px;
	right:2.5px;
}

.slider-thumbnail p.slider-thum-child span.design-top-right::after{
	display:block;
	content:"";
	
	width:1px;
	height:10px;
	
	background-color:#888;
	
	position: absolute;
	top:2.5px;
	right:2.5px;
}

.slider-thumbnail p.slider-thum-child span.design-bottom-left{
	display:block;
	
	width:20px;
	height:20px;
	
	/*background-color:#f0f0f0;*/
	
	position: absolute;
	bottom:0;
	left:0;
}

.slider-thumbnail p.slider-thum-child span.design-bottom-left::before{
	display:block;
	content:"";
	
	width:10px;
	height:1px;
	
	background-color:#888;
	
	position: absolute;
	bottom:2.5px;
	left:2.5px;
}

.slider-thumbnail p.slider-thum-child span.design-bottom-left::after{
	display:block;
	content:"";
	
	width:1px;
	height:10px;
	
	background-color:#888;
	
	position: absolute;
	bottom:2.5px;
	left:2.5px;
}

.slider-thumbnail p.slider-thum-child span.design-bottom-right{
	display:block;
	
	width:20px;
	height:20px;
	
	/*background-color:#f0f0f0;*/
	
	position: absolute;
	bottom:0;
	right:0;
}

.slider-thumbnail p.slider-thum-child span.design-bottom-right::before{
	display:block;
	content:"";
	
	width:10px;
	height:1px;
	
	background-color:#888;
	
	position: absolute;
	bottom:2.5px;
	right:2.5px;
}

.slider-thumbnail p.slider-thum-child span.design-bottom-right::after{
	display:block;
	content:"";
	
	width:1px;
	height:10px;
	
	background-color:#888;
	
	position: absolute;
	bottom:2.5px;
	right:2.5px;
}

@media screen and (min-width: 768px) {
	
	.slider-child{
		width:100%;	
		position: relative;
	}
	
	.slider-child::before{
		display:block;
		content:"";
		
		width:100%;
		height:540px;
		
		background-color:#f8f8f8;
	}
	
	.slider-child img{
		width:auto;
		height:auto;
		
		max-width: 100%;
		max-height: 100%;
		
		position: absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
		
		margin:auto;
	}
	
	.slider-thumbnail p.slider-thum-child{
		width:20%;
	}
	
}

/*----- PROFILE-CASTTEXT -----*/

.casttext h6{
	width:100%;
	
	font-size:1.25rem;
	line-height:60px;
	
	color:#5f161d;
	
	text-align: center;
}

.casttext h6 span.note{
	display:inline-block;
	
	box-sizing: border-box;
	padding:0 80px;
	
	position: relative;
}

.casttext h6 span.note::before{
	display:block;
	content:"";
	
	width:80px;
	height:20px;
	
	background-image: url("../../../images/_assets-page/_assets-common/design-inner-header-side-color.webp");
	background-repeat: no-repeat;
	background-size: 80px;
	background-position: center;
	
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	
	margin:auto 0;
}

.casttext h6 span.note::after{
	display:block;
	content:"";
	
	width:80px;
	height:20px;
	
	background-image: url("../../../images/_assets-page/_assets-common/design-inner-header-side-color.webp");
	background-repeat: no-repeat;
	background-size: 80px;
	background-position: center;
	
	position: absolute;
	top:0;
	bottom:0;
	right:0;
	
	margin:auto 0;
}

.casttext div.comment{
	width:100%;
	margin-bottom:20px;
}

.casttext div.staffcomment{
	width:100%;
	margin-bottom:20px;
}

.casttext div.fee{
	width:100%;
	
	box-sizing: border-box;
	padding:5px;
	border:solid 1px #fd5e53;
}

.casttext div.fee div.inner{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
	margin-bottom:2.5px;
}

.casttext div.fee div.inner:last-child{
	margin-bottom:0;
}

.casttext div.fee p.que{
	width:50%;
	
	box-sizing: border-box;
	padding:10px;
	
	background-color:#fd5e53;
	color:#fff;
}

.casttext div.fee p.ans{
	width:50%;
	
	box-sizing: border-box;
	padding:10px;
	
	background-color:#f0f0f0;
	color:#222222;
}

@media screen and (min-width: 960px) {
	
	.content-twin div.castimg{
		width:calc(45% - 15px);
		margin-right:15px;
		margin-bottom:0;
	}
	
	.content-twin div.casttext{
		width:calc(55% - 15px);
		margin-left:15px;
	}
	
}