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


//ul-header
#ul-header {
	margin-bottom: 4rem;
	@include xs {
		margin-bottom: 2rem;
	}
	.header-img {
		height: 330px;
		overflow: hidden;
		@include sm {
			height: 280px;
		}
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	h1 {
		display: inline-block;
		font-family: 'Caveat', cursive;
		font-size: 65px;
		font-size: 6.5rem;
		color: $font-color;
		background-color: #fff;
		line-height: 1;
		padding: 3rem;
		margin-top: -5.5rem;
		margin-bottom: 0;
		@include md {
			font-size: 60px;
			font-size: 6rem;
		}
		@include xs {
			font-size: 50px;
			font-size: 5rem;
			padding: 2rem 3rem;
		}
		span {
			display: block;
			font-family: "NotoSansCJKjp";
			font-size: 20px;
			font-size: 2rem;
			font-weight: 400;
			letter-spacing: 0.1em;
			line-height: 1;
			color: #333;
			margin-top: 2rem;
		}
	}
}

//departments------------------------------------------ここから
#departments {
	padding: 7.5rem 0 0;
	background-image: url("../../img/nav-bg.svg");
	background-repeat: repeat;
	background-size: 48px;
	.container {
		position: relative;
		&>img {
			position: absolute;
			&.pig-img {
				top: -20rem;
				right: 4rem;
				width: 380px;
				@include lg {
					width: 340px;
				}
				@include md {
					top: -17rem;
					right: 1rem;
					width: 300px;
				}
				@include sm {
					display: none;
				}
			}
			&.people-img {
				bottom: 0;
				right: 2rem;
				width: 600px;
				@include lg {
					width: 500px;
				}
				@include md {
					right: 0;
					width: 400px;
				}
				@include sm {
					display: none;
				}
			}
		}
	}
	.inner {
		@include sm {
			width: 80%;
		}
		@include xs {
			width: 100%;
		}
	}
	ul {
		li {
			position: relative;
			@include sm {
				margin-bottom: 25rem;
			}
			&:last-child {
				margin-bottom: 37rem;
				@include md {
					margin-bottom: 30rem;
				}
			}
			&>img {
				width: 100%;
				border-radius: 25px;
				box-shadow: 2.5px 2.5px 8px 0px rgba(0, 100, 73, 0.3);
			}
			a {
				dl {
					position: absolute;
					z-index: 2;
					background-color: #fff;
					left: 0;
					right: 0;
					width: 55%;
					border-radius: 30px;
					padding: 2rem 4rem;
					margin: -7rem auto 0;
					transition: 0.3s;
					@include lg {
						width: 60%;
						padding: 2rem 3rem;
					}
					@include md {
						width: 70%;
					}
					@include xs {
						width: 80%;
						padding: 2rem 4rem;
					}
					dt {
						font-size: 33px;
						font-size: 3.3rem;
						color: $font-color;
						text-align: center;
						border-bottom: solid 1.5px #80272D;
						padding-bottom: 1.5rem;
						margin-bottom: 2rem;
						@include lg {
							font-size: 30px;
							font-size: 3rem;
							padding-bottom: 1rem;
							margin-bottom: 1.5rem;
						}
						@include md {
							font-size: 27px;
							font-size: 2.7rem;
						}
						span {
							display: block;
							font-size: 16.5px;
							font-size: 1.65rem;
							font-weight: 400;
							margin-top: 1rem;
							@include md {
								margin-top: 0.5rem;
							}
						}
						img {
							width: 65px;
							display: block;
							margin: 0 auto;
							margin-bottom: 2rem;
							@include lg {
								margin-bottom: 1.5rem;
							}
						}
					}
					dd {
						color: #000;
						line-height: 1.75;
						text-align: justify;
						@include lg {
							line-height: 1.6;
						}
					}
				}
				&:hover {
					dl {
						background-color: #EBF9F1;
						transform: translate(0, -20px);
					}
				}
			}
		}
	}

}

//下層ページ用------------------------------------------ここから
#ul-header {
	.course {
		h1 {
			display: inline-block;
			font-family: "NotoSansCJKjp";
			font-size: 60px;
			font-size: 6rem;
			font-weight: 400;
			letter-spacing: 0.1em;
			width: 50%;
			@include lg {
				font-size: 55px;
				font-size: 5.5rem;
			}
			@include md {
				font-size: 50px;
				font-size: 5rem;
				width: 55%;
			}
			@include sm {
				font-size: 46px;
				font-size: 4.6rem;
				width: 60%;
			}
			@include xs {
				font-size: 36px;
				font-size: 3.6rem;
				padding: 2rem;
				width: 80%;
			}
			span {
				font-family: 'Caveat', cursive;
				font-size: 30px;
				font-size: 3rem;
				font-weight: 400;
				@include md {
					font-size: 27px;
					font-size: 2.7rem;
				}
			}
			.no-spacing {
				letter-spacing: 0;
			}
		}
	}
}

