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

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@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;
  }
}
//ブレイクポイントを指定------ここまで

.header-img{
	background: url(../img/header-img.jpg), linear-gradient(90deg, #51c2d5 0%, #4be4c5 100%);
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    height: 400px;
    margin-top: 10rem;
    position: relative;
	@include sm {
		height: 300px;
		margin-top: 6rem;
	}
	@include xs {
		height: 250px;
		margin-top: 3rem;
	}
	h1{
		font-family: 'Kiwi Maru', serif;
		font-size: 6rem;
		font-size: 60px;
		color: white;
		position: absolute;
		top: 50%;
		bottom: 0;
		left: 10%;
		margin: auto;
		@include xs {
			font-size: 4.5rem;
			font-size: 45px;
			left: 0;
			right: 0;
			text-align: center;
		}
		span{
			font-size: 3rem;
			font-size: 30px;
			padding-left: 2rem;
			@include xs {
				font-size: 2.5rem;
				font-size: 25px;
			}
		}
	}
}
//header-img----------------------------ここまで
nav{
	margin: 10rem 0 5rem;
	@include md {
		margin: 5rem 0 4rem;
	}
	@include xs {
		margin: 3rem 0;
	}
	ul{
		li{
			@include xs {
				padding: 0 1rem!important;
			}
			a{
				font-size: 2.4ren;
				font-size: 24px;
				font-weight: 500;
				text-align: center;
				color: #FFFFFF;
				background: linear-gradient(90deg, #fffe00 0%, #4BE4C5 100%);
				border-radius: 1rem;
				margin-bottom: 1.5rem;
				padding: 2.5rem;
				position: relative;
				display: block;
				transition: all 0.3s ease-out;
				overflow: hidden;
				@include sm {
					font-size: 2ren;
					font-size: 20px;
					padding: 1.5rem;
					margin-bottom: 1rem;
				}
				@include xs {
					font-size: 1.5ren;
					font-size: 15px;
					padding: 1rem;
					letter-spacing: -0.3px;
				}
				&:hover{
					color: #FFFFFF;
				}
				&:hover::before{
					opacity: 0;
				}
				&::before{
					content: '';
					background: linear-gradient(90deg, #51C2D5 0%, #4BE4C5 100%);
					height: 100%;
					left: 0;
					position: absolute;
					top: 0;
					transition: all 0.3s ease-out;
					width: 100%;
				}
				&::after{
					font-family: "Font Awesome 5 Free";
					content: "\f105";
					font-weight: 900;
					color: white;
					position: absolute;
					right: 5%;
				}
				span{
					position: relative;
				}
			}
		}
	}
}
//nav-link------------------------------ここまで

.anchor{
	display: block;
    padding-top: 250px;
    margin-top: -250px;
	@include sm {
		padding-top: 130px;
		margin-top: -130px;
	}
}
#beauty_acupuncture{
    padding-top: 250px;
    margin-top: -250px;
}
.blue-back{
	background-color: #F1FCFE;
	padding: 7rem 0 8rem;
	@include md {
		padding: 5rem 0 6rem;
	}
	@include xs {
		padding: 3rem 0 4rem;
	}
}
h2{
	font-family: 'Kiwi Maru', serif;
	font-size: 4.5rem;
	font-size: 45px;
	color: #51C2D5;
	font-weight: 300;
	margin-bottom: 3rem;
	@include xs {
		font-size: 3.5rem;
		font-size: 35px;
		margin-bottom: 2rem;
	}
	span{
		font-size: 3.5rem;
		font-size: 35px;
		@include xs {
			font-size: 2.5rem;
			font-size: 25px;
		}
	}
}
.price{
	margin-top: 5rem;
	h3{
		font-size: 4rem;
		font-size: 40px;
		color: #51C2D5;
		font-weight: 400;
		@include xs {
			font-size: 3.5rem;
			font-size: 35px;
			line-height: 3rem;
		}
		span{
			padding-left: 1em;
			font-size: 1.6rem;
			font-size: 16px;
			color: #828282;
			@include xs {
				padding-left: 0;
			}
		}
	}
	table{
		margin-top: 2rem;
		border: 2px solid #51C2D5;
		width: 100%;
		tr{
			th{
				font-size: 2.1rem;
				font-size: 21px;
				font-weight: normal;
				color: white;
				border-bottom: 1px solid white;
				background: #51C2D5;
				padding: 1.5rem 4rem;
				width: 70%;
				@include md {
					padding: 1rem 2rem;
					font-size: 1.8rem;
					font-size: 18px;
				}
				@include sm {
					display: block;
					width: 100%;
					border: none;
				}

				span{
					font-size: 1.6rem;
					font-size: 16px;
				}
			}
			th.skyblue{
				background: #B9E7EE;
				color: #828282;
			}
			th.skyblue + td{
				background: #B9E7EE;
				border-top: 1px solid white;
				border-bottom: 1px solid white;
			}
			th.gray{
				background: #828282;
			}
			th.gray-2{
				background: #E6E6E6;
				color: #828282;
			}
			td{
				font-size: 2.1rem;
				font-size: 21px;
				text-align: right;
				border-bottom: 1px solid #51C2D5;
				background: white;
				padding: 1.5rem 4rem;
				width: 30%;
				@include md {
					padding: 1rem 2rem;
					font-size: 1.8rem;
					font-size: 18px;
				}
				@include sm {
					display: block;
					width: 100%;
					border: none;
				}
			}
		}
	}
}
//共通パーツ------------------------------ここまで

#o2box{
	dl.point{
		background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%);
		display: flex;
		align-items: center;
		margin: 3rem 0;	
		@include sm {
			display: block;
			padding: 2rem 0;
		}
		@include xs {
			padding: 2rem;
			background: white;
			border-radius: 1rem;
		}
		dt{
			padding-right: 3rem;
			@include md {
				padding-right: 0rem;
			}
			p{
				position: relative;
				font-size: 2.3rem;
				font-size: 23px;
				line-height: 3.5rem;
				font-weight: 500;
				color: white;
				display: inline-block;
				width: 156px;
				height: 156px;
				border-radius: 50%;
				background: linear-gradient(0deg, #51C2D5 0%, #4BE4C5 100%);
				@include md {
					font-size: 1.8rem;
					font-size: 18px;
					line-height: 2.5rem;
					width: 120px;
					height: 120px;
				}
				@include sm{
					width: auto;
					height: auto;
					padding: 1.5rem 4rem;
					border-radius: 5rem;
				}
				@include xs{
					font-size: 2rem;
					font-size: 20px;
					display: block;
					text-align: center;
				}
				span{
					position: absolute;
					display: inline-block;
					left: 0;
					top: 50%;
					-webkit-transform: translateY(-50%);
					transform: translateY(-50%);
					width :156px;
					text-align:center;
					@include md {
						width: 120px;
					}
					@include sm {
						position: inherit;
						transform: inherit;
						width: auto;
						display: block;
					}
				}
			}
		}
		dd{
			ul{
				margin-bottom: 0;
				li{
					font-size: 2.1rem;
					font-size: 21px;
					line-height: 4rem;
					@include md {
						font-size: 1.8rem;
						font-size: 18px;
						line-height: 3rem;
					}
					@include sm {
						font-size: 1.6rem;
						font-size: 16px;
						line-height: 3rem;
					}
					@include xs {
						font-size: 1.8rem;
						font-size: 18px;
						line-height: 3.5rem;
						text-align: center;
					}
				}
			}
		}
	}
	p + figure{
		img{
			width: 100%;
		}
	}
	section:not(.price){
		h3{
			background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 50%, rgba(255, 255, 255, 0) 100%);
			font-size: 2.5rem;
			font-size: 25px;
			color: #51C2D5;
			font-weight: 400;
			text-align: center;
			padding: 2rem 0;
			margin: 4rem 0 2rem;
		}
		div.row{
			dl{
				margin: 3rem 0 5rem;
				@include xs {
					margin: 2rem 0;
				}
				dt{
					background: #2DAF94;
					color: white;
					display: inline-block;
					font-size: 2.1rem;
					font-size: 21px;
					padding: 0.5rem 2rem;
					margin-bottom: 1rem;
				}
				dd{
					ul{
						margin-bottom: 3rem;
						li{
							text-indent: -1em;
							padding-left: 1em;
							&::before{
								content: "・";
							}
						}
					}
				}
			}
			dl + dl{
				@include xs {
					margin-bottom: 5rem;
				}
				dt{
					background: #51C2D5;
				}
			}
			p + div{
				dl{
					background: white;
					border-radius: 0.5rem;
					padding: 2rem 3rem;
					margin: 0 0 2rem;
					display: flex;
					align-items: center;
					@include xs {
						padding: 1.5rem;
					}
					dt{
						background: none;
						width: 30%;
						margin: 0;
						padding: 0 2rem 0 0;
					}
					dd{
						h4{
							font-size: 2.1rem;
							font-size: 21px;
							color: #51C2D5;
							line-height: 3rem;
						}
						p{
							margin: 0;
							@include xs {
								font-size: 1.5rem;
								font-size: 15px;
								line-height: 2.5rem;
							}
							span{
								font-size: 1.7rem;
								font-size: 17px;
								color: #51C2D5;
							}
						}
					}
				}
				dl + dl{
					h4,p span{
						color: #915752;
					}
				}
			}
			figure{
				margin-top: 5rem;
				@include sm {
					margin-top: 3rem;
				}
				@include xs {
					margin: auto;
					margin-top: 3rem;
				}
			}
			figure + div div figure + div{
				margin-top: 5rem;
				@include sm {
					margin-top: 3rem;
				}
				h4{
					font-size: 2.1rem;
					font-size: 21px;
					color: #51C2D5;
					line-height: 3rem;
				}
				h4 + ul{
					margin-top: 2rem;
					li::before{
						content: "●";
						color: #51C2D5;
					}
				}
				ul + p{
					font-size: 1.4rem;
					font-size: 14px;
					margin-bottom: 2rem;
				}
			}
		}
	}
}
//o2box---------------------------------ここまで

