@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;

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

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

#about-us{
	position: relative;
	padding-bottom: 15rem;
	background:$pale-yellow; 
	overflow: hidden;
	@include md{padding-bottom: 12rem;}
	@include sm{padding-bottom: 10rem;}
	@include xs{padding-bottom: 7rem;}
	&::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%);
	}
	img{
		border-radius: 20px;
		@include sm{margin-top: 2rem;}
	}
}

#facility{
	position: relative;
	padding-bottom: 15rem;
	overflow: hidden;
	@include md{padding-top: 2rem;}
	@include sm{padding-bottom: 12rem;}
	@include xs{padding-bottom: 7rem;}
	.facility-img{
		text-align: center;
		img{
			width: 80%;
			margin-bottom: 5rem;
			@include sm{width: 100%;}
		}
	}
	table{
		margin-bottom: 5rem;
		@include sm{margin-bottom: 4rem;}
		@include xs{margin-bottom: 3rem;}
		tr{
			border-top: $color-main 1px solid;
			border-bottom: $color-main 1px solid;
			th{
				vertical-align: top;
				font-weight: 400;
				width: 20%;
				@include xs{width: 25%;}
			}
			th,td{
				padding: 1.5rem 0;
				line-height: 1.75em;
			}
		}
	}
	.link-box{text-align: center;}
	&::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%);
	}
}

#office{
	padding-bottom: 7rem;
	background:$pale-yellow; 
	overflow: hidden;
	@include md{padding-top: 2rem;}
	@include sm{padding-bottom: 7rem;}
	table{
		width: 100%;
		@include sm{margin-bottom: 3rem;}
		tr{
			border-top: $color-main 1px solid;
			border-bottom: $color-main 1px solid;
			th{
				vertical-align: top;
				font-weight: 400;
				width: 20%;
			}
			td{
				a{
					color: inherit;
  					text-decoration: none;
				}
			}
			th,td{
				padding: 1rem 0;
				line-height: 1.5em;
			}
		}
	}
	iframe{
		width: 100%; //横幅を100%
		border-radius: 10px;
		aspect-ratio: 16/9;
		@include md{aspect-ratio: 4/3;}
		@include sm{aspect-ratio: 16/9;}
	}
}