@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;
  }
}
//ブレイクポイントを指定------ここまで

//メインカラー指定
$color-main: #ff9632;
$color-mainhalf: #ffca98;
$color-sub: #f1f2ed;
$color-font: #42210b;

#wrapper{
	overflow: hidden;
}


//メインビジュアル　施術・料金表
section.title-img {
	background: url(../img/header-price.jpg);
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
//メインビジュアル　施術・料金表------ここまで
//アクセス
.access-box {
	text-align: center;
	padding-bottom: 10rem;
	@include md {
		padding: 0rem 5rem 10rem 5rem;
	}
	@include xs {
		padding: 0rem 1.5rem 10rem 1.5rem;
	}
	.h2-title {
		text-align: center;
		h2{
			position: relative;
			display: inline-block;
			margin: 7rem auto;
			padding-bottom: 4rem;
			font-size: 30px;
			font-size: 3rem;
			font-weight: 400;
			letter-spacing: 0.1em;
			@include sm {
				padding-bottom: 3rem;
			}
			@include xs {
				font-size: 26px;
				font-size: 2.6rem;
				padding-bottom: 2rem;
				margin: 5rem auto;
			}
			&::before {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;/*線の上下位置*/
				display: inline-block;
				width: 135px;/*線の長さ*/
				height: 1px;/*線の太さ*/
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);/*位置調整*/
				background-color: rgba(0,0,0,0.5);/*線の色*/
			}
		}
	}
	.access-p {
		text-align: left;
		.access-img img {
			@include md {
				width: 100%;
			}
		}
		.access-text p {
			@include xs {
				padding-bottom: 2rem;
			}
		}
	}
}
//アクセス------ここまで
//施術の流れ
section#flow{
	.bg-color-surgery {
		background-color: #fff4ea;
		padding-bottom: 6rem;
		text-align: center;
		@include lg {
			padding: 6rem 4rem;
			padding-top: 0rem;
		}
		@include md {
			padding: 6rem 9rem;
			padding-top: 0rem;
		}
		@include sm {
			padding: 6rem 6rem;
			padding-top: 0rem;
		}
		.h2-title{
			text-align: center;
			h2{
				position: relative;
				display: inline-block;
				margin: 7rem auto;
				padding-bottom: 4rem;
				font-size: 30px;
				font-size: 3rem;
				font-weight: 400;
				letter-spacing: 0.1em;
				@include sm {
					padding-bottom: 3rem;
				}
				@include xs {
					font-size: 26px;
					font-size: 2.6rem;
					padding-bottom: 2rem;
					margin: 5rem auto;
				}
				&::before {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;/*線の上下位置*/
					display: inline-block;
					width: 135px;/*線の長さ*/
					height: 1px;/*線の太さ*/
					-webkit-transform: translateX(-50%);
					transform: translateX(-50%);/*位置調整*/
					background-color: rgba(0,0,0,0.5);/*線の色*/
				}
			}
		}
		.surgery-box {
			position: relative;
			margin-bottom: 5rem;
			.number {
				width: 4rem;
				position: absolute;
				left: 5rem;
				top: -1rem;
				@include md {
					left: 0rem;
				}
				@include sm {
					left: 8rem;
				}
				@include xs {
					left: 4rem;
				}
			}
			.ilust-size {
				@include md {
					width: 90%;
				}
				@include sm {
					width: 65%;
				}
			}
			.surgery_text {
				text-align: left;
				padding: 2rem 5rem 3.5rem 0rem;
				line-height: 1;
				@include md {
					padding:0.5rem 3rem;
				}
				@include sm {
					padding: 3.5rem 0rem 8.5rem 0rem;
				}
				h2 {
					color: #FF8C28;
					font-size: 25px;
					font-size: 2.5rem;
					font-weight: 500;
					@include md {
						font-size: 1.9rem;
						font-size: 19px;
					}
					@include sm {
						text-align: center;
					}
					@include xs {
						font-size: 2rem;
						font-size: 20px;
					}
				}
				p {
					font-size: 20px;
					font-size: 2rem;
					font-weight: 400;
					line-height: 1.8;
					@include md {
						font-size: 1.5rem;
						font-size: 15px;
					}
					@include sm {
						text-align: center;
					}
					@include xs {
						font-size: 1.5rem;
						font-size: 15px;
					}
					div:nth-child(1) {
						padding-top: 0rem;
					}
				}
			}
		}
	}
}
//施術の流れ------ここまで
//料金表
.price {
	text-align: center;
	padding-top: 6rem;
	@include lg {
		padding: 6rem 8rem;
	}
	@include xs {
		padding: 6rem 4rem;
	}
	.h2-title{
		text-align: center;
		h2{
			position: relative;
			display: inline-block;
			margin: 7rem auto;
			padding-bottom: 4rem;
			font-size: 30px;
			font-size: 3rem;
			font-weight: 400;
			letter-spacing: 0.1em;
			@include sm {
				padding-bottom: 3rem;
			}
			@include xs {
				font-size: 26px;
				font-size: 2.6rem;
				padding-bottom: 2rem;
				margin: 5rem auto;
			}
			&::before {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;/*線の上下位置*/
				display: inline-block;
				width: 135px;/*線の長さ*/
				height: 1px;/*線の太さ*/
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);/*位置調整*/
				background-color: rgba(0,0,0,0.5);/*線の色*/
			}
		}
	}
	table {
		width: 100%;
		margin-bottom:15rem;
		tr {
			border: 1px solid #000000;
			border-left: none;
			border-right: none;
			font-size: 20px;
			font-size: 2rem;
			td {
				padding:2rem 6rem 2rem 0rem;
				text-align: right;
				width: 25%;
				@include sm {
					font-size: 18px;
					font-size: 1.8rem;
				}
				@include xs {
					padding: 0rem 1rem 0rem 0rem;
					width: 10%;
				}
			}
			th {
				padding:2rem 0rem 2rem 3rem;
				text-align: left;
				width: 75%;
				font-weight: 500;
				border: 0.2px solid #C9CACA;
				border-left: none;
				border-top: none;
				border-bottom: none;
				@include lg {
					width: 55%;
				}
				@include md {
					width: 45%;
				}
				@include sm {
					width: 20%;
					font-size: 18px;
					font-size: 1.8rem;
				}
				@include xs {
					padding: 2rem 0rem 2rem 1rem;
					width: 9%;
				}
			}
		}
	}
}
//料金表------ここまで