@charset "UTF-8";

/* prof
======================================================= */
#prof{}

#prof .inner{
	width:100%;
	padding:2.2rem;
	margin:auto;
	box-sizing: border-box;
	/* background:rgba(255, 149, 229, 0.9); */
	background: #fff2fc;
	background: linear-gradient(180deg, rgba(255, 242, 252, 1) 19%, rgba(255, 224, 247, 1) 99%);
	border-radius:8px;
}
#prof .inner > section{
	margin:0 auto 5.5rem;
}
#prof h2{
}

#prof h3{
	margin:0 auto 3.4rem;
	color:#ee72ba;
	font-size: 2rem;
	text-align: center;
}
#prof h3::before{
}
#prof .flex_pc{
	display: flex;
	justify-content: space-between;
	width:100%;
	margin-bottom:3rem;
}
#prof .flex_pc > section{
	width:48%;
}

/* prof header */


#prof #profHeader{
	margin:0 0 1.4rem;	
}

#prof #profHeader .cate{
	margin:0 0 10px;	
}

#prof #profHeader #nameArea{
	width:100%;
	align-items: center;
	box-sizing: border-box;
	padding:1.5rem ;
	margin:0 0 0.8rem;
	/* background:rgba(255,255,255,0.94); */
	border-radius:8px;
}
#prof #profHeader #nameArea .nameArea{
	padding-left:3rem;
}

#prof #profHeader #nameArea .cast_icon{
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	width:100%;
	padding:0;
	margin:auto;
	box-sizing: border-box;
	text-align: center;
}
#prof #profHeader #nameArea .cast_icon p{
	width:100px;
	margin:0.5%;
	padding:3px;
	box-sizing: border-box;
	background:#ee72ba;
	color: #000;
	font-size: 0.8rem;
	font-weight: bold;
	white-space: nowrap;
}


#prof #profHeader #nameArea .dto{
	margin-left:calc(100% - 1.5rem);
}
#prof #profHeader #nameArea .name{
	margin-bottom: 0.875rem;
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 1;
	color:#ff5c98;
}
#prof #profHeader #nameArea .name span{
	display: inline-block;
}
#prof #profHeader #nameArea .name .age{
	margin-left:1rem;
	font-size: 1.9rem;
}
#prof #profHeader #nameArea .size{
	display: block;
	margin:0 0 0.8rem;
	font-size:1.3rem;
	color:#a8355f;
}
#prof #profHeader #nameArea .type{
	display: block;
	width:120px;
	margin: 0 0 0.5rem;
	padding:0.5rem;
	font-size:0.74rem;
	text-align: center;
}
#prof #profHeader #nameArea  .type span{
	display: block;
	margin: auto;
	padding:0.2rem 0.5rem;
	color:#fff;
	font-size: 0.7rem;
	border-radius:5px;
}

#prof #profHeader .cast_icon{
	display: flex;
	flex-wrap: wrap;
	width:100%;
	margin:0 0;
	
}
#prof #profHeader .cast_icon span{
	display: inline-block;
	margin:0 0.2rem 0;
	padding:0.4rem 0.6rem;
	background:#EC4B87;
	color: #fff;
	font-size: 0.86rem;
	border-radius:4px;
	line-height: 1;
}
#prof #profHeader .cast_icon img{
	display: block;
	width:74px;
	margin-right:0.4rem;
	border-radius:5px;
}


/*  */

/* photoArea */

#prof #photoArea{
	min-height: 520px;
	margin:0 auto 2.5rem;
	padding:1.5rem;
	background:rgba(60,60,60,0.1);
	border-radius:0.75rem;
}
#prof #photoArea img{
	display: block;
	max-width:100%;
	border-radius:0.75rem;
}
#prof #photoArea .sp-thumbnails{
	margin: 1.5rem 0 1.5rem;
}
#prof #photoArea sp-thumbnails img{
	display:block;
	cursor: pointer;
}



/* shame */

#prof  #shame{
}
#prof  #shame h3{
}

#prof  #shame .inner{
	height:500px;
	margin:0 0 0px;
	overflow: auto;
	
}
#prof  #shame .inner iframe{
}


