@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

$removal-color: #e8527c;
$oxygen-color: #3ca0f1;

.removal-color {
	color: $removal-color;
}
.oxygen-color {
	color: $oxygen-color;
}

/*-----------------main-img-----------------*/
#main-img {
  background-image: url("../img/header.jpg");
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  padding: 10rem;
//	margin-bottom: 220px;
	@include lg {
		padding-right: 5rem;
	}
//	@include md {
//		margin-bottom: 170px;
//	}
	@include sm {
		padding-right: 2rem;
	}
	@include xs {
		padding-left: 2rem;
//		margin-bottom: 140px;
		background-position: 33%;
	}
	h1 {
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		font-size: 40px;
		font-size: 4rem;
		text-align: right;
		vertical-align: middle;
		@include md {
			font-size: 36px;
			font-size: 3.6rem;
		}
		@include sm {
			font-size: 32px;
			font-size: 3.2rem;
		}
		@include xs {
			font-size: 30px;
			font-size: 3rem;
			text-align: center;
		}
	}
}

#removal-intro {
	margin: 90px 0px;
	position: relative;
	@include md {
		margin: 40px 0px;
	}
	ul {
		display: inline-block;
		text-align: left;
		li {
			font-family: "游明朝体" ;
			font-size: 2rem;
			line-height: 5rem;
			@include lg{
				line-height: 3.8rem;
			}
			@include md {
				font-size: 2rem;
				line-height: 3.5rem;
			}
			@include xs {
				font-size: 1.7rem;
				line-height: 3rem;
			}
		}
		.icon-pink {
			&::before {
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
				content: '\f004';
				color: #f4a8bd;
				margin-right: 0.5rem;
			}
		}
		.icon-blue {
			&::before {
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
				content: '\f004';
				color: #9dcff8;
				margin-right: 0.5rem;
			}
		}
	}
	.intro-img {
		@include sm {
			padding: 3rem;
		}
		@include xs {
			padding: 1rem;	
		}
	}
	.decorate{
		img {
			position: absolute;
			&:first-child {
				top: -55px;
				left: 2%;
				width: 90px;
				@include lg {
					position: absolute;
					bottom: 8rem;
//					left: 5rem;
//					width: 125px;
				}
				@include md {
					top: -27px;
					width: 60px;
				}
				@include sm {
					width: 50px;
				}
			}
			&:last-child {
				bottom: -45px;
				right: 1%;
				width: 90px;
//				@include lg {
//					position: absolute;
//					bottom: 8rem;
//					right: 5rem;
//					width: 125px;
//				}
				@include md {
					bottom: -16px;
					width: 60px;
				}
				@include sm {
					width: 50px;
				}
			}
		}
	}
}

/*-----------------point-----------------*/
#removal-point {
	background: #fdeef2;
	font-family: "游明朝体" ;
	padding: 10rem 0;
	position: relative;
	@include xs  {
		padding: 40px 0px;		
	}
	p {
		font-size: 25px;
		text-align: center;
		line-height: 5rem;
		@include xs {
			font-size: 2.2rem;
			line-height: 3.5rem;
		}
		&:last-child {
			@include sm {
				font-size: 2rem;
				text-align: center;
				line-height: 4rem;
			}
		}
	}
	ul {
		margin: 5rem 0;
		@include sm {
			margin: 2rem 0;
		}
	}	
	span {
		color: #e8527c;
	}
	.decorate {
		img{
			&:first-child {
				position: absolute;
				bottom: 8rem;
				left: 15rem;
				width: 125px;
				@include lg {
					position: absolute;
					bottom: 8rem;
					left: 5rem;
					width: 125px;
				}
				@include md {
					position: absolute;
					bottom: 11rem;
					left: 1rem;
					width: 80px;
				}
			}
			&:last-child {
				position: absolute;
				bottom: 8rem;
				right: 15rem;
				width: 125px;
				@include lg {
					position: absolute;
					bottom: 8rem;
					right: 5rem;
					width: 125px;
				}
				@include md {
					position: absolute;
					bottom: 11rem;
					right: 1rem;
					width: 80px;
				}
			}
		}
	}	
}

/*-----------------menu bar-----------------*/
#price {
	.menu-bar {
		display: block;
		background-color: #fdeef2;
		padding: auto;
		ul {
			display: flex;
			justify-content: center;
			margin:0!important;
			padding: 2rem 0rem;
			li {
				display: inline-block;
				vertical-align: middle;
				padding: 0 2em;
				@include md {
					padding: 0 1em;
				}
			}
		}
	}
	.menu-bar2 {
		background-color: #fdeef2;
		margin-bottom: 3rem;
	}
}

#subbutton {
	a {
		color:#4d4d4d!important;
		&:hover {
			color:#e8527c!important;
			transition: 0.3;
		}
	}
}