#bodycare{
	div.container{
		padding: 7rem 1.5rem;
		@include md {
			padding: 5rem 1.5rem 6rem;
		}
		h2{
			margin-bottom: 3rem;
		}
		h2 + figure{
			margin-bottom: 5rem;
			img{
				width: 100%;
			}
		}
		div.row dl{
			margin-bottom: 5rem;
			dt{
				font-family: 'Kiwi Maru', serif;
				font-weight: 400;
				padding-left: 0.5em;
				color: #51C2D5;
				font-size: 3rem;
				font-size: 30px;
				margin: 0 0 2rem 0.5em;
				border-left: 1px solid #51C2D5;
			}
		}
		div.row + dl{
			dt{
				padding-left: 1em;
				margin: 0 0 2rem 1em;
				border-left: 2px solid #51C2D5;
				line-height: 3.5rem;
			}
			dt span{
				font-family: 'Kiwi Maru', serif;
				font-weight: 400;
				color: #51C2D5;
				font-size: 2.3rem;
				font-size: 23px;
			}
			dt span + br + span{
				font-family: 'Noto Sans JP';
				font-weight: 500;
				color: #51C2D5;
				font-size: 3.5rem;
				font-size: 35px;
			}
			dd{
				figure{
					img{
						width: 100%;
					}
				}
			}
		}
	}
	.price table tr:nth-child(2) td{
		border-bottom:1px solid white;
	}
}
//bodycare------------------------------ここまで

