@charset "utf-8";

/* ------------------------------
　　--treatment dermatology--
------------------------------ */
.trea_derma #case_derma h2 {
    background: none;
    color: #333;
    height: auto;
    padding: 0;
}
.cm .inner{
	padding-bottom:5%;
}
.cm{
	background:#ededed;
text-align: center;
padding: 5% 0;
}
.cm figure{
margin: 0 auto;
}
.cm figure:first-child {
    width: 20%;
}
.cm figure:nth-child(2){
width:50%;
padding-top:5%;
}
.cm figure img{
	width: 100%;
	border-radius: 5px;
}
.tre_mg h2{
color:#333;
}
.tre_mg{
	background:#ededed;
text-align: center;
padding: 5% 0;
}
.tre_mg figure{
margin: 0 auto;
width:50%;
}
.tre_mg figure img{
	width: 100%;
	border-radius: 5px;
}

.trea_derma #treatment {
		background: #f7f7f7;
}
.trea_derma #treatment h2 {
    color: #333;
}


@media screen and (max-width: 580px) {
.cm figure:first-child {
    width: 35%;
}
.cm figure:nth-child(2) {
    width: 100%;
}
.tre_mg figure {
    margin: 0 auto;
    width: 100%;
}
}



/* ------------------------------
　　--treatment dermatology menu--
------------------------------ */
.trea_navi{
		background:#ededed;
		padding-bottom: 8%;
}

.trea_navi ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding-bottom: 10%;
}
.trea_navi li{
	width: 45%;
	color: #fff;
	background: #5b5b5b;
	border-radius: 10px;
	margin: 1%;
	text-align: center;
	position: relative;
	display: inline-block;
}

.trea_navi li::before{
	position: absolute;
	bottom: 10%;
	left: 50%;
	margin: auto;
	content: "";
	vertical-align: middle;
	width: 10px;
	height: 10px;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.trea_navi li a {
    color: #fff;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    opacity: .7;
}
.trea_navi li span {
display: inline-block;
margin: 10%;
}
#menu_organic,#menu_light,#menu_japan,#menu_rescue,#menu_whiten{
    display: block;
    padding-top: 4em;
    margin-top: -4em;
}
@media screen and (max-width: 414px) {
.trea_navi li span {
    font-size: .9rem;
		margin: 10% 5%;
line-height: 1.2;
}
.trea_navi li span em{
    font-size: .6rem;
}
}
@media screen and (max-width: 320px) {
.trea_navi li span em {
    font-size: .5rem;
}
}


.menu_item{
background: #f7f7f7;
padding-bottom: 5%;
}
.menu_item h2{
color:#fff;
background:#5b5b5b;
border-radius: 5px;
font-size: 1.1rem;
line-height: 1.4;
padding: 5% 0;
}
.menu_item h2 em{
font-size:.7rem;

}
.menu_item ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
		margin: 4% auto;
}
.menu_item li {

    width: 24%;
    background: #fff;
    border-radius: 10px;
    margin: 0 .5% 2% .5%;

}
.menu_item a{
	text-decoration:none;
	color:#333;
}
.menu_item dt {
    border-radius: 10px 10px 0 0;
    font-size: 3rem;
    font-weight: bold;
    position: relative;
		line-height: 1;
}
.menu_item dt span{
	position: absolute;
	font-size: .6rem;
	background: #f43770;
	color: #fff;
	border-radius: 0 4px 4px 0;
	font-weight: lighter;
	padding:1.5%;
	top: 5.5%;
}
.menu_item li dt figure img {
    width: 100%;
    border-radius: 10px 10px 0 0;
height: auto;
}


.menu_item dd {
    padding: 0 10% 2%;
    font-size: 1.2rem;
		line-height: 1.4;
}


@media screen and (max-width: 980px) {
.menu_item dd {
    font-size: 1rem;
}
	}

@media screen and (max-width: 580px) {
	.menu_item ul {
		justify-content:space-between;
	}
	.menu_item li {
	    width: 48%;
		}
	}

@media screen and (max-width: 414px) {
	.menu_item dd {
	    font-size: .9rem;
	}
	}


	/* ------------------------------
　　--treatment dark_eye--
	------------------------------ */

	#menu_eye{
	padding: 2% 0;
}
.tre_darkeye #case_derma h2 {
    background: none;
    color: #333;
    height: auto;
    padding: 0;
}

