@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-b: #5e3819;
$color-y: #daa020;
$color-bg: #f4eee8;


#ul-header {
	background-image: url("../img/recruit-header.jpg");
}

section {
	margin-bottom: 10rem;
	@include md {
		margin-bottom: 8rem;
	}
	@include xs {
		margin-bottom: 6rem;
	}
	ul {
		margin-bottom: 1.5rem;
		display: flex;
		justify-content: center;
		margin-top: 2rem;
		@include xs {
			display: block;
		}
		&::after {
			content: "など";
		}
		li {
			margin-right: 2em;
			&:last-of-type {
				margin-right: 1em;
				@include xs {
					display: inline-block;
				}
			}
			&::before {
				content: "";
				font-family: "Font Awesome 5 Free";
				content: "\f0da";
				font-weight: 900;
				padding: 0 0.5rem;
				color: $color-y;

			}
		}
	}
	h2 {
		font-family: 'Oleo Script', cursive;
		font-size: 40px;
		font-size: 4rem;
		color: $color-b;
		text-align: center;
		margin-bottom: 3rem;
		@include sm {
			font-size: 36px;
			font-size: 3.6rem;
		}
		span {
			font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
			font-family: "YuGothicPr6NM", "游ゴシック", "Yu Gothic", YuGothic;
			font-family: 'Noto Sans JP';
			font-weight: normal;
			display: block;
			color: #000;
			font-size: 14px;
			font-size: 1.4rem;
		}
	}
}

.preface {
	width: 65%;
	margin: 0 auto;
	@include lg {
		width: 80%;
	}
	@include md {
		width: 90%;
	}
	@include sm {
		width: 95%;
	}
	p {
		text-align: center;
		margin-bottom: 6rem;
		@include sm {
			margin-bottom: 4rem;
		}
		@include xs {
			text-align: justify;
		}
		&:first-of-type {
			font-size: 22px;
			font-size: 2.2rem;
			font-weight: bold;
			margin-bottom: 4rem;
			line-height: 1.4;
			color: $color-b;
			@include sm {
				font-size: 20px;
				font-size: 2rem;
				margin-bottom: 3rem;
			}
		}
	}
	h4 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22px;
		font-size: 2.2rem;
		color: $color-y;
		padding: 0 2rem;
		@include sm {
			font-size: 20px;
			font-size: 2rem;
			padding: 0;
		}
		&::before {
			content: "";
			flex-grow:1;
			border-top: 1px solid  $color-y;
			margin-right: 1em;
		}
		&::after {
			content: "";
			flex-grow:1;
			border-top: 1px solid  $color-y;
			margin-left: 1em;
		}
	}
}

//description
#description {
	.key-img {
		position: relative;
		margin-bottom: 6rem;
		img {
			height: 260px;
			object-fit: cover;
			@include md {
				height: 210px;
			}
			@include sm {
				height: 170px;
			}
		}
		h3 {
			position: absolute;
			bottom: 0;
			left: 8%;
			display: block;
			background-color: $color-y;
			color: #fff;
			margin-bottom: 0;
			padding: 0.5rem 0.5em;
			font-size: 28px;
			font-size: 2.8rem;
			@include md {
				left: 5%;
			}
			@include sm {
				font-size: 26px;
				font-size: 2.6rem;
			}
		}
		p {
			position: absolute;
			background-color: $color-y;
			color: #fff;
			left: 8%;
			padding: 0 1em;
			font-size: 16px;
			font-size: 1.6rem;
			@include md {
				left: 5%;
			}
			@include sm {
				font-size: 15px;
				font-size: 1.5rem;
			}
		}
	}
	.preface {
		width: 100%;
		div {
			width: 65%;
			margin: 0 auto;
			@include lg {
				width: 80%;
			}
			@include md {
				width: 90%;
			}
			@include sm {
				width: 95%;
			}
		}
		ul {
			padding: 0 5rem;
			@include md {
				padding: 0 2rem;
			}
			@include sm {
				padding: 0;
			}
			&::after {
				content: none;
			}
			li {
				margin: 0;
			}
		}
	}
}

