@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:#009d42;
$bright-green:#4cba7b;
$soft-green:#bde2c9;
$orange:#f3ac00;
$soft-orange:#e8b86d;
$light-yellow:#fff8a1;
$pale-yellow:#f8f9e0;

#page-nav{
	ul{
		width: 70%;
		margin: 0 auto;
	}
}

.site-header {
	background-color: #fff!important;
}

#header{
	background: #efcd99 url("../img/header-guide.jpg") center / cover;
}

#wrapper{
	overflow: hidden;
}

#to-use{
	position: relative;
	padding-bottom: 12rem;
	background:$pale-yellow; 
	@include md{padding-bottom: 10rem;}
	@include sm{padding-bottom: 7rem;}
	@include xs{padding-bottom: 5rem;}
	&::after{
		content: "";
		position: absolute;
		bottom: -2px;
		width: 100%;
		height: 5.7vw;
		background-image: url("../../img/wave-white-top.svg");
		background-size: contain;
		background-repeat: no-repeat;
		left: 50%;
		transform: translateX(-50%);
	}
	dl{
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0,0,0,0.1);
		padding: 2.5rem 3rem;
		margin-bottom: 40px;
		position: relative;
		@include sm{margin-bottom: 30px;}
		&:not(:last-of-type)::after {
		  content: "";
		  position: absolute;
		  bottom: 0;
		  left: 50%;
		  border-style: solid;
		  border-width: 26px 26px 0 26px;
		  border-color: #80cea0 transparent transparent;
		  translate: -50% 100%;
			@include sm{
				border-width: 18px 18px 0 18px;
			}
		}
		dt{
			font-size: 25px;
			font-size: 2.5rem;
			font-weight: 700;
			color: $color-main;
			line-height: 1.5em;
		}
		dd{
			margin-bottom: 0;
			line-height: 1.5em;
		}
	}
}

#price{
	position: relative;
	padding-top: 2rem;
	padding-bottom: 13rem;
	@include md{
		padding-bottom: 10rem;
	}
	@include xs{padding-bottom: 5rem;}
	&::after{
		content: "";
		position: absolute;
		bottom: -2px;
		width: 100%;
		height: 5.7vw;
		background-image: url("../../img/wave-yellow-top.svg");
		background-size: contain;
		background-repeat: no-repeat;
		left: 50%;
		transform: translateX(-50%);
	}
	.price-list{
		margin-bottom: 3rem;
		h4{
			font-size: 25px;
			font-size: 2.5rem;
			font-weight: 700;
			color: $color-main;
			margin-bottom: 1rem;
			span{
				font-size: 16px;
				font-size: 1.6rem;
				font-weight: 400;
				color: #513619;
			}
		}
		.table-wrap{
			margin-bottom: 2rem;
			overflow-x: auto;
			table{
				width: 100%;
				border: 2px solid $color-main;
				@include sm{
					min-width: 680px;
				}
				.sub-th{
					width: 23%;
					@include md{width: 20%;}
				}
				th,td{
					border: 1px solid $color-main;
					padding: 0.75rem 2rem;
					line-height: 1.35em;
					white-space: nowrap;
					@include sm{padding: 0.75rem 1rem;}
				}
				th{
					font-weight: 400;
					background: #cedf9f;
				}
			}
			.scroll-hint-icon-wrap{
				.scroll-hint-icon{
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
					margin: auto;
					height: 100px;
				}
			}
		}
	}
	.price-other{
		h5{
			font-size: 20px;
			font-size: 2rem;
			font-weight: 700;
			color: $color-main;
			margin-bottom: 1rem;
		}
		ul{
			list-style: none;
			padding: 0;
			li{
				line-height: 1.75em;
				&::before {
					content: "";
					display: inline-block;
					width: 13px;
					height: 13px;
					background-color: #a1d6b2;
					border-radius: 50%;
					margin-right: 0.5rem;
				}
			}
		}
		p{
			font-size: 12px;
			font-size: 1.2rem;
			line-height: 1.75em;
		}
	}
}

#contact-banner{
	padding: 7rem 0 10rem;
	background:$pale-yellow; 
	@include md{padding: 5rem 0 5rem;}
	@include xs{padding: 3rem 0 3rem;}
	.banner-content{
		display: flex;
		gap: 2rem;
		align-items: center;
		background: $color-main;
		border-radius: 10px;
		margin-bottom: 3rem;
		padding: 2rem;
		box-shadow: 0 0 10px rgba(0,0,0,0.2);
		transition: 0.2s ease-in-out;
		@include sm{
			padding: 1.5rem;
		}
		&:hover{
			background: #4cba7b;
		}
		.text , .image {flex: 1;}
		.text{
			@include xs{text-align: center;}
			p{
				font-size: 35px;
				font-size: 3.5rem;
				line-height: 1.35em;
				color: #fff;
				border-bottom: dotted 3px #fff;
				display: inline-block;
				font-weight: 700;
				@include sm{
					font-size: 30px;
					font-size: 3rem;
				}
				@include xs{
					font-size: 28px;
					font-size: 2.8rem;
				}
			}
		}
		.image{
			height: 170px;
			overflow: hidden;
			@include md{
				height: 120px;
			}
			@include sm{
				height: 120px;
			}
			@include xs{display: none;}
			img {
				border-radius: 10px;
				width: 100%;
				height: 100%;
				object-fit: cover;
				mask-image: linear-gradient(to right, black 0%, black 70%, transparent 100%);
				-webkit-mask-image: linear-gradient(to right, black 0%, black 70%, transparent 100%);
			}
		}
	}
}