.tre_darkeye #treatment {
		background: #f7f7f7;
}
.tre_darkeye #treatment h2 {
    color: #333;
}

@media screen and (max-width: 414px) {
.tre_darkeye .cm figure:first-child {
    width: 60%;
}
}

/* ------------------------------
　　--treatment hair removal--
------------------------------ */

#menu_hr{
padding: 2% 0;
}
.tre_hr #case_derma h2 {
	background: none;
	color: #333;
	height: auto;
	padding: 0;
}

.tre_hr .cm figure:first-child {
	width: 20%;
}
.tre_hr #treatment {
	background: #f7f7f7;
}
.tre_hr #treatment h2 {
	color: #333;
}

@media screen and (max-width: 414px) {
.tre_hr .cm figure:first-child {
	width: 60%;
}
}

/* ------------------------------
　　--treatment Face slimming--
------------------------------ */

#menu_fs{
padding: 2% 0;
}
.tre_fs #case_derma h2 {
	background: none;
	color: #333;
	height: auto;
	padding: 0;
}

.tre_fs .cm figure:first-child {
	width: 20%;
}
.tre_fs #treatment {
	background: #f7f7f7;
}
.tre_fs #treatment h2 {
	color: #333;
}

@media screen and (max-width: 414px) {
.tre_fs .cm figure:first-child {
	width: 60%;
}
}


/* ------------------------------
　　--treatment body slimming--
------------------------------ */

.tre_bs .tre_mg {
    background:
#f7f7f7;
}
#menu_bs{
padding: 2% 0;
}
.tre_bs #case_derma h2 {
	background: none;
	color: #333;
	height: auto;
	padding: 0;
}

.tre_bs .cm figure:first-child {
	width: 20%;
}
.tre_bs #treatment {
    background:#ededed;
}
.tre_bs #treatment h2 {
	color: #333;
}

@media screen and (max-width: 414px) {
.tre_bs .cm figure:first-child {
	width: 35%;
}
}


/* ------------------------------
　　--treatment others--
------------------------------ */

.tre_oth .tre_mg {
    background:
#f7f7f7;
}



.tre_oth .cm figure:first-child {
	width: 20%;
}
.tre_oth #treatment {
    background:#ededed;
}
.cm_oth h2 {
	color: #333;
}
.tre_oth .cm_oth{
	   background: #f7f7f7;
		 position: relative;
}
.tre_oth .cm_oth:nth-child(4){
	   background:#ededed;
}
.tre_oth .cm_oth figure:nth-child(2) {
	width: 10%;
	position: absolute;
	right: 35%;
	top: 30%;
}
.tre_oth .cm_oth figure:nth-child(3) {
	    width: 50%;
		}
.tre_oth .cm_oth:nth-child(4) figure:nth-child(2) {
	top: 38%;
	width: 11%;
		}
.tre_oth .cm_oth p {
    display: inline-block;
    width: 30%;
    float: left;
    margin-left: 25%;
    text-align: left;
}
.tre_oth #treatment h2 {
	color: #333;
}

.tre_oth .cm_oth a span.btn {
width: 45%;
}

@media screen and (max-width: 1500px) {
.tre_oth .cm_oth figure:nth-child(2) {
    width: 12%;
    right: 31%;
    top: 35%;
}
.tre_oth .cm_oth:nth-child(4) figure:nth-child(2) {
    top: 40%;
    width: 12.5%;
    right: 30%;
}

}

@media screen and (max-width: 835px) {
.tre_oth .cm_oth p {
    width: 35%;
}
.tre_oth .cm_oth:nth-child(4) figure:nth-child(2) {
    right: 28%;
}

}
@media screen and (max-width: 768px) {
.tre_oth .cm_oth a span.btn {
    width: 55%;
}
.tre_oth .cm_oth p {
    width: 35%;
    margin-left: 25%;
}
.tre_oth .cm_oth:nth-child(4) figure:nth-child(2) {
    top: 40%;
    width: 13%;
}
}


@media screen and (max-width: 580px) {
.tre_oth .cm_oth figure:nth-child(3) {
    width: 100%;
}

.tre_oth .cm_oth a span.btn {
    width: 100%;
}
.tre_oth .cm_oth:nth-child(4) figure:nth-child(2) {
    top: 35%;
    width: 28%;
    right: 10%;

}
.tre_oth .cm_oth p {

    width: 55%;
    margin-left: 0;

}
.tre_oth .cm_oth figure:nth-child(2) {
    width: 27%;
    right: 10%;
    top: 20%;
}
}