#subbutton2 {
	@include sm {
		padding: 1rem;
	}
	li {
		@include sm {
			padding: 0.5rem 0.5rem 0.5rem 0.5rem;
		}
		a {
			color:#4d4d4d!important;
			&:hover {
				color:#e8527c!important;
				transition: 0.3;
			}
			@include xs {
				font-size: 1.2rem;
			}
		}
	}
}

/*-----------------price-----------------*/
#price {
	padding: 10rem 0;
	h2 {
		margin-bottom: 4rem;
	}
	h3 {
		font-size: 25px;
		color: #e8527c;
		border-bottom: solid 1px #e8527c;
		padding-bottom: 12px;
		position: relative;
		&::before {
			content: "";
			display: block;
			position: absolute;
			width: 38%;
			border-bottom: solid 2px #e8527c;
			bottom: -1px;
			left: 0px;
		}
		@include xs {
			font-size: 20px;
		}
		span {
			font-size: 17px;
			@include xs {
				font-size: 12px;
			}
		}
	}
	img{
		margin: auto;
		width: 70%;
	}
}

#mens-face {
	.trialprice-img {
		margin-bottom: 60px;
		@include xs {
			margin-bottom: 30px;
		}
		img {
			margin: auto;
			width: 100%;
		}
	}
}

#body-menu {
	margin-bottom: 140px;
	@include xs {
		margin-bottom: 70px;
	}
	img {
		@include md {
			width: 100%;		
		}
	}
}

/*--------▼全身レディース--------*/
#ladies-body {
	h4 {
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		font-size: 23px;
		letter-spacing: 0.1em;
		color: #e8527c;
		padding: 7px 0px 7px 20px;
		border-left: 1.5px solid #e8527c;
		margin-top: 30px;
		span {
			font-size: 17px;
		}
	}
	/*---表---*/
	.table-wrap {
		@include lg {
			overflow-x: scroll;
		}
	}
	table {
		table-layout: fixed;
		width: 100%;
		@include lg {
			width: 100%;
			min-width: 1000px;
			border-collapse: collapse;
		}
		tr {
			&:nth-child(1) {
				th {
					color: #4d4d4d;
					background-color: initial;
				}
				td {
					text-align: center;
					font-weight: bold;
					border-bottom: 2px solid #ed7596;}
				}
			}
		th {
			padding: 8px 15px;
			width: 165px;
			color: #FFFFFF;
			text-align: center;
			border-bottom: 1px solid #FFFFFF;
			background-color: #ed7596;
			@include lg {
				width: 125px;
			}
		}
		td {
			padding: 8px 15px;
			border-bottom: 1px dotted #ed7596;
			text-align: right;
			&:nth-of-type(1) {
				border-right: 0.5px solid #ed7596;
			}
			&:nth-of-type(3) {
				border-right: 0.5px solid #ed7596;
				background-color: #fdeef2;
				color: #e8527c;
			}
			&:nth-of-type(5) {
				border-right: 0.5px solid #ed7596;
				background-color: #fdeef2;
				color: #e8527c;
			}
			&:nth-of-type(7) {
				border-right: 0.5px solid #ed7596;
				background-color: #fdeef2;
				color: #e8527c;
			}
		}
	}
}
/*--------▼全身メンズ--------*/
#mens-body {
	h4 {
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		font-size: 23px;
		letter-spacing: 0.1em;
		color: #3ca0f1;
		padding: 7px 0px 7px 20px;
		border-left: 1.5px solid #3ca0f1;
		margin-top: 30px;
		span {
			font-size: 17px;
		}
	}
	/*---表---*/
	.table-wrap {
		@include lg {
			overflow-x: scroll;
		}
	}
	table {
		table-layout: fixed;
		width: 100%;
		@include lg {
			width: 100%;
			min-width: 1000px;
			border-collapse: collapse;
		}
		tr {
			&:nth-child(1) {
				th {
					color: #4d4d4d;
					background-color: initial;
				}
				td {
					text-align: center;
					font-weight: bold;
					border-bottom: 2px solid #63b3f4;
				}
			}
		}
		th {
			padding: 8px 15px;
			width: 165px;
			color: #FFFFFF;
			text-align: center;
			border-bottom: 1px solid #FFFFFF;
			background-color: #63b3f4;
			@include lg {
				width: 125px;
			}
		}
		td {
			padding: 8px 15px;
			border-bottom: 1px dotted #63b3f4;
			text-align: right;
			&:nth-of-type(1) {
				border-right: 0.5px solid #63b3f4;
			}
			&:nth-of-type(3) {
				border-right: 0.5px solid #63b3f4;
				background-color: #ebf5fe;
				color: #3ca0f1;
			}
			&:nth-of-type(5) {
				border-right: 0.5px solid #63b3f4;
				background-color: #ebf5fe;
				color: #3ca0f1;
			}
			&:nth-of-type(7) {
				border-right: 0.5px solid #63b3f4;
				background-color: #ebf5fe;
				color: #3ca0f1;
			}
		}
	}
}
/*--------▼全身キッズ--------*/
#kids-body {
	h4 {
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		font-size: 23px;
		letter-spacing: 0.1em;
		color: #ff8f21;
		padding: 7px 0px 7px 20px;
		border-left: 1.5px solid #ff8f21;
		margin-top: 30px;
		span {
			font-size: 17px;
		}
	}
	/*---表---*/
	.table-wrap {
		@include lg {
			overflow-x: scroll;
		}
	}
	table {
		table-layout: fixed;
		width: 100%;
		@include lg {
			width: 100%;
			min-width: 1000px;
			border-collapse: collapse;
		}
		tr {
			&:nth-child(1) {
				th {
					color: #4d4d4d;
					background-color: initial;
				}
				td {
					text-align: center;
					font-weight: bold;
					border-bottom: 2px solid #ffa54d;
				}
			}
		}
		th {
			padding: 8px 15px;
			width: 165px;
			color: #FFFFFF;
			text-align: center;
			border-bottom: 1px solid #FFFFFF;
			background-color: #ffa54d;
			@include lg {
				width: 125px;
			}
		}
		td {
			padding: 8px 15px;
			border-bottom: 1px dotted #ffa54d;
			text-align: right;
			&:nth-of-type(1) {
				border-right: 0.5px solid #ffa54d;
			}
			&:nth-of-type(3) {
				border-right: 0.5px solid #ffa54d;
				background-color: #fff4e9;
				color: #ff8f21;
			}
			&:nth-of-type(5) {
				border-right: 0.5px solid #ffa54d;
				background-color: #fff4e9;
				color: #ff8f21;
			}
			&:nth-of-type(7) {
				border-right: 0.5px solid #ffa54d;
				background-color: #fff4e9;
				color: #ff8f21;
			}
		}
	}
}

