@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----------------------------ここまで

.anchor{
	display: block;
    padding-top: 250px;
    margin-top: -250px;
	@include sm {
		padding-top: 130px;
		margin-top: -130px;
	}
}
.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;
		}
	}
}
footer .footer-box {
    margin-top: -15rem;
}
//共通パーツ------------------------------ここまで

#concept{
	position: relative;
	.left-bubble{
		position: absolute;
		max-width: 80px;
		left: 0;
		bottom: 0;
		filter: drop-shadow(5px 5px 5px rgba(45, 175, 148, 0.3));
		@include xs {
			left: 5%;
			bottom: -5%;
		}
	}
	.right-bubble{
		position: absolute;
		max-width: 100px;
		top: 0;
		right: 0;
		filter: drop-shadow(5px 5px 5px rgba(45, 175, 148, 0.3));
		@include sm {
			max-width: 80px;
			top: -20%;
		}
		@include xs {
			top: -15%;
		}
	}
	img + p{
		font-family: 'Kiwi Maru', serif;
		font-size: 2.4rem;
		font-size: 24px;
		color: #2DAF94;
		line-height: 4rem;
		margin: 8rem 0;
		@include sm {
			margin: 6rem 0 4rem;
		}
		@include xs {
			margin: 5rem 0 3rem;
			font-size: 20px;
			font-size: 2rem;
			line-height: 3rem;
		}
	}
	.comment{
		margin-bottom: 15rem;
		@include sm {
			margin-bottom: 19rem;
		}
		@include xs {
			padding: 0;
		}
		.name-p{
			text-align: right;
			font-size: 1.6rem;
			font-size: 16px;
			color: #2DAF94;
			@include xs {
				font-size: 1.4rem;
				font-size: 14px;
				line-height: 2rem;
				margin-bottom: 0;
			}
		}
		.name-p + p{
			text-align: right;
			font-size: 2.4rem;
			font-size: 24px;
			@include xs {
				font-size: 2.2rem;
				font-size: 22px;
			}
		}
	}
}
//コンセプト------------------------------ここまで

#voice{
    clip-path: ellipse(145vh 120vh at 50% 120vh);
    background: #EEFCFA;
    margin-top: -12rem;
    padding: 8rem 0 25rem;
	@include sm {
		padding: 8rem 0 35rem;
	}
	@include xs {
		clip-path: ellipse(170vh 320vh at 50% 320vh);
		padding: 5rem 0 35rem;
	}
	h2{
		text-align: center;
		margin-bottom: 5rem;
		@include xs {
			margin-bottom: 3rem;
		}
	}
	h2 + div{
		p{
			font-family: 'Kiwi Maru', serif;
			display: inline-block;
			text-align: center;
			color: #51C2D5;
			font-size: 2.5rem;
			font-size: 25px;
			position: relative;
			&::before{
				content: '';
				position: absolute;
				top: 50%;
				display: inline-block;
				width: 40px;
				height: 3px;
				background-color: #51C2D5;
				-webkit-transform: rotate(60deg);
				transform: rotate(60deg);
				left: -60px;
				@include sm {
					left: -40px;
				}
				@include xs {
					line-height: 3.5rem;
				}
			}
			&::after{
				content: '';
				position: absolute;
				top: 50%;
				display: inline-block;
				width: 40px;
				height: 3px;
				background-color: #51C2D5;
				-webkit-transform: rotate(-60deg);
				transform: rotate(-60deg);
				right: -50px;
				@include sm {
					right: -30px;
				}
			}
		}
	}
	ul{
		margin-top: 2rem;
		@include xs {
			margin-top: 1rem;
			padding: 0;
		}
		li{
			background: white;
			border: 1px solid #51C2D5;
			border-radius: 1rem;
			padding: 2.5rem 4rem 1rem;
			margin-bottom: 1.5rem;
			@include xs {
				padding: 2rem 1.5rem 1rem;
			}
			p{
				span{
					display: block;
				}
			}
		}
	}
}
//お客様の声------------------------------ここまで