@media screen and (max-width: 414px) {
.tre_oth .cm figure:first-child {
	width: 35%;
}
.tre_oth .cm_oth figure:nth-child(2) {
    width: 27%;
    right: 10%;
    top: 30%;

}
}

/* ------------------------------
　　--select skin pigmentation--
------------------------------ */
.sele_pigm .cm {
background: #f7f7f7;
}
.sele_pigm .tre_mg {
    background:
#f7f7f7;
}
#menu_pigm{
padding: 2% 0;
}

.sele_pigm .cm figure:first-child {
	width: 20%;
}
.sele_pigm #treatment {
    background:#ededed;
}
.sele_pigm #treatment h2 {
	color: #333;
}

@media screen and (max-width: 414px) {
.sele_pigm .cm figure:first-child {
	width: 35%;
}
}

/* ------------------------------
　　--select skin LINES & WRINKLES--
------------------------------ */

.sele_line .tre_mg {
    background:
#f7f7f7;
}
#menu_line{
padding: 2% 0;
}
#case_derma{
	display:none;
}
.sele_line #case_derma h2 {
	background: none;
	color: #333;
	height: auto;
	padding: 0;
}
.sele_line .cm figure:first-child {
	width: 20%;
}
.sele_line #treatment {
    background:#ededed;
}
.sele_line #treatment h2 {
	color: #333;
}

@media screen and (max-width: 414px) {
.sele_line .cm figure:first-child {
	width: 35%;
}
}


/* ------------------------------
　　--select skin SAGGY SKIN/LAUGHLINES--
------------------------------ */

.sele_sag .tre_mg {
    background:
#f7f7f7;
}
#menu_sag{
padding: 2% 0;
}
.sele_sag #case_derma h2 {
	background: none;
	color: #333;
	height: auto;
	padding: 0;
}
.sele_sag .cm figure:first-child {
	width: 20%;
}
.sele_sag #treatment {
    background:#ededed;
}
.sele_sag #treatment h2 {
	color: #333;
}

@media screen and (max-width: 414px) {
.sele_sag .cm figure:first-child {
	width: 35%;
}
}


/* ------------------------------
　　--select skin ACNE PORES--
------------------------------ */

.sele_acne .tre_mg {
    background:#f7f7f7;
}
.sele_acne .cm {
background:#f7f7f7;
}
#menu_acne {
    padding: 2% 0;
}
.sele_acne .cm figure:first-child {
	width: 20%;
}
#menu_acne.menu_item {
    background: #ededed;
}
.sele_acne #treatment {
    background:#ededed;
}
.sele_acne #treatment h2 {
	color: #333;
}

@media screen and (max-width: 414px) {
.sele_acne .cm figure:first-child {
	width: 35%;
}
}

/* ------------------------------
　　--select skin SKIN WHITENING--
------------------------------ */

.sele_skinw .tre_mg {
    background:#f7f7f7;
}
.sele_skinw .cm {
background:#f7f7f7;
}
#menu_skinw {
    padding: 2% 0;
}
.sele_skinw .cm figure:first-child {
	width: 20%;
}
#menu_skinw.menu_item {
    background: #ededed;
}
.sele_skinw #treatment {
    background:#ededed;
}
.sele_skinw #treatment h2 {
	color: #333;
}

@media screen and (max-width: 414px) {
.sele_skinw .cm figure:first-child {
	width: 35%;
}
}

/* ------------------------------
　　--select skin SKIN QUALITY--
------------------------------ */

.sele_skinq .tre_mg {
    background:#f7f7f7;
}
.sele_skinq .cm {
background:#f7f7f7;
}
#menu_skinq {
    padding: 2% 0;
}
.sele_skinq .cm figure:first-child {
	width: 20%;
}
#menu_skinq.menu_item {
    background: #ededed;
}
.sele_skinq #treatment {
    background:#ededed;
}
.sele_skinq #treatment h2 {
	color: #333;
}

@media screen and (max-width: 414px) {
.sele_skinq .cm figure:first-child {
	width: 35%;
}
}


/* ------------------------------
　　--select skin GLOWING SKIN--
------------------------------ */

.sele_glow .tre_mg {
    background:#f7f7f7;
}
.sele_glow .cm {
background:#f7f7f7;
}
#menu_glow {
    padding: 2% 0;
}
.sele_glow .cm figure:first-child {
	width: 20%;
}
#menu_glow.menu_item {
    background: #ededed;
}
.sele_glow #treatment {
    background:#ededed;
}
.sele_glow #treatment h2 {
	color: #333;
}

