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

//カラー
$green: #22923b;
$yellow: #fff100;

//共通
section {
	h2 {
		font-family: "Josefin Sans", sans-serif;
		font-size: 45px;
		font-size: 4.5rem;
		color: $green;
		letter-spacing: 0.12em;
		text-align: center;
		margin-bottom: 0;
		line-height: 1;
        font-weight: 700;
		@include md {
			font-size: 40px;
			font-size: 4rem;
		}
		@include xs {
			font-size: 35px;
			font-size: 3.5rem;
		}
		span {
			display: block;
			font-family: "NotoSansCJKjp";
            font-weight: normal;
			font-size: 16px;
			font-size: 1.6rem;
			color: #4d4d4d;
			letter-spacing: 0.04em;
			margin-top: 2rem;
			@include xs {
				margin-top: 1.5rem;
			}
		}
	}
}

.inner {
    width: 85%;
    margin: auto;
	@include md {
		width: 100%;
	}
}

///*---------- recruit-top ----------*/
#recruit-top {
	position: relative;
	margin-bottom: 8rem;
	@include md {
		margin-bottom: 6rem;
	}
	@include xs {
		margin-bottom: 4rem;
	}
	.swiper-img {
		max-width: 100%;
		height: 816px;
		background-position: center;
		background-size: cover;
		@include xl {
			height: 800px;
		}
		@include lg {
			height: 640px;
		}
		@include md {
			height: 570px;
		}
		@include sm {
			height: 470px;
		}
		@include xs {
			height: 340px;
		}
	}
	.img1 {
		background-image: url("../img/recruit-main-1.jpg");
	}
	.img2 {
		background-image: url("../img/recruit-main-2.jpg");
	}
	.img3 {
		background-image: url("../img/recruit-main-3.jpg");
	}
	.recruit-copy {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		z-index: 2;
		h2 {
			font-family: "Noto Serif JP", serif;
			font-size: 67px;
			font-size: 6.7rem;
			font-weight: 900;
			letter-spacing: 0.04em;
			color: #fff;
			text-shadow: 0px 0px 12px rgba(21, 152, 49, 1);
			-webkit-filter: drop-shadow(0px 0px 2px $green);
			filter: drop-shadow(0px 0px 2px $green);
			margin: 0;
			text-align: center;
			line-height: 1;
			@include lg {
				font-size: 55px;
				font-size: 5.5rem;
			}
			@include md {
				font-size: 50px;
				font-size: 5rem;
			}
			@include sm {
				font-size: 45px;
				font-size: 4.5rem;
			}
			@include xs {
				font-size: 30px;
				font-size: 3rem;
				font-weight: bold;
				letter-spacing: 0;
			}
			span {
				display: block;
				font-family: "Noto Serif JP", serif;
				font-size: 30px;
				font-size: 3rem;
				color: #fff;
				letter-spacing: 0.1em;
				margin-top: 4rem;
				@include lg {
					font-size: 24px;
					font-size: 2.4rem;
					margin-top: 3.5rem;
				}
				@include md {
					font-size: 23px;
					font-size: 2.3rem;
				}
				@include sm {
					font-size: 20px;
					font-size: 2rem;
				}
				@include xs {
					font-size: 18px;
					font-size: 1.8rem;
					margin-top: 3rem;
					line-height: 1.7;
				}
			}
		}
	}
}



///*---------- MESSAGE ----------*/
#message {
	.message-bg {
		background-image: linear-gradient(90deg, rgba(91, 255, 86, 0.2), rgba(255, 241, 0, 0.2));
		padding: 6rem 0 5.5rem;
		text-align: center;
		@include xs {
			padding: 4rem 0;
		}
		h2 {
			margin-bottom: 3.5rem;
		}
		p {
			font-size: 19px;
			font-size: 1.9rem;
			font-weight: bold;
			text-align: center;
			margin-bottom: 2rem;
			line-height: 1.85;
			letter-spacing: 0.08em;
			span {
				color: $green;
			}
			@include md {
				font-size: 18px;
				font-size: 1.8rem;
			}
			@include xs {
				font-size: 16px;
				font-size: 1.6rem;
				text-align: justify;
				line-height: 1.75;
			}
		}
		img {
			width: 160px;
		}
	}
}


