@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-service.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#service {
	margin-bottom: 8rem;
	@include md {
		margin-bottom: 6rem;
	}
	@include xs {
		margin-bottom: 4rem;
	}
	.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);/*線の色*/
			}
		}
	}
	.main-img {
		width:100vw;
		img {
		margin-bottom: 5rem;
		width:100vw;
		margin-right: calc(50% - 50vw);
		}
	}
	.main-img2 {
		margin-left: calc(50% - 50vw);
		img {
		margin-bottom: 5rem;
		}
	}
	h3 {
		display: inline-block;
		font-size: 30px;
		font-size: 3rem;
		font-weight: 500;
		border-bottom: solid 3px $color-main;
		padding-bottom: 3px;
		margin-top: 0;
		margin-bottom: 30px;
		@include xs {
			font-size: 26px;
			font-size: 2.6rem;
			margin-bottom: 2rem;
		}
	}
	h4 {
		background-color: #ff9632;
		border-radius: 150px;
		position: relative;
		margin-bottom: 15px;
		line-height: 80px;
		color: #fff;
		text-align: left;
		padding-left: 90px;
		font-size: 3rem;
		margin-top: 0;
		@include sm {
			line-height: 65px;
			padding-left: 65px;
			font-size: 25px;
			font-size: 2.5rem;
		}
		@include xs {
			line-height: 6rem;
			padding-left: 6rem;
			font-size: 20px;
			font-size: 2rem;
		}
		&::before {
			content: '';
			width: 60px;
			background-image: url(../img/mark.svg);
			background-repeat: no-repeat;
			position: absolute;
			left: 15px;
			top: 10px;
			bottom: 10px;
			@include sm {
				width: 50px;
				left: 10px;
				top: 8px;
			}
		}
	}
} 
.kaizen {
	li {
		padding: 0 0.5rem 0.5rem;
		p {
			font-size: 20px;
			font-size: 2rem;
			color: #ff8228;
			background-color: #fff4ea;
			border: 3px solid $color-main;
			height: 100px;
			padding: 0 3rem;
			display: flex;
			align-items: center;
			@include sm {
				height: 85px;
			}
			@include xs {
				height: 75px;
				font-size: 18px;
				font-size: 1.8rem;
			}
		}
	}
}




//-------------------- katakori --------------------
.headache {
	margin-bottom: 5rem;
	@include xs {
		margin-bottom: 4rem;
	}
	li {
		font-size: 23px;
		font-size: 2.3rem;
		margin-bottom: 1.5rem;
		padding-left: 1.4em;
		text-indent: -1.3em;
		font-weight: 500;
		@include md {
			font-size: 20px;
			font-size: 2rem;
			margin-bottom: 1rem;
		}
		@include xs {
			font-size: 16px;
			font-size: 1.6rem;
			margin-bottom: 0.5rem;
		}
		&::before {
			font-family: "Font Awesome 5 Free";
			content: "\f00c";
			padding-right: 5px;
			font-weight: 900;
		    color: #ff9632;
		}
	}
	img {
		width: 85%;
		@include md {
			width: 90%;
		}
		@include sm {
			width: 60%;
		}
		@include xs {
			width: 75%;
		}
	}
	p {
		margin-top: 2rem;
		text-align: justify;
		@include xs {
			line-height: 1.7;
		}
	}
}

//-------------------- kotsuban --------------------
.kotsuban {
	margin-bottom: 5rem;
	@include xs {
		margin-bottom: 4rem;
	}
	h3 {
		@include xs {
			display: block!important;
		}
	}
	li {
		font-size: 22px;
		font-size: 2.2rem;
		margin-bottom: 1.5rem;
		font-weight: 500;
		@include md {
			font-size: 20px;
			font-size: 2rem;
			margin-bottom: 1rem;
		}
		@include xs {
			font-size: 16px;
			font-size: 1.6rem;
			margin-bottom: 0.5rem;
		}
		&::before {
			font-family: "Font Awesome 5 Free";
			content: "\f00c";
			padding-right: 5px;
			font-weight: 900;
		    color: #ff9632;
		}
	}
	p {
		text-align: justify;
	}
	h4{
		margin-top: 4rem!important;
		margin-bottom: 2rem!important;
	}
	.pelvis {
		margin-bottom: 3rem;
		img {
			width: 70%;
			@include lg {
				width: 75%;
			}
			@include md {
				width: 90%;
			}
			@include xs {
				width: 80%;
				margin-top: 1rem;
			}
		}
	}
	.kids-space {
		align-items: center;
		h5 {
			display: inline-block;
			font-size: 35p;
			font-size: 3.5rem;
			color: #ff9632;
			border-bottom: solid 2px #ff9632;
			font-weight: 500;
			@include sm {
				margin-top: 2rem;
				font-size: 30px;
				font-size: 3rem;
			}
			@include xs {
				margin-top: 2rem;
				font-size: 26px;
				font-size: 2.6rem;
			}
		}
		p {
			font-size: 20px;
			font-size: 2rem;
			font-weight: 500;
			@include sm {
				text-align: center;
				font-size: 18px;
				font-size: 1.8rem;
			}
			@include xs {
				text-align: center;
				font-size: 16px;
				font-size: 1.6rem;
			}
		}
		img {
			@include sm {
				width: 80%;
			}
			@include xs {
				width: 100%;
			}
		}
	}
}