@media screen and (max-width: 414px) {
.sele_glow .cm figure:first-child {
	width: 35%;
}
}

/* ------------------------------
　　--select FACE ANTI-AGING--
------------------------------ */

.sele_anti .tre_mg {
    background:#f7f7f7;
}
.sele_anti .cm {
background:#f7f7f7;
}
#menu_anti {
    padding: 2% 0;
}
.sele_anti .cm figure:first-child {
	width: 20%;
}
#menu_anti.menu_item {
    background: #ededed;
}
.sele_anti #treatment {
    background:#ededed;
}
.sele_anti #treatment h2 {
	color: #333;
}
.sele_anti #case_derma {
    background:#ededed;
}
.sele_anti #case_derma h2 {
	background: none;
	color: #333;
	height: auto;
	padding: 0;
}
@media screen and (max-width: 414px) {
.sele_anti .cm figure:first-child {
	width: 35%;
}
}

/* ------------------------------
　　--select FACE DARK EYE CIRCLES--
------------------------------ */

.sele_eye .tre_mg {
    background:#f7f7f7;
}
.sele_eye .cm {
background:#f7f7f7;
}
#menu_eye {
    padding: 2% 0;
}
.sele_eye .cm figure:first-child {
	width: 20%;
}
#menu_eye.menu_item {
    background: #ededed;
}
.sele_eye #treatment {
    background:#ededed;
}
.sele_eye #treatment h2 {
	color: #333;
}
.sele_eye #case_derma {
    background:#ededed;
}
.sele_eye #case_derma h2 {
	background: none;
	color: #333;
	height: auto;
	padding: 0;
}
@media screen and (max-width: 414px) {
.sele_eye .cm figure:first-child {
	width: 35%;
}
}

/* ------------------------------
　　--select FACE UNWANTED EXCESS HAIR--
------------------------------ */

.sele_uhair .tre_mg {
    background:#f7f7f7;
}
.sele_uhair .cm {
background:#f7f7f7;
}
#menu_uhair {
    padding: 2% 0;
}
.sele_uhair .cm figure:first-child {
	width: 20%;
}
#menu_uhair.menu_item {
    background: #ededed;
}
.sele_uhair #treatment {
    background:#ededed;
}
.sele_uhair #treatment h2 {
	color: #333;
}
.sele_uhair #case_derma {
    background:#ededed;
}
.sele_uhair #case_derma h2 {
	background: none;
	color: #333;
	height: auto;
	padding: 0;
}
@media screen and (max-width: 414px) {
.sele_uhair .cm figure:first-child {
	width: 35%;
}
}

/* ------------------------------
　　--select FACE FACE SLIMMING--
------------------------------ */

.sele_faces .tre_mg {
    background:#f7f7f7;
}
.sele_faces .cm {
background:#f7f7f7;
}
#menu_faces {
    padding: 2% 0;
}
.sele_faces .cm figure:first-child {
	width: 20%;
}
#menu_faces.menu_item {
    background: #ededed;
}
.sele_faces #treatment {
    background:#ededed;
}
.sele_faces #treatment h2 {
	color: #333;
}
.sele_faces #case_derma {
    background:#ededed;
}
.sele_faces #case_derma h2 {
	background: none;
	color: #333;
	height: auto;
	padding: 0;
}
@media screen and (max-width: 414px) {
.sele_faces .cm figure:first-child {
	width: 35%;
}
}

/* ------------------------------
　　--select BODY SNORING--
------------------------------ */
.sele_sno .cm_oth {
    position: relative;
}
.sele_sno .cm_oth figure:nth-child(2) {
	width: 10%;
	position: absolute;
	right: 35%;
	top: 30%;
}
.sele_sno .cm_oth figure:nth-child(3) {
    width: 50%;
}
.sele_sno .cm_oth p {
    display: inline-block;
    width: 30%;
    float: left;
    margin-left: 25%;
    text-align: left;
}
@media screen and (max-width: 1500px) {
.sele_sno .cm_oth figure:nth-child(2) {
    width: 12%;
    right: 31%;
    top: 35%;
}

}
@media screen and (max-width: 835px) {
.sele_sno .cm_oth p {
    width: 35%;
}


}

@media screen and (max-width: 768px) {
.sele_sno .cm_oth a span.btn {
    width: 55%;
}
.sele_sno .cm_oth p {
    width: 35%;
    margin-left: 25%;
}

}