///*---------- ABOUT US ----------*/
#about {
	h2 {
		margin: 8rem 0 10rem;
		@include md {
			margin: 6rem 0 8rem;
		}
	}
	.feature {
		background-image: linear-gradient(90deg, rgba(51, 179, 59, 1), rgba(160, 231, 0, 1));
		padding-top: 1px;
		padding-bottom: 8rem;
		@include md {
			padding-bottom: 6rem;
		}
		@include xs {
			padding-bottom: 4rem;
		}
		.about-link {
			display: flex;
			align-items: center;
			background-image: url("../img/about-us.jpg");
			background-position: center;
			height: 240px;
			margin-top: -4.5rem;
			@include md {
				height: 200px;
			}
			@include xs {
				height: 180px;
			}
			ul {
				padding-left: 8rem;
				margin-bottom: 0;
				@include sm {
					padding-left: 6rem;
				}
				@include xs {
					padding-left: 4rem;
				}
				li {
					&:first-child {
						margin-bottom: 2rem;
					}
					&:hover {
						a {
							box-shadow: none;
							background-color: #1a1a1a;
							color: #fff;
							transform: translate(4px, 4px);
							&::after {
								background-image: url("../img/link-arrow-w.svg");
							}
						}
					}
					a {
						position: relative;
						display: block;
						font-size: 20px;
						font-size: 2rem;
						color: $green;
						padding: 2rem 0 2rem 5rem;
						width: 360px;
						letter-spacing: 0.1em;
						background-color: #fff;
						transition: all 0.3s ease;
						&::after {
							content: "";
							position: absolute;
							display: inline-block;
							background-image: url("../img/link-arrow.svg");
							width: 14px;
							height: 26px;
							top: 0;
							bottom: 0;
							right: 3rem;
							margin: auto;
						}
						@include md {
							width: 300px;
							padding: 1.75rem 0 1.75rem 4rem;
						}
						@include sm {
							font-size: 18px;
							font-size: 1.8rem;
							width: 260px;
							padding: 1.5rem 0 1.5rem 3rem;
						}
						@include xs {
							font-size: 18px;
							font-size: 1.8rem;
							width: 260px;
							padding: 1.25rem 0 1.25rem 2rem;
						}
					}
				}
			}
		}
		h3 {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30px;
			font-size: 3rem;
			font-weight: bold;
			color: #fff;
			border-bottom: solid 2px #fff;
			padding: 6rem 0 2.5rem;
			margin-bottom: 3rem;
			&::before {
				content: "";
				display: inline-block;
				background-image: url("../img/features-icon.svg");
				width: 50px;
				height: 50px;
				margin-right: 1.5rem;
			}
			@include md {
				font-size: 28px;
				font-size: 2.8rem;
				padding: 4.5rem 0 2rem;
				&::before {
					width: 45px;
					height: 45px;
				}
			}
			@include xs {
				font-size: 25px;
				font-size: 2.5rem;
				padding: 3.5rem 0 1.5rem;
				&::before {
					width: 40px;
					height: 40px;
				}
			}
		}
		p {
			color: #fff;
			text-align: center;
			letter-spacing: 0.04em;
			margin-bottom: 4rem;
			@include xs {
				letter-spacing: 0;
				margin-bottom: 3rem;
			}
		}
		.inner {
			&>.row {
				margin: 0 -1rem;
				&>div {
					padding: 0 1rem;
					margin-bottom: 2.5rem;
				}
			}
		}
		.data-box {
			background-color: #fff;
			text-align: center;
			padding: 2rem;
			height: 100%;
			h4 {
				font-size: 20px;
				font-size: 2rem;
				font-weight: bold;
				letter-spacing: 0.04em;
				margin-bottom: 2rem;
				@include sm {
					margin-bottom: 1.5rem;
				}
			}
			img {
				width: 310px;
				@include md {
					width: 220px;
				}
				@include sm {
					width: 190px;
				}
				@include xs {
					width: 250px;
				}
			}
			ul {
				display: inline-block;
				margin-top: 2.5rem;
				@include md {
					margin-top: 0.5rem;
				}
				@include sm {
					margin: 0;
				}
				li {
					text-align: left;
					line-height: 2;
					&::before {
						content: "・";
						color: $green;
					}
				}
			}
		}
		.feature-box {
			display: flex;
			background-color: #fff;
			height: 280px;
			@include md {
				height: 210px;
			}
			@include sm {
				height: 190px;
			}
			@include xs {
				flex-wrap: wrap;
				height: auto;
			}
			.feature-img {
				width: 43%;
				@include sm {
					width: 40%;
				}
				@include xs {
					width: 100%;
				}
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
			.feature-text {
				display: flex;
				align-items: center;
				width: 57%;
				padding-left: 5rem;
				@include lg {
					padding-left: 4rem;
				}
				@include sm {
					width: 60%;
					padding-left: 2rem;
				}
				@include xs {
					width: 100%;
					padding: 2rem;
				}
				dl {
					line-height: 1.75;
					margin: 0;
					width: 410px;
					@include lg {
						width: 360px;
					}
					@include md {
						width: 320px;
						line-height: 1.7;
					}
					@include sm {
						width: 270px;
						line-height: 1.6;
					}
					@include xs {
						width: 100%;
					}
					dt {
						font-size: 25px;
						font-size: 2.5rem;
						font-weight: bold;
						color: $green;
						margin-bottom: 2rem;
						@include lg {
							font-size: 23px;
							font-size: 2.3rem;
						}
						@include md {
							font-size: 21px;
							font-size: 2.1rem;
							margin-bottom: 1rem;
						}
						@include sm {
							font-size: 18px;
							font-size: 1.8rem;
							margin-bottom: 1rem;
						}
					}
					dd {
						color: $green;
						margin: 0;
					}
				}
			}
		}
	}
}