/* profArea */

#prof #profArea{
	width:52%;
	vertical-align:top;
}

/* xtwitter */
#prof .twitter{
	display: flex;
	justify-content: center;
	align-items: center;
	margin:2rem auto 0;
	text-align: center;
}
#prof .twitter a{
	display: inline-block;
	background:url(../images/icon/icon_x.png) no-repeat 1rem center #000;
	background-size:30px;
	border-radius:50vmax;
	padding:0.8rem 1rem 0.8rem 50px;
	color: #fff;

}




/* interviewArea */

#prof .interviewArea{
	max-height:380px;
	box-sizing: border-box;
	padding:3%;
	border-radius:0.75rem;
	background:white;
	border:6px solid #ffe7f6;
}
#prof .interviewArea table{
	width:100%;
}
#prof .interviewArea th,#prof .interviewArea td{
	padding:0.5rem 0.5rem;
	border-bottom:1px dashed #b8b8b8;
	font-weight: 400;
	font-size: 0.9rem;
}
#prof .interviewArea th{
	width:30%;
	color:#EC4B87;
	border-radius:10px;
}
#prof .interviewArea td{
	padding-left:10%;
}




/* yesno */

#prof .yesno{
	margin: 0 0 1.2rem;
}

#prof .yesno table{
	width:100%;
	border-collapse: collapse;
	
}
#prof .yesno th,#prof .yesno td{
	padding:0.3rem 0.5rem;
	border: 1px solid #FFF;
	background:#f4f4f4;
	font-weight: 100;
	font-size: 0.8rem;
}
#prof .yesno th{
	width:30%;
	background:#efefef;
}
#prof .yesno td{}

/* voice */
#prof .voiceArea{
	margin: 0 0 1.5rem;
	background:white;
	
}
#prof .voiceArea .voice_comment .flexSection{
	width:100%;
}
#prof .voiceArea .cp-container{
	width:104px;
	margin-right: 6%;
	border-radius:8px;
	box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.06);
	border: 1px solid #cdcdcd;
}
#prof .voiceArea .voice_comment{
	width:56%;
	font-size:0.76rem; 
}
#prof .voiceArea .voice_comment .icon{
	margin: 0 0 0.63rem;
}
#prof .voiceArea .voice_comment .icon span{
	display: inline-block;
	color: #fff;
	padding:0.2rem 0.5rem;
	border-radius:6px;
}
/* playable */

#prof  #playable{
	display: none;
}
#prof  #playable h3{
}
#prof #playable ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	width:100%;
	padding:0%;
}
#prof #playable li{
	display: inline-block;
	margin:0 0.5% 0.8%;
	padding:2%;
	width:32%;
	
	box-sizing: border-box;
	border-radius:5px;
	background:#c353ff;
	font-weight: 100;
	font-size: 0.8rem;
	text-align: center;
	color: #fff;

}
#prof #playable li.on{



}

/* option */

#prof  #option{
	margin: 0 0 1.5rem;
	padding:1.5rem 0;
}
#prof  #option h3{
	/*
	padding:1%;
	color: #fff;
	font-weight: 100;
	font-size: 13px;
	border:1px solid #ffb7c1;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;	

	background:#e8384d;
*/
}
#prof #option ul{
	display: flex;
	flex-wrap: wrap;
	justify-content:flex-start;
	width:100%;
}
#prof #option li{
	display: block;
	width:32%;
	padding: 0.2rem;
	margin: 0 0.5% 1%;
	box-sizing: border-box;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	border:3px solid #BBB;
	color:#AAA;
	text-align: center !important;
	background:rgba(255,255,255,0.9);
}

#prof #option li.on{
	border:3px solid #ee72ba;
	color:#ee72ba;
}
#prof #option li p.title{
	font-size: 0.9rem;
}
#prof #option li p.price{
	font-size: 0.8rem;
}

/* prof table */