#cupping{
	.content-1{
		p{
			margin-right: 2rem;
			@include xs {
				margin-right: 0;
			}
		}
		p + p{
			font-size: 1.8rem;
			font-size: 18px;
			font-weight: bold;
			margin: 2rem 0;
		}
		figure{
			margin-right: 2rem;
		}
		figure + p{
			font-size: 2.1rem;
			font-size: 21px;
			color: #51C2D5;
			font-weight: 500;
			text-decoration: underline;
			display: flex;
			justify-content: flex-end;
			margin-right: 2rem;
			@include sm {
				margin: 0 0 3rem;
			}
		}
		img{
			width: 100%;
		}
	}
	.content-2{
		margin-top: 6rem;
		div + div p{
			font-size: 1.8rem;
			font-size: 18px;
			font-weight: bold;
			@include xs {
				margin-top: 1rem;
			}
		}
		ul{
			display: flex;
			justify-content: space-between;
			@include xs {
				flex-wrap: wrap;
			    justify-content: center;
			}
			li{
				width: 20%;
				margin-right: 2rem;
				@include xs {
					width: 30%;
					margin: 0 0.5rem;
				}
				figure{
					img{
						width: 100%;
					}
					figcaption{
						font-size: 1.8rem;
						font-size: 18px;
						text-align: center;
					}
				}
			}
			li:last-child{
				margin-right: 0;
			}
		}
	}
	.content-3{
		background: white;
		border-radius: 1rem;
		padding: 3rem 2rem;
		margin-top: 3rem;
		dl{
			dt{
				font-family: 'Kiwi Maru', serif;
				font-weight: 400;
				padding-left: 0.5em;
				color: #51C2D5;
				font-size: 3rem;
				font-size: 30px;
				margin: 0 0 2rem 0.5em;
				border-left: 1px solid #51C2D5;
			}
		}
		dl + figure{
			    margin: 0;
				padding-left: 5rem;
				@include sm {
					padding: 1rem 1rem 0;
				}
			img{
				width: 100%;
			}
		}
	}
	.price table tr:nth-child(3) td{
		border-bottom:1px solid white;
	}
}
//cupping-------------------------------ここまで

