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


#rec{}

#rec .recimg{
	font-size: 0;
	line-height: 0;
	text-align: center;
	padding: 10px;
	-webkit-background-size: 3px 3px;
	-moz-background-size: 3px 3px;
	background-size: 3px 3px;
	background-color: #28282a;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,
		color-stop(.25, #1c1c1e), color-stop(.25, transparent),
		color-stop(.5, transparent), color-stop(.5, #1c1c1e),
		color-stop(.75, #1c1c1e), color-stop(.75, transparent),
		to(transparent));
	background-image: -webkit-linear-gradient(-45deg, #1c1c1e 25%, transparent 25%,
		transparent 50%, #1c1c1e 50%, #1c1c1e 75%,
		transparent 75%, transparent);
	background-image: -moz-linear-gradient(-45deg, #1c1c1e 25%, transparent 25%,
		transparent 50%, #1c1c1e 50%, #1c1c1e 75%,
		transparent 75%, transparent);
	background-image: -ms-linear-gradient(-45deg, #1c1c1e 25%, transparent 25%,
		transparent 50%, #1c1c1e 50%, #1c1c1e 75%,
		transparent 75%, transparent);
	background-image: -o-linear-gradient(-45deg, #1c1c1e 25%, transparent 25%,
		transparent 50%, #1c1c1e 50%, #1c1c1e 75%,
		transparent 75%, transparent);
	background-image: linear-gradient(-45deg, #1c1c1e 25%, transparent 25%,
		transparent 50%, #1c1c1e 50%, #1c1c1e 75%,
		transparent 75%, transparent);
}

#rec .recimg img{
	width: 100%;
	max-width: 600px;
	height: auto;
}

#rec #ch{	padding: 0;}
#rec #ch p{
	margin: 5px 10px 10px 10px;
}

#rec .di th{	width: 110px;}
#rec .di th br{	display: none;}

#rec .di .rec_sl{
	display: inline-block;
	vertical-align: middle;
	width: 35px;
	font-size: 14px;
	font-weight: bold;
	line-height: 18px;
	text-align: center;
	color: #fff;
	background: #ff528f;
	background: -moz-linear-gradient(left, #ff528f 0%, #ff34a7 100%);
	background: -webkit-linear-gradient(left, #ff528f 0%,#ff34a7 100%);
	background: linear-gradient(to right, #ff528f 0%,#ff34a7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff528f', endColorstr='#ff34a7',GradientType=1 );
	border-radius: 2px;
	margin: 0 5px 0 0;
}


/** rec_point **/

#rec .rec_point{
	margin: 0 0 5px 0;
}

#rec .rec_point ul{
	display: flex;
	flex-wrap: wrap;
	font-size: 0;
	line-height: 0;
	text-align: left;
	padding: 0 5px 0 10px;
}

#rec .rec_point li{
	display: inline-flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	vertical-align: top;
	width: calc(100% / 5 - 5px);
	min-height:26px;
	font-size: 12px;
	line-height: 14px;
	text-align: center;
	color: #fff;
	background: #009e70;
	border-radius: 16px;
	margin: 0 5px 5px 0;
	padding: 3px 5px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}


/** rec_mess **/

#rec .rec_mess{
	position: relative;
	border: 1px solid #3e3e41;
	border-radius: 5px;
	margin: 0 10px 10px 10px;
	padding: 0 10px 10px 10px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#rec .rec_mess h3{
	width: 100%;
	height: 54px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	text-align: left;
	margin: 0 0 2px 0;
	padding: 0 0 0 50px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#rec .rec_mess h3 span{
	width: 100%;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
}

#rec .rec_mess h3 em{
	width: 100%;
	font-family: "FontA";
	font-size: 11px;
	line-height: 14px;
	color: #ff429c;
}