///*---------- MEMBERS ----------*/
#members {
	padding-bottom: 6rem;
	@include md {
		padding-bottom: 4rem;
	}
	h2 {
		margin: 8rem 0 4rem;
		@include md {
			margin: 6rem 0 4rem;
		}
		@include xs {
			margin: 4rem 0 3rem;
		}
		&+p {
			text-align: center;
			letter-spacing: 0.08em;
			margin-bottom: 3rem;
		}
	}
	.row {
		&>div {
			@include sm {
				margin-bottom: 6rem;
			}
		}
	}
	.members-box {
		position: relative;
		color: #000;
		.members-img {
			height: 420px;
			overflow: hidden;
			@include lg {
				height: 340px;
			}
			@include md {
				height: 260px;
			}
			@include sm {
				height: 340px;
			}
			@include xs {
				height: 230px;
			}
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: 0.5s;
			}	
		}
		.members-name {
			position: absolute;
			background-image: linear-gradient(90deg, rgba(51, 179, 59, 1), rgba(160, 231, 0, 1));
			color: #fff;
			width: 280px;
			margin-top: -3rem;
			margin-left: 1.5rem;
			padding: 1.5rem;
			@include md {
				width: 170px;
				padding: 1rem;
				margin-left: 1rem;
			}
			@include xs {
				width: 190px;
			}
			p {
				font-size: 14.5px;
				font-size: 1.45rem;
				line-height: 1.4;
				margin-bottom: 0;
				@include xs {
					font-size: 14px;
					font-size: 1.4rem;
				}
				span {
					display: block;
					font-size: 23.5px;
					font-size: 2.35rem;
					font-weight: 500;
					margin-top: 0.75rem;
					@include sm {
						font-size: 20px;
						font-size: 2rem;
						margin-top: 0.2rem;
					}
				}
			}
		}
		&>p {
			font-size: 18px;
			font-size: 1.8rem;
			letter-spacing: 0.04em;
			text-align: right;
			margin: 1.5rem 0 0;
			@include md {
				margin-top: 1rem;
			}
			@include xs {
				font-size: 16px;
				font-size: 1.6rem;
				margin-top: 0.5rem;
			}
		}
		&:hover {
			.members-img {
				img {
					opacity: 0.6;
					transform: scale(1.08);
				}	
			}
			.members-name {
				background-image: none;
				background-color: #000;
			}
			&>p {
				opacity: 0.6;
			}
		}
	}
}