/*-------------------メンズ顔------------------*/
#mens-face {
	h3 {
		font-size: 25px;
		color: #3ca0f1;
		border-bottom: solid 1px #3ca0f1;
		padding-bottom: 12px;
		position: relative;
		@include xs {
			font-size: 20px;
		}
		&::before {
			content: "";
			display: block;
			position: absolute;
			width: 36%;
			border-bottom: solid 2px #3ca0f1;
			bottom: -1px;
			left: 0px;
		}
		span {
			font-size: 17px;
			@include xs {
				font-size: 12px;
			}
		}
	}
	h4 {
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		font-size: 23px;
		letter-spacing: 0.1em;
		color: #63b3f4;
		padding: 7px 0px 7px 20px;
		border-left: 1.5px solid #63b3f4;
		margin-top: 30px;
		span {
			font-size: 17px;
		}
	}
	img {
		@include sm {
			width: 100%;
		}
	}
	/*---表---*/
	.table-wrap {
		@include sm {
			overflow-x: scroll;
		}	
	}
	table {
		table-layout: fixed;
		width: 100%;
		color: #4d4d4d;
		@include sm {
			width: 100%;
			min-width: 767px;
			border-collapse: collapse;
		}
		tr {
			th {
				padding: 8px 15px;
				width: 210px;
				color: #FFFFFF;
				text-align: center;
				border-bottom: 1px solid #FFFFFF;
				background-color: #63b3f4;
				@include md {
					width: 135px;
				}
			}
			td {
				padding: 8px 15px;
				border-right: 0.5px solid #63b3f4;
				border-bottom: 1px dotted #63b3f4;
				text-align: right;
			}
			&:nth-child(1) {
				th {
					color: #4d4d4d;
					background-color: initial;
				}
				td {
					text-align: center;
					font-weight: bold;
					border-bottom: 2px solid #63b3f4;
				}
			}
			//二行目の背景をブルーに
			&:nth-of-type(2) td{
				background-color: #ebf5fe;
			}
		}	
	}
}


/*-----------------plan-----------------*/
#plan {
	margin-bottom: 140px;
	h2 {
		margin-bottom: 4rem;
	}
	h3 {
		font-size: 25px;
		color: #ff8f21;
		border-bottom: solid 1px #ff8f21;
		padding-bottom: 12px;
		position: relative;
		&::before {
			content: "";
			display: block;
			position: absolute;
			width: 36%;
			border-bottom: solid 2px #ff8f21;
			bottom: -1px;
			left: 0px;
		}
		@include xs {
			font-size: 20px;
		}
		span {
			font-size: 17px;
			@include xs {
				font-size: 12px;
			}
		}
	}
	img {
		margin: auto;
		width: 65%;
	}
}