#acupuncture{
	div.container{
		padding: 7rem 1.5rem;
		@include md {
			padding: 5rem 1.5rem 6rem;
		}
		@include xs {
			padding: 3rem 1.5rem 4rem;
		}
		img{
			width: 100%;
		}
		p + figure{
			padding-left: 3rem;
			margin-bottom: 8rem!important;
			@include xs {
				padding-left: 1.5rem;
			}
		}
		div{
			margin-bottom: 5rem;
			figure{
				margin-bottom: 3rem;
			}
			dl{
				dt{
					font-family: 'Kiwi Maru', serif;
					font-weight: 400;
					padding-left: 0.5em;
					color: #51C2D5;
					font-size: 3rem;
					font-size: 30px;
					margin: 0 0 2rem 0.5em;
					border-left: 1px solid #51C2D5;
				}
			}
		}
		div:nth-child(2n):not(.row){
			padding-left: 3rem;
			@include sm {
				padding-left: 1.5rem;
			}
		}
		div:nth-child(2n+1):not(.row){
			padding-right: 3rem;
			@include sm {
				padding-right: 1.5rem;
			}
		}
		div:last-child:not(.row){
			@include md {
				margin-bottom: 3rem;
			}
			@include xs {
				margin-bottom: 0rem;
			}
		}
		.price table tr:nth-child(3) td{
			border-bottom:1px solid white;
		}
		.price table + table tr:nth-child(2) td{
			border-bottom:1px solid white;
		}
	}
}
//acupuncture---------------------------ここまで

#smallfacecorrection{
	img{
		width: 100%;
	}
	.content-2{
		margin: 10rem 0;
		@include md {
			margin: 6rem 0;
		}
		figure{
			padding-right: 0;
			@include xs {
				padding: 0;
			}
		}
		dl{
			dt{
				font-family: 'Kiwi Maru', serif;
				font-weight: 400;
				padding-left: 0.5em;
				color: #51C2D5;
				font-size: 3rem;
				font-size: 30px;
				margin: 0 0 2rem 0.5em;
				border-left: 1px solid #51C2D5;
			}
		}
	}
	.price table tr:nth-child(2) td{
		border-bottom:1px solid white;
	}
	.price table + table tr:nth-child(2) td{
		border-bottom:1px solid #51C2D5;
	}
	.price table + table tr:nth-child(3) td{
		border-bottom:1px solid white;
	}
}
//smallfacecorrection-------------------ここまで

#mugwortsteamed{
	div.container{
		padding: 7rem 1.5rem 15rem;
		@include sm {
			padding: 5rem 1.5rem 20rem;
		}
		@include xs {
			padding: 3rem 1.5rem 25rem;
		}
		.content-1{
			img{
				width: 100%;
			}
		}
		dl.content-2{
			background: #EEFCFA;
			padding: 3rem;
			border-radius: 1rem;
			margin-top: 3rem;
			@include xs {
				padding: 2rem;
			}
			dt{
				display: inline-block;
				background: linear-gradient(0deg, #51C2D5 0%, #4BE4C5 100%);
				border-radius: 5rem;
				padding: 2rem 8rem;
				color: white;
				font-size: 2.3rem;
				font-size: 23px;
				font-weight: 500;
				@include sm {
					display: block;
					text-align: center;
					padding: 1.5rem;
				}
			}
			dd{
				padding: 2rem 2rem 0;
				@include sm {
					padding: 2rem 0 0;
				}
				p{
					font-size: 1.8rem;
					font-size: 18px;
				}
				ul{
					margin-bottom: 0;
					li{
						font-size: 2rem;
						font-size: 20px;
						font-weight: 500;
						margin-top: 0.5em;
						line-height: 2rem;
						@include sm {
							font-size: 1.5rem;
							font-size: 15px;
							padding: 0 1rem;
						}
						&::before{
							content: "●";
							color: #51C2D5;
						}
					}
				}
			}
		}
		dl + div ul{
			margin-top: 5rem;
			@include sm {
				margin-top: 3rem;
			}
			figure{
				figcaption{
					font-size: 2rem;
					font-size: 20px;
					font-weight: 500;
					text-align: center;
					margin-top: 2rem;
				}
			}
		}
		.price table tr:nth-child(1) td{
			border-bottom:1px solid white;
		}
	}
}
//smallfacecorrection-------------------ここまで

footer .clip-me2{
	margin-top: 0!important;
}