///*---------- INFORMATION ----------*/
#info {
	padding-bottom: 10rem;
	@include md {
		padding-bottom: 8rem;
	}
	@include xs {
		padding-bottom: 6rem;
	}
	h2 {
		padding: 8rem 0 4rem;
		@include md {
			padding: 6rem 0 4rem;
		}
		@include xs {
			padding: 4rem 0 3rem;
		}
	}
	table {
		width: 100%;
		margin-bottom: 6rem;
		@include xs {
			
		}
		tr {
			border-bottom: solid 1px rgba(0,0,0,0.5);
			&:first-child {
				border-top: solid 1px rgba(0,0,0,0.5);
			}
			th {
				background-color: #dcf1dc;
				font-weight: 400;
				width: 25%;
				padding: 1rem 0 1rem 3rem;
				vertical-align: top;
				@include md {
					padding-left: 2rem;
				}
				@include sm {
					padding: 1rem;
				}
				@include xs {
					display: block;
					width: 100%;
					padding: 0.75rem;
					line-height: 1.7;
				}
			}
			td {
				padding: 1rem 0 1rem 3rem;
				@include md {
					padding-left: 2rem;
				}
				@include sm {
					padding: 1rem;
				}
				@include xs {
					display: block;
					width: 100%;
					padding: 0.75rem;
					line-height: 1.7;
				}
			}
		}
	}
	.flow {
		text-align: center;
		h3 {
			font-size: 30px;
			font-size: 3rem;
			font-weight: 600;
			letter-spacing: 0.04em;
			padding-bottom: 2.5rem;
			border-bottom: solid 2px #d3d3d3;
			@include md {
				font-size: 27px;
				font-size: 2.7rem;
				padding-bottom: 2rem;
			}
			@include xs {
				font-size: 24px;
				font-size: 2.4rem;
			}
		}
		dl {
			background-image: linear-gradient(90deg, rgba(51, 179, 59, 0.2), rgba(160, 231, 0, 0.2));
			text-align: center;
			padding: 2.5rem;
			margin-bottom: 0;
			@include md {
				padding: 2rem;
			}
			@include xs {
				padding: 1.5rem;
			}
			dt {
				font-size: 20px;
				font-size: 2rem;
				font-weight: 600;
				margin-bottom: 1rem;
				color: $green;
			}
			dd {
				margin-bottom: 0;
				
			}
			&:last-of-type {
				background-image: linear-gradient(90deg, rgba(51, 179, 59, 1), rgba(160, 231, 0, 1));
				margin-bottom: 6.5rem;
				@include xs {
					margin-bottom: 5rem;
				}
				dt {
					font-size: 30px;
					font-size: 3rem;
					color: #fff;
					@include xs {
						font-size: 27px;
						font-size: 2.7rem;
					}
				}
				dd {
					color: #fff;
				}
			}
		}
		img {
			width: 10px;
			height: 40px;
			margin: 1rem;
			@include xs {
				margin: 0.5rem;
			}
		}
		a {
			display: block;
			position: relative;
			font-family: "Josefin Sans", sans-serif;
			font-size: 25px;
			font-size: 2.5rem;
			font-weight: 600;
			color: $green;
			letter-spacing: 0.12em;
			background-color: $yellow;
			width: 60%;
			border: solid 2px $green;
			margin: 0 auto;
			padding: 2rem;
			line-height: 1;
			transition: 0.3s;
			box-shadow: 7px 7px 7px 0px rgba(0, 0, 0, 0.09);
			span {
				display: block;
				font-family: "NotoSansCJKjp";
				font-size: 16px;
				font-size: 1.6rem;
				letter-spacing: 0.04em;
				margin-top: 1rem;
			}
			&::after {
				content: "";
				position: absolute;
				display: inline-block;
				background-image: url("../img/link-arrow.svg");
				width: 14px;
				height: 26px;
				top: 0;
				bottom: 0;
				right: 3rem;
				margin: auto;
			}
			&:hover {
					box-shadow: none;
					background-color: #1a1a1a;
					color: #fff;
					transform: translate(4px, 4px);
                    border: solid 2px #fff;
					&::after {
						background-image: url("../img/link-arrow-w.svg");
					}
			}
			@include sm {
				width: 75%;
				padding: 1.5rem;
			}
			@include xs {
				font-size: 23px;
				font-size: 2.3rem;
				width: 80%;
				span {
					margin-top: 0.5rem;
				}
			}
		}
	}
}