@media screen and (max-width: 580px) {
.sele_sno .cm_oth figure:nth-child(3) {
    width: 100%;
}

.sele_sno .cm_oth a span.btn {
    width: 100%;
}

.sele_sno .cm_oth p {

    width: 55%;
    margin-left: 0;

}
.sele_sno .cm_oth figure:nth-child(2) {
    width: 27%;
    right: 10%;
    top: 20%;
}
}

@media screen and (max-width: 414px) {
.sele_sno .cm figure:first-child {
	width: 35%;
}
.sele_sno .cm_oth figure:nth-child(2) {
    width: 27%;
    right: 10%;
    top: 30%;

}
}

/* ------------------------------
　　--select BODY FEMALE VAGINAL CONCERNS--
------------------------------ */
.sele_fem .cm_oth {
    position: relative;
}
.sele_fem .cm_oth figure:nth-child(2) {
	width: 10%;
	position: absolute;
	right: 35%;
	top: 30%;
}
.sele_fem .cm_oth figure:nth-child(3) {
    width: 50%;
}
.sele_fem .cm_oth p {
    display: inline-block;
    width: 30%;
    float: left;
    margin-left: 25%;
    text-align: left;
}
@media screen and (max-width: 1500px) {
.sele_fem .cm_oth figure:nth-child(2) {
    width: 12%;
    right: 31%;
    top: 35%;
}

}
@media screen and (max-width: 835px) {
.sele_fem .cm_oth p {
    width: 35%;
}


}

@media screen and (max-width: 768px) {
.sele_sno .cm_oth a span.btn {
    width: 55%;
}
.sele_sno .cm_oth p {
    width: 35%;
    margin-left: 25%;
}

}


@media screen and (max-width: 580px) {
.sele_fem .cm_oth figure:nth-child(3) {
    width: 100%;
}

.sele_fem .cm_oth a span.btn {
    width: 100%;
}

.sele_fem .cm_oth p {

    width: 55%;
    margin-left: 0;

}
.sele_fem .cm_oth figure:nth-child(2) {
    width: 27%;
    right: 10%;
    top: 20%;
}
}

@media screen and (max-width: 414px) {
.sele_fem .cm figure:first-child {
	width: 35%;
}
.sele_fem .cm_oth figure:nth-child(2) {
    width: 27%;
    right: 10%;
    top: 30%;

}
}


/* ------------------------------
　　--select BODY OVERSWEATING--
------------------------------ */
.sele_os .cm_oth {
    position: relative;
}
.sele_os .cm_oth figure:nth-child(2) {
    top: 38%;
    width: 11%;
position: absolute;
right: 35%;
}
.sele_os .cm_oth figure:nth-child(3) {
    width: 50%;
}
.sele_os .cm_oth p {
    display: inline-block;
    width: 30%;
    float: left;
    margin-left: 25%;a
    text-align: left;
}

@media screen and (max-width: 1500px) {

.sele_os .cm_oth figure:nth-child(2) {
    top: 40%;
    width: 12.5%;
    right: 30%;
}
.sele_os .cm_oth figure:nth-child(3) {
    width: 50%;
}


}


@media screen and (max-width: 768px) {

.sele_os .cm_oth figure:nth-child(2) {
    top: 40%;
    width: 13%;
}

.sele_os .cm_oth p {
    width: 35%;
    margin-left: 25%;
}

}


@media screen and (max-width: 580px) {

.sele_os .cm_oth figure:nth-child(2) {
    top: 35%;
    width: 28%;
    right: 10%;
}
.sele_os .cm_oth figure:nth-child(3) {
    width: 100%;
}
}

/* ------------------------------
　　--select BODY STUBBORN FAT--
------------------------------ */

.sele_stub .tre_mg {
    background:#f7f7f7;
}
.sele_stub .cm {
    background:#ededed;
}
#menu_stub {
    padding: 2% 0;
}
.sele_stub .cm figure:first-child {
	width: 20%;
}
#menu_stub.menu_item {
    background: #ededed;
}
.sele_stub #treatment {
    background:#ededed;
}
.sele_stub #treatment h2 {
	color: #333;
}
.sele_stub #case_derma h2 {
	background: none;
	color: #333;
	height: auto;
	padding: 0;
}
@media screen and (max-width: 414px) {
.sele_stub .cm figure:first-child {
	width: 35%;
}
}