//guideline
#guideline {
	background-color: #f2f2f3;
	.container {
		padding: 6rem 0;
		h2 {
			margin-bottom: 6rem;
			@include sm {
				margin-bottom: 4rem;
			}
		}
		div {
			width: 65%;
			margin: 0 auto;
			@include lg {
				width: 80%;
			}
			@include sm {
				width: 95%;
			}
			h3 {
				font-size: 28px;
				font-size: 2.8rem;
				color: $color-y;
				@include md {
					font-size: 25px;
					font-size: 2.5rem;
				}
				&::before {
					content: "";
					font-family: "Font Awesome 5 Free";
					content: "\f0da";
					font-weight: 900;
					padding-right: 1rem;
					color: $color-y;
				}
			}
			table {
				width: 100%;
				margin-bottom: 6rem;
				&:last-of-type {
					@include sm {
						margin-bottom: 2rem;
					}
				}
				tr {
					border-bottom: solid 1px #bababa;
					th {
						width: 20%;
						font-weight: 500;
						vertical-align: top;
						padding: 1em 0;
						letter-spacing: 0.08em;
						@include lg {
							padding: 1.5rem 0;
						}
						@include md {
							padding: 1rem 0;
						}
						@include xs {
							display: block;
							padding-bottom: 0;
						}
					}
					td {
						width: 80%;
						padding: 1em 0;
						letter-spacing: 0.08em;
						@include lg {
							padding: 1.5rem 0;
						}
						@include md {
							padding: 1rem 0;
							font-size: 14px;
							font-size: 1.4rem;
							line-height: 1.8;
						}
						@include xs {
							display: block;
							padding-top: 0;
							width: 100%;
							line-height: 1.6;
							padding-left: 1em;
						}
					}
				}
			}

		}
	}
}

//voice
#voice {
	.container {
		width: 75%;
		margin: 0 auto;
		@include xl {
			width: 85%;
		}
		@include lg {
			width: 90%;
		}
		img {
			width: 100%;
			padding-right: 2rem;
			@include lg {
				padding-right: 0;
			}
			@include sm {
				width: 60%;
				margin-bottom: 2rem;
			}
			@include xs {
				width: 100%;
				margin-bottom: 2rem;
			}
		}
		p {
			color: $color-b;
			font-weight: bold;
			font-size: 30px;
			font-size: 3rem;
			margin-bottom: 2rem;
			span:first-of-type {
				display: block;
				font-size: 13px;
				font-size: 1.3rem;
				font-weight: normal;
			}
			span:last-of-type {
				font-size: 60%;
			}
		}
		dl {
			dt {
				color: $color-y;
			}
			dd {
				text-align: justify;
				margin-bottom: 2rem;
			}
		}
		&> div:last-of-type {
			margin-top: 10rem;
			text-align: center;
			@include sm {
				margin-top: 6rem;
			}
			@include xs {
				margin-top: 4rem;
			}
			p {
				font-size: 20px;
				font-size: 2rem;
				margin-bottom: 1rem;
				@include sm {
					font-size: 18px;
					font-size: 1.8rem;
					margin-bottom: 0.5rem;
				}
			}
			a {
				display: block;
				width: 55%;
				margin: 0 auto;
				padding: 1rem;
				font-family: 'Oleo Script', cursive;
				font-size: 60px;
				font-size: 6rem;
				line-height: 1;
				background-color: $color-y;
				color: #fff;
				transition: 0.3s;
				@include lg {
					width: 60%;
				}
				@include md {
					width: 70%;
					font-size: 50px;
					font-size: 5rem;
				}
				@include sm {
					width: 80%;
				}
				@include xs {
					width: 100%
				}
				span {
					font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
					font-family: "YuGothicPr6NM", "游ゴシック", "Yu Gothic", YuGothic;
					font-family: 'Noto Sans JP';
					font-weight: normal;
					display: block;
					font-size: 17px;
					font-size: 1.7rem;
					@include md {
						font-size: 16px;
						font-size: 1.6rem;
					}
				}
				&:hover {
					background-color: $color-b;

				}

			}
		}
	}
}