/*=================================================
 * CSS for PC
 * ================================================= */

main{
	width: 100%;
}

#girls{	background: #4c090b;}


/** name **/

#name{
	position: relative;
	background: #3b0507;
	padding: 67px 0 88px 0;
}

#name h3{
	font-family: "Sawarabi Mincho";
	font-size: 38px;
	line-height: 40px;
	margin: 0 0 10px 0;
}

#name p{
	display: inline-block;
	width: 370px;
	font-size: 14px;
	line-height: 25px;
	background: #4c090b;
	border-radius: 12.5px;
}

#name p span{	color: #ffdf49;}

#name p i{
	font-style: normal;
}

#name .icon{
	display: inline-block;
	vertical-align: top;
	width: 200px;
	font-size: 16px;
	line-height: 16px;
	position: absolute;
	top: 43px;
	left: calc(50% - 100px);
}

#name .class{
	display: inline-block;
	vertical-align: top;
	width: 190px;
	font-family: "FontA";
	font-size: 16px;
	font-weight: 400;
	line-height: 25px;
	color: #000;
	text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.5);
	border-width: 1px;
	border-style: solid;
	border-radius: 2px;
	position: absolute;
	bottom: 50px;
	left: calc(50% - 95px);
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#name .c1{
	border-color: #a77e00;
	background: -webkit-linear-gradient(0deg, #a77e00 0%, #ffe673 49%, #a77e00 100%);
	background: -moz-linear-gradient(0deg, #a77e00 0%, #ffe673 49%, #a77e00 100%);
	background: -o-linear-gradient(0deg, #a77e00 0%, #ffe673 49%, #a77e00 100%);
	background: -ms-linear-gradient(0deg, #a77e00 0%, #ffe673 49%, #a77e00 100%);
	background: linear-gradient(90deg, #a77e00 0%, #ffe673 49%, #a77e00 100%);
}
#name .c2{
	border-color: #ab69e2;
	background: -webkit-linear-gradient(0deg, #ab69e2 0%, #ead1ff 49%, #ab69e2 100%);
	background: -moz-linear-gradient(0deg, #ab69e2 0%, #ead1ff 49%, #ab69e2 100%);
	background: -o-linear-gradient(0deg, #ab69e2 0%, #ead1ff 49%, #ab69e2 100%);
	background: -ms-linear-gradient(0deg, #ab69e2 0%, #ead1ff 49%, #ab69e2 100%);
	background: linear-gradient(90deg, #ab69e2 0%, #ead1ff 49%, #ab69e2 100%);
}
#name .c3{
	border-color: #ff5b95;
	background: -webkit-linear-gradient(0deg, #ff5b95 0%, #ffa8c7 49%, #ff5b95 100%);
	background: -moz-linear-gradient(0deg, #ff5b95 0%, #ffa8c7 49%, #ff5b95 100%);
	background: -o-linear-gradient(0deg, #ff5b95 0%, #ffa8c7 49%, #ff5b95 100%);
	background: -ms-linear-gradient(0deg, #ff5b95 0%, #ffa8c7 49%, #ff5b95 100%);
	background: linear-gradient(90deg, #ff5b95 0%, #ffa8c7 49%, #ff5b95 100%);
}
#name .c4{
	border-color: #41d06c;
	background: -webkit-linear-gradient(0deg, #41d06c 0%, #a1ffbd 49%, #41d06c 100%);
	background: -moz-linear-gradient(0deg, #41d06c 0%, #a1ffbd 49%, #41d06c 100%);
	background: -o-linear-gradient(0deg, #41d06c 0%, #a1ffbd 49%, #41d06c 100%);
	background: -ms-linear-gradient(0deg, #41d06c 0%, #a1ffbd 49%, #41d06c 100%);
	background: linear-gradient(90deg, #41d06c 0%, #a1ffbd 49%, #41d06c 100%);
}
#name .c5{
	border-color: #e5433c;
	background: -webkit-linear-gradient(0deg, #e5433c 0%, #ff7671 49%, #e5433c 100%);
	background: -moz-linear-gradient(0deg, #e5433c 0%, #ff7671 49%, #e5433c 100%);
	background: -o-linear-gradient(0deg, #e5433c 0%, #ff7671 49%, #e5433c 100%);
	background: -ms-linear-gradient(0deg, #e5433c 0%, #ff7671 49%, #e5433c 100%);
	background: linear-gradient(90deg, #e5433c 0%, #ff7671 49%, #e5433c 100%);
}


/** prof **/

#prof{
	display: table;
	width: 1200px;
	font-size: 0;
	line-height: 0;
	margin: 0 auto;
	padding: 70px 0 50px 0;
}

#prof_l,
#prof_r{
	display: table-cell;
	vertical-align: top;
}

#prof_r h4{
	font-family: "Sawarabi Mincho";
	font-size: 14px;
	line-height: 30px;
	text-align: left;
	padding: 0 0 4px 0;
	border-bottom: 1px solid #b28702;
}

#prof_r h4 em{
	font-family: "FontA";
	font-size: 28px;
	line-height: 30px;
	color: #ffdf49;
}


/** left **/

#prof_l{	width: 530px;}


/**	prof slider start **/

#sliderContainer{
	position: relative;
	width: 480px;
	height: 640px;
	font-size: 0;
	line-height: 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

ul#slider{
	margin-left: 0;
	width: 480px;
	height: 640px;
	overflow: hidden;
	position: relative;
}

ul#slider li{
	float: left;
	width: 480px;
	position: absolute;
}

ul#slider li img{
}

ul#slideIcon{
	width: 480px;
	height: 0;
	position: relative;
}

ul#slideIcon li{
	display: inline-block;
	width: 25px; /* no change */
	height: 50px; /* no change */
	position: absolute;
	font-size: 11px;
	line-height: 50px;
	text-align: center;
	color: #fff;
	cursor: pointer;
}

ul#slideIcon li#prev,
ul#slideIcon li#next{	display: none;}

.thumbnail li{
	display: block;
	margin: 0 auto;
	width: 304px; /* no change */
	height: 404px; /* no change */
}

#btnPagination{
	font-size: 0;
	line-height: 0;
	background: #3b0507;
	margin: 0 0 30px 0;
	padding: 20px 0;
}

.thumbnailNavi li{
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	margin: 0 5px;
	cursor: pointer;
}

.thumbnailNavi li img /* thum */{
	width: 118px;
	height: 157px;
	opacity: 0.7;
}

.thumbnailNavi li a{
	display: block;
}

.thumbnailNavi li.active img /* thum selected */{
	opacity: 1;
}

#sliderContainer ul:after{
	content: "";
	display: block;
	clear: both;
}


/**	prof slider end **/

.rbox{
	display: table;
	width: 100%;
	font-size: 0;
	line-height: 0;
	margin: 0 0 40px 0;
}

.rbox_l,
.rbox_r{
	display: table-cell;
	vertical-align: top;
}

.rbox_l{
	width: 330px;
}

.rbox_r{}


/** mv **/

#mv{
	width: 300px;
	height: 207px;
	padding: 10px;
	background: #3b0507;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#mv iframe{
	width: 280px;
	height: 187px;
}

#mv p.no{
	width: 280px;
	height: 187px;
	background: url(img/mv.jpg) no-repeat 50% 50%;
	-webkit-background-size: 280px auto;
	background-size: 280px auto;
}


/** sche **/

#sche{}

#sche h4{	margin-bottom: 15px;}


/** sche **/

#sche{
	position: relative;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#sche ul{
	font-size: 0;
	line-height: 0;
}

#sche li{
	display: inline-block;
	width: calc(100% / 3 - 1px);
	border-right: 1px dotted #741417;
}
#sche li:last-of-type{	border: none;}

#sche li .th{
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	color: #ffdf49;
	padding: 5px 0 0 0;
}
.rbox_l+.rbox_r #sche li .th{	padding: 25px 0 10px 0;}

#sche li .td{
}

#sche li .td div{
	display: table;
	width: 100%;
	font-size: 0;
	line-height: 0;
}

#sche li .td p{
	display: table-cell;
	vertical-align: middle;
	height: 65px;
	font-size: 14px;
	line-height: 18px;
}

.rbox_l+.rbox_r #sche li .td p{	height: 100px;}


/** comment **/

.comment{
}

.comment p{
	font-size: 14px;
	line-height: 25px;
	text-align: left;
	padding: 10px 0 0 0;
}


/*=================================================
 * CSS for SP
 * ================================================= */

@media screen and (max-width: 650px) {
	#girls{	margin-bottom: 10px;}
	
	/** name **/
	#name{
		text-align: center;
		padding: 30px 10px 10px 10px;
	}
	#name h3{
		font-size: 24px;
		line-height: 30px;
		margin: 0 0 10px 0;
	}
	#name p{
		display: inline-block;
		width: auto;
		font-size: 11px;
		line-height: 24px;
		border-radius: 12px;
		padding: 0 10px;
	}

	#name .icon{
		display: inline-block;
		vertical-align: top;
		width: 200px;
		font-size: 14px;
		line-height: 14px;
		position: absolute;
		top: 13px;
		left: calc(50% - 100px);
	}
	#name .class{
		display: block;
		font-size: 14px;
		line-height: 20px;
		position: static;
		margin: 10px auto 0 auto;
	}

	/** prof **/
	#prof{
		display: block;
		width: auto;
		margin: 0;
		padding: 0;
	}
	#prof_l,
	#prof_r{
		display: block;
		width: auto;
	}
	#prof_l{	padding: 10px 0;}
	#prof_r h4{
		font-size: 10px;
		line-height: 30px;
		text-align: left;
		padding: 0 10px;
		border-bottom: 1px solid #b28702;
	}
	#prof_r h4 em{
		font-size: 18px;
		line-height: 30px;
		color: #ffdf49;
	}

	/** left **/

	/**	prof slider start **/
	#sliderContainer{
		display: block;
		width: auto;
		height: auto;
		text-align: center;
		margin: 0;
	}
	ul#slider{
		width: 300px;
		height: 400px;
		margin: 0 auto;
	}
	ul#slider li{	width: 300px;}
	ul#slider li img{
		width: 300px;
		height: 400px;
	}
	ul#slideIcon{	width: 100%;}
	ul#slideIcon li{
		display: inline-block;
		width: 25px; /* no change */
		height: 60px; /* no change */
		position: absolute;
		font-size: 11px;
		line-height: 60px;
		text-align: center;
		color: #fff;
		cursor: pointer;
	}
	ul#slideIcon li#prev{
		display: block;
		left: 0;
		top: -245px;
		border-radius: 0 3px 3px 0;
	}
	ul#slideIcon li#next{
		display: block;
		right: 0;
		top: -245px;
		border-radius: 3px 0 0 3px;
	}
	.slick-prev, .slick-next , ul#slideIcon li{	background: rgba(255, 51, 204, 0.8);}
	#btnPagination{
		margin: 0 0 10px 0;
		padding: 10px 0;
		text-align: center;
	}
	.thumbnailNavi ul{
		text-align: center;
	}
	.thumbnailNavi li{
		display: inline-block;
		vertical-align: top;
		margin: 0 1px;
		padding: 0;
		border: none;
	}
	.thumbnailNavi li img{
		width: 58px;
		height: auto;
	}

	/**	prof slider end **/
	.rbox{
		display: block;
		width: auto;
		margin: 0 0 10px 0;
	}
	.rbox_l,
	.rbox_r{
		display: block;
		width: auto;
	}
	.rbox_r{}

	/** mv **/
	#mv{
		width: auto;
		height: auto;
		margin: 0 0 10px 0;
		padding: 10px;
		text-align: center;
	}
	#mv iframe{
		width: 100%;
		height: 200px;
	}
	#mv p.no{
		width: auto;
		height: 200px;
		background: url(img/mv.jpg) no-repeat 50% 50%;
	}

	/** sche **/
	#sche{
		text-align: center;
	}
	#sche h4{	margin-bottom: 10px;}
	#sche li .th{
		font-size: 12px;
		line-height: 18px;
		padding: 5px 0 0 0;
	}
	.rbox_l+.rbox_r #sche li .th{	padding: 5px 0 0 0;}
	#sche li .td p{
		height: 70px;
		font-size: 12px;
		line-height: 18px;
	}
	.rbox_l+.rbox_r #sche li .td p{	height: 70px;}

	/** comment **/
	.comment p{
		font-size: 13px;
		line-height: 20px;
		text-align: left;
		padding: 10px;
	}
}