//-------------------- youtsuu --------------------
.youtsuu {
	margin-bottom: 4rem;
	h3 {
		@include xs {
			display: block!important;
		}
	}

	li {
		font-size: 22px;
		font-size: 2.2rem;
		margin-bottom: 1.5rem;
		font-weight: 500;
		@include md {
			font-size: 20px;
			font-size: 2rem;
			margin-bottom: 1rem;
		}
		@include xs {
			font-size: 16px;
			font-size: 1.6rem;
			margin-bottom: 0.5rem;
		}
		&::before {
			font-family: "Font Awesome 5 Free";
			content: "\f00c";
			padding-right: 5px;
			font-weight: 900;
		    color: #ff9632;
		}
	}
}
#service  {
	h4.long {
		@include sm {
			line-height: 1.3;
			padding: 10px 10px 10px 8.5rem;
			&::before {
				width: 55px;
				left: 10px;
				top: 10px;
			}			
		}
	}
}


//-------------------- sport --------------------
.sport {
	margin-bottom: 5rem;
	h3 {
		@include xs {
			font-size: 24px!important;
			font-size: 2.4rem!important;
			display: block!important;
		}
	}
	h5 {
		font-size: 25px;
		font-size: 2.5rem;
		font-weight: 500;
		@include xs {
			text-align: center;
			font-size: 21px;
			font-size: 2.1rem;
		}
	}
	.distinction {
		margin-bottom: 4rem;
		ul {
			border: solid 14px;
			border-radius: 5px;
			margin: 1rem 0 3rem;
			padding: 1.5rem 1.5rem 0.5rem;
			li {
				font-size: 20px;
				font-size: 2rem;
				font-weight: 500;
				margin-bottom: 1rem;
				@include xs {
					font-size: 18px;
					font-size: 1.8rem;
					margin-bottom: 0.75rem;
				}
				&::before {
					font-family: "Font Awesome 5 Free";
					content: "\f054";
					font-weight: 900;
					padding-right: 5px;
				}
			}
		}
		.color-p {
			h5 {
			color: #ff7b80;
			}
			ul {
				border: solid 14px #ffe5e6;
				@include sm {
					border: solid 10px #ffe5e6;
				}
				li {
					&::before {
						color: #ff7b80;
					}
				}
			}
		}
		.color-b {
			h5 {
			color: #0084e0;
			}
			ul {
				border: solid 14px #d3ecf9;
				@include sm {
					border: solid 10px #d3ecf9;
				}
				li {
					&::before {
						color: #0084e0;
					}
				}
			}
		}
	}
	.treatment {
		li {
			font-size: 22px;
			font-size: 2.2rem;
			margin-bottom: 1.5rem;
			font-weight: 500;
			@include md {
				font-size: 20px;
				font-size: 2rem;
				margin-bottom: 1rem;
			}
			@include xs {
				font-size: 16px;
				font-size: 1.6rem;
				margin-bottom: 0.5rem;
			}
			&::before {
				font-family: "Font Awesome 5 Free";
				content: "\f00c";
				padding-right: 5px;
				font-weight: 900;
				color: #ff9632;
			}
		}
	}
}
.reduce {
	ul {
		li {
			font-size: 18px;
			font-size: 1.8rem;
			color: $color-main;
    		position: relative;
			margin-bottom: 1rem;
			padding-left: 2em;
			&::before {
				content: '';
				background-image: url(../img/number-01.svg);
				background-repeat: no-repeat;
				width: 25px;
				height: 25px;
				position: absolute;
				left: 0;
				top: 2px;
			}
			&:nth-child(1) {
				&::before {
					background-image: url(../img/number-01.svg);
				}
			}
			&:nth-child(2) {
				&::before {
					background-image: url(../img/number-02.svg);
				}
			}
			&:nth-child(3) {
				&::before {
					background-image: url(../img/number-03.svg);
				}
			}
		}
	}
}