///*---------- NEWS ----------*/
#news {
	.news-bg {
		background-image: linear-gradient(90deg, rgba(51, 179, 59, 0.2), rgba(160, 231, 0, 0.2));
		padding: 8rem 0;
		@include md {
			padding: 6rem 0;
		}
		@include xs {
			padding: 4rem 0;
		}
	}
	h2 {
		margin-bottom: 3rem;
	}
	ul {
		li {
			display: flex;
			border-bottom: solid 1px $green;
			padding: 1rem 0 1rem 3rem;
			letter-spacing: 0.1em;
			@include sm {
				padding-left: 1rem;
			}
			@include xs {
				display: block;
				line-height: 1.7;
			}
			span {
				width: 13%;
				font-size: 13px;
				font-size: 1.3rem;
				@include lg {
					width: 15%;
				}
				@include sm {
					width: 20%;
				}
				@include xs {
					display: block;
				}
			}
			&:first-of-type {
				border-top: solid 1px $green;
			}
		}
	}
}

///*---------- recruit-members ----------*/
///*---------- ul-members-main ----------*/
#ul-members-main {
//	margin-top: 65px;
	@include sm {
		background-color: #f5fcf6;
	}
	.container {
		position: relative;
	}
	.umm-img {
		width: 65vw;
		margin-left: calc(50% - 50vw);
		@include sm {
			width: 100vw;
		}
		@include xs {
			height: 270px;
		}
		img {
			width: 100%;
			@include xs {
				height: 100%;
				object-fit: cover;
			}
		}
	}
	.umm-text {
		position: absolute;
		background-image: linear-gradient(90deg, rgba(51, 179, 59, 1), rgba(160, 231, 0, 1));
		padding: 6rem 3rem;
		z-index: 2;
		top: 0;
		bottom: 0;
		right: 0;
		height: fit-content;
		margin: auto;
		width: 475px;
		@include lg {
			padding: 4rem 3rem;
		}
		@include md {
			padding: 3rem;
			width: 350px;
		}
		@include sm {
			position: inherit;
			width: 90%;
			margin-top: -6rem;			
		}
		@include xs {
			padding: 1.5rem;
		}
		h3 {
			font-size: 30px;
			font-size: 3rem;
			font-weight: 600;
			color: #fff;
			line-height: 1.75;
			text-align: left;
			margin-bottom: 2.5rem;
			&::after {
				content: "";
				display: block;
				border-bottom: solid 1px #fff;
				width: 100px;
				margin-top: 4rem;
			}
			@include lg {
				margin-bottom: 2rem;
				&::after {
					margin-top: 3rem;
				}
			}
			@include md {
				font-size: 25px;
				font-size: 2.5rem;
				&::after {
					margin-top: 2.5rem;
				}
			}
			@include xs {
				font-size: 21px;
				font-size: 2.1rem;
				margin-bottom: 1.5rem;
				&::after {
					margin-top: 1.5rem;
				}
			}
		}
		p {
			font-size: 23px;
			font-size: 2.3rem;
			color: #fff;
			margin: 0;
			@include xs {
				font-size: 20px;
				font-size: 2rem;
			}
			span {
				font-size: 14.5px;
				font-size: 1.45rem;
				vertical-align: middle;
				@include xs {
					font-size: 14px;
					font-size: 1.4rem;
				}
			}
		}
	}

}
///*---------- qanda ----------*/
#qanda {
	.qanda-contents {
		padding: 6rem 0;
		@include sm {
			padding: 4rem 0 6rem;
		}
		@include xs {
			padding: 3rem 0 5rem;
		}
		&:nth-of-type(odd) {
			background-color: #f5fcf6;
			
		}
		&:nth-of-type(even) {
		.qanda-img {
			&::before {
				left: 20px;
				@include md {
					left: 15px;
				}
				@include xs {
					left: 10px;
				}
			}
		}
		}
		.qanda-img {
			position: relative;
			img {
				width: 100%;
				z-index: 2;
				position: relative;
			}
			&::before {
				content: '';
				position: absolute;
				top: 25px;
				left: -20px;
				width: 100%;
				height: 100%;
				background-image: linear-gradient(90deg, rgba(51, 182, 59, 0.2), rgba(163, 234, 0, 0.2));
				z-index: 0;
				@include md {
					top: 20px;
					left: -15px;
				}
				@include xs {
					top: 15px;
					left: -10px;
				}
			}
		}
		.qanda-text {
			@include sm {
				margin-bottom: 2rem;
			}
			@include xs {
				margin-bottom: 1rem;
			}
			dl {
				margin-bottom: 0;
				dt {
					display: flex;
					align-items: center;
					font-size: 23.5px;
					font-size: 2.35rem;
					font-weight: 500;
					color: $green;
					margin-bottom: 4rem;
					@include md {
						font-size: 21px;
						font-size: 2.1rem;
						margin-bottom: 3rem;
					}
					@include md {
						font-size: 21px;
						font-size: 2.1rem;
						margin-bottom: 3rem;
					}
					@include xs {
						font-size: 19px;
						font-size: 1.9rem;
						margin-bottom: 2rem;
					}
					img {
						width: 95px;
						margin-right: 1.5rem;
						@include md {
							width: 65px;
						}
						@include xs {
							width: 55px;
						}
					}
					dd {
						line-height: 2.25;
						letter-spacing: 0.04em;
					}
				}
			}
		}
	}
}

