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

$base-color: #28BE69;
$font-color: #006449;

h2 {
	position: relative;
	font-size: 30px;
	font-size: 3rem;
	font-weight: 400;
	color: $font-color;
	text-align: left;
	padding-top: 2.5rem;
	margin-bottom: 4rem;
	@include xs {
		font-size: 26px;
		font-size: 2.6rem;
		margin-bottom: 2rem;
	}
	&::before {
		content: "";
		border-top: solid 2.8px $base-color;
		position: absolute;
		top: 0;
		width: 123px;
		@include xs {
			width: 100px;
		}
	}
}


//in-page
#in-page {
	margin-bottom: 8rem;
	@include xs {
		margin-bottom: 6rem;
	}
	ul {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 0;
		@include xs {
			flex-wrap: wrap;
		}
		li {
			margin-left: 1em;
			letter-spacing: 0.1em;
			@include xs {
				width: 100%;
				margin-left: 2em;
			}
			span {
				color: $font-color;
			}
			a {
				color: #333;
				&:hover {
					color: $font-color;
				}
			}
		}
	}
}

//greeting
#greeting {
	padding-bottom: 16rem;
	overflow: hidden;
	@include md {
		padding-bottom: 10rem;
	}
	@include xs {
		padding-bottom: 6rem;
	}
	h2 {
		@include xs {
			margin-bottom: 2rem;
		}
	}
	.greeting-contents {
		position: relative;
		background-image: url("../img/01-greeting-bg.jpg"); 
		background-size: cover;
		@include md {
			background: none;
		}
		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			background-image: url("../../img/nav-bg.svg");
			background-size: 24px;
			background-repeat: repeat;
			width: 100%;
			height: 100%;
			z-index: 0;
			@include md {
				content: none;
			}
		}
		.row {
			&>div {
				position: relative;
				z-index: 1;
				padding-top: 4rem;
				padding-bottom: 4rem;
				@include lg {
					padding-top: 3rem;
					padding-bottom: 3rem;
				}
				@include md {
					padding-top: 1rem;
				}
				img {
					position: absolute;
					bottom: 0;
					@include lg {
						left: -1rem;
					}
					@include md {
						position: relative;
						left: 0;
						width: 100%;
					}
				}
				p {
					text-align: justify;
					line-height: 1.75;
				}
				.signature {
					font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
					font-size: 18px;
					font-size: 1.8rem;
					line-height: 1.9;
					margin: 2rem auto 0;
					span {
						font-size: 25px;
						font-size: 2.5rem;
					}
				}
				&:last-child {
					padding-right: 10rem;
					@include lg {
						padding-right: 1.5rem;
					}
				}
			}
		}
	}
	.plant {
		position: relative;
		img {
			position: absolute;
			width: 260px;
			top: -3rem;
			right: 0;
			@include md {
				width: 230px;
				top: -10rem;
				right: -1rem;
			}
			@include xs {
				width: 200px;
			}
		}
	}
}


//peg
#peg {
	margin-bottom: 10rem;
	@include xs {
		margin-bottom: 6rem;
	}
	h2 {
		margin-bottom: 8rem;
		@include xs {
			margin-bottom: 4rem;
		}
	}
	ul {
		display: flex;
		justify-content: space-between;
		width: 70%;
		margin: 0 auto 12rem;
		@include lg {
			width: 85%;
		}
		@include md {
			margin-bottom: 8rem;
		}
		@include sm {
			width: 90%;
		}
		@include xs {
			display: inline-block;
			text-align: center;
			margin-bottom: 4rem;
		}
		li {
			position: relative;
			display: inline-block;
			font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
			font-size: 48px;
			font-size: 4.8rem;
			line-height: 1;
			padding-bottom: 2rem;
			border-bottom: solid 1.5px #80272D;
			@include md {
				font-size: 43px;
				font-size: 4.3rem;
			}
			@include sm {
				font-size: 36px;
				font-size: 3.6rem;
			}
			@include xs {
				font-size: 30px;
				font-size: 3rem;
				margin: 3rem 5rem;
			}
			&::after {
				content: "";
				position: absolute;
				top: 3rem;
				left: 3rem;
				background-image: url("../../img/nav-bg.svg");
				background-size: 48px;
				background-repeat: repeat;
				width: 112%;
				height: 107%;
				z-index: 0;
				@include xs {
					top: 2.5rem;
					left: 2.5rem;
					background-size: 29px;
				}
			}
		}
	}
	p {
		font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
		font-size: 25px;
		font-size: 2.5rem;
		text-align: center;
		line-height: 2.6;
	}
}

//access
#access {
	margin-bottom: 16rem;
	@include xs {
		margin-bottom: 12rem;
	}
	h2 {
		margin-bottom: 0;
		@include sm {
			margin-bottom: 3rem;
		}
	}
	.row {
		margin-top: -3rem;
		margin-bottom: 2rem;
		align-items: flex-end;
		@include sm {
			margin-top: 0;
		}
		&>div {
			@include sm {
				text-align: center;
			}
		}
		dl {
			margin-bottom: 0;
			dt {
				font-size: 24px;
				font-size: 2.4rem;
				font-weight: 400;
				margin-bottom: 1.5rem;
			}
			dd {
				font-size: 18px;
				font-size: 1.8rem;
				margin-bottom: 0;
			}
		}
		a {
			color: $font-color;
			margin-right: 1em;
		}
		img {
			@include sm {
				width: 80%;
				margin-top: 2rem;
			}
		}
	}
	iframe {
		height: 330px;
		@include md {
			height: 300px;
		}
		@include sm {
			height: 270px;
		}
	}
}

//history
#history {
	position: relative;
	background-image: url("../img/01-history-bg.png");
	background-position: right;
	background-repeat: no-repeat;
	background-size: contain;
	padding-bottom: 12rem;
	margin-bottom: 14rem;
	@include md {
		padding-bottom: 8rem;
	}
	@include sm {
		background-image: none;
	}
	@include xs {
		margin-bottom: 10rem;
	}
	&::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		background-image: url("../../img/nav-bg.svg");
		background-size: 48px;
		background-repeat: repeat;
		width: 100%;
		height: 100%;
	}
	h2 {
		margin-bottom: 10rem;
		@include md {
			margin-bottom: 6rem;
		}
		@include xs {
			margin-bottom: 4rem;
		}
	}
	table {
		position: relative;
		width: 100%;
		z-index: 2;
		th {
			width: 15%;
			font-weight: 400;
			vertical-align: top;
			@include md {
				width: 17%;
			}
			@include sm {
				display: block;
				width: 100%;
				background-color: $base-color;
				color: #fff;
				padding-left: 1rem;
			}
		}
		td {
			line-height: 1.75;
			@include sm {
				display: block;
				width: 100%;
				padding: 1rem 1rem 2rem;
			}
		}
	}
}

//uniform
#uniform {
	margin-bottom: 8rem;
	.row {
		text-align: center;
		&>div {
			margin-bottom: 4rem;
		}
		img {
			margin-bottom: 4rem;
			@include xs {
				margin-bottom: 2rem;
			}
		}
		dl {
			display: inline-block;
			color: #000;
			line-height: 1;
			dt {
				font-size: 30px;
				font-size: 3rem;
				font-weight: 400;
				border-bottom: solid 1.5px #80272D;
				padding: 0 1rem 1.5rem;
			}
			dd {
				margin-top: 1.7rem;
			}
		}
	}
}