#rec .rec_mess .mess_i{
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 40px;
	height: 54px;
	text-align: center;
	background: #ff528f;
	background: -moz-linear-gradient(left, #ff528f 0%, #ff34a7 100%);
	background: -webkit-linear-gradient(left, #ff528f 0%,#ff34a7 100%);
	background: linear-gradient(to right, #ff528f 0%,#ff34a7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff528f', endColorstr='#ff34a7',GradientType=1 );
	border-radius: 0 0 5px 5px;
	position: absolute;
	top: 0;
	left: 10px;
}

#rec .rec_mess .mess_i span{
	width: 30px;
	height: 30px;
	font-size: 26px;
	line-height: 30px;
	color: #ff429c;
	background: #ffffff;
	border-radius: 50%;
}


/** rec_plan **/

.rec_plan_bg{	margin-bottom: 10px;}
.rec_plan{
	padding: 0 10px 10px 10px;
}
.rec_plan:nth-of-type(1){
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9b95ff+0,ffade8+100 */
	background: #9b95ff; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #9b95ff 0%, #ffade8 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #9b95ff 0%,#ffade8 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #9b95ff 0%,#ffade8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9b95ff', endColorstr='#ffade8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.rec_plan:nth-of-type(2){
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffade8+0,ff8761+100 */
	background: #ffade8; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #ffade8 0%, #ff8761 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #ffade8 0%,#ff8761 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #ffade8 0%,#ff8761 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffade8', endColorstr='#ff8761',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.rec_plan:nth-of-type(3){
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff8761+0,f5c931+100 */
	background: #ff8761; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #ff8761 0%, #f5c931 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #ff8761 0%,#f5c931 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #ff8761 0%,#f5c931 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8761', endColorstr='#f5c931',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.rec_plan:nth-of-type(4){
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f5c931+0,76d24d+100 */
	background: #f5c931; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #f5c931 0%, #76d24d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #f5c931 0%,#76d24d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #f5c931 0%,#76d24d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5c931', endColorstr='#76d24d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.rec_plan:nth-of-type(5){
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#76d24d+0,5ebfec+100 */
	background: #76d24d; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #76d24d 0%, #5ebfec 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #76d24d 0%,#5ebfec 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #76d24d 0%,#5ebfec 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76d24d', endColorstr='#5ebfec',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.rec_plan h3{
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	padding: 10px 0;
}

.rec_plan h3 span{
	width: 40px;
	height: 40px;
	font-size: 30px;
	line-height: 40px;
	text-align: center;
	color: #fff;
	background: #1c1c1e;
	border-radius: 50%;
}

.rec_plan h3 em{
	width: calc(100% - 40px);
	font-size: 20px;
	font-weight: bold;
	line-height: 26px;
	color: #fff;
	padding-left: 10px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.rec_plan dl{
	display: table;
	width: 100%;
	font-size: 0;
	line-height: 0;
	margin: 0 0 1px 0;
}

.rec_plan dt,
.rec_plan dd{
	display: table-cell;
	vertical-align: middle;
	font-size: 14px;
	line-height: 20px;
}

.rec_plan dt{
	width: 85px;
	text-align: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.5);
	padding: 10px 0;
}

.rec_plan dd{
	text-align: left;
	padding: 10px 10px;
	background: #1c1c1e;
}

.rec_plan dd b{
	font-size: 24px;
}
.rec_plan dd span{
	font-weight: bold;
	font-size: 16px;
}

.rec_plan dd .green{
	color: #00bf75;
}
.rec_plan dd .yellow{
	color: #ffcc00;
}
.rec_plan dl:first-of-type dt{	border-radius: 5px 0 0 0;}
.rec_plan dl:first-of-type dd{ border-radius: 0 5px 0 0; }

.rec_plan p{}
.rec_plan p:last-child{
	font-size: 14px;
	line-height: 20px;
	background: #1c1c1e;
	border-radius: 0 0 5px 5px;
	padding: 10px;
}



/** fix_rec_bt **/

.rec_contact{
	font-size: 0;
	line-height: 0;
	text-align: center;
	margin: 0 0 10px 0;
	padding: 10px 0;
	background: #504900;
	border-top: 2px solid #6d6400;
	border-bottom: 2px solid #6d6400;
}

.rec_contact h3{
	position: relative;
	text-align: center;
	margin: 0 0 10px 0;
}
.rec_contact h3:before{
	content: '';
	width: 100%;
	height: 20px;
	-webkit-background-size: 2px 2px;
	-moz-background-size: 2px 2px;
	background-size: 2px 2px;
	background-color: #504900;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #6d6400), color-stop(.5, transparent), to(transparent));
	background-image: -moz-linear-gradient(#6d6400 50%, transparent 50%, transparent);
	background-image: -o-linear-gradient(#6d6400 50%, transparent 50%, transparent);
	background-image: linear-gradient(#6d6400 50%, transparent 50%, transparent);
	position: absolute;
	top: calc(50% - 10px);
	left: 0;
}

.rec_contact h3 span{
	position: relative;
	z-index: 2;
	display: inline-block;
	vertical-align: top;
	width: 220px;
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
	padding: 7px 0;
	color: #ffffff;
	background: #1c1c1e;
	border-radius: 17px;
}

.fix_rec_bt{
	position: relative;
	z-index: 201;
	display: inline-block;
	vertical-align: top;
	width: 250px;
	height: 70px;
	color: #fff;
	margin: 0 5px;
	padding: 10px 0;
	border-radius: 5px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.fix_rec_bt div{
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	height: 25px;
}
.fix_rec_bt.line div:only-child{
	height: 50px;
}
.fix_rec_bt div > span{
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	background: #fff;
	border-radius: 50%;
	margin-right: 5px;
}
.fix_rec_bt.tel div > span{
	font-size: 20px;
	color: #ff3399;
}
.fix_rec_bt.line div > span{
	font-family: "FontA";
	font-size: 12px;
	font-weight: normal;
	color: #00bf00;
}

.fix_rec_bt div > p{
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
}
.fix_rec_bt div > p br{	display: none;}

.fix_rec_bt > p{
	font-family: "FontA";
	text-align: center;
}

.fix_rec_bt.tel > p{
	font-size: 26px;
	line-height: 26px;
	margin-top: 0;
}
.fix_rec_bt.tel > p span{
	font-size: 14px;
}

.fix_rec_bt.line > p{
	font-size: 18px;
	line-height: 20px;
	margin-top: 5px;
}

.fix_rec_bt.tel{
	background: #ff528f;
	background: -moz-linear-gradient(left, #ff528f 0%, #ff34a7 100%);
	background: -webkit-linear-gradient(left, #ff528f 0%,#ff34a7 100%);
	background: linear-gradient(to right, #ff528f 0%,#ff34a7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff528f', endColorstr='#ff34a7',GradientType=1 );
}

.fix_rec_bt.line{
	background: #53d100;
	background: -moz-linear-gradient(-45deg, #53d100 0%, #00bf00 100%);
	background: -webkit-linear-gradient(-45deg, #53d100 0%,#00bf00 100%);
	background: linear-gradient(135deg, #53d100 0%,#00bf00 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#53d100', endColorstr='#00bf00',GradientType=1 );
}


/** recline_box **/

.recline_box{
	position: relative;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 300px;
	height: 70px;
	margin: 20px auto 20px auto;
	padding: 0 125px 0 0;
	border-top: 3px double #3e3e42;
	border-bottom: 3px double #3e3e42;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.recline_box p{
	position: relative;
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
}
.recline_box p:after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 10px;
	border-color: transparent transparent transparent #3e3e42;
	position: absolute;
	top: calc(50% - 9px);
	right: -25px;
}

.recline_box a{
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 90px;
	height: 90px;
	color: #fff;
	background: #44ce00;
	border-radius: 50%;
	position: absolute;
	top: calc(50% - 45px);
	right: 15px;
}

.recline_box a em{
	position: relative;
	display: inline-flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-family: "FontA";
	font-size: 14px;
	line-height: 14px;
	text-align: center;
	color: #44ce00;
	background: #fff;
	border-radius: 50%;
	margin: 0 0 5px 0;
}
.recline_box a em:after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 2.5px 0 2.5px;
	border-color: #fff transparent transparent transparent;
	position: absolute;
	bottom: 0;
	left: 1px;
	-webkit-transform: rotate(40deg);
	   -moz-transform: rotate(40deg);
		-ms-transform: rotate(40deg);
		 -o-transform: rotate(40deg);
			transform: rotate(40deg);
}

.recline_box a span{
	width: 100%;
	font-size: 16px;
	font-weight: bold;
	line-height: 16px;
	text-align: center;
}


/** staff **/

.staff{
	padding-top: 60px;
	overflow: hidden;
}

.staff_title{
	position: relative;
}
.staff_title em{
	display: inline-block;
	vertical-align: top;
	font-size: 20px;
	font-weight: bold;
	line-height: 40px;
	color: #fff;
	box-shadow: 8px 8px 5px 0px rgba(0, 0, 0, 0.5);
	border-radius: 3px;
	padding: 0 8px 0 47px;
	position: absolute;
	top: -43px;
	left: -10px;
	-webkit-transform: rotate(-5deg);
	   -moz-transform: rotate(-5deg);
	    -ms-transform: rotate(-5deg);
	     -o-transform: rotate(-5deg);
	        transform: rotate(-5deg);
}
.staff_title span{
	position: absolute;
	top: 6px;
	left: 17px;
}

.st_1 em{	background: #0066ff;}
.st_2 em{	background: #00b24b;}
.st_3 em{	background: #d28f30;}
.st_4 em{	background: #844dc7;}

.staff_1,
.staff_2,
.staff_3,
.staff_4{
	display: inline-block;
	vertical-align: middle;
	width: 80px;
	font-size: 14px;
	font-weight: bold;
	line-height: 18px;
	text-align: center;
	color: #fff;
	border-radius: 2px;
}
.staff_1{	background: #0099ff;}
.staff_2{	background: #00a179;}
.staff_3{	background: #f77400;}
.staff_4{	background: #f77400;}

.staff_mess{
	margin: 0 0 10px 0;
	padding: 0 10px;
}

.staff_mess dl{
	display: flex;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
}
.staff_mess dt{
	width: 70px;
	padding: 0 10px 0 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.staff_mess dt img{
	width: 60px;
	height: auto;
	border-radius: 50%;
}

.staff_mess dd{
	position: relative;
	width: calc(100% - 70px);
	text-align: left;
	background: #3e3e42;
	border-radius: 10px;
	padding: 10px 15px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.staff_mess dd:after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7.5px 10px 7.5px 0;
	border-color: transparent #3e3e42 transparent transparent;
	position: absolute;
	top: 23px;
	left: -10px;
}
.staff_mess dd .p1{
	font-size: 18px;
	font-weight: bold;
	color: #f3df33;
	line-height: 25px;
	margin: 0 0 5px 0;
}
.staff_mess dd .p2{
	font-size: 16px;
	line-height: 25px;
}






#rec .staff+.rec_mess{	margin-top: 10px;}


.di td a[href^="tel:"],
.rec_plan dd a[href^="tel:"]{	color: #fff;}


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

@media screen and (max-width: 999px) {
	#rec .rec_point li{	width: calc(100% / 4 - 5px);}
}


@media screen and (max-width: 650px) {
	#rec .rec_point li{	width: calc(100% / 3 - 5px);}
	#rec .di th{	width: 85px;}
	#rec .di th br{	display: inline}

	.fix_rec_bt{
		width:calc(50% - 15px);
		min-width: 145px;
	}
	.fix_rec_bt div{
		height: 35px;
	}
	.fix_rec_bt.line div:only-child{
		height: 50px;
	}
	.fix_rec_bt div > span{
		width: 35px;
		height: 35px;
		line-height: 35px;
	}
	.fix_rec_bt.tel div > span{
		font-size: 26px;
	}
	.fix_rec_bt.line div > span{
		font-size: 15px;
	}
	.fix_rec_bt div > p{
		font-size: 15px;
		line-height: 16px;
	}
	.fix_rec_bt div > p br{	display: inline;}

	.fix_rec_bt.tel > p{
		font-size: 16px;
		line-height: 16px;
		margin-top: 2px;
	}
	.fix_rec_bt.tel > p span{
		font-size: 12px;
	}
	.fix_rec_bt.line > p{
		font-size: 11px;
		line-height: 14px;
		margin-top: 5px;
	}
}
@media screen and (max-width: 500px) {
	#rec .rec_point li{	width: calc(100% / 2 - 5px);}
}