/*-------------------学生プラン（女性）------------------*/
#student-ladies {
	h4 {
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		font-size: 23px;
		letter-spacing: 0.1em;
		color: #e8527c;
		padding: 7px 0px 7px 20px;
		border-left: 1.5px solid #e8527c;
		margin-top: 30px;
		span {
			font-size: 17px;
		}
	}

	/*-----表-----*/
	table {
		table-layout: fixed;
		width: 70%;
		margin: auto;
		color: #4d4d4d;
		@include md {
			width: 90%
		}
		@include sm {
			width: 100%;
		}
		tr {
			th {
				padding: 8px 15px;
				width: 210px;
				color: #FFFFFF;
				text-align: center;
				border-bottom: 1px solid #FFFFFF;
				background-color: #ed7596;
				@include md {
					width: 110px;
				}
			}		
			td {
				padding: 8px 15px;
				border-right: 0.5px solid #ed7596;
				border-bottom: 1px dotted #ed7596;
				text-align: right;
			}
			&:nth-child(1) { 
				th {
					color: #4d4d4d;
					background-color: initial;
				}
				td {
					text-align: center;
					font-weight: bold;
					border-bottom: 2px solid #ed7596;
				}
			}	
			//二行目の背景をピンクに*
			&:nth-of-type(2) td {
				background-color: #fce9ee;
			}
		}
	}
}

/*-------------------学生プラン（男性）------------------*/
#student-mens {
	h4 {
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		font-size: 23px;
		letter-spacing: 0.1em;
		color: #63b3f4;
		padding: 7px 0px 7px 20px;
		border-left: 1.5px solid #63b3f4;
		margin-top: 30px;
		span {
			font-size: 17px;
		}
	}
	
	/*-----表-----*/
	table {
		table-layout: fixed;
		width: 70%;
		margin: auto;
		color: #4d4d4d;
		@include md {
			width: 90%;
		}
		@include sm {
			width: 100%;
		}
		tr {
			th {
				padding: 8px 15px;
				width: 210px;
				color: #FFFFFF;
				text-align: center;
				border-bottom: 1px solid #FFFFFF;
				background-color: #63b3f4;
				@include md {
					width: 110px;
				}
			}
			td {
				padding: 8px 15px;
				border-right: 0.5px solid #63b3f4;
				border-bottom: 1px dotted #63b3f4;
				text-align: right;
			}
			&:nth-child(1) {
				th {
					color: #4d4d4d;
					background-color: initial;
				}
				td {
					text-align: center;
					font-weight: bold;
					border-bottom: 2px solid #63b3f4;
				}
			}
//			二行目の背景をブルーに
			&:nth-of-type(2) td{
			background-color: #ebf5fe;}
		}
	}
}


/*-----------------voice-----------------*/
#voice {
	background-color: #fdeef2;
	padding: 5.5rem 0 12.5rem;
	position: relative;
	@include xs {
		padding: 4rem 0 10rem;
	}
	h2 {
		margin-bottom: 3rem;
		@include md {
			margin-bottom: 4rem;
		}
	}
	p {
		margin-bottom: 0;
		text-align: justify;
	}
	.voice-box {
		&:first-child {
		padding: 0 2rem 0 10rem;
		@include lg {
			padding-left: 4rem;
		}
		@include md {
			padding-left: 2rem;
		}
		@include sm {
			padding: 0 1rem;
			margin-bottom: 2rem;
		}
		@include xs {
			padding: 0 2rem;
		}
		}
		&:last-child {
		padding: 0 10rem 0 2rem;
		@include lg {
			padding-right: 4rem;
		}
		@include md {
			padding-right: 2rem;
		}
		@include sm {
			padding: 0 1rem;
		}
		@include xs {
			padding: 0 2rem;
		}
		}
	}
	.comment {
		background-color: #fff;
		color: #4d4d4d;
		padding: 3rem;
		border-radius: 21px;
		box-shadow: 4px 4px 5px rgba(0,0,0,0.2);
	}
	.decorate {
		img {
			position: absolute;
			&:first-child {
				top: -12%;
				left: 3%;
				width: 120px;
				@include lg {
					top: -10%;
					left: 3%;
					width: 100px;
				}
				@include md {
					top: -8%;
					width: 80px;
				}
				@include sm {
					top: -6%;
					width: 70px;
				}
				@include xs {
					top: -4%;
					left: 2%;
					width: 60px;
				}
			}
			&:last-child {
				bottom: 3%;
				right: 3%;
				width: 120px;
				@include lg {
					bottom: 2%;
					right: 1%;
					width: 80px;
				}
				@include md {
					width: 70px;
				}
				@include sm {
					width: 60px;
				}
				@include xs {
					bottom: 1%;
				}
			}
		}
	}
}