.explanation {
	margin-bottom: 7rem;
	h3 {
		font-family: 'Shippori Mincho', serif;
		font-size: 23px;
		font-size: 2.3rem;
		color: $font-color;
		text-align: center;
		line-height: 1.75;
		@include md {
			font-size: 20px;
			font-size: 2rem;
		}
	}
}

.mb-10 {
	margin-bottom: 10rem;
}

#goals, #major, #education, #surveying {
	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 sm {
			font-size: 28px;
			font-size: 2.8rem;
		}
		@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;
			}
		}
	}
}

#goals {
	margin-bottom: 7rem;
	p {
		text-align: justify;
	}
}

#major {
	margin-bottom: 7rem;
	table {
		width: 100%;
		th {
			font-weight: 400;
			vertical-align: top;
			color: $font-color;
			width: 10%;
			@include lg {
				width: 12%;
			}
			@include sm {
				width: 14%;
			}
			@include xs {
				width: 22%;
			}
		}
		td {
			padding-bottom: 1rem;
			text-align: justify;
		}
	}
}

#education {
	overflow: hidden;
	h2 {
		margin-bottom: 0;
	}
	.education-content {
		padding-top: 23rem;
		padding-bottom: 10rem;
		@include md {
			padding-top: 20rem;
		}
		@include sm {
			padding-top: 16rem;
		}
		@include xs {
			padding-top: 10rem;
			padding-bottom: 5rem;
		}
		&.ul-01-2 {
			padding-bottom: 5rem;
			@include sm {
				padding-bottom: 0;
			}
		}
		&.education-bg {
//			background-color: rgba(190,235,210,0.3);
			background: linear-gradient(#fff 380px, rgba(190,235,210,0.3) 1px);
			@include md {
				background: linear-gradient(#fff 300px, rgba(190,235,210,0.3) 1px);
			}
			@include sm {
				background: linear-gradient(#fff 260px, rgba(190,235,210,0.3) 1px);
			}
			@include xs {
				background: linear-gradient(#fff 175px, rgba(190,235,210,0.3) 1px);
			}
		}
		.education-header {
			position: relative;
			display: flex;
			align-items: center;
			margin-left: calc(50% - 50vw);
			margin-bottom: 6rem;
			height: 310px;
			background-repeat: no-repeat;
			background-size: cover;
			border-top-right-radius: 30px;
			border-bottom-right-radius: 30px;
			box-shadow: 0 8px 6px 0 rgba(0,0,0,0.3);
			@include md {
				height: 260px;
			}
			@include sm {
				height: 220px;
			}
			@include xs {
				height: 150px;
			}
			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				background-image: url("../../img/nav-bg-2.svg");
				background-size: 28px;
				background-repeat: repeat;
				width: 100%;
				height: 100%;
				z-index: 0;
				border-top-right-radius: 30px;
				border-bottom-right-radius: 30px;
				mix-blend-mode: screen;
			}
			&>img {
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: 2;
				@include md {
					width: 400px;
				} 
				@include sm {
					width: 325px;
				} 
				@include xs {
					width: 50%;
				} 
			}
			h3 {
				position: relative;
				font-size: 40px;
				font-size: 4rem;
				font-weight: 600;
				color: $font-color;
				z-index: 2;
				margin-left: calc(100vw - 100%);
				margin-bottom: 0;
				@include sm {
					font-size: 36px;
					font-size: 3.6rem;
				}
				@include xs {
					font-size: 30px;
					font-size: 3rem;
				}
				.caveat-18 {
					font-family: 'Caveat', cursive;
					font-size: 18px;
					font-size: 1.8rem;
					font-weight: 400;
					@include sm {
						font-size: 16px;
						font-size: 1.6rem;
					}
				}
				.noto-18 {
					font-size: 18px;
					font-size: 1.8rem;
					@include sm {
						font-size: 16px;
						font-size: 1.6rem;
					}
				}
				.noto-27 {
					font-size: 27px;
					font-size: 2.7rem;
					@include sm {
						font-size: 23px;
						font-size: 2.3rem;
					}
					@include xs {
						display: block;
						font-size: 20px;
						font-size: 2rem;
					}
				}
			}
		}
		div.row {
			margin-bottom: 8rem;
			@include sm {
				width: 85%;
				margin: 0 auto 5rem;
			}
			@include xs {
				width: 100%;
			}
			&>div {
				&:last-child {
					padding: 3rem 0 0 4rem;
					@include lg {
						padding: 1rem 0 0 1rem;
					}
					@include md {
						padding: 1rem;
					}
				}
			}
			p {
				margin-bottom: 4rem;
				text-align: justify;
				@include sm {
					margin-bottom: 2rem;
				}
				@include sm {
					margin-bottom: 2rem;
				}
			}
			.font-14 {
				font-size: 14px;
				font-size: 1.4rem;
				text-indent: -1em;
				padding-left: 1em;
			}
			img {
				width: 100%;
			}
		}
		ul.row {
			@include sm {
				width: 80%;
				margin: 0 auto;
			}
			@include xs {
				width: 95%;
			}
			h4 {
				font-size: 20px;
				font-size: 2rem;
				font-weight: 600;
				color: $font-color;
				text-align: center;
				@include md {
					font-size: 18px;
					font-size: 1.8rem;
				}
				&::after {
					content: "";
					display: block;
					width: 110px;
					left: 0;
					right: 0;
					margin: 1.5rem auto 3rem;
					border-bottom: solid 3px $base-color;
				}
				&.color-none {
					color: transparent;
					@include sm {
						display: none;
					}
					&::after {
						border-bottom: solid 3px transparent;
					}
				}
				&.positioning {
					position: relative;
					right: -50%;
					@include sm {
						position: inherit;
					}
				}
			}
			li {
				text-align: center;
				@include sm {
					margin-bottom: 3rem;
						
				}
				p {
					padding: 2rem;
					text-align: justify;
					@include sm {
						padding-bottom: 0;
					}
				}
			}
			img {
				width: 100%;
			}
		}
	}
}

//ヘッダー画像
#education {
	.ul-01-1 {
		.education-header {
			background-image: url("../01agricultural/img/agricultural-title-1.jpg");
		}
	}
	.ul-01-2 {
		.education-header {
			background-image: url("../01agricultural/img/agricultural-title-2.jpg");
		}
	}
	.ul-01-3 {
		.education-header {
			background-image: url("../01agricultural/img/agricultural-title-3.jpg");
		}
	}
	.ul-01-4 {
		.education-header {
			background-image: url("../01agricultural/img/agricultural-title-4.jpg");
		}
	}
	.ul-02-1 {
		.education-header {
			background-image: url("../02horticultural/img/horticultural-title-1.jpg");
		}
	}
	.ul-02-2 {
		.education-header {
			background-image: url("../02horticultural/img/horticultural-title-2.jpg");
		}
	}
	.ul-02-3 {
		.education-header {
			background-image: url("../02horticultural/img/horticultural-title-3.jpg");
		}
	}
	.ul-03-1 {
		.education-header {
			background-image: url("../03livestock/img/livestock-title-1.jpg");
		}
	}
	.ul-03-2 {
		.education-header {
			background-image: url("../03livestock/img/livestock-title-2.jpg");
		}
	}
	.ul-03-3 {
		.education-header {
			background-image: url("../03livestock/img/livestock-title-3.jpg");
		}
	}
	.ul-03-4 {
		.education-header {
			background-image: url("../03livestock/img/livestock-title-4.jpg");
		}
	}
	.ul-04-1 {
		.education-header {
			background-image: url("../04civil-engineering/img/civil-engineering-title-1.jpg");
		}
	}
	.ul-04-2 {
		.education-header {
			background-image: url("../04civil-engineering/img/civil-engineering-title-2.jpg");
		}
	}
	.ul-04-3 {
		.education-header {
			background-image: url("../04civil-engineering/img/civil-engineering-title-3.jpg");
		}
	}
	.ul-05-1 {
		.education-header {
			background-image: url("../05food/img/food-title-1.jpg");
		}
	}
	.ul-05-2 {
		.education-header {
			background-image: url("../05food/img/food-title-2.jpg");
		}
	}
	.ul-05-3 {
		.education-header {
			background-image: url("../05food/img/food-title-3.jpg");
		}
	}
}

//個別
#education {
	.ul-02-1 {
		.education-header {
			&>img {
				@include sm {
					right: -4.5rem;
				}
			}
		}
		div.row {
			&>div {
				&:last-child {
					position: relative;
					padding-top: 0;
					@include sm {
						padding-top: 1rem;
					}
					p {
						margin-bottom: 0;
					}
					img {
						position: absolute;
						right: 0;
						bottom: 0;
						width: 150px;
						@include lg {
							bottom: inherit;
						}
						@include md {
							width: 125px;
						}
						@include sm {
							width: 100px;
							margin-top: -1rem;
						}
					}
					
				}
			}
		}
	}
	.ul-02-2 {
		position: relative;
		padding-bottom: 0;
		ul {
			position: relative;
			z-index: 2;
			li {
				z-index: 2;
			}
		}
		&>img {
			position: absolute;
			bottom: -270px;
			right: 0;
			@include md {
				bottom: -230px;
			}		
			@include sm {
				bottom: -220px;
			}		
			@include xs {
				bottom: -180px;
			}		
		}
	}
	.ul-02-3 {
		padding-top: 10rem;
		&.education-bg {
			background: linear-gradient(#fff 260px, rgba(190, 235, 210, 0.3) 1px);
			@include md {
				background: linear-gradient(#fff 220px, rgba(190, 235, 210, 0.3) 1px);	
			}
			@include xs {
				background: linear-gradient(#fff 170px, rgba(190, 235, 210, 0.3) 1px);	
			}
		}
	}
	.ul-03-1, .ul-03-2, .ul-03-3, .ul-03-4 {
		&.education-content {
			@include lg {
				padding-top: 18rem;
			}
			@include sm {
				padding-top: 10rem;
			}
		}
		&.education-bg {
			@include lg {
				background: linear-gradient(#fff 320px, rgba(190, 235, 210, 0.3) 1px);
			}
			@include md {
				background: linear-gradient(#fff 285px, rgba(190, 235, 210, 0.3) 1px);
			}
			@include sm {
				background: linear-gradient(#fff 190px, rgba(190, 235, 210, 0.3) 1px);
			}
			@include xs {
				background: linear-gradient(#fff 170px, rgba(190, 235, 210, 0.3) 1px);	
			}
		}
		.education-header {
			&>img {
				@include lg {
					width: 570px;
					right: -10rem;
				}
				@include md {
					width: 470px;
					right: -5rem;
				}
				@include sm {
					width: 325px;
				}
				@include xs {
					width: 60%;
					right: -3rem;
				}
			}
		}
	}
	.ul-04-1, .ul-04-2, .ul-04-3 {
		&.education-content {
			@include lg {
				padding-top: 18rem;
			}
			@include sm {
				padding-top: 10rem;
			}
		}
		&.education-bg {
			@include lg {
				background: linear-gradient(#fff 320px, rgba(190, 235, 210, 0.3) 1px);
			}
			@include md {
				background: linear-gradient(#fff 285px, rgba(190, 235, 210, 0.3) 1px);
			}
			@include sm {
				background: linear-gradient(#fff 190px, rgba(190, 235, 210, 0.3) 1px);
			}
			@include xs {
				background: linear-gradient(#fff 170px, rgba(190, 235, 210, 0.3) 1px);	
			}
		}
		.education-header {
			&>img {
				@include lg {
					width: 570px;
					right: -3rem;
				}
				@include md {
					width: 470px;
					right: 0;
				}
				@include sm {
					width: 325px;
				}
				@include xs {
					width: 60%;
					right: -3.5rem;
				}
			}
		}
	}
}

#surveying {
	padding-bottom: 10rem;
	div.row {
		margin-bottom: 8rem;
		@include sm {
			width: 85%;
			margin: 0 auto 5rem;
		}
		@include xs {
			width: 100%;
		}
		&>div {
			&:last-child {
				padding: 3rem 0 0 4rem;
				@include lg {
					padding: 1rem 0 0 1rem;
				}
				@include md {
					padding: 1rem;
				}
			}
		}
		p {
			margin-bottom: 4rem;
			text-align: justify;
			@include sm {
				margin-bottom: 2rem;
			}
			@include sm {
				margin-bottom: 2rem;
			}
		}
		.font-14 {
			font-size: 14px;
			font-size: 1.4rem;
			text-indent: -1em;
			padding-left: 1em;
		}
		img {
			width: 100%;
		}
	}
	ul.row {
		@include sm {
			width: 80%;
			margin: 0 auto;
		}
		@include xs {
			width: 95%;
		}
		h4 {
			font-size: 20px;
			font-size: 2rem;
			font-weight: 600;
			color: $font-color;
			text-align: center;
			@include md {
				font-size: 18px;
				font-size: 1.8rem;
			}
			&::after {
				content: "";
				display: block;
				width: 110px;
				left: 0;
				right: 0;
				margin: 1.5rem auto 3rem;
				border-bottom: solid 3px $base-color;
			}
			&.color-none {
				color: transparent;
				@include sm {
					display: none;
				}
				&::after {
					border-bottom: solid 3px transparent;
				}
			}
			&.positioning {
				position: relative;
				right: -50%;
				@include sm {
					position: inherit;
				}
			}
		}
		li {
			text-align: center;
			@include sm {
				margin-bottom: 3rem;

			}
			p {
				padding: 2rem;
				text-align: justify;
				@include sm {
					padding-bottom: 0;
				}
			}
		}
		img {
			width: 100%;
		}
	}
}