#prof .prof_table{
	width:100%;
	margin:0 0 20px;
	border-collapse:collapse;
}
#prof .prof_table th{
	width:32%;
	padding:1%;
	color: #ee72ba;
	font-weight: 100;
	font-size: 12px;
	border-bottom:1px dotted #ee72ba;
}
#prof .prof_table td{
	padding:2%;
	font-size: 13px;
	color: #ee72ba;
	border-bottom:1px dotted #ee72ba;
}

/* movie */
#prof .movie{
	width:640px;
	margin:auto;
}
#prof .movie .m_inner{
	padding:2%;
	background:#484848;
	border-radius:4px;
}
#prof .movie video{
	width:100%;
	max-width:100%;
	border-radius:4px;
}

/* comment */
#prof #fromShop{
	padding:1.5rem;
	background:rgba(255,255,255,0.9);
	border-radius:0.75rem;
	border:6px solid #ffe7f6;
}
#prof #fromShop h3{
}
#prof #fromShop .text{
	font-size: 1rem;
	line-height: 1.6;
}

/* schedule */

#prof #schedule{
}
#prof #schedule h3{
}

#prof #schedule .flex{
	width:100%;
}
#prof #schedule .flex > div{
	width:calc(100% / 7);
	font-weight: bold;
	text-align:center;
	background:#fff;
	font-size:1rem;
	border:1px solid #ee72ba;
}
#prof #schedule .date{
	padding:0.8rem ;
	background:#ee72ba;
	border:1px solid #FFF;
	color: #fff;
}
#prof #schedule .time{
	min-height:40px ;
	padding:1.2rem 0.8rem ;
	font-size:1rem;
	color: #72686c;
}