///*---------- SCHEDULE ----------*/
#schedule {
	padding-bottom: 8rem;
	@include md {
		padding-bottom: 6rem;
	}
	@include xs {
		padding-bottom: 4rem;
	}
	h2 {
		margin: 8rem auto 2.5rem;
		@include xs {
			margin: 4rem auto 2.5rem;
		}
	}
	.schedule-bg {
		padding: 8rem 0;
		background-image: linear-gradient(90deg, rgba(51, 182, 59, 0.2), rgba(163, 234, 0, 0.2));
		img {
			width: 330px;
			@include xs {
				width: 300px;
			}
		}
		@include md {
			padding: 6rem 0;
		}
		@include sm {
			padding: 4rem 0;
		}
		@include xs {
			padding: 4rem 0 2rem;
		}
	}
	p {
		margin: 1rem auto 3.5rem;
	}
	a {
		position: relative;
		display: block;
		font-size: 20px;
		font-size: 2rem;
		color: $green;
		border: solid 1px $green;
		padding: 2rem 0;
		margin: 0 auto;
		width: 360px;
		letter-spacing: 0.1em;
		background-color: #fff;
		transition: all 0.3s ease;
		@include sm {
			font-size: 18px;
			font-size: 1.8rem;
			padding: 1.5rem 0;
		}
		@include xs {
			width: 90%;
		}
		&::after {
			content: "";
			position: absolute;
			display: inline-block;
			background-image: url("../img/link-arrow.svg");
			width: 14px;
			height: 26px;
			top: 0;
			bottom: 0;
			right: 3rem;
			margin: auto;
		}
		&:hover {
			box-shadow: none;
			background-color: #1a1a1a;
			color: #fff;
			transform: translate(4px, 4px);
            border: solid 2px #fff;
			&::after {
				background-image: url("../img/link-arrow-w.svg");
			}
		}
	}
}