/* スマホサイズ対応 */
@media screen and (max-width: 768px) {
	#prof .inner{
		padding: 1rem;
	}
	
	#prof .inner > section{
		margin: 0 auto 3rem;
	}
	
	#prof h3{
		font-size: 1.5rem;
		margin: 0 auto 2rem;
	}
	
	#prof .flex_pc{
		display: block;
	}
	
	#prof .flex_pc > section{
		width: 100%;
		margin-bottom: 2rem;
	}
	
	/* profHeader スマホ対応 */
	#prof #profHeader #nameArea{
		padding: 1rem;
		text-align: center;
	}
	
	#prof #profHeader #nameArea .nameArea{
		padding-left: 0;
		margin-bottom:1rem;
	}
	
	#prof #profHeader #nameArea .name{
		font-size: 2rem;
		margin-bottom: 0.5rem;
	}
	
	#prof #profHeader #nameArea .name .age{
		font-size: 1.5rem;
		margin-left: 0.5rem;
	}
	
	#prof #profHeader #nameArea .size{
		font-size: 1rem;
		margin: 0 0 0.5rem;
	}
	
	#prof #profHeader #nameArea .cast_icon{
		justify-content: center;
		flex-wrap: wrap;
	}
	
	#prof #profHeader #nameArea .cast_icon p{
		width: auto;
		margin: 0.2rem 0.2rem 0.2rem 0;
		padding: 0.3rem 0.5rem;
		font-size: 0.7rem;
	}
	
	#prof #profHeader #nameArea .dto{
		margin-left: 0;
		margin-top: 1rem;
	}
	
	/* photoArea スマホ対応 */
	#prof #photoArea{
		width: 100%;
		margin: 0 auto 2rem;
		padding: 1rem;
	}
	
	/* スライダーのスマホ対応 */
	#prof #photoArea #wide{
		width: 100% !important;
		min-height: 400px !important;
	}

	#prof #photoArea #wide .sp-slides,
	#prof #photoArea #wide .sp-slide{
		width: 100% !important;
	}

	#prof #photoArea #wide .sp-image{
		width: 100% !important;
		height: auto !important;
		max-height: 500px !important;
		object-fit: contain !important;
		display: block !important;
	}
	
	/* interviewArea スマホ対応 */
	#prof .interviewArea{
		margin: 0 0 1rem;
		padding-top: 1rem;
	}
	
	#prof .interviewArea table{
		font-size: 0.8rem;
	}
	
	#prof .interviewArea th,
	#prof .interviewArea td{
		padding: 0.3rem 0.3rem;
		font-size: 0.8rem;
	}
	
	#prof .interviewArea th{
		width: 35%;
	}
	
	/* yesno スマホ対応 */
	#prof .yesno th,
	#prof .yesno td{
		padding: 0.2rem 0.3rem;
		font-size: 0.7rem;
	}
	
	#prof .yesno th{
		width: 35%;
	}
	
	/* voiceArea スマホ対応 */
	#prof .voiceArea .voice_comment .flexSection{
		display: block;
	}
	
	#prof .voiceArea .cp-container{
		width: 80px;
		margin: 0 auto 1rem;
	}
	
	#prof .voiceArea .voice_comment{
		width: 100%;
		font-size: 0.7rem;
	}
	
	/* option スマホ対応 */
	#prof #option{
		margin: 0 0 1rem;
		padding: 1rem 0;
	}
	
	#prof #option ul{
		justify-content: center;
	}
	
	#prof #option li{
		width: 45%;
		margin: 0 2% 1%;
	}
	
	#prof #option li p.title{
		font-size: 0.8rem;
	}
	
	#prof #option li p.price{
		font-size: 0.7rem;
	}
	
	/* prof_table スマホ対応 */
	#prof .prof_table th,
	#prof .prof_table td{
		padding: 0.5rem 0.3rem;
		font-size: 0.7rem;
	}
	
	#prof .prof_table th{
		width: 35%;
	}
	
	/* movie スマホ対応 */
	#prof .movie{
		width: 100%;
		margin: auto;
	}
	
	#prof .movie .m_inner{
		padding: 1%;
	}
	
	/* fromShop スマホ対応 */
	#prof #fromShop{
		padding: 1rem;
	}
	
	#prof #fromShop .text{
		font-size: 0.9rem;
		line-height: 1.5;
	}
	
	/* schedule スマホ対応 */
	#prof #schedule .flex{
		display: block;
	}
	
	#prof #schedule .flex > div{
		width: 100%;
		margin-bottom: 0.5rem;
		font-size: 0.8rem;
	}
	
	#prof #schedule .date{
		padding: 0.5rem;
		font-size: 0.8rem;
	}
	
	#prof #schedule .time{
		min-height: 30px;
		padding: 0.8rem 0.5rem;
		font-size: 0.8rem;
	}
	
	/* twitter スマホ対応 */
	#prof .twitter{
		margin: 1rem auto 0;
	}
	
	#prof .twitter a{
		padding: 0.6rem 0.8rem 0.6rem 40px;
		background-size: 25px;
		font-size: 0.8rem;
	}
}

/* スマートフォン (480px以下) */
@media screen and (max-width: 480px) {
	#prof .inner{
		padding: 0.5rem;
	}

	#prof h3{
		font-size: 1.3rem;
		margin: 0 auto 1.5rem;
	}

	#prof #profHeader #nameArea .name{
		font-size: 1.6rem;
	}

	#prof #profHeader #nameArea .name .age{
		font-size: 1.2rem;
	}

	#prof #profHeader #nameArea .size{
		font-size: 0.9rem;
	}

	/* photoArea 小さいスマホ対応 */
	#prof #photoArea{
		padding: 0.5rem;
		min-height: auto;
	}

	#prof #photoArea #wide{
		min-height: 300px !important;
	}

	#prof #photoArea #wide .sp-image{
		max-height: 400px !important;
	}

	/* option 小さいスマホ対応 */
	#prof #option li{
		width: 48%;
		margin: 0 1% 1%;
	}

	#prof #option li p.title{
		font-size: 0.75rem;
	}

	#prof #option li p.price{
		font-size: 0.65rem;
	}

	/* schedule 小さいスマホ対応 */
	#prof #schedule .flex > div{
		font-size: 0.75rem;
	}

	#prof #schedule .date{
		padding: 0.4rem;
		font-size: 0.75rem;
	}

	#prof #schedule .time{
		min-height: 25px;
		padding: 0.6rem 0.4rem;
		font-size: 0.75rem;
	}
}